Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1435 files changed, 180120 insertions, 0 deletions

diff --git a/devtools/client/inspector/animation/actions/animations.js b/devtools/client/inspector/animation/actions/animations.js
new file mode 100644
index 0000000000..3604630441
--- /dev/null
+++ b/devtools/client/inspector/animation/actions/animations.js
@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_ANIMATIONS,
+  UPDATE_DETAIL_VISIBILITY,
+  UPDATE_ELEMENT_PICKER_ENABLED,
+  UPDATE_HIGHLIGHTED_NODE,
+  UPDATE_PLAYBACK_RATES,
+  UPDATE_SELECTED_ANIMATION,
+  UPDATE_SIDEBAR_SIZE,
+} = require("resource://devtools/client/inspector/animation/actions/index.js");
+
+module.exports = {
+  /**
+   * Update the list of animation in the animation inspector.
+   */
+  updateAnimations(animations) {
+    return {
+      type: UPDATE_ANIMATIONS,
+      animations,
+    };
+  },
+
+  /**
+   * Update visibility of detail pane.
+   */
+  updateDetailVisibility(detailVisibility) {
+    return {
+      type: UPDATE_DETAIL_VISIBILITY,
+      detailVisibility,
+    };
+  },
+
+  /**
+   * Update the state of element picker in animation inspector.
+   */
+  updateElementPickerEnabled(elementPickerEnabled) {
+    return {
+      type: UPDATE_ELEMENT_PICKER_ENABLED,
+      elementPickerEnabled,
+    };
+  },
+
+  /**
+   * Update the highlighted node.
+   */
+  updateHighlightedNode(nodeFront) {
+    return {
+      type: UPDATE_HIGHLIGHTED_NODE,
+      highlightedNode: nodeFront ? nodeFront.actorID : null,
+    };
+  },
+
+  /**
+   * Update the playback rates.
+   */
+  updatePlaybackRates() {
+    return {
+      type: UPDATE_PLAYBACK_RATES,
+    };
+  },
+
+  /**
+   * Update selected animation.
+   */
+  updateSelectedAnimation(selectedAnimation) {
+    return {
+      type: UPDATE_SELECTED_ANIMATION,
+      selectedAnimation,
+    };
+  },
+
+  /**
+   * Update the sidebar size.
+   */
+  updateSidebarSize(sidebarSize) {
+    return {
+      type: UPDATE_SIDEBAR_SIZE,
+      sidebarSize,
+    };
+  },
+};
diff --git a/devtools/client/inspector/animation/actions/index.js b/devtools/client/inspector/animation/actions/index.js
new file mode 100644
index 0000000000..572071604c
--- /dev/null
+++ b/devtools/client/inspector/animation/actions/index.js
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Update the list of animation.
+    "UPDATE_ANIMATIONS",
+
+    // Update visibility of detail pane.
+    "UPDATE_DETAIL_VISIBILITY",
+
+    // Update state of the picker enabled.
+    "UPDATE_ELEMENT_PICKER_ENABLED",
+
+    // Update highlighted node.
+    "UPDATE_HIGHLIGHTED_NODE",
+
+    // Update playback rate.
+    "UPDATE_PLAYBACK_RATES",
+
+    // Update selected animation.
+    "UPDATE_SELECTED_ANIMATION",
+
+    // Update sidebar size.
+    "UPDATE_SIDEBAR_SIZE",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/animation/actions/moz.build b/devtools/client/inspector/animation/actions/moz.build
new file mode 100644
index 0000000000..f43007dd6e
--- /dev/null
+++ b/devtools/client/inspector/animation/actions/moz.build
@@ -0,0 +1,8 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "animations.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/animation/animation.js b/devtools/client/inspector/animation/animation.js
new file mode 100644
index 0000000000..c0f5d389d0
--- /dev/null
+++ b/devtools/client/inspector/animation/animation.js
@@ -0,0 +1,802 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+const App = createFactory(
+  require("resource://devtools/client/inspector/animation/components/App.js")
+);
+const CurrentTimeTimer = require("resource://devtools/client/inspector/animation/current-time-timer.js");
+
+const animationsReducer = require("resource://devtools/client/inspector/animation/reducers/animations.js");
+const {
+  updateAnimations,
+  updateDetailVisibility,
+  updateElementPickerEnabled,
+  updateHighlightedNode,
+  updatePlaybackRates,
+  updateSelectedAnimation,
+  updateSidebarSize,
+} = require("resource://devtools/client/inspector/animation/actions/animations.js");
+const {
+  hasAnimationIterationCountInfinite,
+  hasRunningAnimation,
+} = require("resource://devtools/client/inspector/animation/utils/utils.js");
+
+class AnimationInspector {
+  constructor(inspector, win) {
+    this.inspector = inspector;
+    this.win = win;
+
+    this.inspector.store.injectReducer("animations", animationsReducer);
+
+    this.addAnimationsCurrentTimeListener =
+      this.addAnimationsCurrentTimeListener.bind(this);
+    this.getAnimatedPropertyMap = this.getAnimatedPropertyMap.bind(this);
+    this.getAnimationsCurrentTime = this.getAnimationsCurrentTime.bind(this);
+    this.getComputedStyle = this.getComputedStyle.bind(this);
+    this.getNodeFromActor = this.getNodeFromActor.bind(this);
+    this.removeAnimationsCurrentTimeListener =
+      this.removeAnimationsCurrentTimeListener.bind(this);
+    this.rewindAnimationsCurrentTime =
+      this.rewindAnimationsCurrentTime.bind(this);
+    this.selectAnimation = this.selectAnimation.bind(this);
+    this.setAnimationsCurrentTime = this.setAnimationsCurrentTime.bind(this);
+    this.setAnimationsPlaybackRate = this.setAnimationsPlaybackRate.bind(this);
+    this.setAnimationsPlayState = this.setAnimationsPlayState.bind(this);
+    this.setDetailVisibility = this.setDetailVisibility.bind(this);
+    this.setHighlightedNode = this.setHighlightedNode.bind(this);
+    this.setSelectedNode = this.setSelectedNode.bind(this);
+    this.simulateAnimation = this.simulateAnimation.bind(this);
+    this.simulateAnimationForKeyframesProgressBar =
+      this.simulateAnimationForKeyframesProgressBar.bind(this);
+    this.toggleElementPicker = this.toggleElementPicker.bind(this);
+    this.update = this.update.bind(this);
+    this.onAnimationStateChanged = this.onAnimationStateChanged.bind(this);
+    this.onAnimationsCurrentTimeUpdated =
+      this.onAnimationsCurrentTimeUpdated.bind(this);
+    this.onAnimationsMutation = this.onAnimationsMutation.bind(this);
+    this.onCurrentTimeTimerUpdated = this.onCurrentTimeTimerUpdated.bind(this);
+    this.onElementPickerStarted = this.onElementPickerStarted.bind(this);
+    this.onElementPickerStopped = this.onElementPickerStopped.bind(this);
+    this.onNavigate = this.onNavigate.bind(this);
+    this.onSidebarResized = this.onSidebarResized.bind(this);
+    this.onSidebarSelectionChanged = this.onSidebarSelectionChanged.bind(this);
+    this.onTargetAvailable = this.onTargetAvailable.bind(this);
+
+    EventEmitter.decorate(this);
+    this.emitForTests = this.emitForTests.bind(this);
+
+    this.initComponents();
+    this.initListeners();
+  }
+
+  initComponents() {
+    const {
+      addAnimationsCurrentTimeListener,
+      emitForTests: emitEventForTest,
+      getAnimatedPropertyMap,
+      getAnimationsCurrentTime,
+      getComputedStyle,
+      getNodeFromActor,
+      isAnimationsRunning,
+      removeAnimationsCurrentTimeListener,
+      rewindAnimationsCurrentTime,
+      selectAnimation,
+      setAnimationsCurrentTime,
+      setAnimationsPlaybackRate,
+      setAnimationsPlayState,
+      setDetailVisibility,
+      setHighlightedNode,
+      setSelectedNode,
+      simulateAnimation,
+      simulateAnimationForKeyframesProgressBar,
+      toggleElementPicker,
+    } = this;
+
+    const direction = this.win.document.dir;
+
+    this.animationsCurrentTimeListeners = [];
+    this.isCurrentTimeSet = false;
+
+    const provider = createElement(
+      Provider,
+      {
+        id: "animationinspector",
+        key: "animationinspector",
+        store: this.inspector.store,
+      },
+      App({
+        addAnimationsCurrentTimeListener,
+        direction,
+        emitEventForTest,
+        getAnimatedPropertyMap,
+        getAnimationsCurrentTime,
+        getComputedStyle,
+        getNodeFromActor,
+        isAnimationsRunning,
+        removeAnimationsCurrentTimeListener,
+        rewindAnimationsCurrentTime,
+        selectAnimation,
+        setAnimationsCurrentTime,
+        setAnimationsPlaybackRate,
+        setAnimationsPlayState,
+        setDetailVisibility,
+        setHighlightedNode,
+        setSelectedNode,
+        simulateAnimation,
+        simulateAnimationForKeyframesProgressBar,
+        toggleElementPicker,
+      })
+    );
+    this.provider = provider;
+  }
+
+  async initListeners() {
+    await this.inspector.commands.targetCommand.watchTargets({
+      types: [this.inspector.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+    });
+
+    this.inspector.on("new-root", this.onNavigate);
+    this.inspector.selection.on("new-node-front", this.update);
+    this.inspector.sidebar.on("select", this.onSidebarSelectionChanged);
+    this.inspector.toolbox.on("select", this.onSidebarSelectionChanged);
+    this.inspector.toolbox.on(
+      "inspector-sidebar-resized",
+      this.onSidebarResized
+    );
+    this.inspector.toolbox.nodePicker.on(
+      "picker-started",
+      this.onElementPickerStarted
+    );
+    this.inspector.toolbox.nodePicker.on(
+      "picker-stopped",
+      this.onElementPickerStopped
+    );
+  }
+
+  destroy() {
+    this.setAnimationStateChangedListenerEnabled(false);
+    this.inspector.off("new-root", this.onNavigate);
+    this.inspector.selection.off("new-node-front", this.update);
+    this.inspector.sidebar.off("select", this.onSidebarSelectionChanged);
+    this.inspector.toolbox.off(
+      "inspector-sidebar-resized",
+      this.onSidebarResized
+    );
+    this.inspector.toolbox.nodePicker.off(
+      "picker-started",
+      this.onElementPickerStarted
+    );
+    this.inspector.toolbox.nodePicker.off(
+      "picker-stopped",
+      this.onElementPickerStopped
+    );
+    this.inspector.toolbox.off("select", this.onSidebarSelectionChanged);
+
+    if (this.animationsFront) {
+      this.animationsFront.off("mutations", this.onAnimationsMutation);
+    }
+
+    if (this.simulatedAnimation) {
+      this.simulatedAnimation.cancel();
+      this.simulatedAnimation = null;
+    }
+
+    if (this.simulatedElement) {
+      this.simulatedElement.remove();
+      this.simulatedElement = null;
+    }
+
+    if (this.simulatedAnimationForKeyframesProgressBar) {
+      this.simulatedAnimationForKeyframesProgressBar.cancel();
+      this.simulatedAnimationForKeyframesProgressBar = null;
+    }
+
+    this.stopAnimationsCurrentTimeTimer();
+
+    this.inspector = null;
+    this.win = null;
+  }
+
+  get state() {
+    return this.inspector.store.getState().animations;
+  }
+
+  addAnimationsCurrentTimeListener(listener) {
+    this.animationsCurrentTimeListeners.push(listener);
+  }
+
+  /**
+   * This function calls AnimationsFront.setCurrentTimes with considering the createdTime.
+   *
+   * @param {Number} currentTime
+   */
+  async doSetCurrentTimes(currentTime) {
+    const { animations, timeScale } = this.state;
+    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.
+   *         {
+   *           value: {String} style,
+   *           offset: {Number} offset of keyframe,
+   *           easing: {String} easing from this keyframe to next keyframe,
+   *           distance: {Number} use as y coordinate in graph,
+   *         }
+   */
+  getAnimatedPropertyMap(animation) {
+    const properties = animation.state.properties;
+    const animatedPropertyMap = new Map();
+
+    for (const { name, values } of properties) {
+      const keyframes = values.map(
+        ({ value, offset, easing, distance = 0 }) => {
+          offset = parseFloat(offset.toFixed(3));
+          return { value, offset, easing, distance };
+        }
+      );
+
+      animatedPropertyMap.set(name, keyframes);
+    }
+
+    return animatedPropertyMap;
+  }
+
+  getAnimationsCurrentTime() {
+    return this.currentTime;
+  }
+
+  /**
+   * Return the computed style of the specified property after setting the given styles
+   * to the simulated element.
+   *
+   * @param {String} property
+   *        CSS property name (e.g. text-align).
+   * @param {Object} styles
+   *        Map of CSS property name and value.
+   * @return {String}
+   *         Computed style of property.
+   */
+  getComputedStyle(property, styles) {
+    this.simulatedElement.style.cssText = "";
+
+    for (const propertyName in styles) {
+      this.simulatedElement.style.setProperty(
+        propertyName,
+        styles[propertyName]
+      );
+    }
+
+    return this.win
+      .getComputedStyle(this.simulatedElement)
+      .getPropertyValue(property);
+  }
+
+  getNodeFromActor(actorID) {
+    if (!this.inspector) {
+      return Promise.reject("Animation inspector already destroyed");
+    }
+
+    return this.inspector.walker.getNodeFromActor(actorID, ["node"]);
+  }
+
+  isPanelVisible() {
+    return (
+      this.inspector &&
+      this.inspector.toolbox &&
+      this.inspector.sidebar &&
+      this.inspector.toolbox.currentToolId === "inspector" &&
+      this.inspector.sidebar.getCurrentTabID() === "animationinspector"
+    );
+  }
+
+  onAnimationStateChanged() {
+    // Simply update the animations since the state has already been updated.
+    this.fireUpdateAction([...this.state.animations]);
+  }
+
+  /**
+   * This method should call when the current time is changed.
+   * Then, dispatches the current time to listeners that are registered
+   * by addAnimationsCurrentTimeListener.
+   *
+   * @param {Number} currentTime
+   */
+  onAnimationsCurrentTimeUpdated(currentTime) {
+    this.currentTime = currentTime;
+
+    for (const listener of this.animationsCurrentTimeListeners) {
+      listener(currentTime);
+    }
+  }
+
+  /**
+   * This method is called when the current time proceed by CurrentTimeTimer.
+   *
+   * @param {Number} currentTime
+   * @param {Bool} shouldStop
+   */
+  onCurrentTimeTimerUpdated(currentTime, shouldStop) {
+    if (shouldStop) {
+      this.setAnimationsCurrentTime(currentTime, true);
+    } else {
+      this.onAnimationsCurrentTimeUpdated(currentTime);
+    }
+  }
+
+  async onAnimationsMutation(changes) {
+    let animations = [...this.state.animations];
+    const addedAnimations = [];
+
+    for (const { type, player: animation } of changes) {
+      if (type === "added") {
+        if (!animation.state.type) {
+          // This animation was added but removed immediately.
+          continue;
+        }
+
+        addedAnimations.push(animation);
+        animation.on("changed", this.onAnimationStateChanged);
+      } else if (type === "removed") {
+        const index = animations.indexOf(animation);
+
+        if (index < 0) {
+          // This animation was added but removed immediately.
+          continue;
+        }
+
+        animations.splice(index, 1);
+        animation.off("changed", this.onAnimationStateChanged);
+      }
+    }
+
+    // Update existing other animations as well since the currentTime would be proceeded
+    // sice the scrubber position is related the currentTime.
+    // Also, don't update the state of removed animations since React components
+    // may refer to the same instance still.
+    try {
+      animations = await this.refreshAnimationsState(animations);
+    } catch (_) {
+      console.error(`Updating Animations failed`);
+      return;
+    }
+
+    this.fireUpdateAction(animations.concat(addedAnimations));
+  }
+
+  onElementPickerStarted() {
+    this.inspector.store.dispatch(updateElementPickerEnabled(true));
+  }
+
+  onElementPickerStopped() {
+    this.inspector.store.dispatch(updateElementPickerEnabled(false));
+  }
+
+  onNavigate() {
+    if (!this.isPanelVisible()) {
+      return;
+    }
+
+    this.inspector.store.dispatch(updatePlaybackRates());
+  }
+
+  async onSidebarSelectionChanged() {
+    const isPanelVisibled = this.isPanelVisible();
+
+    if (this.wasPanelVisibled === isPanelVisibled) {
+      // onSidebarSelectionChanged is called some times even same state
+      // from sidebar and toolbar.
+      return;
+    }
+
+    this.wasPanelVisibled = isPanelVisibled;
+
+    if (this.isPanelVisible()) {
+      await this.update();
+      this.onSidebarResized(null, this.inspector.getSidebarSize());
+    } else {
+      this.stopAnimationsCurrentTimeTimer();
+      this.setAnimationStateChangedListenerEnabled(false);
+    }
+  }
+
+  onSidebarResized(size) {
+    if (!this.isPanelVisible()) {
+      return;
+    }
+
+    this.inspector.store.dispatch(updateSidebarSize(size));
+  }
+
+  async onTargetAvailable({ targetFront }) {
+    if (targetFront.isTopLevel) {
+      this.animationsFront = await targetFront.getFront("animations");
+      this.animationsFront.setWalkerActor(this.inspector.walker);
+      this.animationsFront.on("mutations", this.onAnimationsMutation);
+
+      await this.update();
+    }
+  }
+
+  removeAnimationsCurrentTimeListener(listener) {
+    this.animationsCurrentTimeListeners =
+      this.animationsCurrentTimeListeners.filter(l => l !== listener);
+  }
+
+  async rewindAnimationsCurrentTime() {
+    const { timeScale } = this.state;
+    await this.setAnimationsCurrentTime(timeScale.zeroPositionTime, true);
+  }
+
+  selectAnimation(animation) {
+    this.inspector.store.dispatch(updateSelectedAnimation(animation));
+  }
+
+  async setSelectedNode(nodeFront) {
+    if (this.inspector.selection.nodeFront === nodeFront) {
+      return;
+    }
+
+    await this.inspector
+      .getCommonComponentProps()
+      .setSelectedNode(nodeFront, { reason: "animation-panel" });
+  }
+
+  async setAnimationsCurrentTime(currentTime, shouldRefresh) {
+    this.stopAnimationsCurrentTimeTimer();
+    this.onAnimationsCurrentTimeUpdated(currentTime);
+
+    if (!shouldRefresh && this.isCurrentTimeSet) {
+      return;
+    }
+
+    let animations = this.state.animations;
+    this.isCurrentTimeSet = true;
+
+    try {
+      await this.doSetCurrentTimes(currentTime);
+      animations = await this.refreshAnimationsState(animations);
+    } catch (e) {
+      // Expected if we've already been destroyed or other node have been selected
+      // in the meantime.
+      console.error(e);
+      return;
+    }
+
+    this.isCurrentTimeSet = false;
+
+    if (shouldRefresh) {
+      this.fireUpdateAction(animations);
+    }
+  }
+
+  async setAnimationsPlaybackRate(playbackRate) {
+    if (!this.inspector) {
+      return; // Already destroyed or another node selected.
+    }
+
+    let animations = this.state.animations;
+    // "changed" event on each animation will fire respectively when the playback
+    // rate changed. Since for each occurrence of event, change of UI is urged.
+    // To avoid this, disable the listeners once in order to not capture the event.
+    this.setAnimationStateChangedListenerEnabled(false);
+    try {
+      await this.animationsFront.setPlaybackRates(animations, playbackRate);
+      animations = await this.refreshAnimationsState(animations);
+    } catch (e) {
+      // Expected if we've already been destroyed or another node has been
+      // selected in the meantime.
+      console.error(e);
+      return;
+    } finally {
+      this.setAnimationStateChangedListenerEnabled(true);
+    }
+
+    if (animations) {
+      await this.fireUpdateAction(animations);
+    }
+  }
+
+  async setAnimationsPlayState(doPlay) {
+    if (!this.inspector) {
+      return; // Already destroyed or another node selected.
+    }
+
+    let { animations, timeScale } = this.state;
+
+    try {
+      if (
+        doPlay &&
+        animations.every(
+          animation =>
+            timeScale.getEndTime(animation) <= animation.state.currentTime
+        )
+      ) {
+        await this.doSetCurrentTimes(timeScale.zeroPositionTime);
+      }
+
+      if (doPlay) {
+        await this.animationsFront.playSome(animations);
+      } else {
+        await this.animationsFront.pauseSome(animations);
+      }
+
+      animations = await this.refreshAnimationsState(animations);
+    } catch (e) {
+      // Expected if we've already been destroyed or other node have been selected
+      // in the meantime.
+      console.error(e);
+      return;
+    }
+
+    await this.fireUpdateAction(animations);
+  }
+
+  /**
+   * Enable/disable the animation state change listener.
+   * If set true, observe "changed" event on current animations.
+   * Otherwise, quit observing the "changed" event.
+   *
+   * @param {Bool} isEnabled
+   */
+  setAnimationStateChangedListenerEnabled(isEnabled) {
+    if (!this.inspector) {
+      return; // Already destroyed.
+    }
+    if (isEnabled) {
+      for (const animation of this.state.animations) {
+        animation.on("changed", this.onAnimationStateChanged);
+      }
+    } else {
+      for (const animation of this.state.animations) {
+        animation.off("changed", this.onAnimationStateChanged);
+      }
+    }
+  }
+
+  setDetailVisibility(isVisible) {
+    this.inspector.store.dispatch(updateDetailVisibility(isVisible));
+  }
+
+  /**
+   * Persistently highlight the given node identified with a unique selector.
+   * If no node is provided, hide any persistent highlighter.
+   *
+   * @param {NodeFront} nodeFront
+   */
+  async setHighlightedNode(nodeFront) {
+    await this.inspector.highlighters.hideHighlighterType(
+      this.inspector.highlighters.TYPES.SELECTOR
+    );
+
+    if (nodeFront) {
+      const selector = await nodeFront.getUniqueSelector();
+      if (!selector) {
+        console.warn(
+          `Couldn't get unique selector for NodeFront: ${nodeFront.actorID}`
+        );
+        return;
+      }
+
+      /**
+       * NOTE: Using a Selector Highlighter here because only one Box Model Highlighter
+       * can be visible at a time. The Box Model Highlighter is shown when hovering nodes
+       * which would cause this persistent highlighter to be hidden unexpectedly.
+       * This limitation of one highlighter type a time should be solved by switching
+       * to a highlighter by role approach (Bug 1663443).
+       */
+      await this.inspector.highlighters.showHighlighterTypeForNode(
+        this.inspector.highlighters.TYPES.SELECTOR,
+        nodeFront,
+        {
+          hideInfoBar: true,
+          hideGuides: true,
+          selector,
+        }
+      );
+    }
+
+    this.inspector.store.dispatch(updateHighlightedNode(nodeFront));
+  }
+
+  /**
+   * Returns simulatable animation by given parameters.
+   * The returned animation is implementing Animation interface of Web Animation API.
+   * https://drafts.csswg.org/web-animations/#the-animation-interface
+   *
+   * @param {Array} keyframes
+   *        e.g. [{ opacity: 0 }, { opacity: 1 }]
+   * @param {Object} effectTiming
+   *        e.g. { duration: 1000, fill: "both" }
+   * @param {Boolean} isElementNeeded
+   *        true:  create animation with an element.
+   *               If want to know computed value of the element, turn on.
+   *        false: create animation without an element,
+   *               If need to know only timing progress.
+   * @return {Animation}
+   *         https://drafts.csswg.org/web-animations/#the-animation-interface
+   */
+  simulateAnimation(keyframes, effectTiming, isElementNeeded) {
+    // Don't simulate animation if the animation inspector is already destroyed.
+    if (!this.win) {
+      return null;
+    }
+
+    let targetEl = null;
+
+    if (isElementNeeded) {
+      if (!this.simulatedElement) {
+        this.simulatedElement = this.win.document.createElement("div");
+        this.win.document.documentElement.appendChild(this.simulatedElement);
+      } else {
+        // Reset styles.
+        this.simulatedElement.style.cssText = "";
+      }
+
+      targetEl = this.simulatedElement;
+    }
+
+    if (!this.simulatedAnimation) {
+      this.simulatedAnimation = new this.win.Animation();
+    }
+
+    this.simulatedAnimation.effect = new this.win.KeyframeEffect(
+      targetEl,
+      keyframes,
+      effectTiming
+    );
+
+    return this.simulatedAnimation;
+  }
+
+  /**
+   * Returns a simulatable efect timing animation for the keyframes progress bar.
+   * The returned animation is implementing Animation interface of Web Animation API.
+   * https://drafts.csswg.org/web-animations/#the-animation-interface
+   *
+   * @param {Object} effectTiming
+   *        e.g. { duration: 1000, fill: "both" }
+   * @return {Animation}
+   *         https://drafts.csswg.org/web-animations/#the-animation-interface
+   */
+  simulateAnimationForKeyframesProgressBar(effectTiming) {
+    if (!this.simulatedAnimationForKeyframesProgressBar) {
+      this.simulatedAnimationForKeyframesProgressBar = new this.win.Animation();
+    }
+
+    this.simulatedAnimationForKeyframesProgressBar.effect =
+      new this.win.KeyframeEffect(null, null, effectTiming);
+
+    return this.simulatedAnimationForKeyframesProgressBar;
+  }
+
+  stopAnimationsCurrentTimeTimer() {
+    if (this.currentTimeTimer) {
+      this.currentTimeTimer.destroy();
+      this.currentTimeTimer = null;
+    }
+  }
+
+  startAnimationsCurrentTimeTimer() {
+    const timeScale = this.state.timeScale;
+    const shouldStopAfterEndTime = !hasAnimationIterationCountInfinite(
+      this.state.animations
+    );
+
+    const currentTimeTimer = new CurrentTimeTimer(
+      timeScale,
+      shouldStopAfterEndTime,
+      this.win,
+      this.onCurrentTimeTimerUpdated
+    );
+    currentTimeTimer.start();
+    this.currentTimeTimer = currentTimeTimer;
+  }
+
+  toggleElementPicker() {
+    this.inspector.toolbox.nodePicker.togglePicker();
+  }
+
+  async update() {
+    if (!this.isPanelVisible()) {
+      return;
+    }
+
+    const done = this.inspector.updating("animationinspector");
+
+    const selection = this.inspector.selection;
+    const animations =
+      selection.isConnected() && selection.isElementNode()
+        ? await this.animationsFront.getAnimationPlayersForNode(
+            selection.nodeFront
+          )
+        : [];
+    this.fireUpdateAction(animations);
+    this.setAnimationStateChangedListenerEnabled(true);
+
+    done();
+  }
+
+  async refreshAnimationsState(animations) {
+    let error = null;
+
+    const promises = animations.map(animation => {
+      return new Promise(resolve => {
+        animation
+          .refreshState()
+          .catch(e => {
+            error = e;
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    });
+    await Promise.all(promises);
+
+    if (error) {
+      throw new Error(error);
+    }
+
+    // Even when removal animation on inspected document, refreshAnimationsState
+    // might be called before onAnimationsMutation due to the async timing.
+    // Return the animations as result of refreshAnimationsState after getting rid of
+    // the animations since they should not display.
+    return animations.filter(anim => !!anim.state.type);
+  }
+
+  fireUpdateAction(animations) {
+    // Animation inspector already destroyed
+    if (!this.inspector) {
+      return;
+    }
+
+    this.stopAnimationsCurrentTimeTimer();
+
+    // Although it is not possible to set a delay or end delay of infinity using
+    // the animation API, if the value passed exceeds the limit of our internal
+    // representation of times, it will be treated as infinity. Rather than
+    // adding special case code to represent this very rare case, we simply omit
+    // such animations from the graph.
+    animations = animations.filter(
+      anim =>
+        Math.abs(anim.state.delay) !== Infinity &&
+        Math.abs(anim.state.endDelay) !== Infinity
+    );
+
+    this.inspector.store.dispatch(updateAnimations(animations));
+
+    if (hasRunningAnimation(animations)) {
+      this.startAnimationsCurrentTimeTimer();
+    } else {
+      // Even no running animations, update the current time once
+      // so as to show the state.
+      this.onCurrentTimeTimerUpdated(this.state.timeScale.getCurrentTime());
+    }
+  }
+}
+
+module.exports = AnimationInspector;
diff --git a/devtools/client/inspector/animation/components/AnimatedPropertyItem.js b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
new file mode 100644
index 0000000000..4c4ff37254
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
@@ -0,0 +1,64 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimatedPropertyName = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimatedPropertyName.js")
+);
+const KeyframesGraph = createFactory(
+  require("resource://devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js")
+);
+
+class AnimatedPropertyItem extends PureComponent {
+  static get propTypes() {
+    return {
+      getComputedStyle: PropTypes.func.isRequired,
+      isUnchanged: PropTypes.bool.isRequired,
+      keyframes: PropTypes.array.isRequired,
+      name: PropTypes.string.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      state: PropTypes.object.isRequired,
+      type: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      getComputedStyle,
+      isUnchanged,
+      keyframes,
+      name,
+      simulateAnimation,
+      state,
+      type,
+    } = this.props;
+
+    return dom.li(
+      {
+        className: "animated-property-item" + (isUnchanged ? " unchanged" : ""),
+      },
+      AnimatedPropertyName({
+        name,
+        state,
+      }),
+      KeyframesGraph({
+        getComputedStyle,
+        keyframes,
+        name,
+        simulateAnimation,
+        type,
+      })
+    );
+  }
+}
+
+module.exports = AnimatedPropertyItem;
diff --git a/devtools/client/inspector/animation/components/AnimatedPropertyList.js b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
new file mode 100644
index 0000000000..54dff15187
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -0,0 +1,140 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimatedPropertyItem = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimatedPropertyItem.js")
+);
+
+class AnimatedPropertyList extends Component {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Array of object which has the property name, the keyframes, its aniamtion type
+      // and unchanged flag.
+      animatedProperties: null,
+      // To avoid rendering while the state is updating
+      // since we call an async function in updateState.
+      isStateUpdating: false,
+    };
+  }
+
+  componentDidMount() {
+    // No need to set isStateUpdating state since paint sequence is finish here.
+    this.updateState(this.props.animation);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({ isStateUpdating: true });
+    this.updateState(nextProps.animation);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !nextState.isStateUpdating;
+  }
+
+  getPropertyState(property) {
+    const { animation } = this.props;
+
+    for (const propState of animation.state.propertyState) {
+      if (propState.property === property) {
+        return propState;
+      }
+    }
+
+    return null;
+  }
+
+  async updateState(animation) {
+    const { getAnimatedPropertyMap, emitEventForTest } = this.props;
+
+    let propertyMap = null;
+    let propertyNames = null;
+    let types = null;
+
+    try {
+      propertyMap = getAnimatedPropertyMap(animation);
+      propertyNames = [...propertyMap.keys()];
+      types = await animation.getAnimationTypes(propertyNames);
+    } catch (e) {
+      // Expected if we've already been destroyed or other node have been selected
+      // in the meantime.
+      console.error(e);
+      return;
+    }
+
+    const animatedProperties = propertyNames.map(name => {
+      const keyframes = propertyMap.get(name);
+      const type = types[name];
+      const isUnchanged = keyframes.every(
+        keyframe => keyframe.value === keyframes[0].value
+      );
+      return { isUnchanged, keyframes, name, type };
+    });
+
+    animatedProperties.sort((a, b) => {
+      if (a.isUnchanged === b.isUnchanged) {
+        return a.name > b.name ? 1 : -1;
+      }
+
+      return a.isUnchanged ? 1 : -1;
+    });
+
+    this.setState({
+      animatedProperties,
+      isStateUpdating: false,
+    });
+
+    emitEventForTest("animation-keyframes-rendered");
+  }
+
+  render() {
+    const { getComputedStyle, simulateAnimation } = this.props;
+    const { animatedProperties } = this.state;
+
+    if (!animatedProperties) {
+      return null;
+    }
+
+    return dom.ul(
+      {
+        className: "animated-property-list",
+      },
+      animatedProperties.map(({ isUnchanged, keyframes, name, type }) => {
+        const state = this.getPropertyState(name);
+        return AnimatedPropertyItem({
+          getComputedStyle,
+          isUnchanged,
+          keyframes,
+          name,
+          simulateAnimation,
+          state,
+          type,
+        });
+      })
+    );
+  }
+}
+
+module.exports = AnimatedPropertyList;
diff --git a/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
new file mode 100644
index 0000000000..965099b37e
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimatedPropertyList = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimatedPropertyList.js")
+);
+const KeyframesProgressBar = createFactory(
+  require("resource://devtools/client/inspector/animation/components/KeyframesProgressBar.js")
+);
+const ProgressInspectionPanel = createFactory(
+  require("resource://devtools/client/inspector/animation/components/ProgressInspectionPanel.js")
+);
+
+const {
+  getFormatStr,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+
+class AnimatedPropertyListContainer extends PureComponent {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getAnimationsCurrentTime: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      addAnimationsCurrentTimeListener,
+      animation,
+      emitEventForTest,
+      getAnimatedPropertyMap,
+      getAnimationsCurrentTime,
+      getComputedStyle,
+      removeAnimationsCurrentTimeListener,
+      simulateAnimation,
+      simulateAnimationForKeyframesProgressBar,
+      timeScale,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: `animated-property-list-container ${animation.state.type}`,
+      },
+      ProgressInspectionPanel({
+        indicator: KeyframesProgressBar({
+          addAnimationsCurrentTimeListener,
+          animation,
+          getAnimationsCurrentTime,
+          removeAnimationsCurrentTimeListener,
+          simulateAnimationForKeyframesProgressBar,
+          timeScale,
+        }),
+        list: AnimatedPropertyList({
+          animation,
+          emitEventForTest,
+          getAnimatedPropertyMap,
+          getComputedStyle,
+          simulateAnimation,
+        }),
+        ticks: [0, 50, 100].map(position => {
+          const label = getFormatStr(
+            "detail.propertiesHeader.percentage",
+            position
+          );
+          return { position, label };
+        }),
+      })
+    );
+  }
+}
+
+module.exports = AnimatedPropertyListContainer;
diff --git a/devtools/client/inspector/animation/components/AnimatedPropertyName.js b/devtools/client/inspector/animation/components/AnimatedPropertyName.js
new file mode 100644
index 0000000000..e7a777ee12
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyName.js
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class AnimatedPropertyName extends PureComponent {
+  static get propTypes() {
+    return {
+      name: PropTypes.string.isRequired,
+      state: PropTypes.oneOfType([null, PropTypes.object]).isRequired,
+    };
+  }
+
+  render() {
+    const { name, state } = this.props;
+
+    return dom.div(
+      {
+        className:
+          "animated-property-name" +
+          (state?.runningOnCompositor ? " compositor" : "") +
+          (state?.warning ? " warning" : ""),
+        title: state ? state.warning : "",
+      },
+      dom.span({}, name)
+    );
+  }
+}
+
+module.exports = AnimatedPropertyName;
diff --git a/devtools/client/inspector/animation/components/AnimationDetailContainer.js b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
new file mode 100644
index 0000000000..9a7b4bfd1a
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimationDetailHeader = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimationDetailHeader.js")
+);
+const AnimatedPropertyListContainer = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js")
+);
+
+class AnimationDetailContainer extends PureComponent {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getAnimationsCurrentTime: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      setDetailVisibility: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      addAnimationsCurrentTimeListener,
+      animation,
+      emitEventForTest,
+      getAnimatedPropertyMap,
+      getAnimationsCurrentTime,
+      getComputedStyle,
+      removeAnimationsCurrentTimeListener,
+      setDetailVisibility,
+      simulateAnimation,
+      simulateAnimationForKeyframesProgressBar,
+      timeScale,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "animation-detail-container",
+      },
+      animation
+        ? AnimationDetailHeader({
+            animation,
+            setDetailVisibility,
+          })
+        : null,
+      animation
+        ? AnimatedPropertyListContainer({
+            addAnimationsCurrentTimeListener,
+            animation,
+            emitEventForTest,
+            getAnimatedPropertyMap,
+            getAnimationsCurrentTime,
+            getComputedStyle,
+            removeAnimationsCurrentTimeListener,
+            simulateAnimation,
+            simulateAnimationForKeyframesProgressBar,
+            timeScale,
+          })
+        : null
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    animation: state.animations.selectedAnimation,
+  };
+};
+
+module.exports = connect(mapStateToProps)(AnimationDetailContainer);
diff --git a/devtools/client/inspector/animation/components/AnimationDetailHeader.js b/devtools/client/inspector/animation/components/AnimationDetailHeader.js
new file mode 100644
index 0000000000..5f3da0acba
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationDetailHeader.js
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  getFormattedTitle,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+
+class AnimationDetailHeader extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      setDetailVisibility: PropTypes.func.isRequired,
+    };
+  }
+
+  onClick(event) {
+    event.stopPropagation();
+    const { setDetailVisibility } = this.props;
+    setDetailVisibility(false);
+  }
+
+  render() {
+    const { animation } = this.props;
+
+    return dom.div(
+      {
+        className: "animation-detail-header devtools-toolbar",
+      },
+      dom.div(
+        {
+          className: "animation-detail-title",
+        },
+        getFormattedTitle(animation.state)
+      ),
+      dom.button({
+        className: "animation-detail-close-button devtools-button",
+        onClick: this.onClick.bind(this),
+      })
+    );
+  }
+}
+
+module.exports = AnimationDetailHeader;
diff --git a/devtools/client/inspector/animation/components/AnimationItem.js b/devtools/client/inspector/animation/components/AnimationItem.js
new file mode 100644
index 0000000000..45bb09bac6
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationItem.js
@@ -0,0 +1,121 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimationTarget = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimationTarget.js")
+);
+const SummaryGraph = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/SummaryGraph.js")
+);
+
+class AnimationItem extends Component {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      isDisplayable: PropTypes.bool.isRequired,
+      selectAnimation: PropTypes.func.isRequired,
+      selectedAnimation: PropTypes.object.isRequired,
+      setHighlightedNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isSelected: this.isSelected(props),
+    };
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      isSelected: this.isSelected(nextProps),
+    });
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.props.isDisplayable !== nextProps.isDisplayable ||
+      this.state.isSelected !== nextState.isSelected ||
+      this.props.animation !== nextProps.animation ||
+      this.props.timeScale !== nextProps.timeScale
+    );
+  }
+
+  isSelected(props) {
+    return (
+      props.selectedAnimation &&
+      props.animation.actorID === props.selectedAnimation.actorID
+    );
+  }
+
+  render() {
+    const {
+      animation,
+      dispatch,
+      getAnimatedPropertyMap,
+      getNodeFromActor,
+      isDisplayable,
+      selectAnimation,
+      setHighlightedNode,
+      setSelectedNode,
+      simulateAnimation,
+      timeScale,
+    } = this.props;
+    const { isSelected } = this.state;
+
+    return dom.li(
+      {
+        className:
+          `animation-item ${animation.state.type} ` +
+          (isSelected ? "selected" : ""),
+      },
+      isDisplayable
+        ? [
+            AnimationTarget({
+              animation,
+              dispatch,
+              getNodeFromActor,
+              setHighlightedNode,
+              setSelectedNode,
+            }),
+            SummaryGraph({
+              animation,
+              getAnimatedPropertyMap,
+              selectAnimation,
+              simulateAnimation,
+              timeScale,
+            }),
+          ]
+        : null
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    selectedAnimation: state.animations.selectedAnimation,
+  };
+};
+
+module.exports = connect(mapStateToProps)(AnimationItem);
diff --git a/devtools/client/inspector/animation/components/AnimationList.js b/devtools/client/inspector/animation/components/AnimationList.js
new file mode 100644
index 0000000000..7d0f1caf3f
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationList.js
@@ -0,0 +1,72 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimationItem = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimationItem.js")
+);
+
+class AnimationList extends PureComponent {
+  static get propTypes() {
+    return {
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      dispatch: PropTypes.func.isRequired,
+      displayableRange: PropTypes.object.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      selectAnimation: PropTypes.func.isRequired,
+      setHighlightedNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animations,
+      dispatch,
+      displayableRange,
+      getAnimatedPropertyMap,
+      getNodeFromActor,
+      selectAnimation,
+      setHighlightedNode,
+      setSelectedNode,
+      simulateAnimation,
+      timeScale,
+    } = this.props;
+
+    const { startIndex, endIndex } = displayableRange;
+
+    return dom.ul(
+      {
+        className: "animation-list",
+      },
+      animations.map((animation, index) =>
+        AnimationItem({
+          animation,
+          dispatch,
+          getAnimatedPropertyMap,
+          getNodeFromActor,
+          isDisplayable: startIndex <= index && index <= endIndex,
+          selectAnimation,
+          setHighlightedNode,
+          setSelectedNode,
+          simulateAnimation,
+          timeScale,
+        })
+      )
+    );
+  }
+}
+
+module.exports = AnimationList;
diff --git a/devtools/client/inspector/animation/components/AnimationListContainer.js b/devtools/client/inspector/animation/components/AnimationListContainer.js
new file mode 100644
index 0000000000..d97b368f70
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationListContainer.js
@@ -0,0 +1,224 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimationList = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimationList.js")
+);
+const CurrentTimeScrubber = createFactory(
+  require("resource://devtools/client/inspector/animation/components/CurrentTimeScrubber.js")
+);
+const ProgressInspectionPanel = createFactory(
+  require("resource://devtools/client/inspector/animation/components/ProgressInspectionPanel.js")
+);
+
+const {
+  findOptimalTimeInterval,
+} = require("resource://devtools/client/inspector/animation/utils/utils.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+const { throttle } = require("resource://devtools/shared/throttle.js");
+
+// The minimum spacing between 2 time graduation headers in the timeline (px).
+const TIME_GRADUATION_MIN_SPACING = 40;
+
+class AnimationListContainer extends PureComponent {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      direction: PropTypes.string.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      selectAnimation: PropTypes.func.isRequired,
+      setAnimationsCurrentTime: PropTypes.func.isRequired,
+      setHighlightedNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      sidebarWidth: PropTypes.number.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._ref = createRef();
+
+    this.updateDisplayableRange = throttle(
+      this.updateDisplayableRange,
+      100,
+      this
+    );
+
+    this.state = {
+      // tick labels and lines on the progress inspection panel
+      ticks: [],
+      // Displayable range.
+      displayableRange: { startIndex: 0, endIndex: 0 },
+    };
+  }
+
+  componentDidMount() {
+    this.updateTicks(this.props);
+
+    const current = this._ref.current;
+    this._inspectionPanelEl = current.querySelector(
+      ".progress-inspection-panel"
+    );
+    this._inspectionPanelEl.addEventListener("scroll", () => {
+      this.updateDisplayableRange();
+    });
+
+    this._animationListEl = current.querySelector(".animation-list");
+    const resizeObserver = new current.ownerGlobal.ResizeObserver(() => {
+      this.updateDisplayableRange();
+    });
+    resizeObserver.observe(this._animationListEl);
+
+    const animationItemEl = current.querySelector(".animation-item");
+    this._itemHeight = animationItemEl.offsetHeight;
+
+    this.updateDisplayableRange();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { timeScale, sidebarWidth } = this.props;
+
+    if (
+      timeScale.getDuration() !== prevProps.timeScale.getDuration() ||
+      timeScale.zeroPositionTime !== prevProps.timeScale.zeroPositionTime ||
+      sidebarWidth !== prevProps.sidebarWidth
+    ) {
+      this.updateTicks(this.props);
+    }
+  }
+
+  /**
+   * Since it takes too much time if we render all of animation graphs,
+   * we restrict to render the items that are not in displaying area.
+   * This function calculates the displayable item range.
+   */
+  updateDisplayableRange() {
+    const count =
+      Math.floor(this._animationListEl.offsetHeight / this._itemHeight) + 1;
+    const index = Math.floor(
+      this._inspectionPanelEl.scrollTop / this._itemHeight
+    );
+    this.setState({
+      displayableRange: { startIndex: index, endIndex: index + count },
+    });
+  }
+
+  updateTicks(props) {
+    const { animations, timeScale } = props;
+    const tickLinesEl = this._ref.current.querySelector(".tick-lines");
+    const width = tickLinesEl.offsetWidth;
+    const animationDuration = timeScale.getDuration();
+    const minTimeInterval =
+      (TIME_GRADUATION_MIN_SPACING * animationDuration) / width;
+    const intervalLength = findOptimalTimeInterval(minTimeInterval);
+    const intervalWidth = (intervalLength * width) / animationDuration;
+    const tickCount = parseInt(width / intervalWidth, 10);
+    const isAllDurationInfinity = animations.every(
+      animation => animation.state.duration === Infinity
+    );
+    const zeroBasePosition =
+      width * (timeScale.zeroPositionTime / animationDuration);
+    const shiftWidth = zeroBasePosition % intervalWidth;
+    const needToShift = zeroBasePosition !== 0 && shiftWidth !== 0;
+
+    const ticks = [];
+    // Need to display first graduation since position will be shifted.
+    if (needToShift) {
+      const label = timeScale.formatTime(timeScale.distanceToRelativeTime(0));
+      ticks.push({ position: 0, label, width: shiftWidth });
+    }
+
+    for (let i = 0; i <= tickCount; i++) {
+      const position = ((i * intervalWidth + shiftWidth) * 100) / width;
+      const distance = timeScale.distanceToRelativeTime(position);
+      const label =
+        isAllDurationInfinity && i === tickCount
+          ? getStr("player.infiniteTimeLabel")
+          : timeScale.formatTime(distance);
+      ticks.push({ position, label, width: intervalWidth });
+    }
+
+    this.setState({ ticks });
+  }
+
+  render() {
+    const {
+      addAnimationsCurrentTimeListener,
+      animations,
+      direction,
+      dispatch,
+      getAnimatedPropertyMap,
+      getNodeFromActor,
+      removeAnimationsCurrentTimeListener,
+      selectAnimation,
+      setAnimationsCurrentTime,
+      setHighlightedNode,
+      setSelectedNode,
+      simulateAnimation,
+      timeScale,
+    } = this.props;
+    const { displayableRange, ticks } = this.state;
+
+    return dom.div(
+      {
+        className: "animation-list-container",
+        ref: this._ref,
+      },
+      ProgressInspectionPanel({
+        indicator: CurrentTimeScrubber({
+          addAnimationsCurrentTimeListener,
+          direction,
+          removeAnimationsCurrentTimeListener,
+          setAnimationsCurrentTime,
+          timeScale,
+        }),
+        list: AnimationList({
+          animations,
+          dispatch,
+          displayableRange,
+          getAnimatedPropertyMap,
+          getNodeFromActor,
+          selectAnimation,
+          setHighlightedNode,
+          setSelectedNode,
+          simulateAnimation,
+          timeScale,
+        }),
+        ticks,
+      })
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    sidebarWidth: state.animations.sidebarSize
+      ? state.animations.sidebarSize.width
+      : 0,
+  };
+};
+
+module.exports = connect(mapStateToProps)(AnimationListContainer);
diff --git a/devtools/client/inspector/animation/components/AnimationTarget.js b/devtools/client/inspector/animation/components/AnimationTarget.js
new file mode 100644
index 0000000000..2fa392b3f6
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationTarget.js
@@ -0,0 +1,182 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  translateNodeFrontToGrip,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+
+const {
+  REPS,
+  MODE,
+} = require("resource://devtools/client/shared/components/reps/index.js");
+const { Rep } = REPS;
+const ElementNode = REPS.ElementNode;
+
+const {
+  getInspectorStr,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
+
+class AnimationTarget extends Component {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      highlightedNode: PropTypes.string.isRequired,
+      setHighlightedNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      nodeFront: null,
+    };
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillMount() {
+    this.updateNodeFront(this.props.animation);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.animation.actorID !== nextProps.animation.actorID) {
+      this.updateNodeFront(nextProps.animation);
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.state.nodeFront !== nextState.nodeFront ||
+      this.props.highlightedNode !== nextState.highlightedNode
+    );
+  }
+
+  async updateNodeFront(animation) {
+    const { getNodeFromActor } = this.props;
+
+    // Try and get it from the playerFront directly.
+    let nodeFront = animation.animationTargetNodeFront;
+
+    // Next, get it from the walkerActor if it wasn't found.
+    if (!nodeFront) {
+      try {
+        nodeFront = await getNodeFromActor(animation.actorID);
+      } catch (e) {
+        // If an error occured while getting the nodeFront and if it can't be
+        // attributed to the panel having been destroyed in the meantime, this
+        // error needs to be logged and render needs to stop.
+        console.error(e);
+        this.setState({ nodeFront: null });
+        return;
+      }
+    }
+
+    this.setState({ nodeFront });
+  }
+
+  async ensureNodeFront() {
+    if (!this.state.nodeFront.actorID) {
+      // In case of no actorID, the node front had been destroyed.
+      // This will occur when the pseudo element was re-generated.
+      await this.updateNodeFront(this.props.animation);
+    }
+  }
+
+  async highlight() {
+    await this.ensureNodeFront();
+
+    if (this.state.nodeFront) {
+      this.props.dispatch(
+        highlightNode(this.state.nodeFront, {
+          hideInfoBar: true,
+          hideGuides: true,
+        })
+      );
+    }
+  }
+
+  async select() {
+    await this.ensureNodeFront();
+
+    if (this.state.nodeFront) {
+      this.props.setSelectedNode(this.state.nodeFront);
+    }
+  }
+
+  render() {
+    const { dispatch, highlightedNode, setHighlightedNode } = this.props;
+    const { nodeFront } = this.state;
+
+    if (!nodeFront) {
+      return dom.div({
+        className: "animation-target",
+      });
+    }
+
+    const isHighlighted = nodeFront.actorID === highlightedNode;
+
+    return dom.div(
+      {
+        className: "animation-target" + (isHighlighted ? " highlighting" : ""),
+      },
+      Rep({
+        defaultRep: ElementNode,
+        mode: MODE.TINY,
+        inspectIconTitle: getInspectorStr(
+          "inspector.nodePreview.highlightNodeLabel"
+        ),
+        inspectIconClassName: "highlight-node",
+        object: translateNodeFrontToGrip(nodeFront),
+        onDOMNodeClick: () => this.select(),
+        onDOMNodeMouseOut: () => {
+          if (!isHighlighted) {
+            dispatch(unhighlightNode());
+          }
+        },
+        onDOMNodeMouseOver: () => {
+          if (!isHighlighted) {
+            this.highlight();
+          }
+        },
+        onInspectIconClick: (_, e) => {
+          e.stopPropagation();
+
+          if (!isHighlighted) {
+            // At first, hide highlighter which was created by onDOMNodeMouseOver.
+            dispatch(unhighlightNode());
+          }
+
+          setHighlightedNode(isHighlighted ? null : nodeFront);
+        },
+      })
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    highlightedNode: state.animations.highlightedNode,
+  };
+};
+
+module.exports = connect(mapStateToProps)(AnimationTarget);
diff --git a/devtools/client/inspector/animation/components/AnimationToolbar.js b/devtools/client/inspector/animation/components/AnimationToolbar.js
new file mode 100644
index 0000000000..9b6b7aadc8
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationToolbar.js
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const CurrentTimeLabel = createFactory(
+  require("resource://devtools/client/inspector/animation/components/CurrentTimeLabel.js")
+);
+const PauseResumeButton = createFactory(
+  require("resource://devtools/client/inspector/animation/components/PauseResumeButton.js")
+);
+const PlaybackRateSelector = createFactory(
+  require("resource://devtools/client/inspector/animation/components/PlaybackRateSelector.js")
+);
+const RewindButton = createFactory(
+  require("resource://devtools/client/inspector/animation/components/RewindButton.js")
+);
+
+class AnimationToolbar extends PureComponent {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      rewindAnimationsCurrentTime: PropTypes.func.isRequired,
+      setAnimationsPlaybackRate: PropTypes.func.isRequired,
+      setAnimationsPlayState: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      addAnimationsCurrentTimeListener,
+      animations,
+      removeAnimationsCurrentTimeListener,
+      rewindAnimationsCurrentTime,
+      setAnimationsPlaybackRate,
+      setAnimationsPlayState,
+      timeScale,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "animation-toolbar devtools-toolbar",
+      },
+      RewindButton({
+        rewindAnimationsCurrentTime,
+      }),
+      PauseResumeButton({
+        animations,
+        setAnimationsPlayState,
+      }),
+      PlaybackRateSelector({
+        animations,
+        setAnimationsPlaybackRate,
+      }),
+      CurrentTimeLabel({
+        addAnimationsCurrentTimeListener,
+        removeAnimationsCurrentTimeListener,
+        timeScale,
+      })
+    );
+  }
+}
+
+module.exports = AnimationToolbar;
diff --git a/devtools/client/inspector/animation/components/App.js b/devtools/client/inspector/animation/components/App.js
new file mode 100644
index 0000000000..75a000286c
--- /dev/null
+++ b/devtools/client/inspector/animation/components/App.js
@@ -0,0 +1,164 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const AnimationDetailContainer = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimationDetailContainer.js")
+);
+const AnimationListContainer = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimationListContainer.js")
+);
+const AnimationToolbar = createFactory(
+  require("resource://devtools/client/inspector/animation/components/AnimationToolbar.js")
+);
+const NoAnimationPanel = createFactory(
+  require("resource://devtools/client/inspector/animation/components/NoAnimationPanel.js")
+);
+const SplitBox = createFactory(
+  require("resource://devtools/client/shared/components/splitter/SplitBox.js")
+);
+
+class App extends Component {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      detailVisibility: PropTypes.bool.isRequired,
+      direction: PropTypes.string.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getAnimationsCurrentTime: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      rewindAnimationsCurrentTime: PropTypes.func.isRequired,
+      selectAnimation: PropTypes.func.isRequired,
+      setAnimationsCurrentTime: PropTypes.func.isRequired,
+      setAnimationsPlaybackRate: PropTypes.func.isRequired,
+      setAnimationsPlayState: PropTypes.func.isRequired,
+      setDetailVisibility: PropTypes.func.isRequired,
+      setHighlightedNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+      toggleElementPicker: PropTypes.func.isRequired,
+      toggleLockingHighlight: PropTypes.func.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.props.animations.length !== 0 || nextProps.animations.length !== 0
+    );
+  }
+
+  render() {
+    const {
+      addAnimationsCurrentTimeListener,
+      animations,
+      detailVisibility,
+      direction,
+      dispatch,
+      emitEventForTest,
+      getAnimatedPropertyMap,
+      getAnimationsCurrentTime,
+      getComputedStyle,
+      getNodeFromActor,
+      removeAnimationsCurrentTimeListener,
+      rewindAnimationsCurrentTime,
+      selectAnimation,
+      setAnimationsCurrentTime,
+      setAnimationsPlaybackRate,
+      setAnimationsPlayState,
+      setDetailVisibility,
+      setHighlightedNode,
+      setSelectedNode,
+      simulateAnimation,
+      simulateAnimationForKeyframesProgressBar,
+      timeScale,
+      toggleElementPicker,
+    } = this.props;
+
+    return dom.div(
+      {
+        id: "animation-container",
+        className: detailVisibility ? "animation-detail-visible" : "",
+        tabIndex: -1,
+      },
+      animations.length
+        ? [
+            AnimationToolbar({
+              addAnimationsCurrentTimeListener,
+              animations,
+              removeAnimationsCurrentTimeListener,
+              rewindAnimationsCurrentTime,
+              setAnimationsPlaybackRate,
+              setAnimationsPlayState,
+              timeScale,
+            }),
+            SplitBox({
+              className: "animation-container-splitter",
+              endPanel: AnimationDetailContainer({
+                addAnimationsCurrentTimeListener,
+                emitEventForTest,
+                getAnimatedPropertyMap,
+                getAnimationsCurrentTime,
+                getComputedStyle,
+                removeAnimationsCurrentTimeListener,
+                setDetailVisibility,
+                simulateAnimation,
+                simulateAnimationForKeyframesProgressBar,
+                timeScale,
+              }),
+              endPanelControl: true,
+              initialHeight: "50%",
+              splitterSize: 1,
+              minSize: "30px",
+              startPanel: AnimationListContainer({
+                addAnimationsCurrentTimeListener,
+                animations,
+                direction,
+                dispatch,
+                getAnimatedPropertyMap,
+                getNodeFromActor,
+                removeAnimationsCurrentTimeListener,
+                selectAnimation,
+                setAnimationsCurrentTime,
+                setHighlightedNode,
+                setSelectedNode,
+                simulateAnimation,
+                timeScale,
+              }),
+              vert: false,
+            }),
+          ]
+        : NoAnimationPanel({
+            toggleElementPicker,
+          })
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    animations: state.animations.animations,
+    detailVisibility: state.animations.detailVisibility,
+    timeScale: state.animations.timeScale,
+  };
+};
+
+module.exports = connect(mapStateToProps)(App);
diff --git a/devtools/client/inspector/animation/components/CurrentTimeLabel.js b/devtools/client/inspector/animation/components/CurrentTimeLabel.js
new file mode 100644
index 0000000000..67b2498e8b
--- /dev/null
+++ b/devtools/client/inspector/animation/components/CurrentTimeLabel.js
@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class CurrentTimeLabel extends PureComponent {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._ref = createRef();
+
+    const { addAnimationsCurrentTimeListener } = props;
+    this.onCurrentTimeUpdated = this.onCurrentTimeUpdated.bind(this);
+
+    addAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
+  }
+
+  componentWillUnmount() {
+    const { removeAnimationsCurrentTimeListener } = this.props;
+    removeAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
+  }
+
+  onCurrentTimeUpdated(currentTime) {
+    const { timeScale } = this.props;
+    const text = formatStopwatchTime(currentTime - timeScale.zeroPositionTime);
+    // onCurrentTimeUpdated is bound to requestAnimationFrame.
+    // As to update the component too frequently has performance issue if React controlled,
+    // update raw component directly. See Bug 1699039.
+    this._ref.current.textContent = text;
+  }
+
+  render() {
+    return dom.label({ className: "current-time-label", ref: this._ref });
+  }
+}
+
+/**
+ * Format a timestamp (in ms) as a mm:ss.mmm string.
+ *
+ * @param {Number} time
+ * @return {String}
+ */
+function formatStopwatchTime(time) {
+  // Format falsy values as 0
+  if (!time) {
+    return "00:00.000";
+  }
+
+  const sign = time < 0 ? "-" : "";
+  let milliseconds = parseInt(Math.abs(time % 1000), 10);
+  let seconds = parseInt(Math.abs(time / 1000) % 60, 10);
+  let minutes = parseInt(Math.abs(time / (1000 * 60)), 10);
+
+  minutes = minutes.toString().padStart(2, "0");
+  seconds = seconds.toString().padStart(2, "0");
+  milliseconds = milliseconds.toString().padStart(3, "0");
+  return `${sign}${minutes}:${seconds}.${milliseconds}`;
+}
+
+module.exports = CurrentTimeLabel;
diff --git a/devtools/client/inspector/animation/components/CurrentTimeScrubber.js b/devtools/client/inspector/animation/components/CurrentTimeScrubber.js
new file mode 100644
index 0000000000..8b87e32eff
--- /dev/null
+++ b/devtools/client/inspector/animation/components/CurrentTimeScrubber.js
@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+const {
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class CurrentTimeScrubber extends PureComponent {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      direction: PropTypes.string.isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      setAnimationsCurrentTime: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._ref = createRef();
+
+    const { addAnimationsCurrentTimeListener } = props;
+    this.onCurrentTimeUpdated = this.onCurrentTimeUpdated.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+
+    addAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
+  }
+
+  componentDidMount() {
+    const current = this._ref.current;
+    current.addEventListener("mousedown", this.onMouseDown);
+    this._scrubber = current.querySelector(".current-time-scrubber");
+  }
+
+  componentWillUnmount() {
+    const { removeAnimationsCurrentTimeListener } = this.props;
+    removeAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
+  }
+
+  onCurrentTimeUpdated(currentTime) {
+    const { timeScale } = this.props;
+
+    const position = currentTime / timeScale.getDuration();
+    // onCurrentTimeUpdated is bound to requestAnimationFrame.
+    // As to update the component too frequently has performance issue if React controlled,
+    // update raw component directly. See Bug 1699039.
+    this._scrubber.style.marginInlineStart = `${position * 100}%`;
+  }
+
+  onMouseDown(event) {
+    event.stopPropagation();
+    const current = this._ref.current;
+    this.controllerArea = current.getBoundingClientRect();
+    this.listenerTarget = DevToolsUtils.getTopWindow(current.ownerGlobal);
+    this.listenerTarget.addEventListener("mousemove", this.onMouseMove);
+    this.listenerTarget.addEventListener("mouseup", this.onMouseUp);
+    this.decorationTarget = current.closest(".animation-list-container");
+    this.decorationTarget.classList.add("active-scrubber");
+
+    this.updateAnimationsCurrentTime(event.pageX, true);
+  }
+
+  onMouseMove(event) {
+    event.stopPropagation();
+    this.isMouseMoved = true;
+    this.updateAnimationsCurrentTime(event.pageX);
+  }
+
+  onMouseUp(event) {
+    event.stopPropagation();
+
+    if (this.isMouseMoved) {
+      this.updateAnimationsCurrentTime(event.pageX, true);
+      this.isMouseMoved = null;
+    }
+
+    this.uninstallListeners();
+  }
+
+  uninstallListeners() {
+    this.listenerTarget.removeEventListener("mousemove", this.onMouseMove);
+    this.listenerTarget.removeEventListener("mouseup", this.onMouseUp);
+    this.listenerTarget = null;
+    this.decorationTarget.classList.remove("active-scrubber");
+    this.decorationTarget = null;
+    this.controllerArea = null;
+  }
+
+  updateAnimationsCurrentTime(pageX, needRefresh) {
+    const { direction, setAnimationsCurrentTime, timeScale } = this.props;
+
+    let progressRate =
+      (pageX - this.controllerArea.x) / this.controllerArea.width;
+
+    if (progressRate < 0.0) {
+      progressRate = 0.0;
+    } else if (progressRate > 1.0) {
+      progressRate = 1.0;
+    }
+
+    const time =
+      direction === "ltr"
+        ? progressRate * timeScale.getDuration()
+        : (1 - progressRate) * timeScale.getDuration();
+
+    setAnimationsCurrentTime(time, needRefresh);
+  }
+
+  render() {
+    return dom.div(
+      {
+        className: "current-time-scrubber-area",
+        ref: this._ref,
+      },
+      dom.div({ className: "indication-bar current-time-scrubber" })
+    );
+  }
+}
+
+module.exports = CurrentTimeScrubber;
diff --git a/devtools/client/inspector/animation/components/KeyframesProgressBar.js b/devtools/client/inspector/animation/components/KeyframesProgressBar.js
new file mode 100644
index 0000000000..b4e9e526de
--- /dev/null
+++ b/devtools/client/inspector/animation/components/KeyframesProgressBar.js
@@ -0,0 +1,108 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class KeyframesProgressBar extends PureComponent {
+  static get propTypes() {
+    return {
+      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      animation: PropTypes.object.isRequired,
+      getAnimationsCurrentTime: PropTypes.func.isRequired,
+      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
+      simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._progressBarRef = createRef();
+
+    this.onCurrentTimeUpdated = this.onCurrentTimeUpdated.bind(this);
+  }
+
+  componentDidMount() {
+    const { addAnimationsCurrentTimeListener } = this.props;
+
+    this.setupAnimation(this.props);
+    addAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { animation, getAnimationsCurrentTime, timeScale } = nextProps;
+
+    this.setupAnimation(nextProps);
+    this.updateOffset(getAnimationsCurrentTime(), animation, timeScale);
+  }
+
+  componentWillUnmount() {
+    const { removeAnimationsCurrentTimeListener } = this.props;
+
+    removeAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
+    this.simulatedAnimation = null;
+  }
+
+  onCurrentTimeUpdated(currentTime) {
+    const { animation, timeScale } = this.props;
+    this.updateOffset(currentTime, animation, timeScale);
+  }
+
+  updateOffset(currentTime, animation, timeScale) {
+    const { createdTime, playbackRate } = animation.state;
+
+    const time =
+      (timeScale.minStartTime + currentTime - createdTime) * playbackRate;
+
+    if (isNaN(time)) {
+      // Setting an invalid currentTime will throw so bail out if time is not a number for
+      // any reason.
+      return;
+    }
+
+    this.simulatedAnimation.currentTime = time;
+    const position =
+      this.simulatedAnimation.effect.getComputedTiming().progress;
+
+    // onCurrentTimeUpdated is bound to requestAnimationFrame.
+    // As to update the component too frequently has performance issue if React controlled,
+    // update raw component directly. See Bug 1699039.
+    this._progressBarRef.current.style.marginInlineStart = `${position * 100}%`;
+  }
+
+  setupAnimation(props) {
+    const { animation, simulateAnimationForKeyframesProgressBar } = props;
+
+    if (this.simulatedAnimation) {
+      this.simulatedAnimation.cancel();
+    }
+
+    const timing = Object.assign({}, animation.state, {
+      iterations: animation.state.iterationCount || Infinity,
+    });
+
+    this.simulatedAnimation = simulateAnimationForKeyframesProgressBar(timing);
+  }
+
+  render() {
+    return dom.div(
+      { className: "keyframes-progress-bar-area" },
+      dom.div({
+        className: "indication-bar keyframes-progress-bar",
+        ref: this._progressBarRef,
+      })
+    );
+  }
+}
+
+module.exports = KeyframesProgressBar;
diff --git a/devtools/client/inspector/animation/components/NoAnimationPanel.js b/devtools/client/inspector/animation/components/NoAnimationPanel.js
new file mode 100644
index 0000000000..ea034e413d
--- /dev/null
+++ b/devtools/client/inspector/animation/components/NoAnimationPanel.js
@@ -0,0 +1,61 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/animationinspector.properties"
+);
+
+class NoAnimationPanel extends Component {
+  static get propTypes() {
+    return {
+      elementPickerEnabled: PropTypes.bool.isRequired,
+      toggleElementPicker: PropTypes.func.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.elementPickerEnabled != nextProps.elementPickerEnabled;
+  }
+
+  render() {
+    const { elementPickerEnabled, toggleElementPicker } = this.props;
+
+    return dom.div(
+      {
+        className: "animation-error-message devtools-sidepanel-no-result",
+      },
+      dom.p(null, L10N.getStr("panel.noAnimation")),
+      dom.button({
+        className:
+          "animation-element-picker devtools-button" +
+          (elementPickerEnabled ? " checked" : ""),
+        "data-standalone": true,
+        onClick: event => {
+          event.stopPropagation();
+          toggleElementPicker();
+        },
+      })
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    elementPickerEnabled: state.animations.elementPickerEnabled,
+  };
+};
+
+module.exports = connect(mapStateToProps)(NoAnimationPanel);
diff --git a/devtools/client/inspector/animation/components/PauseResumeButton.js b/devtools/client/inspector/animation/components/PauseResumeButton.js
new file mode 100644
index 0000000000..bcbb597a39
--- /dev/null
+++ b/devtools/client/inspector/animation/components/PauseResumeButton.js
@@ -0,0 +1,104 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const { KeyCodes } = require("resource://devtools/client/shared/keycodes.js");
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+const {
+  hasRunningAnimation,
+} = require("resource://devtools/client/inspector/animation/utils/utils.js");
+
+class PauseResumeButton extends PureComponent {
+  static get propTypes() {
+    return {
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      setAnimationsPlayState: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.pauseResumeButtonRef = createRef();
+
+    this.state = {
+      isRunning: false,
+    };
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillMount() {
+    this.updateState(this.props);
+  }
+
+  componentDidMount() {
+    const targetEl = this.getKeyEventTarget();
+    targetEl.addEventListener("keydown", this.onKeyDown);
+  }
+
+  componentDidUpdate() {
+    this.updateState();
+  }
+
+  componentWillUnount() {
+    const targetEl = this.getKeyEventTarget();
+    targetEl.removeEventListener("keydown", this.onKeyDown);
+  }
+
+  getKeyEventTarget() {
+    return this.pauseResumeButtonRef.current.closest("#animation-container");
+  }
+
+  onToggleAnimationsPlayState(event) {
+    event.stopPropagation();
+    const { setAnimationsPlayState } = this.props;
+    const { isRunning } = this.state;
+
+    setAnimationsPlayState(!isRunning);
+  }
+
+  onKeyDown(event) {
+    // Prevent to the duplicated call from the key listener and click listener.
+    if (
+      event.keyCode === KeyCodes.DOM_VK_SPACE &&
+      event.target !== this.pauseResumeButtonRef.current
+    ) {
+      this.onToggleAnimationsPlayState(event);
+    }
+  }
+
+  updateState() {
+    const { animations } = this.props;
+    const isRunning = hasRunningAnimation(animations);
+    this.setState({ isRunning });
+  }
+
+  render() {
+    const { isRunning } = this.state;
+
+    return dom.button({
+      className:
+        "pause-resume-button devtools-button" + (isRunning ? "" : " paused"),
+      onClick: this.onToggleAnimationsPlayState.bind(this),
+      title: isRunning
+        ? getStr("timeline.resumedButtonTooltip")
+        : getStr("timeline.pausedButtonTooltip"),
+      ref: this.pauseResumeButtonRef,
+    });
+  }
+}
+
+module.exports = PauseResumeButton;
diff --git a/devtools/client/inspector/animation/components/PlaybackRateSelector.js b/devtools/client/inspector/animation/components/PlaybackRateSelector.js
new file mode 100644
index 0000000000..2d0de53a0c
--- /dev/null
+++ b/devtools/client/inspector/animation/components/PlaybackRateSelector.js
@@ -0,0 +1,108 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const {
+  getFormatStr,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+
+const PLAYBACK_RATES = [0.1, 0.25, 0.5, 1, 2, 5, 10];
+
+class PlaybackRateSelector extends PureComponent {
+  static get propTypes() {
+    return {
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      playbackRates: PropTypes.arrayOf(PropTypes.number).isRequired,
+      setAnimationsPlaybackRate: PropTypes.func.isRequired,
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const { animations, playbackRates } = props;
+
+    const currentPlaybackRates = sortAndUnique(
+      animations.map(a => a.state.playbackRate)
+    );
+    const options = sortAndUnique([
+      ...PLAYBACK_RATES,
+      ...playbackRates,
+      ...currentPlaybackRates,
+    ]);
+
+    if (currentPlaybackRates.length === 1) {
+      return {
+        options,
+        selected: currentPlaybackRates[0],
+      };
+    }
+
+    // When the animations displayed have mixed playback rates, we can't
+    // select any of the predefined ones.
+    return {
+      options: ["", ...options],
+      selected: "",
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      options: [],
+      selected: 1,
+    };
+  }
+
+  onChange(e) {
+    const { setAnimationsPlaybackRate } = this.props;
+
+    if (!e.target.value) {
+      return;
+    }
+
+    setAnimationsPlaybackRate(e.target.value);
+  }
+
+  render() {
+    const { options, selected } = this.state;
+
+    return dom.select(
+      {
+        className: "playback-rate-selector devtools-button",
+        onChange: this.onChange.bind(this),
+      },
+      options.map(rate => {
+        return dom.option(
+          {
+            selected: rate === selected ? "true" : null,
+            value: rate,
+          },
+          rate ? getFormatStr("player.playbackRateLabel", rate) : "-"
+        );
+      })
+    );
+  }
+}
+
+function sortAndUnique(array) {
+  return [...new Set(array)].sort((a, b) => a > b);
+}
+
+const mapStateToProps = state => {
+  return {
+    playbackRates: state.animations.playbackRates,
+  };
+};
+
+module.exports = connect(mapStateToProps)(PlaybackRateSelector);
diff --git a/devtools/client/inspector/animation/components/ProgressInspectionPanel.js b/devtools/client/inspector/animation/components/ProgressInspectionPanel.js
new file mode 100644
index 0000000000..71c82dd17b
--- /dev/null
+++ b/devtools/client/inspector/animation/components/ProgressInspectionPanel.js
@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const TickLabels = createFactory(
+  require("resource://devtools/client/inspector/animation/components/TickLabels.js")
+);
+const TickLines = createFactory(
+  require("resource://devtools/client/inspector/animation/components/TickLines.js")
+);
+
+/**
+ * This component is a panel for the progress of animations or keyframes, supports
+ * displaying the ticks, take the areas of indicator and the list.
+ */
+class ProgressInspectionPanel extends PureComponent {
+  static get propTypes() {
+    return {
+      indicator: PropTypes.any.isRequired,
+      list: PropTypes.any.isRequired,
+      ticks: PropTypes.arrayOf(PropTypes.object).isRequired,
+    };
+  }
+
+  render() {
+    const { indicator, list, ticks } = this.props;
+
+    return dom.div(
+      {
+        className: "progress-inspection-panel",
+      },
+      dom.div({ className: "background" }, TickLines({ ticks })),
+      dom.div({ className: "indicator" }, indicator),
+      dom.div({ className: "header devtools-toolbar" }, TickLabels({ ticks })),
+      list
+    );
+  }
+}
+
+module.exports = ProgressInspectionPanel;
diff --git a/devtools/client/inspector/animation/components/RewindButton.js b/devtools/client/inspector/animation/components/RewindButton.js
new file mode 100644
index 0000000000..f069b42368
--- /dev/null
+++ b/devtools/client/inspector/animation/components/RewindButton.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+
+class RewindButton extends PureComponent {
+  static get propTypes() {
+    return {
+      rewindAnimationsCurrentTime: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { rewindAnimationsCurrentTime } = this.props;
+
+    return dom.button({
+      className: "rewind-button devtools-button",
+      onClick: event => {
+        event.stopPropagation();
+        rewindAnimationsCurrentTime();
+      },
+      title: getStr("timeline.rewindButtonTooltip"),
+    });
+  }
+}
+
+module.exports = RewindButton;
diff --git a/devtools/client/inspector/animation/components/TickLabels.js b/devtools/client/inspector/animation/components/TickLabels.js
new file mode 100644
index 0000000000..019c7b177b
--- /dev/null
+++ b/devtools/client/inspector/animation/components/TickLabels.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+/**
+ * This component is intended to show tick labels on the header.
+ */
+class TickLabels extends PureComponent {
+  static get propTypes() {
+    return {
+      ticks: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { ticks } = this.props;
+
+    return dom.div(
+      {
+        className: "tick-labels",
+      },
+      ticks.map(tick =>
+        dom.div(
+          {
+            className: "tick-label",
+            style: {
+              marginInlineStart: `${tick.position}%`,
+              maxWidth: `${tick.width}px`,
+            },
+          },
+          tick.label
+        )
+      )
+    );
+  }
+}
+
+module.exports = TickLabels;
diff --git a/devtools/client/inspector/animation/components/TickLines.js b/devtools/client/inspector/animation/components/TickLines.js
new file mode 100644
index 0000000000..d3cbdead98
--- /dev/null
+++ b/devtools/client/inspector/animation/components/TickLines.js
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+/**
+ * This component is intended to show the tick line as the background.
+ */
+class TickLines extends PureComponent {
+  static get propTypes() {
+    return {
+      ticks: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { ticks } = this.props;
+
+    return dom.div(
+      {
+        className: "tick-lines",
+      },
+      ticks.map(tick =>
+        dom.div({
+          className: "tick-line",
+          style: { marginInlineStart: `${tick.position}%` },
+        })
+      )
+    );
+  }
+}
+
+module.exports = TickLines;
diff --git a/devtools/client/inspector/animation/components/graph/AnimationName.js b/devtools/client/inspector/animation/components/graph/AnimationName.js
new file mode 100644
index 0000000000..1ef2ebd829
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/AnimationName.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class AnimationName extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { animation } = this.props;
+
+    return dom.svg(
+      {
+        className: "animation-name",
+      },
+      dom.text(
+        {
+          y: "50%",
+          x: "100%",
+        },
+        animation.state.name
+      )
+    );
+  }
+}
+
+module.exports = AnimationName;
diff --git a/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js b/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js
new file mode 100644
index 0000000000..fed25e161e
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js
@@ -0,0 +1,104 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const {
+  createSummaryGraphPathStringFunction,
+  SummaryGraphHelper,
+} = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
+const TimingPath = require("resource://devtools/client/inspector/animation/components/graph/TimingPath.js");
+
+class ComputedTimingPath extends TimingPath {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      durationPerPixel: PropTypes.number.isRequired,
+      keyframes: PropTypes.object.isRequired,
+      offset: PropTypes.number.isRequired,
+      opacity: PropTypes.number.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      totalDuration: PropTypes.number.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+      durationPerPixel,
+      keyframes,
+      offset,
+      opacity,
+      simulateAnimation,
+      totalDuration,
+    } = this.props;
+
+    const { state } = animation;
+    const effectTiming = Object.assign({}, state, {
+      iterations: state.iterationCount ? state.iterationCount : Infinity,
+    });
+
+    // Create new keyframes for opacity as computed style.
+    // The reason why we use computed value instead of computed timing progress is to
+    // include the easing in keyframes as well. Although the computed timing progress
+    // is not affected by the easing in keyframes at all, computed value reflects that.
+    const frames = keyframes.map(keyframe => {
+      return {
+        opacity: keyframe.offset,
+        offset: keyframe.offset,
+        easing: keyframe.easing,
+      };
+    });
+
+    const simulatedAnimation = simulateAnimation(frames, effectTiming, true);
+
+    if (!simulatedAnimation) {
+      return null;
+    }
+
+    const simulatedElement = simulatedAnimation.effect.target;
+    const win = simulatedElement.ownerGlobal;
+    const endTime = simulatedAnimation.effect.getComputedTiming().endTime;
+
+    // Set the underlying opacity to zero so that if we sample the animation's output
+    // during the delay phase and it is not filling backwards, we get zero.
+    simulatedElement.style.opacity = 0;
+
+    const getValueFunc = time => {
+      if (time < 0) {
+        return 0;
+      }
+
+      simulatedAnimation.currentTime = time < endTime ? time : endTime;
+      return win.getComputedStyle(simulatedElement).opacity;
+    };
+
+    const toPathStringFunc = createSummaryGraphPathStringFunction(
+      endTime,
+      state.playbackRate
+    );
+    const helper = new SummaryGraphHelper(
+      state,
+      keyframes,
+      totalDuration,
+      durationPerPixel,
+      getValueFunc,
+      toPathStringFunc
+    );
+
+    return dom.g(
+      {
+        className: "animation-computed-timing-path",
+        style: { opacity },
+        transform: `translate(${offset})`,
+      },
+      super.renderGraph(state, helper)
+    );
+  }
+}
+
+module.exports = ComputedTimingPath;
diff --git a/devtools/client/inspector/animation/components/graph/DelaySign.js b/devtools/client/inspector/animation/components/graph/DelaySign.js
new file mode 100644
index 0000000000..4e817a9d61
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/DelaySign.js
@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class DelaySign extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { animation, timeScale } = this.props;
+    const { delay, isDelayFilled, startTime } = animation.state.absoluteValues;
+
+    const toPercentage = v => (v / timeScale.getDuration()) * 100;
+    const offset = toPercentage(startTime - timeScale.minStartTime);
+    const width = toPercentage(Math.abs(delay));
+
+    return dom.div({
+      className:
+        "animation-delay-sign" +
+        (delay < 0 ? " negative" : "") +
+        (isDelayFilled ? " fill" : ""),
+      style: {
+        width: `${width}%`,
+        marginInlineStart: `${offset}%`,
+      },
+    });
+  }
+}
+
+module.exports = DelaySign;
diff --git a/devtools/client/inspector/animation/components/graph/EffectTimingPath.js b/devtools/client/inspector/animation/components/graph/EffectTimingPath.js
new file mode 100644
index 0000000000..4a984bc61c
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/EffectTimingPath.js
@@ -0,0 +1,84 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const {
+  createSummaryGraphPathStringFunction,
+  SummaryGraphHelper,
+} = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
+const TimingPath = require("resource://devtools/client/inspector/animation/components/graph/TimingPath.js");
+
+class EffectTimingPath extends TimingPath {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      durationPerPixel: PropTypes.number.isRequired,
+      offset: PropTypes.number.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      totalDuration: PropTypes.number.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+      durationPerPixel,
+      offset,
+      simulateAnimation,
+      totalDuration,
+    } = this.props;
+
+    const { state } = animation;
+    const effectTiming = Object.assign({}, state, {
+      iterations: state.iterationCount ? state.iterationCount : Infinity,
+    });
+
+    const simulatedAnimation = simulateAnimation(null, effectTiming, false);
+
+    if (!simulatedAnimation) {
+      return null;
+    }
+
+    const endTime = simulatedAnimation.effect.getComputedTiming().endTime;
+
+    const getValueFunc = time => {
+      if (time < 0) {
+        return 0;
+      }
+
+      simulatedAnimation.currentTime = time < endTime ? time : endTime;
+      return Math.max(
+        simulatedAnimation.effect.getComputedTiming().progress,
+        0
+      );
+    };
+
+    const toPathStringFunc = createSummaryGraphPathStringFunction(
+      endTime,
+      state.playbackRate
+    );
+    const helper = new SummaryGraphHelper(
+      state,
+      null,
+      totalDuration,
+      durationPerPixel,
+      getValueFunc,
+      toPathStringFunc
+    );
+
+    return dom.g(
+      {
+        className: "animation-effect-timing-path",
+        transform: `translate(${offset})`,
+      },
+      super.renderGraph(state, helper)
+    );
+  }
+}
+
+module.exports = EffectTimingPath;
diff --git a/devtools/client/inspector/animation/components/graph/EndDelaySign.js b/devtools/client/inspector/animation/components/graph/EndDelaySign.js
new file mode 100644
index 0000000000..f843123cbf
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/EndDelaySign.js
@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class EndDelaySign extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { animation, timeScale } = this.props;
+    const { endDelay, endTime, isEndDelayFilled } =
+      animation.state.absoluteValues;
+
+    const toPercentage = v => (v / timeScale.getDuration()) * 100;
+    const absEndDelay = Math.abs(endDelay);
+    const offset = toPercentage(endTime - absEndDelay - timeScale.minStartTime);
+    const width = toPercentage(absEndDelay);
+
+    return dom.div({
+      className:
+        "animation-end-delay-sign" +
+        (endDelay < 0 ? " negative" : "") +
+        (isEndDelayFilled ? " fill" : ""),
+      style: {
+        width: `${width}%`,
+        marginInlineStart: `${offset}%`,
+      },
+    });
+  }
+}
+
+module.exports = EndDelaySign;
diff --git a/devtools/client/inspector/animation/components/graph/NegativeDelayPath.js b/devtools/client/inspector/animation/components/graph/NegativeDelayPath.js
new file mode 100644
index 0000000000..0cd87dd320
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/NegativeDelayPath.js
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const NegativePath = require("resource://devtools/client/inspector/animation/components/graph/NegativePath.js");
+
+class NegativeDelayPath extends NegativePath {
+  getClassName() {
+    return "animation-negative-delay-path";
+  }
+
+  renderGraph(state, helper) {
+    const startTime = state.delay;
+    const endTime = 0;
+    const segments = helper.createPathSegments(startTime, endTime);
+
+    return dom.path({
+      d: helper.toPathString(segments),
+    });
+  }
+}
+
+module.exports = NegativeDelayPath;
diff --git a/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js b/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js
new file mode 100644
index 0000000000..88f5f65037
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const NegativePath = require("resource://devtools/client/inspector/animation/components/graph/NegativePath.js");
+
+class NegativeEndDelayPath extends NegativePath {
+  getClassName() {
+    return "animation-negative-end-delay-path";
+  }
+
+  renderGraph(state, helper) {
+    const endTime = state.delay + state.iterationCount * state.duration;
+    const startTime = endTime + state.endDelay;
+    const segments = helper.createPathSegments(startTime, endTime);
+
+    return dom.path({
+      d: helper.toPathString(segments),
+    });
+  }
+}
+
+module.exports = NegativeEndDelayPath;
diff --git a/devtools/client/inspector/animation/components/graph/NegativePath.js b/devtools/client/inspector/animation/components/graph/NegativePath.js
new file mode 100644
index 0000000000..4f1d0af9e6
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/NegativePath.js
@@ -0,0 +1,101 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const {
+  createSummaryGraphPathStringFunction,
+  SummaryGraphHelper,
+} = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
+
+class NegativePath extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      className: PropTypes.string.isRequired,
+      durationPerPixel: PropTypes.number.isRequired,
+      keyframes: PropTypes.object.isRequired,
+      offset: PropTypes.number.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      totalDuration: PropTypes.number.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+      durationPerPixel,
+      keyframes,
+      offset,
+      simulateAnimation,
+      totalDuration,
+    } = this.props;
+
+    const { state } = animation;
+    const effectTiming = Object.assign({}, state, {
+      fill: "both",
+      iterations: state.iterationCount ? state.iterationCount : Infinity,
+    });
+
+    // Create new keyframes for opacity as computed style.
+    // The reason why we use computed value instead of computed timing progress is to
+    // include the easing in keyframes as well. Although the computed timing progress
+    // is not affected by the easing in keyframes at all, computed value reflects that.
+    const frames = keyframes.map(keyframe => {
+      return {
+        opacity: keyframe.offset,
+        offset: keyframe.offset,
+        easing: keyframe.easing,
+      };
+    });
+
+    const simulatedAnimation = simulateAnimation(frames, effectTiming, true);
+
+    if (!simulatedAnimation) {
+      return null;
+    }
+
+    const simulatedElement = simulatedAnimation.effect.target;
+    const win = simulatedElement.ownerGlobal;
+    const endTime = simulatedAnimation.effect.getComputedTiming().endTime;
+
+    // Set the underlying opacity to zero so that if we sample the animation's output
+    // during the delay phase and it is not filling backwards, we get zero.
+    simulatedElement.style.opacity = 0;
+
+    const getValueFunc = time => {
+      simulatedAnimation.currentTime = time;
+      return win.getComputedStyle(simulatedElement).opacity;
+    };
+
+    const toPathStringFunc = createSummaryGraphPathStringFunction(
+      endTime,
+      state.playbackRate
+    );
+    const helper = new SummaryGraphHelper(
+      state,
+      keyframes,
+      totalDuration,
+      durationPerPixel,
+      getValueFunc,
+      toPathStringFunc
+    );
+
+    return dom.g(
+      {
+        className: this.getClassName(),
+        transform: `translate(${offset})`,
+      },
+      this.renderGraph(state, helper)
+    );
+  }
+}
+
+module.exports = NegativePath;
diff --git a/devtools/client/inspector/animation/components/graph/SummaryGraph.js b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
new file mode 100644
index 0000000000..bac54ea26f
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -0,0 +1,205 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const AnimationName = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/AnimationName.js")
+);
+const DelaySign = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/DelaySign.js")
+);
+const EndDelaySign = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/EndDelaySign.js")
+);
+const SummaryGraphPath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/SummaryGraphPath.js")
+);
+
+const {
+  getFormattedTitle,
+  getFormatStr,
+  getStr,
+  numberWithDecimals,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+
+class SummaryGraph extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      getAnimatedPropertyMap: PropTypes.func.isRequired,
+      selectAnimation: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick(event) {
+    event.stopPropagation();
+    this.props.selectAnimation(this.props.animation);
+  }
+
+  getTitleText(state) {
+    const getTime = time =>
+      getFormatStr("player.timeLabel", numberWithDecimals(time / 1000, 2));
+    const getTimeOrInfinity = time =>
+      time === Infinity ? getStr("player.infiniteDurationText") : getTime(time);
+
+    let text = "";
+
+    // Adding the name.
+    text += getFormattedTitle(state);
+    text += "\n";
+
+    // Adding the delay.
+    if (state.delay) {
+      text += getStr("player.animationDelayLabel") + " ";
+      text += getTime(state.delay);
+      text += "\n";
+    }
+
+    // Adding the duration.
+    text += getStr("player.animationDurationLabel") + " ";
+    text += getTimeOrInfinity(state.duration);
+    text += "\n";
+
+    // Adding the endDelay.
+    if (state.endDelay) {
+      text += getStr("player.animationEndDelayLabel") + " ";
+      text += getTime(state.endDelay);
+      text += "\n";
+    }
+
+    // Adding the iteration count (the infinite symbol, or an integer).
+    if (state.iterationCount !== 1) {
+      text += getStr("player.animationIterationCountLabel") + " ";
+      text +=
+        state.iterationCount || getStr("player.infiniteIterationCountText");
+      text += "\n";
+    }
+
+    // Adding the iteration start.
+    if (state.iterationStart !== 0) {
+      text += getFormatStr(
+        "player.animationIterationStartLabel2",
+        state.iterationStart,
+        getTimeOrInfinity(state.iterationStart * state.duration)
+      );
+      text += "\n";
+    }
+
+    // Adding the easing if it is not "linear".
+    if (state.easing && state.easing !== "linear") {
+      text += getStr("player.animationOverallEasingLabel") + " ";
+      text += state.easing;
+      text += "\n";
+    }
+
+    // Adding the fill mode.
+    if (state.fill && state.fill !== "none") {
+      text += getStr("player.animationFillLabel") + " ";
+      text += state.fill;
+      text += "\n";
+    }
+
+    // Adding the direction mode if it is not "normal".
+    if (state.direction && state.direction !== "normal") {
+      text += getStr("player.animationDirectionLabel") + " ";
+      text += state.direction;
+      text += "\n";
+    }
+
+    // Adding the playback rate if it's different than 1.
+    if (state.playbackRate !== 1) {
+      text += getStr("player.animationRateLabel") + " ";
+      text += state.playbackRate;
+      text += "\n";
+    }
+
+    // Adding the animation-timing-function
+    // if it is not "ease" which is default value for CSS Animations.
+    if (
+      state.animationTimingFunction &&
+      state.animationTimingFunction !== "ease"
+    ) {
+      text += getStr("player.animationTimingFunctionLabel") + " ";
+      text += state.animationTimingFunction;
+      text += "\n";
+    }
+
+    // Adding a note that the animation is running on the compositor thread if
+    // needed.
+    if (state.propertyState) {
+      if (
+        state.propertyState.every(propState => propState.runningOnCompositor)
+      ) {
+        text += getStr("player.allPropertiesOnCompositorTooltip");
+      } else if (
+        state.propertyState.some(propState => propState.runningOnCompositor)
+      ) {
+        text += getStr("player.somePropertiesOnCompositorTooltip");
+      }
+    } else if (state.isRunningOnCompositor) {
+      text += getStr("player.runningOnCompositorTooltip");
+    }
+
+    return text;
+  }
+
+  render() {
+    const { animation, getAnimatedPropertyMap, simulateAnimation, timeScale } =
+      this.props;
+
+    const { iterationCount } = animation.state;
+    const { delay, endDelay } = animation.state.absoluteValues;
+
+    return dom.div(
+      {
+        className:
+          "animation-summary-graph" +
+          (animation.state.isRunningOnCompositor ? " compositor" : ""),
+        onClick: this.onClick,
+        title: this.getTitleText(animation.state),
+      },
+      SummaryGraphPath({
+        animation,
+        getAnimatedPropertyMap,
+        simulateAnimation,
+        timeScale,
+      }),
+      delay
+        ? DelaySign({
+            animation,
+            timeScale,
+          })
+        : null,
+      iterationCount && endDelay
+        ? EndDelaySign({
+            animation,
+            timeScale,
+          })
+        : null,
+      animation.state.name
+        ? AnimationName({
+            animation,
+          })
+        : null
+    );
+  }
+}
+
+module.exports = SummaryGraph;
diff --git a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
new file mode 100644
index 0000000000..0183c7413e
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
@@ -0,0 +1,282 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.js");
+
+const ComputedTimingPath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/ComputedTimingPath.js")
+);
+const EffectTimingPath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/EffectTimingPath.js")
+);
+const NegativeDelayPath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/NegativeDelayPath.js")
+);
+const NegativeEndDelayPath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js")
+);
+const {
+  DEFAULT_GRAPH_HEIGHT,
+} = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
+
+// Minimum opacity for semitransparent fill color for keyframes's easing graph.
+const MIN_KEYFRAMES_EASING_OPACITY = 0.5;
+
+class SummaryGraphPath extends Component {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      getAnimatedPropertyMap: PropTypes.object.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Duration which can display in one pixel.
+      durationPerPixel: 0,
+      // To avoid rendering while the state is updating
+      // since we call an async function in updateState.
+      isStateUpdating: false,
+      // List of keyframe which consists by only offset and easing.
+      keyframesList: [],
+    };
+  }
+
+  componentDidMount() {
+    // No need to set isStateUpdating state since paint sequence is finish here.
+    this.updateState(this.props);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({ isStateUpdating: true });
+    this.updateState(nextProps);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !nextState.isStateUpdating;
+  }
+
+  /**
+   * Return animatable keyframes list which has only offset and easing.
+   * Also, this method remove duplicate keyframes.
+   * For example, if the given animatedPropertyMap is,
+   * [
+   *   {
+   *     key: "color",
+   *     values: [
+   *       {
+   *         offset: 0,
+   *         easing: "ease",
+   *         value: "rgb(255, 0, 0)",
+   *       },
+   *       {
+   *         offset: 1,
+   *         value: "rgb(0, 255, 0)",
+   *       },
+   *     ],
+   *   },
+   *   {
+   *     key: "opacity",
+   *     values: [
+   *       {
+   *         offset: 0,
+   *         easing: "ease",
+   *         value: 0,
+   *       },
+   *       {
+   *         offset: 1,
+   *         value: 1,
+   *       },
+   *     ],
+   *   },
+   * ]
+   *
+   * then this method returns,
+   * [
+   *   [
+   *     {
+   *       offset: 0,
+   *       easing: "ease",
+   *     },
+   *     {
+   *       offset: 1,
+   *     },
+   *   ],
+   * ]
+   *
+   * @param {Map} animated property map
+   *        which can get form getAnimatedPropertyMap in animation.js
+   * @return {Array} list of keyframes which has only easing and offset.
+   */
+  getOffsetAndEasingOnlyKeyframes(animatedPropertyMap) {
+    return [...animatedPropertyMap.values()]
+      .filter((keyframes1, i, self) => {
+        return (
+          i !==
+          self.findIndex((keyframes2, j) => {
+            return this.isOffsetAndEasingKeyframesEqual(keyframes1, keyframes2)
+              ? j
+              : -1;
+          })
+        );
+      })
+      .map(keyframes => {
+        return keyframes.map(keyframe => {
+          return { easing: keyframe.easing, offset: keyframe.offset };
+        });
+      });
+  }
+
+  /**
+   * Return true if given keyframes have same length, offset and easing.
+   *
+   * @param {Array} keyframes1
+   * @param {Array} keyframes2
+   * @return {Boolean} true: equals
+   */
+  isOffsetAndEasingKeyframesEqual(keyframes1, keyframes2) {
+    if (keyframes1.length !== keyframes2.length) {
+      return false;
+    }
+
+    for (let i = 0; i < keyframes1.length; i++) {
+      const keyframe1 = keyframes1[i];
+      const keyframe2 = keyframes2[i];
+
+      if (
+        keyframe1.offset !== keyframe2.offset ||
+        keyframe1.easing !== keyframe2.easing
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  updateState(props) {
+    const { animation, getAnimatedPropertyMap, timeScale } = props;
+
+    let animatedPropertyMap = null;
+    let thisEl = null;
+
+    try {
+      animatedPropertyMap = getAnimatedPropertyMap(animation);
+      thisEl = ReactDOM.findDOMNode(this);
+    } catch (e) {
+      // Expected if we've already been destroyed or other node have been selected
+      // in the meantime.
+      console.error(e);
+      return;
+    }
+
+    const keyframesList =
+      this.getOffsetAndEasingOnlyKeyframes(animatedPropertyMap);
+    const totalDuration =
+      timeScale.getDuration() * Math.abs(animation.state.playbackRate);
+    const durationPerPixel = totalDuration / thisEl.parentNode.clientWidth;
+
+    this.setState({
+      durationPerPixel,
+      isStateUpdating: false,
+      keyframesList,
+    });
+  }
+
+  render() {
+    const { durationPerPixel, keyframesList } = this.state;
+    const { animation, simulateAnimation, timeScale } = this.props;
+
+    if (!durationPerPixel || !animation.state.type) {
+      // Undefined animation.state.type means that the animation had been removed already.
+      // Even if the animation was removed, we still need the empty svg since the
+      // component might be re-used.
+      return dom.svg();
+    }
+
+    const { playbackRate } = animation.state;
+    const { createdTime } = animation.state.absoluteValues;
+    const absPlaybackRate = Math.abs(playbackRate);
+
+    // Absorb the playbackRate in viewBox of SVG and offset of child path elements
+    // in order to each graph path components can draw without considering to the
+    // playbackRate.
+    const offset = createdTime * absPlaybackRate;
+    const startTime = timeScale.minStartTime * absPlaybackRate;
+    const totalDuration = timeScale.getDuration() * absPlaybackRate;
+    const opacity = Math.max(
+      1 / keyframesList.length,
+      MIN_KEYFRAMES_EASING_OPACITY
+    );
+
+    return dom.svg(
+      {
+        className: "animation-summary-graph-path",
+        preserveAspectRatio: "none",
+        viewBox:
+          `${startTime} -${DEFAULT_GRAPH_HEIGHT} ` +
+          `${totalDuration} ${DEFAULT_GRAPH_HEIGHT}`,
+      },
+      keyframesList.map(keyframes =>
+        ComputedTimingPath({
+          animation,
+          durationPerPixel,
+          keyframes,
+          offset,
+          opacity,
+          simulateAnimation,
+          totalDuration,
+        })
+      ),
+      animation.state.easing !== "linear"
+        ? EffectTimingPath({
+            animation,
+            durationPerPixel,
+            offset,
+            simulateAnimation,
+            totalDuration,
+          })
+        : null,
+      animation.state.delay < 0
+        ? keyframesList.map(keyframes => {
+            return NegativeDelayPath({
+              animation,
+              durationPerPixel,
+              keyframes,
+              offset,
+              simulateAnimation,
+              totalDuration,
+            });
+          })
+        : null,
+      animation.state.iterationCount && animation.state.endDelay < 0
+        ? keyframesList.map(keyframes => {
+            return NegativeEndDelayPath({
+              animation,
+              durationPerPixel,
+              keyframes,
+              offset,
+              simulateAnimation,
+              totalDuration,
+            });
+          })
+        : null
+    );
+  }
+}
+
+module.exports = SummaryGraphPath;
diff --git a/devtools/client/inspector/animation/components/graph/TimingPath.js b/devtools/client/inspector/animation/components/graph/TimingPath.js
new file mode 100644
index 0000000000..7949527988
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/TimingPath.js
@@ -0,0 +1,450 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+// Show max 10 iterations for infinite animations
+// to give users a clue that the animation does repeat.
+const MAX_INFINITE_ANIMATIONS_ITERATIONS = 10;
+
+class TimingPath extends PureComponent {
+  /**
+   * Render a graph of given parameters and return as <path> element list.
+   *
+   * @param {Object} state
+   *        State of animation.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   * @return {Array}
+   *         list of <path> element.
+   */
+  renderGraph(state, helper) {
+    // Starting time of main iteration.
+    let mainIterationStartTime = 0;
+    let iterationStart = state.iterationStart;
+    let iterationCount = state.iterationCount ? state.iterationCount : Infinity;
+
+    const pathList = [];
+
+    // Append delay.
+    if (state.delay > 0) {
+      this.renderDelay(pathList, state, helper);
+      mainIterationStartTime = state.delay;
+    } else {
+      const negativeDelayCount = -state.delay / state.duration;
+      // Move to forward the starting point for negative delay.
+      iterationStart += negativeDelayCount;
+      // Consume iteration count by negative delay.
+      if (iterationCount !== Infinity) {
+        iterationCount -= negativeDelayCount;
+      }
+    }
+
+    if (state.duration === Infinity) {
+      this.renderInfinityDuration(
+        pathList,
+        state,
+        mainIterationStartTime,
+        helper
+      );
+      return pathList;
+    }
+
+    // Append 1st section of iterations,
+    // This section is only useful in cases where iterationStart has decimals.
+    // e.g.
+    // if { iterationStart: 0.25, iterations: 3 }, firstSectionCount is 0.75.
+    const firstSectionCount =
+      iterationStart % 1 === 0
+        ? 0
+        : Math.min(1 - (iterationStart % 1), iterationCount);
+
+    if (firstSectionCount) {
+      this.renderFirstIteration(
+        pathList,
+        state,
+        mainIterationStartTime,
+        firstSectionCount,
+        helper
+      );
+    }
+
+    if (iterationCount === Infinity) {
+      // If the animation repeats infinitely,
+      // we fill the remaining area with iteration paths.
+      this.renderInfinity(
+        pathList,
+        state,
+        mainIterationStartTime,
+        firstSectionCount,
+        helper
+      );
+    } else {
+      // Otherwise, we show remaining iterations, endDelay and fill.
+
+      // Append forwards fill-mode.
+      if (state.fill === "both" || state.fill === "forwards") {
+        this.renderForwardsFill(
+          pathList,
+          state,
+          mainIterationStartTime,
+          iterationCount,
+          helper
+        );
+      }
+
+      // Append middle section of iterations.
+      // e.g.
+      // if { iterationStart: 0.25, iterations: 3 }, middleSectionCount is 2.
+      const middleSectionCount = Math.floor(iterationCount - firstSectionCount);
+      this.renderMiddleIterations(
+        pathList,
+        state,
+        mainIterationStartTime,
+        firstSectionCount,
+        middleSectionCount,
+        helper
+      );
+
+      // Append last section of iterations, if there is remaining iteration.
+      // e.g.
+      // if { iterationStart: 0.25, iterations: 3 }, lastSectionCount is 0.25.
+      const lastSectionCount =
+        iterationCount - middleSectionCount - firstSectionCount;
+      if (lastSectionCount) {
+        this.renderLastIteration(
+          pathList,
+          state,
+          mainIterationStartTime,
+          firstSectionCount,
+          middleSectionCount,
+          lastSectionCount,
+          helper
+        );
+      }
+
+      // Append endDelay.
+      if (state.endDelay > 0) {
+        this.renderEndDelay(
+          pathList,
+          state,
+          mainIterationStartTime,
+          iterationCount,
+          helper
+        );
+      }
+    }
+    return pathList;
+  }
+
+  /**
+   * Render 'delay' part in animation and add a <path> element to given pathList.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> element to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderDelay(pathList, state, helper) {
+    const startSegment = helper.getSegment(0);
+    const endSegment = { x: state.delay, y: startSegment.y };
+    const segments = [startSegment, endSegment];
+    pathList.push(
+      dom.path({
+        className: "animation-delay-path",
+        d: helper.toPathString(segments),
+      })
+    );
+  }
+
+  /**
+   * Render 1st section of iterations and add a <path> element to given pathList.
+   * This section is only useful in cases where iterationStart has decimals.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> element to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Start time of main iteration.
+   * @param {Number} firstSectionCount
+   *        Iteration count of first section.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderFirstIteration(
+    pathList,
+    state,
+    mainIterationStartTime,
+    firstSectionCount,
+    helper
+  ) {
+    const startTime = mainIterationStartTime;
+    const endTime = startTime + firstSectionCount * state.duration;
+    const segments = helper.createPathSegments(startTime, endTime);
+    pathList.push(
+      dom.path({
+        className: "animation-iteration-path",
+        d: helper.toPathString(segments),
+      })
+    );
+  }
+
+  /**
+   * Render middle iterations and add <path> elements to given pathList.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> elements to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Starting time of main iteration.
+   * @param {Number} firstSectionCount
+   *        Iteration count of first section.
+   * @param {Number} middleSectionCount
+   *        Iteration count of middle section.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderMiddleIterations(
+    pathList,
+    state,
+    mainIterationStartTime,
+    firstSectionCount,
+    middleSectionCount,
+    helper
+  ) {
+    const offset = mainIterationStartTime + firstSectionCount * state.duration;
+    for (let i = 0; i < middleSectionCount; i++) {
+      // Get the path segments of each iteration.
+      const startTime = offset + i * state.duration;
+      const endTime = startTime + state.duration;
+      const segments = helper.createPathSegments(startTime, endTime);
+      pathList.push(
+        dom.path({
+          className: "animation-iteration-path",
+          d: helper.toPathString(segments),
+        })
+      );
+    }
+  }
+
+  /**
+   * Render last section of iterations and add a <path> element to given pathList.
+   * This section is only useful in cases where iterationStart has decimals.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> elements to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Starting time of main iteration.
+   * @param {Number} firstSectionCount
+   *        Iteration count of first section.
+   * @param {Number} middleSectionCount
+   *        Iteration count of middle section.
+   * @param {Number} lastSectionCount
+   *        Iteration count of last section.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderLastIteration(
+    pathList,
+    state,
+    mainIterationStartTime,
+    firstSectionCount,
+    middleSectionCount,
+    lastSectionCount,
+    helper
+  ) {
+    const startTime =
+      mainIterationStartTime +
+      (firstSectionCount + middleSectionCount) * state.duration;
+    const endTime = startTime + lastSectionCount * state.duration;
+    const segments = helper.createPathSegments(startTime, endTime);
+    pathList.push(
+      dom.path({
+        className: "animation-iteration-path",
+        d: helper.toPathString(segments),
+      })
+    );
+  }
+
+  /**
+   * Render infinity iterations and add <path> elements to given pathList.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> elements to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Starting time of main iteration.
+   * @param {Number} firstSectionCount
+   *        Iteration count of first section.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderInfinity(
+    pathList,
+    state,
+    mainIterationStartTime,
+    firstSectionCount,
+    helper
+  ) {
+    // Calculate the number of iterations to display,
+    // with a maximum of MAX_INFINITE_ANIMATIONS_ITERATIONS
+    let uncappedInfinityIterationCount =
+      (helper.totalDuration - firstSectionCount * state.duration) /
+      state.duration;
+    // If there is a small floating point error resulting in, e.g. 1.0000001
+    // ceil will give us 2 so round first.
+    uncappedInfinityIterationCount = parseFloat(
+      uncappedInfinityIterationCount.toPrecision(6)
+    );
+    const infinityIterationCount = Math.min(
+      MAX_INFINITE_ANIMATIONS_ITERATIONS,
+      Math.ceil(uncappedInfinityIterationCount)
+    );
+
+    // Append first full iteration path.
+    const firstStartTime =
+      mainIterationStartTime + firstSectionCount * state.duration;
+    const firstEndTime = firstStartTime + state.duration;
+    const firstSegments = helper.createPathSegments(
+      firstStartTime,
+      firstEndTime
+    );
+    pathList.push(
+      dom.path({
+        className: "animation-iteration-path",
+        d: helper.toPathString(firstSegments),
+      })
+    );
+
+    // Append other iterations. We can copy first segments.
+    const isAlternate = state.direction.match(/alternate/);
+    for (let i = 1; i < infinityIterationCount; i++) {
+      const startTime = firstStartTime + i * state.duration;
+      let segments;
+      if (isAlternate && i % 2) {
+        // Copy as reverse.
+        segments = firstSegments.map(segment => {
+          return { x: firstEndTime - segment.x + startTime, y: segment.y };
+        });
+      } else {
+        // Copy as is.
+        segments = firstSegments.map(segment => {
+          return { x: segment.x - firstStartTime + startTime, y: segment.y };
+        });
+      }
+      pathList.push(
+        dom.path({
+          className: "animation-iteration-path infinity",
+          d: helper.toPathString(segments),
+        })
+      );
+    }
+  }
+
+  /**
+   * Render infinity duration.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> elements to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Starting time of main iteration.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderInfinityDuration(pathList, state, mainIterationStartTime, helper) {
+    const startSegment = helper.getSegment(mainIterationStartTime);
+    const endSegment = { x: helper.totalDuration, y: startSegment.y };
+    const segments = [startSegment, endSegment];
+    pathList.push(
+      dom.path({
+        className: "animation-iteration-path infinity-duration",
+        d: helper.toPathString(segments),
+      })
+    );
+  }
+
+  /**
+   * Render 'endDelay' part in animation and add a <path> element to given pathList.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> element to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Starting time of main iteration.
+   * @param {Number} iterationCount
+   *        Iteration count of whole animation.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderEndDelay(
+    pathList,
+    state,
+    mainIterationStartTime,
+    iterationCount,
+    helper
+  ) {
+    const startTime = mainIterationStartTime + iterationCount * state.duration;
+    const startSegment = helper.getSegment(startTime);
+    const endSegment = { x: startTime + state.endDelay, y: startSegment.y };
+    pathList.push(
+      dom.path({
+        className: "animation-enddelay-path",
+        d: helper.toPathString([startSegment, endSegment]),
+      })
+    );
+  }
+
+  /**
+   * Render 'fill' for forwards part in animation and
+   * add a <path> element to given pathList.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> element to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Starting time of main iteration.
+   * @param {Number} iterationCount
+   *        Iteration count of whole animation.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderForwardsFill(
+    pathList,
+    state,
+    mainIterationStartTime,
+    iterationCount,
+    helper
+  ) {
+    const startTime =
+      mainIterationStartTime +
+      iterationCount * state.duration +
+      (state.endDelay > 0 ? state.endDelay : 0);
+    const startSegment = helper.getSegment(startTime);
+    const endSegment = { x: helper.totalDuration, y: startSegment.y };
+    pathList.push(
+      dom.path({
+        className: "animation-fill-forwards-path",
+        d: helper.toPathString([startSegment, endSegment]),
+      })
+    );
+  }
+}
+
+module.exports = TimingPath;
diff --git a/devtools/client/inspector/animation/components/graph/moz.build b/devtools/client/inspector/animation/components/graph/moz.build
new file mode 100644
index 0000000000..866bdd30ce
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/moz.build
@@ -0,0 +1,17 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "AnimationName.js",
+    "ComputedTimingPath.js",
+    "DelaySign.js",
+    "EffectTimingPath.js",
+    "EndDelaySign.js",
+    "NegativeDelayPath.js",
+    "NegativeEndDelayPath.js",
+    "NegativePath.js",
+    "SummaryGraph.js",
+    "SummaryGraphPath.js",
+    "TimingPath.js",
+)
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js b/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
new file mode 100644
index 0000000000..120b61c73b
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
@@ -0,0 +1,209 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const { colorUtils } = require("resource://devtools/shared/css/color.js");
+
+const ComputedStylePath = require("resource://devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js");
+
+const DEFAULT_COLOR = { r: 0, g: 0, b: 0, a: 1 };
+
+/* Count for linearGradient ID */
+let LINEAR_GRADIENT_ID_COUNT = 0;
+
+class ColorPath extends ComputedStylePath {
+  constructor(props) {
+    super(props);
+
+    this.state = this.propToState(props);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState(this.propToState(nextProps));
+  }
+
+  getPropertyName() {
+    return "color";
+  }
+
+  getPropertyValue(keyframe) {
+    return keyframe.value;
+  }
+
+  propToState({ keyframes, name }) {
+    const maxObject = { distance: -Number.MAX_VALUE };
+
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      const value1 = getRGBA(name, keyframes[i].value);
+      for (let j = i + 1; j < keyframes.length; j++) {
+        const value2 = getRGBA(name, keyframes[j].value);
+        const distance = getRGBADistance(value1, value2);
+
+        if (maxObject.distance >= distance) {
+          continue;
+        }
+
+        maxObject.distance = distance;
+        maxObject.value1 = value1;
+        maxObject.value2 = value2;
+      }
+    }
+
+    const maxDistance = maxObject.distance;
+    const baseValue =
+      maxObject.value1 < maxObject.value2 ? maxObject.value1 : maxObject.value2;
+
+    return { baseValue, maxDistance, name };
+  }
+
+  toSegmentValue(computedStyle) {
+    const { baseValue, maxDistance, name } = this.state;
+    const value = getRGBA(name, computedStyle);
+    return getRGBADistance(baseValue, value) / maxDistance;
+  }
+
+  /**
+   * Overide parent's method.
+   */
+  renderEasingHint() {
+    const { easingHintStrokeWidth, graphHeight, keyframes, totalDuration } =
+      this.props;
+
+    const hints = [];
+
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      const startKeyframe = keyframes[i];
+      const endKeyframe = keyframes[i + 1];
+      const startTime = startKeyframe.offset * totalDuration;
+      const endTime = endKeyframe.offset * totalDuration;
+
+      const g = dom.g(
+        {
+          className: "hint",
+        },
+        dom.title({}, startKeyframe.easing),
+        dom.rect({
+          x: startTime,
+          y: -graphHeight,
+          height: graphHeight,
+          width: endTime - startTime,
+        }),
+        dom.line({
+          x1: startTime,
+          y1: -graphHeight,
+          x2: endTime,
+          y2: -graphHeight,
+          style: {
+            "stroke-width": easingHintStrokeWidth,
+          },
+        })
+      );
+      hints.push(g);
+    }
+
+    return hints;
+  }
+
+  /**
+   * Overide parent's method.
+   */
+  renderPathSegments(segments) {
+    for (const segment of segments) {
+      segment.y = 1;
+    }
+
+    const lastSegment = segments[segments.length - 1];
+    const id = `color-property-${LINEAR_GRADIENT_ID_COUNT++}`;
+    const path = super.renderPathSegments(segments, { fill: `url(#${id})` });
+    const linearGradient = dom.linearGradient(
+      { id },
+      segments.map(segment => {
+        return dom.stop({
+          stopColor: segment.computedStyle,
+          offset: segment.x / lastSegment.x,
+        });
+      })
+    );
+
+    return [path, linearGradient];
+  }
+
+  render() {
+    return dom.g(
+      {
+        className: "color-path",
+      },
+      super.renderGraph()
+    );
+  }
+}
+
+/**
+ * Parse given RGBA string.
+ *
+ * @param {String} propertyName
+ * @param {String} colorString
+ *        e.g. rgb(0, 0, 0) or rgba(0, 0, 0, 0.5) and so on.
+ * @return {Object}
+ *         RGBA {r: r, g: g, b: b, a: a}.
+ */
+function getRGBA(propertyName, colorString) {
+  // Special handling for CSS property which can specify the not normal CSS color value.
+  switch (propertyName) {
+    case "caret-color": {
+      // This property can specify "auto" keyword.
+      if (colorString === "auto") {
+        return DEFAULT_COLOR;
+      }
+      break;
+    }
+    case "scrollbar-color": {
+      // This property can specify "auto", "dark", "light" keywords and multiple colors.
+      if (
+        ["auto", "dark", "light"].includes(colorString) ||
+        colorString.indexOf(" ") > 0
+      ) {
+        return DEFAULT_COLOR;
+      }
+      break;
+    }
+  }
+
+  const color = new colorUtils.CssColor(colorString);
+  return color.getRGBATuple();
+}
+
+/**
+ * Return the distance from give two RGBA.
+ *
+ * @param {Object} rgba1
+ *        RGBA (format is same to getRGBA)
+ * @param {Object} rgba2
+ *        RGBA (format is same to getRGBA)
+ * @return {Number}
+ *         The range is 0 - 1.0.
+ */
+function getRGBADistance(rgba1, rgba2) {
+  const startA = rgba1.a;
+  const startR = rgba1.r * startA;
+  const startG = rgba1.g * startA;
+  const startB = rgba1.b * startA;
+  const endA = rgba2.a;
+  const endR = rgba2.r * endA;
+  const endG = rgba2.g * endA;
+  const endB = rgba2.b * endA;
+  const diffA = startA - endA;
+  const diffR = startR - endR;
+  const diffG = startG - endG;
+  const diffB = startB - endB;
+  return Math.sqrt(
+    diffA * diffA + diffR * diffR + diffG * diffG + diffB * diffB
+  );
+}
+
+module.exports = ColorPath;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js b/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
new file mode 100644
index 0000000000..1da5c4da96
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
@@ -0,0 +1,245 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  createPathSegments,
+  DEFAULT_DURATION_RESOLUTION,
+  getPreferredProgressThresholdByKeyframes,
+  toPathString,
+} = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
+
+/*
+ * This class is an abstraction for computed style path of keyframes.
+ * Subclass of this should implement the following methods:
+ *
+ * getPropertyName()
+ *   Returns property name which will be animated.
+ *   @return {String}
+ *           e.g. opacity
+ *
+ * getPropertyValue(keyframe)
+ *   Returns value which uses as animated keyframe value from given parameter.
+ *   @param {Object} keyframe
+ *   @return {String||Number}
+ *           e.g. 0
+ *
+ * toSegmentValue(computedStyle)
+ *   Convert computed style to segment value of graph.
+ *   @param {String||Number}
+ *          e.g. 0
+ *   @return {Number}
+ *          e.g. 0 (should be 0 - 1.0)
+ */
+class ComputedStylePath extends PureComponent {
+  static get propTypes() {
+    return {
+      componentWidth: PropTypes.number.isRequired,
+      easingHintStrokeWidth: PropTypes.number.isRequired,
+      graphHeight: PropTypes.number.isRequired,
+      keyframes: PropTypes.array.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      totalDuration: PropTypes.number.isRequired,
+    };
+  }
+
+  /**
+   * Return an array containing the path segments between the given start and
+   * end keyframe values.
+   *
+   * @param {Object} startKeyframe
+   *        Starting keyframe.
+   * @param {Object} endKeyframe
+   *        Ending keyframe.
+   * @return {Array}
+   *         Array of path segment.
+   *         [{x: {Number} time, y: {Number} segment value}, ...]
+   */
+  getPathSegments(startKeyframe, endKeyframe) {
+    const { componentWidth, simulateAnimation, totalDuration } = this.props;
+
+    const propertyName = this.getPropertyName();
+    const offsetDistance = endKeyframe.offset - startKeyframe.offset;
+    const duration = offsetDistance * totalDuration;
+
+    const keyframes = [startKeyframe, endKeyframe].map((keyframe, index) => {
+      return {
+        offset: index,
+        easing: keyframe.easing,
+        [getJsPropertyName(propertyName)]: this.getPropertyValue(keyframe),
+      };
+    });
+    const effect = {
+      duration,
+      fill: "forwards",
+    };
+
+    const simulatedAnimation = simulateAnimation(keyframes, effect, true);
+
+    if (!simulatedAnimation) {
+      return null;
+    }
+
+    const simulatedElement = simulatedAnimation.effect.target;
+    const win = simulatedElement.ownerGlobal;
+    const threshold = getPreferredProgressThresholdByKeyframes(keyframes);
+
+    const getSegment = time => {
+      simulatedAnimation.currentTime = time;
+      const computedStyle = win
+        .getComputedStyle(simulatedElement)
+        .getPropertyValue(propertyName);
+
+      return {
+        computedStyle,
+        x: time,
+        y: this.toSegmentValue(computedStyle),
+      };
+    };
+
+    const segments = createPathSegments(
+      0,
+      duration,
+      duration / componentWidth,
+      threshold,
+      DEFAULT_DURATION_RESOLUTION,
+      getSegment
+    );
+    const offset = startKeyframe.offset * totalDuration;
+
+    for (const segment of segments) {
+      segment.x += offset;
+    }
+
+    return segments;
+  }
+
+  /**
+   * Render easing hint from given path segments.
+   *
+   * @param {Array} segments
+   *        Path segments.
+   * @return {Element}
+   *         Element which represents easing hint.
+   */
+  renderEasingHint(segments) {
+    const { easingHintStrokeWidth, keyframes, totalDuration } = this.props;
+
+    const hints = [];
+
+    for (let i = 0, indexOfSegments = 0; i < keyframes.length - 1; i++) {
+      const startKeyframe = keyframes[i];
+      const endKeyframe = keyframes[i + 1];
+      const endTime = endKeyframe.offset * totalDuration;
+      const hintSegments = [];
+
+      for (; indexOfSegments < segments.length; indexOfSegments++) {
+        const segment = segments[indexOfSegments];
+        hintSegments.push(segment);
+
+        if (startKeyframe.offset === endKeyframe.offset) {
+          hintSegments.push(segments[++indexOfSegments]);
+          break;
+        } else if (segment.x === endTime) {
+          break;
+        }
+      }
+
+      const g = dom.g(
+        {
+          className: "hint",
+        },
+        dom.title({}, startKeyframe.easing),
+        dom.path({
+          d:
+            `M${hintSegments[0].x},${hintSegments[0].y} ` +
+            toPathString(hintSegments),
+          style: {
+            "stroke-width": easingHintStrokeWidth,
+          },
+        })
+      );
+
+      hints.push(g);
+    }
+
+    return hints;
+  }
+
+  /**
+   * Render graph. This method returns React dom.
+   *
+   * @return {Element}
+   */
+  renderGraph() {
+    const { keyframes } = this.props;
+
+    const segments = [];
+
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      const startKeyframe = keyframes[i];
+      const endKeyframe = keyframes[i + 1];
+      const keyframesSegments = this.getPathSegments(
+        startKeyframe,
+        endKeyframe
+      );
+
+      if (!keyframesSegments) {
+        return null;
+      }
+
+      segments.push(...keyframesSegments);
+    }
+
+    return [this.renderPathSegments(segments), this.renderEasingHint(segments)];
+  }
+
+  /**
+   * Return react dom fron given path segments.
+   *
+   * @param {Array} segments
+   * @param {Object} style
+   * @return {Element}
+   */
+  renderPathSegments(segments, style) {
+    const { graphHeight } = this.props;
+
+    for (const segment of segments) {
+      segment.y *= graphHeight;
+    }
+
+    let d = `M${segments[0].x},0 `;
+    d += toPathString(segments);
+    d += `L${segments[segments.length - 1].x},0 Z`;
+
+    return dom.path({ d, style });
+  }
+}
+
+/**
+ * Convert given CSS property name to JavaScript CSS name.
+ *
+ * @param {String} cssPropertyName
+ *        CSS property name (e.g. background-color).
+ * @return {String}
+ *         JavaScript CSS property name (e.g. backgroundColor).
+ */
+function getJsPropertyName(cssPropertyName) {
+  if (cssPropertyName == "float") {
+    return "cssFloat";
+  }
+  // https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
+  return cssPropertyName.replace(/-([a-z])/gi, (str, group) => {
+    return group.toUpperCase();
+  });
+}
+
+module.exports = ComputedStylePath;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js b/devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js
new file mode 100644
index 0000000000..26e5373f7c
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js
@@ -0,0 +1,67 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const ComputedStylePath = require("resource://devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js");
+
+class DiscretePath extends ComputedStylePath {
+  static get propTypes() {
+    return {
+      name: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = this.propToState(props);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState(this.propToState(nextProps));
+  }
+
+  getPropertyName() {
+    return this.props.name;
+  }
+
+  getPropertyValue(keyframe) {
+    return keyframe.value;
+  }
+
+  propToState({ getComputedStyle, keyframes, name }) {
+    const discreteValues = [];
+
+    for (const keyframe of keyframes) {
+      const style = getComputedStyle(name, { [name]: keyframe.value });
+
+      if (!discreteValues.includes(style)) {
+        discreteValues.push(style);
+      }
+    }
+
+    return { discreteValues };
+  }
+
+  toSegmentValue(computedStyle) {
+    const { discreteValues } = this.state;
+    return discreteValues.indexOf(computedStyle) / (discreteValues.length - 1);
+  }
+
+  render() {
+    return dom.g(
+      {
+        className: "discrete-path",
+      },
+      super.renderGraph()
+    );
+  }
+}
+
+module.exports = DiscretePath;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/DistancePath.js b/devtools/client/inspector/animation/components/keyframes-graph/DistancePath.js
new file mode 100644
index 0000000000..3436366c30
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/DistancePath.js
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const ComputedStylePath = require("resource://devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js");
+
+class DistancePath extends ComputedStylePath {
+  getPropertyName() {
+    return "opacity";
+  }
+
+  getPropertyValue(keyframe) {
+    return keyframe.distance;
+  }
+
+  toSegmentValue(computedStyle) {
+    return computedStyle;
+  }
+
+  render() {
+    return dom.g(
+      {
+        className: "distance-path",
+      },
+      super.renderGraph()
+    );
+  }
+}
+
+module.exports = DistancePath;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js
new file mode 100644
index 0000000000..4212fdb88f
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class KeyframeMarkerItem extends PureComponent {
+  static get propTypes() {
+    return {
+      keyframe: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { keyframe } = this.props;
+
+    return dom.li({
+      className: "keyframe-marker-item",
+      title: keyframe.value,
+      style: {
+        marginInlineStart: `${keyframe.offset * 100}%`,
+      },
+    });
+  }
+}
+
+module.exports = KeyframeMarkerItem;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
new file mode 100644
index 0000000000..7fd112f641
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const KeyframeMarkerItem = createFactory(
+  require("resource://devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js")
+);
+
+class KeyframeMarkerList extends PureComponent {
+  static get propTypes() {
+    return {
+      keyframes: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { keyframes } = this.props;
+
+    return dom.ul(
+      {
+        className: "keyframe-marker-list",
+      },
+      keyframes.map(keyframe => KeyframeMarkerItem({ keyframe }))
+    );
+  }
+}
+
+module.exports = KeyframeMarkerList;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
new file mode 100644
index 0000000000..cbab6806d2
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const KeyframeMarkerList = createFactory(
+  require("resource://devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js")
+);
+const KeyframesGraphPath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js")
+);
+
+class KeyframesGraph extends PureComponent {
+  static get propTypes() {
+    return {
+      getComputedStyle: PropTypes.func.isRequired,
+      keyframes: PropTypes.array.isRequired,
+      name: PropTypes.string.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      type: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    const { getComputedStyle, keyframes, name, simulateAnimation, type } =
+      this.props;
+
+    return dom.div(
+      {
+        className: `keyframes-graph ${name}`,
+      },
+      KeyframesGraphPath({
+        getComputedStyle,
+        keyframes,
+        name,
+        simulateAnimation,
+        type,
+      }),
+      KeyframeMarkerList({ keyframes })
+    );
+  }
+}
+
+module.exports = KeyframesGraph;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js
new file mode 100644
index 0000000000..70c2720194
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js
@@ -0,0 +1,111 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.js");
+
+const ColorPath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js")
+);
+const DiscretePath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js")
+);
+const DistancePath = createFactory(
+  require("resource://devtools/client/inspector/animation/components/keyframes-graph/DistancePath.js")
+);
+
+const {
+  DEFAULT_EASING_HINT_STROKE_WIDTH,
+  DEFAULT_GRAPH_HEIGHT,
+  DEFAULT_KEYFRAMES_GRAPH_DURATION,
+} = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
+
+class KeyframesGraphPath extends PureComponent {
+  static get propTypes() {
+    return {
+      getComputedStyle: PropTypes.func.isRequired,
+      keyframes: PropTypes.array.isRequired,
+      name: PropTypes.string.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      type: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      componentHeight: 0,
+      componentWidth: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.updateState();
+  }
+
+  getPathComponent(type) {
+    switch (type) {
+      case "color":
+        return ColorPath;
+      case "discrete":
+        return DiscretePath;
+      default:
+        return DistancePath;
+    }
+  }
+
+  updateState() {
+    const thisEl = ReactDOM.findDOMNode(this);
+    this.setState({
+      componentHeight: thisEl.parentNode.clientHeight,
+      componentWidth: thisEl.parentNode.clientWidth,
+    });
+  }
+
+  render() {
+    const { getComputedStyle, keyframes, name, simulateAnimation, type } =
+      this.props;
+    const { componentHeight, componentWidth } = this.state;
+
+    if (!componentWidth) {
+      return dom.svg();
+    }
+
+    const pathComponent = this.getPathComponent(type);
+    const strokeWidthInViewBox =
+      (DEFAULT_EASING_HINT_STROKE_WIDTH / 2 / componentHeight) *
+      DEFAULT_GRAPH_HEIGHT;
+
+    return dom.svg(
+      {
+        className: "keyframes-graph-path",
+        preserveAspectRatio: "none",
+        viewBox:
+          `0 -${DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox} ` +
+          `${DEFAULT_KEYFRAMES_GRAPH_DURATION} ` +
+          `${DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox * 2}`,
+      },
+      pathComponent({
+        componentWidth,
+        easingHintStrokeWidth: DEFAULT_EASING_HINT_STROKE_WIDTH,
+        getComputedStyle,
+        graphHeight: DEFAULT_GRAPH_HEIGHT,
+        keyframes,
+        name,
+        simulateAnimation,
+        totalDuration: DEFAULT_KEYFRAMES_GRAPH_DURATION,
+      })
+    );
+  }
+}
+
+module.exports = KeyframesGraphPath;
diff --git a/devtools/client/inspector/animation/components/keyframes-graph/moz.build b/devtools/client/inspector/animation/components/keyframes-graph/moz.build
new file mode 100644
index 0000000000..1ff518e21d
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/moz.build
@@ -0,0 +1,14 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "ColorPath.js",
+    "ComputedStylePath.js",
+    "DiscretePath.js",
+    "DistancePath.js",
+    "KeyframeMarkerItem.js",
+    "KeyframeMarkerList.js",
+    "KeyframesGraph.js",
+    "KeyframesGraphPath.js",
+)
diff --git a/devtools/client/inspector/animation/components/moz.build b/devtools/client/inspector/animation/components/moz.build
new file mode 100644
index 0000000000..cd8ecc05c4
--- /dev/null
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -0,0 +1,30 @@
+# 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/.
+
+DIRS += ["graph", "keyframes-graph"]
+
+DevToolsModules(
+    "AnimatedPropertyItem.js",
+    "AnimatedPropertyList.js",
+    "AnimatedPropertyListContainer.js",
+    "AnimatedPropertyName.js",
+    "AnimationDetailContainer.js",
+    "AnimationDetailHeader.js",
+    "AnimationItem.js",
+    "AnimationList.js",
+    "AnimationListContainer.js",
+    "AnimationTarget.js",
+    "AnimationToolbar.js",
+    "App.js",
+    "CurrentTimeLabel.js",
+    "CurrentTimeScrubber.js",
+    "KeyframesProgressBar.js",
+    "NoAnimationPanel.js",
+    "PauseResumeButton.js",
+    "PlaybackRateSelector.js",
+    "ProgressInspectionPanel.js",
+    "RewindButton.js",
+    "TickLabels.js",
+    "TickLines.js",
+)
diff --git a/devtools/client/inspector/animation/current-time-timer.js b/devtools/client/inspector/animation/current-time-timer.js
new file mode 100644
index 0000000000..4c08eb09ad
--- /dev/null
+++ b/devtools/client/inspector/animation/current-time-timer.js
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * In animation inspector, the scrubber and the progress bar moves along the current time
+ * of animation. However, the processing which sync with actual animations is heavy since
+ * we have to communication by the actor. The role of this class is to make the pseudo
+ * current time in animation inspector to proceed.
+ */
+class CurrentTimeTimer {
+  /**
+   * Constructor.
+   *
+   * @param {Object} timeScale
+   * @param {Bool} shouldStopAfterEndTime
+   *               If need to stop the timer after animation end time, set true.
+   * @param {window} win
+   *                 Be used for requestAnimationFrame and performance.
+   * @param {Function} onUpdated
+   *                   Listener function to get updating.
+   *                   This function is called with 2 parameters.
+   *                   1st: current time
+   *                   2nd: if shouldStopAfterEndTime is true and
+   *                        the current time is over the end time, true is given.
+   */
+  constructor(timeScale, shouldStopAfterEndTime, win, onUpdated) {
+    this.baseCurrentTime = timeScale.getCurrentTime();
+    this.endTime = timeScale.getDuration();
+    this.timerStartTime = win.performance.now();
+
+    this.shouldStopAfterEndTime = shouldStopAfterEndTime;
+    this.onUpdated = onUpdated;
+    this.win = win;
+    this.next = this.next.bind(this);
+  }
+
+  destroy() {
+    this.stop();
+    this.onUpdated = null;
+    this.win = null;
+  }
+
+  /**
+   * Proceed the pseudo current time.
+   */
+  next() {
+    if (this.doStop) {
+      return;
+    }
+
+    const currentTime =
+      this.baseCurrentTime + this.win.performance.now() - this.timerStartTime;
+
+    if (this.endTime < currentTime && this.shouldStopAfterEndTime) {
+      this.onUpdated(this.endTime, true);
+      return;
+    }
+
+    this.onUpdated(currentTime);
+    this.win.requestAnimationFrame(this.next);
+  }
+
+  start() {
+    this.next();
+  }
+
+  stop() {
+    this.doStop = true;
+  }
+}
+
+module.exports = CurrentTimeTimer;
diff --git a/devtools/client/inspector/animation/moz.build b/devtools/client/inspector/animation/moz.build
new file mode 100644
index 0000000000..7620ce2875
--- /dev/null
+++ b/devtools/client/inspector/animation/moz.build
@@ -0,0 +1,12 @@
+# 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/.
+
+DIRS += ["actions", "components", "reducers", "utils"]
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
+
+DevToolsModules("animation.js", "current-time-timer.js")
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Inspector: Animations")
diff --git a/devtools/client/inspector/animation/reducers/animations.js b/devtools/client/inspector/animation/reducers/animations.js
new file mode 100644
index 0000000000..ead3e84147
--- /dev/null
+++ b/devtools/client/inspector/animation/reducers/animations.js
@@ -0,0 +1,117 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_ANIMATIONS,
+  UPDATE_DETAIL_VISIBILITY,
+  UPDATE_ELEMENT_PICKER_ENABLED,
+  UPDATE_HIGHLIGHTED_NODE,
+  UPDATE_PLAYBACK_RATES,
+  UPDATE_SELECTED_ANIMATION,
+  UPDATE_SIDEBAR_SIZE,
+} = require("resource://devtools/client/inspector/animation/actions/index.js");
+
+loader.lazyRequireGetter(
+  this,
+  "TimeScale",
+  "resource://devtools/client/inspector/animation/utils/timescale.js"
+);
+
+const INITIAL_STATE = {
+  animations: [],
+  detailVisibility: false,
+  elementPickerEnabled: false,
+  highlightedNode: null,
+  playbackRates: [],
+  selectedAnimation: null,
+  sidebarSize: {
+    height: 0,
+    width: 0,
+  },
+  timeScale: null,
+};
+
+const reducers = {
+  [UPDATE_ANIMATIONS](state, { animations }) {
+    let detailVisibility = state.detailVisibility;
+    let selectedAnimation = state.selectedAnimation;
+
+    if (
+      !state.selectedAnimation ||
+      !animations.find(
+        animation => animation.actorID === selectedAnimation.actorID
+      )
+    ) {
+      selectedAnimation = animations.length === 1 ? animations[0] : null;
+      detailVisibility = !!selectedAnimation;
+    }
+
+    const playbackRates = getPlaybackRates(state.playbackRates, animations);
+
+    return Object.assign({}, state, {
+      animations,
+      detailVisibility,
+      playbackRates,
+      selectedAnimation,
+      timeScale: new TimeScale(animations),
+    });
+  },
+
+  [UPDATE_DETAIL_VISIBILITY](state, { detailVisibility }) {
+    const selectedAnimation = detailVisibility ? state.selectedAnimation : null;
+
+    return Object.assign({}, state, {
+      detailVisibility,
+      selectedAnimation,
+    });
+  },
+
+  [UPDATE_ELEMENT_PICKER_ENABLED](state, { elementPickerEnabled }) {
+    return Object.assign({}, state, {
+      elementPickerEnabled,
+    });
+  },
+
+  [UPDATE_HIGHLIGHTED_NODE](state, { highlightedNode }) {
+    return Object.assign({}, state, {
+      highlightedNode,
+    });
+  },
+
+  [UPDATE_PLAYBACK_RATES](state) {
+    return Object.assign({}, state, {
+      playbackRates: getPlaybackRates([], state.animations),
+    });
+  },
+
+  [UPDATE_SELECTED_ANIMATION](state, { selectedAnimation }) {
+    const detailVisibility = !!selectedAnimation;
+
+    return Object.assign({}, state, {
+      detailVisibility,
+      selectedAnimation,
+    });
+  },
+
+  [UPDATE_SIDEBAR_SIZE](state, { sidebarSize }) {
+    return Object.assign({}, state, {
+      sidebarSize,
+    });
+  },
+};
+
+function getPlaybackRates(basePlaybackRate, animations) {
+  return [
+    ...new Set(
+      animations.map(a => a.state.playbackRate).concat(basePlaybackRate)
+    ),
+  ];
+}
+
+module.exports = function (state = INITIAL_STATE, action) {
+  const reducer = reducers[action.type];
+  return reducer ? reducer(state, action) : state;
+};
diff --git a/devtools/client/inspector/animation/reducers/moz.build b/devtools/client/inspector/animation/reducers/moz.build
new file mode 100644
index 0000000000..8b20a9f6cd
--- /dev/null
+++ b/devtools/client/inspector/animation/reducers/moz.build
@@ -0,0 +1,7 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "animations.js",
+)
diff --git a/devtools/client/inspector/animation/test/browser.toml b/devtools/client/inspector/animation/test/browser.toml
new file mode 100644
index 0000000000..a13e259df3
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser.toml
@@ -0,0 +1,221 @@
+[DEFAULT]
+prefs = [
+ "dom.svg.pathSeg.enabled=true",
+ "layout.css.properties-and-values.enabled=true"
+]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "current-time-scrubber_head.js",
+  "doc_custom_playback_rate.html",
+  "doc_infinity_duration.html",
+  "doc_multi_easings.html",
+  "doc_multi_keyframes.html",
+  "doc_multi_timings.html",
+  "doc_mutations_add_remove_immediately.html",
+  "doc_mutations_fast.html",
+  "doc_negative_playback_rate.html",
+  "doc_overflowed_delay_end_delay.html",
+  "doc_pseudo.html",
+  "doc_short_duration.html",
+  "doc_simple_animation.html",
+  "doc_special_colors.html",
+  "head.js",
+  "keyframes-graph_keyframe-marker_head.js",
+  "summary-graph_computed-timing-path_head.js",
+  "summary-graph_delay-sign_head.js",
+  "summary-graph_end-delay-sign_head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_animation_animated-property-list.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_animated-property-list_unchanged-items.js"]
+
+["browser_animation_animated-property-name.js"]
+
+["browser_animation_animation-detail_close-button.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_animation-detail_title.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_animation-detail_visibility.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_animation-list.js"]
+
+["browser_animation_animation-list_one-animation-select.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_animation-list_select.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_animation-target.js"]
+
+["browser_animation_animation-target_highlight.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = [
+  "apple_catalina && !debug", # Disabled in Bug 1713158. Intemittent bug: Bug 1665011
+  "os == 'linux' && !debug && !asan && !swgl && !ccov", # Bug 1665011
+  "win11_2009", # Bug 1798331
+  "a11y_checks && debug", # Bugs 1849028 and 1858041 for causing intermittent test results
+]
+
+["browser_animation_animation-target_select.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_animation-timeline-tick.js"]
+
+["browser_animation_css-transition-with-playstate-idle.js"]
+
+["browser_animation_current-time-label.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_current-time-scrubber-rtl.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = ["os == 'linux' && debug"] # Bug 1721716
+
+["browser_animation_current-time-scrubber-with-negative-delay.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_current-time-scrubber.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_current-time-scrubber_each-different-creation-time-animations.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_empty_on_invalid_nodes.js"]
+
+["browser_animation_fission_switch-target.js"]
+
+["browser_animation_indication-bar.js"]
+skip-if = ["a11y_checks"] # Bugs 1858041 and 1849028 for causing intermittent a11y_checks results
+
+["browser_animation_infinity-duration_current-time-scrubber.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_infinity-duration_summary-graph.js"]
+
+["browser_animation_infinity-duration_tick-label.js"]
+
+["browser_animation_keyframes-graph_computed-value-path-01.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_keyframes-graph_computed-value-path-02.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_keyframes-graph_computed-value-path-03.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_keyframes-graph_computed-value-path_easing-hint.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = ["verify && !debug"]
+
+["browser_animation_keyframes-graph_keyframe-marker-rtl.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_keyframes-graph_keyframe-marker.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_keyframes-graph_special-colors.js"]
+
+["browser_animation_keyframes-progress-bar.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = ["os == 'win' && ccov"] # Bug 1490981
+
+["browser_animation_keyframes-progress-bar_after-resuming.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_logic_adjust-time-with-playback-rate.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_logic_adjust-time.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_logic_auto-stop.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_logic_avoid-updating-during-hiding.js"]
+
+["browser_animation_logic_created-time.js"]
+
+["browser_animation_logic_mutations.js"]
+
+["browser_animation_logic_mutations_add_remove_immediately.js"]
+
+["browser_animation_logic_mutations_fast.js"]
+skip-if = [
+  "debug",
+  "win11_2009' && bits == 32", # Bug 1567800
+  "os == 'linux' && !asan && !debug && !swgl && !ccov", # Bug 1567800
+]
+
+["browser_animation_logic_mutations_properties.js"]
+
+["browser_animation_logic_overflowed_delay_end-delay.js"]
+skip-if = ["debug"] #bug 1480027
+
+["browser_animation_logic_scroll-amount.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_pause-resume-button.js"]
+
+["browser_animation_pause-resume-button_end-time.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = ["os == 'linux' && bits == 64 && debug"] # Bug 1767699
+
+["browser_animation_pause-resume-button_respectively.js"]
+
+["browser_animation_pause-resume-button_spacebar.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_playback-rate-selector.js"]
+
+["browser_animation_pseudo-element.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_rewind-button.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_short-duration.js"]
+
+["browser_animation_summary-graph_animation-name.js"]
+
+["browser_animation_summary-graph_compositor.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_summary-graph_computed-timing-path_1.js"]
+
+["browser_animation_summary-graph_computed-timing-path_2.js"]
+
+["browser_animation_summary-graph_computed-timing-path_different-timescale.js"]
+
+["browser_animation_summary-graph_delay-sign-rtl.js"]
+
+["browser_animation_summary-graph_delay-sign.js"]
+
+["browser_animation_summary-graph_effect-timing-path.js"]
+
+["browser_animation_summary-graph_end-delay-sign-rtl.js"]
+
+["browser_animation_summary-graph_end-delay-sign.js"]
+
+["browser_animation_summary-graph_layout-by-seek.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_summary-graph_negative-delay-path.js"]
+
+["browser_animation_summary-graph_negative-end-delay-path.js"]
+
+["browser_animation_summary-graph_tooltip.js"]
+
+["browser_animation_timing_negative-playback-rate_current-time-scrubber.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_animation_timing_negative-playback-rate_summary-graph.js"]
diff --git a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
new file mode 100644
index 0000000000..47661d00fc
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test following animated property list test.
+// 1. Existence for animated property list.
+// 2. Number of animated property item.
+
+const TEST_DATA = [
+  {
+    targetClass: "animated",
+    expectedNumber: 1,
+  },
+  {
+    targetClass: "compositor-notall",
+    expectedNumber: 4,
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking animated property list and items existence at initial");
+  ok(
+    !panel.querySelector(".animated-property-list"),
+    "The animated-property-list should not be in the DOM at initial"
+  );
+
+  for (const { targetClass, expectedNumber } of TEST_DATA) {
+    info(
+      `Checking animated-property-list and items existence at ${targetClass}`
+    );
+    await clickOnAnimationByTargetSelector(
+      animationInspector,
+      panel,
+      `.${targetClass}`
+    );
+
+    await waitUntil(
+      () =>
+        panel.querySelectorAll(".animated-property-item").length ===
+        expectedNumber
+    );
+    ok(
+      true,
+      `The number of animated-property-list should be ${expectedNumber} at ${targetClass}`
+    );
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js b/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
new file mode 100644
index 0000000000..22b889297f
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the position and the class of unchanged animated property items.
+
+const TEST_DATA = [
+  { property: "background-color", isUnchanged: false },
+  { property: "padding-left", isUnchanged: false },
+  { property: "background-attachment", isUnchanged: true },
+  { property: "background-clip", isUnchanged: true },
+  { property: "background-image", isUnchanged: true },
+  { property: "background-origin", isUnchanged: true },
+  { property: "background-position-x", isUnchanged: true },
+  { property: "background-position-y", isUnchanged: true },
+  { property: "background-repeat", isUnchanged: true },
+  { property: "background-size", isUnchanged: true },
+  { property: "padding-bottom", isUnchanged: true },
+  { property: "padding-right", isUnchanged: true },
+  { property: "padding-top", isUnchanged: true },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".longhand"]);
+  const { panel } = await openAnimationInspector();
+
+  info("Checking unchanged animated property item");
+  const itemEls = panel.querySelectorAll(".animated-property-item");
+  is(
+    itemEls.length,
+    TEST_DATA.length,
+    `Count of animated property item should be ${TEST_DATA.length}`
+  );
+
+  for (let i = 0; i < TEST_DATA.length; i++) {
+    const { property, isUnchanged } = TEST_DATA[i];
+    const itemEl = itemEls[i];
+
+    ok(
+      itemEl.querySelector(`.keyframes-graph.${property}`),
+      `Item of ${property} should display at here`
+    );
+
+    if (isUnchanged) {
+      ok(
+        itemEl.classList.contains("unchanged"),
+        "Animated property item should have 'unchanged' class"
+      );
+    } else {
+      ok(
+        !itemEl.classList.contains("unchanged"),
+        "Animated property item should not have 'unchanged' class"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
new file mode 100644
index 0000000000..a1505125f6
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@@ -0,0 +1,127 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the following animated property name component features:
+// * name of property
+// * display compositor sign when the property was running on compositor.
+// * display warning when the property is runnable on compositor but was not.
+
+async function test_element(className, data) {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([className]);
+  const { panel } = await openAnimationInspector();
+
+  info("Checking animated property name component");
+  const animatedPropertyNameEls = panel.querySelectorAll(
+    ".animated-property-name"
+  );
+  is(
+    animatedPropertyNameEls.length,
+    data.length,
+    `Number of animated property name elements should be ${data.length}`
+  );
+
+  for (const [
+    index,
+    animatedPropertyNameEl,
+  ] of animatedPropertyNameEls.entries()) {
+    const { property, isOnCompositor, isWarning } = data[index];
+
+    info(`Checking text content for ${property}`);
+
+    const spanEl = animatedPropertyNameEl.querySelector("span");
+    ok(
+      spanEl,
+      `<span> element should be in animated-property-name of ${property}`
+    );
+    is(spanEl.textContent, property, `textContent should be ${property}`);
+
+    info(`Checking compositor sign for ${property}`);
+
+    if (isOnCompositor) {
+      ok(
+        animatedPropertyNameEl.classList.contains("compositor"),
+        "animatedPropertyNameEl should has .compositor class"
+      );
+      isnot(
+        getComputedStyle(spanEl, "::before").width,
+        "auto",
+        "width of ::before pseud should not be auto"
+      );
+    } else {
+      ok(
+        !animatedPropertyNameEl.classList.contains("compositor"),
+        "animatedPropertyNameEl should not have .compositor class"
+      );
+      is(
+        getComputedStyle(spanEl, "::before").width,
+        "auto",
+        "width of ::before pseud should be auto"
+      );
+    }
+
+    info(`Checking warning for ${property}`);
+
+    if (isWarning) {
+      ok(
+        animatedPropertyNameEl.classList.contains("warning"),
+        "animatedPropertyNameEl should has .warning class"
+      );
+      is(
+        getComputedStyle(spanEl).textDecorationStyle,
+        "dotted",
+        "text-decoration-style of spanEl should be 'dotted'"
+      );
+      is(
+        getComputedStyle(spanEl).textDecorationLine,
+        "underline",
+        "text-decoration-line of spanEl should be 'underline'"
+      );
+    } else {
+      ok(
+        !animatedPropertyNameEl.classList.contains("warning"),
+        "animatedPropertyNameEl should not have .warning class"
+      );
+      is(
+        getComputedStyle(spanEl).textDecorationStyle,
+        "solid",
+        "text-decoration-style of spanEl should be 'solid'"
+      );
+      is(
+        getComputedStyle(spanEl).textDecorationLine,
+        "none",
+        "text-decoration-line of spanEl should be 'none'"
+      );
+    }
+  }
+}
+
+add_task(async function compositor_notall() {
+  await test_element(".compositor-notall", [
+    {
+      property: "--ball-color",
+    },
+    {
+      property: "opacity",
+      isOnCompositor: true,
+    },
+    {
+      property: "transform",
+      isOnCompositor: true,
+    },
+    {
+      property: "width",
+    },
+  ]);
+});
+
+add_task(async function compositor_warning() {
+  await test_element(".compositor-warning", [
+    {
+      property: "opacity",
+      isWarning: true,
+    },
+  ]);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js b/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js
new file mode 100644
index 0000000000..f7fa4cee70
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether close button in header of animation detail works.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking close button in header of animation detail");
+  await clickOnAnimation(animationInspector, panel, 0);
+  const detailEl = panel.querySelector("#animation-container .controlled");
+  const win = panel.ownerGlobal;
+  isnot(
+    win.getComputedStyle(detailEl).display,
+    "none",
+    "detailEl should be visibled before clicking close button"
+  );
+  clickOnDetailCloseButton(panel);
+  is(
+    win.getComputedStyle(detailEl).display,
+    "none",
+    "detailEl should be unvisibled after clicking close button"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
new file mode 100644
index 0000000000..91dfd2e50f
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether title in header of animations detail.
+
+const TEST_DATA = [
+  {
+    targetClass: "cssanimation-normal",
+    expectedTitle: "cssanimation — CSS Animation",
+  },
+  {
+    targetClass: "delay-positive",
+    expectedTitle: "test-delay-animation — Script Animation",
+  },
+  {
+    targetClass: "easing-step",
+    expectedTitle: "Script Animation",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking title in each header of animation detail");
+
+  for (const { targetClass, expectedTitle } of TEST_DATA) {
+    info(`Checking title at ${targetClass}`);
+    await clickOnAnimationByTargetSelector(
+      animationInspector,
+      panel,
+      `.${targetClass}`
+    );
+    const titleEl = panel.querySelector(".animation-detail-title");
+    is(
+      titleEl.textContent,
+      expectedTitle,
+      `Title of "${targetClass}" should be "${expectedTitle}"`
+    );
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js b/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js
new file mode 100644
index 0000000000..14f406a1a3
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether animations detail could be displayed if there is selected animation.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking animation detail visibility if animation was unselected");
+  const detailEl = panel.querySelector("#animation-container .controlled");
+  ok(detailEl, "The detail pane should be in the DOM");
+  await assertDisplayStyle(detailEl, true, "detailEl should be unvisibled");
+
+  info(
+    "Checking animation detail visibility if animation was selected by click"
+  );
+  await clickOnAnimation(animationInspector, panel, 0);
+  await assertDisplayStyle(detailEl, false, "detailEl should be visibled");
+
+  info(
+    "Checking animation detail visibility when choose node which has animations"
+  );
+  await selectNode("html", inspector);
+  await assertDisplayStyle(
+    detailEl,
+    true,
+    "detailEl should be unvisibled after choose html node"
+  );
+
+  info(
+    "Checking animation detail visibility when choose node which has an animation"
+  );
+  await selectNode("div", inspector);
+  await assertDisplayStyle(
+    detailEl,
+    false,
+    "detailEl should be visibled after choose .cssanimation-normal node"
+  );
+});
+
+async function assertDisplayStyle(detailEl, isNoneExpected, description) {
+  const win = detailEl.ownerGlobal;
+  await waitUntil(() => {
+    const isNone = win.getComputedStyle(detailEl).display === "none";
+    return isNone === isNoneExpected;
+  });
+  ok(true, description);
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-list.js b/devtools/client/inspector/animation/test/browser_animation_animation-list.js
new file mode 100644
index 0000000000..4f2c4419b3
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether animations ui could be displayed
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".long"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking animation list and items existence");
+  ok(
+    panel.querySelector(".animation-list"),
+    "The animation-list is in the DOM"
+  );
+  is(
+    panel.querySelectorAll(".animation-list .animation-item").length,
+    animationInspector.state.animations.length,
+    "The number of animations displayed matches the number of animations"
+  );
+
+  info(
+    "Checking list and items existence after select a element which has an animation"
+  );
+  await selectNode(".animated", inspector);
+  await waitUntil(
+    () => panel.querySelectorAll(".animation-list .animation-item").length === 1
+  );
+  ok(
+    true,
+    "The number of animations displayed should be 1 for .animated element"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-list_one-animation-select.js b/devtools/client/inspector/animation/test/browser_animation_animation-list_one-animation-select.js
new file mode 100644
index 0000000000..d84750385c
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list_one-animation-select.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the animation item has been selected from first time
+// if count of the animations is one.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated"]);
+  const { panel } = await openAnimationInspector();
+
+  info("Checking whether an item element has been selected");
+  is(
+    panel.querySelector(".animation-item").classList.contains("selected"),
+    true,
+    "The animation item should have 'selected' class"
+  );
+
+  info(
+    "Checking whether the element will be unselected after closing the detail pane"
+  );
+  clickOnDetailCloseButton(panel);
+  is(
+    panel.querySelector(".animation-item").classList.contains("selected"),
+    false,
+    "The animation item should not have 'selected' class"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-list_select.js b/devtools/client/inspector/animation/test/browser_animation_animation-list_select.js
new file mode 100644
index 0000000000..0d8901ef46
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list_select.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the animation items in the list were selectable.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".long"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking whether 1st element will be selected");
+  await clickOnAnimation(animationInspector, panel, 0);
+  assertSelection(panel, [true, false]);
+
+  info("Checking whether 2nd element will be selected");
+  await clickOnAnimation(animationInspector, panel, 1);
+  assertSelection(panel, [false, true]);
+
+  info(
+    "Checking whether all elements will be unselected after closing the detail pane"
+  );
+  clickOnDetailCloseButton(panel);
+  assertSelection(panel, [false, false]);
+});
+
+function assertSelection(panel, expectedResult) {
+  panel.querySelectorAll(".animation-item").forEach((item, index) => {
+    const shouldSelected = expectedResult[index];
+    is(
+      item.classList.contains("selected"),
+      shouldSelected,
+      `Animation item[${index}] should ` +
+        `${shouldSelected ? "" : "not"} have 'selected' class`
+    );
+  });
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-target.js b/devtools/client/inspector/animation/test/browser_animation_animation-target.js
new file mode 100644
index 0000000000..e38ae18755
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following AnimationTarget component works.
+// * element existance
+// * number of elements
+// * content of element
+// * title of inspect icon
+
+const TEST_DATA = [
+  { expectedTextContent: "div.ball.animated" },
+  { expectedTextContent: "div.ball.long" },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".long"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking the animation target elements existance");
+  const animationItemEls = panel.querySelectorAll(
+    ".animation-list .animation-item"
+  );
+  is(
+    animationItemEls.length,
+    animationInspector.state.animations.length,
+    "Number of animation target element should be same to number of animations " +
+      "that displays"
+  );
+
+  for (let i = 0; i < animationItemEls.length; i++) {
+    const animationItemEl = animationItemEls[i];
+    animationItemEl.scrollIntoView(false);
+    await waitUntil(() => animationItemEl.querySelector(".animation-target"));
+
+    const animationTargetEl =
+      animationItemEl.querySelector(".animation-target");
+    ok(
+      animationTargetEl,
+      "The animation target element should be in each animation item element"
+    );
+
+    info("Checking the content of animation target");
+    const testData = TEST_DATA[i];
+    is(
+      animationTargetEl.textContent,
+      testData.expectedTextContent,
+      "The target element's content is correct"
+    );
+    ok(
+      animationTargetEl.querySelector(".objectBox"),
+      "objectBox is in the page exists"
+    );
+    ok(
+      animationTargetEl.querySelector(".highlight-node").title,
+      INSPECTOR_L10N.getStr("inspector.nodePreview.highlightNodeLabel")
+    );
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js b/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js
new file mode 100644
index 0000000000..0ff5b08018
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js
@@ -0,0 +1,118 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"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, inspector, panel } =
+    await openAnimationInspector();
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  info("Check highlighting when mouse over on a target node");
+  const onHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  mouseOverOnTargetNode(animationInspector, panel, 0);
+  let data = await onHighlight;
+  assertNodeFront(data.nodeFront, "DIV", "ball animated");
+
+  info("Check unhighlighting when mouse out on a target node");
+  const onUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  mouseOutOnTargetNode(animationInspector, panel, 0);
+  await onUnhighlight;
+  ok(true, "Unhighlighted the targe node");
+
+  info("Check node is highlighted when the inspect icon is clicked");
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  await clickOnInspectIcon(animationInspector, panel, 0);
+  data = await onHighlighterShown;
+  assertNodeFront(data.nodeFront, "DIV", "ball animated");
+  await assertHighlight(panel, 0, true);
+
+  info("Check if the animation target is still highlighted on mouse out");
+  mouseOutOnTargetNode(animationInspector, panel, 0);
+  await wait(500);
+  await assertHighlight(panel, 0, true);
+
+  info("Check no highlight event occur by mouse over locked target");
+  let highlightEventCount = 0;
+  function onHighlighterHidden({ type }) {
+    if (type === inspector.highlighters.TYPES.BOXMODEL) {
+      highlightEventCount += 1;
+    }
+  }
+  inspector.highlighters.on("highlighter-hidden", onHighlighterHidden);
+  mouseOverOnTargetNode(animationInspector, panel, 0);
+  await wait(500);
+  is(highlightEventCount, 0, "Highlight event should not occur");
+  inspector.highlighters.off("highlighter-hidden", onHighlighterHidden);
+
+  info("Show persistent highlighter on an animation target");
+  const onPersistentHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  await clickOnInspectIcon(animationInspector, panel, 1);
+  data = await onPersistentHighlighterShown;
+  assertNodeFront(data.nodeFront, "DIV", "ball multi");
+
+  info("Check the highlighted state of the animation targets");
+  await assertHighlight(panel, 0, false);
+  await assertHighlight(panel, 1, true);
+  await assertHighlight(panel, 2, true);
+
+  info("Hide persistent highlighter");
+  const onPersistentHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  await clickOnInspectIcon(animationInspector, panel, 1);
+  await onPersistentHighlighterHidden;
+
+  info("Check the highlighted state of the animation targets");
+  await assertHighlight(panel, 0, false);
+  await assertHighlight(panel, 1, false);
+  await assertHighlight(panel, 2, false);
+});
+
+async function assertHighlight(panel, index, isHighlightExpected) {
+  const animationItemEl = await findAnimationItemByIndex(panel, index);
+  const animationTargetEl = animationItemEl.querySelector(".animation-target");
+
+  await waitUntil(
+    () =>
+      animationTargetEl.classList.contains("highlighting") ===
+      isHighlightExpected
+  );
+  ok(true, `Highlighting class of animation target[${index}] is correct`);
+}
+
+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,
+    "The highlighted node has the correct class"
+  );
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-target_select.js b/devtools/client/inspector/animation/test/browser_animation_animation-target_select.js
new file mode 100644
index 0000000000..970778c4c6
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target_select.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following selection feature related AnimationTarget component works:
+// * select selected node by clicking on target node
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".multi", ".long"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Check initial status");
+  is(
+    panel.querySelectorAll(".animation-item").length,
+    3,
+    "The length of animations should be 3. Two .multi animations and one .long animation"
+  );
+
+  info("Check selecting an animated node by clicking on the target node");
+  await clickOnTargetNode(animationInspector, panel, 0);
+  assertNodeFront(
+    animationInspector.inspector.selection.nodeFront,
+    "DIV",
+    "ball multi"
+  );
+  is(
+    panel.querySelectorAll(".animation-item").length,
+    2,
+    "The length of animations should be 2"
+  );
+
+  info("Check if the both target nodes refer to the same node");
+  await clickOnTargetNode(animationInspector, panel, 1);
+  assertNodeFront(
+    animationInspector.inspector.selection.nodeFront,
+    "DIV",
+    "ball multi"
+  );
+  is(
+    panel.querySelectorAll(".animation-item").length,
+    2,
+    "The length of animations should be 2"
+  );
+});
+
+function assertNodeFront(nodeFront, tagName, classValue) {
+  is(
+    nodeFront.tagName,
+    tagName,
+    "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,
+    "The highlighted node has the correct class"
+  );
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
new file mode 100644
index 0000000000..03e9535558
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -0,0 +1,109 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following timeline tick items.
+// * animation list header elements existence
+// * tick labels elements existence
+// * count and text of tick label elements changing by the sidebar width
+
+const TimeScale = require("resource://devtools/client/inspector/animation/utils/timescale.js");
+const {
+  findOptimalTimeInterval,
+} = require("resource://devtools/client/inspector/animation/utils/utils.js");
+
+// Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
+// AnimationTimeTickList component.
+const TIME_GRADUATION_MIN_SPACING = 40;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+  const timeScale = new TimeScale(animationInspector.state.animations);
+
+  info("Checking animation list header element existence");
+  const listContainerEl = panel.querySelector(".animation-list-container");
+  const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar");
+  ok(
+    listHeaderEl,
+    "The header element should be in animation list container element"
+  );
+
+  info("Checking time tick item elements existence");
+  await assertTickLabels(timeScale, listContainerEl);
+  const timelineTickItemLength =
+    listContainerEl.querySelectorAll(".tick-label").length;
+
+  info("Checking timeline tick item elements after enlarge sidebar width");
+  await setSidebarWidth("100%", inspector);
+  await assertTickLabels(timeScale, listContainerEl);
+  Assert.less(
+    timelineTickItemLength,
+    listContainerEl.querySelectorAll(".tick-label").length,
+    "The timeline tick item elements should increase"
+  );
+});
+
+/**
+ * Assert tick label's position and label.
+ *
+ * @param {TimeScale} - timeScale
+ * @param {Element} - listContainerEl
+ */
+async function assertTickLabels(timeScale, listContainerEl) {
+  const timelineTickListEl = listContainerEl.querySelector(".tick-labels");
+  ok(
+    timelineTickListEl,
+    "The animation timeline tick list element should be in header"
+  );
+
+  const width = timelineTickListEl.offsetWidth;
+  const animationDuration = timeScale.getDuration();
+  const minTimeInterval =
+    (TIME_GRADUATION_MIN_SPACING * animationDuration) / width;
+  const interval = findOptimalTimeInterval(minTimeInterval);
+  const shiftWidth = timeScale.zeroPositionTime % interval;
+  const expectedTickItem =
+    Math.ceil(animationDuration / interval) + (shiftWidth !== 0 ? 1 : 0);
+
+  await waitUntil(
+    () =>
+      timelineTickListEl.querySelectorAll(".tick-label").length ===
+      expectedTickItem
+  );
+  ok(true, "The expected number of timeline ticks were found");
+
+  const timelineTickItemEls =
+    timelineTickListEl.querySelectorAll(".tick-label");
+
+  info("Make sure graduations are evenly distributed and show the right times");
+  for (const [index, tickEl] of timelineTickItemEls.entries()) {
+    const left = parseFloat(tickEl.style.marginInlineStart);
+    let expectedPos =
+      (((index - 1) * interval + shiftWidth) / animationDuration) * 100;
+    if (shiftWidth !== 0 && index === 0) {
+      expectedPos = 0;
+    }
+    is(
+      Math.round(left),
+      Math.round(expectedPos),
+      `Graduation ${index} is positioned correctly`
+    );
+
+    // Note that the distancetoRelativeTime and formatTime functions are tested
+    // separately in xpcshell test test_timeScale.js, so we assume that they
+    // work here.
+    const formattedTime = timeScale.formatTime(
+      timeScale.distanceToRelativeTime(expectedPos, width)
+    );
+    is(
+      tickEl.textContent,
+      formattedTime,
+      `Graduation ${index} has the right text content`
+    );
+  }
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_css-transition-with-playstate-idle.js b/devtools/client/inspector/animation/test/browser_animation_css-transition-with-playstate-idle.js
new file mode 100644
index 0000000000..1970884623
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_css-transition-with-playstate-idle.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that animation inspector does not fail when rendering an animation that
+// transitions from the playState "idle".
+
+const PAGE_URL = `data:text/html;charset=utf-8,
+<!DOCTYPE html>
+<html>
+<head>
+  <style type="text/css">
+    div {
+      opacity: 0;
+      transition-duration: 5000ms;
+      transition-property: opacity;
+    }
+
+    div.visible {
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+  <div>test</div>
+</body>
+</html>`;
+
+add_task(async function () {
+  const tab = await addTab(PAGE_URL);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Toggle the visible class to start the animation");
+  await toggleVisibleClass(tab);
+
+  info("Wait until the scrubber is displayed");
+  await waitUntil(() => panel.querySelector(".current-time-scrubber"));
+  const scrubberEl = panel.querySelector(".current-time-scrubber");
+
+  info("Wait until animations are paused");
+  await waitUntilAnimationsPaused(animationInspector);
+
+  // Check the initial position of the scrubber to detect the animation.
+  const scrubberX = scrubberEl.getBoundingClientRect().x;
+
+  info("Toggle the visible class to start the animation");
+  await toggleVisibleClass(tab);
+
+  info("Wait until the scrubber starts moving");
+  await waitUntil(() => scrubberEl.getBoundingClientRect().x != scrubberX);
+
+  info("Wait until animations are paused");
+  await waitUntilAnimationsPaused(animationInspector);
+
+  // Query the scrubber element again to check that the UI is still rendered.
+  ok(
+    !!panel.querySelector(".current-time-scrubber"),
+    "The scrubber element is still rendered in the animation inspector panel"
+  );
+});
+
+/**
+ * Local helper to toggle the "visible" class on the element with a transition defined.
+ */
+async function toggleVisibleClass(tab) {
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    const win = content.wrappedJSObject;
+    win.document.querySelector("div").classList.toggle("visible");
+  });
+}
+
+async function waitUntilAnimationsPaused(animationInspector) {
+  await waitUntil(() => {
+    const animations = animationInspector.state.animations;
+    return animations.every(animation => {
+      const state = animation.state.playState;
+      return state === "paused" || state === "finished";
+    });
+  });
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_current-time-label.js b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
new file mode 100644
index 0000000000..0cff5b1f53
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following CurrentTimeLabel component:
+// * element existence
+// * label content at plural timing
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept([".keyframes-easing-step"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking current time label existence");
+  const labelEl = panel.querySelector(".current-time-label");
+  ok(labelEl, "current time label should exist");
+
+  info("Checking current time label content");
+  const duration = animationInspector.state.timeScale.getDuration();
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  await waitUntilCurrentTimeChangedAt(animationInspector, duration * 0.5);
+  const targetAnimation = animationInspector.state.animations[0];
+  assertLabelContent(labelEl, targetAnimation.state.currentTime);
+
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.2);
+  await waitUntilCurrentTimeChangedAt(animationInspector, duration * 0.2);
+  assertLabelContent(labelEl, targetAnimation.state.currentTime);
+
+  info("Checking current time label content during running");
+  // Resume
+  clickOnPauseResumeButton(animationInspector, panel);
+  const previousContent = labelEl.textContent;
+
+  info("Wait until the time label changes");
+  await waitFor(() => labelEl.textContent != previousContent);
+  isnot(
+    previousContent,
+    labelEl.textContent,
+    "Current time label should change"
+  );
+});
+
+function assertLabelContent(labelEl, time) {
+  const expected = formatStopwatchTime(time);
+  is(labelEl.textContent, expected, `Content of label should be ${expected}`);
+}
+
+function formatStopwatchTime(time) {
+  // Format falsy values as 0
+  if (!time) {
+    return "00:00.000";
+  }
+
+  let milliseconds = parseInt(time % 1000, 10);
+  let seconds = parseInt((time / 1000) % 60, 10);
+  let minutes = parseInt(time / (1000 * 60), 10);
+
+  const pad = (nb, max) => {
+    if (nb < max) {
+      return new Array((max + "").length - (nb + "").length + 1).join("0") + nb;
+    }
+
+    return nb;
+  };
+
+  minutes = pad(minutes, 10);
+  seconds = pad(seconds, 10);
+  milliseconds = pad(milliseconds, 100);
+
+  return `${minutes}:${seconds}.${milliseconds}`;
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber-rtl.js b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber-rtl.js
new file mode 100644
index 0000000000..1da1c56e10
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber-rtl.js
@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from current-time-scrubber_head.js */
+
+// Test for CurrentTimeScrubber on RTL environment.
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "current-time-scrubber_head.js",
+    this
+  );
+  await pushPref("intl.l10n.pseudo", "bidi");
+  // eslint-disable-next-line no-undef
+  await testCurrentTimeScrubber(true);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber-with-negative-delay.js b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber-with-negative-delay.js
new file mode 100644
index 0000000000..8b2e177079
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber-with-negative-delay.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the most left position means negative current time.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept([
+    ".cssanimation-normal",
+    ".delay-negative",
+  ]);
+  const { animationInspector, panel, inspector } =
+    await openAnimationInspector();
+
+  info("Checking scrubber controller existence");
+  const controllerEl = panel.querySelector(".current-time-scrubber-area");
+  ok(controllerEl, "scrubber controller should exist");
+
+  info("Checking the current time of most left scrubber position");
+  const timeScale = animationInspector.state.timeScale;
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  await waitUntilCurrentTimeChangedAt(
+    animationInspector,
+    -1 * timeScale.zeroPositionTime
+  );
+  ok(true, "Current time is correct");
+
+  info("Select negative current time animation");
+  await selectNode(".cssanimation-normal", inspector);
+  await waitUntilCurrentTimeChangedAt(
+    animationInspector,
+    -1 * timeScale.zeroPositionTime
+  );
+  ok(true, "Current time is correct");
+
+  info("Back to 'body' and rewind the animation");
+  await selectNode("body", inspector);
+  await waitUntil(
+    () =>
+      panel.querySelectorAll(".animation-item").length ===
+      animationInspector.state.animations.length
+  );
+  clickOnRewindButton(animationInspector, panel);
+  await waitUntilCurrentTimeChangedAt(animationInspector, 0);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js
new file mode 100644
index 0000000000..76cd42f282
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from current-time-scrubber_head.js */
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "current-time-scrubber_head.js",
+    this
+  );
+  await testCurrentTimeScrubber();
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber_each-different-creation-time-animations.js b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber_each-different-creation-time-animations.js
new file mode 100644
index 0000000000..6761bacb19
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber_each-different-creation-time-animations.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether proper currentTime was set for each animations.
+
+const WAIT_TIME = 3000;
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".still"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info(
+    "Add an animation to make a situation which has different creation time"
+  );
+  await wait(WAIT_TIME);
+  await setClassAttribute(animationInspector, ".still", "ball compositor-all");
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 2);
+
+  info("Move the scrubber");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+
+  info("Check existed animations have different currentTime");
+  const animations = animationInspector.state.animations;
+  Assert.greater(
+    animations[0].state.currentTime + WAIT_TIME,
+    animations[1].state.currentTime,
+    `The currentTime of added animation shold be ${WAIT_TIME}ms less than ` +
+      "at least that currentTime of first animation"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js b/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
new file mode 100644
index 0000000000..d3fa9166a1
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the panel shows no animation data for invalid or not animated nodes
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".long", ".still"]);
+  const { inspector, panel } = await openAnimationInspector();
+
+  info("Checking animation list and error message existence for a still node");
+  const stillNode = await getNodeFront(".still", inspector);
+  await selectNode(stillNode, inspector);
+
+  await waitUntil(() => panel.querySelector(".animation-error-message"));
+  ok(
+    true,
+    "Element which has animation-error-message class should exist for a still node"
+  );
+  is(
+    panel.querySelector(".animation-error-message > p").textContent,
+    ANIMATION_L10N.getStr("panel.noAnimation"),
+    "The correct error message is displayed"
+  );
+  ok(
+    !panel.querySelector(".animation-list"),
+    "Element which has animations class should not exist for a still node"
+  );
+
+  info(
+    "Show animations once to confirm if there is no animations on the comment node"
+  );
+  await selectNode(".long", inspector);
+  await waitUntil(() => !panel.querySelector(".animation-error-message"));
+
+  info("Checking animation list and error message existence for a text node");
+  const commentNode = await inspector.walker.previousSibling(stillNode);
+  await selectNode(commentNode, inspector);
+  await waitUntil(() => panel.querySelector(".animation-error-message"));
+  ok(
+    panel.querySelector(".animation-error-message"),
+    "Element which has animation-error-message class should exist for a text node"
+  );
+  ok(
+    !panel.querySelector(".animation-list"),
+    "Element which has animations class should not exist for a text node"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_fission_switch-target.js b/devtools/client/inspector/animation/test/browser_animation_fission_switch-target.js
new file mode 100644
index 0000000000..5a50e4098f
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_fission_switch-target.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the animation inspector works after switching targets.
+
+const PAGE_ON_CONTENT = `data:text/html;charset=utf-8,
+<!DOCTYPE html>
+<style type="text/css">
+  div {
+    opacity: 0;
+    transition-duration: 5000ms;
+    transition-property: opacity;
+  }
+
+  div:hover {
+    opacity: 1;
+  }
+</style>
+<div class="anim">animation</div>
+`;
+const PAGE_ON_MAIN = "about:networking";
+
+add_task(async function () {
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  info("Open a page that runs on the content process and has animations");
+  const tab = await addTab(PAGE_ON_CONTENT);
+  const { animationInspector, inspector } = await openAnimationInspector();
+
+  info("Check the length of the initial animations of the content process");
+  is(
+    animationInspector.state.animations.length,
+    0,
+    "The length of the initial animation is correct"
+  );
+
+  info("Check whether the mutation on content process page is worked or not");
+  await assertAnimationsMutation(tab, "div", animationInspector, 1);
+
+  info("Load a page that runs on the main process");
+  await navigateTo(
+    PAGE_ON_MAIN,
+    tab.linkedBrowser,
+    animationInspector,
+    inspector
+  );
+  await waitUntil(() => animationInspector.state.animations.length === 0);
+  ok(true, "The animations are replaced");
+
+  info("Check whether the mutation on main process page is worked or not");
+  await assertAnimationsMutation(tab, "#category-http", animationInspector, 1);
+
+  info("Load a content process page again");
+  await navigateTo(
+    PAGE_ON_CONTENT,
+    tab.linkedBrowser,
+    animationInspector,
+    inspector
+  );
+  await waitUntil(() => animationInspector.state.animations.length === 0);
+  ok(true, "The animations are replaced again");
+
+  info("Check the mutation on content process again");
+  await assertAnimationsMutation(tab, "div", animationInspector, 1);
+});
+
+async function assertAnimationsMutation(
+  tab,
+  selector,
+  animationInspector,
+  expectedAnimationCount
+) {
+  await hover(tab, selector);
+  await waitUntil(
+    () => animationInspector.state.animations.length === expectedAnimationCount
+  );
+  ok(true, "Animations mutation is worked");
+}
+
+async function navigateTo(uri, browser, animationInspector, inspector) {
+  const previousAnimationsFront = animationInspector.animationsFront;
+  const onReloaded = inspector.once("reloaded");
+  const onUpdated = inspector.once("inspector-updated");
+  BrowserTestUtils.startLoadingURIString(browser, uri);
+  await waitUntil(
+    () => previousAnimationsFront !== animationInspector.animationsFront
+  );
+  ok(true, "Target is switched correctly");
+  await Promise.all([onReloaded, onUpdated]);
+}
+
+async function hover(tab, selector) {
+  await SpecialPowers.spawn(tab.linkedBrowser, [selector], async s => {
+    const element = content.wrappedJSObject.document.querySelector(s);
+    InspectorUtils.addPseudoClassLock(element, ":hover", true);
+  });
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_indication-bar.js b/devtools/client/inspector/animation/test/browser_animation_indication-bar.js
new file mode 100644
index 0000000000..829054178a
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_indication-bar.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the indication bar of both scrubber and progress bar indicates correct
+// progress after resizing animation inspector.
+
+add_task(async function () {
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking timeline tick item elements after enlarge sidebar width");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  await setSidebarWidth("100%", inspector);
+  assertPosition(".current-time-scrubber", panel, 0.5);
+  assertPosition(".keyframes-progress-bar", panel, 0.5);
+});
+
+/**
+ * Assert indication bar position.
+ *
+ * @param {String} indicationBarSelector
+ * @param {Element} panel
+ * @param {Number} expectedPositionRate
+ */
+function assertPosition(indicationBarSelector, panel, expectedPositionRate) {
+  const barEl = panel.querySelector(indicationBarSelector);
+  const parentEl = barEl.parentNode;
+  const rectBar = barEl.getBoundingClientRect();
+  const rectParent = parentEl.getBoundingClientRect();
+  const barX = rectBar.x + rectBar.width * 0.5 - rectParent.x;
+  const expectedPosition = rectParent.width * expectedPositionRate;
+  ok(
+    expectedPosition - 1 <= barX && barX <= expectedPosition + 1,
+    `Indication bar position should be approximately ${expectedPosition}`
+  );
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_infinity-duration_current-time-scrubber.js b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_current-time-scrubber.js
new file mode 100644
index 0000000000..b4f82a950e
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_current-time-scrubber.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the scrubber was working for even the animation of infinity duration.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_infinity_duration.html");
+  await removeAnimatedElementsExcept([".infinity-delay-iteration-start"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Set initial state");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  const initialCurrentTime =
+    animationInspector.state.animations[0].state.currentTime;
+
+  info("Check whether the animation currentTime was increased");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
+  await waitUntil(
+    () =>
+      initialCurrentTime <
+      animationInspector.state.animations[0].state.currentTime
+  );
+  ok(true, "currentTime should be increased");
+
+  info("Check whether the progress bar was moved");
+  const areaEl = panel.querySelector(".keyframes-progress-bar-area");
+  const barEl = areaEl.querySelector(".keyframes-progress-bar");
+  const controllerBounds = areaEl.getBoundingClientRect();
+  const barBounds = barEl.getBoundingClientRect();
+  const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
+  const expectedBarX = controllerBounds.width * 0.5;
+  Assert.less(
+    Math.abs(barX - expectedBarX),
+    1,
+    "Progress bar should indicate at progress of 0.5"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js
new file mode 100644
index 0000000000..44343c3aa8
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js
@@ -0,0 +1,147 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following summary graph with the animation which has infinity duration.
+// * Tooltips
+// * Graph path
+// * Delay sign
+
+const TEST_DATA = [
+  {
+    targetClass: "infinity",
+    expectedIterationPath: [
+      { x: 0, y: 0 },
+      { x: 200000, y: 0 },
+    ],
+    expectedTooltip: {
+      duration: "\u221E",
+    },
+  },
+  {
+    targetClass: "infinity-delay-iteration-start",
+    expectedDelayPath: [
+      { x: 0, y: 0 },
+      { x: 100000, y: 0 },
+    ],
+    expectedDelaySign: {
+      marginInlineStart: "0%",
+      width: "50%",
+    },
+    expectedIterationPath: [
+      { x: 100000, y: 50 },
+      { x: 200000, y: 50 },
+    ],
+    expectedTooltip: {
+      delay: "100s",
+      duration: "\u221E",
+      iterationStart: "0.5 (\u221E)",
+    },
+  },
+  {
+    targetClass: "limited",
+    expectedIterationPath: [
+      { x: 0, y: 0 },
+      { x: 100000, y: 100 },
+    ],
+    expectedTooltip: {
+      duration: "100s",
+    },
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_infinity_duration.html");
+  const { panel } = await openAnimationInspector();
+
+  for (const testData of TEST_DATA) {
+    const {
+      targetClass,
+      expectedDelayPath,
+      expectedDelaySign,
+      expectedIterationPath,
+      expectedTooltip,
+    } = testData;
+
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+    const summaryGraphEl = animationItemEl.querySelector(
+      ".animation-summary-graph"
+    );
+
+    info(`Check tooltip for the animation of .${targetClass}`);
+    assertTooltip(summaryGraphEl, expectedTooltip);
+
+    if (expectedDelayPath) {
+      info(`Check delay path for the animation of .${targetClass}`);
+      assertDelayPath(summaryGraphEl, expectedDelayPath);
+    }
+
+    if (expectedDelaySign) {
+      info(`Check delay sign for the animation of .${targetClass}`);
+      assertDelaySign(summaryGraphEl, expectedDelaySign);
+    }
+
+    info(`Check iteration path for the animation of .${targetClass}`);
+    assertIterationPath(summaryGraphEl, expectedIterationPath);
+  }
+});
+
+function assertDelayPath(summaryGraphEl, expectedPath) {
+  assertPath(
+    summaryGraphEl,
+    ".animation-computed-timing-path .animation-delay-path",
+    expectedPath
+  );
+}
+
+function assertDelaySign(summaryGraphEl, expectedSign) {
+  const signEl = summaryGraphEl.querySelector(".animation-delay-sign");
+
+  is(
+    signEl.style.marginInlineStart,
+    expectedSign.marginInlineStart,
+    `marginInlineStart position should be ${expectedSign.marginInlineStart}`
+  );
+  is(
+    signEl.style.width,
+    expectedSign.width,
+    `Width should be ${expectedSign.width}`
+  );
+}
+
+function assertIterationPath(summaryGraphEl, expectedPath) {
+  assertPath(
+    summaryGraphEl,
+    ".animation-computed-timing-path .animation-iteration-path",
+    expectedPath
+  );
+}
+
+function assertPath(summaryGraphEl, pathSelector, expectedPath) {
+  const pathEl = summaryGraphEl.querySelector(pathSelector);
+  assertPathSegments(pathEl, true, expectedPath);
+}
+
+function assertTooltip(summaryGraphEl, expectedTooltip) {
+  const tooltip = summaryGraphEl.getAttribute("title");
+  const { delay, duration, iterationStart } = expectedTooltip;
+
+  if (delay) {
+    const expected = `Delay: ${delay}`;
+    ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+  }
+
+  if (duration) {
+    const expected = `Duration: ${duration}`;
+    ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+  }
+
+  if (iterationStart) {
+    const expected = `Iteration start: ${iterationStart}`;
+    ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+  }
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_infinity-duration_tick-label.js b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_tick-label.js
new file mode 100644
index 0000000000..2a554267c4
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_tick-label.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test of the content of tick label on timeline header
+// with the animation which has infinity duration.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_infinity_duration.html");
+  const { inspector, panel } = await openAnimationInspector();
+
+  info("Check the tick label content with limited duration animation");
+  isnot(
+    panel.querySelector(".animation-list-container .tick-label:last-child")
+      .textContent,
+    "\u221E",
+    "The content should not be \u221E"
+  );
+
+  info("Check the tick label content with infinity duration animation only");
+  await selectNode(".infinity", inspector);
+  await waitUntil(
+    () =>
+      panel.querySelector(".animation-list-container .tick-label:last-child")
+        .textContent === "\u221E"
+  );
+  ok(true, "The content should be \u221E");
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js
new file mode 100644
index 0000000000..b893626bda
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js
@@ -0,0 +1,164 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for ComputedValuePath of animations that consist by multi types of animated
+// properties.
+
+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 },
+        ],
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await testKeyframesGraphComputedValuePath(TEST_DATA);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-02.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-02.js
new file mode 100644
index 0000000000..c36bd22628
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-02.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for ComputedValuePath of animations that consist by one animated property
+// on complexed keyframes.
+
+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: "steps-jump-none-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);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-03.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-03.js
new file mode 100644
index 0000000000..957a693a31
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-03.js
@@ -0,0 +1,190 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for ComputedValuePath of animations that consist by multi types of animated
+// properties on complexed keyframes.
+
+requestLongerTimeout(2);
+
+const TEST_DATA = [
+  {
+    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);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
new file mode 100644
index 0000000000..b95c8d5fe4
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@@ -0,0 +1,380 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following easing hint in ComputedValuePath.
+// * element existence
+// * path segments
+// * hint text
+
+const TEST_DATA = [
+  {
+    targetClass: "no-easing",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 100 },
+              { x: 500, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "effect-easing",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 100 },
+              { x: 199, y: 81 },
+              { x: 200, y: 80 },
+              { x: 399, y: 61 },
+              { x: 400, y: 60 },
+              { x: 599, y: 41 },
+              { x: 600, y: 40 },
+              { x: 799, y: 21 },
+              { x: 800, y: 20 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "keyframe-easing",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2)",
+            path: [
+              { x: 0, y: 100 },
+              { x: 499, y: 100 },
+              { x: 500, y: 50 },
+              { x: 999, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "both-easing",
+    properties: [
+      {
+        name: "margin-left",
+        expectedHints: [
+          {
+            hint: "steps(1)",
+            path: [
+              { x: 0, y: 0 },
+              { x: 999, y: 0 },
+              { x: 1000, y: 100 },
+            ],
+          },
+        ],
+      },
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2)",
+            path: [
+              { x: 0, y: 100 },
+              { x: 499, y: 100 },
+              { x: 500, y: 50 },
+              { x: 999, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "narrow-keyframes",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 0 },
+              { x: 100, y: 100 },
+            ],
+          },
+          {
+            hint: "steps(1)",
+            path: [
+              { x: 129, y: 100 },
+              { x: 130, y: 0 },
+            ],
+          },
+          {
+            hint: "linear",
+            path: [
+              { x: 130, y: 0 },
+              { x: 1000, y: 100 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "duplicate-keyframes",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 0 },
+              { x: 500, y: 100 },
+            ],
+          },
+          {
+            hint: "",
+            path: [
+              { x: 500, y: 100 },
+              { x: 500, y: 0 },
+            ],
+          },
+          {
+            hint: "steps(1)",
+            path: [
+              { x: 500, y: 0 },
+              { x: 999, y: 0 },
+              { x: 1000, y: 100 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "color-keyframes",
+    properties: [
+      {
+        name: "color",
+        expectedHints: [
+          {
+            hint: "ease-in",
+            rect: {
+              x: 0,
+              height: 100,
+              width: 400,
+            },
+          },
+          {
+            hint: "ease-out",
+            rect: {
+              x: 400,
+              height: 100,
+              width: 600,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "jump-start",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2, jump-start)",
+            path: [
+              { x: 0, y: 50 },
+              { x: 499, y: 50 },
+              { x: 500, y: 0 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "jump-end",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2)",
+            path: [
+              { x: 0, y: 100 },
+              { x: 499, y: 100 },
+              { x: 500, y: 50 },
+              { x: 999, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "jump-both",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(3, jump-both)",
+            path: [
+              { x: 0, y: 75 },
+              { x: 330, y: 75 },
+              { x: 340, y: 50 },
+              { x: 660, y: 50 },
+              { x: 670, y: 25 },
+              { x: 999, y: 25 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// Prevent test timeout's on windows code coverage: Bug 1470757
+requestLongerTimeout(2);
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_easings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  for (const { properties, targetClass } of TEST_DATA) {
+    info(`Checking keyframes graph for ${targetClass}`);
+    const onDetailRendered = animationInspector.once(
+      "animation-keyframes-rendered"
+    );
+    await clickOnAnimationByTargetSelector(
+      animationInspector,
+      panel,
+      `.${targetClass}`
+    );
+    await onDetailRendered;
+
+    for (const { name, expectedHints } of properties) {
+      const testTarget = `${name} in ${targetClass}`;
+      info(`Checking easing hint for ${testTarget}`);
+      info(`Checking easing hint existence for ${testTarget}`);
+      const hintEls = panel.querySelectorAll(`.${name} .hint`);
+      is(
+        hintEls.length,
+        expectedHints.length,
+        `Count of easing hint elements of ${testTarget} ` +
+          `should be ${expectedHints.length}`
+      );
+
+      for (let i = 0; i < expectedHints.length; i++) {
+        const hintTarget = `hint[${i}] of ${testTarget}`;
+
+        info(`Checking ${hintTarget}`);
+        const hintEl = hintEls[i];
+        const expectedHint = expectedHints[i];
+
+        info(`Checking <title> in ${hintTarget}`);
+        const titleEl = hintEl.querySelector("title");
+        ok(titleEl, `<title> element in ${hintTarget} should be existence`);
+        is(
+          titleEl.textContent,
+          expectedHint.hint,
+          `Content of <title> in ${hintTarget} should be ${expectedHint.hint}`
+        );
+
+        let interactionEl = null;
+        let displayedEl = null;
+        if (expectedHint.path) {
+          info(`Checking <path> in ${hintTarget}`);
+          interactionEl = hintEl.querySelector("path");
+          displayedEl = interactionEl;
+          ok(
+            interactionEl,
+            `The <path> element  in ${hintTarget} should be existence`
+          );
+          assertPathSegments(interactionEl, false, expectedHint.path);
+        } else {
+          info(`Checking <rect> in ${hintTarget}`);
+          interactionEl = hintEl.querySelector("rect");
+          displayedEl = hintEl.querySelector("line");
+          ok(
+            interactionEl,
+            `The <rect> element  in ${hintTarget} should be existence`
+          );
+          is(
+            parseInt(interactionEl.getAttribute("x"), 10),
+            expectedHint.rect.x,
+            `x of <rect> in ${hintTarget} should be ${expectedHint.rect.x}`
+          );
+          is(
+            parseInt(interactionEl.getAttribute("width"), 10),
+            expectedHint.rect.width,
+            `width of <rect> in ${hintTarget} should be ${expectedHint.rect.width}`
+          );
+        }
+
+        info(`Checking interaction for ${hintTarget}`);
+        interactionEl.scrollIntoView(false);
+        const win = hintEl.ownerGlobal;
+        // Mouse over the pathEl.
+        ok(
+          isStrokeChangedByMouseOver(interactionEl, displayedEl, win),
+          `stroke-opacity of hintEl for ${hintTarget} should be 1 ` +
+            "while mouse is over the element"
+        );
+        // Mouse out from pathEl.
+        EventUtils.synthesizeMouse(
+          panel.querySelector(".animation-toolbar"),
+          0,
+          0,
+          { type: "mouseover" },
+          win
+        );
+        is(
+          parseInt(win.getComputedStyle(displayedEl).strokeOpacity, 10),
+          0,
+          `stroke-opacity of hintEl for ${hintTarget} should be 0 ` +
+            "while mouse is out from the element"
+        );
+      }
+    }
+  }
+});
+
+function isStrokeChangedByMouseOver(mouseoverEl, displayedEl, win) {
+  const boundingBox = mouseoverEl.getBoundingClientRect();
+  const x = boundingBox.width / 2;
+
+  for (let y = 0; y < boundingBox.height; y++) {
+    EventUtils.synthesizeMouse(mouseoverEl, x, y, { type: "mouseover" }, win);
+
+    if (win.getComputedStyle(displayedEl).strokeOpacity == 1) {
+      return true;
+    }
+  }
+
+  return false;
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker-rtl.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker-rtl.js
new file mode 100644
index 0000000000..c90b231f0a
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker-rtl.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "keyframes-graph_keyframe-marker_head.js",
+    this
+  );
+  await pushPref("intl.l10n.pseudo", "bidi");
+  // eslint-disable-next-line no-undef
+  await testKeyframesGraphKeyframesMarker();
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
new file mode 100644
index 0000000000..a19c2993f2
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "keyframes-graph_keyframe-marker_head.js",
+    this
+  );
+  // eslint-disable-next-line no-undef
+  await testKeyframesGraphKeyframesMarker();
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_special-colors.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_special-colors.js
new file mode 100644
index 0000000000..6f46b44332
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_special-colors.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_DATA = [
+  {
+    propertyName: "caret-color",
+    expectedMarkers: ["auto", "rgb(0, 255, 0)"],
+  },
+  {
+    propertyName: "scrollbar-color",
+    expectedMarkers: ["rgb(0, 255, 0) rgb(255, 0, 0)", "auto"],
+  },
+];
+
+// Test for animatable property which can specify the non standard CSS color value.
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_special_colors.html");
+  const { panel } = await openAnimationInspector();
+
+  for (const { propertyName, expectedMarkers } of TEST_DATA) {
+    const animatedPropertyEl = panel.querySelector(`.${propertyName}`);
+    ok(animatedPropertyEl, `Animated property ${propertyName} exists`);
+
+    const markerEls = animatedPropertyEl.querySelectorAll(
+      ".keyframe-marker-item"
+    );
+    is(
+      markerEls.length,
+      expectedMarkers.length,
+      `The length of keyframe markers should ${expectedMarkers.length}`
+    );
+    for (let i = 0; i < expectedMarkers.length; i++) {
+      const actualTitle = markerEls[i].title;
+      const expectedTitle = expectedMarkers[i];
+      is(actualTitle, expectedTitle, `Value of keyframes[${i}] is correct`);
+    }
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
new file mode 100644
index 0000000000..a7051d9a01
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following KeyframesProgressBar:
+// * element existence
+// * progress bar position in multi effect timings
+// * progress bar position after changing playback rate
+// * progress bar position when select another animation
+
+requestLongerTimeout(3);
+
+const TEST_DATA = [
+  {
+    targetClass: "cssanimation-linear",
+    scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
+    expectedPositions: [0, 0.25, 0.5, 0.75, 0],
+  },
+  {
+    targetClass: "easing-step",
+    scrubberPositions: [0, 0.49, 0.5, 0.99],
+    expectedPositions: [0, 0, 0.5, 0.5],
+  },
+  {
+    targetClass: "delay-positive",
+    scrubberPositions: [0, 0.33, 0.5],
+    expectedPositions: [0, 0, 0.25],
+  },
+  {
+    targetClass: "delay-negative",
+    scrubberPositions: [0, 0.49, 0.5, 0.75],
+    expectedPositions: [0, 0, 0.5, 0.75],
+  },
+  {
+    targetClass: "enddelay-positive",
+    scrubberPositions: [0, 0.66, 0.67, 0.99],
+    expectedPositions: [0, 0.99, 0, 0],
+  },
+  {
+    targetClass: "enddelay-negative",
+    scrubberPositions: [0, 0.49, 0.5, 0.99],
+    expectedPositions: [0, 0.49, 0, 0],
+  },
+  {
+    targetClass: "direction-reverse-with-iterations-infinity",
+    scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
+    expectedPositions: [1, 0.75, 0.5, 0.25, 1],
+  },
+  {
+    targetClass: "fill-both-width-delay-iterationstart",
+    scrubberPositions: [0, 0.33, 0.66, 0.833, 1],
+    expectedPositions: [0.5, 0.5, 0.99, 0.25, 0.5],
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking progress bar position in multi effect timings");
+
+  for (const testdata of TEST_DATA) {
+    const { targetClass, scrubberPositions, expectedPositions } = testdata;
+
+    info(`Checking progress bar position for ${targetClass}`);
+    const onDetailRendered = animationInspector.once(
+      "animation-keyframes-rendered"
+    );
+    await selectNode(`.${targetClass}`, inspector);
+    await onDetailRendered;
+
+    info("Checking progress bar existence");
+    const areaEl = panel.querySelector(".keyframes-progress-bar-area");
+    ok(areaEl, "progress bar area should exist");
+    const barEl = areaEl.querySelector(".keyframes-progress-bar");
+    ok(barEl, "progress bar should exist");
+
+    for (let i = 0; i < scrubberPositions.length; i++) {
+      info(`Scrubber position is ${scrubberPositions[i]}`);
+      clickOnCurrentTimeScrubberController(
+        animationInspector,
+        panel,
+        scrubberPositions[i]
+      );
+      await waitUntilAnimationsPlayState(animationInspector, "paused");
+      assertPosition(barEl, areaEl, expectedPositions[i], animationInspector);
+    }
+  }
+});
+
+function assertPosition(barEl, areaEl, expectedRate, animationInspector) {
+  const controllerBounds = areaEl.getBoundingClientRect();
+  const barBounds = barEl.getBoundingClientRect();
+  const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
+  const expected = controllerBounds.width * expectedRate;
+  ok(
+    expected - 1 < barX && barX < expected + 1,
+    `Position should apploximately be ${expected} (x of bar is ${barX})`
+  );
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar_after-resuming.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar_after-resuming.js
new file mode 100644
index 0000000000..8b91026799
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar_after-resuming.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether keyframes progress bar moves correctly after resuming the animation.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  const scrubberPositions = [0, 0.25, 0.5, 0.75];
+  const expectedPositions = [0, 0.25, 0.5, 0.75];
+
+  info("Check whether the keyframes progress bar position was correct");
+  await assertPosition(
+    panel,
+    scrubberPositions,
+    expectedPositions,
+    animationInspector
+  );
+
+  info(
+    "Check whether the keyframes progress bar position was correct " +
+      "after a bit time passed and resuming"
+  );
+  await wait(500);
+  clickOnPauseResumeButton(animationInspector, panel);
+  await assertPosition(
+    panel,
+    scrubberPositions,
+    expectedPositions,
+    animationInspector
+  );
+});
+
+async function assertPosition(
+  panel,
+  scrubberPositions,
+  expectedPositions,
+  animationInspector
+) {
+  const areaEl = panel.querySelector(".keyframes-progress-bar-area");
+  const barEl = areaEl.querySelector(".keyframes-progress-bar");
+  const controllerBounds = areaEl.getBoundingClientRect();
+
+  for (let i = 0; i < scrubberPositions.length; i++) {
+    info(`Scrubber position is ${scrubberPositions[i]}`);
+    clickOnCurrentTimeScrubberController(
+      animationInspector,
+      panel,
+      scrubberPositions[i]
+    );
+    await waitUntilAnimationsPlayState(animationInspector, "paused");
+    const barBounds = barEl.getBoundingClientRect();
+    const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
+    const expected = controllerBounds.width * expectedPositions[i];
+    ok(
+      expected - 1 < barX && barX < expected + 1,
+      `Position should apploximately be ${expected} (x of bar is ${barX})`
+    );
+  }
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time-with-playback-rate.js b/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time-with-playback-rate.js
new file mode 100644
index 0000000000..ad356cadd2
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time-with-playback-rate.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adjusting the created time with different playback rate of animation.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info(
+    "Pause the all animation and set current time to middle in order to check " +
+      "the adjusting time"
+  );
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+
+  info("Check the created times of all animation are same");
+  checkAdjustingTheTime(
+    animationInspector.state.animations[0].state,
+    animationInspector.state.animations[1].state
+  );
+
+  info("Change the playback rate to x10 after selecting '.div2'");
+  await selectNode(".div2", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 1);
+  await changePlaybackRateSelector(animationInspector, panel, 10);
+
+  info("Check each adjusted result of animations after selecting 'body' again");
+  await selectNode("body", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 2);
+
+  checkAdjustingTheTime(
+    animationInspector.state.animations[0].state,
+    animationInspector.state.animations[1].state
+  );
+
+  await waitUntil(
+    () => animationInspector.state.animations[0].state.currentTime === 50000
+  );
+  ok(true, "The current time of '.div1' animation is 50%");
+
+  await waitUntil(
+    () => animationInspector.state.animations[1].state.currentTime === 50000
+  );
+  ok(true, "The current time of '.div2' animation is 50%");
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time.js b/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time.js
new file mode 100644
index 0000000000..44769ea055
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adjusting the created time with different current times of animation.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info(
+    "Pause the all animation and set current time to middle time in order to " +
+      "check the adjusting time"
+  );
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+
+  info("Check the created times of all animation are same");
+  checkAdjustingTheTime(
+    animationInspector.state.animations[0].state,
+    animationInspector.state.animations[1].state
+  );
+
+  info("Change the current time to 75% after selecting '.div2'");
+  await selectNode(".div2", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 1);
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.75);
+
+  info("Check each adjusted result of animations after selecting 'body' again");
+  await selectNode("body", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 2);
+
+  checkAdjustingTheTime(
+    animationInspector.state.animations[0].state,
+    animationInspector.state.animations[1].state
+  );
+  is(
+    animationInspector.state.animations[0].state.currentTime,
+    50000,
+    "The current time of '.div1' animation is 50%"
+  );
+  is(
+    animationInspector.state.animations[1].state.currentTime,
+    75000,
+    "The current time of '.div2' animation is 75%"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js b/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
new file mode 100644
index 0000000000..fdf1867ffa
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
@@ -0,0 +1,94 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Animation inspector makes the current time to stop
+// after end of animation duration except iterations infinity.
+// Test followings:
+// * state of animations and UI components after end of animation duration
+// * state of animations and UI components after end of animation duration
+//   but iteration count is infinity
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".compositor-all", ".long"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking state after end of animation duration");
+  await selectNode(".long", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 1);
+  const pixelsData = getDurationAndRate(animationInspector, panel, 5);
+  clickOnCurrentTimeScrubberController(
+    animationInspector,
+    panel,
+    1 - pixelsData.rate
+  );
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await assertStates(animationInspector, panel, false);
+
+  info(
+    "Checking state after end of animation duration and infinity iterations"
+  );
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  await selectNode(".compositor-all", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 1);
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await assertStates(animationInspector, panel, true);
+});
+
+async function assertStates(animationInspector, panel, shouldRunning) {
+  const buttonEl = panel.querySelector(".pause-resume-button");
+  const labelEl = panel.querySelector(".current-time-label");
+  const scrubberEl = panel.querySelector(".current-time-scrubber");
+
+  const previousLabelContent = labelEl.textContent;
+  const previousScrubberX = scrubberEl.getBoundingClientRect().x;
+
+  await waitUntilAnimationsPlayState(
+    animationInspector,
+    shouldRunning ? "running" : "paused"
+  );
+
+  const currentLabelContent = labelEl.textContent;
+  const currentScrubberX = scrubberEl.getBoundingClientRect().x;
+
+  if (shouldRunning) {
+    isnot(
+      previousLabelContent,
+      currentLabelContent,
+      "Current time label content should change"
+    );
+    isnot(
+      previousScrubberX,
+      currentScrubberX,
+      "Current time scrubber position should change"
+    );
+    ok(
+      !buttonEl.classList.contains("paused"),
+      "State of button should be running"
+    );
+    assertAnimationsRunning(animationInspector);
+  } else {
+    is(
+      previousLabelContent,
+      currentLabelContent,
+      "Current time label Content should not change"
+    );
+    is(
+      previousScrubberX,
+      currentScrubberX,
+      "Current time scrubber position should not change"
+    );
+    ok(
+      buttonEl.classList.contains("paused"),
+      "State of button should be paused"
+    );
+    assertAnimationsPausing(animationInspector);
+  }
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js b/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
new file mode 100644
index 0000000000..cfdd111ec9
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Animation inspector should not update when hidden.
+// Test for followings:
+// * whether the UIs update after selecting another inspector
+// * whether the UIs update after selecting another tool
+// * whether the UIs update after selecting animation inspector again
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to see if the animation only refreshes when visible"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking the UIs update after selecting another inspector");
+  await selectNode("head", inspector);
+  inspector.sidebar.select("ruleview");
+  await selectNode("div", inspector);
+  await waitUntil(() => !animationInspector.state.animations.length);
+  ok(true, "Should not update after selecting another inspector");
+
+  await selectAnimationInspector(inspector);
+  await waitUntil(() => animationInspector.state.animations.length);
+  ok(true, "Should update after selecting animation inspector");
+
+  await assertCurrentTimeUpdated(animationInspector, panel, true);
+  inspector.sidebar.select("ruleview");
+  is(
+    animationInspector.state.animations.length,
+    1,
+    "Should not update after selecting another inspector again"
+  );
+  await assertCurrentTimeUpdated(animationInspector, panel, false);
+
+  info("Checking the UIs update after selecting another tool");
+  await selectAnimationInspector(inspector);
+  await selectNode("head", inspector);
+  await waitUntil(() => !animationInspector.state.animations.length);
+  await inspector.toolbox.selectTool("webconsole");
+  await selectNode("div", inspector);
+  is(
+    animationInspector.state.animations.length,
+    0,
+    "Should not update after selecting another tool"
+  );
+  await selectAnimationInspector(inspector);
+  await waitUntil(() => animationInspector.state.animations.length);
+  is(
+    animationInspector.state.animations.length,
+    1,
+    "Should update after selecting animation inspector"
+  );
+  await assertCurrentTimeUpdated(animationInspector, panel, true);
+  await inspector.toolbox.selectTool("webconsole");
+  await waitUntil(() => animationInspector.state.animations.length);
+  is(
+    animationInspector.state.animations.length,
+    1,
+    "Should not update after selecting another tool again"
+  );
+  await assertCurrentTimeUpdated(animationInspector, panel, false);
+});
+
+async function assertCurrentTimeUpdated(
+  animationInspector,
+  panel,
+  shouldRunning
+) {
+  let count = 0;
+
+  const listener = () => {
+    count++;
+  };
+
+  animationInspector.addAnimationsCurrentTimeListener(listener);
+  await new Promise(resolve =>
+    panel.ownerGlobal.requestAnimationFrame(resolve)
+  );
+  animationInspector.removeAnimationsCurrentTimeListener(listener);
+
+  if (shouldRunning) {
+    isnot(count, 0, "Should forward current time");
+  } else {
+    is(count, 0, "Should not forward current time");
+  }
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_created-time.js b/devtools/client/inspector/animation/test/browser_animation_logic_created-time.js
new file mode 100644
index 0000000000..59e0f4df52
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_created-time.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the created time of animation unchanged even if change node.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, inspector } = await openAnimationInspector();
+
+  info("Check both the created time of animation are same");
+  const baseCreatedTime =
+    animationInspector.state.animations[0].state.createdTime;
+  is(
+    animationInspector.state.animations[1].state.createdTime,
+    baseCreatedTime,
+    "Both created time of animations should be same"
+  );
+
+  info("Check created time after selecting '.div1'");
+  await selectNode(".div1", inspector);
+  await waitUntil(
+    () =>
+      animationInspector.state.animations[0].state.createdTime ===
+      baseCreatedTime
+  );
+  ok(
+    true,
+    "The created time of animation on element of .div1 should unchanged"
+  );
+
+  info("Check created time after selecting '.div2'");
+  await selectNode(".div2", inspector);
+  await waitUntil(
+    () =>
+      animationInspector.state.animations[0].state.createdTime ===
+      baseCreatedTime
+  );
+  ok(
+    true,
+    "The created time of animation on element of .div2 should unchanged"
+  );
+
+  info("Check created time after selecting 'body' again");
+  await selectNode("body", inspector);
+  is(
+    animationInspector.state.animations[0].state.createdTime,
+    baseCreatedTime,
+    "The created time of animation[0] should unchanged"
+  );
+  is(
+    animationInspector.state.animations[1].state.createdTime,
+    baseCreatedTime,
+    "The created time of animation[1] should unchanged"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
new file mode 100644
index 0000000000..56228a60c2
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following mutations:
+// * add animation
+// * remove animation
+// * modify animation
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([
+    ".compositor-all",
+    ".compositor-notall",
+    ".no-compositor",
+    ".still",
+  ]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking the mutation for add an animation");
+  const originalAnimationCount = animationInspector.state.animations.length;
+  await setClassAttribute(animationInspector, ".still", "ball no-compositor");
+  await waitUntil(
+    () =>
+      animationInspector.state.animations.length === originalAnimationCount + 1
+  );
+  ok(true, "Count of animation should be plus one to original count");
+
+  info(
+    "Checking added animation existence even the animation name is duplicated"
+  );
+  is(
+    getAnimationNameCount(panel, "no-compositor"),
+    2,
+    "Count of animation should be plus one to original count"
+  );
+
+  info("Checking the mutation for remove an animation");
+  await setClassAttribute(
+    animationInspector,
+    ".compositor-notall",
+    "ball still"
+  );
+  await waitUntil(
+    () => animationInspector.state.animations.length === originalAnimationCount
+  );
+  ok(
+    true,
+    "Count of animation should be same to original count since we remove an animation"
+  );
+
+  info("Checking the mutation for modify an animation");
+  await selectNode(".compositor-all", inspector);
+  await setStyle(
+    animationInspector,
+    ".compositor-all",
+    "animationDuration",
+    "100s"
+  );
+  await setStyle(
+    animationInspector,
+    ".compositor-all",
+    "animationIterationCount",
+    1
+  );
+  const summaryGraphPathEl = getSummaryGraphPathElement(
+    panel,
+    "compositor-all"
+  );
+  await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 100000);
+  ok(
+    true,
+    "Width of summary graph path should be 100000 " +
+      "after modifing the duration and iteration count"
+  );
+  await setStyle(
+    animationInspector,
+    ".compositor-all",
+    "animationDelay",
+    "100s"
+  );
+  await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 200000);
+  ok(
+    true,
+    "Width of summary graph path should be 200000 after modifing the delay"
+  );
+  ok(
+    summaryGraphPathEl.parentElement.querySelector(".animation-delay-sign"),
+    "Delay sign element shoud exist"
+  );
+});
+
+function getAnimationNameCount(panel, animationName) {
+  return [...panel.querySelectorAll(".animation-name")].reduce(
+    (count, element) =>
+      element.textContent === animationName ? count + 1 : count,
+    0
+  );
+}
+
+function getSummaryGraphPathElement(panel, animationName) {
+  for (const animationNameEl of panel.querySelectorAll(".animation-name")) {
+    if (animationNameEl.textContent === animationName) {
+      return animationNameEl
+        .closest(".animation-summary-graph")
+        .querySelector(".animation-summary-graph-path");
+    }
+  }
+
+  return null;
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_mutations_add_remove_immediately.js b/devtools/client/inspector/animation/test/browser_animation_logic_mutations_add_remove_immediately.js
new file mode 100644
index 0000000000..c57f3c7b3b
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations_add_remove_immediately.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the animation inspector will not crash when add animation then remove
+// immediately.
+
+add_task(async function () {
+  const tab = await addTab(
+    URL_ROOT + "doc_mutations_add_remove_immediately.html"
+  );
+  const { inspector, panel } = await openAnimationInspector();
+
+  info("Check state of the animation inspector after fast mutations");
+  const onDispatch = waitForDispatch(inspector.store, "UPDATE_ANIMATIONS");
+  await startMutation(tab);
+  await onDispatch;
+  ok(
+    panel.querySelector(".animation-error-message"),
+    "No animations message should display"
+  );
+});
+
+async function startMutation(tab) {
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    await content.wrappedJSObject.startMutation();
+  });
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_mutations_fast.js b/devtools/client/inspector/animation/test/browser_animation_logic_mutations_fast.js
new file mode 100644
index 0000000000..516a150e42
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations_fast.js
@@ -0,0 +1,24 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the animation inspector will not crash when remove/add animations faster.
+
+add_task(async function () {
+  const tab = await addTab(URL_ROOT + "doc_mutations_fast.html");
+  const { inspector } = await openAnimationInspector();
+
+  info("Check state of the animation inspector after fast mutations");
+  await startFastMutations(tab);
+  ok(
+    inspector.panelWin.document.getElementById("animation-container"),
+    "Animation inspector should be live"
+  );
+});
+
+async function startFastMutations(tab) {
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    await content.wrappedJSObject.startFastMutations();
+  });
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_mutations_properties.js b/devtools/client/inspector/animation/test/browser_animation_logic_mutations_properties.js
new file mode 100644
index 0000000000..9ec3d58be9
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations_properties.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether animation was changed after altering following properties.
+// * delay
+// * direction
+// * duration
+// * easing (animationTimingFunction in case of CSS Animationns)
+// * fill
+// * iterations
+// * endDelay (script animation only)
+// * iterationStart (script animation only)
+// * playbackRate (script animation only)
+
+const SEC = 1000;
+const TEST_EFFECT_TIMING = {
+  delay: 20 * SEC,
+  direction: "reverse",
+  duration: 20 * SEC,
+  easing: "steps(1)",
+  endDelay: 20 * SEC,
+  fill: "backwards",
+  iterations: 20,
+  iterationStart: 20 * SEC,
+};
+const TEST_PLAYBACK_RATE = 0.1;
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".end-delay"]);
+  const { animationInspector } = await openAnimationInspector();
+  await setCSSAnimationProperties(animationInspector);
+  await assertProperties(animationInspector.state.animations[0], false);
+  await setScriptAnimationProperties(animationInspector);
+  await assertProperties(animationInspector.state.animations[1], true);
+});
+
+async function setCSSAnimationProperties(animationInspector) {
+  const properties = {
+    animationDelay: `${TEST_EFFECT_TIMING.delay}ms`,
+    animationDirection: TEST_EFFECT_TIMING.direction,
+    animationDuration: `${TEST_EFFECT_TIMING.duration}ms`,
+    animationFillMode: TEST_EFFECT_TIMING.fill,
+    animationIterationCount: TEST_EFFECT_TIMING.iterations,
+    animationTimingFunction: TEST_EFFECT_TIMING.easing,
+  };
+
+  await setStyles(animationInspector, ".animated", properties);
+}
+
+async function setScriptAnimationProperties(animationInspector) {
+  await setEffectTimingAndPlayback(
+    animationInspector,
+    ".end-delay",
+    TEST_EFFECT_TIMING,
+    TEST_PLAYBACK_RATE
+  );
+}
+
+async function assertProperties(animation, isScriptAnimation) {
+  await waitUntil(() => animation.state.delay === TEST_EFFECT_TIMING.delay);
+  ok(true, `Delay should be ${TEST_EFFECT_TIMING.delay}`);
+
+  await waitUntil(
+    () => animation.state.direction === TEST_EFFECT_TIMING.direction
+  );
+  ok(true, `Direction should be ${TEST_EFFECT_TIMING.direction}`);
+
+  await waitUntil(
+    () => animation.state.duration === TEST_EFFECT_TIMING.duration
+  );
+  ok(true, `Duration should be ${TEST_EFFECT_TIMING.duration}`);
+
+  await waitUntil(() => animation.state.fill === TEST_EFFECT_TIMING.fill);
+  ok(true, `Fill should be ${TEST_EFFECT_TIMING.fill}`);
+
+  await waitUntil(
+    () => animation.state.iterationCount === TEST_EFFECT_TIMING.iterations
+  );
+  ok(true, `Iterations should be ${TEST_EFFECT_TIMING.iterations}`);
+
+  if (isScriptAnimation) {
+    await waitUntil(() => animation.state.easing === TEST_EFFECT_TIMING.easing);
+    ok(true, `Easing should be ${TEST_EFFECT_TIMING.easing}`);
+
+    await waitUntil(
+      () => animation.state.iterationStart === TEST_EFFECT_TIMING.iterationStart
+    );
+    ok(true, `IterationStart should be ${TEST_EFFECT_TIMING.iterationStart}`);
+
+    await waitUntil(() => animation.state.playbackRate === TEST_PLAYBACK_RATE);
+    ok(true, `PlaybackRate should be ${TEST_PLAYBACK_RATE}`);
+  } else {
+    await waitUntil(
+      () =>
+        animation.state.animationTimingFunction === TEST_EFFECT_TIMING.easing
+    );
+
+    ok(true, `AnimationTimingFunction should be ${TEST_EFFECT_TIMING.easing}`);
+  }
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_overflowed_delay_end-delay.js b/devtools/client/inspector/animation/test/browser_animation_logic_overflowed_delay_end-delay.js
new file mode 100644
index 0000000000..3d1c71b6c3
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_overflowed_delay_end-delay.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that animations with an overflowed delay and end delay are not displayed.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_overflowed_delay_end_delay.html");
+  const { panel } = await openAnimationInspector();
+
+  info("Check the number of animation item");
+  const animationItemEls = panel.querySelectorAll(
+    ".animation-list .animation-item"
+  );
+  is(
+    animationItemEls.length,
+    1,
+    "The number of animations displayed should be 1"
+  );
+
+  info("Check the id of animation displayed");
+  const animationNameEl = animationItemEls[0].querySelector(".animation-name");
+  is(
+    animationNameEl.textContent,
+    "big-iteration-start",
+    "The animation name should be 'big-iteration-start'"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_scroll-amount.js b/devtools/client/inspector/animation/test/browser_animation_logic_scroll-amount.js
new file mode 100644
index 0000000000..11835cd880
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_scroll-amount.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the scroll amount of animation and animated property re-calculate after
+// changing selected node.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([
+    ".animated",
+    ".multi",
+    ".longhand",
+    ".negative-delay",
+  ]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info(
+    "Set the scroll amount of animation and animated property to the bottom"
+  );
+  const onDetailRendered = animationInspector.once(
+    "animation-keyframes-rendered"
+  );
+  await clickOnAnimationByTargetSelector(
+    animationInspector,
+    panel,
+    ".longhand"
+  );
+  await onDetailRendered;
+
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 5);
+  const bottomAnimationEl = await findAnimationItemByIndex(panel, 4);
+  const bottomAnimatedPropertyEl = panel.querySelector(
+    ".animated-property-item:last-child"
+  );
+  bottomAnimationEl.scrollIntoView(false);
+  bottomAnimatedPropertyEl.scrollIntoView(false);
+
+  info("Hold the scroll amount");
+  const animationInspectionPanel = bottomAnimationEl.closest(
+    ".progress-inspection-panel"
+  );
+  const animatedPropertyInspectionPanel = bottomAnimatedPropertyEl.closest(
+    ".progress-inspection-panel"
+  );
+  const initialScrollTopOfAnimation = animationInspectionPanel.scrollTop;
+  const initialScrollTopOfAnimatedProperty =
+    animatedPropertyInspectionPanel.scrollTop;
+
+  info(
+    "Check whether the scroll amount re-calculate after changing the count of items"
+  );
+  await selectNode(".negative-delay", inspector);
+  await waitUntil(
+    () =>
+      initialScrollTopOfAnimation > animationInspectionPanel.scrollTop &&
+      initialScrollTopOfAnimatedProperty >
+        animatedPropertyInspectionPanel.scrollTop
+  );
+  ok(
+    true,
+    "Scroll amount for animation list should be less than previous state"
+  );
+  ok(
+    true,
+    "Scroll amount for animated property list should be less than previous state"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_pause-resume-button.js b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button.js
new file mode 100644
index 0000000000..8a8d9f848b
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following PauseResumeButton component:
+// * element existence
+// * state during running animations
+// * state during pausing animations
+// * make animations to pause by push button
+// * make animations to resume by push button
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking pause/resume button existence");
+  const buttonEl = panel.querySelector(".pause-resume-button");
+  ok(buttonEl, "pause/resume button should exist");
+
+  info("Checking state during running animations");
+  ok(
+    !buttonEl.classList.contains("paused"),
+    "State of button should be running"
+  );
+
+  info("Checking button makes animations to pause");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  ok(true, "All of animtion are paused");
+  ok(buttonEl.classList.contains("paused"), "State of button should be paused");
+
+  info("Checking button makes animations to resume");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "running");
+  ok(true, "All of animtion are running");
+  ok(
+    !buttonEl.classList.contains("paused"),
+    "State of button should be resumed"
+  );
+});
diff --git 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
new file mode 100644
index 0000000000..896ae5d2ef
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_end-time.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the animation can rewind if the current time is over end time when
+// the resume button clicked.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([
+    ".animated",
+    ".end-delay",
+    ".long",
+    ".negative-delay",
+  ]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Check animations state after resuming with infinite animation");
+  info("Make the current time of animation to be over its end time");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  info("Resume animations");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await wait(1000);
+  assertPlayState(animationInspector.state.animations, [
+    "running",
+    "finished",
+    "finished",
+    "finished",
+  ]);
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+
+  info("Check animations state after resuming without infinite animation");
+  info("Remove infinite animation");
+  await setClassAttribute(animationInspector, ".animated", "ball still");
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 3);
+
+  info("Make the current time of animation to be over its end time");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 1.1);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  await changePlaybackRateSelector(animationInspector, panel, 0.1);
+  info("Resume animations");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "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) => {
+    Assert.less(
+      animation.state.currentTime,
+      animation.state.duration,
+      `The current time of animation[${index}] should be less than its duration`
+    );
+  });
+}
+
+function assertScrubberPosition(panel) {
+  const scrubberEl = panel.querySelector(".current-time-scrubber");
+  const marginInlineStart = parseFloat(scrubberEl.style.marginInlineStart);
+  Assert.greaterOrEqual(
+    marginInlineStart,
+    0,
+    "The translateX of scrubber position should be zero or more"
+  );
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_respectively.js b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_respectively.js
new file mode 100644
index 0000000000..ad84e4c257
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_respectively.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether pausing/resuming the each animations correctly.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".compositor-all"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+  const buttonEl = panel.querySelector(".pause-resume-button");
+
+  info(
+    "Check '.compositor-all' animation is still running " +
+      "after even pausing '.animated' animation"
+  );
+  await selectNode(".animated", inspector);
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  ok(buttonEl.classList.contains("paused"), "State of button should be paused");
+  await selectNode("body", inspector);
+  await assertStatus(
+    animationInspector.state.animations,
+    buttonEl,
+    ["paused", "running"],
+    false
+  );
+
+  info(
+    "Check both animations are paused after clicking pause/resume " +
+      "while displaying both animations"
+  );
+  clickOnPauseResumeButton(animationInspector, panel);
+  await assertStatus(
+    animationInspector.state.animations,
+    buttonEl,
+    ["paused", "paused"],
+    true
+  );
+
+  info(
+    "Check '.animated' animation is still paused " +
+      "after even resuming '.compositor-all' animation"
+  );
+  await selectNode(".compositor-all", inspector);
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntil(() =>
+    animationInspector.state.animations.some(
+      a => a.state.playState === "running"
+    )
+  );
+  ok(
+    !buttonEl.classList.contains("paused"),
+    "State of button should be running"
+  );
+  await selectNode("body", inspector);
+  await assertStatus(
+    animationInspector.state.animations,
+    buttonEl,
+    ["paused", "running"],
+    false
+  );
+});
+
+async function assertStatus(
+  animations,
+  buttonEl,
+  expectedAnimationStates,
+  shouldButtonPaused
+) {
+  await waitUntil(() => {
+    for (let i = 0; i < expectedAnimationStates.length; i++) {
+      const animation = animations[i];
+      const state = expectedAnimationStates[i];
+      if (animation.state.playState !== state) {
+        return false;
+      }
+    }
+    return true;
+  });
+  expectedAnimationStates.forEach((state, index) => {
+    is(
+      animations[index].state.playState,
+      state,
+      `Animation ${index} should be ${state}`
+    );
+  });
+
+  is(
+    buttonEl.classList.contains("paused"),
+    shouldButtonPaused,
+    "State of button is correct"
+  );
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_spacebar.js b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_spacebar.js
new file mode 100644
index 0000000000..7a27b1bd07
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_spacebar.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following PauseResumeButton component with spacebar:
+// * make animations to pause/resume by spacebar
+// * combination with other UI components
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking spacebar makes animations to pause");
+  await testPauseAndResumeBySpacebar(animationInspector, panel);
+
+  info(
+    "Checking spacebar makes animations to pause when the button has the focus"
+  );
+  const pauseResumeButton = panel.querySelector(".pause-resume-button");
+  await testPauseAndResumeBySpacebar(animationInspector, pauseResumeButton);
+
+  info("Checking spacebar works with other UI components");
+  // To pause
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  // To resume
+  sendSpaceKeyEvent(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "running");
+  // To pause
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  // To resume
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "running");
+  // To pause
+  sendSpaceKeyEvent(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  ok(true, "All components that can make animations pause/resume works fine");
+});
+
+async function testPauseAndResumeBySpacebar(animationInspector, element) {
+  await sendSpaceKeyEvent(animationInspector, element);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  ok(true, "Space key can pause animations");
+  await sendSpaceKeyEvent(animationInspector, element);
+  await waitUntilAnimationsPlayState(animationInspector, "running");
+  ok(true, "Space key can resume animations");
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_playback-rate-selector.js b/devtools/client/inspector/animation/test/browser_animation_playback-rate-selector.js
new file mode 100644
index 0000000000..8552eae138
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_playback-rate-selector.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following PlaybackRateSelector component:
+// * element existence
+// * make playback rate of animations by the selector
+// * in case of animations have mixed playback rate
+// * in case of animations have playback rate which is not default selectable value
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking playback rate selector existence");
+  const selectEl = panel.querySelector(".playback-rate-selector");
+  ok(selectEl, "scrubber controller should exist");
+
+  info(
+    "Checking playback rate existence which includes custom rate of animations"
+  );
+  const expectedPlaybackRates = [0.1, 0.25, 0.5, 1, 1.5, 2, 5, 10];
+  await assertPlaybackRateOptions(selectEl, expectedPlaybackRates);
+
+  info("Checking selected playback rate");
+  is(Number(selectEl.value), 1.5, "Selected option should be 1.5");
+
+  info("Checking playback rate of animations");
+  await changePlaybackRateSelector(animationInspector, panel, 0.5);
+  await assertPlaybackRate(animationInspector, 0.5);
+
+  info("Checking mixed playback rate");
+  await selectNode("div", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 1);
+  await changePlaybackRateSelector(animationInspector, panel, 2);
+  await assertPlaybackRate(animationInspector, 2);
+  await selectNode("body", inspector);
+  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 2);
+  await waitUntil(() => selectEl.value === "");
+  ok(true, "Selected option should be empty");
+
+  info("Checking playback rate after re-setting");
+  await changePlaybackRateSelector(animationInspector, panel, 1);
+  await assertPlaybackRate(animationInspector, 1);
+
+  info(
+    "Checking whether custom playback rate exist " +
+      "after selecting another playback rate"
+  );
+  await assertPlaybackRateOptions(selectEl, expectedPlaybackRates);
+});
+
+async function assertPlaybackRate(animationInspector, rate) {
+  await waitUntil(() =>
+    animationInspector.state?.animations.every(
+      ({ state }) => state.playbackRate === rate
+    )
+  );
+  ok(true, `Playback rate of animations should be ${rate}`);
+}
+
+async function assertPlaybackRateOptions(selectEl, expectedPlaybackRates) {
+  await waitUntil(() => {
+    if (selectEl.options.length !== expectedPlaybackRates.length) {
+      return false;
+    }
+
+    for (let i = 0; i < selectEl.options.length; i++) {
+      const optionEl = selectEl.options[i];
+      const expectedPlaybackRate = expectedPlaybackRates[i];
+      if (Number(optionEl.value) !== expectedPlaybackRate) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+  ok(true, "Content of playback rate options are correct");
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js b/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
new file mode 100644
index 0000000000..00e267f9f8
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for pseudo element.
+
+const TEST_DATA = [
+  {
+    expectedTargetLabel: "::before",
+    expectedAnimationNameLabel: "body",
+    expectedKeyframsGraphPathSegments: [
+      { x: 0, y: 0 },
+      { x: 1000, y: 100 },
+    ],
+  },
+  {
+    expectedTargetLabel: "::before",
+    expectedAnimationNameLabel: "div-before",
+    expectedKeyframsGraphPathSegments: [
+      { x: 0, y: 100 },
+      { x: 1000, y: 0 },
+    ],
+  },
+  {
+    expectedTargetLabel: "::after",
+    expectedAnimationNameLabel: "div-after",
+  },
+  {
+    expectedTargetLabel: "::marker",
+    expectedAnimationNameLabel: "div-marker",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_pseudo.html");
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking count of animation item for pseudo elements");
+  is(
+    panel.querySelectorAll(".animation-list .animation-item").length,
+    TEST_DATA.length,
+    `Count of animation item should be ${TEST_DATA.length}`
+  );
+
+  info("Checking content of each animation item");
+  for (let i = 0; i < TEST_DATA.length; i++) {
+    const testData = TEST_DATA[i];
+    info(`Checking pseudo element for ${testData.expectedTargetLabel}`);
+    const animationItemEl = await findAnimationItemByIndex(panel, i);
+
+    info("Checking text content of animation target");
+    const animationTargetEl = animationItemEl.querySelector(
+      ".animation-list .animation-item .animation-target"
+    );
+    is(
+      animationTargetEl.textContent,
+      testData.expectedTargetLabel,
+      `Text content of animation target[${i}] should be ${testData.expectedTarget}`
+    );
+
+    info("Checking text content of animation name");
+    const animationNameEl = animationItemEl.querySelector(".animation-name");
+    is(
+      animationNameEl.textContent,
+      testData.expectedAnimationNameLabel,
+      `The animation name should be ${testData.expectedAnimationNameLabel}`
+    );
+  }
+
+  info(
+    "Checking whether node is selected correctly " +
+      "when click on the first inspector icon on Reps component"
+  );
+  let onDetailRendered = animationInspector.once(
+    "animation-keyframes-rendered"
+  );
+  await clickOnTargetNode(animationInspector, panel, 0);
+  await onDetailRendered;
+  assertAnimationCount(panel, 1);
+  assertAnimationNameLabel(panel, TEST_DATA[0].expectedAnimationNameLabel);
+  assertKeyframesGraphPathSegments(
+    panel,
+    TEST_DATA[0].expectedKeyframsGraphPathSegments
+  );
+
+  info("Select <body> again to reset the animation list");
+  await selectNode("body", inspector);
+
+  info(
+    "Checking whether node is selected correctly " +
+      "when click on the second inspector icon on Reps component"
+  );
+  onDetailRendered = animationInspector.once("animation-keyframes-rendered");
+  await clickOnTargetNode(animationInspector, panel, 1);
+  await onDetailRendered;
+  assertAnimationCount(panel, 1);
+  assertAnimationNameLabel(panel, TEST_DATA[1].expectedAnimationNameLabel);
+  assertKeyframesGraphPathSegments(
+    panel,
+    TEST_DATA[1].expectedKeyframsGraphPathSegments
+  );
+});
+
+function assertAnimationCount(panel, expectedCount) {
+  info("Checking count of animation item");
+  is(
+    panel.querySelectorAll(".animation-list .animation-item").length,
+    expectedCount,
+    `Count of animation item should be ${expectedCount}`
+  );
+}
+
+function assertAnimationNameLabel(panel, expectedAnimationNameLabel) {
+  info("Checking the animation name label");
+  is(
+    panel.querySelector(".animation-list .animation-item .animation-name")
+      .textContent,
+    expectedAnimationNameLabel,
+    `The animation name should be ${expectedAnimationNameLabel}`
+  );
+}
+
+function assertKeyframesGraphPathSegments(panel, expectedPathSegments) {
+  info("Checking the keyframes graph path segments");
+  const pathEl = panel.querySelector(".keyframes-graph-path path");
+  assertPathSegments(pathEl, true, expectedPathSegments);
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_rewind-button.js b/devtools/client/inspector/animation/test/browser_animation_rewind-button.js
new file mode 100644
index 0000000000..f74518095b
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_rewind-button.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test for following RewindButton component:
+// * element existence
+// * make animations to rewind to zero
+// * the state should be always paused after rewinding
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept([".delay-negative", ".delay-positive"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking button existence");
+  ok(panel.querySelector(".rewind-button"), "Rewind button should exist");
+
+  info("Checking rewind button makes animations to rewind to zero");
+  clickOnRewindButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  await waitUntilCurrentTimeChangedAt(animationInspector, 0);
+  ok(true, "Rewind button make current time 0");
+
+  info("Checking rewind button makes animations after clicking scrubber");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  clickOnRewindButton(animationInspector, panel);
+  await waitUntilCurrentTimeChangedAt(animationInspector, 0);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  ok(true, "Rewind button make current time 0 even after clicking scrubber");
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_short-duration.js b/devtools/client/inspector/animation/test/browser_animation_short-duration.js
new file mode 100644
index 0000000000..c953d886ff
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_short-duration.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test tooltips and iteration path of summary graph with short duration animation.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_short_duration.html");
+  const { panel } = await openAnimationInspector();
+
+  const animationItemEl = await findAnimationItemByTargetSelector(
+    panel,
+    ".short"
+  );
+  const summaryGraphEl = animationItemEl.querySelector(
+    ".animation-summary-graph"
+  );
+
+  info("Check tooltip");
+  assertTooltip(summaryGraphEl);
+
+  info("Check iteration path");
+  assertIterationPath(summaryGraphEl);
+});
+
+function assertTooltip(summaryGraphEl) {
+  const tooltip = summaryGraphEl.getAttribute("title");
+  const expected = "Duration: 0s";
+  ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+}
+
+function assertIterationPath(summaryGraphEl) {
+  const pathEl = summaryGraphEl.querySelector(
+    ".animation-computed-timing-path .animation-iteration-path"
+  );
+  const expected = [
+    { x: 0, y: 0 },
+    { x: 0.999, y: 99.9 },
+    { x: 1, y: 0 },
+  ];
+  assertPathSegments(pathEl, true, expected);
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
new file mode 100644
index 0000000000..0e9c52449d
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following AnimationName component works.
+// * element existance
+// * name text
+
+const TEST_DATA = [
+  {
+    targetClass: "cssanimation-normal",
+    expectedLabel: "cssanimation",
+  },
+  {
+    targetClass: "cssanimation-linear",
+    expectedLabel: "cssanimation",
+  },
+  {
+    targetClass: "delay-positive",
+    expectedLabel: "test-delay-animation",
+  },
+  {
+    targetClass: "delay-negative",
+    expectedLabel: "test-negative-delay-animation",
+  },
+  {
+    targetClass: "easing-step",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const { targetClass, expectedLabel } of TEST_DATA) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+
+    info(`Checking animation name element existance for ${targetClass}`);
+    const animationNameEl = animationItemEl.querySelector(".animation-name");
+
+    if (expectedLabel) {
+      ok(
+        animationNameEl,
+        "The animation name element should be in animation item element"
+      );
+      is(
+        animationNameEl.textContent,
+        expectedLabel,
+        `The animation name should be ${expectedLabel}`
+      );
+    } else {
+      ok(
+        !animationNameEl,
+        "The animation name element should not be in animation item element"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
new file mode 100644
index 0000000000..186c54cba6
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
@@ -0,0 +1,121 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when animations displayed in the timeline are running on the
+// compositor, they get a special icon and information in the tooltip.
+
+requestLongerTimeout(2);
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([
+    ".compositor-all",
+    ".compositor-notall",
+    ".no-compositor",
+  ]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Check animation whose all properties are running on compositor");
+  const summaryGraphAllEl = await findSummaryGraph(".compositor-all", panel);
+  ok(
+    summaryGraphAllEl.classList.contains("compositor"),
+    "The element has the compositor css class"
+  );
+  ok(
+    hasTooltip(
+      summaryGraphAllEl,
+      ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")
+    ),
+    "The element has the right tooltip content"
+  );
+
+  info("Check animation is not running on compositor");
+  const summaryGraphNoEl = await findSummaryGraph(".no-compositor", panel);
+  ok(
+    !summaryGraphNoEl.classList.contains("compositor"),
+    "The element does not have the compositor css class"
+  );
+  ok(
+    !hasTooltip(
+      summaryGraphNoEl,
+      ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")
+    ),
+    "The element does not have oncompositor tooltip content"
+  );
+  ok(
+    !hasTooltip(
+      summaryGraphNoEl,
+      ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")
+    ),
+    "The element does not have oncompositor tooltip content"
+  );
+
+  info(
+    "Select a node has animation whose some properties are running on compositor"
+  );
+  await selectNode(".compositor-notall", inspector);
+  const summaryGraphEl = await findSummaryGraph(".compositor-notall", panel);
+  ok(
+    summaryGraphEl.classList.contains("compositor"),
+    "The element has the compositor css class"
+  );
+  ok(
+    hasTooltip(
+      summaryGraphEl,
+      ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")
+    ),
+    "The element has the right tooltip content"
+  );
+
+  info("Check compositor sign after pausing");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntil(() => !summaryGraphEl.classList.contains("compositor"));
+  ok(
+    true,
+    "The element should not have the compositor css class after pausing"
+  );
+
+  info("Check compositor sign after resuming");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntil(() => summaryGraphEl.classList.contains("compositor"));
+  ok(true, "The element should have the compositor css class after resuming");
+
+  info("Check compositor sign after rewind");
+  clickOnRewindButton(animationInspector, panel);
+  await waitUntil(() => !summaryGraphEl.classList.contains("compositor"));
+  ok(
+    true,
+    "The element should not have the compositor css class after rewinding"
+  );
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntil(() => summaryGraphEl.classList.contains("compositor"));
+  ok(true, "The element should have the compositor css class after resuming");
+
+  info("Check compositor sign after setting the current time");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  await waitUntil(() => !summaryGraphEl.classList.contains("compositor"));
+  ok(
+    true,
+    "The element should not have the compositor css class " +
+      "after setting the current time"
+  );
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntil(() => summaryGraphEl.classList.contains("compositor"));
+  ok(true, "The element should have the compositor css class after resuming");
+});
+
+async function findSummaryGraph(selector, panel) {
+  const animationItemEl = await findAnimationItemByTargetSelector(
+    panel,
+    selector
+  );
+  return animationItemEl.querySelector(".animation-summary-graph");
+}
+
+function hasTooltip(summaryGraphEl, expected) {
+  const tooltip = summaryGraphEl.getAttribute("title");
+  return tooltip.includes(expected);
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_1.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_1.js
new file mode 100644
index 0000000000..a81b971559
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_1.js
@@ -0,0 +1,208 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following ComputedTimingPath component works.
+// * element existance
+// * iterations: path, count
+// * delay: path
+// * fill: path
+// * endDelay: path
+
+/* import-globals-from summary-graph_computed-timing-path_head.js */
+Services.scriptloader.loadSubScript(
+  CHROME_URL_ROOT + "summary-graph_computed-timing-path_head.js",
+  this
+);
+
+const TEST_DATA = [
+  {
+    targetClass: "cssanimation-normal",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 40.851 },
+        { x: 500000, y: 80.24 },
+        { x: 750000, y: 96.05 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "cssanimation-linear",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "delay-positive",
+    expectedDelayPath: [
+      { x: 0, y: 0 },
+      { x: 500000, y: 0 },
+    ],
+    expectedIterationPathList: [
+      [
+        { x: 500000, y: 0 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 50 },
+        { x: 1250000, y: 75 },
+        { x: 1500000, y: 100 },
+        { x: 1500000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "easing-step",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 499999, y: 0 },
+        { x: 500000, y: 50 },
+        { x: 999999, y: 50 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "enddelay-positive",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+    expectedEndDelayPath: [
+      { x: 1000000, y: 0 },
+      { x: 1500000, y: 0 },
+    ],
+  },
+  {
+    targetClass: "enddelay-negative",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 500000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "enddelay-with-fill-forwards",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+    expectedEndDelayPath: [
+      { x: 1000000, y: 0 },
+      { x: 1000000, y: 100 },
+      { x: 1500000, y: 100 },
+      { x: 1500000, y: 0 },
+    ],
+    expectedForwardsPath: [
+      { x: 1500000, y: 0 },
+      { x: 1500000, y: 100 },
+    ],
+  },
+  {
+    targetClass: "enddelay-with-iterations-infinity",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+      [
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+      ],
+    ],
+    isInfinity: true,
+  },
+  {
+    targetClass: "direction-alternate-with-iterations-infinity",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+      [
+        { x: 1000000, y: 0 },
+        { x: 1000000, y: 100 },
+        { x: 1250000, y: 75 },
+        { x: 1500000, y: 50 },
+      ],
+    ],
+    isInfinity: true,
+  },
+  {
+    targetClass: "direction-alternate-reverse-with-iterations-infinity",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: 100 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 0 },
+      ],
+      [
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+      ],
+    ],
+    isInfinity: true,
+  },
+  {
+    targetClass: "direction-reverse-with-iterations-infinity",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: 100 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 0 },
+      ],
+      [
+        { x: 1000000, y: 0 },
+        { x: 1000000, y: 100 },
+        { x: 1250000, y: 75 },
+        { x: 1500000, y: 50 },
+      ],
+    ],
+    isInfinity: true,
+  },
+];
+
+add_task(async function () {
+  await testComputedTimingPath(TEST_DATA);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_2.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_2.js
new file mode 100644
index 0000000000..e1e4c52ba6
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_2.js
@@ -0,0 +1,192 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following ComputedTimingPath component works.
+// * element existance
+// * iterations: path, count
+// * delay: path
+// * fill: path
+// * endDelay: path
+
+/* import-globals-from summary-graph_computed-timing-path_head.js */
+Services.scriptloader.loadSubScript(
+  CHROME_URL_ROOT + "summary-graph_computed-timing-path_head.js",
+  this
+);
+
+const TEST_DATA = [
+  {
+    targetClass: "fill-backwards",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "fill-backwards-with-delay-iterationstart",
+    expectedDelayPath: [
+      { x: 0, y: 0 },
+      { x: 0, y: 50 },
+      { x: 500000, y: 50 },
+      { x: 500000, y: 0 },
+    ],
+    expectedIterationPathList: [
+      [
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+      [
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+        { x: 1500000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "fill-both",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+    expectedForwardsPath: [
+      { x: 1000000, y: 0 },
+      { x: 1000000, y: 100 },
+      { x: 1500000, y: 100 },
+      { x: 1500000, y: 0 },
+    ],
+  },
+  {
+    targetClass: "fill-both-width-delay-iterationstart",
+    expectedDelayPath: [
+      { x: 0, y: 0 },
+      { x: 0, y: 50 },
+      { x: 500000, y: 50 },
+      { x: 500000, y: 0 },
+    ],
+    expectedIterationPathList: [
+      [
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+      [
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+        { x: 1500000, y: 0 },
+      ],
+    ],
+    expectedForwardsPath: [
+      { x: 1500000, y: 0 },
+      { x: 1500000, y: 50 },
+    ],
+  },
+  {
+    targetClass: "fill-forwards",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+    expectedForwardsPath: [
+      { x: 1000000, y: 0 },
+      { x: 1000000, y: 100 },
+      { x: 1500000, y: 100 },
+      { x: 1500000, y: 0 },
+    ],
+  },
+  {
+    targetClass: "iterationstart",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 50 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 100 },
+        { x: 500000, y: 0 },
+      ],
+      [
+        { x: 500000, y: 0 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 50 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "no-compositor",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "keyframes-easing-step",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 499999, y: 0 },
+        { x: 500000, y: 50 },
+        { x: 999999, y: 50 },
+        { x: 1000000, y: 0 },
+      ],
+    ],
+  },
+  {
+    targetClass: "narrow-keyframes",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 100000, y: 10 },
+        { x: 110000, y: 10 },
+        { x: 115000, y: 10 },
+        { x: 129999, y: 10 },
+        { x: 130000, y: 13 },
+        { x: 135000, y: 13.5 },
+      ],
+    ],
+  },
+  {
+    targetClass: "duplicate-offsets",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 999999, y: 50 },
+      ],
+    ],
+  },
+];
+
+add_task(async function () {
+  await testComputedTimingPath(TEST_DATA);
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
new file mode 100644
index 0000000000..0b9bc79def
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the Computed Timing Path component for different time scales.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".end-delay"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking the path for different time scale");
+  let onDetailRendered = animationInspector.once(
+    "animation-keyframes-rendered"
+  );
+  await selectNode(".animated", inspector);
+  await onDetailRendered;
+  const itemA = await findAnimationItemByTargetSelector(panel, ".animated");
+  const pathStringA = itemA
+    .querySelector(".animation-iteration-path")
+    .getAttribute("d");
+
+  info("Select animation which has different time scale from no-compositor");
+  onDetailRendered = animationInspector.once("animation-keyframes-rendered");
+  await selectNode(".end-delay", inspector);
+  await onDetailRendered;
+
+  info("Select no-compositor again");
+  onDetailRendered = animationInspector.once("animation-keyframes-rendered");
+  await selectNode(".animated", inspector);
+  await onDetailRendered;
+  const itemB = await findAnimationItemByTargetSelector(panel, ".animated");
+  const pathStringB = itemB
+    .querySelector(".animation-iteration-path")
+    .getAttribute("d");
+  is(
+    pathStringA,
+    pathStringB,
+    "Path string should be same even change the time scale"
+  );
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign-rtl.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign-rtl.js
new file mode 100644
index 0000000000..591fc5f3fe
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign-rtl.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "summary-graph_delay-sign_head.js",
+    this
+  );
+  await pushPref("intl.l10n.pseudo", "bidi");
+  // eslint-disable-next-line no-undef
+  await testSummaryGraphDelaySign();
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
new file mode 100644
index 0000000000..891d9fd90e
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "summary-graph_delay-sign_head.js",
+    this
+  );
+  // eslint-disable-next-line no-undef
+  await testSummaryGraphDelaySign();
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
new file mode 100644
index 0000000000..6974eab6c6
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following EffectTimingPath component works.
+// * element existance
+// * path
+
+const TEST_DATA = [
+  {
+    targetClass: "cssanimation-linear",
+  },
+  {
+    targetClass: "delay-negative",
+  },
+  {
+    targetClass: "easing-step",
+    expectedPath: [
+      { x: 0, y: 0 },
+      { x: 499999, y: 0 },
+      { x: 500000, y: 50 },
+      { x: 999999, y: 50 },
+      { x: 1000000, y: 0 },
+    ],
+  },
+  {
+    targetClass: "keyframes-easing-step",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const { targetClass, expectedPath } of TEST_DATA) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+
+    info(`Checking effect timing path existance for ${targetClass}`);
+    const effectTimingPathEl = animationItemEl.querySelector(
+      ".animation-effect-timing-path"
+    );
+
+    if (expectedPath) {
+      ok(
+        effectTimingPathEl,
+        "The effect timing path element should be in animation item element"
+      );
+      const pathEl = effectTimingPathEl.querySelector(
+        ".animation-iteration-path"
+      );
+      assertPathSegments(pathEl, false, expectedPath);
+    } else {
+      ok(
+        !effectTimingPathEl,
+        "The effect timing path element should not be in animation item element"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign-rtl.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign-rtl.js
new file mode 100644
index 0000000000..084e4acf1d
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign-rtl.js
@@ -0,0 +1,15 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from summary-graph_end-delay-sign_head.js */
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "summary-graph_end-delay-sign_head.js",
+    this
+  );
+  await pushPref("intl.l10n.pseudo", "bidi");
+  await testSummaryGraphEndDelaySign();
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
new file mode 100644
index 0000000000..4382ed4c2d
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function () {
+  Services.scriptloader.loadSubScript(
+    CHROME_URL_ROOT + "summary-graph_end-delay-sign_head.js",
+    this
+  );
+  // eslint-disable-next-line no-undef
+  await testSummaryGraphEndDelaySign();
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_layout-by-seek.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_layout-by-seek.js
new file mode 100644
index 0000000000..5f1c808728
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_layout-by-seek.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the layout of graphs were broken by seek and resume.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept([
+    ".delay-positive",
+    ".delay-negative",
+    ".enddelay-positive",
+    ".enddelay-negative",
+  ]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Get initial coordinates result as test data");
+  const initialCoordinatesResult = [];
+
+  for (let i = 0; i < animationInspector.state.animations.length; i++) {
+    const itemEl = await findAnimationItemByIndex(panel, i);
+    const svgEl = itemEl.querySelector("svg");
+    const svgViewBoxX = svgEl.viewBox.baseVal.x;
+    const svgViewBoxWidth = svgEl.viewBox.baseVal.width;
+
+    const pathEl = svgEl.querySelector(".animation-computed-timing-path");
+    const pathX = pathEl.transform.baseVal[0].matrix.e;
+
+    const delayEl = itemEl.querySelector(".animation-delay-sign");
+    let delayX = null;
+    let delayWidth = null;
+
+    if (delayEl) {
+      const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
+      delayX = computedStyle.left;
+      delayWidth = computedStyle.width;
+    }
+
+    const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
+    let endDelayX = null;
+    let endDelayWidth = null;
+
+    if (endDelayEl) {
+      const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
+      endDelayX = computedStyle.left;
+      endDelayWidth = computedStyle.width;
+    }
+
+    const coordinates = {
+      svgViewBoxX,
+      svgViewBoxWidth,
+      pathX,
+      delayX,
+      delayWidth,
+      endDelayX,
+      endDelayWidth,
+    };
+    initialCoordinatesResult.push(coordinates);
+  }
+
+  info("Set currentTime to rear of the end of animation of .delay-negative.");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.75);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  info("Resume animations");
+  clickOnPauseResumeButton(animationInspector, panel);
+  // As some animations may be finished, we check if some animations will be running.
+  await waitUntil(() =>
+    animationInspector.state.animations.some(
+      a => a.state.playState === "running"
+    )
+  );
+
+  info("Check the layout");
+  const itemEls = panel.querySelectorAll(".animation-item");
+  is(
+    itemEls.length,
+    initialCoordinatesResult.length,
+    "Count of animation item should be same to initial items"
+  );
+
+  info("Check the coordinates");
+  checkExpectedCoordinates(itemEls, initialCoordinatesResult);
+});
+
+function checkExpectedCoordinates(itemEls, initialCoordinatesResult) {
+  for (let i = 0; i < itemEls.length; i++) {
+    const expectedCoordinates = initialCoordinatesResult[i];
+    const itemEl = itemEls[i];
+    const svgEl = itemEl.querySelector("svg");
+    is(
+      svgEl.viewBox.baseVal.x,
+      expectedCoordinates.svgViewBoxX,
+      "X of viewBox of svg should be same"
+    );
+    is(
+      svgEl.viewBox.baseVal.width,
+      expectedCoordinates.svgViewBoxWidth,
+      "Width of viewBox of svg should be same"
+    );
+
+    const pathEl = svgEl.querySelector(".animation-computed-timing-path");
+    is(
+      pathEl.transform.baseVal[0].matrix.e,
+      expectedCoordinates.pathX,
+      "X of tansform of path element should be same"
+    );
+
+    const delayEl = itemEl.querySelector(".animation-delay-sign");
+
+    if (delayEl) {
+      const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
+      is(
+        computedStyle.left,
+        expectedCoordinates.delayX,
+        "X of delay sign should be same"
+      );
+      is(
+        computedStyle.width,
+        expectedCoordinates.delayWidth,
+        "Width of delay sign should be same"
+      );
+    } else {
+      ok(!expectedCoordinates.delayX, "X of delay sign should exist");
+      ok(!expectedCoordinates.delayWidth, "Width of delay sign should exist");
+    }
+
+    const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
+
+    if (endDelayEl) {
+      const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
+      is(
+        computedStyle.left,
+        expectedCoordinates.endDelayX,
+        "X of endDelay sign should be same"
+      );
+      is(
+        computedStyle.width,
+        expectedCoordinates.endDelayWidth,
+        "Width of endDelay sign should be same"
+      );
+    } else {
+      ok(!expectedCoordinates.endDelayX, "X of endDelay sign should exist");
+      ok(
+        !expectedCoordinates.endDelayWidth,
+        "Width of endDelay sign should exist"
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
new file mode 100644
index 0000000000..8ed638c443
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
@@ -0,0 +1,128 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following NegativeDelayPath component works.
+// * element existance
+// * path
+
+const TEST_DATA = [
+  {
+    targetClass: "delay-positive",
+  },
+  {
+    targetClass: "delay-negative",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: 50 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 100 },
+        { x: 500000, y: 0 },
+      ],
+    ],
+    expectedNegativePath: [
+      { x: -500000, y: 0 },
+      { x: -250000, y: 25 },
+      { x: 0, y: 50 },
+      { x: 0, y: 0 },
+    ],
+  },
+  {
+    targetClass: "delay-negative-25",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: 25 },
+        { x: 750000, y: 100 },
+        { x: 750000, y: 0 },
+      ],
+    ],
+    expectedNegativePath: [
+      { x: -250000, y: 0 },
+      { x: 0, y: 25 },
+      { x: 0, y: 0 },
+    ],
+  },
+  {
+    targetClass: "delay-negative-75",
+    expectedIterationPathList: [
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: 75 },
+        { x: 250000, y: 100 },
+        { x: 250000, y: 0 },
+      ],
+    ],
+    expectedNegativePath: [
+      { x: -750000, y: 0 },
+      { x: 0, y: 75 },
+      { x: 0, y: 0 },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const {
+    targetClass,
+    expectedIterationPathList,
+    expectedNegativePath,
+  } of TEST_DATA) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+
+    info(`Checking negative delay path existence for ${targetClass}`);
+    const negativeDelayPathEl = animationItemEl.querySelector(
+      ".animation-negative-delay-path"
+    );
+
+    if (expectedNegativePath) {
+      ok(
+        negativeDelayPathEl,
+        "The negative delay path element should be in animation item element"
+      );
+      const pathEl = negativeDelayPathEl.querySelector("path");
+      assertPathSegments(pathEl, true, expectedNegativePath);
+    } else {
+      ok(
+        !negativeDelayPathEl,
+        "The negative delay path element should not be in animation item element"
+      );
+    }
+
+    if (!expectedIterationPathList) {
+      // We don't need to test for iteration path.
+      continue;
+    }
+
+    info(`Checking computed timing path existance for ${targetClass}`);
+    const computedTimingPathEl = animationItemEl.querySelector(
+      ".animation-computed-timing-path"
+    );
+    ok(
+      computedTimingPathEl,
+      "The computed timing path element should be in each animation item element"
+    );
+
+    info(`Checking iteration path list for ${targetClass}`);
+    const iterationPathEls = computedTimingPathEl.querySelectorAll(
+      ".animation-iteration-path"
+    );
+    is(
+      iterationPathEls.length,
+      expectedIterationPathList.length,
+      `Number of iteration path should be ${expectedIterationPathList.length}`
+    );
+
+    for (const [j, iterationPathEl] of iterationPathEls.entries()) {
+      assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]);
+    }
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
new file mode 100644
index 0000000000..69ce5007b5
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following NegativeEndDelayPath component works.
+// * element existance
+// * path
+
+const TEST_DATA = [
+  {
+    targetClass: "enddelay-positive",
+  },
+  {
+    targetClass: "enddelay-negative",
+    expectedPath: [
+      { x: 500000, y: 0 },
+      { x: 500000, y: 50 },
+      { x: 750000, y: 75 },
+      { x: 1000000, y: 100 },
+      { x: 1000000, y: 0 },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const { targetClass, expectedPath } of TEST_DATA) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+
+    info(`Checking negative endDelay path existance for ${targetClass}`);
+    const negativeEndDelayPathEl = animationItemEl.querySelector(
+      ".animation-negative-end-delay-path"
+    );
+
+    if (expectedPath) {
+      ok(
+        negativeEndDelayPathEl,
+        "The negative endDelay path element should be in animation item element"
+      );
+      const pathEl = negativeEndDelayPathEl.querySelector("path");
+      assertPathSegments(pathEl, true, expectedPath);
+    } else {
+      ok(
+        !negativeEndDelayPathEl,
+        "The negative endDelay path element should not be in animation item element"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
new file mode 100644
index 0000000000..1be3c92f4f
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@@ -0,0 +1,294 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for existance and content of tooltip on summary graph element.
+
+const TEST_DATA = [
+  {
+    targetClass: "cssanimation-normal",
+    expectedResult: {
+      nameAndType: "cssanimation — CSS Animation",
+      duration: "1,000s",
+    },
+  },
+  {
+    targetClass: "cssanimation-linear",
+    expectedResult: {
+      nameAndType: "cssanimation — CSS Animation",
+      duration: "1,000s",
+      animationTimingFunction: "linear",
+    },
+  },
+  {
+    targetClass: "delay-positive",
+    expectedResult: {
+      nameAndType: "test-delay-animation — Script Animation",
+      delay: "500s",
+      duration: "1,000s",
+    },
+  },
+  {
+    targetClass: "delay-negative",
+    expectedResult: {
+      nameAndType: "test-negative-delay-animation — Script Animation",
+      delay: "-500s",
+      duration: "1,000s",
+    },
+  },
+  {
+    targetClass: "easing-step",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      easing: "steps(2)",
+    },
+  },
+  {
+    targetClass: "enddelay-positive",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      endDelay: "500s",
+    },
+  },
+  {
+    targetClass: "enddelay-negative",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      endDelay: "-500s",
+    },
+  },
+  {
+    targetClass: "enddelay-with-fill-forwards",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      endDelay: "500s",
+      fill: "forwards",
+    },
+  },
+  {
+    targetClass: "enddelay-with-iterations-infinity",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      endDelay: "500s",
+      iterations: "\u221E",
+    },
+  },
+  {
+    targetClass: "direction-alternate-with-iterations-infinity",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      direction: "alternate",
+      iterations: "\u221E",
+    },
+  },
+  {
+    targetClass: "direction-alternate-reverse-with-iterations-infinity",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      direction: "alternate-reverse",
+      iterations: "\u221E",
+    },
+  },
+  {
+    targetClass: "direction-reverse-with-iterations-infinity",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      direction: "reverse",
+      iterations: "\u221E",
+    },
+  },
+  {
+    targetClass: "fill-backwards",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      fill: "backwards",
+    },
+  },
+  {
+    targetClass: "fill-backwards-with-delay-iterationstart",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      delay: "500s",
+      duration: "1,000s",
+      fill: "backwards",
+      iterationStart: "0.5",
+    },
+  },
+  {
+    targetClass: "fill-both",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      fill: "both",
+    },
+  },
+  {
+    targetClass: "fill-both-width-delay-iterationstart",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      delay: "500s",
+      duration: "1,000s",
+      fill: "both",
+      iterationStart: "0.5",
+    },
+  },
+  {
+    targetClass: "fill-forwards",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      fill: "forwards",
+    },
+  },
+  {
+    targetClass: "iterationstart",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+      iterationStart: "0.5",
+    },
+  },
+  {
+    targetClass: "no-compositor",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+    },
+  },
+  {
+    targetClass: "keyframes-easing-step",
+    expectedResult: {
+      nameAndType: "Script Animation",
+      duration: "1,000s",
+    },
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const { targetClass, expectedResult } of TEST_DATA) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+    const summaryGraphEl = animationItemEl.querySelector(
+      ".animation-summary-graph"
+    );
+
+    info(`Checking tooltip for ${targetClass}`);
+    ok(
+      summaryGraphEl.hasAttribute("title"),
+      "Summary graph should have 'title' attribute"
+    );
+
+    const tooltip = summaryGraphEl.getAttribute("title");
+    const {
+      animationTimingFunction,
+      delay,
+      easing,
+      endDelay,
+      direction,
+      duration,
+      fill,
+      iterations,
+      iterationStart,
+      nameAndType,
+    } = expectedResult;
+
+    ok(
+      tooltip.startsWith(nameAndType),
+      "Tooltip should start with name and type"
+    );
+
+    if (animationTimingFunction) {
+      const expected = `Animation timing function: ${animationTimingFunction}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(
+        !tooltip.includes("Animation timing function:"),
+        "Tooltip should not include animation timing function"
+      );
+    }
+
+    if (delay) {
+      const expected = `Delay: ${delay}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(!tooltip.includes("Delay:"), "Tooltip should not include delay");
+    }
+
+    if (direction) {
+      const expected = `Direction: ${direction}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(!tooltip.includes("Direction:"), "Tooltip should not include delay");
+    }
+
+    if (duration) {
+      const expected = `Duration: ${duration}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(!tooltip.includes("Duration:"), "Tooltip should not include delay");
+    }
+
+    if (easing) {
+      const expected = `Overall easing: ${easing}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(
+        !tooltip.includes("Overall easing:"),
+        "Tooltip should not include easing"
+      );
+    }
+
+    if (endDelay) {
+      const expected = `End delay: ${endDelay}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(
+        !tooltip.includes("End delay:"),
+        "Tooltip should not include endDelay"
+      );
+    }
+
+    if (fill) {
+      const expected = `Fill: ${fill}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(!tooltip.includes("Fill:"), "Tooltip should not include fill");
+    }
+
+    if (iterations) {
+      const expected = `Repeats: ${iterations}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(
+        !tooltip.includes("Repeats:"),
+        "Tooltip should not include iterations"
+      );
+    }
+
+    if (iterationStart) {
+      const expected = `Iteration start: ${iterationStart}`;
+      ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
+    } else {
+      ok(
+        !tooltip.includes("Iteration start:"),
+        "Tooltip should not include iterationStart"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_current-time-scrubber.js b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_current-time-scrubber.js
new file mode 100644
index 0000000000..e5f05d4f18
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_current-time-scrubber.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the scrubber was working in case of negative playback rate.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_negative_playback_rate.html");
+  await removeAnimatedElementsExcept([".normal"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Set initial state");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  const initialCurrentTime =
+    animationInspector.state.animations[0].state.currentTime;
+  const initialProgressBarX = getProgressBarX(panel);
+
+  info("Check whether the animation currentTime was decreased");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  await waitUntilCurrentTimeChangedAt(
+    animationInspector,
+    animationInspector.state.timeScale.getDuration() * 0.5
+  );
+  Assert.greater(
+    initialCurrentTime,
+    animationInspector.state.animations[0].state.currentTime,
+    "currentTime should be decreased"
+  );
+
+  info("Check whether the progress bar was moved to left");
+  Assert.greater(
+    initialProgressBarX,
+    getProgressBarX(panel),
+    "Progress bar should be moved to left"
+  );
+});
+
+function getProgressBarX(panel) {
+  const areaEl = panel.querySelector(".keyframes-progress-bar-area");
+  const barEl = areaEl.querySelector(".keyframes-progress-bar");
+  const controllerBounds = areaEl.getBoundingClientRect();
+  const barBounds = barEl.getBoundingClientRect();
+  const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
+  return barX;
+}
diff --git a/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js
new file mode 100644
index 0000000000..ef326f5eb2
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js
@@ -0,0 +1,235 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following summary graph with the animation which is negative playback rate.
+// * Tooltips
+// * Graph path
+// * Delay sign
+// * End delay sign
+
+const TEST_DATA = [
+  {
+    targetSelector: ".normal",
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ],
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+    expectedViewboxWidth: 200000,
+  },
+  {
+    targetSelector: ".normal-playbackrate-2",
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ],
+      },
+    ],
+    expectedTooltip: "Playback rate: -2",
+    expectedViewboxWidth: 400000,
+  },
+  {
+    targetSelector: ".positive-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-end-delay-sign",
+        sign: {
+          marginInlineStart: "75%",
+          width: "25%",
+        },
+      },
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ],
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+  {
+    targetSelector: ".negative-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-end-delay-sign",
+        sign: {
+          marginInlineStart: "50%",
+          width: "25%",
+        },
+      },
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 50000, y: 0 },
+        ],
+      },
+      {
+        selector: ".animation-negative-delay-path path",
+        path: [
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ],
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+  {
+    targetSelector: ".positive-end-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-delay-sign",
+        sign: {
+          isFilled: true,
+          marginInlineStart: "25%",
+          width: "25%",
+        },
+      },
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 50000, y: 100 },
+          { x: 100000, y: 50 },
+          { x: 150000, y: 0 },
+        ],
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+  {
+    targetSelector: ".negative-end-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-delay-sign",
+        sign: {
+          isFilled: true,
+          marginInlineStart: "0%",
+          width: "25%",
+        },
+      },
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 50 },
+          { x: 50000, y: 0 },
+        ],
+      },
+      {
+        selector: ".animation-negative-end-delay-path path",
+        path: [
+          { x: -50000, y: 100 },
+          { x: 0, y: 0 },
+        ],
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_negative_playback_rate.html");
+  const { panel } = await openAnimationInspector();
+
+  for (const testData of TEST_DATA) {
+    const {
+      targetSelector,
+      expectedPathList,
+      expectedSignList,
+      expectedTooltip,
+      expectedViewboxWidth,
+    } = testData;
+
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      targetSelector
+    );
+    const summaryGraphEl = animationItemEl.querySelector(
+      ".animation-summary-graph"
+    );
+
+    info(`Check tooltip for the animation of ${targetSelector}`);
+    assertTooltip(summaryGraphEl, expectedTooltip);
+
+    if (expectedPathList) {
+      for (const { selector, path } of expectedPathList) {
+        info(`Check path for ${selector}`);
+        assertPath(summaryGraphEl, selector, path);
+      }
+    }
+
+    if (expectedSignList) {
+      for (const { selector, sign } of expectedSignList) {
+        info(`Check sign for ${selector}`);
+        assertSign(summaryGraphEl, selector, sign);
+      }
+    }
+
+    if (expectedViewboxWidth) {
+      info("Check width of viewbox of SVG");
+      const svgEl = summaryGraphEl.querySelector(
+        ".animation-summary-graph-path"
+      );
+      is(
+        svgEl.viewBox.baseVal.width,
+        expectedViewboxWidth,
+        `width of viewbox should be ${expectedViewboxWidth}`
+      );
+    }
+  }
+});
+
+function assertPath(summaryGraphEl, pathSelector, expectedPath) {
+  const pathEl = summaryGraphEl.querySelector(pathSelector);
+  assertPathSegments(pathEl, true, expectedPath);
+}
+
+function assertSign(summaryGraphEl, selector, expectedSign) {
+  const signEl = summaryGraphEl.querySelector(selector);
+
+  is(
+    signEl.style.marginInlineStart,
+    expectedSign.marginInlineStart,
+    `marginInlineStart position should be ${expectedSign.marginInlineStart}`
+  );
+  is(
+    signEl.style.width,
+    expectedSign.width,
+    `Width should be ${expectedSign.width}`
+  );
+  is(
+    signEl.classList.contains("fill"),
+    expectedSign.isFilled || false,
+    "signEl should be correct"
+  );
+}
+
+function assertTooltip(summaryGraphEl, expectedTooltip) {
+  const tooltip = summaryGraphEl.getAttribute("title");
+  ok(
+    tooltip.includes(expectedTooltip),
+    `Tooltip should include '${expectedTooltip}'`
+  );
+}
diff --git a/devtools/client/inspector/animation/test/current-time-scrubber_head.js b/devtools/client/inspector/animation/test/current-time-scrubber_head.js
new file mode 100644
index 0000000000..1e94a7562c
--- /dev/null
+++ b/devtools/client/inspector/animation/test/current-time-scrubber_head.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from head.js */
+
+// Test for following CurrentTimeScrubber and CurrentTimeScrubberController components:
+// * element existence
+// * scrubber position validity
+// * make animations currentTime to change by click on the controller
+// * mouse drag on the scrubber
+
+// eslint-disable-next-line no-unused-vars
+async function testCurrentTimeScrubber(isRTL) {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".long"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking scrubber controller existence");
+  const controllerEl = panel.querySelector(".current-time-scrubber-area");
+  ok(controllerEl, "scrubber controller should exist");
+
+  info("Checking scrubber existence");
+  const scrubberEl = controllerEl.querySelector(".current-time-scrubber");
+  ok(scrubberEl, "scrubber should exist");
+
+  info("Checking scrubber changes current time of animation and the position");
+  const duration = animationInspector.state.timeScale.getDuration();
+  clickOnCurrentTimeScrubberController(
+    animationInspector,
+    panel,
+    isRTL ? 1 : 0
+  );
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  await waitUntilCurrentTimeChangedAt(animationInspector, 0);
+  assertPosition(
+    scrubberEl,
+    controllerEl,
+    isRTL ? duration : 0,
+    animationInspector
+  );
+
+  clickOnCurrentTimeScrubberController(
+    animationInspector,
+    panel,
+    isRTL ? 0 : 1
+  );
+  await waitUntilCurrentTimeChangedAt(animationInspector, duration);
+  assertPosition(
+    scrubberEl,
+    controllerEl,
+    isRTL ? 0 : duration,
+    animationInspector
+  );
+
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  await waitUntilCurrentTimeChangedAt(animationInspector, duration * 0.5);
+  assertPosition(scrubberEl, controllerEl, duration * 0.5, animationInspector);
+
+  info("Checking current time scrubber position during running");
+  // Running again
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "running");
+  let previousX = scrubberEl.getBoundingClientRect().x;
+  await wait(1000);
+  let currentX = scrubberEl.getBoundingClientRect().x;
+  isnot(previousX, currentX, "Scrubber should be moved");
+
+  info("Checking draggable on scrubber over animation list");
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  previousX = scrubberEl.getBoundingClientRect().x;
+  await dragOnCurrentTimeScrubber(animationInspector, panel, 5, 30);
+  currentX = scrubberEl.getBoundingClientRect().x;
+  isnot(previousX, currentX, "Scrubber should be draggable");
+
+  info(
+    "Checking a behavior which mouse out from animation inspector area " +
+      "during dragging from controller"
+  );
+  await dragOnCurrentTimeScrubberController(animationInspector, panel, 0.5, 2);
+  ok(
+    !panel
+      .querySelector(".animation-list-container")
+      .classList.contains("active-scrubber"),
+    "Click and DnD should be inactive"
+  );
+}
+
+function assertPosition(scrubberEl, controllerEl, time, animationInspector) {
+  const controllerBounds = controllerEl.getBoundingClientRect();
+  const scrubberBounds = scrubberEl.getBoundingClientRect();
+  const scrubberX =
+    scrubberBounds.x + scrubberBounds.width / 2 - controllerBounds.x;
+  const timeScale = animationInspector.state.timeScale;
+  const expected = Math.round(
+    (time / timeScale.getDuration()) * controllerBounds.width
+  );
+  is(scrubberX, expected, `Position should be ${expected} at ${time}ms`);
+}
diff --git a/devtools/client/inspector/animation/test/doc_custom_playback_rate.html b/devtools/client/inspector/animation/test/doc_custom_playback_rate.html
new file mode 100644
index 0000000000..9adee99884
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_custom_playback_rate.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    const duration = 100000;
+
+    function createAnimation(cls) {
+      const div = document.createElement("div");
+      div.classList.add(cls);
+      document.body.appendChild(div);
+      const animation = div.animate([{ opacity: 0 }], duration);
+      animation.playbackRate = 1.5;
+    }
+
+    createAnimation("div1");
+    createAnimation("div2");
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_infinity_duration.html b/devtools/client/inspector/animation/test/doc_infinity_duration.html
new file mode 100644
index 0000000000..10d19fc3cf
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_infinity_duration.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="infinity"></div>
+    <div class="infinity-delay-iteration-start"></div>
+    <div class="limited"></div>
+    <script>
+    "use strict";
+
+    document.querySelector(".infinity").animate(
+      { opacity: [1, 0] },
+      { duration: Infinity }
+    );
+
+    document.querySelector(".infinity-delay-iteration-start").animate(
+      { opacity: [1, 0] },
+      {
+        delay: 100000,
+        duration: Infinity,
+        iterationStart: 0.5,
+      }
+    );
+
+    document.querySelector(".limited").animate(
+      { opacity: [1, 0] },
+      {
+        duration: 100000,
+      }
+    );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_multi_easings.html b/devtools/client/inspector/animation/test/doc_multi_easings.html
new file mode 100644
index 0000000000..cedcb027fe
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 50px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    function createAnimation(name, keyframes, effectEasing) {
+      const div = document.createElement("div");
+      div.classList.add(name);
+      document.body.appendChild(div);
+
+      const effect = {
+        duration: 100000,
+        fill: "forwards",
+      };
+
+      if (effectEasing) {
+        effect.easing = effectEasing;
+      }
+
+      div.animate(keyframes, effect);
+    }
+
+    createAnimation(
+      "no-easing",
+      [
+        { opacity: 1 },
+        { opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "effect-easing",
+      [
+        { opacity: 1 },
+        { opacity: 0 },
+      ],
+      "steps(5, jump-none)"
+    );
+
+    createAnimation(
+      "keyframe-easing",
+      [
+        { opacity: 1, easing: "steps(2)" },
+        { opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "both-easing",
+      [
+        { offset: 0, opacity: 1, easing: "steps(2)" },
+        { offset: 0, marginLeft: "0px", easing: "steps(1)" },
+        { marginLeft: "100px", opacity: 0 },
+      ],
+      "steps(10)"
+    );
+
+    createAnimation(
+      "narrow-keyframes",
+      [
+        { opacity: 0 },
+        { offset: 0.1, opacity: 1, easing: "steps(1)" },
+        { offset: 0.13, opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "duplicate-keyframes",
+      [
+        { opacity: 0 },
+        { offset: 0.5, opacity: 1 },
+        { offset: 0.5, opacity: 0, easing: "steps(1)" },
+        { opacity: 1 },
+      ]
+    );
+
+    createAnimation(
+      "color-keyframes",
+      [
+        { color: "red", easing: "ease-in" },
+        { offset: 0.4, color: "blue", easing: "ease-out" },
+        { color: "lime" },
+      ]
+    );
+
+    createAnimation(
+      "jump-start",
+      [
+        { opacity: 1, easing: "steps(2, jump-start)" },
+        { opacity: 0 },
+      ],
+    );
+
+    createAnimation(
+      "jump-end",
+      [
+        { opacity: 1, easing: "steps(2, jump-end)" },
+        { opacity: 0 },
+      ],
+    );
+
+    createAnimation(
+      "jump-both",
+      [
+        { opacity: 1, easing: "steps(3, jump-both)" },
+        { opacity: 0 },
+      ],
+    );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_multi_keyframes.html b/devtools/client/inspector/animation/test/doc_multi_keyframes.html
new file mode 100644
index 0000000000..8977f77dde
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_multi_keyframes.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      width: 50px;
+      height: 50px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    function createAnimation(name, keyframes, effectEasing) {
+      const div = document.createElement("div");
+      div.classList.add(name);
+      document.body.appendChild(div);
+
+      const effect = {
+        duration: 100000,
+        fill: "forwards",
+      };
+
+      if (effectEasing) {
+        effect.easing = effectEasing;
+      }
+
+      div.animate(keyframes, effect);
+    }
+
+    createAnimation(
+      "multi-types",
+      [
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "space round",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)",
+        },
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "round space",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)",
+        },
+      ]
+    );
+
+    createAnimation(
+      "multi-types-reverse",
+      [
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "space",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)",
+        },
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "round",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)",
+        },
+      ]
+    );
+
+    createAnimation(
+      "middle-keyframe",
+      [
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "space",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)",
+        },
+        {
+          backgroundColor: "blue",
+          backgroundRepeat: "round",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)",
+        },
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "space",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)",
+        },
+      ]
+    );
+
+    createAnimation(
+      "steps-keyframe",
+      [
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "space",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)",
+          easing: "steps(2)",
+        },
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "round",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)",
+        },
+      ]
+    );
+
+    createAnimation(
+      "steps-effect",
+      [
+        {
+          opacity: 0,
+        },
+        {
+          opacity: 1,
+        },
+      ],
+      "steps(2)"
+    );
+
+    createAnimation(
+      "steps-jump-none-keyframe",
+      [
+        {
+          easing: "steps(5, jump-none)",
+          opacity: 0,
+        },
+        {
+          opacity: 1,
+        },
+      ]
+    );
+
+    createAnimation(
+      "narrow-offsets",
+      [
+        {
+          opacity: 0,
+        },
+        {
+          opacity: 1,
+          easing: "steps(2)",
+          offset: 0.1,
+        },
+        {
+          opacity: 0,
+          offset: 0.13,
+        },
+      ]
+    );
+
+    createAnimation(
+      "duplicate-offsets",
+      [
+        {
+          opacity: 1,
+        },
+        {
+          opacity: 1,
+          offset: 0.5,
+        },
+        {
+          opacity: 0,
+          offset: 0.5,
+        },
+        {
+          opacity: 1,
+          offset: 1,
+        },
+      ]
+    );
+
+    createAnimation(
+      "same-color",
+      [
+        {
+          backgroundColor: "lime",
+        },
+        {
+          backgroundColor: "lime",
+        },
+      ]
+    );
+
+    createAnimation(
+      "currentcolor",
+      [
+        {
+          backgroundColor: "currentColor",
+        },
+        {
+          backgroundColor: "lime",
+        },
+      ]
+    );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_multi_timings.html b/devtools/client/inspector/animation/test/doc_multi_timings.html
new file mode 100644
index 0000000000..a999431917
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_multi_timings.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+      width: 100px;
+    }
+
+    .cssanimation-normal {
+      animation: cssanimation 1000s;
+    }
+
+    .cssanimation-linear {
+      animation: cssanimation 1000s linear;
+    }
+
+    @keyframes cssanimation {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    </style>
+  </head>
+  <body>
+    <div class="cssanimation-normal"></div>
+    <div class="cssanimation-linear"></div>
+    <script>
+    "use strict";
+
+    const duration = 1000000;
+
+    function createAnimation(keyframes, effect, className) {
+      const div = document.createElement("div");
+      div.classList.add(className);
+      document.body.appendChild(div);
+      effect.duration = duration;
+      div.animate(keyframes, effect);
+    }
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: 500000, id: "test-delay-animation" },
+                    "delay-positive");
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: -500000, id: "test-negative-delay-animation" },
+                    "delay-negative");
+
+    createAnimation({ opacity: [0, 1] },
+                    { easing: "steps(2)" },
+                    "easing-step");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: 500000 },
+                    "enddelay-positive");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: -500000 },
+                    "enddelay-negative");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: 500000, fill: "forwards" },
+                    "enddelay-with-fill-forwards");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: 500000, iterations: Infinity },
+                    "enddelay-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { direction: "alternate", iterations: Infinity },
+                    "direction-alternate-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { direction: "alternate-reverse", iterations: Infinity },
+                    "direction-alternate-reverse-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { direction: "reverse", iterations: Infinity },
+                    "direction-reverse-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "backwards" },
+                    "fill-backwards");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "backwards", delay: 500000, iterationStart: 0.5 },
+                     "fill-backwards-with-delay-iterationstart");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "both" },
+                    "fill-both");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "both", delay: 500000, iterationStart: 0.5 },
+                    "fill-both-width-delay-iterationstart");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "forwards" },
+                    "fill-forwards");
+
+    createAnimation({ opacity: [0, 1] },
+                    { iterationStart: 0.5 },
+                    "iterationstart");
+
+    createAnimation({ width: ["100px", "150px"] },
+                    {},
+                    "no-compositor");
+
+    createAnimation([{ opacity: 0, easing: "steps(2)" }, { opacity: 1 }],
+                    {},
+                    "keyframes-easing-step");
+
+    createAnimation(
+      [
+        {
+          opacity: 0,
+          offset: 0,
+        },
+        {
+          opacity: 1,
+          offset: 0.1,
+          easing: "steps(1)",
+        },
+        {
+          opacity: 0,
+          offset: 0.13,
+        },
+      ],
+      {},
+      "narrow-keyframes");
+
+    createAnimation(
+      [
+        {
+          offset: 0,
+          opacity: 1,
+        },
+        {
+          offset: 0.5,
+          opacity: 1,
+        },
+        {
+          offset: 0.5,
+          easing: "steps(1)",
+          opacity: 0,
+        },
+        {
+          offset: 1,
+          opacity: 1,
+        },
+      ],
+      {},
+      "duplicate-offsets");
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: -250000 },
+                    "delay-negative-25");
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: -750000 },
+                    "delay-negative-75");
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_mutations_add_remove_immediately.html b/devtools/client/inspector/animation/test/doc_mutations_add_remove_immediately.html
new file mode 100644
index 0000000000..c8b3db749b
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_mutations_add_remove_immediately.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <div></div>
+
+    <script>
+    "use strict";
+
+    // This function is called from test.
+    // eslint-disable-next-line
+    function startMutation() {
+      const target = document.querySelector("div");
+      const animation = target.animate({ opacity: [1, 0] }, 100000);
+      animation.currentTime = 1;
+      animation.cancel();
+    }
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_mutations_fast.html b/devtools/client/inspector/animation/test/doc_mutations_fast.html
new file mode 100644
index 0000000000..3622846953
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_mutations_fast.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 20px;
+      opacity: 1;
+      transition: 0.5s opacity;
+    }
+
+    .transition {
+      opacity: 0;
+    }
+    </style>
+  </head>
+  <body>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+
+    <script>
+    "use strict";
+
+    // This function is called from test.
+    // eslint-disable-next-line
+    async function startFastMutations() {
+      const targets = document.querySelectorAll("div");
+
+      for (let i = 0; i < 10; i++) {
+        for (const target of targets) {
+          target.classList.toggle("transition");
+          await wait(15);
+        }
+      }
+    }
+
+    async function wait(ms) {
+      return new Promise(resolve => {
+        setTimeout(resolve, ms);
+      });
+    }
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_negative_playback_rate.html b/devtools/client/inspector/animation/test/doc_negative_playback_rate.html
new file mode 100644
index 0000000000..a98700712d
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_negative_playback_rate.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    const DURATION = 100000;
+    const KEYFRAMES = { backgroundColor: ["lime", "red"] };
+
+    function createAnimation(effect, className, playbackRate = -1) {
+      const div = document.createElement("div");
+      div.classList.add(className);
+      document.body.appendChild(div);
+      effect.duration = DURATION;
+      effect.fill = "forwards";
+      const animation = div.animate(KEYFRAMES, effect);
+      animation.updatePlaybackRate(playbackRate);
+      animation.play();
+    }
+
+    createAnimation({}, "normal");
+    createAnimation({}, "normal-playbackrate-2", -2);
+    createAnimation({ delay: 50000 }, "positive-delay");
+    createAnimation({ delay: -50000 }, "negative-delay");
+    createAnimation({ endDelay: 50000 }, "positive-end-delay");
+    createAnimation({ endDelay: -50000 }, "negative-end-delay");
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_overflowed_delay_end_delay.html b/devtools/client/inspector/animation/test/doc_overflowed_delay_end_delay.html
new file mode 100644
index 0000000000..a4d91ae4ef
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_overflowed_delay_end_delay.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      width: 100px;
+      height: 100px;
+      outline: 1px solid lime;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+    "use strict";
+
+    const target = document.getElementById("target");
+    target.animate(
+      {
+        color: ["red", "lime"],
+      },
+      {
+        id: "big-delay",
+        duration: 1000,
+        delay: Number.MAX_VALUE,
+        iterations: Infinity,
+      });
+
+    target.animate(
+      {
+        opacity: [1, 0],
+      },
+      {
+        id: "big-end-delay",
+        duration: 1000,
+        endDelay: Number.MAX_VALUE,
+        iterations: Infinity,
+      });
+
+    target.animate(
+      {
+        marginLeft: ["0px", "100px"],
+      },
+      {
+        id: "negative-big-delay",
+        duration: 1000,
+        delay: -Number.MAX_VALUE,
+        iterations: Infinity,
+      });
+
+    target.animate(
+      {
+        paddingLeft: ["0px", "100px"],
+      },
+      {
+        id: "negative-big-end-delay",
+        duration: 1000,
+        endDelay: -Number.MAX_VALUE,
+        iterations: Infinity,
+      });
+
+    target.animate(
+      {
+        backgroundColor: ["lime", "white"],
+      },
+      {
+        id: "big-iteration-start",
+        duration: 1000,
+        iterations: Infinity,
+        iterationStart: Number.MAX_VALUE,
+      });
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_pseudo.html b/devtools/client/inspector/animation/test/doc_pseudo.html
new file mode 100644
index 0000000000..3cc0c93470
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_pseudo.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    body::before {
+      animation: body 10s infinite;
+      background-color: lime;
+      content: "body-before";
+      width: 100px;
+    }
+
+    .div-before::before {
+      animation: div-before 10s infinite;
+      background-color: lime;
+      content: "div-before";
+      width: 100px;
+    }
+
+    .div-after::after {
+      animation: div-after 10s infinite;
+      background-color: lime;
+      content: "div-after";
+      width: 100px;
+    }
+
+    .div-marker {
+      display: list-item;
+      list-style-position: inside;
+    }
+
+    .div-marker::marker {
+      content: "div-marker";
+    }
+
+    @keyframes body {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes div-before {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    @keyframes div-after {
+      from {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.9;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+    </style>
+  </head>
+  <body>
+    <div class="div-before"></div>
+    <div class="div-after"></div>
+    <div class="div-marker"></div>
+
+    <script>
+    "use strict";
+
+    // The reason why we currently run the animation on `::marker` with Web Animations API
+    // instead of CSS Animations is because it requires `layout.css.marker.restricted`
+    // pref change.
+    document.querySelector(".div-marker").animate(
+      {
+        color: ["black", "lime"],
+      },
+      {
+        id: "div-marker",
+        duration: 10000,
+        iterations: Infinity,
+        pseudoElement: "::marker",
+      }
+    );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_short_duration.html b/devtools/client/inspector/animation/test/doc_short_duration.html
new file mode 100644
index 0000000000..ed9b2d94dc
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_short_duration.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="short"></div>
+    <script>
+    "use strict";
+
+    document.querySelector(".short").animate(
+      { opacity: [1, 0] },
+      {
+        duration: 1,
+        iterations: Infinity,
+      }
+    );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_simple_animation.html b/devtools/client/inspector/animation/test/doc_simple_animation.html
new file mode 100644
index 0000000000..7e145166fe
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_simple_animation.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    @property --ball-color {
+      syntax: "<color>";
+      inherits: true;
+      initial-value: #f06;
+    }
+
+    .ball {
+      width: 80px;
+      height: 80px;
+      /* Add a border here to avoid layout warnings in Linux debug builds: Bug 1329784 */
+      border: 1px solid transparent;
+      border-radius: 50%;
+      background: var(--ball-color);
+      position: absolute;
+    }
+
+    .still {
+      top: 0;
+      left: 10px;
+    }
+
+    .animated {
+      top: 100px;
+      left: 10px;
+
+      animation: simple-animation 2s infinite alternate;
+    }
+
+    .multi {
+      top: 200px;
+      left: 10px;
+
+      animation: simple-animation 2s infinite alternate,
+                 other-animation 5s infinite alternate;
+    }
+
+    .delayed {
+      top: 300px;
+      left: 10px;
+      background: rebeccapurple;
+
+      animation: simple-animation 3s 60s 10;
+    }
+
+    .multi-finite {
+      top: 400px;
+      left: 10px;
+      background: yellow;
+
+      animation: simple-animation 3s,
+                 other-animation 4s;
+    }
+
+    .short {
+      top: 500px;
+      left: 10px;
+      background: red;
+
+      animation: simple-animation 2s normal;
+    }
+
+    .long {
+      top: 600px;
+      left: 10px;
+      background: blue;
+
+      animation: simple-animation 120s;
+    }
+
+    .negative-delay {
+      top: 700px;
+      left: 10px;
+      background: gray;
+
+      animation: simple-animation 15s -10s;
+      animation-fill-mode: forwards;
+    }
+
+    .no-compositor {
+      top: 0;
+      right: 10px;
+      background: gold;
+
+      animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
+    }
+
+    .compositor-all {
+      animation: compositor-all 2s infinite;
+    }
+
+    .compositor-notall {
+      animation: compositor-notall 2s infinite;
+    }
+
+    .compositor-warning {
+      animation: compositor-all 2s infinite;
+    }
+
+    .warning-observer {
+      width: 10px;
+      height: 10px;
+      background-image: -moz-element(#warning);
+    }
+
+    .longhand {
+      animation: longhand 10s infinite;
+    }
+
+    @keyframes simple-animation {
+      100% {
+        transform: translateX(300px);
+      }
+    }
+
+    @keyframes other-animation {
+      100% {
+        background: blue;
+      }
+    }
+
+    @keyframes no-compositor {
+      100% {
+        margin-right: 600px;
+      }
+    }
+
+    @keyframes compositor-all {
+      to { opacity: 0.5 }
+    }
+
+    @keyframes compositor-notall {
+      from {
+        --ball-color: tomato;
+        opacity: 0;
+        width: 0px;
+        transform: translate(0px);
+      }
+      to {
+        --ball-color: gold;
+        opacity: 1;
+        width: 100px;
+        transform: translate(100px);
+      }
+    }
+
+    @keyframes longhand {
+      from {
+        background: red;
+        padding: 0 0 0 10px;
+      }
+      to {
+        background: lime;
+        padding: 0 0 0 20px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Comment node -->
+  <div class="ball still"></div>
+  <div class="ball animated"></div>
+  <div class="ball multi"></div>
+  <div class="ball delayed"></div>
+  <div class="ball multi-finite"></div>
+  <div class="ball short"></div>
+  <div class="ball long"></div>
+  <div class="ball negative-delay"></div>
+  <div class="ball no-compositor"></div>
+  <div class="ball end-delay"></div>
+  <div class="ball compositor-all"></div>
+  <div class="ball compositor-notall"></div>
+  <div class="ball compositor-warning" id="warning"></div>
+  <div class="ball longhand"></div>
+  <div class="warning-observer"></div>
+  <script>
+    /* globals KeyframeEffect, Animation */
+    "use strict";
+
+    const el = document.querySelector(".end-delay");
+    const effect = new KeyframeEffect(el, [
+      { opacity: 0, offset: 0 },
+      { opacity: 1, offset: 1 },
+    ], { duration: 1000000, endDelay: 500000, fill: "none" });
+    const animation = new Animation(effect, document.timeline);
+    animation.play();
+  </script>
+</body>
+</html>
diff --git a/devtools/client/inspector/animation/test/doc_special_colors.html b/devtools/client/inspector/animation/test/doc_special_colors.html
new file mode 100644
index 0000000000..2c71b2c963
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_special_colors.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      animation: anim 5s infinite;
+      border: 1px solid lime;
+      height: 100px;
+      width: 100px;
+    }
+
+    @keyframes anim {
+      from {
+		    caret-color: auto;
+		    scrollbar-color: lime red;
+      }
+	    to {
+		    caret-color: lime;
+		    scrollbar-color: auto;
+	    }
+    }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/animation/test/head.js b/devtools/client/inspector/animation/test/head.js
new file mode 100644
index 0000000000..959ad270a5
--- /dev/null
+++ b/devtools/client/inspector/animation/test/head.js
@@ -0,0 +1,1028 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+const TAB_NAME = "animationinspector";
+
+const ANIMATION_L10N = new LocalizationHelper(
+  "devtools/client/locales/animationinspector.properties"
+);
+
+// Auto clean-up when a test ends.
+// Clean-up all prefs that might have been changed during a test run
+// (safer here because if the test fails, then the pref is never reverted)
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.toolsidebar-width.inspector");
+});
+
+/**
+ * Open the toolbox, with the inspector tool visible and the animationinspector
+ * sidebar selected.
+ *
+ * @return {Promise} that resolves when the inspector is ready.
+ */
+const openAnimationInspector = async function () {
+  const { inspector, toolbox } = await openInspectorSidebarTab(TAB_NAME);
+  await inspector.once("inspector-updated");
+  const animationInspector = inspector.getPanel("animationinspector");
+  const panel = inspector.panelWin.document.getElementById(
+    "animation-container"
+  );
+
+  info("Wait for loading first content");
+  const count = getDisplayedGraphCount(animationInspector, panel);
+  await waitUntil(
+    () =>
+      panel.querySelectorAll(".animation-summary-graph-path").length >= count &&
+      panel.querySelectorAll(".animation-target .objectBox").length >= count
+  );
+
+  if (
+    animationInspector.state.selectedAnimation &&
+    animationInspector.state.detailVisibility
+  ) {
+    await waitUntil(() => panel.querySelector(".animated-property-list"));
+  }
+
+  return { animationInspector, toolbox, inspector, panel };
+};
+
+/**
+ * Close the toolbox.
+ *
+ * @return {Promise} that resolves when the toolbox has closed.
+ */
+const closeAnimationInspector = async function () {
+  return gDevTools.closeToolboxForTab(gBrowser.selectedTab);
+};
+
+/**
+ * Some animation features are not enabled by default in release/beta channels
+ * yet including parts of the Web Animations API.
+ */
+const enableAnimationFeatures = function () {
+  return SpecialPowers.pushPrefEnv({
+    set: [["dom.animations-api.timelines.enabled", true]],
+  });
+};
+
+/**
+ * Add a new test tab in the browser and load the given url.
+ *
+ * @param {String} url
+ *        The url to be loaded in the new tab
+ * @return a promise that resolves to the tab object when the url is loaded
+ */
+const _addTab = addTab;
+addTab = async function (url) {
+  await enableAnimationFeatures();
+  return _addTab(url);
+};
+
+/**
+ * Remove animated elements from document except given selectors.
+ *
+ * @param {Array} selectors
+ * @return {Promise}
+ */
+const removeAnimatedElementsExcept = function (selectors) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selectors],
+    selectorsChild => {
+      function isRemovableElement(animation, selectorsInner) {
+        for (const selector of selectorsInner) {
+          if (animation.effect.target.matches(selector)) {
+            return false;
+          }
+        }
+
+        return true;
+      }
+
+      for (const animation of content.document.getAnimations()) {
+        if (isRemovableElement(animation, selectorsChild)) {
+          animation.effect.target.remove();
+        }
+      }
+    }
+  );
+};
+
+/**
+ * Click on an animation in the timeline to select it.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} index
+ *        The index of the animation to click on.
+ */
+const clickOnAnimation = async function (animationInspector, panel, index) {
+  info("Click on animation " + index + " in the timeline");
+  const animationItemEl = await findAnimationItemByIndex(panel, index);
+  const summaryGraphEl = animationItemEl.querySelector(
+    ".animation-summary-graph"
+  );
+  clickOnSummaryGraph(animationInspector, panel, summaryGraphEl);
+};
+
+/**
+ * Click on an animation by given selector of node which is target element of animation.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {String} selector
+ *        Selector of node which is target element of animation.
+ */
+const clickOnAnimationByTargetSelector = async function (
+  animationInspector,
+  panel,
+  selector
+) {
+  info(`Click on animation whose selector of target element is '${selector}'`);
+  const animationItemEl = await findAnimationItemByTargetSelector(
+    panel,
+    selector
+  );
+  const summaryGraphEl = animationItemEl.querySelector(
+    ".animation-summary-graph"
+  );
+  clickOnSummaryGraph(animationInspector, panel, summaryGraphEl);
+};
+
+/**
+ * Click on close button for animation detail pane.
+ *
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ */
+const clickOnDetailCloseButton = function (panel) {
+  info("Click on close button for animation detail pane");
+  const buttonEl = panel.querySelector(".animation-detail-close-button");
+  const bounds = buttonEl.getBoundingClientRect();
+  const x = bounds.width / 2;
+  const y = bounds.height / 2;
+  EventUtils.synthesizeMouse(buttonEl, x, y, {}, buttonEl.ownerGlobal);
+};
+
+/**
+ * Click on pause/resume button.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ */
+const clickOnPauseResumeButton = function (animationInspector, panel) {
+  info("Click on pause/resume button");
+  const buttonEl = panel.querySelector(".pause-resume-button");
+  const bounds = buttonEl.getBoundingClientRect();
+  const x = bounds.width / 2;
+  const y = bounds.height / 2;
+  EventUtils.synthesizeMouse(buttonEl, x, y, {}, buttonEl.ownerGlobal);
+};
+
+/**
+ * Click on rewind button.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ */
+const clickOnRewindButton = function (animationInspector, panel) {
+  info("Click on rewind button");
+  const buttonEl = panel.querySelector(".rewind-button");
+  const bounds = buttonEl.getBoundingClientRect();
+  const x = bounds.width / 2;
+  const y = bounds.height / 2;
+  EventUtils.synthesizeMouse(buttonEl, x, y, {}, buttonEl.ownerGlobal);
+};
+
+/**
+ * Click on the scrubber controller pane to update the animation current time.
+ *
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} mouseDownPosition
+ *        rate on scrubber controller pane.
+ *        This method calculates
+ *        `mouseDownPosition * offsetWidth + offsetLeft of scrubber controller pane`
+ *        as the clientX of MouseEvent.
+ */
+const clickOnCurrentTimeScrubberController = function (
+  animationInspector,
+  panel,
+  mouseDownPosition
+) {
+  const controllerEl = panel.querySelector(".current-time-scrubber-area");
+  const bounds = controllerEl.getBoundingClientRect();
+  const mousedonwX = bounds.width * mouseDownPosition;
+
+  info(`Click ${mousedonwX} on scrubber controller`);
+  EventUtils.synthesizeMouse(
+    controllerEl,
+    mousedonwX,
+    0,
+    {},
+    controllerEl.ownerGlobal
+  );
+};
+
+/**
+ * Click on the inspect icon for the given AnimationTargetComponent.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} index
+ *        The index of the AnimationTargetComponent to click on.
+ */
+const clickOnInspectIcon = async function (animationInspector, panel, index) {
+  info(`Click on an inspect icon in animation target component[${index}]`);
+  const animationItemEl = await findAnimationItemByIndex(panel, index);
+  const iconEl = animationItemEl.querySelector(
+    ".animation-target .objectBox .highlight-node"
+  );
+  iconEl.scrollIntoView(false);
+  EventUtils.synthesizeMouseAtCenter(iconEl, {}, iconEl.ownerGlobal);
+};
+
+/**
+ * Change playback rate selector to select given rate.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} rate
+ */
+const changePlaybackRateSelector = async function (
+  animationInspector,
+  panel,
+  rate
+) {
+  info(`Click on playback rate selector to select ${rate}`);
+  const selectEl = panel.querySelector(".playback-rate-selector");
+  const optionIndex = [...selectEl.options].findIndex(o => +o.value == rate);
+
+  if (optionIndex == -1) {
+    ok(
+      false,
+      `Could not find an option for rate ${rate} in the rate selector. ` +
+        `Values are: ${[...selectEl.options].map(o => o.value)}`
+    );
+    return;
+  }
+
+  selectEl.focus();
+
+  const win = selectEl.ownerGlobal;
+  while (selectEl.selectedIndex != optionIndex) {
+    const key = selectEl.selectedIndex > optionIndex ? "LEFT" : "RIGHT";
+    EventUtils.sendKey(key, win);
+  }
+};
+
+/**
+ * Click on given summary graph element.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Element} summaryGraphEl
+ */
+const clickOnSummaryGraph = function (
+  animationInspector,
+  panel,
+  summaryGraphEl
+) {
+  // Disable pointer-events of the scrubber in order to avoid to click accidently.
+  const scrubberEl = panel.querySelector(".current-time-scrubber");
+  scrubberEl.style.pointerEvents = "none";
+  // Scroll to show the timeBlock since the element may be out of displayed area.
+  summaryGraphEl.scrollIntoView(false);
+  EventUtils.synthesizeMouseAtCenter(
+    summaryGraphEl,
+    {},
+    summaryGraphEl.ownerGlobal
+  );
+  // Restore the scrubber style.
+  scrubberEl.style.pointerEvents = "unset";
+};
+
+/**
+ * Click on the target node for the given AnimationTargetComponent index.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} index
+ *        The index of the AnimationTargetComponent to click on.
+ */
+const clickOnTargetNode = async function (animationInspector, panel, index) {
+  const { inspector } = animationInspector;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  info(`Click on a target node in animation target component[${index}]`);
+
+  const animationItemEl = await findAnimationItemByIndex(panel, index);
+  const targetEl = animationItemEl.querySelector(
+    ".animation-target .objectBox"
+  );
+  const onHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  EventUtils.synthesizeMouseAtCenter(targetEl, {}, targetEl.ownerGlobal);
+  await onHighlight;
+};
+
+/**
+ * Drag on the scrubber to update the animation current time.
+ *
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} mouseMovePixel
+ *        Dispatch mousemove event with mouseMovePosition after mousedown.
+ * @param {Number} mouseYPixel
+ *        Y of mouse in pixel.
+ */
+const dragOnCurrentTimeScrubber = async function (
+  animationInspector,
+  panel,
+  mouseMovePixel,
+  mouseYPixel
+) {
+  const controllerEl = panel.querySelector(".current-time-scrubber");
+  info(`Drag scrubber to X ${mouseMovePixel}`);
+  EventUtils.synthesizeMouse(
+    controllerEl,
+    0,
+    mouseYPixel,
+    { type: "mousedown" },
+    controllerEl.ownerGlobal
+  );
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+
+  const animation = animationInspector.state.animations[0];
+  let currentTime = animation.state.currentTime;
+  EventUtils.synthesizeMouse(
+    controllerEl,
+    mouseMovePixel,
+    mouseYPixel,
+    { type: "mousemove" },
+    controllerEl.ownerGlobal
+  );
+  await waitUntil(() => animation.state.currentTime !== currentTime);
+
+  currentTime = animation.state.currentTime;
+  EventUtils.synthesizeMouse(
+    controllerEl,
+    mouseMovePixel,
+    mouseYPixel,
+    { type: "mouseup" },
+    controllerEl.ownerGlobal
+  );
+  await waitUntil(() => animation.state.currentTime !== currentTime);
+};
+
+/**
+ * Drag on the scrubber controller pane to update the animation current time.
+ *
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} mouseDownPosition
+ *        rate on scrubber controller pane.
+ *        This method calculates
+ *        `mouseDownPosition * offsetWidth + offsetLeft of scrubber controller pane`
+ *        as the clientX of MouseEvent.
+ * @param {Number} mouseMovePosition
+ *        Dispatch mousemove event with mouseMovePosition after mousedown.
+ *        Calculation for clinetX is same to above.
+ */
+const dragOnCurrentTimeScrubberController = async function (
+  animationInspector,
+  panel,
+  mouseDownPosition,
+  mouseMovePosition
+) {
+  const controllerEl = panel.querySelector(".current-time-scrubber-area");
+  const bounds = controllerEl.getBoundingClientRect();
+  const mousedonwX = bounds.width * mouseDownPosition;
+  const mousemoveX = bounds.width * mouseMovePosition;
+
+  info(`Drag on scrubber controller from ${mousedonwX} to ${mousemoveX}`);
+  EventUtils.synthesizeMouse(
+    controllerEl,
+    mousedonwX,
+    0,
+    { type: "mousedown" },
+    controllerEl.ownerGlobal
+  );
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+
+  const animation = animationInspector.state.animations[0];
+  let currentTime = animation.state.currentTime;
+  EventUtils.synthesizeMouse(
+    controllerEl,
+    mousemoveX,
+    0,
+    { type: "mousemove" },
+    controllerEl.ownerGlobal
+  );
+  await waitUntil(() => animation.state.currentTime !== currentTime);
+
+  currentTime = animation.state.currentTime;
+  EventUtils.synthesizeMouse(
+    controllerEl,
+    mousemoveX,
+    0,
+    { type: "mouseup" },
+    controllerEl.ownerGlobal
+  );
+  await waitUntil(() => animation.state.currentTime !== currentTime);
+};
+
+/**
+ * Get current animation duration and rate of
+ * clickOrDragOnCurrentTimeScrubberController in given pixels.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} pixels
+ * @return {Object}
+ *         {
+ *           duration,
+ *           rate,
+ *         }
+ */
+const getDurationAndRate = function (animationInspector, panel, pixels) {
+  const controllerEl = panel.querySelector(".current-time-scrubber-area");
+  const bounds = controllerEl.getBoundingClientRect();
+  const duration =
+    (animationInspector.state.timeScale.getDuration() / bounds.width) * pixels;
+  const rate = (1 / bounds.width) * pixels;
+  return { duration, rate };
+};
+
+/**
+ * Mouse over the target node for the given AnimationTargetComponent index.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} index
+ *        The index of the AnimationTargetComponent to click on.
+ */
+const mouseOverOnTargetNode = function (animationInspector, panel, index) {
+  info(`Mouse over on a target node in animation target component[${index}]`);
+  const el = panel.querySelectorAll(".animation-target .objectBox")[index];
+  el.scrollIntoView(false);
+  EventUtils.synthesizeMouse(el, 10, 5, { type: "mouseover" }, el.ownerGlobal);
+};
+
+/**
+ * Mouse out of the target node for the given AnimationTargetComponent index.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} index
+ *        The index of the AnimationTargetComponent to click on.
+ */
+const mouseOutOnTargetNode = function (animationInspector, panel, index) {
+  info(`Mouse out on a target node in animation target component[${index}]`);
+  const el = panel.querySelectorAll(".animation-target .objectBox")[index];
+  el.scrollIntoView(false);
+  EventUtils.synthesizeMouse(el, -1, -1, { type: "mouseout" }, el.ownerGlobal);
+};
+
+/**
+ * Select animation inspector in sidebar and toolbar.
+ *
+ * @param {InspectorPanel} inspector
+ */
+const selectAnimationInspector = async function (inspector) {
+  await inspector.toolbox.selectTool("inspector");
+  const onDispatched = waitForDispatch(inspector.store, "UPDATE_ANIMATIONS");
+  inspector.sidebar.select("animationinspector");
+  await onDispatched;
+};
+
+/**
+ * Send keyboard event of space to given panel.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {DOMElement} target element.
+ */
+const sendSpaceKeyEvent = function (animationInspector, element) {
+  element.focus();
+  EventUtils.sendKey("SPACE", element.ownerGlobal);
+};
+
+/**
+ * Set a node class attribute to the given selector.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {String} selector
+ * @param {String} cls
+ *        e.g. ".ball.still"
+ */
+const setClassAttribute = async function (animationInspector, selector, cls) {
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [cls, selector],
+    (attributeValue, selectorChild) => {
+      const node = content.document.querySelector(selectorChild);
+      if (!node) {
+        return;
+      }
+
+      node.setAttribute("class", attributeValue);
+    }
+  );
+};
+
+/**
+ * Set a new style properties to the node for the given selector.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {String} selector
+ * @param {Object} properties
+ *        e.g. {
+ *               animationDuration: "1000ms",
+ *               animationTimingFunction: "linear",
+ *             }
+ */
+const setEffectTimingAndPlayback = async function (
+  animationInspector,
+  selector,
+  effectTiming,
+  playbackRate
+) {
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, playbackRate, effectTiming],
+    (selectorChild, playbackRateChild, effectTimingChild) => {
+      let selectedAnimation = null;
+
+      for (const animation of content.document.getAnimations()) {
+        if (animation.effect.target.matches(selectorChild)) {
+          selectedAnimation = animation;
+          break;
+        }
+      }
+
+      if (!selectedAnimation) {
+        return;
+      }
+
+      selectedAnimation.playbackRate = playbackRateChild;
+      selectedAnimation.effect.updateTiming(effectTimingChild);
+    }
+  );
+};
+
+/**
+ * Set the sidebar width by given parameter.
+ *
+ * @param {String} width
+ *        Change sidebar width by given parameter.
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return {Promise} Resolves when the sidebar size changed.
+ */
+const setSidebarWidth = async function (width, inspector) {
+  const onUpdated = inspector.toolbox.once("inspector-sidebar-resized");
+  inspector.splitBox.setState({ width });
+  await onUpdated;
+};
+
+/**
+ * Set a new style property declaration to the node for the given selector.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {String} selector
+ * @param {String} propertyName
+ *        e.g. "animationDuration"
+ * @param {String} propertyValue
+ *        e.g. "5.5s"
+ */
+const setStyle = async function (
+  animationInspector,
+  selector,
+  propertyName,
+  propertyValue
+) {
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, propertyName, propertyValue],
+    (selectorChild, propertyNameChild, propertyValueChild) => {
+      const node = content.document.querySelector(selectorChild);
+      if (!node) {
+        return;
+      }
+
+      node.style[propertyNameChild] = propertyValueChild;
+    }
+  );
+};
+
+/**
+ * Set a new style properties to the node for the given selector.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {String} selector
+ * @param {Object} properties
+ *        e.g. {
+ *               animationDuration: "1000ms",
+ *               animationTimingFunction: "linear",
+ *             }
+ */
+const setStyles = async function (animationInspector, selector, properties) {
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [properties, selector],
+    (propertiesChild, selectorChild) => {
+      const node = content.document.querySelector(selectorChild);
+      if (!node) {
+        return;
+      }
+
+      for (const propertyName in propertiesChild) {
+        const propertyValue = propertiesChild[propertyName];
+        node.style[propertyName] = propertyValue;
+      }
+    }
+  );
+};
+
+/**
+ * Wait until current time of animations will be changed to given current time.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {Number} currentTime
+ */
+const waitUntilCurrentTimeChangedAt = async function (
+  animationInspector,
+  currentTime
+) {
+  info(`Wait until current time will be change to ${currentTime}`);
+  await waitUntil(() =>
+    animationInspector.state.animations.every(a => {
+      return a.state.currentTime === currentTime;
+    })
+  );
+};
+
+/**
+ * Wait until animations' play state will be changed to given state.
+ *
+ * @param {Array} animationInspector
+ * @param {String} state
+ */
+const waitUntilAnimationsPlayState = async function (
+  animationInspector,
+  state
+) {
+  info(`Wait until play state will be change to ${state}`);
+  await waitUntil(() =>
+    animationInspector.state.animations.every(a => a.state.playState === state)
+  );
+};
+
+/**
+ * Return count of graph that animation inspector is displaying.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {DOMElement} panel
+ * @return {Number} count
+ */
+const getDisplayedGraphCount = (animationInspector, panel) => {
+  const animationLength = animationInspector.state.animations.length;
+  if (animationLength === 0) {
+    return 0;
+  }
+
+  const inspectionPanelEl = panel.querySelector(".progress-inspection-panel");
+  const itemEl = panel.querySelector(".animation-item");
+  const listEl = panel.querySelector(".animation-list");
+  const itemHeight = itemEl.offsetHeight;
+  // This calculation should be same as AnimationListContainer.updateDisplayableRange.
+  const count = Math.floor(listEl.offsetHeight / itemHeight) + 1;
+  const index = Math.floor(inspectionPanelEl.scrollTop / itemHeight);
+
+  return animationLength > index + count ? count : animationLength - index;
+};
+
+/**
+ * Check whether the animations are pausing.
+ *
+ * @param {AnimationInspector} animationInspector
+ */
+function assertAnimationsPausing(animationInspector) {
+  assertAnimationsPausingOrRunning(animationInspector, true);
+}
+
+/**
+ * Check whether the animations are pausing/running.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {boolean} shouldPause
+ */
+function assertAnimationsPausingOrRunning(animationInspector, shouldPause) {
+  const hasRunningAnimation = animationInspector.state.animations.some(
+    ({ state }) => state.playState === "running"
+  );
+
+  if (shouldPause) {
+    is(hasRunningAnimation, false, "All animations should be paused");
+  } else {
+    is(hasRunningAnimation, true, "Animations should be running at least one");
+  }
+}
+
+/**
+ * Check whether the animations are running.
+ *
+ * @param {AnimationInspector} animationInspector
+ */
+function assertAnimationsRunning(animationInspector) {
+  assertAnimationsPausingOrRunning(animationInspector, false);
+}
+
+/**
+ * Check the <stop> element in the given linearGradientEl for the correct offset
+ * and color attributes.
+ *
+ * @param {Element} linearGradientEl
+          <linearGradient> element which has <stop> element.
+ * @param {Number} offset
+ *        float which represents the "offset" attribute of <stop>.
+ * @param {String} expectedColor
+ *        e.g. rgb(0, 0, 255)
+ */
+function assertLinearGradient(linearGradientEl, offset, expectedColor) {
+  const stopEl = findStopElement(linearGradientEl, offset);
+  ok(stopEl, `stop element at offset ${offset} should exist`);
+  is(
+    stopEl.getAttribute("stop-color"),
+    expectedColor,
+    `stop-color of stop element at offset ${offset} should be ${expectedColor}`
+  );
+}
+
+/**
+ * SummaryGraph is constructed by <path> element.
+ * This function checks the vertex of path segments.
+ *
+ * @param {Element} pathEl
+ *        <path> element.
+ * @param {boolean} hasClosePath
+ *        Set true if the path shoud be closing.
+ * @param {Object} expectedValues
+ *        JSON object format. We can test the vertex and color.
+ *        e.g.
+ *        [
+ *          { x: 0, y: 0 },
+ *          { x: 0, y: 1 },
+ *        ]
+ */
+function assertPathSegments(pathEl, hasClosePath, expectedValues) {
+  ok(
+    isExpectedPath(pathEl, hasClosePath, expectedValues),
+    "All of path segments are correct"
+  );
+}
+
+function isExpectedPath(pathEl, hasClosePath, expectedValues) {
+  const pathSegList = pathEl.pathSegList;
+  if (!pathSegList) {
+    return false;
+  }
+
+  if (
+    !expectedValues.every(value =>
+      isPassingThrough(pathSegList, value.x, value.y)
+    )
+  ) {
+    return false;
+  }
+
+  if (hasClosePath) {
+    const closePathSeg = pathSegList.getItem(pathSegList.numberOfItems - 1);
+    if (closePathSeg.pathSegType !== closePathSeg.PATHSEG_CLOSEPATH) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Check whether the given vertex is passing throug on the path.
+ *
+ * @param {pathSegList} pathSegList - pathSegList of <path> element.
+ * @param {float} x - x of vertex.
+ * @param {float} y - y of vertex.
+ * @return {boolean} true: passing through, false: no on the path.
+ */
+function isPassingThrough(pathSegList, x, y) {
+  let previousPathSeg = pathSegList.getItem(0);
+  for (let i = 0; i < pathSegList.numberOfItems; i++) {
+    const pathSeg = pathSegList.getItem(i);
+    if (pathSeg.x === undefined) {
+      continue;
+    }
+    const currentX = parseFloat(pathSeg.x.toFixed(3));
+    const currentY = parseFloat(pathSeg.y.toFixed(3));
+    if (currentX === x && currentY === y) {
+      return true;
+    }
+    const previousX = parseFloat(previousPathSeg.x.toFixed(3));
+    const previousY = parseFloat(previousPathSeg.y.toFixed(3));
+    if (
+      previousX <= x &&
+      x <= currentX &&
+      Math.min(previousY, currentY) <= y &&
+      y <= Math.max(previousY, currentY)
+    ) {
+      return true;
+    }
+    previousPathSeg = pathSeg;
+  }
+  return false;
+}
+
+/**
+ * Return animation item element by the index.
+ *
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {Number} index
+ * @return {DOMElement}
+ *        Animation item element.
+ */
+async function findAnimationItemByIndex(panel, index) {
+  const itemEls = [...panel.querySelectorAll(".animation-item")];
+  const itemEl = itemEls[index];
+  itemEl.scrollIntoView(false);
+
+  await waitUntil(
+    () =>
+      itemEl.querySelector(".animation-target .attrName") &&
+      itemEl.querySelector(".animation-computed-timing-path")
+  );
+
+  return itemEl;
+}
+
+/**
+ * Return animation item element by target node selector.
+ * This function compares betweem animation-target textContent and given selector.
+ * Then returns matched first item.
+ *
+ * @param {DOMElement} panel
+ *        #animation-container element.
+ * @param {String} selector
+ *        Selector of tested element.
+ * @return {DOMElement}
+ *        Animation item element.
+ */
+async function findAnimationItemByTargetSelector(panel, selector) {
+  for (const itemEl of panel.querySelectorAll(".animation-item")) {
+    itemEl.scrollIntoView(false);
+
+    await waitUntil(
+      () =>
+        itemEl.querySelector(".animation-target .attrName") &&
+        itemEl.querySelector(".animation-computed-timing-path")
+    );
+
+    const attrNameEl = itemEl.querySelector(".animation-target .attrName");
+    const regexp = new RegExp(`\\${selector}(\\.|$)`, "gi");
+    if (regexp.exec(attrNameEl.textContent)) {
+      return itemEl;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Find the <stop> element which has the given offset in the given linearGradientEl.
+ *
+ * @param {Element} linearGradientEl
+ *        <linearGradient> element which has <stop> element.
+ * @param {Number} offset
+ *        Float which represents the "offset" attribute of <stop>.
+ * @return {Element}
+ *         If can't find suitable element, returns null.
+ */
+function findStopElement(linearGradientEl, offset) {
+  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}`);
+    const onDetailRendered = animationInspector.once(
+      "animation-keyframes-rendered"
+    );
+    await clickOnAnimationByTargetSelector(
+      animationInspector,
+      panel,
+      `.${targetClass}`
+    );
+    await onDetailRendered;
+
+    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);
+      }
+    }
+  }
+}
+
+/**
+ * Check the adjusted current time and created time from specified two animations.
+ *
+ * @param {AnimationPlayerFront.state} animation1
+ * @param {AnimationPlayerFront.state} animation2
+ */
+function checkAdjustingTheTime(animation1, animation2) {
+  const adjustedCurrentTimeDiff =
+    animation2.currentTime / animation2.playbackRate -
+    animation1.currentTime / animation1.playbackRate;
+  const createdTimeDiff = animation1.createdTime - animation2.createdTime;
+  Assert.less(
+    Math.abs(adjustedCurrentTimeDiff - createdTimeDiff),
+    0.1,
+    "Adjusted time is correct"
+  );
+}
diff --git a/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js b/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js
new file mode 100644
index 0000000000..97c7040553
--- /dev/null
+++ b/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js
@@ -0,0 +1,237 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from head.js */
+
+// Test for following keyframe marker.
+// * element existence
+// * title
+// * and marginInlineStart style
+
+const KEYFRAMES_TEST_DATA = [
+  {
+    targetClass: "multi-types",
+    properties: [
+      {
+        name: "background-color",
+        expectedValues: [
+          {
+            title: "rgb(255, 0, 0)",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "rgb(0, 255, 0)",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+      {
+        name: "background-repeat",
+        expectedValues: [
+          {
+            title: "space round",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "round space",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+      {
+        name: "font-size",
+        expectedValues: [
+          {
+            title: "10px",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "20px",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+      {
+        name: "margin-left",
+        expectedValues: [
+          {
+            title: "0px",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "100px",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+      {
+        name: "opacity",
+        expectedValues: [
+          {
+            title: "0",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "1",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+      {
+        name: "text-align",
+        expectedValues: [
+          {
+            title: "right",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "center",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+      {
+        name: "transform",
+        expectedValues: [
+          {
+            title: "translate(0px)",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "translate(100px)",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "narrow-offsets",
+    properties: [
+      {
+        name: "opacity",
+        expectedValues: [
+          {
+            title: "0",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "1",
+            marginInlineStart: "10%",
+          },
+          {
+            title: "0",
+            marginInlineStart: "13%",
+          },
+          {
+            title: "1",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "same-color",
+    properties: [
+      {
+        name: "background-color",
+        expectedValues: [
+          {
+            title: "rgb(0, 255, 0)",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "rgb(0, 255, 0)",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "currentcolor",
+    properties: [
+      {
+        name: "background-color",
+        expectedValues: [
+          {
+            title: "currentcolor",
+            marginInlineStart: "0%",
+          },
+          {
+            title: "rgb(0, 255, 0)",
+            marginInlineStart: "100%",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+/**
+ * Do test for keyframes-graph_keyframe-marker-ltf/rtl.
+ *
+ * @param {Array} testData
+ */
+// eslint-disable-next-line no-unused-vars
+async function testKeyframesGraphKeyframesMarker() {
+  await addTab(URL_ROOT + "doc_multi_keyframes.html");
+  await removeAnimatedElementsExcept(
+    KEYFRAMES_TEST_DATA.map(t => `.${t.targetClass}`)
+  );
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  for (const { properties, targetClass } of KEYFRAMES_TEST_DATA) {
+    info(`Checking keyframe marker for ${targetClass}`);
+    const onDetailRendered = animationInspector.once(
+      "animation-keyframes-rendered"
+    );
+    await clickOnAnimationByTargetSelector(
+      animationInspector,
+      panel,
+      `.${targetClass}`
+    );
+    await onDetailRendered;
+
+    for (const { name, expectedValues } of properties) {
+      const testTarget = `${name} in ${targetClass}`;
+      info(`Checking keyframe marker for ${testTarget}`);
+      info(`Checking keyframe marker existence for ${testTarget}`);
+      const markerEls = panel.querySelectorAll(
+        `.${name} .keyframe-marker-item`
+      );
+      is(
+        markerEls.length,
+        expectedValues.length,
+        `Count of keyframe marker elements of ${testTarget} ` +
+          `should be ${expectedValues.length}`
+      );
+
+      for (let i = 0; i < expectedValues.length; i++) {
+        const hintTarget = `.keyframe-marker-item[${i}] of ${testTarget}`;
+
+        info(`Checking ${hintTarget}`);
+        const markerEl = markerEls[i];
+        const expectedValue = expectedValues[i];
+
+        info(`Checking title in ${hintTarget}`);
+        is(
+          markerEl.getAttribute("title"),
+          expectedValue.title,
+          `title in ${hintTarget} should be ${expectedValue.title}`
+        );
+
+        info(`Checking marginInlineStart style in ${hintTarget}`);
+        is(
+          markerEl.style.marginInlineStart,
+          expectedValue.marginInlineStart,
+          `marginInlineStart in ${hintTarget} should be ` +
+            `${expectedValue.marginInlineStart}`
+        );
+      }
+    }
+  }
+}
diff --git a/devtools/client/inspector/animation/test/summary-graph_computed-timing-path_head.js b/devtools/client/inspector/animation/test/summary-graph_computed-timing-path_head.js
new file mode 100644
index 0000000000..8516e96fa3
--- /dev/null
+++ b/devtools/client/inspector/animation/test/summary-graph_computed-timing-path_head.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from head.js */
+
+/**
+ * Test for computed timing path on summary graph using given test data.
+ * @param {Array} testData
+ */
+// eslint-disable-next-line no-unused-vars
+async function testComputedTimingPath(testData) {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(testData.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const {
+    expectedDelayPath,
+    expectedEndDelayPath,
+    expectedForwardsPath,
+    expectedIterationPathList,
+    isInfinity,
+    targetClass,
+  } of testData) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+
+    info(`Checking computed timing path existance for ${targetClass}`);
+    const computedTimingPathEl = animationItemEl.querySelector(
+      ".animation-computed-timing-path"
+    );
+    ok(
+      computedTimingPathEl,
+      "The computed timing path element should be in each animation item element"
+    );
+
+    info(`Checking delay path for ${targetClass}`);
+    const delayPathEl = computedTimingPathEl.querySelector(
+      ".animation-delay-path"
+    );
+
+    if (expectedDelayPath) {
+      ok(delayPathEl, "delay path should be existance");
+      assertPathSegments(delayPathEl, true, expectedDelayPath);
+    } else {
+      ok(!delayPathEl, "delay path should not be existance");
+    }
+
+    info(`Checking iteration path list for ${targetClass}`);
+    const iterationPathEls = computedTimingPathEl.querySelectorAll(
+      ".animation-iteration-path"
+    );
+    is(
+      iterationPathEls.length,
+      expectedIterationPathList.length,
+      `Number of iteration path should be ${expectedIterationPathList.length}`
+    );
+
+    for (const [j, iterationPathEl] of iterationPathEls.entries()) {
+      assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]);
+
+      info(`Checking infinity ${targetClass}`);
+      if (isInfinity && j >= 1) {
+        ok(
+          iterationPathEl.classList.contains("infinity"),
+          "iteration path should have 'infinity' class"
+        );
+      } else {
+        ok(
+          !iterationPathEl.classList.contains("infinity"),
+          "iteration path should not have 'infinity' class"
+        );
+      }
+    }
+
+    info(`Checking endDelay path for ${targetClass}`);
+    const endDelayPathEl = computedTimingPathEl.querySelector(
+      ".animation-enddelay-path"
+    );
+
+    if (expectedEndDelayPath) {
+      ok(endDelayPathEl, "endDelay path should be existance");
+      assertPathSegments(endDelayPathEl, true, expectedEndDelayPath);
+    } else {
+      ok(!endDelayPathEl, "endDelay path should not be existance");
+    }
+
+    info(`Checking forwards fill path for ${targetClass}`);
+    const forwardsPathEl = computedTimingPathEl.querySelector(
+      ".animation-fill-forwards-path"
+    );
+
+    if (expectedForwardsPath) {
+      ok(forwardsPathEl, "forwards path should be existance");
+      assertPathSegments(forwardsPathEl, true, expectedForwardsPath);
+    } else {
+      ok(!forwardsPathEl, "forwards path should not be existance");
+    }
+  }
+}
diff --git a/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js b/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
new file mode 100644
index 0000000000..fd601821b6
--- /dev/null
+++ b/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from head.js */
+
+// Test for following DelaySign component works.
+// * element existance
+// * marginInlineStart position
+// * width
+// * additinal class
+
+const TEST_DATA = [
+  {
+    targetClass: "delay-positive",
+    expectedResult: {
+      marginInlineStart: "25%",
+      width: "25%",
+    },
+  },
+  {
+    targetClass: "delay-negative",
+    expectedResult: {
+      additionalClass: "negative",
+      marginInlineStart: "0%",
+      width: "25%",
+    },
+  },
+  {
+    targetClass: "fill-backwards-with-delay-iterationstart",
+    expectedResult: {
+      additionalClass: "fill",
+      marginInlineStart: "25%",
+      width: "25%",
+    },
+  },
+  {
+    targetClass: "fill-both",
+  },
+  {
+    targetClass: "fill-both-width-delay-iterationstart",
+    expectedResult: {
+      additionalClass: "fill",
+      marginInlineStart: "25%",
+      width: "25%",
+    },
+  },
+  {
+    targetClass: "keyframes-easing-step",
+  },
+];
+
+// eslint-disable-next-line no-unused-vars
+async function testSummaryGraphDelaySign() {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const { targetClass, expectedResult } of TEST_DATA) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+
+    info(`Checking delay sign existance for ${targetClass}`);
+    const delaySignEl = animationItemEl.querySelector(".animation-delay-sign");
+
+    if (expectedResult) {
+      ok(
+        delaySignEl,
+        "The delay sign element should be in animation item element"
+      );
+
+      function assertExpected(key) {
+        const actual = parseFloat(delaySignEl.style[key]);
+        const expected = parseFloat(expectedResult[key]);
+        ok(
+          Math.abs(actual - expected) < 0.01,
+          `${key} should be ${expected} (got ${actual})`
+        );
+      }
+
+      assertExpected(`marginInlineStart`);
+      assertExpected(`width`);
+
+      if (expectedResult.additionalClass) {
+        ok(
+          delaySignEl.classList.contains(expectedResult.additionalClass),
+          `delay sign element should have ${expectedResult.additionalClass} class`
+        );
+      } else {
+        ok(
+          !delaySignEl.classList.contains(expectedResult.additionalClass),
+          "delay sign element should not have " +
+            `${expectedResult.additionalClass} class`
+        );
+      }
+    } else {
+      ok(
+        !delaySignEl,
+        "The delay sign element should not be in animation item element"
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
new file mode 100644
index 0000000000..f87a554420
--- /dev/null
+++ b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from head.js */
+
+// Test for following EndDelaySign component works.
+// * element existance
+// * marginInlineStart position
+// * width
+// * additinal class
+
+const TEST_DATA = [
+  {
+    targetClass: "enddelay-positive",
+    expectedResult: {
+      marginInlineStart: "75%",
+      width: "25%",
+    },
+  },
+  {
+    targetClass: "enddelay-negative",
+    expectedResult: {
+      additionalClass: "negative",
+      marginInlineStart: "50%",
+      width: "25%",
+    },
+  },
+  {
+    targetClass: "enddelay-with-fill-forwards",
+    expectedResult: {
+      additionalClass: "fill",
+      marginInlineStart: "75%",
+      width: "25%",
+    },
+  },
+  {
+    targetClass: "enddelay-with-iterations-infinity",
+  },
+  {
+    targetClass: "delay-negative",
+  },
+];
+
+// eslint-disable-next-line no-unused-vars
+async function testSummaryGraphEndDelaySign() {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
+  const { panel } = await openAnimationInspector();
+
+  for (const { targetClass, expectedResult } of TEST_DATA) {
+    const animationItemEl = await findAnimationItemByTargetSelector(
+      panel,
+      `.${targetClass}`
+    );
+
+    info(`Checking endDelay sign existance for ${targetClass}`);
+    const endDelaySignEl = animationItemEl.querySelector(
+      ".animation-end-delay-sign"
+    );
+
+    if (expectedResult) {
+      ok(
+        endDelaySignEl,
+        "The endDelay sign element should be in animation item element"
+      );
+
+      function assertExpected(key) {
+        const actual = parseFloat(endDelaySignEl.style[key]);
+        const expected = parseFloat(expectedResult[key]);
+        ok(
+          Math.abs(actual - expected) < 0.01,
+          `${key} should be ${expected} (got ${actual})`
+        );
+      }
+
+      assertExpected(`marginInlineStart`);
+      assertExpected(`width`);
+
+      if (expectedResult.additionalClass) {
+        ok(
+          endDelaySignEl.classList.contains(expectedResult.additionalClass),
+          `endDelay sign element should have ${expectedResult.additionalClass} class`
+        );
+      } else {
+        ok(
+          !endDelaySignEl.classList.contains(expectedResult.additionalClass),
+          "endDelay sign element should not have " +
+            `${expectedResult.additionalClass} class`
+        );
+      }
+    } else {
+      ok(
+        !endDelaySignEl,
+        "The endDelay sign element should not be in animation item element"
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/animation/utils/graph-helper.js b/devtools/client/inspector/animation/utils/graph-helper.js
new file mode 100644
index 0000000000..cca2713254
--- /dev/null
+++ b/devtools/client/inspector/animation/utils/graph-helper.js
@@ -0,0 +1,332 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// BOUND_EXCLUDING_TIME should be less than 1ms and is used to exclude start
+// and end bounds when dividing duration in createPathSegments.
+const BOUND_EXCLUDING_TIME = 0.001;
+// We define default graph height since if the height of viewport in SVG is
+// too small (e.g. 1), vector-effect may not be able to calculate correctly.
+const DEFAULT_GRAPH_HEIGHT = 100;
+// Default animation duration for keyframes graph.
+const DEFAULT_KEYFRAMES_GRAPH_DURATION = 1000;
+// DEFAULT_MIN_PROGRESS_THRESHOLD shoud be between more than 0 to 1.
+const DEFAULT_MIN_PROGRESS_THRESHOLD = 0.1;
+// In the createPathSegments function, an animation duration is divided by
+// DEFAULT_DURATION_RESOLUTION in order to draw the way the animation progresses.
+// But depending on the timing-function, we may be not able to make the graph
+// smoothly progress if this resolution is not high enough.
+// So, if the difference of animation progress between 2 divisions is more than
+// DEFAULT_MIN_PROGRESS_THRESHOLD * DEFAULT_GRAPH_HEIGHT, then createPathSegments
+// re-divides by DEFAULT_DURATION_RESOLUTION.
+// DEFAULT_DURATION_RESOLUTION shoud be integer and more than 2.
+const DEFAULT_DURATION_RESOLUTION = 4;
+// Stroke width for easing hint.
+const DEFAULT_EASING_HINT_STROKE_WIDTH = 5;
+
+/**
+ * The helper class for creating summary graph.
+ */
+class SummaryGraphHelper {
+  /**
+   * Constructor.
+   *
+   * @param {Object} state
+   *        State of animation.
+   * @param {Array} keyframes
+   *        Array of keyframe.
+   * @param {Number} totalDuration
+   *        Total displayable duration.
+   * @param {Number} minSegmentDuration
+   *        Minimum segment duration.
+   * @param {Function} getValueFunc
+   *        Which returns graph value of given time.
+   *        The function should return a number value between 0 - 1.
+   *        e.g. time => { return 1.0 };
+   * @param {Function} toPathStringFunc
+   *        Which returns a path string for 'd' attribute for <path> from given segments.
+   */
+  constructor(
+    state,
+    keyframes,
+    totalDuration,
+    minSegmentDuration,
+    getValueFunc,
+    toPathStringFunc
+  ) {
+    this.totalDuration = totalDuration;
+    this.minSegmentDuration = minSegmentDuration;
+    this.minProgressThreshold =
+      getPreferredProgressThreshold(state, keyframes) * DEFAULT_GRAPH_HEIGHT;
+    this.durationResolution = getPreferredDurationResolution(keyframes);
+    this.getValue = getValueFunc;
+    this.toPathString = toPathStringFunc;
+
+    this.getSegment = this.getSegment.bind(this);
+  }
+
+  /**
+   * Create the path segments from given parameters.
+   *
+   * @param {Number} startTime
+   *        Starting time of animation.
+   * @param {Number} endTime
+   *        Ending time of animation.
+   * @return {Array}
+   *         Array of path segment.
+   *         e.g.[{x: {Number} time, y: {Number} progress}, ...]
+   */
+  createPathSegments(startTime, endTime) {
+    return createPathSegments(
+      startTime,
+      endTime,
+      this.minSegmentDuration,
+      this.minProgressThreshold,
+      this.durationResolution,
+      this.getSegment
+    );
+  }
+
+  /**
+   * Return a coordinate as a graph segment at given time.
+   *
+   * @param {Number} time
+   * @return {Object}
+   *         { x: Number, y: Number }
+   */
+  getSegment(time) {
+    const value = this.getValue(time);
+    return { x: time, y: value * DEFAULT_GRAPH_HEIGHT };
+  }
+}
+
+/**
+ * Create the path segments from given parameters.
+ *
+ * @param {Number} startTime
+ *        Starting time of animation.
+ * @param {Number} endTime
+ *        Ending time of animation.
+ * @param {Number} minSegmentDuration
+ *        Minimum segment duration.
+ * @param {Number} minProgressThreshold
+ *        Minimum progress threshold.
+ * @param {Number} resolution
+ *        Duration resolution for first time.
+ * @param {Function} getSegment
+ *        A function that calculate the graph segment.
+ * @return {Array}
+ *         Array of path segment.
+ *         e.g.[{x: {Number} time, y: {Number} progress}, ...]
+ */
+function createPathSegments(
+  startTime,
+  endTime,
+  minSegmentDuration,
+  minProgressThreshold,
+  resolution,
+  getSegment
+) {
+  // If the duration is too short, early return.
+  if (endTime - startTime < minSegmentDuration) {
+    return [getSegment(startTime), getSegment(endTime)];
+  }
+
+  // Otherwise, start creating segments.
+  let pathSegments = [];
+
+  // Append the segment for the startTime position.
+  const startTimeSegment = getSegment(startTime);
+  pathSegments.push(startTimeSegment);
+  let previousSegment = startTimeSegment;
+
+  // Split the duration in equal intervals, and iterate over them.
+  // See the definition of DEFAULT_DURATION_RESOLUTION for more information about this.
+  const interval = (endTime - startTime) / resolution;
+  for (let index = 1; index <= resolution; index++) {
+    // Create a segment for this interval.
+    const currentSegment = getSegment(startTime + index * interval);
+
+    // If the distance between the Y coordinate (the animation's progress) of
+    // the previous segment and the Y coordinate of the current segment is too
+    // large, then recurse with a smaller duration to get more details
+    // in the graph.
+    if (Math.abs(currentSegment.y - previousSegment.y) > minProgressThreshold) {
+      // Divide the current interval (excluding start and end bounds
+      // by adding/subtracting BOUND_EXCLUDING_TIME).
+      const nextStartTime = previousSegment.x + BOUND_EXCLUDING_TIME;
+      const nextEndTime = currentSegment.x - BOUND_EXCLUDING_TIME;
+      const segments = createPathSegments(
+        nextStartTime,
+        nextEndTime,
+        minSegmentDuration,
+        minProgressThreshold,
+        DEFAULT_DURATION_RESOLUTION,
+        getSegment
+      );
+      pathSegments = pathSegments.concat(segments);
+    }
+
+    pathSegments.push(currentSegment);
+    previousSegment = currentSegment;
+  }
+
+  return pathSegments;
+}
+
+/**
+ * Create a function which is used as parameter (toPathStringFunc) in constructor
+ * of SummaryGraphHelper.
+ *
+ * @param {Number} endTime
+ *        end time of animation
+ *        e.g. 200
+ * @param {Number} playbackRate
+ *        playback rate of animation
+ *        e.g. -1
+ * @return {Function}
+ */
+function createSummaryGraphPathStringFunction(endTime, playbackRate) {
+  return segments => {
+    segments = mapSegmentsToPlaybackRate(segments, endTime, playbackRate);
+    const firstSegment = segments[0];
+    let pathString = `M${firstSegment.x},0 `;
+    pathString += toPathString(segments);
+    const lastSegment = segments[segments.length - 1];
+    pathString += `L${lastSegment.x},0 Z`;
+    return pathString;
+  };
+}
+
+/**
+ * Return preferred duration resolution.
+ * This corresponds to narrow interval keyframe offset.
+ *
+ * @param {Array} keyframes
+ *        Array of keyframe.
+ * @return {Number}
+ *         Preferred duration resolution.
+ */
+function getPreferredDurationResolution(keyframes) {
+  if (!keyframes) {
+    return DEFAULT_DURATION_RESOLUTION;
+  }
+
+  let durationResolution = DEFAULT_DURATION_RESOLUTION;
+  let previousOffset = 0;
+  for (const keyframe of keyframes) {
+    if (previousOffset && previousOffset != keyframe.offset) {
+      const interval = keyframe.offset - previousOffset;
+      durationResolution = Math.max(
+        durationResolution,
+        Math.ceil(1 / interval)
+      );
+    }
+    previousOffset = keyframe.offset;
+  }
+
+  return durationResolution;
+}
+
+/**
+ * Return preferred progress threshold to render summary graph.
+ *
+ * @param {Object} state
+ *        State of animation.
+ * @param {Array} keyframes
+ *        Array of keyframe.
+ * @return {float}
+ *         Preferred threshold.
+ */
+function getPreferredProgressThreshold(state, keyframes) {
+  const steps = getStepsCount(state.easing);
+  const threshold = Math.min(DEFAULT_MIN_PROGRESS_THRESHOLD, 1 / (steps + 1));
+
+  if (!keyframes) {
+    return threshold;
+  }
+
+  return Math.min(
+    threshold,
+    getPreferredProgressThresholdByKeyframes(keyframes)
+  );
+}
+
+/**
+ * Return preferred progress threshold by keyframes.
+ *
+ * @param {Array} keyframes
+ *        Array of keyframe.
+ * @return {float}
+ *         Preferred threshold.
+ */
+function getPreferredProgressThresholdByKeyframes(keyframes) {
+  let threshold = DEFAULT_MIN_PROGRESS_THRESHOLD;
+
+  for (let i = 0; i < keyframes.length - 1; i++) {
+    const keyframe = keyframes[i];
+
+    if (!keyframe.easing) {
+      continue;
+    }
+
+    const steps = getStepsCount(keyframe.easing);
+
+    if (steps) {
+      const nextKeyframe = keyframes[i + 1];
+      threshold = Math.min(
+        threshold,
+        (1 / (steps + 1)) * (nextKeyframe.offset - keyframe.offset)
+      );
+    }
+  }
+
+  return threshold;
+}
+
+function getStepsCount(easing) {
+  const stepsFunction = easing.match(/(steps)\((\d+)/);
+  return stepsFunction ? parseInt(stepsFunction[2], 10) : 0;
+}
+
+function mapSegmentsToPlaybackRate(segments, endTime, playbackRate) {
+  if (playbackRate > 0) {
+    return segments;
+  }
+
+  return segments.map(segment => {
+    segment.x = endTime - segment.x;
+    return segment;
+  });
+}
+
+/**
+ * Return path string for 'd' attribute for <path> from given segments.
+ *
+ * @param {Array} segments
+ *        e.g. [{ x: 100, y: 0 }, { x: 200, y: 1 }]
+ * @return {String}
+ *         Path string.
+ *         e.g. "L100,0 L200,1"
+ */
+function toPathString(segments) {
+  let pathString = "";
+  segments.forEach(segment => {
+    pathString += `L${segment.x},${segment.y} `;
+  });
+  return pathString;
+}
+
+exports.createPathSegments = createPathSegments;
+exports.createSummaryGraphPathStringFunction =
+  createSummaryGraphPathStringFunction;
+exports.DEFAULT_DURATION_RESOLUTION = DEFAULT_DURATION_RESOLUTION;
+exports.DEFAULT_EASING_HINT_STROKE_WIDTH = DEFAULT_EASING_HINT_STROKE_WIDTH;
+exports.DEFAULT_GRAPH_HEIGHT = DEFAULT_GRAPH_HEIGHT;
+exports.DEFAULT_KEYFRAMES_GRAPH_DURATION = DEFAULT_KEYFRAMES_GRAPH_DURATION;
+exports.getPreferredProgressThresholdByKeyframes =
+  getPreferredProgressThresholdByKeyframes;
+exports.SummaryGraphHelper = SummaryGraphHelper;
+exports.toPathString = toPathString;
diff --git a/devtools/client/inspector/animation/utils/l10n.js b/devtools/client/inspector/animation/utils/l10n.js
new file mode 100644
index 0000000000..6fffa98b65
--- /dev/null
+++ b/devtools/client/inspector/animation/utils/l10n.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/animationinspector.properties"
+);
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+/**
+ * Get a formatted title for this animation. This will be either:
+ * "%S", "%S : CSS Transition", "%S : CSS Animation",
+ * "%S : Script Animation", or "Script Animation", depending
+ * if the server provides the type, what type it is and if the animation
+ * has a name.
+ *
+ * @param {Object} state
+ */
+function getFormattedTitle(state) {
+  // Older servers don't send a type, and only know about
+  // CSSAnimations and CSSTransitions, so it's safe to use
+  // just the name.
+  if (!state.type) {
+    return state.name;
+  }
+
+  // Script-generated animations may not have a name.
+  if (state.type === "scriptanimation" && !state.name) {
+    return L10N.getStr("timeline.scriptanimation.unnamedLabel");
+  }
+
+  return L10N.getFormatStr(`timeline.${state.type}.nameLabel`, state.name);
+}
+
+module.exports = {
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+  getFormattedTitle,
+  getInspectorStr: (...args) => INSPECTOR_L10N.getStr(...args),
+  getStr: (...args) => L10N.getStr(...args),
+  numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
+};
diff --git a/devtools/client/inspector/animation/utils/moz.build b/devtools/client/inspector/animation/utils/moz.build
new file mode 100644
index 0000000000..ae73627a29
--- /dev/null
+++ b/devtools/client/inspector/animation/utils/moz.build
@@ -0,0 +1,10 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "graph-helper.js",
+    "l10n.js",
+    "timescale.js",
+    "utils.js",
+)
diff --git a/devtools/client/inspector/animation/utils/timescale.js b/devtools/client/inspector/animation/utils/timescale.js
new file mode 100644
index 0000000000..77297f748c
--- /dev/null
+++ b/devtools/client/inspector/animation/utils/timescale.js
@@ -0,0 +1,145 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  getFormatStr,
+} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
+
+// If total duration for all animations is eqaul to or less than
+// TIME_FORMAT_MAX_DURATION_IN_MS, the text which expresses time is in milliseconds,
+// and seconds otherwise. Use in formatTime function.
+const TIME_FORMAT_MAX_DURATION_IN_MS = 4000;
+
+/**
+ * TimeScale object holds the total duration, start time and end time and zero position
+ * time information for all animations which should be displayed, and is used to calculate
+ * the displayed area for each animation.
+ */
+class TimeScale {
+  constructor(animations) {
+    let resultCurrentTime = -Number.MAX_VALUE;
+    let resultMinStartTime = Infinity;
+    let resultMaxEndTime = 0;
+    let resultZeroPositionTime = 0;
+
+    for (const animation of animations) {
+      const {
+        currentTime,
+        currentTimeAtCreated,
+        delay,
+        endTime,
+        startTimeAtCreated,
+      } = animation.state.absoluteValues;
+      let { startTime } = animation.state.absoluteValues;
+
+      const negativeDelay = Math.min(delay, 0);
+      let zeroPositionTime = 0;
+
+      // To shift the zero position time is the following two patterns.
+      //  * Animation has negative current time which is smaller than negative delay.
+      //  * Animation has negative delay.
+      // Furthermore, we should override the zero position time if we will need to
+      // expand the duration due to this negative current time or negative delay of
+      // this target animation.
+      if (currentTimeAtCreated < negativeDelay) {
+        startTime = startTimeAtCreated;
+        zeroPositionTime = Math.abs(currentTimeAtCreated);
+      } else if (negativeDelay < 0) {
+        zeroPositionTime = Math.abs(negativeDelay);
+      }
+
+      if (startTime < resultMinStartTime) {
+        resultMinStartTime = startTime;
+        // Override the previous calculated zero position only if the duration will be
+        // expanded.
+        resultZeroPositionTime = zeroPositionTime;
+      } else {
+        resultZeroPositionTime = Math.max(
+          resultZeroPositionTime,
+          zeroPositionTime
+        );
+      }
+
+      resultMaxEndTime = Math.max(resultMaxEndTime, endTime);
+      resultCurrentTime = Math.max(resultCurrentTime, currentTime);
+    }
+
+    this.minStartTime = resultMinStartTime;
+    this.maxEndTime = resultMaxEndTime;
+    this.currentTime = resultCurrentTime;
+    this.zeroPositionTime = resultZeroPositionTime;
+  }
+
+  /**
+   *  Convert a distance in % to a time, in the current time scale. The time
+   *  will be relative to the zero position time.
+   *  i.e., If zeroPositionTime will be negative and specified time is shorter
+   *  than the absolute value of zero position time, relative time will be
+   *  negative time.
+   *
+   * @param {Number} distance
+   * @return {Number}
+   */
+  distanceToRelativeTime(distance) {
+    return (this.getDuration() * distance) / 100 - this.zeroPositionTime;
+  }
+
+  /**
+   * Depending on the time scale, format the given time as milliseconds or
+   * seconds.
+   *
+   * @param {Number} time
+   * @return {String} The formatted time string.
+   */
+  formatTime(time) {
+    // Ignore negative zero
+    if (Math.abs(time) < 1 / 1000) {
+      time = 0.0;
+    }
+
+    // Format in milliseconds if the total duration is short enough.
+    if (this.getDuration() <= TIME_FORMAT_MAX_DURATION_IN_MS) {
+      return getFormatStr("timeline.timeGraduationLabel", time.toFixed(0));
+    }
+
+    // Otherwise format in seconds.
+    return getFormatStr("player.timeLabel", (time / 1000).toFixed(1));
+  }
+
+  /**
+   * Return entire animations duration.
+   *
+   * @return {Number} duration
+   */
+  getDuration() {
+    return this.maxEndTime - this.minStartTime;
+  }
+
+  /**
+   * Return current time of this time scale represents.
+   *
+   * @return {Number}
+   */
+  getCurrentTime() {
+    return this.currentTime - this.minStartTime;
+  }
+
+  /**
+   * Return end time of given animation.
+   * This time does not include playbackRate and cratedTime.
+   * Also, if the animation has infinite iterations, this returns Infinity.
+   *
+   * @param {Object} animation
+   * @return {Numbber} end time
+   */
+  getEndTime({ state }) {
+    return state.iterationCount
+      ? state.delay + state.duration * state.iterationCount + state.endDelay
+      : Infinity;
+  }
+}
+
+module.exports = TimeScale;
diff --git a/devtools/client/inspector/animation/utils/utils.js b/devtools/client/inspector/animation/utils/utils.js
new file mode 100644
index 0000000000..9040c27213
--- /dev/null
+++ b/devtools/client/inspector/animation/utils/utils.js
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// The maximum number of times we can loop before we find the optimal time interval in the
+// timeline graph.
+const OPTIMAL_TIME_INTERVAL_MAX_ITERS = 100;
+// Time graduations should be multiple of one of these number.
+const OPTIMAL_TIME_INTERVAL_MULTIPLES = [1, 2.5, 5];
+
+/**
+ * Find the optimal interval between time graduations in the animation timeline
+ * graph based on a minimum time interval.
+ *
+ * @param {Number} minTimeInterval
+ *                 Minimum time in ms in one interval
+ * @return {Number} The optimal interval time in ms
+ */
+function findOptimalTimeInterval(minTimeInterval) {
+  if (!minTimeInterval) {
+    return 0;
+  }
+
+  let numIters = 0;
+  let multiplier = 1;
+  let interval;
+
+  while (true) {
+    for (let i = 0; i < OPTIMAL_TIME_INTERVAL_MULTIPLES.length; i++) {
+      interval = OPTIMAL_TIME_INTERVAL_MULTIPLES[i] * multiplier;
+
+      if (minTimeInterval <= interval) {
+        return interval;
+      }
+    }
+
+    if (++numIters > OPTIMAL_TIME_INTERVAL_MAX_ITERS) {
+      return interval;
+    }
+
+    multiplier *= 10;
+  }
+}
+
+/**
+ * Check whether or not the given list of animations has an iteration count of infinite.
+ *
+ * @param {Array} animations.
+ * @return {Boolean} true if there is an animation in the  list of animations
+ *                   whose animation iteration count is infinite.
+ */
+function hasAnimationIterationCountInfinite(animations) {
+  return animations.some(({ state }) => !state.iterationCount);
+}
+
+/**
+ * Check wether the animations are running at least one.
+ *
+ * @param {Array} animations.
+ * @return {Boolean} true: running
+ */
+function hasRunningAnimation(animations) {
+  return animations.some(({ state }) => state.playState === "running");
+}
+
+exports.findOptimalTimeInterval = findOptimalTimeInterval;
+exports.hasAnimationIterationCountInfinite = hasAnimationIterationCountInfinite;
+exports.hasRunningAnimation = hasRunningAnimation;
diff --git a/devtools/client/inspector/boxmodel/actions/box-model-highlighter.js b/devtools/client/inspector/boxmodel/actions/box-model-highlighter.js
new file mode 100644
index 0000000000..9033dc46ae
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/actions/box-model-highlighter.js
@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * This module exports thunks.
+ * Thunks are functions that can be dispatched to the Inspector Redux store.
+ *
+ * These functions receive one object with options that contains:
+ * - dispatch() => function to dispatch Redux actions to the store
+ * - getState() => function to get the current state of the entire Inspector Redux store
+ * - inspector => object instance of Inspector client
+ *
+ * They provide a shortcut for React components to invoke the box model highlighter
+ * without having to know where the highlighter exists.
+ */
+
+module.exports = {
+  /**
+   * Show the box model highlighter for the currently selected node front.
+   * The selected node is obtained from the Selection instance on the Inspector.
+   *
+   * @param {Object} options
+   *        Optional configuration options passed to the box model highlighter
+   */
+  highlightSelectedNode(options = {}) {
+    return async thunkOptions => {
+      const { inspector } = thunkOptions;
+      if (!inspector || inspector._destroyed) {
+        return;
+      }
+
+      const { nodeFront } = inspector.selection;
+      if (!nodeFront) {
+        return;
+      }
+
+      await inspector.highlighters.showHighlighterTypeForNode(
+        inspector.highlighters.TYPES.BOXMODEL,
+        nodeFront,
+        options
+      );
+    };
+  },
+
+  /**
+   * Show the box model highlighter for the given node front.
+   *
+   * @param {NodeFront} nodeFront
+   *        Node that should be highlighted.
+   * @param {Object} options
+   *        Optional configuration options passed to the box model highlighter
+   */
+  highlightNode(nodeFront, options = {}) {
+    return async thunkOptions => {
+      const { inspector } = thunkOptions;
+      if (!inspector || inspector._destroyed) {
+        return;
+      }
+
+      await inspector.highlighters.showHighlighterTypeForNode(
+        inspector.highlighters.TYPES.BOXMODEL,
+        nodeFront,
+        options
+      );
+    };
+  },
+
+  /**
+   * Hide the box model highlighter for any highlighted node.
+   */
+  unhighlightNode() {
+    return async thunkOptions => {
+      const { inspector } = thunkOptions;
+      if (!inspector || inspector._destroyed) {
+        return;
+      }
+
+      await inspector.highlighters.hideHighlighterType(
+        inspector.highlighters.TYPES.BOXMODEL
+      );
+    };
+  },
+};
diff --git a/devtools/client/inspector/boxmodel/actions/box-model.js b/devtools/client/inspector/boxmodel/actions/box-model.js
new file mode 100644
index 0000000000..322cf6cb00
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/actions/box-model.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_GEOMETRY_EDITOR_ENABLED,
+  UPDATE_LAYOUT,
+  UPDATE_OFFSET_PARENT,
+} = require("resource://devtools/client/inspector/boxmodel/actions/index.js");
+
+module.exports = {
+  /**
+   * Updates the geometry editor's enabled state.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the geometry editor is enabled or not.
+   */
+  updateGeometryEditorEnabled(enabled) {
+    return {
+      type: UPDATE_GEOMETRY_EDITOR_ENABLED,
+      enabled,
+    };
+  },
+
+  /**
+   * Updates the layout state with the new layout properties.
+   */
+  updateLayout(layout) {
+    return {
+      type: UPDATE_LAYOUT,
+      layout,
+    };
+  },
+
+  /**
+   * Updates the offset parent state with the new DOM node.
+   */
+  updateOffsetParent(offsetParent) {
+    return {
+      type: UPDATE_OFFSET_PARENT,
+      offsetParent,
+    };
+  },
+};
diff --git a/devtools/client/inspector/boxmodel/actions/index.js b/devtools/client/inspector/boxmodel/actions/index.js
new file mode 100644
index 0000000000..813b4e9e11
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/actions/index.js
@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Updates the geometry editor's enabled state.
+    "UPDATE_GEOMETRY_EDITOR_ENABLED",
+
+    // Updates the layout state with the latest layout properties.
+    "UPDATE_LAYOUT",
+
+    // Updates the offset parent state with the new DOM node.
+    "UPDATE_OFFSET_PARENT",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/boxmodel/actions/moz.build b/devtools/client/inspector/boxmodel/actions/moz.build
new file mode 100644
index 0000000000..7ee681b35c
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/actions/moz.build
@@ -0,0 +1,11 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "box-model-highlighter.js",
+    "box-model.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/boxmodel/box-model.js b/devtools/client/inspector/boxmodel/box-model.js
new file mode 100644
index 0000000000..c6870ef016
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/box-model.js
@@ -0,0 +1,446 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const boxModelReducer = require("resource://devtools/client/inspector/boxmodel/reducers/box-model.js");
+const {
+  updateGeometryEditorEnabled,
+  updateLayout,
+  updateOffsetParent,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model.js");
+
+loader.lazyRequireGetter(
+  this,
+  "EditingSession",
+  "resource://devtools/client/inspector/boxmodel/utils/editing-session.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "InplaceEditor",
+  "resource://devtools/client/shared/inplace-editor.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "RulePreviewTooltip",
+  "resource://devtools/client/shared/widgets/tooltip/RulePreviewTooltip.js"
+);
+
+const NUMERIC = /^-?[\d\.]+$/;
+
+/**
+ * A singleton instance of the box model controllers.
+ *
+ * @param  {Inspector} inspector
+ *         An instance of the Inspector currently loaded in the toolbox.
+ * @param  {Window} window
+ *         The document window of the toolbox.
+ */
+function BoxModel(inspector, window) {
+  this.document = window.document;
+  this.inspector = inspector;
+  this.store = inspector.store;
+
+  this.store.injectReducer("boxModel", boxModelReducer);
+
+  this.updateBoxModel = this.updateBoxModel.bind(this);
+
+  this.onHideGeometryEditor = this.onHideGeometryEditor.bind(this);
+  this.onMarkupViewLeave = this.onMarkupViewLeave.bind(this);
+  this.onMarkupViewNodeHover = this.onMarkupViewNodeHover.bind(this);
+  this.onNewSelection = this.onNewSelection.bind(this);
+  this.onShowBoxModelEditor = this.onShowBoxModelEditor.bind(this);
+  this.onShowRulePreviewTooltip = this.onShowRulePreviewTooltip.bind(this);
+  this.onSidebarSelect = this.onSidebarSelect.bind(this);
+  this.onToggleGeometryEditor = this.onToggleGeometryEditor.bind(this);
+
+  this.inspector.selection.on("new-node-front", this.onNewSelection);
+  this.inspector.sidebar.on("select", this.onSidebarSelect);
+}
+
+BoxModel.prototype = {
+  /**
+   * Destruction function called when the inspector is destroyed. Removes event listeners
+   * and cleans up references.
+   */
+  destroy() {
+    this.inspector.selection.off("new-node-front", this.onNewSelection);
+    this.inspector.sidebar.off("select", this.onSidebarSelect);
+
+    if (this._geometryEditorEventsAbortController) {
+      this._geometryEditorEventsAbortController.abort();
+      this._geometryEditorEventsAbortController = null;
+    }
+
+    if (this._tooltip) {
+      this._tooltip.destroy();
+    }
+
+    this.untrackReflows();
+
+    this.elementRules = null;
+    this._highlighters = null;
+    this._tooltip = null;
+    this.document = null;
+    this.inspector = null;
+  },
+
+  get highlighters() {
+    if (!this._highlighters) {
+      // highlighters is a lazy getter in the inspector.
+      this._highlighters = this.inspector.highlighters;
+    }
+
+    return this._highlighters;
+  },
+
+  get rulePreviewTooltip() {
+    if (!this._tooltip) {
+      this._tooltip = new RulePreviewTooltip(this.inspector.toolbox.doc);
+    }
+
+    return this._tooltip;
+  },
+
+  /**
+   * Returns an object containing the box model's handler functions used in the box
+   * model's React component props.
+   */
+  getComponentProps() {
+    return {
+      onShowBoxModelEditor: this.onShowBoxModelEditor,
+      onShowRulePreviewTooltip: this.onShowRulePreviewTooltip,
+      onToggleGeometryEditor: this.onToggleGeometryEditor,
+    };
+  },
+
+  /**
+   * Returns true if the layout panel is visible, and false otherwise.
+   */
+  isPanelVisible() {
+    return (
+      this.inspector.toolbox &&
+      this.inspector.sidebar &&
+      this.inspector.toolbox.currentToolId === "inspector" &&
+      this.inspector.sidebar.getCurrentTabID() === "layoutview"
+    );
+  },
+
+  /**
+   * Returns true if the layout panel is visible and the current element is valid to
+   * be displayed in the view.
+   */
+  isPanelVisibleAndNodeValid() {
+    return (
+      this.isPanelVisible() &&
+      this.inspector.selection.isConnected() &&
+      this.inspector.selection.isElementNode()
+    );
+  },
+
+  /**
+   * Starts listening to reflows in the current tab.
+   */
+  trackReflows() {
+    this.inspector.on("reflow-in-selected-target", this.updateBoxModel);
+  },
+
+  /**
+   * Stops listening to reflows in the current tab.
+   */
+  untrackReflows() {
+    this.inspector.off("reflow-in-selected-target", this.updateBoxModel);
+  },
+
+  /**
+   * Updates the box model panel by dispatching the new layout data.
+   *
+   * @param  {String} reason
+   *         Optional string describing the reason why the boxmodel is updated.
+   */
+  updateBoxModel(reason) {
+    this._updateReasons = this._updateReasons || [];
+    if (reason) {
+      this._updateReasons.push(reason);
+    }
+
+    const lastRequest = async function () {
+      if (
+        !this.inspector ||
+        !this.isPanelVisible() ||
+        !this.inspector.selection.isConnected() ||
+        !this.inspector.selection.isElementNode()
+      ) {
+        return null;
+      }
+
+      const { nodeFront } = this.inspector.selection;
+      const inspectorFront = this.getCurrentInspectorFront();
+      const { pageStyle } = inspectorFront;
+
+      let layout = await pageStyle.getLayout(nodeFront, {
+        autoMargins: true,
+      });
+
+      const styleEntries = await pageStyle.getApplied(nodeFront, {
+        // We don't need styles applied to pseudo elements of the current node.
+        skipPseudo: true,
+      });
+      this.elementRules = styleEntries.map(e => e.rule);
+
+      // Update the layout properties with whether or not the element's position is
+      // editable with the geometry editor.
+      const isPositionEditable = await pageStyle.isPositionEditable(nodeFront);
+
+      layout = Object.assign({}, layout, {
+        isPositionEditable,
+      });
+
+      // Update the redux store with the latest offset parent DOM node
+      const offsetParent = await inspectorFront.walker.getOffsetParent(
+        nodeFront
+      );
+      this.store.dispatch(updateOffsetParent(offsetParent));
+
+      // Update the redux store with the latest layout properties and update the box
+      // model view.
+      this.store.dispatch(updateLayout(layout));
+
+      // If a subsequent request has been made, wait for that one instead.
+      if (this._lastRequest != lastRequest) {
+        return this._lastRequest;
+      }
+
+      this.inspector.emit("boxmodel-view-updated", this._updateReasons);
+
+      this._lastRequest = null;
+      this._updateReasons = [];
+
+      return null;
+    }
+      .bind(this)()
+      .catch(error => {
+        // If we failed because we were being destroyed while waiting for a request, ignore.
+        if (this.document) {
+          console.error(error);
+        }
+      });
+
+    this._lastRequest = lastRequest;
+  },
+
+  /**
+   * Hides the geometry editor and updates the box moodel store with the new
+   * geometry editor enabled state.
+   */
+  onHideGeometryEditor() {
+    this.highlighters.hideGeometryEditor();
+    this.store.dispatch(updateGeometryEditorEnabled(false));
+
+    if (this._geometryEditorEventsAbortController) {
+      this._geometryEditorEventsAbortController.abort();
+      this._geometryEditorEventsAbortController = null;
+    }
+  },
+
+  /**
+   * Handler function that re-shows the geometry editor for an element that already
+   * had the geometry editor enabled. This handler function is called on a "leave" event
+   * on the markup view.
+   */
+  onMarkupViewLeave() {
+    const state = this.store.getState();
+    const enabled = state.boxModel.geometryEditorEnabled;
+
+    if (!enabled) {
+      return;
+    }
+
+    const nodeFront = this.inspector.selection.nodeFront;
+    this.highlighters.showGeometryEditor(nodeFront);
+  },
+
+  /**
+   * Handler function that temporarily hides the geomery editor when the
+   * markup view has a "node-hover" event.
+   */
+  onMarkupViewNodeHover() {
+    this.highlighters.hideGeometryEditor();
+  },
+
+  /**
+   * Selection 'new-node-front' event handler.
+   */
+  onNewSelection() {
+    if (!this.isPanelVisibleAndNodeValid()) {
+      return;
+    }
+
+    if (
+      this.inspector.selection.isConnected() &&
+      this.inspector.selection.isElementNode()
+    ) {
+      this.trackReflows();
+    }
+
+    this.updateBoxModel("new-selection");
+  },
+
+  /**
+   * Shows the RulePreviewTooltip when a box model editable value is hovered on the
+   * box model panel.
+   *
+   * @param  {Element} target
+   *         The target element.
+   * @param  {String} property
+   *         The name of the property.
+   */
+  onShowRulePreviewTooltip(target, property) {
+    const { highlightProperty } = this.inspector.getPanel("ruleview").view;
+    const isHighlighted = highlightProperty(property);
+
+    // Only show the tooltip if the property is not highlighted.
+    // TODO: In the future, use an associated ruleId for toggling the tooltip instead of
+    // the Boolean returned from highlightProperty.
+    if (!isHighlighted) {
+      this.rulePreviewTooltip.show(target);
+    }
+  },
+
+  /**
+   * Shows the inplace editor when a box model editable value is clicked on the
+   * box model panel.
+   *
+   * @param  {DOMNode} element
+   *         The element that was clicked.
+   * @param  {Event} event
+   *         The event object.
+   * @param  {String} property
+   *         The name of the property.
+   */
+  onShowBoxModelEditor(element, event, property) {
+    const session = new EditingSession({
+      inspector: this.inspector,
+      doc: this.document,
+      elementRules: this.elementRules,
+    });
+    const initialValue = session.getProperty(property);
+
+    const editor = new InplaceEditor(
+      {
+        element,
+        initial: initialValue,
+        contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
+        property: {
+          name: property,
+        },
+        start: self => {
+          self.elt.parentNode.classList.add("boxmodel-editing");
+        },
+        change: value => {
+          if (NUMERIC.test(value)) {
+            value += "px";
+          }
+
+          const properties = [{ name: property, value }];
+
+          if (property.substring(0, 7) == "border-") {
+            const bprop = property.substring(0, property.length - 5) + "style";
+            const style = session.getProperty(bprop);
+            if (!style || style == "none" || style == "hidden") {
+              properties.push({ name: bprop, value: "solid" });
+            }
+          }
+
+          if (property.substring(0, 9) == "position-") {
+            properties[0].name = property.substring(9);
+          }
+
+          session.setProperties(properties).catch(console.error);
+        },
+        done: (value, commit) => {
+          editor.elt.parentNode.classList.remove("boxmodel-editing");
+          if (!commit) {
+            session.revert().then(() => {
+              session.destroy();
+            }, console.error);
+            return;
+          }
+
+          this.updateBoxModel("editable-value-change");
+        },
+        cssProperties: this.inspector.cssProperties,
+      },
+      event
+    );
+  },
+
+  /**
+   * Handler for the inspector sidebar select event. Starts tracking reflows if the
+   * layout panel is visible. Otherwise, stop tracking reflows. Finally, refresh the box
+   * model view if it is visible.
+   */
+  onSidebarSelect() {
+    if (!this.isPanelVisible()) {
+      this.untrackReflows();
+      return;
+    }
+
+    if (
+      this.inspector.selection.isConnected() &&
+      this.inspector.selection.isElementNode()
+    ) {
+      this.trackReflows();
+    }
+
+    this.updateBoxModel();
+  },
+
+  /**
+   * Toggles on/off the geometry editor for the current element when the geometry editor
+   * toggle button is clicked.
+   */
+  onToggleGeometryEditor() {
+    const { markup, selection, toolbox } = this.inspector;
+    const nodeFront = this.inspector.selection.nodeFront;
+    const state = this.store.getState();
+    const enabled = !state.boxModel.geometryEditorEnabled;
+
+    this.highlighters.toggleGeometryHighlighter(nodeFront);
+    this.store.dispatch(updateGeometryEditorEnabled(enabled));
+
+    if (enabled) {
+      this._geometryEditorEventsAbortController = new AbortController();
+      const eventListenersConfig = {
+        signal: this._geometryEditorEventsAbortController.signal,
+      };
+      // Hide completely the geometry editor if:
+      // - the picker is clicked
+      // - or if a new node is selected
+      toolbox.nodePicker.on(
+        "picker-started",
+        this.onHideGeometryEditor,
+        eventListenersConfig
+      );
+      selection.on(
+        "new-node-front",
+        this.onHideGeometryEditor,
+        eventListenersConfig
+      );
+      // Temporarily hide the geometry editor
+      markup.on("leave", this.onMarkupViewLeave, eventListenersConfig);
+      markup.on("node-hover", this.onMarkupViewNodeHover, eventListenersConfig);
+    } else if (this._geometryEditorEventsAbortController) {
+      this._geometryEditorEventsAbortController.abort();
+      this._geometryEditorEventsAbortController = null;
+    }
+  },
+
+  getCurrentInspectorFront() {
+    return this.inspector.selection.nodeFront.inspectorFront;
+  },
+};
+
+module.exports = BoxModel;
diff --git a/devtools/client/inspector/boxmodel/components/BoxModel.js b/devtools/client/inspector/boxmodel/components/BoxModel.js
new file mode 100644
index 0000000000..23d6fc0ed4
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/BoxModel.js
@@ -0,0 +1,97 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const BoxModelInfo = createFactory(
+  require("resource://devtools/client/inspector/boxmodel/components/BoxModelInfo.js")
+);
+const BoxModelMain = createFactory(
+  require("resource://devtools/client/inspector/boxmodel/components/BoxModelMain.js")
+);
+const BoxModelProperties = createFactory(
+  require("resource://devtools/client/inspector/boxmodel/components/BoxModelProperties.js")
+);
+
+const Types = require("resource://devtools/client/inspector/boxmodel/types.js");
+
+class BoxModel extends PureComponent {
+  static get propTypes() {
+    return {
+      boxModel: PropTypes.shape(Types.boxModel).isRequired,
+      dispatch: PropTypes.func.isRequired,
+      onShowBoxModelEditor: PropTypes.func.isRequired,
+      onShowRulePreviewTooltip: PropTypes.func.isRequired,
+      onToggleGeometryEditor: PropTypes.func.isRequired,
+      showBoxModelProperties: PropTypes.bool.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  onKeyDown(event) {
+    const { target } = event;
+
+    if (target == this.boxModelContainer) {
+      this.boxModelMain.onKeyDown(event);
+    }
+  }
+
+  render() {
+    const {
+      boxModel,
+      dispatch,
+      onShowBoxModelEditor,
+      onShowRulePreviewTooltip,
+      onToggleGeometryEditor,
+      setSelectedNode,
+      showBoxModelProperties,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "boxmodel-container",
+        tabIndex: 0,
+        ref: div => {
+          this.boxModelContainer = div;
+        },
+        onKeyDown: this.onKeyDown,
+      },
+      BoxModelMain({
+        boxModel,
+        boxModelContainer: this.boxModelContainer,
+        dispatch,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+        ref: boxModelMain => {
+          this.boxModelMain = boxModelMain;
+        },
+      }),
+      BoxModelInfo({
+        boxModel,
+        onToggleGeometryEditor,
+      }),
+      showBoxModelProperties
+        ? BoxModelProperties({
+            boxModel,
+            dispatch,
+            setSelectedNode,
+          })
+        : null
+    );
+  }
+}
+
+module.exports = BoxModel;
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelEditable.js b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
new file mode 100644
index 0000000000..c60a3da6be
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
@@ -0,0 +1,109 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  editableItem,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const SHARED_STRINGS_URI = "devtools/client/locales/shared.properties";
+const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
+
+const LONG_TEXT_ROTATE_LIMIT = 3;
+const HIGHLIGHT_RULE_PREF = Services.prefs.getBoolPref(
+  "devtools.layout.boxmodel.highlightProperty"
+);
+
+class BoxModelEditable extends PureComponent {
+  static get propTypes() {
+    return {
+      box: PropTypes.string.isRequired,
+      direction: PropTypes.string,
+      focusable: PropTypes.bool.isRequired,
+      level: PropTypes.string,
+      onShowBoxModelEditor: PropTypes.func.isRequired,
+      onShowRulePreviewTooltip: PropTypes.func.isRequired,
+      property: PropTypes.string.isRequired,
+      textContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onMouseOver = this.onMouseOver.bind(this);
+  }
+
+  componentDidMount() {
+    const { property, onShowBoxModelEditor } = this.props;
+
+    editableItem(
+      {
+        element: this.boxModelEditable,
+      },
+      (element, event) => {
+        onShowBoxModelEditor(element, event, property);
+      }
+    );
+  }
+
+  onMouseOver(event) {
+    const { onShowRulePreviewTooltip, property } = this.props;
+
+    if (event.shiftKey && HIGHLIGHT_RULE_PREF) {
+      onShowRulePreviewTooltip(event.target, property);
+    }
+  }
+
+  render() {
+    const { box, direction, focusable, level, property, textContent } =
+      this.props;
+
+    const rotate =
+      direction &&
+      (direction == "left" || direction == "right") &&
+      box !== "position" &&
+      textContent.toString().length > LONG_TEXT_ROTATE_LIMIT;
+
+    return dom.p(
+      {
+        className: `boxmodel-${box}
+                      ${
+                        direction
+                          ? " boxmodel-" + direction
+                          : "boxmodel-" + property
+                      }
+                      ${rotate ? " boxmodel-rotate" : ""}`,
+        id: property + "-id",
+      },
+      dom.span(
+        {
+          className: "boxmodel-editable",
+          "aria-label": SHARED_L10N.getFormatStr(
+            "boxModelEditable.accessibleLabel",
+            property,
+            textContent
+          ),
+          "data-box": box,
+          tabIndex: box === level && focusable ? 0 : -1,
+          title: property,
+          onMouseOver: this.onMouseOver,
+          ref: span => {
+            this.boxModelEditable = span;
+          },
+        },
+        textContent
+      )
+    );
+  }
+}
+
+module.exports = BoxModelEditable;
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelInfo.js b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
new file mode 100644
index 0000000000..e64faba05a
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+const Types = require("resource://devtools/client/inspector/boxmodel/types.js");
+
+const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
+const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
+
+const SHARED_STRINGS_URI = "devtools/client/locales/shared.properties";
+const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
+
+class BoxModelInfo extends PureComponent {
+  static get propTypes() {
+    return {
+      boxModel: PropTypes.shape(Types.boxModel).isRequired,
+      onToggleGeometryEditor: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onToggleGeometryEditor = this.onToggleGeometryEditor.bind(this);
+  }
+
+  onToggleGeometryEditor(e) {
+    this.props.onToggleGeometryEditor();
+  }
+
+  render() {
+    const { boxModel } = this.props;
+    const { geometryEditorEnabled, layout } = boxModel;
+    const { height = "-", isPositionEditable, position, width = "-" } = layout;
+
+    let buttonClass = "layout-geometry-editor devtools-button";
+    if (geometryEditorEnabled) {
+      buttonClass += " checked";
+    }
+
+    return dom.div(
+      {
+        className: "boxmodel-info",
+        role: "region",
+        "aria-label": SHARED_L10N.getFormatStr(
+          "boxModelInfo.accessibleLabel",
+          width,
+          height,
+          position
+        ),
+      },
+      dom.span(
+        { className: "boxmodel-element-size" },
+        SHARED_L10N.getFormatStr("dimensions", width, height)
+      ),
+      dom.section(
+        { className: "boxmodel-position-group" },
+        isPositionEditable
+          ? dom.button({
+              className: buttonClass,
+              title: BOXMODEL_L10N.getStr("boxmodel.geometryButton.tooltip"),
+              onClick: this.onToggleGeometryEditor,
+            })
+          : null,
+        dom.span({ className: "boxmodel-element-position" }, position)
+      )
+    );
+  }
+}
+
+module.exports = BoxModelInfo;
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelMain.js b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
new file mode 100644
index 0000000000..e7065f797a
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -0,0 +1,774 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const { KeyCodes } = require("resource://devtools/client/shared/keycodes.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+const BoxModelEditable = createFactory(
+  require("resource://devtools/client/inspector/boxmodel/components/BoxModelEditable.js")
+);
+
+const Types = require("resource://devtools/client/inspector/boxmodel/types.js");
+
+const {
+  highlightSelectedNode,
+  unhighlightNode,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
+
+const SHARED_STRINGS_URI = "devtools/client/locales/shared.properties";
+const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
+
+class BoxModelMain extends PureComponent {
+  static get propTypes() {
+    return {
+      boxModel: PropTypes.shape(Types.boxModel).isRequired,
+      boxModelContainer: PropTypes.object,
+      dispatch: PropTypes.func.isRequired,
+      onShowBoxModelEditor: PropTypes.func.isRequired,
+      onShowRulePreviewTooltip: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeDescendant: null,
+      focusable: false,
+    };
+
+    this.getActiveDescendant = this.getActiveDescendant.bind(this);
+    this.getBorderOrPaddingValue = this.getBorderOrPaddingValue.bind(this);
+    this.getContextBox = this.getContextBox.bind(this);
+    this.getDisplayPosition = this.getDisplayPosition.bind(this);
+    this.getHeightValue = this.getHeightValue.bind(this);
+    this.getMarginValue = this.getMarginValue.bind(this);
+    this.getPositionValue = this.getPositionValue.bind(this);
+    this.getWidthValue = this.getWidthValue.bind(this);
+    this.moveFocus = this.moveFocus.bind(this);
+    this.onHighlightMouseOver = this.onHighlightMouseOver.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onLevelClick = this.onLevelClick.bind(this);
+    this.setActive = this.setActive.bind(this);
+  }
+
+  componentDidUpdate() {
+    const displayPosition = this.getDisplayPosition();
+    const isContentBox = this.getContextBox();
+
+    this.layouts = {
+      position: new Map([
+        [KeyCodes.DOM_VK_ESCAPE, this.positionLayout],
+        [KeyCodes.DOM_VK_DOWN, this.marginLayout],
+        [KeyCodes.DOM_VK_RETURN, this.positionEditable],
+        [KeyCodes.DOM_VK_UP, null],
+        ["click", this.positionLayout],
+      ]),
+      margin: new Map([
+        [KeyCodes.DOM_VK_ESCAPE, this.marginLayout],
+        [KeyCodes.DOM_VK_DOWN, this.borderLayout],
+        [KeyCodes.DOM_VK_RETURN, this.marginEditable],
+        [KeyCodes.DOM_VK_UP, displayPosition ? this.positionLayout : null],
+        ["click", this.marginLayout],
+      ]),
+      border: new Map([
+        [KeyCodes.DOM_VK_ESCAPE, this.borderLayout],
+        [KeyCodes.DOM_VK_DOWN, this.paddingLayout],
+        [KeyCodes.DOM_VK_RETURN, this.borderEditable],
+        [KeyCodes.DOM_VK_UP, this.marginLayout],
+        ["click", this.borderLayout],
+      ]),
+      padding: new Map([
+        [KeyCodes.DOM_VK_ESCAPE, this.paddingLayout],
+        [KeyCodes.DOM_VK_DOWN, isContentBox ? this.contentLayout : null],
+        [KeyCodes.DOM_VK_RETURN, this.paddingEditable],
+        [KeyCodes.DOM_VK_UP, this.borderLayout],
+        ["click", this.paddingLayout],
+      ]),
+      content: new Map([
+        [KeyCodes.DOM_VK_ESCAPE, this.contentLayout],
+        [KeyCodes.DOM_VK_DOWN, null],
+        [KeyCodes.DOM_VK_RETURN, this.contentEditable],
+        [KeyCodes.DOM_VK_UP, this.paddingLayout],
+        ["click", this.contentLayout],
+      ]),
+    };
+  }
+
+  getActiveDescendant() {
+    let { activeDescendant } = this.state;
+
+    if (!activeDescendant) {
+      const displayPosition = this.getDisplayPosition();
+      const nextLayout = displayPosition
+        ? this.positionLayout
+        : this.marginLayout;
+      activeDescendant = nextLayout.getAttribute("data-box");
+      this.setActive(nextLayout);
+    }
+
+    return activeDescendant;
+  }
+
+  getBorderOrPaddingValue(property) {
+    const { layout } = this.props.boxModel;
+    return layout[property] ? parseFloat(layout[property]) : "-";
+  }
+
+  /**
+   * Returns true if the layout box sizing is context box and false otherwise.
+   */
+  getContextBox() {
+    const { layout } = this.props.boxModel;
+    return layout["box-sizing"] == "content-box";
+  }
+
+  /**
+   * Returns true if the position is displayed and false otherwise.
+   */
+  getDisplayPosition() {
+    const { layout } = this.props.boxModel;
+    return layout.position && layout.position != "static";
+  }
+
+  getHeightValue(property) {
+    if (property == undefined) {
+      return "-";
+    }
+
+    const { layout } = this.props.boxModel;
+
+    property -=
+      parseFloat(layout["border-top-width"]) +
+      parseFloat(layout["border-bottom-width"]) +
+      parseFloat(layout["padding-top"]) +
+      parseFloat(layout["padding-bottom"]);
+    property = parseFloat(property.toPrecision(6));
+
+    return property;
+  }
+
+  getMarginValue(property, direction) {
+    const { layout } = this.props.boxModel;
+    const autoMargins = layout.autoMargins || {};
+    let value = "-";
+
+    if (direction in autoMargins) {
+      value = autoMargins[direction];
+    } else if (layout[property]) {
+      const parsedValue = parseFloat(layout[property]);
+
+      if (Number.isNaN(parsedValue)) {
+        // Not a number. We use the raw string.
+        // Useful for pseudo-elements with auto margins since they
+        // don't appear in autoMargins.
+        value = layout[property];
+      } else {
+        value = parsedValue;
+      }
+    }
+
+    return value;
+  }
+
+  getPositionValue(property) {
+    const { layout } = this.props.boxModel;
+    let value = "-";
+
+    if (!layout[property]) {
+      return value;
+    }
+
+    const parsedValue = parseFloat(layout[property]);
+
+    if (Number.isNaN(parsedValue)) {
+      // Not a number. We use the raw string.
+      value = layout[property];
+    } else {
+      value = parsedValue;
+    }
+
+    return value;
+  }
+
+  getWidthValue(property) {
+    if (property == undefined) {
+      return "-";
+    }
+
+    const { layout } = this.props.boxModel;
+
+    property -=
+      parseFloat(layout["border-left-width"]) +
+      parseFloat(layout["border-right-width"]) +
+      parseFloat(layout["padding-left"]) +
+      parseFloat(layout["padding-right"]);
+    property = parseFloat(property.toPrecision(6));
+
+    return property;
+  }
+
+  /**
+   * Move the focus to the next/previous editable element of the current layout.
+   *
+   * @param  {Element} target
+   *         Node to be observed
+   * @param  {Boolean} shiftKey
+   *         Determines if shiftKey was pressed
+   */
+  moveFocus({ target, shiftKey }) {
+    const editBoxes = [
+      ...this.positionLayout.querySelectorAll("[data-box].boxmodel-editable"),
+    ];
+    const editingMode = target.tagName === "input";
+    // target.nextSibling is input field
+    let position = editingMode
+      ? editBoxes.indexOf(target.nextSibling)
+      : editBoxes.indexOf(target);
+
+    if (position === editBoxes.length - 1 && !shiftKey) {
+      position = 0;
+    } else if (position === 0 && shiftKey) {
+      position = editBoxes.length - 1;
+    } else {
+      shiftKey ? position-- : position++;
+    }
+
+    const editBox = editBoxes[position];
+    this.setActive(editBox);
+    editBox.focus();
+
+    if (editingMode) {
+      editBox.click();
+    }
+  }
+
+  /**
+   * Active level set to current layout.
+   *
+   * @param  {Element} nextLayout
+   *         Element of next layout that user has navigated to
+   */
+  setActive(nextLayout) {
+    const { boxModelContainer } = this.props;
+
+    // We set this attribute for testing purposes.
+    if (boxModelContainer) {
+      boxModelContainer.dataset.activeDescendantClassName =
+        nextLayout.className;
+    }
+
+    this.setState({
+      activeDescendant: nextLayout.getAttribute("data-box"),
+    });
+  }
+
+  onHighlightMouseOver(event) {
+    let region = event.target.getAttribute("data-box");
+
+    if (!region) {
+      let el = event.target;
+
+      do {
+        el = el.parentNode;
+
+        if (el && el.getAttribute("data-box")) {
+          region = el.getAttribute("data-box");
+          break;
+        }
+      } while (el.parentNode);
+
+      this.props.dispatch(unhighlightNode());
+    }
+
+    this.props.dispatch(
+      highlightSelectedNode({
+        region,
+        showOnly: region,
+        onlyRegionArea: true,
+      })
+    );
+
+    event.preventDefault();
+  }
+
+  /**
+   * Handle keyboard navigation and focus for box model layouts.
+   *
+   * Updates active layout on arrow key navigation
+   * Focuses next layout's editboxes on enter key
+   * Unfocuses current layout's editboxes when active layout changes
+   * Controls tabbing between editBoxes
+   *
+   * @param  {Event} event
+   *         The event triggered by a keypress on the box model
+   */
+  onKeyDown(event) {
+    const { target, keyCode } = event;
+    const isEditable = target._editable || target.editor;
+
+    const level = this.getActiveDescendant();
+    const editingMode = target.tagName === "input";
+
+    switch (keyCode) {
+      case KeyCodes.DOM_VK_RETURN:
+        if (!isEditable) {
+          this.setState({ focusable: true }, () => {
+            const editableBox = this.layouts[level].get(keyCode);
+            if (editableBox) {
+              editableBox.boxModelEditable.focus();
+            }
+          });
+        }
+        break;
+      case KeyCodes.DOM_VK_DOWN:
+      case KeyCodes.DOM_VK_UP:
+        if (!editingMode) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.setState({ focusable: false }, () => {
+            const nextLayout = this.layouts[level].get(keyCode);
+
+            if (!nextLayout) {
+              return;
+            }
+
+            this.setActive(nextLayout);
+
+            if (target?._editable) {
+              target.blur();
+            }
+
+            this.props.boxModelContainer.focus();
+          });
+        }
+        break;
+      case KeyCodes.DOM_VK_TAB:
+        if (isEditable) {
+          event.preventDefault();
+          this.moveFocus(event);
+        }
+        break;
+      case KeyCodes.DOM_VK_ESCAPE:
+        if (target._editable) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.setState({ focusable: false }, () => {
+            this.props.boxModelContainer.focus();
+          });
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Update active on mouse click.
+   *
+   * @param  {Event} event
+   *         The event triggered by a mouse click on the box model
+   */
+  onLevelClick(event) {
+    const { target } = event;
+    const displayPosition = this.getDisplayPosition();
+    const isContentBox = this.getContextBox();
+
+    // Avoid switching the active descendant to the position or content layout
+    // if those are not editable.
+    if (
+      (!displayPosition && target == this.positionLayout) ||
+      (!isContentBox && target == this.contentLayout)
+    ) {
+      return;
+    }
+
+    const nextLayout =
+      this.layouts[target.getAttribute("data-box")].get("click");
+    this.setActive(nextLayout);
+
+    if (target?._editable) {
+      target.blur();
+    }
+  }
+
+  render() {
+    const {
+      boxModel,
+      dispatch,
+      onShowBoxModelEditor,
+      onShowRulePreviewTooltip,
+    } = this.props;
+    const { layout } = boxModel;
+    let { height, width } = layout;
+    const { activeDescendant: level, focusable } = this.state;
+
+    const borderTop = this.getBorderOrPaddingValue("border-top-width");
+    const borderRight = this.getBorderOrPaddingValue("border-right-width");
+    const borderBottom = this.getBorderOrPaddingValue("border-bottom-width");
+    const borderLeft = this.getBorderOrPaddingValue("border-left-width");
+
+    const paddingTop = this.getBorderOrPaddingValue("padding-top");
+    const paddingRight = this.getBorderOrPaddingValue("padding-right");
+    const paddingBottom = this.getBorderOrPaddingValue("padding-bottom");
+    const paddingLeft = this.getBorderOrPaddingValue("padding-left");
+
+    const displayPosition = this.getDisplayPosition();
+    const positionTop = this.getPositionValue("top");
+    const positionRight = this.getPositionValue("right");
+    const positionBottom = this.getPositionValue("bottom");
+    const positionLeft = this.getPositionValue("left");
+
+    const marginTop = this.getMarginValue("margin-top", "top");
+    const marginRight = this.getMarginValue("margin-right", "right");
+    const marginBottom = this.getMarginValue("margin-bottom", "bottom");
+    const marginLeft = this.getMarginValue("margin-left", "left");
+
+    height = this.getHeightValue(height);
+    width = this.getWidthValue(width);
+
+    const contentBox =
+      layout["box-sizing"] == "content-box"
+        ? dom.div(
+            { className: "boxmodel-size" },
+            BoxModelEditable({
+              box: "content",
+              focusable,
+              level,
+              property: "width",
+              ref: editable => {
+                this.contentEditable = editable;
+              },
+              textContent: width,
+              onShowBoxModelEditor,
+              onShowRulePreviewTooltip,
+            }),
+            dom.span({}, "\u00D7"),
+            BoxModelEditable({
+              box: "content",
+              focusable,
+              level,
+              property: "height",
+              textContent: height,
+              onShowBoxModelEditor,
+              onShowRulePreviewTooltip,
+            })
+          )
+        : dom.p(
+            {
+              className: "boxmodel-size",
+              id: "boxmodel-size-id",
+            },
+            dom.span(
+              { title: "content" },
+              SHARED_L10N.getFormatStr("dimensions", width, height)
+            )
+          );
+
+    return dom.div(
+      {
+        className: "boxmodel-main devtools-monospace",
+        "data-box": "position",
+        ref: div => {
+          this.positionLayout = div;
+        },
+        onClick: this.onLevelClick,
+        onKeyDown: this.onKeyDown,
+        onMouseOver: this.onHighlightMouseOver,
+        onMouseOut: () => dispatch(unhighlightNode()),
+      },
+      displayPosition
+        ? dom.span(
+            {
+              className: "boxmodel-legend",
+              "data-box": "position",
+              title: "position",
+            },
+            "position"
+          )
+        : null,
+      dom.div(
+        { className: "boxmodel-box" },
+        dom.span(
+          {
+            className: "boxmodel-legend",
+            "data-box": "margin",
+            title: "margin",
+            role: "region",
+            "aria-level": "1", // margin, outermost box
+            "aria-owns":
+              "margin-top-id margin-right-id margin-bottom-id margin-left-id margins-div",
+          },
+          "margin"
+        ),
+        dom.div(
+          {
+            className: "boxmodel-margins",
+            id: "margins-div",
+            "data-box": "margin",
+            title: "margin",
+            ref: div => {
+              this.marginLayout = div;
+            },
+          },
+          dom.span(
+            {
+              className: "boxmodel-legend",
+              "data-box": "border",
+              title: "border",
+              role: "region",
+              "aria-level": "2", // margin -> border, second box
+              "aria-owns":
+                "border-top-width-id border-right-width-id border-bottom-width-id border-left-width-id borders-div",
+            },
+            "border"
+          ),
+          dom.div(
+            {
+              className: "boxmodel-borders",
+              id: "borders-div",
+              "data-box": "border",
+              title: "border",
+              ref: div => {
+                this.borderLayout = div;
+              },
+            },
+            dom.span(
+              {
+                className: "boxmodel-legend",
+                "data-box": "padding",
+                title: "padding",
+                role: "region",
+                "aria-level": "3", // margin -> border -> padding
+                "aria-owns":
+                  "padding-top-id padding-right-id padding-bottom-id padding-left-id padding-div",
+              },
+              "padding"
+            ),
+            dom.div(
+              {
+                className: "boxmodel-paddings",
+                id: "padding-div",
+                "data-box": "padding",
+                title: "padding",
+                "aria-owns": "boxmodel-contents-id",
+                ref: div => {
+                  this.paddingLayout = div;
+                },
+              },
+              dom.div({
+                className: "boxmodel-contents",
+                id: "boxmodel-contents-id",
+                "data-box": "content",
+                title: "content",
+                role: "region",
+                "aria-level": "4", // margin -> border -> padding -> content
+                "aria-label": SHARED_L10N.getFormatStr(
+                  "boxModelSize.accessibleLabel",
+                  width,
+                  height
+                ),
+                "aria-owns": "boxmodel-size-id",
+                ref: div => {
+                  this.contentLayout = div;
+                },
+              })
+            )
+          )
+        )
+      ),
+      displayPosition
+        ? BoxModelEditable({
+            box: "position",
+            direction: "top",
+            focusable,
+            level,
+            property: "position-top",
+            ref: editable => {
+              this.positionEditable = editable;
+            },
+            textContent: positionTop,
+            onShowBoxModelEditor,
+            onShowRulePreviewTooltip,
+          })
+        : null,
+      displayPosition
+        ? BoxModelEditable({
+            box: "position",
+            direction: "right",
+            focusable,
+            level,
+            property: "position-right",
+            textContent: positionRight,
+            onShowBoxModelEditor,
+            onShowRulePreviewTooltip,
+          })
+        : null,
+      displayPosition
+        ? BoxModelEditable({
+            box: "position",
+            direction: "bottom",
+            focusable,
+            level,
+            property: "position-bottom",
+            textContent: positionBottom,
+            onShowBoxModelEditor,
+            onShowRulePreviewTooltip,
+          })
+        : null,
+      displayPosition
+        ? BoxModelEditable({
+            box: "position",
+            direction: "left",
+            focusable,
+            level,
+            property: "position-left",
+            textContent: positionLeft,
+            onShowBoxModelEditor,
+            onShowRulePreviewTooltip,
+          })
+        : null,
+      BoxModelEditable({
+        box: "margin",
+        direction: "top",
+        focusable,
+        level,
+        property: "margin-top",
+        ref: editable => {
+          this.marginEditable = editable;
+        },
+        textContent: marginTop,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "margin",
+        direction: "right",
+        focusable,
+        level,
+        property: "margin-right",
+        textContent: marginRight,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "margin",
+        direction: "bottom",
+        focusable,
+        level,
+        property: "margin-bottom",
+        textContent: marginBottom,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "margin",
+        direction: "left",
+        focusable,
+        level,
+        property: "margin-left",
+        textContent: marginLeft,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "border",
+        direction: "top",
+        focusable,
+        level,
+        property: "border-top-width",
+        ref: editable => {
+          this.borderEditable = editable;
+        },
+        textContent: borderTop,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "border",
+        direction: "right",
+        focusable,
+        level,
+        property: "border-right-width",
+        textContent: borderRight,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "border",
+        direction: "bottom",
+        focusable,
+        level,
+        property: "border-bottom-width",
+        textContent: borderBottom,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "border",
+        direction: "left",
+        focusable,
+        level,
+        property: "border-left-width",
+        textContent: borderLeft,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "padding",
+        direction: "top",
+        focusable,
+        level,
+        property: "padding-top",
+        ref: editable => {
+          this.paddingEditable = editable;
+        },
+        textContent: paddingTop,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "padding",
+        direction: "right",
+        focusable,
+        level,
+        property: "padding-right",
+        textContent: paddingRight,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "padding",
+        direction: "bottom",
+        focusable,
+        level,
+        property: "padding-bottom",
+        textContent: paddingBottom,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      BoxModelEditable({
+        box: "padding",
+        direction: "left",
+        focusable,
+        level,
+        property: "padding-left",
+        textContent: paddingLeft,
+        onShowBoxModelEditor,
+        onShowRulePreviewTooltip,
+      }),
+      contentBox
+    );
+  }
+}
+
+module.exports = BoxModelMain;
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
new file mode 100644
index 0000000000..8b314a46ed
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -0,0 +1,142 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+const ComputedProperty = createFactory(
+  require("resource://devtools/client/inspector/boxmodel/components/ComputedProperty.js")
+);
+
+const Types = require("resource://devtools/client/inspector/boxmodel/types.js");
+
+const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
+const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
+
+class BoxModelProperties extends PureComponent {
+  static get propTypes() {
+    return {
+      boxModel: PropTypes.shape(Types.boxModel).isRequired,
+      dispatch: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpen: true,
+    };
+
+    this.getReferenceElement = this.getReferenceElement.bind(this);
+    this.onToggleExpander = this.onToggleExpander.bind(this);
+  }
+
+  /**
+   * Various properties can display a reference element. E.g. position displays an offset
+   * parent if its value is other than fixed or static. Or z-index displays a stacking
+   * context, etc.
+   * This returns the right element if there needs to be one, and one was passed in the
+   * props.
+   *
+   * @return {Object} An object with 2 properties:
+   * - referenceElement {NodeFront}
+   * - referenceElementType {String}
+   */
+  getReferenceElement(propertyName) {
+    const value = this.props.boxModel.layout[propertyName];
+
+    if (
+      propertyName === "position" &&
+      value !== "static" &&
+      value !== "fixed" &&
+      this.props.boxModel.offsetParent
+    ) {
+      return {
+        referenceElement: this.props.boxModel.offsetParent,
+        referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent"),
+      };
+    }
+
+    return {};
+  }
+
+  onToggleExpander(event) {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+    event.stopPropagation();
+  }
+
+  render() {
+    const { boxModel, dispatch, setSelectedNode } = this.props;
+    const { layout } = boxModel;
+
+    const layoutInfo = [
+      "box-sizing",
+      "display",
+      "float",
+      "line-height",
+      "position",
+      "z-index",
+    ];
+
+    const properties = layoutInfo.map(info => {
+      const { referenceElement, referenceElementType } =
+        this.getReferenceElement(info);
+
+      return ComputedProperty({
+        dispatch,
+        key: info,
+        name: info,
+        referenceElement,
+        referenceElementType,
+        setSelectedNode,
+        value: layout[info],
+      });
+    });
+
+    return dom.div(
+      { className: "layout-properties" },
+      dom.div(
+        {
+          className: "layout-properties-header",
+          role: "heading",
+          "aria-level": "3",
+          onDoubleClick: this.onToggleExpander,
+        },
+        dom.span({
+          className: "layout-properties-expander theme-twisty",
+          open: this.state.isOpen,
+          role: "button",
+          "aria-label": BOXMODEL_L10N.getStr(
+            this.state.isOpen
+              ? "boxmodel.propertiesHideLabel"
+              : "boxmodel.propertiesShowLabel"
+          ),
+          onClick: this.onToggleExpander,
+        }),
+        BOXMODEL_L10N.getStr("boxmodel.propertiesLabel")
+      ),
+      dom.div(
+        {
+          className: "layout-properties-wrapper devtools-monospace",
+          hidden: !this.state.isOpen,
+          role: "table",
+        },
+        properties
+      )
+    );
+  }
+}
+
+module.exports = BoxModelProperties;
diff --git a/devtools/client/inspector/boxmodel/components/ComputedProperty.js b/devtools/client/inspector/boxmodel/components/ComputedProperty.js
new file mode 100644
index 0000000000..330ae7512e
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/ComputedProperty.js
@@ -0,0 +1,123 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+loader.lazyRequireGetter(
+  this,
+  "getNodeRep",
+  "resource://devtools/client/inspector/shared/node-reps.js"
+);
+
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
+
+const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
+const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
+
+class ComputedProperty extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      name: PropTypes.string.isRequired,
+      referenceElement: PropTypes.object,
+      referenceElementType: PropTypes.string,
+      setSelectedNode: PropTypes.func,
+      value: PropTypes.string,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.renderReferenceElementPreview =
+      this.renderReferenceElementPreview.bind(this);
+  }
+
+  renderReferenceElementPreview() {
+    const {
+      dispatch,
+      referenceElement,
+      referenceElementType,
+      setSelectedNode,
+    } = this.props;
+
+    if (!referenceElement) {
+      return null;
+    }
+
+    return dom.div(
+      { className: "reference-element" },
+      dom.span(
+        {
+          className: "reference-element-type",
+          role: "button",
+          title: BOXMODEL_L10N.getStr("boxmodel.offsetParent.title"),
+        },
+        referenceElementType
+      ),
+      getNodeRep(referenceElement, {
+        onInspectIconClick: () =>
+          setSelectedNode(referenceElement, { reason: "box-model" }),
+        onDOMNodeMouseOver: () => dispatch(highlightNode(referenceElement)),
+        onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
+      })
+    );
+  }
+
+  render() {
+    const { name, value } = this.props;
+
+    return dom.div(
+      {
+        className: "computed-property-view",
+        role: "row",
+        "data-property-name": name,
+        ref: container => {
+          this.container = container;
+        },
+      },
+      dom.div(
+        {
+          className: "computed-property-name-container",
+          role: "presentation",
+        },
+        dom.div(
+          {
+            className: "computed-property-name theme-fg-color3",
+            role: "cell",
+            title: name,
+          },
+          name
+        )
+      ),
+      dom.div(
+        {
+          className: "computed-property-value-container",
+          role: "presentation",
+        },
+        dom.div(
+          {
+            className: "computed-property-value theme-fg-color1",
+            dir: "ltr",
+            role: "cell",
+          },
+          value
+        ),
+        this.renderReferenceElementPreview()
+      )
+    );
+  }
+}
+
+module.exports = ComputedProperty;
diff --git a/devtools/client/inspector/boxmodel/components/moz.build b/devtools/client/inspector/boxmodel/components/moz.build
new file mode 100644
index 0000000000..ed57c93eb7
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/moz.build
@@ -0,0 +1,14 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "BoxModel.js",
+    "BoxModelEditable.js",
+    "BoxModelInfo.js",
+    "BoxModelMain.js",
+    "BoxModelProperties.js",
+    "ComputedProperty.js",
+)
diff --git a/devtools/client/inspector/boxmodel/moz.build b/devtools/client/inspector/boxmodel/moz.build
new file mode 100644
index 0000000000..df8e53009e
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/moz.build
@@ -0,0 +1,19 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "actions",
+    "components",
+    "reducers",
+    "utils",
+]
+
+DevToolsModules(
+    "box-model.js",
+    "types.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/devtools/client/inspector/boxmodel/reducers/box-model.js b/devtools/client/inspector/boxmodel/reducers/box-model.js
new file mode 100644
index 0000000000..ea3863e56a
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/reducers/box-model.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_GEOMETRY_EDITOR_ENABLED,
+  UPDATE_LAYOUT,
+  UPDATE_OFFSET_PARENT,
+} = require("resource://devtools/client/inspector/boxmodel/actions/index.js");
+
+const INITIAL_BOX_MODEL = {
+  geometryEditorEnabled: false,
+  layout: {},
+  offsetParent: null,
+};
+
+const reducers = {
+  [UPDATE_GEOMETRY_EDITOR_ENABLED](boxModel, { enabled }) {
+    return Object.assign({}, boxModel, {
+      geometryEditorEnabled: enabled,
+    });
+  },
+
+  [UPDATE_LAYOUT](boxModel, { layout }) {
+    return Object.assign({}, boxModel, {
+      layout,
+    });
+  },
+
+  [UPDATE_OFFSET_PARENT](boxModel, { offsetParent }) {
+    return Object.assign({}, boxModel, {
+      offsetParent,
+    });
+  },
+};
+
+module.exports = function (boxModel = INITIAL_BOX_MODEL, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return boxModel;
+  }
+  return reducer(boxModel, action);
+};
diff --git a/devtools/client/inspector/boxmodel/reducers/moz.build b/devtools/client/inspector/boxmodel/reducers/moz.build
new file mode 100644
index 0000000000..fe216631de
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/reducers/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "box-model.js",
+)
diff --git a/devtools/client/inspector/boxmodel/test/browser.toml b/devtools/client/inspector/boxmodel/test/browser.toml
new file mode 100644
index 0000000000..4da0e53eeb
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser.toml
@@ -0,0 +1,72 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_boxmodel_iframe1.html",
+  "doc_boxmodel_iframe2.html",
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_boxmodel.js"]
+
+["browser_boxmodel_edit-position-visible-position-change.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_editablemodel.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_editablemodel_allproperties.js"]
+disabled = "too many intermittent failures (bug 1009322)"
+
+["browser_boxmodel_editablemodel_bluronclick.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_editablemodel_border.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_editablemodel_pseudo.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_editablemodel_stylerules.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_guides.js"]
+
+["browser_boxmodel_jump-to-rule-on-hover.js"]
+
+["browser_boxmodel_layout-accordion-state.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_navigation.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_offsetparent.js"]
+
+["browser_boxmodel_positions.js"]
+
+["browser_boxmodel_properties.js"]
+
+["browser_boxmodel_pseudo-element.js"]
+
+["browser_boxmodel_rotate-labels-on-sides.js"]
+
+["browser_boxmodel_show-tooltip-for-unassociated-rule.js"]
+
+["browser_boxmodel_sync.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_boxmodel_tooltips.js"]
+skip-if = ["true"] # Bug 1336198
+
+["browser_boxmodel_update-after-navigation.js"]
+skip-if = ["(os == 'linux' || os == 'win') && bits == 64"] #Bug 1582395
+
+["browser_boxmodel_update-after-reload.js"]
+
+["browser_boxmodel_update-in-iframes.js"]
+disabled = "Bug 1020038 boxmodel-view updates for iframe elements changes"
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
new file mode 100644
index 0000000000..f5017a5f70
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
@@ -0,0 +1,201 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model displays the right values and that it updates when
+// the node's style is changed
+
+// Expected values:
+var res1 = [
+  {
+    selector: ".boxmodel-element-size",
+    value: "160" + "\u00D7" + "160.117",
+  },
+  {
+    selector: ".boxmodel-size > .boxmodel-width",
+    value: "100",
+  },
+  {
+    selector: ".boxmodel-size > .boxmodel-height",
+    value: "100.117",
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-top > span",
+    value: "42",
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-left > span",
+    value: "42",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-top > span",
+    value: "30",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-left > span",
+    value: "auto",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-bottom > span",
+    value: "30",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-right > span",
+    value: "auto",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-top > span",
+    value: "20",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-left > span",
+    value: "20",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-bottom > span",
+    value: "20",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-right > span",
+    value: "20",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-top > span",
+    value: "10",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-left > span",
+    value: "10",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-bottom > span",
+    value: "10",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-right > span",
+    value: "10",
+  },
+];
+
+var res2 = [
+  {
+    selector: ".boxmodel-element-size",
+    value: "190" + "\u00D7" + "210",
+  },
+  {
+    selector: ".boxmodel-size > .boxmodel-width",
+    value: "100",
+  },
+  {
+    selector: ".boxmodel-size > .boxmodel-height",
+    value: "150",
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-top > span",
+    value: "50",
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-left > span",
+    value: "42",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-top > span",
+    value: "30",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-left > span",
+    value: "auto",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-bottom > span",
+    value: "30",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-right > span",
+    value: "auto",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-top > span",
+    value: "20",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-left > span",
+    value: "20",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-bottom > span",
+    value: "20",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-right > span",
+    value: "50",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-top > span",
+    value: "10",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-left > span",
+    value: "10",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-bottom > span",
+    value: "10",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-right > span",
+    value: "10",
+  },
+];
+
+add_task(async function () {
+  const style =
+    "div { position: absolute; top: 42px; left: 42px; " +
+    "height: 100.111px; width: 100px; border: 10px solid black; " +
+    "padding: 20px; margin: 30px auto;}";
+  const html = "<style>" + style + "</style><div></div>";
+
+  await addTab("data:text/html," + encodeURIComponent(html));
+  const { inspector, boxmodel } = await openLayoutView();
+  await selectNode("div", inspector);
+
+  await testInitialValues(inspector, boxmodel);
+  await testChangingValues(inspector, boxmodel);
+});
+
+function testInitialValues(inspector, boxmodel) {
+  info("Test that the initial values of the box model are correct");
+  const doc = boxmodel.document;
+
+  for (let i = 0; i < res1.length; i++) {
+    const elt = doc.querySelector(res1[i].selector);
+    is(
+      elt.textContent,
+      res1[i].value,
+      res1[i].selector + " has the right value."
+    );
+  }
+}
+
+async function testChangingValues(inspector, boxmodel) {
+  info("Test that changing the document updates the box model");
+  const doc = boxmodel.document;
+
+  const onUpdated = waitForUpdate(inspector);
+  await setContentPageElementAttribute(
+    "div",
+    "style",
+    "height:150px;padding-right:50px;top:50px"
+  );
+  await onUpdated;
+
+  for (let i = 0; i < res2.length; i++) {
+    const elt = doc.querySelector(res2[i].selector);
+    is(
+      elt.textContent,
+      res2[i].value,
+      res2[i].selector + " has the right value after style update."
+    );
+  }
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js
new file mode 100644
index 0000000000..0cae75aaaf
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the 'Edit Position' button is still visible after
+// layout is changed.
+// see bug 1398722
+
+const TEST_URI = `
+  <div id="mydiv" style="background:tomato;
+    position:absolute;
+    top:10px;
+    left:10px;
+    width:100px;
+    height:100px">
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  await selectNode("#mydiv", inspector);
+  let editPositionButton = boxmodel.document.querySelector(
+    ".layout-geometry-editor"
+  );
+
+  ok(
+    isNodeVisible(editPositionButton),
+    "Edit Position button is visible initially"
+  );
+
+  const positionLeftTextbox = boxmodel.document.querySelector(
+    ".boxmodel-editable[title=position-left]"
+  );
+  ok(isNodeVisible(positionLeftTextbox), "Position-left edit box exists");
+
+  info("Change the value of position-left and submit");
+  const onUpdate = waitForUpdate(inspector);
+  EventUtils.synthesizeMouseAtCenter(
+    positionLeftTextbox,
+    {},
+    boxmodel.document.defaultView
+  );
+  EventUtils.synthesizeKey("8", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  await onUpdate;
+  editPositionButton = boxmodel.document.querySelector(
+    ".layout-geometry-editor"
+  );
+  ok(
+    isNodeVisible(editPositionButton),
+    "Edit Position button is still visible after layout change"
+  );
+});
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
new file mode 100644
index 0000000000..262a28cc5f
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
@@ -0,0 +1,279 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing the box-model values works as expected and test various
+// key bindings
+
+const TEST_URI =
+  "<style>" +
+  "div { margin: 10px; padding: 3px }" +
+  "#div1 { margin-top: 5px }" +
+  "#div2 { border-bottom: 1em solid black; }" +
+  "#div3 { padding: 2em; }" +
+  "#div4 { margin: 1px; }" +
+  "</style>" +
+  "<div id='div1'></div><div id='div2'></div>" +
+  "<div id='div3'></div><div id='div4'></div>";
+
+add_task(async function () {
+  // Make sure the toolbox is tall enough to have empty space below the
+  // boxmodel-container.
+  await pushPref("devtools.toolbox.footer.height", 500);
+
+  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  const browser = tab.linkedBrowser;
+  await testEditingMargins(inspector, boxmodel, browser);
+  await testKeyBindings(inspector, boxmodel, browser);
+  await testEscapeToUndo(inspector, boxmodel, browser);
+  await testDeletingValue(inspector, boxmodel, browser);
+  await testRefocusingOnClick(inspector, boxmodel, browser);
+});
+
+async function testEditingMargins(inspector, boxmodel, browser) {
+  info(
+    "Test that editing margin dynamically updates the document, pressing " +
+      "escape cancels the changes"
+  );
+
+  is(
+    await getStyle(browser, "#div1", "margin-top"),
+    "",
+    "Should be no margin-top on the element."
+  );
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-top > span"
+  );
+  await waitForElementTextContent(span, "5");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "5px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("3", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(
+    await getStyle(browser, "#div1", "margin-top"),
+    "3px",
+    "Should have updated the margin."
+  );
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(
+    await getStyle(browser, "#div1", "margin-top"),
+    "",
+    "Should be no margin-top on the element."
+  );
+
+  await waitForElementTextContent(span, "5");
+}
+
+async function testKeyBindings(inspector, boxmodel, browser) {
+  info(
+    "Test that arrow keys work correctly and pressing enter commits the " +
+      "changes"
+  );
+
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "",
+    "Should be no margin-top on the element."
+  );
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-left > span"
+  );
+  is(span.textContent, "10", "Should have the right value in the box model.");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "10px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("VK_UP", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "11px", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "11px",
+    "Should have updated the margin."
+  );
+
+  EventUtils.synthesizeKey("VK_DOWN", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "10px", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "10px",
+    "Should have updated the margin."
+  );
+
+  EventUtils.synthesizeKey(
+    "VK_UP",
+    { shiftKey: true },
+    boxmodel.document.defaultView
+  );
+  await waitForUpdate(inspector);
+
+  is(editor.value, "20px", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "20px",
+    "Should have updated the margin."
+  );
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "20px",
+    "Should be the right margin-top on the element."
+  );
+
+  await waitForElementTextContent(span, "20");
+}
+
+async function testEscapeToUndo(inspector, boxmodel, browser) {
+  info(
+    "Test that deleting the value removes the property but escape undoes " +
+      "that"
+  );
+
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "20px",
+    "Should be the right margin-top on the element."
+  );
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-left > span"
+  );
+  is(span.textContent, "20", "Should have the right value in the box model.");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "20px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "",
+    "Should have updated the margin."
+  );
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(
+    await getStyle(browser, "#div1", "margin-left"),
+    "20px",
+    "Should be the right margin-top on the element."
+  );
+  is(span.textContent, "20", "Should have the right value in the box model.");
+}
+
+async function testDeletingValue(inspector, boxmodel, browser) {
+  info("Test that deleting the value removes the property");
+
+  await setStyle(browser, "#div1", "marginRight", "15px");
+  await waitForUpdate(inspector);
+
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-right > span"
+  );
+  is(span.textContent, "15", "Should have the right value in the box model.");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "15px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "margin-right"),
+    "",
+    "Should have updated the margin."
+  );
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div1", "margin-right"),
+    "",
+    "Should be the right margin-top on the element."
+  );
+  await waitForElementTextContent(span, "10");
+}
+
+async function testRefocusingOnClick(inspector, boxmodel, browser) {
+  info("Test that clicking in the editor input does not remove focus");
+
+  await selectNode("#div4", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-top > span"
+  );
+  is(span.textContent, "1", "Should have the right value in the box model.");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+
+  info("Click in the already opened editor input");
+  EventUtils.synthesizeMouseAtCenter(editor, {}, boxmodel.document.defaultView);
+  is(
+    editor,
+    boxmodel.document.activeElement,
+    "Inplace editor input should still have focus."
+  );
+
+  info("Check the input can still be used as expected");
+  EventUtils.synthesizeKey("VK_UP", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "2px", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div4", "margin-top"),
+    "2px",
+    "Should have updated the margin."
+  );
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div4", "margin-top"),
+    "2px",
+    "Should be the right margin-top on the element."
+  );
+  await waitForElementTextContent(span, "2");
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
new file mode 100644
index 0000000000..a465d50e4f
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
@@ -0,0 +1,191 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing box model values when all values are set
+
+const TEST_URI =
+  "<style>" +
+  "div { margin: 10px; padding: 3px }" +
+  "#div1 { margin-top: 5px }" +
+  "#div2 { border-bottom: 1em solid black; }" +
+  "#div3 { padding: 2em; }" +
+  "</style>" +
+  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
+
+add_task(async function () {
+  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  const browser = tab.linkedBrowser;
+  await testEditing(inspector, boxmodel, browser);
+  await testEditingAndCanceling(inspector, boxmodel, browser);
+  await testDeleting(inspector, boxmodel, browser);
+  await testDeletingAndCanceling(inspector, boxmodel, browser);
+});
+
+async function testEditing(inspector, boxmodel, browser) {
+  info("When all properties are set on the node editing one should work");
+
+  await setStyle(browser, "#div1", "padding", "5px");
+  await waitForUpdate(inspector);
+
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-bottom > span"
+  );
+  await waitForElementTextContent(span, "5");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "5px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "7", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "padding-bottom"),
+    "7px",
+    "Should have updated the padding"
+  );
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div1", "padding-bottom"),
+    "7px",
+    "Should be the right padding."
+  );
+  await waitForElementTextContent(span, "7");
+}
+
+async function testEditingAndCanceling(inspector, boxmodel, browser) {
+  info(
+    "When all properties are set on the node editing one and then " +
+      "cancelling with ESCAPE should work"
+  );
+
+  await setStyle(browser, "#div1", "padding", "5px");
+  await waitForUpdate(inspector);
+
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-left > span"
+  );
+  await waitForElementTextContent(span, "5");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "5px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("8", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "8", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "padding-left"),
+    "8px",
+    "Should have updated the padding"
+  );
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(
+    await getStyle(browser, "#div1", "padding-left"),
+    "5px",
+    "Should be the right padding."
+  );
+  await waitForElementTextContent(span, "5");
+}
+
+async function testDeleting(inspector, boxmodel, browser) {
+  info("When all properties are set on the node deleting one should work");
+
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-left > span"
+  );
+  await waitForElementTextContent(span, "5");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "5px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "padding-left"),
+    "",
+    "Should have updated the padding"
+  );
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div1", "padding-left"),
+    "",
+    "Should be the right padding."
+  );
+  await waitForElementTextContent(span, "3");
+}
+
+async function testDeletingAndCanceling(inspector, boxmodel, browser) {
+  info(
+    "When all properties are set on the node deleting one then cancelling " +
+      "should work"
+  );
+
+  await setStyle(browser, "#div1", "padding", "5px");
+  await waitForUpdate(inspector);
+
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-left > span"
+  );
+  await waitForElementTextContent(span, "5");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "5px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "padding-left"),
+    "",
+    "Should have updated the padding"
+  );
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(
+    await getStyle(browser, "#div1", "padding-left"),
+    "5px",
+    "Should be the right padding."
+  );
+  await waitForElementTextContent(span, "5");
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
new file mode 100644
index 0000000000..3e40eda951
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
@@ -0,0 +1,97 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that inplace editors can be blurred by clicking outside of the editor.
+
+const TEST_URI = `<style>
+    #div1 {
+      margin: 10px;
+      padding: 3px;
+    }
+  </style>
+  <div id="div1"></div>`;
+
+add_task(async function () {
+  // Make sure the toolbox is tall enough to have empty space below the
+  // boxmodel-container.
+  await pushPref("devtools.toolbox.footer.height", 500);
+
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  await selectNode("#div1", inspector);
+  await testClickingOutsideEditor(boxmodel);
+  await testClickingBelowContainer(boxmodel);
+});
+
+async function testClickingOutsideEditor(boxmodel) {
+  info("Test that clicking outside the editor blurs it");
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-top > span"
+  );
+  await waitForElementTextContent(span, "10");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+
+  info("Click next to the opened editor input.");
+  const onBlur = once(editor, "blur");
+  const rect = editor.getBoundingClientRect();
+  EventUtils.synthesizeMouse(
+    editor,
+    rect.width + 10,
+    rect.height / 2,
+    {},
+    boxmodel.document.defaultView
+  );
+  await onBlur;
+
+  is(
+    boxmodel.document.querySelector(".styleinspector-propertyeditor"),
+    null,
+    "Inplace editor has been removed."
+  );
+}
+
+async function testClickingBelowContainer(boxmodel) {
+  info("Test that clicking below the box-model container blurs it");
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-top > span"
+  );
+  await waitForElementTextContent(span, "10");
+
+  info(
+    "Test that clicking below the boxmodel-container blurs the opened editor"
+  );
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+
+  const onBlur = once(editor, "blur");
+  const container = boxmodel.document.querySelector(".boxmodel-container");
+  // Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
+  // use an erroneous height of ~50px for the boxmodel-container.
+  const bounds = container
+    .getBoxQuads({ relativeTo: boxmodel.document })[0]
+    .getBounds();
+  EventUtils.synthesizeMouseAtPoint(
+    bounds.left + 10,
+    bounds.top + bounds.height + 10,
+    {},
+    boxmodel.document.defaultView
+  );
+  await onBlur;
+
+  is(
+    boxmodel.document.querySelector(".styleinspector-propertyeditor"),
+    null,
+    "Inplace editor has been removed."
+  );
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
new file mode 100644
index 0000000000..98372cabbc
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing the border value in the box model applies the border style
+
+const TEST_URI =
+  "<style>" +
+  "div { margin: 10px; padding: 3px }" +
+  "#div1 { margin-top: 5px }" +
+  "#div2 { border-bottom: 1em solid black; }" +
+  "#div3 { padding: 2em; }" +
+  "</style>" +
+  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
+
+add_task(async function () {
+  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  const browser = tab.linkedBrowser;
+  is(
+    await getStyle(browser, "#div1", "border-top-width"),
+    "",
+    "Should have the right border"
+  );
+  is(
+    await getStyle(browser, "#div1", "border-top-style"),
+    "",
+    "Should have the right border"
+  );
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-border.boxmodel-top > span"
+  );
+  await waitForElementTextContent(span, "0");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "0", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("1", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "1", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "border-top-width"),
+    "1px",
+    "Should have the right border"
+  );
+  is(
+    await getStyle(browser, "#div1", "border-top-style"),
+    "solid",
+    "Should have the right border"
+  );
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(
+    await getStyle(browser, "#div1", "border-top-width"),
+    "",
+    "Should be the right padding."
+  );
+  is(
+    await getStyle(browser, "#div1", "border-top-style"),
+    "",
+    "Should have the right border"
+  );
+  await waitForElementTextContent(span, "0");
+});
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
new file mode 100644
index 0000000000..b2f96fc522
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that pseudo elements have no side effect on the box model widget for their
+// container. See bug 1350499.
+
+const TEST_URI = `<style>
+    .test::before {
+      content: 'before';
+      margin-top: 5px;
+      padding-top: 5px;
+      width: 5px;
+    }
+  </style>
+  <div style='width:200px;'>
+    <div class=test></div>
+  </div>`;
+
+add_task(async function () {
+  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  const browser = tab.linkedBrowser;
+
+  await selectNode(".test", inspector);
+
+  // No margin-top defined.
+  info("Test that margins are not impacted by a pseudo element");
+  is(
+    await getStyle(browser, ".test", "margin-top"),
+    "",
+    "margin-top is correct"
+  );
+  await checkValueInBoxModel(
+    ".boxmodel-margin.boxmodel-top",
+    "0",
+    boxmodel.document
+  );
+
+  // No padding-top defined.
+  info("Test that paddings are not impacted by a pseudo element");
+  is(
+    await getStyle(browser, ".test", "padding-top"),
+    "",
+    "padding-top is correct"
+  );
+  await checkValueInBoxModel(
+    ".boxmodel-padding.boxmodel-top",
+    "0",
+    boxmodel.document
+  );
+
+  // Width should be driven by the parent div.
+  info("Test that dimensions are not impacted by a pseudo element");
+  is(await getStyle(browser, ".test", "width"), "", "width is correct");
+  await checkValueInBoxModel(
+    ".boxmodel-content.boxmodel-width",
+    "200",
+    boxmodel.document
+  );
+});
+
+async function checkValueInBoxModel(selector, expectedValue, doc) {
+  const span = doc.querySelector(selector + " > span");
+  await waitForElementTextContent(span, expectedValue);
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, doc.defaultView);
+  const editor = doc.querySelector(".styleinspector-propertyeditor");
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, expectedValue, "Should have the right value in the editor.");
+
+  const onBlur = once(editor, "blur");
+  EventUtils.synthesizeKey("VK_RETURN", {}, doc.defaultView);
+  await onBlur;
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
new file mode 100644
index 0000000000..06b2467d1d
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
@@ -0,0 +1,153 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that units are displayed correctly when editing values in the box model
+// and that values are retrieved and parsed correctly from the back-end
+
+const TEST_URI =
+  "<style>" +
+  "div { margin: 10px; padding: 3px }" +
+  "#div1 { margin-top: 5px }" +
+  "#div2 { border-bottom: 1em solid black; }" +
+  "#div3 { padding: 2em; }" +
+  "</style>" +
+  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
+
+add_task(async function () {
+  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const browser = tab.linkedBrowser;
+  const { inspector, boxmodel } = await openLayoutView();
+
+  await testUnits(inspector, boxmodel, browser);
+  await testValueComesFromStyleRule(inspector, boxmodel, browser);
+  await testShorthandsAreParsed(inspector, boxmodel, browser);
+});
+
+async function testUnits(inspector, boxmodel, browser) {
+  info("Test that entering units works");
+
+  is(
+    await getStyle(browser, "#div1", "padding-top"),
+    "",
+    "Should have the right padding"
+  );
+  await selectNode("#div1", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-top > span"
+  );
+  await waitForElementTextContent(span, "3");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "3px", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("1", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+  EventUtils.synthesizeKey("e", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(
+    await getStyle(browser, "#div1", "padding-top"),
+    "",
+    "An invalid value is handled cleanly"
+  );
+
+  EventUtils.synthesizeKey("m", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "1em", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div1", "padding-top"),
+    "1em",
+    "Should have updated the padding."
+  );
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div1", "padding-top"),
+    "1em",
+    "Should be the right padding."
+  );
+  await waitForElementTextContent(span, "16");
+}
+
+async function testValueComesFromStyleRule(inspector, boxmodel, browser) {
+  info("Test that we pick up the value from a higher style rule");
+
+  is(
+    await getStyle(browser, "#div2", "border-bottom-width"),
+    "",
+    "Should have the right border-bottom-width"
+  );
+  await selectNode("#div2", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-border.boxmodel-bottom > span"
+  );
+  await waitForElementTextContent(span, "16");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "1em", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("0", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+
+  is(editor.value, "0", "Should have the right value in the editor.");
+  is(
+    await getStyle(browser, "#div2", "border-bottom-width"),
+    "0px",
+    "Should have updated the border."
+  );
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div2", "border-bottom-width"),
+    "0px",
+    "Should be the right border-bottom-width."
+  );
+  await waitForElementTextContent(span, "0");
+}
+
+async function testShorthandsAreParsed(inspector, boxmodel, browser) {
+  info("Test that shorthand properties are parsed correctly");
+
+  is(
+    await getStyle(browser, "#div3", "padding-right"),
+    "",
+    "Should have the right padding"
+  );
+  await selectNode("#div3", inspector);
+
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-right > span"
+  );
+  await waitForElementTextContent(span, "32");
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, "2em", "Should have the right value in the editor.");
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  is(
+    await getStyle(browser, "#div3", "padding-right"),
+    "",
+    "Should be the right padding."
+  );
+  await waitForElementTextContent(span, "32");
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js
new file mode 100644
index 0000000000..341b8f525a
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that hovering over regions in the box-model shows the highlighter with
+// the right options.
+// Tests that actually check the highlighter is displayed and correct are in the
+// devtools/inspector/test folder. This test only cares about checking that the
+// box model view does call the highlighter, and it does so by mocking it.
+
+const STYLE =
+  "div { position: absolute; top: 50px; left: 50px; " +
+  "height: 10px; width: 10px; border: 10px solid black; " +
+  "padding: 10px; margin: 10px;}";
+const HTML = "<style>" + STYLE + "</style><div></div>";
+const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, boxmodel } = await openLayoutView();
+  await selectNode("div", inspector);
+
+  let elt = boxmodel.document.querySelector(".boxmodel-margins");
+  await testGuideOnLayoutHover(elt, "margin", inspector);
+
+  elt = boxmodel.document.querySelector(".boxmodel-borders");
+  await testGuideOnLayoutHover(elt, "border", inspector);
+
+  elt = boxmodel.document.querySelector(".boxmodel-paddings");
+  await testGuideOnLayoutHover(elt, "padding", inspector);
+
+  elt = boxmodel.document.querySelector(".boxmodel-content");
+  await testGuideOnLayoutHover(elt, "content", inspector);
+});
+
+async function testGuideOnLayoutHover(elt, expectedRegion, inspector) {
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  info("Synthesizing mouseover on the boxmodel-view");
+  EventUtils.synthesizeMouse(
+    elt,
+    50,
+    2,
+    { type: "mouseover" },
+    elt.ownerDocument.defaultView
+  );
+
+  info("Waiting for the node-highlight event from the toolbox");
+  const { nodeFront, options } = await onHighlighterShown;
+
+  // Wait for the next event tick to make sure the remaining part of the
+  // test is executed after finishing synthesizing mouse event.
+  await new Promise(executeSoon);
+
+  is(
+    nodeFront,
+    inspector.selection.nodeFront,
+    "The right nodeFront was highlighted"
+  );
+  is(
+    options.region,
+    expectedRegion,
+    "Region " + expectedRegion + " was highlighted"
+  );
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_jump-to-rule-on-hover.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_jump-to-rule-on-hover.js
new file mode 100644
index 0000000000..74f382259e
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_jump-to-rule-on-hover.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that hovering over a box model value will jump to its source CSS rule in the
+// rules view when the shift key is pressed.
+
+const TEST_URI = `<style>
+    #box {
+      margin: 5px;
+    }
+  </style>
+  <div id="box"></div>`;
+
+add_task(async function () {
+  await pushPref("devtools.layout.boxmodel.highlightProperty", true);
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  await selectNode("#box", inspector);
+
+  info(
+    "Test that hovering over margin-top value highlights the property in rules view."
+  );
+  const ruleView = await inspector.getPanel("ruleview").view;
+  const el = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-top > span"
+  );
+
+  info("Wait for mouse to hover over margin-top element.");
+  const onHighlightProperty = ruleView.once("scrolled-to-element");
+  EventUtils.synthesizeMouseAtCenter(
+    el,
+    { type: "mousemove", shiftKey: true },
+    boxmodel.document.defaultView
+  );
+  await onHighlightProperty;
+
+  info("Check that margin-top is visible in the rule view.");
+  const { rules, styleWindow } = ruleView;
+  const marginTop = rules[1].textProps[0].computed[0];
+  ok(
+    isInViewport(marginTop.element, styleWindow),
+    "margin-top is visible in the rule view."
+  );
+});
+
+function isInViewport(element, win) {
+  const { top, left, bottom, right } = element.getBoundingClientRect();
+  return (
+    top >= 0 &&
+    bottom <= win.innerHeight &&
+    left >= 0 &&
+    right <= win.innerWidth
+  );
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_layout-accordion-state.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_layout-accordion-state.js
new file mode 100644
index 0000000000..d6802f4e5d
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_layout-accordion-state.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the box model's accordion state is persistent through hide/show in the
+// layout view.
+
+const TEST_URI = `
+  <style>
+    #div1 {
+      margin: 10px;
+      padding: 3px;
+    }
+  </style>
+  <div id="div1"></div>
+`;
+
+const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
+const ACCORDION_HEADER_SELECTOR = ".accordion-header";
+const ACCORDION_CONTENT_SELECTOR = ".accordion-content";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel, toolbox } = await openLayoutView();
+  const { document: doc } = boxmodel;
+
+  await testAccordionStateAfterClickingHeader(doc);
+  await testAccordionStateAfterSwitchingSidebars(inspector, doc);
+  await testAccordionStateAfterReopeningLayoutView(toolbox);
+
+  Services.prefs.clearUserPref(BOXMODEL_OPENED_PREF);
+});
+
+function testAccordionStateAfterClickingHeader(doc) {
+  const item = doc.querySelector("#layout-section-boxmodel");
+  const header = item.querySelector(ACCORDION_HEADER_SELECTOR);
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  info("Checking initial state of the box model panel.");
+  ok(
+    !content.hidden && content.childElementCount > 0,
+    "The box model panel content is visible."
+  );
+  ok(
+    Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
+    `${BOXMODEL_OPENED_PREF} is pref on by default.`
+  );
+
+  info("Clicking the box model header to hide the box model panel.");
+  header.click();
+
+  info("Checking the new state of the box model panel.");
+  ok(content.hidden, "The box model panel content is hidden.");
+  ok(
+    !Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
+    `${BOXMODEL_OPENED_PREF} is pref off.`
+  );
+}
+
+function testAccordionStateAfterSwitchingSidebars(inspector, doc) {
+  info(
+    "Checking the box model accordion state is persistent after switching sidebars."
+  );
+
+  info("Selecting the computed view.");
+  inspector.sidebar.select("computedview");
+
+  info("Selecting the layout view.");
+  inspector.sidebar.select("layoutview");
+
+  info("Checking the state of the box model panel.");
+  const item = doc.querySelector("#layout-section-boxmodel");
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  ok(content.hidden, "The box model panel content is hidden.");
+  ok(
+    !Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
+    `${BOXMODEL_OPENED_PREF} is pref off.`
+  );
+}
+
+async function testAccordionStateAfterReopeningLayoutView(toolbox) {
+  info(
+    "Checking the box model accordion state is persistent after closing and " +
+      "re-opening the layout view."
+  );
+
+  info("Closing the toolbox.");
+  await toolbox.destroy();
+
+  info("Re-opening the layout view.");
+  const { boxmodel } = await openLayoutView();
+  const item = boxmodel.document.querySelector("#layout-section-boxmodel");
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  info("Checking the state of the box model panel.");
+  ok(content.hidden, "The box model panel content is hidden.");
+  ok(
+    !Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
+    `${BOXMODEL_OPENED_PREF} is pref off.`
+  );
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
new file mode 100644
index 0000000000..7274092a1a
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
@@ -0,0 +1,200 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that keyboard and mouse navigation updates aria-active and focus
+// of elements.
+
+const TEST_URI = `
+  <style>
+  div { position: absolute; top: 42px; left: 42px;
+  height: 100.111px; width: 100px; border: 10px solid black;
+  padding: 20px; margin: 30px auto;}
+  </style><div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  await selectNode("div", inspector);
+
+  await testInitialFocus(inspector, boxmodel);
+  await testChangingLevels(inspector, boxmodel);
+  await testTabbingThroughItems(inspector, boxmodel);
+  await testChangingLevelsByClicking(inspector, boxmodel);
+});
+
+function testInitialFocus(inspector, boxmodel) {
+  info("Test that the focus is(on margin layout.");
+  const doc = boxmodel.document;
+  const container = doc.querySelector(".boxmodel-container");
+  container.focus();
+  EventUtils.synthesizeKey("KEY_Enter");
+
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-main devtools-monospace",
+    "Should be set to the position layout."
+  );
+}
+
+function testChangingLevels(inspector, boxmodel) {
+  info("Test that using arrow keys updates level.");
+  const doc = boxmodel.document;
+  const container = doc.querySelector(".boxmodel-container");
+  container.focus();
+  EventUtils.synthesizeKey("KEY_Enter");
+  EventUtils.synthesizeKey("KEY_Escape");
+
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-margins",
+    "Should be set to the margin layout."
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-borders",
+    "Should be set to the border layout."
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-paddings",
+    "Should be set to the padding layout."
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-contents",
+    "Should be set to the content layout."
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-paddings",
+    "Should be set to the padding layout."
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-borders",
+    "Should be set to the border layout."
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-margins",
+    "Should be set to the margin layout."
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(
+    container.dataset.activeDescendantClassName,
+    "boxmodel-main devtools-monospace",
+    "Should be set to the position layout."
+  );
+}
+
+function testTabbingThroughItems(inspector, boxmodel) {
+  info("Test that using Tab key moves focus to next/previous input field.");
+  const doc = boxmodel.document;
+  const container = doc.querySelector(".boxmodel-container");
+  container.focus();
+  EventUtils.synthesizeKey("KEY_Enter");
+
+  const editBoxes = [...doc.querySelectorAll("[data-box].boxmodel-editable")];
+
+  const editBoxesInfo = [
+    { name: "position-top", itemId: "position-top-id" },
+    { name: "position-right", itemId: "position-right-id" },
+    { name: "position-bottom", itemId: "position-bottom-id" },
+    { name: "position-left", itemId: "position-left-id" },
+    { name: "margin-top", itemId: "margin-top-id" },
+    { name: "margin-right", itemId: "margin-right-id" },
+    { name: "margin-bottom", itemId: "margin-bottom-id" },
+    { name: "margin-left", itemId: "margin-left-id" },
+    { name: "border-top-width", itemId: "border-top-width-id" },
+    { name: "border-right-width", itemId: "border-right-width-id" },
+    { name: "border-bottom-width", itemId: "border-bottom-width-id" },
+    { name: "border-left-width", itemId: "border-left-width-id" },
+    { name: "padding-top", itemId: "padding-top-id" },
+    { name: "padding-right", itemId: "padding-right-id" },
+    { name: "padding-bottom", itemId: "padding-bottom-id" },
+    { name: "padding-left", itemId: "padding-left-id" },
+    { name: "width", itemId: "width-id" },
+    { name: "height", itemId: "height-id" },
+  ];
+
+  // Check whether tabbing through box model items works
+  // Note that the test checks whether wrapping around the box model works
+  // by letting the loop run beyond the number of indexes to start with
+  // the first item again.
+  for (let i = 0; i <= editBoxesInfo.length; i++) {
+    const itemIndex = i % editBoxesInfo.length;
+    const editBoxInfo = editBoxesInfo[itemIndex];
+    is(
+      editBoxes[itemIndex].parentElement.id,
+      editBoxInfo.itemId,
+      `${editBoxInfo.name} item is current`
+    );
+    is(
+      editBoxes[itemIndex].previousElementSibling?.localName,
+      "input",
+      `Input shown for ${editBoxInfo.name} item`
+    );
+
+    // Pressing Tab should not be synthesized for the last item to
+    // wrap to the very last item again when tabbing in reversed order.
+    if (i < editBoxesInfo.length) {
+      EventUtils.synthesizeKey("KEY_Tab");
+    }
+  }
+
+  // Check whether reversed tabbing through box model items works
+  for (let i = editBoxesInfo.length; i >= 0; i--) {
+    const itemIndex = i % editBoxesInfo.length;
+    const editBoxInfo = editBoxesInfo[itemIndex];
+    is(
+      editBoxes[itemIndex].parentElement.id,
+      editBoxInfo.itemId,
+      `${editBoxInfo.name} item is current`
+    );
+    is(
+      editBoxes[itemIndex].previousElementSibling?.localName,
+      "input",
+      `Input shown for ${editBoxInfo.name} item`
+    );
+    EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  }
+}
+
+function testChangingLevelsByClicking(inspector, boxmodel) {
+  info("Test that clicking on levels updates level.");
+  const doc = boxmodel.document;
+  const container = doc.querySelector(".boxmodel-container");
+  container.focus();
+
+  const marginLayout = doc.querySelector(".boxmodel-margins");
+  const borderLayout = doc.querySelector(".boxmodel-borders");
+  const paddingLayout = doc.querySelector(".boxmodel-paddings");
+  const contentLayout = doc.querySelector(".boxmodel-contents");
+  const layouts = [contentLayout, paddingLayout, borderLayout, marginLayout];
+
+  layouts.forEach(layout => {
+    layout.click();
+    is(
+      container.dataset.activeDescendantClassName,
+      layout.className,
+      `Should be set to ${layout.getAttribute("data-box")} layout.`
+    );
+  });
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
new file mode 100644
index 0000000000..000d548bdd
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model displays the right values for the offset parent and that it
+// updates when the node's style is changed
+
+const TEST_URI = `
+  <div id="relative_parent" style="position: relative">
+    <div id="absolute_child" style="position: absolute"></div>
+  </div>
+  <div id="static"></div>
+  <div id="no_parent" style="position: absolute"></div>
+  <div id="fixed" style="position: fixed"></div>
+`;
+
+const OFFSET_PARENT_SELECTOR =
+  ".computed-property-value-container .objectBox-node";
+
+const res1 = [
+  {
+    selector: "#absolute_child",
+    offsetParentValue: "div#relative_parent",
+  },
+  {
+    selector: "#no_parent",
+    offsetParentValue: "body",
+  },
+  {
+    selector: "#relative_parent",
+    offsetParentValue: "body",
+  },
+  {
+    selector: "#static",
+    offsetParentValue: null,
+  },
+  {
+    selector: "#fixed",
+    offsetParentValue: null,
+  },
+];
+
+const updates = [
+  {
+    selector: "#absolute_child",
+    update: "position: static",
+  },
+];
+
+const res2 = [
+  {
+    selector: "#absolute_child",
+    offsetParentValue: null,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  await testInitialValues(inspector, boxmodel);
+  await testChangingValues(inspector, boxmodel);
+});
+
+async function testInitialValues(inspector, boxmodel) {
+  info(
+    "Test that the initial values of the box model offset parent are correct"
+  );
+  const viewdoc = boxmodel.document;
+
+  for (const { selector, offsetParentValue } of res1) {
+    await selectNode(selector, inspector);
+
+    const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
+    is(
+      elt && elt.textContent,
+      offsetParentValue,
+      selector + " has the right value."
+    );
+  }
+}
+
+async function testChangingValues(inspector, boxmodel) {
+  info("Test that changing the document updates the box model");
+  const viewdoc = boxmodel.document;
+
+  for (const { selector, update } of updates) {
+    const onUpdated = waitForUpdate(inspector);
+    await setContentPageElementAttribute(selector, "style", update);
+    await onUpdated;
+  }
+
+  for (const { selector, offsetParentValue } of res2) {
+    await selectNode(selector, inspector);
+
+    const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
+    is(
+      elt && elt.textContent,
+      offsetParentValue,
+      selector + " has the right value after style update."
+    );
+  }
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
new file mode 100644
index 0000000000..ca182d7130
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model displays the right values for positions.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      position: absolute;
+      left: 0;
+      margin: 0;
+      padding: 0;
+      display: none;
+      height: 100px;
+      width: 100px;
+      border: 10px solid black;
+    }
+  </style>
+  <div>Test Node</div>
+`;
+
+// Expected values:
+const res1 = [
+  {
+    selector: ".boxmodel-position.boxmodel-top > span",
+    value: "auto",
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-right > span",
+    value: "auto",
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-bottom > span",
+    value: "auto",
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-left > span",
+    value: "0",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  const node = await getNodeFront("div", inspector);
+  const children = await inspector.markup.walker.children(node);
+  const beforeElement = children.nodes[0];
+
+  await selectNode(beforeElement, inspector);
+  await testPositionValues(inspector, boxmodel);
+});
+
+function testPositionValues(inspector, boxmodel) {
+  info("Test that the position values of the box model are correct");
+  const doc = boxmodel.document;
+
+  for (let i = 0; i < res1.length; i++) {
+    const elt = doc.querySelector(res1[i].selector);
+    is(
+      elt.textContent,
+      res1[i].value,
+      res1[i].selector + " has the right value."
+    );
+  }
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
new file mode 100644
index 0000000000..6ebf5ab761
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model properties list displays the right values
+// and that it updates when the node's style is changed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      box-sizing: border-box;
+      display: block;
+      float: left;
+      line-height: 20px;
+      position: relative;
+      z-index: 2;
+      height: 100px;
+      width: 100px;
+      border: 10px solid black;
+      padding: 20px;
+      margin: 30px auto;
+    }
+  </style>
+  <div>Test Node</div>
+`;
+
+const res1 = [
+  {
+    property: "box-sizing",
+    value: "border-box",
+  },
+  {
+    property: "display",
+    value: "block",
+  },
+  {
+    property: "float",
+    value: "left",
+  },
+  {
+    property: "line-height",
+    value: "20px",
+  },
+  {
+    property: "position",
+    value: "relative",
+  },
+  {
+    property: "z-index",
+    value: "2",
+  },
+];
+
+const res2 = [
+  {
+    property: "box-sizing",
+    value: "content-box",
+  },
+  {
+    property: "display",
+    value: "block",
+  },
+  {
+    property: "float",
+    value: "right",
+  },
+  {
+    property: "line-height",
+    value: "10px",
+  },
+  {
+    property: "position",
+    value: "static",
+  },
+  {
+    property: "z-index",
+    value: "5",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  await selectNode("div", inspector);
+
+  await testInitialValues(inspector, boxmodel);
+  await testChangingValues(inspector, boxmodel);
+});
+
+function testInitialValues(inspector, boxmodel) {
+  info("Test that the initial values of the box model are correct");
+  const doc = boxmodel.document;
+
+  for (const { property, value } of res1) {
+    const elt = doc.querySelector(getPropertySelector(property));
+    is(elt.textContent, value, property + " has the right value.");
+  }
+}
+
+async function testChangingValues(inspector, boxmodel) {
+  info("Test that changing the document updates the box model");
+  const doc = boxmodel.document;
+
+  const onUpdated = waitForUpdate(inspector);
+  await setContentPageElementAttribute(
+    "div",
+    "style",
+    "box-sizing:content-box;float:right;" +
+      "line-height:10px;position:static;z-index:5;"
+  );
+  await onUpdated;
+
+  for (const { property, value } of res2) {
+    const elt = doc.querySelector(getPropertySelector(property));
+    is(
+      elt.textContent,
+      value,
+      property + " has the right value after style update."
+    );
+  }
+}
+
+function getPropertySelector(propertyName) {
+  return (
+    `.boxmodel-container .computed-property-view` +
+    `[data-property-name=${propertyName}] .computed-property-value`
+  );
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
new file mode 100644
index 0000000000..046ee067ba
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
@@ -0,0 +1,122 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model displays the right values for a pseudo-element.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      box-sizing: border-box;
+      display: block;
+      float: left;
+      line-height: 20px;
+      position: relative;
+      z-index: 2;
+      height: 100px;
+      width: 100px;
+      border: 10px solid black;
+      padding: 20px;
+      margin: 30px auto;
+    }
+
+    div::before {
+      content: 'before';
+      display: block;
+      width: 32px;
+      height: 32px;
+      margin: 0 auto 6px;
+    }
+  </style>
+  <div>Test Node</div>
+`;
+
+// Expected values:
+const res1 = [
+  {
+    selector: ".boxmodel-element-size",
+    value: "32" + "\u00D7" + "32",
+  },
+  {
+    selector: ".boxmodel-size > .boxmodel-width",
+    value: "32",
+  },
+  {
+    selector: ".boxmodel-size > .boxmodel-height",
+    value: "32",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-top > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-left > span",
+    value: "4", // (100 - (10 * 2) - (20 * 2) - 32) / 2
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-bottom > span",
+    value: "6",
+  },
+  {
+    selector: ".boxmodel-margin.boxmodel-right > span",
+    value: "4", // (100 - (10 * 2) - (20 * 2) - 32) / 2
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-top > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-left > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-bottom > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-padding.boxmodel-right > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-top > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-left > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-bottom > span",
+    value: "0",
+  },
+  {
+    selector: ".boxmodel-border.boxmodel-right > span",
+    value: "0",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  const node = await getNodeFront("div", inspector);
+  const children = await inspector.markup.walker.children(node);
+  const beforeElement = children.nodes[0];
+
+  await selectNode(beforeElement, inspector);
+  await testInitialValues(inspector, boxmodel);
+});
+
+function testInitialValues(inspector, boxmodel) {
+  info("Test that the initial values of the box model are correct");
+  const doc = boxmodel.document;
+
+  for (let i = 0; i < res1.length; i++) {
+    const elt = doc.querySelector(res1[i].selector);
+    is(
+      elt.textContent,
+      res1[i].value,
+      res1[i].selector + " has the right value."
+    );
+  }
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
new file mode 100644
index 0000000000..f84ca9d8b0
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that longer values are rotated on the side
+
+const res1 = [
+  { selector: ".boxmodel-margin.boxmodel-top > span", value: 30 },
+  { selector: ".boxmodel-margin.boxmodel-left > span", value: "auto" },
+  { selector: ".boxmodel-margin.boxmodel-bottom > span", value: 30 },
+  { selector: ".boxmodel-margin.boxmodel-right > span", value: "auto" },
+  { selector: ".boxmodel-padding.boxmodel-top > span", value: 20 },
+  { selector: ".boxmodel-padding.boxmodel-left > span", value: 2000000 },
+  { selector: ".boxmodel-padding.boxmodel-bottom > span", value: 20 },
+  { selector: ".boxmodel-padding.boxmodel-right > span", value: 20 },
+  { selector: ".boxmodel-border.boxmodel-top > span", value: 10 },
+  { selector: ".boxmodel-border.boxmodel-left > span", value: 10 },
+  { selector: ".boxmodel-border.boxmodel-bottom > span", value: 10 },
+  { selector: ".boxmodel-border.boxmodel-right > span", value: 10 },
+];
+
+const TEST_URI = encodeURIComponent(
+  [
+    "<style>",
+    "div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
+      "margin: 30px auto; }",
+    "</style>",
+    "<div></div>",
+  ].join("")
+);
+const LONG_TEXT_ROTATE_LIMIT = 3;
+
+add_task(async function () {
+  await addTab("data:text/html," + TEST_URI);
+  const { inspector, boxmodel } = await openLayoutView();
+  await selectNode("div", inspector);
+
+  for (let i = 0; i < res1.length; i++) {
+    const elt = boxmodel.document.querySelector(res1[i].selector);
+    const isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
+    const classList = elt.parentNode.classList;
+    const canBeRotated =
+      classList.contains("boxmodel-left") ||
+      classList.contains("boxmodel-right");
+    const isRotated = classList.contains("boxmodel-rotate");
+
+    is(
+      canBeRotated && isLong,
+      isRotated,
+      res1[i].selector + " correctly rotated."
+    );
+  }
+});
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_show-tooltip-for-unassociated-rule.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_show-tooltip-for-unassociated-rule.js
new file mode 100644
index 0000000000..ffb911b342
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_show-tooltip-for-unassociated-rule.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+// Test that hovering over a box model value with no associated rule will show a tooltip
+// saying: "No associated rule".
+
+const TEST_URI = `<style>
+    #box {}
+  </style>
+  <div id="box"></div>`;
+
+add_task(async function () {
+  await pushPref("devtools.layout.boxmodel.highlightProperty", true);
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  const { rulePreviewTooltip } = boxmodel;
+  await selectNode("#box", inspector);
+
+  info(
+    "Test that hovering over margin-top shows tooltip showing 'No associated rule'."
+  );
+  const el = boxmodel.document.querySelector(
+    ".boxmodel-margin.boxmodel-top > span"
+  );
+
+  info("Wait for mouse to hover over margin-top element.");
+  const onRulePreviewTooltipShown = rulePreviewTooltip._tooltip.once(
+    "shown",
+    () => {
+      ok(true, "Tooltip shown.");
+      is(
+        rulePreviewTooltip.message.textContent,
+        L10N.getStr("rulePreviewTooltip.noAssociatedRule"),
+        `Tooltip shows ${L10N.getStr("rulePreviewTooltip.noAssociatedRule")}`
+      );
+    }
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    el,
+    { type: "mousemove", shiftKey: true },
+    boxmodel.document.defaultView
+  );
+  await onRulePreviewTooltipShown;
+});
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
new file mode 100644
index 0000000000..fed1e85519
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing box model syncs with the rule view.
+
+const TEST_URI = "<p>hello</p>";
+
+add_task(async function () {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  info("When a property is edited, it should sync in the rule view");
+
+  await selectNode("p", inspector);
+
+  info("Modify padding-bottom in box model view");
+  const span = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-bottom > span"
+  );
+  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+  const editor = boxmodel.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+
+  const onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
+  EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView);
+  await waitForUpdate(inspector);
+  await onRuleViewRefreshed;
+  is(editor.value, "7", "Should have the right value in the editor.");
+  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+
+  info("Check that the property was synced with the rule view");
+  const ruleView = selectRuleView(inspector);
+  const ruleEditor = getRuleViewRuleEditor(ruleView, 0);
+  const textProp = ruleEditor.rule.textProps[0];
+  is(textProp.value, "7px", "The property has the right value");
+});
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
new file mode 100644
index 0000000000..de1ab24936
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
@@ -0,0 +1,166 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the regions in the box model view have tooltips, and that individual
+// values too. Also test that values that are set from a css rule have tooltips
+// referencing the rule.
+
+const TEST_URI =
+  "<style>" +
+  "#div1 { color: red; margin: 3em; }\n" +
+  "#div2 { border-bottom: 1px solid black; background: red; }\n" +
+  "html, body, #div3 { box-sizing: border-box; padding: 0 2em; }" +
+  "</style>" +
+  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
+
+// Test data for the tooltips over individual values.
+// Each entry should contain:
+// - selector: The selector for the node to be selected before starting to test
+// - values: An array containing objects for each of the values that are defined
+//   by css rules. Each entry should contain:
+//   - name: the name of the property that is set by the css rule
+//   - ruleSelector: the selector of the rule
+//   - styleSheetLocation: the fileName:lineNumber
+const VALUES_TEST_DATA = [
+  {
+    selector: "#div1",
+    values: [
+      {
+        name: "margin-top",
+        ruleSelector: "#div1",
+        styleSheetLocation: "inline:1",
+      },
+      {
+        name: "margin-right",
+        ruleSelector: "#div1",
+        styleSheetLocation: "inline:1",
+      },
+      {
+        name: "margin-bottom",
+        ruleSelector: "#div1",
+        styleSheetLocation: "inline:1",
+      },
+      {
+        name: "margin-left",
+        ruleSelector: "#div1",
+        styleSheetLocation: "inline:1",
+      },
+    ],
+  },
+  {
+    selector: "#div2",
+    values: [
+      {
+        name: "border-bottom-width",
+        ruleSelector: "#div2",
+        styleSheetLocation: "inline:2",
+      },
+    ],
+  },
+  {
+    selector: "#div3",
+    values: [
+      {
+        name: "padding-top",
+        ruleSelector: "html, body, #div3",
+        styleSheetLocation: "inline:3",
+      },
+      {
+        name: "padding-right",
+        ruleSelector: "html, body, #div3",
+        styleSheetLocation: "inline:3",
+      },
+      {
+        name: "padding-bottom",
+        ruleSelector: "html, body, #div3",
+        styleSheetLocation: "inline:3",
+      },
+      {
+        name: "padding-left",
+        ruleSelector: "html, body, #div3",
+        styleSheetLocation: "inline:3",
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  info("Checking the regions tooltips");
+
+  ok(
+    boxmodel.document.querySelector(".boxmodel-margins").hasAttribute("title"),
+    "The margin region has a tooltip"
+  );
+  is(
+    boxmodel.document.querySelector(".boxmodel-margins").getAttribute("title"),
+    "margin",
+    "The margin region has the correct tooltip content"
+  );
+
+  ok(
+    boxmodel.document.querySelector(".boxmodel-borders").hasAttribute("title"),
+    "The border region has a tooltip"
+  );
+  is(
+    boxmodel.document.querySelector(".boxmodel-borders").getAttribute("title"),
+    "border",
+    "The border region has the correct tooltip content"
+  );
+
+  ok(
+    boxmodel.document.querySelector(".boxmodel-paddings").hasAttribute("title"),
+    "The padding region has a tooltip"
+  );
+  is(
+    boxmodel.document.querySelector(".boxmodel-paddings").getAttribute("title"),
+    "padding",
+    "The padding region has the correct tooltip content"
+  );
+
+  ok(
+    boxmodel.document.querySelector(".boxmodel-content").hasAttribute("title"),
+    "The content region has a tooltip"
+  );
+  is(
+    boxmodel.document.querySelector(".boxmodel-content").getAttribute("title"),
+    "content",
+    "The content region has the correct tooltip content"
+  );
+
+  for (const { selector, values } of VALUES_TEST_DATA) {
+    info("Selecting " + selector + " and checking the values tooltips");
+    await selectNode(selector, inspector);
+
+    info("Iterate over all values");
+    for (const key in boxmodel.map) {
+      if (key === "position") {
+        continue;
+      }
+
+      const name = boxmodel.map[key].property;
+      const expectedTooltipData = values.find(o => o.name === name);
+      const el = boxmodel.document.querySelector(boxmodel.map[key].selector);
+
+      ok(el.hasAttribute("title"), "The " + name + " value has a tooltip");
+
+      if (expectedTooltipData) {
+        info("The " + name + " value comes from a css rule");
+        const expectedTooltip =
+          name +
+          "\n" +
+          expectedTooltipData.ruleSelector +
+          "\n" +
+          expectedTooltipData.styleSheetLocation;
+        is(el.getAttribute("title"), expectedTooltip, "The tooltip is correct");
+      } else {
+        info("The " + name + " isn't set by a css rule");
+        is(el.getAttribute("title"), name, "The tooltip is correct");
+      }
+    }
+  }
+});
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
new file mode 100644
index 0000000000..4cd83590b0
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model view continues to work after a page navigation and that
+// it also works after going back
+
+const IFRAME1 = URL_ROOT_SSL + "doc_boxmodel_iframe1.html";
+const IFRAME2 = URL_ROOT_SSL + "doc_boxmodel_iframe2.html";
+
+add_task(async function () {
+  const tab = await addTab(IFRAME1);
+  const browser = tab.linkedBrowser;
+  const { inspector, boxmodel } = await openLayoutView();
+
+  await testFirstPage(inspector, boxmodel, browser);
+
+  info("Navigate to the second page");
+  let onMarkupLoaded = waitForMarkupLoaded(inspector);
+  await navigateTo(IFRAME2);
+  await onMarkupLoaded;
+
+  await testSecondPage(inspector, boxmodel, browser);
+
+  info("Go back to the first page");
+  onMarkupLoaded = waitForMarkupLoaded(inspector);
+  gBrowser.goBack();
+  await onMarkupLoaded;
+
+  await testBackToFirstPage(inspector, boxmodel, browser);
+});
+
+async function testFirstPage(inspector, boxmodel, browser) {
+  info("Test that the box model view works on the first page");
+
+  await selectNode("p", inspector);
+
+  info("Checking that the box model view shows the right value");
+  const paddingElt = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-top > span"
+  );
+  is(paddingElt.textContent, "50");
+
+  info("Listening for box model view changes and modifying the padding");
+  const onUpdated = waitForUpdate(inspector);
+  await setStyle(browser, "p", "padding", "20px");
+  await onUpdated;
+  ok(true, "Box model view got updated");
+
+  info("Checking that the box model view shows the right value after update");
+  is(paddingElt.textContent, "20");
+}
+
+async function testSecondPage(inspector, boxmodel, browser) {
+  info("Test that the box model view works on the second page");
+
+  await selectNode("p", inspector);
+
+  info("Checking that the box model view shows the right value");
+  const sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
+  is(sizeElt.textContent, "100" + "\u00D7" + "100");
+
+  info("Listening for box model view changes and modifying the size");
+  const onUpdated = waitForUpdate(inspector);
+  await setStyle(browser, "p", "width", "200px");
+  await onUpdated;
+  ok(true, "Box model view got updated");
+
+  info("Checking that the box model view shows the right value after update");
+  is(sizeElt.textContent, "200" + "\u00D7" + "100");
+}
+
+async function testBackToFirstPage(inspector, boxmodel, browser) {
+  info("Test that the box model view works on the first page after going back");
+
+  await selectNode("p", inspector);
+
+  info(
+    "Checking that the box model view shows the right value, which is the" +
+      "modified value from step one because of the bfcache"
+  );
+  const paddingElt = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-top > span"
+  );
+  is(paddingElt.textContent, "20");
+
+  info("Listening for box model view changes and modifying the padding");
+  const onUpdated = waitForUpdate(inspector);
+  await setStyle(browser, "p", "padding", "100px");
+  await onUpdated;
+  ok(true, "Box model view got updated");
+
+  info("Checking that the box model view shows the right value after update");
+  is(paddingElt.textContent, "100");
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
new file mode 100644
index 0000000000..f6d309c8e2
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model view continues to work after the page is reloaded
+
+add_task(async function () {
+  const tab = await addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
+  const browser = tab.linkedBrowser;
+  const { inspector, boxmodel } = await openLayoutView();
+
+  info("Test that the box model view works on the first page");
+  await assertBoxModelView(inspector, boxmodel, browser);
+
+  info("Reload the page");
+  const onMarkupLoaded = waitForMarkupLoaded(inspector);
+  await reloadBrowser();
+  await onMarkupLoaded;
+
+  info("Test that the box model view works on the reloaded page");
+  await assertBoxModelView(inspector, boxmodel, browser);
+});
+
+async function assertBoxModelView(inspector, boxmodel, browser) {
+  await selectNode("p", inspector);
+
+  info("Checking that the box model view shows the right value");
+  const paddingElt = boxmodel.document.querySelector(
+    ".boxmodel-padding.boxmodel-top > span"
+  );
+  is(paddingElt.textContent, "50");
+
+  info("Listening for box model view changes and modifying the padding");
+  const onUpdated = waitForUpdate(inspector);
+  await setStyle(browser, "p", "padding", "20px");
+  await onUpdated;
+  ok(true, "Box model view got updated");
+
+  info("Checking that the box model view shows the right value after update");
+  is(paddingElt.textContent, "20");
+}
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
new file mode 100644
index 0000000000..eee72f696c
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model view for elements within iframes also updates when they
+// change
+
+add_task(async function () {
+  const tab = await addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
+  const browser = tab.linkedBrowser;
+  const { inspector, boxmodel } = await openLayoutView();
+
+  await testResizingInIframe(inspector, boxmodel, browser);
+  await testReflowsAfterIframeDeletion(inspector, boxmodel, browser);
+});
+
+async function testResizingInIframe(inspector, boxmodel, browser) {
+  info("Test that resizing an element in an iframe updates its box model");
+
+  info("Selecting the nested test node");
+  await selectNodeInFrames(["iframe", "iframe", "div"], inspector);
+
+  info("Checking that the box model view shows the right value");
+  const sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
+  is(sizeElt.textContent, "400\u00D7200");
+
+  info("Listening for box model view changes and modifying its size");
+  const onUpdated = waitForUpdate(inspector);
+  await setStyleInNestedIframe(browser, "div", "width", "200px");
+  await onUpdated;
+  ok(true, "Box model view got updated");
+
+  info("Checking that the box model view shows the right value after update");
+  is(sizeElt.textContent, "200\u00D7200");
+}
+
+async function testReflowsAfterIframeDeletion(inspector, boxmodel, browser) {
+  info(
+    "Test reflows are still sent to the box model view after deleting an " +
+      "iframe"
+  );
+
+  info("Deleting the iframe2");
+  const onInspectorUpdated = inspector.once("inspector-updated");
+  await removeNestedIframe(browser);
+  await onInspectorUpdated;
+
+  info("Selecting the test node in iframe1");
+  await selectNodeInFrames(["iframe", "p"], inspector);
+
+  info("Checking that the box model view shows the right value");
+  const sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
+  is(sizeElt.textContent, "100\u00D7100");
+
+  info("Listening for box model view changes and modifying its size");
+  const onUpdated = waitForUpdate(inspector);
+  await setStyleInIframe(browser, "p", "width", "200px");
+  await onUpdated;
+  ok(true, "Box model view got updated");
+
+  info("Checking that the box model view shows the right value after update");
+  is(sizeElt.textContent, "200\u00D7100");
+}
+
+async function setStyleInIframe(browser, selector, propertyName, value) {
+  const context = await getBrowsingContextInFrames(browser, ["iframe"]);
+  return setStyle(context, selector, propertyName, value);
+}
+
+async function setStyleInNestedIframe(browser, selector, propertyName, value) {
+  const context = await getBrowsingContextInFrames(browser, [
+    "iframe",
+    "iframe",
+  ]);
+  return setStyle(context, selector, propertyName, value);
+}
+
+async function removeNestedIframe(browser) {
+  const context = await getBrowsingContextInFrames(browser, ["iframe"]);
+  await SpecialPowers.spawn(context, [], () =>
+    content.document.querySelector("iframe").remove()
+  );
+}
diff --git a/devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe1.html b/devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe1.html
new file mode 100644
index 0000000000..eef48ce079
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe1.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<p style="padding:50px;color:#f06;">Root page</p>
+<iframe src="doc_boxmodel_iframe2.html"></iframe>
diff --git a/devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe2.html b/devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe2.html
new file mode 100644
index 0000000000..0fa6dc02e9
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe2.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<p style="width:100px;height:100px;background:red;box-sizing:border-box">iframe 1</p>
+<iframe src="data:text/html,<div style='width:400px;height:200px;background:yellow;box-sizing:border-box'>iframe 2</div>"></iframe>
diff --git a/devtools/client/inspector/boxmodel/test/head.js b/devtools/client/inspector/boxmodel/test/head.js
new file mode 100644
index 0000000000..f15424acfb
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -0,0 +1,122 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.toolbox.footer.height");
+});
+
+/**
+ * Is the given node visible in the page (rendered in the frame tree).
+ * @param {DOMNode}
+ * @return {Boolean}
+ */
+function isNodeVisible(node) {
+  return !!node.getClientRects().length;
+}
+
+/**
+ * Wait for the boxmodel-view-updated event.
+ *
+ * @param  {InspectorPanel} inspector
+ *         The instance of InspectorPanel currently loaded in the toolbox.
+ * @param  {Boolean} waitForSelectionUpdate
+ *         Should the boxmodel-view-updated event come from a new selection.
+ * @return {Promise} a promise
+ */
+async function waitForUpdate(inspector, waitForSelectionUpdate) {
+  /**
+   * While the highlighter is visible (mouse over the fields of the box model editor),
+   * reflow events are prevented; see ReflowActor -> setIgnoreLayoutChanges()
+   * The box model view updates in response to reflow events.
+   * To ensure reflow events are fired, hide the highlighter.
+   */
+  await inspector.highlighters.hideHighlighterType(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  return new Promise(resolve => {
+    inspector.on("boxmodel-view-updated", function onUpdate(reasons) {
+      // Wait for another update event if we are waiting for a selection related event.
+      if (waitForSelectionUpdate && !reasons.includes("new-selection")) {
+        return;
+      }
+
+      inspector.off("boxmodel-view-updated", onUpdate);
+      resolve();
+    });
+  });
+}
+
+/**
+ * Wait for both boxmode-view-updated and markuploaded events.
+ *
+ * @return {Promise} a promise that resolves when both events have been received.
+ */
+function waitForMarkupLoaded(inspector) {
+  return Promise.all([
+    waitForUpdate(inspector),
+    inspector.once("markuploaded"),
+  ]);
+}
+
+function getStyle(browser, selector, propertyName) {
+  return SpecialPowers.spawn(
+    browser,
+    [selector, propertyName],
+    async function (_selector, _propertyName) {
+      return content.document
+        .querySelector(_selector)
+        .style.getPropertyValue(_propertyName);
+    }
+  );
+}
+
+function setStyle(browser, selector, propertyName, value) {
+  return SpecialPowers.spawn(
+    browser,
+    [selector, propertyName, value],
+    async function (_selector, _propertyName, _value) {
+      content.document.querySelector(_selector).style[_propertyName] = _value;
+    }
+  );
+}
+
+/**
+ * The box model doesn't participate in the inspector's update mechanism, so simply
+ * calling the default selectNode isn't enough to guarantee that the box model view has
+ * finished updating. We also need to wait for the "boxmodel-view-updated" event.
+ */
+var _selectNode = selectNode;
+selectNode = async function (node, inspector, reason) {
+  const onUpdate = waitForUpdate(inspector, true);
+  await _selectNode(node, inspector, reason);
+  await onUpdate;
+};
+
+/**
+ * Wait until the provided element's text content matches the provided text.
+ * Based on the waitFor helper, see documentation in
+ * devtools/client/shared/test/shared-head.js
+ *
+ * @param {DOMNode} element
+ *        The element to check.
+ * @param {String} expectedText
+ *        The text that is expected to be set as textContent of the element.
+ */
+async function waitForElementTextContent(element, expectedText) {
+  await waitFor(
+    () => element.textContent === expectedText,
+    `Couldn't get "${expectedText}" as the text content of the given element`
+  );
+  ok(true, `Found the expected text (${expectedText}) for the given element`);
+}
diff --git a/devtools/client/inspector/boxmodel/types.js b/devtools/client/inspector/boxmodel/types.js
new file mode 100644
index 0000000000..b477974b65
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/types.js
@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * The box model data for the current selected node.
+ */
+exports.boxModel = {
+  // Whether or not the geometry editor is enabled
+  geometryEditorEnabled: PropTypes.bool,
+
+  // The layout information of the current selected node
+  layout: PropTypes.object,
+
+  // The offset parent for the selected node
+  offsetParent: PropTypes.object,
+};
diff --git a/devtools/client/inspector/boxmodel/utils/editing-session.js b/devtools/client/inspector/boxmodel/utils/editing-session.js
new file mode 100644
index 0000000000..3175375f22
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/utils/editing-session.js
@@ -0,0 +1,188 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * An instance of EditingSession tracks changes that have been made during the
+ * modification of box model values. All of these changes can be reverted by
+ * calling revert.
+ *
+ * @param  {InspectorPanel} inspector
+ *         The inspector panel.
+ * @param  {Document} doc
+ *         A DOM document that can be used to test style rules.
+ * @param  {Array} rules
+ *         An array of the style rules defined for the node being
+ *         edited. These should be in order of priority, least
+ *         important first.
+ */
+function EditingSession({ inspector, doc, elementRules }) {
+  this._doc = doc;
+  this._inspector = inspector;
+  this._rules = elementRules;
+  this._modifications = new Map();
+}
+
+EditingSession.prototype = {
+  /**
+   * Gets the value of a single property from the CSS rule.
+   *
+   * @param  {StyleRuleFront} rule
+   *         The CSS rule.
+   * @param  {String} property
+   *         The name of the property.
+   * @return {String} the value.
+   */
+  getPropertyFromRule(rule, property) {
+    // Use the parsed declarations in the StyleRuleFront object if available.
+    const index = this.getPropertyIndex(property, rule);
+    if (index !== -1) {
+      return rule.declarations[index].value;
+    }
+
+    // Fallback to parsing the cssText locally otherwise.
+    const dummyStyle = this._element.style;
+    dummyStyle.cssText = rule.cssText;
+    return dummyStyle.getPropertyValue(property);
+  },
+
+  /**
+   * Returns the current value for a property as a string or the empty string if
+   * no style rules affect the property.
+   *
+   * @param  {String} property
+   *         The name of the property as a string
+   */
+  getProperty(property) {
+    // Create a hidden element for getPropertyFromRule to use
+    const div = this._doc.createElement("div");
+    div.setAttribute("style", "display: none");
+    this._doc.getElementById("inspector-main-content").appendChild(div);
+    this._element = this._doc.createElement("p");
+    div.appendChild(this._element);
+
+    // As the rules are in order of priority we can just iterate until we find
+    // the first that defines a value for the property and return that.
+    for (const rule of this._rules) {
+      const value = this.getPropertyFromRule(rule, property);
+      if (value !== "") {
+        div.remove();
+        return value;
+      }
+    }
+    div.remove();
+    return "";
+  },
+
+  /**
+   * Get the index of a given css property name in a CSS rule.
+   * Or -1, if there are no properties in the rule yet.
+   *
+   * @param  {String} name
+   *         The property name.
+   * @param  {StyleRuleFront} rule
+   *         Optional, defaults to the element style rule.
+   * @return {Number} The property index in the rule.
+   */
+  getPropertyIndex(name, rule = this._rules[0]) {
+    if (!rule.declarations.length) {
+      return -1;
+    }
+
+    return rule.declarations.findIndex(p => p.name === name);
+  },
+
+  /**
+   * Sets a number of properties on the node.
+   *
+   * @param  {Array} properties
+   *         An array of properties, each is an object with name and
+   *         value properties. If the value is "" then the property
+   *         is removed.
+   * @return {Promise} Resolves when the modifications are complete.
+   */
+  async setProperties(properties) {
+    for (const property of properties) {
+      // Get a RuleModificationList or RuleRewriter helper object from the
+      // StyleRuleActor to make changes to CSS properties.
+      // Note that RuleRewriter doesn't support modifying several properties at
+      // once, so we do this in a sequence here.
+      const modifications = this._rules[0].startModifyingProperties(
+        this._inspector.cssProperties
+      );
+
+      // Remember the property so it can be reverted.
+      if (!this._modifications.has(property.name)) {
+        this._modifications.set(
+          property.name,
+          this.getPropertyFromRule(this._rules[0], property.name)
+        );
+      }
+
+      // Find the index of the property to be changed, or get the next index to
+      // insert the new property at.
+      let index = this.getPropertyIndex(property.name);
+      if (index === -1) {
+        index = this._rules[0].declarations.length;
+      }
+
+      if (property.value == "") {
+        modifications.removeProperty(index, property.name);
+      } else {
+        modifications.setProperty(index, property.name, property.value, "");
+      }
+
+      await modifications.apply();
+    }
+  },
+
+  /**
+   * Reverts all of the property changes made by this instance.
+   *
+   * @return {Promise} Resolves when all properties have been reverted.
+   */
+  async revert() {
+    // Revert each property that we modified previously, one by one. See
+    // setProperties for information about why.
+    for (const [property, value] of this._modifications) {
+      const modifications = this._rules[0].startModifyingProperties(
+        this._inspector.cssProperties
+      );
+
+      // Find the index of the property to be reverted.
+      let index = this.getPropertyIndex(property);
+
+      if (value != "") {
+        // If the property doesn't exist anymore, insert at the beginning of the
+        // rule.
+        if (index === -1) {
+          index = 0;
+        }
+        modifications.setProperty(index, property, value, "");
+      } else {
+        // If the property doesn't exist anymore, no need to remove it. It had
+        // not been added after all.
+        if (index === -1) {
+          continue;
+        }
+        modifications.removeProperty(index, property);
+      }
+
+      await modifications.apply();
+    }
+  },
+
+  destroy() {
+    this._modifications.clear();
+
+    this._cssProperties = null;
+    this._doc = null;
+    this._inspector = null;
+    this._modifications = null;
+    this._rules = null;
+  },
+};
+
+module.exports = EditingSession;
diff --git a/devtools/client/inspector/boxmodel/utils/moz.build b/devtools/client/inspector/boxmodel/utils/moz.build
new file mode 100644
index 0000000000..76a5656294
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "editing-session.js",
+)
diff --git a/devtools/client/inspector/breadcrumbs.js b/devtools/client/inspector/breadcrumbs.js
new file mode 100644
index 0000000000..68bafb591c
--- /dev/null
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -0,0 +1,973 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const flags = require("resource://devtools/shared/flags.js");
+const { ELLIPSIS } = require("resource://devtools/shared/l10n.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+loader.lazyRequireGetter(
+  this,
+  "KeyShortcuts",
+  "resource://devtools/client/shared/key-shortcuts.js"
+);
+
+const MAX_LABEL_LENGTH = 40;
+
+const NS_XHTML = "http://www.w3.org/1999/xhtml";
+const SCROLL_REPEAT_MS = 100;
+
+// Some margin may be required for visible element detection.
+const SCROLL_MARGIN = 1;
+
+const SHADOW_ROOT_TAGNAME = "#shadow-root";
+
+/**
+ * Component to replicate functionality of XUL arrowscrollbox
+ * for breadcrumbs
+ *
+ * @param {Window} win The window containing the breadcrumbs
+ * @parem {DOMNode} container The element in which to put the scroll box
+ */
+function ArrowScrollBox(win, container) {
+  this.win = win;
+  this.doc = win.document;
+  this.container = container;
+  EventEmitter.decorate(this);
+  this.init();
+}
+
+ArrowScrollBox.prototype = {
+  // Scroll behavior, exposed for testing
+  scrollBehavior: "smooth",
+
+  /**
+   * Build the HTML, add to the DOM and start listening to
+   * events
+   */
+  init() {
+    this.constructHtml();
+
+    this.onScroll = this.onScroll.bind(this);
+    this.onStartBtnClick = this.onStartBtnClick.bind(this);
+    this.onEndBtnClick = this.onEndBtnClick.bind(this);
+    this.onStartBtnDblClick = this.onStartBtnDblClick.bind(this);
+    this.onEndBtnDblClick = this.onEndBtnDblClick.bind(this);
+    this.onUnderflow = this.onUnderflow.bind(this);
+    this.onOverflow = this.onOverflow.bind(this);
+
+    this.inner.addEventListener("scroll", this.onScroll);
+    this.startBtn.addEventListener("mousedown", this.onStartBtnClick);
+    this.endBtn.addEventListener("mousedown", this.onEndBtnClick);
+    this.startBtn.addEventListener("dblclick", this.onStartBtnDblClick);
+    this.endBtn.addEventListener("dblclick", this.onEndBtnDblClick);
+
+    // Overflow and underflow are moz specific events
+    this.inner.addEventListener("underflow", this.onUnderflow);
+    this.inner.addEventListener("overflow", this.onOverflow);
+  },
+
+  /**
+   * Scroll to the specified element using the current scroll behavior
+   * @param {Element} element element to scroll
+   * @param {String} block desired alignment of element after scrolling
+   */
+  scrollToElement(element, block) {
+    element.scrollIntoView({ block, behavior: this.scrollBehavior });
+  },
+
+  /**
+   * Call the given function once; then continuously
+   * while the mouse button is held
+   * @param {Function} repeatFn the function to repeat while the button is held
+   */
+  clickOrHold(repeatFn) {
+    let timer;
+    const container = this.container;
+
+    function handleClick() {
+      cancelHold();
+      repeatFn();
+    }
+
+    const window = this.win;
+    function cancelHold() {
+      window.clearTimeout(timer);
+      container.removeEventListener("mouseout", cancelHold);
+      container.removeEventListener("mouseup", handleClick);
+    }
+
+    function repeated() {
+      repeatFn();
+      timer = window.setTimeout(repeated, SCROLL_REPEAT_MS);
+    }
+
+    container.addEventListener("mouseout", cancelHold);
+    container.addEventListener("mouseup", handleClick);
+    timer = window.setTimeout(repeated, SCROLL_REPEAT_MS);
+  },
+
+  /**
+   * When start button is dbl clicked scroll to first element
+   */
+  onStartBtnDblClick() {
+    const children = this.inner.childNodes;
+    if (children.length < 1) {
+      return;
+    }
+
+    const element = this.inner.childNodes[0];
+    this.scrollToElement(element, "start");
+  },
+
+  /**
+   * When end button is dbl clicked scroll to last element
+   */
+  onEndBtnDblClick() {
+    const children = this.inner.childNodes;
+    if (children.length < 1) {
+      return;
+    }
+
+    const element = children[children.length - 1];
+    this.scrollToElement(element, "start");
+  },
+
+  /**
+   * When start arrow button is clicked scroll towards first element
+   */
+  onStartBtnClick() {
+    const scrollToStart = () => {
+      const element = this.getFirstInvisibleElement();
+      if (!element) {
+        return;
+      }
+
+      this.scrollToElement(element, "start");
+    };
+
+    this.clickOrHold(scrollToStart);
+  },
+
+  /**
+   * When end arrow button is clicked scroll towards last element
+   */
+  onEndBtnClick() {
+    const scrollToEnd = () => {
+      const element = this.getLastInvisibleElement();
+      if (!element) {
+        return;
+      }
+
+      this.scrollToElement(element, "end");
+    };
+
+    this.clickOrHold(scrollToEnd);
+  },
+
+  /**
+   * Event handler for scrolling, update the
+   * enabled/disabled status of the arrow buttons
+   */
+  onScroll() {
+    const first = this.getFirstInvisibleElement();
+    if (!first) {
+      this.startBtn.setAttribute("disabled", "true");
+    } else {
+      this.startBtn.removeAttribute("disabled");
+    }
+
+    const last = this.getLastInvisibleElement();
+    if (!last) {
+      this.endBtn.setAttribute("disabled", "true");
+    } else {
+      this.endBtn.removeAttribute("disabled");
+    }
+  },
+
+  /**
+   * On underflow, make the arrow buttons invisible
+   */
+  onUnderflow() {
+    this.startBtn.style.visibility = "collapse";
+    this.endBtn.style.visibility = "collapse";
+    this.emit("underflow");
+  },
+
+  /**
+   * On overflow, show the arrow buttons
+   */
+  onOverflow() {
+    this.startBtn.style.visibility = "visible";
+    this.endBtn.style.visibility = "visible";
+    this.emit("overflow");
+  },
+
+  /**
+   * Check whether the element is to the left of its container but does
+   * not also span the entire container.
+   * @param {Number} left the left scroll point of the container
+   * @param {Number} right the right edge of the container
+   * @param {Number} elementLeft the left edge of the element
+   * @param {Number} elementRight the right edge of the element
+   */
+  elementLeftOfContainer(left, right, elementLeft, elementRight) {
+    return (
+      elementLeft < left - SCROLL_MARGIN && elementRight < right - SCROLL_MARGIN
+    );
+  },
+
+  /**
+   * Check whether the element is to the right of its container but does
+   * not also span the entire container.
+   * @param {Number} left the left scroll point of the container
+   * @param {Number} right the right edge of the container
+   * @param {Number} elementLeft the left edge of the element
+   * @param {Number} elementRight the right edge of the element
+   */
+  elementRightOfContainer(left, right, elementLeft, elementRight) {
+    return (
+      elementLeft > left + SCROLL_MARGIN && elementRight > right + SCROLL_MARGIN
+    );
+  },
+
+  /**
+   * Get the first (i.e. furthest left for LTR)
+   * non or partly visible element in the scroll box
+   */
+  getFirstInvisibleElement() {
+    const elementsList = Array.from(this.inner.childNodes).reverse();
+
+    const predicate = this.elementLeftOfContainer;
+    return this.findFirstWithBounds(elementsList, predicate);
+  },
+
+  /**
+   * Get the last (i.e. furthest right for LTR)
+   * non or partly visible element in the scroll box
+   */
+  getLastInvisibleElement() {
+    const predicate = this.elementRightOfContainer;
+    return this.findFirstWithBounds(this.inner.childNodes, predicate);
+  },
+
+  /**
+   * Find the first element that matches the given predicate, called with bounds
+   * information
+   * @param {Array} elements an ordered list of elements
+   * @param {Function} predicate a function to be called with bounds
+   * information
+   */
+  findFirstWithBounds(elements, predicate) {
+    const left = this.inner.scrollLeft;
+    const right = left + this.inner.clientWidth;
+    for (const element of elements) {
+      const elementLeft = element.offsetLeft - element.parentElement.offsetLeft;
+      const elementRight = elementLeft + element.offsetWidth;
+
+      // Check that the starting edge of the element is out of the visible area
+      // and that the ending edge does not span the whole container
+      if (predicate(left, right, elementLeft, elementRight)) {
+        return element;
+      }
+    }
+
+    return null;
+  },
+
+  /**
+   * Build the HTML for the scroll box and insert it into the DOM
+   */
+  constructHtml() {
+    this.startBtn = this.createElement(
+      "div",
+      "scrollbutton-up",
+      this.container
+    );
+    this.createElement("div", "toolbarbutton-icon", this.startBtn);
+
+    this.createElement(
+      "div",
+      "arrowscrollbox-overflow-start-indicator",
+      this.container
+    );
+    this.inner = this.createElement(
+      "div",
+      "html-arrowscrollbox-inner",
+      this.container
+    );
+    this.createElement(
+      "div",
+      "arrowscrollbox-overflow-end-indicator",
+      this.container
+    );
+
+    this.endBtn = this.createElement(
+      "div",
+      "scrollbutton-down",
+      this.container
+    );
+    this.createElement("div", "toolbarbutton-icon", this.endBtn);
+  },
+
+  /**
+   * Create an XHTML element with the given class name, and append it to the
+   * parent.
+   * @param {String} tagName name of the tag to create
+   * @param {String} className class of the element
+   * @param {DOMNode} parent the parent node to which it should be appended
+   * @return {DOMNode} The new element
+   */
+  createElement(tagName, className, parent) {
+    const el = this.doc.createElementNS(NS_XHTML, tagName);
+    el.className = className;
+    if (parent) {
+      parent.appendChild(el);
+    }
+
+    return el;
+  },
+
+  /**
+   * Remove event handlers and clean up
+   */
+  destroy() {
+    this.inner.removeEventListener("scroll", this.onScroll);
+    this.startBtn.removeEventListener("mousedown", this.onStartBtnClick);
+    this.endBtn.removeEventListener("mousedown", this.onEndBtnClick);
+    this.startBtn.removeEventListener("dblclick", this.onStartBtnDblClick);
+    this.endBtn.removeEventListener("dblclick", this.onRightBtnDblClick);
+
+    // Overflow and underflow are moz specific events
+    this.inner.removeEventListener("underflow", this.onUnderflow);
+    this.inner.removeEventListener("overflow", this.onOverflow);
+  },
+};
+
+/**
+ * Display the ancestors of the current node and its children.
+ * Only one "branch" of children are displayed (only one line).
+ *
+ * Mechanism:
+ * - If no nodes displayed yet:
+ *   then display the ancestor of the selected node and the selected node;
+ *   else select the node;
+ * - If the selected node is the last node displayed, append its first (if any).
+ *
+ * @param {InspectorPanel} inspector The inspector hosting this widget.
+ */
+function HTMLBreadcrumbs(inspector) {
+  this.inspector = inspector;
+  this.selection = this.inspector.selection;
+  this.win = this.inspector.panelWin;
+  this.doc = this.inspector.panelDoc;
+  this._init();
+}
+
+exports.HTMLBreadcrumbs = HTMLBreadcrumbs;
+
+HTMLBreadcrumbs.prototype = {
+  get walker() {
+    return this.inspector.walker;
+  },
+
+  _init() {
+    this.outer = this.doc.getElementById("inspector-breadcrumbs");
+    this.arrowScrollBox = new ArrowScrollBox(this.win, this.outer);
+
+    this.container = this.arrowScrollBox.inner;
+    this.scroll = this.scroll.bind(this);
+    this.arrowScrollBox.on("overflow", this.scroll);
+
+    this.outer.addEventListener("click", this, true);
+    this.outer.addEventListener("mouseover", this, true);
+    this.outer.addEventListener("mouseout", this, true);
+    this.outer.addEventListener("focus", this, true);
+
+    this.handleShortcut = this.handleShortcut.bind(this);
+
+    if (flags.testing) {
+      // In tests, we start listening immediately to avoid having to simulate a focus.
+      this.initKeyShortcuts();
+    } else {
+      this.outer.addEventListener(
+        "focus",
+        () => {
+          this.initKeyShortcuts();
+        },
+        { once: true }
+      );
+    }
+
+    // We will save a list of already displayed nodes in this array.
+    this.nodeHierarchy = [];
+
+    // Last selected node in nodeHierarchy.
+    this.currentIndex = -1;
+
+    // Used to build a unique breadcrumb button Id.
+    this.breadcrumbsWidgetItemId = 0;
+
+    this.update = this.update.bind(this);
+    this.updateWithMutations = this.updateWithMutations.bind(this);
+    this.updateSelectors = this.updateSelectors.bind(this);
+    this.selection.on("new-node-front", this.update);
+    this.selection.on("pseudoclass", this.updateSelectors);
+    this.selection.on("attribute-changed", this.updateSelectors);
+    this.inspector.on("markupmutation", this.updateWithMutations);
+    this.update();
+  },
+
+  initKeyShortcuts() {
+    this.shortcuts = new KeyShortcuts({ window: this.win, target: this.outer });
+    this.shortcuts.on("Right", this.handleShortcut);
+    this.shortcuts.on("Left", this.handleShortcut);
+  },
+
+  /**
+   * Build a string that represents the node: tagName#id.class1.class2.
+   * @param {NodeFront} node The node to pretty-print
+   * @return {String}
+   */
+  prettyPrintNodeAsText(node) {
+    let text = node.isShadowRoot ? SHADOW_ROOT_TAGNAME : node.displayName;
+    if (node.isMarkerPseudoElement) {
+      text = "::marker";
+    } else if (node.isBeforePseudoElement) {
+      text = "::before";
+    } else if (node.isAfterPseudoElement) {
+      text = "::after";
+    }
+
+    if (node.id) {
+      text += "#" + node.id;
+    }
+
+    if (node.className) {
+      const classList = node.className.split(/\s+/);
+      for (let i = 0; i < classList.length; i++) {
+        text += "." + classList[i];
+      }
+    }
+
+    for (const pseudo of node.pseudoClassLocks) {
+      text += pseudo;
+    }
+
+    return text;
+  },
+
+  /**
+   * Build <span>s that represent the node:
+   *   <span class="breadcrumbs-widget-item-tag">tagName</span>
+   *   <span class="breadcrumbs-widget-item-id">#id</span>
+   *   <span class="breadcrumbs-widget-item-classes">.class1.class2</span>
+   * @param {NodeFront} node The node to pretty-print
+   * @returns {DocumentFragment}
+   */
+  prettyPrintNodeAsXHTML(node) {
+    const tagLabel = this.doc.createElementNS(NS_XHTML, "span");
+    tagLabel.className = "breadcrumbs-widget-item-tag plain";
+
+    const idLabel = this.doc.createElementNS(NS_XHTML, "span");
+    idLabel.className = "breadcrumbs-widget-item-id plain";
+
+    const classesLabel = this.doc.createElementNS(NS_XHTML, "span");
+    classesLabel.className = "breadcrumbs-widget-item-classes plain";
+
+    const pseudosLabel = this.doc.createElementNS(NS_XHTML, "span");
+    pseudosLabel.className = "breadcrumbs-widget-item-pseudo-classes plain";
+
+    let tagText = node.isShadowRoot ? SHADOW_ROOT_TAGNAME : node.displayName;
+    if (node.isMarkerPseudoElement) {
+      tagText = "::marker";
+    } else if (node.isBeforePseudoElement) {
+      tagText = "::before";
+    } else if (node.isAfterPseudoElement) {
+      tagText = "::after";
+    }
+    let idText = node.id ? "#" + node.id : "";
+    let classesText = "";
+
+    if (node.className) {
+      const classList = node.className.split(/\s+/);
+      for (let i = 0; i < classList.length; i++) {
+        classesText += "." + classList[i];
+      }
+    }
+
+    // Figure out which element (if any) needs ellipsing.
+    // Substring for that element, then clear out any extras
+    // (except for pseudo elements).
+    const maxTagLength = MAX_LABEL_LENGTH;
+    const maxIdLength = MAX_LABEL_LENGTH - tagText.length;
+    const maxClassLength = MAX_LABEL_LENGTH - tagText.length - idText.length;
+
+    if (tagText.length > maxTagLength) {
+      tagText = tagText.substr(0, maxTagLength) + ELLIPSIS;
+      idText = classesText = "";
+    } else if (idText.length > maxIdLength) {
+      idText = idText.substr(0, maxIdLength) + ELLIPSIS;
+      classesText = "";
+    } else if (classesText.length > maxClassLength) {
+      classesText = classesText.substr(0, maxClassLength) + ELLIPSIS;
+    }
+
+    tagLabel.textContent = tagText;
+    idLabel.textContent = idText;
+    classesLabel.textContent = classesText;
+    pseudosLabel.textContent = node.pseudoClassLocks.join("");
+
+    const fragment = this.doc.createDocumentFragment();
+    fragment.appendChild(tagLabel);
+    fragment.appendChild(idLabel);
+    fragment.appendChild(classesLabel);
+    fragment.appendChild(pseudosLabel);
+
+    return fragment;
+  },
+
+  /**
+   * Generic event handler.
+   * @param {DOMEvent} event.
+   */
+  handleEvent(event) {
+    if (event.type == "click" && event.button == 0) {
+      this.handleClick(event);
+    } else if (event.type == "mouseover") {
+      this.handleMouseOver(event);
+    } else if (event.type == "mouseout") {
+      this.handleMouseOut(event);
+    } else if (event.type == "focus") {
+      this.handleFocus(event);
+    }
+  },
+
+  /**
+   * Focus event handler. When breadcrumbs container gets focus,
+   * aria-activedescendant needs to be updated to currently selected
+   * breadcrumb. Ensures that the focus stays on the container at all times.
+   * @param {DOMEvent} event.
+   */
+  handleFocus(event) {
+    event.stopPropagation();
+
+    const node = this.nodeHierarchy[this.currentIndex];
+    if (node) {
+      this.outer.setAttribute("aria-activedescendant", node.button.id);
+    } else {
+      this.outer.removeAttribute("aria-activedescendant");
+    }
+
+    this.outer.focus();
+  },
+
+  /**
+   * On click navigate to the correct node.
+   * @param {DOMEvent} event.
+   */
+  handleClick(event) {
+    const target = event.originalTarget;
+    if (target.tagName == "button") {
+      target.onBreadcrumbsClick();
+    }
+  },
+
+  /**
+   * On mouse over, highlight the corresponding content DOM Node.
+   * @param {DOMEvent} event.
+   */
+  handleMouseOver(event) {
+    const target = event.originalTarget;
+    if (target.tagName == "button") {
+      target.onBreadcrumbsHover();
+    }
+  },
+
+  /**
+   * On mouse out, make sure to unhighlight.
+   * @param {DOMEvent} event.
+   */
+  handleMouseOut(event) {
+    this.inspector.highlighters.hideHighlighterType(
+      this.inspector.highlighters.TYPES.BOXMODEL
+    );
+  },
+
+  /**
+   * Handle a keyboard shortcut supported by the breadcrumbs widget.
+   *
+   * @param {String} name
+   *        Name of the keyboard shortcut received.
+   * @param {DOMEvent} event
+   *        Original event that triggered the shortcut.
+   */
+  handleShortcut(event) {
+    if (!this.selection.isElementNode()) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.keyPromise = (this.keyPromise || Promise.resolve(null)).then(() => {
+      let currentnode;
+
+      const isLeft = event.code === "ArrowLeft";
+      const isRight = event.code === "ArrowRight";
+
+      if (isLeft && this.currentIndex != 0) {
+        currentnode = this.nodeHierarchy[this.currentIndex - 1];
+      } else if (isRight && this.currentIndex < this.nodeHierarchy.length - 1) {
+        currentnode = this.nodeHierarchy[this.currentIndex + 1];
+      } else {
+        return null;
+      }
+
+      this.outer.setAttribute("aria-activedescendant", currentnode.button.id);
+      return this.selection.setNodeFront(currentnode.node, {
+        reason: "breadcrumbs",
+      });
+    });
+  },
+
+  /**
+   * Remove nodes and clean up.
+   */
+  destroy() {
+    this.selection.off("new-node-front", this.update);
+    this.selection.off("pseudoclass", this.updateSelectors);
+    this.selection.off("attribute-changed", this.updateSelectors);
+    this.inspector.off("markupmutation", this.updateWithMutations);
+
+    this.container.removeEventListener("click", this, true);
+    this.container.removeEventListener("mouseover", this, true);
+    this.container.removeEventListener("mouseout", this, true);
+    this.container.removeEventListener("focus", this, true);
+
+    if (this.shortcuts) {
+      this.shortcuts.destroy();
+    }
+
+    this.empty();
+
+    this.arrowScrollBox.off("overflow", this.scroll);
+    this.arrowScrollBox.destroy();
+    this.arrowScrollBox = null;
+    this.outer = null;
+    this.container = null;
+    this.nodeHierarchy = null;
+
+    this.isDestroyed = true;
+  },
+
+  /**
+   * Empty the breadcrumbs container.
+   */
+  empty() {
+    while (this.container.hasChildNodes()) {
+      this.container.firstChild.remove();
+    }
+  },
+
+  /**
+   * Set which button represent the selected node.
+   * @param {Number} index Index of the displayed-button to select.
+   */
+  setCursor(index) {
+    // Unselect the previously selected button
+    if (
+      this.currentIndex > -1 &&
+      this.currentIndex < this.nodeHierarchy.length
+    ) {
+      this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
+    }
+    if (index > -1) {
+      this.nodeHierarchy[index].button.setAttribute("checked", "true");
+    } else {
+      // Unset active active descendant when all buttons are unselected.
+      this.outer.removeAttribute("aria-activedescendant");
+    }
+    this.currentIndex = index;
+  },
+
+  /**
+   * Get the index of the node in the cache.
+   * @param {NodeFront} node.
+   * @returns {Number} The index for this node or -1 if not found.
+   */
+  indexOf(node) {
+    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
+      if (this.nodeHierarchy[i].node === node) {
+        return i;
+      }
+    }
+    return -1;
+  },
+
+  /**
+   * Remove all the buttons and their references in the cache after a given
+   * index.
+   * @param {Number} index.
+   */
+  cutAfter(index) {
+    while (this.nodeHierarchy.length > index + 1) {
+      const toRemove = this.nodeHierarchy.pop();
+      this.container.removeChild(toRemove.button);
+    }
+  },
+
+  /**
+   * Build a button representing the node.
+   * @param {NodeFront} node The node from the page.
+   * @return {DOMNode} The <button> for this node.
+   */
+  buildButton(node) {
+    const button = this.doc.createElementNS(NS_XHTML, "button");
+    button.appendChild(this.prettyPrintNodeAsXHTML(node));
+    button.className = "breadcrumbs-widget-item";
+    button.id = "breadcrumbs-widget-item-" + this.breadcrumbsWidgetItemId++;
+
+    button.setAttribute("tabindex", "-1");
+    button.setAttribute("title", this.prettyPrintNodeAsText(node));
+
+    button.onclick = () => {
+      button.focus();
+    };
+
+    button.onBreadcrumbsClick = () => {
+      this.selection.setNodeFront(node, { reason: "breadcrumbs" });
+    };
+
+    button.onBreadcrumbsHover = () => {
+      this.inspector.highlighters.showHighlighterTypeForNode(
+        this.inspector.highlighters.TYPES.BOXMODEL,
+        node
+      );
+    };
+
+    return button;
+  },
+
+  /**
+   * Connecting the end of the breadcrumbs to a node.
+   * @param {NodeFront} node The node to reach.
+   */
+  expand(node) {
+    const fragment = this.doc.createDocumentFragment();
+    let lastButtonInserted = null;
+    const originalLength = this.nodeHierarchy.length;
+    let stopNode = null;
+    if (originalLength > 0) {
+      stopNode = this.nodeHierarchy[originalLength - 1].node;
+    }
+    while (node && node != stopNode) {
+      if (node.tagName || node.isShadowRoot) {
+        const button = this.buildButton(node);
+        fragment.insertBefore(button, lastButtonInserted);
+        lastButtonInserted = button;
+        this.nodeHierarchy.splice(originalLength, 0, {
+          node,
+          button,
+          currentPrettyPrintText: this.prettyPrintNodeAsText(node),
+        });
+      }
+      node = node.parentOrHost();
+    }
+    this.container.appendChild(fragment, this.container.firstChild);
+  },
+
+  /**
+   * Find the "youngest" ancestor of a node which is already in the breadcrumbs.
+   * @param {NodeFront} node.
+   * @return {Number} Index of the ancestor in the cache, or -1 if not found.
+   */
+  getCommonAncestor(node) {
+    while (node) {
+      const idx = this.indexOf(node);
+      if (idx > -1) {
+        return idx;
+      }
+      node = node.parentNode();
+    }
+    return -1;
+  },
+
+  /**
+   * Ensure the selected node is visible.
+   */
+  scroll() {
+    // FIXME bug 684352: make sure its immediate neighbors are visible too.
+    if (!this.isDestroyed) {
+      const element = this.nodeHierarchy[this.currentIndex].button;
+      this.arrowScrollBox.scrollToElement(element, "end");
+    }
+  },
+
+  /**
+   * Update all button outputs.
+   */
+  updateSelectors() {
+    if (this.isDestroyed) {
+      return;
+    }
+
+    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
+      const { node, button, currentPrettyPrintText } = this.nodeHierarchy[i];
+
+      // If the output of the node doesn't change, skip the update.
+      const textOutput = this.prettyPrintNodeAsText(node);
+      if (currentPrettyPrintText === textOutput) {
+        continue;
+      }
+
+      // Otherwise, update the whole markup for the button.
+      while (button.hasChildNodes()) {
+        button.firstChild.remove();
+      }
+      button.appendChild(this.prettyPrintNodeAsXHTML(node));
+      button.setAttribute("title", textOutput);
+
+      this.nodeHierarchy[i].currentPrettyPrintText = textOutput;
+    }
+  },
+
+  /**
+   * Given a list of mutation changes (passed by the markupmutation event),
+   * decide whether or not they are "interesting" to the current state of the
+   * breadcrumbs widget, i.e. at least one of them should cause part of the
+   * widget to be updated.
+   * @param {Array} mutations The mutations array.
+   * @return {Boolean}
+   */
+  _hasInterestingMutations(mutations) {
+    if (!mutations || !mutations.length) {
+      return false;
+    }
+
+    for (const { type, added, removed, target, attributeName } of mutations) {
+      if (type === "childList") {
+        // Only interested in childList mutations if the added or removed
+        // nodes are currently displayed.
+        return (
+          added.some(node => this.indexOf(node) > -1) ||
+          removed.some(node => this.indexOf(node) > -1)
+        );
+      } else if (type === "attributes" && this.indexOf(target) > -1) {
+        // Only interested in attributes mutations if the target is
+        // currently displayed, and the attribute is either id or class.
+        return attributeName === "class" || attributeName === "id";
+      }
+    }
+
+    // Catch all return in case the mutations array was empty, or in case none
+    // of the changes iterated above were interesting.
+    return false;
+  },
+
+  /**
+   * Update the breadcrumbs display when a new node is selected and there are
+   * mutations.
+   * @param {Array} mutations An array of mutations in case this was called as
+   * the "markupmutation" event listener.
+   */
+  updateWithMutations(mutations) {
+    return this.update("markupmutation", mutations);
+  },
+
+  /**
+   * Update the breadcrumbs display when a new node is selected.
+   * @param {String} reason The reason for the update, if any.
+   * @param {Array} mutations An array of mutations in case this was called as
+   * the "markupmutation" event listener.
+   */
+  update(reason, mutations) {
+    if (this.isDestroyed) {
+      return;
+    }
+
+    const hasInterestingMutations = this._hasInterestingMutations(mutations);
+    if (reason === "markupmutation" && !hasInterestingMutations) {
+      return;
+    }
+
+    if (!this.selection.isConnected()) {
+      // remove all the crumbs
+      this.cutAfter(-1);
+      return;
+    }
+
+    // If this was an interesting deletion; then trim the breadcrumb trail
+    let trimmed = false;
+    if (reason === "markupmutation") {
+      for (const { type, removed } of mutations) {
+        if (type !== "childList") {
+          continue;
+        }
+
+        for (const node of removed) {
+          const removedIndex = this.indexOf(node);
+          if (removedIndex > -1) {
+            this.cutAfter(removedIndex - 1);
+            trimmed = true;
+          }
+        }
+      }
+    }
+
+    if (!this.selection.isElementNode() && !this.selection.isShadowRootNode()) {
+      // no selection
+      this.setCursor(-1);
+      if (trimmed) {
+        // Since something changed, notify the interested parties.
+        this.inspector.emit("breadcrumbs-updated", this.selection.nodeFront);
+      }
+      return;
+    }
+
+    let idx = this.indexOf(this.selection.nodeFront);
+
+    // Is the node already displayed in the breadcrumbs?
+    // (and there are no mutations that need re-display of the crumbs)
+    if (idx > -1 && !hasInterestingMutations) {
+      // Yes. We select it.
+      this.setCursor(idx);
+    } else {
+      // No. Is the breadcrumbs display empty?
+      if (this.nodeHierarchy.length) {
+        // No. We drop all the element that are not direct ancestors
+        // of the selection
+        const parent = this.selection.nodeFront.parentNode();
+        const ancestorIdx = this.getCommonAncestor(parent);
+        this.cutAfter(ancestorIdx);
+      }
+      // we append the missing button between the end of the breadcrumbs display
+      // and the current node.
+      this.expand(this.selection.nodeFront);
+
+      // we select the current node button
+      idx = this.indexOf(this.selection.nodeFront);
+      this.setCursor(idx);
+    }
+
+    const doneUpdating = this.inspector.updating("breadcrumbs");
+
+    this.updateSelectors();
+
+    // Make sure the selected node and its neighbours are visible.
+    setTimeout(() => {
+      try {
+        this.scroll();
+        this.inspector.emit("breadcrumbs-updated", this.selection.nodeFront);
+        doneUpdating();
+      } catch (e) {
+        // Only log this as an error if we haven't been destroyed in the meantime.
+        if (!this.isDestroyed) {
+          console.error(e);
+        }
+      }
+    }, 0);
+  },
+};
diff --git a/devtools/client/inspector/changes/ChangesContextMenu.js b/devtools/client/inspector/changes/ChangesContextMenu.js
new file mode 100644
index 0000000000..40257ec898
--- /dev/null
+++ b/devtools/client/inspector/changes/ChangesContextMenu.js
@@ -0,0 +1,110 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const Menu = require("resource://devtools/client/framework/menu.js");
+loader.lazyRequireGetter(
+  this,
+  "MenuItem",
+  "resource://devtools/client/framework/menu-item.js"
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/changes/utils/l10n.js");
+
+/**
+ * Context menu for the Changes panel with options to select, copy and export CSS changes.
+ */
+class ChangesContextMenu extends Menu {
+  constructor(config = {}) {
+    super(config);
+    this.onCopy = config.onCopy;
+    this.onCopyAllChanges = config.onCopyAllChanges;
+    this.onCopyDeclaration = config.onCopyDeclaration;
+    this.onCopyRule = config.onCopyRule;
+    this.onSelectAll = config.onSelectAll;
+    this.toolboxDocument = config.toolboxDocument;
+    this.window = config.window;
+  }
+
+  show(event) {
+    this._openMenu({
+      target: event.target,
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+
+  _openMenu({ target, screenX = 0, screenY = 0 } = {}) {
+    this.window.focus();
+    // Remove existing menu items.
+    this.clear();
+
+    // Copy option
+    const menuitemCopy = new MenuItem({
+      id: "changes-contextmenu-copy",
+      label: getStr("changes.contextmenu.copy"),
+      accesskey: getStr("changes.contextmenu.copy.accessKey"),
+      click: this.onCopy,
+      disabled: !this._hasTextSelected(),
+    });
+    this.append(menuitemCopy);
+
+    const declEl = target.closest(".changes__declaration");
+    const ruleEl = target.closest("[data-rule-id]");
+    const ruleId = ruleEl ? ruleEl.dataset.ruleId : null;
+
+    if (ruleId || declEl) {
+      // Copy Rule option
+      this.append(
+        new MenuItem({
+          id: "changes-contextmenu-copy-rule",
+          label: getStr("changes.contextmenu.copyRule"),
+          click: () => this.onCopyRule(ruleId, true),
+        })
+      );
+
+      // Copy Declaration option. Visible only if there is a declaration element target.
+      this.append(
+        new MenuItem({
+          id: "changes-contextmenu-copy-declaration",
+          label: getStr("changes.contextmenu.copyDeclaration"),
+          click: () => this.onCopyDeclaration(declEl),
+          visible: !!declEl,
+        })
+      );
+
+      this.append(
+        new MenuItem({
+          type: "separator",
+        })
+      );
+    }
+
+    // Select All option
+    const menuitemSelectAll = new MenuItem({
+      id: "changes-contextmenu-select-all",
+      label: getStr("changes.contextmenu.selectAll"),
+      accesskey: getStr("changes.contextmenu.selectAll.accessKey"),
+      click: this.onSelectAll,
+    });
+    this.append(menuitemSelectAll);
+
+    this.popup(screenX, screenY, this.toolboxDocument);
+  }
+
+  _hasTextSelected() {
+    const selection = this.window.getSelection();
+    return selection.toString() && !selection.isCollapsed;
+  }
+
+  destroy() {
+    this.window = null;
+    this.toolboxDocument = null;
+  }
+}
+
+module.exports = ChangesContextMenu;
diff --git a/devtools/client/inspector/changes/ChangesView.js b/devtools/client/inspector/changes/ChangesView.js
new file mode 100644
index 0000000000..20c70137a7
--- /dev/null
+++ b/devtools/client/inspector/changes/ChangesView.js
@@ -0,0 +1,284 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  createElement,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+loader.lazyRequireGetter(
+  this,
+  "ChangesContextMenu",
+  "resource://devtools/client/inspector/changes/ChangesContextMenu.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+
+const changesReducer = require("resource://devtools/client/inspector/changes/reducers/changes.js");
+const {
+  getChangesStylesheet,
+} = require("resource://devtools/client/inspector/changes/selectors/changes.js");
+const {
+  resetChanges,
+  trackChange,
+} = require("resource://devtools/client/inspector/changes/actions/changes.js");
+
+const ChangesApp = createFactory(
+  require("resource://devtools/client/inspector/changes/components/ChangesApp.js")
+);
+
+class ChangesView {
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.store = this.inspector.store;
+    this.telemetry = this.inspector.telemetry;
+    this.window = window;
+
+    this.store.injectReducer("changes", changesReducer);
+
+    this.onAddChange = this.onAddChange.bind(this);
+    this.onContextMenu = this.onContextMenu.bind(this);
+    this.onCopy = this.onCopy.bind(this);
+    this.onCopyAllChanges = this.copyAllChanges.bind(this);
+    this.onCopyDeclaration = this.copyDeclaration.bind(this);
+    this.onCopyRule = this.copyRule.bind(this);
+    this.onClearChanges = this.onClearChanges.bind(this);
+    this.onSelectAll = this.onSelectAll.bind(this);
+    this.onResourceAvailable = this.onResourceAvailable.bind(this);
+
+    this.destroy = this.destroy.bind(this);
+
+    this.init();
+  }
+
+  get contextMenu() {
+    if (!this._contextMenu) {
+      this._contextMenu = new ChangesContextMenu({
+        onCopy: this.onCopy,
+        onCopyAllChanges: this.onCopyAllChanges,
+        onCopyDeclaration: this.onCopyDeclaration,
+        onCopyRule: this.onCopyRule,
+        onSelectAll: this.onSelectAll,
+        toolboxDocument: this.inspector.toolbox.doc,
+        window: this.window,
+      });
+    }
+
+    return this._contextMenu;
+  }
+
+  get resourceCommand() {
+    return this.inspector.toolbox.resourceCommand;
+  }
+
+  init() {
+    const changesApp = ChangesApp({
+      onContextMenu: this.onContextMenu,
+      onCopyAllChanges: this.onCopyAllChanges,
+      onCopyRule: this.onCopyRule,
+    });
+
+    // Expose the provider to let inspector.js use it in setupSidebar.
+    this.provider = createElement(
+      Provider,
+      {
+        id: "changesview",
+        key: "changesview",
+        store: this.store,
+      },
+      changesApp
+    );
+
+    this.watchResources();
+  }
+
+  async watchResources() {
+    await this.resourceCommand.watchResources(
+      [this.resourceCommand.TYPES.DOCUMENT_EVENT],
+      {
+        onAvailable: this.onResourceAvailable,
+        // Ignore any DOCUMENT_EVENT resources that have occured in the past
+        // and are cached by the resource command, otherwise the Changes panel will
+        // react to them erroneously and interpret that the document is reloading *now*
+        // which leads to clearing all stored changes.
+        ignoreExistingResources: true,
+      }
+    );
+
+    await this.resourceCommand.watchResources(
+      [this.resourceCommand.TYPES.CSS_CHANGE],
+      { onAvailable: this.onResourceAvailable }
+    );
+  }
+
+  onResourceAvailable(resources) {
+    for (const resource of resources) {
+      if (resource.resourceType === this.resourceCommand.TYPES.CSS_CHANGE) {
+        this.onAddChange(resource);
+        continue;
+      }
+
+      if (resource.name === "dom-loading" && resource.targetFront.isTopLevel) {
+        // will-navigate doesn't work when we navigate to a new process,
+        // and for now, onTargetAvailable/onTargetDestroyed doesn't fire on navigation and
+        // only when navigating to another process.
+        // So we fallback on DOCUMENT_EVENTS to be notified when we navigate. When we
+        // navigate within the same process as well as when we navigate to a new process.
+        // (We would probably revisit that in bug 1632141)
+        this.onClearChanges();
+      }
+    }
+  }
+
+  /**
+   * Handler for the "Copy All Changes" button. Simple wrapper that just calls
+   * |this.copyChanges()| with no filters in order to trigger default operation.
+   */
+  copyAllChanges() {
+    this.copyChanges();
+  }
+
+  /**
+   * Handler for the "Copy Changes" option from the context menu.
+   * Builds a CSS text with the aggregated changes and copies it to the clipboard.
+   *
+   * Optional rule and source ids can be used to filter the scope of the operation:
+   * - if both a rule id and source id are provided, copy only the changes to the
+   * matching rule within the matching source.
+   * - if only a source id is provided, copy the changes to all rules within the
+   * matching source.
+   * - if neither rule id nor source id are provided, copy the changes too all rules
+   * within all sources.
+   *
+   * @param {String|null} ruleId
+   *        Optional rule id.
+   * @param {String|null} sourceId
+   *        Optional source id.
+   */
+  copyChanges(ruleId, sourceId) {
+    const state = this.store.getState().changes || {};
+    const filter = {};
+    if (ruleId) {
+      filter.ruleIds = [ruleId];
+    }
+    if (sourceId) {
+      filter.sourceIds = [sourceId];
+    }
+
+    const text = getChangesStylesheet(state, filter);
+    clipboardHelper.copyString(text);
+  }
+
+  /**
+   * Handler for the "Copy Declaration" option from the context menu.
+   * Builds a CSS declaration string with the property name and value, and copies it
+   * to the clipboard. The declaration is commented out if it is marked as removed.
+   *
+   * @param {DOMElement} element
+   *        Host element of a CSS declaration rendered the Changes panel.
+   */
+  copyDeclaration(element) {
+    const name = element.querySelector(
+      ".changes__declaration-name"
+    ).textContent;
+    const value = element.querySelector(
+      ".changes__declaration-value"
+    ).textContent;
+    const isRemoved = element.classList.contains("diff-remove");
+    const text = isRemoved ? `/* ${name}: ${value}; */` : `${name}: ${value};`;
+    clipboardHelper.copyString(text);
+  }
+
+  /**
+   * Handler for the "Copy Rule" option from the context menu and "Copy Rule" button.
+   * Gets the full content of the target CSS rule (including any changes applied)
+   * and copies it to the clipboard.
+   *
+   * @param {String} ruleId
+   *        Rule id of the target CSS rule.
+   */
+  async copyRule(ruleId) {
+    const inspectorFronts = await this.inspector.getAllInspectorFronts();
+
+    for (const inspectorFront of inspectorFronts) {
+      const rule = await inspectorFront.pageStyle.getRule(ruleId);
+
+      if (rule) {
+        const text = await rule.getRuleText();
+        clipboardHelper.copyString(text);
+        break;
+      }
+    }
+  }
+
+  /**
+   * Handler for the "Copy" option from the context menu.
+   * Copies the current text selection to the clipboard.
+   */
+  onCopy() {
+    clipboardHelper.copyString(this.window.getSelection().toString());
+  }
+
+  onAddChange(change) {
+    // Turn data into a suitable change to send to the store.
+    this.store.dispatch(trackChange(change));
+  }
+
+  onClearChanges() {
+    this.store.dispatch(resetChanges());
+  }
+
+  /**
+   * Select all text.
+   */
+  onSelectAll() {
+    const selection = this.window.getSelection();
+    selection.selectAllChildren(
+      this.document.getElementById("sidebar-panel-changes")
+    );
+  }
+
+  /**
+   * Event handler for the "contextmenu" event fired when the context menu is requested.
+   * @param {Event} e
+   */
+  onContextMenu(e) {
+    this.contextMenu.show(e);
+  }
+
+  /**
+   * Destruction function called when the inspector is destroyed.
+   */
+  destroy() {
+    this.resourceCommand.unwatchResources(
+      [
+        this.resourceCommand.TYPES.CSS_CHANGE,
+        this.resourceCommand.TYPES.DOCUMENT_EVENT,
+      ],
+      { onAvailable: this.onResourceAvailable }
+    );
+
+    this.store.dispatch(resetChanges());
+
+    this.document = null;
+    this.inspector = null;
+    this.store = null;
+
+    if (this._contextMenu) {
+      this._contextMenu.destroy();
+      this._contextMenu = null;
+    }
+  }
+}
+
+module.exports = ChangesView;
diff --git a/devtools/client/inspector/changes/actions/changes.js b/devtools/client/inspector/changes/actions/changes.js
new file mode 100644
index 0000000000..b3b02cfa2a
--- /dev/null
+++ b/devtools/client/inspector/changes/actions/changes.js
@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  RESET_CHANGES,
+  TRACK_CHANGE,
+} = require("resource://devtools/client/inspector/changes/actions/index.js");
+
+module.exports = {
+  resetChanges() {
+    return {
+      type: RESET_CHANGES,
+    };
+  },
+
+  trackChange(change) {
+    return {
+      type: TRACK_CHANGE,
+      change,
+    };
+  },
+};
diff --git a/devtools/client/inspector/changes/actions/index.js b/devtools/client/inspector/changes/actions/index.js
new file mode 100644
index 0000000000..3ae33883f2
--- /dev/null
+++ b/devtools/client/inspector/changes/actions/index.js
@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Remove all changes
+    "RESET_CHANGES",
+
+    // Track a style change
+    "TRACK_CHANGE",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/changes/actions/moz.build b/devtools/client/inspector/changes/actions/moz.build
new file mode 100644
index 0000000000..06c5314a9e
--- /dev/null
+++ b/devtools/client/inspector/changes/actions/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "changes.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/changes/components/CSSDeclaration.js b/devtools/client/inspector/changes/components/CSSDeclaration.js
new file mode 100644
index 0000000000..c25bf6833f
--- /dev/null
+++ b/devtools/client/inspector/changes/components/CSSDeclaration.js
@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class CSSDeclaration extends PureComponent {
+  static get propTypes() {
+    return {
+      className: PropTypes.string,
+      property: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      className: "",
+    };
+  }
+
+  render() {
+    const { className, property, value } = this.props;
+
+    return dom.div(
+      { className: `changes__declaration ${className}` },
+      dom.span(
+        { className: "changes__declaration-name theme-fg-color3" },
+        property
+      ),
+      ": ",
+      dom.span(
+        { className: "changes__declaration-value theme-fg-color1" },
+        value
+      ),
+      ";"
+    );
+  }
+}
+
+module.exports = CSSDeclaration;
diff --git a/devtools/client/inspector/changes/components/ChangesApp.js b/devtools/client/inspector/changes/components/ChangesApp.js
new file mode 100644
index 0000000000..9953109e19
--- /dev/null
+++ b/devtools/client/inspector/changes/components/ChangesApp.js
@@ -0,0 +1,241 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const CSSDeclaration = createFactory(
+  require("resource://devtools/client/inspector/changes/components/CSSDeclaration.js")
+);
+const {
+  getChangesTree,
+} = require("resource://devtools/client/inspector/changes/selectors/changes.js");
+const {
+  getSourceForDisplay,
+} = require("resource://devtools/client/inspector/changes/utils/changes-utils.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/changes/utils/l10n.js");
+
+class ChangesApp extends PureComponent {
+  static get propTypes() {
+    return {
+      // Nested CSS rule tree structure of CSS changes grouped by source (stylesheet)
+      changesTree: PropTypes.object.isRequired,
+      // Event handler for "contextmenu" event
+      onContextMenu: PropTypes.func.isRequired,
+      // Event handler for click on "Copy All Changes" button
+      onCopyAllChanges: PropTypes.func.isRequired,
+      // Event handler for click on "Copy Rule" button
+      onCopyRule: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  renderCopyAllChangesButton() {
+    const button = dom.button(
+      {
+        className: "changes__copy-all-changes-button",
+        onClick: e => {
+          e.stopPropagation();
+          this.props.onCopyAllChanges();
+        },
+        title: getStr("changes.contextmenu.copyAllChangesDescription"),
+      },
+      getStr("changes.contextmenu.copyAllChanges")
+    );
+
+    return dom.div({ className: "changes__toolbar" }, button);
+  }
+
+  renderCopyButton(ruleId) {
+    return dom.button(
+      {
+        className: "changes__copy-rule-button",
+        onClick: e => {
+          e.stopPropagation();
+          this.props.onCopyRule(ruleId);
+        },
+        title: getStr("changes.contextmenu.copyRuleDescription"),
+      },
+      getStr("changes.contextmenu.copyRule")
+    );
+  }
+
+  renderDeclarations(remove = [], add = []) {
+    const removals = remove
+      // Sorting changed declarations in the order they appear in the Rules view.
+      .sort((a, b) => a.index > b.index)
+      .map(({ property, value, index }) => {
+        return CSSDeclaration({
+          key: "remove-" + property + index,
+          className: "level diff-remove",
+          property,
+          value,
+        });
+      });
+
+    const additions = add
+      // Sorting changed declarations in the order they appear in the Rules view.
+      .sort((a, b) => a.index > b.index)
+      .map(({ property, value, index }) => {
+        return CSSDeclaration({
+          key: "add-" + property + index,
+          className: "level diff-add",
+          property,
+          value,
+        });
+      });
+
+    return [removals, additions];
+  }
+
+  renderRule(ruleId, rule, level = 0) {
+    const diffClass = rule.isNew ? "diff-add" : "";
+    return dom.div(
+      {
+        key: ruleId,
+        className: "changes__rule devtools-monospace",
+        "data-rule-id": ruleId,
+        style: {
+          "--diff-level": level,
+        },
+      },
+      this.renderSelectors(rule.selectors, rule.isNew),
+      this.renderCopyButton(ruleId),
+      // Render any nested child rules if they exist.
+      rule.children.map(childRule => {
+        return this.renderRule(childRule.ruleId, childRule, level + 1);
+      }),
+      // Render any changed CSS declarations.
+      this.renderDeclarations(rule.remove, rule.add),
+      // Render the closing bracket with a diff marker if necessary.
+      dom.div({ className: `level ${diffClass}` }, "}")
+    );
+  }
+
+  /**
+   * Return an array of React elements for the rule's selector.
+   *
+   * @param  {Array} selectors
+   *         List of strings as versions of this rule's selector over time.
+   * @param  {Boolean} isNewRule
+   *         Whether the rule was created at runtime.
+   * @return {Array}
+   */
+  renderSelectors(selectors, isNewRule) {
+    const selectorDiffClassMap = new Map();
+
+    // The selectors array has just one item if it hasn't changed. Render it as-is.
+    // If the rule was created at runtime, mark the single selector as added.
+    // If it has two or more items, the first item was the original selector (mark as
+    // removed) and the last item is the current selector (mark as added).
+    if (selectors.length === 1) {
+      selectorDiffClassMap.set(selectors[0], isNewRule ? "diff-add" : "");
+    } else if (selectors.length >= 2) {
+      selectorDiffClassMap.set(selectors[0], "diff-remove");
+      selectorDiffClassMap.set(selectors[selectors.length - 1], "diff-add");
+    }
+
+    const elements = [];
+
+    for (const [selector, diffClass] of selectorDiffClassMap) {
+      elements.push(
+        dom.div(
+          {
+            key: selector,
+            className: `level changes__selector ${diffClass}`,
+            title: selector,
+          },
+          selector,
+          dom.span({}, " {")
+        )
+      );
+    }
+
+    return elements;
+  }
+
+  renderDiff(changes = {}) {
+    // Render groups of style sources: stylesheets and element style attributes.
+    return Object.entries(changes).map(([sourceId, source]) => {
+      const path = getSourceForDisplay(source);
+      const { href, rules, isFramed } = source;
+
+      return dom.div(
+        {
+          key: sourceId,
+          "data-source-id": sourceId,
+          className: "source",
+        },
+        dom.div(
+          {
+            className: "href",
+            title: href,
+          },
+          dom.span({}, path),
+          isFramed && this.renderFrameBadge(href)
+        ),
+        // Render changed rules within this source.
+        Object.entries(rules).map(([ruleId, rule]) => {
+          return this.renderRule(ruleId, rule);
+        })
+      );
+    });
+  }
+
+  renderFrameBadge(href = "") {
+    return dom.span(
+      {
+        className: "inspector-badge",
+        title: href,
+      },
+      getStr("changes.iframeLabel")
+    );
+  }
+
+  renderEmptyState() {
+    return dom.div(
+      { className: "devtools-sidepanel-no-result" },
+      dom.p({}, getStr("changes.noChanges")),
+      dom.p({}, getStr("changes.noChangesDescription"))
+    );
+  }
+
+  render() {
+    const hasChanges = !!Object.keys(this.props.changesTree).length;
+    return dom.div(
+      {
+        className: "theme-sidebar inspector-tabpanel",
+        id: "sidebar-panel-changes",
+        role: "document",
+        tabIndex: "0",
+        onContextMenu: this.props.onContextMenu,
+      },
+      !hasChanges && this.renderEmptyState(),
+      hasChanges && this.renderCopyAllChangesButton(),
+      hasChanges && this.renderDiff(this.props.changesTree)
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    changesTree: getChangesTree(state.changes),
+  };
+};
+
+module.exports = connect(mapStateToProps)(ChangesApp);
diff --git a/devtools/client/inspector/changes/components/moz.build b/devtools/client/inspector/changes/components/moz.build
new file mode 100644
index 0000000000..e8fba36fb8
--- /dev/null
+++ b/devtools/client/inspector/changes/components/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "ChangesApp.js",
+    "CSSDeclaration.js",
+)
diff --git a/devtools/client/inspector/changes/moz.build b/devtools/client/inspector/changes/moz.build
new file mode 100644
index 0000000000..7d504f13f5
--- /dev/null
+++ b/devtools/client/inspector/changes/moz.build
@@ -0,0 +1,24 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "actions",
+    "components",
+    "reducers",
+    "selectors",
+    "utils",
+]
+
+DevToolsModules(
+    "ChangesContextMenu.js",
+    "ChangesView.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
+XPCSHELL_TESTS_MANIFESTS += ["test/xpcshell/xpcshell.toml"]
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Inspector: Changes")
diff --git a/devtools/client/inspector/changes/reducers/changes.js b/devtools/client/inspector/changes/reducers/changes.js
new file mode 100644
index 0000000000..23e82a3ba7
--- /dev/null
+++ b/devtools/client/inspector/changes/reducers/changes.js
@@ -0,0 +1,385 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  RESET_CHANGES,
+  TRACK_CHANGE,
+} = require("resource://devtools/client/inspector/changes/actions/index.js");
+
+/**
+ * Return a deep clone of the given state object.
+ *
+ * @param {Object} state
+ * @return {Object}
+ */
+function cloneState(state = {}) {
+  return Object.entries(state).reduce((sources, [sourceId, source]) => {
+    sources[sourceId] = {
+      ...source,
+      rules: Object.entries(source.rules).reduce((rules, [ruleId, rule]) => {
+        rules[ruleId] = {
+          ...rule,
+          selectors: rule.selectors.slice(0),
+          children: rule.children.slice(0),
+          add: rule.add.slice(0),
+          remove: rule.remove.slice(0),
+        };
+
+        return rules;
+      }, {}),
+    };
+
+    return sources;
+  }, {});
+}
+
+/**
+ * Given information about a CSS rule and its ancestor rules (@media, @supports, etc),
+ * create entries in the given rules collection for each rule and assign parent/child
+ * dependencies.
+ *
+ * @param {Object} ruleData
+ *        Information about a CSS rule:
+ *        {
+ *          id:        {String}
+ *                     Unique rule id.
+ *          selectors: {Array}
+ *                     Array of CSS selector text
+ *          ancestors: {Array}
+ *                     Flattened CSS rule tree of the rule's ancestors with the root rule
+ *                     at the beginning of the array and the leaf rule at the end.
+ *          ruleIndex: {Array}
+ *                     Indexes of each ancestor rule within its parent rule.
+ *        }
+ *
+ * @param {Object} rules
+ *        Collection of rules to be mutated.
+ *        This is a reference to the corresponding `rules` object from the state.
+ *
+ * @return {Object}
+ *         Entry for the CSS rule created the given collection of rules.
+ */
+function createRule(ruleData, rules) {
+  // Append the rule data to the flattened CSS rule tree with its ancestors.
+  const ruleAncestry = [...ruleData.ancestors, { ...ruleData }];
+
+  return (
+    ruleAncestry
+      .map((rule, index) => {
+        // Ensure each rule has ancestors excluding itself (expand the flattened rule tree).
+        rule.ancestors = ruleAncestry.slice(0, index);
+        // Ensure each rule has a selector text.
+        // For the purpose of displaying in the UI, we treat at-rules as selectors.
+        if (!rule.selectors || !rule.selectors.length) {
+          // Display the @type label if there's one
+          let selector = rule.typeName ? rule.typeName + " " : "";
+          selector +=
+            rule.conditionText ||
+            rule.name ||
+            rule.keyText ||
+            rule.selectorText;
+
+          rule.selectors = [selector];
+        }
+
+        return rule.id;
+      })
+      // Then, create new entries in the rules collection and assign dependencies.
+      .map((ruleId, index, array) => {
+        const { selectors } = ruleAncestry[index];
+        const prevRuleId = array[index - 1];
+        const nextRuleId = array[index + 1];
+
+        // Create an entry for this ruleId if one does not exist.
+        if (!rules[ruleId]) {
+          rules[ruleId] = {
+            ruleId,
+            isNew: false,
+            selectors,
+            add: [],
+            remove: [],
+            children: [],
+            parent: null,
+          };
+        }
+
+        // The next ruleId is lower in the rule tree, therefore it's a child of this rule.
+        if (nextRuleId && !rules[ruleId].children.includes(nextRuleId)) {
+          rules[ruleId].children.push(nextRuleId);
+        }
+
+        // The previous ruleId is higher in the rule tree, therefore it's the parent.
+        if (prevRuleId) {
+          rules[ruleId].parent = prevRuleId;
+        }
+
+        return rules[ruleId];
+      })
+      // Finally, return the last rule in the array which is the rule we set out to create.
+      .pop()
+  );
+}
+
+function removeRule(ruleId, rules) {
+  const rule = rules[ruleId];
+
+  // First, remove this rule's id from its parent's list of children
+  if (rule.parent && rules[rule.parent]) {
+    rules[rule.parent].children = rules[rule.parent].children.filter(
+      childRuleId => {
+        return childRuleId !== ruleId;
+      }
+    );
+
+    // Remove the parent rule if it has no children left.
+    if (!rules[rule.parent].children.length) {
+      removeRule(rule.parent, rules);
+    }
+  }
+
+  delete rules[ruleId];
+}
+
+/**
+ * Aggregated changes grouped by sources (stylesheet/element), which contain rules,
+ * which contain collections of added and removed CSS declarations.
+ *
+ * Structure:
+ *    <sourceId>: {
+ *      type: // {String} One of: "stylesheet", "inline" or "element"
+ *      href: // {String|null} Stylesheet or document URL; null for inline stylesheets
+ *      rules: {
+ *        <ruleId>: {
+ *          ruleId:      // {String} <ruleId> of this rule
+ *          isNew:       // {Boolean} Whether the tracked rule was created at runtime,
+ *                       //           meaning it didn't originally exist in the source.
+ *          selectors:   // {Array} of CSS selectors or CSS at-rule text.
+ *                       //         The array has just one item if the selector is never
+ *                       //         changed. When the rule's selector is changed, the new
+ *                       //         selector is pushed onto this array.
+ *          children: [] // {Array} of <ruleId> for child rules of this rule
+ *          parent:      // {String} <ruleId> of the parent rule
+ *          add: [       // {Array} of objects with CSS declarations
+ *            {
+ *              property:    // {String} CSS property name
+ *              value:       // {String} CSS property value
+ *              index:       // {Number} Position of the declaration within its CSS rule
+ *            }
+ *            ... // more declarations
+ *          ],
+ *          remove: []   // {Array} of objects with CSS declarations
+ *        }
+ *        ... // more rules
+ *      }
+ *    }
+ *    ... // more sources
+ */
+const INITIAL_STATE = {};
+
+const reducers = {
+  /**
+   * CSS changes are collected on the server by the ChangesActor which dispatches them to
+   * the client as atomic operations: a rule/declaration updated, added or removed.
+   *
+   * By design, the ChangesActor has no big-picture context of all the collected changes.
+   * It only holds the stack of atomic changes. This makes it roboust for many use cases:
+   * building a diff-view, supporting undo/redo, offline persistence, etc. Consumers,
+   * like the Changes panel, get to massage the data for their particular purposes.
+   *
+   * Here in the reducer, we aggregate incoming changes to build a human-readable diff
+   * shown in the Changes panel.
+   * - added / removed declarations are grouped by CSS rule. Rules are grouped by their
+   *   parent rules (@media, @supports, @keyframes, etc.); Rules belong to sources
+   *   (stylesheets, inline styles)
+   * - declarations have an index corresponding to their position in the CSS rule. This
+   *   allows tracking of multiple declarations with the same property name.
+   * - repeated changes a declaration will show only the original removal and the latest
+   *   addition;
+   * - when a declaration is removed, we update the indices of other tracked declarations
+   *   in the same rule which may have changed position in the rule as a result;
+   * - changes which cancel each other out (i.e. return to original) are both removed
+   *   from the store;
+   * - when changes cancel each other out leaving the rule unchanged, the rule is removed
+   *   from the store. Its parent rule is removed as well if it too ends up unchanged.
+   */
+  // eslint-disable-next-line complexity
+  [TRACK_CHANGE](state, { change }) {
+    const defaults = {
+      selector: null,
+      source: {},
+      ancestors: [],
+      add: [],
+      remove: [],
+    };
+
+    change = { ...defaults, ...change };
+    state = cloneState(state);
+
+    const { selector, ancestors, ruleIndex } = change;
+    const sourceId = change.source.id;
+    const ruleId = change.id;
+
+    // Copy or create object identifying the source (styelsheet/element) for this change.
+    const source = Object.assign({}, state[sourceId], change.source);
+    // Copy or create collection of all rules ever changed in this source.
+    const rules = Object.assign({}, source.rules);
+    // Reference or create object identifying the rule for this change.
+    const rule = rules[ruleId]
+      ? rules[ruleId]
+      : createRule(
+          { id: change.id, selectors: [selector], ancestors, ruleIndex },
+          rules
+        );
+
+    // Mark the rule if it was created at runtime as a result of an "Add Rule" action.
+    if (change.type === "rule-add") {
+      rule.isNew = true;
+    }
+
+    // If the first selector tracked for this rule is identical to the incoming selector,
+    // reduce the selectors array to a single one. This handles the case for renaming a
+    // selector back to its original name. It has no side effects for other changes which
+    // preserve the selector.
+    // If the rule was created at runtime, always reduce the selectors array to one item.
+    // Changes to the new rule's selector always overwrite the original selector.
+    // If the selectors are different, push the incoming one to the end of the array to
+    // signify that the rule has changed selector. The last item is the current selector.
+    if (rule.selectors[0] === selector || rule.isNew) {
+      rule.selectors = [selector];
+    } else {
+      rule.selectors.push(selector);
+    }
+
+    if (change.remove?.length) {
+      for (const decl of change.remove) {
+        // Find the position of any added declaration which matches the incoming
+        // declaration to be removed.
+        const addIndex = rule.add.findIndex(addDecl => {
+          return (
+            addDecl.index === decl.index &&
+            addDecl.property === decl.property &&
+            addDecl.value === decl.value
+          );
+        });
+
+        // Find the position of any removed declaration which matches the incoming
+        // declaration to be removed. It's possible to get duplicate remove operations
+        // when, for example, disabling a declaration then deleting it.
+        const removeIndex = rule.remove.findIndex(removeDecl => {
+          return (
+            removeDecl.index === decl.index &&
+            removeDecl.property === decl.property &&
+            removeDecl.value === decl.value
+          );
+        });
+
+        // Track the remove operation only if the property was not previously introduced
+        // by an add operation. This ensures repeated changes of the same property
+        // register as a single remove operation of its original value. Avoid tracking the
+        // remove declaration if already tracked (happens on disable followed by delete).
+        if (addIndex < 0 && removeIndex < 0) {
+          rule.remove.push(decl);
+        }
+
+        // Delete any previous add operation which would be canceled out by this remove.
+        if (rule.add[addIndex]) {
+          rule.add.splice(addIndex, 1);
+        }
+
+        // Update the indexes of previously tracked declarations which follow this removed
+        // one so future tracking continues to point to the right declarations.
+        if (change.type === "declaration-remove") {
+          rule.add = rule.add.map(addDecl => {
+            if (addDecl.index > decl.index) {
+              addDecl.index--;
+            }
+
+            return addDecl;
+          });
+
+          rule.remove = rule.remove.map(removeDecl => {
+            if (removeDecl.index > decl.index) {
+              removeDecl.index--;
+            }
+
+            return removeDecl;
+          });
+        }
+      }
+    }
+
+    if (change.add?.length) {
+      for (const decl of change.add) {
+        // Find the position of any removed declaration which matches the incoming
+        // declaration to be added.
+        const removeIndex = rule.remove.findIndex(removeDecl => {
+          return (
+            removeDecl.index === decl.index &&
+            removeDecl.value === decl.value &&
+            removeDecl.property === decl.property
+          );
+        });
+
+        // Find the position of any added declaration which matches the incoming
+        // declaration to be added in case we need to replace it.
+        const addIndex = rule.add.findIndex(addDecl => {
+          return (
+            addDecl.index === decl.index && addDecl.property === decl.property
+          );
+        });
+
+        if (rule.remove[removeIndex]) {
+          // Delete any previous remove operation which would be canceled out by this add.
+          rule.remove.splice(removeIndex, 1);
+        } else if (rule.add[addIndex]) {
+          // Replace previous add operation for declaration at this index.
+          rule.add.splice(addIndex, 1, decl);
+        } else {
+          // Track new add operation.
+          rule.add.push(decl);
+        }
+      }
+    }
+
+    // Remove the rule if none of its declarations or selector have changed,
+    // but skip cleanup if the selector is in process of being renamed (there are two
+    // changes happening in quick succession: selector-remove + selector-add) or if the
+    // rule was created at runtime (allow empty new rules to persist).
+    if (
+      !rule.add.length &&
+      !rule.remove.length &&
+      rule.selectors.length === 1 &&
+      !change.type.startsWith("selector-") &&
+      !rule.isNew
+    ) {
+      removeRule(ruleId, rules);
+      source.rules = { ...rules };
+    } else {
+      source.rules = { ...rules, [ruleId]: rule };
+    }
+
+    // Remove information about the source if none of its rules changed.
+    if (!Object.keys(source.rules).length) {
+      delete state[sourceId];
+    } else {
+      state[sourceId] = source;
+    }
+
+    return state;
+  },
+
+  [RESET_CHANGES](state) {
+    return INITIAL_STATE;
+  },
+};
+
+module.exports = function (state = INITIAL_STATE, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return state;
+  }
+  return reducer(state, action);
+};
diff --git a/devtools/client/inspector/changes/reducers/moz.build b/devtools/client/inspector/changes/reducers/moz.build
new file mode 100644
index 0000000000..f3ea9a1bfc
--- /dev/null
+++ b/devtools/client/inspector/changes/reducers/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "changes.js",
+)
diff --git a/devtools/client/inspector/changes/selectors/changes.js b/devtools/client/inspector/changes/selectors/changes.js
new file mode 100644
index 0000000000..a6b99e4579
--- /dev/null
+++ b/devtools/client/inspector/changes/selectors/changes.js
@@ -0,0 +1,261 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+loader.lazyRequireGetter(
+  this,
+  "getTabPrefs",
+  "resource://devtools/shared/indentation.js",
+  true
+);
+
+const {
+  getSourceForDisplay,
+} = require("resource://devtools/client/inspector/changes/utils/changes-utils.js");
+
+/**
+ * In the Redux state, changed CSS rules are grouped by source (stylesheet) and stored in
+ * a single level array, regardless of nesting.
+ * This method returns a nested tree structure of the changed CSS rules so the React
+ * consumer components can traverse it easier when rendering the nested CSS rules view.
+ * Keeping this interface updated allows the Redux state structure to change without
+ * affecting the consumer components.
+ *
+ * @param {Object} state
+ *        Redux slice for tracked changes.
+ * @param {Object} filter
+ *        Object with optional filters to use. Has the following properties:
+ *        - sourceIds: {Array}
+ *          Use only subtrees of sources matching source ids from this array.
+ *        - ruleIds: {Array}
+ *          Use only rules matching rule ids from this array. If the array includes ids
+ *          of ancestor rules (@media, @supports), their nested rules will be included.
+ * @return {Object}
+ */
+function getChangesTree(state, filter = {}) {
+  // Use or assign defaults of sourceId and ruleId arrays by which to filter the tree.
+  const { sourceIds: sourceIdsFilter = [], ruleIds: rulesIdsFilter = [] } =
+    filter;
+  /**
+   * Recursively replace a rule's array of child rule ids with the referenced child rules.
+   * Mark visited rules so as not to handle them (and their children) again.
+   *
+   * Returns the rule object with expanded children or null if previously visited.
+   *
+   * @param  {String} ruleId
+   * @param  {Object} rule
+   * @param  {Array} rules
+   * @param  {Set} visitedRules
+   * @return {Object|null}
+   */
+  function expandRuleChildren(ruleId, rule, rules, visitedRules) {
+    if (visitedRules.has(ruleId)) {
+      return null;
+    }
+
+    visitedRules.add(ruleId);
+
+    return {
+      ...rule,
+      children: rule.children.map(childRuleId =>
+        expandRuleChildren(childRuleId, rules[childRuleId], rules, visitedRules)
+      ),
+    };
+  }
+
+  return Object.entries(state)
+    .filter(([sourceId, source]) => {
+      // Use only matching sources if an array to filter by was provided.
+      if (sourceIdsFilter.length) {
+        return sourceIdsFilter.includes(sourceId);
+      }
+
+      return true;
+    })
+    .reduce((sourcesObj, [sourceId, source]) => {
+      const { rules } = source;
+      // Log of visited rules in this source. Helps avoid duplication when traversing the
+      // descendant rule tree. This Set is unique per source. It will be passed down to
+      // be populated with ids of rules once visited. This ensures that only visited rules
+      // unique to this source will be skipped and prevents skipping identical rules from
+      // other sources (ex: rules with the same selector and the same index).
+      const visitedRules = new Set();
+
+      // Build a new collection of sources keyed by source id.
+      sourcesObj[sourceId] = {
+        ...source,
+        // Build a new collection of rules keyed by rule id.
+        rules: Object.entries(rules)
+          .filter(([ruleId, rule]) => {
+            // Use only matching rules if an array to filter by was provided.
+            if (rulesIdsFilter.length) {
+              return rulesIdsFilter.includes(ruleId);
+            }
+
+            return true;
+          })
+          .reduce((rulesObj, [ruleId, rule]) => {
+            // Expand the rule's array of child rule ids with the referenced child rules.
+            // Skip exposing null values which mean the rule was previously visited
+            // as part of an ancestor descendant tree.
+            const expandedRule = expandRuleChildren(
+              ruleId,
+              rule,
+              rules,
+              visitedRules
+            );
+            if (expandedRule !== null) {
+              rulesObj[ruleId] = expandedRule;
+            }
+
+            return rulesObj;
+          }, {}),
+      };
+
+      return sourcesObj;
+    }, {});
+}
+
+/**
+ * Build the CSS text of a stylesheet with the changes aggregated in the Redux state.
+ * If filters for rule id or source id are provided, restrict the changes to the matching
+ * sources and rules.
+ *
+ * Code comments with the source origin are put above of the CSS rule (or group of
+ * rules). Removed CSS declarations are written commented out. Added CSS declarations are
+ * written as-is.
+ *
+ * @param  {Object} state
+ *         Redux slice for tracked changes.
+ * @param  {Object} filter
+ *         Object with optional source and rule filters. See getChangesTree()
+ * @return {String}
+ *         CSS stylesheet text.
+ */
+
+// For stylesheet sources, the stylesheet filename and full path are used:
+//
+// /* styles.css | https://example.com/styles.css */
+//
+// .selector {
+//  /* property: oldvalue; */
+//  property: value;
+// }
+
+// For inline stylesheet sources, the stylesheet index and host document URL are used:
+//
+// /* Inline #1 | https://example.com */
+//
+// .selector {
+//  /* property: oldvalue; */
+//  property: value;
+// }
+
+// For element style attribute sources, the unique selector generated for the element
+// and the host document URL are used:
+//
+// /* Element (div) | https://example.com */
+//
+// div:nth-child(1) {
+//  /* property: oldvalue; */
+//  property: value;
+// }
+function getChangesStylesheet(state, filter) {
+  const changeTree = getChangesTree(state, filter);
+  // Get user prefs about indentation style.
+  const { indentUnit, indentWithTabs } = getTabPrefs();
+  const indentChar = indentWithTabs
+    ? "\t".repeat(indentUnit)
+    : " ".repeat(indentUnit);
+
+  /**
+   * If the rule has just one item in its array of selector versions, return it as-is.
+   * If it has more than one, build a string using the first selector commented-out
+   * and the last selector as-is. This indicates that a rule's selector has changed.
+   *
+   * @param  {Array} selectors
+   *         History of selector versions if changed over time.
+   *         Array with a single item (the original selector) if never changed.
+   * @param  {Number} level
+   *         Level of nesting within a CSS rule tree.
+   * @return {String}
+   */
+  function writeSelector(selectors = [], level) {
+    const indent = indentChar.repeat(level);
+    let selectorText;
+    switch (selectors.length) {
+      case 0:
+        selectorText = "";
+        break;
+      case 1:
+        selectorText = `${indent}${selectors[0]}`;
+        break;
+      default:
+        selectorText =
+          `${indent}/* ${selectors[0]} { */\n` +
+          `${indent}${selectors[selectors.length - 1]}`;
+    }
+
+    return selectorText;
+  }
+
+  function writeRule(ruleId, rule, level) {
+    // Write nested rules, if any.
+    let ruleBody = rule.children.reduce((str, childRule) => {
+      str += writeRule(childRule.ruleId, childRule, level + 1);
+      return str;
+    }, "");
+
+    // Write changed CSS declarations.
+    ruleBody += writeDeclarations(rule.remove, rule.add, level + 1);
+
+    const indent = indentChar.repeat(level);
+    const selectorText = writeSelector(rule.selectors, level);
+    return `\n${selectorText} {${ruleBody}\n${indent}}`;
+  }
+
+  function writeDeclarations(remove = [], add = [], level) {
+    const indent = indentChar.repeat(level);
+    const removals = remove
+      // Sort declarations in the order in which they exist in the original CSS rule.
+      .sort((a, b) => a.index > b.index)
+      .reduce((str, { property, value }) => {
+        str += `\n${indent}/* ${property}: ${value}; */`;
+        return str;
+      }, "");
+
+    const additions = add
+      // Sort declarations in the order in which they exist in the original CSS rule.
+      .sort((a, b) => a.index > b.index)
+      .reduce((str, { property, value }) => {
+        str += `\n${indent}${property}: ${value};`;
+        return str;
+      }, "");
+
+    return removals + additions;
+  }
+
+  // Iterate through all sources in the change tree and build a CSS stylesheet string.
+  return Object.entries(changeTree).reduce(
+    (stylesheetText, [sourceId, source]) => {
+      const { href, rules } = source;
+      // Write code comment with source origin
+      stylesheetText += `\n/* ${getSourceForDisplay(source)} | ${href} */\n`;
+      // Write CSS rules
+      stylesheetText += Object.entries(rules).reduce((str, [ruleId, rule]) => {
+        // Add a new like only after top-level rules (level == 0)
+        str += writeRule(ruleId, rule, 0) + "\n";
+        return str;
+      }, "");
+
+      return stylesheetText;
+    },
+    ""
+  );
+}
+
+module.exports = {
+  getChangesTree,
+  getChangesStylesheet,
+};
diff --git a/devtools/client/inspector/changes/selectors/moz.build b/devtools/client/inspector/changes/selectors/moz.build
new file mode 100644
index 0000000000..f3ea9a1bfc
--- /dev/null
+++ b/devtools/client/inspector/changes/selectors/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "changes.js",
+)
diff --git a/devtools/client/inspector/changes/test/browser.toml b/devtools/client/inspector/changes/test/browser.toml
new file mode 100644
index 0000000000..407a960e92
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser.toml
@@ -0,0 +1,45 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/inspector/rules/test/head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_changes_background_tracking.js"]
+
+["browser_changes_copy_all_changes.js"]
+
+["browser_changes_copy_declaration.js"]
+
+["browser_changes_copy_rule.js"]
+
+["browser_changes_declaration_add_special_character.js"]
+
+["browser_changes_declaration_disable.js"]
+
+["browser_changes_declaration_duplicate.js"]
+
+["browser_changes_declaration_edit_value.js"]
+
+["browser_changes_declaration_identical_rules.js"]
+skip-if = ["a11y_checks"] # Bugs 1858041 and 1849028 to investigate intermittent a11y_checks results (fails on Autoland, passes on Try)
+
+["browser_changes_declaration_remove.js"]
+
+["browser_changes_declaration_remove_ahead.js"]
+
+["browser_changes_declaration_remove_disabled.js"]
+
+["browser_changes_declaration_rename.js"]
+
+["browser_changes_nested_rules.js"]
+
+["browser_changes_rule_add.js"]
+
+["browser_changes_rule_selector.js"]
diff --git a/devtools/client/inspector/changes/test/browser_changes_background_tracking.js b/devtools/client/inspector/changes/test/browser_changes_background_tracking.js
new file mode 100644
index 0000000000..8ebac2a23a
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_background_tracking.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that CSS changes are collected in the background without the Changes panel visible
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  info("Ensure Changes panel is NOT the default panel; use Computed panel");
+  await pushPref("devtools.inspector.activeSidebar", "computedview");
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+
+  await selectNode("div", inspector);
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
+
+  info("Disable the first CSS declaration");
+  await togglePropStatus(ruleView, prop);
+
+  info("Select the Changes panel");
+  const { document: doc, store } = selectChangesView(inspector);
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  const onResetChanges = waitForDispatch(store, "RESET_CHANGES");
+
+  info("Wait for change to be tracked");
+  await onTrackChange;
+  const removedDeclarations = getRemovedDeclarations(doc);
+  is(removedDeclarations.length, 1, "One declaration was tracked as removed");
+
+  // Test for Bug 1656477. Check that changes are not cleared immediately afterwards.
+  info("Wait to see if the RESET_CHANGES action is dispatched unexpecteldy");
+  const sym = Symbol();
+  const onTimeout = wait(500).then(() => sym);
+  const raceResult = await Promise.any([onResetChanges, onTimeout]);
+  Assert.strictEqual(raceResult, sym, "RESET_CHANGES has not been dispatched");
+});
diff --git a/devtools/client/inspector/changes/test/browser_changes_copy_all_changes.js b/devtools/client/inspector/changes/test/browser_changes_copy_all_changes.js
new file mode 100644
index 0000000000..119fe22585
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_copy_all_changes.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Changes panel Copy All Changes button will populate the
+// clipboard with a summary of just the changed declarations.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    color: red;
+    margin: 0;
+  }
+  </style>
+  <div></div>
+`;
+
+// Indentation is important. A strict check will be done against the clipboard content.
+const EXPECTED_CLIPBOARD = `
+/* Inline #0 | data:text/html;charset=utf-8,${TEST_URI} */
+
+div {
+  /* color: red; */
+  color: green;
+}
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const changesView = selectChangesView(inspector);
+  const { document: panelDoc, store } = changesView;
+
+  await selectNode("div", inspector);
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await updateDeclaration(ruleView, 1, { color: "red" }, { color: "green" });
+  await onTrackChange;
+
+  info(
+    "Check that clicking the Copy All Changes button copies all changes to the clipboard."
+  );
+  const button = panelDoc.querySelector(".changes__copy-all-changes-button");
+  await waitForClipboardPromise(
+    () => button.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD)
+  );
+});
+
+function checkClipboardData(expected) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  return decodeURIComponent(actual).trim() === expected.trim();
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_copy_declaration.js b/devtools/client/inspector/changes/test/browser_changes_copy_declaration.js
new file mode 100644
index 0000000000..0f2c7f68e6
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_copy_declaration.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Changes panel Copy Declaration context menu item will populate the
+// clipboard with the changed declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    color: red;
+    margin: 0;
+  }
+  </style>
+  <div></div>
+`;
+
+const EXPECTED_CLIPBOARD_REMOVED = `/* color: red; */`;
+const EXPECTED_CLIPBOARD_ADDED = `color: green;`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const changesView = selectChangesView(inspector);
+  const { document: panelDoc, store } = changesView;
+
+  await selectNode("div", inspector);
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await updateDeclaration(ruleView, 1, { color: "red" }, { color: "green" });
+  await onTrackChange;
+
+  info(
+    "Click the Copy Declaration context menu item for the removed declaration"
+  );
+  const removeDecl = getRemovedDeclarations(panelDoc);
+  const addDecl = getAddedDeclarations(panelDoc);
+
+  let menu = await getChangesContextMenu(changesView, removeDecl[0].element);
+  let menuItem = menu.items.find(
+    item => item.id === "changes-contextmenu-copy-declaration"
+  );
+  await waitForClipboardPromise(
+    () => menuItem.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD_REMOVED)
+  );
+
+  info("Hiding menu");
+  menu.hide(document);
+
+  info(
+    "Click the Copy Declaration context menu item for the added declaration"
+  );
+  menu = await getChangesContextMenu(changesView, addDecl[0].element);
+  menuItem = menu.items.find(
+    item => item.id === "changes-contextmenu-copy-declaration"
+  );
+  await waitForClipboardPromise(
+    () => menuItem.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD_ADDED)
+  );
+});
+
+function checkClipboardData(expected) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  return actual.trim() === expected.trim();
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_copy_rule.js b/devtools/client/inspector/changes/test/browser_changes_copy_rule.js
new file mode 100644
index 0000000000..4c2a347e8e
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_copy_rule.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Changes panel Copy Rule button and context menu will populate the
+// clipboard with the entire contents of the changed rule, including unchanged properties.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    color: red;
+    margin: 0;
+  }
+  </style>
+  <div></div>
+`;
+
+// Indentation is important. A strict check will be done against the clipboard content.
+const EXPECTED_CLIPBOARD = `
+  div {
+    color: green;
+    margin: 0;
+  }
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const changesView = selectChangesView(inspector);
+  const { document: panelDoc, store } = changesView;
+
+  await selectNode("div", inspector);
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await updateDeclaration(ruleView, 1, { color: "red" }, { color: "green" });
+  await onTrackChange;
+
+  info("Click the Copy Rule button and expect the changed rule on clipboard");
+  const button = panelDoc.querySelector(".changes__copy-rule-button");
+  await waitForClipboardPromise(
+    () => button.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD)
+  );
+
+  emptyClipboard();
+
+  info(
+    "Click the Copy Rule context menu item and expect the changed rule on the clipboard"
+  );
+  const addDecl = getAddedDeclarations(panelDoc);
+  const menu = await getChangesContextMenu(changesView, addDecl[0].element);
+  const menuItem = menu.items.find(
+    item => item.id === "changes-contextmenu-copy-rule"
+  );
+  await waitForClipboardPromise(
+    () => menuItem.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD)
+  );
+});
+
+function checkClipboardData(expected) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  return actual.trim() === expected.trim();
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_add_special_character.js b/devtools/client/inspector/changes/test/browser_changes_declaration_add_special_character.js
new file mode 100644
index 0000000000..65b0092b9c
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_add_special_character.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that adding new CSS properties with special characters in the property
+// name does note create duplicate entries.
+
+const PROPERTY_NAME = '"abc"';
+const INITIAL_VALUE = "foo";
+// For assertions the quotes in the property will be escaped.
+const EXPECTED_PROPERTY_NAME = '\\"abc\\"';
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+  </style>
+  <div>test</div>
+`;
+
+add_task(async function addWithSpecialCharacter() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(ruleView, 1);
+  const editor = await focusEditableField(ruleView, ruleEditor.closeBrace);
+
+  const input = editor.input;
+  input.value = `${PROPERTY_NAME}: ${INITIAL_VALUE};`;
+
+  let onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Pressing return to commit and focus the new value field");
+  const onModifications = ruleView.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
+  await onModifications;
+  await onTrackChange;
+  await assertAddedDeclaration(doc, EXPECTED_PROPERTY_NAME, INITIAL_VALUE);
+
+  let newValue = "def";
+  info(`Change the CSS declaration value to ${newValue}`);
+  const prop = getTextProperty(ruleView, 1, { [PROPERTY_NAME]: INITIAL_VALUE });
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  // flushCount needs to be set to 2 once when quotes are involved.
+  await setProperty(ruleView, prop, newValue, { flushCount: 2 });
+  await onTrackChange;
+  await assertAddedDeclaration(doc, EXPECTED_PROPERTY_NAME, newValue);
+
+  newValue = "123";
+  info(`Change the CSS declaration value to ${newValue}`);
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  // 2 preview requests to flush: one for the new value and one for the
+  // autocomplete popup suggestion (even if no suggestion is displayed here).
+  await setProperty(ruleView, prop, newValue, { flushCount: 2 });
+  await onTrackChange;
+  await assertAddedDeclaration(doc, EXPECTED_PROPERTY_NAME, newValue);
+});
+
+/**
+ * Check that we only received a single added declaration with the expected
+ * value.
+ */
+async function assertAddedDeclaration(doc, expectedName, expectedValue) {
+  await waitFor(() => {
+    const addDecl = getAddedDeclarations(doc);
+    return (
+      addDecl.length == 1 &&
+      addDecl[0].value == expectedValue &&
+      addDecl[0].property == expectedName
+    );
+  }, "Got the expected declaration");
+  is(getAddedDeclarations(doc).length, 1, "Only one added declaration");
+  is(getRemovedDeclarations(doc).length, 0, "No removed declaration");
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js b/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js
new file mode 100644
index 0000000000..4c7141cdc6
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that toggling a CSS declaration in the Rule view is tracked.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
+
+  let onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Disable the first declaration");
+  await togglePropStatus(ruleView, prop);
+  info("Wait for change to be tracked");
+  await onTrackChange;
+
+  let removedDeclarations = getRemovedDeclarations(doc);
+  is(
+    removedDeclarations.length,
+    1,
+    "Only one declaration was tracked as removed"
+  );
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Re-enable the first declaration");
+  await togglePropStatus(ruleView, prop);
+  info("Wait for change to be tracked");
+  await onTrackChange;
+
+  const addedDeclarations = getAddedDeclarations(doc);
+  removedDeclarations = getRemovedDeclarations(doc);
+  is(addedDeclarations.length, 0, "No declarations were tracked as added");
+  is(removedDeclarations.length, 0, "No declarations were tracked as removed");
+});
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js b/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js
new file mode 100644
index 0000000000..1d3423992e
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that adding duplicate declarations to the Rule view is shown in the Changes panel.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+  await testAddDuplicateDeclarations(ruleView, store, doc);
+  await testChangeDuplicateDeclarations(ruleView, store, doc);
+  await testRemoveDuplicateDeclarations(ruleView, store, doc);
+});
+
+async function testAddDuplicateDeclarations(ruleView, store, doc) {
+  info(`Test that adding declarations with the same property name and value
+        are both tracked.`);
+
+  let onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Add CSS declaration");
+  await addProperty(ruleView, 1, "color", "red");
+  info("Wait for the change to be tracked");
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Add duplicate CSS declaration");
+  await addProperty(ruleView, 1, "color", "red");
+  info("Wait for the change to be tracked");
+  await onTrackChange;
+
+  await waitFor(() => {
+    const decls = getAddedDeclarations(doc);
+    return decls.length == 2 && decls[1].value == "red";
+  }, "Two declarations were tracked as added");
+  const addDecl = getAddedDeclarations(doc);
+  is(addDecl[0].value, "red", "First declaration has correct property value");
+  is(
+    addDecl[0].value,
+    addDecl[1].value,
+    "First and second declarations have identical property values"
+  );
+}
+
+async function testChangeDuplicateDeclarations(ruleView, store, doc) {
+  info(
+    "Test that changing one of the duplicate declarations won't change the other"
+  );
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
+
+  info("Change the value of the first of the duplicate declarations");
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await setProperty(ruleView, prop, "black");
+  info("Wait for the change to be tracked");
+  await onTrackChange;
+
+  await waitFor(
+    () => getAddedDeclarations(doc).length == 2,
+    "Two declarations were tracked as added"
+  );
+  const addDecl = getAddedDeclarations(doc);
+  is(addDecl[0].value, "black", "First declaration has changed property value");
+  is(
+    addDecl[1].value,
+    "red",
+    "Second declaration has not changed property value"
+  );
+}
+
+async function testRemoveDuplicateDeclarations(ruleView, store, doc) {
+  info(`Test that removing the first of the duplicate declarations
+        will not remove the second.`);
+
+  const prop = getTextProperty(ruleView, 1, { color: "black" });
+
+  info("Remove first declaration");
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await removeProperty(ruleView, prop);
+  info("Wait for the change to be tracked");
+  await onTrackChange;
+
+  await waitFor(
+    () => getAddedDeclarations(doc).length == 1,
+    "One declaration was tracked as added"
+  );
+  const addDecl = getAddedDeclarations(doc);
+  const removeDecl = getRemovedDeclarations(doc);
+  // Expect no remove operation tracked because it cancels out the original add operation.
+  is(removeDecl.length, 0, "No declaration was tracked as removed");
+  is(addDecl.length, 1, "Just one declaration left tracked as added");
+  is(
+    addDecl[0].value,
+    "red",
+    "Leftover declaration has property value of the former second declaration"
+  );
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js b/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js
new file mode 100644
index 0000000000..588513a274
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js
@@ -0,0 +1,170 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing the value of a CSS declaration in the Rule view is tracked.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+      font-family: "courier";
+    }
+  </style>
+  <div>test</div>
+`;
+
+/*
+  This object contains iteration steps to modify various CSS properties of the
+  test element, keyed by property name,.
+  Each value is an array which will be iterated over in order and the `value`
+  property will be used to update the value of the property.
+  The `add` and `remove` objects hold the expected values of the tracked declarations
+  shown in the Changes panel. If `add` or `remove` are null, it means we don't expect
+  any corresponding tracked declaration to show up in the Changes panel.
+ */
+const ITERATIONS = {
+  color: [
+    // No changes should be tracked if the value did not actually change.
+    {
+      value: "red",
+      add: null,
+      remove: null,
+    },
+    // Changing the priority flag "!important" should be tracked.
+    {
+      value: "red !important",
+      add: { value: "red !important" },
+      remove: { value: "red" },
+    },
+    // Repeated changes should still show the original value as the one removed.
+    {
+      value: "blue",
+      add: { value: "blue" },
+      remove: { value: "red" },
+    },
+    // Restoring the original value should clear tracked changes.
+    {
+      value: "red",
+      add: null,
+      remove: null,
+    },
+  ],
+  "font-family": [
+    // Set a value with an opening quote, missing the closing one.
+    // The closing quote should still appear in the "add" value.
+    {
+      value: '"ar',
+      add: { value: '"ar"' },
+      remove: { value: '"courier"' },
+      // For some reason we need an additional flush the first time we set a
+      // value with a quote. Since the ruleview is manually flushed when opened
+      // openRuleView, we need to pass this information all the way down to the
+      // setProperty helper.
+      needsExtraFlush: true,
+    },
+    // Add an escaped character
+    {
+      value: '"ar\\i',
+      add: { value: '"ar\\i"' },
+      remove: { value: '"courier"' },
+    },
+    // Add some more text
+    {
+      value: '"ar\\ia',
+      add: { value: '"ar\\ia"' },
+      remove: { value: '"courier"' },
+    },
+    // Remove the backslash
+    {
+      value: '"aria',
+      add: { value: '"aria"' },
+      remove: { value: '"courier"' },
+    },
+    // Add the rest of the text, still no closing quote
+    {
+      value: '"arial',
+      add: { value: '"arial"' },
+      remove: { value: '"courier"' },
+    },
+    // Restoring the original value should clear tracked changes.
+    {
+      value: '"courier"',
+      add: null,
+      remove: null,
+    },
+  ],
+};
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+
+  const colorProp = getTextProperty(ruleView, 1, { color: "red" });
+  await assertEditValue(ruleView, doc, store, colorProp, ITERATIONS.color);
+
+  const fontFamilyProp = getTextProperty(ruleView, 1, {
+    "font-family": '"courier"',
+  });
+  await assertEditValue(
+    ruleView,
+    doc,
+    store,
+    fontFamilyProp,
+    ITERATIONS["font-family"]
+  );
+});
+
+async function assertEditValue(ruleView, doc, store, prop, iterations) {
+  let onTrackChange;
+  for (const { value, add, needsExtraFlush, remove } of iterations) {
+    onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+
+    info(`Change the CSS declaration value to ${value}`);
+    await setProperty(ruleView, prop, value, {
+      flushCount: needsExtraFlush ? 2 : 1,
+    });
+    info("Wait for the change to be tracked");
+    await onTrackChange;
+
+    if (add) {
+      await waitFor(() => {
+        const decl = getAddedDeclarations(doc);
+        return decl.length == 1 && decl[0].value == add.value;
+      }, "Only one declaration was tracked as added.");
+      const addDecl = getAddedDeclarations(doc);
+      is(
+        addDecl[0].value,
+        add.value,
+        `Added declaration has expected value: ${add.value}`
+      );
+    } else {
+      await waitFor(
+        () => !getAddedDeclarations(doc).length,
+        "Added declaration was cleared"
+      );
+    }
+
+    if (remove) {
+      await waitFor(
+        () => getRemovedDeclarations(doc).length == 1,
+        "Only one declaration was tracked as removed."
+      );
+      const removeDecl = getRemovedDeclarations(doc);
+      is(
+        removeDecl[0].value,
+        remove.value,
+        `Removed declaration has expected value: ${remove.value}`
+      );
+    } else {
+      await waitFor(
+        () => !getRemovedDeclarations(doc).length,
+        "Removed declaration was cleared"
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_identical_rules.js b/devtools/client/inspector/changes/test/browser_changes_declaration_identical_rules.js
new file mode 100644
index 0000000000..08ac6d173d
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_identical_rules.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test tracking changes to CSS declarations in different stylesheets but in rules
+// with identical selectors.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+  </style>
+  <style type='text/css'>
+    div {
+      font-size: 1em;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+  const prop1 = getTextProperty(ruleView, 1, { "font-size": "1em" });
+  const prop2 = getTextProperty(ruleView, 2, { color: "red" });
+
+  let onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Disable the declaration in the first rule");
+  await togglePropStatus(ruleView, prop1);
+  info("Wait for change to be tracked");
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Disable the declaration in the second rule");
+  await togglePropStatus(ruleView, prop2);
+  info("Wait for change to be tracked");
+  await onTrackChange;
+
+  const removeDecl = getRemovedDeclarations(doc);
+  is(removeDecl.length, 2, "Two declarations tracked as removed");
+  // The last of the two matching rules shows up first in Rule view given that the
+  // specificity is the same. This is correct. If the properties were the same, the latest
+  // declaration would overwrite the first and thus show up on top.
+  is(
+    removeDecl[0].property,
+    "font-size",
+    "Correct property name for second declaration"
+  );
+  is(
+    removeDecl[0].value,
+    "1em",
+    "Correct property value for second declaration"
+  );
+  is(
+    removeDecl[1].property,
+    "color",
+    "Correct property name for first declaration"
+  );
+  is(
+    removeDecl[1].value,
+    "red",
+    "Correct property value for first declaration"
+  );
+});
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js b/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js
new file mode 100644
index 0000000000..60b61c3196
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that removing a CSS declaration from a rule in the Rule view is tracked.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
+
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Remove the first declaration");
+  await removeProperty(ruleView, prop);
+  info("Wait for change to be tracked");
+  await onTrackChange;
+
+  const removeDecl = getRemovedDeclarations(doc);
+  is(removeDecl.length, 1, "One declaration was tracked as removed");
+  is(
+    removeDecl[0].property,
+    "color",
+    "Correct declaration name was tracked as removed"
+  );
+  is(
+    removeDecl[0].value,
+    "red",
+    "Correct declaration value was tracked as removed"
+  );
+});
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js b/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js
new file mode 100644
index 0000000000..b249fc8198
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the correct declaration is identified and changed after removing a
+// declaration positioned ahead of it in the same CSS rule.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+      display: block;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+  const prop1 = getTextProperty(ruleView, 1, { color: "red" });
+  const prop2 = getTextProperty(ruleView, 1, { display: "block" });
+
+  let onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Change the second declaration");
+  await setProperty(ruleView, prop2, "grid");
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Remove the first declaration");
+  await removeProperty(ruleView, prop1);
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Change the second declaration again");
+  await setProperty(ruleView, prop2, "flex");
+  info("Wait for change to be tracked");
+  await onTrackChange;
+
+  // Ensure changes to the second declaration were tracked after removing the first one.
+  await waitFor(
+    () => getRemovedDeclarations(doc).length == 2,
+    "Two declarations should have been tracked as removed"
+  );
+  await waitFor(() => {
+    const addDecl = getAddedDeclarations(doc);
+    return addDecl.length == 1 && addDecl[0].value == "flex";
+  }, "One declaration should have been tracked as added, and the added declaration to have updated property value");
+});
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_remove_disabled.js b/devtools/client/inspector/changes/test/browser_changes_declaration_remove_disabled.js
new file mode 100644
index 0000000000..421d22cbae
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_remove_disabled.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that disabling a CSS declaration and then removing it from the Rule view
+// is tracked as removed only once. Toggling leftover declarations should not introduce
+// duplicate changes.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+      background: black;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.rule-view.focusNextOnEnter", false);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+  const prop1 = getTextProperty(ruleView, 1, { color: "red" });
+  const prop2 = getTextProperty(ruleView, 1, { background: "black" });
+
+  info("Using the second declaration");
+  await testRemoveValue(ruleView, store, doc, prop2);
+  info("Using the first declaration");
+  await testToggle(ruleView, store, doc, prop1);
+  info("Using the first declaration");
+  await testRemoveName(ruleView, store, doc, prop1);
+});
+
+async function testRemoveValue(ruleView, store, doc, prop) {
+  info("Test removing disabled declaration by clearing its property value.");
+  let onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Disable the declaration");
+  await togglePropStatus(ruleView, prop);
+  info("Wait for change to be tracked");
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Remove the disabled declaration by clearing its value");
+  await setProperty(ruleView, prop, null);
+  await onTrackChange;
+
+  const removeDecl = getRemovedDeclarations(doc);
+  is(removeDecl.length, 1, "Only one declaration tracked as removed");
+}
+
+async function testToggle(ruleView, store, doc, prop) {
+  info(
+    "Test toggling leftover declaration off and on will not track extra changes."
+  );
+  let onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Disable the declaration");
+  await togglePropStatus(ruleView, prop);
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Re-enable the declaration");
+  await togglePropStatus(ruleView, prop);
+  await onTrackChange;
+
+  await waitFor(
+    () => getRemovedDeclarations(doc).length == 1,
+    "Still just one declaration tracked as removed"
+  );
+}
+
+async function testRemoveName(ruleView, store, doc, prop) {
+  info("Test removing disabled declaration by clearing its property name.");
+  let onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Disable the declaration");
+  await togglePropStatus(ruleView, prop);
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Remove the disabled declaration by clearing its name");
+  await removeProperty(ruleView, prop);
+  await onTrackChange;
+
+  info(`Expecting two declarations removed:
+  - one removed by its value in the other test
+  - one removed by its name from this test
+  `);
+
+  await waitFor(
+    () => getRemovedDeclarations(doc).length == 2,
+    "Two declarations tracked as removed"
+  );
+  const removeDecl = getRemovedDeclarations(doc);
+  is(removeDecl[0].property, "background", "First declaration name correct");
+  is(removeDecl[0].value, "black", "First declaration value correct");
+  is(removeDecl[1].property, "color", "Second declaration name correct");
+  is(removeDecl[1].value, "red", "Second declaration value correct");
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_rename.js b/devtools/client/inspector/changes/test/browser_changes_declaration_rename.js
new file mode 100644
index 0000000000..245ce50121
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_rename.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that renaming the property of a CSS declaration in the Rule view is tracked.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+
+  await selectNode("div", inspector);
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
+
+  let onTrackChange;
+
+  const oldPropertyName = "color";
+  const newPropertyName = "background-color";
+
+  info(`Rename the CSS declaration name to ${newPropertyName}`);
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await renameProperty(ruleView, prop, newPropertyName);
+  info("Wait for the change to be tracked");
+  await onTrackChange;
+
+  const removeDecl = getRemovedDeclarations(doc);
+  const addDecl = getAddedDeclarations(doc);
+
+  is(removeDecl.length, 1, "One declaration tracked as removed");
+  is(
+    removeDecl[0].property,
+    oldPropertyName,
+    `Removed declaration has old property name: ${oldPropertyName}`
+  );
+  is(addDecl.length, 1, "One declaration tracked as added");
+  is(
+    addDecl[0].property,
+    newPropertyName,
+    `Added declaration has new property name: ${newPropertyName}`
+  );
+
+  info(
+    `Reverting the CSS declaration name to ${oldPropertyName} should clear changes.`
+  );
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await renameProperty(ruleView, prop, oldPropertyName);
+  info("Wait for the change to be tracked");
+  await onTrackChange;
+
+  await waitFor(
+    () => !getRemovedDeclarations(doc).length,
+    "No declaration tracked as removed"
+  );
+  await waitFor(
+    () => !getAddedDeclarations(doc).length,
+    "No declaration tracked as added"
+  );
+});
diff --git a/devtools/client/inspector/changes/test/browser_changes_nested_rules.js b/devtools/client/inspector/changes/test/browser_changes_nested_rules.js
new file mode 100644
index 0000000000..789d88fdda
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_nested_rules.js
@@ -0,0 +1,189 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Changes panel works with nested rules.
+
+// Declare rule individually so we can use them for the assertions as well
+// In the end, we should have nested rule looking like:
+// - @media screen and (height > 5px) {
+// -- @layer myLayer {
+// --- @container myContainer (width > 10px) {
+// ----- div {
+// ------- & > span { … }
+// ------- .mySpan {
+// --------- &:not(:focus) {
+
+const spanNotFocusedRule = `&:not(:focus) {
+  text-decoration: underline;
+}`;
+
+const spanClassRule = `.mySpan {
+  font-weight: bold;
+  ${spanNotFocusedRule}
+}`;
+
+const spanRule = `& > span {
+  outline: 1px solid gold;
+}`;
+
+const divRule = `div {
+  color: tomato;
+  ${spanRule}
+  ${spanClassRule}
+}`;
+
+const containerRule = `@container myContainer (width > 10px) {
+  /* in container */
+  ${divRule}
+}`;
+const layerRule = `@layer myLayer {
+  /* in layer */
+  ${containerRule}
+}`;
+const mediaRule = `@media screen and (height > 5px) {
+  /* in media */
+    ${layerRule}
+}`;
+
+const TEST_URI = `
+  <style>
+  body {
+    container: myContainer / inline-size
+  }
+  ${mediaRule}
+  </style>
+  <div>hello <span class="mySpan">world</span></div>
+`;
+
+const applyModificationAfterDivPropertyChange = ruleText =>
+  ruleText.replace("tomato", "cyan");
+
+const EXPECTED_AFTER_DIV_PROP_CHANGE = [
+  {
+    text: "@media screen and (height > 5px) {",
+    copyRuleClipboard: applyModificationAfterDivPropertyChange(mediaRule),
+  },
+  {
+    text: "@layer myLayer {",
+    copyRuleClipboard: applyModificationAfterDivPropertyChange(layerRule),
+  },
+  {
+    text: "@container myContainer (width > 10px) {",
+    copyRuleClipboard: applyModificationAfterDivPropertyChange(containerRule),
+  },
+  {
+    text: "div {",
+    copyRuleClipboard: applyModificationAfterDivPropertyChange(divRule),
+  },
+];
+
+const applyModificationAfterSpanPropertiesChange = ruleText =>
+  ruleText
+    .replace("1px solid gold", "4px solid gold")
+    .replace("bold", "bolder")
+    .replace("underline", "underline dotted");
+
+const EXPECTED_AFTER_SPAN_PROP_CHANGES = EXPECTED_AFTER_DIV_PROP_CHANGE.map(
+  expected => ({
+    ...expected,
+    copyRuleClipboard: applyModificationAfterSpanPropertiesChange(
+      expected.copyRuleClipboard
+    ),
+  })
+).concat([
+  {
+    text: ".mySpan {",
+    copyRuleClipboard:
+      applyModificationAfterSpanPropertiesChange(spanClassRule),
+  },
+  {
+    text: "&:not(:focus) {",
+    copyRuleClipboard:
+      applyModificationAfterSpanPropertiesChange(spanNotFocusedRule),
+  },
+  {
+    text: "& > span {",
+    copyRuleClipboard: applyModificationAfterSpanPropertiesChange(spanRule),
+  },
+]);
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const changesView = selectChangesView(inspector);
+  const { document: panelDoc, store } = changesView;
+  const panel = panelDoc.querySelector("#sidebar-panel-changes");
+
+  await selectNode("div", inspector);
+  let onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await updateDeclaration(ruleView, 1, { color: "tomato" }, { color: "cyan" });
+  await onTrackChange;
+
+  await assertSelectors(panel, EXPECTED_AFTER_DIV_PROP_CHANGE);
+
+  await selectNode(".mySpan", inspector);
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await updateDeclaration(
+    ruleView,
+    1,
+    { "text-decoration": "underline" },
+    { "text-decoration": "underline dotted" }
+  );
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await updateDeclaration(
+    ruleView,
+    2,
+    { "font-weight": "bold" },
+    { "font-weight": "bolder" }
+  );
+  await onTrackChange;
+
+  onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  await updateDeclaration(
+    ruleView,
+    3,
+    { outline: "1px solid gold" },
+    { outline: "4px solid gold" }
+  );
+  await onTrackChange;
+
+  await assertSelectors(panel, EXPECTED_AFTER_SPAN_PROP_CHANGES);
+});
+
+async function assertSelectors(panel, expected) {
+  const selectorsEl = getSelectors(panel);
+
+  is(
+    selectorsEl.length,
+    expected.length,
+    "Got the expected number of selectors item"
+  );
+
+  for (let i = 0; i < expected.length; i++) {
+    const selectorEl = selectorsEl[i];
+    const expectedItem = expected[i];
+
+    is(
+      selectorEl.innerText,
+      expectedItem.text,
+      `Got expected selector text at index ${i}`
+    );
+    info(`Click the Copy Rule button for the "${expectedItem.text}" rule`);
+    const button = selectorEl
+      .closest(".changes__rule")
+      .querySelector(".changes__copy-rule-button");
+    await waitForClipboardPromise(
+      () => button.click(),
+      () => checkClipboardData(expectedItem.copyRuleClipboard)
+    );
+  }
+}
+
+function checkClipboardData(expected) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  return actual.trim() === expected.trim();
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_rule_add.js b/devtools/client/inspector/changes/test/browser_changes_rule_add.js
new file mode 100644
index 0000000000..215f1f3605
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_rule_add.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that adding a new CSS rule in the Rules view is tracked in the Changes panel.
+// Renaming the selector of the new rule should overwrite the tracked selector.
+
+const TEST_URI = `
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+  const panel = doc.querySelector("#sidebar-panel-changes");
+
+  await selectNode("div", inspector);
+  await testTrackAddNewRule(store, inspector, ruleView, panel);
+  await testTrackRenameNewRule(store, inspector, ruleView, panel);
+});
+
+async function testTrackAddNewRule(store, inspector, ruleView, panel) {
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
+  info("Adding a new CSS rule in the Rule view");
+  await addNewRule(inspector, ruleView);
+  info("Pressing escape to leave the editor");
+  EventUtils.synthesizeKey("KEY_Escape");
+  info("Waiting for changes to be tracked");
+  await onTrackChange;
+
+  const addedSelectors = getAddedSelectors(panel);
+  const removedSelectors = getRemovedSelectors(panel);
+  is(addedSelectors.length, 1, "One selector was tracked as added");
+  is(addedSelectors.item(0).title, "div", "New rule's has DIV selector");
+  is(removedSelectors.length, 0, "No selectors tracked as removed");
+}
+
+async function testTrackRenameNewRule(store, inspector, ruleView, panel) {
+  info("Focusing the first rule's selector name in the Rule view");
+  const ruleEditor = getRuleViewRuleEditor(ruleView, 1);
+  const editor = await focusEditableField(ruleView, ruleEditor.selectorText);
+  info("Entering a new selector name");
+  editor.input.value = ".test";
+
+  // Expect two "TRACK_CHANGE" actions: one for removal, one for addition.
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE", 2);
+  const onRuleViewChanged = once(ruleView, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+  info("Waiting for changes to be tracked");
+  await onTrackChange;
+
+  const addedSelectors = getAddedSelectors(panel);
+  const removedSelectors = getRemovedSelectors(panel);
+  is(addedSelectors.length, 1, "One selector was tracked as added");
+  is(
+    addedSelectors.item(0).title,
+    ".test",
+    "New rule's selector was updated in place."
+  );
+  is(removedSelectors.length, 0, "No selectors tracked as removed");
+}
diff --git a/devtools/client/inspector/changes/test/browser_changes_rule_selector.js b/devtools/client/inspector/changes/test/browser_changes_rule_selector.js
new file mode 100644
index 0000000000..20d3fba654
--- /dev/null
+++ b/devtools/client/inspector/changes/test/browser_changes_rule_selector.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that renaming the selector of a CSS rule is tracked.
+// Expect a selector removal followed by a selector addition and no changed declarations
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const { document: doc, store } = selectChangesView(inspector);
+  const panel = doc.querySelector("#sidebar-panel-changes");
+
+  await selectNode("div", inspector);
+  const ruleEditor = getRuleViewRuleEditor(ruleView, 1);
+
+  info("Focusing the first rule's selector name in the Rule view");
+  const editor = await focusEditableField(ruleView, ruleEditor.selectorText);
+  info("Entering a new selector name");
+  editor.input.value = ".test";
+
+  // Expect two "TRACK_CHANGE" actions: one for removal, one for addition.
+  const onTrackChange = waitForDispatch(store, "TRACK_CHANGE", 2);
+  const onRuleViewChanged = once(ruleView, "ruleview-changed");
+  info("Pressing Enter key to commit the change");
+  EventUtils.synthesizeKey("KEY_Enter");
+  info("Waiting for rule view to update");
+  await onRuleViewChanged;
+  info("Wait for the change to be tracked");
+  await onTrackChange;
+
+  const rules = panel.querySelectorAll(".changes__rule");
+  is(rules.length, 1, "One rule was tracked as changed");
+
+  info("Expect old selector to be removed and new selector to be added");
+  const addedSelectors = getAddedSelectors(panel);
+  const removedSelectors = getRemovedSelectors(panel);
+  is(addedSelectors.length, 1, "One new selector was tracked as added");
+  is(addedSelectors.item(0).title, ".test", "New selector is correct");
+  is(removedSelectors.length, 1, "One old selector was tracked as removed");
+  is(removedSelectors.item(0).title, "div", "Old selector is correct");
+
+  info(
+    "Expect no declarations to have been added or removed during selector change"
+  );
+  const removeDecl = getRemovedDeclarations(doc, rules.item(0));
+  is(removeDecl.length, 0, "No declarations removed");
+  const addDecl = getAddedDeclarations(doc, rules.item(0));
+  is(addDecl.length, 0, "No declarations added");
+});
diff --git a/devtools/client/inspector/changes/test/head.js b/devtools/client/inspector/changes/test/head.js
new file mode 100644
index 0000000000..b45af3ba47
--- /dev/null
+++ b/devtools/client/inspector/changes/test/head.js
@@ -0,0 +1,93 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Load the Rule view's test/head.js to make use of its helpers.
+// It loads inspector/test/head.js which itself loads inspector/test/shared-head.js
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/rules/test/head.js",
+  this
+);
+
+// Ensure the three-pane mode is enabled before running the tests.
+Services.prefs.setBoolPref("devtools.inspector.three-pane-enabled", true);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.inspector.three-pane-enabled");
+});
+
+/**
+ * Get an array of objects with property/value pairs of the CSS declarations rendered
+ * in the Changes panel.
+ *
+ * @param  {Document} panelDoc
+ *         Host document of the Changes panel.
+ * @param  {String} selector
+ *         Optional selector to filter rendered declaration DOM elements.
+ *         One of ".diff-remove" or ".diff-add".
+ *         If omitted, all declarations will be returned.
+ * @param  {DOMNode} containerNode
+ *         Optional element to restrict results to declaration DOM elements which are
+ *         descendants of this container node.
+ *         If omitted, all declarations will be returned
+ * @return {Array}
+ */
+function getDeclarations(panelDoc, selector = "", containerNode = null) {
+  const els = panelDoc.querySelectorAll(`.changes__declaration${selector}`);
+
+  return [...els]
+    .filter(el => {
+      return containerNode ? containerNode.contains(el) : true;
+    })
+    .map(el => {
+      return {
+        property: el.querySelector(".changes__declaration-name").textContent,
+        value: el.querySelector(".changes__declaration-value").textContent,
+        element: el,
+      };
+    });
+}
+
+function getAddedDeclarations(panelDoc, containerNode) {
+  return getDeclarations(panelDoc, ".diff-add", containerNode);
+}
+
+function getRemovedDeclarations(panelDoc, containerNode) {
+  return getDeclarations(panelDoc, ".diff-remove", containerNode);
+}
+
+/**
+ * Get an array of DOM elements for the CSS selectors rendered in the Changes panel.
+ *
+ * @param  {Document} panelDoc
+ *         Host document of the Changes panel.
+ * @param  {String} selector
+ *         Optional selector to filter rendered selector DOM elements.
+ *         One of ".diff-remove" or ".diff-add".
+ *         If omitted, all selectors will be returned.
+ * @return {Array}
+ */
+function getSelectors(panelDoc, selector = "") {
+  return panelDoc.querySelectorAll(`.changes__selector${selector}`);
+}
+
+function getAddedSelectors(panelDoc) {
+  return getSelectors(panelDoc, ".diff-add");
+}
+
+function getRemovedSelectors(panelDoc) {
+  return getSelectors(panelDoc, ".diff-remove");
+}
+
+async function getChangesContextMenu(changesView, element) {
+  const onContextMenu = changesView.contextMenu.once("open");
+  info(`Trigger context menu for element: ${element}`);
+  synthesizeContextMenuEvent(element);
+  info(`Wait for context menu to show`);
+  await onContextMenu;
+
+  return changesView.contextMenu;
+}
diff --git a/devtools/client/inspector/changes/test/xpcshell/.eslintrc.js b/devtools/client/inspector/changes/test/xpcshell/.eslintrc.js
new file mode 100644
index 0000000000..86bd54c245
--- /dev/null
+++ b/devtools/client/inspector/changes/test/xpcshell/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the common devtools xpcshell eslintrc config.
+  extends: "../../../../../.eslintrc.xpcshell.js",
+};
diff --git a/devtools/client/inspector/changes/test/xpcshell/head.js b/devtools/client/inspector/changes/test/xpcshell/head.js
new file mode 100644
index 0000000000..f08a79dd71
--- /dev/null
+++ b/devtools/client/inspector/changes/test/xpcshell/head.js
@@ -0,0 +1,8 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { require } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
diff --git a/devtools/client/inspector/changes/test/xpcshell/mocks.js b/devtools/client/inspector/changes/test/xpcshell/mocks.js
new file mode 100644
index 0000000000..52f175beb8
--- /dev/null
+++ b/devtools/client/inspector/changes/test/xpcshell/mocks.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint-disable comma-dangle */
+
+"use strict";
+
+/**
+ * Snapshot of the Redux state for the Changes panel.
+ *
+ * It corresponds to the tracking of a single property value change (background-color)
+ * within a deeply nested CSS at-rule structure from an inline stylesheet:
+ *
+ * @media (min-width: 50em) {
+ *   @supports (display: grid) {
+ *     body {
+ *       - background-color: royalblue;
+ *       + background-color: red;
+ *     }
+ *   }
+ * }
+ */
+module.exports.CHANGES_STATE = {
+  source1: {
+    type: "inline",
+    href: "http://localhost:5000/at-rules-nested.html",
+    id: "source1",
+    index: 0,
+    isFramed: false,
+    rules: {
+      rule1: {
+        selectors: ["@media (min-width: 50em)"],
+        ruleId: "rule1",
+        add: [],
+        remove: [],
+        children: ["rule2"],
+      },
+      rule2: {
+        selectors: ["@supports (display: grid)"],
+        ruleId: "rule2",
+        add: [],
+        remove: [],
+        children: ["rule3"],
+        parent: "rule1",
+      },
+      rule3: {
+        selectors: ["body"],
+        ruleId: "rule3",
+        add: [
+          {
+            property: "background-color",
+            value: "red",
+            index: 0,
+          },
+        ],
+        remove: [
+          {
+            property: "background-color",
+            value: "royalblue",
+            index: 0,
+          },
+        ],
+        children: [],
+        parent: "rule2",
+      },
+    },
+  },
+};
diff --git a/devtools/client/inspector/changes/test/xpcshell/test_changes_stylesheet.js b/devtools/client/inspector/changes/test/xpcshell/test_changes_stylesheet.js
new file mode 100644
index 0000000000..33a64cfbcb
--- /dev/null
+++ b/devtools/client/inspector/changes/test/xpcshell/test_changes_stylesheet.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that getChangesStylesheet() serializes tracked changes from nested CSS rules
+// into the expected stylesheet format.
+
+const {
+  getChangesStylesheet,
+} = require("resource://devtools/client/inspector/changes/selectors/changes.js");
+
+const { CHANGES_STATE } = require("resource://test/mocks");
+
+// Wrap multi-line string in backticks to ensure exact check in test, including new lines.
+const STYLESHEET_FOR_ANCESTOR = `
+/* Inline #0 | http://localhost:5000/at-rules-nested.html */
+
+@media (min-width: 50em) {
+  @supports (display: grid) {
+    body {
+      /* background-color: royalblue; */
+      background-color: red;
+    }
+  }
+}
+`;
+
+// Wrap multi-line string in backticks to ensure exact check in test, including new lines.
+const STYLESHEET_FOR_DESCENDANT = `
+/* Inline #0 | http://localhost:5000/at-rules-nested.html */
+
+body {
+  /* background-color: royalblue; */
+  background-color: red;
+}
+`;
+
+add_test(() => {
+  info(
+    "Check stylesheet generated for the first ancestor in the CSS rule tree."
+  );
+  equal(
+    getChangesStylesheet(CHANGES_STATE),
+    STYLESHEET_FOR_ANCESTOR,
+    "Stylesheet includes all ancestors."
+  );
+
+  info(
+    "Check stylesheet generated for the last descendant in the CSS rule tree."
+  );
+  const filter = { sourceIds: ["source1"], ruleIds: ["rule3"] };
+  equal(
+    getChangesStylesheet(CHANGES_STATE, filter),
+    STYLESHEET_FOR_DESCENDANT,
+    "Stylesheet includes just descendant."
+  );
+
+  run_next_test();
+});
diff --git a/devtools/client/inspector/changes/test/xpcshell/xpcshell.toml b/devtools/client/inspector/changes/test/xpcshell/xpcshell.toml
new file mode 100644
index 0000000000..2edc192d20
--- /dev/null
+++ b/devtools/client/inspector/changes/test/xpcshell/xpcshell.toml
@@ -0,0 +1,7 @@
+[DEFAULT]
+tags = "devtools"
+firefox-appdir = "browser"
+head = "head.js"
+support-files = ["./mocks.js"]
+
+["test_changes_stylesheet.js"]
diff --git a/devtools/client/inspector/changes/utils/changes-utils.js b/devtools/client/inspector/changes/utils/changes-utils.js
new file mode 100644
index 0000000000..3e8505dc17
--- /dev/null
+++ b/devtools/client/inspector/changes/utils/changes-utils.js
@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  getFormatStr,
+  getStr,
+} = require("resource://devtools/client/inspector/changes/utils/l10n.js");
+
+/**
+ * Get a human-friendly style source path to display in the Changes panel.
+ * For element inline styles, return a string indicating that.
+ * For inline stylesheets, return a string indicating that plus the stylesheet's index.
+ * For URLs, return just the stylesheet filename.
+ *
+ * @param {Object} source
+ *        Information about the style source. Contains:
+ *        - type: {String} One of "element" or "stylesheet"
+ *        - href: {String|null} Stylesheet URL or document URL for elmeent inline styles
+ *        - index: {Number} Position of the stylesheet in its document's stylesheet list.
+ * @return {String}
+ */
+function getSourceForDisplay(source) {
+  let href;
+
+  switch (source.type) {
+    case "element":
+      href = getStr("changes.elementStyleLabel");
+      break;
+    case "inline":
+      href = getFormatStr("changes.inlineStyleSheetLabel", `#${source.index}`);
+      break;
+    case "stylesheet":
+      const url = new URL(source.href);
+      href = url.pathname.substring(url.pathname.lastIndexOf("/") + 1);
+      break;
+  }
+
+  return href;
+}
+
+module.exports.getSourceForDisplay = getSourceForDisplay;
diff --git a/devtools/client/inspector/changes/utils/l10n.js b/devtools/client/inspector/changes/utils/l10n.js
new file mode 100644
index 0000000000..693a1ec3cf
--- /dev/null
+++ b/devtools/client/inspector/changes/utils/l10n.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/changes.properties"
+);
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+};
diff --git a/devtools/client/inspector/changes/utils/moz.build b/devtools/client/inspector/changes/utils/moz.build
new file mode 100644
index 0000000000..155752e0d8
--- /dev/null
+++ b/devtools/client/inspector/changes/utils/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "changes-utils.js",
+    "l10n.js",
+)
diff --git a/devtools/client/inspector/compatibility/CompatibilityView.js b/devtools/client/inspector/compatibility/CompatibilityView.js
new file mode 100644
index 0000000000..19c3263f00
--- /dev/null
+++ b/devtools/client/inspector/compatibility/CompatibilityView.js
@@ -0,0 +1,277 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  createElement,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
+const compatibilityReducer = require("resource://devtools/client/inspector/compatibility/reducers/compatibility.js");
+const {
+  appendNode,
+  clearDestroyedNodes,
+  initUserSettings,
+  removeNode,
+  updateNodes,
+  updateSelectedNode,
+  updateTopLevelTarget,
+  updateNode,
+} = require("resource://devtools/client/inspector/compatibility/actions/compatibility.js");
+
+const CompatibilityApp = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/CompatibilityApp.js")
+);
+
+class CompatibilityView {
+  constructor(inspector, window) {
+    this.inspector = inspector;
+
+    this.inspector.store.injectReducer("compatibility", compatibilityReducer);
+
+    this._parseMarkup = this._parseMarkup.bind(this);
+    this._onChangeAdded = this._onChangeAdded.bind(this);
+    this._onPanelSelected = this._onPanelSelected.bind(this);
+    this._onSelectedNodeChanged = this._onSelectedNodeChanged.bind(this);
+    this._onTopLevelTargetChanged = this._onTopLevelTargetChanged.bind(this);
+    this._onResourceAvailable = this._onResourceAvailable.bind(this);
+    this._onMarkupMutation = this._onMarkupMutation.bind(this);
+
+    this._init();
+  }
+
+  destroy() {
+    try {
+      this.resourceCommand.unwatchResources(
+        [this.resourceCommand.TYPES.CSS_CHANGE],
+        {
+          onAvailable: this._onResourceAvailable,
+        }
+      );
+    } catch (e) {
+      // If unwatchResources is called before finishing process of watchResources,
+      // unwatchResources throws an error during stopping listener.
+    }
+
+    this.inspector.off("new-root", this._onTopLevelTargetChanged);
+    this.inspector.off("markupmutation", this._onMarkupMutation);
+    this.inspector.selection.off("new-node-front", this._onSelectedNodeChanged);
+    this.inspector.sidebar.off(
+      "compatibilityview-selected",
+      this._onPanelSelected
+    );
+    this.inspector = null;
+  }
+
+  get resourceCommand() {
+    return this.inspector.toolbox.resourceCommand;
+  }
+
+  async _init() {
+    const { setSelectedNode } = this.inspector.getCommonComponentProps();
+    const compatibilityApp = new CompatibilityApp({
+      setSelectedNode,
+    });
+
+    this.provider = createElement(
+      Provider,
+      {
+        id: "compatibilityview",
+        store: this.inspector.store,
+      },
+      LocalizationProvider(
+        {
+          bundles: this.inspector.fluentL10n.getBundles(),
+          parseMarkup: this._parseMarkup,
+        },
+        compatibilityApp
+      )
+    );
+
+    await this.inspector.store.dispatch(initUserSettings());
+    // awaiting for `initUserSettings` makes us miss the initial "compatibilityview-selected"
+    // event, so we need to manually call _onPanelSelected to fetch compatibility issues
+    // for the selected node (and the whole page).
+    this._onPanelSelected();
+
+    this.inspector.on("new-root", this._onTopLevelTargetChanged);
+    this.inspector.on("markupmutation", this._onMarkupMutation);
+    this.inspector.selection.on("new-node-front", this._onSelectedNodeChanged);
+    this.inspector.sidebar.on(
+      "compatibilityview-selected",
+      this._onPanelSelected
+    );
+
+    await this.resourceCommand.watchResources(
+      [this.resourceCommand.TYPES.CSS_CHANGE],
+      {
+        onAvailable: this._onResourceAvailable,
+        // CSS changes made before opening Compatibility View are already applied to
+        // corresponding DOM at this point, so existing resources can be ignored here.
+        ignoreExistingResources: true,
+      }
+    );
+
+    this.inspector.emitForTests("compatibilityview-initialized");
+  }
+
+  _isAvailable() {
+    return (
+      this.inspector &&
+      this.inspector.sidebar &&
+      this.inspector.sidebar.getCurrentTabID() === "compatibilityview" &&
+      this.inspector.selection &&
+      this.inspector.selection.isConnected()
+    );
+  }
+
+  _parseMarkup(str) {
+    // Using a BrowserLoader for the inspector is currently blocked on performance regressions,
+    // see Bug 1471853.
+    throw new Error(
+      "The inspector cannot use tags in ftl strings because it does not run in a BrowserLoader"
+    );
+  }
+
+  _onChangeAdded({ selector }) {
+    if (!this._isAvailable()) {
+      // In order to update this panel if a change is added while hiding this panel.
+      this._isChangeAddedWhileHidden = true;
+      return;
+    }
+
+    this._isChangeAddedWhileHidden = false;
+
+    // We need to debounce updating nodes since "add-change" event on changes actor is
+    // fired for every typed character until fixing bug 1503036.
+    if (this._previousChangedSelector === selector) {
+      clearTimeout(this._updateNodesTimeoutId);
+    }
+    this._previousChangedSelector = selector;
+
+    this._updateNodesTimeoutId = setTimeout(() => {
+      // TODO: In case of keyframes changes, the selector given from changes actor is
+      // keyframe-selector such as "from" and "100%", not selector for node. Thus,
+      // we need to address this case.
+      this.inspector.store.dispatch(updateNodes(selector));
+    }, 500);
+  }
+
+  _onMarkupMutation(mutations) {
+    const attributeMutation = mutations.filter(
+      mutation =>
+        mutation.type === "attributes" &&
+        (mutation.attributeName === "style" ||
+          mutation.attributeName === "class")
+    );
+    const childListMutation = mutations.filter(
+      mutation => mutation.type === "childList"
+    );
+
+    if (attributeMutation.length === 0 && childListMutation.length === 0) {
+      return;
+    }
+
+    if (!this._isAvailable()) {
+      // In order to update this panel if a change is added while hiding this panel.
+      this._isChangeAddedWhileHidden = true;
+      return;
+    }
+
+    this._isChangeAddedWhileHidden = false;
+
+    // Resource Watcher doesn't respond to programmatic inline CSS
+    // change. This check can be removed once the following bug is resolved
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1506160
+    for (const { target } of attributeMutation) {
+      this.inspector.store.dispatch(updateNode(target));
+    }
+
+    // Destroyed nodes can be cleaned up
+    // once at the end if necessary
+    let cleanupDestroyedNodes = false;
+    for (const { removed, target } of childListMutation) {
+      if (!removed.length) {
+        this.inspector.store.dispatch(appendNode(target));
+        continue;
+      }
+
+      const retainedNodes = removed.filter(node => node && !node.isDestroyed());
+      cleanupDestroyedNodes =
+        cleanupDestroyedNodes || retainedNodes.length !== removed.length;
+
+      for (const retainedNode of retainedNodes) {
+        this.inspector.store.dispatch(removeNode(retainedNode));
+      }
+    }
+
+    if (cleanupDestroyedNodes) {
+      this.inspector.store.dispatch(clearDestroyedNodes());
+    }
+  }
+
+  _onPanelSelected() {
+    const { selectedNode, topLevelTarget } =
+      this.inspector.store.getState().compatibility;
+
+    // Update if the selected node is changed or new change is added while the panel was hidden.
+    if (
+      this.inspector.selection.nodeFront !== selectedNode ||
+      this._isChangeAddedWhileHidden
+    ) {
+      this._onSelectedNodeChanged();
+    }
+
+    // Update if the top target has changed or new change is added while the panel was hidden.
+    if (
+      this.inspector.toolbox.target !== topLevelTarget ||
+      this._isChangeAddedWhileHidden
+    ) {
+      this._onTopLevelTargetChanged();
+    }
+
+    this._isChangeAddedWhileHidden = false;
+  }
+
+  _onSelectedNodeChanged() {
+    if (!this._isAvailable()) {
+      return;
+    }
+
+    this.inspector.store.dispatch(
+      updateSelectedNode(this.inspector.selection.nodeFront)
+    );
+  }
+
+  _onResourceAvailable(resources) {
+    for (const resource of resources) {
+      // Style changes applied inline directly to
+      // the element and its changes are monitored by
+      // _onMarkupMutation via markupmutation events.
+      // Hence those changes can be ignored here
+      if (resource.source?.type !== "element") {
+        this._onChangeAdded(resource);
+      }
+    }
+  }
+
+  _onTopLevelTargetChanged() {
+    if (!this._isAvailable()) {
+      return;
+    }
+
+    this.inspector.store.dispatch(
+      updateTopLevelTarget(this.inspector.toolbox.target)
+    );
+  }
+}
+
+module.exports = CompatibilityView;
diff --git a/devtools/client/inspector/compatibility/README.md b/devtools/client/inspector/compatibility/README.md
new file mode 100644
index 0000000000..40b23f8be0
--- /dev/null
+++ b/devtools/client/inspector/compatibility/README.md
@@ -0,0 +1,25 @@
+# Compatibility Panel
+
+## Related files
+The compatibility panel consists of the following files:
+* Client:
+  * Main: `devtools/client/inspector/compatibility/`
+  * Style: `devtools/client/themes/compatibility.css`
+* Shared:
+  * MDN compatibility dataset: `devtools/shared/compatibility/dataset/`
+  * MDN compatibility library: `devtools/server/actors/compatibility/lib/MDNCompatibility.js`
+  * User setting file - `devtools/shared/compatibility/compatibility-user-settings.js`
+* Server:
+  * Actor: `devtools/server/actors/compatibility.js`
+  * Front: `devtools/client/fronts/compatibility.js`
+  * Spec: `devtools/shared/specs/compatibility.js`
+
+## MDN Compatibility Data
+The Compatibility panel detects issues by comparing against official [MDN compatibility data](https://github.com/mdn/browser-compat-data). It uses a local snapshot of the dataset. This dataset needs to be manually synchronized periodically to `devtools/shared/compatibility/dataset` (ideally with every Firefox release).
+
+To update this dataset, please refer to the guidelines in `devtools/shared/compatibility/README.md`
+
+## Tests
+* Client: `devtools/client/inspector/compatibility/test`
+* MDN compatibility library: `devtools/server/actors/compatibility/lib/test`
+* Server: `devtools/server/tests/browser/browser_compatibility_cssIssues.js`
diff --git a/devtools/client/inspector/compatibility/actions/compatibility.js b/devtools/client/inspector/compatibility/actions/compatibility.js
new file mode 100644
index 0000000000..fa9f410e0d
--- /dev/null
+++ b/devtools/client/inspector/compatibility/actions/compatibility.js
@@ -0,0 +1,332 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
+
+const UserSettings = require("resource://devtools/shared/compatibility/compatibility-user-settings.js");
+
+const {
+  COMPATIBILITY_APPEND_NODE_START,
+  COMPATIBILITY_APPEND_NODE_SUCCESS,
+  COMPATIBILITY_APPEND_NODE_FAILURE,
+  COMPATIBILITY_APPEND_NODE_COMPLETE,
+  COMPATIBILITY_CLEAR_DESTROYED_NODES,
+  COMPATIBILITY_INIT_USER_SETTINGS_START,
+  COMPATIBILITY_INIT_USER_SETTINGS_SUCCESS,
+  COMPATIBILITY_INIT_USER_SETTINGS_FAILURE,
+  COMPATIBILITY_INIT_USER_SETTINGS_COMPLETE,
+  COMPATIBILITY_INTERNAL_APPEND_NODE,
+  COMPATIBILITY_INTERNAL_NODE_UPDATE,
+  COMPATIBILITY_INTERNAL_REMOVE_NODE,
+  COMPATIBILITY_INTERNAL_UPDATE_SELECTED_NODE_ISSUES,
+  COMPATIBILITY_REMOVE_NODE_START,
+  COMPATIBILITY_REMOVE_NODE_SUCCESS,
+  COMPATIBILITY_REMOVE_NODE_FAILURE,
+  COMPATIBILITY_REMOVE_NODE_COMPLETE,
+  COMPATIBILITY_UPDATE_NODE_START,
+  COMPATIBILITY_UPDATE_NODE_SUCCESS,
+  COMPATIBILITY_UPDATE_NODE_FAILURE,
+  COMPATIBILITY_UPDATE_NODE_COMPLETE,
+  COMPATIBILITY_UPDATE_NODES_START,
+  COMPATIBILITY_UPDATE_NODES_SUCCESS,
+  COMPATIBILITY_UPDATE_NODES_FAILURE,
+  COMPATIBILITY_UPDATE_NODES_COMPLETE,
+  COMPATIBILITY_UPDATE_SELECTED_NODE_START,
+  COMPATIBILITY_UPDATE_SELECTED_NODE_SUCCESS,
+  COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE,
+  COMPATIBILITY_UPDATE_SELECTED_NODE_COMPLETE,
+  COMPATIBILITY_UPDATE_SETTINGS_VISIBILITY,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_START,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_SUCCESS,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_FAILURE,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_COMPLETE,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_SUCCESS,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+function appendNode(node) {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_APPEND_NODE_START });
+
+    try {
+      const { targetBrowsers, topLevelTarget } = getState().compatibility;
+      const { walker } = await topLevelTarget.getFront("inspector");
+      await _inspectNode(node, targetBrowsers, walker, dispatch);
+      dispatch({ type: COMPATIBILITY_APPEND_NODE_SUCCESS });
+    } catch (error) {
+      dispatch({
+        type: COMPATIBILITY_APPEND_NODE_FAILURE,
+        error,
+      });
+    }
+
+    dispatch({ type: COMPATIBILITY_APPEND_NODE_COMPLETE });
+  };
+}
+
+function clearDestroyedNodes() {
+  return { type: COMPATIBILITY_CLEAR_DESTROYED_NODES };
+}
+
+function initUserSettings() {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_INIT_USER_SETTINGS_START });
+
+    try {
+      const [defaultTargetBrowsers, targetBrowsers] = await Promise.all([
+        UserSettings.getBrowsersList(),
+        UserSettings.getTargetBrowsers(),
+      ]);
+
+      dispatch({
+        type: COMPATIBILITY_INIT_USER_SETTINGS_SUCCESS,
+        defaultTargetBrowsers,
+        targetBrowsers,
+      });
+    } catch (error) {
+      dispatch({
+        type: COMPATIBILITY_INIT_USER_SETTINGS_FAILURE,
+        error,
+      });
+    }
+
+    dispatch({ type: COMPATIBILITY_INIT_USER_SETTINGS_COMPLETE });
+  };
+}
+
+function removeNode(node) {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_REMOVE_NODE_START });
+
+    try {
+      const { topLevelTarget } = getState().compatibility;
+      const { walker } = await topLevelTarget.getFront("inspector");
+      await _removeNode(node, walker, dispatch);
+      dispatch({ type: COMPATIBILITY_REMOVE_NODE_SUCCESS });
+    } catch (error) {
+      dispatch({
+        type: COMPATIBILITY_REMOVE_NODE_FAILURE,
+        error,
+      });
+    }
+
+    dispatch({ type: COMPATIBILITY_REMOVE_NODE_COMPLETE });
+  };
+}
+
+function updateNodes(selector) {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_UPDATE_NODES_START });
+
+    try {
+      const { selectedNode, topLevelTarget, targetBrowsers } =
+        getState().compatibility;
+      const { walker } = await topLevelTarget.getFront("inspector");
+      const nodeList = await walker.querySelectorAll(walker.rootNode, selector);
+
+      for (const node of await nodeList.items()) {
+        await _updateNode(node, selectedNode, targetBrowsers, dispatch);
+      }
+      dispatch({ type: COMPATIBILITY_UPDATE_NODES_SUCCESS });
+    } catch (error) {
+      dispatch({
+        type: COMPATIBILITY_UPDATE_NODES_FAILURE,
+        error,
+      });
+    }
+
+    dispatch({ type: COMPATIBILITY_UPDATE_NODES_COMPLETE });
+  };
+}
+
+function updateSelectedNode(node) {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_UPDATE_SELECTED_NODE_START });
+
+    try {
+      const { targetBrowsers } = getState().compatibility;
+      await _updateSelectedNodeIssues(node, targetBrowsers, dispatch);
+
+      dispatch({
+        type: COMPATIBILITY_UPDATE_SELECTED_NODE_SUCCESS,
+        node,
+      });
+    } catch (error) {
+      dispatch({
+        type: COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE,
+        error,
+      });
+    }
+
+    dispatch({ type: COMPATIBILITY_UPDATE_SELECTED_NODE_COMPLETE });
+  };
+}
+
+function updateSettingsVisibility(visibility) {
+  return {
+    type: COMPATIBILITY_UPDATE_SETTINGS_VISIBILITY,
+    visibility,
+  };
+}
+
+function updateTargetBrowsers(targetBrowsers) {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_UPDATE_TARGET_BROWSERS_START });
+
+    try {
+      UserSettings.setTargetBrowsers(targetBrowsers);
+
+      const { selectedNode, topLevelTarget } = getState().compatibility;
+
+      if (selectedNode) {
+        await _updateSelectedNodeIssues(selectedNode, targetBrowsers, dispatch);
+      }
+
+      if (topLevelTarget) {
+        await _updateTopLevelTargetIssues(
+          topLevelTarget,
+          targetBrowsers,
+          dispatch
+        );
+      }
+
+      dispatch({
+        type: COMPATIBILITY_UPDATE_TARGET_BROWSERS_SUCCESS,
+        targetBrowsers,
+      });
+    } catch (error) {
+      dispatch({ type: COMPATIBILITY_UPDATE_TARGET_BROWSERS_FAILURE, error });
+    }
+
+    dispatch({ type: COMPATIBILITY_UPDATE_TARGET_BROWSERS_COMPLETE });
+  };
+}
+
+function updateTopLevelTarget(target) {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START });
+
+    try {
+      const { targetBrowsers } = getState().compatibility;
+      await _updateTopLevelTargetIssues(target, targetBrowsers, dispatch);
+
+      dispatch({ type: COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_SUCCESS, target });
+    } catch (error) {
+      dispatch({ type: COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE, error });
+    }
+
+    dispatch({ type: COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE });
+  };
+}
+
+function updateNode(node) {
+  return async ({ dispatch, getState }) => {
+    dispatch({ type: COMPATIBILITY_UPDATE_NODE_START });
+
+    try {
+      const { selectedNode, targetBrowsers } = getState().compatibility;
+      await _updateNode(node, selectedNode, targetBrowsers, dispatch);
+      dispatch({ type: COMPATIBILITY_UPDATE_NODE_SUCCESS });
+    } catch (error) {
+      dispatch({
+        type: COMPATIBILITY_UPDATE_NODE_FAILURE,
+        error,
+      });
+    }
+
+    dispatch({ type: COMPATIBILITY_UPDATE_NODE_COMPLETE });
+  };
+}
+
+async function _getNodeIssues(node, targetBrowsers) {
+  const compatibility = await node.inspectorFront.getCompatibilityFront();
+  const declarationBlocksIssues = await compatibility.getNodeCssIssues(
+    node,
+    targetBrowsers
+  );
+
+  return declarationBlocksIssues;
+}
+
+async function _inspectNode(node, targetBrowsers, walker, dispatch) {
+  if (node.nodeType !== nodeConstants.ELEMENT_NODE) {
+    return;
+  }
+
+  const issues = await _getNodeIssues(node, targetBrowsers);
+
+  if (issues.length) {
+    dispatch({
+      type: COMPATIBILITY_INTERNAL_APPEND_NODE,
+      node,
+      issues,
+    });
+  }
+
+  const { nodes: children } = await walker.children(node);
+  for (const child of children) {
+    await _inspectNode(child, targetBrowsers, walker, dispatch);
+  }
+}
+
+async function _removeNode(node, walker, dispatch) {
+  if (node.nodeType !== nodeConstants.ELEMENT_NODE) {
+    return;
+  }
+
+  dispatch({
+    type: COMPATIBILITY_INTERNAL_REMOVE_NODE,
+    node,
+  });
+
+  const { nodes: children } = await walker.children(node);
+  for (const child of children) {
+    await _removeNode(child, walker, dispatch);
+  }
+}
+
+async function _updateNode(node, selectedNode, targetBrowsers, dispatch) {
+  if (selectedNode.actorID === node.actorID) {
+    await _updateSelectedNodeIssues(node, targetBrowsers, dispatch);
+  }
+
+  const issues = await _getNodeIssues(node, targetBrowsers);
+  dispatch({
+    type: COMPATIBILITY_INTERNAL_NODE_UPDATE,
+    node,
+    issues,
+  });
+}
+
+async function _updateSelectedNodeIssues(node, targetBrowsers, dispatch) {
+  const issues = await _getNodeIssues(node, targetBrowsers);
+
+  dispatch({
+    type: COMPATIBILITY_INTERNAL_UPDATE_SELECTED_NODE_ISSUES,
+    issues,
+  });
+}
+
+async function _updateTopLevelTargetIssues(target, targetBrowsers, dispatch) {
+  const { walker } = await target.getFront("inspector");
+  const documentElement = await walker.documentElement();
+  await _inspectNode(documentElement, targetBrowsers, walker, dispatch);
+}
+
+module.exports = {
+  appendNode,
+  clearDestroyedNodes,
+  initUserSettings,
+  removeNode,
+  updateNodes,
+  updateSelectedNode,
+  updateSettingsVisibility,
+  updateTargetBrowsers,
+  updateTopLevelTarget,
+  updateNode,
+};
diff --git a/devtools/client/inspector/compatibility/actions/index.js b/devtools/client/inspector/compatibility/actions/index.js
new file mode 100644
index 0000000000..4362177213
--- /dev/null
+++ b/devtools/client/inspector/compatibility/actions/index.js
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Append node and their children on DOM mutation
+    "COMPATIBILITY_APPEND_NODE_START",
+    "COMPATIBILITY_APPEND_NODE_SUCCESS",
+    "COMPATIBILITY_APPEND_NODE_FAILURE",
+    "COMPATIBILITY_APPEND_NODE_COMPLETE",
+
+    // Remove references to node that is removed
+    // programmatically whose fronts are destroyed.
+    "COMPATIBILITY_CLEAR_DESTROYED_NODES",
+
+    // Init user settings.
+    "COMPATIBILITY_INIT_USER_SETTINGS_START",
+    "COMPATIBILITY_INIT_USER_SETTINGS_SUCCESS",
+    "COMPATIBILITY_INIT_USER_SETTINGS_FAILURE",
+    "COMPATIBILITY_INIT_USER_SETTINGS_COMPLETE",
+
+    // Append node using internal helper that caused issues.
+    "COMPATIBILITY_INTERNAL_APPEND_NODE",
+
+    // Updates a node via the internal helper
+    "COMPATIBILITY_INTERNAL_NODE_UPDATE",
+
+    // Remove references to node that is removed
+    // in Markup Inspector but retained by DevTools
+    // using the internal helper.
+    "COMPATIBILITY_INTERNAL_REMOVE_NODE",
+
+    // Updates the selected node issues using internal helper.
+    "COMPATIBILITY_INTERNAL_UPDATE_SELECTED_NODE_ISSUES",
+
+    // Clean up removed node from node list
+    "COMPATIBILITY_REMOVE_NODE_START",
+    "COMPATIBILITY_REMOVE_NODE_SUCCESS",
+    "COMPATIBILITY_REMOVE_NODE_FAILURE",
+    "COMPATIBILITY_REMOVE_NODE_COMPLETE",
+
+    // Update node on attribute mutation
+    "COMPATIBILITY_UPDATE_NODE_START",
+    "COMPATIBILITY_UPDATE_NODE_SUCCESS",
+    "COMPATIBILITY_UPDATE_NODE_FAILURE",
+    "COMPATIBILITY_UPDATE_NODE_COMPLETE",
+
+    // Updates nodes.
+    "COMPATIBILITY_UPDATE_NODES_START",
+    "COMPATIBILITY_UPDATE_NODES_SUCCESS",
+    "COMPATIBILITY_UPDATE_NODES_FAILURE",
+    "COMPATIBILITY_UPDATE_NODES_COMPLETE",
+
+    // Updates the selected node.
+    "COMPATIBILITY_UPDATE_SELECTED_NODE_START",
+    "COMPATIBILITY_UPDATE_SELECTED_NODE_SUCCESS",
+    "COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE",
+    "COMPATIBILITY_UPDATE_SELECTED_NODE_COMPLETE",
+
+    // Updates the settings panel visibility.
+    "COMPATIBILITY_UPDATE_SETTINGS_VISIBILITY",
+
+    // Updates the target browsers.
+    "COMPATIBILITY_UPDATE_TARGET_BROWSERS_START",
+    "COMPATIBILITY_UPDATE_TARGET_BROWSERS_SUCCESS",
+    "COMPATIBILITY_UPDATE_TARGET_BROWSERS_FAILURE",
+    "COMPATIBILITY_UPDATE_TARGET_BROWSERS_COMPLETE",
+
+    // Updates the top level target.
+    "COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START",
+    "COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_SUCCESS",
+    "COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE",
+    "COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/compatibility/actions/moz.build b/devtools/client/inspector/compatibility/actions/moz.build
new file mode 100644
index 0000000000..1b2b96950f
--- /dev/null
+++ b/devtools/client/inspector/compatibility/actions/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "compatibility.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/compatibility/components/BrowserIcon.js b/devtools/client/inspector/compatibility/components/BrowserIcon.js
new file mode 100644
index 0000000000..f452ba608a
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/BrowserIcon.js
@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const ICONS = {
+  firefox: {
+    src: "chrome://devtools/skin/images/browsers/firefox.svg",
+    isMobileIconNeeded: false,
+  },
+  firefox_android: {
+    src: "chrome://devtools/skin/images/browsers/firefox.svg",
+    isMobileIconNeeded: true,
+  },
+  chrome: {
+    src: "chrome://devtools/skin/images/browsers/chrome.svg",
+    isMobileIconNeeded: false,
+  },
+  chrome_android: {
+    src: "chrome://devtools/skin/images/browsers/chrome.svg",
+    isMobileIconNeeded: true,
+  },
+  safari: {
+    src: "chrome://devtools/skin/images/browsers/safari.svg",
+    isMobileIconNeeded: false,
+  },
+  safari_ios: {
+    src: "chrome://devtools/skin/images/browsers/safari.svg",
+    isMobileIconNeeded: true,
+  },
+  edge: {
+    src: "chrome://devtools/skin/images/browsers/edge.svg",
+    isMobileIconNeeded: false,
+  },
+  ie: {
+    src: "chrome://devtools/skin/images/browsers/ie.svg",
+    isMobileIconNeeded: false,
+  },
+};
+
+class BrowserIcon extends PureComponent {
+  static get propTypes() {
+    return {
+      id: Types.browser.id,
+      title: PropTypes.string,
+      name: PropTypes.string,
+    };
+  }
+
+  render() {
+    const { id, name, title } = this.props;
+
+    const icon = ICONS[id];
+
+    return dom.span(
+      {
+        className:
+          "compatibility-browser-icon" +
+          (icon.isMobileIconNeeded
+            ? " compatibility-browser-icon--mobile"
+            : ""),
+      },
+      dom.img({
+        className: "compatibility-browser-icon__image",
+        alt: name || title,
+        title,
+        src: icon.src,
+      })
+    );
+  }
+}
+
+module.exports = BrowserIcon;
diff --git a/devtools/client/inspector/compatibility/components/CompatibilityApp.js b/devtools/client/inspector/compatibility/components/CompatibilityApp.js
new file mode 100644
index 0000000000..39614b15e0
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/CompatibilityApp.js
@@ -0,0 +1,126 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const Accordion = createFactory(
+  require("resource://devtools/client/shared/components/Accordion.js")
+);
+const Footer = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/Footer.js")
+);
+const IssuePane = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/IssuePane.js")
+);
+const Settings = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/Settings.js")
+);
+
+class CompatibilityApp extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      // getString prop is injected by the withLocalization wrapper
+      getString: PropTypes.func.isRequired,
+      isSettingsVisible: PropTypes.bool.isRequired,
+      isTopLevelTargetProcessing: PropTypes.bool.isRequired,
+      selectedNodeIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
+        .isRequired,
+      topLevelTargetIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
+        .isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      dispatch,
+      getString,
+      isSettingsVisible,
+      isTopLevelTargetProcessing,
+      selectedNodeIssues,
+      topLevelTargetIssues,
+      setSelectedNode,
+    } = this.props;
+
+    const selectedNodeIssuePane = IssuePane({
+      issues: selectedNodeIssues,
+    });
+
+    const topLevelTargetIssuePane =
+      topLevelTargetIssues.length || !isTopLevelTargetProcessing
+        ? IssuePane({
+            dispatch,
+            issues: topLevelTargetIssues,
+            setSelectedNode,
+          })
+        : null;
+
+    const throbber = isTopLevelTargetProcessing
+      ? dom.div({
+          className: "compatibility-app__throbber devtools-throbber",
+        })
+      : null;
+
+    return dom.section(
+      {
+        className: "compatibility-app theme-sidebar inspector-tabpanel",
+      },
+      dom.div(
+        {
+          className:
+            "compatibility-app__container" +
+            (isSettingsVisible ? " compatibility-app__container-hidden" : ""),
+        },
+        Accordion({
+          className: "compatibility-app__main",
+          items: [
+            {
+              id: "compatibility-app--selected-element-pane",
+              header: getString("compatibility-selected-element-header"),
+              component: selectedNodeIssuePane,
+              opened: true,
+            },
+            {
+              id: "compatibility-app--all-elements-pane",
+              header: getString("compatibility-all-elements-header"),
+              component: [topLevelTargetIssuePane, throbber],
+              opened: true,
+            },
+          ],
+        }),
+        Footer({
+          className: "compatibility-app__footer",
+        })
+      ),
+      isSettingsVisible ? Settings() : null
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    isSettingsVisible: state.compatibility.isSettingsVisible,
+    isTopLevelTargetProcessing: state.compatibility.isTopLevelTargetProcessing,
+    selectedNodeIssues: state.compatibility.selectedNodeIssues,
+    topLevelTargetIssues: state.compatibility.topLevelTargetIssues,
+  };
+};
+module.exports = FluentReact.withLocalization(
+  connect(mapStateToProps)(CompatibilityApp)
+);
diff --git a/devtools/client/inspector/compatibility/components/Footer.js b/devtools/client/inspector/compatibility/components/Footer.js
new file mode 100644
index 0000000000..c48484b1c4
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/Footer.js
@@ -0,0 +1,85 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+const {
+  updateSettingsVisibility,
+} = require("resource://devtools/client/inspector/compatibility/actions/compatibility.js");
+
+const SETTINGS_ICON = "chrome://devtools/skin/images/settings.svg";
+
+class Footer extends PureComponent {
+  static get propTypes() {
+    return {
+      updateSettingsVisibility: PropTypes.func.isRequired,
+    };
+  }
+
+  _renderButton(icon, labelId, titleId, onClick) {
+    return Localized(
+      {
+        id: titleId,
+        attrs: { title: true },
+      },
+      dom.button(
+        {
+          className: "compatibility-footer__button",
+          title: titleId,
+          onClick,
+        },
+        dom.img({
+          className: "compatibility-footer__icon",
+          src: icon,
+        }),
+        Localized(
+          {
+            id: labelId,
+          },
+          dom.label(
+            {
+              className: "compatibility-footer__label",
+            },
+            labelId
+          )
+        )
+      )
+    );
+  }
+
+  render() {
+    return dom.footer(
+      {
+        className: "compatibility-footer",
+      },
+      this._renderButton(
+        SETTINGS_ICON,
+        "compatibility-settings-button-label",
+        "compatibility-settings-button-title",
+        this.props.updateSettingsVisibility
+      )
+    );
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    updateSettingsVisibility: () => dispatch(updateSettingsVisibility(true)),
+  };
+};
+
+module.exports = connect(null, mapDispatchToProps)(Footer);
diff --git a/devtools/client/inspector/compatibility/components/IssueItem.js b/devtools/client/inspector/compatibility/components/IssueItem.js
new file mode 100644
index 0000000000..c576e58223
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/IssueItem.js
@@ -0,0 +1,245 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+loader.lazyRequireGetter(
+  this,
+  "openDocLink",
+  "resource://devtools/client/shared/link.js",
+  true
+);
+
+const UnsupportedBrowserList = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/UnsupportedBrowserList.js")
+);
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const NodePane = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/NodePane.js")
+);
+
+// For test
+loader.lazyRequireGetter(
+  this,
+  "toSnakeCase",
+  "resource://devtools/client/inspector/compatibility/utils/cases.js",
+  true
+);
+
+const MDN_LINK_PARAMS = new URLSearchParams({
+  utm_source: "devtools",
+  utm_medium: "inspector-compatibility",
+  utm_campaign: "default",
+});
+
+class IssueItem extends PureComponent {
+  static get propTypes() {
+    return {
+      ...Types.issue,
+      dispatch: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this._onLinkClicked = this._onLinkClicked.bind(this);
+  }
+
+  _onLinkClicked(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const isMacOS = Services.appinfo.OS === "Darwin";
+
+    openDocLink(e.target.href, {
+      relatedToCurrent: true,
+      inBackground: isMacOS ? e.metaKey : e.ctrlKey,
+    });
+  }
+
+  _getTestDataAttributes() {
+    const testDataSet = {};
+
+    if (Services.prefs.getBoolPref("devtools.testing", false)) {
+      for (const [key, value] of Object.entries(this.props)) {
+        if (key === "nodes") {
+          continue;
+        }
+        const datasetKey = `data-qa-${toSnakeCase(key)}`;
+        testDataSet[datasetKey] = JSON.stringify(value);
+      }
+    }
+
+    return testDataSet;
+  }
+
+  _renderAliases() {
+    const { property } = this.props;
+    let { aliases } = this.props;
+
+    if (!aliases) {
+      return null;
+    }
+
+    aliases = aliases.filter(alias => alias !== property);
+
+    if (aliases.length === 0) {
+      return null;
+    }
+
+    return dom.ul(
+      {
+        className: "compatibility-issue-item__aliases",
+      },
+      aliases.map(alias =>
+        dom.li(
+          {
+            key: alias,
+            className: "compatibility-issue-item__alias",
+          },
+          alias
+        )
+      )
+    );
+  }
+
+  _renderCauses() {
+    const { deprecated, experimental, prefixNeeded } = this.props;
+
+    if (!deprecated && !experimental && !prefixNeeded) {
+      return null;
+    }
+
+    let localizationId = "";
+
+    if (deprecated && experimental && prefixNeeded) {
+      localizationId =
+        "compatibility-issue-deprecated-experimental-prefixneeded";
+    } else if (deprecated && experimental) {
+      localizationId = "compatibility-issue-deprecated-experimental";
+    } else if (deprecated && prefixNeeded) {
+      localizationId = "compatibility-issue-deprecated-prefixneeded";
+    } else if (experimental && prefixNeeded) {
+      localizationId = "compatibility-issue-experimental-prefixneeded";
+    } else if (deprecated) {
+      localizationId = "compatibility-issue-deprecated";
+    } else if (experimental) {
+      localizationId = "compatibility-issue-experimental";
+    } else if (prefixNeeded) {
+      localizationId = "compatibility-issue-prefixneeded";
+    }
+
+    return Localized(
+      {
+        id: localizationId,
+      },
+      dom.span(
+        { className: "compatibility-issue-item__causes" },
+        localizationId
+      )
+    );
+  }
+
+  _renderPropertyEl() {
+    const { property, url, specUrl } = this.props;
+    const baseCls = "compatibility-issue-item__property devtools-monospace";
+    if (!url && !specUrl) {
+      return dom.span({ className: baseCls }, property);
+    }
+
+    const href = url ? `${url}?${MDN_LINK_PARAMS}` : specUrl;
+
+    return dom.a(
+      {
+        className: `${baseCls} ${
+          url
+            ? "compatibility-issue-item__mdn-link"
+            : "compatibility-issue-item__spec-link"
+        }`,
+        href,
+        title: href,
+        onClick: e => this._onLinkClicked(e),
+      },
+      property
+    );
+  }
+
+  _renderDescription() {
+    return dom.div(
+      {
+        className: "compatibility-issue-item__description",
+      },
+      this._renderPropertyEl(),
+      this._renderCauses(),
+      this._renderUnsupportedBrowserList()
+    );
+  }
+
+  _renderNodeList() {
+    const { dispatch, nodes, setSelectedNode } = this.props;
+
+    if (!nodes) {
+      return null;
+    }
+
+    return NodePane({
+      dispatch,
+      nodes,
+      setSelectedNode,
+    });
+  }
+
+  _renderUnsupportedBrowserList() {
+    const { unsupportedBrowsers } = this.props;
+
+    return unsupportedBrowsers.length
+      ? UnsupportedBrowserList({ browsers: unsupportedBrowsers })
+      : null;
+  }
+
+  render() {
+    const { deprecated, experimental, property, unsupportedBrowsers } =
+      this.props;
+
+    const classes = ["compatibility-issue-item"];
+
+    if (deprecated) {
+      classes.push("compatibility-issue-item--deprecated");
+    }
+
+    if (experimental) {
+      classes.push("compatibility-issue-item--experimental");
+    }
+
+    if (unsupportedBrowsers.length) {
+      classes.push("compatibility-issue-item--unsupported");
+    }
+
+    return dom.li(
+      {
+        className: classes.join(" "),
+        key: property,
+        ...this._getTestDataAttributes(),
+      },
+      this._renderDescription(),
+      this._renderAliases(),
+      this._renderNodeList()
+    );
+  }
+}
+
+module.exports = IssueItem;
diff --git a/devtools/client/inspector/compatibility/components/IssueList.js b/devtools/client/inspector/compatibility/components/IssueList.js
new file mode 100644
index 0000000000..f334276cb3
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/IssueList.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const IssueItem = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/IssueItem.js")
+);
+
+class IssueList extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      issues: PropTypes.arrayOf(PropTypes.shape(Types.issue)).isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { dispatch, issues, setSelectedNode } = this.props;
+
+    return dom.ul(
+      { className: "compatibility-issue-list" },
+      issues.map(issue =>
+        IssueItem({
+          ...issue,
+          dispatch,
+          setSelectedNode,
+        })
+      )
+    );
+  }
+}
+
+module.exports = IssueList;
diff --git a/devtools/client/inspector/compatibility/components/IssuePane.js b/devtools/client/inspector/compatibility/components/IssuePane.js
new file mode 100644
index 0000000000..b313274d9a
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/IssuePane.js
@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const IssueList = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/IssueList.js")
+);
+
+class IssuePane extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      issues: PropTypes.arrayOf(PropTypes.shape(Types.issue)).isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  _renderNoIssues() {
+    return Localized(
+      { id: "compatibility-no-issues-found" },
+      dom.p(
+        { className: "devtools-sidepanel-no-result" },
+        "compatibility-no-issues-found"
+      )
+    );
+  }
+
+  render() {
+    const { dispatch, issues, setSelectedNode } = this.props;
+
+    return issues.length
+      ? IssueList({
+          dispatch,
+          issues,
+          setSelectedNode,
+        })
+      : this._renderNoIssues();
+  }
+}
+
+module.exports = IssuePane;
diff --git a/devtools/client/inspector/compatibility/components/NodeItem.js b/devtools/client/inspector/compatibility/components/NodeItem.js
new file mode 100644
index 0000000000..078b04a3b4
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/NodeItem.js
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  translateNodeFrontToGrip,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const {
+  REPS,
+  MODE,
+} = require("resource://devtools/client/shared/components/reps/index.js");
+const { Rep } = REPS;
+const ElementNode = REPS.ElementNode;
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
+
+class NodeItem extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      node: Types.node.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { dispatch, node, setSelectedNode } = this.props;
+
+    return dom.li(
+      { className: "compatibility-node-item" },
+      Rep({
+        defaultRep: ElementNode,
+        mode: MODE.TINY,
+        object: translateNodeFrontToGrip(node),
+        onDOMNodeClick: () => {
+          setSelectedNode(node);
+          dispatch(unhighlightNode());
+        },
+        onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
+        onDOMNodeMouseOver: () => dispatch(highlightNode(node)),
+      })
+    );
+  }
+}
+
+module.exports = NodeItem;
diff --git a/devtools/client/inspector/compatibility/components/NodeList.js b/devtools/client/inspector/compatibility/components/NodeList.js
new file mode 100644
index 0000000000..7dc93c8b06
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/NodeList.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const NodeItem = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/NodeItem.js")
+);
+
+class NodeList extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      nodes: PropTypes.arrayOf(Types.node).isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { dispatch, nodes, setSelectedNode } = this.props;
+
+    return dom.ul(
+      { className: "compatibility-node-list" },
+      nodes.map(node =>
+        NodeItem({
+          dispatch,
+          node,
+          setSelectedNode,
+        })
+      )
+    );
+  }
+}
+
+module.exports = NodeList;
diff --git a/devtools/client/inspector/compatibility/components/NodePane.js b/devtools/client/inspector/compatibility/components/NodePane.js
new file mode 100644
index 0000000000..06c844d012
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/NodePane.js
@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const NodeList = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/NodeList.js")
+);
+
+class NodePane extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      nodes: PropTypes.arrayOf(Types.node).isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { nodes } = this.props;
+
+    return dom.details(
+      {
+        className: "compatibility-node-pane",
+        open: nodes.length <= 1,
+      },
+      Localized(
+        {
+          id: "compatibility-issue-occurrences",
+          $number: nodes.length,
+        },
+        dom.summary(
+          { className: "compatibility-node-pane__summary" },
+          "compatibility-issue-occurrences"
+        )
+      ),
+      NodeList(this.props)
+    );
+  }
+}
+
+module.exports = NodePane;
diff --git a/devtools/client/inspector/compatibility/components/Settings.js b/devtools/client/inspector/compatibility/components/Settings.js
new file mode 100644
index 0000000000..6f55353aa6
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/Settings.js
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+const BrowserIcon = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/BrowserIcon.js")
+);
+
+const {
+  updateSettingsVisibility,
+  updateTargetBrowsers,
+} = require("resource://devtools/client/inspector/compatibility/actions/compatibility.js");
+
+const CLOSE_ICON = "chrome://devtools/skin/images/close.svg";
+
+class Settings extends PureComponent {
+  static get propTypes() {
+    return {
+      defaultTargetBrowsers: PropTypes.arrayOf(PropTypes.shape(Types.browser))
+        .isRequired,
+      targetBrowsers: PropTypes.arrayOf(PropTypes.shape(Types.browser))
+        .isRequired,
+      updateTargetBrowsers: PropTypes.func.isRequired,
+      updateSettingsVisibility: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._onTargetBrowserChanged = this._onTargetBrowserChanged.bind(this);
+
+    this.state = {
+      targetBrowsers: props.targetBrowsers,
+    };
+  }
+
+  _onTargetBrowserChanged({ target }) {
+    const { id, status } = target.dataset;
+    let { targetBrowsers } = this.state;
+
+    if (target.checked) {
+      targetBrowsers = [...targetBrowsers, { id, status }];
+    } else {
+      targetBrowsers = targetBrowsers.filter(
+        b => !(b.id === id && b.status === status)
+      );
+    }
+
+    this.setState({ targetBrowsers });
+  }
+
+  _renderTargetBrowsers() {
+    const { defaultTargetBrowsers } = this.props;
+    const { targetBrowsers } = this.state;
+
+    return dom.section(
+      {
+        className: "compatibility-settings__target-browsers",
+      },
+      Localized(
+        { id: "compatibility-target-browsers-header" },
+        dom.header(
+          {
+            className: "compatibility-settings__target-browsers-header",
+          },
+          "compatibility-target-browsers-header"
+        )
+      ),
+      dom.ul(
+        {
+          className: "compatibility-settings__target-browsers-list",
+        },
+        defaultTargetBrowsers.map(({ id, name, status, version }) => {
+          const inputId = `${id}-${status}`;
+          const isTargetBrowser = !!targetBrowsers.find(
+            b => b.id === id && b.status === status
+          );
+          return dom.li(
+            {
+              className: "compatibility-settings__target-browsers-item",
+            },
+            dom.input({
+              id: inputId,
+              type: "checkbox",
+              checked: isTargetBrowser,
+              onChange: this._onTargetBrowserChanged,
+              "data-id": id,
+              "data-status": status,
+            }),
+            dom.label(
+              {
+                className: "compatibility-settings__target-browsers-item-label",
+                htmlFor: inputId,
+              },
+              BrowserIcon({ id, title: `${name} ${status}` }),
+              `${name} ${status} (${version})`
+            )
+          );
+        })
+      )
+    );
+  }
+
+  _renderHeader() {
+    return dom.header(
+      {
+        className: "compatibility-settings__header",
+      },
+      Localized(
+        { id: "compatibility-settings-header" },
+        dom.label(
+          {
+            className: "compatibility-settings__header-label",
+          },
+          "compatibility-settings-header"
+        )
+      ),
+      Localized(
+        {
+          id: "compatibility-close-settings-button",
+          attrs: { title: true },
+        },
+        dom.button(
+          {
+            className: "compatibility-settings__header-button",
+            title: "compatibility-close-settings-button",
+            onClick: () => {
+              const { defaultTargetBrowsers } = this.props;
+              const { targetBrowsers } = this.state;
+
+              // Sort by ordering of default browsers.
+              const browsers = defaultTargetBrowsers.filter(b =>
+                targetBrowsers.find(t => t.id === b.id && t.status === b.status)
+              );
+
+              if (
+                this.props.targetBrowsers.toString() !== browsers.toString()
+              ) {
+                this.props.updateTargetBrowsers(browsers);
+              }
+
+              this.props.updateSettingsVisibility();
+            },
+          },
+          dom.img({
+            className: "compatibility-settings__header-icon",
+            src: CLOSE_ICON,
+          })
+        )
+      )
+    );
+  }
+
+  render() {
+    return dom.section(
+      {
+        className: "compatibility-settings",
+      },
+      this._renderHeader(),
+      this._renderTargetBrowsers()
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    defaultTargetBrowsers: state.compatibility.defaultTargetBrowsers,
+    targetBrowsers: state.compatibility.targetBrowsers,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    updateTargetBrowsers: browsers => dispatch(updateTargetBrowsers(browsers)),
+    updateSettingsVisibility: () => dispatch(updateSettingsVisibility(false)),
+  };
+};
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings);
diff --git a/devtools/client/inspector/compatibility/components/UnsupportedBrowserItem.js b/devtools/client/inspector/compatibility/components/UnsupportedBrowserItem.js
new file mode 100644
index 0000000000..ae9806d206
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/UnsupportedBrowserItem.js
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const BrowserIcon = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/BrowserIcon.js")
+);
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+class UnsupportedBrowserItem extends PureComponent {
+  static get propTypes() {
+    return {
+      id: Types.browser.id,
+      name: Types.browser.name,
+      unsupportedVersions: PropTypes.array.isRequired,
+      version: Types.browser.version,
+    };
+  }
+
+  render() {
+    const { unsupportedVersions, id, name, version } = this.props;
+
+    return Localized(
+      {
+        id: "compatibility-issue-browsers-list",
+        $browsers: unsupportedVersions
+          .map(
+            ({ version: v, status }) =>
+              `${name} ${v}${status ? ` (${status})` : ""}`
+          )
+          .join("\n"),
+        attrs: { title: true },
+      },
+      dom.li(
+        { className: "compatibility-browser", "data-browser-id": id },
+        BrowserIcon({ id, name }),
+        dom.span(
+          {
+            className: "compatibility-browser-version",
+          },
+          version
+        )
+      )
+    );
+  }
+}
+
+module.exports = UnsupportedBrowserItem;
diff --git a/devtools/client/inspector/compatibility/components/UnsupportedBrowserList.js b/devtools/client/inspector/compatibility/components/UnsupportedBrowserList.js
new file mode 100644
index 0000000000..51b513253f
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/UnsupportedBrowserList.js
@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const UnsupportedBrowserItem = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/UnsupportedBrowserItem.js")
+);
+
+const Types = require("resource://devtools/client/inspector/compatibility/types.js");
+
+class UnsupportedBrowserList extends PureComponent {
+  static get propTypes() {
+    return {
+      browsers: PropTypes.arrayOf(PropTypes.shape(Types.browser)).isRequired,
+    };
+  }
+
+  render() {
+    const { browsers } = this.props;
+
+    const unsupportedBrowserItems = {};
+
+    const unsupportedVersionsListByBrowser = new Map();
+
+    for (const { name, version, status } of browsers) {
+      if (!unsupportedVersionsListByBrowser.has(name)) {
+        unsupportedVersionsListByBrowser.set(name, []);
+      }
+      unsupportedVersionsListByBrowser.get(name).push({ version, status });
+    }
+
+    for (const { id, name, version, status } of browsers) {
+      // Only display one icon per browser
+      if (!unsupportedBrowserItems[id]) {
+        if (status === "esr") {
+          // The data is ordered by version number, so we'll show the first unsupported
+          // browser version. This might be confusing for Firefox as we'll show ESR
+          // version first, and so the user wouldn't be able to tell if there's an issue
+          // only on ESR, or also on release.
+          // So only show ESR if there's no newer unsupported version
+          const newerVersionIsUnsupported = browsers.find(
+            browser => browser.id == id && browser.status !== status
+          );
+          if (newerVersionIsUnsupported) {
+            continue;
+          }
+        }
+
+        unsupportedBrowserItems[id] = UnsupportedBrowserItem({
+          key: id,
+          id,
+          name,
+          version,
+          unsupportedVersions: unsupportedVersionsListByBrowser.get(name),
+        });
+      }
+    }
+    return dom.ul(
+      {
+        className: "compatibility-unsupported-browser-list",
+      },
+      Object.values(unsupportedBrowserItems)
+    );
+  }
+}
+
+module.exports = UnsupportedBrowserList;
diff --git a/devtools/client/inspector/compatibility/components/moz.build b/devtools/client/inspector/compatibility/components/moz.build
new file mode 100644
index 0000000000..b4a1c7cf7c
--- /dev/null
+++ b/devtools/client/inspector/compatibility/components/moz.build
@@ -0,0 +1,20 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "BrowserIcon.js",
+    "CompatibilityApp.js",
+    "Footer.js",
+    "IssueItem.js",
+    "IssueList.js",
+    "IssuePane.js",
+    "NodeItem.js",
+    "NodeList.js",
+    "NodePane.js",
+    "Settings.js",
+    "UnsupportedBrowserItem.js",
+    "UnsupportedBrowserList.js",
+)
diff --git a/devtools/client/inspector/compatibility/moz.build b/devtools/client/inspector/compatibility/moz.build
new file mode 100644
index 0000000000..92b29743cc
--- /dev/null
+++ b/devtools/client/inspector/compatibility/moz.build
@@ -0,0 +1,23 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "actions",
+    "components",
+    "reducers",
+    "utils",
+]
+
+BROWSER_CHROME_MANIFESTS += ["test/browser/browser.toml"]
+XPCSHELL_TESTS_MANIFESTS += ["test/xpcshell/xpcshell.toml"]
+
+DevToolsModules(
+    "CompatibilityView.js",
+    "types.js",
+)
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Inspector: Compatibility")
diff --git a/devtools/client/inspector/compatibility/reducers/compatibility.js b/devtools/client/inspector/compatibility/reducers/compatibility.js
new file mode 100644
index 0000000000..9256167601
--- /dev/null
+++ b/devtools/client/inspector/compatibility/reducers/compatibility.js
@@ -0,0 +1,262 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  COMPATIBILITY_APPEND_NODE_FAILURE,
+  COMPATIBILITY_CLEAR_DESTROYED_NODES,
+  COMPATIBILITY_INIT_USER_SETTINGS_SUCCESS,
+  COMPATIBILITY_INIT_USER_SETTINGS_FAILURE,
+  COMPATIBILITY_INTERNAL_APPEND_NODE,
+  COMPATIBILITY_INTERNAL_NODE_UPDATE,
+  COMPATIBILITY_INTERNAL_REMOVE_NODE,
+  COMPATIBILITY_INTERNAL_UPDATE_SELECTED_NODE_ISSUES,
+  COMPATIBILITY_REMOVE_NODE_FAILURE,
+  COMPATIBILITY_UPDATE_NODE_FAILURE,
+  COMPATIBILITY_UPDATE_NODES_FAILURE,
+  COMPATIBILITY_UPDATE_SELECTED_NODE_SUCCESS,
+  COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE,
+  COMPATIBILITY_UPDATE_SETTINGS_VISIBILITY,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_START,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_SUCCESS,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_FAILURE,
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_COMPLETE,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_SUCCESS,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+const INITIAL_STATE = {
+  defaultTargetBrowsers: [],
+  isSettingsVisible: false,
+  isTopLevelTargetProcessing: false,
+  selectedNode: null,
+  selectedNodeIssues: [],
+  topLevelTarget: null,
+  topLevelTargetIssues: [],
+  targetBrowsers: [],
+};
+
+const reducers = {
+  [COMPATIBILITY_APPEND_NODE_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_APPEND_NODE_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_CLEAR_DESTROYED_NODES](state) {
+    const topLevelTargetIssues = _clearDestroyedNodes(
+      state.topLevelTargetIssues
+    );
+    return Object.assign({}, state, { topLevelTargetIssues });
+  },
+  [COMPATIBILITY_INIT_USER_SETTINGS_SUCCESS](
+    state,
+    { defaultTargetBrowsers, targetBrowsers }
+  ) {
+    return Object.assign({}, state, { defaultTargetBrowsers, targetBrowsers });
+  },
+  [COMPATIBILITY_INIT_USER_SETTINGS_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_INIT_USER_SETTINGS_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_INTERNAL_APPEND_NODE](state, { node, issues }) {
+    const topLevelTargetIssues = _appendTopLevelTargetIssues(
+      state.topLevelTargetIssues,
+      node,
+      issues
+    );
+    return Object.assign({}, state, { topLevelTargetIssues });
+  },
+  [COMPATIBILITY_INTERNAL_NODE_UPDATE](state, { node, issues }) {
+    const topLevelTargetIssues = _updateTopLevelTargetIssues(
+      state.topLevelTargetIssues,
+      node,
+      issues
+    );
+    return Object.assign({}, state, { topLevelTargetIssues });
+  },
+  [COMPATIBILITY_INTERNAL_REMOVE_NODE](state, { node }) {
+    const topLevelTargetIssues = _removeNodeOrIssues(
+      state.topLevelTargetIssues,
+      node,
+      []
+    );
+    return Object.assign({}, state, { topLevelTargetIssues });
+  },
+  [COMPATIBILITY_INTERNAL_UPDATE_SELECTED_NODE_ISSUES](state, { issues }) {
+    return Object.assign({}, state, { selectedNodeIssues: issues });
+  },
+  [COMPATIBILITY_REMOVE_NODE_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_UPDATE_NODES_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_UPDATE_NODE_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_UPDATE_NODES_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_UPDATE_NODES_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_UPDATE_NODES_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_UPDATE_SELECTED_NODE_SUCCESS](state, { node }) {
+    return Object.assign({}, state, { selectedNode: node });
+  },
+  [COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_UPDATE_SETTINGS_VISIBILITY](state, { visibility }) {
+    return Object.assign({}, state, { isSettingsVisible: visibility });
+  },
+  [COMPATIBILITY_UPDATE_TARGET_BROWSERS_START](state) {
+    return Object.assign({}, state, {
+      isTopLevelTargetProcessing: true,
+      topLevelTargetIssues: [],
+    });
+  },
+  [COMPATIBILITY_UPDATE_TARGET_BROWSERS_SUCCESS](state, { targetBrowsers }) {
+    return Object.assign({}, state, { targetBrowsers });
+  },
+  [COMPATIBILITY_UPDATE_TARGET_BROWSERS_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_UPDATE_TARGET_BROWSERS_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_UPDATE_TARGET_BROWSERS_COMPLETE](state) {
+    return Object.assign({}, state, { isTopLevelTargetProcessing: false });
+  },
+  [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START](state) {
+    return Object.assign({}, state, {
+      isTopLevelTargetProcessing: true,
+      topLevelTargetIssues: [],
+    });
+  },
+  [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_SUCCESS](state, { target }) {
+    return Object.assign({}, state, { topLevelTarget: target });
+  },
+  [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE](state, { error }) {
+    _showError(COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE, error);
+    return state;
+  },
+  [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE](state, { target }) {
+    return Object.assign({}, state, { isTopLevelTargetProcessing: false });
+  },
+};
+
+function _appendTopLevelTargetIssues(targetIssues, node, issues) {
+  targetIssues = [...targetIssues];
+  for (const issue of issues) {
+    const index = _indexOfIssue(targetIssues, issue);
+    if (index < 0) {
+      issue.nodes = [node];
+      targetIssues.push(issue);
+      continue;
+    }
+
+    const targetIssue = targetIssues[index];
+    const nodeIndex = targetIssue.nodes.findIndex(
+      issueNode => issueNode.actorID === node.actorID
+    );
+
+    if (nodeIndex < 0) {
+      targetIssue.nodes = [...targetIssue.nodes, node];
+    }
+  }
+  return targetIssues;
+}
+
+function _clearDestroyedNodes(targetIssues) {
+  return targetIssues.reduce((newIssues, targetIssue) => {
+    const retainedNodes = targetIssue.nodes.filter(
+      n => n.targetFront && !n.targetFront.isDestroyed()
+    );
+
+    // All the nodes for a given issue are destroyed
+    if (retainedNodes.length === 0) {
+      // Remove issue.
+      return newIssues;
+    }
+
+    targetIssue.nodes = retainedNodes;
+    return [...newIssues, targetIssue];
+  }, []);
+}
+
+function _indexOfIssue(issues, issue) {
+  return issues.findIndex(
+    i => i.type === issue.type && i.property === issue.property
+  );
+}
+
+function _indexOfNode(issue, node) {
+  return issue.nodes.findIndex(n => n.actorID === node.actorID);
+}
+
+function _removeNodeOrIssues(targetIssues, node, issues) {
+  return targetIssues.reduce((newIssues, targetIssue) => {
+    if (issues.length && _indexOfIssue(issues, targetIssue) >= 0) {
+      // The targetIssue is still in the node.
+      return [...newIssues, targetIssue];
+    }
+
+    const indexOfNodeInTarget = _indexOfNode(targetIssue, node);
+    if (indexOfNodeInTarget < 0) {
+      // The targetIssue does not have the node to remove.
+      return [...newIssues, targetIssue];
+    }
+
+    // This issue on the updated node is gone.
+    if (targetIssue.nodes.length === 1) {
+      // Remove issue.
+      return newIssues;
+    }
+
+    // Remove node from the nodes.
+    targetIssue.nodes = [
+      ...targetIssue.nodes.slice(0, indexOfNodeInTarget),
+      ...targetIssue.nodes.slice(indexOfNodeInTarget + 1),
+    ];
+    return [...newIssues, targetIssue];
+  }, []);
+}
+
+function _updateTopLevelTargetIssues(targetIssues, node, issues) {
+  // Remove issues or node.
+  targetIssues = _removeNodeOrIssues(targetIssues, node, issues);
+
+  // Append issues or node.
+  const appendables = issues.filter(issue => {
+    const indexOfIssue = _indexOfIssue(targetIssues, issue);
+    return (
+      indexOfIssue < 0 || _indexOfNode(targetIssues[indexOfIssue], node) < 0
+    );
+  });
+  targetIssues = _appendTopLevelTargetIssues(targetIssues, node, appendables);
+
+  // Update fields.
+  for (const issue of issues) {
+    const indexOfIssue = _indexOfIssue(targetIssues, issue);
+
+    if (indexOfIssue < 0) {
+      continue;
+    }
+
+    const targetIssue = targetIssues[indexOfIssue];
+    targetIssues[indexOfIssue] = Object.assign(issue, {
+      nodes: targetIssue.nodes,
+    });
+  }
+
+  return targetIssues;
+}
+
+function _showError(action, error) {
+  console.error(`[${action}] ${error.message}`);
+  console.error(error.stack);
+}
+
+module.exports = function (state = INITIAL_STATE, action) {
+  const reducer = reducers[action.type];
+  return reducer ? reducer(state, action) : state;
+};
diff --git a/devtools/client/inspector/compatibility/reducers/moz.build b/devtools/client/inspector/compatibility/reducers/moz.build
new file mode 100644
index 0000000000..b939919567
--- /dev/null
+++ b/devtools/client/inspector/compatibility/reducers/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "compatibility.js",
+)
diff --git a/devtools/client/inspector/compatibility/test/browser/browser.toml b/devtools/client/inspector/compatibility/test/browser/browser.toml
new file mode 100644
index 0000000000..b57f9d3837
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser.toml
@@ -0,0 +1,41 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_compatibility_css-property_issue.js"]
+
+["browser_compatibility_dynamic_js-attribute-change.js"]
+
+["browser_compatibility_dynamic_js-dom-change.js"]
+
+["browser_compatibility_dynamic_markup-dom-change.js"]
+
+["browser_compatibility_dynamic_ruleview-attribute-change.js"]
+
+["browser_compatibility_event_document-reload.js"]
+
+["browser_compatibility_event_panel-select.js"]
+
+["browser_compatibility_event_rule-change.js"]
+
+["browser_compatibility_event_selected-node-change.js"]
+
+["browser_compatibility_event_top-level-target-change.js"]
+
+["browser_compatibility_issue-node.js"]
+
+["browser_compatibility_settings.js"]
+
+["browser_compatibility_throbber.js"]
+
+["browser_compatibility_unsupported-browsers_all.js"]
+
+["browser_compatibility_unsupported-browsers_some.js"]
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_css-property_issue.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_css-property_issue.js
new file mode 100644
index 0000000000..d026283b4d
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_css-property_issue.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that unsupported CSS properties are correctly reported as issues.
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+
+const TEST_URI = `
+  <style>
+  body {
+    color: blue;
+    scrollbar-width: thin;
+    user-modify: read-only;
+    hyphenate-limit-chars: auto;
+    overflow-clip-box: padding-box;
+  }
+  div {
+    ruby-align: center;
+  }
+  </style>
+  <body>
+    <div>test</div>
+  </body>
+`;
+
+const TEST_DATA_SELECTED = [
+  {
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+    property: "scrollbar-width",
+    url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+    deprecated: false,
+    experimental: false,
+  },
+  {
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+    property: "user-modify",
+    url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+    aliases: ["user-modify"],
+    deprecated: true,
+    experimental: false,
+  },
+  {
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+    property: "hyphenate-limit-chars",
+    // No MDN url but a spec one
+    specUrl:
+      "https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars",
+    deprecated: false,
+    experimental: false,
+  },
+  // TODO: Re-enable it when we have another property with no MDN url nor spec url Bug 1840910
+  /*{
+    // No MDN url nor spec url
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+    property: "overflow-clip-box",
+    deprecated: false,
+    experimental: false,
+  },*/
+];
+
+const TEST_DATA_ALL = [
+  ...TEST_DATA_SELECTED,
+  {
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+    property: "ruby-align",
+    url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+    deprecated: false,
+    experimental: true,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { allElementsPane, selectedElementPane } =
+    await openCompatibilityView();
+
+  // If the test fail because the properties used are no longer in the dataset, or they
+  // now have mdn/spec url although we expected them not to, uncomment the next line
+  // to get all the properties in the dataset that don't have a MDN url.
+  // logCssCompatDataPropertiesWithoutMDNUrl()
+
+  info("Check the content of the issue list on the selected element");
+  await assertIssueList(selectedElementPane, TEST_DATA_SELECTED);
+
+  info("Check the content of the issue list on all elements");
+  await assertIssueList(allElementsPane, TEST_DATA_ALL);
+});
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-attribute-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-attribute-change.js
new file mode 100644
index 0000000000..99845457aa
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-attribute-change.js
@@ -0,0 +1,126 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+
+const {
+  COMPATIBILITY_UPDATE_NODE_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+// Test the behavior rules are dynamically added
+
+const ISSUE_OUTLINE_RADIUS = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "-moz-user-input",
+  url: "https://developer.mozilla.org/docs/Web/CSS/-moz-user-input",
+  deprecated: true,
+  experimental: false,
+};
+
+const ISSUE_SCROLLBAR_WIDTH = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "scrollbar-width",
+  url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+  deprecated: false,
+  experimental: false,
+};
+
+const TEST_URI = `
+  <style>
+    .issue {
+      -moz-user-input: none;
+    }
+  </style>
+  <body>
+    <div class="test"></div>
+  </body>
+`;
+
+add_task(async function () {
+  info("Testing dynamic style change using JavaScript");
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Testing inline style change due to JavaScript execution");
+  const onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store);
+  info("Select the div to undergo mutation");
+  await selectNode(".test", inspector);
+  await onPanelUpdate;
+
+  info("Check initial issues");
+  await assertIssueList(selectedElementPane, []);
+  await assertIssueList(allElementsPane, []);
+
+  info("Adding inline style with compatibility issue");
+  await testAttributeMutation(
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_SCROLLBAR_WIDTH],
+    [ISSUE_SCROLLBAR_WIDTH],
+    async function () {
+      content.document.querySelector(".test").style["scrollbar-width"] = "none";
+    }
+  );
+
+  info("Adding a class with declarations having compatibility issue");
+  await testAttributeMutation(
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_SCROLLBAR_WIDTH, ISSUE_OUTLINE_RADIUS],
+    [ISSUE_SCROLLBAR_WIDTH, ISSUE_OUTLINE_RADIUS],
+    async function () {
+      content.document.querySelector(".test").classList.add("issue");
+    }
+  );
+
+  info("Removing a class with declarations having compatibility issue");
+  await testAttributeMutation(
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_SCROLLBAR_WIDTH],
+    [ISSUE_SCROLLBAR_WIDTH],
+    async function () {
+      content.document.querySelector(".test").classList.remove("issue");
+    }
+  );
+
+  await removeTab(tab);
+});
+
+async function testAttributeMutation(
+  tab,
+  inspector,
+  selectedElementPane,
+  allElementsPane,
+  expectedSelectedElementIssues,
+  expectedAllElementsIssues,
+  contentTaskFunction
+) {
+  const onPanelUpdate = Promise.all([
+    inspector.once("markupmutation"),
+    waitForDispatch(inspector.store, COMPATIBILITY_UPDATE_NODE_COMPLETE),
+  ]);
+  info("Run the task in webpage context");
+  await ContentTask.spawn(tab.linkedBrowser, {}, contentTaskFunction);
+  info("Wait for changes to reflect");
+  await onPanelUpdate;
+
+  info("Check issues listed in selected element pane");
+  await assertIssueList(selectedElementPane, expectedSelectedElementIssues);
+  info("Check issues listed in all issues pane");
+  await assertIssueList(allElementsPane, expectedAllElementsIssues);
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js
new file mode 100644
index 0000000000..bf148b988a
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js
@@ -0,0 +1,149 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+
+const {
+  COMPATIBILITY_APPEND_NODE_COMPLETE,
+  COMPATIBILITY_CLEAR_DESTROYED_NODES,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+// Test the behavior rules are dynamically added
+
+const ISSUE_OUTLINE_RADIUS = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "-moz-user-input",
+  url: "https://developer.mozilla.org/docs/Web/CSS/-moz-user-input",
+  deprecated: true,
+  experimental: false,
+};
+
+const ISSUE_SCROLLBAR_WIDTH = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "scrollbar-width",
+  url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+  deprecated: false,
+  experimental: false,
+};
+
+const TEST_URI = `
+  <style>
+    .child {
+      -moz-user-input: none;
+    }
+  </style>
+  <body></body>
+`;
+
+add_task(async function () {
+  info("Testing dynamic DOM mutation using JavaScript");
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Check initial issues");
+  await assertIssueList(selectedElementPane, []);
+  await assertIssueList(allElementsPane, []);
+
+  info("Append nodes dynamically using JavaScript");
+  await testNodeMutation(
+    ".child",
+    COMPATIBILITY_APPEND_NODE_COMPLETE,
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_OUTLINE_RADIUS],
+    [ISSUE_SCROLLBAR_WIDTH, ISSUE_OUTLINE_RADIUS],
+    async function () {
+      const doc = content.document;
+      const parent = doc.querySelector("body");
+
+      const newElementWithIssue = doc.createElement("div");
+      newElementWithIssue.style["scrollbar-width"] = "none";
+
+      const parentOfIssueElement = doc.createElement("div");
+      parentOfIssueElement.classList.add("parent");
+      const child = doc.createElement("div");
+      child.classList.add("child");
+      parentOfIssueElement.appendChild(child);
+
+      parent.appendChild(newElementWithIssue);
+      parent.appendChild(parentOfIssueElement);
+    }
+  );
+
+  info("Remove node whose child has compatibility issue");
+  await testNodeMutation(
+    "div",
+    COMPATIBILITY_CLEAR_DESTROYED_NODES,
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_SCROLLBAR_WIDTH],
+    [ISSUE_SCROLLBAR_WIDTH],
+    async function () {
+      const doc = content.document;
+      const parent = doc.querySelector(".parent");
+      parent.remove();
+    }
+  );
+
+  info("Remove node which has compatibility issue");
+  await testNodeMutation(
+    "body",
+    COMPATIBILITY_CLEAR_DESTROYED_NODES,
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [],
+    [],
+    async function () {
+      const doc = content.document;
+      const issueElement = doc.querySelector("div");
+      issueElement.remove();
+    }
+  );
+
+  await removeTab(tab);
+});
+
+async function testNodeMutation(
+  selector,
+  action,
+  tab,
+  inspector,
+  selectedElementPane,
+  allElementsPane,
+  expectedSelectedElementIssues,
+  expectedAllElementsIssues,
+  contentTaskFunction
+) {
+  let onPanelUpdate = Promise.all([
+    inspector.once("markupmutation"),
+    waitForDispatch(inspector.store, action),
+  ]);
+  info("Add a new node with issue and another node whose child has the issue");
+  await ContentTask.spawn(tab.linkedBrowser, {}, contentTaskFunction);
+  info("Wait for changes");
+  await onPanelUpdate;
+
+  onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store);
+  await selectNode(selector, inspector);
+  await onPanelUpdate;
+
+  info("Check element issues");
+  await assertIssueList(selectedElementPane, expectedSelectedElementIssues);
+
+  info("Check all issues");
+  await assertIssueList(allElementsPane, expectedAllElementsIssues);
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_markup-dom-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_markup-dom-change.js
new file mode 100644
index 0000000000..2d7ddc2e11
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_markup-dom-change.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+
+const {
+  COMPATIBILITY_APPEND_NODE_COMPLETE,
+  COMPATIBILITY_REMOVE_NODE_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+// Test the behavior rules are dynamically added
+
+const ISSUE_OUTLINE_RADIUS = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "-moz-user-input",
+  url: "https://developer.mozilla.org/docs/Web/CSS/-moz-user-input",
+  deprecated: true,
+  experimental: false,
+};
+
+const ISSUE_SCROLLBAR_WIDTH = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "scrollbar-width",
+  url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+  deprecated: false,
+  experimental: false,
+};
+
+const TEST_URI = `
+  <style>
+    div {
+      -moz-user-input: none;
+    }
+  </style>
+  <body>
+    <div></div>
+    <div class="parent">
+      <div style="scrollbar-width: none"></div>
+    </div>
+  </body>
+`;
+
+add_task(async function () {
+  info("Testing dynamic DOM mutation using JavaScript");
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const { allElementsPane, inspector } = await openCompatibilityView();
+
+  info("Check initial issues");
+  await assertIssueList(allElementsPane, [
+    ISSUE_OUTLINE_RADIUS,
+    ISSUE_SCROLLBAR_WIDTH,
+  ]);
+
+  info("Delete node whose child node has CSS compatibility issue");
+  await testNodeRemoval(".parent", inspector, allElementsPane, [
+    ISSUE_OUTLINE_RADIUS,
+  ]);
+
+  info("Delete node that has CSS compatibility issue");
+  await testNodeRemoval("div", inspector, allElementsPane, []);
+
+  info("Add node that has CSS compatibility issue");
+  await testNodeAddition("div", inspector, allElementsPane, [
+    ISSUE_OUTLINE_RADIUS,
+  ]);
+
+  await removeTab(tab);
+});
+
+/**
+ * Simulate a click on the markup-container (a line in the markup-view)
+ * that corresponds to the selector passed.
+ * This overrides the definition in inspector/test/head.js which times
+ * out when the container to be clicked is already the selected node.
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return {Promise} Resolves when the node has been selected.
+ */
+var clickContainer = async function (selector, inspector) {
+  info("Clicking on the markup-container for node " + selector);
+
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  const updated = container.selected
+    ? Promise.resolve()
+    : inspector.once("inspector-updated");
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mousedown" },
+    inspector.markup.doc.defaultView
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mouseup" },
+    inspector.markup.doc.defaultView
+  );
+  return updated;
+};
+
+async function deleteNode(inspector, selector) {
+  info("Select node " + selector + " and make sure it is focused");
+  await selectNode(selector, inspector);
+  await clickContainer(selector, inspector);
+
+  info("Delete the node");
+  const mutated = inspector.once("markupmutation");
+  const updated = inspector.once("inspector-updated");
+  EventUtils.sendKey("delete", inspector.panelWin);
+  await mutated;
+  await updated;
+}
+
+async function testNodeAddition(
+  selector,
+  inspector,
+  allElementsPane,
+  expectedAllElementsIssues
+) {
+  let onPanelUpdate = Promise.all([
+    inspector.once("markupmutation"),
+    waitForDispatch(inspector.store, COMPATIBILITY_APPEND_NODE_COMPLETE),
+  ]);
+  info("Add a new node");
+  await inspector.addNode();
+  await onPanelUpdate;
+
+  onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store);
+  await selectNode(selector, inspector);
+  await onPanelUpdate;
+
+  info("Check issues list for the webpage");
+  await assertIssueList(allElementsPane, expectedAllElementsIssues);
+}
+
+async function testNodeRemoval(
+  selector,
+  inspector,
+  allElementsPane,
+  expectedAllElementsIssues
+) {
+  const onPanelUpdate = Promise.all([
+    inspector.once("markupmutation"),
+    waitForDispatch(inspector.store, COMPATIBILITY_REMOVE_NODE_COMPLETE),
+  ]);
+  info(`Delete the node with selector ${selector}`);
+  await deleteNode(inspector, selector);
+  await onPanelUpdate;
+
+  info("Check issues list for the webpage");
+  await assertIssueList(allElementsPane, expectedAllElementsIssues);
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_ruleview-attribute-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_ruleview-attribute-change.js
new file mode 100644
index 0000000000..178edd8cd0
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_ruleview-attribute-change.js
@@ -0,0 +1,116 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+
+const {
+  COMPATIBILITY_UPDATE_NODE_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+// Test the behavior rules are dynamically added
+
+const ISSUE_OUTLINE_RADIUS = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "-moz-user-input",
+  url: "https://developer.mozilla.org/docs/Web/CSS/-moz-user-input",
+  deprecated: true,
+  experimental: false,
+};
+
+const ISSUE_SCROLLBAR_WIDTH = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "scrollbar-width",
+  url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+  deprecated: false,
+  experimental: false,
+};
+
+const TEST_URI = `
+  <style>
+    .issue {
+      -moz-user-input: none;
+    }
+  </style>
+  <body>
+    <div class="test issue"></div>
+  </body>
+`;
+
+add_task(async function () {
+  info("Testing dynamic style change via the devtools inspector's rule view");
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Select the div to undergo mutation");
+  const waitForCompatibilityListUpdate = waitForUpdateSelectedNodeAction(
+    inspector.store
+  );
+  await selectNode(".test.issue", inspector);
+  await waitForCompatibilityListUpdate;
+
+  info("Check initial issues");
+  await checkPanelIssues(selectedElementPane, allElementsPane, [
+    ISSUE_OUTLINE_RADIUS,
+  ]);
+
+  await addNewRule(
+    "scrollbar-width",
+    "none",
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_OUTLINE_RADIUS, ISSUE_SCROLLBAR_WIDTH]
+  );
+
+  info("Toggle the inline issue rendering it disable");
+  await togglePropStatusOnRuleView(inspector, 0, 0);
+  info("Check the issues listed in panel");
+  await checkPanelIssues(selectedElementPane, allElementsPane, [
+    ISSUE_OUTLINE_RADIUS,
+  ]);
+
+  info("Toggle the class rule rendering it disabled");
+  await togglePropStatusOnRuleView(inspector, 1, 0);
+  info("Check the panel issues listed in panel");
+  await checkPanelIssues(selectedElementPane, allElementsPane, []);
+
+  await removeTab(tab);
+});
+
+async function addNewRule(
+  newDeclaration,
+  value,
+  inspector,
+  selectedElementPane,
+  allElementsPane,
+  issue
+) {
+  const { view } = await openRuleView();
+  const waitForCompatibilityListUpdate = waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_NODE_COMPLETE
+  );
+
+  info("Add a new inline property");
+  await addProperty(view, 0, newDeclaration, value);
+  info("Wait for changes");
+  await waitForCompatibilityListUpdate;
+
+  info("Check issues list for element and the webpage");
+  await checkPanelIssues(selectedElementPane, allElementsPane, issue);
+}
+
+async function checkPanelIssues(selectedElementPane, allElementsPane, issues) {
+  info("Check selected element issues");
+  await assertIssueList(selectedElementPane, issues);
+  info("Check all panel issues");
+  await assertIssueList(allElementsPane, issues);
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_document-reload.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_document-reload.js
new file mode 100644
index 0000000000..a7f18e0811
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_document-reload.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the issues after reloading the browsing document.
+
+const TEST_URI = `
+  <style>
+  body {
+    color: blue;
+    ruby-align: center;
+    user-modify: read-only;
+  }
+  div {
+    scrollbar-width: thin;
+  }
+  </style>
+  <body>
+    <div>test</div>
+  </body>
+`;
+
+const TEST_DATA_SELECTED = [
+  {
+    property: "ruby-align",
+    url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+  },
+  {
+    property: "user-modify",
+    url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+  },
+];
+
+const TEST_DATA_ALL = [
+  ...TEST_DATA_SELECTED,
+  {
+    property: "scrollbar-width",
+    url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+  },
+];
+
+const {
+  COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+add_task(async function () {
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Check the issues on the selected element");
+  await assertIssueList(selectedElementPane, TEST_DATA_SELECTED);
+  info("Check the issues on all elements");
+  await assertIssueList(allElementsPane, TEST_DATA_ALL);
+
+  let isUpdateSelectedNodeFailure = false;
+  let isUpdateTopLevelTargetFailure = false;
+  waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_SELECTED_NODE_FAILURE
+  ).then(() => {
+    isUpdateSelectedNodeFailure = true;
+  });
+  waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE
+  ).then(() => {
+    isUpdateTopLevelTargetFailure = true;
+  });
+
+  info("Reload the browsing page");
+  const onReloaded = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
+  const onUpdateSelectedNode = waitForUpdateSelectedNodeAction(inspector.store);
+  const onUpdateTopLevelTarget = waitForUpdateTopLevelTargetAction(
+    inspector.store
+  );
+  gBrowser.reloadTab(tab);
+  await Promise.all([onReloaded, onUpdateSelectedNode, onUpdateTopLevelTarget]);
+
+  info("Check whether the failure action will be fired or not");
+  ok(
+    !isUpdateSelectedNodeFailure && !isUpdateTopLevelTargetFailure,
+    "No error occurred"
+  );
+
+  info("Check the issues on the selected element again");
+  await assertIssueList(selectedElementPane, TEST_DATA_SELECTED);
+  info("Check the issues on all elements again");
+  await assertIssueList(allElementsPane, TEST_DATA_ALL);
+});
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_panel-select.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_panel-select.js
new file mode 100644
index 0000000000..d856af3539
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_panel-select.js
@@ -0,0 +1,173 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the behavior when the panel is selected.
+
+const TEST_URI = "<body style='background-color: lime;'><div>test</div></body>";
+const TEST_ANOTHER_URI = "<body></body>";
+
+const {
+  COMPATIBILITY_UPDATE_SELECTED_NODE_START,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+add_task(async function () {
+  info(
+    "Check that the panel does not update when no changes occur while hidden"
+  );
+
+  await pushPref("devtools.inspector.activeSidebar", "");
+
+  const tab = await addTab(_toDataURL(TEST_URI));
+  const { inspector } = await openCompatibilityView();
+
+  info("Select another sidebar panel");
+  await _selectSidebarPanel(inspector, "changesview");
+
+  info("Select the compatibility panel again");
+  let isSelectedNodeUpdated = false;
+  let isTopLevelTargetUpdated = false;
+  waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_SELECTED_NODE_START
+  ).then(() => {
+    isSelectedNodeUpdated = true;
+  });
+  waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START
+  ).then(() => {
+    isTopLevelTargetUpdated = true;
+  });
+
+  await _selectSidebarPanel(inspector, "compatibilityview");
+
+  // Check above both flags after taking enough time.
+  await wait(1000);
+
+  ok(!isSelectedNodeUpdated, "Avoid updating the selected node pane");
+  ok(!isTopLevelTargetUpdated, "Avoid updating the top level target pane");
+
+  await removeTab(tab);
+});
+
+add_task(async function () {
+  info(
+    "Check that the panel only updates for the selected node when the node is changed while the panel is hidden"
+  );
+
+  await pushPref("devtools.inspector.activeSidebar", "");
+
+  const tab = await addTab(_toDataURL(TEST_URI));
+  const { inspector } = await openCompatibilityView();
+
+  info("Select another sidebar panel");
+  await _selectSidebarPanel(inspector, "changesview");
+
+  info("Select another node");
+  await selectNode("div", inspector);
+
+  info("Select the compatibility panel again");
+  const onSelectedNodePaneUpdated = waitForUpdateSelectedNodeAction(
+    inspector.store
+  );
+  let isTopLevelTargetUpdated = false;
+  waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START
+  ).then(() => {
+    isTopLevelTargetUpdated = true;
+  });
+
+  await _selectSidebarPanel(inspector, "compatibilityview");
+
+  await onSelectedNodePaneUpdated;
+  ok(true, "Update the selected node pane");
+  ok(!isTopLevelTargetUpdated, "Avoid updating the top level target pane");
+
+  await removeTab(tab);
+});
+
+add_task(async function () {
+  info(
+    "Check that both panes update when the top-level target changed while the panel is hidden"
+  );
+
+  await pushPref("devtools.inspector.activeSidebar", "");
+
+  const tab = await addTab(_toDataURL(TEST_URI));
+  const { inspector } = await openCompatibilityView();
+
+  info("Select another sidebar panel");
+  await _selectSidebarPanel(inspector, "changesview");
+
+  info("Navigate to another page");
+  BrowserTestUtils.startLoadingURIString(
+    tab.linkedBrowser,
+    _toDataURL(TEST_ANOTHER_URI)
+  );
+
+  info("Select the compatibility panel again");
+  const onSelectedNodePaneUpdated = waitForUpdateSelectedNodeAction(
+    inspector.store
+  );
+  const onTopLevelTargetPaneUpdated = waitForUpdateTopLevelTargetAction(
+    inspector.store
+  );
+
+  await _selectSidebarPanel(inspector, "compatibilityview");
+
+  await onSelectedNodePaneUpdated;
+  await onTopLevelTargetPaneUpdated;
+  ok(true, "Update both panes");
+
+  await removeTab(tab);
+});
+
+add_task(async function () {
+  info(
+    "Check that both panes update when a rule is changed changed while the panel is hidden"
+  );
+
+  await pushPref("devtools.inspector.activeSidebar", "");
+
+  info("Disable 3 pane mode");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const tab = await addTab(_toDataURL(TEST_URI));
+  const { inspector } = await openCompatibilityView();
+
+  info("Select rule view");
+  await _selectSidebarPanel(inspector, "ruleview");
+
+  info("Change a rule");
+  await togglePropStatusOnRuleView(inspector, 0, 0);
+
+  info("Select the compatibility panel again");
+  const onSelectedNodePaneUpdated = waitForUpdateSelectedNodeAction(
+    inspector.store
+  );
+  const onTopLevelTargetPaneUpdated = waitForUpdateTopLevelTargetAction(
+    inspector.store
+  );
+
+  await _selectSidebarPanel(inspector, "compatibilityview");
+
+  await onSelectedNodePaneUpdated;
+  await onTopLevelTargetPaneUpdated;
+  ok(true, "Update both panes");
+
+  await removeTab(tab);
+});
+
+async function _selectSidebarPanel(inspector, toolId) {
+  const onSelected = inspector.sidebar.once(`${toolId}-selected`);
+  inspector.sidebar.select(toolId);
+  await onSelected;
+}
+
+function _toDataURL(content) {
+  return "data:text/html;charset=utf-8," + encodeURIComponent(content);
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js
new file mode 100644
index 0000000000..91b29b488b
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js
@@ -0,0 +1,179 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the content of the issue list will be changed when the rules are changed
+// on the rule view.
+
+const TEST_URI = `
+  <style>
+  .test-class {
+    ruby-align: center;
+  }
+  div {
+    scrollbar-width: thin;
+  }
+  </style>
+  <div class="test-class">test class</div>
+  <div>test</div>
+`;
+
+const TEST_DATA_SELECTED = {
+  fullRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: [],
+      },
+      {
+        property: "scrollbar-width",
+        nodes: [],
+      },
+    ],
+  },
+  classRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: [],
+      },
+    ],
+  },
+  elementRule: {
+    expectedProperties: [
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "scrollbar-width",
+        nodes: [],
+      },
+    ],
+  },
+};
+
+const TEST_DATA_ALL = {
+  fullRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: ["div.test-class"],
+      },
+      {
+        property: "scrollbar-width",
+        nodes: ["div.test-class", "div"],
+      },
+    ],
+  },
+  classRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: ["div.test-class"],
+      },
+    ],
+  },
+  elementRule: {
+    expectedProperties: [
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "scrollbar-width",
+        nodes: ["div.test-class", "div"],
+      },
+    ],
+  },
+};
+
+const {
+  COMPATIBILITY_UPDATE_NODES_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+add_task(async function () {
+  info("Enable 3 pane mode");
+  await pushPref("devtools.inspector.three-pane-enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+  await selectNode(".test-class", inspector);
+
+  info("Check the initial issue");
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.fullRule);
+
+  info("Check the issue after unchecking class rule");
+  await _togglePropStatus(inspector, 1, 0);
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.elementRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.elementRule);
+
+  info("Check the issue after unchecking div rule");
+  await _togglePropStatus(inspector, 2, 0);
+  await assertIssueList(selectedElementPane, []);
+  await assertIssueList(allElementsPane, []);
+
+  info("Check the issue after reverting class rule");
+  await _togglePropStatus(inspector, 1, 0);
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.classRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.classRule);
+
+  info("Check the issue after reverting div rule");
+  await _togglePropStatus(inspector, 2, 0);
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.fullRule);
+});
+
+async function assertAll(pane, { expectedProperties, expectedNodes }) {
+  await assertIssueList(pane, expectedProperties);
+  await assertNodeList(pane, expectedNodes);
+}
+
+async function _togglePropStatus(inspector, ruleIndex, propIndex) {
+  const onNodesUpdated = waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_NODES_COMPLETE
+  );
+  await togglePropStatusOnRuleView(inspector, ruleIndex, propIndex);
+  await onNodesUpdated;
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_selected-node-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_selected-node-change.js
new file mode 100644
index 0000000000..d24f450968
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_selected-node-change.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the content of the issue list will be changed when the new node is selected.
+
+const TEST_URI = `
+  <style>
+  body {
+    ruby-align: center;
+  }
+
+  .has-issue {
+    scrollbar-width: thin;
+    user-modify: read-only;
+  }
+
+  .no-issue {
+    color: black;
+  }
+  </style>
+  <body>
+    <div class="has-issue">has issue</div>
+    <div class="no-issue">no issue</div>
+  </body>
+`;
+
+const TEST_DATA_SELECTED = [
+  {
+    selector: ".has-issue",
+    expectedIssues: [
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+      {
+        property: "user-modify",
+        url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+      },
+    ],
+  },
+  {
+    selector: ".no-issue",
+    expectedIssues: [],
+  },
+  {
+    selector: "body",
+    expectedIssues: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+    ],
+  },
+];
+
+const TEST_DATA_ALL = [
+  {
+    property: "ruby-align",
+    url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+  },
+  {
+    property: "scrollbar-width",
+    url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+  },
+  {
+    property: "user-modify",
+    url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  for (const { selector, expectedIssues } of TEST_DATA_SELECTED) {
+    info(`Check the issue list for ${selector} node`);
+    await selectNode(selector, inspector);
+    await assertIssueList(selectedElementPane, expectedIssues);
+    info("Check whether the issues on all elements pane are not changed");
+    await assertIssueList(allElementsPane, TEST_DATA_ALL);
+  }
+});
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_top-level-target-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_top-level-target-change.js
new file mode 100644
index 0000000000..84d5131f8d
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_top-level-target-change.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the issues after navigating to another page.
+
+const TEST_DATA_ISSUES = {
+  uri: `
+    <style>
+    body {
+      ruby-align: center;
+    }
+    div {
+      scrollbar-width: thin;
+    }
+    </style>
+    <body>
+      <div>test</div>
+    </body>
+  `,
+  expectedIssuesOnSelected: [
+    {
+      property: "ruby-align",
+      url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+    },
+  ],
+  expectedIssuesOnAll: [
+    {
+      property: "ruby-align",
+      url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+    },
+    {
+      property: "scrollbar-width",
+      url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+    },
+  ],
+};
+
+const TEST_DATA_NO_ISSUES = {
+  uri: "<body></body>",
+  expectedIssuesOnSelected: [],
+  expectedIssuesOnAll: [],
+};
+
+add_task(async function () {
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_DATA_ISSUES.uri)
+  );
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Check issues at initial");
+  await assertIssues(selectedElementPane, allElementsPane, TEST_DATA_ISSUES);
+
+  info("Navigate to next uri that has no issues");
+  await navigateTo(TEST_DATA_NO_ISSUES.uri, tab, inspector);
+  info("Check issues after navigating");
+  await assertIssues(selectedElementPane, allElementsPane, TEST_DATA_NO_ISSUES);
+
+  info("Revert the uri");
+  await navigateTo(TEST_DATA_ISSUES.uri, tab, inspector);
+  info("Check issues after reverting");
+  await assertIssues(selectedElementPane, allElementsPane, TEST_DATA_ISSUES);
+});
+
+async function assertIssues(
+  selectedElementPane,
+  allElementsPane,
+  { expectedIssuesOnSelected, expectedIssuesOnAll }
+) {
+  await assertIssueList(selectedElementPane, expectedIssuesOnSelected);
+  await assertIssueList(allElementsPane, expectedIssuesOnAll);
+}
+
+async function navigateTo(uri, tab, { store }) {
+  uri = "data:text/html;charset=utf-8," + encodeURIComponent(uri);
+  const onSelectedNodeUpdated = waitForUpdateSelectedNodeAction(store);
+  const onTopLevelTargetUpdated = waitForUpdateTopLevelTargetAction(store);
+  const onLoaded = BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+  BrowserTestUtils.startLoadingURIString(tab.linkedBrowser, uri);
+  await Promise.all([onLoaded, onSelectedNodeUpdated, onTopLevelTargetUpdated]);
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_issue-node.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_issue-node.js
new file mode 100644
index 0000000000..b99dfd4062
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_issue-node.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test displaying the nodes that caused issues.
+
+const TEST_URI = `
+  <style>
+  body {
+    user-modify: read-only;
+  }
+  div {
+    user-modify: read-only;
+    scrollbar-width: thin;
+  }
+  </style>
+  <body>
+    <div>div</div>
+  </body>
+`;
+
+const TEST_DATA_ALL = [
+  {
+    property: "user-modify",
+    nodes: ["body", "div"],
+  },
+  {
+    property: "scrollbar-width",
+    nodes: ["div"],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { allElementsPane, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Check nodes that caused issues on the selected element");
+  is(
+    selectedElementPane.querySelectorAll(".compatibility-node-item").length,
+    0,
+    "Nodes are not displayed on the selected element"
+  );
+
+  info("Check nodes that caused issues on all elements");
+  await assertNodeList(allElementsPane, TEST_DATA_ALL);
+});
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_settings.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_settings.js
new file mode 100644
index 0000000000..36e4d57735
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_settings.js
@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether settings page works.
+
+const TEST_URI = `
+  <style>
+  body {
+    text-size-adjust: none;
+  }
+  div {
+    text-size-adjust: none;
+  }
+  </style>
+  <body><div></div></body>
+`;
+
+const {
+  COMPATIBILITY_UPDATE_TARGET_BROWSERS_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+add_task(async function () {
+  registerCleanupFunction(() => {
+    Services.prefs.clearUserPref(
+      "devtools.inspector.compatibility.target-browsers"
+    );
+  });
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, panel } = await openCompatibilityView();
+  const { store } = inspector;
+
+  info("Check initial state");
+  ok(
+    panel.querySelector(`.compatibility-browser-icon__image[src*="firefox"]`),
+    "Firefox browsers are the target"
+  );
+
+  info("Make Firefox browsers out of target");
+  await updateTargetBrowsers(panel, store, id => !id.includes("firefox"));
+  ok(
+    !panel.querySelector(`.compatibility-browser-icon__image[src*="firefox"]`),
+    "Firefox browsers are not the target"
+  );
+
+  info("Make all browsers out of target");
+  await updateTargetBrowsers(panel, store, () => false);
+  ok(
+    !panel.querySelector(".compatibility-browser-icon__image"),
+    "No browsers are the target"
+  );
+
+  info("Make Firefox browsers target");
+  await updateTargetBrowsers(panel, store, id => id.includes("firefox"));
+  ok(
+    panel.querySelector(`.compatibility-browser-icon__image[src*="firefox"]`),
+    "Firefox browsers are the target now"
+  );
+});
+
+async function updateTargetBrowsers(panel, store, isTargetBrowserFunc) {
+  info("Open settings pane");
+  const settingsButton = panel.querySelector(".compatibility-footer__button");
+  settingsButton.click();
+  await waitUntil(() => panel.querySelector(".compatibility-settings"));
+
+  const browsers = [
+    ...new Set(
+      Array.from(panel.querySelectorAll("[data-id]")).map(el =>
+        el.getAttribute("data-id")
+      )
+    ),
+  ];
+  Assert.deepEqual(
+    // Filter out IE, to be removed in an upcoming browser compat data sync.
+    // TODO: Remove the filter once D150961 lands. see Bug 1778009
+    browsers.filter(browser => browser != "ie"),
+    [
+      "chrome",
+      "chrome_android",
+      "edge",
+      "firefox",
+      "firefox_android",
+      "safari",
+      "safari_ios",
+    ],
+    "The expected browsers are displayed"
+  );
+
+  info("Change target browsers");
+  const settingsPane = panel.querySelector(".compatibility-settings");
+  for (const checkbox of settingsPane.querySelectorAll(
+    ".compatibility-settings__target-browsers-item input"
+  )) {
+    if (checkbox.checked !== isTargetBrowserFunc(checkbox.id)) {
+      // Need to click to toggle since the input is designed as controlled component.
+      checkbox.click();
+    }
+  }
+
+  info("Close settings pane");
+  const onUpdated = waitForDispatch(
+    store,
+    COMPATIBILITY_UPDATE_TARGET_BROWSERS_COMPLETE
+  );
+  const closeButton = settingsPane.querySelector(
+    ".compatibility-settings__header-button"
+  );
+  closeButton.click();
+  await onUpdated;
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_throbber.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_throbber.js
new file mode 100644
index 0000000000..eff0f9ac93
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_throbber.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the throbber is displayed correctly or not.
+
+const TEST_URI = `
+  <style>
+  body {
+    color: blue;
+    border-block-color: lime;
+    user-modify: read-only;
+  }
+  div {
+    font-variant-alternates: historical-forms;
+  }
+  </style>
+  <body>
+    <div>test</div>
+  </body>
+`;
+
+const {
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+add_task(async function () {
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Check the throbber visibility at the beginning");
+  assertThrobber(allElementsPane, false);
+  assertThrobber(selectedElementPane, false);
+
+  info("Reload the browsing page");
+  const onStart = waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_START
+  );
+  const onComplete = waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE
+  );
+  gBrowser.reloadTab(tab);
+
+  info("Check the throbber visibility of after starting updating action");
+  await onStart;
+  assertThrobber(allElementsPane, true);
+  assertThrobber(selectedElementPane, false);
+
+  info("Check the throbber visibility of after completing updating action");
+  await onComplete;
+  assertThrobber(allElementsPane, false);
+  assertThrobber(selectedElementPane, false);
+});
+
+function assertThrobber(panel, expectedVisibility) {
+  const isThrobberVisible = !!panel.querySelector(".devtools-throbber");
+  is(
+    isThrobberVisible,
+    expectedVisibility,
+    "Visibility of the throbber is correct"
+  );
+}
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_unsupported-browsers_all.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_unsupported-browsers_all.js
new file mode 100644
index 0000000000..c57c805ce1
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_unsupported-browsers_all.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the all of default browsers are unsupported.
+
+const TEST_URI = `
+  <style>
+  body {
+    user-modify: read-only;
+  }
+  </style>
+  <body></body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, selectedElementPane } = await openCompatibilityView();
+
+  info("Get the taget browsers we set as default");
+  const { targetBrowsers } = inspector.store.getState().compatibility;
+
+  info("Check the content of the issue item");
+  const expectedIssues = [
+    {
+      property: "user-modify",
+      unsupportedBrowsers: targetBrowsers,
+      url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+    },
+  ];
+  await assertIssueList(selectedElementPane, expectedIssues);
+});
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_unsupported-browsers_some.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_unsupported-browsers_some.js
new file mode 100644
index 0000000000..6359b34e31
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_unsupported-browsers_some.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether some of browsers are unsupported.
+
+const {
+  updateTargetBrowsers,
+} = require("resource://devtools/client/inspector/compatibility/actions/compatibility.js");
+
+const TEST_URI = `
+  <style>
+  body {
+    border-block-color: lime;
+  }
+  </style>
+  <body></body>
+`;
+
+const TARGET_BROWSERS = [
+  { id: "firefox", name: "Firefox", version: "1" },
+  { id: "firefox", name: "Firefox", version: "70" },
+  { id: "firefox_android", name: "Firefox Android", version: "1" },
+  { id: "firefox_android", name: "Firefox Android", version: "70" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, selectedElementPane } = await openCompatibilityView();
+
+  info("Update the target browsers for this test");
+  await inspector.store.dispatch(updateTargetBrowsers(TARGET_BROWSERS));
+
+  info("Check the content of the issue item");
+  const expectedIssues = [
+    {
+      property: "border-block-color",
+      unsupportedBrowsers: [
+        { id: "firefox", name: "Firefox", version: "1" },
+        { id: "firefox_android", name: "Firefox Android", version: "1" },
+      ],
+      url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
+    },
+  ];
+  await assertIssueList(selectedElementPane, expectedIssues);
+});
diff --git a/devtools/client/inspector/compatibility/test/browser/head.js b/devtools/client/inspector/compatibility/test/browser/head.js
new file mode 100644
index 0000000000..4cd84b2698
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/head.js
@@ -0,0 +1,281 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Import the rule view's head.js first (which itself imports inspector's head.js and shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/rules/test/head.js",
+  this
+);
+
+const {
+  COMPATIBILITY_UPDATE_SELECTED_NODE_COMPLETE,
+  COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+const {
+  toCamelCase,
+} = require("resource://devtools/client/inspector/compatibility/utils/cases.js");
+
+async function openCompatibilityView() {
+  info("Open the compatibility view");
+  const { inspector } = await openInspectorSidebarTab("compatibilityview");
+  await Promise.all([
+    waitForUpdateSelectedNodeAction(inspector.store),
+    waitForUpdateTopLevelTargetAction(inspector.store),
+  ]);
+  const panel = inspector.panelDoc.querySelector(
+    "#compatibilityview-panel .inspector-tabpanel"
+  );
+
+  const selectedElementPane = panel.querySelector(
+    "#compatibility-app--selected-element-pane"
+  );
+
+  const allElementsPane = panel.querySelector(
+    "#compatibility-app--all-elements-pane"
+  );
+
+  return { allElementsPane, inspector, panel, selectedElementPane };
+}
+
+/**
+ * Check whether the content of issue item element is matched with the expected values.
+ *
+ * @param {Element} panel
+ * @param {Array} expectedIssues
+ *        Array of the issue expected.
+ *        For the structure of issue items, see types.js.
+ */
+async function assertIssueList(panel, expectedIssues) {
+  info("Check the number of issues");
+  await waitUntil(
+    () =>
+      panel.querySelectorAll("[data-qa-property]").length ===
+      expectedIssues.length
+  );
+  ok(true, "The number of issues is correct");
+
+  if (expectedIssues.length === 0) {
+    // No issue.
+    return;
+  }
+
+  const getFluentString = await getFluentStringHelper([
+    "devtools/client/compatibility.ftl",
+  ]);
+
+  for (const expectedIssue of expectedIssues) {
+    const property = expectedIssue.property;
+    info(`Check an element for ${property}`);
+    const issueEl = getIssueItem(property, panel);
+    ok(issueEl, `Issue element for the ${property} is in the panel`);
+
+    if (expectedIssue.unsupportedBrowsers) {
+      // We only display a single icon per unsupported browser, so we need to
+      // group the expected unsupported browsers (versions) by their browser id.
+      const expectedUnsupportedBrowsersById = new Map();
+      for (const unsupportedBrowser of expectedIssue.unsupportedBrowsers) {
+        if (!expectedUnsupportedBrowsersById.has(unsupportedBrowser.id)) {
+          expectedUnsupportedBrowsersById.set(unsupportedBrowser.id, []);
+        }
+        expectedUnsupportedBrowsersById
+          .get(unsupportedBrowser.id)
+          .push(unsupportedBrowser);
+      }
+
+      const unsupportedBrowserListEl = issueEl.querySelector(
+        ".compatibility-unsupported-browser-list"
+      );
+      const unsupportedBrowsersEl =
+        unsupportedBrowserListEl.querySelectorAll("li");
+
+      is(
+        unsupportedBrowsersEl.length,
+        expectedUnsupportedBrowsersById.size,
+        "The expected number of browser icons are displayed"
+      );
+
+      for (const unsupportedBrowserEl of unsupportedBrowsersEl) {
+        const expectedUnsupportedBrowsers = expectedUnsupportedBrowsersById.get(
+          unsupportedBrowserEl.getAttribute("data-browser-id")
+        );
+
+        ok(expectedUnsupportedBrowsers, "The expected browser is displayed");
+        // debugger;
+        is(
+          unsupportedBrowserEl.querySelector(".compatibility-browser-version")
+            .innerText,
+          // If esr is not supported, but a newest version isn't as well, we don't display
+          // the esr version number
+          (
+            expectedUnsupportedBrowsers.find(
+              ({ status }) => status !== "esr"
+            ) || expectedUnsupportedBrowsers[0]
+          ).version,
+          "The expected browser version is displayed"
+        );
+
+        is(
+          unsupportedBrowserEl.getAttribute("title"),
+          getFluentString("compatibility-issue-browsers-list", "title", {
+            browsers: expectedUnsupportedBrowsers
+              .map(
+                ({ name, status, version }) =>
+                  `${name} ${version}${status ? ` (${status})` : ""}`
+              )
+              .join("\n"),
+          }),
+          "The brower item has the expected title attribute"
+        );
+      }
+    }
+
+    for (const [key, value] of Object.entries(expectedIssue)) {
+      const datasetKey = toCamelCase(`qa-${key}`);
+      is(
+        issueEl.dataset[datasetKey],
+        JSON.stringify(value),
+        `The value of ${datasetKey} is correct`
+      );
+    }
+
+    const propertyEl = issueEl.querySelector(
+      ".compatibility-issue-item__property"
+    );
+    const MDN_CLASSNAME = "compatibility-issue-item__mdn-link";
+    const SPEC_CLASSNAME = "compatibility-issue-item__spec-link";
+
+    is(
+      propertyEl.textContent,
+      property,
+      "property name is displayed as expected"
+    );
+
+    is(
+      propertyEl.classList.contains(MDN_CLASSNAME),
+      !!expectedIssue.url,
+      `${property} element ${
+        expectedIssue.url ? "has" : "does not have"
+      } mdn link class`
+    );
+    is(
+      propertyEl.classList.contains(SPEC_CLASSNAME),
+      !!expectedIssue.specUrl,
+      `${property} element ${
+        expectedIssue.specUrl ? "has" : "does not have"
+      } spec link class`
+    );
+
+    if (expectedIssue.url || expectedIssue.specUrl) {
+      is(
+        propertyEl.nodeName.toLowerCase(),
+        "a",
+        `Link rendered for ${property}`
+      );
+
+      const expectedUrl = expectedIssue.url
+        ? expectedIssue.url +
+          "?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+        : expectedIssue.specUrl;
+      const { link } = await simulateLinkClick(propertyEl);
+      is(
+        link,
+        expectedUrl,
+        `Click on ${property} link navigates user to expected url`
+      );
+    } else {
+      is(
+        propertyEl.nodeName.toLowerCase(),
+        "span",
+        `No link rendered for ${property}`
+      );
+
+      const { link } = await simulateLinkClick(propertyEl);
+      is(link, null, `Click on ${property} does not navigate`);
+    }
+  }
+}
+
+/**
+ * Check whether the content of node item element is matched with the expected values.
+ *
+ * @param {Element} panel
+ * @param {Array} expectedNodes
+ *        e.g.
+ *        [{ property: "margin-inline-end", nodes: ["body", "div.classname"] },...]
+ */
+async function assertNodeList(panel, expectedNodes) {
+  for (const { property, nodes } of expectedNodes) {
+    info(`Check nodes for ${property}`);
+    const issueEl = getIssueItem(property, panel);
+
+    await waitUntil(
+      () =>
+        issueEl.querySelectorAll(".compatibility-node-item").length ===
+        nodes.length
+    );
+    ok(true, "The number of nodes is correct");
+
+    const nodeEls = [...issueEl.querySelectorAll(".compatibility-node-item")];
+    for (const node of nodes) {
+      const nodeEl = nodeEls.find(el => el.textContent === node);
+      ok(nodeEl, "The text content of the node element is correct");
+    }
+  }
+}
+
+/**
+ * Get IssueItem of given property from given element.
+ *
+ * @param {String} property
+ * @param {Element} element
+ * @return {Element}
+ */
+function getIssueItem(property, element) {
+  return element.querySelector(`[data-qa-property=\"\\"${property}\\"\"]`);
+}
+
+/**
+ * Toggle enable/disable checkbox of a specific property on rule view.
+ *
+ * @param {Inspector} inspector
+ * @param {Number} ruleIndex
+ * @param {Number} propIndex
+ */
+async function togglePropStatusOnRuleView(inspector, ruleIndex, propIndex) {
+  const ruleView = inspector.getPanel("ruleview").view;
+  const rule = getRuleViewRuleEditor(ruleView, ruleIndex).rule;
+  // In case of inline style changes, we track the mutations via the
+  // inspector's markupmutation event to react to dynamic style changes
+  // which Resource Watcher doesn't cover yet.
+  // If an inline style is applied to the element, we need to wait on the
+  // markupmutation event
+  const onMutation =
+    ruleIndex === 0 ? inspector.once("markupmutation") : Promise.resolve();
+  const textProp = rule.textProps[propIndex];
+  const onRuleviewChanged = ruleView.once("ruleview-changed");
+  textProp.editor.enable.click();
+  await Promise.all([onRuleviewChanged, onMutation]);
+}
+
+/**
+ * Return a promise which waits for COMPATIBILITY_UPDATE_SELECTED_NODE_COMPLETE action.
+ *
+ * @param {Object} store
+ * @return {Promise}
+ */
+function waitForUpdateSelectedNodeAction(store) {
+  return waitForDispatch(store, COMPATIBILITY_UPDATE_SELECTED_NODE_COMPLETE);
+}
+
+/**
+ * Return a promise which waits for COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE action.
+ *
+ * @param {Object} store
+ * @return {Promise}
+ */
+function waitForUpdateTopLevelTargetAction(store) {
+  return waitForDispatch(store, COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE);
+}
diff --git a/devtools/client/inspector/compatibility/test/node/.eslintrc.js b/devtools/client/inspector/compatibility/test/node/.eslintrc.js
new file mode 100644
index 0000000000..ffb3e70473
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/.eslintrc.js
@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+module.exports = {
+  env: {
+    jest: true,
+  },
+};
diff --git a/devtools/client/inspector/compatibility/test/node/babel.config.js b/devtools/client/inspector/compatibility/test/node/babel.config.js
new file mode 100644
index 0000000000..327f89b06b
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/babel.config.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+module.exports = {
+  plugins: [
+    "@babel/plugin-proposal-async-generator-functions",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-optional-chaining",
+    "transform-amd-to-commonjs",
+  ],
+};
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap
new file mode 100644
index 0000000000..64839057c7
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CompatibilityApp component renders with settings 1`] = `
+<section
+  className="compatibility-app theme-sidebar inspector-tabpanel"
+>
+  <div
+    className="compatibility-app__container compatibility-app__container-hidden"
+  >
+    <Accordion
+      className="compatibility-app__main"
+      items={
+        Array [
+          Object {
+            "component": <IssuePane
+              issues={Array []}
+            />,
+            "header": "compatibility-selected-element-header",
+            "id": "compatibility-app--selected-element-pane",
+            "opened": true,
+          },
+          Object {
+            "component": Array [
+              <IssuePane
+                dispatch={[Function]}
+                issues={Array []}
+              />,
+              null,
+            ],
+            "header": "compatibility-all-elements-header",
+            "id": "compatibility-app--all-elements-pane",
+            "opened": true,
+          },
+        ]
+      }
+    />
+    <Connect(Footer)
+      className="compatibility-app__footer"
+    />
+  </div>
+  <Connect(Settings) />
+</section>
+`;
+
+exports[`CompatibilityApp component renders zero issues 1`] = `
+<section
+  className="compatibility-app theme-sidebar inspector-tabpanel"
+>
+  <div
+    className="compatibility-app__container"
+  >
+    <Accordion
+      className="compatibility-app__main"
+      items={
+        Array [
+          Object {
+            "component": <IssuePane
+              issues={Array []}
+            />,
+            "header": "compatibility-selected-element-header",
+            "id": "compatibility-app--selected-element-pane",
+            "opened": true,
+          },
+          Object {
+            "component": Array [
+              <IssuePane
+                dispatch={[Function]}
+                issues={Array []}
+              />,
+              null,
+            ],
+            "header": "compatibility-all-elements-header",
+            "id": "compatibility-app--all-elements-pane",
+            "opened": true,
+          },
+        ]
+      }
+    />
+    <Connect(Footer)
+      className="compatibility-app__footer"
+    />
+  </div>
+</section>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Footer.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Footer.test.js.snap
new file mode 100644
index 0000000000..62be938dd7
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Footer.test.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer component renders 1`] = `
+<footer
+  className="compatibility-footer"
+>
+  <Localized
+    attrs={
+      Object {
+        "title": true,
+      }
+    }
+    id="compatibility-settings-button-title"
+  >
+    <button
+      className="compatibility-footer__button"
+      onClick={[Function]}
+      title="compatibility-settings-button-title"
+    >
+      <img
+        className="compatibility-footer__icon"
+        src="chrome://devtools/skin/images/settings.svg"
+      />
+      <Localized
+        id="compatibility-settings-button-label"
+      >
+        <label
+          className="compatibility-footer__label"
+        >
+          compatibility-settings-button-label
+        </label>
+      </Localized>
+    </button>
+  </Localized>
+</footer>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap
new file mode 100644
index 0000000000..3d219629e9
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap
@@ -0,0 +1,348 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IssueItem component renders a deprecated issue of CSS property 1`] = `
+<li
+  className="compatibility-issue-item compatibility-issue-item--deprecated"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <Localized
+      id="compatibility-issue-deprecated"
+    >
+      <span
+        className="compatibility-issue-item__causes"
+      >
+        compatibility-issue-deprecated
+      </span>
+    </Localized>
+  </div>
+</li>
+`;
+
+exports[`IssueItem component renders a prefixNeeded issue of CSS property 1`] = `
+<li
+  className="compatibility-issue-item"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <Localized
+      id="compatibility-issue-prefixneeded"
+    >
+      <span
+        className="compatibility-issue-item__causes"
+      >
+        compatibility-issue-prefixneeded
+      </span>
+    </Localized>
+  </div>
+  <ul
+    className="compatibility-issue-item__aliases"
+  >
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-1"
+    >
+      test-alias-1
+    </li>
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-2"
+    >
+      test-alias-2
+    </li>
+  </ul>
+</li>
+`;
+
+exports[`IssueItem component renders an experimental issue of CSS property 1`] = `
+<li
+  className="compatibility-issue-item compatibility-issue-item--experimental"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <Localized
+      id="compatibility-issue-experimental"
+    >
+      <span
+        className="compatibility-issue-item__causes"
+      >
+        compatibility-issue-experimental
+      </span>
+    </Localized>
+  </div>
+</li>
+`;
+
+exports[`IssueItem component renders an issue which has deprecated and experimental 1`] = `
+<li
+  className="compatibility-issue-item compatibility-issue-item--deprecated compatibility-issue-item--experimental"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <Localized
+      id="compatibility-issue-deprecated-experimental"
+    >
+      <span
+        className="compatibility-issue-item__causes"
+      >
+        compatibility-issue-deprecated-experimental
+      </span>
+    </Localized>
+  </div>
+  <ul
+    className="compatibility-issue-item__aliases"
+  >
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-1"
+    >
+      test-alias-1
+    </li>
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-2"
+    >
+      test-alias-2
+    </li>
+  </ul>
+</li>
+`;
+
+exports[`IssueItem component renders an issue which has deprecated and prefixNeeded 1`] = `
+<li
+  className="compatibility-issue-item compatibility-issue-item--deprecated"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <Localized
+      id="compatibility-issue-deprecated-prefixneeded"
+    >
+      <span
+        className="compatibility-issue-item__causes"
+      >
+        compatibility-issue-deprecated-prefixneeded
+      </span>
+    </Localized>
+  </div>
+  <ul
+    className="compatibility-issue-item__aliases"
+  >
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-1"
+    >
+      test-alias-1
+    </li>
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-2"
+    >
+      test-alias-2
+    </li>
+  </ul>
+</li>
+`;
+
+exports[`IssueItem component renders an issue which has deprecated, experimental and prefixNeeded 1`] = `
+<li
+  className="compatibility-issue-item compatibility-issue-item--deprecated compatibility-issue-item--experimental"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <Localized
+      id="compatibility-issue-deprecated-experimental-prefixneeded"
+    >
+      <span
+        className="compatibility-issue-item__causes"
+      >
+        compatibility-issue-deprecated-experimental-prefixneeded
+      </span>
+    </Localized>
+  </div>
+  <ul
+    className="compatibility-issue-item__aliases"
+  >
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-1"
+    >
+      test-alias-1
+    </li>
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-2"
+    >
+      test-alias-2
+    </li>
+  </ul>
+</li>
+`;
+
+exports[`IssueItem component renders an issue which has experimental and prefixNeeded 1`] = `
+<li
+  className="compatibility-issue-item compatibility-issue-item--experimental"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <Localized
+      id="compatibility-issue-experimental-prefixneeded"
+    >
+      <span
+        className="compatibility-issue-item__causes"
+      >
+        compatibility-issue-experimental-prefixneeded
+      </span>
+    </Localized>
+  </div>
+  <ul
+    className="compatibility-issue-item__aliases"
+  >
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-1"
+    >
+      test-alias-1
+    </li>
+    <li
+      className="compatibility-issue-item__alias"
+      key="test-alias-2"
+    >
+      test-alias-2
+    </li>
+  </ul>
+</li>
+`;
+
+exports[`IssueItem component renders an issue which has nodes that caused this issue 1`] = `
+<li
+  className="compatibility-issue-item"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+  </div>
+  <NodePane
+    nodes={
+      Array [
+        Object {
+          "actorID": "test-actor",
+          "attributes": Array [],
+          "nodeName": "test-element",
+          "nodeType": 1,
+        },
+      ]
+    }
+  />
+</li>
+`;
+
+exports[`IssueItem component renders an unsupported issue of CSS property 1`] = `
+<li
+  className="compatibility-issue-item compatibility-issue-item--unsupported"
+  key="test-property"
+>
+  <div
+    className="compatibility-issue-item__description"
+  >
+    <a
+      className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link"
+      href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+      onClick={[Function]}
+      title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default"
+    >
+      test-property
+    </a>
+    <UnsupportedBrowserList
+      browsers={
+        Array [
+          Object {
+            "id": "firefox",
+            "name": "Firefox",
+            "status": "nightly",
+            "version": "70",
+          },
+        ]
+      }
+    />
+  </div>
+</li>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueList.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueList.test.js.snap
new file mode 100644
index 0000000000..e89f2e721e
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueList.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IssueList component renders some issues 1`] = `
+<ul
+  className="compatibility-issue-list"
+>
+  <IssueItem
+    deprecated={false}
+    experimental={true}
+    property="border-block-color"
+    type="CSS_PROPERTY"
+    unsupportedBrowsers={Array []}
+    url="https://developer.mozilla.org/docs/Web/CSS/border-block-color"
+  />
+  <IssueItem
+    aliases={
+      Array [
+        "user-modify",
+      ]
+    }
+    deprecated={true}
+    experimental={false}
+    property="user-modify"
+    type="CSS_PROPERTY_ALIASES"
+    unsupportedBrowsers={Array []}
+    url="https://developer.mozilla.org/docs/Web/CSS/user-modify"
+  />
+</ul>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssuePane.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssuePane.test.js.snap
new file mode 100644
index 0000000000..579c1c1429
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssuePane.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IssuePane component renders no issues 1`] = `
+<Localized
+  id="compatibility-no-issues-found"
+>
+  <p
+    className="devtools-sidepanel-no-result"
+  >
+    compatibility-no-issues-found
+  </p>
+</Localized>
+`;
+
+exports[`IssuePane component renders some issues 1`] = `
+<IssueList
+  issues={
+    Array [
+      Object {
+        "deprecated": false,
+        "experimental": true,
+        "property": "border-block-color",
+        "type": "CSS_PROPERTY",
+        "unsupportedBrowsers": Array [],
+        "url": "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
+      },
+      Object {
+        "aliases": Array [
+          "user-modify",
+        ],
+        "deprecated": true,
+        "experimental": false,
+        "property": "user-modify",
+        "type": "CSS_PROPERTY_ALIASES",
+        "unsupportedBrowsers": Array [],
+        "url": "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+      },
+    ]
+  }
+/>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeItem.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeItem.test.js.snap
new file mode 100644
index 0000000000..daf80ec227
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeItem.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NodeItem component renders a node 1`] = `
+<li
+  className="compatibility-node-item"
+>
+  <span
+    className="objectBox objectBox-node clickable"
+    data-link-actor-id="test-actor"
+    onClick={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+  >
+    <span
+      className="tag-name"
+    >
+      test-element
+    </span>
+  </span>
+</li>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeList.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeList.test.js.snap
new file mode 100644
index 0000000000..6e99ac9537
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeList.test.js.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NodeList component renders a node 1`] = `
+<ul
+  className="compatibility-node-list"
+>
+  <NodeItem
+    node={
+      Object {
+        "actorID": "test-actor",
+        "attributes": Array [],
+        "nodeName": "test-element",
+        "nodeType": 1,
+      }
+    }
+  />
+</ul>
+`;
+
+exports[`NodeList component renders some nodes 1`] = `
+<ul
+  className="compatibility-node-list"
+>
+  <NodeItem
+    node={
+      Object {
+        "actorID": "test-actor-1",
+        "attributes": Array [],
+        "nodeName": "test-element-1",
+        "nodeType": 1,
+      }
+    }
+  />
+  <NodeItem
+    node={
+      Object {
+        "actorID": "test-actor-2",
+        "attributes": Array [],
+        "nodeName": "test-element-2",
+        "nodeType": 1,
+      }
+    }
+  />
+</ul>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodePane.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodePane.test.js.snap
new file mode 100644
index 0000000000..2c2508703c
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodePane.test.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NodePane component renders a node 1`] = `
+<details
+  className="compatibility-node-pane"
+  open={true}
+>
+  <Localized
+    $number={1}
+    id="compatibility-issue-occurrences"
+  >
+    <summary
+      className="compatibility-node-pane__summary"
+    >
+      compatibility-issue-occurrences
+    </summary>
+  </Localized>
+  <NodeList
+    nodes={
+      Array [
+        Object {
+          "actorID": "test-actor",
+          "attributes": Array [],
+          "nodeName": "test-element",
+          "nodeType": 1,
+        },
+      ]
+    }
+  />
+</details>
+`;
+
+exports[`NodePane component renders some nodes 1`] = `
+<details
+  className="compatibility-node-pane"
+  open={false}
+>
+  <Localized
+    $number={2}
+    id="compatibility-issue-occurrences"
+  >
+    <summary
+      className="compatibility-node-pane__summary"
+    >
+      compatibility-issue-occurrences
+    </summary>
+  </Localized>
+  <NodeList
+    nodes={
+      Array [
+        Object {
+          "actorID": "test-actor-1",
+          "attributes": Array [],
+          "nodeName": "test-element-1",
+          "nodeType": 1,
+        },
+        Object {
+          "actorID": "test-actor-2",
+          "attributes": Array [],
+          "nodeName": "test-element-2",
+          "nodeType": 1,
+        },
+      ]
+    }
+  />
+</details>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Settings.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Settings.test.js.snap
new file mode 100644
index 0000000000..2f81b42dd6
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Settings.test.js.snap
@@ -0,0 +1,367 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Settings component renders default browsers with a selected browsers 1`] = `
+<section
+  className="compatibility-settings"
+>
+  <header
+    className="compatibility-settings__header"
+  >
+    <Localized
+      id="compatibility-settings-header"
+    >
+      <label
+        className="compatibility-settings__header-label"
+      >
+        compatibility-settings-header
+      </label>
+    </Localized>
+    <Localized
+      attrs={
+        Object {
+          "title": true,
+        }
+      }
+      id="compatibility-close-settings-button"
+    >
+      <button
+        className="compatibility-settings__header-button"
+        onClick={[Function]}
+        title="compatibility-close-settings-button"
+      >
+        <img
+          className="compatibility-settings__header-icon"
+          src="chrome://devtools/skin/images/close.svg"
+        />
+      </button>
+    </Localized>
+  </header>
+  <section
+    className="compatibility-settings__target-browsers"
+  >
+    <Localized
+      id="compatibility-target-browsers-header"
+    >
+      <header
+        className="compatibility-settings__target-browsers-header"
+      >
+        compatibility-target-browsers-header
+      </header>
+    </Localized>
+    <ul
+      className="compatibility-settings__target-browsers-list"
+    >
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={false}
+          data-id="firefox"
+          data-status="nightly"
+          id="firefox-nightly"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-nightly"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox nightly"
+          />
+          Firefox nightly (78)
+        </label>
+      </li>
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={true}
+          data-id="firefox"
+          data-status="beta"
+          id="firefox-beta"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-beta"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox beta"
+          />
+          Firefox beta (77)
+        </label>
+      </li>
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={false}
+          data-id="firefox"
+          data-status="current"
+          id="firefox-current"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-current"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox current"
+          />
+          Firefox current (76)
+        </label>
+      </li>
+    </ul>
+  </section>
+</section>
+`;
+
+exports[`Settings component renders default browsers with full selected browsers 1`] = `
+<section
+  className="compatibility-settings"
+>
+  <header
+    className="compatibility-settings__header"
+  >
+    <Localized
+      id="compatibility-settings-header"
+    >
+      <label
+        className="compatibility-settings__header-label"
+      >
+        compatibility-settings-header
+      </label>
+    </Localized>
+    <Localized
+      attrs={
+        Object {
+          "title": true,
+        }
+      }
+      id="compatibility-close-settings-button"
+    >
+      <button
+        className="compatibility-settings__header-button"
+        onClick={[Function]}
+        title="compatibility-close-settings-button"
+      >
+        <img
+          className="compatibility-settings__header-icon"
+          src="chrome://devtools/skin/images/close.svg"
+        />
+      </button>
+    </Localized>
+  </header>
+  <section
+    className="compatibility-settings__target-browsers"
+  >
+    <Localized
+      id="compatibility-target-browsers-header"
+    >
+      <header
+        className="compatibility-settings__target-browsers-header"
+      >
+        compatibility-target-browsers-header
+      </header>
+    </Localized>
+    <ul
+      className="compatibility-settings__target-browsers-list"
+    >
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={true}
+          data-id="firefox"
+          data-status="nightly"
+          id="firefox-nightly"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-nightly"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox nightly"
+          />
+          Firefox nightly (78)
+        </label>
+      </li>
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={true}
+          data-id="firefox"
+          data-status="beta"
+          id="firefox-beta"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-beta"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox beta"
+          />
+          Firefox beta (77)
+        </label>
+      </li>
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={true}
+          data-id="firefox"
+          data-status="current"
+          id="firefox-current"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-current"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox current"
+          />
+          Firefox current (76)
+        </label>
+      </li>
+    </ul>
+  </section>
+</section>
+`;
+
+exports[`Settings component renders default browsers with no selected browsers 1`] = `
+<section
+  className="compatibility-settings"
+>
+  <header
+    className="compatibility-settings__header"
+  >
+    <Localized
+      id="compatibility-settings-header"
+    >
+      <label
+        className="compatibility-settings__header-label"
+      >
+        compatibility-settings-header
+      </label>
+    </Localized>
+    <Localized
+      attrs={
+        Object {
+          "title": true,
+        }
+      }
+      id="compatibility-close-settings-button"
+    >
+      <button
+        className="compatibility-settings__header-button"
+        onClick={[Function]}
+        title="compatibility-close-settings-button"
+      >
+        <img
+          className="compatibility-settings__header-icon"
+          src="chrome://devtools/skin/images/close.svg"
+        />
+      </button>
+    </Localized>
+  </header>
+  <section
+    className="compatibility-settings__target-browsers"
+  >
+    <Localized
+      id="compatibility-target-browsers-header"
+    >
+      <header
+        className="compatibility-settings__target-browsers-header"
+      >
+        compatibility-target-browsers-header
+      </header>
+    </Localized>
+    <ul
+      className="compatibility-settings__target-browsers-list"
+    >
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={false}
+          data-id="firefox"
+          data-status="nightly"
+          id="firefox-nightly"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-nightly"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox nightly"
+          />
+          Firefox nightly (78)
+        </label>
+      </li>
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={false}
+          data-id="firefox"
+          data-status="beta"
+          id="firefox-beta"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-beta"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox beta"
+          />
+          Firefox beta (77)
+        </label>
+      </li>
+      <li
+        className="compatibility-settings__target-browsers-item"
+      >
+        <input
+          checked={false}
+          data-id="firefox"
+          data-status="current"
+          id="firefox-current"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <label
+          className="compatibility-settings__target-browsers-item-label"
+          htmlFor="firefox-current"
+        >
+          <BrowserIcon
+            id="firefox"
+            title="Firefox current"
+          />
+          Firefox current (76)
+        </label>
+      </li>
+    </ul>
+  </section>
+</section>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserItem.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserItem.test.js.snap
new file mode 100644
index 0000000000..38cc5f96bc
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserItem.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnsupportedBrowserItem component renders the browser 1`] = `
+<Localized
+  $browsers="Firefox 113 (current)
+Firefox 114 (beta)
+Firefox 115 (release)"
+  attrs={
+    Object {
+      "title": true,
+    }
+  }
+  id="compatibility-issue-browsers-list"
+>
+  <li
+    className="compatibility-browser"
+    data-browser-id="firefox"
+  >
+    <BrowserIcon
+      id="firefox"
+      name="Firefox"
+    />
+    <span
+      className="compatibility-browser-version"
+    >
+      113
+    </span>
+  </li>
+</Localized>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserList.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserList.test.js.snap
new file mode 100644
index 0000000000..82b5fc573a
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserList.test.js.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnsupportedBrowserList component does not show ESR version if newer version is not supported 1`] = `
+<ul
+  className="compatibility-unsupported-browser-list"
+>
+  <UnsupportedBrowserItem
+    id="firefox"
+    key="firefox"
+    name="Firefox"
+    unsupportedVersions={
+      Array [
+        Object {
+          "status": "esr",
+          "version": "102",
+        },
+        Object {
+          "status": "current",
+          "version": "112",
+        },
+      ]
+    }
+    version="112"
+  />
+</ul>
+`;
+
+exports[`UnsupportedBrowserList component renders the browsers 1`] = `
+<ul
+  className="compatibility-unsupported-browser-list"
+>
+  <UnsupportedBrowserItem
+    id="firefox"
+    key="firefox"
+    name="Firefox"
+    unsupportedVersions={
+      Array [
+        Object {
+          "status": "beta",
+          "version": "69",
+        },
+        Object {
+          "status": "nightly",
+          "version": "70",
+        },
+      ]
+    }
+    version="69"
+  />
+  <UnsupportedBrowserItem
+    id="test-browser"
+    key="test-browser"
+    name="Test Browser"
+    unsupportedVersions={
+      Array [
+        Object {
+          "status": undefined,
+          "version": "1",
+        },
+        Object {
+          "status": undefined,
+          "version": "2",
+        },
+      ]
+    }
+    version="1"
+  />
+  <UnsupportedBrowserItem
+    id="sample-browser"
+    key="sample-browser"
+    name="Sample Browser"
+    unsupportedVersions={
+      Array [
+        Object {
+          "status": undefined,
+          "version": "100",
+        },
+      ]
+    }
+    version="100"
+  />
+</ul>
+`;
+
+exports[`UnsupportedBrowserList component shows ESR version if newer version is supported 1`] = `
+<ul
+  className="compatibility-unsupported-browser-list"
+>
+  <UnsupportedBrowserItem
+    id="firefox"
+    key="firefox"
+    name="Firefox"
+    unsupportedVersions={
+      Array [
+        Object {
+          "status": "esr",
+          "version": "102",
+        },
+      ]
+    }
+    version="102"
+  />
+  <UnsupportedBrowserItem
+    id="test-browser"
+    key="test-browser"
+    name="Test Browser"
+    unsupportedVersions={
+      Array [
+        Object {
+          "status": undefined,
+          "version": "1",
+        },
+      ]
+    }
+    version="1"
+  />
+</ul>
+`;
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-CompatibilityApp.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-CompatibilityApp.test.js
new file mode 100644
index 0000000000..f519d41308
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-CompatibilityApp.test.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the CompatibilityApp component.
+ */
+
+const { shallow } = require("enzyme");
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  thunk,
+} = require("resource://devtools/client/shared/redux/middleware/thunk.js");
+const configureStore = require("redux-mock-store").default;
+
+const CompatibilityApp = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/CompatibilityApp.js")
+);
+
+describe("CompatibilityApp component", () => {
+  it("renders zero issues", () => {
+    const mockStore = configureStore([thunk()]);
+    const store = mockStore({
+      compatibility: {
+        selectedNodeIssues: [],
+        topLevelTargetIssues: [],
+      },
+    });
+
+    const withLocalizationWrapper = shallow(CompatibilityApp({ store }));
+    const connectWrapper = withLocalizationWrapper.dive();
+    const targetComponent = connectWrapper.dive();
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders with settings", () => {
+    const mockStore = configureStore([thunk()]);
+    const store = mockStore({
+      compatibility: {
+        isSettingsVisible: true,
+        selectedNodeIssues: [],
+        topLevelTargetIssues: [],
+      },
+    });
+
+    const withLocalizationWrapper = shallow(CompatibilityApp({ store }));
+    const connectWrapper = withLocalizationWrapper.dive();
+    const targetComponent = connectWrapper.dive();
+    expect(targetComponent).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Footer.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Footer.test.js
new file mode 100644
index 0000000000..c217915a63
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Footer.test.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the Footer component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+const {
+  thunk,
+} = require("resource://devtools/client/shared/redux/middleware/thunk.js");
+const configureStore = require("redux-mock-store").default;
+
+const Footer = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/Footer.js")
+);
+
+describe("Footer component", () => {
+  it("renders", () => {
+    const mockStore = configureStore([thunk()]);
+    const store = mockStore({});
+    const connectWrapper = shallow(Footer({ store }));
+    const targetComponent = connectWrapper.dive();
+    expect(targetComponent).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js
new file mode 100644
index 0000000000..caec522e17
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js
@@ -0,0 +1,167 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the IssueItem component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+const IssueItem = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/IssueItem.js")
+);
+
+describe("IssueItem component", () => {
+  it("renders an unsupported issue of CSS property", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        deprecated: false,
+        experimental: false,
+        prefixNeeded: false,
+        unsupportedBrowsers: [
+          { id: "firefox", name: "Firefox", version: "70", status: "nightly" },
+        ],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders a deprecated issue of CSS property", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        deprecated: true,
+        experimental: false,
+        prefixNeeded: false,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders an experimental issue of CSS property", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        deprecated: false,
+        experimental: true,
+        prefixNeeded: false,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders a prefixNeeded issue of CSS property", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        aliases: ["test-alias-1", "test-alias-2"],
+        deprecated: false,
+        experimental: false,
+        prefixNeeded: true,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders an issue which has deprecated and experimental", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        aliases: ["test-alias-1", "test-alias-2"],
+        deprecated: true,
+        experimental: true,
+        prefixNeeded: false,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders an issue which has deprecated and prefixNeeded", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        aliases: ["test-alias-1", "test-alias-2"],
+        deprecated: true,
+        experimental: false,
+        prefixNeeded: true,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders an issue which has experimental and prefixNeeded", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        aliases: ["test-alias-1", "test-alias-2"],
+        deprecated: false,
+        experimental: true,
+        prefixNeeded: true,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders an issue which has deprecated, experimental and prefixNeeded", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        aliases: ["test-alias-1", "test-alias-2"],
+        deprecated: true,
+        experimental: true,
+        prefixNeeded: true,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders an issue which has nodes that caused this issue", () => {
+    const targetComponent = shallow(
+      IssueItem({
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        unsupportedBrowsers: [],
+        nodes: [
+          {
+            actorID: "test-actor",
+            attributes: [],
+            nodeName: "test-element",
+            nodeType: 1,
+          },
+        ],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js
new file mode 100644
index 0000000000..91431771b9
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the IssueList component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+const IssueList = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/IssueList.js")
+);
+
+describe("IssueList component", () => {
+  it("renders some issues", () => {
+    const list = shallow(
+      IssueList({
+        issues: [
+          {
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+            property: "border-block-color",
+            url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
+            deprecated: false,
+            experimental: true,
+            unsupportedBrowsers: [],
+          },
+          {
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+            property: "user-modify",
+            url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+            aliases: ["user-modify"],
+            deprecated: true,
+            experimental: false,
+            unsupportedBrowsers: [],
+          },
+        ],
+      })
+    );
+    expect(list).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js
new file mode 100644
index 0000000000..0885cdf183
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the IssuePane component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+const IssuePane = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/IssuePane.js")
+);
+
+describe("IssuePane component", () => {
+  it("renders no issues", () => {
+    const targetComponent = shallow(IssuePane({ issues: [] }));
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders some issues", () => {
+    const targetComponent = shallow(
+      IssuePane({
+        issues: [
+          {
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+            property: "border-block-color",
+            url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
+            deprecated: false,
+            experimental: true,
+            unsupportedBrowsers: [],
+          },
+          {
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+            property: "user-modify",
+            url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+            aliases: ["user-modify"],
+            deprecated: true,
+            experimental: false,
+            unsupportedBrowsers: [],
+          },
+        ],
+      })
+    );
+    expect(targetComponent).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeItem.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeItem.test.js
new file mode 100644
index 0000000000..8e4f0b7a72
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeItem.test.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the NodeItem component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const NodeItem = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/NodeItem.js")
+);
+
+describe("NodeItem component", () => {
+  it("renders a node", () => {
+    const pane = shallow(
+      NodeItem({
+        node: {
+          actorID: "test-actor",
+          attributes: [],
+          nodeName: "test-element",
+          nodeType: 1,
+        },
+      })
+    );
+    expect(pane).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeList.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeList.test.js
new file mode 100644
index 0000000000..b9ede9a6fd
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeList.test.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the NodeList component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const NodeList = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/NodeList.js")
+);
+
+describe("NodeList component", () => {
+  it("renders a node", () => {
+    const pane = shallow(
+      NodeList({
+        nodes: [
+          {
+            actorID: "test-actor",
+            attributes: [],
+            nodeName: "test-element",
+            nodeType: 1,
+          },
+        ],
+      })
+    );
+    expect(pane).toMatchSnapshot();
+  });
+});
+
+describe("NodeList component", () => {
+  it("renders some nodes", () => {
+    const pane = shallow(
+      NodeList({
+        nodes: [
+          {
+            actorID: "test-actor-1",
+            attributes: [],
+            nodeName: "test-element-1",
+            nodeType: 1,
+          },
+          {
+            actorID: "test-actor-2",
+            attributes: [],
+            nodeName: "test-element-2",
+            nodeType: 1,
+          },
+        ],
+      })
+    );
+    expect(pane).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodePane.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodePane.test.js
new file mode 100644
index 0000000000..a9a996eb33
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodePane.test.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the NodePane component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const NodePane = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/NodePane.js")
+);
+
+describe("NodePane component", () => {
+  it("renders a node", () => {
+    const pane = shallow(
+      NodePane({
+        nodes: [
+          {
+            actorID: "test-actor",
+            attributes: [],
+            nodeName: "test-element",
+            nodeType: 1,
+          },
+        ],
+      })
+    );
+    expect(pane).toMatchSnapshot();
+  });
+});
+
+describe("NodePane component", () => {
+  it("renders some nodes", () => {
+    const pane = shallow(
+      NodePane({
+        nodes: [
+          {
+            actorID: "test-actor-1",
+            attributes: [],
+            nodeName: "test-element-1",
+            nodeType: 1,
+          },
+          {
+            actorID: "test-actor-2",
+            attributes: [],
+            nodeName: "test-element-2",
+            nodeType: 1,
+          },
+        ],
+      })
+    );
+    expect(pane).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Settings.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Settings.test.js
new file mode 100644
index 0000000000..57db4cba67
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Settings.test.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the Settings component.
+ */
+
+const { shallow } = require("enzyme");
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  thunk,
+} = require("resource://devtools/client/shared/redux/middleware/thunk.js");
+const configureStore = require("redux-mock-store").default;
+
+const Settings = createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/Settings.js")
+);
+
+const DEFAULT_BROWSERS = [
+  { id: "firefox", name: "Firefox", status: "nightly", version: "78" },
+  { id: "firefox", name: "Firefox", status: "beta", version: "77" },
+  { id: "firefox", name: "Firefox", status: "current", version: "76" },
+];
+
+describe("Settings component", () => {
+  it("renders default browsers with no selected browsers", () => {
+    const mockStore = configureStore([thunk()]);
+    const store = mockStore({
+      compatibility: {
+        defaultTargetBrowsers: DEFAULT_BROWSERS,
+        targetBrowsers: [],
+      },
+    });
+
+    const connectWrapper = shallow(Settings({ store }));
+    const targetComponent = connectWrapper.dive();
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders default browsers with a selected browsers", () => {
+    const mockStore = configureStore([thunk()]);
+    const store = mockStore({
+      compatibility: {
+        defaultTargetBrowsers: DEFAULT_BROWSERS,
+        targetBrowsers: [DEFAULT_BROWSERS[1]],
+      },
+    });
+
+    const connectWrapper = shallow(Settings({ store }));
+    const targetComponent = connectWrapper.dive();
+    expect(targetComponent).toMatchSnapshot();
+  });
+
+  it("renders default browsers with full selected browsers", () => {
+    const mockStore = configureStore([thunk()]);
+    const store = mockStore({
+      compatibility: {
+        defaultTargetBrowsers: DEFAULT_BROWSERS,
+        targetBrowsers: DEFAULT_BROWSERS,
+      },
+    });
+
+    const connectWrapper = shallow(Settings({ store }));
+    const targetComponent = connectWrapper.dive();
+    expect(targetComponent).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserItem.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserItem.test.js
new file mode 100644
index 0000000000..1ffd023fb9
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserItem.test.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the UnsupportedBrowserItem component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const BrowserItem = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/UnsupportedBrowserItem.js")
+);
+
+describe("UnsupportedBrowserItem component", () => {
+  it("renders the browser", () => {
+    const item = shallow(
+      BrowserItem({
+        id: "firefox",
+        name: "Firefox",
+        version: "113",
+        unsupportedVersions: [
+          {
+            status: "current",
+            version: "113",
+          },
+          {
+            status: "beta",
+            version: "114",
+          },
+          {
+            status: "release",
+            version: "115",
+          },
+        ],
+      })
+    );
+    expect(item).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserList.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserList.test.js
new file mode 100644
index 0000000000..ca18480638
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserList.test.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the BrowserList component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const UnsupportedBrowserList = React.createFactory(
+  require("resource://devtools/client/inspector/compatibility/components/UnsupportedBrowserList.js")
+);
+
+describe("UnsupportedBrowserList component", () => {
+  it("renders the browsers", () => {
+    const list = shallow(
+      UnsupportedBrowserList({
+        browsers: [
+          { id: "firefox", name: "Firefox", version: "69", status: "beta" },
+          { id: "firefox", name: "Firefox", version: "70", status: "nightly" },
+          { id: "test-browser", name: "Test Browser", version: "1" },
+          { id: "test-browser", name: "Test Browser", version: "2" },
+          { id: "sample-browser", name: "Sample Browser", version: "100" },
+        ],
+      })
+    );
+    expect(list).toMatchSnapshot();
+  });
+
+  it("does not show ESR version if newer version is not supported", () => {
+    const list = shallow(
+      UnsupportedBrowserList({
+        browsers: [
+          { id: "firefox", name: "Firefox", version: "102", status: "esr" },
+          { id: "firefox", name: "Firefox", version: "112", status: "current" },
+        ],
+      })
+    );
+    expect(list).toMatchSnapshot();
+  });
+
+  it("shows ESR version if newer version is supported", () => {
+    const list = shallow(
+      UnsupportedBrowserList({
+        browsers: [
+          { id: "firefox", name: "Firefox", version: "102", status: "esr" },
+          { id: "test-browser", name: "Test Browser", version: "1" },
+        ],
+      })
+    );
+    expect(list).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/inspector/compatibility/test/node/jest.config.js b/devtools/client/inspector/compatibility/test/node/jest.config.js
new file mode 100644
index 0000000000..3107116da9
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/jest.config.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* global __dirname */
+
+const sharedJestConfig = require(`${__dirname}/../../../../shared/test-helpers/shared-jest.config`);
+
+module.exports = {
+  ...sharedJestConfig,
+  setupFiles: ["<rootDir>setup.js"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+};
diff --git a/devtools/client/inspector/compatibility/test/node/package.json b/devtools/client/inspector/compatibility/test/node/package.json
new file mode 100644
index 0000000000..f381ecd089
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "devtools-client-inspector-compatibility-test",
+  "license": "MPL-2.0",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=8.9.4"
+  },
+  "scripts": {
+    "test": "jest",
+    "test-ci": "jest --json"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "7.10.4",
+    "babel-plugin-transform-amd-to-commonjs": "1.4.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.13.2",
+    "enzyme-to-json": "^3.3.5",
+    "jest": "^24.6.0",
+    "react": "16.4.1",
+    "react-dom": "16.4.1",
+    "react-test-renderer": "16.4.1",
+    "redux": "^4.0.4",
+    "redux-mock-store": "^1.5.3"
+  }
+}
diff --git a/devtools/client/inspector/compatibility/test/node/setup.js b/devtools/client/inspector/compatibility/test/node/setup.js
new file mode 100644
index 0000000000..570e4462ae
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/setup.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+"use strict";
+
+// Configure enzyme with React 16 adapter.
+const Enzyme = require("enzyme");
+const Adapter = require("enzyme-adapter-react-16");
+Enzyme.configure({ adapter: new Adapter() });
+
+const {
+  setMocksInGlobal,
+} = require("resource://devtools/client/shared/test-helpers/shared-node-helpers.js");
+setMocksInGlobal();
diff --git a/devtools/client/inspector/compatibility/test/node/yarn.lock b/devtools/client/inspector/compatibility/test/node/yarn.lock
new file mode 100644
index 0000000000..17edf3108b
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/node/yarn.lock
@@ -0,0 +1,4334 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/core@^7.1.0":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.4.tgz#6ebd9fe00925f6c3e177bb726a188b5f578088ff"
+  integrity sha512-Rm0HGw101GY8FTzpWSyRbki/jzq+/PkNQJ+nSulrdY6gFGOsNseCqD6KHRYe2E+EdzuBdr2pxCp6s4Uk6eJ+XQ==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.6.4"
+    "@babel/helpers" "^7.6.2"
+    "@babel/parser" "^7.6.4"
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.3"
+    "@babel/types" "^7.6.3"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.11.5":
+  version "7.11.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
+  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
+  dependencies:
+    "@babel/types" "^7.11.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.4.0", "@babel/generator@^7.6.3", "@babel/generator@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.4.tgz#a4f8437287bf9671b07f483b76e3bb731bc97671"
+  integrity sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==
+  dependencies:
+    "@babel/types" "^7.6.3"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
+  integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-create-class-features-plugin@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
+  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-member-expression-to-functions" "^7.10.5"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+
+"@babel/helper-function-name@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
+  integrity sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.0.0"
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-get-function-arity@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
+  integrity sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
+  integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-plugin-utils@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
+  integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
+
+"@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
+"@babel/helper-remap-async-to-generator@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
+  integrity sha512-3fOK0L+Fdlg8S5al8u/hWE6vhufGSn0bN09xm2LXMy//REAF8kDCrYoOBKYmA8m5Nom+sV9LyLCwrFynA8/slg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-wrap-function" "^7.1.0"
+    "@babel/template" "^7.1.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-replace-supers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz#eec162f112c2f58d3af0af125e3bb57665146729"
+  integrity sha512-0XIdiQln4Elglgjbwo9wuJpL/K7AGCY26kmEt0+pRP0TAj4jjyNq1MjoRvikrTVqKcx4Gysxt4cXvVFXP/JO2Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-split-export-declaration@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
+  integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
+  dependencies:
+    "@babel/types" "^7.4.4"
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/helper-wrap-function@^7.1.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
+  integrity sha512-o9fP1BZLLSrYlxYEYyl2aS+Flun5gtjTIG8iln+XuEzQTs0PLagAGSXUcqruJwD5fM48jzIEggCKpIfWTcR7pQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/template" "^7.1.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.2.0"
+
+"@babel/helpers@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.6.2.tgz#681ffe489ea4dcc55f23ce469e58e59c1c045153"
+  integrity sha512-3/bAUL8zZxYs1cdX2ilEE0WobqbCmKWr/889lf2SS0PpDcpEIY8pb1CCyz0pEcX3pEb+MCbks1jIokz2xLtGTA==
+  dependencies:
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.2"
+    "@babel/types" "^7.6.0"
+
+"@babel/highlight@^7.0.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
+  integrity sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.6.3", "@babel/parser@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.4.tgz#cb9b36a7482110282d5cb6dd424ec9262b473d81"
+  integrity sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A==
+
+"@babel/parser@^7.10.4", "@babel/parser@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
+  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+
+"@babel/plugin-proposal-async-generator-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
+  integrity sha512-+Dfo/SCQqrwx48ptLVGLdE39YtWRuKc/Y9I5Fy0P1DDBB9lsAHpjcEJQt+4IifuSOSTLBKJObJqMvaO1pIE8LQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.1.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+
+"@babel/plugin-proposal-class-properties@7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
+  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
+  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.8.3":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076"
+  integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-syntax-async-generators@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
+  integrity sha512-1ZrIRBv2t0GSlcwVoQ6VgSLpLgiN/FVQUzt9znxo7v2Ov4jJrs8RY8tv0wvDmFN3qIdMKWrmMMW6yZ0G19MfGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
+  integrity sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
+  integrity sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.6.0"
+    "@babel/types" "^7.6.0"
+
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.6.2", "@babel/traverse@^7.6.3":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.3.tgz#66d7dba146b086703c0fb10dd588b7364cec47f9"
+  integrity sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.6.3"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.6.3"
+    "@babel/types" "^7.6.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/traverse@^7.10.4":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
+  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0", "@babel/types@^7.6.3":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.3.tgz#3f07d96f854f98e2fbd45c64b0cb942d11e8ba09"
+  integrity sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
+  integrity sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
+
+"@jest/console@^24.7.1", "@jest/console@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
+  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
+  dependencies:
+    "@jest/source-map" "^24.9.0"
+    chalk "^2.0.1"
+    slash "^2.0.0"
+
+"@jest/core@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
+  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/reporters" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-changed-files "^24.9.0"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-resolve-dependencies "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    jest-watcher "^24.9.0"
+    micromatch "^3.1.10"
+    p-each-series "^1.0.0"
+    realpath-native "^1.1.0"
+    rimraf "^2.5.4"
+    slash "^2.0.0"
+    strip-ansi "^5.0.0"
+
+"@jest/environment@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+  dependencies:
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/fake-timers@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
+  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/reporters@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
+  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-lib-coverage "^2.0.2"
+    istanbul-lib-instrument "^3.0.1"
+    istanbul-lib-report "^2.0.4"
+    istanbul-lib-source-maps "^3.0.1"
+    istanbul-reports "^2.2.6"
+    jest-haste-map "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    node-notifier "^5.4.2"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+    string-length "^2.0.0"
+
+"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.1.15"
+    source-map "^0.6.0"
+
+"@jest/test-result@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+
+"@jest/test-sequencer@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
+  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+
+"@jest/transform@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^24.9.0"
+    babel-plugin-istanbul "^5.1.0"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.1.15"
+    jest-haste-map "^24.9.0"
+    jest-regex-util "^24.9.0"
+    jest-util "^24.9.0"
+    micromatch "^3.1.10"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "2.4.1"
+
+"@jest/types@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^13.0.0"
+
+"@types/babel__core@^7.1.0":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
+  integrity sha512-8fBo0UR2CcwWxeX7WIIgJ7lXjasFxoYgRnFHUj+hRvKkpiBJbxhdAPTCY6/ZKM0uxANFVzt4yObSLuTiTnazDA==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.0.tgz#f1ec1c104d1bb463556ecb724018ab788d0c172a"
+  integrity sha512-c1mZUu4up5cp9KROs/QAw0gTeHrw/x7m52LcnvMxxOZ03DmLwPV0MlGmlgzV3cnSdjhJOZsj7E7FHeioai+egw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
+  integrity sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.7.tgz#2496e9ff56196cc1429c72034e07eab6121b6f3f"
+  integrity sha512-CeBpmX1J8kWLcDEnI3Cl2Eo6RfbGvzUctA+CjZUhOKDFbLfcr7fc4usEqLNWetrlJd7RhAkyYe2czXop4fICpw==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
+  integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
+
+"@types/istanbul-lib-report@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
+  integrity sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
+  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+    "@types/istanbul-lib-report" "*"
+
+"@types/node@*":
+  version "12.12.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.0.tgz#ff3201972d6dc851a9275308a17b9b5094e68057"
+  integrity sha512-6N8Sa5AaENRtJnpKXZgvc119PKxT1Lk9VPy4kfT8JF23tIe1qDfaGkBR2DRKJFIA7NptMz+fps//C6aLi1Uoug==
+
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+
+"@types/yargs-parser@*":
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
+  integrity sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==
+
+"@types/yargs@^13.0.0":
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.3.tgz#76482af3981d4412d65371a318f992d33464a380"
+  integrity sha512-K8/LfZq2duW33XW/tFwEAfnZlqIfVsoyRB3kfXdPXYhl0nfM8mmh7GS0jg7WrX2Dgq/0Ha/pR1PaR+BvmWwjiQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+abab@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.2.tgz#a2fba1b122c69a85caa02d10f9270c7219709a9d"
+  integrity sha512-2scffjvioEmNz0OyDSLGWDfKCVwaKc6l9Pm9kOIREU13ClXZvHpg/nRL5xyjSSSLhOnXqft2HpsAzNEEA8cFFg==
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
+acorn-globals@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
+  integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
+  dependencies:
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
+
+acorn-walk@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
+  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
+
+acorn@^5.5.3:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+
+acorn@^6.0.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
+  integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
+
+airbnb-prop-types@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
+  integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
+  dependencies:
+    array.prototype.find "^2.1.0"
+    function.prototype.name "^1.1.1"
+    has "^1.0.3"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object.assign "^4.1.0"
+    object.entries "^1.1.0"
+    prop-types "^15.7.2"
+    prop-types-exact "^1.2.0"
+    react-is "^16.9.0"
+
+ajv@^6.5.5:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
+  integrity sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-escapes@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
+
+ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
+
+arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
+
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
+
+array.prototype.find@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7"
+  integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.13.0"
+
+array.prototype.flat@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.2.tgz#8f3c71d245ba349b6b64b4078f76f5576f1fd723"
+  integrity sha512-VXjh7lAL4KXKF2hY4FnEW9eRW6IhdvFW1sN/JwLbmECbCgACCnBHNyP3lFiYuttr0jxRN9Bsc5+G27dMseSWqQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.15.0"
+    function-bind "^1.1.1"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+
+asn1@~0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+
+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
+
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+
+atob@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
+
+aws4@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
+
+babel-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
+  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
+  dependencies:
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^5.1.0"
+    babel-preset-jest "^24.9.0"
+    chalk "^2.4.2"
+    slash "^2.0.0"
+
+babel-plugin-istanbul@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
+  integrity sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    find-up "^3.0.0"
+    istanbul-lib-instrument "^3.3.0"
+    test-exclude "^5.2.3"
+
+babel-plugin-jest-hoist@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
+  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
+  dependencies:
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-transform-amd-to-commonjs@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-amd-to-commonjs/-/babel-plugin-transform-amd-to-commonjs-1.4.0.tgz#d9bc5003eaa26dbdd4e854e453f84903852af2ca"
+  integrity sha512-Xx0kYPn0LPyms+8n2KLn9yd2R5XMb2P1sNe4qn64/UQY5F2KFYlhhhyYUNm/BThfODAzl7rbaOsEfpU2M8iDKQ==
+
+babel-preset-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
+  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
+  dependencies:
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^24.9.0"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  dependencies:
+    tweetnacl "^0.14.3"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+browser-process-hrtime@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
+  integrity sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==
+
+browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
+  dependencies:
+    resolve "1.1.7"
+
+bser@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase@^5.0.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
+  dependencies:
+    rsvp "^4.8.4"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+cheerio@^1.0.0-rc.2:
+  version "1.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
+  integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.1"
+    entities "~1.1.1"
+    htmlparser2 "^3.9.1"
+    lodash "^4.15.0"
+    parse5 "^3.0.1"
+
+chownr@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
+  integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+combined-stream@^1.0.6, combined-stream@~1.0.6:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^2.19.0, commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+component-emitter@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
+
+convert-source-map@^1.1.0, convert-source-map@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
+core-util-is@1.0.2, core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
+cross-spawn@^6.0.0:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+css-select@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-what@2.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
+  integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
+  dependencies:
+    cssom "0.3.x"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-urls@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
+  dependencies:
+    abab "^2.0.0"
+    whatwg-mimetype "^2.2.0"
+    whatwg-url "^7.0.0"
+
+debug@^2.2.0, debug@^2.3.3:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
+
+define-properties@^1.1.2, define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+
+detect-newline@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
+
+diff-sequences@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
+
+discontinuous-range@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
+  integrity sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=
+
+dom-serializer@0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
+  integrity sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+dom-serializer@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
+  integrity sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==
+  dependencies:
+    domelementtype "^1.3.0"
+    entities "^1.1.1"
+
+domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
+domelementtype@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
+  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
+
+domexception@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
+  dependencies:
+    webidl-conversions "^4.0.2"
+
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
+  dependencies:
+    iconv-lite "~0.4.13"
+
+end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+entities@^1.1.1, entities@~1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
+entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
+  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
+
+enzyme-adapter-react-16@^1.13.2:
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.1.tgz#8ad55332be7091dc53a25d7d38b3485fc2ba50d5"
+  integrity sha512-yMPxrP3vjJP+4wL/qqfkT6JAIctcwKF+zXO6utlGPgUJT2l4tzrdjMDWGd/Pp1BjHBcljhN24OzNEGRteibJhA==
+  dependencies:
+    enzyme-adapter-utils "^1.12.1"
+    enzyme-shallow-equal "^1.0.0"
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    object.values "^1.1.0"
+    prop-types "^15.7.2"
+    react-is "^16.10.2"
+    react-test-renderer "^16.0.0-0"
+    semver "^5.7.0"
+
+enzyme-adapter-utils@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.1.tgz#e828e0d038e2b1efa4b9619ce896226f85c9dd88"
+  integrity sha512-KWiHzSjZaLEoDCOxY8Z1RAbUResbqKN5bZvenPbfKtWorJFVETUw754ebkuCQ3JKm0adx1kF8JaiR+PHPiP47g==
+  dependencies:
+    airbnb-prop-types "^2.15.0"
+    function.prototype.name "^1.1.1"
+    object.assign "^4.1.0"
+    object.fromentries "^2.0.1"
+    prop-types "^15.7.2"
+    semver "^5.7.0"
+
+enzyme-shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.0.tgz#d8e4603495e6ea279038eef05a4bf4887b55dc69"
+  integrity sha512-VUf+q5o1EIv2ZaloNQQtWCJM9gpeux6vudGVH6vLmfPXFLRuxl5+Aq3U260wof9nn0b0i+P5OEUXm1vnxkRpXQ==
+  dependencies:
+    has "^1.0.3"
+    object-is "^1.0.1"
+
+enzyme-to-json@^3.3.5:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.4.3.tgz#ed4386f48768ed29e2d1a2910893542c34e7e0af"
+  integrity sha512-jqNEZlHqLdz7OTpXSzzghArSS3vigj67IU/fWkPyl1c0TCj9P5s6Ze0kRkYZWNEoCqCR79xlQbigYlMx5erh8A==
+  dependencies:
+    lodash "^4.17.15"
+
+enzyme@^3.9.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.10.0.tgz#7218e347c4a7746e133f8e964aada4a3523452f6"
+  integrity sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==
+  dependencies:
+    array.prototype.flat "^1.2.1"
+    cheerio "^1.0.0-rc.2"
+    function.prototype.name "^1.1.0"
+    has "^1.0.3"
+    html-element-map "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-callable "^1.1.4"
+    is-number-object "^1.0.3"
+    is-regex "^1.0.4"
+    is-string "^1.0.4"
+    is-subset "^0.1.1"
+    lodash.escape "^4.0.1"
+    lodash.isequal "^4.5.0"
+    object-inspect "^1.6.0"
+    object-is "^1.0.1"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
+    object.values "^1.0.4"
+    raf "^3.4.0"
+    rst-selector-parser "^2.2.3"
+    string.prototype.trim "^1.1.2"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.15.0, es-abstract@^1.5.1:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.0.tgz#d3a26dc9c3283ac9750dca569586e976d9dcc06d"
+  integrity sha512-xdQnfykZ9JMEiasTAJZJdMWCQ1Vm00NBw79/AWi7ELfZuuPCSOMDZbT9mkOfSctVtfhb+sAAzrm+j//GjjLHLg==
+  dependencies:
+    es-to-primitive "^1.2.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.0"
+    is-callable "^1.1.4"
+    is-regex "^1.0.4"
+    object-inspect "^1.6.0"
+    object-keys "^1.1.1"
+    string.prototype.trimleft "^2.1.0"
+    string.prototype.trimright "^2.1.0"
+
+es-to-primitive@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+  integrity sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+escodegen@^1.9.1:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.12.0.tgz#f763daf840af172bb3a2b6dd7219c0e17f7ff541"
+  integrity sha512-TuA+EhsanGcme5T3R0L80u4t8CpbXQjegRmf7+FPTJrtCTErXFeelblRgHQa1FofEzqYYJmJ/OqjTwREp9qgmg==
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+esprima@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+  integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
+
+estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+exec-sh@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
+  integrity sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg==
+
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expect@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
+  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-styles "^3.2.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.9.0"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
+
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fb-watchman@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
+  integrity sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=
+  dependencies:
+    bser "^2.0.0"
+
+fbjs@^0.8.16:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
+for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
+  dependencies:
+    map-cache "^0.2.2"
+
+fs-minipass@^1.2.5:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
+  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
+  dependencies:
+    minipass "^2.6.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@^1.2.7:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
+  integrity sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==
+  dependencies:
+    nan "^2.12.1"
+    node-pre-gyp "^0.12.0"
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+function.prototype.name@^1.1.0, function.prototype.name@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.1.tgz#6d252350803085abc2ad423d4fe3be2f9cbda392"
+  integrity sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+    functions-have-names "^1.1.1"
+    is-callable "^1.1.4"
+
+functions-have-names@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.0.tgz#83da7583e4ea0c9ac5ff530f73394b033e0bf77d"
+  integrity sha512-zKXyzksTeaCSw5wIX79iCA40YAa6CJMJgNg9wdkU/ERBrIdPSimPICYiLp65lRbSBqtiHql/HZfS2DyI/AH6tQ==
+
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.5.tgz#6714c69bee20f3c3e64c4dd905553e532b40cdc0"
+  integrity sha512-J9dlskqUXK1OeTOYBEn5s8aMukWMwWfs+rPTn/jn50Ux4MNXVhubL1wu/j2t+H4NVI+cXEcCaYellqaPVGXNqQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
+
+handlebars@^4.1.2:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.1.tgz#8a01c382c180272260d07f2d1aa3ae745715c7ba"
+  integrity sha512-C29UoFzHe9yM61lOsIlCE5/mQVGrnIOrOq7maQl76L7tYPCgC1og0Ajt6uWnX4ZTxBPnjw+CUvawphwCfJgUnA==
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
+
+har-validator@~5.1.0:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
+  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
+  dependencies:
+    ajv "^6.5.5"
+    har-schema "^2.0.0"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+  integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.1, has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hosted-git-info@^2.1.4:
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
+  integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==
+
+html-element-map@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.1.0.tgz#e5aab9a834caf883b421f8bd9eaedcaac887d63c"
+  integrity sha512-iqiG3dTZmy+uUaTmHarTL+3/A2VW9ox/9uasKEZC+R/wAtUrTcRlXPSaPqsnWPfIu8wqn09jQNwMRqzL54jSYA==
+  dependencies:
+    array-filter "^1.0.0"
+
+html-encoding-sniffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+htmlparser2@^3.9.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+iconv-lite@0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ignore-walk@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
+  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
+  dependencies:
+    minimatch "^3.0.4"
+
+import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
+  dependencies:
+    pkg-dir "^3.0.0"
+    resolve-cwd "^2.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-boolean-object@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
+  integrity sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+  integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
+is-number-object@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
+  integrity sha1-8mWrian0RQNO9q/xWo8AsA9VF5k=
+
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
+  dependencies:
+    has "^1.0.1"
+
+is-stream@^1.0.1, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
+
+is-string@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
+  integrity sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=
+
+is-subset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
+  integrity sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=
+
+is-symbol@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
+  dependencies:
+    has-symbols "^1.0.0"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+
+is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
+
+isarray@1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+
+istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
+  integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
+
+istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
+  integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
+  dependencies:
+    "@babel/generator" "^7.4.0"
+    "@babel/parser" "^7.4.3"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    istanbul-lib-coverage "^2.0.5"
+    semver "^6.0.0"
+
+istanbul-lib-report@^2.0.4:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
+  integrity sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==
+  dependencies:
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    supports-color "^6.1.0"
+
+istanbul-lib-source-maps@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
+  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    rimraf "^2.6.3"
+    source-map "^0.6.1"
+
+istanbul-reports@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
+  integrity sha512-SKi4rnMyLBKe0Jy2uUdx28h8oG7ph2PPuQPvIAh31d+Ci+lSiEu4C+h3oBPuJ9+mPKhOyW0M8gY4U5NM1WLeXA==
+  dependencies:
+    handlebars "^4.1.2"
+
+jest-changed-files@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
+  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    execa "^1.0.0"
+    throat "^4.0.0"
+
+jest-cli@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
+  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
+  dependencies:
+    "@jest/core" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    import-local "^2.0.0"
+    is-ci "^2.0.0"
+    jest-config "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^13.3.0"
+
+jest-config@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
+  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    babel-jest "^24.9.0"
+    chalk "^2.0.1"
+    glob "^7.1.1"
+    jest-environment-jsdom "^24.9.0"
+    jest-environment-node "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    micromatch "^3.1.10"
+    pretty-format "^24.9.0"
+    realpath-native "^1.1.0"
+
+jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-docblock@^24.3.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
+  integrity sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==
+  dependencies:
+    detect-newline "^2.1.0"
+
+jest-each@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
+  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-environment-jsdom@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
+  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+    jsdom "^11.5.1"
+
+jest-environment-node@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
+  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+
+jest-get-type@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
+  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
+
+jest-haste-map@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
+  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    anymatch "^2.0.0"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.15"
+    invariant "^2.2.4"
+    jest-serializer "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.9.0"
+    micromatch "^3.1.10"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+jest-jasmine2@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
+  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    co "^4.6.0"
+    expect "^24.9.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+    throat "^4.0.0"
+
+jest-leak-detector@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
+  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
+  dependencies:
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-matcher-utils@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
+  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-message-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^2.0.1"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
+    stack-utils "^1.0.1"
+
+jest-mock@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
+  dependencies:
+    "@jest/types" "^24.9.0"
+
+jest-pnp-resolver@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
+  integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
+
+jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
+
+jest-resolve-dependencies@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
+  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-snapshot "^24.9.0"
+
+jest-resolve@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
+  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    browser-resolve "^1.11.3"
+    chalk "^2.0.1"
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-runner@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
+  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.4.2"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-docblock "^24.3.0"
+    jest-haste-map "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-leak-detector "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    source-map-support "^0.5.6"
+    throat "^4.0.0"
+
+jest-runtime@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
+  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/source-map" "^24.3.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    strip-bom "^3.0.0"
+    yargs "^13.3.0"
+
+jest-serializer@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
+
+jest-snapshot@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
+  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    expect "^24.9.0"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^24.9.0"
+    semver "^6.2.0"
+
+jest-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
+  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/source-map" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    callsites "^3.0.0"
+    chalk "^2.0.1"
+    graceful-fs "^4.1.15"
+    is-ci "^2.0.0"
+    mkdirp "^0.5.1"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+
+jest-validate@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
+  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    camelcase "^5.3.1"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    leven "^3.1.0"
+    pretty-format "^24.9.0"
+
+jest-watcher@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
+  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    jest-util "^24.9.0"
+    string-length "^2.0.0"
+
+jest-worker@^24.6.0, jest-worker@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^6.1.0"
+
+jest@^24.6.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
+  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
+  dependencies:
+    import-local "^2.0.0"
+    jest-cli "^24.9.0"
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+jsdom@^11.5.1:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
+  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==
+  dependencies:
+    abab "^2.0.0"
+    acorn "^5.5.3"
+    acorn-globals "^4.1.0"
+    array-equal "^1.0.0"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle "^1.0.0"
+    data-urls "^1.0.0"
+    domexception "^1.0.1"
+    escodegen "^1.9.1"
+    html-encoding-sniffer "^1.0.2"
+    left-pad "^1.3.0"
+    nwsapi "^2.0.7"
+    parse5 "4.0.0"
+    pn "^1.1.0"
+    request "^2.87.0"
+    request-promise-native "^1.0.5"
+    sax "^1.2.4"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.3.4"
+    w3c-hr-time "^1.0.1"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.3"
+    whatwg-mimetype "^2.1.0"
+    whatwg-url "^6.4.1"
+    ws "^5.2.0"
+    xml-name-validator "^3.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+
+json5@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
+  integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==
+  dependencies:
+    minimist "^1.2.0"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+  integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
+left-pad@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
+  integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+lodash.escape@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
+  integrity sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=
+
+lodash.flattendeep@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
+  integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
+
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
+
+lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+makeerror@1.0.x:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
+  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
+  dependencies:
+    tmpl "1.0.x"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
+  dependencies:
+    object-visit "^1.0.0"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+micromatch@^3.1.10, micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+mime-db@1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
+  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
+
+mime-types@^2.1.12, mime-types@~2.1.19:
+  version "2.1.24"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
+  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
+  dependencies:
+    mime-db "1.40.0"
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
+
+minimist@^1.1.1, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+
+minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
+  dependencies:
+    minipass "^2.9.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+mkdirp@^0.5.0, mkdirp@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
+  dependencies:
+    minimist "0.0.8"
+
+moo@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"
+  integrity sha512-gFD2xGCl8YFgGHsqJ9NKRVdwlioeW3mI1iqfLNYQOv0+6JRwG58Zk9DIGQgyIaffSYaO1xsKnMaYzzNr1KyIAw==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nan@^2.12.1:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
+  integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+nearley@^2.7.10:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.19.0.tgz#37717781d0fd0f2bfc95e233ebd75678ca4bda46"
+  integrity sha512-2v52FTw7RPqieZr3Gth1luAXZR7Je6q3KaDHY5bjl/paDUdMu35fZ8ICNgiYJRr3tf3NMvIQQR1r27AvEr9CRA==
+  dependencies:
+    commander "^2.19.0"
+    moo "^0.4.3"
+    railroad-diagrams "^1.0.0"
+    randexp "0.4.6"
+    semver "^5.4.1"
+
+needle@^2.2.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
+  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
+neo-async@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
+
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
+
+node-notifier@^5.4.2:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
+  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+node-pre-gyp@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
+  integrity sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
+nopt@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
+normalize-package-data@^2.3.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+npm-bundled@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
+  integrity sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==
+
+npm-packlist@^1.1.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.6.tgz#53ba3ed11f8523079f1457376dd379ee4ea42ff4"
+  integrity sha512-u65uQdb+qwtGvEJh/DgQgW1Xg7sqeNbmxYyrvlNznaVTjV3E5P6F/EFjM+BVHXl7JJlsdG8A64M0XI8FI/IOlg==
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
+  dependencies:
+    path-key "^2.0.0"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+nth-check@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
+  dependencies:
+    boolbase "~1.0.0"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
+nwsapi@^2.0.7:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.4.tgz#e006a878db23636f8e8a67d33ca0e4edf61a842f"
+  integrity sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw==
+
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+
+object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-inspect@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
+  integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==
+
+object-is@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
+  integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
+
+object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
+  dependencies:
+    isobject "^3.0.0"
+
+object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
+object.entries@^1.0.4, object.entries@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
+  integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+object.fromentries@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
+  integrity sha512-PUQv8Hbg3j2QX0IQYv3iAGCbGcu4yY4KQ92/dhA4sFSixBmSmp13UpDLs6jGK8rBtbmhNNIK99LD2k293jpiGA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.15.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  integrity sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
+  dependencies:
+    isobject "^3.0.1"
+
+object.values@^1.0.4, object.values@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
+  integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+optimist@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  integrity sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+
+os-tmpdir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
+
+osenv@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
+  dependencies:
+    p-reduce "^1.0.0"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
+
+p-limit@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
+  integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse5@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
+
+parse5@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
+  integrity sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==
+  dependencies:
+    "@types/node" "*"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
+pirates@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
+  dependencies:
+    node-modules-regexp "^1.0.0"
+
+pkg-dir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
+  dependencies:
+    find-up "^3.0.0"
+
+pn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+  integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+
+pretty-format@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
+prompts@^2.0.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
+  integrity sha512-VObPvJiWPhpZI6C5m60XOzTfnYg/xc/an+r9VYymj9WJW3B/DIH+REzjpAACPf8brwPeP+7vz3bIim3S+AaMjw==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.3"
+
+prop-types-exact@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
+  integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
+  dependencies:
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    reflect.ownkeys "^0.2.0"
+
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+psl@^1.1.24, psl@^1.1.28:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
+  integrity sha512-HZzqCGPecFLyoRj5HLfuDSKYTJkAfB5thKBIkRHtGjWwY7p1dAyveIbXIq4tO0KYfDF2tHqPUgY9SDnGm00uFw==
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+qs@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+
+raf@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
+railroad-diagrams@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
+  integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
+
+randexp@0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
+  integrity sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==
+  dependencies:
+    discontinuous-range "1.0.0"
+    ret "~0.1.10"
+
+rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-dom@16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
+  integrity sha512-1Gin+wghF/7gl4Cqcvr1DxFX2Osz7ugxSwl6gBqCMpdrxHjIFUS7GYxrFftZ9Ln44FHw0JxCFD9YtZsrbR5/4A==
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react-is@^16.10.2, react-is@^16.4.1, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
+  integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw==
+
+react-test-renderer@16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
+  integrity sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==
+  dependencies:
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+    react-is "^16.4.1"
+
+react-test-renderer@^16.0.0-0:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.11.0.tgz#72574566496462c808ac449b0287a4c0a1a7d8f8"
+  integrity sha512-nh9gDl8R4ut+ZNNb2EeKO5VMvTKxwzurbSMuGBoKtjpjbg8JK/u3eVPVNi1h1Ue+eYK9oSzJjb+K3lzLxyA4ag==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.17.0"
+
+react@16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
+  integrity sha512-3GEs0giKp6E0Oh/Y9ZC60CmYgUPnp7voH9fbjWsvXtYFb4EWtgQub0ADSq0sJR0BbHc4FThLLtzlcFaFXIorwg==
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+read-pkg-up@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+readable-stream@^2.0.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.1.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+realpath-native@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
+  dependencies:
+    util.promisify "^1.0.0"
+
+redux-mock-store@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.3.tgz#1f10528949b7ce8056c2532624f7cafa98576c6d"
+  integrity sha512-ryhkkb/4D4CUGpAV2ln1GOY/uh51aczjcRz9k2L2bPx/Xja3c5pSGJJPyR25GNVRXtKIExScdAgFdiXp68GmJA==
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
+redux@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"
+  integrity sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
+reflect.ownkeys@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
+  integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+
+repeat-element@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
+
+repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+request-promise-core@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.2.tgz#339f6aababcafdb31c799ff158700336301d3346"
+  integrity sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==
+  dependencies:
+    lodash "^4.17.11"
+
+request-promise-native@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.7.tgz#a49868a624bdea5069f1251d0a836e0d89aa2c59"
+  integrity sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==
+  dependencies:
+    request-promise-core "1.1.2"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
+request@^2.87.0:
+  version "2.88.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.0"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.4.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+  integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
+
+resolve@^1.10.0, resolve@^1.3.2:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
+  integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
+  dependencies:
+    path-parse "^1.0.6"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
+rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
+rst-selector-parser@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
+  integrity sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=
+  dependencies:
+    lodash.flattendeep "^4.4.0"
+    nearley "^2.7.10"
+
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
+  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
+  dependencies:
+    ret "~0.1.10"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
+  dependencies:
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
+    fb-watchman "^2.0.0"
+    micromatch "^3.1.4"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+
+sax@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
+scheduler@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
+  integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@^6.0.0, semver@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+
+set-value@^2.0.0, set-value@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
+shellwords@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
+
+sisteransi@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.3.tgz#98168d62b79e3a5e758e27ae63c4a053d748f4eb"
+  integrity sha512-SbEG75TzH8G7eVXFSN5f9EExILKfly7SUvVY5DhhYLvfhKqhDFY0OzevWa/zwak0RLRfWS5AvfMWpd9gJvr5Yg==
+
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+source-map-resolve@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
+  dependencies:
+    atob "^2.1.1"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.5.6:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
+  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
+
+source-map@^0.5.0, source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+spdx-correct@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
+  integrity sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
+  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
+  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
+  dependencies:
+    extend-shallow "^3.0.0"
+
+sshpk@^1.7.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
+  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+stack-utils@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
+  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+stealthy-require@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+
+string-length@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
+  integrity sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^4.0.0"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string.prototype.trim@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz#75a729b10cfc1be439543dae442129459ce61e3d"
+  integrity sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.13.0"
+    function-bind "^1.1.1"
+
+string.prototype.trimleft@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
+  integrity sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
+string.prototype.trimright@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
+  integrity sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
+
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
+symbol-tree@^3.2.2:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
+tar@^4:
+  version "4.4.13"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
+  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
+  dependencies:
+    chownr "^1.1.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.8.6"
+    minizlib "^1.2.1"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.3"
+
+test-exclude@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
+  integrity sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==
+  dependencies:
+    glob "^7.1.3"
+    minimatch "^3.0.4"
+    read-pkg-up "^4.0.0"
+    require-main-filename "^2.0.0"
+
+throat@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
+  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
+
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+tough-cookie@^2.3.3, tough-cookie@^2.3.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+tough-cookie@~2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
+  dependencies:
+    psl "^1.1.24"
+    punycode "^1.4.1"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
+  dependencies:
+    punycode "^2.1.0"
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+  dependencies:
+    prelude-ls "~1.1.2"
+
+ua-parser-js@^0.7.18:
+  version "0.7.20"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
+  integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
+
+uglify-js@^3.1.4:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.5.tgz#b0ee796d2ae7e25672e04f65629b997cd4b30bd6"
+  integrity sha512-7L3W+Npia1OCr5Blp4/Vw83tK1mu5gnoIURtT1fUVfQ3Kf8WStWV6NJz0fdoBJZls0KlweruRTLVe6XLafmy5g==
+  dependencies:
+    commander "~2.20.3"
+    source-map "~0.6.1"
+
+union-value@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^2.0.1"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+uri-js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+util.promisify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+uuid@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
+  integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+w3c-hr-time@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
+  integrity sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=
+  dependencies:
+    browser-process-hrtime "^0.1.2"
+
+walker@^1.0.7, walker@~1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
+  dependencies:
+    makeerror "1.0.x"
+
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
+whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-fetch@>=0.10.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
+
+whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
+whatwg-url@^6.4.1:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
+  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
+
+which@^1.2.9, which@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
+  dependencies:
+    string-width "^1.0.2 || 2"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+write-file-atomic@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
+  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
+ws@^5.2.0:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
+  integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==
+  dependencies:
+    async-limiter "~1.0.0"
+
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
+
+y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
+
+yallist@^3.0.0, yallist@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yargs-parser@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
diff --git a/devtools/client/inspector/compatibility/test/xpcshell/.eslintrc.js b/devtools/client/inspector/compatibility/test/xpcshell/.eslintrc.js
new file mode 100644
index 0000000000..86bd54c245
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/xpcshell/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the common devtools xpcshell eslintrc config.
+  extends: "../../../../../.eslintrc.xpcshell.js",
+};
diff --git a/devtools/client/inspector/compatibility/test/xpcshell/head.js b/devtools/client/inspector/compatibility/test/xpcshell/head.js
new file mode 100644
index 0000000000..733c0400da
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/xpcshell/head.js
@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+const { require } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
diff --git a/devtools/client/inspector/compatibility/test/xpcshell/test_default-browsers.js b/devtools/client/inspector/compatibility/test/xpcshell/test_default-browsers.js
new file mode 100644
index 0000000000..c565e77d01
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/xpcshell/test_default-browsers.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test for the default browsers of user settings.
+
+const {
+  getBrowsersList,
+} = require("resource://devtools/shared/compatibility/compatibility-user-settings.js");
+
+add_task(async () => {
+  info("Check whether each default browsers data are unique by id and status");
+
+  const defaultBrowsers = await getBrowsersList();
+
+  for (const target of defaultBrowsers) {
+    const count = defaultBrowsers.reduce(
+      (currentCount, browser) =>
+        target.id === browser.id && target.status === browser.status
+          ? currentCount + 1
+          : currentCount,
+      0
+    );
+
+    equal(count, 1, `This browser (${target.id} - ${target.status}) is unique`);
+  }
+});
diff --git a/devtools/client/inspector/compatibility/test/xpcshell/xpcshell.toml b/devtools/client/inspector/compatibility/test/xpcshell/xpcshell.toml
new file mode 100644
index 0000000000..f5f7e97e39
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/xpcshell/xpcshell.toml
@@ -0,0 +1,7 @@
+[DEFAULT]
+tags = "devtools"
+head = "head.js"
+firefox-appdir = "browser"
+skip-if = ["os == 'android'"]
+
+["test_default-browsers.js"]
diff --git a/devtools/client/inspector/compatibility/types.js b/devtools/client/inspector/compatibility/types.js
new file mode 100644
index 0000000000..d1f35bcc6a
--- /dev/null
+++ b/devtools/client/inspector/compatibility/types.js
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const browser = {
+  // The id of the browser which is defined in MDN compatibility dataset.
+  // e.g. "firefox"
+  // https://github.com/mdn/browser-compat-data/tree/master/browsers
+  id: PropTypes.string.isRequired,
+  // The browser name.
+  // e.g. "Firefox", "Firefox Android".
+  name: PropTypes.string.isRequired,
+  // The status of the browser.
+  // This should be one of "release", "beta", "nightly", "esr" or undefined.
+  status: PropTypes.string,
+  // The version of this browser.
+  // e.g. "70.0"
+  version: PropTypes.string.isRequired,
+};
+
+const node = PropTypes.object;
+
+const issue = {
+  // Type of this issue. The type should be one of COMPATIBILITY_ISSUE_TYPE.
+  type: PropTypes.string.isRequired,
+  // The CSS property which caused this issue.
+  property: PropTypes.string.isRequired,
+  // The url of MDN documentation for the CSS property.
+  url: PropTypes.string,
+  // The url of the specification for the CSS property.
+  specUrl: PropTypes.string,
+  // Whether the CSS property is deprecated or not.
+  deprecated: PropTypes.bool.isRequired,
+  // Whether the CSS property is experimental or not.
+  experimental: PropTypes.bool.isRequired,
+  // Whether the CSS property is needed prefix to cover all target browsers or not.
+  prefixNeeded: PropTypes.bool.isRequired,
+  // The browsers which do not support the CSS property.
+  unsupportedBrowsers: PropTypes.arrayOf(PropTypes.shape(browser)).isRequired,
+  // Nodes that caused this issue. This will be available for top-level target issues only.
+  nodes: PropTypes.arrayOf(node),
+  // Prefixed properties that the user set.
+  aliases: PropTypes.arrayOf(PropTypes.string),
+};
+
+exports.browser = browser;
+exports.issue = issue;
+exports.node = node;
diff --git a/devtools/client/inspector/compatibility/utils/cases.js b/devtools/client/inspector/compatibility/utils/cases.js
new file mode 100644
index 0000000000..5050e77ec2
--- /dev/null
+++ b/devtools/client/inspector/compatibility/utils/cases.js
@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+function toCamelCase(text) {
+  return text.replace(/-([a-z])/gi, (str, group) => {
+    return group.toUpperCase();
+  });
+}
+
+function toSnakeCase(text) {
+  return text.replace(/[a-z]([A-Z])/g, (str, group) => {
+    return `${str.charAt(0)}-${group.toLowerCase()}`;
+  });
+}
+
+module.exports = {
+  toCamelCase,
+  toSnakeCase,
+};
diff --git a/devtools/client/inspector/compatibility/utils/moz.build b/devtools/client/inspector/compatibility/utils/moz.build
new file mode 100644
index 0000000000..5de4c7b3ed
--- /dev/null
+++ b/devtools/client/inspector/compatibility/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "cases.js",
+)
diff --git a/devtools/client/inspector/components/InspectorTabPanel.css b/devtools/client/inspector/components/InspectorTabPanel.css
new file mode 100644
index 0000000000..6bffa61462
--- /dev/null
+++ b/devtools/client/inspector/components/InspectorTabPanel.css
@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.devtools-inspector-tab-panel {
+  width: 100%;
+  height: 100%;
+}
diff --git a/devtools/client/inspector/components/InspectorTabPanel.js b/devtools/client/inspector/components/InspectorTabPanel.js
new file mode 100644
index 0000000000..0da70fb1d4
--- /dev/null
+++ b/devtools/client/inspector/components/InspectorTabPanel.js
@@ -0,0 +1,73 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+// Shortcuts
+const { div } = dom;
+
+/**
+ * Helper panel component that is using an existing DOM node
+ * as the content. It's used by Sidebar as well as SplitBox
+ * components.
+ */
+class InspectorTabPanel extends Component {
+  static get propTypes() {
+    return {
+      // ID of the node that should be rendered as the content.
+      id: PropTypes.string.isRequired,
+      // Optional prefix for panel IDs.
+      idPrefix: PropTypes.string,
+      // Optional mount callback.
+      onMount: PropTypes.func,
+      // Optional unmount callback.
+      onUnmount: PropTypes.func,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      idPrefix: "",
+    };
+  }
+
+  componentDidMount() {
+    const doc = this.refs.content.ownerDocument;
+    const panel = doc.getElementById(this.props.idPrefix + this.props.id);
+
+    // Append existing DOM node into panel's content.
+    this.refs.content.appendChild(panel);
+
+    if (this.props.onMount) {
+      this.props.onMount(this.refs.content, this.props);
+    }
+  }
+
+  componentWillUnmount() {
+    const doc = this.refs.content.ownerDocument;
+    const panels = doc.getElementById("tabpanels");
+
+    if (this.props.onUnmount) {
+      this.props.onUnmount(this.refs.content, this.props);
+    }
+
+    // Move panel's content node back into list of tab panels.
+    panels.appendChild(this.refs.content.firstChild);
+  }
+
+  render() {
+    return div({
+      ref: "content",
+      className: "devtools-inspector-tab-panel",
+    });
+  }
+}
+
+module.exports = InspectorTabPanel;
diff --git a/devtools/client/inspector/components/moz.build b/devtools/client/inspector/components/moz.build
new file mode 100644
index 0000000000..cf6226361a
--- /dev/null
+++ b/devtools/client/inspector/components/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "InspectorTabPanel.js",
+)
diff --git a/devtools/client/inspector/computed/computed.js b/devtools/client/inspector/computed/computed.js
new file mode 100644
index 0000000000..7d2c129c7b
--- /dev/null
+++ b/devtools/client/inspector/computed/computed.js
@@ -0,0 +1,1713 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const flags = require("resource://devtools/shared/flags.js");
+const ToolDefinitions =
+  require("resource://devtools/client/definitions.js").Tools;
+const CssLogic = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+const OutputParser = require("resource://devtools/client/shared/output-parser.js");
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+const {
+  createChild,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const {
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+  VIEW_NODE_FONT_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+const TooltipsOverlay = require("resource://devtools/client/inspector/shared/tooltips-overlay.js");
+
+loader.lazyRequireGetter(
+  this,
+  "StyleInspectorMenu",
+  "resource://devtools/client/inspector/shared/style-inspector-menu.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "KeyShortcuts",
+  "resource://devtools/client/shared/key-shortcuts.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "openContentLink",
+  "resource://devtools/client/shared/link.js",
+  true
+);
+
+const STYLE_INSPECTOR_PROPERTIES =
+  "devtools/shared/locales/styleinspector.properties";
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
+const L10N_TWISTY_EXPAND_LABEL = STYLE_INSPECTOR_L10N.getStr(
+  "rule.twistyExpand.label"
+);
+const L10N_TWISTY_COLLAPSE_LABEL = STYLE_INSPECTOR_L10N.getStr(
+  "rule.twistyCollapse.label"
+);
+
+const FILTER_CHANGED_TIMEOUT = 150;
+
+/**
+ * Helper for long-running processes that should yield occasionally to
+ * the mainloop.
+ *
+ * @param {Window} win
+ *        Timeouts will be set on this window when appropriate.
+ * @param {Array} array
+ *        The array of items to process.
+ * @param {Object} options
+ *        Options for the update process:
+ *          onItem {function} Will be called with the value of each iteration.
+ *          onBatch {function} Will be called after each batch of iterations,
+ *            before yielding to the main loop.
+ *          onDone {function} Will be called when iteration is complete.
+ *          onCancel {function} Will be called if the process is canceled.
+ *          threshold {int} How long to process before yielding, in ms.
+ */
+function UpdateProcess(win, array, options) {
+  this.win = win;
+  this.index = 0;
+  this.array = array;
+
+  this.onItem = options.onItem || function () {};
+  this.onBatch = options.onBatch || function () {};
+  this.onDone = options.onDone || function () {};
+  this.onCancel = options.onCancel || function () {};
+  this.threshold = options.threshold || 45;
+
+  this.canceled = false;
+}
+
+UpdateProcess.prototype = {
+  /**
+   * Error thrown when the array of items to process is empty.
+   */
+  ERROR_ITERATION_DONE: new Error("UpdateProcess iteration done"),
+
+  /**
+   * Schedule a new batch on the main loop.
+   */
+  schedule() {
+    if (this.canceled) {
+      return;
+    }
+    this._timeout = setTimeout(this._timeoutHandler.bind(this), 0);
+  },
+
+  /**
+   * Cancel the running process.  onItem will not be called again,
+   * and onCancel will be called.
+   */
+  cancel() {
+    if (this._timeout) {
+      clearTimeout(this._timeout);
+      this._timeout = 0;
+    }
+    this.canceled = true;
+    this.onCancel();
+  },
+
+  _timeoutHandler() {
+    this._timeout = null;
+    try {
+      this._runBatch();
+      this.schedule();
+    } catch (e) {
+      if (e === this.ERROR_ITERATION_DONE) {
+        this.onBatch();
+        this.onDone();
+        return;
+      }
+      console.error(e);
+      throw e;
+    }
+  },
+
+  _runBatch() {
+    const time = Date.now();
+    while (!this.canceled) {
+      const next = this._next();
+      this.onItem(next);
+      if (Date.now() - time > this.threshold) {
+        this.onBatch();
+        return;
+      }
+    }
+  },
+
+  /**
+   * Returns the item at the current index and increases the index.
+   * If all items have already been processed, will throw ERROR_ITERATION_DONE.
+   */
+  _next() {
+    if (this.index < this.array.length) {
+      return this.array[this.index++];
+    }
+    throw this.ERROR_ITERATION_DONE;
+  },
+};
+
+/**
+ * CssComputedView is a panel that manages the display of a table
+ * sorted by style. There should be one instance of CssComputedView
+ * per style display (of which there will generally only be one).
+ *
+ * @param {Inspector} inspector
+ *        Inspector toolbox panel
+ * @param {Document} document
+ *        The document that will contain the computed view.
+ */
+function CssComputedView(inspector, document) {
+  this.inspector = inspector;
+  this.styleDocument = document;
+  this.styleWindow = this.styleDocument.defaultView;
+
+  this.propertyViews = [];
+
+  this._outputParser = new OutputParser(document, inspector.cssProperties);
+
+  // Create bound methods.
+  this.focusWindow = this.focusWindow.bind(this);
+  this._onClearSearch = this._onClearSearch.bind(this);
+  this._onClick = this._onClick.bind(this);
+  this._onContextMenu = this._onContextMenu.bind(this);
+  this._onCopy = this._onCopy.bind(this);
+  this._onFilterStyles = this._onFilterStyles.bind(this);
+  this._onIncludeBrowserStyles = this._onIncludeBrowserStyles.bind(this);
+  this.refreshPanel = this.refreshPanel.bind(this);
+
+  const doc = this.styleDocument;
+  this.element = doc.getElementById("computed-property-container");
+  this.searchField = doc.getElementById("computed-searchbox");
+  this.searchClearButton = doc.getElementById("computed-searchinput-clear");
+  this.includeBrowserStylesCheckbox = doc.getElementById(
+    "browser-style-checkbox"
+  );
+
+  this.shortcuts = new KeyShortcuts({ window: this.styleWindow });
+  this._onShortcut = this._onShortcut.bind(this);
+  this.shortcuts.on("CmdOrCtrl+F", event =>
+    this._onShortcut("CmdOrCtrl+F", event)
+  );
+  this.shortcuts.on("Escape", event => this._onShortcut("Escape", event));
+  this.styleDocument.addEventListener("copy", this._onCopy);
+  this.styleDocument.addEventListener("mousedown", this.focusWindow);
+  this.element.addEventListener("click", this._onClick);
+  this.element.addEventListener("contextmenu", this._onContextMenu);
+  this.searchField.addEventListener("input", this._onFilterStyles);
+  this.searchClearButton.addEventListener("click", this._onClearSearch);
+  this.includeBrowserStylesCheckbox.addEventListener(
+    "input",
+    this._onIncludeBrowserStyles
+  );
+
+  if (flags.testing) {
+    // In tests, we start listening immediately to avoid having to simulate a mousemove.
+    this.highlighters.addToView(this);
+  } else {
+    this.element.addEventListener(
+      "mousemove",
+      () => {
+        this.highlighters.addToView(this);
+      },
+      { once: true }
+    );
+  }
+
+  if (!this.inspector.is3PaneModeEnabled) {
+    // When the rules view is added in 3 pane mode, refresh the Computed view whenever
+    // the rules are changed.
+    this.inspector.on(
+      "ruleview-added",
+      () => {
+        this.ruleView.on("ruleview-changed", this.refreshPanel);
+      },
+      { once: true }
+    );
+  }
+
+  if (this.ruleView) {
+    this.ruleView.on("ruleview-changed", this.refreshPanel);
+  }
+
+  this.searchClearButton.hidden = true;
+
+  // No results text.
+  this.noResults = this.styleDocument.getElementById("computed-no-results");
+
+  // Refresh panel when color unit changed or pref for showing
+  // original sources changes.
+  this._handlePrefChange = this._handlePrefChange.bind(this);
+  this._prefObserver = new PrefObserver("devtools.");
+  this._prefObserver.on("devtools.defaultColorUnit", this._handlePrefChange);
+
+  // The element that we're inspecting, and the document that it comes from.
+  this._viewedElement = null;
+  // The PageStyle front related to the currently selected element
+  this.viewedElementPageStyle = null;
+
+  this.createStyleViews();
+
+  // Add the tooltips and highlightersoverlay
+  this.tooltips = new TooltipsOverlay(this);
+}
+
+/**
+ * Lookup a l10n string in the shared styleinspector string bundle.
+ *
+ * @param {String} name
+ *        The key to lookup.
+ * @returns {String} localized version of the given key.
+ */
+CssComputedView.l10n = function (name) {
+  try {
+    return STYLE_INSPECTOR_L10N.getStr(name);
+  } catch (ex) {
+    console.log("Error reading '" + name + "'");
+    throw new Error("l10n error with " + name);
+  }
+};
+
+CssComputedView.prototype = {
+  // Cache the list of properties that match the selected element.
+  _matchedProperties: null,
+
+  // Used for cancelling timeouts in the style filter.
+  _filterChangedTimeout: null,
+
+  // Holds the ID of the panelRefresh timeout.
+  _panelRefreshTimeout: null,
+
+  // Number of visible properties
+  numVisibleProperties: 0,
+
+  get contextMenu() {
+    if (!this._contextMenu) {
+      this._contextMenu = new StyleInspectorMenu(this);
+    }
+
+    return this._contextMenu;
+  },
+
+  // Get the highlighters overlay from the Inspector.
+  get highlighters() {
+    if (!this._highlighters) {
+      // highlighters is a lazy getter in the inspector.
+      this._highlighters = this.inspector.highlighters;
+    }
+
+    return this._highlighters;
+  },
+
+  get includeBrowserStyles() {
+    return this.includeBrowserStylesCheckbox.checked;
+  },
+
+  get ruleView() {
+    return (
+      this.inspector.hasPanel("ruleview") &&
+      this.inspector.getPanel("ruleview").view
+    );
+  },
+
+  _handlePrefChange() {
+    if (this._computed) {
+      this.refreshPanel();
+    }
+  },
+
+  /**
+   * Update the view with a new selected element. The CssComputedView panel
+   * will show the style information for the given element.
+   *
+   * @param {NodeFront} element
+   *        The highlighted node to get styles for.
+   * @returns a promise that will be resolved when highlighting is complete.
+   */
+  selectElement(element) {
+    if (!element) {
+      if (this.viewedElementPageStyle) {
+        this.viewedElementPageStyle.off(
+          "stylesheet-updated",
+          this.refreshPanel
+        );
+        this.viewedElementPageStyle = null;
+      }
+      this._viewedElement = null;
+      this.noResults.hidden = false;
+
+      if (this._refreshProcess) {
+        this._refreshProcess.cancel();
+      }
+      // Hiding all properties
+      for (const propView of this.propertyViews) {
+        propView.refresh();
+      }
+      return Promise.resolve(undefined);
+    }
+
+    if (element === this._viewedElement) {
+      return Promise.resolve(undefined);
+    }
+
+    if (this.viewedElementPageStyle) {
+      this.viewedElementPageStyle.off("stylesheet-updated", this.refreshPanel);
+    }
+    this.viewedElementPageStyle = element.inspectorFront.pageStyle;
+    this.viewedElementPageStyle.on("stylesheet-updated", this.refreshPanel);
+
+    this._viewedElement = element;
+
+    this.refreshSourceFilter();
+
+    return this.refreshPanel();
+  },
+
+  /**
+   * Get the type of a given node in the computed-view
+   *
+   * @param {DOMNode} node
+   *        The node which we want information about
+   * @return {Object} The type information object contains the following props:
+   * - view {String} Always "computed" to indicate the computed view.
+   * - type {String} One of the VIEW_NODE_XXX_TYPE const in
+   *   client/inspector/shared/node-types
+   * - value {Object} Depends on the type of the node
+   * returns null if the node isn't anything we care about
+   */
+  // eslint-disable-next-line complexity
+  getNodeInfo(node) {
+    if (!node) {
+      return null;
+    }
+
+    const classes = node.classList;
+
+    // Check if the node isn't a selector first since this doesn't require
+    // walking the DOM
+    if (
+      classes.contains("matched") ||
+      classes.contains("bestmatch") ||
+      classes.contains("parentmatch")
+    ) {
+      let selectorText = "";
+
+      for (const child of node.childNodes[1].childNodes) {
+        if (child.nodeType === node.TEXT_NODE) {
+          selectorText += child.textContent;
+        }
+      }
+      return {
+        type: VIEW_NODE_SELECTOR_TYPE,
+        value: selectorText.trim(),
+      };
+    }
+
+    const propertyView = node.closest(".computed-property-view");
+    const propertyMatchedSelectors = node.closest(".matchedselectors");
+    const parent = propertyMatchedSelectors || propertyView;
+
+    if (!parent) {
+      return null;
+    }
+
+    let value, type;
+
+    // Get the property and value for a node that's a property name or value
+    const isHref =
+      classes.contains("theme-link") && !classes.contains("computed-link");
+
+    if (classes.contains("computed-font-family")) {
+      if (propertyMatchedSelectors) {
+        const view = propertyMatchedSelectors.closest("li");
+        value = {
+          property: view.querySelector(".computed-property-name").firstChild
+            .textContent,
+          value: node.parentNode.textContent,
+        };
+      } else if (propertyView) {
+        value = {
+          property: parent.querySelector(".computed-property-name").firstChild
+            .textContent,
+          value: node.parentNode.textContent,
+        };
+      } else {
+        return null;
+      }
+    } else if (
+      propertyMatchedSelectors &&
+      (classes.contains("computed-other-property-value") || isHref)
+    ) {
+      const view = propertyMatchedSelectors.closest("li");
+      value = {
+        property: view.querySelector(".computed-property-name").firstChild
+          .textContent,
+        value: node.textContent,
+      };
+    } else if (
+      propertyView &&
+      (classes.contains("computed-property-name") ||
+        classes.contains("computed-property-value") ||
+        isHref)
+    ) {
+      value = {
+        property: parent.querySelector(".computed-property-name").firstChild
+          .textContent,
+        value: parent.querySelector(".computed-property-value").textContent,
+      };
+    }
+
+    // Get the type
+    if (classes.contains("computed-property-name")) {
+      type = VIEW_NODE_PROPERTY_TYPE;
+    } else if (
+      classes.contains("computed-property-value") ||
+      classes.contains("computed-other-property-value")
+    ) {
+      type = VIEW_NODE_VALUE_TYPE;
+    } else if (classes.contains("computed-font-family")) {
+      type = VIEW_NODE_FONT_TYPE;
+    } else if (isHref) {
+      type = VIEW_NODE_IMAGE_URL_TYPE;
+      value.url = node.href;
+    } else {
+      return null;
+    }
+
+    return {
+      view: "computed",
+      type,
+      value,
+    };
+  },
+
+  _createPropertyViews() {
+    if (this._createViewsPromise) {
+      return this._createViewsPromise;
+    }
+
+    this.refreshSourceFilter();
+    this.numVisibleProperties = 0;
+    const fragment = this.styleDocument.createDocumentFragment();
+
+    this._createViewsPromise = new Promise((resolve, reject) => {
+      this._createViewsProcess = new UpdateProcess(
+        this.styleWindow,
+        CssComputedView.propertyNames,
+        {
+          onItem: propertyName => {
+            // Per-item callback.
+            const propView = new PropertyView(this, propertyName);
+            fragment.append(propView.createListItemElement());
+
+            if (propView.visible) {
+              this.numVisibleProperties++;
+            }
+            this.propertyViews.push(propView);
+          },
+          onCancel: () => {
+            reject("_createPropertyViews cancelled");
+          },
+          onDone: () => {
+            // Completed callback.
+            this.element.appendChild(fragment);
+            this.noResults.hidden = this.numVisibleProperties > 0;
+            resolve(undefined);
+          },
+        }
+      );
+    });
+
+    this._createViewsProcess.schedule();
+
+    return this._createViewsPromise;
+  },
+
+  isPanelVisible() {
+    return (
+      this.inspector.toolbox &&
+      this.inspector.sidebar &&
+      this.inspector.toolbox.currentToolId === "inspector" &&
+      this.inspector.sidebar.getCurrentTabID() == "computedview"
+    );
+  },
+
+  /**
+   * Refresh the panel content. This could be called by a "ruleview-changed" event, but
+   * we avoid the extra processing unless the panel is visible.
+   */
+  refreshPanel() {
+    if (!this._viewedElement || !this.isPanelVisible()) {
+      return Promise.resolve();
+    }
+
+    // Capture the current viewed element to return from the promise handler
+    // early if it changed
+    const viewedElement = this._viewedElement;
+
+    return Promise.all([
+      this._createPropertyViews(),
+      this.viewedElementPageStyle.getComputed(this._viewedElement, {
+        filter: this._sourceFilter,
+        onlyMatched: !this.includeBrowserStyles,
+        markMatched: true,
+      }),
+    ])
+      .then(([, computed]) => {
+        if (viewedElement !== this._viewedElement) {
+          return Promise.resolve();
+        }
+
+        this._computed = computed;
+        this._matchedProperties = new Set();
+        const customProperties = new Set();
+
+        for (const name in computed) {
+          if (computed[name].matched) {
+            this._matchedProperties.add(name);
+          }
+          if (name.startsWith("--")) {
+            customProperties.add(name);
+          }
+        }
+
+        // Removing custom property PropertyViews which won't be used
+        let customPropertiesStartIndex;
+        for (let i = this.propertyViews.length - 1; i >= 0; i--) {
+          const propView = this.propertyViews[i];
+
+          // custom properties are displayed at the bottom of the list, and we're looping
+          // backward through propertyViews, so if the current item does not represent
+          // a custom property, we can stop looping.
+          if (!propView.isCustomProperty) {
+            customPropertiesStartIndex = i + 1;
+            break;
+          }
+
+          // If the custom property will be used, move to the next item.
+          if (customProperties.has(propView.name)) {
+            customProperties.delete(propView.name);
+            continue;
+          }
+
+          // Otherwise remove property view element
+          if (propView.element) {
+            propView.element.remove();
+          }
+
+          propView.destroy();
+          this.propertyViews.splice(i, 1);
+        }
+
+        // At this point, `customProperties` only contains custom property names for
+        // which we don't have a PropertyView yet.
+        let insertIndex = customPropertiesStartIndex;
+        for (const customPropertyName of Array.from(customProperties).sort()) {
+          const propertyView = new PropertyView(
+            this,
+            customPropertyName,
+            // isCustomProperty
+            true
+          );
+
+          const len = this.propertyViews.length;
+          if (insertIndex !== len) {
+            for (let i = insertIndex; i <= len; i++) {
+              const existingPropView = this.propertyViews[i];
+              if (
+                !existingPropView ||
+                !existingPropView.isCustomProperty ||
+                customPropertyName < existingPropView.name
+              ) {
+                insertIndex = i;
+                break;
+              }
+            }
+          }
+          this.propertyViews.splice(insertIndex, 0, propertyView);
+
+          // Insert the custom property PropertyView at the right spot so we
+          // keep the list ordered.
+          const previousSibling = this.element.childNodes[insertIndex - 1];
+          previousSibling.insertAdjacentElement(
+            "afterend",
+            propertyView.createListItemElement()
+          );
+        }
+
+        if (this._refreshProcess) {
+          this._refreshProcess.cancel();
+        }
+
+        this.noResults.hidden = true;
+
+        // Reset visible property count
+        this.numVisibleProperties = 0;
+
+        return new Promise((resolve, reject) => {
+          this._refreshProcess = new UpdateProcess(
+            this.styleWindow,
+            this.propertyViews,
+            {
+              onItem: propView => {
+                propView.refresh();
+              },
+              onCancel: () => {
+                reject("_refreshProcess of computed view cancelled");
+              },
+              onDone: () => {
+                this._refreshProcess = null;
+                this.noResults.hidden = this.numVisibleProperties > 0;
+
+                const searchBox = this.searchField.parentNode;
+                searchBox.classList.toggle(
+                  "devtools-searchbox-no-match",
+                  !!this.searchField.value.length && !this.numVisibleProperties
+                );
+
+                this.inspector.emit("computed-view-refreshed");
+                resolve(undefined);
+              },
+            }
+          );
+          this._refreshProcess.schedule();
+        });
+      })
+      .catch(console.error);
+  },
+
+  /**
+   * Handle the shortcut events in the computed view.
+   */
+  _onShortcut(name, event) {
+    if (!event.target.closest("#sidebar-panel-computedview")) {
+      return;
+    }
+    // Handle the search box's keypress event. If the escape key is pressed,
+    // clear the search box field.
+    if (
+      name === "Escape" &&
+      event.target === this.searchField &&
+      this._onClearSearch()
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (name === "CmdOrCtrl+F") {
+      this.searchField.focus();
+      event.preventDefault();
+    }
+  },
+
+  /**
+   * Set the filter style search value.
+   * @param {String} value
+   *        The search value.
+   */
+  setFilterStyles(value = "") {
+    this.searchField.value = value;
+    this.searchField.focus();
+    this._onFilterStyles();
+  },
+
+  /**
+   * Called when the user enters a search term in the filter style search box.
+   */
+  _onFilterStyles() {
+    if (this._filterChangedTimeout) {
+      clearTimeout(this._filterChangedTimeout);
+    }
+
+    const filterTimeout = this.searchField.value.length
+      ? FILTER_CHANGED_TIMEOUT
+      : 0;
+    this.searchClearButton.hidden = this.searchField.value.length === 0;
+
+    this._filterChangedTimeout = setTimeout(() => {
+      this.refreshPanel();
+      this._filterChangeTimeout = null;
+    }, filterTimeout);
+  },
+
+  /**
+   * Called when the user clicks on the clear button in the filter style search
+   * box. Returns true if the search box is cleared and false otherwise.
+   */
+  _onClearSearch() {
+    if (this.searchField.value) {
+      this.setFilterStyles("");
+      return true;
+    }
+
+    return false;
+  },
+
+  /**
+   * The change event handler for the includeBrowserStyles checkbox.
+   */
+  _onIncludeBrowserStyles() {
+    this.refreshSourceFilter();
+    this.refreshPanel();
+  },
+
+  /**
+   * When includeBrowserStylesCheckbox.checked is false we only display
+   * properties that have matched selectors and have been included by the
+   * document or one of thedocument's stylesheets. If .checked is false we
+   * display all properties including those that come from UA stylesheets.
+   */
+  refreshSourceFilter() {
+    this._matchedProperties = null;
+    this._sourceFilter = this.includeBrowserStyles
+      ? CssLogic.FILTER.UA
+      : CssLogic.FILTER.USER;
+  },
+
+  /**
+   * The CSS as displayed by the UI.
+   */
+  createStyleViews() {
+    if (CssComputedView.propertyNames) {
+      return;
+    }
+
+    CssComputedView.propertyNames = [];
+
+    // Here we build and cache a list of css properties supported by the browser
+    // We could use any element but let's use the main document's root element
+    const styles = this.styleWindow.getComputedStyle(
+      this.styleDocument.documentElement
+    );
+    const mozProps = [];
+    for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
+      const prop = styles.item(i);
+      if (prop.startsWith("--")) {
+        // Skip any CSS variables used inside of browser CSS files
+        continue;
+      } else if (prop.startsWith("-")) {
+        mozProps.push(prop);
+      } else {
+        CssComputedView.propertyNames.push(prop);
+      }
+    }
+
+    CssComputedView.propertyNames.sort();
+    CssComputedView.propertyNames.push.apply(
+      CssComputedView.propertyNames,
+      mozProps.sort()
+    );
+
+    this._createPropertyViews().catch(e => {
+      if (!this._isDestroyed) {
+        console.warn(
+          "The creation of property views was cancelled because " +
+            "the computed-view was destroyed before it was done creating views"
+        );
+      } else {
+        console.error(e);
+      }
+    });
+  },
+
+  /**
+   * Get a set of properties that have matched selectors.
+   *
+   * @return {Set} If a property name is in the set, it has matching selectors.
+   */
+  get matchedProperties() {
+    return this._matchedProperties || new Set();
+  },
+
+  /**
+   * Focus the window on mousedown.
+   */
+  focusWindow() {
+    this.styleWindow.focus();
+  },
+
+  /**
+   * Context menu handler.
+   */
+  _onContextMenu(event) {
+    // Call stopPropagation() and preventDefault() here so that avoid to show default
+    // context menu in about:devtools-toolbox. See Bug 1515265.
+    event.stopPropagation();
+    event.preventDefault();
+    this.contextMenu.show(event);
+  },
+
+  _onClick(event) {
+    const target = event.target;
+
+    if (target.nodeName === "a") {
+      event.stopPropagation();
+      event.preventDefault();
+      openContentLink(target.href);
+    }
+  },
+
+  /**
+   * Callback for copy event. Copy selected text.
+   *
+   * @param {Event} event
+   *        copy event object.
+   */
+  _onCopy(event) {
+    const win = this.styleWindow;
+    const text = win.getSelection().toString().trim();
+    if (text !== "") {
+      this.copySelection();
+      event.preventDefault();
+    }
+  },
+
+  /**
+   * Copy the current selection to the clipboard
+   */
+  copySelection() {
+    try {
+      const win = this.styleWindow;
+      const text = win.getSelection().toString().trim();
+
+      clipboardHelper.copyString(text);
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  /**
+   * Destructor for CssComputedView.
+   */
+  destroy() {
+    this._viewedElement = null;
+    if (this.viewedElementPageStyle) {
+      this.viewedElementPageStyle.off("stylesheet-updated", this.refreshPanel);
+      this.viewedElementPageStyle = null;
+    }
+    this._outputParser = null;
+
+    this._prefObserver.off("devtools.defaultColorUnit", this._handlePrefChange);
+    this._prefObserver.destroy();
+
+    // Cancel tree construction
+    if (this._createViewsProcess) {
+      this._createViewsProcess.cancel();
+    }
+    if (this._refreshProcess) {
+      this._refreshProcess.cancel();
+    }
+
+    if (this._contextMenu) {
+      this._contextMenu.destroy();
+      this._contextMenu = null;
+    }
+
+    if (this._highlighters) {
+      this._highlighters.removeFromView(this);
+      this._highlighters = null;
+    }
+
+    this.tooltips.destroy();
+
+    // Remove bound listeners
+    this.element.removeEventListener("click", this._onClick);
+    this.element.removeEventListener("contextmenu", this._onContextMenu);
+    this.searchField.removeEventListener("input", this._onFilterStyles);
+    this.searchClearButton.removeEventListener("click", this._onClearSearch);
+    this.styleDocument.removeEventListener("copy", this._onCopy);
+    this.styleDocument.removeEventListener("mousedown", this.focusWindow);
+    this.includeBrowserStylesCheckbox.removeEventListener(
+      "input",
+      this._onIncludeBrowserStyles
+    );
+
+    if (this.ruleView) {
+      this.ruleView.off("ruleview-changed", this.refreshPanel);
+    }
+
+    // Nodes used in templating
+    this.element = null;
+    this.searchField = null;
+    this.searchClearButton = null;
+    this.includeBrowserStylesCheckbox = null;
+
+    // Property views
+    for (const propView of this.propertyViews) {
+      propView.destroy();
+    }
+    this.propertyViews = null;
+
+    this.inspector = null;
+    this.styleDocument = null;
+    this.styleWindow = null;
+
+    this._isDestroyed = true;
+  },
+};
+
+function PropertyInfo(tree, name) {
+  this.tree = tree;
+  this.name = name;
+}
+
+PropertyInfo.prototype = {
+  get isSupported() {
+    // There can be a mismatch between the list of properties
+    // supported on the server and on the client.
+    // Ideally we should build PropertyInfo only for property names supported on
+    // the server. See Bug 1722348.
+    return this.tree._computed && this.name in this.tree._computed;
+  },
+
+  get value() {
+    if (this.isSupported) {
+      const value = this.tree._computed[this.name].value;
+      return value;
+    }
+    return null;
+  },
+};
+
+/**
+ * A container to give easy access to property data from the template engine.
+ */
+class PropertyView {
+  /*
+   * @param {CssComputedView} tree
+   *        The CssComputedView instance we are working with.
+   * @param {String} name
+   *        The CSS property name for which this PropertyView
+   *        instance will render the rules.
+   * @param {Boolean} isCustomProperty
+   *        Set to true if this will represent a custom property.
+   */
+  constructor(tree, name, isCustomProperty = false) {
+    this.tree = tree;
+    this.name = name;
+
+    this.isCustomProperty = isCustomProperty;
+
+    if (!this.isCustomProperty) {
+      this.link = "https://developer.mozilla.org/docs/Web/CSS/" + name;
+    }
+
+    this.#propertyInfo = new PropertyInfo(tree, name);
+    const win = this.tree.styleWindow;
+    this.#abortController = new win.AbortController();
+  }
+
+  // The parent element which contains the open attribute
+  element = null;
+
+  // Property header node
+  propertyHeader = null;
+
+  // Destination for property values
+  valueNode = null;
+
+  // Are matched rules expanded?
+  matchedExpanded = false;
+
+  // Matched selector container
+  matchedSelectorsContainer = null;
+
+  // Matched selector expando
+  matchedExpander = null;
+
+  // AbortController for event listeners
+  #abortController = null;
+
+  // Cache for matched selector views
+  #matchedSelectorViews = null;
+
+  // The previously selected element used for the selector view caches
+  #prevViewedElement = null;
+
+  // PropertyInfo
+  #propertyInfo = null;
+
+  /**
+   * Get the computed style for the current property.
+   *
+   * @return {String} the computed style for the current property of the
+   * currently highlighted element.
+   */
+  get value() {
+    return this.propertyInfo.value;
+  }
+
+  /**
+   * An easy way to access the CssPropertyInfo behind this PropertyView.
+   */
+  get propertyInfo() {
+    return this.#propertyInfo;
+  }
+
+  /**
+   * Does the property have any matched selectors?
+   */
+  get hasMatchedSelectors() {
+    return this.tree.matchedProperties.has(this.name);
+  }
+
+  /**
+   * Should this property be visible?
+   */
+  get visible() {
+    if (!this.tree._viewedElement) {
+      return false;
+    }
+
+    if (!this.tree.includeBrowserStyles && !this.hasMatchedSelectors) {
+      return false;
+    }
+
+    const searchTerm = this.tree.searchField.value.toLowerCase();
+    const isValidSearchTerm = !!searchTerm.trim().length;
+    if (
+      isValidSearchTerm &&
+      !this.name.toLowerCase().includes(searchTerm) &&
+      !this.value.toLowerCase().includes(searchTerm)
+    ) {
+      return false;
+    }
+
+    return this.propertyInfo.isSupported;
+  }
+
+  /**
+   * Returns the className that should be assigned to the propertyView.
+   *
+   * @return {String}
+   */
+  get propertyHeaderClassName() {
+    return this.visible ? "computed-property-view" : "computed-property-hidden";
+  }
+
+  /**
+   * Create DOM elements for a property
+   *
+   * @return {Element} The <li> element
+   */
+  createListItemElement() {
+    const doc = this.tree.styleDocument;
+    const baseEventListenerConfig = { signal: this.#abortController.signal };
+
+    // Build the container element
+    this.onMatchedToggle = this.onMatchedToggle.bind(this);
+    this.element = doc.createElement("li");
+    this.element.className = this.propertyHeaderClassName;
+    this.element.addEventListener(
+      "dblclick",
+      this.onMatchedToggle,
+      baseEventListenerConfig
+    );
+
+    // Make it keyboard navigable
+    this.element.setAttribute("tabindex", "0");
+    this.shortcuts = new KeyShortcuts({
+      window: this.tree.styleWindow,
+      target: this.element,
+    });
+    this.shortcuts.on("F1", event => {
+      this.mdnLinkClick(event);
+      // Prevent opening the options panel
+      event.preventDefault();
+      event.stopPropagation();
+    });
+    this.shortcuts.on("Return", this.onMatchedToggle);
+    this.shortcuts.on("Space", this.onMatchedToggle);
+
+    const nameContainer = doc.createElement("span");
+    nameContainer.className = "computed-property-name-container";
+
+    // Build the twisty expand/collapse
+    this.matchedExpander = doc.createElement("div");
+    this.matchedExpander.className = "computed-expander theme-twisty";
+    this.matchedExpander.setAttribute("role", "button");
+    this.matchedExpander.setAttribute("aria-label", L10N_TWISTY_EXPAND_LABEL);
+    this.matchedExpander.addEventListener(
+      "click",
+      this.onMatchedToggle,
+      baseEventListenerConfig
+    );
+
+    // Build the style name element
+    const nameNode = doc.createElement("span");
+    nameNode.classList.add("computed-property-name", "theme-fg-color3");
+
+    // Give it a heading role for screen readers.
+    nameNode.setAttribute("role", "heading");
+
+    // Reset its tabindex attribute otherwise, if an ellipsis is applied
+    // it will be reachable via TABing
+    nameNode.setAttribute("tabindex", "");
+    // Avoid english text (css properties) from being altered
+    // by RTL mode
+    nameNode.setAttribute("dir", "ltr");
+    nameNode.textContent = nameNode.title = this.name;
+    // Make it hand over the focus to the container
+    const focusElement = () => this.element.focus();
+    nameNode.addEventListener("click", focusElement, baseEventListenerConfig);
+
+    // Build the style name ":" separator
+    const nameSeparator = doc.createElement("span");
+    nameSeparator.classList.add("visually-hidden");
+    nameSeparator.textContent = ": ";
+    nameNode.appendChild(nameSeparator);
+
+    nameContainer.appendChild(nameNode);
+
+    const valueContainer = doc.createElement("span");
+    valueContainer.className = "computed-property-value-container";
+
+    // Build the style value element
+    this.valueNode = doc.createElement("span");
+    this.valueNode.classList.add("computed-property-value", "theme-fg-color1");
+    // Reset its tabindex attribute otherwise, if an ellipsis is applied
+    // it will be reachable via TABing
+    this.valueNode.setAttribute("tabindex", "");
+    this.valueNode.setAttribute("dir", "ltr");
+    // Make it hand over the focus to the container
+    this.valueNode.addEventListener(
+      "click",
+      focusElement,
+      baseEventListenerConfig
+    );
+
+    // Build the style value ";" separator
+    const valueSeparator = doc.createElement("span");
+    valueSeparator.classList.add("visually-hidden");
+    valueSeparator.textContent = ";";
+
+    // Build the matched selectors container
+    this.matchedSelectorsContainer = doc.createElement("div");
+    this.matchedSelectorsContainer.classList.add("matchedselectors");
+
+    valueContainer.append(this.valueNode, valueSeparator);
+    this.element.append(
+      this.matchedExpander,
+      nameContainer,
+      valueContainer,
+      this.matchedSelectorsContainer
+    );
+
+    return this.element;
+  }
+
+  /**
+   * Refresh the panel's CSS property value.
+   */
+  refresh() {
+    const className = this.propertyHeaderClassName;
+    if (this.element.className !== className) {
+      this.element.className = className;
+    }
+
+    if (this.#prevViewedElement !== this.tree._viewedElement) {
+      this.#matchedSelectorViews = null;
+      this.#prevViewedElement = this.tree._viewedElement;
+    }
+
+    if (!this.tree._viewedElement || !this.visible) {
+      this.valueNode.textContent = this.valueNode.title = "";
+      this.matchedSelectorsContainer.parentNode.hidden = true;
+      this.matchedSelectorsContainer.textContent = "";
+      this.matchedExpander.removeAttribute("open");
+      this.matchedExpander.setAttribute("aria-label", L10N_TWISTY_EXPAND_LABEL);
+      return;
+    }
+
+    this.tree.numVisibleProperties++;
+
+    const outputParser = this.tree._outputParser;
+    const frag = outputParser.parseCssProperty(
+      this.propertyInfo.name,
+      this.propertyInfo.value,
+      {
+        colorSwatchClass: "computed-colorswatch",
+        colorClass: "computed-color",
+        urlClass: "theme-link",
+        fontFamilyClass: "computed-font-family",
+        // No need to use baseURI here as computed URIs are never relative.
+      }
+    );
+    this.valueNode.innerHTML = "";
+    this.valueNode.appendChild(frag);
+
+    this.refreshMatchedSelectors();
+  }
+
+  /**
+   * Refresh the panel matched rules.
+   */
+  refreshMatchedSelectors() {
+    const hasMatchedSelectors = this.hasMatchedSelectors;
+    this.matchedSelectorsContainer.parentNode.hidden = !hasMatchedSelectors;
+
+    if (hasMatchedSelectors) {
+      this.matchedExpander.classList.add("computed-expandable");
+    } else {
+      this.matchedExpander.classList.remove("computed-expandable");
+    }
+
+    if (this.matchedExpanded && hasMatchedSelectors) {
+      return this.tree.viewedElementPageStyle
+        .getMatchedSelectors(this.tree._viewedElement, this.name)
+        .then(matched => {
+          if (!this.matchedExpanded) {
+            return;
+          }
+
+          this._matchedSelectorResponse = matched;
+
+          this.#buildMatchedSelectors();
+          this.matchedExpander.setAttribute("open", "");
+          this.matchedExpander.setAttribute(
+            "aria-label",
+            L10N_TWISTY_COLLAPSE_LABEL
+          );
+          this.tree.inspector.emit("computed-view-property-expanded");
+        })
+        .catch(console.error);
+    }
+
+    this.matchedSelectorsContainer.innerHTML = "";
+    this.matchedExpander.removeAttribute("open");
+    this.matchedExpander.setAttribute("aria-label", L10N_TWISTY_EXPAND_LABEL);
+    this.tree.inspector.emit("computed-view-property-collapsed");
+    return Promise.resolve(undefined);
+  }
+
+  get matchedSelectors() {
+    return this._matchedSelectorResponse;
+  }
+
+  #buildMatchedSelectors() {
+    const frag = this.element.ownerDocument.createDocumentFragment();
+
+    for (const selector of this.matchedSelectorViews) {
+      const p = createChild(frag, "p");
+      const span = createChild(p, "span", {
+        class: "rule-link",
+      });
+
+      const link = createChild(span, "a", {
+        target: "_blank",
+        class: "computed-link theme-link",
+        title: selector.longSource,
+        sourcelocation: selector.source,
+        tabindex: "0",
+        textContent: selector.source,
+      });
+      link.addEventListener("click", selector.openStyleEditor);
+      const shortcuts = new KeyShortcuts({
+        window: this.tree.styleWindow,
+        target: link,
+      });
+      shortcuts.on("Return", () => selector.openStyleEditor());
+
+      const status = createChild(p, "span", {
+        dir: "ltr",
+        class: "rule-text theme-fg-color3 " + selector.statusClass,
+        title: selector.statusText,
+      });
+
+      // Add an explicit status text span for screen readers.
+      // They won't pick up the title from the status span.
+      createChild(status, "span", {
+        dir: "ltr",
+        class: "visually-hidden",
+        textContent: selector.statusText + " ",
+      });
+
+      createChild(status, "div", {
+        class: "fix-get-selection",
+        textContent: selector.sourceText,
+      });
+
+      const valueDiv = createChild(status, "div", {
+        class:
+          "fix-get-selection computed-other-property-value theme-fg-color1",
+      });
+      valueDiv.appendChild(selector.outputFragment);
+    }
+
+    this.matchedSelectorsContainer.innerHTML = "";
+    this.matchedSelectorsContainer.appendChild(frag);
+  }
+
+  /**
+   * Provide access to the matched SelectorViews that we are currently
+   * displaying.
+   */
+  get matchedSelectorViews() {
+    if (!this.#matchedSelectorViews) {
+      this.#matchedSelectorViews = [];
+      this._matchedSelectorResponse.forEach(selectorInfo => {
+        const selectorView = new SelectorView(this.tree, selectorInfo);
+        this.#matchedSelectorViews.push(selectorView);
+      }, this);
+    }
+    return this.#matchedSelectorViews;
+  }
+
+  /**
+   * The action when a user expands matched selectors.
+   *
+   * @param {Event} event
+   *        Used to determine the class name of the targets click
+   *        event.
+   */
+  onMatchedToggle(event) {
+    if (event.shiftKey) {
+      return;
+    }
+    this.matchedExpanded = !this.matchedExpanded;
+    this.refreshMatchedSelectors();
+    event.preventDefault();
+  }
+
+  /**
+   * The action when a user clicks on the MDN help link for a property.
+   */
+  mdnLinkClick(event) {
+    if (!this.link) {
+      return;
+    }
+    openContentLink(this.link);
+  }
+
+  /**
+   * Destroy this property view, removing event listeners
+   */
+  destroy() {
+    if (this.#matchedSelectorViews) {
+      for (const view of this.#matchedSelectorViews) {
+        view.destroy();
+      }
+    }
+
+    if (this.#abortController) {
+      this.#abortController.abort();
+      this.#abortController = null;
+    }
+
+    if (this.shortcuts) {
+      this.shortcuts.destroy();
+    }
+
+    this.shortcuts = null;
+    this.element = null;
+    this.matchedExpander = null;
+    this.valueNode = null;
+  }
+}
+
+/**
+ * A container to give us easy access to display data from a CssRule
+ *
+ * @param CssComputedView tree
+ *        the owning CssComputedView
+ * @param selectorInfo
+ */
+function SelectorView(tree, selectorInfo) {
+  this.tree = tree;
+  this.selectorInfo = selectorInfo;
+  this._cacheStatusNames();
+
+  this.openStyleEditor = this.openStyleEditor.bind(this);
+  this._updateLocation = this._updateLocation.bind(this);
+
+  const rule = this.selectorInfo.rule;
+  if (!rule || !rule.parentStyleSheet || rule.type == ELEMENT_STYLE) {
+    this.source = CssLogic.l10n("rule.sourceElement");
+    this.longSource = this.source;
+  } else {
+    // This always refers to the generated location.
+    const sheet = rule.parentStyleSheet;
+    const sourceSuffix = rule.line > 0 ? ":" + rule.line : "";
+    this.source = CssLogic.shortSource(sheet) + sourceSuffix;
+    this.longSource = CssLogic.longSource(sheet) + sourceSuffix;
+
+    this.generatedLocation = {
+      sheet,
+      href: sheet.href || sheet.nodeHref,
+      line: rule.line,
+      column: rule.column,
+    };
+    this.sourceMapURLService = this.tree.inspector.toolbox.sourceMapURLService;
+    this._unsubscribeCallback = this.sourceMapURLService.subscribeByID(
+      this.generatedLocation.sheet.resourceId,
+      this.generatedLocation.line,
+      this.generatedLocation.column,
+      this._updateLocation
+    );
+  }
+}
+
+/**
+ * Decode for cssInfo.rule.status
+ * @see SelectorView.prototype._cacheStatusNames
+ * @see CssLogic.STATUS
+ */
+SelectorView.STATUS_NAMES = [
+  // "Parent Match", "Matched", "Best Match"
+];
+
+SelectorView.CLASS_NAMES = ["parentmatch", "matched", "bestmatch"];
+
+SelectorView.prototype = {
+  /**
+   * Cache localized status names.
+   *
+   * These statuses are localized inside the styleinspector.properties string
+   * bundle.
+   * @see css-logic.js - the CssLogic.STATUS array.
+   */
+  _cacheStatusNames() {
+    if (SelectorView.STATUS_NAMES.length) {
+      return;
+    }
+
+    for (const status in CssLogic.STATUS) {
+      const i = CssLogic.STATUS[status];
+      if (i > CssLogic.STATUS.UNMATCHED) {
+        const value = CssComputedView.l10n("rule.status." + status);
+        // Replace normal spaces with non-breaking spaces
+        SelectorView.STATUS_NAMES[i] = value.replace(/ /g, "\u00A0");
+      }
+    }
+  },
+
+  /**
+   * A localized version of cssRule.status
+   */
+  get statusText() {
+    return SelectorView.STATUS_NAMES[this.selectorInfo.status];
+  },
+
+  /**
+   * Get class name for selector depending on status
+   */
+  get statusClass() {
+    return SelectorView.CLASS_NAMES[this.selectorInfo.status - 1];
+  },
+
+  get href() {
+    if (this._href) {
+      return this._href;
+    }
+    const sheet = this.selectorInfo.rule.parentStyleSheet;
+    this._href = sheet ? sheet.href : "#";
+    return this._href;
+  },
+
+  get sourceText() {
+    return this.selectorInfo.sourceText;
+  },
+
+  get value() {
+    return this.selectorInfo.value;
+  },
+
+  get outputFragment() {
+    // Sadly, because this fragment is added to the template by DOM Templater
+    // we lose any events that are attached. This means that URLs will open in a
+    // new window. At some point we should fix this by stopping using the
+    // templater.
+    const outputParser = this.tree._outputParser;
+    const frag = outputParser.parseCssProperty(
+      this.selectorInfo.name,
+      this.selectorInfo.value,
+      {
+        colorSwatchClass: "computed-colorswatch",
+        colorClass: "computed-color",
+        urlClass: "theme-link",
+        fontFamilyClass: "computed-font-family",
+        baseURI: this.selectorInfo.rule.href,
+      }
+    );
+    return frag;
+  },
+
+  /**
+   * Update the text of the source link to reflect whether we're showing
+   * original sources or not.  This is a callback for
+   * SourceMapURLService.subscribe, which see.
+   *
+   * @param {Object | null} originalLocation
+   *        The original position object (url/line/column) or null.
+   */
+  _updateLocation(originalLocation) {
+    if (!this.tree.element) {
+      return;
+    }
+
+    // Update |currentLocation| to be whichever location is being
+    // displayed at the moment.
+    let currentLocation = this.generatedLocation;
+    if (originalLocation) {
+      const { url, line, column } = originalLocation;
+      currentLocation = { href: url, line, column };
+    }
+
+    const selector = '[sourcelocation="' + this.source + '"]';
+    const link = this.tree.element.querySelector(selector);
+    if (link) {
+      const text =
+        CssLogic.shortSource(currentLocation) + ":" + currentLocation.line;
+      link.textContent = text;
+    }
+
+    this.tree.inspector.emit("computed-view-sourcelinks-updated");
+  },
+
+  /**
+   * When a css link is clicked this method is called in order to either:
+   *   1. Open the link in view source (for chrome stylesheets).
+   *   2. Open the link in the style editor.
+   *
+   *   We can only view stylesheets contained in document.styleSheets inside the
+   *   style editor.
+   */
+  openStyleEditor() {
+    const inspector = this.tree.inspector;
+    const rule = this.selectorInfo.rule;
+
+    // The style editor can only display stylesheets coming from content because
+    // chrome stylesheets are not listed in the editor's stylesheet selector.
+    //
+    // If the stylesheet is a content stylesheet we send it to the style
+    // editor else we display it in the view source window.
+    const parentStyleSheet = rule.parentStyleSheet;
+    if (!parentStyleSheet || parentStyleSheet.isSystem) {
+      inspector.toolbox.viewSource(rule.href, rule.line);
+      return;
+    }
+
+    const { sheet, line, column } = this.generatedLocation;
+    if (ToolDefinitions.styleEditor.isToolSupported(inspector.toolbox)) {
+      inspector.toolbox.viewSourceInStyleEditorByResource(sheet, line, column);
+    }
+  },
+
+  /**
+   * Destroy this selector view, removing event listeners
+   */
+  destroy() {
+    if (this._unsubscribeCallback) {
+      this._unsubscribeCallback();
+    }
+  },
+};
+
+function ComputedViewTool(inspector, window) {
+  this.inspector = inspector;
+  this.document = window.document;
+
+  this.computedView = new CssComputedView(this.inspector, this.document);
+
+  this.onDetachedFront = this.onDetachedFront.bind(this);
+  this.onSelected = this.onSelected.bind(this);
+  this.refresh = this.refresh.bind(this);
+  this.onPanelSelected = this.onPanelSelected.bind(this);
+
+  this.inspector.selection.on("detached-front", this.onDetachedFront);
+  this.inspector.selection.on("new-node-front", this.onSelected);
+  this.inspector.selection.on("pseudoclass", this.refresh);
+  this.inspector.sidebar.on("computedview-selected", this.onPanelSelected);
+  this.inspector.styleChangeTracker.on("style-changed", this.refresh);
+
+  this.computedView.selectElement(null);
+
+  this.onSelected();
+}
+
+ComputedViewTool.prototype = {
+  isPanelVisible() {
+    if (!this.computedView) {
+      return false;
+    }
+    return this.computedView.isPanelVisible();
+  },
+
+  onDetachedFront() {
+    this.onSelected(false);
+  },
+
+  async onSelected(selectElement = true) {
+    // Ignore the event if the view has been destroyed, or if it's inactive.
+    // But only if the current selection isn't null. If it's been set to null,
+    // let the update go through as this is needed to empty the view on
+    // navigation.
+    if (!this.computedView) {
+      return;
+    }
+
+    const isInactive =
+      !this.isPanelVisible() && this.inspector.selection.nodeFront;
+    if (isInactive) {
+      return;
+    }
+
+    if (
+      !this.inspector.selection.isConnected() ||
+      !this.inspector.selection.isElementNode()
+    ) {
+      this.computedView.selectElement(null);
+      return;
+    }
+
+    if (selectElement) {
+      const done = this.inspector.updating("computed-view");
+      await this.computedView.selectElement(this.inspector.selection.nodeFront);
+      done();
+    }
+  },
+
+  refresh() {
+    if (this.isPanelVisible()) {
+      this.computedView.refreshPanel();
+    }
+  },
+
+  onPanelSelected() {
+    if (
+      this.inspector.selection.nodeFront === this.computedView._viewedElement
+    ) {
+      this.refresh();
+    } else {
+      this.onSelected();
+    }
+  },
+
+  destroy() {
+    this.inspector.styleChangeTracker.off("style-changed", this.refresh);
+    this.inspector.sidebar.off("computedview-selected", this.refresh);
+    this.inspector.selection.off("pseudoclass", this.refresh);
+    this.inspector.selection.off("new-node-front", this.onSelected);
+    this.inspector.selection.off("detached-front", this.onDetachedFront);
+    this.inspector.sidebar.off("computedview-selected", this.onPanelSelected);
+
+    this.computedView.destroy();
+
+    this.computedView = this.document = this.inspector = null;
+  },
+};
+
+exports.CssComputedView = CssComputedView;
+exports.ComputedViewTool = ComputedViewTool;
+exports.PropertyView = PropertyView;
diff --git a/devtools/client/inspector/computed/moz.build b/devtools/client/inspector/computed/moz.build
new file mode 100644
index 0000000000..4f84b2ebf0
--- /dev/null
+++ b/devtools/client/inspector/computed/moz.build
@@ -0,0 +1,11 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "computed.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/devtools/client/inspector/computed/test/browser.toml b/devtools/client/inspector/computed/test/browser.toml
new file mode 100644
index 0000000000..d4ec4fc993
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser.toml
@@ -0,0 +1,86 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_matched_selectors_imported_1.css",
+  "doc_matched_selectors_imported_2.css",
+  "doc_matched_selectors_imported_3.css",
+  "doc_matched_selectors_imported_4.css",
+  "doc_matched_selectors_imported_5.css",
+  "doc_matched_selectors_imported_6.css",
+  "doc_matched_selectors.html",
+  "doc_media_queries.html",
+  "doc_pseudoelement.html",
+  "doc_sourcemaps.css",
+  "doc_sourcemaps.css.map",
+  "doc_sourcemaps.html",
+  "doc_sourcemaps.scss",
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_computed_browser-styles.js"]
+
+["browser_computed_custom_properties.js"]
+
+["browser_computed_cycle_color.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_computed_default_tab.js"]
+
+["browser_computed_getNodeInfo.js"]
+skip-if = [
+  "!debug && os == 'mac'", #Bug 1559033
+  "a11y_checks", # Bugs 1849028 and 1858041 to investigate intermittent a11y_checks results
+]
+
+["browser_computed_keybindings_01.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_computed_keybindings_02.js"]
+
+["browser_computed_matched-selectors-order.js"]
+
+["browser_computed_matched-selectors-toggle.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_computed_matched-selectors_01.js"]
+
+["browser_computed_matched-selectors_02.js"]
+
+["browser_computed_media-queries.js"]
+
+["browser_computed_no-results-placeholder.js"]
+
+["browser_computed_original-source-link.js"]
+skip-if = ["a11y_checks"] # Bug 1858037 to investigate intermittent a11y_checks results (fails on Autoland, passes on Try)
+
+["browser_computed_pseudo-element_01.js"]
+
+["browser_computed_refresh-on-ruleview-change.js"]
+
+["browser_computed_refresh-on-style-change_01.js"]
+
+["browser_computed_search-filter.js"]
+
+["browser_computed_search-filter_clear.js"]
+
+["browser_computed_search-filter_context-menu.js"]
+
+["browser_computed_search-filter_escape-keypress.js"]
+
+["browser_computed_search-filter_noproperties.js"]
+
+["browser_computed_select-and-copy-styles-01.js"]
+
+["browser_computed_select-and-copy-styles-02.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_computed_shadow_host.js"]
+
+["browser_computed_style-editor-link.js"]
+skip-if = ["true"] # bug 1307846
diff --git a/devtools/client/inspector/computed/test/browser_computed_browser-styles.js b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
new file mode 100644
index 0000000000..52477d21ed
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the checkbox to include browser styles works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+
+  info("Checking the default styles");
+  is(
+    isPropertyVisible("color", view),
+    true,
+    "span #matches color property is visible"
+  );
+  is(
+    isPropertyVisible("background-color", view),
+    false,
+    "span #matches background-color property is hidden"
+  );
+
+  info("Toggling the browser styles");
+  const doc = view.styleDocument;
+  const checkbox = doc.querySelector(".includebrowserstyles");
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  checkbox.click();
+  await onRefreshed;
+
+  info("Checking the browser styles");
+  is(isPropertyVisible("color", view), true, "span color property is visible");
+  is(
+    isPropertyVisible("background-color", view),
+    true,
+    "span background-color property is visible"
+  );
+});
+
+function isPropertyVisible(name, view) {
+  info("Checking property visibility for " + name);
+  const propertyViews = view.propertyViews;
+  for (const propView of propertyViews) {
+    if (propView.name == name) {
+      return propView.visible;
+    }
+  }
+  return false;
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_custom_properties.js b/devtools/client/inspector/computed/test/browser_computed_custom_properties.js
new file mode 100644
index 0000000000..230bffa726
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_custom_properties.js
@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that custom properties are displayed in the computed view.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      --global-custom-property: red;
+    }
+
+    h1 {
+      color: var(--global-custom-property);
+    }
+
+    #match-1 {
+      --global-custom-property: blue;
+      --custom-property-1: lime;
+    }
+    #match-2 {
+      --global-custom-property: gold;
+      --custom-property-2: cyan;
+    }
+  </style>
+  <h1 id="match-1">Hello</h1>
+  <h1 id="match-2">World</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+
+  await assertComputedPropertiesForNode(inspector, view, "body", [
+    {
+      name: "--global-custom-property",
+      value: "red",
+    },
+  ]);
+
+  await assertComputedPropertiesForNode(inspector, view, "#match-1", [
+    {
+      name: "color",
+      value: "rgb(0, 0, 255)",
+    },
+    {
+      name: "--custom-property-1",
+      value: "lime",
+    },
+    {
+      name: "--global-custom-property",
+      value: "blue",
+    },
+  ]);
+
+  await assertComputedPropertiesForNode(inspector, view, "#match-2", [
+    {
+      name: "color",
+      value: "rgb(255, 215, 0)",
+    },
+    {
+      name: "--custom-property-2",
+      value: "cyan",
+    },
+    {
+      name: "--global-custom-property",
+      value: "gold",
+    },
+  ]);
+
+  await assertComputedPropertiesForNode(inspector, view, "html", []);
+});
+
+async function assertComputedPropertiesForNode(
+  inspector,
+  view,
+  selector,
+  expected
+) {
+  await selectNode(selector, inspector);
+
+  const computedItems = getComputedViewProperties(view);
+  is(
+    computedItems.length,
+    expected.length,
+    `Computed view has the expected number of items for "${selector}"`
+  );
+  for (let i = 0; i < computedItems.length; i++) {
+    const expectedData = expected[i];
+    const computedEl = computedItems[i];
+    const nameSpan = computedEl.querySelector(".computed-property-name");
+    const valueSpan = computedEl.querySelector(".computed-property-value");
+
+    is(
+      nameSpan.firstChild.textContent,
+      expectedData.name,
+      `computed item #${i} for "${selector}" is the expected one`
+    );
+    is(
+      valueSpan.textContent,
+      expectedData.value,
+      `computed item #${i} for "${selector}" has expected value`
+    );
+  }
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_cycle_color.js b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
new file mode 100644
index 0000000000..465c453adf
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Computed view color cycling test.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #f00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+
+  info("Checking the property itself");
+  let container = getComputedViewPropertyView(view, "color").valueNode;
+  await checkColorCycling(container, view);
+
+  info("Checking matched selectors");
+  container = await getComputedViewMatchedRules(view, "color");
+  await checkColorCycling(container, view);
+});
+
+async function checkColorCycling(container, view) {
+  const valueNode = container.querySelector(".computed-color");
+  const win = view.styleWindow;
+
+  // "Authored" (default; currently the computed value)
+  is(
+    valueNode.textContent,
+    "rgb(255, 0, 0)",
+    "Color displayed as an RGB value."
+  );
+
+  const tests = [
+    {
+      value: "hwb(0 0% 0%)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "red",
+      comment: "Color displayed as a color name.",
+    },
+    {
+      value: "#f00",
+      comment: "Color displayed as a HEX value.",
+    },
+    {
+      value: "hsl(0, 100%, 50%)",
+      comment: "Color displayed as an HSL value.",
+    },
+    {
+      value: "rgb(255, 0, 0)",
+      comment: "Color displayed as an RGB value again.",
+    },
+  ];
+
+  for (const test of tests) {
+    await checkSwatchShiftClick(container, win, test.value, test.comment);
+  }
+}
+
+async function checkSwatchShiftClick(container, win, expectedValue, comment) {
+  const swatch = container.querySelector(".computed-colorswatch");
+  const valueNode = container.querySelector(".computed-color");
+  swatch.scrollIntoView();
+
+  const onUnitChange = once(swatch, "unit-change");
+  EventUtils.synthesizeMouseAtCenter(
+    swatch,
+    {
+      type: "mousedown",
+      shiftKey: true,
+    },
+    win
+  );
+  // we need to have the mouse up event in order to make sure that the platform
+  // lets go of the last container, and is not waiting for something to happen.
+  // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1442153
+  EventUtils.synthesizeMouseAtCenter(swatch, { type: "mouseup" }, win);
+  await onUnitChange;
+  is(valueNode.textContent, expectedValue, comment);
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_default_tab.js b/devtools/client/inspector/computed/test/browser_computed_default_tab.js
new file mode 100644
index 0000000000..1a485a7cc7
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_default_tab.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the computed view is initialized when the computed view is the default tab
+// for the inspector.
+
+const TEST_URI = `
+  <style type="text/css">
+    #matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.activeSidebar", "computedview");
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  is(
+    isPropertyVisible("color", view),
+    true,
+    "span #matches color property is visible"
+  );
+});
+
+function isPropertyVisible(name, view) {
+  info("Checking property visibility for " + name);
+  const propertyViews = view.propertyViews;
+  for (const propView of propertyViews) {
+    if (propView.name == name) {
+      return propView.visible;
+    }
+  }
+  return false;
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
new file mode 100644
index 0000000000..0aa1c85ff2
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -0,0 +1,176 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests various output of the computed-view's getNodeInfo method.
+// This method is used by the HighlightersOverlay and TooltipsOverlay on mouseover to
+// decide which highlighter or tooltip to show when hovering over a value/name/selector
+// if any.
+//
+// For instance, browser_ruleview_selector-highlighter_01.js and
+// browser_ruleview_selector-highlighter_02.js test that the selector
+// highlighter appear when hovering over a selector in the rule-view.
+// Since the code to make this work for the computed-view is 90% the same,
+// there is no need for testing it again here.
+// This test however serves as a unit test for getNodeInfo.
+
+const {
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+      color: white;
+    }
+    div {
+      background: green;
+    }
+    div div {
+      background-color: yellow;
+      background-image: url(chrome://branding/content/icon64.png);
+      color: red;
+    }
+  </style>
+  <div><div id="testElement">Test element</div></div>
+`;
+
+// Each item in this array must have the following properties:
+// - desc {String} will be logged for information
+// - getHoveredNode {Generator Function} received the computed-view instance as
+//   argument and must return the node to be tested
+// - assertNodeInfo {Function} should check the validity of the nodeInfo
+//   argument it receives
+const TEST_DATA = [
+  {
+    desc: "Testing a null node",
+    getHoveredNode() {
+      return null;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+  {
+    desc: "Testing a useless node",
+    getHoveredNode(view) {
+      return view.element;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+  {
+    desc: "Testing a property name",
+    getHoveredNode(view) {
+      return getComputedViewProperty(view, "color").nameSpan;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "rgb(255, 0, 0)");
+    },
+  },
+  {
+    desc: "Testing a property value",
+    getHoveredNode(view) {
+      return getComputedViewProperty(view, "color").valueSpan;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "rgb(255, 0, 0)");
+    },
+  },
+  {
+    desc: "Testing an image url",
+    getHoveredNode(view) {
+      const { valueSpan } = getComputedViewProperty(view, "background-image");
+      return valueSpan.querySelector(".theme-link");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "background-image");
+      is(nodeInfo.value.value, 'url("chrome://branding/content/icon64.png")');
+      is(nodeInfo.value.url, "chrome://branding/content/icon64.png");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (bestmatch)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".bestmatch");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "div div");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (matched)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".matched");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "div");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (parentmatch)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".parentmatch");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "body");
+    },
+  },
+  {
+    desc: "Testing a matched rule value",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".computed-other-property-value");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "red");
+    },
+  },
+  {
+    desc: "Testing a matched rule stylesheet link",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".rule-link .theme-link");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#testElement", inspector);
+
+  for (const { desc, getHoveredNode, assertNodeInfo } of TEST_DATA) {
+    info(desc);
+    const nodeInfo = view.getNodeInfo(await getHoveredNode(view));
+    assertNodeInfo(nodeInfo);
+  }
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
new file mode 100644
index 0000000000..5a6681f139
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests computed view key bindings.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode(".matches", inspector);
+
+  const propView = getFirstVisiblePropertyView(view);
+  const rulesTable = propView.matchedSelectorsContainer;
+  const matchedExpander = propView.element;
+
+  info("Focusing the property");
+  matchedExpander.scrollIntoView();
+  const onMatchedExpanderFocus = once(matchedExpander, "focus", true);
+  EventUtils.synthesizeMouseAtCenter(matchedExpander, {}, view.styleWindow);
+  await onMatchedExpanderFocus;
+
+  await checkToggleKeyBinding(
+    view.styleWindow,
+    "VK_SPACE",
+    rulesTable,
+    inspector
+  );
+  await checkToggleKeyBinding(
+    view.styleWindow,
+    "VK_RETURN",
+    rulesTable,
+    inspector
+  );
+  await checkHelpLinkKeybinding(view);
+});
+
+function getFirstVisiblePropertyView(view) {
+  let propView = null;
+  view.propertyViews.some(p => {
+    if (p.visible) {
+      propView = p;
+      return true;
+    }
+    return false;
+  });
+
+  return propView;
+}
+
+async function checkToggleKeyBinding(win, key, rulesTable, inspector) {
+  info(
+    "Pressing " +
+      key +
+      " key a couple of times to check that the " +
+      "property gets expanded/collapsed"
+  );
+
+  const onExpand = inspector.once("computed-view-property-expanded");
+  const onCollapse = inspector.once("computed-view-property-collapsed");
+
+  info("Expanding the property");
+  EventUtils.synthesizeKey(key, {}, win);
+  await onExpand;
+  isnot(rulesTable.innerHTML, "", "The property has been expanded");
+
+  info("Collapsing the property");
+  EventUtils.synthesizeKey(key, {}, win);
+  await onCollapse;
+  is(rulesTable.innerHTML, "", "The property has been collapsed");
+}
+
+function checkHelpLinkKeybinding(view) {
+  info('Check that MDN link is opened on "F1"');
+  const propView = getFirstVisiblePropertyView(view);
+  return new Promise(resolve => {
+    propView.mdnLinkClick = function (event) {
+      ok(true, "Pressing F1 opened the MDN link");
+      resolve();
+    };
+    EventUtils.synthesizeKey("VK_F1", {}, view.styleWindow);
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
new file mode 100644
index 0000000000..46434f0660
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the computed-view keyboard navigation.
+
+const TEST_URI = `
+  <style type="text/css">
+    span {
+      font-variant: small-caps;
+      color: #000000;
+    }
+    .nomatches {
+      color: #ff0000;
+    }
+  </style>
+  <div id="first" style="margin: 10em;
+    font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+    <h1>Some header text</h1>
+    <p id="salutation" style="font-size: 12pt">hi.</p>
+    <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+    solely to provide some things to <span style="color: yellow">
+    highlight</span> and <span style="font-weight: bold">count</span>
+    style list-items in the box at right. If you are reading this,
+    you should go do something else instead. Maybe read a book. Or better
+    yet, write some test-cases for another bit of code.
+    <span style="font-style: italic">some text</span></p>
+    <p id="closing">more text</p>
+    <p>even more text</p>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("span", inspector);
+
+  info("Selecting the first computed style in the list");
+  const firstStyle = view.styleDocument.querySelector(
+    "#computed-container .computed-property-view"
+  );
+  ok(firstStyle, "First computed style found in panel");
+  firstStyle.focus();
+
+  info("Tab to select the 2nd style and press return");
+  let onExpanded = inspector.once("computed-view-property-expanded");
+  EventUtils.synthesizeKey("KEY_Tab");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onExpanded;
+
+  info("Verify the 2nd style has been expanded");
+  const secondStyleSelectors = view.styleDocument.querySelectorAll(
+    ".computed-property-view .matchedselectors"
+  )[1];
+  ok(!!secondStyleSelectors.childNodes.length, "Matched selectors expanded");
+
+  info("Tab back up and test the same thing, with space");
+  onExpanded = inspector.once("computed-view-property-expanded");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  EventUtils.synthesizeKey(" ");
+  await onExpanded;
+
+  info("Verify the 1st style has been expanded too");
+  const firstStyleSelectors = view.styleDocument.querySelectorAll(
+    ".computed-property-view .matchedselectors"
+  )[0];
+  ok(!!firstStyleSelectors.childNodes.length, "Matched selectors expanded");
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-order.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-order.js
new file mode 100644
index 0000000000..b90e86a295
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-order.js
@@ -0,0 +1,889 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests for the order of matched selector in the computed view.
+const TEST_URI = URL_ROOT + "doc_matched_selectors.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+
+  const checkMatchedSelectors = options =>
+    checkBackgroundColorMatchedSelectors(inspector, view, options);
+
+  info("matching rules with different specificity");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "specificity",
+      class: "mySection",
+    },
+    style: `
+      #specificity.mySection {
+        --spec_highest: var(--winning-color);
+        background-color: var(--spec_highest);
+      }
+      #specificity {
+        background-color: var(--spec_lowest);
+      }`,
+    expectedMatchedSelectors: [
+      // Higher specificity wins
+      { selector: "#specificity.mySection", value: "var(--spec_highest)" },
+      { selector: "#specificity", value: "var(--spec_lowest)" },
+    ],
+  });
+
+  info("matching rules with same specificity");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "order-of-appearance",
+    },
+    style: `
+      #order-of-appearance {
+        background-color: var(--appearance-order_first);
+      }
+      #order-of-appearance {
+        --appearance-order_second: var(--winning-color);
+        background-color: var(--appearance-order_second);
+      }`,
+    expectedMatchedSelectors: [
+      // Last rule in stylesheet wins
+      {
+        selector: "#order-of-appearance",
+        value: "var(--appearance-order_second)",
+      },
+      {
+        selector: "#order-of-appearance",
+        value: "var(--appearance-order_first)",
+      },
+    ],
+  });
+
+  info("matching rules on element with style attribute");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "style-attr",
+      style: "background-color: var(--style-attr_in-attr)",
+    },
+    style: `
+      main {
+        --style-attr_in-attr: var(--winning-color);
+      }
+
+      #style-attr {
+        background-color: var(--style-attr_in-rule);
+      }
+    `,
+    expectedMatchedSelectors: [
+      // style attribute wins
+      { selector: "this.style", value: "var(--style-attr_in-attr)" },
+      { selector: "#style-attr", value: "var(--style-attr_in-rule)" },
+    ],
+  });
+
+  info("matching rules on different layers");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "layers",
+      class: "layers",
+    },
+    style: `
+      @layer second {
+        .layers {
+          --layers_in-second: var(--winning-color);
+          background-color: var(--layers_in-second);
+        }
+      }
+      @layer first {
+        #layers {
+          background-color: var(--layers_in-first);
+        }
+      }
+    `,
+    expectedMatchedSelectors: [
+      // rule in last declared layer wins
+      { selector: ".layers", value: "var(--layers_in-second)" },
+      { selector: "#layers", value: "var(--layers_in-first)" },
+    ],
+  });
+
+  info("matching rules on same layer, with same specificity");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "same-layers-order-of-appearance",
+    },
+    style: `
+      @layer second {
+        #same-layers-order-of-appearance {
+          background-color: var(--same-layers-appearance-order_first);
+        }
+
+        #same-layers-order-of-appearance {
+          --same-layers-appearance-order_second: var(--winning-color);
+          background-color: var(--same-layers-appearance-order_second);
+        }
+      }
+    `,
+    expectedMatchedSelectors: [
+      // last rule in the layer wins
+      {
+        selector: "#same-layers-order-of-appearance",
+        value: "var(--same-layers-appearance-order_second)",
+      },
+      {
+        selector: "#same-layers-order-of-appearance",
+        value: "var(--same-layers-appearance-order_first)",
+      },
+    ],
+  });
+
+  info("matching rules some in layers, some not");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "in-layer-and-no-layer",
+    },
+    style: `
+      @layer second {
+        #in-layer-and-no-layer {
+          background-color: var(--in-layer-and-no-layer_in-second);
+        }
+      }
+
+      @layer first {
+        #in-layer-and-no-layer {
+          background-color: var(--in-layer-and-no-layer_in-first);
+        }
+      }
+
+      #in-layer-and-no-layer {
+        --in-layer-and-no-layer_no-layer: var(--winning-color);
+        background-color: var(--in-layer-and-no-layer_no-layer);
+      }`,
+    expectedMatchedSelectors: [
+      // rule not in layer wins
+      {
+        selector: "#in-layer-and-no-layer",
+        value: "var(--in-layer-and-no-layer_no-layer)",
+      },
+      {
+        selector: "#in-layer-and-no-layer",
+        value: "var(--in-layer-and-no-layer_in-second)",
+      },
+      {
+        selector: "#in-layer-and-no-layer",
+        value: "var(--in-layer-and-no-layer_in-first)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules with different specificity and one property declared with !important"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "important-specificity",
+      class: "myImportantSection",
+    },
+    style: `
+      #important-specificity.myImportantSection {
+        background-color: var(--important-spec_highest);
+      }
+      #important-specificity {
+        --important-spec_lowest-important: var(--winning-color);
+        background-color: var(--important-spec_lowest-important) !important;
+      }`,
+    expectedMatchedSelectors: [
+      // lesser specificity, but value was set with !important
+      {
+        selector: "#important-specificity",
+        value: "var(--important-spec_lowest-important)",
+      },
+      {
+        selector: "#important-specificity.myImportantSection",
+        value: "var(--important-spec_highest)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules with different specificity and all properties declared with !important"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-specificity",
+      class: "myAllImportantSection",
+    },
+    style: `
+      #all-important-specificity.myAllImportantSection {
+        --all-important-spec_highest-important: var(--winning-color);
+        background-color: var(--all-important-spec_highest-important) !important;
+      }
+      #all-important-specificity {
+        background-color: var(--all-important-spec_lowest-important) !important;
+      }`,
+    expectedMatchedSelectors: [
+      // all values !important, so highest specificity rule wins
+      {
+        selector: "#all-important-specificity.myAllImportantSection",
+        value: "var(--all-important-spec_highest-important)",
+      },
+      {
+        selector: "#all-important-specificity",
+        value: "var(--all-important-spec_lowest-important)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules with same specificity and one property declared with !important"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "important-order-of-appearance",
+    },
+    style: `
+      #important-order-of-appearance {
+        --important-appearance-order_first-important: var(--winning-color);
+        background-color: var(--important-appearance-order_first-important) !important;
+      }
+      #important-order-of-appearance {
+        background-color: var(--important-appearance-order_second);
+      }`,
+    expectedMatchedSelectors: [
+      // same specificity, but this value was set with !important
+      {
+        selector: "#important-order-of-appearance",
+        value: "var(--important-appearance-order_first-important)",
+      },
+      {
+        selector: "#important-order-of-appearance",
+        value: "var(--important-appearance-order_second)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules with same specificity and all properties declared with !important"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-order-of-appearance",
+    },
+    style: `
+      #all-important-order-of-appearance {
+        background-color: var(--all-important-appearance-order_first-important) !important;
+      }
+      #all-important-order-of-appearance {
+        --all-important-appearance-order_second-important: var(--winning-color);
+        background-color: var(--all-important-appearance-order_second-important) !important;
+      }`,
+    expectedMatchedSelectors: [
+      // all values !important, so latest rule in stylesheet wins
+      {
+        selector: "#all-important-order-of-appearance",
+        value: "var(--all-important-appearance-order_second-important)",
+      },
+      {
+        selector: "#all-important-order-of-appearance",
+        value: "var(--all-important-appearance-order_first-important)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules with important property on element with style attribute"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "important-style-attr",
+      style: "background-color: var(--important-style-attr_in-attr);",
+    },
+    style: `
+      #important-style-attr {
+        --important-style-attr_in-rule-important: var(--winning-color);
+        background-color: var(--important-style-attr_in-rule-important) !important;
+      }`,
+    expectedMatchedSelectors: [
+      // important property wins over style attribute
+      {
+        selector: "#important-style-attr",
+        value: "var(--important-style-attr_in-rule-important)",
+      },
+      { selector: "this.style", value: "var(--important-style-attr_in-attr)" },
+    ],
+  });
+
+  info(
+    "matching rules with important property on element with style attribute and important value"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-style-attr",
+      style:
+        "background-color: var(--all-important-style-attr_in-attr-important) !important;",
+    },
+    style: `
+      main {
+        --all-important-style-attr_in-attr-important: var(--winning-color);
+      }
+      #all-important-style-attr {
+        background-color: var(--all-important-style-attr_in-rule-important);
+      }`,
+    expectedMatchedSelectors: [
+      // both values are important, so style attribute wins
+      {
+        selector: "this.style",
+        value: "var(--all-important-style-attr_in-attr-important)",
+      },
+      {
+        selector: "#all-important-style-attr",
+        value: "var(--all-important-style-attr_in-rule-important)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules on different layer, with same specificity and important values"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "important-layers",
+    },
+    style: `
+      @layer second {
+        #important-layers {
+          background-color: var(--important-layers_in-second);
+        }
+      }
+      @layer first {
+        #important-layers {
+          --important-layers_in-first-important: var(--winning-color);
+          background-color: var(--important-layers_in-first-important) !important;
+        }
+      }`,
+    expectedMatchedSelectors: [
+      // rule with important property wins
+      {
+        selector: "#important-layers",
+        value: "var(--important-layers_in-first-important)",
+      },
+      {
+        selector: "#important-layers",
+        value: "var(--important-layers_in-second)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules on different layer, with same specificity and all important values"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-layers",
+    },
+    style: `
+      @layer second {
+        #all-important-layers {
+          background-color: var(--all-important-layers_in-second-important) !important;
+        }
+      }
+      @layer first {
+        #all-important-layers {
+          --all-important-layers_in-first-important: var(--winning-color);
+          background-color: var(--all-important-layers_in-first-important) !important;
+        }
+      }`,
+    expectedMatchedSelectors: [
+      // all properties are important, rule from first declared layer wins
+      {
+        selector: "#all-important-layers",
+        value: "var(--all-important-layers_in-first-important)",
+      },
+      {
+        selector: "#all-important-layers",
+        value: "var(--all-important-layers_in-second-important)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules on same layer, with same specificity and important values"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "important-same-layers-order-of-appearance",
+    },
+    style: `
+      @layer second {
+        #important-same-layers-order-of-appearance {
+          --important-same-layers-appearance-order_first-important: var(--winning-color);
+          background-color: var(--important-same-layers-appearance-order_first-important) !important;
+        }
+
+        #important-same-layers-order-of-appearance {
+          background-color: var(--important-same-layers-appearance-order_second);
+        }
+      }`,
+    expectedMatchedSelectors: [
+      // rule with important property wins
+      {
+        selector: "#important-same-layers-order-of-appearance",
+        value: "var(--important-same-layers-appearance-order_first-important)",
+      },
+      {
+        selector: "#important-same-layers-order-of-appearance",
+        value: "var(--important-same-layers-appearance-order_second)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules on same layer, with same specificity and all important values"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-same-layers-order-of-appearance",
+    },
+    style: `
+      @layer second {
+        #all-important-same-layers-order-of-appearance {
+          background-color: var(--all-important-same-layers-appearance-order_first-important) !important;
+        }
+
+        #all-important-same-layers-order-of-appearance {
+          --all-important-same-layers-appearance-order_second-important: var(--winning-color);
+          background-color: var(--all-important-same-layers-appearance-order_second-important) !important;
+        }
+      }`,
+    expectedMatchedSelectors: [
+      // last rule with important property wins
+      {
+        selector: "#all-important-same-layers-order-of-appearance",
+        value:
+          "var(--all-important-same-layers-appearance-order_second-important)",
+      },
+      {
+        selector: "#all-important-same-layers-order-of-appearance",
+        value:
+          "var(--all-important-same-layers-appearance-order_first-important)",
+      },
+    ],
+  });
+
+  info("matching rules ,some in layers, some not, important values in layers");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "important-in-layer-and-no-layer",
+    },
+    style: `
+      @layer second {
+        #important-in-layer-and-no-layer {
+          background-color: var(--important-in-layer-and-no-layer_in-second);
+        }
+      }
+
+      @layer first {
+        #important-in-layer-and-no-layer {
+          --important-in-layer-and-no-layer_in-first-important: var(--winning-color);
+          background-color: var(--important-in-layer-and-no-layer_in-first-important) !important;
+        }
+      }
+
+      #important-in-layer-and-no-layer {
+        background-color: var(--important-in-layer-and-no-layer_no-layer);
+      }`,
+    expectedMatchedSelectors: [
+      // rule with important property wins
+      {
+        selector: "#important-in-layer-and-no-layer",
+        value: "var(--important-in-layer-and-no-layer_in-first-important)",
+      },
+      // then rule not in layer
+      {
+        selector: "#important-in-layer-and-no-layer",
+        value: "var(--important-in-layer-and-no-layer_no-layer)",
+      },
+      {
+        selector: "#important-in-layer-and-no-layer",
+        value: "var(--important-in-layer-and-no-layer_in-second)",
+      },
+    ],
+  });
+
+  info("matching rules ,some in layers, some not, all important values");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-in-layer-and-no-layer",
+    },
+    style: `
+      @layer second {
+        #all-important-in-layer-and-no-layer {
+          background-color: var(--all-important-in-layer-and-no-layer_in-second-important) !important;
+        }
+      }
+
+      @layer first {
+        #all-important-in-layer-and-no-layer {
+          --all-important-in-layer-and-no-layer_in-first-important: var(--winning-color);
+          background-color: var(--all-important-in-layer-and-no-layer_in-first-important) !important;
+        }
+      }
+
+      #all-important-in-layer-and-no-layer {
+        background-color: var(--all-important-in-layer-and-no-layer_no-layer-important) !important;
+      }`,
+    expectedMatchedSelectors: [
+      // important properties in first declared layer wins
+      {
+        selector: "#all-important-in-layer-and-no-layer",
+        value: "var(--all-important-in-layer-and-no-layer_in-first-important)",
+      },
+      // then following important rules in layers
+      {
+        selector: "#all-important-in-layer-and-no-layer",
+        value: "var(--all-important-in-layer-and-no-layer_in-second-important)",
+      },
+      // then important rules not in layers
+      {
+        selector: "#all-important-in-layer-and-no-layer",
+        value: "var(--all-important-in-layer-and-no-layer_no-layer-important)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules ,some in layers, some not, and style attribute all important values"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-in-layer-no-layer-style-attr",
+      style:
+        "background-color: var(--all-important-in-layer-no-layer-style-attr_in-attr-important) !important",
+    },
+    style: `
+      main {
+        --all-important-in-layer-no-layer-style-attr_in-attr-important: var(--winning-color);
+      }
+
+      @layer second {
+        #all-important-in-layer-no-layer-style-attr {
+          background-color: var(--all-important-in-layer-no-layer-style-attr_in-second-important) !important;
+        }
+      }
+
+      @layer first {
+        #all-important-in-layer-no-layer-style-attr {
+          background-color: var(--all-important-in-layer-no-layer-style-attr_in-first-important) !important;
+        }
+      }
+
+      #all-important-in-layer-no-layer-style-attr {
+        background-color: var(--all-important-in-layer-no-layer-style-attr_no-layer-important) !important;
+      }`,
+    expectedMatchedSelectors: [
+      // important properties in style attribute wins
+      {
+        selector: "this.style",
+        value:
+          "var(--all-important-in-layer-no-layer-style-attr_in-attr-important)",
+      },
+      // then important property in first declared layer
+      {
+        selector: "#all-important-in-layer-no-layer-style-attr",
+        value:
+          "var(--all-important-in-layer-no-layer-style-attr_in-first-important)",
+      },
+      // then following important property in layers
+      {
+        selector: "#all-important-in-layer-no-layer-style-attr",
+        value:
+          "var(--all-important-in-layer-no-layer-style-attr_in-second-important)",
+      },
+      // then important property not in layers
+      {
+        selector: "#all-important-in-layer-no-layer-style-attr",
+        value:
+          "var(--all-important-in-layer-no-layer-style-attr_no-layer-important)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules on same layer but different rules and all important values"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-same-layer-different-rule",
+    },
+    style: `
+      @layer first {
+        #all-important-same-layer-different-rule {
+          background-color: var(--all-important-same-layer-different-rule_first-important) !important;
+        }
+      }
+
+      @layer first {
+        #all-important-same-layer-different-rule {
+          --all-important-same-layer-different-rule_second-important: var(--winning-color);
+          background-color: var(--all-important-same-layer-different-rule_second-important) !important;
+        }
+      }`,
+    expectedMatchedSelectors: [
+      // last rule for the layer with important property wins
+      {
+        selector: "#all-important-same-layer-different-rule",
+        value:
+          "var(--all-important-same-layer-different-rule_second-important)",
+      },
+      {
+        selector: "#all-important-same-layer-different-rule",
+        value: "var(--all-important-same-layer-different-rule_first-important)",
+      },
+    ],
+  });
+
+  info(
+    "matching rules on same layer but different nested rules and all important values"
+  );
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-same-nested-layer-different-rule",
+    },
+    style: `
+      @layer first {
+        @layer {
+          @layer second {
+            #all-important-same-nested-layer-different-rule {
+              background-color: var(--all-important-same-nested-layer-different-rule_first-important) !important;
+            }
+          }
+
+          @layer second {
+            #all-important-same-nested-layer-different-rule {
+              --all-important-same-nested-layer-different-rule_second-important: var(--winning-color);
+              background-color: var(--all-important-same-nested-layer-different-rule_second-important) !important;
+            }
+          }
+        }
+      }`,
+    expectedMatchedSelectors: [
+      // last rule for the layer with important property wins
+      {
+        selector: "#all-important-same-nested-layer-different-rule",
+        value:
+          "var(--all-important-same-nested-layer-different-rule_second-important)",
+      },
+      {
+        selector: "#all-important-same-nested-layer-different-rule",
+        value:
+          "var(--all-important-same-nested-layer-different-rule_first-important)",
+      },
+    ],
+  });
+
+  info("matching rules on different nameless layers and all important values");
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-different-nameless-layers",
+    },
+    style: `
+      @layer {
+        @layer first {
+          #all-important-different-nameless-layers {
+            --all-important-different-nameless-layers_first-important: var(--winning-color);
+            background-color: var(--all-important-different-nameless-layers_first-important) !important;
+          }
+        }
+      }
+      @layer {
+        @layer first {
+          #all-important-different-nameless-layers {
+            background-color: var(--all-important-different-nameless-layers_second-important) !important;
+          }
+        }
+      }`,
+    expectedMatchedSelectors: [
+      // rule with important property in first declared layer wins
+      {
+        selector: "#all-important-different-nameless-layers",
+        value: "var(--all-important-different-nameless-layers_first-important)",
+      },
+      {
+        selector: "#all-important-different-nameless-layers",
+        value:
+          "var(--all-important-different-nameless-layers_second-important)",
+      },
+    ],
+  });
+
+  info("matching rules on different imported layers");
+  // no provided style as rules are defined in doc_matched_selectors_imported_*.css
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "imported-layers",
+    },
+    expectedMatchedSelectors: [
+      // rule in last declared layer wins
+      {
+        selector: "#imported-layers",
+        value: "var(--imported-layers_in-anonymous-second)",
+      },
+      {
+        selector: "#imported-layers",
+        value: "var(--imported-layers_in-nested-importedSecond)",
+      },
+      {
+        selector: "#imported-layers",
+        value: "var(--imported-layers_in-anonymous-first)",
+      },
+      {
+        selector: "#imported-layers",
+        value: "var(--imported-layers_in-importedSecond)",
+      },
+      {
+        selector: "#imported-layers",
+        value: "var(--imported-layers_in-importedFirst-second)",
+      },
+      {
+        selector: "#imported-layers",
+        value: "var(--imported-layers_in-importedFirst-first)",
+      },
+    ],
+  });
+
+  info("matching rules on different imported layers all with important values");
+  // no provided style as rules are defined in doc_matched_selectors_imported_*.css
+  await checkMatchedSelectors({
+    elementAttributes: {
+      id: "all-important-imported-layers",
+    },
+    expectedMatchedSelectors: [
+      // last important property in first declared layer wins
+      {
+        selector: "#all-important-imported-layers",
+        value:
+          "var(--all-important-imported-layers_in-importedFirst-second-important)",
+      },
+      // then earlier important property for first declared layer
+      {
+        selector: "#all-important-imported-layers",
+        value:
+          "var(--all-important-imported-layers_in-importedFirst-first-important)",
+      },
+      {
+        selector: "#all-important-imported-layers",
+        value:
+          "var(--all-important-imported-layers_in-importedSecond-important)",
+      },
+      {
+        selector: "#all-important-imported-layers",
+        value:
+          "var(--all-important-imported-layers_in-anonymous-first-important)",
+      },
+      {
+        selector: "#all-important-imported-layers",
+        value:
+          "var(--all-important-imported-layers_in-nested-importedSecond-important)",
+      },
+      {
+        selector: "#all-important-imported-layers",
+        value:
+          "var(--all-important-imported-layers_in-anonymous-second-important)",
+      },
+    ],
+  });
+});
+
+async function checkBackgroundColorMatchedSelectors(
+  inspector,
+  view,
+  { elementAttributes, style, expectedMatchedSelectors }
+) {
+  const elementId = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [elementAttributes, style],
+    (attr, _style) => {
+      const sectionEl = content.document.createElement("section");
+      for (const [name, value] of Object.entries(attr)) {
+        sectionEl.setAttribute(name, value);
+      }
+
+      if (_style) {
+        const styleEl = content.document.createElement("style");
+        styleEl.innerText = _style;
+        styleEl.setAttribute("id", `style-${sectionEl.id}`);
+        content.document.head.append(styleEl);
+      }
+      content.document.querySelector("main").append(sectionEl);
+
+      return sectionEl.id;
+    }
+  );
+  const selector = `#${elementId}`;
+  await selectNode(selector, inspector);
+
+  const bgColorComputedValue = await getComputedStyleProperty(
+    selector,
+    null,
+    "background-color"
+  );
+  is(
+    bgColorComputedValue,
+    "rgb(0, 0, 255)",
+    `The created element does have a "blue" background-color`
+  );
+
+  const propertyView = getPropertyView(view, "background-color");
+  ok(propertyView, "found PropertyView for background-color");
+  const valueNode = propertyView.valueNode.querySelector(".computed-color");
+  is(
+    valueNode.textContent,
+    "rgb(0, 0, 255)",
+    `The displayed computed value is the expected "blue"`
+  );
+
+  is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors is true");
+
+  info("Expanding the matched selectors");
+  propertyView.matchedExpanded = true;
+  await propertyView.refreshMatchedSelectors();
+
+  const selectorsEl =
+    propertyView.matchedSelectorsContainer.querySelectorAll(".rule-text");
+  is(
+    selectorsEl.length,
+    expectedMatchedSelectors.length,
+    "Expected number of selectors are displayed"
+  );
+
+  selectorsEl.forEach((selectorEl, index) => {
+    is(
+      selectorEl.querySelector(".fix-get-selection").innerText,
+      expectedMatchedSelectors[index].selector,
+      `Selector #${index} is the expected one`
+    );
+    is(
+      selectorEl.querySelector(".computed-other-property-value").innerText,
+      expectedMatchedSelectors[index].value,
+      `Selector #${index} has the expected background color`
+    );
+    const classToMatch = index === 0 ? "bestmatch" : "matched";
+    ok(
+      selectorEl.classList.contains(classToMatch),
+      `selector element has expected "${classToMatch}" class`
+    );
+  });
+
+  // cleanup
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [elementId], id => {
+    // Remove added element and stylesheet
+    content.document.getElementById(id).remove();
+    // Some test cases don't insert a style element
+    content.document.getElementById(`style-${id}`)?.remove();
+  });
+}
+
+function getPropertyView(computedView, name) {
+  return computedView.propertyViews.find(view => view.name === name);
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
new file mode 100644
index 0000000000..2de29c2607
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
@@ -0,0 +1,125 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view properties can be expanded and collapsed with
+// either the twisty or by dbl-clicking on the container.
+
+const TEST_URI = `
+  <style type="text/css"> ,
+    html { color: #000000; font-size: 15pt; }
+    h1 { color: red; }
+  </style>
+  <h1>Some header text</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("h1", inspector);
+
+  await testExpandOnTwistyClick(view, inspector);
+  await testCollapseOnTwistyClick(view, inspector);
+  await testExpandOnDblClick(view, inspector);
+  await testCollapseOnDblClick(view, inspector);
+});
+
+async function testExpandOnTwistyClick({ styleDocument }, inspector) {
+  info("Testing that a property expands on twisty click");
+
+  info("Getting twisty element");
+  const twisty = styleDocument.querySelector(".computed-expandable");
+  ok(twisty, "Twisty found");
+
+  const onExpand = inspector.once("computed-view-property-expanded");
+  info("Clicking on the twisty element");
+  twisty.click();
+
+  await onExpand;
+
+  // Expanded means the matchedselectors div is not empty
+  const matchedSelectorsEl = twisty
+    .closest(".computed-property-view")
+    .querySelector(".matchedselectors");
+  ok(
+    !!matchedSelectorsEl.childNodes.length,
+    "Matched selectors are expanded on twisty click"
+  );
+}
+
+async function testCollapseOnTwistyClick({ styleDocument }, inspector) {
+  info("Testing that a property collapses on twisty click");
+
+  info("Getting twisty element");
+  const twisty = styleDocument.querySelector(".computed-expandable");
+  ok(twisty, "Twisty found");
+
+  const onCollapse = inspector.once("computed-view-property-collapsed");
+  info("Clicking on the twisty element");
+  twisty.click();
+
+  await onCollapse;
+
+  // Collapsed means the matchedselectors div is empty
+  const matchedSelectorsEl = twisty
+    .closest(".computed-property-view")
+    .querySelector(".matchedselectors");
+  is(
+    matchedSelectorsEl.childNodes.length,
+    0,
+    "Matched selectors are collapsed on twisty click"
+  );
+}
+
+async function testExpandOnDblClick({ styleDocument, styleWindow }, inspector) {
+  info("Testing that a property expands on container dbl-click");
+
+  info("Getting computed property container");
+  const container = styleDocument.querySelector(
+    "#computed-container .computed-property-view"
+  );
+  ok(container, "Container found");
+
+  container.scrollIntoView();
+
+  const onExpand = inspector.once("computed-view-property-expanded");
+  info("Dbl-clicking on the container");
+  EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow);
+
+  await onExpand;
+
+  // Expanded means the matchedselectors div is not empty
+  const matchedSelectorsEl = container.querySelector(".matchedselectors");
+  ok(
+    !!matchedSelectorsEl.childNodes.length,
+    "Matched selectors are expanded on dblclick"
+  );
+}
+
+async function testCollapseOnDblClick(
+  { styleDocument, styleWindow },
+  inspector
+) {
+  info("Testing that a property collapses on container dbl-click");
+
+  info("Getting computed property container");
+  const container = styleDocument.querySelector(
+    "#computed-container .computed-property-view"
+  );
+  ok(container, "Container found");
+
+  const onCollapse = inspector.once("computed-view-property-collapsed");
+  info("Dbl-clicking on the container");
+  EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow);
+
+  await onCollapse;
+
+  // Collapsed means the matchedselectors div is empty
+  const matchedSelectorsEl = container.querySelector(".matchedselectors");
+  is(
+    matchedSelectorsEl.childNodes.length,
+    0,
+    "Matched selectors are collapsed on dblclick"
+  );
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
new file mode 100644
index 0000000000..bb90dfb4ea
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Checking selector counts, matched rules and titles in the computed-view.
+
+const {
+  PropertyView,
+} = require("resource://devtools/client/inspector/computed/computed.js");
+const TEST_URI = URL_ROOT + "doc_matched_selectors.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+
+  await selectNode("#test", inspector);
+  await testMatchedSelectors(view, inspector);
+});
+
+async function testMatchedSelectors(view, inspector) {
+  info("checking selector counts, matched rules and titles");
+
+  const nodeFront = await getNodeFront("#test", inspector);
+  is(
+    nodeFront,
+    view._viewedElement,
+    "style inspector node matches the selected node"
+  );
+
+  const propertyView = new PropertyView(view, "color");
+  propertyView.createListItemElement();
+  propertyView.matchedExpanded = true;
+
+  await propertyView.refreshMatchedSelectors();
+
+  const numMatchedSelectors = propertyView.matchedSelectors.length;
+  is(
+    numMatchedSelectors,
+    7,
+    "CssLogic returns the correct number of matched selectors for div"
+  );
+  is(
+    propertyView.hasMatchedSelectors,
+    true,
+    "hasMatchedSelectors returns true"
+  );
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
new file mode 100644
index 0000000000..b0327a30cf
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests for matched selector texts in the computed view.
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
+  const { inspector, view } = await openComputedView();
+  await selectNode("div", inspector);
+
+  info("Checking the color property view");
+  const propertyView = getPropertyView(view, "color");
+  ok(propertyView, "found PropertyView for color");
+  is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors is true");
+
+  info("Expanding the matched selectors");
+  propertyView.matchedExpanded = true;
+  await propertyView.refreshMatchedSelectors();
+
+  const span =
+    propertyView.matchedSelectorsContainer.querySelector("span.rule-text");
+  ok(span, "Found the first table row");
+
+  const selector = propertyView.matchedSelectorViews[0];
+  ok(selector, "Found the first matched selector view");
+});
+
+function getPropertyView(computedView, name) {
+  let propertyView = null;
+  computedView.propertyViews.some(function (view) {
+    if (view.name == name) {
+      propertyView = view;
+      return true;
+    }
+    return false;
+  });
+  return propertyView;
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_media-queries.js b/devtools/client/inspector/computed/test/browser_computed_media-queries.js
new file mode 100644
index 0000000000..9f09fc7e3c
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_media-queries.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that we correctly display appropriate media query titles in the
+// property view.
+
+const TEST_URI = URL_ROOT + "doc_media_queries.html";
+
+var {
+  PropertyView,
+} = require("resource://devtools/client/inspector/computed/computed.js");
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+  await selectNode("div", inspector);
+  await checkPropertyView(view);
+});
+
+function checkPropertyView(view) {
+  const propertyView = new PropertyView(view, "width");
+  propertyView.createListItemElement();
+  propertyView.matchedExpanded = true;
+
+  return propertyView.refreshMatchedSelectors().then(() => {
+    const numMatchedSelectors = propertyView.matchedSelectors.length;
+
+    is(
+      numMatchedSelectors,
+      2,
+      "Property view has the correct number of matched selectors for div"
+    );
+
+    is(
+      propertyView.hasMatchedSelectors,
+      true,
+      "hasMatchedSelectors returns true"
+    );
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
new file mode 100644
index 0000000000..3e63bfb9b3
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the no results placeholder works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+
+  await enterInvalidFilter(inspector, view);
+  checkNoResultsPlaceholderShown(view);
+
+  await clearFilterText(inspector, view);
+  checkNoResultsPlaceholderHidden(view);
+});
+
+async function enterInvalidFilter(inspector, computedView) {
+  const searchbar = computedView.searchField;
+  const searchTerm = "xxxxx";
+
+  info('setting filter text to "' + searchTerm + '"');
+
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  searchbar.focus();
+  synthesizeKeys(searchTerm, computedView.styleWindow);
+  await onRefreshed;
+}
+
+function checkNoResultsPlaceholderShown(computedView) {
+  info("Checking that the no results placeholder is shown");
+
+  const placeholder = computedView.noResults;
+  const win = computedView.styleWindow;
+  const display = win.getComputedStyle(placeholder).display;
+  is(display, "block", "placeholder is visible");
+}
+
+async function clearFilterText(inspector, computedView) {
+  info("Clearing the filter text");
+
+  const searchbar = computedView.searchField;
+
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  searchbar.focus();
+  searchbar.value = "";
+  EventUtils.synthesizeKey("c", {}, computedView.styleWindow);
+  await onRefreshed;
+}
+
+function checkNoResultsPlaceholderHidden(computedView) {
+  info("Checking that the no results placeholder is hidden");
+
+  const placeholder = computedView.noResults;
+  const win = computedView.styleWindow;
+  const display = win.getComputedStyle(placeholder).display;
+  is(display, "none", "placeholder is hidden");
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_original-source-link.js b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
new file mode 100644
index 0000000000..771d349b3b
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view shows the original source link when source maps
+// are enabled.
+
+const TESTCASE_URI = URL_ROOT_SSL + "doc_sourcemaps.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const SCSS_LOC = "doc_sourcemaps.scss:4";
+const CSS_LOC = "doc_sourcemaps.css:1";
+
+add_task(async function () {
+  info("Turning the pref " + PREF + " on");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { toolbox, inspector, view } = await openComputedView();
+  let onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
+  await selectNode("div", inspector);
+
+  info("Expanding the first property");
+  await expandComputedViewPropertyByIndex(view, 0);
+
+  info("Verifying the link text");
+  await onLinksUpdated;
+  verifyLinkText(view, SCSS_LOC);
+
+  info("Toggling the pref");
+  onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
+  Services.prefs.setBoolPref(PREF, false);
+  await onLinksUpdated;
+
+  info("Verifying that the link text has changed after the pref change");
+  await verifyLinkText(view, CSS_LOC);
+
+  info("Toggling the pref again");
+  onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
+  Services.prefs.setBoolPref(PREF, true);
+  await onLinksUpdated;
+
+  info("Testing that clicking on the link works");
+  await testClickingLink(toolbox, view);
+
+  info("Turning the pref " + PREF + " off");
+  Services.prefs.clearUserPref(PREF);
+});
+
+async function testClickingLink(toolbox, view) {
+  const onEditor = waitForStyleEditor(toolbox, "doc_sourcemaps.scss");
+
+  info("Clicking the computedview stylesheet link");
+  const link = getComputedViewLinkByIndex(view, 0);
+  link.scrollIntoView();
+  link.click();
+
+  const editor = await onEditor;
+
+  const { line } = editor.sourceEditor.getCursor();
+  is(line, 3, "cursor is at correct line number in original source");
+}
+
+function verifyLinkText(view, text) {
+  const link = getComputedViewLinkByIndex(view, 0);
+  is(
+    link.textContent,
+    text,
+    "Linked text changed to display the correct location"
+  );
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
new file mode 100644
index 0000000000..e972a0257a
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that pseudoelements are displayed correctly in the rule view.
+
+const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+  await testTopLeft(inspector, view);
+});
+
+async function testTopLeft(inspector, view) {
+  const node = await getNodeFront("#topleft", inspector.markup);
+  await selectNode(node, inspector);
+  const float = getComputedViewPropertyValue(view, "float");
+  is(float, "left", "The computed view shows the correct float");
+
+  const children = await inspector.markup.walker.children(node);
+  is(children.nodes.length, 3, "Element has correct number of children");
+
+  const beforeElement = children.nodes[0];
+  await selectNode(beforeElement, inspector);
+  let top = getComputedViewPropertyValue(view, "top");
+  is(top, "0px", "The computed view shows the correct top");
+  let left = getComputedViewPropertyValue(view, "left");
+  is(left, "0px", "The computed view shows the correct left");
+
+  const afterElement = children.nodes[children.nodes.length - 1];
+  await selectNode(afterElement, inspector);
+  top = getComputedViewPropertyValue(view, "top");
+  is(top, "96px", "The computed view shows the correct top");
+  left = getComputedViewPropertyValue(view, "left");
+  is(left, "96px", "The computed view shows the correct left");
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js b/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js
new file mode 100644
index 0000000000..12b7901970
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view refreshes when the rule view is updated in 3 pane mode.
+
+const TEST_URI = "<div id='target' style='color: rgb(255, 0, 0);'>test</div>";
+
+add_task(async function () {
+  info(
+    "Check whether the color as well in computed view is updated " +
+      "when the rule in rule view is changed in case of 3 pane mode"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#target", inspector);
+
+  is(
+    getComputedViewPropertyValue(view, "color"),
+    "rgb(255, 0, 0)",
+    "The computed view shows the right color"
+  );
+
+  info("Change the value in the ruleview");
+  const ruleView = inspector.getPanel("ruleview").view;
+  const editor = await getValueEditor(ruleView);
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  const onComputedViewRefreshed = inspector.once("computed-view-refreshed");
+  editor.input.value = "rgb(0, 255, 0)";
+  EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
+  await Promise.all([onRuleViewChanged, onComputedViewRefreshed]);
+
+  info("Check the value in the computed view");
+  is(
+    getComputedViewPropertyValue(view, "color"),
+    "rgb(0, 255, 0)",
+    "The computed value is updated when the rule in ruleview is changed"
+  );
+});
+
+add_task(async function () {
+  info(
+    "Check that the computed view is not updated " +
+      "if the rule view is changed in 2 pane mode."
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openComputedView();
+  await selectNode("#target", inspector);
+
+  info("Select the rule view");
+  const ruleView = inspector.getPanel("ruleview").view;
+  const onRuleViewReady = ruleView.once("ruleview-refreshed");
+  const onSidebarSelect = inspector.sidebar.once("select");
+  inspector.sidebar.select("ruleview");
+  await Promise.all([onSidebarSelect, onRuleViewReady]);
+
+  info(
+    "Prepare the counter which counts how many times computed view is refreshed"
+  );
+  let computedViewRefreshCount = 0;
+  const computedViewRefreshListener = () => {
+    computedViewRefreshCount += 1;
+  };
+  inspector.on("computed-view-refreshed", computedViewRefreshListener);
+
+  info("Change the value in the rule view");
+  const editor = await getValueEditor(ruleView);
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  editor.input.value = "rgb(0, 255, 0)";
+  EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
+  await onRuleViewChanged;
+
+  info(
+    "Wait for time enough to check whether the computed value is updated or not"
+  );
+  await wait(1000);
+
+  info("Check the counter");
+  is(computedViewRefreshCount, 0, "The computed view is not updated");
+
+  inspector.off("computed-view-refreshed", computedViewRefreshListener);
+});
+
+async function getValueEditor(ruleView) {
+  const ruleEditor = ruleView.element.children[0]._ruleEditor;
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+  return focusEditableField(ruleView, propEditor.valueSpan);
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js b/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js
new file mode 100644
index 0000000000..190593497b
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view refreshes when the current node has its style
+// changed.
+
+const TEST_URI = "<div id='testdiv' style='font-size:10px;'>Test div!</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#testdiv", inspector);
+
+  let fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "10px", "The computed view shows the right font-size");
+
+  info("Changing the node's style and waiting for the update");
+  const onUpdated = inspector.once("computed-view-refreshed");
+  await setContentPageElementAttribute(
+    "#testdiv",
+    "style",
+    "font-size: 15px; color: red;"
+  );
+  await onUpdated;
+
+  fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "15px", "The computed view shows the updated font-size");
+  const color = getComputedViewPropertyValue(view, "color");
+  is(color, "rgb(255, 0, 0)", "The computed view also shows the color now");
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter.js b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
new file mode 100644
index 0000000000..a22cdb4038
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the search filter works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testToggleDefaultStyles(inspector, view);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testToggleDefaultStyles(inspector, computedView) {
+  info('checking "Browser styles" checkbox');
+  const checkbox = computedView.includeBrowserStylesCheckbox;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  checkbox.click();
+  await onRefreshed;
+}
+
+async function testAddTextInFilter(inspector, computedView) {
+  info('setting filter text to "color"');
+  const searchField = computedView.searchField;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  const win = computedView.styleWindow;
+
+  // First check to make sure that accel + F doesn't focus search if the
+  // container isn't focused
+  inspector.panelWin.focus();
+  EventUtils.synthesizeKey("f", { accelKey: true });
+  isnot(
+    inspector.panelDoc.activeElement,
+    searchField,
+    "Search field isn't focused"
+  );
+
+  computedView.element.focus();
+  EventUtils.synthesizeKey("f", { accelKey: true });
+  is(inspector.panelDoc.activeElement, searchField, "Search field is focused");
+
+  synthesizeKeys("color", win);
+  await onRefreshed;
+
+  info("check that the correct properties are visible");
+
+  const propertyViews = computedView.propertyViews;
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(
+      propView.visible,
+      name.indexOf("color") > -1,
+      "span " + name + " property visibility check"
+    );
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
new file mode 100644
index 0000000000..f77a71cc18
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the search filter clear button works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+      background-color: #00F;
+      border-color: #0F0;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testClearSearchFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, computedView) {
+  info('Setting filter text to "background-color"');
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+
+  searchField.focus();
+  synthesizeKeys("background-color", win);
+  await inspector.once("computed-view-refreshed");
+
+  info("Check that the correct properties are visible");
+
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(
+      propView.visible,
+      name.indexOf("background-color") > -1,
+      "span " + name + " property visibility check"
+    );
+  });
+}
+
+async function testClearSearchFilter(inspector, computedView) {
+  info("Clearing the search filter");
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+  const searchClearButton = computedView.searchClearButton;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await onRefreshed;
+
+  info("Check that the correct properties are visible");
+
+  ok(!searchField.value, "Search filter is cleared");
+  propertyViews.forEach(propView => {
+    is(
+      propView.visible,
+      propView.hasMatchedSelectors,
+      "span " + propView.name + " property visibility check"
+    );
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
new file mode 100644
index 0000000000..0069d644c7
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests computed view search filter context menu works properly.
+
+const TEST_INPUT = "h1";
+
+const TEST_URI = "<h1>test filter context menu</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openComputedView();
+  await selectNode("h1", inspector);
+
+  const searchField = view.searchField;
+
+  info("Opening context menu");
+
+  emptyClipboard();
+
+  const onFocus = once(searchField, "focus");
+  searchField.focus();
+  await onFocus;
+
+  let onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  let searchContextMenu = toolbox.getTextBoxContextMenu();
+  ok(
+    searchContextMenu,
+    "The search filter context menu is loaded in the computed view"
+  );
+
+  let cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  let cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  let cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  let cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  let cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  let cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
+  is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+
+  is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
+  is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
+  if (isWindows()) {
+    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
+    is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
+  }
+
+  info("Closing context menu");
+  let onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+
+  info("Copy text in search field using the context menu");
+  searchField.setUserInput(TEST_INPUT);
+  searchField.select();
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  onContextMenuClose = toolbox.once("menu-close");
+  await waitForClipboardPromise(
+    () => searchContextMenu.activateItem(cmdCopy),
+    TEST_INPUT
+  );
+  await onContextMenuClose;
+
+  info("Reopen context menu and check command properties");
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+
+  onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
new file mode 100644
index 0000000000..59c71d01fe
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Avoid test timeouts on Linux debug builds where the test takes just a bit too long to
+// run (see bug 1258081).
+requestLongerTimeout(2);
+
+// Tests that search filter escape keypress will clear the search field.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testEscapeKeypress(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, computedView) {
+  info('Setting filter text to "background-color"');
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+  const checkbox = computedView.includeBrowserStylesCheckbox;
+
+  info("Include browser styles");
+  checkbox.click();
+  await inspector.once("computed-view-refreshed");
+
+  searchField.focus();
+  synthesizeKeys("background-color", win);
+  await inspector.once("computed-view-refreshed");
+
+  info("Check that the correct properties are visible");
+
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(
+      propView.visible,
+      name.indexOf("background-color") > -1,
+      "span " + name + " property visibility check"
+    );
+  });
+}
+
+async function testEscapeKeypress(inspector, computedView) {
+  info("Pressing the escape key on search filter");
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, win);
+  await onRefreshed;
+
+  info("Check that the correct properties are visible");
+
+  ok(!searchField.value, "Search filter is cleared");
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(propView.visible, true, "span " + name + " property is visible");
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js
new file mode 100644
index 0000000000..b24722e237
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the "no-results" message is displayed when selecting an invalid element or
+// when all properties have been filtered out.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+      background-color: #00F;
+      border-color: #0F0;
+    }
+  </style>
+  <div>
+    <!-- comment node -->
+    <span id="matches" class="matches">Some styled text</span>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  const propertyViews = view.propertyViews;
+
+  info("Select the #matches node");
+  const matchesNode = await getNodeFront("#matches", inspector);
+  let onRefresh = inspector.once("computed-view-refreshed");
+  await selectNode(matchesNode, inspector);
+  await onRefresh;
+
+  ok(
+    !!propertyViews.filter(p => p.visible).length,
+    "CSS properties are displayed"
+  );
+  ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
+
+  info("Select a comment node");
+  const commentNode = await inspector.walker.previousSibling(matchesNode);
+  await selectNode(commentNode, inspector);
+
+  is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
+  ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
+
+  info("Select the #matches node again");
+  onRefresh = inspector.once("computed-view-refreshed");
+  await selectNode(matchesNode, inspector);
+  await onRefresh;
+
+  ok(
+    !!propertyViews.filter(p => p.visible).length,
+    "CSS properties are displayed"
+  );
+  ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
+
+  info(
+    "Filter by 'will-not-match' and check the no-results message is displayed"
+  );
+  const searchField = view.searchField;
+  searchField.focus();
+  synthesizeKeys("will-not-match", view.styleWindow);
+  await inspector.once("computed-view-refreshed");
+
+  is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
+  ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
new file mode 100644
index 0000000000..4c75d2885e
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that properties can be selected and copied from the computed view.
+
+const TEST_URI = `
+  <style type="text/css">
+    span {
+      font-variant-caps: small-caps;
+      color: #000000;
+    }
+    .nomatches {
+      color: #ff0000;
+    }
+  </style>
+  <div id="first" style="margin: 10em;
+    font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+    <h1>Some header text</h1>
+    <p id="salutation" style="font-size: 12pt">hi.</p>
+    <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+    solely to provide some things to <span style="color: yellow">
+    highlight</span> and <span style="font-weight: bold">count</span>
+    style list-items in the box at right. If you are reading this,
+    you should go do something else instead. Maybe read a book. Or better
+    yet, write some test-cases for another bit of code.
+    <span style="font-style: italic">some text</span></p>
+    <p id="closing">more text</p>
+    <p>even more text</p>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("span", inspector);
+
+  await testCopySome(view);
+  await testCopyAll(view);
+});
+
+async function testCopySome(view) {
+  const expectedPattern =
+    "font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "font-size: 16px;[\\r\\n]+" +
+    "font-variant-caps: small-caps;[\\r\\n]*";
+
+  await copySomeTextAndCheckClipboard(
+    view,
+    {
+      start: { prop: 1, offset: 0 },
+      end: { prop: 3, offset: 3 },
+    },
+    expectedPattern
+  );
+}
+
+async function testCopyAll(view) {
+  const expectedPattern =
+    "color: rgb\\(255, 255, 0\\);[\\r\\n]+" +
+    "font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "font-size: 16px;[\\r\\n]+" +
+    "font-variant-caps: small-caps;[\\r\\n]*";
+
+  await copyAllAndCheckClipboard(view, expectedPattern);
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js
new file mode 100644
index 0000000000..87fe1d9629
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that properties can be selected and copied from the computed view.
+
+const TEST_URI = `<div style="text-align:left;width:25px;">Hello world</div>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("div", inspector);
+
+  let expectedPattern = "text-align: left;[\\r\\n]+" + "width: 25px;[\\r\\n]*";
+  await copyAllAndCheckClipboard(view, expectedPattern);
+
+  info("Testing expand then select all copy");
+
+  expectedPattern =
+    "text-align: left;[\\r\\n]+" +
+    "element[\\r\\n]+" +
+    "Best Match this.style[\\r\\n]+" +
+    "left[\\r\\n]+" +
+    "width: 25px;[\\r\\n]+" +
+    "element[\\r\\n]+" +
+    "Best Match this.style[\\r\\n]+" +
+    "25px[\\r\\n]*";
+
+  info("Expanding computed view properties");
+  await expandComputedViewPropertyByIndex(view, 0);
+  await expandComputedViewPropertyByIndex(view, 1);
+
+  await copyAllAndCheckClipboard(view, expectedPattern);
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_shadow_host.js b/devtools/client/inspector/computed/test/browser_computed_shadow_host.js
new file mode 100644
index 0000000000..19562eb1ed
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_shadow_host.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  PropertyView,
+} = require("resource://devtools/client/inspector/computed/computed.js");
+
+// Test matched selectors for a :host selector in the computed view.
+
+const SHADOW_DOM = `<style>
+  :host {
+    color: red;
+  }
+
+  .test-span {
+    color: blue;
+  }
+</style>
+<span class="test-span">test</span>`;
+
+const TEST_PAGE = `
+  <div id="host"></div>
+  <script>
+    const div = document.querySelector("div");
+    div.attachShadow({ mode: "open" }).innerHTML = \`${SHADOW_DOM}\`;
+  </script>`;
+
+const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
+  TEST_PAGE
+)}`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+
+  {
+    await selectNode("#host", inspector);
+    const propertyView = await getPropertyViewWithSelectors(view, "color");
+    const selectors = propertyView.matchedSelectors.map(s => s.selector);
+    Assert.deepEqual(
+      selectors,
+      [":host", ":root"],
+      "host has the expected selectors for color"
+    );
+  }
+
+  {
+    const nodeFront = await getNodeFrontInShadowDom(
+      ".test-span",
+      "#host",
+      inspector
+    );
+    await selectNode(nodeFront, inspector);
+    const propertyView = await getPropertyViewWithSelectors(view, "color");
+    const selectors = propertyView.matchedSelectors.map(s => s.selector);
+    Assert.deepEqual(
+      selectors,
+      [".test-span", ":host", ":root"],
+      "shadow host child has the expected selectors for color"
+    );
+  }
+});
+
+async function getPropertyViewWithSelectors(view, property) {
+  const propertyView = new PropertyView(view, property);
+  propertyView.createListItemElement();
+  propertyView.matchedExpanded = true;
+
+  await propertyView.refreshMatchedSelectors();
+
+  return propertyView;
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
new file mode 100644
index 0000000000..832c1658a5
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
@@ -0,0 +1,210 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the links from the computed view to the style editor.
+
+const STYLESHEET_URL =
+  "data:text/css," + encodeURIComponent(".highlight {color: blue}");
+
+const DOCUMENT_URL =
+  "data:text/html;charset=utf-8," +
+  encodeURIComponent(
+    `<html>
+   <head>
+   <title>Computed view style editor link test</title>
+   <style type="text/css">
+   html { color: #000000; }
+   span { font-variant: small-caps; color: #000000; }
+   .nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em;
+   font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+   </style>
+   <style>
+   div { color: #f06; }
+   </style>
+   <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}">
+   <script>
+     const sheet = new CSSStyleSheet();
+     sheet.replaceSync(".highlight { color: tomato; }");
+     document.adoptedStyleSheets.push(sheet);
+   </script>
+   </head>
+   <body>
+   <h1>Some header text</h1>
+   <p id="salutation" style="font-size: 12pt">hi.</p>
+   <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+   solely to provide some things to
+   <span style="color: yellow" class="highlight">
+   highlight</span> and <span style="font-weight: bold">count</span>
+   style list-items in the box at right. If you are reading this,
+   you should go do something else instead. Maybe read a book. Or better
+   yet, write some test-cases for another bit of code.
+   <span style="font-style: italic">some text</span></p>
+   <p id="closing">more text</p>
+   <p>even more text</p>
+   </div>
+   </body>
+   </html>`
+  );
+
+add_task(async function () {
+  await addTab(DOCUMENT_URL);
+  const { toolbox, inspector, view } = await openComputedView();
+  await selectNode("span", inspector);
+
+  await testInlineStyle(view);
+  await testFirstInlineStyleSheet(view, toolbox);
+  await testSecondInlineStyleSheet(view, toolbox);
+  await testExternalStyleSheet(view, toolbox);
+  await testConstructedStyleSheet(view, toolbox);
+});
+
+async function testInlineStyle(view) {
+  info("Testing inline style");
+
+  await expandComputedViewPropertyByIndex(view, 0);
+
+  const onTab = waitForTab();
+  info("Clicking on the first rule-link in the computed-view");
+  checkComputedViewLink(view, {
+    index: 0,
+    expectedText: "element",
+    expectedTitle: "element",
+  });
+
+  const tab = await onTab;
+
+  const tabURI = tab.linkedBrowser.documentURI.spec;
+  ok(tabURI.startsWith("view-source:"), "View source tab is open");
+  info("Closing tab");
+  gBrowser.removeTab(tab);
+}
+
+async function testFirstInlineStyleSheet(view, toolbox) {
+  info("Testing inline stylesheet");
+
+  info("Listening for toolbox switch to the styleeditor");
+  const onSwitch = waitForStyleEditor(toolbox);
+
+  info("Clicking an inline stylesheet");
+  checkComputedViewLink(view, {
+    index: 3,
+    expectedText: "inline:3",
+    expectedTitle: "inline:3",
+  });
+  const editor = await onSwitch;
+
+  ok(true, "Switched to the style-editor panel in the toolbox");
+
+  await validateStyleEditorSheet(editor, 0);
+}
+
+async function testSecondInlineStyleSheet(view, toolbox) {
+  info("Testing second inline stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on second inline stylesheet link");
+  checkComputedViewLink(view, {
+    index: 5,
+    expectedText: "inline:2",
+    expectedTitle: "inline:2",
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(editor, 1);
+}
+
+async function testExternalStyleSheet(view, toolbox) {
+  info("Testing external stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on an external stylesheet link");
+  checkComputedViewLink(view, {
+    index: 2,
+    expectedText: `${STYLESHEET_URL.replace("data:text/css,", "")}:1`,
+    expectedTitle: `${STYLESHEET_URL}:1`,
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(editor, 2);
+}
+
+async function testConstructedStyleSheet(view, toolbox) {
+  info("Testing constructed stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on an constructed stylesheet link");
+
+  checkComputedViewLink(view, {
+    index: 1,
+    expectedText: "constructed",
+    expectedTitle: "constructed",
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  ok(editor.styleSheet.constructed, "The constructed stylesheet is selected");
+}
+
+async function validateStyleEditorSheet(editor, expectedSheetIndex) {
+  info("Validating style editor stylesheet");
+  const expectedHref = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [expectedSheetIndex],
+    _expectedSheetIndex =>
+      content.document.styleSheets[_expectedSheetIndex].href
+  );
+  is(
+    editor.styleSheet.href,
+    expectedHref,
+    "loaded stylesheet matches document stylesheet"
+  );
+}
+
+function checkComputedViewLink(view, { index, expectedText, expectedTitle }) {
+  const link = getComputedViewLinkByIndex(view, index);
+  is(link.innerText, expectedText, `Link #${index} has expected label`);
+  is(
+    link.getAttribute("title"),
+    expectedTitle,
+    `Link #${index} has expected title attribute`
+  );
+  link.scrollIntoView();
+  link.click();
+}
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors.html b/devtools/client/inspector/computed/test/doc_matched_selectors.html
new file mode 100644
index 0000000000..41abe48826
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors.html
@@ -0,0 +1,54 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <style>
+      @import url(./doc_matched_selectors_imported_1.css) layer(importedFirst);
+      @import url(./doc_matched_selectors_imported_2.css) layer(importedSecond);
+      @import url(./doc_matched_selectors_imported_3.css) layer(importedFirst);
+      @import url(./doc_matched_selectors_imported_4.css) layer;
+      @import url(./doc_matched_selectors_imported_5.css) layer;
+
+      @layer first, second;
+
+      .matched1, .matched2, .matched3, .matched4, .matched5 {
+        color: #000;
+      }
+
+      div {
+        position: absolute;
+        top: 40px;
+        left: 20px;
+        border: 1px solid #000;
+        color: #111;
+        width: 100px;
+        height: 50px;
+      }
+
+      main {
+        /*
+         * Set "winning" custom properties values to "blue" so we can check in the
+         * test that the best matching rule/property is actually what is applied by
+         * the engine.
+         */
+        --winning-color: blue;
+      }
+
+      section {
+        min-width: 10px;
+        min-height: 10px;
+        display: inline-block;
+      }
+      </style>
+  </head>
+  <body>
+    inspectstyle($("test"));
+    <div id="test" class="matched1 matched2 matched3 matched4 matched5">Test div</div>
+    <div id="dummy">
+      <div></div>
+    </div>
+    <main></main>
+  </body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors_imported_1.css b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_1.css
new file mode 100644
index 0000000000..3eca2e8086
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_1.css
@@ -0,0 +1,7 @@
+#imported-layers {
+  background-color: var(--imported-layers_in-importedFirst-first);
+}
+
+#all-important-imported-layers {
+  background-color: var(--all-important-imported-layers_in-importedFirst-first-important) !important;
+}
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors_imported_2.css b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_2.css
new file mode 100644
index 0000000000..035d9e0ff5
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_2.css
@@ -0,0 +1,7 @@
+#imported-layers {
+  background-color: var(--imported-layers_in-importedSecond);
+}
+
+#all-important-imported-layers {
+  background-color: var(--all-important-imported-layers_in-importedSecond-important) !important;
+}
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors_imported_3.css b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_3.css
new file mode 100644
index 0000000000..1139d7e107
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_3.css
@@ -0,0 +1,8 @@
+#imported-layers {
+  background-color: var(--imported-layers_in-importedFirst-second);
+}
+
+#all-important-imported-layers {
+  --all-important-imported-layers_in-importedFirst-second-important: var(--winning-color);
+  background-color: var(--all-important-imported-layers_in-importedFirst-second-important) !important;
+}
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors_imported_4.css b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_4.css
new file mode 100644
index 0000000000..abee8206b6
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_4.css
@@ -0,0 +1,7 @@
+#imported-layers {
+  background-color: var(--imported-layers_in-anonymous-first);
+}
+
+#all-important-imported-layers {
+  background-color: var(--all-important-imported-layers_in-anonymous-first-important) !important;
+}
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors_imported_5.css b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_5.css
new file mode 100644
index 0000000000..26fb567293
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_5.css
@@ -0,0 +1,10 @@
+@import url(./doc_matched_selectors_imported_6.css) layer(importedSecond);
+
+#imported-layers {
+  --imported-layers_in-anonymous-second: var(--winning-color);
+  background-color: var(--imported-layers_in-anonymous-second);
+}
+
+#all-important-imported-layers {
+  background-color: var(--all-important-imported-layers_in-anonymous-second-important) !important;
+}
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors_imported_6.css b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_6.css
new file mode 100644
index 0000000000..63b1cf0dc9
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors_imported_6.css
@@ -0,0 +1,7 @@
+#imported-layers {
+  background-color: var(--imported-layers_in-nested-importedSecond);
+}
+
+#all-important-imported-layers {
+  background-color: var(--all-important-imported-layers_in-nested-importedSecond-important) !important;
+}
diff --git a/devtools/client/inspector/computed/test/doc_media_queries.html b/devtools/client/inspector/computed/test/doc_media_queries.html
new file mode 100644
index 0000000000..819e1ea7aa
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_media_queries.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+  <title>test</title>
+  <style>
+    div {
+      width: 1000px;
+      height: 100px;
+      background-color: #f00;
+    }
+
+    @media screen and (min-width: 1px) {
+      div {
+        width: 200px;
+      }
+    }
+  </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_pseudoelement.html b/devtools/client/inspector/computed/test/doc_pseudoelement.html
new file mode 100644
index 0000000000..6145d4bf1b
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_pseudoelement.html
@@ -0,0 +1,131 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+
+body {
+    color: #333;
+}
+
+.box {
+    float:left;
+    width: 128px;
+    height: 128px;
+    background: #ddd;
+    padding: 32px;
+    margin: 32px;
+    position:relative;
+}
+
+.box:first-line {
+    color: orange;
+    background: red;
+}
+
+.box:first-letter {
+    color: green;
+}
+
+* {
+    cursor: default;
+}
+
+nothing {
+    cursor: pointer;
+}
+
+p::-moz-selection {
+    color: white;
+    background: black;
+}
+p::selection {
+    color: white;
+    background: black;
+}
+
+p:first-line {
+   background: blue;
+}
+p:first-letter {
+  color: red;
+  font-size: 130%;
+}
+
+.box:before {
+    background: green;
+    content: " ";
+    position: absolute;
+    height:32px;
+    width:32px;
+}
+
+.box:after {
+    background: red;
+    content: " ";
+    position: absolute;
+    border-radius: 50%;
+    height:32px;
+    width:32px;
+    top: 50%;
+    left: 50%;
+    margin-top: -16px;
+    margin-left: -16px;
+}
+
+.topleft:before {
+    top:0;
+    left:0;
+}
+
+.topleft:first-line {
+    color: orange;
+}
+.topleft::selection {
+    color: orange;
+}
+
+.topright:before {
+    top:0;
+    right:0;
+}
+
+.bottomright:before {
+    bottom:10px;
+    right:10px;
+    color: red;
+}
+
+.bottomright:before {
+    bottom:0;
+    right:0;
+}
+
+.bottomleft:before {
+    bottom:0;
+    left:0;
+}
+
+    </style>
+  </head>
+  <body>
+    <h1>ruleview pseudoelement($("test"));</h1>
+
+    <div id="topleft" class="box topleft">
+        <p>Top Left<br />Position</p>
+    </div>
+
+    <div id="topright" class="box topright">
+        <p>Top Right<br />Position</p>
+    </div>
+
+    <div id="bottomright" class="box bottomright">
+        <p>Bottom Right<br />Position</p>
+    </div>
+
+    <div id="bottomleft" class="box bottomleft">
+        <p>Bottom Left<br />Position</p>
+    </div>
+
+  </body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.css b/devtools/client/inspector/computed/test/doc_sourcemaps.css
new file mode 100644
index 0000000000..f62fbda21e
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.css
@@ -0,0 +1,7 @@
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
+
+/*# sourceMappingURL=doc_sourcemaps.css.map */
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.css.map b/devtools/client/inspector/computed/test/doc_sourcemaps.css.map
new file mode 100644
index 0000000000..0f7486fd91
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAGA,GAAI;EACF,KAAK,EAHU,OAAI;;AAMrB,IAAK;EACH,gBAAgB,EAAE,IAAI",
+"sources": ["doc_sourcemaps.scss"],
+"names": [],
+"file": "doc_sourcemaps.css"
+}
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.html b/devtools/client/inspector/computed/test/doc_sourcemaps.html
new file mode 100644
index 0000000000..0014e55fe9
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="doc_sourcemaps.css"/>
+</head>
+<body>
+	<div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.scss b/devtools/client/inspector/computed/test/doc_sourcemaps.scss
new file mode 100644
index 0000000000..0ff6c471bb
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.scss
@@ -0,0 +1,10 @@
+
+$paulrougetpink: #f06;
+
+div {
+  color: $paulrougetpink;
+}
+
+span {
+  background-color: #EEE;
+}
\ No newline at end of file
diff --git a/devtools/client/inspector/computed/test/head.js b/devtools/client/inspector/computed/test/head.js
new file mode 100644
index 0000000000..dfa1f87e9c
--- /dev/null
+++ b/devtools/client/inspector/computed/test/head.js
@@ -0,0 +1,279 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
+});
+
+/**
+ * Dispatch the copy event on the given element
+ */
+function fireCopyEvent(element) {
+  const evt = element.ownerDocument.createEvent("Event");
+  evt.initEvent("copy", true, true);
+  element.dispatchEvent(evt);
+}
+
+/**
+ * Return all the computed items in the computed view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @returns {Array<Element>}
+ */
+function getComputedViewProperties(view) {
+  return Array.from(
+    view.styleDocument.querySelectorAll(
+      "#computed-container .computed-property-view"
+    )
+  );
+}
+
+/**
+ * Get references to the name and value span nodes corresponding to a given
+ * property name in the computed-view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return an object {nameSpan, valueSpan}
+ */
+function getComputedViewProperty(view, name) {
+  let prop;
+  for (const property of getComputedViewProperties(view)) {
+    const nameSpan = property.querySelector(".computed-property-name");
+    const valueSpan = property.querySelector(".computed-property-value");
+
+    if (nameSpan.firstChild.textContent === name) {
+      prop = { nameSpan, valueSpan };
+      break;
+    }
+  }
+  return prop;
+}
+
+/**
+ * Get an instance of PropertyView from the computed-view.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return {PropertyView}
+ */
+function getComputedViewPropertyView(view, name) {
+  let propView;
+  for (const propertyView of view.propertyViews) {
+    if (propertyView.propertyInfo.name === name) {
+      propView = propertyView;
+      break;
+    }
+  }
+  return propView;
+}
+
+/**
+ * Get a reference to the matched rules element for a given property name in
+ * the computed-view.
+ * A matched rule element is inside the property element (<li>) itself
+ * and is only shown when the twisty icon is expanded on the property.
+ * It contains matched rules, with selectors, properties, values and stylesheet links.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return {Promise} A promise that resolves to the property matched rules
+ * container
+ */
+var getComputedViewMatchedRules = async function (view, name) {
+  let expander;
+  let matchedRulesEl;
+  for (const property of view.styleDocument.querySelectorAll(
+    "#computed-container .computed-property-view"
+  )) {
+    const nameSpan = property.querySelector(".computed-property-name");
+    if (nameSpan.firstChild.textContent === name) {
+      expander = property.querySelector(".computed-expandable");
+      matchedRulesEl = property.querySelector(".matchedselectors");
+
+      break;
+    }
+  }
+
+  if (!expander.hasAttribute("open")) {
+    // Need to expand the property
+    const onExpand = view.inspector.once("computed-view-property-expanded");
+    expander.click();
+    await onExpand;
+
+    await waitFor(() => expander.hasAttribute("open"));
+  }
+
+  return matchedRulesEl;
+};
+
+/**
+ * Get the text value of the property corresponding to a given name in the
+ * computed-view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return {String} The property value
+ */
+function getComputedViewPropertyValue(view, name) {
+  return getComputedViewProperty(view, name).valueSpan.textContent;
+}
+
+/**
+ * Expand a given property, given its index in the current property list of
+ * the computed view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {Number} index
+ *        The index of the property to be expanded
+ * @return a promise that resolves when the property has been expanded, or
+ * rejects if the property was not found
+ */
+function expandComputedViewPropertyByIndex(view, index) {
+  info("Expanding property " + index + " in the computed view");
+  const expandos = view.styleDocument.querySelectorAll(".computed-expandable");
+  if (!expandos.length || !expandos[index]) {
+    return Promise.reject();
+  }
+
+  const onExpand = view.inspector.once("computed-view-property-expanded");
+  expandos[index].click();
+  return onExpand;
+}
+
+/**
+ * Get a rule-link from the computed-view given its index
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {Number} index
+ *        The index of the link to be retrieved
+ * @return {DOMNode} The link at the given index, if one exists, null otherwise
+ */
+function getComputedViewLinkByIndex(view, index) {
+  const links = view.styleDocument.querySelectorAll(
+    ".rule-link .computed-link"
+  );
+  return links[index];
+}
+
+/**
+ * Trigger the select all action in the computed view.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ */
+function selectAllText(view) {
+  info("Selecting all the text");
+  view.contextMenu._onSelectAll();
+}
+
+/**
+ * Select all the text, copy it, and check the content in the clipboard.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} expectedPattern
+ *        A regular expression used to check the content of the clipboard
+ */
+async function copyAllAndCheckClipboard(view, expectedPattern) {
+  selectAllText(view);
+  const contentDoc = view.styleDocument;
+  const prop = contentDoc.querySelector(
+    "#computed-container .computed-property-view"
+  );
+
+  try {
+    info("Trigger a copy event and wait for the clipboard content");
+    await waitForClipboardPromise(
+      () => fireCopyEvent(prop),
+      () => checkClipboard(expectedPattern)
+    );
+  } catch (e) {
+    failClipboardCheck(expectedPattern);
+  }
+}
+
+/**
+ * Select some text, copy it, and check the content in the clipboard.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {Object} positions
+ *        The start and end positions of the text to be selected. This must be an object
+ *        like this:
+ *        { start: {prop: 1, offset: 0}, end: {prop: 3, offset: 5} }
+ * @param {String} expectedPattern
+ *        A regular expression used to check the content of the clipboard
+ */
+async function copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
+  info("Testing selection copy");
+
+  const contentDocument = view.styleDocument;
+  const props = contentDocument.querySelectorAll(
+    "#computed-container .computed-property-view"
+  );
+
+  info("Create the text selection range");
+  const range = contentDocument.createRange();
+  range.setStart(props[positions.start.prop], positions.start.offset);
+  range.setEnd(props[positions.end.prop], positions.end.offset);
+  contentDocument.defaultView.getSelection().addRange(range);
+
+  try {
+    info("Trigger a copy event and wait for the clipboard content");
+    await waitForClipboardPromise(
+      () => fireCopyEvent(props[0]),
+      () => checkClipboard(expectedPattern)
+    );
+  } catch (e) {
+    failClipboardCheck(expectedPattern);
+  }
+}
+
+function checkClipboard(expectedPattern) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  const expectedRegExp = new RegExp(expectedPattern, "g");
+  return expectedRegExp.test(actual);
+}
+
+function failClipboardCheck(expectedPattern) {
+  // Format expected text for comparison
+  const terminator = Services.appinfo.OS == "WINNT" ? "\r\n" : "\n";
+  expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator);
+  expectedPattern = expectedPattern.replace(/\\\(/g, "(");
+  expectedPattern = expectedPattern.replace(/\\\)/g, ")");
+
+  let actual = SpecialPowers.getClipboardData("text/plain");
+
+  // Trim the right hand side of our strings. This is because expectedPattern
+  // accounts for windows sometimes adding a newline to our copied data.
+  expectedPattern = expectedPattern.trimRight();
+  actual = actual.trimRight();
+
+  dump(
+    "TEST-UNEXPECTED-FAIL | Clipboard text does not match expected ... " +
+      "results (escaped for accurate comparison):\n"
+  );
+  info("Actual: " + escape(actual));
+  info("Expected: " + escape(expectedPattern));
+}
diff --git a/devtools/client/inspector/configs/development.json b/devtools/client/inspector/configs/development.json
new file mode 100644
index 0000000000..57cba7c994
--- /dev/null
+++ b/devtools/client/inspector/configs/development.json
@@ -0,0 +1,21 @@
+{
+  "title": "Inspector",
+  "environment": "development",
+  "baseWorkerURL": "public/build/",
+  "theme": "light",
+  "host": "",
+  "logging": {
+    "client": false,
+    "firefoxProxy": false
+  },
+  "features": {},
+  "firefox": {
+    "proxyHost": "localhost:9000",
+    "webSocketConnection": false,
+    "webSocketHost": "localhost:6080"
+  },
+  "development": {
+    "serverPort": 8000,
+    "customIndex": true
+  }
+}
diff --git a/devtools/client/inspector/extensions/actions/index.js b/devtools/client/inspector/extensions/actions/index.js
new file mode 100644
index 0000000000..384dfb0da7
--- /dev/null
+++ b/devtools/client/inspector/extensions/actions/index.js
@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Update the extension sidebar with an object TreeView.
+    "EXTENSION_SIDEBAR_OBJECT_TREEVIEW_UPDATE",
+
+    // Update the extension sidebar with an expression result.
+    "EXTENSION_SIDEBAR_EXPRESSION_RESULT_VIEW_UPDATE",
+
+    // Switch the extension sidebar into an extension page container.
+    "EXTENSION_SIDEBAR_PAGE_UPDATE",
+
+    // Remove an extension sidebar from the inspector store.
+    "EXTENSION_SIDEBAR_REMOVE",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/extensions/actions/moz.build b/devtools/client/inspector/extensions/actions/moz.build
new file mode 100644
index 0000000000..d101bc2fea
--- /dev/null
+++ b/devtools/client/inspector/extensions/actions/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "index.js",
+    "sidebar.js",
+)
diff --git a/devtools/client/inspector/extensions/actions/sidebar.js b/devtools/client/inspector/extensions/actions/sidebar.js
new file mode 100644
index 0000000000..34c7276c27
--- /dev/null
+++ b/devtools/client/inspector/extensions/actions/sidebar.js
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  EXTENSION_SIDEBAR_OBJECT_TREEVIEW_UPDATE,
+  EXTENSION_SIDEBAR_EXPRESSION_RESULT_VIEW_UPDATE,
+  EXTENSION_SIDEBAR_PAGE_UPDATE,
+  EXTENSION_SIDEBAR_REMOVE,
+} = require("resource://devtools/client/inspector/extensions/actions/index.js");
+
+module.exports = {
+  /**
+   * Update the sidebar with an object treeview.
+   */
+  updateObjectTreeView(sidebarId, object) {
+    return {
+      type: EXTENSION_SIDEBAR_OBJECT_TREEVIEW_UPDATE,
+      sidebarId,
+      object,
+    };
+  },
+
+  /**
+   * Update the sidebar with an expression result.
+   */
+  updateExpressionResultView(sidebarId, expressionResult, rootTitle) {
+    return {
+      type: EXTENSION_SIDEBAR_EXPRESSION_RESULT_VIEW_UPDATE,
+      sidebarId,
+      expressionResult,
+      rootTitle,
+    };
+  },
+
+  /**
+   * Switch the sidebar into the extension page mode.
+   */
+  updateExtensionPage(sidebarId, iframeURL) {
+    return {
+      type: EXTENSION_SIDEBAR_PAGE_UPDATE,
+      sidebarId,
+      iframeURL,
+    };
+  },
+
+  /**
+   * Remove the extension sidebar from the inspector store.
+   */
+  removeExtensionSidebar(sidebarId) {
+    return {
+      type: EXTENSION_SIDEBAR_REMOVE,
+      sidebarId,
+    };
+  },
+};
diff --git a/devtools/client/inspector/extensions/components/ExpressionResultView.js b/devtools/client/inspector/extensions/components/ExpressionResultView.js
new file mode 100644
index 0000000000..887c5610c4
--- /dev/null
+++ b/devtools/client/inspector/extensions/components/ExpressionResultView.js
@@ -0,0 +1,110 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Accordion = createFactory(
+  require("resource://devtools/client/shared/components/Accordion.js")
+);
+
+const Types = require("resource://devtools/client/inspector/extensions/types.js");
+
+const {
+  REPS: { Grip },
+  MODE,
+  objectInspector: { ObjectInspector: ObjectInspectorClass },
+} = require("resource://devtools/client/shared/components/reps/index.js");
+
+loader.lazyRequireGetter(
+  this,
+  "LongStringFront",
+  "resource://devtools/client/fronts/string.js",
+  true
+);
+
+loader.lazyRequireGetter(
+  this,
+  "ObjectFront",
+  "resource://devtools/client/fronts/object.js",
+  true
+);
+
+const ObjectInspector = createFactory(ObjectInspectorClass);
+
+class ObjectValueGripView extends PureComponent {
+  static get propTypes() {
+    return {
+      rootTitle: PropTypes.string,
+      expressionResult: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.object,
+      ]).isRequired,
+      // Helpers injected as props by extension-sidebar.js.
+      serviceContainer: PropTypes.shape(Types.serviceContainer).isRequired,
+    };
+  }
+
+  render() {
+    const { expressionResult, serviceContainer, rootTitle } = this.props;
+
+    const isFront =
+      expressionResult instanceof ObjectFront ||
+      expressionResult instanceof LongStringFront;
+    const grip = isFront ? expressionResult.getGrip() : expressionResult;
+
+    const objectInspectorProps = {
+      autoExpandDepth: 1,
+      mode: MODE.SHORT,
+      // TODO: we disable focus since it's not currently working well in ObjectInspector.
+      // Let's remove the property below when problem are fixed in OI.
+      disabledFocus: true,
+      roots: [
+        {
+          path: expressionResult?.actorID || JSON.stringify(expressionResult),
+          contents: { value: grip, front: isFront ? expressionResult : null },
+        },
+      ],
+      // TODO: evaluate if there should also be a serviceContainer.openLink.
+    };
+
+    if (expressionResult?.actorID) {
+      Object.assign(objectInspectorProps, {
+        onDOMNodeMouseOver: serviceContainer.highlightDomElement,
+        onDOMNodeMouseOut: serviceContainer.unHighlightDomElement,
+        onInspectIconClick(object, e) {
+          // Stop the event propagation so we don't trigger ObjectInspector
+          // expand/collapse.
+          e.stopPropagation();
+          serviceContainer.openNodeInInspector(object);
+        },
+        defaultRep: Grip,
+      });
+    }
+
+    if (rootTitle) {
+      return Accordion({
+        items: [
+          {
+            component: ObjectInspector,
+            componentProps: objectInspectorProps,
+            header: rootTitle,
+            id: rootTitle.replace(/\s/g, "-"),
+            opened: true,
+          },
+        ],
+      });
+    }
+
+    return ObjectInspector(objectInspectorProps);
+  }
+}
+
+module.exports = ObjectValueGripView;
diff --git a/devtools/client/inspector/extensions/components/ExtensionPage.js b/devtools/client/inspector/extensions/components/ExtensionPage.js
new file mode 100644
index 0000000000..3f92b8f41f
--- /dev/null
+++ b/devtools/client/inspector/extensions/components/ExtensionPage.js
@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * The ExtensionPage React Component is used in the ExtensionSidebar component to provide
+ * a UI viewMode which shows an extension page rendered inside the sidebar panel.
+ */
+class ExtensionPage extends PureComponent {
+  static get propTypes() {
+    return {
+      iframeURL: PropTypes.string.isRequired,
+      onExtensionPageMount: PropTypes.func.isRequired,
+      onExtensionPageUnmount: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.iframeRef = createRef();
+  }
+
+  componentDidMount() {
+    this.props.onExtensionPageMount(this.iframeRef.current);
+  }
+
+  componentWillUnmount() {
+    this.props.onExtensionPageUnmount(this.iframeRef.current);
+  }
+
+  render() {
+    return dom.iframe({
+      className: "inspector-extension-sidebar-page",
+      src: this.props.iframeURL,
+      style: {
+        width: "100%",
+        height: "100%",
+        margin: 0,
+        padding: 0,
+      },
+      ref: this.iframeRef,
+    });
+  }
+}
+
+module.exports = ExtensionPage;
diff --git a/devtools/client/inspector/extensions/components/ExtensionSidebar.js b/devtools/client/inspector/extensions/components/ExtensionSidebar.js
new file mode 100644
index 0000000000..a351b6add9
--- /dev/null
+++ b/devtools/client/inspector/extensions/components/ExtensionSidebar.js
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const ExtensionPage = createFactory(
+  require("resource://devtools/client/inspector/extensions/components/ExtensionPage.js")
+);
+const ObjectTreeView = createFactory(
+  require("resource://devtools/client/inspector/extensions/components/ObjectTreeView.js")
+);
+const ExpressionResultView = createFactory(
+  require("resource://devtools/client/inspector/extensions/components/ExpressionResultView.js")
+);
+const Types = require("resource://devtools/client/inspector/extensions/types.js");
+
+/**
+ * The ExtensionSidebar is a React component with 2 supported viewMode:
+ * - an ObjectTreeView UI, used to show the JS objects
+ *   (used by the sidebar.setObject WebExtensions APIs)
+ * - an ExpressionResultView UI, used to show the result for an expression
+ *   (used by sidebar.setExpression WebExtensions APIs)
+ * - an ExtensionPage UI used to show an extension page
+ *   (used by the sidebar.setPage WebExtensions APIs).
+ *
+ * TODO: implement the ExtensionPage viewMode.
+ */
+class ExtensionSidebar extends PureComponent {
+  static get propTypes() {
+    return {
+      id: PropTypes.string.isRequired,
+      extensionsSidebar: PropTypes.object.isRequired,
+      onExtensionPageMount: PropTypes.func.isRequired,
+      onExtensionPageUnmount: PropTypes.func.isRequired,
+      // Helpers injected as props by extension-sidebar.js.
+      serviceContainer: PropTypes.shape(Types.serviceContainer).isRequired,
+    };
+  }
+
+  render() {
+    const {
+      id,
+      extensionsSidebar,
+      onExtensionPageMount,
+      onExtensionPageUnmount,
+      serviceContainer,
+    } = this.props;
+
+    const {
+      iframeURL,
+      object,
+      expressionResult,
+      rootTitle,
+      viewMode = "empty-sidebar",
+    } = extensionsSidebar[id] || {};
+
+    let sidebarContentEl;
+
+    switch (viewMode) {
+      case "object-treeview":
+        sidebarContentEl = ObjectTreeView({ object });
+        break;
+      case "object-value-grip-view":
+        sidebarContentEl = ExpressionResultView({
+          expressionResult,
+          rootTitle,
+          serviceContainer,
+        });
+        break;
+      case "extension-page":
+        sidebarContentEl = ExtensionPage({
+          iframeURL,
+          onExtensionPageMount,
+          onExtensionPageUnmount,
+        });
+        break;
+      case "empty-sidebar":
+        break;
+      default:
+        throw new Error(`Unknown ExtensionSidebar viewMode: "${viewMode}"`);
+    }
+
+    const className = "devtools-monospace extension-sidebar inspector-tabpanel";
+
+    return dom.div(
+      {
+        id,
+        className,
+      },
+      sidebarContentEl
+    );
+  }
+}
+
+module.exports = connect(state => state)(ExtensionSidebar);
diff --git a/devtools/client/inspector/extensions/components/ObjectTreeView.js b/devtools/client/inspector/extensions/components/ObjectTreeView.js
new file mode 100644
index 0000000000..1788f8d020
--- /dev/null
+++ b/devtools/client/inspector/extensions/components/ObjectTreeView.js
@@ -0,0 +1,67 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  REPS,
+  MODE,
+} = require("resource://devtools/client/shared/components/reps/index.js");
+const { Rep } = REPS;
+const TreeViewClass = require("resource://devtools/client/shared/components/tree/TreeView.js");
+const TreeView = createFactory(TreeViewClass);
+
+/**
+ * The ExpressionResultView React Component is used in the ExtensionSidebar component to
+ * provide a UI viewMode which shows a tree view of the passed JavaScript object.
+ */
+class ExpressionResultView extends PureComponent {
+  static get propTypes() {
+    return {
+      object: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { object } = this.props;
+
+    const columns = [
+      {
+        id: "value",
+      },
+    ];
+
+    // Render the node value (omitted on the root element if it has children).
+    const renderValue = props => {
+      if (props.member.level === 0 && props.member.hasChildren) {
+        return undefined;
+      }
+
+      return Rep(
+        Object.assign({}, props, {
+          cropLimit: 50,
+        })
+      );
+    };
+
+    return TreeView({
+      object,
+      mode: MODE.SHORT,
+      columns,
+      renderValue,
+      expandedNodes: TreeViewClass.getExpandedNodes(object, {
+        maxLevel: 1,
+        maxNodes: 1,
+      }),
+    });
+  }
+}
+
+module.exports = ExpressionResultView;
diff --git a/devtools/client/inspector/extensions/components/moz.build b/devtools/client/inspector/extensions/components/moz.build
new file mode 100644
index 0000000000..62f3d991c1
--- /dev/null
+++ b/devtools/client/inspector/extensions/components/moz.build
@@ -0,0 +1,12 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "ExpressionResultView.js",
+    "ExtensionPage.js",
+    "ExtensionSidebar.js",
+    "ObjectTreeView.js",
+)
diff --git a/devtools/client/inspector/extensions/extension-sidebar.js b/devtools/client/inspector/extensions/extension-sidebar.js
new file mode 100644
index 0000000000..c359d8b4fa
--- /dev/null
+++ b/devtools/client/inspector/extensions/extension-sidebar.js
@@ -0,0 +1,189 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const {
+  Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const extensionsSidebarReducer = require("resource://devtools/client/inspector/extensions/reducers/sidebar.js");
+const {
+  default: objectInspectorReducer,
+} = require("resource://devtools/client/shared/components/object-inspector/reducer.js");
+
+const ExtensionSidebarComponent = createFactory(
+  require("resource://devtools/client/inspector/extensions/components/ExtensionSidebar.js")
+);
+
+const {
+  updateExtensionPage,
+  updateObjectTreeView,
+  updateExpressionResultView,
+  removeExtensionSidebar,
+} = require("resource://devtools/client/inspector/extensions/actions/sidebar.js");
+
+/**
+ * ExtensionSidebar instances represents Inspector sidebars installed by add-ons
+ * using the devtools.panels.elements.createSidebarPane WebExtensions API.
+ *
+ * The WebExtensions API registers the extensions' sidebars on the toolbox instance
+ * (using the registerInspectorExtensionSidebar method) and, once the Inspector has been
+ * created, the toolbox uses the Inpector createExtensionSidebar method to create the
+ * ExtensionSidebar instances and then it registers them to the Inspector.
+ *
+ * @param {Inspector} inspector
+ *        The inspector where the sidebar should be hooked to.
+ * @param {Object} options
+ * @param {String} options.id
+ *        The unique id of the sidebar.
+ * @param {String} options.title
+ *        The title of the sidebar.
+ */
+class ExtensionSidebar {
+  constructor(inspector, { id, title }) {
+    EventEmitter.decorate(this);
+    this.inspector = inspector;
+    this.store = inspector.store;
+    this.id = id;
+    this.title = title;
+    this.destroyed = false;
+
+    this.store.injectReducer("extensionsSidebar", extensionsSidebarReducer);
+    this.store.injectReducer("objectInspector", objectInspectorReducer);
+  }
+
+  /**
+   * Lazily create a React ExtensionSidebarComponent wrapped into a Redux Provider.
+   */
+  get provider() {
+    if (!this._provider) {
+      this._provider = createElement(
+        Provider,
+        {
+          store: this.store,
+          key: this.id,
+          title: this.title,
+        },
+        ExtensionSidebarComponent({
+          id: this.id,
+          onExtensionPageMount: containerEl => {
+            this.emit("extension-page-mount", containerEl);
+          },
+          onExtensionPageUnmount: containerEl => {
+            this.emit("extension-page-unmount", containerEl);
+          },
+          serviceContainer: {
+            highlightDomElement: async (grip, options = {}) => {
+              const nodeFront =
+                await this.inspector.inspectorFront.getNodeFrontFromNodeGrip(
+                  grip
+                );
+              return this.inspector.highlighters.showHighlighterTypeForNode(
+                this.inspector.highlighters.TYPES.BOXMODEL,
+                nodeFront,
+                options
+              );
+            },
+            unHighlightDomElement: async () => {
+              return this.inspector.highlighters.hideHighlighterType(
+                this.inspector.highlighters.TYPES.BOXMODEL
+              );
+            },
+            openNodeInInspector: async grip => {
+              const nodeFront =
+                await this.inspector.inspectorFront.getNodeFrontFromNodeGrip(
+                  grip
+                );
+              const onInspectorUpdated =
+                this.inspector.once("inspector-updated");
+              const onNodeFrontSet =
+                this.inspector.toolbox.selection.setNodeFront(nodeFront, {
+                  reason: "inspector-extension-sidebar",
+                });
+
+              return Promise.all([onNodeFrontSet, onInspectorUpdated]);
+            },
+          },
+        })
+      );
+    }
+
+    return this._provider;
+  }
+
+  /**
+   * Destroy the ExtensionSidebar instance, dispatch a removeExtensionSidebar Redux action
+   * (which removes the related state from the Inspector store) and clear any reference
+   * to the inspector, the Redux store and the lazily created Redux Provider component.
+   *
+   * This method is called by the inspector when the ExtensionSidebar is being removed
+   * (or when the inspector is being destroyed).
+   */
+  destroy() {
+    if (this.destroyed) {
+      throw new Error(
+        `ExtensionSidebar instances cannot be destroyed more than once`
+      );
+    }
+
+    // Remove the data related to this extension from the inspector store.
+    this.store.dispatch(removeExtensionSidebar(this.id));
+
+    this.inspector = null;
+    this.store = null;
+    this._provider = null;
+
+    this.destroyed = true;
+  }
+
+  /**
+   * Dispatch an objectTreeView action to change the SidebarComponent into an
+   * ObjectTreeView React Component, which shows the passed javascript object
+   * in the sidebar.
+   */
+  setObject(object) {
+    if (this.removed) {
+      throw new Error(
+        "Unable to set an object preview on a removed ExtensionSidebar"
+      );
+    }
+
+    this.store.dispatch(updateObjectTreeView(this.id, object));
+  }
+
+  /**
+   * Dispatch an objectPreview action to change the SidebarComponent into an
+   * ObjectPreview React Component, which shows the passed value grip
+   * in the sidebar.
+   */
+  setExpressionResult(expressionResult, rootTitle) {
+    if (this.removed) {
+      throw new Error(
+        "Unable to set an object preview on a removed ExtensionSidebar"
+      );
+    }
+
+    this.store.dispatch(
+      updateExpressionResultView(this.id, expressionResult, rootTitle)
+    );
+  }
+
+  setExtensionPage(iframeURL) {
+    if (this.removed) {
+      throw new Error(
+        "Unable to set an object preview on a removed ExtensionSidebar"
+      );
+    }
+
+    this.store.dispatch(updateExtensionPage(this.id, iframeURL));
+  }
+}
+
+module.exports = ExtensionSidebar;
diff --git a/devtools/client/inspector/extensions/moz.build b/devtools/client/inspector/extensions/moz.build
new file mode 100644
index 0000000000..39647c8e5a
--- /dev/null
+++ b/devtools/client/inspector/extensions/moz.build
@@ -0,0 +1,18 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "actions",
+    "components",
+    "reducers",
+]
+
+DevToolsModules(
+    "extension-sidebar.js",
+    "types.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/devtools/client/inspector/extensions/reducers/moz.build b/devtools/client/inspector/extensions/reducers/moz.build
new file mode 100644
index 0000000000..0f8a5757c8
--- /dev/null
+++ b/devtools/client/inspector/extensions/reducers/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "sidebar.js",
+)
diff --git a/devtools/client/inspector/extensions/reducers/sidebar.js b/devtools/client/inspector/extensions/reducers/sidebar.js
new file mode 100644
index 0000000000..c7566f3b67
--- /dev/null
+++ b/devtools/client/inspector/extensions/reducers/sidebar.js
@@ -0,0 +1,67 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  EXTENSION_SIDEBAR_OBJECT_TREEVIEW_UPDATE,
+  EXTENSION_SIDEBAR_EXPRESSION_RESULT_VIEW_UPDATE,
+  EXTENSION_SIDEBAR_PAGE_UPDATE,
+  EXTENSION_SIDEBAR_REMOVE,
+} = require("resource://devtools/client/inspector/extensions/actions/index.js");
+
+const INITIAL_SIDEBAR = {};
+
+const reducers = {
+  [EXTENSION_SIDEBAR_OBJECT_TREEVIEW_UPDATE](sidebar, { sidebarId, object }) {
+    // Update the sidebar to a "object-treeview" which shows
+    // the passed object.
+    return Object.assign({}, sidebar, {
+      [sidebarId]: {
+        viewMode: "object-treeview",
+        object,
+      },
+    });
+  },
+
+  [EXTENSION_SIDEBAR_EXPRESSION_RESULT_VIEW_UPDATE](
+    sidebar,
+    { sidebarId, expressionResult, rootTitle }
+  ) {
+    // Update the sidebar to a "object-treeview" which shows
+    // the passed object.
+    return Object.assign({}, sidebar, {
+      [sidebarId]: {
+        viewMode: "object-value-grip-view",
+        expressionResult,
+        rootTitle,
+      },
+    });
+  },
+
+  [EXTENSION_SIDEBAR_PAGE_UPDATE](sidebar, { sidebarId, iframeURL }) {
+    // Update the sidebar to a "object-treeview" which shows
+    // the passed object.
+    return Object.assign({}, sidebar, {
+      [sidebarId]: {
+        viewMode: "extension-page",
+        iframeURL,
+      },
+    });
+  },
+
+  [EXTENSION_SIDEBAR_REMOVE](sidebar, { sidebarId }) {
+    // Remove the sidebar from the Redux store.
+    delete sidebar[sidebarId];
+    return Object.assign({}, sidebar);
+  },
+};
+
+module.exports = function (sidebar = INITIAL_SIDEBAR, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return sidebar;
+  }
+  return reducer(sidebar, action);
+};
diff --git a/devtools/client/inspector/extensions/test/browser.toml b/devtools/client/inspector/extensions/test/browser.toml
new file mode 100644
index 0000000000..2c6ad4538c
--- /dev/null
+++ b/devtools/client/inspector/extensions/test/browser.toml
@@ -0,0 +1,15 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "head_devtools_inspector_sidebar.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_inspector_extension_sidebar.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
diff --git a/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js b/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
new file mode 100644
index 0000000000..740b1fda13
--- /dev/null
+++ b/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
@@ -0,0 +1,451 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const SIDEBAR_ID = "an-extension-sidebar";
+const SIDEBAR_TITLE = "Sidebar Title";
+
+let extension;
+let fakeExtCallerInfo;
+
+let toolbox;
+let inspector;
+
+add_task(async function setupExtensionSidebar() {
+  extension = ExtensionTestUtils.loadExtension({
+    background() {
+      // This is just an empty extension used to ensure that the caller extension uuid
+      // actually exists.
+    },
+  });
+
+  await extension.startup();
+
+  fakeExtCallerInfo = {
+    url: WebExtensionPolicy.getByID(extension.id).getURL(
+      "fake-caller-script.js"
+    ),
+    lineNumber: 1,
+    addonId: extension.id,
+  };
+
+  const res = await openInspectorForURL("about:blank");
+  inspector = res.inspector;
+  toolbox = res.toolbox;
+
+  const onceSidebarCreated = toolbox.once(
+    `extension-sidebar-created-${SIDEBAR_ID}`
+  );
+  toolbox.registerInspectorExtensionSidebar(SIDEBAR_ID, {
+    title: SIDEBAR_TITLE,
+  });
+
+  const sidebar = await onceSidebarCreated;
+
+  // Test sidebar properties.
+  is(
+    sidebar,
+    inspector.getPanel(SIDEBAR_ID),
+    "Got an extension sidebar instance equal to the one saved in the inspector"
+  );
+  is(
+    sidebar.title,
+    SIDEBAR_TITLE,
+    "Got the expected title in the extension sidebar instance"
+  );
+  is(
+    sidebar.provider.props.title,
+    SIDEBAR_TITLE,
+    "Got the expeted title in the provider props"
+  );
+
+  // Test sidebar Redux state.
+  const inspectorStoreState = inspector.store.getState();
+  ok(
+    "extensionsSidebar" in inspectorStoreState,
+    "Got the extensionsSidebar sub-state in the inspector Redux store"
+  );
+  Assert.deepEqual(
+    inspectorStoreState.extensionsSidebar,
+    {},
+    "The extensionsSidebar should be initially empty"
+  );
+});
+
+add_task(async function testSidebarSetObject() {
+  const object = {
+    propertyName: {
+      nestedProperty: "propertyValue",
+      anotherProperty: "anotherValue",
+    },
+  };
+
+  const sidebar = inspector.getPanel(SIDEBAR_ID);
+  sidebar.setObject(object);
+
+  // Test updated sidebar Redux state.
+  const inspectorStoreState = inspector.store.getState();
+  is(
+    Object.keys(inspectorStoreState.extensionsSidebar).length,
+    1,
+    "The extensionsSidebar state contains the newly registered extension sidebar state"
+  );
+  Assert.deepEqual(
+    inspectorStoreState.extensionsSidebar,
+    {
+      [SIDEBAR_ID]: {
+        viewMode: "object-treeview",
+        object,
+      },
+    },
+    "Got the expected state for the registered extension sidebar"
+  );
+
+  // Select the extension sidebar.
+  const waitSidebarSelected = toolbox.once(`inspector-sidebar-select`);
+  inspector.sidebar.show(SIDEBAR_ID);
+  await waitSidebarSelected;
+
+  const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
+
+  // Test extension sidebar content.
+  ok(
+    sidebarPanelContent,
+    "Got a sidebar panel for the registered extension sidebar"
+  );
+
+  assertTreeView(sidebarPanelContent, {
+    expectedTreeTables: 1,
+    expectedStringCells: 2,
+    expectedNumberCells: 0,
+  });
+
+  // Test sidebar refreshed on further sidebar.setObject calls.
+  info("Change the inspected object in the extension sidebar object treeview");
+  sidebar.setObject({ aNewProperty: 123 });
+
+  assertTreeView(sidebarPanelContent, {
+    expectedTreeTables: 1,
+    expectedStringCells: 0,
+    expectedNumberCells: 1,
+  });
+});
+
+add_task(async function testSidebarSetExpressionResult() {
+  const { commands } = toolbox;
+  const sidebar = inspector.getPanel(SIDEBAR_ID);
+  const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
+
+  info("Testing sidebar.setExpressionResult with rootTitle");
+
+  const expression = `
+    var obj = Object.create(null);
+    obj.prop1 = 123;
+    obj[Symbol('sym1')] = 456;
+    obj.cyclic = obj;
+    obj;
+  `;
+
+  const consoleFront = await toolbox.target.getFront("console");
+  let evalResult = await commands.inspectedWindowCommand.eval(
+    fakeExtCallerInfo,
+    expression,
+    {
+      consoleFront,
+    }
+  );
+
+  sidebar.setExpressionResult(evalResult, "Expected Root Title");
+
+  // Wait the ObjectInspector component to be rendered and test its content.
+  await testSetExpressionSidebarPanel(sidebarPanelContent, {
+    nodesLength: 4,
+    propertiesNames: ["cyclic", "prop1", "Symbol(sym1)"],
+    rootTitle: "Expected Root Title",
+  });
+
+  info("Testing sidebar.setExpressionResult without rootTitle");
+
+  sidebar.setExpressionResult(evalResult);
+
+  // Wait the ObjectInspector component to be rendered and test its content.
+  await testSetExpressionSidebarPanel(sidebarPanelContent, {
+    nodesLength: 4,
+    propertiesNames: ["cyclic", "prop1", "Symbol(sym1)"],
+  });
+
+  info("Test expanding the object");
+  const oi = sidebarPanelContent.querySelector(".tree");
+  const cyclicNode = oi.querySelectorAll(".node")[1];
+  ok(cyclicNode.innerText.includes("cyclic"), "Found the expected node");
+  cyclicNode.click();
+
+  await TestUtils.waitForCondition(
+    () => oi.querySelectorAll(".node").length === 7,
+    "Wait for the 'cyclic' node to be expanded"
+  );
+
+  await TestUtils.waitForCondition(
+    () => oi.querySelector(".tree-node.focused"),
+    "Wait for the 'cyclic' node to be focused"
+  );
+  ok(
+    oi.querySelector(".tree-node.focused").innerText.includes("cyclic"),
+    "'cyclic' node is focused"
+  );
+
+  info("Test keyboard navigation");
+  EventUtils.synthesizeKey("KEY_ArrowLeft", {}, oi.ownerDocument.defaultView);
+  await TestUtils.waitForCondition(
+    () => oi.querySelectorAll(".node").length === 4,
+    "Wait for the 'cyclic' node to be collapsed"
+  );
+  ok(
+    oi.querySelector(".tree-node.focused").innerText.includes("cyclic"),
+    "'cyclic' node is still focused"
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowDown", {}, oi.ownerDocument.defaultView);
+  await TestUtils.waitForCondition(
+    () => oi.querySelectorAll(".tree-node")[2].classList.contains("focused"),
+    "Wait for the 'prop1' node to be focused"
+  );
+
+  ok(
+    oi.querySelector(".tree-node.focused").innerText.includes("prop1"),
+    "'prop1' node is focused"
+  );
+
+  info(
+    "Testing sidebar.setExpressionResult for an expression returning a longstring"
+  );
+  evalResult = await commands.inspectedWindowCommand.eval(
+    fakeExtCallerInfo,
+    `"ab ".repeat(10000)`,
+    {
+      consoleFront,
+    }
+  );
+  sidebar.setExpressionResult(evalResult);
+
+  await TestUtils.waitForCondition(() => {
+    const longStringEl = sidebarPanelContent.querySelector(
+      ".tree .objectBox-string"
+    );
+    return (
+      longStringEl && longStringEl.textContent.includes("ab ".repeat(10000))
+    );
+  }, "Wait for the longString to be render with its full text");
+  ok(true, "The longString is expanded and its full text is displayed");
+
+  info(
+    "Testing sidebar.setExpressionResult for an expression returning a primitive"
+  );
+  evalResult = await commands.inspectedWindowCommand.eval(
+    fakeExtCallerInfo,
+    `1 + 2`,
+    {
+      consoleFront,
+    }
+  );
+  sidebar.setExpressionResult(evalResult);
+  const numberEl = await TestUtils.waitForCondition(
+    () => sidebarPanelContent.querySelector(".objectBox-number"),
+    "Wait for the result number element to be rendered"
+  );
+  is(numberEl.textContent, "3", `The "1 + 2" expression was evaluated as "3"`);
+});
+
+add_task(async function testSidebarDOMNodeHighlighting() {
+  const { commands } = toolbox;
+  const sidebar = inspector.getPanel(SIDEBAR_ID);
+  const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const expression = "({ body: document.body })";
+
+  const consoleFront = await toolbox.target.getFront("console");
+  const evalResult = await commands.inspectedWindowCommand.eval(
+    fakeExtCallerInfo,
+    expression,
+    {
+      consoleFront,
+    }
+  );
+
+  sidebar.setExpressionResult(evalResult);
+
+  // Wait the DOM node to be rendered inside the component.
+  await waitForObjectInspector(sidebarPanelContent, "node");
+
+  // Wait for the object to be expanded so we only target the "body" property node, and
+  // not the root object element.
+  await TestUtils.waitForCondition(
+    () =>
+      sidebarPanelContent.querySelectorAll(".object-inspector .tree-node")
+        .length > 1
+  );
+
+  // Get and verify the DOMNode and the "open inspector"" icon
+  // rendered inside the ObjectInspector.
+
+  assertObjectInspector(sidebarPanelContent, {
+    expectedDOMNodes: 2,
+    expectedOpenInspectors: 2,
+  });
+
+  // Test highlight DOMNode on mouseover.
+  info("Highlight the node by moving the cursor on it");
+
+  const onNodeHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  moveMouseOnObjectInspectorDOMNode(sidebarPanelContent);
+
+  const { nodeFront } = await onNodeHighlight;
+  is(nodeFront.displayName, "body", "The correct node was highlighted");
+
+  // Test unhighlight DOMNode on mousemove.
+  info("Unhighlight the node by moving away from the node");
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  moveMouseOnPanelCenter(sidebarPanelContent);
+
+  await onNodeUnhighlight;
+  info("The node is no longer highlighted");
+});
+
+add_task(async function testSidebarDOMNodeOpenInspector() {
+  const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
+
+  // Test DOMNode selected in the inspector when "open inspector"" icon clicked.
+  info("Unselect node in the inspector");
+  let onceNewNodeFront = inspector.selection.once("new-node-front");
+  inspector.selection.setNodeFront(null);
+  let nodeFront = await onceNewNodeFront;
+  is(nodeFront, null, "The inspector selection should have been unselected");
+
+  info(
+    "Select the ObjectInspector DOMNode in the inspector panel by clicking on it"
+  );
+
+  // In test mode, shown highlighters are not automatically hidden after a delay to
+  // prevent intermittent test failures from race conditions.
+  // Restore this behavior just for this test because it is explicitly checked.
+  const HIGHLIGHTER_AUTOHIDE_TIMER = inspector.HIGHLIGHTER_AUTOHIDE_TIMER;
+  inspector.HIGHLIGHTER_AUTOHIDE_TIMER = 1000;
+  registerCleanupFunction(() => {
+    // Restore the value to disable autohiding to not impact other tests.
+    inspector.HIGHLIGHTER_AUTOHIDE_TIMER = HIGHLIGHTER_AUTOHIDE_TIMER;
+  });
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  // Once we click the open-inspector icon we expect a new node front to be selected
+  // and the node to have been highlighted and unhighlighted.
+  const onNodeHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  onceNewNodeFront = inspector.selection.once("new-node-front");
+
+  clickOpenInspectorIcon(sidebarPanelContent);
+
+  nodeFront = await onceNewNodeFront;
+  is(nodeFront.displayName, "body", "The correct node has been selected");
+  const { nodeFront: highlightedNodeFront } = await onNodeHighlight;
+  is(
+    highlightedNodeFront.displayName,
+    "body",
+    "The correct node was highlighted"
+  );
+
+  await onNodeUnhighlight;
+});
+
+add_task(async function testSidebarSetExtensionPage() {
+  const sidebar = inspector.getPanel(SIDEBAR_ID);
+  const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
+
+  info("Testing sidebar.setExtensionPage");
+
+  await SpecialPowers.pushPrefEnv({
+    set: [["security.allow_unsafe_parent_loads", true]],
+  });
+
+  const expectedURL =
+    "data:text/html,<!DOCTYPE html><html><body><h1>Extension Page";
+
+  sidebar.setExtensionPage(expectedURL);
+
+  await testSetExtensionPageSidebarPanel(sidebarPanelContent, expectedURL);
+
+  await SpecialPowers.popPrefEnv();
+});
+
+add_task(async function teardownExtensionSidebar() {
+  info("Remove the sidebar instance");
+
+  toolbox.unregisterInspectorExtensionSidebar(SIDEBAR_ID);
+
+  ok(
+    !inspector.sidebar.getTabPanel(SIDEBAR_ID),
+    "The rendered extension sidebar has been removed"
+  );
+
+  const inspectorStoreState = inspector.store.getState();
+
+  Assert.deepEqual(
+    inspectorStoreState.extensionsSidebar,
+    {},
+    "The extensions sidebar Redux store data has been cleared"
+  );
+
+  await extension.unload();
+
+  toolbox = null;
+  inspector = null;
+  extension = null;
+});
+
+add_task(async function testActiveTabOnNonExistingSidebar() {
+  // Set a fake non existing sidebar id in the activeSidebar pref,
+  // to simulate the scenario where an extension has installed a sidebar
+  // which has been saved in the preference but it doesn't exist anymore.
+  await SpecialPowers.pushPrefEnv({
+    set: [["devtools.inspector.activeSidebar", "unexisting-sidebar-id"]],
+  });
+
+  const res = await openInspectorForURL("about:blank");
+  inspector = res.inspector;
+  toolbox = res.toolbox;
+
+  const onceSidebarCreated = toolbox.once(
+    `extension-sidebar-created-${SIDEBAR_ID}`
+  );
+  toolbox.registerInspectorExtensionSidebar(SIDEBAR_ID, {
+    title: SIDEBAR_TITLE,
+  });
+
+  // Wait the extension sidebar to be created and then unregister it to force the tabbar
+  // to select a new one.
+  await onceSidebarCreated;
+  toolbox.unregisterInspectorExtensionSidebar(SIDEBAR_ID);
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "layoutview",
+    "Got the expected inspector sidebar tab selected"
+  );
+
+  await SpecialPowers.popPrefEnv();
+});
diff --git a/devtools/client/inspector/extensions/test/head.js b/devtools/client/inspector/extensions/test/head.js
new file mode 100644
index 0000000000..17d7538904
--- /dev/null
+++ b/devtools/client/inspector/extensions/test/head.js
@@ -0,0 +1,21 @@
+/* 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/. */
+
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+// Import the inspector extensions test helpers (shared between the tests that live
+// in the current devtools test directory and the devtools sidebar tests that live
+// in browser/components/extensions/test/browser).
+Services.scriptloader.loadSubScript(
+  new URL("head_devtools_inspector_sidebar.js", gTestPath).href,
+  this
+);
diff --git a/devtools/client/inspector/extensions/test/head_devtools_inspector_sidebar.js b/devtools/client/inspector/extensions/test/head_devtools_inspector_sidebar.js
new file mode 100644
index 0000000000..73467c3e31
--- /dev/null
+++ b/devtools/client/inspector/extensions/test/head_devtools_inspector_sidebar.js
@@ -0,0 +1,224 @@
+/* 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/. */
+
+/* exported getExtensionSidebarActors, expectNoSuchActorIDs,
+            waitForObjectInspector, testSetExpressionSidebarPanel, assertTreeView,
+            assertObjectInspector, moveMouseOnObjectInspectorDOMNode,
+            moveMouseOnPanelCenter, clickOpenInspectorIcon */
+
+"use strict";
+
+const ACCORDION_LABEL_SELECTOR = ".accordion-header-label";
+const ACCORDION_CONTENT_SELECTOR = ".accordion-content";
+
+// Retrieve the array of all the objectValueGrip actors from the
+// inspector extension sidebars state
+// (used in browser_ext_devtools_panels_elements_sidebar.js).
+function getExtensionSidebarActors(inspector) {
+  const state = inspector.store.getState();
+
+  const actors = [];
+
+  for (const sidebarId of Object.keys(state.extensionsSidebar)) {
+    const sidebarState = state.extensionsSidebar[sidebarId];
+
+    if (
+      sidebarState.viewMode === "object-value-grip-view" &&
+      sidebarState.objectValueGrip &&
+      sidebarState.objectValueGrip.actor
+    ) {
+      actors.push(sidebarState.objectValueGrip.actor);
+    }
+  }
+
+  return actors;
+}
+
+// Test that the specified objectValueGrip actors have been released
+// on the remote debugging server
+// (used in browser_ext_devtools_panels_elements_sidebar.js).
+async function expectNoSuchActorIDs(client, actors) {
+  info(`Test that all the objectValueGrip actors have been released`);
+  for (const actor of actors) {
+    await Assert.rejects(
+      client.request({ to: actor, type: "requestTypes" }),
+      err => err.message == `No such actor for ID: ${actor}`
+    );
+  }
+}
+
+function waitForObjectInspector(panelDoc, waitForNodeWithType = "object") {
+  const selector = `.object-inspector .objectBox-${waitForNodeWithType}`;
+  return TestUtils.waitForCondition(() => {
+    return !!panelDoc.querySelectorAll(selector).length;
+  }, `Wait for objectInspector's node type "${waitForNodeWithType}" to be loaded`);
+}
+
+// Helper function used inside the sidebar.setExtensionPage test case.
+async function testSetExtensionPageSidebarPanel(panelDoc, expectedURL) {
+  const selector = "iframe.inspector-extension-sidebar-page";
+  const iframesCount = await TestUtils.waitForCondition(() => {
+    return panelDoc.querySelectorAll(selector).length;
+  }, "Wait for the extension page iframe");
+
+  is(
+    iframesCount,
+    1,
+    "Got the expected number of iframes in the extension panel"
+  );
+
+  const iframeWindow = panelDoc.querySelector(selector).contentWindow;
+  await TestUtils.waitForCondition(() => {
+    return iframeWindow.document.readyState === "complete";
+  }, "Wait for the extension page iframe to complete to load");
+
+  is(
+    iframeWindow.location.href,
+    expectedURL,
+    "Got the expected url in the extension panel iframe"
+  );
+}
+
+// Helper function used inside the sidebar.setObjectValueGrip test case.
+async function testSetExpressionSidebarPanel(panel, expected) {
+  const { nodesLength, propertiesNames, rootTitle } = expected;
+
+  await waitForObjectInspector(panel);
+
+  const objectInspectors = [...panel.querySelectorAll(".tree")];
+  is(
+    objectInspectors.length,
+    1,
+    "There is the expected number of object inspectors"
+  );
+  const [objectInspector] = objectInspectors;
+
+  await TestUtils.waitForCondition(() => {
+    return objectInspector.querySelectorAll(".node").length >= nodesLength;
+  }, "Wait the objectInspector to have been fully rendered");
+
+  const oiNodes = objectInspector.querySelectorAll(".node");
+
+  is(
+    oiNodes.length,
+    nodesLength,
+    "Got the expected number of nodes in the tree"
+  );
+  const propertiesNodes = [
+    ...objectInspector.querySelectorAll(".object-label"),
+  ].map(el => el.textContent);
+  is(
+    JSON.stringify(propertiesNodes),
+    JSON.stringify(propertiesNames),
+    "Got the expected property names"
+  );
+
+  if (rootTitle) {
+    // Also check that the ObjectInspector is rendered inside
+    // an Accordion component with the expected title.
+    const accordion = panel.querySelector(".accordion");
+
+    ok(accordion, "Got an Accordion component as expected");
+
+    is(
+      accordion.querySelector(ACCORDION_CONTENT_SELECTOR).firstChild,
+      objectInspector,
+      "The ObjectInspector should be inside the Accordion content"
+    );
+
+    is(
+      accordion.querySelector(ACCORDION_LABEL_SELECTOR).textContent,
+      rootTitle,
+      "The Accordion has the expected label"
+    );
+  } else {
+    // Also check that there is no Accordion component rendered
+    // inside the sidebar panel.
+    ok(
+      !panel.querySelector(".accordion"),
+      "Got no Accordion component as expected"
+    );
+  }
+}
+
+function assertTreeView(panelDoc, expectedContent) {
+  const { expectedTreeTables, expectedStringCells, expectedNumberCells } =
+    expectedContent;
+
+  if (expectedTreeTables) {
+    is(
+      panelDoc.querySelectorAll("table.treeTable").length,
+      expectedTreeTables,
+      "The panel document contains the expected number of TreeView components"
+    );
+  }
+
+  if (expectedStringCells) {
+    is(
+      panelDoc.querySelectorAll("table.treeTable .stringCell").length,
+      expectedStringCells,
+      "The panel document contains the expected number of string cells."
+    );
+  }
+
+  if (expectedNumberCells) {
+    is(
+      panelDoc.querySelectorAll("table.treeTable .numberCell").length,
+      expectedNumberCells,
+      "The panel document contains the expected number of number cells."
+    );
+  }
+}
+
+async function assertObjectInspector(panelDoc, expectedContent) {
+  const { expectedDOMNodes, expectedOpenInspectors } = expectedContent;
+
+  // Get and verify the DOMNode and the "open inspector"" icon
+  // rendered inside the ObjectInspector.
+  const nodes = panelDoc.querySelectorAll(".objectBox-node");
+  const nodeOpenInspectors = panelDoc.querySelectorAll(
+    ".objectBox-node .open-inspector"
+  );
+
+  is(
+    nodes.length,
+    expectedDOMNodes,
+    "Found the expected number of ObjectInspector DOMNodes"
+  );
+  is(
+    nodeOpenInspectors.length,
+    expectedOpenInspectors,
+    "Found the expected nuber of open-inspector icons inside the ObjectInspector"
+  );
+}
+
+function moveMouseOnObjectInspectorDOMNode(panelDoc, nodeIndex = 0) {
+  const nodes = panelDoc.querySelectorAll(".objectBox-node");
+  const node = nodes[nodeIndex];
+
+  ok(node, "Found the ObjectInspector DOMNode");
+
+  EventUtils.synthesizeMouseAtCenter(
+    node,
+    { type: "mousemove" },
+    node.ownerDocument.defaultView
+  );
+}
+
+function moveMouseOnPanelCenter(panelDoc) {
+  EventUtils.synthesizeMouseAtCenter(
+    panelDoc,
+    { type: "mousemove" },
+    panelDoc.window
+  );
+}
+
+function clickOpenInspectorIcon(panelDoc, nodeIndex = 0) {
+  const nodes = panelDoc.querySelectorAll(".objectBox-node .open-inspector");
+  const node = nodes[nodeIndex];
+
+  ok(node, "Found the ObjectInspector open-inspector icon");
+
+  node.click();
+}
diff --git a/devtools/client/inspector/extensions/types.js b/devtools/client/inspector/extensions/types.js
new file mode 100644
index 0000000000..187c281031
--- /dev/null
+++ b/devtools/client/inspector/extensions/types.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+// Helpers injected as props by extension-sidebar.js and used by the
+// ObjectInspector component (which is part of the ExpressionResultView).
+exports.serviceContainer = {
+  highlightDomElement: PropTypes.func.isRequired,
+  unHighlightDomElement: PropTypes.func.isRequired,
+  openNodeInInspector: PropTypes.func.isRequired,
+};
diff --git a/devtools/client/inspector/flexbox/actions/flexbox-highlighter.js b/devtools/client/inspector/flexbox/actions/flexbox-highlighter.js
new file mode 100644
index 0000000000..487a4c3b12
--- /dev/null
+++ b/devtools/client/inspector/flexbox/actions/flexbox-highlighter.js
@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * This module exports thunks.
+ * Thunks are functions that can be dispatched to the Inspector Redux store.
+ *
+ * These functions receive one object with options that contains:
+ * - dispatch() => function to dispatch Redux actions to the store
+ * - getState() => function to get the current state of the entire Inspector Redux store
+ * - inspector => object instance of Inspector panel
+ *
+ * They provide a shortcut for React components to invoke the flexbox highlighter
+ * without having to know where the highlighter exists.
+ */
+
+module.exports = {
+  /**
+   * Toggle the flexbox highlighter for the given node front.
+   *
+   * @param {NodeFront} nodeFront
+   *        Node for which the highlighter should be toggled.
+   * @param {String} reason
+   *        Reason why the highlighter was toggled; used in telemetry.
+   */
+  toggleFlexboxHighlighter(nodeFront, reason) {
+    return async thunkOptions => {
+      const { inspector } = thunkOptions;
+      if (!inspector || inspector._destroyed) {
+        return;
+      }
+
+      await inspector.highlighters.toggleFlexboxHighlighter(nodeFront, reason);
+    };
+  },
+};
diff --git a/devtools/client/inspector/flexbox/actions/flexbox.js b/devtools/client/inspector/flexbox/actions/flexbox.js
new file mode 100644
index 0000000000..64c1e1f074
--- /dev/null
+++ b/devtools/client/inspector/flexbox/actions/flexbox.js
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  CLEAR_FLEXBOX,
+  UPDATE_FLEXBOX,
+  UPDATE_FLEXBOX_COLOR,
+  UPDATE_FLEXBOX_HIGHLIGHTED,
+} = require("resource://devtools/client/inspector/flexbox/actions/index.js");
+
+module.exports = {
+  /**
+   * Clears the flexbox state by resetting it back to the initial flexbox state.
+   */
+  clearFlexbox() {
+    return {
+      type: CLEAR_FLEXBOX,
+    };
+  },
+
+  /**
+   * Updates the flexbox state with the newly selected flexbox.
+   */
+  updateFlexbox(flexbox) {
+    return {
+      type: UPDATE_FLEXBOX,
+      flexbox,
+    };
+  },
+
+  /**
+   * Updates the color used for the flexbox's highlighter.
+   *
+   * @param  {String} color
+   *         The color to use for this nodeFront's flexbox highlighter.
+   */
+  updateFlexboxColor(color) {
+    return {
+      type: UPDATE_FLEXBOX_COLOR,
+      color,
+    };
+  },
+
+  /**
+   * Updates the flexbox highlighted state.
+   *
+   * @param  {Boolean} highlighted
+   *         Whether or not the flexbox highlighter is highlighting the flexbox.
+   */
+  updateFlexboxHighlighted(highlighted) {
+    return {
+      type: UPDATE_FLEXBOX_HIGHLIGHTED,
+      highlighted,
+    };
+  },
+};
diff --git a/devtools/client/inspector/flexbox/actions/index.js b/devtools/client/inspector/flexbox/actions/index.js
new file mode 100644
index 0000000000..bc4e30044e
--- /dev/null
+++ b/devtools/client/inspector/flexbox/actions/index.js
@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Clears the flexbox state by resetting it back to the initial flexbox state.
+    "CLEAR_FLEXBOX",
+
+    // Updates the flexbox state with the newly selected flexbox.
+    "UPDATE_FLEXBOX",
+
+    // Updates the color used for the overlay of a flexbox.
+    "UPDATE_FLEXBOX_COLOR",
+
+    // Updates the flexbox highlighted state.
+    "UPDATE_FLEXBOX_HIGHLIGHTED",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/flexbox/actions/moz.build b/devtools/client/inspector/flexbox/actions/moz.build
new file mode 100644
index 0000000000..3e5ab1eda8
--- /dev/null
+++ b/devtools/client/inspector/flexbox/actions/moz.build
@@ -0,0 +1,11 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "flexbox-highlighter.js",
+    "flexbox.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/flexbox/components/FlexContainer.js b/devtools/client/inspector/flexbox/components/FlexContainer.js
new file mode 100644
index 0000000000..c8c264defa
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexContainer.js
@@ -0,0 +1,125 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createRef,
+  Fragment,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormatStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+loader.lazyRequireGetter(
+  this,
+  "getNodeRep",
+  "resource://devtools/client/inspector/shared/node-reps.js"
+);
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
+
+class FlexContainer extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      color: PropTypes.string.isRequired,
+      flexContainer: PropTypes.shape(Types.flexContainer).isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      onSetFlexboxOverlayColor: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.swatchEl = createRef();
+
+    this.setFlexboxColor = this.setFlexboxColor.bind(this);
+  }
+
+  componentDidMount() {
+    const tooltip = this.props.getSwatchColorPickerTooltip();
+
+    let previousColor;
+    tooltip.addSwatch(this.swatchEl.current, {
+      onCommit: this.setFlexboxColor,
+      onPreview: this.setFlexboxColor,
+      onRevert: () => {
+        this.props.onSetFlexboxOverlayColor(previousColor);
+      },
+      onShow: () => {
+        previousColor = this.props.color;
+      },
+    });
+  }
+
+  componentWillUnmount() {
+    const tooltip = this.props.getSwatchColorPickerTooltip();
+    tooltip.removeSwatch(this.swatchEl.current);
+  }
+
+  setFlexboxColor() {
+    const color = this.swatchEl.current.dataset.color;
+    this.props.onSetFlexboxOverlayColor(color);
+  }
+
+  render() {
+    const { color, flexContainer, dispatch } = this.props;
+    const { nodeFront, properties } = flexContainer;
+
+    return createElement(
+      Fragment,
+      null,
+      dom.div(
+        {
+          className: "flex-header-container-label",
+        },
+        getNodeRep(nodeFront, {
+          onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
+          onDOMNodeMouseOver: () => dispatch(highlightNode(nodeFront)),
+        }),
+        dom.button({
+          className: "layout-color-swatch",
+          "data-color": color,
+          ref: this.swatchEl,
+          style: {
+            backgroundColor: color,
+          },
+          title: getFormatStr("layout.colorSwatch.tooltip", color),
+        })
+      ),
+      dom.div(
+        { className: "flex-header-container-properties" },
+        dom.div(
+          {
+            className: "inspector-badge",
+            role: "figure",
+            title: `flex-direction: ${properties["flex-direction"]}`,
+          },
+          properties["flex-direction"]
+        ),
+        dom.div(
+          {
+            className: "inspector-badge",
+            role: "figure",
+            title: `flex-wrap: ${properties["flex-wrap"]}`,
+          },
+          properties["flex-wrap"]
+        )
+      )
+    );
+  }
+}
+
+module.exports = FlexContainer;
diff --git a/devtools/client/inspector/flexbox/components/FlexItem.js b/devtools/client/inspector/flexbox/components/FlexItem.js
new file mode 100644
index 0000000000..b29da8243e
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexItem.js
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+loader.lazyRequireGetter(
+  this,
+  "getNodeRep",
+  "resource://devtools/client/inspector/shared/node-reps.js"
+);
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
+
+class FlexItem extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      flexItem: PropTypes.shape(Types.flexItem).isRequired,
+      index: PropTypes.number.isRequired,
+      scrollToTop: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { dispatch, flexItem, index, scrollToTop, setSelectedNode } =
+      this.props;
+    const { nodeFront } = flexItem;
+
+    return dom.button(
+      {
+        className: "devtools-button devtools-monospace",
+        onClick: e => {
+          e.stopPropagation();
+          scrollToTop();
+          setSelectedNode(nodeFront);
+          dispatch(unhighlightNode());
+        },
+        onMouseOut: () => dispatch(unhighlightNode()),
+        onMouseOver: () => dispatch(highlightNode(nodeFront)),
+      },
+      dom.span({ className: "flex-item-index" }, index),
+      getNodeRep(nodeFront)
+    );
+  }
+}
+
+module.exports = FlexItem;
diff --git a/devtools/client/inspector/flexbox/components/FlexItemList.js b/devtools/client/inspector/flexbox/components/FlexItemList.js
new file mode 100644
index 0000000000..0824ee1175
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexItemList.js
@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+const FlexItem = createFactory(
+  require("resource://devtools/client/inspector/flexbox/components/FlexItem.js")
+);
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+class FlexItemList extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      flexItems: PropTypes.arrayOf(PropTypes.shape(Types.flexItem)).isRequired,
+      scrollToTop: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { dispatch, flexItems, scrollToTop, setSelectedNode } = this.props;
+
+    return dom.div(
+      { className: "flex-item-list" },
+      dom.div(
+        {
+          className: "flex-item-list-header",
+          role: "heading",
+          "aria-level": "3",
+        },
+        !flexItems.length
+          ? getStr("flexbox.noFlexItems")
+          : getStr("flexbox.flexItems")
+      ),
+      flexItems.map((flexItem, index) =>
+        FlexItem({
+          key: flexItem.actorID,
+          dispatch,
+          flexItem,
+          index: index + 1,
+          scrollToTop,
+          setSelectedNode,
+        })
+      )
+    );
+  }
+}
+
+module.exports = FlexItemList;
diff --git a/devtools/client/inspector/flexbox/components/FlexItemSelector.js b/devtools/client/inspector/flexbox/components/FlexItemSelector.js
new file mode 100644
index 0000000000..d8dd2db7a3
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexItemSelector.js
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getSelectorFromGrip,
+  translateNodeFrontToGrip,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+
+loader.lazyRequireGetter(
+  this,
+  "getNodeRep",
+  "resource://devtools/client/inspector/shared/node-reps.js"
+);
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+
+class FlexItemSelector extends PureComponent {
+  static get propTypes() {
+    return {
+      flexItem: PropTypes.shape(Types.flexItem).isRequired,
+      flexItems: PropTypes.arrayOf(PropTypes.shape(Types.flexItem)).isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onShowFlexItemMenu = this.onShowFlexItemMenu.bind(this);
+  }
+
+  onShowFlexItemMenu(event) {
+    event.stopPropagation();
+
+    const { flexItem, flexItems, setSelectedNode } = this.props;
+    const menuItems = [];
+
+    for (const item of flexItems) {
+      const grip = translateNodeFrontToGrip(item.nodeFront);
+      menuItems.push({
+        label: getSelectorFromGrip(grip),
+        type: "checkbox",
+        checked: item === flexItem,
+        click: () => setSelectedNode(item.nodeFront),
+      });
+    }
+
+    showMenu(menuItems, {
+      button: event.target,
+    });
+  }
+
+  render() {
+    const { flexItem } = this.props;
+
+    return dom.button(
+      {
+        id: "flex-item-selector",
+        className: "devtools-button devtools-dropdown-button",
+        onClick: this.onShowFlexItemMenu,
+      },
+      getNodeRep(flexItem.nodeFront)
+    );
+  }
+}
+
+module.exports = FlexItemSelector;
diff --git a/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js b/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
new file mode 100644
index 0000000000..f0c35cd6be
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
@@ -0,0 +1,173 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+class FlexItemSizingOutline extends PureComponent {
+  static get propTypes() {
+    return {
+      flexDirection: PropTypes.string.isRequired,
+      flexItem: PropTypes.shape(Types.flexItem).isRequired,
+    };
+  }
+
+  renderBasisOutline(mainBaseSize) {
+    return dom.div({
+      className: "flex-outline-basis" + (!mainBaseSize ? " zero-basis" : ""),
+    });
+  }
+
+  renderDeltaOutline(mainDeltaSize) {
+    if (!mainDeltaSize) {
+      return null;
+    }
+
+    return dom.div({
+      className: "flex-outline-delta",
+    });
+  }
+
+  renderFinalOutline(isClamped) {
+    return dom.div({
+      className: "flex-outline-final" + (isClamped ? " clamped" : ""),
+    });
+  }
+
+  renderPoint(className, label = className) {
+    return dom.div({
+      key: className,
+      className: `flex-outline-point ${className}`,
+      "data-label": label,
+    });
+  }
+
+  render() {
+    const { flexItemSizing } = this.props.flexItem;
+    const {
+      mainAxisDirection,
+      mainBaseSize,
+      mainDeltaSize,
+      mainMaxSize,
+      mainMinSize,
+      clampState,
+    } = flexItemSizing;
+
+    // Calculate the final size. This is base + delta, then clamped by min or max.
+    let mainFinalSize = mainBaseSize + mainDeltaSize;
+    mainFinalSize = Math.max(mainFinalSize, mainMinSize);
+    mainFinalSize =
+      mainMaxSize === null
+        ? mainFinalSize
+        : Math.min(mainFinalSize, mainMaxSize);
+
+    // Just don't display anything if there isn't anything useful.
+    if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
+      return null;
+    }
+
+    // The max size is only interesting to show if it did clamp the item.
+    const showMax = clampState === "clamped_to_max";
+
+    // The min size is only really interesting if it actually clamped the item.
+    // TODO: We might also want to check if the min-size property is defined.
+    const showMin = clampState === "clamped_to_min";
+
+    // Create an array of all of the sizes we want to display that we can use to create
+    // a grid track template.
+    let sizes = [
+      { name: "basis-start", size: 0 },
+      { name: "basis-end", size: mainBaseSize },
+      { name: "final-start", size: 0 },
+      { name: "final-end", size: mainFinalSize },
+    ];
+
+    // Because mainDeltaSize is just a delta from base, make sure to make it absolute like
+    // the other sizes in the array, so we can later sort all sizes in the same way.
+    if (mainDeltaSize > 0) {
+      sizes.push({ name: "delta-start", size: mainBaseSize });
+      sizes.push({ name: "delta-end", size: mainBaseSize + mainDeltaSize });
+    } else {
+      sizes.push({ name: "delta-start", size: mainBaseSize + mainDeltaSize });
+      sizes.push({ name: "delta-end", size: mainBaseSize });
+    }
+
+    if (showMax) {
+      sizes.push({ name: "max", size: mainMaxSize });
+    }
+    if (showMin) {
+      sizes.push({ name: "min", size: mainMinSize });
+    }
+
+    // Sort all of the dimensions so we can create the grid track template correctly.
+    sizes = sizes.sort((a, b) => a.size - b.size);
+
+    // In some cases, the delta-start may be negative (when an item wanted to shrink more
+    // than the item's base size). As a negative value would break the grid track template
+    // offset all values so they're all positive.
+    const offsetBy = sizes.reduce(
+      (acc, curr) => (curr.size < acc ? curr.size : acc),
+      0
+    );
+    sizes = sizes.map(entry => ({
+      size: entry.size - offsetBy,
+      name: entry.name,
+    }));
+
+    let gridTemplateColumns = "[";
+    let accumulatedSize = 0;
+    for (const { name, size } of sizes) {
+      const breadth = Math.round(size - accumulatedSize);
+      if (breadth === 0) {
+        gridTemplateColumns += ` ${name}`;
+        continue;
+      }
+
+      gridTemplateColumns += `] ${breadth}fr [${name}`;
+      accumulatedSize = size;
+    }
+    gridTemplateColumns += "]";
+
+    // Check the final and basis points to see if they are the same and if so, combine
+    // them into a single rendered point.
+    const renderedBaseAndFinalPoints = [];
+    if (mainFinalSize === mainBaseSize) {
+      renderedBaseAndFinalPoints.push(
+        this.renderPoint("basisfinal", "basis/final")
+      );
+    } else {
+      renderedBaseAndFinalPoints.push(this.renderPoint("basis"));
+      renderedBaseAndFinalPoints.push(this.renderPoint("final"));
+    }
+
+    return dom.div(
+      { className: "flex-outline-container" },
+      dom.div(
+        {
+          className:
+            `flex-outline ${mainAxisDirection}` +
+            (mainDeltaSize > 0 ? " growing" : " shrinking"),
+          style: {
+            gridTemplateColumns,
+          },
+        },
+        renderedBaseAndFinalPoints,
+        showMin ? this.renderPoint("min") : null,
+        showMax ? this.renderPoint("max") : null,
+        this.renderBasisOutline(mainBaseSize),
+        this.renderDeltaOutline(mainDeltaSize),
+        this.renderFinalOutline(clampState !== "unclamped")
+      )
+    );
+  }
+}
+
+module.exports = FlexItemSizingOutline;
diff --git a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
new file mode 100644
index 0000000000..00bea31e57
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -0,0 +1,326 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+const getFlexibilityReasons = ({
+  lineGrowthState,
+  computedFlexGrow,
+  computedFlexShrink,
+  grew,
+  shrank,
+}) => {
+  const reasons = [];
+
+  // Tell users whether the item was set to grow or shrink.
+  if (computedFlexGrow && lineGrowthState === "growing") {
+    reasons.push(getStr("flexbox.itemSizing.setToGrow"));
+  }
+  if (computedFlexShrink && lineGrowthState === "shrinking") {
+    reasons.push(getStr("flexbox.itemSizing.setToShrink"));
+  }
+  if (!computedFlexGrow && !grew && !shrank && lineGrowthState === "growing") {
+    reasons.push(getStr("flexbox.itemSizing.notSetToGrow"));
+  }
+  if (
+    !computedFlexShrink &&
+    !grew &&
+    !shrank &&
+    lineGrowthState === "shrinking"
+  ) {
+    reasons.push(getStr("flexbox.itemSizing.notSetToShrink"));
+  }
+
+  return reasons;
+};
+
+class FlexItemSizingProperties extends PureComponent {
+  static get propTypes() {
+    return {
+      flexDirection: PropTypes.string.isRequired,
+      flexItem: PropTypes.shape(Types.flexItem).isRequired,
+    };
+  }
+
+  /**
+   * Rounds some size in pixels and render it.
+   * The rendered value will end with 'px' (unless the dimension is 0 in which case the
+   * unit will be omitted)
+   *
+   * @param  {Number} value
+   *         The number to be rounded
+   * @param  {Boolean} prependPlusSign
+   *         If set to true, the + sign will be printed before a positive value
+   * @return {Object}
+   *         The React component representing this rounded size
+   */
+  renderSize(value, prependPlusSign) {
+    if (value == 0) {
+      return dom.span({ className: "value" }, "0");
+    }
+
+    value = Math.round(value * 100) / 100;
+    if (prependPlusSign && value > 0) {
+      value = "+" + value;
+    }
+
+    return dom.span(
+      { className: "value" },
+      value,
+      dom.span({ className: "unit" }, "px")
+    );
+  }
+
+  /**
+   * Render an authored CSS property.
+   *
+   * @param  {String} name
+   *         The name for this CSS property
+   * @param  {String} value
+   *         The property value
+   * @param  {Booleam} isDefaultValue
+   *         Whether the value come from the browser default style
+   * @return {Object}
+   *         The React component representing this CSS property
+   */
+  renderCssProperty(name, value, isDefaultValue) {
+    return dom.span({ className: "css-property-link" }, `(${name}: ${value})`);
+  }
+
+  /**
+   * Render a list of sentences to be displayed in the UI as reasons why a certain sizing
+   * value happened.
+   *
+   * @param  {Array} sentences
+   *         The list of sentences as Strings
+   * @return {Object}
+   *         The React component representing these sentences
+   */
+  renderReasons(sentences) {
+    return dom.ul(
+      { className: "reasons" },
+      sentences.map(sentence => dom.li({}, sentence))
+    );
+  }
+
+  renderBaseSizeSection({ mainBaseSize, clampState }, properties, dimension) {
+    const flexBasisValue = properties["flex-basis"];
+    const dimensionValue = properties[dimension];
+
+    let title = getStr("flexbox.itemSizing.baseSizeSectionHeader");
+    let property = null;
+
+    if (flexBasisValue) {
+      // If flex-basis is defined, then that's what is used for the base size.
+      property = this.renderCssProperty("flex-basis", flexBasisValue);
+    } else if (dimensionValue) {
+      // If not and width/height is defined, then that's what defines the base size.
+      property = this.renderCssProperty(dimension, dimensionValue);
+    } else {
+      // Finally, if nothing is set, then the base size is the max-content size.
+      // In this case replace the section's title.
+      title = getStr("flexbox.itemSizing.itemContentSize");
+    }
+
+    const className = "section base";
+    return dom.li(
+      { className: className + (property ? "" : " no-property") },
+      dom.span({ className: "name" }, title, property),
+      this.renderSize(mainBaseSize)
+    );
+  }
+
+  renderFlexibilitySection(
+    flexItemSizing,
+    mainFinalSize,
+    properties,
+    computedStyle
+  ) {
+    const { mainDeltaSize, mainBaseSize, lineGrowthState } = flexItemSizing;
+
+    // Don't display anything if all interesting sizes are 0.
+    if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
+      return null;
+    }
+
+    // Also don't display anything if the item did not grow or shrink.
+    const grew = mainDeltaSize > 0;
+    const shrank = mainDeltaSize < 0;
+    if (!grew && !shrank) {
+      return null;
+    }
+
+    const definedFlexGrow = properties["flex-grow"];
+    const computedFlexGrow = computedStyle.flexGrow;
+    const definedFlexShrink = properties["flex-shrink"];
+    const computedFlexShrink = computedStyle.flexShrink;
+
+    const reasons = getFlexibilityReasons({
+      lineGrowthState,
+      computedFlexGrow,
+      computedFlexShrink,
+      grew,
+      shrank,
+    });
+
+    let property = null;
+
+    if (grew && definedFlexGrow && computedFlexGrow) {
+      // If the item grew it's normally because it was set to grow (flex-grow is non 0).
+      property = this.renderCssProperty("flex-grow", definedFlexGrow);
+    } else if (shrank && definedFlexShrink && computedFlexShrink) {
+      // If the item shrank it's either because flex-shrink is non 0.
+      property = this.renderCssProperty("flex-shrink", definedFlexShrink);
+    } else if (shrank && computedFlexShrink) {
+      // Or also because it's default value is 1 anyway.
+      property = this.renderCssProperty(
+        "flex-shrink",
+        computedFlexShrink,
+        true
+      );
+    }
+
+    // Don't display the section at all if there's nothing useful to show users.
+    if (!property && !reasons.length) {
+      return null;
+    }
+
+    const className = "section flexibility";
+    return dom.li(
+      { className: className + (property ? "" : " no-property") },
+      dom.span(
+        { className: "name" },
+        getStr("flexbox.itemSizing.flexibilitySectionHeader"),
+        property
+      ),
+      this.renderSize(mainDeltaSize, true),
+      this.renderReasons(reasons)
+    );
+  }
+
+  renderMinimumSizeSection(flexItemSizing, properties, dimension) {
+    const { clampState, mainMinSize, mainDeltaSize } = flexItemSizing;
+    const grew = mainDeltaSize > 0;
+    const shrank = mainDeltaSize < 0;
+    const minDimensionValue = properties[`min-${dimension}`];
+
+    // We only display the minimum size when the item actually violates that size during
+    // layout & is clamped.
+    if (clampState !== "clamped_to_min") {
+      return null;
+    }
+
+    const reasons = [];
+    if (grew || shrank) {
+      // The item may have wanted to grow less, but was min-clamped to a larger size.
+      // Or the item may have wanted to shrink more but was min-clamped to a larger size.
+      reasons.push(getStr("flexbox.itemSizing.clampedToMin"));
+    }
+
+    return dom.li(
+      { className: "section min" },
+      dom.span(
+        { className: "name" },
+        getStr("flexbox.itemSizing.minSizeSectionHeader"),
+        minDimensionValue.length
+          ? this.renderCssProperty(`min-${dimension}`, minDimensionValue)
+          : null
+      ),
+      this.renderSize(mainMinSize),
+      this.renderReasons(reasons)
+    );
+  }
+
+  renderMaximumSizeSection(flexItemSizing, properties, dimension) {
+    const { clampState, mainMaxSize, mainDeltaSize } = flexItemSizing;
+    const grew = mainDeltaSize > 0;
+    const shrank = mainDeltaSize < 0;
+    const maxDimensionValue = properties[`max-${dimension}`];
+
+    if (clampState !== "clamped_to_max") {
+      return null;
+    }
+
+    const reasons = [];
+    if (grew || shrank) {
+      // The item may have wanted to grow more than it did, because it was max-clamped.
+      // Or the item may have wanted shrink more, but it was clamped to its max size.
+      reasons.push(getStr("flexbox.itemSizing.clampedToMax"));
+    }
+
+    return dom.li(
+      { className: "section max" },
+      dom.span(
+        { className: "name" },
+        getStr("flexbox.itemSizing.maxSizeSectionHeader"),
+        maxDimensionValue.length
+          ? this.renderCssProperty(`max-${dimension}`, maxDimensionValue)
+          : null
+      ),
+      this.renderSize(mainMaxSize),
+      this.renderReasons(reasons)
+    );
+  }
+
+  renderFinalSizeSection(mainFinalSize) {
+    return dom.li(
+      { className: "section final no-property" },
+      dom.span(
+        { className: "name" },
+        getStr("flexbox.itemSizing.finalSizeSectionHeader")
+      ),
+      this.renderSize(mainFinalSize)
+    );
+  }
+
+  render() {
+    const { flexItem } = this.props;
+    const { computedStyle, flexItemSizing, properties } = flexItem;
+    const {
+      mainAxisDirection,
+      mainBaseSize,
+      mainDeltaSize,
+      mainMaxSize,
+      mainMinSize,
+    } = flexItemSizing;
+    const dimension = mainAxisDirection.startsWith("horizontal")
+      ? "width"
+      : "height";
+
+    // Calculate the final size. This is base + delta, then clamped by min or max.
+    let mainFinalSize = mainBaseSize + mainDeltaSize;
+    mainFinalSize = Math.max(mainFinalSize, mainMinSize);
+    mainFinalSize =
+      mainMaxSize === null
+        ? mainFinalSize
+        : Math.min(mainFinalSize, mainMaxSize);
+
+    return dom.ul(
+      { className: "flex-item-sizing" },
+      this.renderBaseSizeSection(flexItemSizing, properties, dimension),
+      this.renderFlexibilitySection(
+        flexItemSizing,
+        mainFinalSize,
+        properties,
+        computedStyle
+      ),
+      this.renderMinimumSizeSection(flexItemSizing, properties, dimension),
+      this.renderMaximumSizeSection(flexItemSizing, properties, dimension),
+      this.renderFinalSizeSection(mainFinalSize)
+    );
+  }
+}
+
+module.exports = FlexItemSizingProperties;
diff --git a/devtools/client/inspector/flexbox/components/Flexbox.js b/devtools/client/inspector/flexbox/components/Flexbox.js
new file mode 100644
index 0000000000..a0d79d92eb
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/Flexbox.js
@@ -0,0 +1,128 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createFactory,
+  Fragment,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+loader.lazyGetter(this, "FlexItemList", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/flexbox/components/FlexItemList.js")
+  );
+});
+loader.lazyGetter(this, "FlexItemSizingOutline", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js")
+  );
+});
+loader.lazyGetter(this, "FlexItemSizingProperties", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js")
+  );
+});
+loader.lazyGetter(this, "Header", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/flexbox/components/Header.js")
+  );
+});
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+class Flexbox extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      flexbox: PropTypes.shape(Types.flexbox).isRequired,
+      flexContainer: PropTypes.shape(Types.flexContainer).isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      onSetFlexboxOverlayColor: PropTypes.func.isRequired,
+      scrollToTop: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  renderFlexItemList() {
+    const { dispatch, scrollToTop, setSelectedNode } = this.props;
+    const { flexItems } = this.props.flexContainer;
+
+    return FlexItemList({
+      dispatch,
+      flexItems,
+      scrollToTop,
+      setSelectedNode,
+    });
+  }
+
+  renderFlexItemSizing() {
+    const { flexItems, flexItemShown, properties } = this.props.flexContainer;
+
+    const flexItem = flexItems.find(
+      item => item.nodeFront.actorID === flexItemShown
+    );
+    if (!flexItem) {
+      return null;
+    }
+
+    return createElement(
+      Fragment,
+      null,
+      FlexItemSizingOutline({
+        flexDirection: properties["flex-direction"],
+        flexItem,
+      }),
+      FlexItemSizingProperties({
+        flexDirection: properties["flex-direction"],
+        flexItem,
+      })
+    );
+  }
+
+  render() {
+    const {
+      dispatch,
+      flexbox,
+      flexContainer,
+      getSwatchColorPickerTooltip,
+      onSetFlexboxOverlayColor,
+      setSelectedNode,
+    } = this.props;
+
+    if (!flexContainer.actorID) {
+      return dom.div(
+        { className: "devtools-sidepanel-no-result" },
+        getStr("flexbox.noFlexboxeOnThisPage")
+      );
+    }
+
+    const { flexItemShown } = flexContainer;
+    const { color, highlighted } = flexbox;
+
+    return dom.div(
+      { className: "layout-flexbox-wrapper" },
+      Header({
+        color,
+        dispatch,
+        flexContainer,
+        getSwatchColorPickerTooltip,
+        highlighted,
+        onSetFlexboxOverlayColor,
+        setSelectedNode,
+      }),
+      !flexItemShown ? this.renderFlexItemList() : null,
+      flexItemShown ? this.renderFlexItemSizing() : null
+    );
+  }
+}
+
+module.exports = Flexbox;
diff --git a/devtools/client/inspector/flexbox/components/Header.js b/devtools/client/inspector/flexbox/components/Header.js
new file mode 100644
index 0000000000..44b19703e3
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/Header.js
@@ -0,0 +1,142 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createFactory,
+  Fragment,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+const FlexContainer = createFactory(
+  require("resource://devtools/client/inspector/flexbox/components/FlexContainer.js")
+);
+const FlexItemSelector = createFactory(
+  require("resource://devtools/client/inspector/flexbox/components/FlexItemSelector.js")
+);
+
+const Types = require("resource://devtools/client/inspector/flexbox/types.js");
+
+const {
+  toggleFlexboxHighlighter,
+} = require("resource://devtools/client/inspector/flexbox/actions/flexbox-highlighter.js");
+
+class Header extends PureComponent {
+  static get propTypes() {
+    return {
+      color: PropTypes.string.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      flexContainer: PropTypes.shape(Types.flexContainer).isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      highlighted: PropTypes.bool.isRequired,
+      onSetFlexboxOverlayColor: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  renderFlexboxHighlighterToggle() {
+    const { dispatch, flexContainer, highlighted } = this.props;
+    // Don't show the flexbox highlighter toggle for the parent flex container of the
+    // selected element.
+    if (flexContainer.isFlexItemContainer) {
+      return null;
+    }
+
+    return createElement(
+      Fragment,
+      null,
+      dom.div({ className: "devtools-separator" }),
+      dom.input({
+        id: "flexbox-checkbox-toggle",
+        className: "devtools-checkbox-toggle",
+        checked: highlighted,
+        onChange: () =>
+          dispatch(toggleFlexboxHighlighter(flexContainer.nodeFront, "layout")),
+        title: getStr("flexbox.togglesFlexboxHighlighter2"),
+        type: "checkbox",
+      })
+    );
+  }
+
+  renderFlexContainer() {
+    if (this.props.flexContainer.flexItemShown) {
+      return null;
+    }
+
+    const {
+      color,
+      dispatch,
+      flexContainer,
+      getSwatchColorPickerTooltip,
+      onSetFlexboxOverlayColor,
+    } = this.props;
+
+    return FlexContainer({
+      color,
+      dispatch,
+      flexContainer,
+      getSwatchColorPickerTooltip,
+      onSetFlexboxOverlayColor,
+    });
+  }
+
+  renderFlexItemSelector() {
+    if (!this.props.flexContainer.flexItemShown) {
+      return null;
+    }
+
+    const { flexContainer, setSelectedNode } = this.props;
+    const { flexItems, flexItemShown } = flexContainer;
+    const flexItem = flexItems.find(
+      item => item.nodeFront.actorID === flexItemShown
+    );
+
+    if (!flexItem) {
+      return null;
+    }
+
+    return FlexItemSelector({
+      flexItem,
+      flexItems,
+      setSelectedNode,
+    });
+  }
+
+  render() {
+    const { flexContainer, setSelectedNode } = this.props;
+    const { flexItemShown, nodeFront } = flexContainer;
+
+    return dom.div(
+      { className: "flex-header devtools-monospace" },
+      flexItemShown
+        ? dom.button({
+            className: "flex-header-button-prev devtools-button",
+            "aria-label": getStr("flexbox.backButtonLabel"),
+            onClick: e => {
+              e.stopPropagation();
+              setSelectedNode(nodeFront);
+            },
+          })
+        : null,
+      dom.div(
+        {
+          className:
+            "flex-header-content" + (flexItemShown ? " flex-item-shown" : ""),
+        },
+        this.renderFlexContainer(),
+        this.renderFlexItemSelector()
+      ),
+      this.renderFlexboxHighlighterToggle()
+    );
+  }
+}
+
+module.exports = Header;
diff --git a/devtools/client/inspector/flexbox/components/moz.build b/devtools/client/inspector/flexbox/components/moz.build
new file mode 100644
index 0000000000..3e077a217f
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/moz.build
@@ -0,0 +1,16 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "Flexbox.js",
+    "FlexContainer.js",
+    "FlexItem.js",
+    "FlexItemList.js",
+    "FlexItemSelector.js",
+    "FlexItemSizingOutline.js",
+    "FlexItemSizingProperties.js",
+    "Header.js",
+)
diff --git a/devtools/client/inspector/flexbox/flexbox.js b/devtools/client/inspector/flexbox/flexbox.js
new file mode 100644
index 0000000000..3947da3cf9
--- /dev/null
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -0,0 +1,569 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { throttle } = require("resource://devtools/shared/throttle.js");
+
+const {
+  clearFlexbox,
+  updateFlexbox,
+  updateFlexboxColor,
+  updateFlexboxHighlighted,
+} = require("resource://devtools/client/inspector/flexbox/actions/flexbox.js");
+const flexboxReducer = require("resource://devtools/client/inspector/flexbox/reducers/flexbox.js");
+
+loader.lazyRequireGetter(
+  this,
+  "parseURL",
+  "resource://devtools/client/shared/source-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "asyncStorage",
+  "resource://devtools/shared/async-storage.js"
+);
+
+const FLEXBOX_COLOR = "#9400FF";
+
+class FlexboxInspector {
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.selection = inspector.selection;
+    this.store = inspector.store;
+
+    this.store.injectReducer("flexbox", flexboxReducer);
+
+    this.onHighlighterShown = this.onHighlighterShown.bind(this);
+    this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
+    this.onNavigate = this.onNavigate.bind(this);
+    this.onReflow = throttle(this.onReflow, 500, this);
+    this.onSetFlexboxOverlayColor = this.onSetFlexboxOverlayColor.bind(this);
+    this.onSidebarSelect = this.onSidebarSelect.bind(this);
+    this.onUpdatePanel = this.onUpdatePanel.bind(this);
+
+    this.init();
+  }
+
+  init() {
+    if (!this.inspector) {
+      return;
+    }
+
+    this.inspector.highlighters.on(
+      "highlighter-shown",
+      this.onHighlighterShown
+    );
+    this.inspector.highlighters.on(
+      "highlighter-hidden",
+      this.onHighlighterHidden
+    );
+    this.inspector.sidebar.on("select", this.onSidebarSelect);
+
+    this.onSidebarSelect();
+  }
+
+  destroy() {
+    this.selection.off("new-node-front", this.onUpdatePanel);
+    this.inspector.off("new-root", this.onNavigate);
+    this.inspector.off("reflow-in-selected-target", this.onReflow);
+    this.inspector.highlighters.off(
+      "highlighter-shown",
+      this.onHighlighterShown
+    );
+    this.inspector.highlighters.off(
+      "highlighter-hidden",
+      this.onHighlighterHidden
+    );
+    this.inspector.sidebar.off("select", this.onSidebarSelect);
+
+    this._customHostColors = null;
+    this._overlayColor = null;
+    this.document = null;
+    this.inspector = null;
+    this.selection = null;
+    this.store = null;
+  }
+
+  getComponentProps() {
+    return {
+      onSetFlexboxOverlayColor: this.onSetFlexboxOverlayColor,
+    };
+  }
+
+  /**
+   * Returns an object containing the custom flexbox colors for different hosts.
+   *
+   * @return {Object} that maps a host name to a custom flexbox color for a given host.
+   */
+  async getCustomHostColors() {
+    if (this._customHostColors) {
+      return this._customHostColors;
+    }
+
+    // Cache the custom host colors to avoid refetching from async storage.
+    this._customHostColors =
+      (await asyncStorage.getItem("flexboxInspectorHostColors")) || {};
+    return this._customHostColors;
+  }
+
+  /**
+   * Returns the flex container properties for a given node. If the given node is a flex
+   * item, it attempts to fetch the flex container of the parent node of the given node.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront to fetch the flex container properties.
+   * @param  {Boolean} onlyLookAtParents
+   *         Whether or not to only consider the parent node of the given node.
+   * @return {Object} consisting of the given node's flex container's properties.
+   */
+  async getFlexContainerProps(nodeFront, onlyLookAtParents = false) {
+    const layoutFront = await nodeFront.walkerFront.getLayoutInspector();
+    const flexboxFront = await layoutFront.getCurrentFlexbox(
+      nodeFront,
+      onlyLookAtParents
+    );
+
+    if (!flexboxFront) {
+      return null;
+    }
+
+    // If the FlexboxFront doesn't yet have access to the NodeFront for its container,
+    // then get it from the walker. This happens when the walker hasn't seen this
+    // particular DOM Node in the tree yet or when we are connected to an older server.
+    let containerNodeFront = flexboxFront.containerNodeFront;
+    if (!containerNodeFront) {
+      containerNodeFront = await flexboxFront.walkerFront.getNodeFromActor(
+        flexboxFront.actorID,
+        ["containerEl"]
+      );
+    }
+
+    const flexItems = await this.getFlexItems(flexboxFront);
+
+    // If the current selected node is a flex item, display its flex item sizing
+    // properties.
+    let flexItemShown = null;
+    if (onlyLookAtParents) {
+      flexItemShown = this.selection.nodeFront.actorID;
+    } else {
+      const selectedFlexItem = flexItems.find(
+        item => item.nodeFront === this.selection.nodeFront
+      );
+      if (selectedFlexItem) {
+        flexItemShown = selectedFlexItem.nodeFront.actorID;
+      }
+    }
+
+    return {
+      actorID: flexboxFront.actorID,
+      flexItems,
+      flexItemShown,
+      isFlexItemContainer: onlyLookAtParents,
+      nodeFront: containerNodeFront,
+      properties: flexboxFront.properties,
+    };
+  }
+
+  /**
+   * Returns an array of flex items object for the given flex container front.
+   *
+   * @param  {FlexboxFront} flexboxFront
+   *         A flex container FlexboxFront.
+   * @return {Array} of objects containing the flex item front properties.
+   */
+  async getFlexItems(flexboxFront) {
+    const flexItemFronts = await flexboxFront.getFlexItems();
+    const flexItems = [];
+
+    for (const flexItemFront of flexItemFronts) {
+      // Fetch the NodeFront of the flex items.
+      let itemNodeFront = flexItemFront.nodeFront;
+      if (!itemNodeFront) {
+        itemNodeFront = await flexItemFront.walkerFront.getNodeFromActor(
+          flexItemFront.actorID,
+          ["element"]
+        );
+      }
+
+      flexItems.push({
+        actorID: flexItemFront.actorID,
+        computedStyle: flexItemFront.computedStyle,
+        flexItemSizing: flexItemFront.flexItemSizing,
+        nodeFront: itemNodeFront,
+        properties: flexItemFront.properties,
+      });
+    }
+
+    return flexItems;
+  }
+
+  /**
+   * Returns the custom overlay color for the current host or the default flexbox color.
+   *
+   * @return {String} overlay color.
+   */
+  async getOverlayColor() {
+    if (this._overlayColor) {
+      return this._overlayColor;
+    }
+
+    // Cache the overlay color for the current host to avoid repeatably parsing the host
+    // and fetching the custom color from async storage.
+    const customColors = await this.getCustomHostColors();
+    const currentUrl = this.inspector.currentTarget.url;
+    // Get the hostname, if there is no hostname, fall back on protocol
+    // ex: `data:` uri, and `about:` pages
+    const hostname =
+      parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
+    this._overlayColor = customColors[hostname]
+      ? customColors[hostname]
+      : FLEXBOX_COLOR;
+    return this._overlayColor;
+  }
+
+  /**
+   * Returns true if the layout panel is visible, and false otherwise.
+   */
+  isPanelVisible() {
+    return (
+      this.inspector &&
+      this.inspector.toolbox &&
+      this.inspector.sidebar &&
+      this.inspector.toolbox.currentToolId === "inspector" &&
+      this.inspector.sidebar.getCurrentTabID() === "layoutview"
+    );
+  }
+
+  /**
+   * Handler for "highlighter-shown" events emitted by HighlightersOverlay.
+   * If the event is dispatched on behalf of a flex highlighter, toggle the
+   * corresponding flex container's highlighted state in the Redux store.
+   *
+   * @param {Object} data
+   *        Object with data associated with the highlighter event.
+   *        {NodeFront} data.nodeFront
+   *        The NodeFront of the flex container element for which the flexbox
+   *        highlighter is shown for.
+   *        {String} data.type
+   *        Highlighter type
+   */
+  onHighlighterShown(data) {
+    if (data.type === this.inspector.highlighters.TYPES.FLEXBOX) {
+      this.onHighlighterChange(true, data.nodeFront);
+    }
+  }
+
+  /**
+   * Handler for "highlighter-shown" events emitted by HighlightersOverlay.
+   * If the event is dispatched on behalf of a flex highlighter, toggle the
+   * corresponding flex container's highlighted state in the Redux store.
+   *
+   * @param {Object} data
+   *        Object with data associated with the highlighter event.
+   *        {NodeFront} data.nodeFront
+   *        The NodeFront of the flex container element for which the flexbox
+   *        highlighter was previously shown for.
+   *        {String} data.type
+   *        Highlighter type
+   */
+  onHighlighterHidden(data) {
+    if (data.type === this.inspector.highlighters.TYPES.FLEXBOX) {
+      this.onHighlighterChange(false, data.nodeFront);
+    }
+  }
+
+  /**
+   * Updates the flex container highlighted state in the Redux store if the provided
+   * NodeFront is the current selected flex container.
+   *
+   * @param  {Boolean} highlighted
+   *         Whether the change is to highlight or hide the overlay.
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the flex container element for which the flexbox
+   *         highlighter is shown for.
+   */
+  onHighlighterChange(highlighted, nodeFront) {
+    const { flexbox } = this.store.getState();
+
+    if (
+      flexbox.flexContainer.nodeFront === nodeFront &&
+      flexbox.highlighted !== highlighted
+    ) {
+      this.store.dispatch(updateFlexboxHighlighted(highlighted));
+    }
+  }
+
+  /**
+   * Handler for the "new-root" event fired by the inspector. Clears the cached overlay
+   * color for the flexbox highlighter and updates the panel.
+   */
+  onNavigate() {
+    this._overlayColor = null;
+    this.onUpdatePanel();
+  }
+
+  /**
+   * Handler for reflow events fired by the inspector when a node is selected. On reflows,
+   * update the flexbox panel because the shape of the flexbox on the page may have
+   * changed.
+   */
+  async onReflow() {
+    if (
+      !this.isPanelVisible() ||
+      !this.store ||
+      !this.selection.nodeFront ||
+      this._isUpdating
+    ) {
+      return;
+    }
+
+    try {
+      const flexContainer = await this.getFlexContainerProps(
+        this.selection.nodeFront
+      );
+
+      // Clear the flexbox panel if there is no flex container for the current node
+      // selection.
+      if (!flexContainer) {
+        this.store.dispatch(clearFlexbox());
+        return;
+      }
+
+      const { flexbox } = this.store.getState();
+
+      // Compare the new flexbox state of the current selected nodeFront with the old
+      // flexbox state to determine if we need to update.
+      if (hasFlexContainerChanged(flexbox.flexContainer, flexContainer)) {
+        this.update(flexContainer);
+        return;
+      }
+
+      let flexItemContainer = null;
+      // If the current selected node is also the flex container node, check if it is
+      // a flex item of a parent flex container.
+      if (flexContainer.nodeFront === this.selection.nodeFront) {
+        flexItemContainer = await this.getFlexContainerProps(
+          this.selection.nodeFront,
+          true
+        );
+      }
+
+      // Compare the new and old state of the parent flex container properties.
+      if (
+        hasFlexContainerChanged(flexbox.flexItemContainer, flexItemContainer)
+      ) {
+        this.update(flexContainer, flexItemContainer);
+      }
+    } catch (e) {
+      // This call might fail if called asynchrously after the toolbox is finished
+      // closing.
+    }
+  }
+
+  /**
+   * Handler for a change in the flexbox overlay color picker for a flex container.
+   *
+   * @param  {String} color
+   *         A hex string representing the color to use.
+   */
+  async onSetFlexboxOverlayColor(color) {
+    this.store.dispatch(updateFlexboxColor(color));
+
+    const { flexbox } = this.store.getState();
+
+    if (flexbox.highlighted) {
+      this.inspector.highlighters.showFlexboxHighlighter(
+        flexbox.flexContainer.nodeFront
+      );
+    }
+
+    this._overlayColor = color;
+
+    const currentUrl = this.inspector.currentTarget.url;
+    // Get the hostname, if there is no hostname, fall back on protocol
+    // ex: `data:` uri, and `about:` pages
+    const hostname =
+      parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
+    const customColors = await this.getCustomHostColors();
+    customColors[hostname] = color;
+    this._customHostColors = customColors;
+    await asyncStorage.setItem("flexboxInspectorHostColors", customColors);
+  }
+
+  /**
+   * Handler for the inspector sidebar "select" event. Updates the flexbox panel if it
+   * is visible.
+   */
+  onSidebarSelect() {
+    if (!this.isPanelVisible()) {
+      this.inspector.off("reflow-in-selected-target", this.onReflow);
+      this.inspector.off("new-root", this.onNavigate);
+      this.selection.off("new-node-front", this.onUpdatePanel);
+      return;
+    }
+
+    this.inspector.on("reflow-in-selected-target", this.onReflow);
+    this.inspector.on("new-root", this.onNavigate);
+    this.selection.on("new-node-front", this.onUpdatePanel);
+
+    this.update();
+  }
+
+  /**
+   * Handler for "new-root" event fired by the inspector and "new-node-front" event fired
+   * by the inspector selection. Updates the flexbox panel if it is visible.
+   *
+   * @param  {Object}
+   *         This callback is sometimes executed on "new-node-front" events which means
+   *         that a first param is passed here (the nodeFront), which we don't care about.
+   * @param  {String} reason
+   *         On "new-node-front" events, a reason is passed here, and we need it to detect
+   *         if this update was caused by a node selection from the markup-view.
+   */
+  onUpdatePanel(_, reason) {
+    if (!this.isPanelVisible()) {
+      return;
+    }
+
+    this.update(null, null, reason === "treepanel");
+  }
+
+  /**
+   * Updates the flexbox panel by dispatching the new flexbox data. This is called when
+   * the layout view becomes visible or a new node is selected and needs to be update
+   * with new flexbox data.
+   *
+   * @param  {Object|null} flexContainer
+   *         An object consisting of the current flex container's flex items and
+   *         properties.
+   * @param  {Object|null} flexItemContainer
+   *         An object consisting of the parent flex container's flex items and
+   *         properties.
+   * @param  {Boolean} initiatedByMarkupViewSelection
+   *         True if the update was due to a node selection in the markup-view.
+   */
+  async update(
+    flexContainer,
+    flexItemContainer,
+    initiatedByMarkupViewSelection
+  ) {
+    this._isUpdating = true;
+
+    // Stop refreshing if the inspector or store is already destroyed or no node is
+    // selected.
+    if (!this.inspector || !this.store || !this.selection.nodeFront) {
+      this._isUpdating = false;
+      return;
+    }
+
+    try {
+      // Fetch the current flexbox if no flexbox front was passed into this update.
+      if (!flexContainer) {
+        flexContainer = await this.getFlexContainerProps(
+          this.selection.nodeFront
+        );
+      }
+
+      // Clear the flexbox panel if there is no flex container for the current node
+      // selection.
+      if (!flexContainer) {
+        this.store.dispatch(clearFlexbox());
+        this._isUpdating = false;
+        return;
+      }
+
+      if (
+        !flexItemContainer &&
+        flexContainer.nodeFront === this.selection.nodeFront
+      ) {
+        flexItemContainer = await this.getFlexContainerProps(
+          this.selection.nodeFront,
+          true
+        );
+      }
+
+      const highlighted =
+        flexContainer.nodeFront ===
+        this.inspector.highlighters.getNodeForActiveHighlighter(
+          this.inspector.highlighters.TYPES.FLEXBOX
+        );
+      const color = await this.getOverlayColor();
+
+      this.store.dispatch(
+        updateFlexbox({
+          color,
+          flexContainer,
+          flexItemContainer,
+          highlighted,
+          initiatedByMarkupViewSelection,
+        })
+      );
+    } catch (e) {
+      // This call might fail if called asynchrously after the toolbox is finished
+      // closing.
+    }
+
+    this._isUpdating = false;
+  }
+}
+
+/**
+ * For a given flex container object, returns the flex container properties that can be
+ * used to check if 2 flex container objects are the same.
+ *
+ * @param  {Object|null} flexContainer
+ *         Object consisting of the flex container's properties.
+ * @return {Object|null} consisting of the comparable flex container's properties.
+ */
+function getComparableFlexContainerProperties(flexContainer) {
+  if (!flexContainer) {
+    return null;
+  }
+
+  return {
+    flexItems: getComparableFlexItemsProperties(flexContainer.flexItems),
+    nodeFront: flexContainer.nodeFront.actorID,
+    properties: flexContainer.properties,
+  };
+}
+
+/**
+ * Given an array of flex item objects, returns the relevant flex item properties that can
+ * be compared to check if any changes has occurred.
+ *
+ * @param  {Array} flexItems
+ *         Array of objects containing the flex item properties.
+ * @return {Array} of objects consisting of the comparable flex item's properties.
+ */
+function getComparableFlexItemsProperties(flexItems) {
+  return flexItems.map(item => {
+    return {
+      computedStyle: item.computedStyle,
+      flexItemSizing: item.flexItemSizing,
+      nodeFront: item.nodeFront.actorID,
+      properties: item.properties,
+    };
+  });
+}
+
+/**
+ * Compares the old and new flex container properties
+ *
+ * @param  {Object} oldFlexContainer
+ *         Object consisting of the old flex container's properties.
+ * @param  {Object} newFlexContainer
+ *         Object consisting of the new flex container's properties.
+ * @return {Boolean} true if the flex container properties are the same, false otherwise.
+ */
+function hasFlexContainerChanged(oldFlexContainer, newFlexContainer) {
+  return (
+    JSON.stringify(getComparableFlexContainerProperties(oldFlexContainer)) !==
+    JSON.stringify(getComparableFlexContainerProperties(newFlexContainer))
+  );
+}
+
+module.exports = FlexboxInspector;
diff --git a/devtools/client/inspector/flexbox/moz.build b/devtools/client/inspector/flexbox/moz.build
new file mode 100644
index 0000000000..b38f12db55
--- /dev/null
+++ b/devtools/client/inspector/flexbox/moz.build
@@ -0,0 +1,18 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "actions",
+    "components",
+    "reducers",
+]
+
+DevToolsModules(
+    "flexbox.js",
+    "types.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/devtools/client/inspector/flexbox/reducers/flexbox.js b/devtools/client/inspector/flexbox/reducers/flexbox.js
new file mode 100644
index 0000000000..856294a549
--- /dev/null
+++ b/devtools/client/inspector/flexbox/reducers/flexbox.js
@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  CLEAR_FLEXBOX,
+  UPDATE_FLEXBOX,
+  UPDATE_FLEXBOX_COLOR,
+  UPDATE_FLEXBOX_HIGHLIGHTED,
+} = require("resource://devtools/client/inspector/flexbox/actions/index.js");
+
+const INITIAL_FLEXBOX = {
+  // The color of the flexbox highlighter overlay.
+  color: "",
+  // The flex container of the selected element.
+  flexContainer: {
+    // The actor ID of the selected flex container.
+    actorID: "",
+    // An array of flex items belonging to the selected flex container.
+    flexItems: [],
+    // The NodeFront actor ID of the flex item to display in the flex item sizing
+    // properties.
+    flexItemShown: null,
+    // This flag specifies that the flex container data represents the selected flex
+    // container.
+    isFlexItemContainer: false,
+    // The NodeFront of the selected flex container.
+    nodeFront: null,
+    // The computed style properties of the selected flex container.
+    properties: null,
+  },
+  // The selected flex container can also be a flex item. This object contains the
+  // parent flex container properties of the selected element.
+  flexItemContainer: {
+    // The actor ID of the parent flex container.
+    actorID: "",
+    // An array of flex items belonging to the parent flex container.
+    flexItems: [],
+    // The NodeFront actor ID of the flex item to display in the flex item sizing
+    // properties.
+    flexItemShown: null,
+    // This flag specifies that the flex container data represents the parent flex
+    // container of the selected element.
+    isFlexItemContainer: true,
+    // The NodeFront of the parent flex container.
+    nodeFront: null,
+    // The computed styles properties of the parent flex container.
+    properties: null,
+  },
+  // Whether or not the flexbox highlighter is highlighting the flex container.
+  highlighted: false,
+  // Whether or not the node selection that led to the flexbox tool being shown came from
+  // the user selecting a node in the markup-view (whereas, say, selecting in the flex
+  // items list)
+  initiatedByMarkupViewSelection: false,
+};
+
+const reducers = {
+  [CLEAR_FLEXBOX](flexbox, _) {
+    return INITIAL_FLEXBOX;
+  },
+
+  [UPDATE_FLEXBOX](_, { flexbox }) {
+    return flexbox;
+  },
+
+  [UPDATE_FLEXBOX_COLOR](flexbox, { color }) {
+    return {
+      ...flexbox,
+      color,
+    };
+  },
+
+  [UPDATE_FLEXBOX_HIGHLIGHTED](flexbox, { highlighted }) {
+    return {
+      ...flexbox,
+      highlighted,
+    };
+  },
+};
+
+module.exports = function (flexbox = INITIAL_FLEXBOX, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return flexbox;
+  }
+  return reducer(flexbox, action);
+};
diff --git a/devtools/client/inspector/flexbox/reducers/index.js b/devtools/client/inspector/flexbox/reducers/index.js
new file mode 100644
index 0000000000..7f415cb163
--- /dev/null
+++ b/devtools/client/inspector/flexbox/reducers/index.js
@@ -0,0 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+exports.flexbox = require("resource://devtools/client/inspector/flexbox/reducers/flexbox.js");
diff --git a/devtools/client/inspector/flexbox/reducers/moz.build b/devtools/client/inspector/flexbox/reducers/moz.build
new file mode 100644
index 0000000000..4327940888
--- /dev/null
+++ b/devtools/client/inspector/flexbox/reducers/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "flexbox.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/flexbox/test/Ahem.ttf b/devtools/client/inspector/flexbox/test/Ahem.ttf
new file mode 100644
index 0000000000..ac81cb0316
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/Ahem.ttf
diff --git a/devtools/client/inspector/flexbox/test/browser.toml b/devtools/client/inspector/flexbox/test/browser.toml
new file mode 100644
index 0000000000..764dd1ffba
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser.toml
@@ -0,0 +1,91 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "Ahem.ttf",
+  "doc_flexbox_CSS_property_with_!important.html",
+  "doc_flexbox_pseudos.html",
+  "doc_flexbox_specific_cases.html",
+  "doc_flexbox_text_nodes.html",
+  "doc_flexbox_unauthored_min_dimension.html",
+  "doc_flexbox_writing_modes.html",
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_flexbox_accordion_state.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_flexbox_container_and_item.js"]
+
+["browser_flexbox_container_and_item_accordion_state.js"]
+
+["browser_flexbox_container_and_item_updates_on_change.js"]
+
+["browser_flexbox_container_element_rep.js"]
+
+["browser_flexbox_container_properties.js"]
+
+["browser_flexbox_empty_state.js"]
+
+["browser_flexbox_grand_parent_flex.js"]
+
+["browser_flexbox_highlighter_color_picker_on_ESC.js"]
+
+["browser_flexbox_highlighter_color_picker_on_RETURN.js"]
+
+["browser_flexbox_highlighter_opened_telemetry.js"]
+
+["browser_flexbox_item_list_01.js"]
+
+["browser_flexbox_item_list_02.js"]
+
+["browser_flexbox_item_list_updates_on_change.js"]
+
+["browser_flexbox_item_outline_exists.js"]
+
+["browser_flexbox_item_outline_has_correct_layout.js"]
+
+["browser_flexbox_item_outline_hidden_when_useless.js"]
+
+["browser_flexbox_item_outline_renders_basisfinal_points_correctly.js"]
+
+["browser_flexbox_item_outline_rotates_for_column.js"]
+
+["browser_flexbox_item_outline_rotates_for_different_writing_modes.js"]
+
+["browser_flexbox_non_flex_item_is_not_shown.js"]
+
+["browser_flexbox_pseudo_elements_are_listed.js"]
+
+["browser_flexbox_sizing_flexibility_not_displayed_when_useless.js"]
+
+["browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js"]
+
+["browser_flexbox_sizing_info_exists.js"]
+
+["browser_flexbox_sizing_info_for_different_writing_modes.js"]
+
+["browser_flexbox_sizing_info_for_pseudos.js"]
+
+["browser_flexbox_sizing_info_for_text_nodes.js"]
+
+["browser_flexbox_sizing_info_has_correct_sections.js"]
+
+["browser_flexbox_sizing_info_matches_properties_with_!important.js"]
+
+["browser_flexbox_sizing_info_updates_on_change.js"]
+
+["browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js"]
+
+["browser_flexbox_text_nodes_are_listed.js"]
+
+["browser_flexbox_text_nodes_are_not_inlined.js"]
+
+["browser_flexbox_toggle_flexbox_highlighter_01.js"]
+
+["browser_flexbox_toggle_flexbox_highlighter_02.js"]
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_accordion_state.js b/devtools/client/inspector/flexbox/test/browser_flexbox_accordion_state.js
new file mode 100644
index 0000000000..eb4acd8a1b
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_accordion_state.js
@@ -0,0 +1,120 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexbox accordions state is persistent through hide/show in the layout
+// view.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+const ACCORDION_HEADER_SELECTOR = ".accordion-header";
+const ACCORDION_CONTENT_SELECTOR = ".accordion-content";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+
+  await testAccordionState(
+    ":root",
+    FLEXBOX_OPENED_PREF,
+    "#layout-section-flex"
+  );
+  await testAccordionState(
+    "#container-only",
+    FLEX_CONTAINER_OPENED_PREF,
+    "#layout-section-flex-container"
+  );
+  await testAccordionState(
+    "#item-only",
+    FLEX_ITEM_OPENED_PREF,
+    "#layout-section-flex-item"
+  );
+});
+
+async function testAccordionState(target, pref, selector) {
+  const context = await openLayoutViewAndSelectNode(target);
+
+  await testAccordionStateAfterClickingHeader(pref, selector, context);
+  await testAccordionStateAfterSwitchingSidebars(pref, selector, context);
+  await testAccordionStateAfterReopeningLayoutView(pref, selector, context);
+
+  Services.prefs.clearUserPref(pref);
+}
+
+async function testAccordionStateAfterClickingHeader(pref, selector, { doc }) {
+  info("Checking initial state of the flexbox panel.");
+
+  const item = await waitFor(() => doc.querySelector(selector));
+  const header = item.querySelector(ACCORDION_HEADER_SELECTOR);
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  ok(
+    !content.hidden && content.childElementCount > 0,
+    "The flexbox panel content is visible."
+  );
+  ok(Services.prefs.getBoolPref(pref), `${pref} is pref on by default.`);
+
+  info("Clicking the flexbox header to hide the flexbox panel.");
+  header.click();
+
+  info("Checking the new state of the flexbox panel.");
+  ok(content.hidden, "The flexbox panel content is hidden.");
+  ok(!Services.prefs.getBoolPref(pref), `${pref} is pref off.`);
+}
+
+async function testAccordionStateAfterSwitchingSidebars(
+  pref,
+  selector,
+  { doc, inspector }
+) {
+  info(
+    "Checking the flexbox accordion state is persistent after switching sidebars."
+  );
+
+  const item = await waitFor(() => doc.querySelector(selector));
+
+  info("Selecting the computed view.");
+  inspector.sidebar.select("computedview");
+
+  info("Selecting the layout view.");
+  inspector.sidebar.select("layoutview");
+
+  info("Checking the state of the flexbox panel.");
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  ok(content.hidden, "The flexbox panel content is hidden.");
+  ok(!Services.prefs.getBoolPref(pref), `${pref} is pref off.`);
+}
+
+async function testAccordionStateAfterReopeningLayoutView(
+  pref,
+  selector,
+  { target, toolbox }
+) {
+  info(
+    "Checking the flexbox accordion state is persistent after closing and re-opening the layout view."
+  );
+
+  info("Closing the toolbox.");
+  await toolbox.destroy();
+
+  info("Re-opening the layout view.");
+  const { doc } = await openLayoutViewAndSelectNode(target);
+  const item = await waitFor(() => doc.querySelector(selector));
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  info("Checking the state of the flexbox panel.");
+  ok(content.hidden, "The flexbox panel content is hidden.");
+  ok(!Services.prefs.getBoolPref(pref), `${pref} is pref off.`);
+}
+
+async function openLayoutViewAndSelectNode(target) {
+  const { inspector, flexboxInspector, toolbox } = await openLayoutView();
+  await selectNode(target, inspector);
+
+  return {
+    doc: flexboxInspector.document,
+    inspector,
+    target,
+    toolbox,
+  };
+}
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item.js b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item.js
new file mode 100644
index 0000000000..d77ec6d9e4
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container accordion and flex item accordion are both rendered when
+// the selected element is both a flex container and item.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .container {
+      display: flex;
+    }
+  </style>
+  <div id="container" class="container">
+    <div id="item" class="container">
+      <div></div>
+    </div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onAccordionsRendered = waitForDOM(doc, ".accordion-item", 4);
+  await selectNode("#item", inspector);
+  const [flexItemPane, flexContainerPane] = await onAccordionsRendered;
+
+  ok(flexItemPane, "The flex item accordion pane is rendered.");
+  ok(flexContainerPane, "The flex container accordion pane is rendered.");
+  is(
+    flexItemPane.children[0].textContent,
+    "Flex Item of div#container.container",
+    "Got the correct header for the flex item pane."
+  );
+  is(
+    flexContainerPane.children[0].textContent,
+    "Flex Container",
+    "Got the correct header for the flex container pane."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js
new file mode 100644
index 0000000000..0339845618
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the order in which accordion items are shown for container-item elements.
+// For those combined types, the container accordion is shown first if the selection came
+// from the markup-view, because we assume in this case that users do want to see the
+// element selected as a container first.
+// However when users select an item in the list of items in the container accordion (or
+// in the item selector dropdown), then the item accordion should be shown first.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select a flex container-only node");
+  await selectNode("#container-only", inspector);
+  await waitUntil(
+    () => doc.querySelectorAll(".flex-header-container-properties").length
+  );
+
+  info("Check that there is only 1 accordion for displayed");
+  let accordions = doc.querySelectorAll(".flex-accordion");
+  is(accordions.length, 1, "There's only 1 accordion");
+  is(
+    accordions[0].id,
+    "layout-section-flex-container",
+    "The accordion is the container type"
+  );
+
+  info("Select a flex container+item node by clicking in the markup-view");
+  await clickOnNodeInMarkupView("#container-and-item", inspector);
+  await waitUntil(() => doc.querySelectorAll(".flex-accordion").length === 2);
+
+  info(
+    "Check that the 2 accordions are displayed, with container type being first"
+  );
+  accordions = doc.querySelectorAll(".flex-accordion");
+  is(accordions.length, 2, "There are 2 accordions");
+  is(
+    accordions[0].id,
+    "layout-section-flex-container",
+    "The first accordion is the container type"
+  );
+  is(
+    accordions[1].id,
+    "layout-section-flex-item",
+    "The second accordion is the item type"
+  );
+
+  info("Select the container-only node again");
+  await selectNode("#container-only", inspector);
+  await waitUntil(() => doc.querySelectorAll(".flex-accordion").length === 1);
+
+  info("Wait until the accordion item list points to the correct item");
+  await waitUntil(() =>
+    doc
+      .querySelector(".flex-item-list button")
+      .textContent.includes("container-and-item")
+  );
+  info(
+    "Click on the container+item node right there in the accordion item list"
+  );
+  doc.querySelector(".flex-item-list button").click();
+  await waitUntil(() => doc.querySelectorAll(".flex-accordion").length === 2);
+
+  info(
+    "Check that the 2 accordions are displayed again, with item type being first"
+  );
+  accordions = doc.querySelectorAll(".flex-accordion");
+  is(accordions.length, 2, "There are 2 accordions again");
+  is(
+    accordions[0].id,
+    "layout-section-flex-item",
+    "The first accordion is the item type"
+  );
+  is(
+    accordions[1].id,
+    "layout-section-flex-container",
+    "The second accordion is the container type"
+  );
+});
+
+async function clickOnNodeInMarkupView(selector, inspector) {
+  const { selection, markup } = inspector;
+
+  await markup.expandAll(selection.nodeFront);
+  const nodeFront = await getNodeFront(selector, inspector);
+  const markupContainer = markup.getContainer(nodeFront);
+
+  const onSelected = inspector.once("inspector-updated");
+  EventUtils.synthesizeMouseAtCenter(
+    markupContainer.tagLine,
+    { type: "mousedown" },
+    markup.doc.defaultView
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    markupContainer.tagLine,
+    { type: "mouseup" },
+    markup.doc.defaultView
+  );
+  await onSelected;
+}
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_updates_on_change.js b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_updates_on_change.js
new file mode 100644
index 0000000000..af62ac2ff0
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_updates_on_change.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container accordion is rendered when a flex item is updated to
+// also be a flex container.
+
+const TEST_URI = `
+  <style>
+    .container {
+      display: flex;
+    }
+  </style>
+  <div id="container" class="container">
+    <div id="item">
+      <div></div>
+    </div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode("#item", inspector);
+  const [flexSizingContainer] = await onFlexItemSizingRendered;
+
+  ok(flexSizingContainer, "The flex sizing info is rendered.");
+
+  info("Changing the flexbox in the page.");
+  const onAccordionsChanged = waitForDOM(doc, ".accordion-item", 4);
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => (content.document.getElementById("item").className = "container")
+  );
+  const [flexItemPane, flexContainerPane] = await onAccordionsChanged;
+
+  ok(flexItemPane, "The flex item accordion pane is rendered.");
+  ok(flexContainerPane, "The flex container accordion pane is rendered.");
+  is(
+    flexItemPane.children[0].textContent,
+    "Flex Item of div#container.container",
+    "Got the correct header for the flex item pane."
+  );
+  is(
+    flexContainerPane.children[0].textContent,
+    "Flex Container",
+    "Got the correct header for the flex container pane."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_container_element_rep.js b/devtools/client/inspector/flexbox/test/browser_flexbox_container_element_rep.js
new file mode 100644
index 0000000000..d2d83527b9
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_element_rep.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container's element rep will display the box model highlighter on
+// hover.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  const onFlexContainerRepRendered = waitForDOM(
+    doc,
+    ".flex-header-content .objectBox"
+  );
+  await selectNode("#container", inspector);
+  const [flexContainerRep] = await onFlexContainerRepRendered;
+
+  ok(flexContainerRep, "The flex container element rep is rendered.");
+
+  info("Listen to node-highlight event and mouse over the rep");
+  const onHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  EventUtils.synthesizeMouse(
+    flexContainerRep,
+    10,
+    5,
+    { type: "mouseover" },
+    doc.defaultView
+  );
+  const { nodeFront } = await onHighlight;
+
+  ok(nodeFront, "nodeFront was returned from highlighting the node.");
+  is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName.");
+  is(
+    nodeFront.attributes[0].name,
+    "id",
+    "The highlighted node has the correct attributes."
+  );
+  is(
+    nodeFront.attributes[0].value,
+    "container",
+    "The highlighted node has the correct id."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js b/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js
new file mode 100644
index 0000000000..cf75d74ffe
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container properties are shown when a flex container is selected.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #container1 {
+      display: flex;
+    }
+  </style>
+  <div id="container1">
+    <div id="item"></div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info(
+    "Selecting the flex container #container1 and checking the values of the flex " +
+      "container properties for #container1."
+  );
+  const onFlexContainerPropertiesRendered = waitForDOM(
+    doc,
+    ".flex-header-container-properties"
+  );
+  await selectNode("#container1", inspector);
+  const [flexContainerProperties] = await onFlexContainerPropertiesRendered;
+
+  ok(flexContainerProperties, "The flex container properties is rendered.");
+  is(
+    flexContainerProperties.children[0].textContent,
+    "row",
+    "Got expected flex-direction."
+  );
+  is(
+    flexContainerProperties.children[1].textContent,
+    "nowrap",
+    "Got expected flex-wrap."
+  );
+
+  info(
+    "Selecting a flex item and expecting the flex container properties to not be " +
+      "shown."
+  );
+  const onFlexHeaderRendered = waitForDOM(doc, ".flex-header");
+  await selectNode("#item", inspector);
+  const [flexHeader] = await onFlexHeaderRendered;
+
+  ok(
+    !flexHeader.querySelector(".flex-header-container-properties"),
+    "The flex container properties is not shown in the header."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_empty_state.js b/devtools/client/inspector/flexbox/test/browser_flexbox_empty_state.js
new file mode 100644
index 0000000000..82e523ebe0
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_empty_state.js
@@ -0,0 +1,24 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a message is displayed when no flex container is selected.
+
+const TEST_URI = `
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Checking the initial state of the Flexbox Inspector.");
+  ok(
+    doc.querySelector(
+      ".flex-accordion .devtools-sidepanel-no-result",
+      "A message is shown when no flex container is selected."
+    )
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_grand_parent_flex.js b/devtools/client/inspector/flexbox/test/browser_flexbox_grand_parent_flex.js
new file mode 100644
index 0000000000..8617def08b
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_grand_parent_flex.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a flex container is not shown as a flex item of its grandparent flex
+// container.
+
+const TEST_URI = `
+<style>
+.flex {
+  display: flex;
+}
+</style>
+<div class="flex">
+  <div>
+    <div id="grandchild" class="flex">
+      This is a flex item of a flex container.
+      Its parent isn't a flex container, but its grandparent is.
+    </div>
+  </div>
+</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the flex container's grandchild.");
+  const onFlexContainerHeaderRendered = waitForDOM(
+    doc,
+    ".flex-header-container-label"
+  );
+  await selectNode("#grandchild", inspector);
+  await onFlexContainerHeaderRendered;
+
+  info("Check that only the Flex Container accordion item is showing.");
+  const flexPanes = doc.querySelectorAll(".flex-accordion");
+  is(
+    flexPanes.length,
+    1,
+    "There should only be one flex accordion item showing."
+  );
+
+  info("Check that the container header shows Flex Container.");
+  const flexAccordionHeader = flexPanes[0].querySelector(
+    ".accordion-header-label"
+  );
+  is(
+    flexAccordionHeader.textContent,
+    "Flex Container",
+    "The flexbox pane shows a flex container accordion item."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_ESC.js b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_ESC.js
new file mode 100644
index 0000000000..59b24ba512
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_ESC.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const asyncStorage = require("resource://devtools/shared/async-storage.js");
+
+// Test that the flexbox highlighter color change in the color picker is reverted when
+// ESCAPE is pressed.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  // Make sure there are no custom highlighter colors stored before starting.
+  await asyncStorage.removeItem("flexboxInspectorHostColors");
+
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, layoutView } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { store } = inspector;
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const spectrum = cPicker.spectrum;
+
+  const onColorSwatchRendered = waitForDOM(
+    doc,
+    ".layout-flexbox-wrapper .layout-color-swatch"
+  );
+  await selectNode("#container", inspector);
+  const [swatch] = await onColorSwatchRendered;
+
+  info("Checking the initial state of the Flexbox Inspector color picker.");
+  is(
+    swatch.style.backgroundColor,
+    "rgb(148, 0, 255)",
+    "The color swatch's background is correct."
+  );
+  is(
+    store.getState().flexbox.color,
+    "#9400FF",
+    "The flexbox color state is correct."
+  );
+
+  info("Opening the color picker by clicking on the color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]);
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated."
+  );
+
+  info("Pressing ESCAPE to close the tooltip.");
+  const onColorUpdate = waitUntilState(
+    store,
+    state => state.flexbox.color === "#9400FF"
+  );
+  const onColorPickerHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "ESCAPE");
+  await onColorPickerHidden;
+  await onColorUpdate;
+
+  is(
+    swatch.style.backgroundColor,
+    "rgb(148, 0, 255)",
+    "The color swatch's background was reverted after ESCAPE."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js
new file mode 100644
index 0000000000..46c6a7022c
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const asyncStorage = require("resource://devtools/shared/async-storage.js");
+
+// Test that the flexbox highlighter color change in the color picker is committed when
+// RETURN is pressed.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  // Make sure there are no custom highlighter colors stored before starting.
+  await asyncStorage.removeItem("flexboxInspectorHostColors");
+
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, layoutView } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { store } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const spectrum = cPicker.spectrum;
+
+  const onColorSwatchRendered = waitForDOM(
+    doc,
+    ".layout-flexbox-wrapper .layout-color-swatch"
+  );
+  await selectNode("#container", inspector);
+  const [swatch] = await onColorSwatchRendered;
+
+  const checkbox = doc.getElementById("flexbox-checkbox-toggle");
+
+  info("Checking the initial state of the Flexbox Inspector color picker.");
+  ok(!checkbox.checked, "Flexbox highlighter toggle is unchecked.");
+  is(
+    swatch.style.backgroundColor,
+    "rgb(148, 0, 255)",
+    "The color swatch's background is correct."
+  );
+  is(
+    store.getState().flexbox.color,
+    "#9400FF",
+    "The flexbox color state is correct."
+  );
+
+  info("Toggling ON the flexbox highlighter.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.flexbox.highlighted
+  );
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Opening the color picker by clicking on the color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]);
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated."
+  );
+
+  info("Pressing RETURN to commit the color change.");
+  const onColorUpdate = waitUntilState(
+    store,
+    state => state.flexbox.color === "#00FF0080"
+  );
+  const onColorPickerHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onColorPickerHidden;
+  await onColorUpdate;
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was kept after RETURN."
+  );
+
+  info("Toggling OFF the flexbox highlighter.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  checkbox.click();
+  await onHighlighterHidden;
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_opened_telemetry.js b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_opened_telemetry.js
new file mode 100644
index 0000000000..62c63e8b9f
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_opened_telemetry.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry is correct when the flexbox highlighter is activated from
+// the layout view.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  startTelemetry();
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const onFlexHighlighterToggleRendered = waitForDOM(
+    doc,
+    "#flexbox-checkbox-toggle"
+  );
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  await toggleHighlighterON(flexHighlighterToggle, inspector);
+  await toggleHighlighterOFF(flexHighlighterToggle, inspector);
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.layout.flexboxhighlighter.opened", "", 1, "scalar");
+  checkTelemetry(
+    "DEVTOOLS_FLEXBOX_HIGHLIGHTER_TIME_ACTIVE_SECONDS",
+    "",
+    null,
+    "hasentries"
+  );
+}
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_01.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_01.js
new file mode 100644
index 0000000000..d7a8ae184a
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_01.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+// Test the flex item list is empty when there are no flex items for the selected flex
+// container.
+
+const TEST_URI = `
+  <div id="container" style="display:flex">
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { getActiveHighlighter } = getHighlighterTestHelpers(inspector);
+
+  const onFlexHeaderRendered = waitForDOM(doc, ".flex-header");
+  await selectNode("#container", inspector);
+  const [flexHeader] = await onFlexHeaderRendered;
+  const flexHighlighterToggle = flexHeader.querySelector(
+    "#flexbox-checkbox-toggle"
+  );
+  const flexItemListHeader = doc.querySelector(".flex-item-list-header");
+
+  info("Checking the state of the Flexbox Inspector.");
+  ok(flexHeader, "The flex container header is rendered.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  is(
+    flexItemListHeader.textContent,
+    getStr("flexbox.noFlexItems"),
+    "The flex item list header shows 'No flex items' when there are no items."
+  );
+  ok(
+    !flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is unchecked."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
new file mode 100644
index 0000000000..5433727c6a
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item list can be used to navigated to the selected flex item.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexItemListRendered = waitForDOM(doc, ".flex-item-list");
+  await selectNode("#container", inspector);
+  const [flexItemList] = await onFlexItemListRendered;
+
+  info("Checking the initial state of the flex item list.");
+  ok(flexItemList, "The flex item list is rendered.");
+  is(
+    flexItemList.querySelectorAll("button").length,
+    1,
+    "Got the correct number of flex items in the list."
+  );
+
+  info("Clicking on the first flex item to navigate to the flex item.");
+  const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
+  flexItemList.querySelector("button").click();
+  const [flexOutlineContainer] = await onFlexItemOutlineRendered;
+
+  info("Checking the selected flex item state.");
+  ok(flexOutlineContainer, "The flex outline is rendered.");
+  ok(!doc.querySelector(".flex-item-list"), "The flex item list is not shown.");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_updates_on_change.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_updates_on_change.js
new file mode 100644
index 0000000000..95cbb2da2d
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_updates_on_change.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item list updates on changes to the number of flex items in the
+// flex container.
+
+const TEST_URI = `
+  <style>
+    #container {
+      display: flex;
+    }
+  </style>
+  <div id="container">
+    <div></div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexItemListRendered = waitForDOM(doc, ".flex-item-list");
+  await selectNode("#container", inspector);
+  const [flexItemList] = await onFlexItemListRendered;
+
+  info("Checking the initial state of the flex item list.");
+  ok(flexItemList, "The flex item list is rendered.");
+  is(
+    flexItemList.querySelectorAll("button").length,
+    1,
+    "Got the correct number of flex items in the list."
+  );
+
+  info("Changing the flexbox in the page.");
+  const onFlexItemListChanged = waitForDOM(doc, ".flex-item-list > button", 2);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const div = content.document.createElement("div");
+    content.document.getElementById("container").appendChild(div);
+  });
+  const elements = await onFlexItemListChanged;
+
+  info("Checking the flex item list is correct.");
+  is(elements.length, 2, "Flex item list was changed.");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_exists.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_exists.js
new file mode 100644
index 0000000000..eba6ec03f0
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_exists.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item outline exists when a flex item is selected.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  // Select a flex item in the test document and wait for the outline to be rendered.
+  const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
+  await selectNode(".item", inspector);
+  const [flexOutlineContainer] = await onFlexItemOutlineRendered;
+
+  ok(flexOutlineContainer, "The flex outline exists in the DOM");
+
+  const [basis, final] = [
+    ...flexOutlineContainer.querySelectorAll(
+      ".flex-outline-basis, .flex-outline-final"
+    ),
+  ];
+
+  ok(basis, "The basis outline exists");
+  ok(final, "The final outline exists");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js
new file mode 100644
index 0000000000..e81d6f5677
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item outline has a correct layout. This outline is built using css
+// grid under the hood to position everything. So we want to check that the template for
+// this grid has been correctly generated depending on the item that is currently
+// selected.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+const TEST_DATA = [
+  {
+    selector: ".shrinking .item",
+    expectedGridTemplate:
+      "[basis-start final-start] 300fr [final-end delta-start] " +
+      "200fr [basis-end delta-end]",
+  },
+  {
+    selector: ".shrinking.is-clamped .item",
+    expectedGridTemplate:
+      "[basis-start final-start] 300fr [delta-start] " +
+      "50fr [final-end min] 150fr [basis-end delta-end]",
+  },
+  {
+    selector: ".growing .item",
+    expectedGridTemplate:
+      "[basis-start final-start] 200fr [basis-end delta-start] " +
+      "100fr [final-end delta-end]",
+  },
+  {
+    selector: ".growing.is-clamped .item",
+    expectedGridTemplate:
+      "[basis-start final-start] 200fr [basis-end delta-start] " +
+      "50fr [final-end max] 50fr [delta-end]",
+  },
+  {
+    selector: "#wanted-to-shrink-more-than-basis div:first-child",
+    expectedGridTemplate:
+      "[delta-start] 63fr [basis-start final-start] " +
+      "60fr [final-end min] 140fr [basis-end delta-end]",
+  },
+];
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  for (const { selector, expectedGridTemplate } of TEST_DATA) {
+    info(
+      `Checking the grid template for the flex item outline for ${selector}`
+    );
+
+    await selectNode(selector, inspector);
+    await waitUntil(() => {
+      const flexOutline = doc.querySelector(".flex-outline");
+      return (
+        flexOutline &&
+        flexOutline.style.gridTemplateColumns === expectedGridTemplate
+      );
+    });
+
+    ok(true, "Grid template is correct");
+  }
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js
new file mode 100644
index 0000000000..e0c1cab942
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item outline is not rendered when it isn't useful.
+// For now, that means when the item's base, delta and final sizes are all 0.
+
+const TEST_URI = `
+  <div style="display:flex">
+    <div></div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info(
+    "Select the item in the document and wait for the sizing section to appear"
+  );
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode("div > div", inspector);
+  const [flexSizingContainer] = await onFlexItemSizingRendered;
+
+  const outlineEls = doc.querySelectorAll(".flex-outline-container");
+  is(outlineEls.length, 0, "The outline has not been rendered for this item");
+
+  info("Also check that the sizing section shows the correct information");
+  const allSections = [
+    ...flexSizingContainer.querySelectorAll(".section .name"),
+  ];
+
+  is(allSections.length, 2, "There are 2 parts in the sizing section");
+  is(
+    allSections[0].textContent,
+    "Content Size",
+    "The first part is the content size"
+  );
+  is(
+    allSections[1].textContent,
+    "Final Size",
+    "The second part is the final size"
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_renders_basisfinal_points_correctly.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_renders_basisfinal_points_correctly.js
new file mode 100644
index 0000000000..d2a2ce94fd
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_renders_basisfinal_points_correctly.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item outline renders the basis and final points as a single point
+// if their sizes are equal. If not, then render as separate points.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc, store } = flexboxInspector;
+
+  info("Select a flex item whose basis size matches its final size.");
+  let onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
+  await selectNode(".item", inspector);
+  await onUpdate;
+
+  const [basisFinalPoint] = [
+    ...doc.querySelectorAll(".flex-outline-point.basisfinal"),
+  ];
+
+  ok(basisFinalPoint, "The basis/final point exists");
+
+  info("Select a flex item whose basis size is different than its final size.");
+  onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
+  await selectNode(".shrinking .item", inspector);
+  await onUpdate;
+
+  const [basis, final] = [
+    ...doc.querySelectorAll(
+      ".flex-outline-point.basis, .flex-outline-point.final"
+    ),
+  ];
+
+  ok(basis, "The basis point exists");
+  ok(final, "The final point exists");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_column.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_column.js
new file mode 100644
index 0000000000..f26ca751cd
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_column.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item outline is rotated for flex items in a column flexbox layout.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  // Select a flex item in the row flexbox layout.
+  let onFlexItemOutlineRendered = waitForDOM(
+    doc,
+    ".flex-outline-container .flex-outline"
+  );
+  await selectNode(".container .item", inspector);
+  let [flexOutline] = await onFlexItemOutlineRendered;
+
+  ok(
+    flexOutline.classList.contains("horizontal-lr"),
+    "The flex outline has the horizontal-lr class"
+  );
+
+  // Check that the outline is wider than it is tall in the configuration.
+  let bounds = flexOutline.getBoxQuads()[0].getBounds();
+  Assert.greater(bounds.width, bounds.height, "The outline looks like a row");
+
+  // Select a flex item in the column flexbox layout.
+  onFlexItemOutlineRendered = waitForDOM(
+    doc,
+    ".flex-outline-container .flex-outline"
+  );
+  await selectNode(".container.column .item", inspector);
+  await waitUntil(() => {
+    flexOutline = doc.querySelector(
+      ".flex-outline-container .flex-outline.vertical-tb"
+    );
+    return flexOutline;
+  });
+  ok(true, "The flex outline has the vertical-tb class");
+
+  // Check that the outline is taller than it is wide in the configuration.
+  bounds = flexOutline.getBoxQuads()[0].getBounds();
+  Assert.greater(
+    bounds.height,
+    bounds.width,
+    "The outline looks like a column"
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_different_writing_modes.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_different_writing_modes.js
new file mode 100644
index 0000000000..860f2c2337
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_different_writing_modes.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item outline is rotated to match its main axis direction.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_writing_modes.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Check that the row flex item rotated to vertical-bt.");
+  let onFlexItemOutlineRendered = waitForDOM(
+    doc,
+    ".flex-outline-container .flex-outline"
+  );
+  await selectNode(".row.vertical-bt.item", inspector);
+  let [flexOutline] = await onFlexItemOutlineRendered;
+
+  ok(
+    flexOutline.classList.contains("vertical-bt"),
+    "Row outline has been rotated to vertical-bt."
+  );
+
+  info("Check that the column flex item rotated to horizontal-rl.");
+  onFlexItemOutlineRendered = waitForDOM(
+    doc,
+    ".flex-outline-container .flex-outline"
+  );
+  await selectNode(".column.horizontal-rl.item", inspector);
+  await waitUntil(() => {
+    flexOutline = doc.querySelector(
+      ".flex-outline-container .flex-outline.horizontal-rl"
+    );
+    return flexOutline;
+  });
+
+  ok(true, "Column outline has been rotated to horizontal-rl.");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_non_flex_item_is_not_shown.js b/devtools/client/inspector/flexbox/test/browser_flexbox_non_flex_item_is_not_shown.js
new file mode 100644
index 0000000000..92422ea490
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_non_flex_item_is_not_shown.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that an element that is the child of a flex container but is not actually a flex
+// item is not shown in the sidebar when selected.
+
+const TEST_URI = `
+<div style="display:flex">
+  <div id="item" style="position:absolute;">test</div>
+</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the container's supposed flex item.");
+  await selectNode("#item", inspector);
+  const noFlexContainerOrItemSelected = doc.querySelector(
+    ".flex-accordion .devtools-sidepanel-no-result"
+  );
+
+  ok(
+    noFlexContainerOrItemSelected,
+    "The flexbox pane shows a message to select a flex container or item to continue."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js b/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js
new file mode 100644
index 0000000000..c69e4c92b6
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js
@@ -0,0 +1,28 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that pseudo-elements that are flex items do appear in the list of items.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_pseudos.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  // Select the flex container in the inspector.
+  const onItemsListRendered = waitForDOM(
+    doc,
+    ".layout-flexbox-wrapper .flex-item-list"
+  );
+  await selectNode(".container", inspector);
+  const [flexItemList] = await onItemsListRendered;
+
+  const items = [...flexItemList.querySelectorAll("button .objectBox")];
+  is(items.length, 2, "There are 2 items displayed in the list");
+
+  is(items[0].textContent, "::before", "The first item is ::before");
+  is(items[1].textContent, "::after", "The second item is ::after");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_flexibility_not_displayed_when_useless.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_flexibility_not_displayed_when_useless.js
new file mode 100644
index 0000000000..e25ebd5a6a
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_flexibility_not_displayed_when_useless.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexibility section in the flex item sizing properties is not displayed
+// when the item did not grow or shrink.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc, store } = flexboxInspector;
+
+  info(
+    "Select an item with flex:0 and wait for the sizing info to be rendered"
+  );
+  let onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
+  await selectNode("#did-not-grow-or-shrink div", inspector);
+  await onUpdate;
+
+  let flexSections = doc.querySelectorAll(
+    ".flex-item-sizing .section.flexibility"
+  );
+  is(
+    flexSections.length,
+    0,
+    "The flexibility section was not found in the DOM"
+  );
+
+  info(
+    "Select a more complex item which also doesn't flex and wait for the sizing info"
+  );
+  onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
+  await selectNode(
+    "#just-enough-space-for-clamped-items div:last-child",
+    inspector
+  );
+  await onUpdate;
+
+  flexSections = doc.querySelectorAll(".flex-item-sizing .section.flexibility");
+  is(
+    flexSections.length,
+    0,
+    "The flexibility section was not found in the DOM"
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js
new file mode 100644
index 0000000000..45cae70d7b
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a flex item's min width/height value is not displayed if it's unspecified in
+// the CSS.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_unauthored_min_dimension.html";
+
+async function checkFlexItemCSSProperty(inspector, store, doc, selector) {
+  info("Select the container's flex item sizing info.");
+  const onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
+  await selectNode(selector, inspector);
+  await onUpdate;
+
+  info(
+    "Check that the minimum size section does not display minimum dimension text."
+  );
+  const [sectionMinRowItem] = [
+    ...doc.querySelectorAll(".flex-item-sizing .section.min"),
+  ];
+  const minDimension = sectionMinRowItem.querySelector(".css-property-link");
+
+  ok(!minDimension, "Minimum dimension property should not be displayed.");
+}
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc, store } = flexboxInspector;
+
+  await checkFlexItemCSSProperty(
+    inspector,
+    store,
+    doc,
+    "#flex-item-with-unauthored-min-width"
+  );
+  await checkFlexItemCSSProperty(
+    inspector,
+    store,
+    doc,
+    "#flex-item-with-unauthored-min-height"
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_exists.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_exists.js
new file mode 100644
index 0000000000..e353eea0db
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_exists.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item sizing information exists when a flex item is selected.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  // Select a flex item in the test document and wait for the sizing info to be rendered.
+  // Note that we select an item that has base, delta and final sizes, so we can check
+  // those sections exists.
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode(".container.growing .item", inspector);
+  const [flexSizingContainer] = await onFlexItemSizingRendered;
+
+  ok(flexSizingContainer, "The flex sizing exists in the DOM");
+
+  info("Check that the base, flexibility and final sizes are displayed");
+  const allSections = [
+    ...flexSizingContainer.querySelectorAll(".section .name"),
+  ];
+  const allSectionTitles = allSections.map(el => el.textContent);
+
+  ["Base Size", "Flexibility", "Final Size"].forEach((expectedTitle, i) => {
+    ok(
+      allSectionTitles[i].includes(expectedTitle),
+      `Sizing section #${i + 1} (${expectedTitle}) was found`
+    );
+  });
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js
new file mode 100644
index 0000000000..91a99d3da5
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item sizing info shows the correct dimension values for different
+// writing modes. For vertical writing modes, row items should display height values and
+// column items should display width values. The opposite is true for horizontal mode
+// where rows display width values and columns display height.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_writing_modes.html";
+
+async function checkFlexItemDimension(
+  inspector,
+  store,
+  doc,
+  selector,
+  expected
+) {
+  info("Select the container's flex item.");
+  const onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
+  await selectNode(selector, inspector);
+  await onUpdate;
+
+  info("Check that the minimum size section shows the correct dimension.");
+  const sectionMinRowItem = doc.querySelector(".flex-item-sizing .section.min");
+  const minDimension = sectionMinRowItem.querySelector(".css-property-link");
+
+  ok(
+    minDimension.textContent.includes(expected),
+    "The flex item sizing has the correct dimension value."
+  );
+}
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc, store } = flexboxInspector;
+
+  await checkFlexItemDimension(
+    inspector,
+    store,
+    doc,
+    ".row.vertical-rl.item",
+    "min-height"
+  );
+  await checkFlexItemDimension(
+    inspector,
+    store,
+    doc,
+    ".column.vertical-tb.item",
+    "min-height"
+  );
+  await checkFlexItemDimension(
+    inspector,
+    store,
+    doc,
+    ".row.vertical-bt.item",
+    "min-height"
+  );
+  await checkFlexItemDimension(
+    inspector,
+    store,
+    doc,
+    ".column.horizontal-rl.item",
+    "min-width"
+  );
+  await checkFlexItemDimension(
+    inspector,
+    store,
+    doc,
+    ".row.horizontal-lr.item",
+    "min-width"
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_pseudos.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_pseudos.js
new file mode 100644
index 0000000000..75b3a00a4f
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_pseudos.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item sizing UI also appears for pseudo elements.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_pseudos.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the ::before pseudo-element in the inspector");
+  const containerNode = await getNodeFront(".container", inspector);
+  const { nodes } = await inspector.walker.children(containerNode);
+  const beforeNode = nodes[0];
+
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
+  await selectNode(beforeNode, inspector);
+  const [flexSizingContainer] = await onFlexItemSizingRendered;
+  const [flexOutlineContainer] = await onFlexItemOutlineRendered;
+
+  ok(flexSizingContainer, "The flex sizing exists in the DOM");
+  ok(flexOutlineContainer, "The flex outline exists in the DOM");
+
+  info("Check that the various sizing sections are displayed");
+  const allSections = [...flexSizingContainer.querySelectorAll(".section")];
+  ok(allSections.length, "Sizing sections are displayed");
+
+  info("Check that the various parts of the outline are displayed");
+  const [basis, final] = [
+    ...flexOutlineContainer.querySelectorAll(
+      ".flex-outline-basis, .flex-outline-final"
+    ),
+  ];
+  ok(basis && final, "The final and basis parts of the outline exist");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js
new file mode 100644
index 0000000000..fc96505208
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item sizing UI also appears for text nodes.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_text_nodes.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the first text node in the flex container");
+  const containerNode = await getNodeFront(".container", inspector);
+  const { nodes } = await inspector.walker.children(containerNode);
+  const firstTextNode = nodes[0];
+
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
+  await selectNode(firstTextNode, inspector);
+  const [flexSizingContainer] = await onFlexItemSizingRendered;
+  const [flexOutlineContainer] = await onFlexItemOutlineRendered;
+
+  ok(flexSizingContainer, "The flex sizing exists in the DOM");
+  ok(flexOutlineContainer, "The flex outline exists in the DOM");
+
+  info("Check that the various sizing sections are displayed");
+  const allSections = [...flexSizingContainer.querySelectorAll(".section")];
+  ok(allSections.length, "Sizing sections are displayed");
+
+  info("Check that the various parts of the outline are displayed");
+  const [basis, final] = [
+    ...flexOutlineContainer.querySelectorAll(
+      ".flex-outline-basis, .flex-outline-final"
+    ),
+  ];
+  ok(basis && final, "The final and basis parts of the outline exist");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js
new file mode 100644
index 0000000000..e31366da15
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item sizing UI contains the right sections, depending on which
+// element is selected. Some items may be clamped, others not, so not all sections are
+// visible at all times.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+const TEST_DATA = [
+  {
+    selector: ".shrinking .item",
+    expectedSections: ["Base Size", "Flexibility", "Final Size"],
+  },
+  {
+    selector: ".shrinking.is-clamped .item",
+    expectedSections: [
+      "Base Size",
+      "Flexibility",
+      "Minimum Size",
+      "Final Size",
+    ],
+  },
+  {
+    selector: ".growing .item",
+    expectedSections: ["Base Size", "Flexibility", "Final Size"],
+  },
+  {
+    selector: ".growing.is-clamped .item",
+    expectedSections: [
+      "Base Size",
+      "Flexibility",
+      "Maximum Size",
+      "Final Size",
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc, store } = flexboxInspector;
+
+  for (const { selector, expectedSections } of TEST_DATA) {
+    info(`Checking the list of sections for the flex item ${selector}`);
+    const sections = await selectNodeAndGetFlexSizingSections(
+      selector,
+      store,
+      inspector,
+      doc
+    );
+
+    is(
+      sections.length,
+      expectedSections.length,
+      "Correct number of sections found"
+    );
+    expectedSections.forEach((expectedSection, i) => {
+      ok(
+        sections[i].includes(expectedSection),
+        `The ${expectedSection} section was found`
+      );
+    });
+  }
+});
+
+async function selectNodeAndGetFlexSizingSections(
+  selector,
+  store,
+  inspector,
+  doc
+) {
+  const onUpdate = waitForDispatch(store, "UPDATE_FLEXBOX");
+  await selectNode(selector, inspector);
+  await onUpdate;
+
+  info(`Getting the list of displayed sections for ${selector}`);
+  const allSections = [
+    ...doc.querySelectorAll("ul.flex-item-sizing .section .name"),
+  ];
+  const allSectionTitles = allSections.map(el => el.textContent);
+
+  return allSectionTitles;
+}
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_matches_properties_with_!important.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_matches_properties_with_!important.js
new file mode 100644
index 0000000000..ba14ef7a62
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_matches_properties_with_!important.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a flex item's sizing section shows the highest value of specificity for its
+// CSS property.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_CSS_property_with_!important.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the container's flex item sizing info.");
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode(".item", inspector);
+  const [flexItemSizingContainer] = await onFlexItemSizingRendered;
+
+  info(
+    "Check that the max and flexibility sections show correct CSS property value."
+  );
+  const flexSection = flexItemSizingContainer.querySelector(
+    ".section.flexibility"
+  );
+  const maxSection = flexItemSizingContainer.querySelector(".section.max");
+  const flexGrow = flexSection.querySelector(".css-property-link");
+  const maxSize = maxSection.querySelector(".css-property-link");
+
+  is(
+    maxSize.textContent,
+    "(max-width: 400px !important)",
+    "Maximum size section shows CSS property value with highest specificity."
+  );
+  is(
+    flexGrow.textContent,
+    "(flex-grow: 5 !important)",
+    "Flexibility size section shows CSS property value with highest specificity."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_updates_on_change.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_updates_on_change.js
new file mode 100644
index 0000000000..9218022b02
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_updates_on_change.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexbox sizing info updates on changes to the flex item properties.
+
+const TEST_URI = `
+  <style>
+    #container {
+      display: flex;
+    }
+  </style>
+  <div id="container">
+    <div id="item"></div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode("#item", inspector);
+  const [flexItemSizingContainer] = await onFlexItemSizingRendered;
+
+  info("Checking the initial state of the flex item list.");
+  is(
+    flexItemSizingContainer.querySelectorAll("li").length,
+    2,
+    "Got the correct number of flex item sizing properties in the list."
+  );
+
+  info("Changing the flexbox in the page.");
+  const onFlexItemSizingChanged = waitForDOM(
+    doc,
+    "ul.flex-item-sizing > li",
+    3
+  );
+  SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => (content.document.getElementById("item").style.minWidth = "100px")
+  );
+  const elements = await onFlexItemSizingChanged;
+
+  info("Checking the flex item sizing info is correct.");
+  is(elements.length, 3, "Flex item sizing info was changed.");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js
new file mode 100644
index 0000000000..72e2861ef3
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+// Test the specific max-clamping scenario where an item wants to grow a certain amount
+// but its max-size prevents it from growing that much.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info(
+    "Select the test item in the document and wait for the sizing info to render"
+  );
+  const onRendered = waitForDOM(doc, ".flex-outline, .flex-item-sizing", 2);
+  await selectNode("#want-to-grow-more-than-max div", inspector);
+  const [outlineContainer, sizingContainer] = await onRendered;
+
+  info(
+    "Check that the outline contains the max point and that it's equal to final"
+  );
+  const maxPoint = outlineContainer.querySelector(".flex-outline-point.max");
+  ok(maxPoint, "The max point is displayed");
+  ok(
+    outlineContainer.style.gridTemplateColumns.includes("[final-end max]"),
+    "The final and max points are at the same position"
+  );
+
+  info("Check that the maximum sizing section displays the right info");
+  const reasons = [...sizingContainer.querySelectorAll(".reasons li")];
+  const expectedReason = getStr("flexbox.itemSizing.clampedToMax");
+  ok(
+    reasons.some(r => r.textContent === expectedReason),
+    "The clampedToMax reason was found"
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js
new file mode 100644
index 0000000000..374ec77962
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js
@@ -0,0 +1,28 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that text nodes that are flex items do appear in the list of items.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_text_nodes.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  // Select the flex container in the inspector.
+  const onItemsListRendered = waitForDOM(
+    doc,
+    ".layout-flexbox-wrapper .flex-item-list"
+  );
+  await selectNode(".container", inspector);
+  const [flexItemList] = await onItemsListRendered;
+
+  const items = [...flexItemList.querySelectorAll("button .objectBox")];
+  is(items.length, 3, "There are 3 items displayed in the list");
+
+  is(items[0].textContent, "#text", "The first item is a text node");
+  is(items[2].textContent, "#text", "The third item is a text node");
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_not_inlined.js b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_not_inlined.js
new file mode 100644
index 0000000000..2494ac1dcb
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_not_inlined.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that single child text nodes that are also flex items can be selected in the
+// flexbox inspector.
+// This means that they are not inlined like normal single child text nodes, since
+// selecting them in the flexbox inspector also means selecting them in the markup view.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_text_nodes.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  // Select the flex container in the inspector.
+  const onItemsListRendered = waitForDOM(
+    doc,
+    ".layout-flexbox-wrapper .flex-item-list"
+  );
+  await selectNode(".container.single-child", inspector);
+  const [flexItemList] = await onItemsListRendered;
+
+  const items = [...flexItemList.querySelectorAll("button .objectBox")];
+  is(items.length, 1, "There is 1 item displayed in the list");
+  is(items[0].textContent, "#text", "The item in the list is a text node");
+
+  info("Click on the item to select it");
+  const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
+  items[0].closest("button").click();
+  const [flexOutlineContainer] = await onFlexItemOutlineRendered;
+  ok(
+    flexOutlineContainer,
+    "The flex outline is displayed for a single child short text node too"
+  );
+
+  ok(
+    inspector.selection.isTextNode(),
+    "The current inspector selection is the text node"
+  );
+
+  const markupContainer = inspector.markup.getContainer(
+    inspector.selection.nodeFront
+  );
+  is(
+    markupContainer.elt.textContent,
+    "short text",
+    "This is the right text node"
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_01.js b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_01.js
new file mode 100644
index 0000000000..2fbfccb162
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_01.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling ON/OFF the flexbox highlighter from the flexbox inspector panel.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { getActiveHighlighter } = getHighlighterTestHelpers(inspector);
+
+  const onFlexHighlighterToggleRendered = waitForDOM(
+    doc,
+    "#flexbox-checkbox-toggle"
+  );
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the initial state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(
+    !flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is unchecked."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  await toggleHighlighterON(flexHighlighterToggle, inspector);
+
+  info("Checking the flexbox highlighter is created.");
+  ok(getActiveHighlighter(HIGHLIGHTER_TYPE), "Flexbox highlighter is shown.");
+  ok(
+    flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is checked."
+  );
+
+  await toggleHighlighterOFF(flexHighlighterToggle, inspector);
+
+  info("Checking the flexbox highlighter is not shown.");
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+  ok(
+    !flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is unchecked."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_02.js b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_02.js
new file mode 100644
index 0000000000..c7d7c35d9a
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_02.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling ON/OFF the flexbox highlighter on different flex containers from the
+// flexbox inspector panel.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { store } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { getActiveHighlighter, getNodeForActiveHighlighter } =
+    getHighlighterTestHelpers(inspector);
+
+  const onFlexHighlighterToggleRendered = waitForDOM(
+    doc,
+    "#flexbox-checkbox-toggle"
+  );
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the #container state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(
+    !flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is unchecked."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter for #container from the layout panel."
+  );
+  await toggleHighlighterON(flexHighlighterToggle, inspector);
+
+  info("Checking the flexbox highlighter is created for #container.");
+  const highlightedNodeFront = store.getState().flexbox.flexContainer.nodeFront;
+  is(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    highlightedNodeFront,
+    "Flexbox highlighter is shown for #container."
+  );
+  ok(
+    flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is checked."
+  );
+
+  info("Switching the selected flex container to .container.column");
+  const onToggleChange = waitUntilState(
+    store,
+    state => !state.flexbox.highlighted
+  );
+  await selectNode(".container.column", inspector);
+  await onToggleChange;
+
+  info("Checking the .container.column state of the Flexbox Inspector.");
+  ok(
+    !flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is unchecked."
+  );
+  is(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    highlightedNodeFront,
+    "Flexbox highlighter is still shown for #container."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter for .container.column from the layout " +
+      "panel."
+  );
+  await toggleHighlighterON(flexHighlighterToggle, inspector);
+
+  info("Checking the flexbox highlighter is created for .container.column");
+  is(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    store.getState().flexbox.flexContainer.nodeFront,
+    "Flexbox highlighter is shown for .container.column."
+  );
+  ok(
+    flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is checked."
+  );
+
+  await toggleHighlighterOFF(flexHighlighterToggle, inspector);
+
+  info("Checking the flexbox highlighter is not shown.");
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+  ok(
+    !flexHighlighterToggle.checked,
+    "The flexbox highlighter toggle is unchecked."
+  );
+});
diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_CSS_property_with_!important.html b/devtools/client/inspector/flexbox/test/doc_flexbox_CSS_property_with_!important.html
new file mode 100644
index 0000000000..097d91215b
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_CSS_property_with_!important.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.container {
+  display: flex;
+  width: 500px;
+  height: 150px;
+  margin: 10px;
+}
+
+.item {
+  background: yellow;
+  color: red;
+  flex-grow: 1 !important;
+  max-width: 350px;
+  max-width: 400px !important;
+  padding: 10px;
+}
+</style>
+<div class="container">
+  <div class="item" style="flex-grow: 5 !important">Item</div>
+</div>
diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_pseudos.html b/devtools/client/inspector/flexbox/test/doc_flexbox_pseudos.html
new file mode 100644
index 0000000000..76474cbc37
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_pseudos.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.container {
+  width: 300px;
+  height: 150px;
+  margin: 10px;
+  display: flex;
+}
+
+.container::before,
+.container::after {
+  color: #f06;
+  border: 1px solid #f06;
+  background: gold;
+  padding: 1em;
+}
+
+.container::before {
+  content: "::before pseudo-element item";
+}
+
+.container::after {
+  content: "::after pseudo-element item";
+}
+</style>
+<div class="container"></div>
diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_specific_cases.html b/devtools/client/inspector/flexbox/test/doc_flexbox_specific_cases.html
new file mode 100644
index 0000000000..f5a6aaad24
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_specific_cases.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url("Ahem.ttf");
+}
+.container {
+  width: 300px;
+  height: 150px;
+  margin: 10px;
+  display: flex;
+}
+.container.column {
+  height: 300px;
+  width: 150px;
+  flex-direction: column;
+}
+.item {
+  background: #0004;
+}
+.shrinking .item {
+  flex-basis: 500px;
+  flex-shrink: 1;
+}
+.shrinking.is-clamped .item {
+  min-width: 350px;
+}
+.growing .item {
+  flex-basis: 200px;
+  flex-grow: 1;
+}
+.growing.is-clamped .item {
+  max-width: 250px;
+}
+
+#want-to-grow-more-than-max {
+  width: 500px;
+  display: flex;
+}
+#want-to-grow-more-than-max div {
+  flex: 1;
+  max-width: 200px;
+}
+
+#did-not-grow-or-shrink {
+  width: 500px;
+  display: flex;
+}
+#did-not-grow-or-shrink div {
+  flex: 0 300px;
+}
+
+#just-enough-space-for-clamped-items {
+  display:flex;
+  width:100px;
+  height:40px
+}
+#just-enough-space-for-clamped-items div:first-child {
+  flex: 1 300px;
+  max-width: 20px;
+  background: teal;
+}
+#just-enough-space-for-clamped-items div:last-child {
+  flex: 1 10px;
+  min-width: 80px;
+  background: salmon;
+}
+
+#wanted-to-shrink-more-than-basis {
+  display: flex;
+  width: 5px;
+}
+#wanted-to-shrink-more-than-basis div:first-child {
+  flex: 0 2 200px;
+  /* Using the Ahem test font to make sure the text has the exact same size on all test
+     platforms */
+  font-family: Ahem;
+  font-size: 10px;
+}
+#wanted-to-shrink-more-than-basis div:last-child {
+  flex: 0 1 200px;
+}
+</style>
+<div id="container" class="container">
+  <div class="item">flex item in a row flex container</div>
+</div>
+<div class="container column">
+  <div class="item">flex item in a column flex container</div>
+</div>
+<div class="container shrinking">
+  <div class="item">Shrinking flex item</div>
+</div>
+<div class="container shrinking is-clamped">
+  <div class="item">Shrinking and clamped flex item</div>
+</div>
+<div class="container growing">
+  <div class="item">Growing flex item</div>
+</div>
+<div class="container growing is-clamped">
+  <div class="item">Growing and clamped flex item</div>
+</div>
+<div id="want-to-grow-more-than-max">
+  <div>item wants to grow more</div>
+</div>
+<div id="did-not-grow-or-shrink">
+  <div>item did not grow or shrink</div>
+</div>
+<div id="just-enough-space-for-clamped-items">
+ <div></div>
+ <div></div>
+</div>
+<div id="wanted-to-shrink-more-than-basis">
+  <div>item wants to shrink more than its basis</div>
+  <div></div>
+</div>
+<div class="container" id="container-only">
+  <div class="container" id="container-and-item">
+    <div id="item-only">This item is inside a container-item element</div>
+  </div>
+</div>
diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html b/devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html
new file mode 100644
index 0000000000..626d3aa47e
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.container {
+  width: 400px;
+  display: flex;
+}
+.container div {
+  flex-basis: 100px;
+  flex-shrink: 0;
+  background: #f06;
+  align-self: stretch;
+}
+</style>
+<div class="container">
+  A text node will be wrapped into an anonymous block container
+  <div></div>
+  Here is yet another text node
+</div>
+<div class="container single-child">short text</div>
diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_unauthored_min_dimension.html b/devtools/client/inspector/flexbox/test/doc_flexbox_unauthored_min_dimension.html
new file mode 100644
index 0000000000..2f05dbb7f8
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_unauthored_min_dimension.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.flex-container {
+  display: flex;
+  height: 100vh;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.flex-child {
+  height: 100%;
+  width: 100%
+}
+</style>
+<div class="flex-container">
+  <div class="flex-child"></div>
+  <div id="flex-item-with-unauthored-min-width">
+      <h1>AAA</h1>
+  </div>
+</div>
+<div class="flex-container column">
+  <div class="flex-child"></div>
+  <div id="flex-item-with-unauthored-min-height">
+      <h1>BBB</h1>
+  </div>
+</div>
diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html b/devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html
new file mode 100644
index 0000000000..b518c39631
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.flex-container {
+  display: flex;
+}
+
+.flex-container.vertical-rl {
+  writing-mode: vertical-rl;
+}
+
+.flex-container.sideways-lr {
+  writing-mode: sideways-lr;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.item {
+  min-width: 300px;
+  min-height: 300px;
+}
+
+</style>
+<div class="flex-container vertical-rl">
+  <span class="row vertical-rl item">Vertical-tb Row content</span>
+</div>
+<div class="flex-container column">
+  <span class="column vertical-tb item">Vertical-tb Column Content</span>
+</div>
+<div class="flex-container sideways-lr">
+  <span class="row vertical-bt item">Vertical-bt Row Content</span>
+</div>
+<div class="flex-container vertical-rl column">
+  <span class="column horizontal-rl item">Horizontal-rl Column Content</span>
+</div>
+<div class="flex-container">
+  <span class="row horizontal-lr item">Horizontal-lr Row Content</span>
+</div>
diff --git a/devtools/client/inspector/flexbox/test/head.js b/devtools/client/inspector/flexbox/test/head.js
new file mode 100644
index 0000000000..269dcea904
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/head.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
+const FLEX_CONTAINER_OPENED_PREF = "devtools.layout.flex-container.opened";
+const FLEX_ITEM_OPENED_PREF = "devtools.layout.flex-item.opened";
+const GRID_OPENED_PREF = "devtools.layout.grid.opened";
+const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
+
+// Make sure only the flexbox layout accordions are opened, and the others are closed.
+Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, true);
+Services.prefs.setBoolPref(FLEX_CONTAINER_OPENED_PREF, true);
+Services.prefs.setBoolPref(FLEX_ITEM_OPENED_PREF, true);
+Services.prefs.setBoolPref(BOXMODEL_OPENED_PREF, false);
+Services.prefs.setBoolPref(GRID_OPENED_PREF, false);
+
+// Clear all set prefs.
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref(FLEXBOX_OPENED_PREF);
+  Services.prefs.clearUserPref(FLEX_CONTAINER_OPENED_PREF);
+  Services.prefs.clearUserPref(FLEX_ITEM_OPENED_PREF);
+  Services.prefs.clearUserPref(BOXMODEL_OPENED_PREF);
+  Services.prefs.clearUserPref(GRID_OPENED_PREF);
+});
+
+/**
+ * Toggles ON the flexbox highlighter given the flexbox highlighter button from the
+ * layout panel.
+ *
+ * @param  {DOMNode} button
+ *         The flexbox highlighter toggle button in the flex container panel.
+ * @param  {Inspector} inspector
+ *         Inspector panel instance.
+ */
+async function toggleHighlighterON(button, inspector) {
+  info("Toggling ON the flexbox highlighter from the layout panel.");
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.FLEXBOX
+  );
+  const { store } = inspector;
+  const onToggleChange = waitUntilState(
+    store,
+    state => state.flexbox.highlighted
+  );
+  button.click();
+  await Promise.all([onHighlighterShown, onToggleChange]);
+}
+
+/**
+ * Toggles OFF the flexbox highlighter given the flexbox highlighter button from the
+ * layout panel.
+ *
+ * @param  {DOMNode} button
+ *         The flexbox highlighter toggle button in the flex container panel.
+ * @param  {Inspector} inspector
+ *         Inspector panel instance.
+ */
+async function toggleHighlighterOFF(button, inspector) {
+  info("Toggling OFF the flexbox highlighter from the layout panel.");
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+  const onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.FLEXBOX
+  );
+  const { store } = inspector;
+  const onToggleChange = waitUntilState(
+    store,
+    state => !state.flexbox.highlighted
+  );
+  button.click();
+  await Promise.all([onHighlighterHidden, onToggleChange]);
+}
diff --git a/devtools/client/inspector/flexbox/types.js b/devtools/client/inspector/flexbox/types.js
new file mode 100644
index 0000000000..34f45ed8ae
--- /dev/null
+++ b/devtools/client/inspector/flexbox/types.js
@@ -0,0 +1,145 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * A flex item computed style properties.
+ */
+const flexItemProperties = (exports.flexItemProperties = {
+  // The computed value of flex-basis.
+  "flex-basis": PropTypes.string,
+
+  // The computed value of flex-grow.
+  "flex-grow": PropTypes.string,
+
+  // The computed value of min-height.
+  "min-height": PropTypes.string,
+
+  // The computed value of min-width.
+  "min-width": PropTypes.string,
+
+  // The computed value of max-height.
+  "max-height": PropTypes.string,
+
+  // The computed value of max-width.
+  "max-width": PropTypes.string,
+
+  // The computed height of the flex item element.
+  height: PropTypes.string,
+
+  // The computed width of the flex item element.
+  width: PropTypes.string,
+});
+
+/**
+ * A flex item sizing data.
+ */
+const flexItemSizing = (exports.flexItemSizing = {
+  // The max size of the flex item in the cross axis.
+  crossMaxSize: PropTypes.number,
+
+  // The min size of the flex item in the cross axis.
+  crossMinSize: PropTypes.number,
+
+  // The size of the flex item in the main axis before the flex sizing algorithm is
+  // applied. This is also called the "flex base size" in the spec.
+  mainBaseSize: PropTypes.number,
+
+  // The value that the flex sizing algorithm "wants" to use to stretch or shrink the
+  // item, before clamping to the item's main min and max sizes.
+  mainDeltaSize: PropTypes.number,
+
+  // The max size of the flex item in the main axis.
+  mainMaxSize: PropTypes.number,
+
+  // The min size of the flex item in the maxin axis.
+  mainMinSize: PropTypes.number,
+});
+
+/**
+ * A flex item data.
+ */
+const flexItem = (exports.flexItem = {
+  // The actor ID of the flex item.
+  actorID: PropTypes.string,
+
+  // The computed style properties of the flex item.
+  computedStyle: PropTypes.object,
+
+  // The flex item sizing data.
+  flexItemSizing: PropTypes.shape(flexItemSizing),
+
+  // The NodeFront of the flex item.
+  nodeFront: PropTypes.object,
+
+  // The authored style properties of the flex item.
+  properties: PropTypes.shape(flexItemProperties),
+});
+
+/**
+ * A flex container computed style properties.
+ */
+const flexContainerProperties = (exports.flexContainerProperties = {
+  // The computed value of align-content.
+  "align-content": PropTypes.string,
+
+  // The computed value of align-items.
+  "align-items": PropTypes.string,
+
+  // The computed value of flex-direction.
+  "flex-direction": PropTypes.string,
+
+  // The computed value of flex-wrap.
+  "flex-wrap": PropTypes.string,
+
+  // The computed value of justify-content.
+  "justify-content": PropTypes.string,
+});
+
+/**
+ * A flex container data.
+ */
+const flexContainer = (exports.flexContainer = {
+  // The actor ID of the flex container.
+  actorID: PropTypes.string,
+
+  // An array of flex items belonging to the flex container.
+  flexItems: PropTypes.arrayOf(PropTypes.shape(flexItem)),
+
+  // Whether or not the flex container data represents the selected flex container
+  // or the parent flex container. This is true if the flex container data represents
+  // the parent flex container.
+  isFlexItemContainer: PropTypes.bool,
+
+  // The NodeFront actor ID of the flex item to display in the flex item sizing
+  // properties.
+  flexItemShown: PropTypes.string,
+
+  // The NodeFront of the flex container.
+  nodeFront: PropTypes.object,
+
+  // The computed style properties of the flex container.
+  properties: PropTypes.shape(flexContainerProperties),
+});
+
+/**
+ * The Flexbox UI state.
+ */
+exports.flexbox = {
+  // The color of the flexbox highlighter overlay.
+  color: PropTypes.string,
+
+  // The selected flex container.
+  flexContainer: PropTypes.shape(flexContainer),
+
+  // The selected flex container can also be a flex item. This object contains the
+  // parent flex container properties.
+  flexItemContainer: PropTypes.shape(flexContainer),
+
+  // Whether or not the flexbox highlighter is highlighting the flex container.
+  highlighted: PropTypes.bool,
+};
diff --git a/devtools/client/inspector/fonts/actions/font-editor.js b/devtools/client/inspector/fonts/actions/font-editor.js
new file mode 100644
index 0000000000..0542604d7b
--- /dev/null
+++ b/devtools/client/inspector/fonts/actions/font-editor.js
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  APPLY_FONT_VARIATION_INSTANCE,
+  RESET_EDITOR,
+  SET_FONT_EDITOR_DISABLED,
+  UPDATE_AXIS_VALUE,
+  UPDATE_EDITOR_STATE,
+  UPDATE_PROPERTY_VALUE,
+  UPDATE_WARNING_MESSAGE,
+} = require("resource://devtools/client/inspector/fonts/actions/index.js");
+
+module.exports = {
+  resetFontEditor() {
+    return {
+      type: RESET_EDITOR,
+    };
+  },
+
+  setEditorDisabled(disabled = false) {
+    return {
+      type: SET_FONT_EDITOR_DISABLED,
+      disabled,
+    };
+  },
+
+  applyInstance(name, values) {
+    return {
+      type: APPLY_FONT_VARIATION_INSTANCE,
+      name,
+      values,
+    };
+  },
+
+  updateAxis(axis, value) {
+    return {
+      type: UPDATE_AXIS_VALUE,
+      axis,
+      value,
+    };
+  },
+
+  updateFontEditor(fonts, properties = {}, id = "") {
+    return {
+      type: UPDATE_EDITOR_STATE,
+      fonts,
+      properties,
+      id,
+    };
+  },
+
+  updateFontProperty(property, value) {
+    return {
+      type: UPDATE_PROPERTY_VALUE,
+      property,
+      value,
+    };
+  },
+
+  updateWarningMessage(warning) {
+    return {
+      type: UPDATE_WARNING_MESSAGE,
+      warning,
+    };
+  },
+};
diff --git a/devtools/client/inspector/fonts/actions/font-options.js b/devtools/client/inspector/fonts/actions/font-options.js
new file mode 100644
index 0000000000..8dfe101edd
--- /dev/null
+++ b/devtools/client/inspector/fonts/actions/font-options.js
@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_PREVIEW_TEXT,
+} = require("resource://devtools/client/inspector/fonts/actions/index.js");
+
+module.exports = {
+  /**
+   * Update the preview text in the font inspector
+   */
+  updatePreviewText(previewText) {
+    return {
+      type: UPDATE_PREVIEW_TEXT,
+      previewText,
+    };
+  },
+};
diff --git a/devtools/client/inspector/fonts/actions/fonts.js b/devtools/client/inspector/fonts/actions/fonts.js
new file mode 100644
index 0000000000..5682e65521
--- /dev/null
+++ b/devtools/client/inspector/fonts/actions/fonts.js
@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_FONTS,
+} = require("resource://devtools/client/inspector/fonts/actions/index.js");
+
+module.exports = {
+  /**
+   * Update the list of fonts in the font inspector
+   */
+  updateFonts(allFonts) {
+    return {
+      type: UPDATE_FONTS,
+      allFonts,
+    };
+  },
+};
diff --git a/devtools/client/inspector/fonts/actions/index.js b/devtools/client/inspector/fonts/actions/index.js
new file mode 100644
index 0000000000..21597b8c41
--- /dev/null
+++ b/devtools/client/inspector/fonts/actions/index.js
@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Reset font editor to intial state.
+    "RESET_EDITOR",
+
+    // Set the font editor disabled state which prevents users from interacting with inputs.
+    "SET_FONT_EDITOR_DISABLED",
+
+    // Apply the variation settings of a font instance.
+    "APPLY_FONT_VARIATION_INSTANCE",
+
+    // Update the custom font variation instance with the current axes values.
+    "UPDATE_CUSTOM_INSTANCE",
+
+    // Update the value of a variable font axis.
+    "UPDATE_AXIS_VALUE",
+
+    // Update font editor with applicable fonts and user-defined CSS font properties.
+    "UPDATE_EDITOR_STATE",
+
+    // Update the list of fonts.
+    "UPDATE_FONTS",
+
+    // Update the preview text.
+    "UPDATE_PREVIEW_TEXT",
+
+    // Update the value of a CSS font property
+    "UPDATE_PROPERTY_VALUE",
+
+    // Update the warning message with the reason for not showing the font editor
+    "UPDATE_WARNING_MESSAGE",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/fonts/actions/moz.build b/devtools/client/inspector/fonts/actions/moz.build
new file mode 100644
index 0000000000..31452af580
--- /dev/null
+++ b/devtools/client/inspector/fonts/actions/moz.build
@@ -0,0 +1,12 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "font-editor.js",
+    "font-options.js",
+    "fonts.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/fonts/components/Font.js b/devtools/client/inspector/fonts/components/Font.js
new file mode 100644
index 0000000000..c761a3d2f1
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/Font.js
@@ -0,0 +1,139 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FontName = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontName.js")
+);
+const FontOrigin = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontOrigin.js")
+);
+const FontPreview = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontPreview.js")
+);
+
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class Font extends PureComponent {
+  static get propTypes() {
+    return {
+      font: PropTypes.shape(Types.font).isRequired,
+      onPreviewClick: PropTypes.func,
+      onToggleFontHighlight: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFontFaceRuleExpanded: false,
+    };
+
+    this.onFontFaceRuleToggle = this.onFontFaceRuleToggle.bind(this);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(newProps) {
+    if (this.props.font.name === newProps.font.name) {
+      return;
+    }
+
+    this.setState({
+      isFontFaceRuleExpanded: false,
+    });
+  }
+
+  onFontFaceRuleToggle(event) {
+    this.setState({
+      isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded,
+    });
+    event.stopPropagation();
+  }
+
+  renderFontCSSCode(rule, ruleText) {
+    if (!rule) {
+      return null;
+    }
+
+    // Cut the rule text in 3 parts: the selector, the declarations, the closing brace.
+    // This way we can collapse the declarations by default and display an expander icon
+    // to expand them again.
+    const leading = ruleText.substring(0, ruleText.indexOf("{") + 1);
+    const body = ruleText.substring(
+      ruleText.indexOf("{") + 1,
+      ruleText.lastIndexOf("}")
+    );
+    const trailing = ruleText.substring(ruleText.lastIndexOf("}"));
+
+    const { isFontFaceRuleExpanded } = this.state;
+
+    return dom.pre(
+      {
+        className: "font-css-code",
+      },
+      this.renderFontCSSCodeTwisty(),
+      leading,
+      isFontFaceRuleExpanded
+        ? body
+        : dom.span({
+            className: "font-css-code-expander",
+            onClick: this.onFontFaceRuleToggle,
+          }),
+      trailing
+    );
+  }
+
+  renderFontCSSCodeTwisty() {
+    const { isFontFaceRuleExpanded } = this.state;
+
+    const attributes = {
+      className: "theme-twisty",
+      onClick: this.onFontFaceRuleToggle,
+    };
+    if (isFontFaceRuleExpanded) {
+      attributes.open = "true";
+    }
+
+    return dom.span(attributes);
+  }
+
+  renderFontFamilyName(family) {
+    if (!family) {
+      return null;
+    }
+
+    return dom.div({ className: "font-family-name" }, family);
+  }
+
+  render() {
+    const { font, onPreviewClick, onToggleFontHighlight } = this.props;
+
+    const { CSSFamilyName, previewUrl, rule, ruleText } = font;
+
+    return dom.li(
+      {
+        className: "font",
+      },
+      dom.div(
+        {},
+        this.renderFontFamilyName(CSSFamilyName),
+        FontName({ font, onToggleFontHighlight })
+      ),
+      FontOrigin({ font }),
+      FontPreview({ onPreviewClick, previewUrl }),
+      this.renderFontCSSCode(rule, ruleText)
+    );
+  }
+}
+
+module.exports = Font;
diff --git a/devtools/client/inspector/fonts/components/FontAxis.js b/devtools/client/inspector/fonts/components/FontAxis.js
new file mode 100644
index 0000000000..f695c06b29
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontAxis.js
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FontPropertyValue = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js")
+);
+
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class FontAxis extends PureComponent {
+  static get propTypes() {
+    return {
+      axis: PropTypes.shape(Types.fontVariationAxis),
+      disabled: PropTypes.bool.isRequired,
+      onChange: PropTypes.func.isRequired,
+      value: PropTypes.number.isRequired,
+    };
+  }
+
+  /**
+   * Naive implementation to get increment step for variable font axis that ensures
+   * fine grained control based on range of values between min and max.
+   *
+   * @param  {Number} min
+   *         Minumum value for range.
+   * @param  {Number} max
+   *         Maximum value for range.
+   * @return {Number}
+   *         Step value used in range input for font axis.
+   */
+  getAxisStep(min, max) {
+    let step = 1;
+    const delta = parseInt(max, 10) - parseInt(min, 10);
+
+    if (delta <= 1) {
+      step = 0.001;
+    } else if (delta <= 10) {
+      step = 0.01;
+    } else if (delta <= 100) {
+      step = 0.1;
+    }
+
+    return step;
+  }
+
+  render() {
+    const { axis, value, onChange } = this.props;
+
+    return FontPropertyValue({
+      className: "font-control-axis",
+      disabled: this.props.disabled,
+      label: axis.name,
+      min: axis.minValue,
+      minLabel: true,
+      max: axis.maxValue,
+      maxLabel: true,
+      name: axis.tag,
+      nameLabel: true,
+      onChange,
+      step: this.getAxisStep(axis.minValue, axis.maxValue),
+      value,
+    });
+  }
+}
+
+module.exports = FontAxis;
diff --git a/devtools/client/inspector/fonts/components/FontEditor.js b/devtools/client/inspector/fonts/components/FontEditor.js
new file mode 100644
index 0000000000..b98118c9fc
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -0,0 +1,357 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FontAxis = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontAxis.js")
+);
+const FontName = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontName.js")
+);
+const FontSize = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontSize.js")
+);
+const FontStyle = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontStyle.js")
+);
+const FontWeight = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontWeight.js")
+);
+const LetterSpacing = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/LetterSpacing.js")
+);
+const LineHeight = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/LineHeight.js")
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+// Maximum number of font families to be shown by default. Any others will be hidden
+// under a collapsed <details> element with a toggle to reveal them.
+const MAX_FONTS = 3;
+
+class FontEditor extends PureComponent {
+  static get propTypes() {
+    return {
+      fontEditor: PropTypes.shape(Types.fontEditor).isRequired,
+      onInstanceChange: PropTypes.func.isRequired,
+      onPropertyChange: PropTypes.func.isRequired,
+      onToggleFontHighlight: PropTypes.func.isRequired,
+    };
+  }
+
+  /**
+   * Get an array of FontAxis components with editing controls for of the given variable
+   * font axes. If no axes were given, return null.
+   * If an axis' value was declared on the font-variation-settings CSS property or was
+   * changed using the font editor, use that value, otherwise use the axis default.
+   *
+   * @param  {Array} fontAxes
+   *         Array of font axis instances
+   * @param  {Object} editedAxes
+   *         Object with axes and values edited by the user or defined in the CSS
+   *         declaration for font-variation-settings.
+   * @return {Array|null}
+   */
+  renderAxes(fontAxes = [], editedAxes) {
+    if (!fontAxes.length) {
+      return null;
+    }
+
+    return fontAxes.map(axis => {
+      return FontAxis({
+        key: axis.tag,
+        axis,
+        disabled: this.props.fontEditor.disabled,
+        onChange: this.props.onPropertyChange,
+        minLabel: true,
+        maxLabel: true,
+        value: editedAxes[axis.tag] || axis.defaultValue,
+      });
+    });
+  }
+
+  /**
+   * Render fonts used on the selected node grouped by font-family.
+   *
+   * @param {Array} fonts
+   *        Fonts used on selected node.
+   * @return {DOMNode}
+   */
+  renderUsedFonts(fonts) {
+    if (!fonts.length) {
+      return null;
+    }
+
+    // Group fonts by family name.
+    const fontGroups = fonts.reduce((acc, font) => {
+      const family = font.CSSFamilyName.toString();
+      acc[family] = acc[family] || [];
+      acc[family].push(font);
+      return acc;
+    }, {});
+
+    const renderedFontGroups = Object.keys(fontGroups).map(family => {
+      return this.renderFontGroup(family, fontGroups[family]);
+    });
+
+    const topFontsList = renderedFontGroups.slice(0, MAX_FONTS);
+    const moreFontsList = renderedFontGroups.slice(
+      MAX_FONTS,
+      renderedFontGroups.length
+    );
+
+    const moreFonts = !moreFontsList.length
+      ? null
+      : dom.details(
+          {},
+          dom.summary(
+            {},
+            dom.span(
+              { className: "label-open" },
+              getStr("fontinspector.showMore")
+            ),
+            dom.span(
+              { className: "label-close" },
+              getStr("fontinspector.showLess")
+            )
+          ),
+          moreFontsList
+        );
+
+    return dom.label(
+      {
+        className: "font-control font-control-used-fonts",
+      },
+      dom.span(
+        {
+          className: "font-control-label",
+        },
+        getStr("fontinspector.fontsUsedLabel")
+      ),
+      dom.div(
+        {
+          className: "font-control-box",
+        },
+        topFontsList,
+        moreFonts
+      )
+    );
+  }
+
+  renderFontGroup(family, fonts = []) {
+    const group = fonts.map(font => {
+      return FontName({
+        key: font.name,
+        font,
+        onToggleFontHighlight: this.props.onToggleFontHighlight,
+      });
+    });
+
+    return dom.div(
+      {
+        key: family,
+        className: "font-group",
+      },
+      dom.div(
+        {
+          className: "font-family-name",
+        },
+        family
+      ),
+      group
+    );
+  }
+
+  renderFontSize(value) {
+    return (
+      value !== null &&
+      FontSize({
+        key: `${this.props.fontEditor.id}:font-size`,
+        disabled: this.props.fontEditor.disabled,
+        onChange: this.props.onPropertyChange,
+        value,
+      })
+    );
+  }
+
+  renderLineHeight(value) {
+    return (
+      value !== null &&
+      LineHeight({
+        key: `${this.props.fontEditor.id}:line-height`,
+        disabled: this.props.fontEditor.disabled,
+        onChange: this.props.onPropertyChange,
+        value,
+      })
+    );
+  }
+
+  renderLetterSpacing(value) {
+    return (
+      value !== null &&
+      LetterSpacing({
+        key: `${this.props.fontEditor.id}:letter-spacing`,
+        disabled: this.props.fontEditor.disabled,
+        onChange: this.props.onPropertyChange,
+        value,
+      })
+    );
+  }
+
+  renderFontStyle(value) {
+    return (
+      value &&
+      FontStyle({
+        onChange: this.props.onPropertyChange,
+        disabled: this.props.fontEditor.disabled,
+        value,
+      })
+    );
+  }
+
+  renderFontWeight(value) {
+    return (
+      value !== null &&
+      FontWeight({
+        onChange: this.props.onPropertyChange,
+        disabled: this.props.fontEditor.disabled,
+        value,
+      })
+    );
+  }
+
+  /**
+   * Get a dropdown which allows selecting between variation instances defined by a font.
+   *
+   * @param {Array} fontInstances
+   *        Named variation instances as provided with the font file.
+   * @param {Object} selectedInstance
+   *        Object with information about the currently selected variation instance.
+   *        Example:
+   *        {
+   *          name: "Custom",
+   *          values: []
+   *        }
+   * @return {DOMNode}
+   */
+  renderInstances(fontInstances = [], selectedInstance = {}) {
+    // Append a "Custom" instance entry which represents the latest manual axes changes.
+    const customInstance = {
+      name: getStr("fontinspector.customInstanceName"),
+      values: this.props.fontEditor.customInstanceValues,
+    };
+    fontInstances = [...fontInstances, customInstance];
+
+    // Generate the <option> elements for the dropdown.
+    const instanceOptions = fontInstances.map(instance =>
+      dom.option(
+        {
+          key: instance.name,
+          value: instance.name,
+        },
+        instance.name
+      )
+    );
+
+    // Generate the dropdown.
+    const instanceSelect = dom.select(
+      {
+        className: "font-control-input font-value-select",
+        value: selectedInstance.name || customInstance.name,
+        onChange: e => {
+          const instance = fontInstances.find(
+            inst => e.target.value === inst.name
+          );
+          instance &&
+            this.props.onInstanceChange(instance.name, instance.values);
+        },
+      },
+      instanceOptions
+    );
+
+    return dom.label(
+      {
+        className: "font-control",
+      },
+      dom.span(
+        {
+          className: "font-control-label",
+        },
+        getStr("fontinspector.fontInstanceLabel")
+      ),
+      instanceSelect
+    );
+  }
+
+  renderWarning(warning) {
+    return dom.div(
+      {
+        id: "font-editor",
+      },
+      dom.div(
+        {
+          className: "devtools-sidepanel-no-result",
+        },
+        warning
+      )
+    );
+  }
+
+  render() {
+    const { fontEditor } = this.props;
+    const { fonts, axes, instance, properties, warning } = fontEditor;
+    // Pick the first font to show editor controls regardless of how many fonts are used.
+    const font = fonts[0];
+    const hasFontAxes = font?.variationAxes;
+    const hasFontInstances = font?.variationInstances?.length > 0;
+    const hasSlantOrItalicAxis = font?.variationAxes?.find(axis => {
+      return axis.tag === "slnt" || axis.tag === "ital";
+    });
+    const hasWeightAxis = font?.variationAxes?.find(axis => {
+      return axis.tag === "wght";
+    });
+
+    // Show the empty state with a warning message when a used font was not found.
+    if (!font) {
+      return this.renderWarning(warning);
+    }
+
+    return dom.div(
+      {
+        id: "font-editor",
+      },
+      // Always render UI for used fonts.
+      this.renderUsedFonts(fonts),
+      // Render UI for font variation instances if they are defined.
+      hasFontInstances &&
+        this.renderInstances(font.variationInstances, instance),
+      // Always render UI for font size.
+      this.renderFontSize(properties["font-size"]),
+      // Always render UI for line height.
+      this.renderLineHeight(properties["line-height"]),
+      // Always render UI for letter spacing.
+      this.renderLetterSpacing(properties["letter-spacing"]),
+      // Render UI for font weight if no "wght" registered axis is defined.
+      !hasWeightAxis && this.renderFontWeight(properties["font-weight"]),
+      // Render UI for font style if no "slnt" or "ital" registered axis is defined.
+      !hasSlantOrItalicAxis && this.renderFontStyle(properties["font-style"]),
+      // Render UI for each variable font axis if any are defined.
+      hasFontAxes && this.renderAxes(font.variationAxes, axes)
+    );
+  }
+}
+
+module.exports = FontEditor;
diff --git a/devtools/client/inspector/fonts/components/FontList.js b/devtools/client/inspector/fonts/components/FontList.js
new file mode 100644
index 0000000000..3199ff583e
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontList.js
@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createFactory,
+  createRef,
+  Fragment,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Font = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/Font.js")
+);
+const FontPreviewInput = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontPreviewInput.js")
+);
+
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class FontList extends PureComponent {
+  static get propTypes() {
+    return {
+      fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
+      fonts: PropTypes.arrayOf(PropTypes.shape(Types.font)).isRequired,
+      onPreviewTextChange: PropTypes.func.isRequired,
+      onToggleFontHighlight: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.onPreviewClick = this.onPreviewClick.bind(this);
+    this.previewInputRef = createRef();
+  }
+
+  /**
+   * Handler for clicks on the font preview image.
+   * Requests the FontPreviewInput component, if one exists, to focus its input field.
+   */
+  onPreviewClick() {
+    this.previewInputRef.current && this.previewInputRef.current.focus();
+  }
+
+  render() {
+    const { fonts, fontOptions, onPreviewTextChange, onToggleFontHighlight } =
+      this.props;
+
+    const { previewText } = fontOptions;
+    const { onPreviewClick } = this;
+
+    const list = dom.ul(
+      {
+        className: "fonts-list",
+      },
+      fonts.map((font, i) =>
+        Font({
+          key: i,
+          font,
+          onPreviewClick,
+          onToggleFontHighlight,
+        })
+      )
+    );
+
+    const previewInput = FontPreviewInput({
+      ref: this.previewInputRef,
+      onPreviewTextChange,
+      previewText,
+    });
+
+    return createElement(Fragment, null, previewInput, list);
+  }
+}
+
+module.exports = FontList;
diff --git a/devtools/client/inspector/fonts/components/FontName.js b/devtools/client/inspector/fonts/components/FontName.js
new file mode 100644
index 0000000000..d68f91293c
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontName.js
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class FontName extends PureComponent {
+  static get propTypes() {
+    return {
+      font: PropTypes.shape(Types.font).isRequired,
+      onToggleFontHighlight: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onNameMouseOver = this.onNameMouseOver.bind(this);
+    this.onNameMouseOut = this.onNameMouseOut.bind(this);
+  }
+
+  onNameMouseOver() {
+    const { font, onToggleFontHighlight } = this.props;
+
+    onToggleFontHighlight(font, true);
+  }
+
+  onNameMouseOut() {
+    const { font, onToggleFontHighlight } = this.props;
+
+    onToggleFontHighlight(font, false);
+  }
+
+  render() {
+    return dom.span(
+      {
+        className: "font-name",
+        onMouseOver: this.onNameMouseOver,
+        onMouseOut: this.onNameMouseOut,
+      },
+      this.props.font.name
+    );
+  }
+}
+
+module.exports = FontName;
diff --git a/devtools/client/inspector/fonts/components/FontOrigin.js b/devtools/client/inspector/fonts/components/FontOrigin.js
new file mode 100644
index 0000000000..aa9a6cdebc
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontOrigin.js
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class FontOrigin extends PureComponent {
+  static get propTypes() {
+    return {
+      font: PropTypes.shape(Types.font).isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onCopyURL = this.onCopyURL.bind(this);
+  }
+
+  clipTitle(title, maxLength = 512) {
+    if (title.length > maxLength) {
+      return title.substring(0, maxLength - 2) + "…";
+    }
+    return title;
+  }
+
+  onCopyURL() {
+    clipboardHelper.copyString(this.props.font.URI);
+  }
+
+  render() {
+    const url = this.props.font.URI;
+
+    if (!url) {
+      return dom.p(
+        {
+          className: "font-origin system",
+        },
+        getStr("fontinspector.system")
+      );
+    }
+
+    return dom.p(
+      {
+        className: "font-origin remote",
+      },
+      dom.span(
+        {
+          className: "url",
+          title: this.clipTitle(url),
+        },
+        url
+      ),
+      dom.button({
+        className: "copy-icon",
+        onClick: this.onCopyURL,
+        title: getStr("fontinspector.copyURL"),
+      })
+    );
+  }
+}
+
+module.exports = FontOrigin;
diff --git a/devtools/client/inspector/fonts/components/FontOverview.js b/devtools/client/inspector/fonts/components/FontOverview.js
new file mode 100644
index 0000000000..82da06aaac
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontOverview.js
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Accordion = createFactory(
+  require("resource://devtools/client/shared/components/Accordion.js")
+);
+const FontList = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontList.js")
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class FontOverview extends PureComponent {
+  static get propTypes() {
+    return {
+      fontData: PropTypes.shape(Types.fontData).isRequired,
+      fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
+      onPreviewTextChange: PropTypes.func.isRequired,
+      onToggleFontHighlight: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onToggleFontHighlightGlobal = (font, show) => {
+      this.props.onToggleFontHighlight(font, show, false);
+    };
+  }
+
+  renderFonts() {
+    const { fontData, fontOptions, onPreviewTextChange } = this.props;
+
+    const fonts = fontData.allFonts;
+
+    if (!fonts.length) {
+      return null;
+    }
+
+    return Accordion({
+      items: [
+        {
+          header: getStr("fontinspector.allFontsOnPageHeader"),
+          id: "font-list-details",
+          component: FontList,
+          componentProps: {
+            fontOptions,
+            fonts,
+            onPreviewTextChange,
+            onToggleFontHighlight: this.onToggleFontHighlightGlobal,
+          },
+          opened: false,
+        },
+      ],
+    });
+  }
+
+  render() {
+    return dom.div(
+      {
+        id: "font-container",
+      },
+      this.renderFonts()
+    );
+  }
+}
+
+module.exports = FontOverview;
diff --git a/devtools/client/inspector/fonts/components/FontPreview.js b/devtools/client/inspector/fonts/components/FontPreview.js
new file mode 100644
index 0000000000..dda18845f3
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontPreview.js
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class FontPreview extends PureComponent {
+  static get propTypes() {
+    return {
+      onPreviewClick: PropTypes.func,
+      previewUrl: Types.font.previewUrl.isRequired,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      onPreviewClick: () => {},
+    };
+  }
+
+  render() {
+    const { onPreviewClick, previewUrl } = this.props;
+
+    return dom.img({
+      className: "font-preview",
+      onClick: onPreviewClick,
+      src: previewUrl,
+    });
+  }
+}
+
+module.exports = FontPreview;
diff --git a/devtools/client/inspector/fonts/components/FontPreviewInput.js b/devtools/client/inspector/fonts/components/FontPreviewInput.js
new file mode 100644
index 0000000000..80ae15f778
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontPreviewInput.js
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+
+const PREVIEW_TEXT_MAX_LENGTH = 30;
+
+class FontPreviewInput extends PureComponent {
+  static get propTypes() {
+    return {
+      onPreviewTextChange: PropTypes.func.isRequired,
+      previewText: Types.fontOptions.previewText.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.onChange = this.onChange.bind(this);
+    this.onFocus = this.onFocus.bind(this);
+    this.inputRef = createRef();
+
+    this.state = {
+      value: this.props.previewText,
+    };
+  }
+
+  onChange(e) {
+    const value = e.target.value;
+    this.props.onPreviewTextChange(value);
+
+    this.setState(prevState => {
+      return { ...prevState, value };
+    });
+  }
+
+  onFocus(e) {
+    e.target.select();
+  }
+
+  focus() {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    return dom.div(
+      {
+        id: "font-preview-input-container",
+      },
+      dom.input({
+        className: "devtools-searchinput",
+        onChange: this.onChange,
+        onFocus: this.onFocus,
+        maxLength: PREVIEW_TEXT_MAX_LENGTH,
+        placeholder: getStr("fontinspector.previewTextPlaceholder"),
+        ref: this.inputRef,
+        type: "text",
+        value: this.state.value,
+      })
+    );
+  }
+}
+
+module.exports = FontPreviewInput;
diff --git a/devtools/client/inspector/fonts/components/FontPropertyValue.js b/devtools/client/inspector/fonts/components/FontPropertyValue.js
new file mode 100644
index 0000000000..59920818c4
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontPropertyValue.js
@@ -0,0 +1,434 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  Fragment,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  toFixed,
+} = require("resource://devtools/client/inspector/fonts/utils/font-utils.js");
+
+class FontPropertyValue extends PureComponent {
+  static get propTypes() {
+    return {
+      // Whether to allow input values above the value defined by the `max` prop.
+      allowOverflow: PropTypes.bool,
+      // Whether to allow input values below the value defined by the `min` prop.
+      allowUnderflow: PropTypes.bool,
+      className: PropTypes.string,
+      defaultValue: PropTypes.number,
+      disabled: PropTypes.bool.isRequired,
+      label: PropTypes.string.isRequired,
+      min: PropTypes.number.isRequired,
+      // Whether to show the `min` prop value as a label.
+      minLabel: PropTypes.bool,
+      max: PropTypes.number.isRequired,
+      // Whether to show the `max` prop value as a label.
+      maxLabel: PropTypes.bool,
+      name: PropTypes.string.isRequired,
+      // Whether to show the `name` prop value as an extra label (used to show axis tags).
+      nameLabel: PropTypes.bool,
+      onChange: PropTypes.func.isRequired,
+      step: PropTypes.number,
+      // Whether to show the value input field.
+      showInput: PropTypes.bool,
+      // Whether to show the unit select dropdown.
+      showUnit: PropTypes.bool,
+      unit: PropTypes.string,
+      unitOptions: PropTypes.array,
+      value: PropTypes.number,
+      valueLabel: PropTypes.string,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      allowOverflow: false,
+      allowUnderflow: false,
+      className: "",
+      minLabel: false,
+      maxLabel: false,
+      nameLabel: false,
+      step: 1,
+      showInput: true,
+      showUnit: true,
+      unit: null,
+      unitOptions: [],
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      // Whether the user is dragging the slider thumb or pressing on the numeric stepper.
+      interactive: false,
+      // Snapshot of the value from props before the user starts editing the number input.
+      // Used to restore the value when the input is left invalid.
+      initialValue: this.props.value,
+      // Snapshot of the value from props. Reconciled with props on blur.
+      // Used while the user is interacting with the inputs.
+      value: this.props.value,
+    };
+
+    this.onBlur = this.onBlur.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onFocus = this.onFocus.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onUnitChange = this.onUnitChange.bind(this);
+  }
+
+  /**
+   * Given a `prop` key found on the component's props, check the matching `propLabel`.
+   * If `propLabel` is true, return the `prop` value; Otherwise, return null.
+   *
+   * @param {String} prop
+   *        Key found on the component's props.
+   * @return {Number|null}
+   */
+  getPropLabel(prop) {
+    const label = this.props[`${prop}Label`];
+    // Decimal count used to limit numbers in labels.
+    const decimals = Math.abs(Math.log10(this.props.step));
+
+    return label ? toFixed(this.props[prop], decimals) : null;
+  }
+
+  /**
+   * Check if the given value is valid according to the constraints of this component.
+   * Ensure it is a number and that it does not go outside the min/max limits, unless
+   * allowed by the `allowOverflow` and `allowUnderflow` props.
+   *
+   * @param  {Number} value
+   *         Numeric value
+   * @return {Boolean}
+   *         Whether the value conforms to the components contraints.
+   */
+  isValueValid(value) {
+    const { allowOverflow, allowUnderflow, min, max } = this.props;
+
+    if (typeof value !== "number" || isNaN(value)) {
+      return false;
+    }
+
+    // Ensure it does not go below minimum value, unless underflow is allowed.
+    if (min !== undefined && value < min && !allowUnderflow) {
+      return false;
+    }
+
+    // Ensure it does not go over maximum value, unless overflow is allowed.
+    if (max !== undefined && value > max && !allowOverflow) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Handler for "blur" events from the range and number input fields.
+   * Reconciles the value between internal state and props.
+   * Marks the input as non-interactive so it may update in response to changes in props.
+   */
+  onBlur() {
+    const isValid = this.isValueValid(this.state.value);
+    let value;
+
+    if (isValid) {
+      value = this.state.value;
+    } else if (this.state.value !== null) {
+      value = Math.max(
+        this.props.min,
+        Math.min(this.state.value, this.props.max)
+      );
+    } else {
+      value = this.state.initialValue;
+    }
+
+    // Avoid updating the value if a keyword value like "normal" is present
+    if (!this.props.valueLabel) {
+      this.updateValue(value);
+    }
+
+    this.toggleInteractiveState(false);
+  }
+
+  /**
+   * Handler for "change" events from the range and number input fields. Calls the change
+   * handler provided with props and updates internal state with the current value.
+   *
+   * Number inputs in Firefox can't be trusted to filter out non-digit characters,
+   * therefore we must implement our own validation.
+   * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
+   *
+   * @param {Event} e
+   *        Change event.
+   */
+  onChange(e) {
+    // Regular expresion to check for floating point or integer numbers. Accept negative
+    // numbers only if the min value is negative. Otherwise, expect positive numbers.
+    // Whitespace and non-digit characters are invalid (aside from a single dot).
+    const regex =
+      this.props.min && this.props.min < 0
+        ? /^-?[0-9]+(.[0-9]+)?$/
+        : /^[0-9]+(.[0-9]+)?$/;
+    let string = e.target.value.trim();
+
+    if (e.target.validity.badInput) {
+      return;
+    }
+
+    // Prefix with zero if the string starts with a dot: .5 => 0.5
+    if (string.charAt(0) === "." && string.length > 1) {
+      string = "0" + string;
+      e.target.value = string;
+    }
+
+    // Accept empty strings to allow the input value to be completely erased while typing.
+    // A null value will be handled on blur. @see this.onBlur()
+    if (string === "") {
+      this.setState(prevState => {
+        return {
+          ...prevState,
+          value: null,
+        };
+      });
+
+      return;
+    }
+
+    if (!regex.test(string)) {
+      return;
+    }
+
+    const value = parseFloat(string);
+    this.updateValue(value);
+  }
+
+  onFocus(e) {
+    if (e.target.type === "number") {
+      e.target.select();
+    }
+
+    this.setState(prevState => {
+      return {
+        ...prevState,
+        interactive: true,
+        initialValue: this.props.value,
+      };
+    });
+  }
+
+  onUnitChange(e) {
+    this.props.onChange(
+      this.props.name,
+      this.props.value,
+      this.props.unit,
+      e.target.value
+    );
+    // Reset internal state value and wait for converted value from props.
+    this.setState(prevState => {
+      return {
+        ...prevState,
+        value: null,
+      };
+    });
+  }
+
+  onMouseDown() {
+    this.toggleInteractiveState(true);
+  }
+
+  onMouseUp() {
+    this.toggleInteractiveState(false);
+  }
+
+  /**
+   * Toggle the "interactive" state which causes render() to use `value` fom internal
+   * state instead of from props to prevent jittering during continous dragging of the
+   * range input thumb or incrementing from the number input.
+   *
+   * @param {Boolean} isInteractive
+   *        Whether to mark the interactive state on or off.
+   */
+  toggleInteractiveState(isInteractive) {
+    this.setState(prevState => {
+      return {
+        ...prevState,
+        interactive: isInteractive,
+      };
+    });
+  }
+
+  /**
+   * Calls the given `onChange` callback with the current property name, value and unit
+   * if the value is valid according to the constraints of this component (min, max).
+   * Updates the internal state with the current value. This will be used to render the
+   * UI while the input is interactive and the user may be typing a value that's not yet
+   * valid.
+   *
+   * @see this.onBlur() for logic reconciling the internal state with props.
+   *
+   * @param {Number} value
+   *        Numeric property value.
+   */
+  updateValue(value) {
+    if (this.isValueValid(value)) {
+      this.props.onChange(this.props.name, value, this.props.unit);
+    }
+
+    this.setState(prevState => {
+      return {
+        ...prevState,
+        value,
+      };
+    });
+  }
+
+  renderUnitSelect() {
+    if (!this.props.unitOptions.length) {
+      return null;
+    }
+
+    // Ensure the select element has the current unit type even if we don't recognize it.
+    // The unit conversion function will use a 1-to-1 scale for unrecognized units.
+    const options = this.props.unitOptions.includes(this.props.unit)
+      ? this.props.unitOptions
+      : this.props.unitOptions.concat([this.props.unit]);
+
+    return dom.select(
+      {
+        className: "font-value-select",
+        disabled: this.props.disabled,
+        onChange: this.onUnitChange,
+        value: this.props.unit,
+      },
+      options.map(unit => {
+        return dom.option(
+          {
+            key: unit,
+            value: unit,
+          },
+          unit
+        );
+      })
+    );
+  }
+
+  renderLabelContent() {
+    const { label, name, nameLabel } = this.props;
+
+    const labelEl = dom.span(
+      {
+        className: "font-control-label-text",
+        "aria-describedby": nameLabel ? `detail-${name}` : null,
+      },
+      label
+    );
+
+    // Show the `name` prop value as an additional label if the `nameLabel` prop is true.
+    const detailEl = nameLabel
+      ? dom.span(
+          {
+            className: "font-control-label-detail",
+            id: `detail-${name}`,
+          },
+          this.getPropLabel("name")
+        )
+      : null;
+
+    return createElement(Fragment, null, labelEl, detailEl);
+  }
+
+  renderValueLabel() {
+    if (!this.props.valueLabel) {
+      return null;
+    }
+
+    return dom.div({ className: "font-value-label" }, this.props.valueLabel);
+  }
+
+  render() {
+    // Guard against bad axis data.
+    if (this.props.min === this.props.max) {
+      return null;
+    }
+
+    const propsValue =
+      this.props.value !== null ? this.props.value : this.props.defaultValue;
+
+    const defaults = {
+      min: this.props.min,
+      max: this.props.max,
+      onBlur: this.onBlur,
+      onChange: this.onChange,
+      onFocus: this.onFocus,
+      step: this.props.step,
+      // While interacting with the range and number inputs, prevent updating value from
+      // outside props which is debounced and causes jitter on successive renders.
+      value: this.state.interactive ? this.state.value : propsValue,
+    };
+
+    const range = dom.input({
+      ...defaults,
+      onMouseDown: this.onMouseDown,
+      onMouseUp: this.onMouseUp,
+      className: "font-value-slider",
+      disabled: this.props.disabled,
+      name: this.props.name,
+      title: this.props.label,
+      type: "range",
+    });
+
+    const input = dom.input({
+      ...defaults,
+      // Remove lower limit from number input if it is allowed to underflow.
+      min: this.props.allowUnderflow ? null : this.props.min,
+      // Remove upper limit from number input if it is allowed to overflow.
+      max: this.props.allowOverflow ? null : this.props.max,
+      name: this.props.name,
+      className: "font-value-input",
+      disabled: this.props.disabled,
+      type: "number",
+    });
+
+    return dom.label(
+      {
+        className: `font-control ${this.props.className}`,
+        disabled: this.props.disabled,
+      },
+      dom.div(
+        {
+          className: "font-control-label",
+          title: this.props.label,
+        },
+        this.renderLabelContent()
+      ),
+      dom.div(
+        {
+          className: "font-control-input",
+        },
+        dom.div(
+          {
+            className: "font-value-slider-container",
+            "data-min": this.getPropLabel("min"),
+            "data-max": this.getPropLabel("max"),
+          },
+          range
+        ),
+        this.renderValueLabel(),
+        this.props.showInput && input,
+        this.props.showUnit && this.renderUnitSelect()
+      )
+    );
+  }
+}
+
+module.exports = FontPropertyValue;
diff --git a/devtools/client/inspector/fonts/components/FontSize.js b/devtools/client/inspector/fonts/components/FontSize.js
new file mode 100644
index 0000000000..dbb67a66d9
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontSize.js
@@ -0,0 +1,87 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FontPropertyValue = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js")
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+const {
+  getUnitFromValue,
+  getStepForUnit,
+} = require("resource://devtools/client/inspector/fonts/utils/font-utils.js");
+
+class FontSize extends PureComponent {
+  static get propTypes() {
+    return {
+      disabled: PropTypes.bool.isRequired,
+      onChange: PropTypes.func.isRequired,
+      value: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.historicMax = {};
+  }
+
+  render() {
+    const value = parseFloat(this.props.value);
+    const unit = getUnitFromValue(this.props.value);
+    let max;
+    switch (unit) {
+      case "em":
+      case "rem":
+        max = 4;
+        break;
+      case "vh":
+      case "vw":
+      case "vmin":
+      case "vmax":
+        max = 10;
+        break;
+      case "%":
+        max = 200;
+        break;
+      default:
+        max = 72;
+        break;
+    }
+
+    // Allow the upper bound to increase so it accomodates the out-of-bounds value.
+    max = Math.max(max, value);
+    // Ensure we store the max value ever reached for this unit type. This will be the
+    // max value of the input and slider. Without this memoization, the value and slider
+    // thumb get clamped at the upper bound while decrementing an out-of-bounds value.
+    this.historicMax[unit] = this.historicMax[unit]
+      ? Math.max(this.historicMax[unit], max)
+      : max;
+
+    return FontPropertyValue({
+      allowOverflow: true,
+      disabled: this.props.disabled,
+      label: getStr("fontinspector.fontSizeLabel"),
+      min: 0,
+      max: this.historicMax[unit],
+      name: "font-size",
+      onChange: this.props.onChange,
+      step: getStepForUnit(unit),
+      unit,
+      unitOptions: ["em", "rem", "%", "px", "vh", "vw"],
+      value,
+    });
+  }
+}
+
+module.exports = FontSize;
diff --git a/devtools/client/inspector/fonts/components/FontStyle.js b/devtools/client/inspector/fonts/components/FontStyle.js
new file mode 100644
index 0000000000..ccb411958a
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontStyle.js
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+
+class FontStyle extends PureComponent {
+  static get propTypes() {
+    return {
+      disabled: PropTypes.bool.isRequired,
+      onChange: PropTypes.func.isRequired,
+      value: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.name = "font-style";
+    this.onToggle = this.onToggle.bind(this);
+  }
+
+  onToggle(e) {
+    this.props.onChange(
+      this.name,
+      e.target.checked ? "italic" : "normal",
+      null
+    );
+  }
+
+  render() {
+    return dom.label(
+      {
+        className: "font-control",
+      },
+      dom.span(
+        {
+          className: "font-control-label",
+        },
+        getStr("fontinspector.fontItalicLabel")
+      ),
+      dom.div(
+        {
+          className: "font-control-input",
+        },
+        dom.input({
+          checked:
+            this.props.value === "italic" || this.props.value === "oblique",
+          className: "devtools-checkbox-toggle",
+          disabled: this.props.disabled,
+          name: this.name,
+          onChange: this.onToggle,
+          type: "checkbox",
+        })
+      )
+    );
+  }
+}
+
+module.exports = FontStyle;
diff --git a/devtools/client/inspector/fonts/components/FontWeight.js b/devtools/client/inspector/fonts/components/FontWeight.js
new file mode 100644
index 0000000000..2c86f2f318
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontWeight.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FontPropertyValue = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js")
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+
+class FontWeight extends PureComponent {
+  static get propTypes() {
+    return {
+      disabled: PropTypes.bool.isRequired,
+      onChange: PropTypes.func.isRequired,
+      value: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    return FontPropertyValue({
+      disabled: this.props.disabled,
+      label: getStr("fontinspector.fontWeightLabel"),
+      min: 100,
+      max: 900,
+      name: "font-weight",
+      onChange: this.props.onChange,
+      step: 100,
+      unit: null,
+      value: parseFloat(this.props.value),
+    });
+  }
+}
+
+module.exports = FontWeight;
diff --git a/devtools/client/inspector/fonts/components/FontsApp.js b/devtools/client/inspector/fonts/components/FontsApp.js
new file mode 100644
index 0000000000..66e820314a
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/FontsApp.js
@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const FontEditor = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontEditor.js")
+);
+const FontOverview = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontOverview.js")
+);
+
+const Types = require("resource://devtools/client/inspector/fonts/types.js");
+
+class FontsApp extends PureComponent {
+  static get propTypes() {
+    return {
+      fontData: PropTypes.shape(Types.fontData).isRequired,
+      fontEditor: PropTypes.shape(Types.fontEditor).isRequired,
+      fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
+      onInstanceChange: PropTypes.func.isRequired,
+      onPreviewTextChange: PropTypes.func.isRequired,
+      onPropertyChange: PropTypes.func.isRequired,
+      onToggleFontHighlight: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      fontData,
+      fontEditor,
+      fontOptions,
+      onInstanceChange,
+      onPreviewTextChange,
+      onPropertyChange,
+      onToggleFontHighlight,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "theme-sidebar inspector-tabpanel",
+        id: "sidebar-panel-fontinspector",
+      },
+      FontEditor({
+        fontEditor,
+        onInstanceChange,
+        onPropertyChange,
+        onToggleFontHighlight,
+      }),
+      FontOverview({
+        fontData,
+        fontOptions,
+        onPreviewTextChange,
+        onToggleFontHighlight,
+      })
+    );
+  }
+}
+
+module.exports = connect(state => state)(FontsApp);
diff --git a/devtools/client/inspector/fonts/components/LetterSpacing.js b/devtools/client/inspector/fonts/components/LetterSpacing.js
new file mode 100644
index 0000000000..42d6ddfa61
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/LetterSpacing.js
@@ -0,0 +1,105 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FontPropertyValue = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js")
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+const {
+  getUnitFromValue,
+  getStepForUnit,
+} = require("resource://devtools/client/inspector/fonts/utils/font-utils.js");
+
+class LetterSpacing extends PureComponent {
+  static get propTypes() {
+    return {
+      disabled: PropTypes.bool.isRequired,
+      onChange: PropTypes.func.isRequired,
+      value: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    // Local state for min/max bounds indexed by unit to allow user input that
+    // goes out-of-bounds while still providing a meaningful default range. The indexing
+    // by unit is needed to account for unit conversion (ex: em to px) where the operation
+    // may result in out-of-bounds values. Avoiding React's state and setState() because
+    // `value` is a prop coming from the Redux store while min/max are local. Reconciling
+    // value/unit changes is needlessly complicated and adds unnecessary re-renders.
+    this.historicMin = {};
+    this.historicMax = {};
+  }
+
+  getDefaultMinMax(unit) {
+    let min;
+    let max;
+    switch (unit) {
+      case "px":
+        min = -10;
+        max = 10;
+        break;
+      default:
+        min = -0.2;
+        max = 0.6;
+        break;
+    }
+
+    return { min, max };
+  }
+
+  render() {
+    // For a unitless or a NaN value, default unit to "em".
+    const unit = getUnitFromValue(this.props.value) || "em";
+    // When the initial value of "letter-spacing" is "normal", the parsed value
+    // is not a number (NaN). Guard by setting the default value to 0.
+    const isKeywordValue = this.props.value === "normal";
+    const value = isKeywordValue ? 0 : parseFloat(this.props.value);
+
+    let { min, max } = this.getDefaultMinMax(unit);
+    min = Math.min(min, value);
+    max = Math.max(max, value);
+    // Allow lower and upper bounds to move to accomodate the incoming value.
+    this.historicMin[unit] = this.historicMin[unit]
+      ? Math.min(this.historicMin[unit], min)
+      : min;
+    this.historicMax[unit] = this.historicMax[unit]
+      ? Math.max(this.historicMax[unit], max)
+      : max;
+
+    return FontPropertyValue({
+      allowOverflow: true,
+      allowUnderflow: true,
+      disabled: this.props.disabled,
+      label: getStr("fontinspector.letterSpacingLabel"),
+      min: this.historicMin[unit],
+      max: this.historicMax[unit],
+      name: "letter-spacing",
+      onChange: this.props.onChange,
+      // Increase the increment granularity because letter spacing is very sensitive.
+      step: getStepForUnit(unit) / 100,
+      // Show the value input and unit only when the value is not a keyword.
+      showInput: !isKeywordValue,
+      showUnit: !isKeywordValue,
+      unit,
+      unitOptions: ["em", "rem", "px"],
+      value,
+      // Show the value as a read-only label if it's a keyword.
+      valueLabel: isKeywordValue ? this.props.value : null,
+    });
+  }
+}
+
+module.exports = LetterSpacing;
diff --git a/devtools/client/inspector/fonts/components/LineHeight.js b/devtools/client/inspector/fonts/components/LineHeight.js
new file mode 100644
index 0000000000..34949dc7e8
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/LineHeight.js
@@ -0,0 +1,101 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FontPropertyValue = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js")
+);
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+const {
+  getUnitFromValue,
+  getStepForUnit,
+} = require("resource://devtools/client/inspector/fonts/utils/font-utils.js");
+
+class LineHeight extends PureComponent {
+  static get propTypes() {
+    return {
+      disabled: PropTypes.bool.isRequired,
+      onChange: PropTypes.func.isRequired,
+      value: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.historicMax = {};
+  }
+
+  render() {
+    // When the initial value of "line-height" is "normal", the parsed value
+    // is not a number (NaN). Guard by setting the default value to 1.2.
+    // This will be the starting point for changing the value by dragging the slider.
+    // @see https://searchfox.org/mozilla-central/rev/1133b6716d9a8131c09754f3f29288484896b8b6/layout/generic/ReflowInput.cpp#2786
+    const isKeywordValue = this.props.value === "normal";
+    const value = isKeywordValue ? 1.2 : parseFloat(this.props.value);
+
+    // When values for line-height are be unitless, getUnitFromValue() returns null.
+    // In that case, set the unit to an empty string for special treatment in conversion.
+    const unit = getUnitFromValue(this.props.value) || "";
+    let max;
+    switch (unit) {
+      case "":
+      case "em":
+      case "rem":
+        max = 2;
+        break;
+      case "vh":
+      case "vw":
+      case "vmin":
+      case "vmax":
+        max = 15;
+        break;
+      case "%":
+        max = 200;
+        break;
+      default:
+        max = 108;
+        break;
+    }
+
+    // Allow the upper bound to increase so it accomodates the out-of-bounds value.
+    max = Math.max(max, value);
+    // Ensure we store the max value ever reached for this unit type. This will be the
+    // max value of the input and slider. Without this memoization, the value and slider
+    // thumb get clamped at the upper bound while decrementing an out-of-bounds value.
+    this.historicMax[unit] = this.historicMax[unit]
+      ? Math.max(this.historicMax[unit], max)
+      : max;
+
+    return FontPropertyValue({
+      allowOverflow: true,
+      disabled: this.props.disabled,
+      label: getStr("fontinspector.lineHeightLabelCapitalized"),
+      min: 0,
+      max: this.historicMax[unit],
+      name: "line-height",
+      onChange: this.props.onChange,
+      step: getStepForUnit(unit),
+      // Show the value input and unit only when the value is not a keyword.
+      showInput: !isKeywordValue,
+      showUnit: !isKeywordValue,
+      unit,
+      unitOptions: ["", "em", "%", "px"],
+      value,
+      // Show the value as a read-only label if it's a keyword.
+      valueLabel: isKeywordValue ? this.props.value : null,
+    });
+  }
+}
+
+module.exports = LineHeight;
diff --git a/devtools/client/inspector/fonts/components/moz.build b/devtools/client/inspector/fonts/components/moz.build
new file mode 100644
index 0000000000..8838777f65
--- /dev/null
+++ b/devtools/client/inspector/fonts/components/moz.build
@@ -0,0 +1,24 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "Font.js",
+    "FontAxis.js",
+    "FontEditor.js",
+    "FontList.js",
+    "FontName.js",
+    "FontOrigin.js",
+    "FontOverview.js",
+    "FontPreview.js",
+    "FontPreviewInput.js",
+    "FontPropertyValue.js",
+    "FontsApp.js",
+    "FontSize.js",
+    "FontStyle.js",
+    "FontWeight.js",
+    "LetterSpacing.js",
+    "LineHeight.js",
+)
diff --git a/devtools/client/inspector/fonts/fonts.js b/devtools/client/inspector/fonts/fonts.js
new file mode 100644
index 0000000000..e17d306bdc
--- /dev/null
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -0,0 +1,1112 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  gDevTools,
+} = require("resource://devtools/client/framework/devtools.js");
+const { getColor } = require("resource://devtools/client/shared/theme.js");
+const {
+  createFactory,
+  createElement,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const { debounce } = require("resource://devtools/shared/debounce.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+const FontsApp = createFactory(
+  require("resource://devtools/client/inspector/fonts/components/FontsApp.js")
+);
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+const {
+  parseFontVariationAxes,
+} = require("resource://devtools/client/inspector/fonts/utils/font-utils.js");
+
+const fontDataReducer = require("resource://devtools/client/inspector/fonts/reducers/fonts.js");
+const fontEditorReducer = require("resource://devtools/client/inspector/fonts/reducers/font-editor.js");
+const fontOptionsReducer = require("resource://devtools/client/inspector/fonts/reducers/font-options.js");
+const {
+  updateFonts,
+} = require("resource://devtools/client/inspector/fonts/actions/fonts.js");
+const {
+  applyInstance,
+  resetFontEditor,
+  setEditorDisabled,
+  updateAxis,
+  updateFontEditor,
+  updateFontProperty,
+} = require("resource://devtools/client/inspector/fonts/actions/font-editor.js");
+const {
+  updatePreviewText,
+} = require("resource://devtools/client/inspector/fonts/actions/font-options.js");
+
+const FONT_PROPERTIES = [
+  "font-family",
+  "font-optical-sizing",
+  "font-size",
+  "font-stretch",
+  "font-style",
+  "font-variation-settings",
+  "font-weight",
+  "letter-spacing",
+  "line-height",
+];
+const REGISTERED_AXES_TO_FONT_PROPERTIES = {
+  ital: "font-style",
+  opsz: "font-optical-sizing",
+  slnt: "font-style",
+  wdth: "font-stretch",
+  wght: "font-weight",
+};
+const REGISTERED_AXES = Object.keys(REGISTERED_AXES_TO_FONT_PROPERTIES);
+
+const HISTOGRAM_FONT_TYPE_DISPLAYED = "DEVTOOLS_FONTEDITOR_FONT_TYPE_DISPLAYED";
+
+class FontInspector {
+  constructor(inspector, window) {
+    this.cssProperties = inspector.cssProperties;
+    this.document = window.document;
+    this.inspector = inspector;
+    // Selected node in the markup view. For text nodes, this points to their parent node
+    // element. Font faces and font properties for this node will be shown in the editor.
+    this.node = null;
+    this.nodeComputedStyle = {};
+    // The page style actor that will be providing the style information.
+    this.pageStyle = null;
+    this.ruleViewTool = this.inspector.getPanel("ruleview");
+    this.ruleView = this.ruleViewTool.view;
+    this.selectedRule = null;
+    this.store = this.inspector.store;
+    // Map CSS property names and variable font axis names to methods that write their
+    // corresponding values to the appropriate TextProperty from the Rule view.
+    // Values of variable font registered axes may be written to CSS font properties under
+    // certain cascade circumstances and platform support. @see `getWriterForAxis(axis)`
+    this.writers = new Map();
+
+    this.store.injectReducer("fontOptions", fontOptionsReducer);
+    this.store.injectReducer("fontData", fontDataReducer);
+    this.store.injectReducer("fontEditor", fontEditorReducer);
+
+    this.syncChanges = debounce(this.syncChanges, 100, this);
+    this.onInstanceChange = this.onInstanceChange.bind(this);
+    this.onNewNode = this.onNewNode.bind(this);
+    this.onPreviewTextChange = debounce(this.onPreviewTextChange, 100, this);
+    this.onPropertyChange = this.onPropertyChange.bind(this);
+    this.onRulePropertyUpdated = debounce(
+      this.onRulePropertyUpdated,
+      300,
+      this
+    );
+    this.onToggleFontHighlight = this.onToggleFontHighlight.bind(this);
+    this.onThemeChanged = this.onThemeChanged.bind(this);
+    this.update = this.update.bind(this);
+    this.updateFontVariationSettings =
+      this.updateFontVariationSettings.bind(this);
+    this.onResourceAvailable = this.onResourceAvailable.bind(this);
+
+    this.init();
+  }
+
+  /**
+   * Map CSS font property names to a list of values that should be skipped when consuming
+   * font properties from CSS rules. The skipped values are mostly keyword values like
+   * `bold`, `initial`, `unset`. Computed values will be used instead of such keywords.
+   *
+   * @return {Map}
+   */
+  get skipValuesMap() {
+    if (!this._skipValuesMap) {
+      this._skipValuesMap = new Map();
+
+      for (const property of FONT_PROPERTIES) {
+        const values = this.cssProperties.getValues(property);
+
+        switch (property) {
+          case "line-height":
+          case "letter-spacing":
+            // There's special handling for "normal" so remove it from the skip list.
+            this.skipValuesMap.set(
+              property,
+              values.filter(value => value !== "normal")
+            );
+            break;
+          default:
+            this.skipValuesMap.set(property, values);
+        }
+      }
+    }
+
+    return this._skipValuesMap;
+  }
+
+  init() {
+    if (!this.inspector) {
+      return;
+    }
+
+    const fontsApp = FontsApp({
+      onInstanceChange: this.onInstanceChange,
+      onToggleFontHighlight: this.onToggleFontHighlight,
+      onPreviewTextChange: this.onPreviewTextChange,
+      onPropertyChange: this.onPropertyChange,
+    });
+
+    const provider = createElement(
+      Provider,
+      {
+        id: "fontinspector",
+        key: "fontinspector",
+        store: this.store,
+        title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
+      },
+      fontsApp
+    );
+
+    // Expose the provider to let inspector.js use it in setupSidebar.
+    this.provider = provider;
+
+    this.inspector.selection.on("new-node-front", this.onNewNode);
+    // @see ToolSidebar.onSidebarTabSelected()
+    this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
+
+    this.inspector.toolbox.resourceCommand.watchResources(
+      [this.inspector.toolbox.resourceCommand.TYPES.DOCUMENT_EVENT],
+      { onAvailable: this.onResourceAvailable }
+    );
+
+    // Listen for theme changes as the color of the previews depend on the theme
+    gDevTools.on("theme-switched", this.onThemeChanged);
+  }
+
+  /**
+   * Convert a value for font-size between two CSS unit types.
+   * Conversion is done via pixels. If neither of the two given unit types is "px",
+   * recursively get the value in pixels, then convert that result to the desired unit.
+   *
+   * @param  {String} property
+   *         Property name for the converted value.
+   *         Assumed to be "font-size", but special case for "line-height".
+   * @param  {Number} value
+   *         Numeric value to convert.
+   * @param  {String} fromUnit
+   *         CSS unit to convert from.
+   * @param  {String} toUnit
+   *         CSS unit to convert to.
+   * @return {Number}
+   *         Converted numeric value.
+   */
+  async convertUnits(property, value, fromUnit, toUnit) {
+    if (value !== parseFloat(value)) {
+      throw TypeError(
+        `Invalid value for conversion. Expected Number, got ${value}`
+      );
+    }
+
+    const shouldReturn = () => {
+      // Early return if:
+      // - conversion is not required
+      // - property is `line-height`
+      // - `fromUnit` is `em` and `toUnit` is unitless
+      const conversionNotRequired = fromUnit === toUnit || value === 0;
+      const forLineHeight =
+        property === "line-height" && fromUnit === "" && toUnit === "em";
+      const isEmToUnitlessConversion = fromUnit === "em" && toUnit === "";
+      return conversionNotRequired || forLineHeight || isEmToUnitlessConversion;
+    };
+
+    if (shouldReturn()) {
+      return value;
+    }
+
+    // If neither unit is in pixels, first convert the value to pixels.
+    // Reassign input value and source CSS unit.
+    if (toUnit !== "px" && fromUnit !== "px") {
+      value = await this.convertUnits(property, value, fromUnit, "px");
+      fromUnit = "px";
+    }
+
+    // Whether the conversion is done from pixels.
+    const fromPx = fromUnit === "px";
+    // Determine the target CSS unit for conversion.
+    const unit = toUnit === "px" ? fromUnit : toUnit;
+    // Default output value to input value for a 1-to-1 conversion as a guard against
+    // unrecognized CSS units. It will not be correct, but it will also not break.
+    let out = value;
+
+    const converters = {
+      in: () => (fromPx ? value / 96 : value * 96),
+      cm: () => (fromPx ? value * 0.02645833333 : value / 0.02645833333),
+      mm: () => (fromPx ? value * 0.26458333333 : value / 0.26458333333),
+      pt: () => (fromPx ? value * 0.75 : value / 0.75),
+      pc: () => (fromPx ? value * 0.0625 : value / 0.0625),
+      "%": async () => {
+        const fontSize = await this.getReferenceFontSize(property, unit);
+        return fromPx
+          ? (value * 100) / parseFloat(fontSize)
+          : (value / 100) * parseFloat(fontSize);
+      },
+      rem: async () => {
+        const fontSize = await this.getReferenceFontSize(property, unit);
+        return fromPx
+          ? value / parseFloat(fontSize)
+          : value * parseFloat(fontSize);
+      },
+      vh: async () => {
+        const { height } = await this.getReferenceBox(property, unit);
+        return fromPx ? (value * 100) / height : (value / 100) * height;
+      },
+      vw: async () => {
+        const { width } = await this.getReferenceBox(property, unit);
+        return fromPx ? (value * 100) / width : (value / 100) * width;
+      },
+      vmin: async () => {
+        const { width, height } = await this.getReferenceBox(property, unit);
+        return fromPx
+          ? (value * 100) / Math.min(width, height)
+          : (value / 100) * Math.min(width, height);
+      },
+      vmax: async () => {
+        const { width, height } = await this.getReferenceBox(property, unit);
+        return fromPx
+          ? (value * 100) / Math.max(width, height)
+          : (value / 100) * Math.max(width, height);
+      },
+    };
+
+    if (converters.hasOwnProperty(unit)) {
+      const converter = converters[unit];
+      out = await converter();
+    }
+
+    // Special handling for unitless line-height.
+    if (unit === "em" || (unit === "" && property === "line-height")) {
+      const fontSize = await this.getReferenceFontSize(property, unit);
+      out = fromPx
+        ? value / parseFloat(fontSize)
+        : value * parseFloat(fontSize);
+    }
+
+    // Catch any NaN or Infinity as result of dividing by zero in any
+    // of the relative unit conversions which rely on external values.
+    if (isNaN(out) || Math.abs(out) === Infinity) {
+      out = 0;
+    }
+
+    // Return values limited to 3 decimals when:
+    // - the unit is converted from pixels to something else
+    // - the value is for letter spacing, regardless of unit (allow sub-pixel precision)
+    if (fromPx || property === "letter-spacing") {
+      // Round values like 1.000 to 1
+      return out === Math.round(out) ? Math.round(out) : out.toFixed(3);
+    }
+
+    // Round pixel values.
+    return Math.round(out);
+  }
+
+  /**
+   * Destruction function called when the inspector is destroyed. Removes event listeners
+   * and cleans up references.
+   */
+  destroy() {
+    this.inspector.selection.off("new-node-front", this.onNewNode);
+    this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
+    this.ruleView.off("property-value-updated", this.onRulePropertyUpdated);
+    gDevTools.off("theme-switched", this.onThemeChanged);
+
+    this.inspector.toolbox.resourceCommand.unwatchResources(
+      [this.inspector.toolbox.resourceCommand.TYPES.DOCUMENT_EVENT],
+      { onAvailable: this.onResourceAvailable }
+    );
+
+    this.fontsHighlighter = null;
+    this.document = null;
+    this.inspector = null;
+    this.node = null;
+    this.nodeComputedStyle = {};
+    this.pageStyle = null;
+    this.ruleView = null;
+    this.selectedRule = null;
+    this.store = null;
+    this.writers.clear();
+    this.writers = null;
+  }
+
+  onResourceAvailable(resources) {
+    for (const resource of resources) {
+      if (
+        resource.resourceType ===
+          this.inspector.commands.resourceCommand.TYPES.DOCUMENT_EVENT &&
+        resource.name === "will-navigate" &&
+        resource.targetFront.isTopLevel
+      ) {
+        // Reset the fontsHighlighter so the next call to `onToggleFontHighlight` will
+        // re-create it from the inspector front tied to the new document.
+        this.fontsHighlighter = null;
+      }
+    }
+  }
+
+  /**
+   * Get all expected CSS font properties and values from the node's matching rules and
+   * fallback to computed style. Skip CSS Custom Properties, `calc()` and keyword values.
+   *
+   * @return {Object}
+   */
+  async getFontProperties() {
+    const properties = {};
+
+    // First, get all expected font properties from computed styles, if available.
+    for (const prop of FONT_PROPERTIES) {
+      properties[prop] =
+        this.nodeComputedStyle[prop] && this.nodeComputedStyle[prop].value
+          ? this.nodeComputedStyle[prop].value
+          : "";
+    }
+
+    // Then, replace with enabled font properties found on any of the rules that apply.
+    for (const rule of this.ruleView.rules) {
+      if (rule.inherited) {
+        continue;
+      }
+
+      for (const textProp of rule.textProps) {
+        if (
+          FONT_PROPERTIES.includes(textProp.name) &&
+          !this.skipValuesMap.get(textProp.name).includes(textProp.value) &&
+          !textProp.value.includes("calc(") &&
+          !textProp.value.includes("var(") &&
+          !textProp.overridden &&
+          textProp.enabled
+        ) {
+          properties[textProp.name] = textProp.value;
+        }
+      }
+    }
+
+    return properties;
+  }
+
+  async getFontsForNode(node, options) {
+    // In case we've been destroyed in the meantime
+    if (!this.document) {
+      return [];
+    }
+
+    const fonts = await this.pageStyle
+      .getUsedFontFaces(node, options)
+      .catch(console.error);
+    if (!fonts) {
+      return [];
+    }
+
+    return fonts;
+  }
+
+  async getAllFonts(options) {
+    // In case we've been destroyed in the meantime
+    if (!this.document) {
+      return [];
+    }
+
+    const inspectorFronts = await this.inspector.getAllInspectorFronts();
+
+    let allFonts = [];
+    for (const { pageStyle } of inspectorFronts) {
+      allFonts = allFonts.concat(await pageStyle.getAllUsedFontFaces(options));
+    }
+
+    return allFonts;
+  }
+
+  /**
+   * Get the box dimensions used for unit conversion according to the CSS property and
+   * target CSS unit.
+   *
+   * @param  {String} property
+   *         CSS property
+   * @param  {String} unit
+   *         Target CSS unit
+   * @return {Promise}
+   *         Promise that resolves with an object with box dimensions in pixels.
+   */
+  async getReferenceBox(property, unit) {
+    const box = { width: 0, height: 0 };
+    const node = await this.getReferenceNode(property, unit).catch(
+      console.error
+    );
+
+    if (!node) {
+      return box;
+    }
+
+    switch (unit) {
+      case "vh":
+      case "vw":
+      case "vmin":
+      case "vmax":
+        const dim = await node.getOwnerGlobalDimensions().catch(console.error);
+        if (dim) {
+          box.width = dim.innerWidth;
+          box.height = dim.innerHeight;
+        }
+        break;
+
+      case "%":
+        const style = await this.pageStyle
+          .getComputed(node)
+          .catch(console.error);
+        if (style) {
+          box.width = style.width.value;
+          box.height = style.height.value;
+        }
+        break;
+    }
+
+    return box;
+  }
+
+  /**
+   * Get the refernece font size value used for unit conversion according to the
+   * CSS property and target CSS unit.
+   *
+   * @param {String} property
+   *        CSS property
+   * @param {String} unit
+   *        Target CSS unit
+   * @return {Promise}
+   *         Promise that resolves with the reference font size value or null if there
+   *         was an error getting that value.
+   */
+  async getReferenceFontSize(property, unit) {
+    const node = await this.getReferenceNode(property, unit).catch(
+      console.error
+    );
+    if (!node) {
+      return null;
+    }
+
+    const style = await this.pageStyle.getComputed(node).catch(console.error);
+    if (!style) {
+      return null;
+    }
+
+    return style["font-size"].value;
+  }
+
+  /**
+   * Get the reference node used in measurements for unit conversion according to the
+   * the CSS property and target CSS unit type.
+   *
+   * @param  {String} property
+   *         CSS property
+   * @param  {String} unit
+   *         Target CSS unit
+   * @return {Promise}
+   *          Promise that resolves with the reference node used in measurements for unit
+   *          conversion.
+   */
+  async getReferenceNode(property, unit) {
+    let node;
+
+    switch (property) {
+      case "line-height":
+      case "letter-spacing":
+        node = this.node;
+        break;
+      default:
+        node = this.node.parentNode();
+    }
+
+    switch (unit) {
+      case "rem":
+        // Regardless of CSS property, always use the root document element for "rem".
+        node = await this.node.walkerFront.documentElement();
+        break;
+    }
+
+    return node;
+  }
+
+  /**
+   * Get a reference to a TextProperty instance from the current selected rule for a
+   * given property name.
+   *
+   * @param {String} name
+   *        CSS property name
+   * @return {TextProperty|null}
+   */
+  getTextProperty(name) {
+    if (!this.selectedRule) {
+      return null;
+    }
+
+    return this.selectedRule.textProps.find(
+      prop => prop.name === name && prop.enabled && !prop.overridden
+    );
+  }
+
+  /**
+   * Given the axis name of a registered axis, return a method which updates the
+   * corresponding CSS font property when called with a value.
+   *
+   * All variable font axes can be written in the value of the "font-variation-settings"
+   * CSS font property. In CSS Fonts Level 4, registered axes values can be used as
+   * values of font properties, like "font-weight", "font-stretch" and "font-style".
+   *
+   * Axes declared in "font-variation-settings", either on the rule or inherited,
+   * overwrite any corresponding font properties. Updates to these axes must be written
+   * to "font-variation-settings" to preserve the cascade. Authors are discouraged from
+   * using this practice. Whenever possible, registered axes values should be written to
+   * their corresponding font properties.
+   *
+   * Registered axis name to font property mapping:
+   *  - wdth -> font-stretch
+   *  - wght -> font-weight
+   *  - opsz -> font-optical-sizing
+   *  - slnt -> font-style
+   *  - ital -> font-style
+   *
+   * @param {String} axis
+   *        Name of registered axis.
+   * @return {Function}
+   *         Method to call which updates the corresponding CSS font property.
+   */
+  getWriterForAxis(axis) {
+    // Find any declaration of "font-variation-setttings".
+    const FVSComputedStyle = this.nodeComputedStyle["font-variation-settings"];
+
+    // If "font-variation-settings" CSS property is defined (on the rule or inherited)
+    // and contains a declaration for the given registered axis, write to it.
+    if (FVSComputedStyle && FVSComputedStyle.value.includes(axis)) {
+      return this.updateFontVariationSettings;
+    }
+
+    // Get corresponding CSS font property value for registered axis.
+    const property = REGISTERED_AXES_TO_FONT_PROPERTIES[axis];
+
+    return value => {
+      let condition = false;
+
+      switch (axis) {
+        case "wght":
+          // Whether the page supports values of font-weight from CSS Fonts Level 4.
+          condition = this.pageStyle.supportsFontWeightLevel4;
+          break;
+
+        case "wdth":
+          // font-stretch in CSS Fonts Level 4 accepts percentage units.
+          value = `${value}%`;
+          // Whether the page supports values of font-stretch from CSS Fonts Level 4.
+          condition = this.pageStyle.supportsFontStretchLevel4;
+          break;
+
+        case "slnt":
+          // font-style in CSS Fonts Level 4 accepts an angle value.
+          // We have to invert the sign of the angle because CSS and OpenType measure
+          // in opposite directions.
+          value = -value;
+          value = `oblique ${value}deg`;
+          // Whether the page supports values of font-style from CSS Fonts Level 4.
+          condition = this.pageStyle.supportsFontStyleLevel4;
+          break;
+      }
+
+      if (condition) {
+        this.updatePropertyValue(property, value);
+      } else {
+        // Replace the writer method for this axis so it won't get called next time.
+        this.writers.set(axis, this.updateFontVariationSettings);
+        // Fall back to writing to font-variation-settings together with all other axes.
+        this.updateFontVariationSettings();
+      }
+    };
+  }
+
+  /**
+   * Given a CSS property name or axis name of a variable font, return a method which
+   * updates the corresponding CSS font property when called with a value.
+   *
+   * This is used to distinguish between CSS font properties, registered axes and
+   * custom axes. Registered axes, like "wght" and "wdth", should be written to
+   * corresponding CSS properties, like "font-weight" and "font-stretch".
+   *
+   * Unrecognized names (which aren't font property names or registered axes names) are
+   * considered to be custom axes names and will be written to the
+   * "font-variation-settings" CSS property.
+   *
+   * @param {String} name
+   *        CSS property name or axis name.
+   * @return {Function}
+   *         Method which updates the rule view and page style.
+   */
+  getWriterForProperty(name) {
+    if (this.writers.has(name)) {
+      return this.writers.get(name);
+    }
+
+    if (REGISTERED_AXES.includes(name)) {
+      this.writers.set(name, this.getWriterForAxis(name));
+    } else if (FONT_PROPERTIES.includes(name)) {
+      this.writers.set(name, value => {
+        this.updatePropertyValue(name, value);
+      });
+    } else {
+      this.writers.set(name, this.updateFontVariationSettings);
+    }
+
+    return this.writers.get(name);
+  }
+
+  /**
+   * Check if the font inspector panel is visible.
+   *
+   * @return {Boolean}
+   */
+  isPanelVisible() {
+    return (
+      this.inspector &&
+      this.inspector.sidebar &&
+      this.inspector.sidebar.getCurrentTabID() === "fontinspector"
+    );
+  }
+
+  /**
+   * Upon a new node selection, log some interesting telemetry probes.
+   */
+  logTelemetryProbesOnNewNode() {
+    const { fontEditor } = this.store.getState();
+    const { telemetry } = this.inspector;
+
+    // Log data about the currently edited font (if any).
+    // Note that the edited font is always the first one from the fontEditor.fonts array.
+    const editedFont = fontEditor.fonts[0];
+    if (!editedFont) {
+      return;
+    }
+
+    const nbOfAxes = editedFont.variationAxes
+      ? editedFont.variationAxes.length
+      : 0;
+    telemetry
+      .getHistogramById(HISTOGRAM_FONT_TYPE_DISPLAYED)
+      .add(!nbOfAxes ? "nonvariable" : "variable");
+  }
+
+  /**
+   * Sync the Rule view with the latest styles from the page. Called in a debounced way
+   * (see constructor) after property changes are applied directly to the CSS style rule
+   * on the page circumventing direct TextProperty.setValue() which triggers expensive DOM
+   * operations in TextPropertyEditor.update().
+   *
+   * @param  {String} name
+   *         CSS property name
+   * @param  {String} value
+   *         CSS property value
+   */
+  async syncChanges(name, value) {
+    const textProperty = this.getTextProperty(name, value);
+    if (textProperty) {
+      try {
+        await textProperty.setValue(value, "", true);
+        this.ruleView.on("property-value-updated", this.onRulePropertyUpdated);
+      } catch (error) {
+        // Because setValue() does an asynchronous call to the server, there is a chance
+        // the font editor was destroyed while we were waiting. If that happened, just
+        // bail out silently.
+        if (!this.document) {
+          return;
+        }
+
+        throw error;
+      }
+    }
+  }
+
+  /**
+   * Handler for changes of a font axis value coming from the FontEditor.
+   *
+   * @param  {String} tag
+   *         Tag name of the font axis.
+   * @param  {Number} value
+   *         Value of the font axis.
+   */
+  onAxisUpdate(tag, value) {
+    this.store.dispatch(updateAxis(tag, value));
+    const writer = this.getWriterForProperty(tag);
+    writer(value.toString());
+  }
+
+  /**
+   * Handler for changes of a CSS font property value coming from the FontEditor.
+   *
+   * @param  {String} property
+   *         CSS font property name.
+   * @param  {Number} value
+   *         CSS font property numeric value.
+   * @param  {String|null} unit
+   *         CSS unit or null
+   */
+  onFontPropertyUpdate(property, value, unit) {
+    value = unit !== null ? value + unit : value;
+    this.store.dispatch(updateFontProperty(property, value));
+    const writer = this.getWriterForProperty(property);
+    writer(value.toString());
+  }
+
+  /**
+   * Handler for selecting a font variation instance. Dispatches an action which updates
+   * the axes and their values as defined by that variation instance.
+   *
+   * @param {String} name
+   *        Name of variation instance. (ex: Light, Regular, Ultrabold, etc.)
+   * @param {Array} values
+   *        Array of objects with axes and values defined by the variation instance.
+   */
+  onInstanceChange(name, values) {
+    this.store.dispatch(applyInstance(name, values));
+    let writer;
+    values.map(obj => {
+      writer = this.getWriterForProperty(obj.axis);
+      writer(obj.value.toString());
+    });
+  }
+
+  /**
+   * Event handler for "new-node-front" event fired when a new node is selected in the
+   * markup view.
+   *
+   * Sets the selected node for which font faces and font properties will be
+   * shown in the font editor. If the selection is a text node, use its parent element.
+   *
+   * Triggers a refresh of the font editor and font overview if the panel is visible.
+   */
+  onNewNode() {
+    this.ruleView.off("property-value-updated", this.onRulePropertyUpdated);
+
+    // First, reset the selected node and page style front.
+    this.node = null;
+    this.pageStyle = null;
+
+    // Then attempt to assign a selected node according to its type.
+    const selection = this.inspector && this.inspector.selection;
+    if (selection && selection.isConnected()) {
+      if (selection.isElementNode()) {
+        this.node = selection.nodeFront;
+      } else if (selection.isTextNode()) {
+        this.node = selection.nodeFront.parentNode();
+      }
+
+      this.pageStyle = this.node.inspectorFront.pageStyle;
+    }
+
+    if (this.isPanelVisible()) {
+      Promise.all([this.update(), this.refreshFontEditor()])
+        .then(() => {
+          this.logTelemetryProbesOnNewNode();
+        })
+        .catch(e => console.error(e));
+    }
+  }
+
+  /**
+   * Handler for change in preview input.
+   */
+  onPreviewTextChange(value) {
+    this.store.dispatch(updatePreviewText(value));
+    this.update();
+  }
+
+  /**
+   * Handler for changes to any CSS font property value or variable font axis value coming
+   * from the Font Editor. This handler calls the appropriate method to preview the
+   * changes on the page and update the store.
+   *
+   * If the property parameter is not a recognized CSS font property name, assume it's a
+   * variable font axis name.
+   *
+   * @param  {String} property
+   *         CSS font property name or axis name
+   * @param  {Number} value
+   *         CSS font property value or axis value
+   * @param  {String|undefined} fromUnit
+   *         Optional CSS unit to convert from
+   * @param  {String|undefined} toUnit
+   *         Optional CSS unit to convert to
+   */
+  async onPropertyChange(property, value, fromUnit, toUnit) {
+    if (FONT_PROPERTIES.includes(property)) {
+      let unit = fromUnit;
+
+      // Strict checks because "line-height" value may be unitless (empty string).
+      if (toUnit !== undefined && fromUnit !== undefined) {
+        value = await this.convertUnits(property, value, fromUnit, toUnit);
+        unit = toUnit;
+      }
+
+      this.onFontPropertyUpdate(property, value, unit);
+    } else {
+      this.onAxisUpdate(property, value);
+    }
+  }
+
+  /**
+   * Handler for "property-value-updated" event emitted from the rule view whenever a
+   * property value changes. Ignore changes to properties unrelated to the font editor.
+   *
+   * @param {Object} eventData
+   *        Object with the property name and value and origin rule.
+   *        Example: { name: "font-size", value: "1em", rule: Object }
+   */
+  async onRulePropertyUpdated(eventData) {
+    if (!this.selectedRule || !FONT_PROPERTIES.includes(eventData.property)) {
+      return;
+    }
+
+    if (this.isPanelVisible()) {
+      await this.refreshFontEditor();
+    }
+  }
+
+  /**
+   * Reveal a font's usage in the page.
+   *
+   * @param  {String} font
+   *         The name of the font to be revealed in the page.
+   * @param  {Boolean} show
+   *         Whether or not to reveal the font.
+   * @param  {Boolean} isForCurrentElement
+   *         Optional. Default `true`. Whether or not to restrict revealing the font
+   *         just to the current element selection.
+   */
+  async onToggleFontHighlight(font, show, isForCurrentElement = true) {
+    if (!this.fontsHighlighter) {
+      try {
+        this.fontsHighlighter =
+          await this.inspector.inspectorFront.getHighlighterByType(
+            "FontsHighlighter"
+          );
+      } catch (e) {
+        // the FontsHighlighter won't be available when debugging a XUL document.
+        // Silently fail here and prevent any future calls to the function.
+        this.onToggleFontHighlight = () => {};
+        return;
+      }
+    }
+
+    try {
+      if (show) {
+        const node = isForCurrentElement
+          ? this.node
+          : this.node.walkerFront.rootNode;
+
+        await this.fontsHighlighter.show(node, {
+          CSSFamilyName: font.CSSFamilyName,
+          name: font.name,
+        });
+      } else {
+        await this.fontsHighlighter.hide();
+      }
+    } catch (e) {
+      // Silently handle protocol errors here, because these might be called during
+      // shutdown of the browser or devtools, and we don't care if they fail.
+    }
+  }
+
+  /**
+   * Handler for the "theme-switched" event.
+   */
+  onThemeChanged(frame) {
+    if (frame === this.document.defaultView) {
+      this.update();
+    }
+  }
+
+  /**
+   * Update the state of the font editor with:
+   * - the fonts which apply to the current node;
+   * - the computed style CSS font properties of the current node.
+   *
+   * This method is called:
+   * - when a new node is selected;
+   * - when any property is changed in the Rule view.
+   * For the latter case, we compare between the latest computed style font properties
+   * and the ones already in the store to decide if to update the font editor state.
+   */
+  async refreshFontEditor() {
+    if (!this.node) {
+      this.store.dispatch(resetFontEditor());
+      return;
+    }
+
+    const options = {};
+    if (this.pageStyle.supportsFontVariations) {
+      options.includeVariations = true;
+    }
+
+    const fonts = await this.getFontsForNode(this.node, options);
+
+    try {
+      // Get computed styles for the selected node, but filter by CSS font properties.
+      this.nodeComputedStyle = await this.pageStyle.getComputed(this.node, {
+        filterProperties: FONT_PROPERTIES,
+      });
+    } catch (e) {
+      // Because getComputed is async, there is a chance the font editor was
+      // destroyed while we were waiting. If that happened, just bail out
+      // silently.
+      if (!this.document) {
+        return;
+      }
+
+      throw e;
+    }
+
+    if (!this.nodeComputedStyle || !fonts.length) {
+      this.store.dispatch(resetFontEditor());
+      this.inspector.emit("fonteditor-updated");
+      return;
+    }
+
+    // Clear any references to writer methods and CSS declarations because the node's
+    // styles may have changed since the last font editor refresh.
+    this.writers.clear();
+
+    // If the Rule panel is not visible, the selected element's rule models may not have
+    // been created yet. For example, in 2-pane mode when Fonts is opened as the default
+    // panel. Select the current node to force the Rule view to create the rule models.
+    if (!this.ruleViewTool.isPanelVisible()) {
+      await this.ruleView.selectElement(this.node, false);
+    }
+
+    // Select the node's inline style as the rule where to write property value changes.
+    this.selectedRule = this.ruleView.rules.find(
+      rule => rule.domRule.type === ELEMENT_STYLE
+    );
+
+    const properties = await this.getFontProperties();
+    // Assign writer methods to each axis defined in font-variation-settings.
+    const axes = parseFontVariationAxes(properties["font-variation-settings"]);
+    Object.keys(axes).map(axis => {
+      this.writers.set(axis, this.getWriterForAxis(axis));
+    });
+
+    this.store.dispatch(updateFontEditor(fonts, properties, this.node.actorID));
+    this.store.dispatch(setEditorDisabled(this.node.isPseudoElement));
+
+    this.inspector.emit("fonteditor-updated");
+    // Listen to manual changes in the Rule view that could update the Font Editor state
+    this.ruleView.on("property-value-updated", this.onRulePropertyUpdated);
+  }
+
+  async update() {
+    // Stop refreshing if the inspector or store is already destroyed.
+    if (!this.inspector || !this.store) {
+      return;
+    }
+
+    let allFonts = [];
+
+    if (!this.node) {
+      this.store.dispatch(updateFonts(allFonts));
+      return;
+    }
+
+    const { fontOptions } = this.store.getState();
+    const { previewText } = fontOptions;
+
+    const options = {
+      includePreviews: true,
+      // Coerce the type of `supportsFontVariations` to a boolean.
+      includeVariations: !!this.pageStyle.supportsFontVariations,
+      previewText,
+      previewFillStyle: getColor("body-color"),
+    };
+
+    // If there are no fonts used on the page, the result is an empty array.
+    allFonts = await this.getAllFonts(options);
+
+    // Augment each font object with a dataURI for an image with a sample of the font.
+    for (const font of [...allFonts]) {
+      font.previewUrl = await font.preview.data.string();
+    }
+
+    // Dispatch to the store if it hasn't been destroyed in the meantime.
+    this.store && this.store.dispatch(updateFonts(allFonts));
+    // Emit on the inspector if it hasn't been destroyed in the meantime.
+    // Pass the current node in the payload so that tests can check the update
+    // corresponds to the expected node.
+    this.inspector &&
+      this.inspector.emitForTests("fontinspector-updated", this.node);
+  }
+
+  /**
+   * Update the "font-variation-settings" CSS property with the state of all touched
+   * font variation axes which shouldn't be written to other CSS font properties.
+   */
+  updateFontVariationSettings() {
+    const fontEditor = this.store.getState().fontEditor;
+    const name = "font-variation-settings";
+    const value = Object.keys(fontEditor.axes)
+      // Pick only axes which are supposed to be written to font-variation-settings.
+      // Skip registered axes which should be written to a different CSS property.
+      .filter(tag => this.writers.get(tag) === this.updateFontVariationSettings)
+      // Build a string value for the "font-variation-settings" CSS property
+      .map(tag => `"${tag}" ${fontEditor.axes[tag]}`)
+      .join(", ");
+
+    this.updatePropertyValue(name, value);
+  }
+
+  /**
+   * Preview a property value (live) then sync the changes (debounced) to the Rule view.
+   *
+   * NOTE: Until Bug 1462591 is addressed, all changes are written to the element's inline
+   * style attribute. In this current scenario, Rule.previewPropertyValue()
+   * causes the whole inline style representation in the Rule view to update instead of
+   * just previewing the change on the element.
+   * We keep the debounced call to syncChanges() because it explicitly calls
+   * TextProperty.setValue() which performs other actions, including marking the property
+   * as "changed" in the Rule view with a green indicator.
+   *
+   * @param {String} name
+   *        CSS property name
+   * @param {String}value
+   *        CSS property value
+   */
+  updatePropertyValue(name, value) {
+    const textProperty = this.getTextProperty(name);
+
+    if (!textProperty) {
+      this.selectedRule.createProperty(name, value, "", true);
+      return;
+    }
+
+    if (textProperty.value === value) {
+      return;
+    }
+
+    // Prevent reacting to changes we caused.
+    this.ruleView.off("property-value-updated", this.onRulePropertyUpdated);
+    // Live preview font property changes on the page.
+    textProperty.rule
+      .previewPropertyValue(textProperty, value, "")
+      .catch(console.error);
+
+    // Sync Rule view with changes reflected on the page (debounced).
+    this.syncChanges(name, value);
+  }
+}
+
+module.exports = FontInspector;
diff --git a/devtools/client/inspector/fonts/moz.build b/devtools/client/inspector/fonts/moz.build
new file mode 100644
index 0000000000..89106c469c
--- /dev/null
+++ b/devtools/client/inspector/fonts/moz.build
@@ -0,0 +1,19 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "actions",
+    "components",
+    "reducers",
+    "utils",
+]
+
+DevToolsModules(
+    "fonts.js",
+    "types.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/devtools/client/inspector/fonts/reducers/font-editor.js b/devtools/client/inspector/fonts/reducers/font-editor.js
new file mode 100644
index 0000000000..b40fff4ba1
--- /dev/null
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -0,0 +1,157 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
+const {
+  parseFontVariationAxes,
+} = require("resource://devtools/client/inspector/fonts/utils/font-utils.js");
+
+const {
+  APPLY_FONT_VARIATION_INSTANCE,
+  RESET_EDITOR,
+  SET_FONT_EDITOR_DISABLED,
+  UPDATE_AXIS_VALUE,
+  UPDATE_EDITOR_STATE,
+  UPDATE_PROPERTY_VALUE,
+  UPDATE_WARNING_MESSAGE,
+} = require("resource://devtools/client/inspector/fonts/actions/index.js");
+
+const CUSTOM_INSTANCE_NAME = getStr("fontinspector.customInstanceName");
+
+const INITIAL_STATE = {
+  // Variable font axes.
+  axes: {},
+  // Copy of the most recent axes values. Used to revert from a named instance.
+  customInstanceValues: [],
+  // When true, prevent users from interacting with inputs in the font editor.
+  disabled: false,
+  // Fonts used on the selected element.
+  fonts: [],
+  // Current selected font variation instance.
+  instance: {
+    name: CUSTOM_INSTANCE_NAME,
+    values: [],
+  },
+  // CSS font properties defined on the selected rule.
+  properties: {},
+  // Unique identifier for the selected element.
+  id: "",
+  // Warning message with the reason why the font editor cannot be shown.
+  warning: getStr("fontinspector.noFontsUsedOnCurrentElement"),
+};
+
+const reducers = {
+  // Update font editor with the axes and values defined by a font variation instance.
+  [APPLY_FONT_VARIATION_INSTANCE](state, { name, values }) {
+    const newState = { ...state };
+    newState.instance.name = name;
+    newState.instance.values = values;
+
+    if (Array.isArray(values) && values.length) {
+      newState.axes = values.reduce((acc, value) => {
+        acc[value.axis] = value.value;
+        return acc;
+      }, {});
+    }
+
+    return newState;
+  },
+
+  [RESET_EDITOR](state) {
+    return { ...INITIAL_STATE };
+  },
+
+  [UPDATE_AXIS_VALUE](state, { axis, value }) {
+    const newState = { ...state };
+    newState.axes[axis] = value;
+
+    // Cache the latest axes and their values to restore them when switching back from
+    // a named font variation instance to the custom font variation instance.
+    newState.customInstanceValues = Object.keys(state.axes).map(axisName => {
+      return { axis: [axisName], value: state.axes[axisName] };
+    });
+
+    // As soon as an axis value is manually updated, mark the custom font variation
+    // instance as selected.
+    newState.instance.name = CUSTOM_INSTANCE_NAME;
+
+    return newState;
+  },
+
+  [SET_FONT_EDITOR_DISABLED](state, { disabled }) {
+    return { ...state, disabled };
+  },
+
+  [UPDATE_EDITOR_STATE](state, { fonts, properties, id }) {
+    const axes = parseFontVariationAxes(properties["font-variation-settings"]);
+
+    // If not defined in font-variation-settings, setup "wght" axis with the value of
+    // "font-weight" if it is numeric and not a keyword.
+    const weight = properties["font-weight"];
+    if (
+      axes.wght === undefined &&
+      parseFloat(weight).toString() === weight.toString()
+    ) {
+      axes.wght = parseFloat(weight);
+    }
+
+    // If not defined in font-variation-settings, setup "wdth" axis with the percentage
+    // number from the value of "font-stretch" if it is not a keyword.
+    const stretch = properties["font-stretch"];
+    // Match the number part from values like: 10%, 10.55%, 0.2%
+    // If there's a match, the number is the second item in the match array.
+    const match = stretch.trim().match(/^(\d+(.\d+)?)%$/);
+    if (axes.wdth === undefined && match && match[1]) {
+      axes.wdth = parseFloat(match[1]);
+    }
+
+    // If not defined in font-variation-settings, setup "slnt" axis with the negative
+    // of the "font-style: oblique" angle, if any.
+    const style = properties["font-style"];
+    const obliqueMatch = style.trim().match(/^oblique(?:\s*(\d+(.\d+)?)deg)?$/);
+    if (axes.slnt === undefined && obliqueMatch) {
+      if (obliqueMatch[1]) {
+        // Negate the angle because CSS and OpenType measure in opposite directions.
+        axes.slnt = -parseFloat(obliqueMatch[1]);
+      } else {
+        // Lack of an <angle> for "font-style: oblique" represents "14deg".
+        axes.slnt = -14;
+      }
+    }
+
+    // If not defined in font-variation-settings, setup "ital" axis with 0 for
+    // "font-style: normal" or 1 for "font-style: italic".
+    if (axes.ital === undefined) {
+      if (style === "normal") {
+        axes.ital = 0;
+      } else if (style === "italic") {
+        axes.ital = 1;
+      }
+    }
+
+    return { ...state, axes, fonts, properties, id };
+  },
+
+  [UPDATE_PROPERTY_VALUE](state, { property, value }) {
+    const newState = { ...state };
+    newState.properties[property] = value;
+    return newState;
+  },
+
+  [UPDATE_WARNING_MESSAGE](state, { warning }) {
+    return { ...state, warning };
+  },
+};
+
+module.exports = function (state = INITIAL_STATE, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return state;
+  }
+  return reducer(state, action);
+};
diff --git a/devtools/client/inspector/fonts/reducers/font-options.js b/devtools/client/inspector/fonts/reducers/font-options.js
new file mode 100644
index 0000000000..9df8625e56
--- /dev/null
+++ b/devtools/client/inspector/fonts/reducers/font-options.js
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_PREVIEW_TEXT,
+} = require("resource://devtools/client/inspector/fonts/actions/index.js");
+
+const INITIAL_FONT_OPTIONS = {
+  previewText: "",
+};
+
+const reducers = {
+  [UPDATE_PREVIEW_TEXT](fontOptions, { previewText }) {
+    return Object.assign({}, fontOptions, { previewText });
+  },
+};
+
+module.exports = function (fontOptions = INITIAL_FONT_OPTIONS, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return fontOptions;
+  }
+  return reducer(fontOptions, action);
+};
diff --git a/devtools/client/inspector/fonts/reducers/fonts.js b/devtools/client/inspector/fonts/reducers/fonts.js
new file mode 100644
index 0000000000..92a6ef87c1
--- /dev/null
+++ b/devtools/client/inspector/fonts/reducers/fonts.js
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_FONTS,
+} = require("resource://devtools/client/inspector/fonts/actions/index.js");
+
+const INITIAL_FONT_DATA = {
+  // All fonts on the current page.
+  allFonts: [],
+};
+
+const reducers = {
+  [UPDATE_FONTS](_, { allFonts }) {
+    return { allFonts };
+  },
+};
+
+module.exports = function (fontData = INITIAL_FONT_DATA, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return fontData;
+  }
+  return reducer(fontData, action);
+};
diff --git a/devtools/client/inspector/fonts/reducers/moz.build b/devtools/client/inspector/fonts/reducers/moz.build
new file mode 100644
index 0000000000..13d1c7cf34
--- /dev/null
+++ b/devtools/client/inspector/fonts/reducers/moz.build
@@ -0,0 +1,11 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "font-editor.js",
+    "font-options.js",
+    "fonts.js",
+)
diff --git a/devtools/client/inspector/fonts/test/OstrichLicense.txt b/devtools/client/inspector/fonts/test/OstrichLicense.txt
new file mode 100644
index 0000000000..14c043d601
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/OstrichLicense.txt
@@ -0,0 +1,41 @@
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/devtools/client/inspector/fonts/test/browser.toml b/devtools/client/inspector/fonts/test/browser.toml
new file mode 100644
index 0000000000..380380376a
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser.toml
@@ -0,0 +1,55 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_browser_fontinspector.html",
+  "doc_browser_fontinspector_iframe.html",
+  "test_iframe.html",
+  "ostrich-black.ttf",
+  "ostrich-regular.ttf",
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_fontinspector.js"]
+
+["browser_fontinspector_all-fonts.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_fontinspector_copy-URL.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_fontinspector_edit-previews.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_fontinspector_editor-font-size-conversion.js"]
+
+["browser_fontinspector_editor-keywords.js"]
+
+["browser_fontinspector_editor-letter-spacing-conversion.js"]
+
+["browser_fontinspector_editor-values.js"]
+
+["browser_fontinspector_expand-css-code.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_fontinspector_font-type-telemetry.js"]
+
+["browser_fontinspector_input-element-used-font.js"]
+
+["browser_fontinspector_no-fonts.js"]
+
+["browser_fontinspector_reveal-in-page.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_fontinspector_text-node.js"]
+
+["browser_fontinspector_theme-change.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector.js b/devtools/client/inspector/fonts/test/browser_fontinspector.js
new file mode 100644
index 0000000000..98c4fc6b9f
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector.js
@@ -0,0 +1,94 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+requestLongerTimeout(2);
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  ok(!!view, "Font inspector document is alive.");
+
+  const viewDoc = view.document;
+
+  await testBodyFonts(inspector, viewDoc);
+  await testDivFonts(inspector, viewDoc);
+});
+
+async function testBodyFonts(inspector, viewDoc) {
+  const FONTS = [
+    {
+      familyName: "bar",
+      name: ["Ostrich Sans Medium", "Ostrich Sans Black"],
+    },
+    {
+      familyName: "barnormal",
+      name: "Ostrich Sans Medium",
+    },
+    {
+      // On Linux, Arial does not exist. Liberation Sans is used instead.
+      familyName: ["Arial", "Liberation Sans"],
+      name: ["Arial", "Liberation Sans"],
+    },
+  ];
+
+  await selectNode("body", inspector);
+
+  const groups = getUsedFontGroupsEls(viewDoc);
+  is(groups.length, 3, "Found 3 font families used on BODY");
+
+  for (let i = 0; i < FONTS.length; i++) {
+    const groupEL = groups[i];
+    const font = FONTS[i];
+
+    const familyName = getFamilyName(groupEL);
+    ok(
+      font.familyName.includes(familyName),
+      `Font families used on BODY include: ${familyName}`
+    );
+
+    const fontName = getName(groupEL);
+    ok(font.name.includes(fontName), `Fonts used on BODY include: ${fontName}`);
+  }
+}
+
+async function testDivFonts(inspector, viewDoc) {
+  const FONTS = [
+    {
+      selector: "div",
+      familyName: "bar",
+      name: "Ostrich Sans Medium",
+    },
+    {
+      selector: ".normal-text",
+      familyName: "barnormal",
+      name: "Ostrich Sans Medium",
+    },
+    {
+      selector: ".bold-text",
+      familyName: "bar",
+      name: "Ostrich Sans Black",
+    },
+    {
+      selector: ".black-text",
+      familyName: "bar",
+      name: "Ostrich Sans Black",
+    },
+  ];
+
+  for (let i = 0; i < FONTS.length; i++) {
+    await selectNode(FONTS[i].selector, inspector);
+    const groups = getUsedFontGroupsEls(viewDoc);
+    const groupEl = groups[0];
+    const font = FONTS[i];
+
+    is(groups.length, 1, `Found 1 font on ${FONTS[i].selector}`);
+    is(getName(groupEl), font.name, "The DIV font has the right name");
+    is(
+      getFamilyName(groupEl),
+      font.familyName,
+      `font has the right family name`
+    );
+  }
+}
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_all-fonts.js b/devtools/client/inspector/fonts/test/browser_fontinspector_all-fonts.js
new file mode 100644
index 0000000000..7f2acfaebb
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_all-fonts.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Check that the font editor has a section for "All fonts" which shows all fonts
+// used on the page.
+
+const TEST_URI = URL_ROOT_SSL + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  const allFontsAccordion = getFontsAccordion(viewDoc);
+  ok(allFontsAccordion, "There's an accordion in the panel");
+  is(
+    allFontsAccordion.textContent,
+    "All Fonts on Page",
+    "It has the right title"
+  );
+
+  await expandAccordion(allFontsAccordion);
+  const allFontsEls = getAllFontsEls(viewDoc);
+
+  const FONTS = [
+    {
+      familyName: ["bar"],
+      name: ["Ostrich Sans Medium"],
+      remote: true,
+      url: URL_ROOT_SSL + "ostrich-regular.ttf",
+    },
+    {
+      familyName: ["bar"],
+      name: ["Ostrich Sans Black"],
+      remote: true,
+      url: URL_ROOT_SSL + "ostrich-black.ttf",
+    },
+    {
+      familyName: ["bar"],
+      name: ["Ostrich Sans Black"],
+      remote: true,
+      url: URL_ROOT_SSL + "ostrich-black.ttf",
+    },
+    {
+      familyName: ["barnormal"],
+      name: ["Ostrich Sans Medium"],
+      remote: true,
+      url: URL_ROOT_SSL + "ostrich-regular.ttf",
+    },
+    {
+      // On Linux, Arial does not exist. Liberation Sans is used instead.
+      familyName: ["Arial", "Liberation Sans"],
+      name: ["Arial", "Liberation Sans"],
+      remote: false,
+      url: "system",
+    },
+    {
+      // On Linux, Times New Roman does not exist. Liberation Serif is used instead.
+      familyName: ["Times New Roman", "Liberation Serif"],
+      name: ["Times New Roman", "Liberation Serif"],
+      remote: false,
+      url: "system",
+    },
+  ];
+
+  is(allFontsEls.length, FONTS.length, "All fonts used are listed");
+
+  for (let i = 0; i < FONTS.length; i++) {
+    const li = allFontsEls[i];
+    const font = FONTS[i];
+
+    ok(font.name.includes(getName(li)), "The DIV font has the right name");
+    info(getName(li));
+    ok(
+      font.familyName.includes(getFamilyName(li)),
+      `font has the right family name`
+    );
+    info(getFamilyName(li));
+    is(isRemote(li), font.remote, `font remote value correct`);
+    is(getURL(li), font.url, `font url correct`);
+  }
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_copy-URL.js b/devtools/client/inspector/fonts/test/browser_fontinspector_copy-URL.js
new file mode 100644
index 0000000000..e871fb42f3
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_copy-URL.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that an icon appears next to web font URLs, and that clicking it copies the URL
+// to the clipboard thanks to it.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+  await selectNode("div", inspector);
+  await expandFontsAccordion(viewDoc);
+  const allFontsEls = getAllFontsEls(viewDoc);
+  const fontEl = allFontsEls[0];
+
+  const linkEl = fontEl.querySelector(".font-origin");
+  const iconEl = linkEl.querySelector(".copy-icon");
+
+  ok(iconEl, "The icon is displayed");
+  is(iconEl.getAttribute("title"), "Copy URL", "This is the right icon");
+
+  info("Clicking the button and waiting for the clipboard to receive the URL");
+  await waitForClipboardPromise(() => iconEl.click(), linkEl.textContent);
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js b/devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js
new file mode 100644
index 0000000000..b29be4ca3f
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that previews change when the preview text changes. It doesn't check the
+// exact preview images because they are drawn on a canvas causing them to vary
+// between systems, platforms and software versions.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+  await selectNode("div", inspector);
+  await expandFontsAccordion(viewDoc);
+
+  const previews = viewDoc.querySelectorAll("#font-container .font-preview");
+  const initialPreviews = [...previews].map(p => p.src);
+
+  info("Typing 'Abc' to check that the reference previews are correct.");
+  await updatePreviewText(view, "Abc");
+  checkPreviewImages(viewDoc, initialPreviews, true);
+
+  info("Typing something else to the preview box.");
+  await updatePreviewText(view, "The quick brown");
+  checkPreviewImages(viewDoc, initialPreviews, false);
+
+  info("Blanking the input to restore default previews.");
+  await updatePreviewText(view, "");
+  checkPreviewImages(viewDoc, initialPreviews, true);
+});
+
+/**
+ * Compares the previous preview image URIs to the current URIs.
+ *
+ * @param {Document} viewDoc
+ *        The FontInspector document.
+ * @param {Array[String]} originalURIs
+ *        An array of URIs to compare with the current URIs.
+ * @param {Boolean} assertIdentical
+ *        If true, this method asserts that the previous and current URIs are
+ *        identical. If false, this method asserts that the previous and current
+ *        URI's are different.
+ */
+function checkPreviewImages(viewDoc, originalURIs, assertIdentical) {
+  const previews = viewDoc.querySelectorAll("#font-container .font-preview");
+  const newURIs = [...previews].map(p => p.src);
+
+  is(
+    newURIs.length,
+    originalURIs.length,
+    "The number of previews has not changed."
+  );
+
+  for (let i = 0; i < newURIs.length; ++i) {
+    if (assertIdentical) {
+      is(
+        newURIs[i],
+        originalURIs[i],
+        `The preview image at index ${i} has stayed the same.`
+      );
+    } else {
+      isnot(
+        newURIs[i],
+        originalURIs[i],
+        `The preview image at index ${i} has changed.`
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js
new file mode 100644
index 0000000000..f12769ff01
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Unit test for math behind conversion of units for font-size. A reference element is
+// needed for converting to and from relative units (rem, em, %). A controlled viewport
+// is needed (iframe) for converting to and from viewport units (vh, vw, vmax, vmin).
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector_iframe.html";
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+  const property = "font-size";
+  const selector = ".viewport-size";
+  const UNITS = {
+    px: 50,
+    vw: 10,
+    vh: 20,
+    vmin: 20,
+    vmax: 10,
+    em: 1.389,
+    rem: 3.125,
+    "%": 138.889,
+    pt: 37.5,
+    pc: 3.125,
+    mm: 13.229,
+    cm: 1.323,
+    in: 0.521,
+  };
+
+  await selectNodeInFrames(["#frame", selector], inspector);
+
+  info("Check that font editor shows font-size value in original units");
+  const fontSize = getPropertyValue(viewDoc, property);
+  is(fontSize.unit, "vw", "Original unit for font size is vw");
+  is(fontSize.value + fontSize.unit, "10vw", "Original font size is 10vw");
+
+  // Starting value and unit for conversion.
+  let prevValue = fontSize.value;
+  let prevUnit = fontSize.unit;
+
+  for (const unit in UNITS) {
+    const value = UNITS[unit];
+
+    info(`Convert font-size from ${prevValue}${prevUnit} to ${unit}`);
+    const convertedValue = await view.convertUnits(
+      property,
+      prevValue,
+      prevUnit,
+      unit
+    );
+    is(
+      parseFloat(convertedValue),
+      parseFloat(value),
+      `Converting to ${unit} returns transformed value.`
+    );
+
+    // Store current unit and value to use in conversion on the next iteration.
+    prevUnit = unit;
+    prevValue = value;
+  }
+
+  info(`Check that conversion from fake unit returns 1-to-1 mapping.`);
+  const valueFromFakeUnit = await view.convertUnits(property, 1, "fake", "px");
+  is(valueFromFakeUnit, 1, `Converting from fake unit returns same value.`);
+
+  info(`Check that conversion to fake unit returns 1-to-1 mapping`);
+  const valueToFakeUnit = await view.convertUnits(property, 1, "px", "fake");
+  is(valueToFakeUnit, 1, `Converting to fake unit returns same value.`);
+
+  info(`Check that conversion between fake units returns 1-to-1 mapping.`);
+  const valueBetweenFakeUnit = await view.convertUnits(
+    property,
+    1,
+    "bogus",
+    "fake"
+  );
+  is(
+    valueBetweenFakeUnit,
+    1,
+    `Converting between fake units returns same value.`
+  );
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_editor-keywords.js b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-keywords.js
new file mode 100644
index 0000000000..328a9c9bcd
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-keywords.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* global getPropertyValue */
+
+"use strict";
+
+// Test that keyword values for font properties don't show up in the font editor,
+// but their computed style values show up instead.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  await testKeywordValues(inspector, viewDoc);
+});
+
+async function testKeywordValues(inspector, viewDoc) {
+  await selectNode(".bold-text", inspector);
+
+  info(
+    "Check font-weight shows its computed style instead of the bold keyword value."
+  );
+  const fontWeight = getPropertyValue(viewDoc, "font-weight");
+  isnot(fontWeight.value, "bold", "Font weight is not shown as keyword");
+  is(
+    parseInt(fontWeight.value, 10),
+    700,
+    "Font weight is shown as computed style"
+  );
+
+  info(
+    "Check font-size shows its computed style instead of the inherit keyword value."
+  );
+  const fontSize = getPropertyValue(viewDoc, "font-size");
+  isnot(fontSize.unit, "inherit", "Font size unit is not shown as keyword");
+  is(fontSize.unit, "px", "Font size unit is shown as computed style");
+  is(
+    fontSize.value + fontSize.unit,
+    "36px",
+    "Font size is read as computed style"
+  );
+}
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_editor-letter-spacing-conversion.js b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-letter-spacing-conversion.js
new file mode 100644
index 0000000000..ff680717a9
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-letter-spacing-conversion.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* global getPropertyValue */
+
+"use strict";
+
+// Unit test for math behind conversion of units for letter-spacing.
+
+const TEST_URI = `
+  <style type='text/css'>
+    body {
+      /* Set root font-size to equivalent of 32px (2*16px) */
+      font-size: 200%;
+    }
+    div {
+      letter-spacing: 1em;
+    }
+  </style>
+  <div>LETTER SPACING</div>
+`;
+
+add_task(async function () {
+  const URI = "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI);
+  const { inspector, view } = await openFontInspectorForURL(URI);
+  const viewDoc = view.document;
+  const property = "letter-spacing";
+  const UNITS = {
+    px: 32,
+    rem: 2,
+    em: 1,
+  };
+
+  await selectNode("div", inspector);
+
+  info("Check that font editor shows letter-spacing value in original units");
+  const letterSpacing = getPropertyValue(viewDoc, property);
+  is(
+    letterSpacing.value + letterSpacing.unit,
+    "1em",
+    "Original letter spacing is 1em"
+  );
+
+  // Starting value and unit for conversion.
+  let prevValue = letterSpacing.value;
+  let prevUnit = letterSpacing.unit;
+
+  for (const unit in UNITS) {
+    const value = UNITS[unit];
+
+    info(`Convert letter-spacing from ${prevValue}${prevUnit} to ${unit}`);
+    const convertedValue = await view.convertUnits(
+      property,
+      prevValue,
+      prevUnit,
+      unit
+    );
+    is(
+      convertedValue,
+      value,
+      `Converting to ${unit} returns transformed value.`
+    );
+
+    // Store current unit and value to use in conversion on the next iteration.
+    prevUnit = unit;
+    prevValue = value;
+  }
+
+  info(`Check that conversion to fake unit returns 1-to-1 mapping`);
+  const valueToFakeUnit = await view.convertUnits(property, 1, "px", "fake");
+  is(valueToFakeUnit, 1, `Converting to fake unit returns same value.`);
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_editor-values.js b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-values.js
new file mode 100644
index 0000000000..dd9879eff4
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-values.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  await testDiv(inspector, viewDoc);
+  await testNestedSpan(inspector, viewDoc);
+});
+
+async function testDiv(inspector, viewDoc) {
+  await selectNode("DIV", inspector);
+  const { value, unit } = getPropertyValue(viewDoc, "font-size");
+
+  is(value + unit, "1em", "DIV should be have font-size of 1em");
+}
+
+async function testNestedSpan(inspector, viewDoc) {
+  await selectNode(".nested-span", inspector);
+  const { value, unit } = getPropertyValue(viewDoc, "font-size");
+
+  isnot(
+    value + unit,
+    "1em",
+    "Nested span should not reflect parent's font size."
+  );
+  is(
+    value + unit,
+    "36px",
+    "Nested span should have computed font-size of 36px"
+  );
+}
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js b/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
new file mode 100644
index 0000000000..66aedf93e7
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the font-face css rule code is collapsed by default, and can be expanded.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+  await selectNode("div", inspector);
+
+  await expandFontsAccordion(viewDoc);
+  info("Checking that the css font-face rule is collapsed by default");
+  const fontEl = getAllFontsEls(viewDoc)[0];
+  const codeEl = fontEl.querySelector(".font-css-code");
+  is(codeEl.textContent, "@font-face {}", "The font-face rule is collapsed");
+
+  info("Expanding the rule by clicking on the expander icon");
+  const onExpanded = BrowserTestUtils.waitForCondition(() => {
+    return (
+      codeEl.textContent ===
+      `@font-face { font-family: bar; src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype"); }`
+    );
+  }, "Waiting for the font-face rule 1");
+
+  const expander = fontEl.querySelector(".font-css-code .theme-twisty");
+  expander.click();
+  await onExpanded;
+
+  ok(true, "Font-face rule is now expanded");
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_font-type-telemetry.js b/devtools/client/inspector/fonts/test/browser_fontinspector_font-type-telemetry.js
new file mode 100644
index 0000000000..3c3e402437
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_font-type-telemetry.js
@@ -0,0 +1,20 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that telemetry works for tracking the font type shown in the Font Editor.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { inspector } = await openFontInspectorForURL(TEST_URI);
+  startTelemetry();
+  await selectNode(".normal-text", inspector);
+  await selectNode(".bold-text", inspector);
+  checkTelemetry(
+    "DEVTOOLS_FONTEDITOR_FONT_TYPE_DISPLAYED",
+    "",
+    null,
+    "hasentries"
+  );
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_input-element-used-font.js b/devtools/client/inspector/fonts/test/browser_fontinspector_input-element-used-font.js
new file mode 100644
index 0000000000..8eacc3d632
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_input-element-used-font.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+// Verify that a styled input field element is showing proper font information
+// in its font tab.
+// Non-regression test for https://bugzilla.mozilla.org/show_bug.cgi?id=1435469
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  await selectNode(".input-field", inspector);
+
+  const fontEls = getUsedFontsEls(viewDoc);
+  Assert.equal(fontEls.length, 1, `Used fonts found for styled input element`);
+  Assert.equal(
+    fontEls[0].textContent,
+    "Ostrich Sans Medium",
+    `Proper font found: 'Ostrich Sans Medium' for styled input.`
+  );
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_no-fonts.js b/devtools/client/inspector/fonts/test/browser_fontinspector_no-fonts.js
new file mode 100644
index 0000000000..454cabdf92
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_no-fonts.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Check that the warning message for no fonts found shows up when selecting a node
+// that does not have any used fonts.
+// Ensure that no used fonts are listed.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+  await selectNode(".empty", inspector);
+
+  info("Test the warning message for no fonts found on empty element");
+  const warning = viewDoc.querySelector(
+    "#font-editor .devtools-sidepanel-no-result"
+  );
+  ok(warning, "The warning for no fonts found is shown for the empty element");
+
+  info("Test that no fonts are listed for the empty element");
+  const fontsEls = getUsedFontsEls(viewDoc);
+  is(fontsEls.length, 0, "There are no used fonts listed");
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_reveal-in-page.js b/devtools/client/inspector/fonts/test/browser_fontinspector_reveal-in-page.js
new file mode 100644
index 0000000000..bcefe0b3bf
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_reveal-in-page.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that fonts usage can be revealed in the page using the FontsHighlighter.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  // Make sure the toolbox is tall enough to accomodate all fonts, otherwise mouseover
+  // events simulation will fail.
+  await pushPref("devtools.toolbox.footer.height", 500);
+
+  const { view } = await openFontInspectorForURL(TEST_URI);
+  await testFontHighlighting(view);
+
+  info("Check that highlighting still works after reloading the page");
+  await reloadBrowser();
+  await testFontHighlighting(view);
+});
+
+async function testFontHighlighting(view) {
+  // The number of window selection change events we expect to get as we hover over each
+  // font in the list. Waiting for those events is how we know that text-runs were
+  // highlighted in the page.
+  // The reason why these numbers vary is because the highlighter may create more than
+  // 1 selection range object, depending on the number of text-runs found.
+  const expectedSelectionChangeEvents = [2, 2, 2, 1, 1];
+
+  const viewDoc = view.document;
+
+  // Wait for the view to have all the expected used fonts.
+  const fontEls = await waitFor(() => {
+    const els = getUsedFontsEls(viewDoc);
+    if (els.length !== expectedSelectionChangeEvents.length) {
+      return false;
+    }
+
+    return els;
+  });
+
+  for (let i = 0; i < fontEls.length; i++) {
+    info(
+      `Mousing over and out of font number ${i} ("${fontEls[i].textContent}") in the list`
+    );
+
+    // Simulating a mouse over event on the font name and expecting a selectionchange.
+    const nameEl = fontEls[i];
+    let onEvents = waitForNSelectionEvents(expectedSelectionChangeEvents[i]);
+    EventUtils.synthesizeMouse(
+      nameEl,
+      2,
+      2,
+      { type: "mouseover" },
+      viewDoc.defaultView
+    );
+    await onEvents;
+
+    ok(
+      true,
+      `${expectedSelectionChangeEvents[i]} selectionchange events detected on mouseover`
+    );
+
+    // Simulating a mouse out event on the font name and expecting a selectionchange.
+    const otherEl = viewDoc.querySelector("body");
+    onEvents = waitForNSelectionEvents(1);
+    EventUtils.synthesizeMouse(
+      otherEl,
+      2,
+      2,
+      { type: "mouseover" },
+      viewDoc.defaultView
+    );
+    await onEvents;
+
+    ok(true, "1 selectionchange events detected on mouseout");
+  }
+}
+
+async function waitForNSelectionEvents(numberOfTimes) {
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [numberOfTimes],
+    async function (n) {
+      const win = content.wrappedJSObject;
+
+      await new Promise(resolve => {
+        let received = 0;
+        win.document.addEventListener("selectionchange", function listen() {
+          received++;
+
+          if (received === n) {
+            win.document.removeEventListener("selectionchange", listen);
+            resolve();
+          }
+        });
+      });
+    }
+  );
+}
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_text-node.js b/devtools/client/inspector/fonts/test/browser_fontinspector_text-node.js
new file mode 100644
index 0000000000..b5e58b9745
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_text-node.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that selecting a text node invokes the font editor on its parent node.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  info("Select the first text node of <body>");
+  const bodyNode = await getNodeFront("body", inspector);
+  const { nodes } = await inspector.walker.children(bodyNode);
+  const onInspectorUpdated = inspector.once("fontinspector-updated");
+  info("Select the text node");
+  await selectNode(nodes[0], inspector);
+
+  info("Waiting for font editor to render");
+  await onInspectorUpdated;
+
+  const textFonts = getUsedFontsEls(viewDoc);
+
+  info("Select the <body> element");
+  await selectNode("body", inspector);
+
+  const parentFonts = getUsedFontsEls(viewDoc);
+  is(
+    textFonts.length,
+    parentFonts.length,
+    "Font inspector shows same number of fonts"
+  );
+});
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js b/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
new file mode 100644
index 0000000000..b3c91a727d
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that the preview images are updated when the theme changes.
+
+const {
+  getTheme,
+  setTheme,
+} = require("resource://devtools/client/shared/theme.js");
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+const originalTheme = getTheme();
+
+registerCleanupFunction(() => {
+  info(`Restoring theme to '${originalTheme}.`);
+  setTheme(originalTheme);
+});
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  await selectNode(".normal-text", inspector);
+  await expandFontsAccordion(viewDoc);
+  const allFontsEls = getAllFontsEls(viewDoc);
+  const fontEl = allFontsEls[0];
+
+  // Store the original preview URI for later comparison.
+  const originalURI = fontEl.querySelector(".font-preview").src;
+  const newTheme = originalTheme === "light" ? "dark" : "light";
+
+  info(`Original theme was '${originalTheme}'.`);
+
+  await setThemeAndWaitForUpdate(newTheme, inspector);
+  isnot(
+    fontEl.querySelector(".font-preview").src,
+    originalURI,
+    "The preview image changed with the theme."
+  );
+
+  await setThemeAndWaitForUpdate(originalTheme, inspector);
+  is(
+    fontEl.querySelector(".font-preview").src,
+    originalURI,
+    "The preview image is correct after the original theme was restored."
+  );
+});
+
+/**
+ * Sets the current theme and waits for fontinspector-updated event.
+ *
+ * @param {String} theme - the new theme
+ * @param {Object} inspector - the inspector panel
+ */
+async function setThemeAndWaitForUpdate(theme, inspector) {
+  const onUpdated = inspector.once("fontinspector-updated");
+
+  info(`Setting theme to '${theme}'.`);
+  setTheme(theme);
+
+  info("Waiting for font-inspector to update.");
+  await onUpdated;
+}
diff --git a/devtools/client/inspector/fonts/test/doc_browser_fontinspector.html b/devtools/client/inspector/fonts/test/doc_browser_fontinspector.html
new file mode 100644
index 0000000000..27e24e2fd0
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/doc_browser_fontinspector.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+<style>
+  @font-face {
+    font-family: bar;
+    src: url(bad/font/name.ttf), url(ostrich-regular.ttf) format("truetype");
+  }
+  @font-face {
+    font-family: barnormal;
+    font-weight: normal;
+    src: url(ostrich-regular.ttf);
+  }
+  @font-face {
+    font-family: bar;
+    font-weight: bold;
+    src: url(ostrich-black.ttf);
+  }
+  @font-face {
+    font-family: bar;
+    font-weight: 800;
+    src: url(ostrich-black.ttf);
+  }
+  body{
+    /* Arial doesn't exist on Linux. Liberation Sans is the default sans-serif there. */
+    font-family:Arial, "Liberation Sans";
+    font-size: 36px;
+  }
+  div {
+    font-size: 1em;
+    font-family:bar, "Missing Family", sans-serif;
+  }
+  .normal-text {
+    font-family: barnormal;
+    font-weight: normal;
+  }
+  .bold-text {
+    font-family: bar;
+    font-weight: bold;
+    font-size: inherit;
+  }
+  .black-text {
+    font-family: bar;
+    font-weight: 800;
+  }
+  .viewport-size {
+    font-size: 10vw;
+  }
+  .input-field {
+    font-family: bar;
+    font-size: 36px;
+    color: blue;
+  }
+</style>
+
+<body>
+  BODY
+  <div>DIV
+    <span class="nested-span">NESTED SPAN</span>
+  </div>
+  <iframe src="test_iframe.html"></iframe>
+  <div class="normal-text">NORMAL DIV</div>
+  <div class="bold-text">BOLD DIV</div>
+  <div class="black-text">800 DIV</div>
+  <div class="empty"></div>
+  <div class="viewport-size">VIEWPORT SIZE</div>
+  <input class="input-field" value="Input text value"/>
+</body>
diff --git a/devtools/client/inspector/fonts/test/doc_browser_fontinspector_iframe.html b/devtools/client/inspector/fonts/test/doc_browser_fontinspector_iframe.html
new file mode 100644
index 0000000000..a7ef3385e7
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/doc_browser_fontinspector_iframe.html
@@ -0,0 +1,5 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<iframe id="frame" src="doc_browser_fontinspector.html" width="500" height="250"></iframe>
diff --git a/devtools/client/inspector/fonts/test/head.js b/devtools/client/inspector/fonts/test/head.js
new file mode 100644
index 0000000000..058029f13a
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -0,0 +1,277 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+Services.prefs.setCharPref("devtools.inspector.activeSidebar", "fontinspector");
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
+  Services.prefs.clearUserPref("devtools.inspector.selectedSidebar");
+});
+
+var nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
+
+/**
+ * The font-inspector doesn't participate in the inspector's update mechanism
+ * (i.e. it doesn't call inspector.updating() when updating), so simply calling
+ * the default selectNode isn't enough to guaranty that the panel has finished
+ * updating. We also need to wait for the fontinspector-updated event.
+ *
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox.
+ * @param {String} reason
+ *        Defaults to "test" which instructs the inspector not to highlight the
+ *        node upon selection.
+ */
+var _selectNode = selectNode;
+selectNode = async function (node, inspector, reason) {
+  // Ensure node is a NodeFront and not a selector (which is also accepted as
+  // an argument to selectNode).
+  node = await getNodeFront(node, inspector);
+
+  // The FontInspector will fallback to the parent node when a text node is
+  // selected.
+  const isTextNode = node.nodeType == nodeConstants.TEXT_NODE;
+  const expectedNode = isTextNode ? node.parentNode() : node;
+
+  const onEditorUpdated = inspector.once("fonteditor-updated");
+  const onFontInspectorUpdated = new Promise(resolve => {
+    inspector.on("fontinspector-updated", function onUpdated(eventNode) {
+      if (eventNode === expectedNode) {
+        inspector.off("fontinspector-updated", onUpdated);
+        resolve();
+      }
+    });
+  });
+  await _selectNode(node, inspector, reason);
+
+  // Wait for both the font inspector and font editor before proceeding.
+  await Promise.all([onFontInspectorUpdated, onEditorUpdated]);
+};
+
+/**
+ * Adds a new tab with the given URL, opens the inspector and selects the
+ * font-inspector tab.
+ * @return {Promise} resolves to a {tab, toolbox, inspector, view} object
+ */
+var openFontInspectorForURL = async function (url) {
+  const tab = await addTab(url);
+  const { toolbox, inspector } = await openInspector();
+
+  // Call selectNode again here to force a fontinspector update since we don't
+  // know if the fontinspector-updated event has been sent while the inspector
+  // was being opened or not.
+  await selectNode("body", inspector);
+
+  return {
+    tab,
+    toolbox,
+    inspector,
+    view: inspector.getPanel("fontinspector"),
+  };
+};
+
+/**
+ * Focus the preview input, clear it, type new text into it and wait for the
+ * preview images to be updated.
+ *
+ * @param {FontInspector} view - The FontInspector instance.
+ * @param {String} text - The text to preview.
+ */
+async function updatePreviewText(view, text) {
+  info(`Changing the preview text to '${text}'`);
+
+  const doc = view.document;
+  const input = doc.querySelector("#font-preview-input-container input");
+  input.focus();
+
+  info("Blanking the input field.");
+  while (input.value.length) {
+    const update = view.inspector.once("fontinspector-updated");
+    EventUtils.sendKey("BACK_SPACE", doc.defaultView);
+    await update;
+  }
+
+  if (text) {
+    info(`Typing "${text}" into the input field.`);
+    const update = view.inspector.once("fontinspector-updated");
+    EventUtils.sendString(text, doc.defaultView);
+    await update;
+  }
+
+  is(input.value, text, `The input now contains "${text}".`);
+}
+
+/**
+ *  Get all of the <li> elements for the fonts used on the currently selected element.
+ *
+ *  NOTE: This method is used by tests which check the old Font Inspector. It, along with
+ *  the tests should be removed once the Font Editor reaches Firefox Stable.
+ *  @see https://bugzilla.mozilla.org/show_bug.cgi?id=1485324
+ *
+ * @param  {Document} viewDoc
+ * @return {NodeList}
+ */
+function getUsedFontsEls_obsolete(viewDoc) {
+  return viewDoc.querySelectorAll("#font-editor .fonts-list li");
+}
+
+/**
+ * Get all of the elements with names of fonts used on the currently selected element.
+ *
+ * @param  {Document} viewDoc
+ * @return {NodeList}
+ */
+function getUsedFontsEls(viewDoc) {
+  return viewDoc.querySelectorAll(
+    "#font-editor .font-control-used-fonts .font-name"
+  );
+}
+
+/**
+ * Get all of the elements with groups of fonts used on the currently selected element.
+ *
+ * @param  {Document} viewDoc
+ * @return {NodeList}
+ */
+function getUsedFontGroupsEls(viewDoc) {
+  return viewDoc.querySelectorAll(
+    "#font-editor .font-control-used-fonts .font-group"
+  );
+}
+
+/**
+ * Get the DOM element for the accordion widget that contains the fonts used elsewhere in
+ * the document.
+ *
+ * @param  {Document} viewDoc
+ * @return {DOMNode}
+ */
+function getFontsAccordion(viewDoc) {
+  return viewDoc.querySelector("#font-container .accordion");
+}
+
+/**
+ * Expand a given accordion widget.
+ *
+ * @param  {DOMNode} accordion
+ */
+async function expandAccordion(accordion) {
+  const isExpanded = () => accordion.querySelector(".fonts-list");
+  if (isExpanded()) {
+    return;
+  }
+
+  const onExpanded = BrowserTestUtils.waitForCondition(
+    isExpanded,
+    "Waiting for other fonts section"
+  );
+  accordion.querySelector(".theme-twisty").click();
+  await onExpanded;
+}
+
+/**
+ * Expand the fonts accordion.
+ *
+ * @param  {Document} viewDoc
+ */
+async function expandFontsAccordion(viewDoc) {
+  info("Expanding the other fonts section");
+  await expandAccordion(getFontsAccordion(viewDoc));
+}
+
+/**
+ * Get all of the <li> elements for the fonts used elsewhere in the document.
+ *
+ * @param  {Document} viewDoc
+ * @return {NodeList}
+ */
+function getAllFontsEls(viewDoc) {
+  return getFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
+}
+
+/**
+ * Given a font element, return its name.
+ *
+ * @param  {DOMNode} fontEl
+ *         The font element.
+ * @return {String}
+ *         The name of the font as shown in the UI.
+ */
+function getName(fontEl) {
+  return fontEl.querySelector(".font-name").textContent;
+}
+
+/**
+ * Given a font element, return the font's URL.
+ *
+ * @param  {DOMNode} fontEl
+ *         The font element.
+ * @return {String}
+ *         The URL where the font was loaded from as shown in the UI.
+ */
+function getURL(fontEl) {
+  return fontEl.querySelector(".font-origin").textContent;
+}
+
+/**
+ * Given a font element, return its family name.
+ *
+ * @param  {DOMNode} fontEl
+ *         The font element.
+ * @return {String}
+ *         The name of the font family as shown in the UI.
+ */
+function getFamilyName(fontEl) {
+  return fontEl.querySelector(".font-family-name").textContent;
+}
+
+/**
+ * Get the value and unit of a CSS font property or font axis from the font editor.
+ *
+ * @param  {Document} viewDoc
+ *         Host document of the font inspector panel.
+ * @param  {String} name
+ *         Font property name or axis tag
+ * @return {Object}
+ *         Object with the value and unit of the given font property or axis tag
+ *         from the corresponding input fron the font editor.
+ *         @Example:
+ *         {
+ *          value: {String|null}
+ *          unit: {String|null}
+ *         }
+ */
+function getPropertyValue(viewDoc, name) {
+  const selector = `#font-editor .font-value-input[name=${name}]`;
+  return {
+    // Ensure value input exists before querying its value
+    value:
+      viewDoc.querySelector(selector) &&
+      parseFloat(viewDoc.querySelector(selector).value),
+    // Ensure unit dropdown exists before querying its value
+    unit:
+      viewDoc.querySelector(selector + ` ~ .font-value-select`) &&
+      viewDoc.querySelector(selector + ` ~ .font-value-select`).value,
+  };
+}
+
+/**
+ * Given a font element, check whether its font source is remote.
+ *
+ * @param  {DOMNode} fontEl
+ *         The font element.
+ * @return {Boolean}
+ */
+function isRemote(fontEl) {
+  return fontEl.querySelector(".font-origin").classList.contains("remote");
+}
diff --git a/devtools/client/inspector/fonts/test/ostrich-black.ttf b/devtools/client/inspector/fonts/test/ostrich-black.ttf
new file mode 100644
index 0000000000..a0ef8fe1c9
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/ostrich-black.ttf
diff --git a/devtools/client/inspector/fonts/test/ostrich-regular.ttf b/devtools/client/inspector/fonts/test/ostrich-regular.ttf
new file mode 100644
index 0000000000..9682c07350
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/ostrich-regular.ttf
diff --git a/devtools/client/inspector/fonts/test/test_iframe.html b/devtools/client/inspector/fonts/test/test_iframe.html
new file mode 100644
index 0000000000..29393a9e9a
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/test_iframe.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+
+<style>
+  div{
+    font-family: "Times New Roman";
+  }
+</style>
+
+<body>
+  <div>Hello world</div>
+</body>
diff --git a/devtools/client/inspector/fonts/types.js b/devtools/client/inspector/fonts/types.js
new file mode 100644
index 0000000000..f27625f742
--- /dev/null
+++ b/devtools/client/inspector/fonts/types.js
@@ -0,0 +1,109 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * A font variation axis.
+ */
+const fontVariationAxis = (exports.fontVariationAxis = {
+  // The OpenType tag name of the variation axis
+  tag: PropTypes.string,
+
+  // The axis name of the variation axis
+  name: PropTypes.string,
+
+  // The minimum value of the variation axis
+  minValue: PropTypes.number,
+
+  // The maximum value of the variation axis
+  maxValue: PropTypes.number,
+
+  // The default value of the variation axis
+  defaultValue: PropTypes.number,
+});
+
+const fontVariationInstanceValue = (exports.fontVariationInstanceValue = {
+  // The axis name of the variation axis
+  axis: PropTypes.string,
+
+  // The value of the variation axis
+  value: PropTypes.number,
+});
+
+/**
+ * A font variation instance.
+ */
+const fontVariationInstance = (exports.fontVariationInstance = {
+  // The variation instance name of the font
+  name: PropTypes.string,
+
+  // The font variation values for the variation instance of the font
+  values: PropTypes.arrayOf(PropTypes.shape(fontVariationInstanceValue)),
+});
+
+/**
+ * A single font.
+ */
+const font = (exports.font = {
+  // Font family name
+  CSSFamilyName: PropTypes.string,
+
+  // The format of the font
+  format: PropTypes.string,
+
+  // The name of the font
+  name: PropTypes.string,
+
+  // URL for the font preview
+  previewUrl: PropTypes.string,
+
+  // Object containing the CSS rule for the font
+  rule: PropTypes.object,
+
+  // The text of the CSS rule
+  ruleText: PropTypes.string,
+
+  // The URI of the font file
+  URI: PropTypes.string,
+
+  // The variation axes of the font
+  variationAxes: PropTypes.arrayOf(PropTypes.shape(fontVariationAxis)),
+
+  // The variation instances of the font
+  variationInstances: PropTypes.arrayOf(PropTypes.shape(fontVariationInstance)),
+});
+
+exports.fontOptions = {
+  // The current preview text
+  previewText: PropTypes.string,
+};
+
+exports.fontEditor = {
+  // Variable font axes and their values
+  axes: PropTypes.object,
+
+  // Axes values changed at runtime structured like the "values" property
+  // of a fontVariationInstance
+  customInstanceValues: PropTypes.array,
+
+  // Fonts used on the selected element
+  fonts: PropTypes.arrayOf(PropTypes.shape(font)),
+
+  // Font variation instance currently selected
+  instance: PropTypes.shape(fontVariationInstance),
+
+  // CSS font properties defined on the element
+  properties: PropTypes.object,
+};
+
+/**
+ * Font data.
+ */
+exports.fontData = {
+  // All fonts on the current page.
+  allFonts: PropTypes.arrayOf(PropTypes.shape(font)),
+};
diff --git a/devtools/client/inspector/fonts/utils/font-utils.js b/devtools/client/inspector/fonts/utils/font-utils.js
new file mode 100644
index 0000000000..9a86acad49
--- /dev/null
+++ b/devtools/client/inspector/fonts/utils/font-utils.js
@@ -0,0 +1,111 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+module.exports = {
+  /**
+   * Given a CSS unit type, get the amount by which to increment a numeric value.
+   * Used as the step attribute in inputs of type "range" or "number".
+   *
+   * @param {String} unit
+   *        CSS unit type (px, %, em, rem, vh, vw, ...)
+   * @return {Number}
+   *         Amount by which to increment.
+   */
+  getStepForUnit(unit) {
+    let step;
+    switch (unit) {
+      case "":
+      case "em":
+      case "rem":
+      case "vw":
+      case "vh":
+      case "vmin":
+      case "vmax":
+        step = 0.1;
+        break;
+      default:
+        step = 1;
+    }
+
+    return step;
+  },
+
+  /**
+   * Get the unit type from the end of a CSS value string.
+   * Returns null for non-string input or unitless values.
+   *
+   * @param {String} value
+   *        CSS value string.
+   * @return {String|null}
+   *         CSS unit type, like "px", "em", "rem", etc or null.
+   */
+  getUnitFromValue(value) {
+    if (typeof value !== "string" || isNaN(parseFloat(value))) {
+      return null;
+    }
+
+    const match = value.match(/\D+?$/);
+    return match?.length ? match[0] : null;
+  },
+
+  /**
+   * Parse the string value of CSS font-variation-settings into an object with
+   * axis tag names and corresponding values. If the string is a keyword or does not
+   * contain axes, return an empty object.
+   *
+   * @param {String} string
+   *        Value of font-variation-settings property coming from node's computed style.
+   *        Its contents are expected to be stable having been already parsed by the
+   *        browser.
+   * @return {Object}
+   */
+  parseFontVariationAxes(string) {
+    let axes = {};
+    const keywords = ["initial", "normal", "inherit", "unset"];
+
+    if (!string || keywords.includes(string.trim())) {
+      return axes;
+    }
+
+    // Parse font-variation-settings CSS declaration into an object
+    // with axis tags as keys and axis values as values.
+    axes = string.split(",").reduce((acc, pair) => {
+      // Tags are always in quotes. Split by quote and filter excessive whitespace.
+      pair = pair.split(/["']/).filter(part => part.trim() !== "");
+      // Guard against malformed input that may have slipped through.
+      if (pair.length === 0) {
+        return acc;
+      }
+
+      const tag = pair[0];
+      const value = pair[1].trim();
+      // Axis tags shorter or longer than 4 characters are invalid. Whitespace is valid.
+      if (tag.length === 4) {
+        acc[tag] = parseFloat(value);
+      }
+      return acc;
+    }, {});
+
+    return axes;
+  },
+
+  /**
+   * Limit the decimal count of a number. Used instead of Number.toFixed() which pads
+   * integers with zeroes. If the input is not a number, it is returned as is.
+   *
+   * @param {Number} number
+   * @param {Number} decimals
+   *        Decimal count in the output number. Default to one decimal.
+   * @return {Number}
+   */
+  toFixed(number, decimals = 1) {
+    if (typeof number !== "number") {
+      return number;
+    }
+
+    return Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
+  },
+};
diff --git a/devtools/client/inspector/fonts/utils/l10n.js b/devtools/client/inspector/fonts/utils/l10n.js
new file mode 100644
index 0000000000..ce2fd0d9e6
--- /dev/null
+++ b/devtools/client/inspector/fonts/utils/l10n.js
@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/font-inspector.properties"
+);
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+};
diff --git a/devtools/client/inspector/fonts/utils/moz.build b/devtools/client/inspector/fonts/utils/moz.build
new file mode 100644
index 0000000000..ddd06560a0
--- /dev/null
+++ b/devtools/client/inspector/fonts/utils/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "font-utils.js",
+    "l10n.js",
+)
diff --git a/devtools/client/inspector/grids/actions/grid-highlighter.js b/devtools/client/inspector/grids/actions/grid-highlighter.js
new file mode 100644
index 0000000000..6706dc88cd
--- /dev/null
+++ b/devtools/client/inspector/grids/actions/grid-highlighter.js
@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * This module exports thunks.
+ * Thunks are functions that can be dispatched to the Inspector Redux store.
+ *
+ * These functions receive one object with options that contains:
+ * - dispatch() => function to dispatch Redux actions to the store
+ * - getState() => function to get the current state of the entire Inspector Redux store
+ * - inspector => object instance of Inspector client
+ *
+ * They provide a shortcut for React components to invoke the box model highlighter
+ * without having to know where the highlighter exists.
+ */
+
+module.exports = {
+  /**
+   * Show the grid highlighter for the given node front.
+   *
+   * @param {NodeFront} nodeFront
+   *        Node that should be highlighted.
+   * @param {Object} options
+   *        Optional configuration options passed to the grid highlighter
+   */
+  showGridHighlighter(nodeFront, options = {}) {
+    return async thunkOptions => {
+      const { inspector } = thunkOptions;
+      if (!inspector) {
+        return;
+      }
+
+      await inspector.highlighters.showGridHighlighter(nodeFront, options);
+    };
+  },
+};
diff --git a/devtools/client/inspector/grids/actions/grids.js b/devtools/client/inspector/grids/actions/grids.js
new file mode 100644
index 0000000000..724582c3d5
--- /dev/null
+++ b/devtools/client/inspector/grids/actions/grids.js
@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_GRID_COLOR,
+  UPDATE_GRID_HIGHLIGHTED,
+  UPDATE_GRIDS,
+} = require("resource://devtools/client/inspector/grids/actions/index.js");
+
+module.exports = {
+  /**
+   * Updates the color used for the grid's highlighter.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the DOM node to toggle the grid highlighter.
+   * @param  {String} color
+   *         The color to use for this nodeFront's grid highlighter.
+   */
+  updateGridColor(nodeFront, color) {
+    return {
+      type: UPDATE_GRID_COLOR,
+      color,
+      nodeFront,
+    };
+  },
+
+  /**
+   * Updates the grid highlighted state.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the DOM node to toggle the grid highlighter.
+   * @param  {Boolean} highlighted
+   *         Whether or not the grid highlighter is highlighting the grid.
+   */
+  updateGridHighlighted(nodeFront, highlighted) {
+    return {
+      type: UPDATE_GRID_HIGHLIGHTED,
+      highlighted,
+      nodeFront,
+    };
+  },
+
+  /**
+   * Updates the grid state with the new list of grids.
+   */
+  updateGrids(grids) {
+    return {
+      type: UPDATE_GRIDS,
+      grids,
+    };
+  },
+};
diff --git a/devtools/client/inspector/grids/actions/highlighter-settings.js b/devtools/client/inspector/grids/actions/highlighter-settings.js
new file mode 100644
index 0000000000..82397a7944
--- /dev/null
+++ b/devtools/client/inspector/grids/actions/highlighter-settings.js
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_SHOW_GRID_AREAS,
+  UPDATE_SHOW_GRID_LINE_NUMBERS,
+  UPDATE_SHOW_INFINITE_LINES,
+} = require("resource://devtools/client/inspector/grids/actions/index.js");
+
+module.exports = {
+  /**
+   * Updates the grid highlighter's show grid areas preference.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should show the grid areas.
+   */
+  updateShowGridAreas(enabled) {
+    return {
+      type: UPDATE_SHOW_GRID_AREAS,
+      enabled,
+    };
+  },
+
+  /**
+   * Updates the grid highlighter's show grid line numbers preference.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should show the grid line numbers.
+   */
+  updateShowGridLineNumbers(enabled) {
+    return {
+      type: UPDATE_SHOW_GRID_LINE_NUMBERS,
+      enabled,
+    };
+  },
+
+  /**
+   * Updates the grid highlighter's show infinite lines preference.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should extend grid lines infinitely.
+   */
+  updateShowInfiniteLines(enabled) {
+    return {
+      type: UPDATE_SHOW_INFINITE_LINES,
+      enabled,
+    };
+  },
+};
diff --git a/devtools/client/inspector/grids/actions/index.js b/devtools/client/inspector/grids/actions/index.js
new file mode 100644
index 0000000000..1b0c18d0e7
--- /dev/null
+++ b/devtools/client/inspector/grids/actions/index.js
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createEnum } = require("resource://devtools/client/shared/enum.js");
+
+createEnum(
+  [
+    // Updates the color used for the overlay of a grid.
+    "UPDATE_GRID_COLOR",
+
+    // Updates the grid highlighted state.
+    "UPDATE_GRID_HIGHLIGHTED",
+
+    // Updates the entire grids state with the new list of grids.
+    "UPDATE_GRIDS",
+
+    // Updates the grid highlighter's show grid areas state.
+    "UPDATE_SHOW_GRID_AREAS",
+
+    // Updates the grid highlighter's show grid line numbers state.
+    "UPDATE_SHOW_GRID_LINE_NUMBERS",
+
+    // Updates the grid highlighter's show infinite lines state.
+    "UPDATE_SHOW_INFINITE_LINES",
+  ],
+  module.exports
+);
diff --git a/devtools/client/inspector/grids/actions/moz.build b/devtools/client/inspector/grids/actions/moz.build
new file mode 100644
index 0000000000..733ac57ede
--- /dev/null
+++ b/devtools/client/inspector/grids/actions/moz.build
@@ -0,0 +1,12 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "grid-highlighter.js",
+    "grids.js",
+    "highlighter-settings.js",
+    "index.js",
+)
diff --git a/devtools/client/inspector/grids/components/Grid.js b/devtools/client/inspector/grids/components/Grid.js
new file mode 100644
index 0000000000..0378f1e702
--- /dev/null
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+// Normally, we would only lazy load GridOutline, but we also lazy load
+// GridDisplaySettings and GridList because we assume the CSS grid usage is low
+// and usually will not appear on the page.
+loader.lazyGetter(this, "GridDisplaySettings", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/grids/components/GridDisplaySettings.js")
+  );
+});
+loader.lazyGetter(this, "GridList", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/grids/components/GridList.js")
+  );
+});
+loader.lazyGetter(this, "GridOutline", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/grids/components/GridOutline.js")
+  );
+});
+
+const Types = require("resource://devtools/client/inspector/grids/types.js");
+
+class Grid extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+      highlighterSettings: PropTypes.shape(Types.highlighterSettings)
+        .isRequired,
+      onSetGridOverlayColor: PropTypes.func.isRequired,
+      onToggleGridHighlighter: PropTypes.func.isRequired,
+      onToggleShowGridAreas: PropTypes.func.isRequired,
+      onToggleShowGridLineNumbers: PropTypes.func.isRequired,
+      onToggleShowInfiniteLines: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    if (!this.props.grids.length) {
+      return dom.div(
+        { className: "devtools-sidepanel-no-result" },
+        getStr("layout.noGridsOnThisPage")
+      );
+    }
+
+    const {
+      dispatch,
+      getSwatchColorPickerTooltip,
+      grids,
+      highlighterSettings,
+      onSetGridOverlayColor,
+      onToggleShowGridAreas,
+      onToggleGridHighlighter,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
+      setSelectedNode,
+    } = this.props;
+    const highlightedGrids = grids.filter(grid => grid.highlighted);
+
+    return dom.div(
+      { id: "layout-grid-container" },
+      dom.div(
+        { className: "grid-content" },
+        GridList({
+          dispatch,
+          getSwatchColorPickerTooltip,
+          grids,
+          onSetGridOverlayColor,
+          onToggleGridHighlighter,
+          setSelectedNode,
+        }),
+        GridDisplaySettings({
+          highlighterSettings,
+          onToggleShowGridAreas,
+          onToggleShowGridLineNumbers,
+          onToggleShowInfiniteLines,
+        })
+      ),
+      highlightedGrids.length === 1
+        ? GridOutline({
+            dispatch,
+            grids,
+          })
+        : null
+    );
+  }
+}
+
+module.exports = Grid;
diff --git a/devtools/client/inspector/grids/components/GridDisplaySettings.js b/devtools/client/inspector/grids/components/GridDisplaySettings.js
new file mode 100644
index 0000000000..af525cc8c7
--- /dev/null
+++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js
@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+const Types = require("resource://devtools/client/inspector/grids/types.js");
+
+class GridDisplaySettings extends PureComponent {
+  static get propTypes() {
+    return {
+      highlighterSettings: PropTypes.shape(Types.highlighterSettings)
+        .isRequired,
+      onToggleShowGridAreas: PropTypes.func.isRequired,
+      onToggleShowGridLineNumbers: PropTypes.func.isRequired,
+      onToggleShowInfiniteLines: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.onShowGridAreasCheckboxClick =
+      this.onShowGridAreasCheckboxClick.bind(this);
+    this.onShowGridLineNumbersCheckboxClick =
+      this.onShowGridLineNumbersCheckboxClick.bind(this);
+    this.onShowInfiniteLinesCheckboxClick =
+      this.onShowInfiniteLinesCheckboxClick.bind(this);
+  }
+
+  onShowGridAreasCheckboxClick() {
+    const { highlighterSettings, onToggleShowGridAreas } = this.props;
+
+    onToggleShowGridAreas(!highlighterSettings.showGridAreasOverlay);
+  }
+
+  onShowGridLineNumbersCheckboxClick() {
+    const { highlighterSettings, onToggleShowGridLineNumbers } = this.props;
+
+    onToggleShowGridLineNumbers(!highlighterSettings.showGridLineNumbers);
+  }
+
+  onShowInfiniteLinesCheckboxClick() {
+    const { highlighterSettings, onToggleShowInfiniteLines } = this.props;
+
+    onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines);
+  }
+
+  render() {
+    const { highlighterSettings } = this.props;
+
+    return dom.div(
+      { className: "grid-container" },
+      dom.span(
+        {
+          role: "heading",
+          "aria-level": "3",
+        },
+        getStr("layout.gridDisplaySettings")
+      ),
+      dom.ul(
+        {},
+        dom.li(
+          { className: "grid-settings-item" },
+          dom.label(
+            {},
+            dom.input({
+              id: "grid-setting-show-grid-line-numbers",
+              type: "checkbox",
+              checked: highlighterSettings.showGridLineNumbers,
+              onChange: this.onShowGridLineNumbersCheckboxClick,
+            }),
+            getStr("layout.displayLineNumbers")
+          )
+        ),
+        dom.li(
+          { className: "grid-settings-item" },
+          dom.label(
+            {},
+            dom.input({
+              id: "grid-setting-show-grid-areas",
+              type: "checkbox",
+              checked: highlighterSettings.showGridAreasOverlay,
+              onChange: this.onShowGridAreasCheckboxClick,
+            }),
+            getStr("layout.displayAreaNames")
+          )
+        ),
+        dom.li(
+          { className: "grid-settings-item" },
+          dom.label(
+            {},
+            dom.input({
+              id: "grid-setting-extend-grid-lines",
+              type: "checkbox",
+              checked: highlighterSettings.showInfiniteLines,
+              onChange: this.onShowInfiniteLinesCheckboxClick,
+            }),
+            getStr("layout.extendLinesInfinitely")
+          )
+        )
+      )
+    );
+  }
+}
+
+module.exports = GridDisplaySettings;
diff --git a/devtools/client/inspector/grids/components/GridItem.js b/devtools/client/inspector/grids/components/GridItem.js
new file mode 100644
index 0000000000..fd2694e27a
--- /dev/null
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -0,0 +1,178 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createRef,
+  Fragment,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormatStr,
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+loader.lazyGetter(this, "Rep", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .REPS.Rep;
+});
+loader.lazyGetter(this, "MODE", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .MODE;
+});
+
+loader.lazyRequireGetter(
+  this,
+  "translateNodeFrontToGrip",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+
+const Types = require("resource://devtools/client/inspector/grids/types.js");
+
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
+
+class GridItem extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      grid: PropTypes.shape(Types.grid).isRequired,
+      grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+      onSetGridOverlayColor: PropTypes.func.isRequired,
+      onToggleGridHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.swatchEl = createRef();
+
+    this.onGridCheckboxClick = this.onGridCheckboxClick.bind(this);
+    this.onGridInspectIconClick = this.onGridInspectIconClick.bind(this);
+    this.setGridColor = this.setGridColor.bind(this);
+  }
+
+  componentDidMount() {
+    const tooltip = this.props.getSwatchColorPickerTooltip();
+
+    let previousColor;
+    tooltip.addSwatch(this.swatchEl.current, {
+      onCommit: this.setGridColor,
+      onPreview: this.setGridColor,
+      onRevert: () => {
+        this.props.onSetGridOverlayColor(
+          this.props.grid.nodeFront,
+          previousColor
+        );
+      },
+      onShow: () => {
+        previousColor = this.props.grid.color;
+      },
+    });
+  }
+
+  componentWillUnmount() {
+    const tooltip = this.props.getSwatchColorPickerTooltip();
+    tooltip.removeSwatch(this.swatchEl.current);
+  }
+
+  setGridColor() {
+    const color = this.swatchEl.current.dataset.color;
+    this.props.onSetGridOverlayColor(this.props.grid.nodeFront, color);
+  }
+
+  onGridCheckboxClick() {
+    const { grid, onToggleGridHighlighter } = this.props;
+    onToggleGridHighlighter(grid.nodeFront);
+  }
+
+  onGridInspectIconClick(nodeFront) {
+    const { setSelectedNode } = this.props;
+    setSelectedNode(nodeFront, { reason: "layout-panel" });
+    nodeFront.scrollIntoView().catch(e => console.error(e));
+  }
+
+  renderSubgrids() {
+    const { grid, grids } = this.props;
+
+    if (!grid.subgrids.length) {
+      return null;
+    }
+
+    const subgrids = grids.filter(g => grid.subgrids.includes(g.id));
+
+    return dom.ul(
+      {},
+      subgrids.map(g => {
+        return createElement(GridItem, {
+          key: g.id,
+          dispatch: this.props.dispatch,
+          getSwatchColorPickerTooltip: this.props.getSwatchColorPickerTooltip,
+          grid: g,
+          grids,
+          onSetGridOverlayColor: this.props.onSetGridOverlayColor,
+          onToggleGridHighlighter: this.props.onToggleGridHighlighter,
+          setSelectedNode: this.props.setSelectedNode,
+        });
+      })
+    );
+  }
+
+  render() {
+    const { dispatch, grid } = this.props;
+
+    return createElement(
+      Fragment,
+      null,
+      dom.li(
+        {},
+        dom.label(
+          {},
+          dom.input({
+            checked: grid.highlighted,
+            disabled: grid.disabled,
+            type: "checkbox",
+            value: grid.id,
+            onChange: this.onGridCheckboxClick,
+            title: getStr("layout.toggleGridHighlighter"),
+          }),
+          Rep({
+            defaultRep: Rep.ElementNode,
+            mode: MODE.TINY,
+            object: translateNodeFrontToGrip(grid.nodeFront),
+            onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
+            onDOMNodeMouseOver: () => dispatch(highlightNode(grid.nodeFront)),
+            onInspectIconClick: (_, e) => {
+              // Stoping click propagation to avoid firing onGridCheckboxClick()
+              e.stopPropagation();
+              this.onGridInspectIconClick(grid.nodeFront);
+            },
+          })
+        ),
+        dom.button({
+          className: "layout-color-swatch",
+          "data-color": grid.color,
+          ref: this.swatchEl,
+          style: {
+            backgroundColor: grid.color,
+          },
+          title: getFormatStr("layout.colorSwatch.tooltip", grid.color),
+        })
+      ),
+      this.renderSubgrids()
+    );
+  }
+}
+
+module.exports = GridItem;
diff --git a/devtools/client/inspector/grids/components/GridList.js b/devtools/client/inspector/grids/components/GridList.js
new file mode 100644
index 0000000000..62c7ae5b13
--- /dev/null
+++ b/devtools/client/inspector/grids/components/GridList.js
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+const GridItem = createFactory(
+  require("resource://devtools/client/inspector/grids/components/GridItem.js")
+);
+
+const Types = require("resource://devtools/client/inspector/grids/types.js");
+
+class GridList extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+      onSetGridOverlayColor: PropTypes.func.isRequired,
+      onToggleGridHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      dispatch,
+      getSwatchColorPickerTooltip,
+      grids,
+      onSetGridOverlayColor,
+      onToggleGridHighlighter,
+      setSelectedNode,
+    } = this.props;
+
+    return dom.div(
+      { className: "grid-container" },
+      dom.span(
+        {
+          role: "heading",
+          "aria-level": "3",
+        },
+        getStr("layout.overlayGrid")
+      ),
+      dom.ul(
+        {
+          id: "grid-list",
+          className: "devtools-monospace",
+        },
+        grids
+          // Skip subgrids since they are rendered by their parent grids in GridItem.
+          .filter(grid => !grid.isSubgrid)
+          .map(grid =>
+            GridItem({
+              dispatch,
+              key: grid.id,
+              getSwatchColorPickerTooltip,
+              grid,
+              grids,
+              onSetGridOverlayColor,
+              onToggleGridHighlighter,
+              setSelectedNode,
+            })
+          )
+      )
+    );
+  }
+}
+
+module.exports = GridList;
diff --git a/devtools/client/inspector/grids/components/GridOutline.js b/devtools/client/inspector/grids/components/GridOutline.js
new file mode 100644
index 0000000000..65771f3f45
--- /dev/null
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -0,0 +1,436 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+const {
+  getWritingModeMatrix,
+  getCSSMatrixTransform,
+} = require("resource://devtools/shared/layout/dom-matrix-2d.js");
+
+const Types = require("resource://devtools/client/inspector/grids/types.js");
+
+// The delay prior to executing the grid cell highlighting.
+const GRID_HIGHLIGHTING_DEBOUNCE = 50;
+
+// Prefs for the max number of rows/cols a grid container can have for
+// the outline to display.
+const GRID_OUTLINE_MAX_ROWS_PREF = Services.prefs.getIntPref(
+  "devtools.gridinspector.gridOutlineMaxRows"
+);
+const GRID_OUTLINE_MAX_COLUMNS_PREF = Services.prefs.getIntPref(
+  "devtools.gridinspector.gridOutlineMaxColumns"
+);
+
+// Move SVG grid to the right 100 units, so that it is not flushed against the edge of
+// layout border
+const TRANSLATE_X = 0;
+const TRANSLATE_Y = 0;
+
+const GRID_CELL_SCALE_FACTOR = 50;
+
+const VIEWPORT_MIN_HEIGHT = 100;
+const VIEWPORT_MAX_HEIGHT = 150;
+
+const {
+  showGridHighlighter,
+} = require("resource://devtools/client/inspector/grids/actions/grid-highlighter.js");
+
+class GridOutline extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    };
+  }
+
+  static getDerivedStateFromProps(props) {
+    const selectedGrid = props.grids.find(grid => grid.highlighted);
+
+    // Store the height of the grid container in the component state to prevent overflow
+    // issues. We want to store the width of the grid container as well so that the
+    // viewbox is only the calculated width of the grid outline.
+    const { width, height } = selectedGrid?.gridFragments.length
+      ? getTotalWidthAndHeight(selectedGrid)
+      : { width: 0, height: 0 };
+    let showOutline;
+
+    if (selectedGrid?.gridFragments.length) {
+      const { cols, rows } = selectedGrid.gridFragments[0];
+
+      // Show the grid outline if both the rows/columns are less than or equal
+      // to their max prefs.
+      showOutline =
+        cols.lines.length <= GRID_OUTLINE_MAX_COLUMNS_PREF &&
+        rows.lines.length <= GRID_OUTLINE_MAX_ROWS_PREF;
+    }
+
+    return { height, width, selectedGrid, showOutline };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      height: 0,
+      selectedGrid: null,
+      showOutline: true,
+      width: 0,
+    };
+
+    this.doHighlightCell = this.doHighlightCell.bind(this);
+    this.getGridAreaName = this.getGridAreaName.bind(this);
+    this.getHeight = this.getHeight.bind(this);
+    this.onHighlightCell = this.onHighlightCell.bind(this);
+    this.renderCannotShowOutlineText =
+      this.renderCannotShowOutlineText.bind(this);
+    this.renderGrid = this.renderGrid.bind(this);
+    this.renderGridCell = this.renderGridCell.bind(this);
+    this.renderGridOutline = this.renderGridOutline.bind(this);
+    this.renderGridOutlineBorder = this.renderGridOutlineBorder.bind(this);
+    this.renderOutline = this.renderOutline.bind(this);
+  }
+
+  doHighlightCell(target, hide) {
+    const { dispatch, grids } = this.props;
+    const name = target.dataset.gridAreaName;
+    const id = target.dataset.gridId;
+    const gridFragmentIndex = target.dataset.gridFragmentIndex;
+    const rowNumber = target.dataset.gridRow;
+    const columnNumber = target.dataset.gridColumn;
+    const nodeFront = grids[id].nodeFront;
+
+    // The options object has the following properties which corresponds to the
+    // required parameters for showing the grid cell or area highlights.
+    // See devtools/server/actors/highlighters/css-grid.js
+    // {
+    //   showGridArea: String,
+    //   showGridCell: {
+    //     gridFragmentIndex: Number,
+    //     rowNumber: Number,
+    //     columnNumber: Number,
+    //   },
+    // }
+    const options = {
+      showGridArea: name,
+      showGridCell: {
+        gridFragmentIndex,
+        rowNumber,
+        columnNumber,
+      },
+    };
+
+    if (hide) {
+      // Reset the grid highlighter to default state; no options = hide cell/area outline.
+      dispatch(showGridHighlighter(nodeFront));
+    } else {
+      dispatch(showGridHighlighter(nodeFront, options));
+    }
+  }
+
+  /**
+   * Returns the grid area name if the given grid cell is part of a grid area, otherwise
+   * null.
+   *
+   * @param  {Number} columnNumber
+   *         The column number of the grid cell.
+   * @param  {Number} rowNumber
+   *         The row number of the grid cell.
+   * @param  {Array} areas
+   *         Array of grid areas data stored in the grid fragment.
+   * @return {String} If there is a grid area return area name, otherwise null.
+   */
+  getGridAreaName(columnNumber, rowNumber, areas) {
+    const gridArea = areas.find(
+      area =>
+        area.rowStart <= rowNumber &&
+        area.rowEnd > rowNumber &&
+        area.columnStart <= columnNumber &&
+        area.columnEnd > columnNumber
+    );
+
+    if (!gridArea) {
+      return null;
+    }
+
+    return gridArea.name;
+  }
+
+  /**
+   * Returns the height of the grid outline ranging between a minimum and maximum height.
+   *
+   * @return {Number} The height of the grid outline.
+   */
+  getHeight() {
+    const { height } = this.state;
+
+    if (height >= VIEWPORT_MAX_HEIGHT) {
+      return VIEWPORT_MAX_HEIGHT;
+    } else if (height <= VIEWPORT_MIN_HEIGHT) {
+      return VIEWPORT_MIN_HEIGHT;
+    }
+
+    return height;
+  }
+
+  /**
+   * Displays a message text "Cannot show outline for this grid".
+   */
+  renderCannotShowOutlineText() {
+    return dom.div(
+      { className: "grid-outline-text" },
+      dom.span({
+        className: "grid-outline-text-icon",
+        title: getStr("layout.cannotShowGridOutline.title"),
+      }),
+      getStr("layout.cannotShowGridOutline")
+    );
+  }
+
+  /**
+   * Renders the grid outline for the given grid container object.
+   *
+   * @param  {Object} grid
+   *         A single grid container in the document.
+   */
+  renderGrid(grid) {
+    // TODO: We are drawing the first fragment since only one is currently being stored.
+    // In the future we will need to iterate over all fragments of a grid.
+    const gridFragmentIndex = 0;
+    const { id, color, gridFragments } = grid;
+    const { rows, cols, areas } = gridFragments[gridFragmentIndex];
+
+    const numberOfColumns = cols.lines.length - 1;
+    const numberOfRows = rows.lines.length - 1;
+    const rectangles = [];
+    let x = 0;
+    let y = 0;
+    let width = 0;
+    let height = 0;
+
+    // Draw the cells contained within the grid outline border.
+    for (let rowNumber = 1; rowNumber <= numberOfRows; rowNumber++) {
+      height =
+        GRID_CELL_SCALE_FACTOR * (rows.tracks[rowNumber - 1].breadth / 100);
+
+      for (
+        let columnNumber = 1;
+        columnNumber <= numberOfColumns;
+        columnNumber++
+      ) {
+        width =
+          GRID_CELL_SCALE_FACTOR *
+          (cols.tracks[columnNumber - 1].breadth / 100);
+
+        const gridAreaName = this.getGridAreaName(
+          columnNumber,
+          rowNumber,
+          areas
+        );
+        const gridCell = this.renderGridCell(
+          id,
+          gridFragmentIndex,
+          x,
+          y,
+          rowNumber,
+          columnNumber,
+          color,
+          gridAreaName,
+          width,
+          height
+        );
+
+        rectangles.push(gridCell);
+        x += width;
+      }
+
+      x = 0;
+      y += height;
+    }
+
+    // Transform the cells as needed to match the grid container's writing mode.
+    const cellGroupStyle = {};
+    const writingModeMatrix = getWritingModeMatrix(this.state, grid);
+    cellGroupStyle.transform = getCSSMatrixTransform(writingModeMatrix);
+    const cellGroup = dom.g(
+      {
+        id: "grid-cell-group",
+        style: cellGroupStyle,
+      },
+      rectangles
+    );
+
+    // Draw a rectangle that acts as the grid outline border.
+    const border = this.renderGridOutlineBorder(
+      this.state.width,
+      this.state.height,
+      color
+    );
+
+    return [border, cellGroup];
+  }
+
+  /**
+   * Renders the grid cell of a grid fragment.
+   *
+   * @param  {Number} id
+   *         The grid id stored on the grid fragment
+   * @param  {Number} gridFragmentIndex
+   *         The index of the grid fragment rendered to the document.
+   * @param  {Number} x
+   *         The x-position of the grid cell.
+   * @param  {Number} y
+   *         The y-position of the grid cell.
+   * @param  {Number} rowNumber
+   *         The row number of the grid cell.
+   * @param  {Number} columnNumber
+   *         The column number of the grid cell.
+   * @param  {String|null} gridAreaName
+   *         The grid area name or null if the grid cell is not part of a grid area.
+   * @param  {Number} width
+   *         The width of grid cell.
+   * @param  {Number} height
+   *         The height of the grid cell.
+   */
+  renderGridCell(
+    id,
+    gridFragmentIndex,
+    x,
+    y,
+    rowNumber,
+    columnNumber,
+    color,
+    gridAreaName,
+    width,
+    height
+  ) {
+    return dom.rect({
+      key: `${id}-${rowNumber}-${columnNumber}`,
+      className: "grid-outline-cell",
+      "data-grid-area-name": gridAreaName,
+      "data-grid-fragment-index": gridFragmentIndex,
+      "data-grid-id": id,
+      "data-grid-row": rowNumber,
+      "data-grid-column": columnNumber,
+      x,
+      y,
+      width,
+      height,
+      fill: "none",
+      onMouseEnter: this.onHighlightCell,
+      onMouseLeave: this.onHighlightCell,
+    });
+  }
+
+  renderGridOutline(grid) {
+    const { color } = grid;
+
+    return dom.g(
+      {
+        id: "grid-outline-group",
+        className: "grid-outline-group",
+        style: { color },
+      },
+      this.renderGrid(grid)
+    );
+  }
+
+  renderGridOutlineBorder(borderWidth, borderHeight, color) {
+    return dom.rect({
+      key: "border",
+      className: "grid-outline-border",
+      x: 0,
+      y: 0,
+      width: borderWidth,
+      height: borderHeight,
+    });
+  }
+
+  renderOutline() {
+    const { height, selectedGrid, showOutline, width } = this.state;
+
+    return showOutline
+      ? dom.svg(
+          {
+            id: "grid-outline",
+            width: "100%",
+            height: this.getHeight(),
+            viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${width} ${height}`,
+          },
+          this.renderGridOutline(selectedGrid)
+        )
+      : this.renderCannotShowOutlineText();
+  }
+
+  onHighlightCell({ target, type }) {
+    // Debounce the highlighting of cells.
+    // This way we don't end up sending many requests to the server for highlighting when
+    // cells get hovered in a rapid succession We only send a request if the user settles
+    // on a cell for some time.
+    if (this.highlightTimeout) {
+      clearTimeout(this.highlightTimeout);
+    }
+
+    this.highlightTimeout = setTimeout(() => {
+      this.doHighlightCell(target, type === "mouseleave");
+      this.highlightTimeout = null;
+    }, GRID_HIGHLIGHTING_DEBOUNCE);
+  }
+
+  render() {
+    const { selectedGrid } = this.state;
+
+    return selectedGrid?.gridFragments.length
+      ? dom.div(
+          {
+            id: "grid-outline-container",
+            className: "grid-outline-container",
+          },
+          this.renderOutline()
+        )
+      : null;
+  }
+}
+
+/**
+ * Get the width and height of a given grid.
+ *
+ * @param  {Object} grid
+ *         A single grid container in the document.
+ * @return {Object} An object like { width, height }
+ */
+function getTotalWidthAndHeight(grid) {
+  // TODO: We are drawing the first fragment since only one is currently being stored.
+  // In the future we will need to iterate over all fragments of a grid.
+  const { gridFragments } = grid;
+  const { rows, cols } = gridFragments[0];
+
+  let height = 0;
+  for (let i = 0; i < rows.lines.length - 1; i++) {
+    height += GRID_CELL_SCALE_FACTOR * (rows.tracks[i].breadth / 100);
+  }
+
+  let width = 0;
+  for (let i = 0; i < cols.lines.length - 1; i++) {
+    width += GRID_CELL_SCALE_FACTOR * (cols.tracks[i].breadth / 100);
+  }
+
+  // All writing modes other than horizontal-tb (the initial value) involve a 90 deg
+  // rotation, so swap width and height.
+  if (grid.writingMode != "horizontal-tb") {
+    [width, height] = [height, width];
+  }
+
+  return { width, height };
+}
+
+module.exports = GridOutline;
diff --git a/devtools/client/inspector/grids/components/moz.build b/devtools/client/inspector/grids/components/moz.build
new file mode 100644
index 0000000000..e938e51ad1
--- /dev/null
+++ b/devtools/client/inspector/grids/components/moz.build
@@ -0,0 +1,13 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "Grid.js",
+    "GridDisplaySettings.js",
+    "GridItem.js",
+    "GridList.js",
+    "GridOutline.js",
+)
diff --git a/devtools/client/inspector/grids/grid-inspector.js b/devtools/client/inspector/grids/grid-inspector.js
new file mode 100644
index 0000000000..0055fc4e54
--- /dev/null
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -0,0 +1,783 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const flags = require("resource://devtools/shared/flags.js");
+const { throttle } = require("resource://devtools/shared/throttle.js");
+
+const gridsReducer = require("resource://devtools/client/inspector/grids/reducers/grids.js");
+const highlighterSettingsReducer = require("resource://devtools/client/inspector/grids/reducers/highlighter-settings.js");
+const {
+  updateGridColor,
+  updateGridHighlighted,
+  updateGrids,
+} = require("resource://devtools/client/inspector/grids/actions/grids.js");
+const {
+  updateShowGridAreas,
+  updateShowGridLineNumbers,
+  updateShowInfiniteLines,
+} = require("resource://devtools/client/inspector/grids/actions/highlighter-settings.js");
+
+loader.lazyRequireGetter(
+  this,
+  "compareFragmentsGeometry",
+  "resource://devtools/client/inspector/grids/utils/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "parseURL",
+  "resource://devtools/client/shared/source-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "asyncStorage",
+  "resource://devtools/shared/async-storage.js"
+);
+
+const CSS_GRID_COUNT_HISTOGRAM_ID = "DEVTOOLS_NUMBER_OF_CSS_GRIDS_IN_A_PAGE";
+
+const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
+const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
+const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
+
+const TELEMETRY_GRID_AREAS_OVERLAY_CHECKED =
+  "devtools.grid.showGridAreasOverlay.checked";
+const TELEMETRY_GRID_LINE_NUMBERS_CHECKED =
+  "devtools.grid.showGridLineNumbers.checked";
+const TELEMETRY_INFINITE_LINES_CHECKED =
+  "devtools.grid.showInfiniteLines.checked";
+
+// Default grid colors.
+const GRID_COLORS = [
+  "#9400FF",
+  "#DF00A9",
+  "#0A84FF",
+  "#12BC00",
+  "#EA8000",
+  "#00B0BD",
+  "#D70022",
+  "#4B42FF",
+  "#B5007F",
+  "#058B00",
+  "#A47F00",
+  "#005A71",
+];
+
+class GridInspector {
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.store = inspector.store;
+    this.telemetry = inspector.telemetry;
+
+    // Maximum number of grid highlighters that can be displayed.
+    this.maxHighlighters = Services.prefs.getIntPref(
+      "devtools.gridinspector.maxHighlighters"
+    );
+
+    this.store.injectReducer("grids", gridsReducer);
+    this.store.injectReducer("highlighterSettings", highlighterSettingsReducer);
+
+    this.onHighlighterShown = this.onHighlighterShown.bind(this);
+    this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
+    this.onNavigate = this.onNavigate.bind(this);
+    this.onReflow = throttle(this.onReflow, 500, this);
+    this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
+    this.onSidebarSelect = this.onSidebarSelect.bind(this);
+    this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
+    this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
+    this.onToggleShowGridLineNumbers =
+      this.onToggleShowGridLineNumbers.bind(this);
+    this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
+    this.updateGridPanel = this.updateGridPanel.bind(this);
+    this.listenForGridHighlighterEvents =
+      this.listenForGridHighlighterEvents.bind(this);
+
+    this.init();
+  }
+
+  get highlighters() {
+    if (!this._highlighters) {
+      this._highlighters = this.inspector.highlighters;
+    }
+
+    return this._highlighters;
+  }
+
+  /**
+   * Initializes the grid inspector by fetching the LayoutFront from the walker and
+   * loading the highlighter settings.
+   */
+  async init() {
+    if (!this.inspector) {
+      return;
+    }
+
+    if (flags.testing) {
+      // In tests, we start listening immediately to avoid having to simulate a mousemove.
+      this.listenForGridHighlighterEvents();
+    } else {
+      this.document.addEventListener(
+        "mousemove",
+        this.listenForGridHighlighterEvents,
+        {
+          once: true,
+        }
+      );
+    }
+
+    this.inspector.sidebar.on("select", this.onSidebarSelect);
+    this.inspector.on("new-root", this.onNavigate);
+
+    this.onSidebarSelect();
+  }
+
+  listenForGridHighlighterEvents() {
+    this.highlighters.on("grid-highlighter-hidden", this.onHighlighterHidden);
+    this.highlighters.on("grid-highlighter-shown", this.onHighlighterShown);
+  }
+
+  /**
+   * Get the LayoutActor fronts for all interesting targets where we have inspectors.
+   *
+   * @return {Array} The list of LayoutActor fronts
+   */
+  async getLayoutFronts() {
+    const inspectorFronts = await this.inspector.getAllInspectorFronts();
+    const layoutFronts = await Promise.all(
+      inspectorFronts.map(({ walker }) => walker.getLayoutInspector())
+    );
+    return layoutFronts.filter(front => !front.isDestroyed());
+  }
+
+  /**
+   * Destruction function called when the inspector is destroyed. Removes event listeners
+   * and cleans up references.
+   */
+  destroy() {
+    if (this._highlighters) {
+      this.highlighters.off(
+        "grid-highlighter-hidden",
+        this.onHighlighterHidden
+      );
+      this.highlighters.off("grid-highlighter-shown", this.onHighlighterShown);
+    }
+    this.document.removeEventListener(
+      "mousemove",
+      this.listenForGridHighlighterEvents
+    );
+
+    this.inspector.sidebar.off("select", this.onSidebarSelect);
+    this.inspector.off("new-root", this.onNavigate);
+
+    this.inspector.off("reflow-in-selected-target", this.onReflow);
+
+    this._highlighters = null;
+    this.document = null;
+    this.inspector = null;
+    this.store = null;
+  }
+
+  getComponentProps() {
+    return {
+      onSetGridOverlayColor: this.onSetGridOverlayColor,
+      onToggleGridHighlighter: this.onToggleGridHighlighter,
+      onToggleShowGridAreas: this.onToggleShowGridAreas,
+      onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
+    };
+  }
+
+  /**
+   * Returns the initial color linked to a grid container. Will attempt to check the
+   * current grid highlighter state and the store.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront for which we need the color.
+   * @param  {String} customColor
+   *         The color fetched from the custom palette, if it exists.
+   * @param  {String} fallbackColor
+   *         The color to use if no color could be found for the node front.
+   * @return {String} color
+   *         The color to use.
+   */
+  getInitialGridColor(nodeFront, customColor, fallbackColor) {
+    const highlighted = this.highlighters.gridHighlighters.has(nodeFront);
+
+    let color;
+    if (customColor) {
+      color = customColor;
+    } else if (
+      highlighted &&
+      this.highlighters.state.grids.has(nodeFront.actorID)
+    ) {
+      // If the node front is currently highlighted, use the color from the highlighter
+      // options.
+      color = this.highlighters.state.grids.get(nodeFront.actorID).options
+        .color;
+    } else {
+      // Otherwise use the color defined in the store for this node front.
+      color = this.getGridColorForNodeFront(nodeFront);
+    }
+
+    return color || fallbackColor;
+  }
+
+  /**
+   * Returns the color set for the grid highlighter associated with the provided
+   * nodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront for which we need the color.
+   */
+  getGridColorForNodeFront(nodeFront) {
+    const { grids } = this.store.getState();
+
+    for (const grid of grids) {
+      if (grid.nodeFront === nodeFront) {
+        return grid.color;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Given a list of new grid fronts, and if there are highlighted grids, check
+   * if their fragments have changed.
+   *
+   * @param  {Array} newGridFronts
+   *         A list of GridFront objects.
+   * @return {Boolean}
+   */
+  haveCurrentFragmentsChanged(newGridFronts) {
+    const gridHighlighters = this.highlighters.gridHighlighters;
+
+    if (!gridHighlighters.size) {
+      return false;
+    }
+
+    const gridFronts = newGridFronts.filter(g =>
+      gridHighlighters.has(g.containerNodeFront)
+    );
+    if (!gridFronts.length) {
+      return false;
+    }
+
+    const { grids } = this.store.getState();
+
+    for (const node of gridHighlighters.keys()) {
+      const oldFragments = grids.find(g => g.nodeFront === node).gridFragments;
+      const newFragments = newGridFronts.find(
+        g => g.containerNodeFront === node
+      ).gridFragments;
+
+      if (!compareFragmentsGeometry(oldFragments, newFragments)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Returns true if the layout panel is visible, and false otherwise.
+   */
+  isPanelVisible() {
+    return (
+      this.inspector &&
+      this.inspector.toolbox &&
+      this.inspector.sidebar &&
+      this.inspector.toolbox.currentToolId === "inspector" &&
+      this.inspector.sidebar.getCurrentTabID() === "layoutview"
+    );
+  }
+
+  /**
+   * Updates the grid panel by dispatching the new grid data. This is called when the
+   * layout view becomes visible or the view needs to be updated with new grid data.
+   */
+  async updateGridPanel() {
+    // Stop refreshing if the inspector or store is already destroyed.
+    if (!this.inspector || !this.store) {
+      return;
+    }
+
+    try {
+      await this._updateGridPanel();
+    } catch (e) {
+      this._throwUnlessDestroyed(
+        e,
+        "Inspector destroyed while executing updateGridPanel"
+      );
+    }
+  }
+
+  async _updateGridPanel() {
+    const gridFronts = await this.getGrids();
+
+    if (!gridFronts.length) {
+      try {
+        this.store.dispatch(updateGrids([]));
+        this.inspector.emit("grid-panel-updated");
+        return;
+      } catch (e) {
+        // This call might fail if called asynchrously after the toolbox is finished
+        // closing.
+        return;
+      }
+    }
+
+    const currentUrl = this.inspector.currentTarget.url;
+
+    // Log how many CSS Grid elements DevTools sees.
+    if (currentUrl != this.inspector.previousURL) {
+      this.telemetry
+        .getHistogramById(CSS_GRID_COUNT_HISTOGRAM_ID)
+        .add(gridFronts.length);
+      this.inspector.previousURL = currentUrl;
+    }
+
+    // Get the hostname, if there is no hostname, fall back on protocol
+    // ex: `data:` uri, and `about:` pages
+    const hostname =
+      parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
+    const customColors =
+      (await asyncStorage.getItem("gridInspectorHostColors")) || {};
+
+    const grids = [];
+    for (let i = 0; i < gridFronts.length; i++) {
+      const grid = gridFronts[i];
+      let nodeFront = grid.containerNodeFront;
+
+      // If the GridFront didn't yet have access to the NodeFront for its container, then
+      // get it from the walker. This happens when the walker hasn't yet seen this
+      // particular DOM Node in the tree yet, or when we are connected to an older server.
+      if (!nodeFront) {
+        try {
+          nodeFront = await grid.walkerFront.getNodeFromActor(grid.actorID, [
+            "containerEl",
+          ]);
+        } catch (e) {
+          // This call might fail if called asynchrously after the toolbox is finished
+          // closing.
+          return;
+        }
+      }
+
+      const colorForHost = customColors[hostname]
+        ? customColors[hostname][i]
+        : null;
+      const fallbackColor = GRID_COLORS[i % GRID_COLORS.length];
+      const color = this.getInitialGridColor(
+        nodeFront,
+        colorForHost,
+        fallbackColor
+      );
+      const highlighted = this.highlighters.gridHighlighters.has(nodeFront);
+      const disabled =
+        !highlighted &&
+        this.maxHighlighters > 1 &&
+        this.highlighters.gridHighlighters.size === this.maxHighlighters;
+      const isSubgrid = grid.isSubgrid;
+      const gridData = {
+        id: i,
+        actorID: grid.actorID,
+        color,
+        disabled,
+        direction: grid.direction,
+        gridFragments: grid.gridFragments,
+        highlighted,
+        isSubgrid,
+        nodeFront,
+        parentNodeActorID: null,
+        subgrids: [],
+        writingMode: grid.writingMode,
+      };
+
+      if (isSubgrid) {
+        let parentGridNodeFront;
+
+        try {
+          parentGridNodeFront = await nodeFront.walkerFront.getParentGridNode(
+            nodeFront
+          );
+        } catch (e) {
+          // This call might fail if called asynchrously after the toolbox is finished
+          // closing.
+          return;
+        }
+
+        if (!parentGridNodeFront) {
+          return;
+        }
+
+        const parentIndex = grids.findIndex(
+          g => g.nodeFront.actorID === parentGridNodeFront.actorID
+        );
+        gridData.parentNodeActorID = parentGridNodeFront.actorID;
+        grids[parentIndex].subgrids.push(gridData.id);
+      }
+
+      grids.push(gridData);
+    }
+
+    // We need to make sure that nested subgrids are displayed above their parent grid
+    // containers, so update the z-index of each grid before rendering them.
+    for (const root of grids.filter(g => !g.parentNodeActorID)) {
+      this._updateZOrder(grids, root);
+    }
+
+    this.store.dispatch(updateGrids(grids));
+    this.inspector.emit("grid-panel-updated");
+  }
+
+  /**
+   * Get all GridFront instances from the server(s).
+   *
+   *
+   * @return {Array} The list of GridFronts
+   */
+  async getGrids() {
+    const promises = [];
+    try {
+      const layoutFronts = await this.getLayoutFronts();
+      for (const layoutFront of layoutFronts) {
+        promises.push(layoutFront.getAllGrids());
+      }
+    } catch (e) {
+      // This call might fail if called asynchrously after the toolbox is finished closing
+    }
+
+    const gridFronts = (await Promise.all(promises)).flat();
+    return gridFronts;
+  }
+
+  /**
+   * Handler for "grid-highlighter-shown" events emitted from the
+   * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
+   * Required since on and off events need the same reference object.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the grid container element for which the grid
+   *         highlighter is shown for.
+   */
+  onHighlighterShown(nodeFront) {
+    this.onHighlighterChange(nodeFront, true);
+  }
+
+  /**
+   * Handler for "grid-highlighter-hidden" events emitted from the
+   * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
+   * Required since on and off events need the same reference object.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the grid container element for which the grid highlighter
+   *         is hidden for.
+   */
+  onHighlighterHidden(nodeFront) {
+    this.onHighlighterChange(nodeFront, false);
+  }
+
+  /**
+   * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
+   * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the grid container element for which the grid highlighter
+   *         is shown for.
+   * @param  {Boolean} highlighted
+   *         If the grid should be updated to highlight or hide.
+   */
+  onHighlighterChange(nodeFront, highlighted) {
+    if (!this.isPanelVisible()) {
+      return;
+    }
+
+    const { grids } = this.store.getState();
+    const grid = grids.find(g => g.nodeFront === nodeFront);
+
+    if (!grid || grid.highlighted === highlighted) {
+      return;
+    }
+
+    this.store.dispatch(updateGridHighlighted(nodeFront, highlighted));
+  }
+
+  /**
+   * Handler for "new-root" event fired by the inspector, which indicates a page
+   * navigation. Updates grid panel contents.
+   */
+  onNavigate() {
+    if (this.isPanelVisible()) {
+      this.updateGridPanel();
+    }
+  }
+
+  /**
+   * Handler for reflow events fired by the inspector when a node is selected. On reflows,
+   * update the grid panel content, because the shape or number of grids on the page may
+   * have changed.
+   *
+   * Note that there may be frequent reflows on the page and that not all of them actually
+   * cause the grids to change. So, we want to limit how many times we update the grid
+   * panel to only reflows that actually either change the list of grids, or those that
+   * change the current outlined grid.
+   * To achieve this, this function compares the list of grid containers from before and
+   * after the reflow, as well as the grid fragment data on the currently highlighted
+   * grid.
+   */
+  async onReflow() {
+    try {
+      if (!this.isPanelVisible()) {
+        return;
+      }
+
+      // The list of grids currently displayed.
+      const { grids } = this.store.getState();
+
+      // The new list of grids from the server.
+      const newGridFronts = await this.getGrids();
+
+      // In some cases, the nodes for current grids may have been removed from the DOM in
+      // which case we need to update.
+      if (grids.length && grids.some(grid => !grid.nodeFront.actorID)) {
+        await this.updateGridPanel(newGridFronts);
+        return;
+      }
+
+      // Get the node front(s) from the current grid(s) so we can compare them to them to
+      // the node(s) of the new grids.
+      const oldNodeFronts = grids.map(grid => grid.nodeFront.actorID);
+      const newNodeFronts = newGridFronts
+        .filter(grid => grid.containerNode)
+        .map(grid => grid.containerNodeFront.actorID);
+
+      if (
+        grids.length === newGridFronts.length &&
+        oldNodeFronts.sort().join(",") == newNodeFronts.sort().join(",") &&
+        !this.haveCurrentFragmentsChanged(newGridFronts)
+      ) {
+        // Same list of containers and the geometry of all the displayed grids remained the
+        // same, we can safely abort.
+        return;
+      }
+
+      // Either the list of containers or the current fragments have changed, do update.
+      await this.updateGridPanel(newGridFronts);
+    } catch (e) {
+      this._throwUnlessDestroyed(
+        e,
+        "Inspector destroyed while executing onReflow callback"
+      );
+    }
+  }
+
+  /**
+   * Handler for a change in the grid overlay color picker for a grid container.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element for which the grid color is
+   *         being updated.
+   * @param  {String} color
+   *         A hex string representing the color to use.
+   */
+  async onSetGridOverlayColor(node, color) {
+    this.store.dispatch(updateGridColor(node, color));
+
+    const { grids } = this.store.getState();
+    const currentUrl = this.inspector.currentTarget.url;
+    // Get the hostname, if there is no hostname, fall back on protocol
+    // ex: `data:` uri, and `about:` pages
+    const hostname =
+      parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
+    const customGridColors =
+      (await asyncStorage.getItem("gridInspectorHostColors")) || {};
+
+    for (const grid of grids) {
+      if (grid.nodeFront !== node) {
+        continue;
+      }
+
+      if (!customGridColors[hostname]) {
+        customGridColors[hostname] = [];
+      }
+      // Update the custom color for the grid in this position.
+      customGridColors[hostname][grid.id] = color;
+      await asyncStorage.setItem("gridInspectorHostColors", customGridColors);
+
+      if (!this.isPanelVisible()) {
+        // This call might fail if called asynchrously after the toolbox is finished
+        // closing.
+        return;
+      }
+
+      // If the grid for which the color was updated currently has a highlighter, update
+      // the color.
+      if (this.highlighters.gridHighlighters.has(node)) {
+        this.highlighters.showGridHighlighter(node);
+        continue;
+      }
+
+      // If the node is not explicitly highlighted, but is a parent grid which has an
+      // highlighted subgrid, we also want to update the color.
+      const subGrid = grids.find(({ id }) => grid.subgrids.includes(id));
+      if (subGrid?.highlighted) {
+        this.highlighters.showParentGridHighlighter(node);
+      }
+    }
+  }
+
+  /**
+   * Handler for the inspector sidebar "select" event. Starts tracking reflows
+   * if the layout panel is visible. Otherwise, stop tracking reflows.
+   * Finally, refresh the layout view if it is visible.
+   */
+  onSidebarSelect() {
+    if (!this.isPanelVisible()) {
+      this.inspector.off("reflow-in-selected-target", this.onReflow);
+      return;
+    }
+
+    this.inspector.on("reflow-in-selected-target", this.onReflow);
+    this.updateGridPanel();
+  }
+
+  /**
+   * Handler for a change in the input checkboxes in the GridList component.
+   * Toggles on/off the grid highlighter for the provided grid container element.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element for which the grid
+   *         highlighter is toggled on/off for.
+   */
+  onToggleGridHighlighter(node) {
+    const { grids } = this.store.getState();
+    const grid = grids.find(g => g.nodeFront === node);
+    this.store.dispatch(updateGridHighlighted(node, !grid.highlighted));
+    this.highlighters.toggleGridHighlighter(node, "grid");
+  }
+
+  /**
+   * Handler for a change in the show grid areas checkbox in the GridDisplaySettings
+   * component. Toggles on/off the option to show the grid areas in the grid highlighter.
+   * Refreshes the shown grid highlighter for the grids currently highlighted.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should show the grid areas.
+   */
+  onToggleShowGridAreas(enabled) {
+    this.store.dispatch(updateShowGridAreas(enabled));
+    Services.prefs.setBoolPref(SHOW_GRID_AREAS, enabled);
+
+    if (enabled) {
+      this.telemetry.scalarSet(TELEMETRY_GRID_AREAS_OVERLAY_CHECKED, 1);
+    }
+
+    const { grids } = this.store.getState();
+
+    for (const grid of grids) {
+      if (grid.highlighted) {
+        this.highlighters.showGridHighlighter(grid.nodeFront);
+      }
+    }
+  }
+
+  /**
+   * Handler for a change in the show grid line numbers checkbox in the
+   * GridDisplaySettings component. Toggles on/off the option to show the grid line
+   * numbers in the grid highlighter. Refreshes the shown grid highlighter for the
+   * grids currently highlighted.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should show the grid line numbers.
+   */
+  onToggleShowGridLineNumbers(enabled) {
+    this.store.dispatch(updateShowGridLineNumbers(enabled));
+    Services.prefs.setBoolPref(SHOW_GRID_LINE_NUMBERS, enabled);
+
+    if (enabled) {
+      this.telemetry.scalarSet(TELEMETRY_GRID_LINE_NUMBERS_CHECKED, 1);
+    }
+
+    const { grids } = this.store.getState();
+
+    for (const grid of grids) {
+      if (grid.highlighted) {
+        this.highlighters.showGridHighlighter(grid.nodeFront);
+      }
+    }
+  }
+
+  /**
+   * Handler for a change in the extend grid lines infinitely checkbox in the
+   * GridDisplaySettings component. Toggles on/off the option to extend the grid
+   * lines infinitely in the grid highlighter. Refreshes the shown grid highlighter
+   * for grids currently highlighted.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should extend grid lines infinitely.
+   */
+  onToggleShowInfiniteLines(enabled) {
+    this.store.dispatch(updateShowInfiniteLines(enabled));
+    Services.prefs.setBoolPref(SHOW_INFINITE_LINES_PREF, enabled);
+
+    if (enabled) {
+      this.telemetry.scalarSet(TELEMETRY_INFINITE_LINES_CHECKED, 1);
+    }
+
+    const { grids } = this.store.getState();
+
+    for (const grid of grids) {
+      if (grid.highlighted) {
+        this.highlighters.showGridHighlighter(grid.nodeFront);
+      }
+    }
+  }
+
+  /**
+   * Some grid-inspector methods are highly asynchronous and might still run
+   * after the inspector was destroyed. Swallow errors if the grid inspector is
+   * already destroyed, throw otherwise.
+   *
+   * @param {Error} error
+   *        The original error object.
+   * @param {String} message
+   *        The message to log in case the inspector is already destroyed and
+   *        the error is swallowed.
+   */
+  _throwUnlessDestroyed(error, message) {
+    if (!this.inspector) {
+      console.warn(message);
+    } else {
+      // If the grid inspector was not destroyed, this is an unexpected error.
+      throw error;
+    }
+  }
+
+  /**
+   * Set z-index of each grids so that nested subgrids are always above their parent grid
+   * container.
+   *
+   * @param {Array} grids
+   *        A list of grid data.
+   * @param {Object} parent
+   *        A grid data of parent.
+   * @param {Number} zIndex
+   *        z-index for the parent.
+   */
+  _updateZOrder(grids, parent, zIndex = 0) {
+    parent.zIndex = zIndex;
+
+    for (const childIndex of parent.subgrids) {
+      // Recurse into children grids.
+      this._updateZOrder(grids, grids[childIndex], zIndex + 1);
+    }
+  }
+}
+
+module.exports = GridInspector;
diff --git a/devtools/client/inspector/grids/moz.build b/devtools/client/inspector/grids/moz.build
new file mode 100644
index 0000000000..11296ddef2
--- /dev/null
+++ b/devtools/client/inspector/grids/moz.build
@@ -0,0 +1,20 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "actions",
+    "components",
+    "reducers",
+    "utils",
+]
+
+DevToolsModules(
+    "grid-inspector.js",
+    "types.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
+XPCSHELL_TESTS_MANIFESTS += ["test/xpcshell/xpcshell.toml"]
diff --git a/devtools/client/inspector/grids/reducers/grids.js b/devtools/client/inspector/grids/reducers/grids.js
new file mode 100644
index 0000000000..5ab8bb5060
--- /dev/null
+++ b/devtools/client/inspector/grids/reducers/grids.js
@@ -0,0 +1,87 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_GRID_COLOR,
+  UPDATE_GRID_HIGHLIGHTED,
+  UPDATE_GRIDS,
+} = require("resource://devtools/client/inspector/grids/actions/index.js");
+
+const INITIAL_GRIDS = [];
+
+const reducers = {
+  [UPDATE_GRID_COLOR](grids, { nodeFront, color }) {
+    const newGrids = grids.map(g => {
+      if (g.nodeFront === nodeFront) {
+        g = Object.assign({}, g, { color });
+      }
+
+      return g;
+    });
+
+    return newGrids;
+  },
+
+  [UPDATE_GRID_HIGHLIGHTED](grids, { nodeFront, highlighted }) {
+    const maxHighlighters = Services.prefs.getIntPref(
+      "devtools.gridinspector.maxHighlighters"
+    );
+    const highlightedNodeFronts = grids
+      .filter(g => g.highlighted)
+      .map(g => g.nodeFront);
+    let numHighlighted = highlightedNodeFronts.length;
+
+    // Get the total number of highlighted grids including the one that will be
+    // highlighted/unhighlighted.
+    if (!highlightedNodeFronts.includes(nodeFront) && highlighted) {
+      numHighlighted += 1;
+    } else if (highlightedNodeFronts.includes(nodeFront) && !highlighted) {
+      numHighlighted -= 1;
+    }
+
+    return grids.map(g => {
+      if (maxHighlighters === 1) {
+        // When there is only one grid highlighter available, only the given grid
+        // container nodeFront can be highlighted, and all the other grid containers
+        // are unhighlighted.
+        return Object.assign({}, g, {
+          highlighted: g.nodeFront === nodeFront && highlighted,
+        });
+      } else if (
+        numHighlighted === maxHighlighters &&
+        g.nodeFront !== nodeFront
+      ) {
+        // The maximum number of highlighted grids have been reached. Disable all the
+        // other non-highlighted grids.
+        return Object.assign({}, g, {
+          disabled: !g.highlighted,
+        });
+      } else if (g.nodeFront === nodeFront) {
+        // This is the provided grid nodeFront to highlight/unhighlight.
+        return Object.assign({}, g, {
+          disabled: false,
+          highlighted,
+        });
+      }
+
+      return Object.assign({}, g, {
+        disabled: false,
+      });
+    });
+  },
+
+  [UPDATE_GRIDS](_, { grids }) {
+    return grids;
+  },
+};
+
+module.exports = function (grids = INITIAL_GRIDS, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return grids;
+  }
+  return reducer(grids, action);
+};
diff --git a/devtools/client/inspector/grids/reducers/highlighter-settings.js b/devtools/client/inspector/grids/reducers/highlighter-settings.js
new file mode 100644
index 0000000000..3568390df6
--- /dev/null
+++ b/devtools/client/inspector/grids/reducers/highlighter-settings.js
@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  UPDATE_SHOW_GRID_AREAS,
+  UPDATE_SHOW_GRID_LINE_NUMBERS,
+  UPDATE_SHOW_INFINITE_LINES,
+} = require("resource://devtools/client/inspector/grids/actions/index.js");
+
+const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
+const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
+const SHOW_INFINITE_LINES = "devtools.gridinspector.showInfiniteLines";
+
+const INITIAL_HIGHLIGHTER_SETTINGS = () => {
+  return {
+    showGridAreasOverlay: Services.prefs.getBoolPref(SHOW_GRID_AREAS),
+    showGridLineNumbers: Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
+    showInfiniteLines: Services.prefs.getBoolPref(SHOW_INFINITE_LINES),
+  };
+};
+
+const reducers = {
+  [UPDATE_SHOW_GRID_AREAS](highlighterSettings, { enabled }) {
+    return Object.assign({}, highlighterSettings, {
+      showGridAreasOverlay: enabled,
+    });
+  },
+
+  [UPDATE_SHOW_GRID_LINE_NUMBERS](highlighterSettings, { enabled }) {
+    return Object.assign({}, highlighterSettings, {
+      showGridLineNumbers: enabled,
+    });
+  },
+
+  [UPDATE_SHOW_INFINITE_LINES](highlighterSettings, { enabled }) {
+    return Object.assign({}, highlighterSettings, {
+      showInfiniteLines: enabled,
+    });
+  },
+};
+
+module.exports = function (
+  highlighterSettings = INITIAL_HIGHLIGHTER_SETTINGS(),
+  action
+) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return highlighterSettings;
+  }
+  return reducer(highlighterSettings, action);
+};
diff --git a/devtools/client/inspector/grids/reducers/moz.build b/devtools/client/inspector/grids/reducers/moz.build
new file mode 100644
index 0000000000..768e29b542
--- /dev/null
+++ b/devtools/client/inspector/grids/reducers/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "grids.js",
+    "highlighter-settings.js",
+)
diff --git a/devtools/client/inspector/grids/test/browser.toml b/devtools/client/inspector/grids/test/browser.toml
new file mode 100644
index 0000000000..f492362d97
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser.toml
@@ -0,0 +1,86 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_iframe_reloaded.html",
+  "doc_subgrid.html",
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_grids_accordion-state.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_grids_color-in-rules-grid-toggle.js"]
+
+["browser_grids_display-setting-extend-grid-lines.js"]
+
+["browser_grids_display-setting-show-grid-areas.js"]
+
+["browser_grids_display-setting-show-grid-line-numbers.js"]
+
+["browser_grids_grid-list-color-picker-on-ESC.js"]
+
+["browser_grids_grid-list-color-picker-on-RETURN.js"]
+
+["browser_grids_grid-list-element-rep.js"]
+
+["browser_grids_grid-list-no-grids.js"]
+
+["browser_grids_grid-list-on-iframe-reloaded.js"]
+skip-if = ["verify && (os == 'win' || os == 'linux')"]
+
+["browser_grids_grid-list-on-mutation-element-added.js"]
+skip-if = ["true"] #Bug 1557326
+
+["browser_grids_grid-list-on-mutation-element-removed.js"]
+
+["browser_grids_grid-list-on-target-added-removed.js"]
+
+["browser_grids_grid-list-subgrids-z-order.js"]
+
+["browser_grids_grid-list-subgrids_01.js"]
+
+["browser_grids_grid-list-subgrids_02.js"]
+
+["browser_grids_grid-list-toggle-grids_01.js"]
+
+["browser_grids_grid-list-toggle-grids_02.js"]
+
+["browser_grids_grid-list-toggle-multiple-grids.js"]
+
+["browser_grids_grid-outline-cannot-show-outline.js"]
+
+["browser_grids_grid-outline-highlight-area.js"]
+
+["browser_grids_grid-outline-highlight-cell.js"]
+
+["browser_grids_grid-outline-multiple-grids.js"]
+
+["browser_grids_grid-outline-selected-grid.js"]
+
+["browser_grids_grid-outline-updates-on-grid-change.js"]
+skip-if = [
+  "os == 'linux'",
+  "os == 'mac'",
+  "os == 'win' && (debug || asan)", #Bug 1557181
+]
+
+["browser_grids_grid-outline-writing-mode.js"]
+skip-if = ["verify && os == 'win'"]
+
+["browser_grids_highlighter-setting-rules-grid-toggle.js"]
+
+["browser_grids_highlighter-toggle-telemetry.js"]
+
+["browser_grids_number-of-css-grids-telemetry.js"]
+
+["browser_grids_persist-color-palette.js"]
+
+["browser_grids_restored-after-reload.js"]
+
+["browser_grids_restored-multiple-grids-after-reload.js"]
diff --git a/devtools/client/inspector/grids/test/browser_grids_accordion-state.js b/devtools/client/inspector/grids/test/browser_grids_accordion-state.js
new file mode 100644
index 0000000000..c02fc85dfa
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_accordion-state.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid's accordion state is persistent through hide/show in the layout
+// view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const GRID_OPENED_PREF = "devtools.layout.grid.opened";
+const GRID_PANE_SELECTOR = "#layout-grid-section";
+const ACCORDION_HEADER_SELECTOR = ".accordion-header";
+const ACCORDION_CONTENT_SELECTOR = ".accordion-content";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector, toolbox } = await openLayoutView();
+  const { document: doc } = gridInspector;
+
+  await testAccordionStateAfterClickingHeader(doc);
+  await testAccordionStateAfterSwitchingSidebars(inspector, doc);
+  await testAccordionStateAfterReopeningLayoutView(toolbox);
+
+  Services.prefs.clearUserPref(GRID_OPENED_PREF);
+});
+
+async function testAccordionStateAfterClickingHeader(doc) {
+  const item = await waitFor(() => doc.querySelector(GRID_PANE_SELECTOR));
+  const header = item.querySelector(ACCORDION_HEADER_SELECTOR);
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  info("Checking initial state of the grid panel.");
+  ok(
+    !content.hidden && content.childElementCount > 0,
+    "The grid panel content is visible."
+  );
+  ok(
+    Services.prefs.getBoolPref(GRID_OPENED_PREF),
+    `${GRID_OPENED_PREF} is pref on by default.`
+  );
+
+  info("Clicking the grid header to hide the grid panel.");
+  header.click();
+
+  info("Checking the new state of the grid panel.");
+  ok(content.hidden, "The grid panel content is hidden.");
+  ok(
+    !Services.prefs.getBoolPref(GRID_OPENED_PREF),
+    `${GRID_OPENED_PREF} is pref off.`
+  );
+}
+
+async function testAccordionStateAfterSwitchingSidebars(inspector, doc) {
+  info(
+    "Checking the grid accordion state is persistent after switching sidebars."
+  );
+
+  info("Selecting the computed view.");
+  inspector.sidebar.select("computedview");
+
+  info("Selecting the layout view.");
+  inspector.sidebar.select("layoutview");
+
+  const item = await waitFor(() => doc.querySelector(GRID_PANE_SELECTOR));
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  info("Checking the state of the grid panel.");
+  ok(content.hidden, "The grid panel content is hidden.");
+  ok(
+    !Services.prefs.getBoolPref(GRID_OPENED_PREF),
+    `${GRID_OPENED_PREF} is pref off.`
+  );
+}
+
+async function testAccordionStateAfterReopeningLayoutView(toolbox) {
+  info(
+    "Checking the grid accordion state is persistent after closing and re-opening the " +
+      "layout view."
+  );
+
+  info("Closing the toolbox.");
+  await toolbox.destroy();
+
+  info("Re-opening the layout view.");
+  const { gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+
+  const item = await waitFor(() => doc.querySelector(GRID_PANE_SELECTOR));
+  const content = item.querySelector(ACCORDION_CONTENT_SELECTOR);
+
+  info("Checking the state of the grid panel.");
+  ok(content.hidden, "The grid panel content is hidden.");
+  ok(
+    !Services.prefs.getBoolPref(GRID_OPENED_PREF),
+    `${GRID_OPENED_PREF} is pref off.`
+  );
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js b/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
new file mode 100644
index 0000000000..a12f4f2435
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view with changes to the grid color
+// from the layout view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector, layoutView } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const spectrum = cPicker.spectrum;
+  const swatch = doc.querySelector(
+    "#layout-grid-container .layout-color-swatch"
+  );
+
+  info("Scrolling into view of the #grid color swatch.");
+  swatch.scrollIntoView();
+
+  info("Opening the color picker by clicking on the #grid color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]);
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated."
+  );
+
+  info("Pressing RETURN to commit the color change.");
+  const onGridColorUpdate = waitUntilState(
+    store,
+    state => state.grids[0].color === "#00FF0080"
+  );
+  const onColorPickerHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onColorPickerHidden;
+  await onGridColorUpdate;
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was kept after RETURN."
+  );
+
+  info("Selecting the rule view.");
+  const ruleView = selectRuleView(inspector);
+  const highlighters = ruleView.highlighters;
+
+  await selectNode("#grid", inspector);
+
+  const container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once(
+    "grid-highlighter-shown",
+    (nodeFront, options) => {
+      info("Checking the grid highlighter display settings.");
+      const {
+        color,
+        showGridAreasOverlay,
+        showGridLineNumbers,
+        showInfiniteLines,
+      } = options;
+
+      is(color, "#00FF0080", "CSS grid highlighter color is correct.");
+      ok(!showGridAreasOverlay, "Show grid areas overlay option is off.");
+      ok(!showGridLineNumbers, "Show grid line numbers option is off.");
+      ok(!showInfiniteLines, "Show infinite lines option is off.");
+    }
+  );
+  gridToggle.click();
+  await onHighlighterShown;
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js b/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js
new file mode 100644
index 0000000000..89f2bb36dd
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the 'Extend grid lines infinitely' grid highlighter setting will update
+// the redux store and pref setting.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const checkbox = doc.getElementById("grid-setting-extend-grid-lines");
+
+  ok(
+    !Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
+    "'Extend grid lines infinitely' is pref off by default."
+  );
+
+  info("Toggling ON the 'Extend grid lines infinitely' setting.");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.highlighterSettings.showInfiniteLines
+  );
+  checkbox.click();
+  await onCheckboxChange;
+
+  info("Toggling OFF the 'Extend grid lines infinitely' setting.");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => !state.highlighterSettings.showInfiniteLines
+  );
+  checkbox.click();
+  await onCheckboxChange;
+
+  ok(
+    !Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
+    "'Extend grid lines infinitely' is pref off."
+  );
+
+  Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js
new file mode 100644
index 0000000000..afc091b7ab
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the 'Display grid areas' grid highlighter setting will update
+// the redux store and pref setting.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const SHOW_GRID_AREAS_PREF = "devtools.gridinspector.showGridAreas";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const checkbox = doc.getElementById("grid-setting-show-grid-areas");
+
+  ok(
+    !Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF),
+    "'Display grid areas' is pref off by default."
+  );
+
+  info("Toggling ON the 'Display grid areas' setting.");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.highlighterSettings.showGridAreasOverlay
+  );
+  checkbox.click();
+  await onCheckboxChange;
+
+  info("Toggling OFF the 'Display grid areas' setting.");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => !state.highlighterSettings.showGridAreasOverlay
+  );
+  checkbox.click();
+  await onCheckboxChange;
+
+  ok(
+    !Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF),
+    "'Display grid areas' is pref off."
+  );
+
+  Services.prefs.clearUserPref(SHOW_GRID_AREAS_PREF);
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js
new file mode 100644
index 0000000000..3dee2533cd
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the 'Display numbers on lines' grid highlighter setting will update
+// the redux store and pref setting.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const checkbox = doc.getElementById("grid-setting-show-grid-line-numbers");
+
+  info("Checking the initial state of the CSS grid highlighter setting.");
+  ok(
+    !Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
+    "'Display numbers on lines' is pref off by default."
+  );
+
+  info("Toggling ON the 'Display numbers on lines' setting.");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.highlighterSettings.showGridLineNumbers
+  );
+  checkbox.click();
+  await onCheckboxChange;
+
+  ok(
+    Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
+    "'Display numbers on lines' is pref on."
+  );
+
+  info("Toggling OFF the 'Display numbers on lines' setting.");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => !state.highlighterSettings.showGridLineNumbers
+  );
+  checkbox.click();
+  await onCheckboxChange;
+
+  ok(
+    !Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
+    "'Display numbers on lines' is pref off."
+  );
+
+  Services.prefs.clearUserPref(SHOW_GRID_LINE_NUMBERS);
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
new file mode 100644
index 0000000000..661c65c6e0
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid item's color change in the colorpicker is reverted when ESCAPE is
+// pressed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector, layoutView } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const spectrum = cPicker.spectrum;
+  const swatch = doc.querySelector(
+    "#layout-grid-container .layout-color-swatch"
+  );
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(
+    swatch.style.backgroundColor,
+    "rgb(148, 0, 255)",
+    "The color swatch's background is correct."
+  );
+  is(
+    store.getState().grids[0].color,
+    "#9400FF",
+    "The grid color state is correct."
+  );
+
+  info("Scrolling into view of the #grid color swatch.");
+  swatch.scrollIntoView();
+
+  info("Opening the color picker by clicking on the #grid color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]);
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated."
+  );
+
+  info("Pressing ESCAPE to close the tooltip.");
+  const onGridColorUpdate = waitUntilState(
+    store,
+    state => state.grids[0].color === "#9400FF"
+  );
+  const onColorPickerHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "ESCAPE");
+  await onColorPickerHidden;
+  await onGridColorUpdate;
+
+  is(
+    swatch.style.backgroundColor,
+    "rgb(148, 0, 255)",
+    "The color swatch's background was reverted after ESCAPE."
+  );
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
new file mode 100644
index 0000000000..9e23d68166
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
@@ -0,0 +1,94 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid item's color change in the colorpicker is committed when RETURN is
+// pressed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector, layoutView } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const spectrum = cPicker.spectrum;
+  const swatch = doc.querySelector(
+    "#layout-grid-container .layout-color-swatch"
+  );
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(
+    swatch.style.backgroundColor,
+    "rgb(148, 0, 255)",
+    "The color swatch's background is correct."
+  );
+  is(
+    store.getState().grids[0].color,
+    "#9400FF",
+    "The grid color state is correct."
+  );
+
+  info("Scrolling into view of the #grid color swatch.");
+  swatch.scrollIntoView();
+
+  info("Opening the color picker by clicking on the #grid color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]);
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated."
+  );
+
+  info("Pressing RETURN to commit the color change.");
+  const EXPECTED_HEX_COLOR = "#00FF0080";
+  const onGridColorUpdate = waitUntilState(
+    store,
+    state => state.grids[0].color === EXPECTED_HEX_COLOR
+  );
+  const onColorPickerHidden = cPicker.tooltip.once("hidden");
+  const onHighlighterShown = highlighters.once("highlighter-shown");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onColorPickerHidden;
+  await onGridColorUpdate;
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was kept after RETURN."
+  );
+
+  info("Wait for a bit to ensure the highlighter wasn't shown");
+  const raceResult = await Promise.race([
+    onHighlighterShown.then(() => "HIGHLIGHTED"),
+    wait(1000).then(() => "TIMEOUT"),
+  ]);
+  is(raceResult, "TIMEOUT", "Highlighter wasn't shown");
+
+  info("Check that highlighter does show with the expected color");
+  doc.querySelector("#grid-list input[type=checkbox]").click();
+  const { options } = await onHighlighterShown;
+
+  is(
+    options.color,
+    EXPECTED_HEX_COLOR,
+    "Highlighter was displayed with the right color"
+  );
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js
new file mode 100644
index 0000000000..a1fba8d5e4
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid item's element rep will display the box model higlighter on hover
+// and select the node on click.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  const gridList = doc.querySelector("#grid-list");
+  const elementRep = gridList.children[0].querySelector(".open-inspector");
+  info("Scrolling into the view the #grid element node rep.");
+  elementRep.scrollIntoView();
+
+  info("Listen to node-highlight event and mouse over the widget");
+  const onHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  EventUtils.synthesizeMouse(
+    elementRep,
+    10,
+    5,
+    { type: "mouseover" },
+    doc.defaultView
+  );
+  const { nodeFront } = await onHighlight;
+
+  ok(nodeFront, "nodeFront was returned from highlighting the node.");
+  is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName.");
+  is(
+    nodeFront.attributes[0].name,
+    "id",
+    "The highlighted node has the correct attributes."
+  );
+  is(
+    nodeFront.attributes[0].value,
+    "grid",
+    "The highlighted node has the correct id."
+  );
+
+  const onSelection = inspector.selection.once("new-node-front");
+  EventUtils.sendMouseEvent({ type: "click" }, elementRep, doc.defaultView);
+  await onSelection;
+
+  is(
+    inspector.selection.nodeFront,
+    store.getState().grids[0].nodeFront,
+    "The selected node is the one stored on the grid item's state."
+  );
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js
new file mode 100644
index 0000000000..ce9cbc7866
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that no grid list items and a "no grids available" message is displayed when
+// there are no grid containers on the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters } = inspector;
+
+  await selectNode("#grid", inspector);
+  const noGridList = doc.querySelector(
+    "#layout-grid-section .devtools-sidepanel-no-result"
+  );
+  const gridList = doc.getElementById("grid-list");
+
+  info("Checking the initial state of the Grid Inspector.");
+  ok(noGridList, "The message no grid containers is displayed.");
+  ok(!gridList, "No grid containers are listed.");
+  ok(
+    !highlighters.gridHighlighters.size,
+    "No CSS grid highlighter exists in the highlighters overlay."
+  );
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js
new file mode 100644
index 0000000000..b5871414f8
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the list of grids does refresh when an iframe containing a grid is removed
+// and re-created.
+// See bug 1378306 where this happened with jsfiddle.
+
+const TEST_URI = URL_ROOT + "doc_iframe_reloaded.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Clicking on the first checkbox to highlight the grid");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  ok(checkbox.checked, "The checkbox is checked");
+  is(gridList.childNodes.length, 1, "There's one grid in the list");
+  is(highlighters.gridHighlighters.size, 1, "There's a highlighter shown");
+  is(
+    highlighters.state.grids.size,
+    1,
+    "There's a saved grid state to be restored."
+  );
+
+  info("Reload the iframe in content and expect the grid list to update");
+  const oldGrid = store.getState().grids[0];
+  const onNewListUnchecked = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 1 &&
+      state.grids[0].actorID !== oldGrid.actorID &&
+      !state.grids[0].highlighted
+  );
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.wrappedJSObject.reloadIFrame()
+  );
+  await onNewListUnchecked;
+  await onHighlighterHidden;
+
+  is(gridList.childNodes.length, 1, "There's still one grid in the list");
+  ok(!highlighters.state.grids.size, "No grids to be restored on page reload.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js
new file mode 100644
index 0000000000..e197f03b02
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid list updates when a new grid container is added to the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 1);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox1 = gridList.children[0].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(gridList.childNodes.length, 1, "One grid container is listed.");
+  ok(
+    !highlighters.gridHighlighters.size,
+    "No CSS grid highlighter exists in the highlighters overlay."
+  );
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  checkbox1.click();
+  await onHighlighterShown;
+
+  info("Checking the CSS grid highlighter is created.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Adding the #grid2 container in the content page.");
+  const onGridListUpdate = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 2 &&
+      state.grids[0].highlighted &&
+      !state.grids[1].highlighted
+  );
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.getElementById("grid2").classList.add("grid")
+  );
+  await onGridListUpdate;
+
+  info("Checking the new Grid Inspector state.");
+  is(gridList.childNodes.length, 2, "Two grid containers are listed.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  const checkbox2 = gridList.children[1].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter for #grid2.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 2 &&
+      !state.grids[0].highlighted &&
+      state.grids[1].highlighted
+  );
+  checkbox2.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is still shown.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the layout panel.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 2 &&
+      !state.grids[0].highlighted &&
+      !state.grids[1].highlighted
+  );
+  checkbox2.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is not shown.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js
new file mode 100644
index 0000000000..7a60759071
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid item is removed from the grid list when the grid container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(gridList.childNodes.length, 1, "One grid container is listed.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is created.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Removing the #grid container in the content page.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(store, state => !state.grids.length);
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.getElementById("grid").remove()
+  );
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is not shown.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+  const noGridList = doc.querySelector(
+    "#layout-grid-section .devtools-sidepanel-no-result"
+  );
+  ok(noGridList, "The message no grid containers is displayed.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js
new file mode 100644
index 0000000000..051fc14e53
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js
@@ -0,0 +1,203 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the list of grids does refresh when targets are added or removed (e.g. when
+// there's a navigation and iframe are added or removed)
+
+add_task(async function () {
+  await addTab(getDocumentBuilderUrl("example.com", "top-level-com-grid"));
+  const { gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+
+  const checkGridList = (expected, assertionMessage) =>
+    checkGridListItems(doc, expected, assertionMessage);
+
+  checkGridList(
+    ["div#top-level-com-grid"],
+    "One grid item is displayed at first"
+  );
+
+  info(
+    "Check that adding same-origin iframe with a grid will update the grid list"
+  );
+  const sameOriginIframeBrowsingContext = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [getDocumentBuilderUrl("example.com", "iframe-com-grid")],
+    src => {
+      const iframe = content.document.createElement("iframe");
+      iframe.id = "same-origin";
+      iframe.src = src;
+      content.document.body.append(iframe);
+      return iframe.browsingContext;
+    }
+  );
+
+  await waitFor(() => getGridListItems(doc).length == 2);
+  checkGridList(
+    ["div#top-level-com-grid", "div#iframe-com-grid"],
+    "The same-origin iframe grid is displayed"
+  );
+
+  info("Check that adding remote iframe with a grid will update the grid list");
+  const remoteIframeBrowsingContext = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [getDocumentBuilderUrl("example.org", "iframe-org-grid")],
+    src => {
+      const iframe = content.document.createElement("iframe");
+      iframe.id = "remote";
+      iframe.src = src;
+      content.document.body.append(iframe);
+      return iframe.browsingContext;
+    }
+  );
+
+  await waitFor(() => getGridListItems(doc).length == 3);
+  checkGridList(
+    ["div#top-level-com-grid", "div#iframe-com-grid", "div#iframe-org-grid"],
+    "The remote iframe grid is displayed"
+  );
+
+  info("Check that adding new grids in iframes does update the grid list");
+  SpecialPowers.spawn(sameOriginIframeBrowsingContext, [], () => {
+    const section = content.document.createElement("section");
+    section.id = "com-added-grid-container";
+    section.style = "display: grid;";
+    content.document.body.append(section);
+  });
+
+  await waitFor(() => getGridListItems(doc).length == 4);
+  checkGridList(
+    [
+      "div#top-level-com-grid",
+      "div#iframe-com-grid",
+      "section#com-added-grid-container",
+      "div#iframe-org-grid",
+    ],
+    "The new grid in the same origin iframe is displayed"
+  );
+
+  SpecialPowers.spawn(remoteIframeBrowsingContext, [], () => {
+    const section = content.document.createElement("section");
+    section.id = "org-added-grid-container";
+    section.style = "display: grid;";
+    content.document.body.append(section);
+  });
+
+  await waitFor(() => getGridListItems(doc).length == 5);
+  checkGridList(
+    [
+      "div#top-level-com-grid",
+      "div#iframe-com-grid",
+      "section#com-added-grid-container",
+      "div#iframe-org-grid",
+      "section#org-added-grid-container",
+    ],
+    "The new grid in the same origin iframe is displayed"
+  );
+
+  info("Check that removing iframes will update the grid list");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.document.querySelector("iframe#same-origin").remove();
+  });
+
+  await waitFor(() => getGridListItems(doc).length == 3);
+  checkGridList(
+    [
+      "div#top-level-com-grid",
+      "div#iframe-org-grid",
+      "section#org-added-grid-container",
+    ],
+    "The same-origin iframe grids were removed from the list"
+  );
+
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.document.querySelector("iframe#remote").remove();
+  });
+
+  await waitFor(() => getGridListItems(doc).length == 1);
+  checkGridList(
+    ["div#top-level-com-grid"],
+    "The remote iframe grids were removed as well"
+  );
+
+  info("Navigate to a new origin");
+  await navigateTo(getDocumentBuilderUrl("example.org", "top-level-org-grid"));
+  await waitFor(() => {
+    const listItems = getGridListItems(doc);
+    return (
+      listItems.length == 1 &&
+      listItems[0].textContent.includes("#top-level-org-grid")
+    );
+  });
+  checkGridList(
+    ["div#top-level-org-grid"],
+    "The grid from the new origin document is displayed"
+  );
+
+  info("Check that adding remote iframe will still update the grid list");
+  SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [getDocumentBuilderUrl("example.com", "iframe-com-grid-remote")],
+    src => {
+      const iframe = content.document.createElement("iframe");
+      iframe.id = "remote";
+      iframe.src = src;
+      content.document.body.append(iframe);
+    }
+  );
+
+  await waitFor(() => getGridListItems(doc).length == 2);
+  checkGridList(
+    ["div#top-level-org-grid", "div#iframe-com-grid-remote"],
+    "The grid from the new origin document is displayed"
+  );
+
+  info(
+    "Check that adding same-origin iframe with a grid will update the grid list"
+  );
+  SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [getDocumentBuilderUrl("example.org", "iframe-org-grid-same-origin")],
+    src => {
+      const iframe = content.document.createElement("iframe");
+      iframe.id = "same-origin";
+      iframe.src = src;
+      content.document.body.append(iframe);
+    }
+  );
+  await waitFor(() => getGridListItems(doc).length == 3);
+  checkGridList(
+    [
+      "div#top-level-org-grid",
+      "div#iframe-com-grid-remote",
+      "div#iframe-org-grid-same-origin",
+    ],
+    "The grid from the new same-origin iframe is displayed"
+  );
+});
+
+function getDocumentBuilderUrl(origin, gridContainerId) {
+  return `https://${origin}/document-builder.sjs?html=${encodeURIComponent(
+    `<style>
+      #${gridContainerId} {
+        display: grid;
+      }
+    </style>
+    <div id="${gridContainerId}"></div>`
+  )}`;
+}
+
+function getGridListItems(doc) {
+  return Array.from(doc.querySelectorAll("#grid-list .objectBox-node"));
+}
+
+function checkGridListItems(doc, expectedItems, assertionText) {
+  const gridItems = getGridListItems(doc).map(el => el.textContent);
+  is(
+    JSON.stringify(gridItems.sort()),
+    JSON.stringify(expectedItems.sort()),
+    assertionText
+  );
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js
new file mode 100644
index 0000000000..da1b11f4c8
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the z order of grids.
+
+const TEST_URI = URL_ROOT + "doc_subgrid.html";
+
+add_task(async () => {
+  await addTab(TEST_URI);
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  await waitUntilState(store, state => state.grids.length === 5);
+
+  const parentEl = doc.getElementById("grid-list");
+  // Input for .container
+  const parentInput = parentEl.children[0].querySelector("input");
+  const subgridEl = parentEl.children[1];
+  // Input for <main>
+  const subgridInput = subgridEl.children[1].querySelector("input");
+  const grandSubgridEl = subgridEl.children[2];
+  // Input for .aside1
+  const grandSubgridInput = grandSubgridEl.children[0].querySelector("input");
+
+  info(
+    "Toggling ON the CSS grid highlighters for .container, <main> and .aside1"
+  );
+  const grandSubgridFront = await toggle(grandSubgridInput, highlighters);
+  const subgridFront = await toggle(subgridInput, highlighters);
+  let parentFront = await toggle(parentInput, highlighters);
+  await waitUntilState(
+    store,
+    state => state.grids.filter(g => g.highlighted).length === 3
+  );
+
+  info("Check z-index of grid highlighting");
+  is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0");
+  is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
+  is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
+
+  info("Toggling OFF the CSS grid highlighters for .container");
+  await toggle(parentInput, highlighters);
+  await waitUntilState(
+    store,
+    state => state.grids.filter(g => g.highlighted).length === 2
+  );
+
+  info("Check z-index keeps even if the parent grid is hidden");
+  is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
+  is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
+
+  info("Toggling ON again the CSS grid highlighters for .container");
+  parentFront = await toggle(parentInput, highlighters);
+  await waitUntilState(
+    store,
+    state => state.grids.filter(g => g.highlighted).length === 3
+  );
+
+  info("Check z-index of all of grids highlighting keeps");
+  is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0");
+  is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
+  is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
+});
+
+function getZIndex(store, nodeFront) {
+  const grids = store.getState().grids;
+  const gridData = grids.find(g => g.nodeFront === nodeFront);
+  return gridData.zIndex;
+}
+
+async function toggle(input, highlighters) {
+  const eventName = input.checked
+    ? "grid-highlighter-hidden"
+    : "grid-highlighter-shown";
+  const onHighlighterEvent = highlighters.once(eventName);
+  input.click();
+  const nodeFront = await onHighlighterEvent;
+  return nodeFront;
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js
new file mode 100644
index 0000000000..bcb0faeef8
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js
@@ -0,0 +1,138 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the list of grids show the subgrids in the correct nested list and toggling
+// the CSS grid highlighter for a subgrid.
+
+const TEST_URI = URL_ROOT + "doc_subgrid.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode(".container", inspector);
+  const gridListEl = doc.getElementById("grid-list");
+  const containerSubgridListEl = gridListEl.children[1];
+  const mainSubgridListEl = containerSubgridListEl.querySelector("ul");
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(
+    getGridItemElements(gridListEl).length,
+    1,
+    "One grid container is listed."
+  );
+  is(
+    getGridItemElements(containerSubgridListEl).length,
+    2,
+    "Got the correct number of subgrids in div.container"
+  );
+  is(
+    getGridItemElements(mainSubgridListEl).length,
+    2,
+    "Got the correct number of subgrids in main.subgrid"
+  );
+  ok(
+    !highlighters.gridHighlighters.size &&
+      !highlighters.parentGridHighlighters.size,
+    "No CSS grid highlighter is shown."
+  );
+
+  info("Toggling ON the CSS grid highlighter for header.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids[1].highlighted
+  );
+  let checkbox = containerSubgridListEl.children[0].querySelector("input");
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info(
+    "Checking the CSS grid highlighter and parent grid highlighter are created."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+  is(
+    highlighters.parentGridHighlighters.size,
+    1,
+    "CSS grid highlighter for parent grid container is shown."
+  );
+
+  info("Toggling ON the CSS grid highlighter for main.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids[1].highlighted && state.grids[2].highlighted
+  );
+  checkbox = containerSubgridListEl.children[1].querySelector("input");
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the number of CSS grid highlighters present.");
+  is(
+    highlighters.gridHighlighters.size,
+    2,
+    "Got the correct number of CSS grid highlighter shown."
+  );
+  is(
+    highlighters.parentGridHighlighters.size,
+    1,
+    "Only 1 parent grid highlighter should be shown for the same subgrid parent."
+  );
+
+  info("Toggling OFF the CSS grid highlighter for main.");
+  let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids[1].highlighted && !state.grids[2].highlighted
+  );
+  checkbox.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info("Checking the number of CSS grid highlighters present.");
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "Got the correct number of CSS grid highlighter shown."
+  );
+  is(
+    highlighters.parentGridHighlighters.size,
+    1,
+    "Got the correct number of CSS grid parent highlighter shown."
+  );
+
+  info("Toggling OFF the CSS grid highlighter for header.");
+  onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => !state.grids[1].highlighted
+  );
+  checkbox = containerSubgridListEl.children[0].querySelector("input");
+  checkbox.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is not shown.");
+  ok(
+    !highlighters.gridHighlighters.size &&
+      !highlighters.parentGridHighlighters.size,
+    "No CSS grid highlighter is shown."
+  );
+});
+
+/**
+ * Returns the grid item elements <li> from the grid list element <ul>.
+ *
+ * @param  {Element} gridListEl
+ *         The grid list element <ul>.
+ * @return {Array<Element>} containing the grid item elements <li>.
+ */
+function getGridItemElements(gridListEl) {
+  return [...gridListEl.children].filter(node => node.nodeName === "li");
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js
new file mode 100644
index 0000000000..83f07e339a
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the state of grid highlighters after toggling the checkbox of subgrids.
+
+const TEST_URI = URL_ROOT + "doc_subgrid.html";
+
+add_task(async () => {
+  await addTab(TEST_URI);
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode(".container", inspector);
+  const parentEl = doc.getElementById("grid-list");
+  // Input for .container
+  const parentInput = parentEl.children[0].querySelector("input");
+  const subgridEl = parentEl.children[1];
+  // Input for <main>
+  const subgridInput = subgridEl.children[1].querySelector("input");
+  const grandSubgridEl = subgridEl.children[2];
+  // Input for .aside1
+  const grandSubgridInput = grandSubgridEl.children[0].querySelector("input");
+
+  info(
+    "Toggling ON the CSS grid highlighters for .container, <main> and .aside1"
+  );
+  await toggleHighlighter(parentInput, highlighters);
+  await toggleHighlighter(subgridInput, highlighters);
+  await toggleHighlighter(grandSubgridInput, highlighters);
+  await waitUntilState(
+    store,
+    state => state.grids.filter(g => g.highlighted).length === 3
+  );
+
+  info("Check the state of highlighters");
+  is(
+    highlighters.gridHighlighters.size,
+    3,
+    "All highlighters are use as normal highlighter"
+  );
+
+  info("Toggling OFF the CSS grid highlighter for <main>");
+  await toggleHighlighter(subgridInput, highlighters);
+  await waitUntilState(
+    store,
+    state => state.grids.filter(g => g.highlighted).length === 2
+  );
+
+  info("Check the state of highlighters after hiding subgrid for <main>");
+  is(
+    highlighters.gridHighlighters.size,
+    2,
+    "2 highlighters are use as normal highlighter"
+  );
+  is(
+    highlighters.parentGridHighlighters.size,
+    1,
+    "The highlighter for <main> is used as parent highlighter"
+  );
+});
+
+async function toggleHighlighter(input, highlighters) {
+  const eventName = input.checked
+    ? "grid-highlighter-hidden"
+    : "grid-highlighter-shown";
+  const onHighlighterEvent = highlighters.once(eventName);
+  input.click();
+  await onHighlighterEvent;
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_01.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_01.js
new file mode 100644
index 0000000000..f66e70042c
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_01.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests toggling ON/OFF the grid highlighter from the grid ispector panel.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(gridList.childNodes.length, 1, "One grid container is listed.");
+  ok(
+    !checkbox.checked,
+    `Grid item ${checkbox.value} is unchecked in the grid list.`
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is created.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the layout panel.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && !state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is not shown.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_02.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_02.js
new file mode 100644
index 0000000000..82f3d9bef4
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_02.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the grid inspector panel with multiple grids in
+// the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 1);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid1", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox1 = gridList.children[0].querySelector("input");
+  const checkbox2 = gridList.children[1].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(gridList.childNodes.length, 2, "2 grid containers are listed.");
+  ok(
+    !checkbox1.checked,
+    `Grid item ${checkbox1.value} is unchecked in the grid list.`
+  );
+  ok(
+    !checkbox2.checked,
+    `Grid item ${checkbox2.value} is unchecked in the grid list.`
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid1.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 2 &&
+      state.grids[0].highlighted &&
+      !state.grids[1].highlighted
+  );
+  checkbox1.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is created.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid2.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 2 &&
+      !state.grids[0].highlighted &&
+      state.grids[1].highlighted
+  );
+  checkbox2.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is still shown.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the layout panel.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 2 &&
+      !state.grids[0].highlighted &&
+      !state.grids[1].highlighted
+  );
+  checkbox2.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is not shown.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js
new file mode 100644
index 0000000000..857ff75912
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js
@@ -0,0 +1,243 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling multiple grid highlighters in the grid inspector panel.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid3" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid4" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 3);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid1", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox1 = gridList.children[0].querySelector("input");
+  const checkbox2 = gridList.children[1].querySelector("input");
+  const checkbox3 = gridList.children[2].querySelector("input");
+  const checkbox4 = gridList.children[3].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(gridList.childNodes.length, 4, "4 grid containers are listed.");
+  ok(
+    !checkbox1.checked,
+    `Grid item ${checkbox1.value} is unchecked in the grid list.`
+  );
+  ok(
+    !checkbox2.checked,
+    `Grid item ${checkbox2.value} is unchecked in the grid list.`
+  );
+  ok(
+    !checkbox3.checked,
+    `Grid item ${checkbox3.value} is unchecked in the grid list.`
+  );
+  ok(
+    !checkbox4.checked,
+    `Grid item ${checkbox4.value} is unchecked in the grid list.`
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid1.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      !state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      !state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      !state.grids[3].disabled
+  );
+  checkbox1.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info(
+    "Check that the CSS grid highlighter is created and the saved grid state."
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "Got expected number of grid highlighters shown."
+  );
+  is(
+    highlighters.state.grids.size,
+    1,
+    "Got expected number of grids in the saved state"
+  );
+
+  info("Toggling ON the CSS grid highlighter for #grid2.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      !state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      !state.grids[3].disabled
+  );
+  checkbox2.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  is(
+    highlighters.gridHighlighters.size,
+    2,
+    "Got expected number of grid highlighters shown."
+  );
+  is(
+    highlighters.state.grids.size,
+    2,
+    "Got expected number of grids in the saved state"
+  );
+
+  info("Toggling ON the CSS grid highlighter for #grid3.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      state.grids[3].disabled
+  );
+  checkbox3.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  is(
+    highlighters.gridHighlighters.size,
+    3,
+    "Got expected number of grid highlighters shown."
+  );
+  is(
+    highlighters.state.grids.size,
+    3,
+    "Got expected number of grids in the saved state"
+  );
+
+  info("Toggling OFF the CSS grid highlighter for #grid3.");
+  let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      !state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      !state.grids[3].disabled
+  );
+  checkbox3.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  is(
+    highlighters.gridHighlighters.size,
+    2,
+    "Got expected number of grid highlighters shown."
+  );
+  is(
+    highlighters.state.grids.size,
+    2,
+    "Got expected number of grids in the saved state"
+  );
+
+  info("Toggling OFF the CSS grid highlighter for #grid2.");
+  onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      !state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      !state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      !state.grids[3].disabled
+  );
+  checkbox2.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "Got expected number of grid highlighters shown."
+  );
+  is(
+    highlighters.state.grids.size,
+    1,
+    "Got expected number of grids in the saved state"
+  );
+
+  info("Toggling OFF the CSS grid highlighter for #grid1.");
+  onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      !state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      !state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      !state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      !state.grids[3].disabled
+  );
+  checkbox1.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info(
+    "Check that the CSS grid highlighter is not shown and the saved grid state."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+  ok(!highlighters.state.grids.size, "No grids in the saved state");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js
new file mode 100644
index 0000000000..a2f293c44d
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that grid outline does not show when cells are too small to be drawn and that
+// "Cannot show outline for this grid." message is displayed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+      grid-template-columns: repeat(51, 20px);
+      grid-template-rows: repeat(51, 20px);
+    }
+  </style>
+  <div id="grid">
+    <div id="cellA">cell A</div>
+    <div id="cellB">cell B</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const outline = doc.getElementById("grid-outline-container");
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onGridOutlineRendered = waitForDOM(doc, ".grid-outline-text", 1);
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+  const elements = await onGridOutlineRendered;
+
+  const cannotShowGridOutline = elements[0];
+
+  info(
+    "Checking the grid outline is not rendered and an appropriate message is shown."
+  );
+  ok(!outline, "Outline component is not shown.");
+  ok(
+    cannotShowGridOutline,
+    "The message 'Cannot show outline for this grid' is displayed."
+  );
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js
new file mode 100644
index 0000000000..7a93e561cc
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid area and cell are highlighted when hovering over a grid area in the
+// grid outline.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+      grid-template-areas:
+        "header"
+        "footer";
+    }
+    .top {
+      grid-area: header;
+    }
+    .bottom {
+      grid-area: footer;
+    }
+  </style>
+  <div id="grid">
+    <div id="cella" className="top">Cell A</div>
+    <div id="cellb" className="bottom">Cell B</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2);
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+
+  info("Wait for checkbox to change");
+  await onCheckboxChange;
+
+  info("Wait for highlighter to be shown");
+  await onHighlighterShown;
+
+  info("Wait for outline to be rendered");
+  await onGridOutlineRendered;
+
+  info("Hovering over grid cell A in the grid outline.");
+  const onCellAHighlight = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+
+  synthesizeMouseOverOnGridCell(doc, 0);
+
+  const { options } = await onCellAHighlight;
+
+  info(
+    "Checking the grid highlighter options for the show grid area and cell parameters."
+  );
+  const { showGridCell, showGridArea } = options;
+  const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell;
+
+  is(gridFragmentIndex, "0", "Should be the first grid fragment index.");
+  is(rowNumber, "1", "Should be the first grid row.");
+  is(columnNumber, "1", "Should be the first grid column.");
+  is(showGridArea, "header", "Grid area name should be 'header'.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js
new file mode 100644
index 0000000000..0f5f329f9b
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid cell is highlighted when hovering over the grid outline of a
+// grid cell.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2);
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+
+  info("Wait for checkbox to change");
+  await onCheckboxChange;
+
+  info("Wait for highlighter to be shown");
+  await onHighlighterShown;
+
+  info("Wait for outline to be rendered");
+  await onGridOutlineRendered;
+
+  info("Hovering over grid cell A in the grid outline.");
+  const onCellAHighlight = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+
+  synthesizeMouseOverOnGridCell(doc, 0);
+
+  const { options } = await onCellAHighlight;
+
+  info("Checking show grid cell options are correct.");
+  const { showGridCell } = options;
+  const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell;
+
+  is(gridFragmentIndex, "0", "Should be the first grid fragment index.");
+  is(rowNumber, "1", "Should be the first grid row.");
+  is(columnNumber, "1", "Should be the first grid column.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-multiple-grids.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-multiple-grids.js
new file mode 100644
index 0000000000..a65cfd7528
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-multiple-grids.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid outline is not shown when more than one grid is highlighted.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 2);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid1", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox1 = gridList.children[0].querySelector("input");
+  const checkbox2 = gridList.children[1].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter for #grid1.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2);
+  let onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length === 2 &&
+      state.grids[0].highlighted &&
+      !state.grids[1].highlighted
+  );
+  checkbox1.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+  const elements = await onGridOutlineRendered;
+
+  info("Checking the grid outline for #grid1 is shown.");
+  ok(
+    doc.getElementById("grid-outline-container"),
+    "Grid outline container is rendered."
+  );
+  is(elements.length, 2, "Grid outline is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid2.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length === 2 &&
+      state.grids[0].highlighted &&
+      state.grids[1].highlighted
+  );
+  checkbox2.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the grid outline is not shown.");
+  ok(
+    !doc.getElementById("grid-outline-container"),
+    "Grid outline is not rendered."
+  );
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js
new file mode 100644
index 0000000000..ada2a635e4
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid outline is shown when a grid container is selected.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+    <div id="cellc">Cell C</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  ok(
+    !doc.getElementById("grid-outline-container"),
+    "There should be no grid outline shown."
+  );
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 3);
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+  const elements = await onGridOutlineRendered;
+
+  info("Checking the grid outline is shown.");
+  is(elements.length, 3, "Grid outline is shown.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
new file mode 100644
index 0000000000..778217cc40
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid outline does reflect the grid in the page even after the grid has
+// changed.
+
+const TEST_URI = `
+  <style>
+  .container {
+    display: grid;
+    grid-template-columns: repeat(2, 20vw);
+    grid-auto-rows: 20px;
+  }
+  </style>
+  <div class="container">
+    <div>item 1</div>
+    <div>item 2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  info("Clicking on the first checkbox to highlight the grid");
+  const checkbox = doc.querySelector("#grid-list input");
+
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  const onGridOutlineRendered = waitForDOM(doc, ".grid-outline-cell", 2);
+
+  checkbox.click();
+
+  await onHighlighterShown;
+  await onCheckboxChange;
+  let elements = await onGridOutlineRendered;
+
+  info("Checking the grid outline is shown.");
+  is(elements.length, 2, "Grid outline is shown.");
+
+  info("Changing the grid in the page");
+  const onReflow = inspector.once("reflow-in-selected-target");
+  const onGridOutlineChanged = waitForDOM(doc, ".grid-outline-cell", 4);
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const div = content.document.createElement("div");
+    div.textContent = "item 3";
+    content.document.querySelector(".container").appendChild(div);
+  });
+
+  await onReflow;
+  elements = await onGridOutlineChanged;
+
+  info("Checking the grid outline is correct.");
+  is(elements.length, 4, "Grid outline was changed.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-writing-mode.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-writing-mode.js
new file mode 100644
index 0000000000..c27a8b481f
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-writing-mode.js
@@ -0,0 +1,156 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid outline adjusts to match the container's writing mode.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+      width: 400px;
+      height: 300px;
+    }
+    .rtl {
+      direction: rtl;
+    }
+    .v-rl {
+      writing-mode: vertical-rl;
+    }
+    .v-lr {
+      writing-mode: vertical-lr;
+    }
+    .s-rl {
+      writing-mode: sideways-rl;
+    }
+    .s-lr {
+      writing-mode: sideways-lr;
+    }
+  </style>
+  <div class="grid">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+    <div id="cellc">Cell C</div>
+  </div>
+  <div class="grid rtl">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+    <div id="cellc">Cell C</div>
+  </div>
+  <div class="grid v-rl">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+    <div id="cellc">Cell C</div>
+  </div>
+  <div class="grid v-lr">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+    <div id="cellc">Cell C</div>
+  </div>
+  <div class="grid s-rl">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+    <div id="cellc">Cell C</div>
+  </div>
+  <div class="grid s-lr">
+    <div id="cella">Cell A</div>
+    <div id="cellb">Cell B</div>
+    <div id="cellc">Cell C</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 1);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  info("Checking the initial state of the Grid Inspector.");
+  ok(
+    !doc.getElementById("grid-outline-container"),
+    "There should be no grid outline shown."
+  );
+
+  let elements;
+
+  elements = await enableGrid(doc, highlighters, store, 0);
+  is(
+    elements[0].style.transform,
+    "matrix(1, 0, 0, 1, 0, 0)",
+    "Transform matches for horizontal-tb and ltr."
+  );
+  await disableGrid(doc, highlighters, store, 0);
+
+  elements = await enableGrid(doc, highlighters, store, 1);
+  is(
+    elements[0].style.transform,
+    "matrix(-1, 0, 0, 1, 200, 0)",
+    "Transform matches for horizontal-tb and rtl"
+  );
+  await disableGrid(doc, highlighters, store, 1);
+
+  elements = await enableGrid(doc, highlighters, store, 2);
+  is(
+    elements[0].style.transform,
+    "matrix(6.12323e-17, 1, -1, 6.12323e-17, 200, 0)",
+    "Transform matches for vertical-rl and ltr"
+  );
+  await disableGrid(doc, highlighters, store, 2);
+
+  elements = await enableGrid(doc, highlighters, store, 3);
+  is(
+    elements[0].style.transform,
+    "matrix(-6.12323e-17, 1, 1, 6.12323e-17, 0, 0)",
+    "Transform matches for vertical-lr and ltr"
+  );
+  await disableGrid(doc, highlighters, store, 3);
+
+  elements = await enableGrid(doc, highlighters, store, 4);
+  is(
+    elements[0].style.transform,
+    "matrix(6.12323e-17, 1, -1, 6.12323e-17, 200, 0)",
+    "Transform matches for sideways-rl and ltr"
+  );
+  await disableGrid(doc, highlighters, store, 4);
+
+  elements = await enableGrid(doc, highlighters, store, 5);
+  is(
+    elements[0].style.transform,
+    "matrix(6.12323e-17, -1, 1, 6.12323e-17, -9.18485e-15, 150)",
+    "Transform matches for sideways-lr and ltr"
+  );
+  await disableGrid(doc, highlighters, store, 5);
+});
+
+async function enableGrid(doc, highlighters, store, index) {
+  info(`Enabling the CSS grid highlighter for grid ${index}.`);
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 6 && state.grids[index].highlighted
+  );
+  const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group");
+  const gridList = doc.getElementById("grid-list");
+  gridList.children[index].querySelector("input").click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+  return onGridOutlineRendered;
+}
+
+async function disableGrid(doc, highlighters, store, index) {
+  info(`Disabling the CSS grid highlighter for grid ${index}.`);
+  const onHighlighterShown = highlighters.once("grid-highlighter-hidden");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 6 && !state.grids[index].highlighted
+  );
+  const onGridOutlineRemoved = waitForDOM(doc, "#grid-cell-group", 0);
+  const gridList = doc.getElementById("grid-list");
+  gridList.children[index].querySelector("input").click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+  return onGridOutlineRemoved;
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js b/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js
new file mode 100644
index 0000000000..c2c22b8b87
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view with changes in the grid
+// display setting from the layout view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+
+  const checkbox = doc.getElementById("grid-setting-extend-grid-lines");
+
+  ok(
+    !Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
+    "'Extend grid lines infinitely' is pref off by default."
+  );
+
+  info("Toggling ON the 'Extend grid lines infinitely' setting.");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.highlighterSettings.showInfiniteLines
+  );
+  checkbox.click();
+  await onCheckboxChange;
+
+  info("Selecting the rule view.");
+  const ruleView = selectRuleView(inspector);
+  const highlighters = ruleView.highlighters;
+
+  await selectNode("#grid", inspector);
+
+  const container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once(
+    "grid-highlighter-shown",
+    (nodeFront, options) => {
+      info("Checking the grid highlighter display settings.");
+      const {
+        color,
+        showGridAreasOverlay,
+        showGridLineNumbers,
+        showInfiniteLines,
+      } = options;
+
+      is(color, "#9400FF", "CSS grid highlighter color is correct.");
+      ok(!showGridAreasOverlay, "Show grid areas overlay option is off.");
+      ok(!showGridLineNumbers, "Show grid line numbers option is off.");
+      ok(showInfiniteLines, "Show infinite lines option is on.");
+    }
+  );
+  gridToggle.click();
+  await onHighlighterShown;
+
+  Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_highlighter-toggle-telemetry.js b/devtools/client/inspector/grids/test/browser_grids_highlighter-toggle-telemetry.js
new file mode 100644
index 0000000000..329acf3713
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_highlighter-toggle-telemetry.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry count is correct when the grid highlighter is activated from
+// the layout view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  startTelemetry();
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Toggling OFF the CSS grid highlighter from the layout panel.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && !state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.grid.gridinspector.opened", "", 1, "scalar");
+  checkTelemetry(
+    "DEVTOOLS_GRID_HIGHLIGHTER_TIME_ACTIVE_SECONDS",
+    "",
+    null,
+    "hasentries"
+  );
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js b/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js
new file mode 100644
index 0000000000..6ec6b32a63
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the telemetry count for the number of CSS Grid Elements on a page navigation
+// is correct when the toolbox is opened.
+
+const TEST_URI1 = `
+  <div></div>
+`;
+
+const TEST_URI2 = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI1));
+
+  startTelemetry();
+
+  const { inspector } = await openLayoutView();
+  const { store } = inspector;
+
+  info("Navigate to TEST_URI2");
+
+  const onGridListUpdate = waitUntilState(
+    store,
+    state => state.grids.length == 1
+  );
+  await navigateTo(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI2)
+  );
+  await onGridListUpdate;
+
+  checkResults();
+});
+
+function checkResults() {
+  // Check for:
+  //   - 1 CSS Grid Element
+  checkTelemetry(
+    "DEVTOOLS_NUMBER_OF_CSS_GRIDS_IN_A_PAGE",
+    "",
+    { 0: 0, 1: 1, 2: 0 },
+    "array"
+  );
+}
diff --git a/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js b/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js
new file mode 100644
index 0000000000..0a4e10dfa0
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the when a custom color has been previously set, we initialize
+// the grid with that color.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector, layoutView, toolbox } =
+    await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store } = inspector;
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const swatch = doc.querySelector(
+    "#layout-grid-container .layout-color-swatch"
+  );
+
+  info("Scrolling into view of the #grid color swatch.");
+  swatch.scrollIntoView();
+
+  info("Opening the color picker by clicking on the #grid color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(cPicker, [51, 48, 0, 1]);
+
+  info("Closing the toolbox.");
+  await toolbox.destroy();
+  info("Open the toolbox again.");
+  await openLayoutView();
+
+  info("Check that the previously set custom color is used.");
+  is(
+    swatch.style.backgroundColor,
+    "rgb(51, 48, 0)",
+    "The color swatch's background is correct."
+  );
+  is(
+    store.getState().grids[0].color,
+    "#333000",
+    "The grid color state is correct."
+  );
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js b/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js
new file mode 100644
index 0000000000..412bf98af9
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js
@@ -0,0 +1,115 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid highlighter is re-displayed after reloading a page and the grid
+// item is highlighted.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const OTHER_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeRestored, waitForHighlighterTypeDiscarded } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info(
+    "Check that the CSS grid highlighter is created and the saved grid state."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+  is(
+    highlighters.state.grids.size,
+    1,
+    "There's a saved grid state to be restored."
+  );
+
+  info(
+    "Reload the page, expect the highlighter to be displayed once again and " +
+      "grid is checked"
+  );
+  const onRestored = waitForHighlighterTypeRestored(HIGHLIGHTER_TYPE);
+  let onGridListRestored = waitUntilState(
+    store,
+    state => state.grids.length == 1 && state.grids[0].highlighted
+  );
+
+  const onReloaded = inspector.once("reloaded");
+  await reloadBrowser();
+  info("Wait for inspector to be reloaded after page reload");
+  await onReloaded;
+
+  await onRestored;
+  await onGridListRestored;
+
+  info(
+    "Check that the grid highlighter can be displayed after reloading the page"
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+  is(
+    highlighters.state.grids.size,
+    1,
+    "The saved grid state has the correct number of saved states."
+  );
+
+  info(
+    "Navigate to another URL, and check that the highlighter is hidden and " +
+      "grid is unchecked"
+  );
+  const otherUri =
+    "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
+  const onDiscarded = waitForHighlighterTypeDiscarded(HIGHLIGHTER_TYPE);
+  onGridListRestored = waitUntilState(
+    store,
+    state => state.grids.length == 1 && !state.grids[0].highlighted
+  );
+  await navigateTo(otherUri);
+  await onDiscarded;
+  await onGridListRestored;
+
+  info(
+    "Check that the grid highlighter is hidden after navigating to a different page"
+  );
+  ok(!highlighters.gridHighlighters.size, "CSS grid highlighter is hidden.");
+  ok(!highlighters.state.grids.size, "No grids to be restored on page reload.");
+});
diff --git a/devtools/client/inspector/grids/test/browser_grids_restored-multiple-grids-after-reload.js b/devtools/client/inspector/grids/test/browser_grids_restored-multiple-grids-after-reload.js
new file mode 100644
index 0000000000..81ac7619ff
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_restored-multiple-grids-after-reload.js
@@ -0,0 +1,156 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid highlighters are re-displayed after reloading a page and multiple
+// grids are highlighted.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid3" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid4" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 3);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid1", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox1 = gridList.children[0].querySelector("input");
+  const checkbox2 = gridList.children[1].querySelector("input");
+  const checkbox3 = gridList.children[2].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter for #grid1.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      !state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      !state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      !state.grids[3].disabled
+  );
+  checkbox1.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Toggling ON the CSS grid highlighter for #grid2.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      !state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      !state.grids[3].disabled
+  );
+  checkbox2.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Toggling ON the CSS grid highlighter for #grid3.");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onCheckboxChange = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      state.grids[3].disabled
+  );
+  checkbox3.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info(
+    "Check that the CSS grid highlighters are created and the saved grid state."
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    3,
+    "Got expected number of grid highlighters shown."
+  );
+  is(
+    highlighters.state.grids.size,
+    3,
+    "Got expected number of grids in the saved state"
+  );
+
+  info(
+    "Reload the page, expect the highlighters to be displayed once again and " +
+      "grids are checked"
+  );
+  const onStateRestored = waitForNEvents(
+    highlighters,
+    "highlighter-restored",
+    3
+  );
+  const onGridListRestored = waitUntilState(
+    store,
+    state =>
+      state.grids.length == 4 &&
+      state.grids[0].highlighted &&
+      !state.grids[0].disabled &&
+      state.grids[1].highlighted &&
+      !state.grids[1].disabled &&
+      state.grids[2].highlighted &&
+      !state.grids[2].disabled &&
+      !state.grids[3].highlighted &&
+      state.grids[3].disabled
+  );
+  await reloadBrowser();
+  await onStateRestored;
+  await onGridListRestored;
+
+  info(
+    "Check that the grid highlighters can be displayed after reloading the page"
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    3,
+    "Got expected number of grid highlighters shown."
+  );
+  is(
+    highlighters.state.grids.size,
+    3,
+    "Got expected number of grids in the saved state"
+  );
+});
diff --git a/devtools/client/inspector/grids/test/doc_iframe_reloaded.html b/devtools/client/inspector/grids/test/doc_iframe_reloaded.html
new file mode 100644
index 0000000000..a452dd4d8c
--- /dev/null
+++ b/devtools/client/inspector/grids/test/doc_iframe_reloaded.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<iframe srcdoc="<style>.grid{display:grid;}</style><div class='grid'><span>a</span><span>b</span></div>"></iframe>
+<script>
+"use strict";
+function reloadIFrame() { // eslint-disable-line no-unused-vars
+  const iFrame = document.querySelector("iframe");
+  iFrame.setAttribute("srcdoc", iFrame.getAttribute("srcdoc"));
+}
+</script>
diff --git a/devtools/client/inspector/grids/test/doc_subgrid.html b/devtools/client/inspector/grids/test/doc_subgrid.html
new file mode 100644
index 0000000000..fef13bcc5c
--- /dev/null
+++ b/devtools/client/inspector/grids/test/doc_subgrid.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    .container {
+      display: grid;
+      grid-gap: 5px;
+      grid-template: auto / 1fr 3fr 1fr;
+      background: lightyellow;
+    }
+
+    .subgrid {
+      display: grid;
+      grid: subgrid / subgrid;
+    }
+
+    header, aside, section, footer {
+      background: lightblue;
+      font-family: sans-serif;
+      font-size: 3em;
+    }
+
+    header, footer {
+      grid-column: span 3;
+    }
+
+    main {
+      grid-column: span 3;
+    }
+
+    .aside1 {
+      grid-column: 1;
+    }
+
+    .aside2 {
+      grid-column: 3;
+    }
+
+    section {
+      grid-column: 2;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header class="subgrid">Header</header>
+    <main class="subgrid">
+      <aside class="aside1 subgrid">aside</aside>
+      <section>section</section>
+      <aside class="aside2 subgrid">aside2</aside>
+    </main>
+    <footer>footer</footer>
+  </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/grids/test/head.js b/devtools/client/inspector/grids/test/head.js
new file mode 100644
index 0000000000..5b54004abc
--- /dev/null
+++ b/devtools/client/inspector/grids/test/head.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+const asyncStorage = require("resource://devtools/shared/async-storage.js");
+
+Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
+registerCleanupFunction(async function () {
+  Services.prefs.clearUserPref("devtools.toolbox.footer.height");
+  await asyncStorage.removeItem("gridInspectorHostColors");
+});
+
+/**
+ * Simulate a mouseover event on a grid cell currently rendered in the grid
+ * inspector.
+ *
+ * @param {Document} doc
+ *        The owner document for the grid inspector.
+ * @param {Number} gridCellIndex
+ *        The index (0-based) of the grid cell that should be hovered.
+ */
+function synthesizeMouseOverOnGridCell(doc, gridCellIndex = 0) {
+  // Make sure to retrieve the current live grid item before attempting to
+  // interact with it using mouse APIs.
+  const gridCell = doc.querySelectorAll("#grid-cell-group rect")[gridCellIndex];
+
+  EventUtils.synthesizeMouseAtCenter(
+    gridCell,
+    { type: "mouseover" },
+    doc.defaultView
+  );
+}
diff --git a/devtools/client/inspector/grids/test/xpcshell/.eslintrc.js b/devtools/client/inspector/grids/test/xpcshell/.eslintrc.js
new file mode 100644
index 0000000000..86bd54c245
--- /dev/null
+++ b/devtools/client/inspector/grids/test/xpcshell/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the common devtools xpcshell eslintrc config.
+  extends: "../../../../../.eslintrc.xpcshell.js",
+};
diff --git a/devtools/client/inspector/grids/test/xpcshell/head.js b/devtools/client/inspector/grids/test/xpcshell/head.js
new file mode 100644
index 0000000000..733c0400da
--- /dev/null
+++ b/devtools/client/inspector/grids/test/xpcshell/head.js
@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+const { require } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
diff --git a/devtools/client/inspector/grids/test/xpcshell/test_compare_fragments_geometry.js b/devtools/client/inspector/grids/test/xpcshell/test_compare_fragments_geometry.js
new file mode 100644
index 0000000000..57f617a3ec
--- /dev/null
+++ b/devtools/client/inspector/grids/test/xpcshell/test_compare_fragments_geometry.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  compareFragmentsGeometry,
+} = require("resource://devtools/client/inspector/grids/utils/utils.js");
+
+const TESTS = [
+  {
+    desc: "No fragments",
+    grids: [[], []],
+    expected: true,
+  },
+  {
+    desc: "Different number of fragments",
+    grids: [
+      [{}, {}, {}],
+      [{}, {}],
+    ],
+    expected: false,
+  },
+  {
+    desc: "Different number of columns",
+    grids: [
+      [{ cols: { lines: [{}, {}] }, rows: { lines: [] } }],
+      [{ cols: { lines: [{}] }, rows: { lines: [] } }],
+    ],
+    expected: false,
+  },
+  {
+    desc: "Different number of rows",
+    grids: [
+      [{ cols: { lines: [{}, {}] }, rows: { lines: [{}] } }],
+      [{ cols: { lines: [{}, {}] }, rows: { lines: [{}, {}] } }],
+    ],
+    expected: false,
+  },
+  {
+    desc: "Different number of rows and columns",
+    grids: [
+      [{ cols: { lines: [{}] }, rows: { lines: [{}] } }],
+      [{ cols: { lines: [{}, {}] }, rows: { lines: [{}, {}] } }],
+    ],
+    expected: false,
+  },
+  {
+    desc: "Different column sizes",
+    grids: [
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 500 }] },
+          rows: { lines: [] },
+        },
+      ],
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 1000 }] },
+          rows: { lines: [] },
+        },
+      ],
+    ],
+    expected: false,
+  },
+  {
+    desc: "Different row sizes",
+    grids: [
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 500 }] },
+          rows: { lines: [{ start: -100 }] },
+        },
+      ],
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 500 }] },
+          rows: { lines: [{ start: 0 }] },
+        },
+      ],
+    ],
+    expected: false,
+  },
+  {
+    desc: "Different row and column sizes",
+    grids: [
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 500 }] },
+          rows: { lines: [{ start: -100 }] },
+        },
+      ],
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 505 }] },
+          rows: { lines: [{ start: 0 }] },
+        },
+      ],
+    ],
+    expected: false,
+  },
+  {
+    desc: "Complete structure, same fragments",
+    grids: [
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 100.3 }, { start: 200.6 }] },
+          rows: { lines: [{ start: 0 }, { start: 1000 }, { start: 2000 }] },
+        },
+      ],
+      [
+        {
+          cols: { lines: [{ start: 0 }, { start: 100.3 }, { start: 200.6 }] },
+          rows: { lines: [{ start: 0 }, { start: 1000 }, { start: 2000 }] },
+        },
+      ],
+    ],
+    expected: true,
+  },
+];
+
+function run_test() {
+  for (const { desc, grids, expected } of TESTS) {
+    if (desc) {
+      info(desc);
+    }
+    equal(compareFragmentsGeometry(grids[0], grids[1]), expected);
+  }
+}
diff --git a/devtools/client/inspector/grids/test/xpcshell/xpcshell.toml b/devtools/client/inspector/grids/test/xpcshell/xpcshell.toml
new file mode 100644
index 0000000000..83e821f9cd
--- /dev/null
+++ b/devtools/client/inspector/grids/test/xpcshell/xpcshell.toml
@@ -0,0 +1,6 @@
+[DEFAULT]
+tags = "devtools"
+firefox-appdir = "browser"
+head = "head.js"
+
+["test_compare_fragments_geometry.js"]
diff --git a/devtools/client/inspector/grids/types.js b/devtools/client/inspector/grids/types.js
new file mode 100644
index 0000000000..b2a936fef2
--- /dev/null
+++ b/devtools/client/inspector/grids/types.js
@@ -0,0 +1,57 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * A single grid container in the document.
+ */
+exports.grid = {
+  // The id of the grid
+  id: PropTypes.number,
+
+  // The color for the grid overlay highlighter
+  color: PropTypes.string,
+
+  // The text direction of the grid container
+  direction: PropTypes.string,
+
+  // Whether or not the grid checkbox is disabled as a result of hitting the
+  // maximum number of grid highlighters shown.
+  disabled: PropTypes.bool,
+
+  // The grid fragment object of the grid container
+  gridFragments: PropTypes.array,
+
+  // Whether or not the grid highlighter is highlighting the grid
+  highlighted: PropTypes.bool,
+
+  // Whether or not the grid is a subgrid
+  isSubgrid: PropTypes.bool,
+
+  // The node front of the grid container
+  nodeFront: PropTypes.object,
+
+  // If the grid is a subgrid, this references the parent node front actor ID
+  parentNodeActorID: PropTypes.string,
+
+  // Array of ids belonging to the subgrid within the grid container
+  subgrids: PropTypes.arrayOf(PropTypes.number),
+
+  // The writing mode of the grid container
+  writingMode: PropTypes.string,
+};
+
+/**
+ * The grid highlighter settings on what to display in its grid overlay in the document.
+ */
+exports.highlighterSettings = {
+  // Whether or not the grid highlighter should show the grid line numbers
+  showGridLineNumbers: PropTypes.bool,
+
+  // Whether or not the grid highlighter extends the grid lines infinitely
+  showInfiniteLines: PropTypes.bool,
+};
diff --git a/devtools/client/inspector/grids/utils/moz.build b/devtools/client/inspector/grids/utils/moz.build
new file mode 100644
index 0000000000..c74e63e617
--- /dev/null
+++ b/devtools/client/inspector/grids/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "utils.js",
+)
diff --git a/devtools/client/inspector/grids/utils/utils.js b/devtools/client/inspector/grids/utils/utils.js
new file mode 100644
index 0000000000..fc25de8775
--- /dev/null
+++ b/devtools/client/inspector/grids/utils/utils.js
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * Compares 2 sets of grid fragments to each other and checks if they have the same
+ * general geometry.
+ * This means that things like areas, area names or line names are ignored.
+ * This only checks if the 2 sets of fragments have as many fragments, as many lines, and
+ * that those lines are at the same distance.
+ *
+ * @param  {Array} fragments1
+ *         A list of gridFragment objects.
+ * @param  {Array} fragments2
+ *         Another list of gridFragment objects to compare to the first list.
+ * @return {Boolean}
+ *         True if the fragments are the same, false otherwise.
+ */
+function compareFragmentsGeometry(fragments1, fragments2) {
+  // Compare the number of fragments.
+  if (fragments1.length !== fragments2.length) {
+    return false;
+  }
+
+  // Compare the number of areas, rows and columns.
+  for (let i = 0; i < fragments1.length; i++) {
+    if (
+      fragments1[i].cols.lines.length !== fragments2[i].cols.lines.length ||
+      fragments1[i].rows.lines.length !== fragments2[i].rows.lines.length
+    ) {
+      return false;
+    }
+  }
+
+  // Compare the offset of lines.
+  for (let i = 0; i < fragments1.length; i++) {
+    for (let j = 0; j < fragments1[i].cols.lines.length; j++) {
+      if (
+        fragments1[i].cols.lines[j].start !== fragments2[i].cols.lines[j].start
+      ) {
+        return false;
+      }
+    }
+    for (let j = 0; j < fragments1[i].rows.lines.length; j++) {
+      if (
+        fragments1[i].rows.lines[j].start !== fragments2[i].rows.lines[j].start
+      ) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+module.exports.compareFragmentsGeometry = compareFragmentsGeometry;
diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml
new file mode 100644
index 0000000000..75d0a792c3
--- /dev/null
+++ b/devtools/client/inspector/index.xhtml
@@ -0,0 +1,294 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml" dir="">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+    <link rel="stylesheet" href="chrome://devtools/skin/breadcrumbs.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/inspector.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/badge.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/rules.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/compatibility.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/computed.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/changes.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/fonts.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/layout.css" />
+    <link rel="stylesheet" href="chrome://devtools/skin/animation.css" />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/tabs/Tabs.css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/SidebarToggle.css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/inspector/components/InspectorTabPanel.css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/splitter/SplitBox.css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/Accordion.css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/reps/reps.css"
+    />
+    <!-- Needed for the ObjectInspector -->
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/Tree.css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/object-inspector/components/ObjectInspector.css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/components/tree/TreeView.css"
+    />
+
+    <script src="chrome://devtools/content/shared/theme-switching.js"></script>
+    <script>
+      /* eslint-disable */
+      var isInChrome = window.location.href.includes("chrome:");
+      if (isInChrome) {
+        var exports = {};
+        var { require, loader } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/Loader.sys.mjs"
+        );
+        var { BrowserLoader } = ChromeUtils.import(
+          "resource://devtools/shared/loader/browser-loader.js"
+        );
+      }
+    </script>
+
+    <script
+      src="resource://devtools/client/inspector/inspector.js"
+      defer="true"
+    ></script>
+  </head>
+  <body class="theme-body" role="application">
+    <div
+      class="inspector-responsive-container theme-body inspector"
+      data-localization-bundle="devtools/client/locales/inspector.properties"
+    >
+      <!-- Main Panel Content -->
+      <div
+        id="inspector-main-content"
+        class="devtools-main-content"
+        style="visibility: hidden"
+      >
+        <!-- Toolbar -->
+        <div
+          id="inspector-toolbar"
+          class="devtools-toolbar devtools-input-toolbar"
+          nowindowdrag="true"
+        >
+          <div id="inspector-search" class="devtools-searchbox">
+            <input
+              id="inspector-searchbox"
+              class="devtools-searchinput"
+              type="search"
+              data-localization="placeholder=inspectorSearchHTML.label3"
+            />
+            <button
+              id="inspector-searchinput-clear"
+              class="devtools-searchinput-clear"
+              hidden=""
+              tabindex="-1"
+            ></button>
+          </div>
+          <div id="inspector-searchlabel-container" hidden="">
+            <div class="devtools-separator"></div>
+            <span id="inspector-searchlabel"></span>
+          </div>
+          <div class="devtools-separator"></div>
+          <button
+            id="inspector-element-add-button"
+            class="devtools-button"
+            data-localization="title=inspectorAddNode.label"
+          ></button>
+          <button
+            id="inspector-eyedropper-toggle"
+            class="devtools-button"
+          ></button>
+        </div>
+
+        <!-- Markup Container -->
+        <div id="markup-box"></div>
+        <div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
+          <div
+            id="inspector-breadcrumbs"
+            class="breadcrumbs-widget-container"
+            role="toolbar"
+            data-localization="aria-label=inspector.breadcrumbs.label"
+            tabindex="0"
+          ></div>
+        </div>
+      </div>
+
+      <!-- Splitter -->
+      <div id="inspector-splitter-box"></div>
+
+      <!-- Split Sidebar Container -->
+      <div id="inspector-rules-container">
+        <div id="inspector-rules-sidebar" hidden=""></div>
+      </div>
+
+      <!-- Sidebar Container -->
+      <div id="inspector-sidebar-container">
+        <div id="inspector-sidebar" hidden=""></div>
+      </div>
+
+      <!-- Sidebar Panel Definitions -->
+      <div id="tabpanels" style="visibility: collapse">
+        <div
+          id="sidebar-panel-ruleview"
+          class="theme-sidebar inspector-tabpanel"
+        >
+          <div id="ruleview-toolbar-container">
+            <div
+              id="ruleview-toolbar"
+              class="devtools-toolbar devtools-input-toolbar"
+            >
+              <div class="devtools-searchbox">
+                <input
+                  id="ruleview-searchbox"
+                  class="devtools-filterinput"
+                  type="search"
+                  data-localization="aria-label=inspector.filterStyles.label;placeholder=inspector.filterStyles.placeholder"
+                />
+                <button
+                  id="ruleview-searchinput-clear"
+                  data-localization="title=inspector.filterStylesClearButton.title"
+                  class="devtools-searchinput-clear"
+                ></button>
+              </div>
+              <div class="devtools-separator"></div>
+              <div id="ruleview-command-toolbar">
+                <button
+                  id="pseudo-class-panel-toggle"
+                  data-localization="title=inspector.togglePseudo.tooltip"
+                  class="devtools-button"
+                  aria-controls="pseudo-class-panel"
+                  aria-pressed="false"
+                ></button>
+                <button
+                  id="class-panel-toggle"
+                  data-localization="title=inspector.classPanel.toggleClass.tooltip"
+                  class="devtools-button"
+                  aria-controls="ruleview-class-panel"
+                  aria-pressed="false"
+                ></button>
+                <button
+                  id="ruleview-add-rule-button"
+                  data-localization="title=inspector.addRule.tooltip"
+                  class="devtools-button"
+                ></button>
+                <button
+                  id="color-scheme-simulation-light-toggle"
+                  data-localization="title=inspector.colorSchemeSimulationLight.tooltip"
+                  class="devtools-button"
+                  hidden=""
+                  aria-pressed="false"
+                ></button>
+                <button
+                  id="color-scheme-simulation-dark-toggle"
+                  data-localization="title=inspector.colorSchemeSimulationDark.tooltip"
+                  class="devtools-button"
+                  hidden=""
+                  aria-pressed="false"
+                ></button>
+                <button
+                  id="print-simulation-toggle"
+                  data-localization="title=inspector.printSimulation.tooltip"
+                  class="devtools-button"
+                  hidden=""
+                  aria-pressed="false"
+                ></button>
+              </div>
+            </div>
+            <div
+              id="pseudo-class-panel"
+              class="theme-toolbar ruleview-reveal-panel"
+              hidden=""
+            >
+              <!-- Populated with checkbox inputs once the Rules view is instantiated -->
+            </div>
+            <div
+              id="ruleview-class-panel"
+              class="theme-toolbar ruleview-reveal-panel"
+              hidden=""
+            ></div>
+          </div>
+
+          <div id="ruleview-container" class="ruleview" role="document">
+            <div id="ruleview-container-focusable" tabindex="-1"></div>
+          </div>
+        </div>
+
+        <div
+          id="sidebar-panel-computedview"
+          class="theme-sidebar inspector-tabpanel"
+        >
+          <div
+            id="computed-toolbar"
+            class="devtools-toolbar devtools-input-toolbar"
+          >
+            <div class="devtools-searchbox">
+              <input
+                id="computed-searchbox"
+                class="devtools-filterinput"
+                type="search"
+                data-localization="aria-label=inspector.filterStyles.label;placeholder=inspector.filterStyles.placeholder"
+              />
+              <button
+                id="computed-searchinput-clear"
+                class="devtools-searchinput-clear"
+                data-localization="title=inspector.filterStylesClearButton.title"
+              ></button>
+            </div>
+            <div class="devtools-separator"></div>
+            <input
+              id="browser-style-checkbox"
+              type="checkbox"
+              class="includebrowserstyles"
+            />
+            <label
+              id="browser-style-checkbox-label"
+              for="browser-style-checkbox"
+              data-localization="content=inspector.browserStyles.label"
+            ></label>
+          </div>
+
+          <div id="computed-container" role="document">
+            <div id="computed-container-focusable" tabindex="-1">
+              <ul
+                id="computed-property-container"
+                class="devtools-monospace"
+                tabindex="0"
+                dir="ltr"
+              ></ul>
+              <div
+                id="computed-no-results"
+                class="devtools-sidepanel-no-result"
+                hidden=""
+                data-localization="content=inspector.noProperties"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/inspector-search.js b/devtools/client/inspector/inspector-search.js
new file mode 100644
index 0000000000..cac216c06e
--- /dev/null
+++ b/devtools/client/inspector/inspector-search.js
@@ -0,0 +1,534 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { KeyCodes } = require("resource://devtools/client/shared/keycodes.js");
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js");
+
+// Maximum number of selector suggestions shown in the panel.
+const MAX_SUGGESTIONS = 15;
+
+/**
+ * Converts any input field into a document search box.
+ *
+ * @param {InspectorPanel} inspector
+ *        The InspectorPanel to access the inspector commands for
+ *        search and document traversal.
+ * @param {DOMNode} input
+ *        The input element to which the panel will be attached and from where
+ *        search input will be taken.
+ * @param {DOMNode} clearBtn
+ *        The clear button in the input field that will clear the input value.
+ *
+ * Emits the following events:
+ * - search-cleared: when the search box is emptied
+ * - search-result: when a search is made and a result is selected
+ */
+function InspectorSearch(inspector, input, clearBtn) {
+  this.inspector = inspector;
+  this.searchBox = input;
+  this.searchClearButton = clearBtn;
+  this._lastSearched = null;
+
+  this._onKeyDown = this._onKeyDown.bind(this);
+  this._onInput = this._onInput.bind(this);
+  this._onClearSearch = this._onClearSearch.bind(this);
+
+  this.searchBox.addEventListener("keydown", this._onKeyDown, true);
+  this.searchBox.addEventListener("input", this._onInput, true);
+  this.searchClearButton.addEventListener("click", this._onClearSearch);
+
+  this.autocompleter = new SelectorAutocompleter(inspector, input);
+  EventEmitter.decorate(this);
+}
+
+exports.InspectorSearch = InspectorSearch;
+
+InspectorSearch.prototype = {
+  destroy() {
+    this.searchBox.removeEventListener("keydown", this._onKeyDown, true);
+    this.searchBox.removeEventListener("input", this._onInput, true);
+    this.searchClearButton.removeEventListener("click", this._onClearSearch);
+    this.searchBox = null;
+    this.searchClearButton = null;
+    this.autocompleter.destroy();
+  },
+
+  _onSearch(reverse = false) {
+    this.doFullTextSearch(this.searchBox.value, reverse).catch(console.error);
+  },
+
+  async doFullTextSearch(query, reverse) {
+    const lastSearched = this._lastSearched;
+    this._lastSearched = query;
+
+    const searchContainer = this.searchBox.parentNode;
+
+    if (query.length === 0) {
+      searchContainer.classList.remove("devtools-searchbox-no-match");
+      if (!lastSearched || lastSearched.length) {
+        this.emit("search-cleared");
+      }
+      return;
+    }
+
+    const res = await this.inspector.commands.inspectorCommand.findNextNode(
+      query,
+      {
+        reverse,
+      }
+    );
+
+    // Value has changed since we started this request, we're done.
+    if (query !== this.searchBox.value) {
+      return;
+    }
+
+    if (res) {
+      this.inspector.selection.setNodeFront(res.node, {
+        reason: "inspectorsearch",
+      });
+      searchContainer.classList.remove("devtools-searchbox-no-match");
+      res.query = query;
+      this.emit("search-result", res);
+    } else {
+      searchContainer.classList.add("devtools-searchbox-no-match");
+      this.emit("search-result");
+    }
+  },
+
+  _onInput() {
+    if (this.searchBox.value.length === 0) {
+      this.searchClearButton.hidden = true;
+      this._onSearch();
+    } else {
+      this.searchClearButton.hidden = false;
+    }
+  },
+
+  _onKeyDown(event) {
+    if (event.keyCode === KeyCodes.DOM_VK_RETURN) {
+      this._onSearch(event.shiftKey);
+    }
+
+    const modifierKey =
+      Services.appinfo.OS === "Darwin" ? event.metaKey : event.ctrlKey;
+    if (event.keyCode === KeyCodes.DOM_VK_G && modifierKey) {
+      this._onSearch(event.shiftKey);
+      event.preventDefault();
+    }
+  },
+
+  _onClearSearch() {
+    this.searchBox.parentNode.classList.remove("devtools-searchbox-no-match");
+    this.searchBox.value = "";
+    this.searchClearButton.hidden = true;
+    this.emit("search-cleared");
+  },
+};
+
+/**
+ * Converts any input box on a page to a CSS selector search and suggestion box.
+ *
+ * Emits 'processing-done' event when it is done processing the current
+ * keypress, search request or selection from the list, whether that led to a
+ * search or not.
+ *
+ * @constructor
+ * @param InspectorPanel inspector
+ *        The InspectorPanel to access the inspector commands for
+ *        search and document traversal.
+ * @param nsiInputElement inputNode
+ *        The input element to which the panel will be attached and from where
+ *        search input will be taken.
+ */
+function SelectorAutocompleter(inspector, inputNode) {
+  this.inspector = inspector;
+  this.searchBox = inputNode;
+  this.panelDoc = this.searchBox.ownerDocument;
+
+  this.showSuggestions = this.showSuggestions.bind(this);
+  this._onSearchKeypress = this._onSearchKeypress.bind(this);
+  this._onSearchPopupClick = this._onSearchPopupClick.bind(this);
+  this._onMarkupMutation = this._onMarkupMutation.bind(this);
+
+  // Options for the AutocompletePopup.
+  const options = {
+    listId: "searchbox-panel-listbox",
+    autoSelect: true,
+    position: "top",
+    onClick: this._onSearchPopupClick,
+  };
+
+  // The popup will be attached to the toolbox document.
+  this.searchPopup = new AutocompletePopup(inspector._toolbox.doc, options);
+
+  this.searchBox.addEventListener("input", this.showSuggestions, true);
+  this.searchBox.addEventListener("keypress", this._onSearchKeypress, true);
+  this.inspector.on("markupmutation", this._onMarkupMutation);
+
+  EventEmitter.decorate(this);
+}
+
+exports.SelectorAutocompleter = SelectorAutocompleter;
+
+SelectorAutocompleter.prototype = {
+  get walker() {
+    return this.inspector.walker;
+  },
+
+  // The possible states of the query.
+  States: {
+    CLASS: "class",
+    ID: "id",
+    TAG: "tag",
+    ATTRIBUTE: "attribute",
+  },
+
+  // The current state of the query.
+  _state: null,
+
+  // The query corresponding to last state computation.
+  _lastStateCheckAt: null,
+
+  /**
+   * Computes the state of the query. State refers to whether the query
+   * currently requires a class suggestion, or a tag, or an Id suggestion.
+   * This getter will effectively compute the state by traversing the query
+   * character by character each time the query changes.
+   *
+   * @example
+   *        '#f' requires an Id suggestion, so the state is States.ID
+   *        'div > .foo' requires class suggestion, so state is States.CLASS
+   */
+  // eslint-disable-next-line complexity
+  get state() {
+    if (!this.searchBox || !this.searchBox.value) {
+      return null;
+    }
+
+    const query = this.searchBox.value;
+    if (this._lastStateCheckAt == query) {
+      // If query is the same, return early.
+      return this._state;
+    }
+    this._lastStateCheckAt = query;
+
+    this._state = null;
+    let subQuery = "";
+    // Now we iterate over the query and decide the state character by
+    // character.
+    // The logic here is that while iterating, the state can go from one to
+    // another with some restrictions. Like, if the state is Class, then it can
+    // never go to Tag state without a space or '>' character; Or like, a Class
+    // state with only '.' cannot go to an Id state without any [a-zA-Z] after
+    // the '.' which means that '.#' is a selector matching a class name '#'.
+    // Similarily for '#.' which means a selctor matching an id '.'.
+    for (let i = 1; i <= query.length; i++) {
+      // Calculate the state.
+      subQuery = query.slice(0, i);
+      let [secondLastChar, lastChar] = subQuery.slice(-2);
+      switch (this._state) {
+        case null:
+          // This will happen only in the first iteration of the for loop.
+          lastChar = secondLastChar;
+
+        case this.States.TAG: // eslint-disable-line
+          if (lastChar === ".") {
+            this._state = this.States.CLASS;
+          } else if (lastChar === "#") {
+            this._state = this.States.ID;
+          } else if (lastChar === "[") {
+            this._state = this.States.ATTRIBUTE;
+          } else {
+            this._state = this.States.TAG;
+          }
+          break;
+
+        case this.States.CLASS:
+          if (subQuery.match(/[\.]+[^\.]*$/)[0].length > 2) {
+            // Checks whether the subQuery has atleast one [a-zA-Z] after the
+            // '.'.
+            if (lastChar === " " || lastChar === ">") {
+              this._state = this.States.TAG;
+            } else if (lastChar === "#") {
+              this._state = this.States.ID;
+            } else if (lastChar === "[") {
+              this._state = this.States.ATTRIBUTE;
+            } else {
+              this._state = this.States.CLASS;
+            }
+          }
+          break;
+
+        case this.States.ID:
+          if (subQuery.match(/[#]+[^#]*$/)[0].length > 2) {
+            // Checks whether the subQuery has atleast one [a-zA-Z] after the
+            // '#'.
+            if (lastChar === " " || lastChar === ">") {
+              this._state = this.States.TAG;
+            } else if (lastChar === ".") {
+              this._state = this.States.CLASS;
+            } else if (lastChar === "[") {
+              this._state = this.States.ATTRIBUTE;
+            } else {
+              this._state = this.States.ID;
+            }
+          }
+          break;
+
+        case this.States.ATTRIBUTE:
+          if (subQuery.match(/[\[][^\]]+[\]]/) !== null) {
+            // Checks whether the subQuery has at least one ']' after the '['.
+            if (lastChar === " " || lastChar === ">") {
+              this._state = this.States.TAG;
+            } else if (lastChar === ".") {
+              this._state = this.States.CLASS;
+            } else if (lastChar === "#") {
+              this._state = this.States.ID;
+            } else {
+              this._state = this.States.ATTRIBUTE;
+            }
+          }
+          break;
+      }
+    }
+    return this._state;
+  },
+
+  /**
+   * Removes event listeners and cleans up references.
+   */
+  destroy() {
+    this.searchBox.removeEventListener("input", this.showSuggestions, true);
+    this.searchBox.removeEventListener(
+      "keypress",
+      this._onSearchKeypress,
+      true
+    );
+    this.inspector.off("markupmutation", this._onMarkupMutation);
+    this.searchPopup.destroy();
+    this.searchPopup = null;
+    this.searchBox = null;
+    this.panelDoc = null;
+  },
+
+  /**
+   * Handles keypresses inside the input box.
+   */
+  _onSearchKeypress(event) {
+    const popup = this.searchPopup;
+    switch (event.keyCode) {
+      case KeyCodes.DOM_VK_RETURN:
+      case KeyCodes.DOM_VK_TAB:
+        if (popup.isOpen) {
+          if (popup.selectedItem) {
+            this.searchBox.value = popup.selectedItem.label;
+          }
+          this.hidePopup();
+        } else if (!popup.isOpen) {
+          // When tab is pressed with focus on searchbox and closed popup,
+          // do not prevent the default to avoid a keyboard trap and move focus
+          // to next/previous element.
+          this.emitForTests("processing-done");
+          return;
+        }
+        break;
+
+      case KeyCodes.DOM_VK_UP:
+        if (popup.isOpen && popup.itemCount > 0) {
+          popup.selectPreviousItem();
+          this.searchBox.value = popup.selectedItem.label;
+        }
+        break;
+
+      case KeyCodes.DOM_VK_DOWN:
+        if (popup.isOpen && popup.itemCount > 0) {
+          popup.selectNextItem();
+          this.searchBox.value = popup.selectedItem.label;
+        }
+        break;
+
+      case KeyCodes.DOM_VK_ESCAPE:
+        if (popup.isOpen) {
+          this.hidePopup();
+        } else {
+          this.emitForTests("processing-done");
+          return;
+        }
+        break;
+
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    this.emitForTests("processing-done");
+  },
+
+  /**
+   * Handles click events from the autocomplete popup.
+   */
+  _onSearchPopupClick(event) {
+    const selectedItem = this.searchPopup.selectedItem;
+    if (selectedItem) {
+      this.searchBox.value = selectedItem.label;
+    }
+    this.hidePopup();
+
+    event.preventDefault();
+    event.stopPropagation();
+  },
+
+  /**
+   * Reset previous search results on markup-mutations to make sure we search
+   * again after nodes have been added/removed/changed.
+   */
+  _onMarkupMutation() {
+    this._searchResults = null;
+    this._lastSearched = null;
+  },
+
+  /**
+   * Populates the suggestions list and show the suggestion popup.
+   *
+   * @return {Promise} promise that will resolve when the autocomplete popup is fully
+   * displayed or hidden.
+   */
+  _showPopup(list, popupState) {
+    let total = 0;
+    const query = this.searchBox.value;
+    const items = [];
+
+    for (let [value, , state] of list) {
+      if (query.match(/[\s>+]$/)) {
+        // for cases like 'div ' or 'div >' or 'div+'
+        value = query + value;
+      } else if (query.match(/[\s>+][\.#a-zA-Z][^\s>+\.#\[]*$/)) {
+        // for cases like 'div #a' or 'div .a' or 'div > d' and likewise
+        const lastPart = query.match(/[\s>+][\.#a-zA-Z][^\s>+\.#\[]*$/)[0];
+        value = query.slice(0, -1 * lastPart.length + 1) + value;
+      } else if (query.match(/[a-zA-Z][#\.][^#\.\s+>]*$/)) {
+        // for cases like 'div.class' or '#foo.bar' and likewise
+        const lastPart = query.match(/[a-zA-Z][#\.][^#\.\s+>]*$/)[0];
+        value = query.slice(0, -1 * lastPart.length + 1) + value;
+      } else if (query.match(/[a-zA-Z]*\[[^\]]*\][^\]]*/)) {
+        // for cases like '[foo].bar' and likewise
+        const attrPart = query.substring(0, query.lastIndexOf("]") + 1);
+        value = attrPart + value;
+      }
+
+      const item = {
+        preLabel: query,
+        label: value,
+      };
+
+      // In case the query's state is tag and the item's state is id or class
+      // adjust the preLabel
+      if (popupState === this.States.TAG && state === this.States.CLASS) {
+        item.preLabel = "." + item.preLabel;
+      }
+      if (popupState === this.States.TAG && state === this.States.ID) {
+        item.preLabel = "#" + item.preLabel;
+      }
+
+      items.push(item);
+      if (++total > MAX_SUGGESTIONS - 1) {
+        break;
+      }
+    }
+
+    if (total > 0) {
+      const onPopupOpened = this.searchPopup.once("popup-opened");
+      this.searchPopup.once("popup-closed", () => {
+        this.searchPopup.setItems(items);
+        // The offset is left padding (22px) + left border width (1px) of searchBox.
+        const xOffset = 23;
+        this.searchPopup.openPopup(this.searchBox, xOffset);
+      });
+      this.searchPopup.hidePopup();
+      return onPopupOpened;
+    }
+
+    return this.hidePopup();
+  },
+
+  /**
+   * Hide the suggestion popup if necessary.
+   */
+  hidePopup() {
+    const onPopupClosed = this.searchPopup.once("popup-closed");
+    this.searchPopup.hidePopup();
+    return onPopupClosed;
+  },
+
+  /**
+   * Suggests classes,ids and tags based on the user input as user types in the
+   * searchbox.
+   */
+  async showSuggestions() {
+    let query = this.searchBox.value;
+    const originalQuery = this.searchBox.value;
+
+    const state = this.state;
+    let firstPart = "";
+
+    if (query.endsWith("*") || state === this.States.ATTRIBUTE) {
+      // Hide the popup if the query ends with * (because we don't want to
+      // suggest all nodes) or if it is an attribute selector (because
+      // it would give a lot of useless results).
+      this.hidePopup();
+      this.emitForTests("processing-done", { query: originalQuery });
+      return;
+    }
+
+    if (state === this.States.TAG) {
+      // gets the tag that is being completed. For ex. 'div.foo > s' returns
+      // 's', 'di' returns 'di' and likewise.
+      firstPart = (query.match(/[\s>+]?([a-zA-Z]*)$/) || ["", query])[1];
+      query = query.slice(0, query.length - firstPart.length);
+    } else if (state === this.States.CLASS) {
+      // gets the class that is being completed. For ex. '.foo.b' returns 'b'
+      firstPart = query.match(/\.([^\.]*)$/)[1];
+      query = query.slice(0, query.length - firstPart.length - 1);
+    } else if (state === this.States.ID) {
+      // gets the id that is being completed. For ex. '.foo#b' returns 'b'
+      firstPart = query.match(/#([^#]*)$/)[1];
+      query = query.slice(0, query.length - firstPart.length - 1);
+    }
+    // TODO: implement some caching so that over the wire request is not made
+    // everytime.
+    if (/[\s+>~]$/.test(query)) {
+      query += "*";
+    }
+
+    let suggestions =
+      await this.inspector.commands.inspectorCommand.getSuggestionsForQuery(
+        query,
+        firstPart,
+        state
+      );
+
+    if (state === this.States.CLASS) {
+      firstPart = "." + firstPart;
+    } else if (state === this.States.ID) {
+      firstPart = "#" + firstPart;
+    }
+
+    // If there is a single tag match and it's what the user typed, then
+    // don't need to show a popup.
+    if (suggestions.length === 1 && suggestions[0][0] === firstPart) {
+      suggestions = [];
+    }
+
+    // Wait for the autocomplete-popup to fire its popup-opened event, to make sure
+    // the autoSelect item has been selected.
+    await this._showPopup(suggestions, state);
+    this.emitForTests("processing-done", { query: originalQuery });
+  },
+};
diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js
new file mode 100644
index 0000000000..bd9d9941c6
--- /dev/null
+++ b/devtools/client/inspector/inspector.js
@@ -0,0 +1,2031 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const flags = require("resource://devtools/shared/flags.js");
+const { executeSoon } = require("resource://devtools/shared/DevToolsUtils.js");
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+const createStore = require("resource://devtools/client/inspector/store.js");
+const InspectorStyleChangeTracker = require("resource://devtools/client/inspector/shared/style-change-tracker.js");
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+
+// Use privileged promise in panel documents to prevent having them to freeze
+// during toolbox destruction. See bug 1402779.
+const Promise = require("Promise");
+
+loader.lazyRequireGetter(
+  this,
+  "HTMLBreadcrumbs",
+  "resource://devtools/client/inspector/breadcrumbs.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "KeyShortcuts",
+  "resource://devtools/client/shared/key-shortcuts.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "InspectorSearch",
+  "resource://devtools/client/inspector/inspector-search.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "ToolSidebar",
+  "resource://devtools/client/inspector/toolsidebar.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "MarkupView",
+  "resource://devtools/client/inspector/markup/markup.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "HighlightersOverlay",
+  "resource://devtools/client/inspector/shared/highlighters-overlay.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "ExtensionSidebar",
+  "resource://devtools/client/inspector/extensions/extension-sidebar.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "PICKER_TYPES",
+  "resource://devtools/shared/picker-constants.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "captureAndSaveScreenshot",
+  "resource://devtools/client/shared/screenshot.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "debounce",
+  "resource://devtools/shared/debounce.js",
+  true
+);
+
+const {
+  LocalizationHelper,
+  localizeMarkup,
+} = require("resource://devtools/shared/l10n.js");
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+const {
+  FluentL10n,
+} = require("resource://devtools/client/shared/fluent-l10n/fluent-l10n.js");
+
+// Sidebar dimensions
+const INITIAL_SIDEBAR_SIZE = 350;
+
+// How long we wait to debounce resize events
+const LAZY_RESIZE_INTERVAL_MS = 200;
+
+// If the toolbox's width is smaller than the given amount of pixels, the sidebar
+// automatically switches from 'landscape/horizontal' to 'portrait/vertical' mode.
+const PORTRAIT_MODE_WIDTH_THRESHOLD = 700;
+// If the toolbox's width docked to the side is smaller than the given amount of pixels,
+// the sidebar automatically switches from 'landscape/horizontal' to 'portrait/vertical'
+// mode.
+const SIDE_PORTAIT_MODE_WIDTH_THRESHOLD = 1000;
+
+const THREE_PANE_ENABLED_PREF = "devtools.inspector.three-pane-enabled";
+const THREE_PANE_ENABLED_SCALAR = "devtools.inspector.three_pane_enabled";
+const THREE_PANE_CHROME_ENABLED_PREF =
+  "devtools.inspector.chrome.three-pane-enabled";
+const TELEMETRY_EYEDROPPER_OPENED = "devtools.toolbar.eyedropper.opened";
+const TELEMETRY_SCALAR_NODE_SELECTION_COUNT =
+  "devtools.inspector.node_selection_count";
+const DEFAULT_COLOR_UNIT_PREF = "devtools.defaultColorUnit";
+
+/**
+ * Represents an open instance of the Inspector for a tab.
+ * The inspector controls the breadcrumbs, the markup view, and the sidebar
+ * (computed view, rule view, font view and animation inspector).
+ *
+ * Events:
+ * - ready
+ *      Fired when the inspector panel is opened for the first time and ready to
+ *      use
+ * - new-root
+ *      Fired after a new root (navigation to a new page) event was fired by
+ *      the walker, and taken into account by the inspector (after the markup
+ *      view has been reloaded)
+ * - markuploaded
+ *      Fired when the markup-view frame has loaded
+ * - breadcrumbs-updated
+ *      Fired when the breadcrumb widget updates to a new node
+ * - boxmodel-view-updated
+ *      Fired when the box model updates to a new node
+ * - markupmutation
+ *      Fired after markup mutations have been processed by the markup-view
+ * - computed-view-refreshed
+ *      Fired when the computed rules view updates to a new node
+ * - computed-view-property-expanded
+ *      Fired when a property is expanded in the computed rules view
+ * - computed-view-property-collapsed
+ *      Fired when a property is collapsed in the computed rules view
+ * - computed-view-sourcelinks-updated
+ *      Fired when the stylesheet source links have been updated (when switching
+ *      to source-mapped files)
+ * - rule-view-refreshed
+ *      Fired when the rule view updates to a new node
+ * - rule-view-sourcelinks-updated
+ *      Fired when the stylesheet source links have been updated (when switching
+ *      to source-mapped files)
+ */
+function Inspector(toolbox, commands) {
+  EventEmitter.decorate(this);
+
+  this._toolbox = toolbox;
+  this._commands = commands;
+  this.panelDoc = window.document;
+  this.panelWin = window;
+  this.panelWin.inspector = this;
+  this.telemetry = toolbox.telemetry;
+  this.store = createStore(this);
+
+  // Map [panel id => panel instance]
+  // Stores all the instances of sidebar panels like rule view, computed view, ...
+  this._panels = new Map();
+
+  this._clearSearchResultsLabel = this._clearSearchResultsLabel.bind(this);
+  this._handleDefaultColorUnitPrefChange =
+    this._handleDefaultColorUnitPrefChange.bind(this);
+  this._handleRejectionIfNotDestroyed =
+    this._handleRejectionIfNotDestroyed.bind(this);
+  this._onTargetAvailable = this._onTargetAvailable.bind(this);
+  this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+  this._onTargetSelected = this._onTargetSelected.bind(this);
+  this._onWillNavigate = this._onWillNavigate.bind(this);
+  this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
+
+  this.onDetached = this.onDetached.bind(this);
+  this.onHostChanged = this.onHostChanged.bind(this);
+  this.onNewSelection = this.onNewSelection.bind(this);
+  this.onResourceAvailable = this.onResourceAvailable.bind(this);
+  this.onRootNodeAvailable = this.onRootNodeAvailable.bind(this);
+  this._onLazyPanelResize = this._onLazyPanelResize.bind(this);
+  this.onPanelWindowResize = debounce(
+    this._onLazyPanelResize,
+    LAZY_RESIZE_INTERVAL_MS,
+    this
+  );
+  this.onPickerCanceled = this.onPickerCanceled.bind(this);
+  this.onPickerHovered = this.onPickerHovered.bind(this);
+  this.onPickerPicked = this.onPickerPicked.bind(this);
+  this.onSidebarHidden = this.onSidebarHidden.bind(this);
+  this.onSidebarResized = this.onSidebarResized.bind(this);
+  this.onSidebarSelect = this.onSidebarSelect.bind(this);
+  this.onSidebarShown = this.onSidebarShown.bind(this);
+  this.onSidebarToggle = this.onSidebarToggle.bind(this);
+  this.onReflowInSelection = this.onReflowInSelection.bind(this);
+  this.listenForSearchEvents = this.listenForSearchEvents.bind(this);
+
+  this.prefObserver = new PrefObserver("devtools.");
+  this.prefObserver.on(
+    DEFAULT_COLOR_UNIT_PREF,
+    this._handleDefaultColorUnitPrefChange
+  );
+  this.defaultColorUnit = Services.prefs.getStringPref(DEFAULT_COLOR_UNIT_PREF);
+}
+
+Inspector.prototype = {
+  /**
+   * InspectorPanel.open() is effectively an asynchronous constructor.
+   * Set any attributes or listeners that rely on the document being loaded or fronts
+   * from the InspectorFront and Target here.
+   */
+  async init() {
+    // Localize all the nodes containing a data-localization attribute.
+    localizeMarkup(this.panelDoc);
+
+    this._fluentL10n = new FluentL10n();
+    await this._fluentL10n.init(["devtools/client/compatibility.ftl"]);
+
+    // Display the main inspector panel with: search input, markup view and breadcrumbs.
+    this.panelDoc.getElementById("inspector-main-content").style.visibility =
+      "visible";
+
+    // Setup the splitter before watching targets & resources.
+    // The markup view will be initialized after we get the first root-node
+    // resource, and the splitter should be initialized before that.
+    // The markup view is rendered in an iframe and the splitter will move the
+    // parent of the iframe in the DOM tree which would reset the state of the
+    // iframe if it had already been initialized.
+    this.setupSplitter();
+
+    await this.commands.targetCommand.watchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onSelected: this._onTargetSelected,
+      onDestroyed: this._onTargetDestroyed,
+    });
+
+    await this.toolbox.resourceCommand.watchResources(
+      [
+        this.toolbox.resourceCommand.TYPES.ROOT_NODE,
+        // To observe CSS change before opening changes view.
+        this.toolbox.resourceCommand.TYPES.CSS_CHANGE,
+        this.toolbox.resourceCommand.TYPES.DOCUMENT_EVENT,
+      ],
+      { onAvailable: this.onResourceAvailable }
+    );
+
+    // Store the URL of the target page prior to navigation in order to ensure
+    // telemetry counts in the Grid Inspector are not double counted on reload.
+    this.previousURL = this.currentTarget.url;
+
+    // Note: setupSidebar() really has to be called after the first target has
+    // been processed, so that the cssProperties getter works.
+    // But the rest could be moved before the watch* calls.
+    this.styleChangeTracker = new InspectorStyleChangeTracker(this);
+    this.setupSidebar();
+    this.breadcrumbs = new HTMLBreadcrumbs(this);
+    this.setupExtensionSidebars();
+    this.setupSearchBox();
+
+    this.onNewSelection();
+
+    this.toolbox.on("host-changed", this.onHostChanged);
+    this.toolbox.nodePicker.on("picker-node-hovered", this.onPickerHovered);
+    this.toolbox.nodePicker.on("picker-node-canceled", this.onPickerCanceled);
+    this.toolbox.nodePicker.on("picker-node-picked", this.onPickerPicked);
+    this.selection.on("new-node-front", this.onNewSelection);
+    this.selection.on("detached-front", this.onDetached);
+
+    // Log the 3 pane inspector setting on inspector open. The question we want to answer
+    // is:
+    // "What proportion of users use the 3 pane vs 2 pane inspector on inspector open?"
+    this.telemetry.keyedScalarAdd(
+      THREE_PANE_ENABLED_SCALAR,
+      this.is3PaneModeEnabled,
+      1
+    );
+
+    return this;
+  },
+
+  async _onTargetAvailable({ targetFront }) {
+    // Ignore all targets but the top level one
+    if (!targetFront.isTopLevel) {
+      return;
+    }
+
+    await this.initInspectorFront(targetFront);
+
+    // the target might have been destroyed when reloading quickly,
+    // while waiting for inspector front initialization
+    if (targetFront.isDestroyed()) {
+      return;
+    }
+
+    await Promise.all([
+      this._getCssProperties(targetFront),
+      this._getAccessibilityFront(targetFront),
+    ]);
+  },
+
+  async _onTargetSelected({ targetFront }) {
+    // We don't use this.highlighters since it creates a HighlightersOverlay if it wasn't
+    // the case yet.
+    if (this._highlighters) {
+      this._highlighters.hideAllHighlighters();
+    }
+    if (targetFront.isDestroyed()) {
+      return;
+    }
+
+    await this.initInspectorFront(targetFront);
+
+    // the target might have been destroyed when reloading quickly,
+    // while waiting for inspector front initialization
+    if (targetFront.isDestroyed()) {
+      return;
+    }
+
+    const { walker } = await targetFront.getFront("inspector");
+    const rootNodeFront = await walker.getRootNode();
+    // When a given target is focused, don't try to reset the selection
+    this.selectionCssSelectors = [];
+    this._defaultNode = null;
+
+    // onRootNodeAvailable will take care of populating the markup view
+    await this.onRootNodeAvailable(rootNodeFront);
+  },
+
+  _onTargetDestroyed({ targetFront }) {
+    // Ignore all targets but the top level one
+    if (!targetFront.isTopLevel) {
+      return;
+    }
+
+    this._defaultNode = null;
+    this.selection.setNodeFront(null);
+  },
+
+  onResourceAvailable(resources) {
+    // Store all onRootNodeAvailable calls which are asynchronous.
+    const rootNodeAvailablePromises = [];
+
+    for (const resource of resources) {
+      const isTopLevelTarget = !!resource.targetFront?.isTopLevel;
+      const isTopLevelDocument = !!resource.isTopLevelDocument;
+      if (
+        resource.resourceType ===
+          this.toolbox.resourceCommand.TYPES.ROOT_NODE &&
+        // It might happen that the ROOT_NODE resource (which is a Front) is already
+        // destroyed, and in such case we want to ignore it.
+        !resource.isDestroyed() &&
+        isTopLevelTarget &&
+        isTopLevelDocument
+      ) {
+        rootNodeAvailablePromises.push(this.onRootNodeAvailable(resource));
+      }
+
+      // Only consider top level document, and ignore remote iframes top document
+      if (
+        resource.resourceType ===
+          this.toolbox.resourceCommand.TYPES.DOCUMENT_EVENT &&
+        resource.name === "will-navigate" &&
+        isTopLevelTarget
+      ) {
+        this._onWillNavigate();
+      }
+    }
+
+    return Promise.all(rootNodeAvailablePromises);
+  },
+
+  /**
+   * Reset the inspector on new root mutation.
+   */
+  async onRootNodeAvailable(rootNodeFront) {
+    // Record new-root timing for telemetry
+    this._newRootStart = this.panelWin.performance.now();
+
+    this._defaultNode = null;
+    this.selection.setNodeFront(null);
+    this._destroyMarkup();
+
+    try {
+      const defaultNode = await this._getDefaultNodeForSelection(rootNodeFront);
+      if (!defaultNode) {
+        return;
+      }
+
+      this.selection.setNodeFront(defaultNode, {
+        reason: "inspector-default-selection",
+      });
+
+      await this._initMarkupView();
+
+      // Setup the toolbar again, since its content may depend on the current document.
+      this.setupToolbar();
+    } catch (e) {
+      this._handleRejectionIfNotDestroyed(e);
+    }
+  },
+
+  async _initMarkupView() {
+    if (!this._markupFrame) {
+      this._markupFrame = this.panelDoc.createElement("iframe");
+      this._markupFrame.setAttribute(
+        "aria-label",
+        INSPECTOR_L10N.getStr("inspector.panelLabel.markupView")
+      );
+      this._markupFrame.setAttribute("flex", "1");
+      // This is needed to enable tooltips inside the iframe document.
+      this._markupFrame.setAttribute("tooltip", "aHTMLTooltip");
+
+      this._markupBox = this.panelDoc.getElementById("markup-box");
+      this._markupBox.style.visibility = "hidden";
+      this._markupBox.appendChild(this._markupFrame);
+
+      const onMarkupFrameLoaded = new Promise(r =>
+        this._markupFrame.addEventListener("load", r, {
+          capture: true,
+          once: true,
+        })
+      );
+
+      this._markupFrame.setAttribute("src", "markup/markup.xhtml");
+
+      await onMarkupFrameLoaded;
+    }
+
+    this._markupFrame.contentWindow.focus();
+    this._markupBox.style.visibility = "visible";
+    this.markup = new MarkupView(this, this._markupFrame, this._toolbox.win);
+    // TODO: We might be able to merge markuploaded, new-root and reloaded.
+    this.emitForTests("markuploaded");
+
+    const onExpand = this.markup.expandNode(this.selection.nodeFront);
+
+    // Restore the highlighter states prior to emitting "new-root".
+    if (this._highlighters) {
+      await Promise.all([
+        this.highlighters.restoreFlexboxState(),
+        this.highlighters.restoreGridState(),
+      ]);
+    }
+    this.emit("new-root");
+
+    // Wait for full expand of the selected node in order to ensure
+    // the markup view is fully emitted before firing 'reloaded'.
+    // 'reloaded' is used to know when the panel is fully updated
+    // after a page reload.
+    await onExpand;
+
+    this.emit("reloaded");
+
+    // Record the time between new-root event and inspector fully loaded.
+    if (this._newRootStart) {
+      // Only log the timing when inspector is not destroyed and is in foreground.
+      if (this.toolbox && this.toolbox.currentToolId == "inspector") {
+        const delay = this.panelWin.performance.now() - this._newRootStart;
+        const telemetryKey = "DEVTOOLS_INSPECTOR_NEW_ROOT_TO_RELOAD_DELAY_MS";
+        const histogram = this.telemetry.getHistogramById(telemetryKey);
+        histogram.add(delay);
+      }
+      delete this._newRootStart;
+    }
+  },
+
+  async initInspectorFront(targetFront) {
+    this.inspectorFront = await targetFront.getFront("inspector");
+    this.walker = this.inspectorFront.walker;
+  },
+
+  get toolbox() {
+    return this._toolbox;
+  },
+
+  get commands() {
+    return this._commands;
+  },
+
+  /**
+   * Get the list of InspectorFront instances that correspond to all of the inspectable
+   * targets in remote frames nested within the document inspected here, as well as the
+   * current InspectorFront instance.
+   *
+   * @return {Array} The list of InspectorFront instances.
+   */
+  async getAllInspectorFronts() {
+    return this.commands.targetCommand.getAllFronts(
+      [this.commands.targetCommand.TYPES.FRAME],
+      "inspector"
+    );
+  },
+
+  get highlighters() {
+    if (!this._highlighters) {
+      this._highlighters = new HighlightersOverlay(this);
+    }
+
+    return this._highlighters;
+  },
+
+  get _3PanePrefName() {
+    // All other contexts: webextension and browser toolbox
+    // are considered as "chrome"
+    return this.commands.descriptorFront.isTabDescriptor
+      ? THREE_PANE_ENABLED_PREF
+      : THREE_PANE_CHROME_ENABLED_PREF;
+  },
+
+  get is3PaneModeEnabled() {
+    if (!this._is3PaneModeEnabled) {
+      this._is3PaneModeEnabled = Services.prefs.getBoolPref(
+        this._3PanePrefName
+      );
+    }
+    return this._is3PaneModeEnabled;
+  },
+
+  set is3PaneModeEnabled(value) {
+    this._is3PaneModeEnabled = value;
+    Services.prefs.setBoolPref(this._3PanePrefName, this._is3PaneModeEnabled);
+  },
+
+  get search() {
+    if (!this._search) {
+      this._search = new InspectorSearch(
+        this,
+        this.searchBox,
+        this.searchClearButton
+      );
+    }
+
+    return this._search;
+  },
+
+  get selection() {
+    return this.toolbox.selection;
+  },
+
+  get cssProperties() {
+    return this._cssProperties.cssProperties;
+  },
+
+  get fluentL10n() {
+    return this._fluentL10n;
+  },
+
+  // Duration in milliseconds after which to hide the highlighter for the picked node.
+  // While testing, disable auto hiding to prevent intermittent test failures.
+  // Some tests are very slow. If the highlighter is hidden after a delay, the test may
+  // find itself midway through without a highlighter to test.
+  // This value is exposed on Inspector so individual tests can restore it when needed.
+  HIGHLIGHTER_AUTOHIDE_TIMER: flags.testing ? 0 : 1000,
+
+  _handleDefaultColorUnitPrefChange() {
+    this.defaultColorUnit = Services.prefs.getStringPref(
+      DEFAULT_COLOR_UNIT_PREF
+    );
+  },
+
+  /**
+   * Handle promise rejections for various asynchronous actions, and only log errors if
+   * the inspector panel still exists.
+   * This is useful to silence useless errors that happen when the inspector is closed
+   * while still initializing (and making protocol requests).
+   */
+  _handleRejectionIfNotDestroyed(e) {
+    if (!this._destroyed) {
+      console.error(e);
+    }
+  },
+
+  _onWillNavigate() {
+    this._defaultNode = null;
+    this.selection.setNodeFront(null);
+    if (this._highlighters) {
+      this._highlighters.hideAllHighlighters();
+    }
+    this._destroyMarkup();
+    this._pendingSelectionUnique = null;
+  },
+
+  async _getCssProperties(targetFront) {
+    this._cssProperties = await targetFront.getFront("cssProperties");
+  },
+
+  async _getAccessibilityFront(targetFront) {
+    this.accessibilityFront = await targetFront.getFront("accessibility");
+    return this.accessibilityFront;
+  },
+
+  /**
+   * Return a promise that will resolve to the default node for selection.
+   *
+   * @param {NodeFront} rootNodeFront
+   *        The current root node front for the top walker.
+   */
+  async _getDefaultNodeForSelection(rootNodeFront) {
+    if (this._defaultNode) {
+      return this._defaultNode;
+    }
+
+    // Save the _pendingSelectionUnique on the current inspector instance.
+    const pendingSelectionUnique = Symbol("pending-selection");
+    this._pendingSelectionUnique = pendingSelectionUnique;
+
+    if (this._pendingSelectionUnique !== pendingSelectionUnique) {
+      // If this method was called again while waiting, bail out.
+      return null;
+    }
+
+    const walker = rootNodeFront.walkerFront;
+    const cssSelectors = this.selectionCssSelectors;
+    // Try to find a default node using three strategies:
+    const defaultNodeSelectors = [
+      // - first try to match css selectors for the selection
+      () =>
+        cssSelectors.length
+          ? this.commands.inspectorCommand.findNodeFrontFromSelectors(
+              cssSelectors
+            )
+          : null,
+      // - otherwise try to get the "body" element
+      () => walker.querySelector(rootNodeFront, "body"),
+      // - finally get the documentElement element if nothing else worked.
+      () => walker.documentElement(),
+    ];
+
+    // Try all default node selectors until a valid node is found.
+    for (const selector of defaultNodeSelectors) {
+      const node = await selector();
+      if (this._pendingSelectionUnique !== pendingSelectionUnique) {
+        // If this method was called again while waiting, bail out.
+        return null;
+      }
+
+      if (node) {
+        this._defaultNode = node;
+        return node;
+      }
+    }
+
+    return null;
+  },
+
+  /**
+   * Top level target front getter.
+   */
+  get currentTarget() {
+    return this.commands.targetCommand.targetFront;
+  },
+
+  /**
+   * Hooks the searchbar to show result and auto completion suggestions.
+   */
+  setupSearchBox() {
+    this.searchBox = this.panelDoc.getElementById("inspector-searchbox");
+    this.searchClearButton = this.panelDoc.getElementById(
+      "inspector-searchinput-clear"
+    );
+    this.searchResultsContainer = this.panelDoc.getElementById(
+      "inspector-searchlabel-container"
+    );
+    this.searchResultsLabel = this.panelDoc.getElementById(
+      "inspector-searchlabel"
+    );
+
+    this.searchBox.addEventListener("focus", this.listenForSearchEvents, {
+      once: true,
+    });
+
+    this.createSearchBoxShortcuts();
+  },
+
+  listenForSearchEvents() {
+    this.search.on("search-cleared", this._clearSearchResultsLabel);
+    this.search.on("search-result", this._updateSearchResultsLabel);
+  },
+
+  createSearchBoxShortcuts() {
+    this.searchboxShortcuts = new KeyShortcuts({
+      window: this.panelDoc.defaultView,
+      // The inspector search shortcuts need to be available from everywhere in the
+      // inspector, and the inspector uses iframes (markupview, sidepanel webextensions).
+      // Use the chromeEventHandler as the target to catch events from all frames.
+      target: this.toolbox.getChromeEventHandler(),
+    });
+    const key = INSPECTOR_L10N.getStr("inspector.searchHTML.key");
+    this.searchboxShortcuts.on(key, event => {
+      // Prevent overriding same shortcut from the computed/rule views
+      if (
+        event.originalTarget.closest("#sidebar-panel-ruleview") ||
+        event.originalTarget.closest("#sidebar-panel-computedview")
+      ) {
+        return;
+      }
+
+      const win = event.originalTarget.ownerGlobal;
+      // Check if the event is coming from an inspector window to avoid catching
+      // events from other panels. Note, we are testing both win and win.parent
+      // because the inspector uses iframes.
+      if (win === this.panelWin || win.parent === this.panelWin) {
+        event.preventDefault();
+        this.searchBox.focus();
+      }
+    });
+  },
+
+  get searchSuggestions() {
+    return this.search.autocompleter;
+  },
+
+  _clearSearchResultsLabel(result) {
+    return this._updateSearchResultsLabel(result, true);
+  },
+
+  _updateSearchResultsLabel(result, clear = false) {
+    let str = "";
+    if (!clear) {
+      if (result) {
+        str = INSPECTOR_L10N.getFormatStr(
+          "inspector.searchResultsCount2",
+          result.resultsIndex + 1,
+          result.resultsLength
+        );
+      } else {
+        str = INSPECTOR_L10N.getStr("inspector.searchResultsNone");
+      }
+
+      this.searchResultsContainer.hidden = false;
+    } else {
+      this.searchResultsContainer.hidden = true;
+    }
+
+    this.searchResultsLabel.textContent = str;
+  },
+
+  get React() {
+    return this._toolbox.React;
+  },
+
+  get ReactDOM() {
+    return this._toolbox.ReactDOM;
+  },
+
+  get ReactRedux() {
+    return this._toolbox.ReactRedux;
+  },
+
+  get browserRequire() {
+    return this._toolbox.browserRequire;
+  },
+
+  get InspectorTabPanel() {
+    if (!this._InspectorTabPanel) {
+      this._InspectorTabPanel = this.React.createFactory(
+        this.browserRequire(
+          "devtools/client/inspector/components/InspectorTabPanel"
+        )
+      );
+    }
+    return this._InspectorTabPanel;
+  },
+
+  get InspectorSplitBox() {
+    if (!this._InspectorSplitBox) {
+      this._InspectorSplitBox = this.React.createFactory(
+        this.browserRequire(
+          "devtools/client/shared/components/splitter/SplitBox"
+        )
+      );
+    }
+    return this._InspectorSplitBox;
+  },
+
+  get TabBar() {
+    if (!this._TabBar) {
+      this._TabBar = this.React.createFactory(
+        this.browserRequire("devtools/client/shared/components/tabs/TabBar")
+      );
+    }
+    return this._TabBar;
+  },
+
+  /**
+   * Check if the inspector should use the landscape mode.
+   *
+   * @return {Boolean} true if the inspector should be in landscape mode.
+   */
+  useLandscapeMode() {
+    if (!this.panelDoc) {
+      return true;
+    }
+
+    const splitterBox = this.panelDoc.getElementById("inspector-splitter-box");
+    const width = splitterBox.clientWidth;
+
+    return this.is3PaneModeEnabled &&
+      (this.toolbox.hostType == Toolbox.HostType.LEFT ||
+        this.toolbox.hostType == Toolbox.HostType.RIGHT)
+      ? width > SIDE_PORTAIT_MODE_WIDTH_THRESHOLD
+      : width > PORTRAIT_MODE_WIDTH_THRESHOLD;
+  },
+
+  /**
+   * Build Splitter located between the main and side area of
+   * the Inspector panel.
+   */
+  setupSplitter() {
+    const { width, height, splitSidebarWidth } = this.getSidebarSize();
+
+    this.sidebarSplitBoxRef = this.React.createRef();
+
+    const splitter = this.InspectorSplitBox({
+      className: "inspector-sidebar-splitter",
+      initialWidth: width,
+      initialHeight: height,
+      minSize: "10%",
+      maxSize: "80%",
+      splitterSize: 1,
+      endPanelControl: true,
+      startPanel: this.InspectorTabPanel({
+        id: "inspector-main-content",
+      }),
+      endPanel: this.InspectorSplitBox({
+        initialWidth: splitSidebarWidth,
+        minSize: "225px",
+        maxSize: "80%",
+        splitterSize: this.is3PaneModeEnabled ? 1 : 0,
+        endPanelControl: this.is3PaneModeEnabled,
+        startPanel: this.InspectorTabPanel({
+          id: "inspector-rules-container",
+        }),
+        endPanel: this.InspectorTabPanel({
+          id: "inspector-sidebar-container",
+        }),
+        ref: this.sidebarSplitBoxRef,
+      }),
+      vert: this.useLandscapeMode(),
+      onControlledPanelResized: this.onSidebarResized,
+    });
+
+    this.splitBox = this.ReactDOM.render(
+      splitter,
+      this.panelDoc.getElementById("inspector-splitter-box")
+    );
+
+    this.panelWin.addEventListener("resize", this.onPanelWindowResize, true);
+  },
+
+  async _onLazyPanelResize() {
+    // We can be called on a closed window or destroyed toolbox because of the deferred task.
+    if (
+      window.closed ||
+      this._destroyed ||
+      this._toolbox.currentToolId !== "inspector"
+    ) {
+      return;
+    }
+
+    this.splitBox.setState({ vert: this.useLandscapeMode() });
+    this.emit("inspector-resize");
+  },
+
+  getSidebarSize() {
+    let width;
+    let height;
+    let splitSidebarWidth;
+
+    // Initialize splitter size from preferences.
+    try {
+      width = Services.prefs.getIntPref("devtools.toolsidebar-width.inspector");
+      height = Services.prefs.getIntPref(
+        "devtools.toolsidebar-height.inspector"
+      );
+      splitSidebarWidth = Services.prefs.getIntPref(
+        "devtools.toolsidebar-width.inspector.splitsidebar"
+      );
+    } catch (e) {
+      // Set width and height of the splitter. Only one
+      // value is really useful at a time depending on the current
+      // orientation (vertical/horizontal).
+      // Having both is supported by the splitter component.
+      width = this.is3PaneModeEnabled
+        ? INITIAL_SIDEBAR_SIZE * 2
+        : INITIAL_SIDEBAR_SIZE;
+      height = INITIAL_SIDEBAR_SIZE;
+      splitSidebarWidth = INITIAL_SIDEBAR_SIZE;
+    }
+
+    return { width, height, splitSidebarWidth };
+  },
+
+  onSidebarHidden() {
+    // Store the current splitter size to preferences.
+    const state = this.splitBox.state;
+    Services.prefs.setIntPref(
+      "devtools.toolsidebar-width.inspector",
+      state.width
+    );
+    Services.prefs.setIntPref(
+      "devtools.toolsidebar-height.inspector",
+      state.height
+    );
+    Services.prefs.setIntPref(
+      "devtools.toolsidebar-width.inspector.splitsidebar",
+      this.sidebarSplitBoxRef.current.state.width
+    );
+  },
+
+  onSidebarResized(width, height) {
+    this.toolbox.emit("inspector-sidebar-resized", { width, height });
+  },
+
+  /**
+   * Returns inspector tab that is active.
+   */
+  getActiveSidebar() {
+    return Services.prefs.getCharPref("devtools.inspector.activeSidebar");
+  },
+
+  setActiveSidebar(toolId) {
+    Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
+  },
+
+  /**
+   * Returns tab that is explicitly selected by user.
+   */
+  getSelectedSidebar() {
+    return Services.prefs.getCharPref("devtools.inspector.selectedSidebar");
+  },
+
+  setSelectedSidebar(toolId) {
+    Services.prefs.setCharPref("devtools.inspector.selectedSidebar", toolId);
+  },
+
+  onSidebarSelect(toolId) {
+    // Save the currently selected sidebar panel
+    this.setSelectedSidebar(toolId);
+    this.setActiveSidebar(toolId);
+
+    // Then forces the panel creation by calling getPanel
+    // (This allows lazy loading the panels only once we select them)
+    this.getPanel(toolId);
+
+    this.toolbox.emit("inspector-sidebar-select", toolId);
+  },
+
+  onSidebarShown() {
+    const { width, height, splitSidebarWidth } = this.getSidebarSize();
+    this.splitBox.setState({ width, height });
+    this.sidebarSplitBoxRef.current.setState({ width: splitSidebarWidth });
+  },
+
+  async onSidebarToggle() {
+    this.is3PaneModeEnabled = !this.is3PaneModeEnabled;
+    await this.setupToolbar();
+    this.addRuleView({ skipQueue: true });
+  },
+
+  /**
+   * Sets the inspector sidebar split box state. Shows the splitter inside the sidebar
+   * split box, specifies the end panel control and resizes the split box width depending
+   * on the width of the toolbox.
+   */
+  setSidebarSplitBoxState() {
+    const toolboxWidth = this.panelDoc.getElementById(
+      "inspector-splitter-box"
+    ).clientWidth;
+
+    // Get the inspector sidebar's (right panel in horizontal mode or bottom panel in
+    // vertical mode) width.
+    const sidebarWidth = this.splitBox.state.width;
+    // This variable represents the width of the right panel in horizontal mode or
+    // bottom-right panel in vertical mode width in 3 pane mode.
+    let sidebarSplitboxWidth;
+
+    if (this.useLandscapeMode()) {
+      // Whether or not doubling the inspector sidebar's (right panel in horizontal mode
+      // or bottom panel in vertical mode) width will be bigger than half of the
+      // toolbox's width.
+      const canDoubleSidebarWidth = sidebarWidth * 2 < toolboxWidth / 2;
+
+      // Resize the main split box's end panel that contains the middle and right panel.
+      // Attempts to resize the main split box's end panel to be double the size of the
+      // existing sidebar's width when switching to 3 pane mode. However, if the middle
+      // and right panel's width together is greater than half of the toolbox's width,
+      // split all 3 panels to be equally sized by resizing the end panel to be 2/3 of
+      // the current toolbox's width.
+      this.splitBox.setState({
+        width: canDoubleSidebarWidth
+          ? sidebarWidth * 2
+          : (toolboxWidth * 2) / 3,
+      });
+
+      // In landscape/horizontal mode, set the right panel back to its original
+      // inspector sidebar width if we can double the sidebar width. Otherwise, set
+      // the width of the right panel to be 1/3 of the toolbox's width since all 3
+      // panels will be equally sized.
+      sidebarSplitboxWidth = canDoubleSidebarWidth
+        ? sidebarWidth
+        : toolboxWidth / 3;
+    } else {
+      // In portrait/vertical mode, set the bottom-right panel to be 1/2 of the
+      // toolbox's width.
+      sidebarSplitboxWidth = toolboxWidth / 2;
+    }
+
+    // Show the splitter inside the sidebar split box. Sets the width of the inspector
+    // sidebar and specify that the end (right in horizontal or bottom-right in
+    // vertical) panel of the sidebar split box should be controlled when resizing.
+    this.sidebarSplitBoxRef.current.setState({
+      endPanelControl: true,
+      splitterSize: 1,
+      width: sidebarSplitboxWidth,
+    });
+  },
+
+  /**
+   * Adds the rule view to the middle (in landscape/horizontal mode) or bottom-left panel
+   * (in portrait/vertical mode) or inspector sidebar depending on whether or not it is 3
+   * pane mode. Rule view is selected when switching to 2 pane mode. Selected sidebar pref
+   * is used otherwise.
+   */
+  addRuleView({ skipQueue = false } = {}) {
+    const selectedSidebar = this.getSelectedSidebar();
+    const ruleViewSidebar = this.sidebarSplitBoxRef.current.startPanelContainer;
+
+    if (this.is3PaneModeEnabled) {
+      // Convert to 3 pane mode by removing the rule view from the inspector sidebar
+      // and adding the rule view to the middle (in landscape/horizontal mode) or
+      // bottom-left (in portrait/vertical mode) panel.
+      ruleViewSidebar.style.display = "block";
+
+      this.setSidebarSplitBoxState();
+
+      // Force the rule view panel creation by calling getPanel
+      this.getPanel("ruleview");
+
+      this.sidebar.removeTab("ruleview");
+      this.sidebar.select(selectedSidebar);
+
+      this.ruleViewSideBar.addExistingTab(
+        "ruleview",
+        INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
+        true
+      );
+
+      this.ruleViewSideBar.show();
+    } else {
+      // When switching to 2 pane view, always set rule view as the active sidebar.
+      this.setActiveSidebar("ruleview");
+      // Removes the rule view from the 3 pane mode and adds the rule view to the main
+      // inspector sidebar.
+      ruleViewSidebar.style.display = "none";
+
+      // Set the width of the split box (right panel in horziontal mode and bottom panel
+      // in vertical mode) to be the width of the inspector sidebar.
+      const splitterBox = this.panelDoc.getElementById(
+        "inspector-splitter-box"
+      );
+      this.splitBox.setState({
+        width: this.useLandscapeMode()
+          ? this.sidebarSplitBoxRef.current.state.width
+          : splitterBox.clientWidth,
+      });
+
+      // Hide the splitter to prevent any drag events in the sidebar split box and
+      // specify that the end (right panel in horziontal mode or bottom panel in vertical
+      // mode) panel should be uncontrolled when resizing.
+      this.sidebarSplitBoxRef.current.setState({
+        endPanelControl: false,
+        splitterSize: 0,
+      });
+
+      this.ruleViewSideBar.hide();
+      this.ruleViewSideBar.removeTab("ruleview");
+
+      if (skipQueue) {
+        this.sidebar.addExistingTab(
+          "ruleview",
+          INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
+          true,
+          0
+        );
+      } else {
+        this.sidebar.queueExistingTab(
+          "ruleview",
+          INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
+          true,
+          0
+        );
+      }
+    }
+
+    // Adding or removing a tab from sidebar sets selectedSidebar by the active tab,
+    // which we should revert.
+    this.setSelectedSidebar(selectedSidebar);
+
+    this.emit("ruleview-added");
+  },
+
+  /**
+   * Returns a boolean indicating whether a sidebar panel instance exists.
+   */
+  hasPanel(id) {
+    return this._panels.has(id);
+  },
+
+  /**
+   * Lazily get and create panel instances displayed in the sidebar
+   */
+  getPanel(id) {
+    if (this._panels.has(id)) {
+      return this._panels.get(id);
+    }
+
+    let panel;
+    switch (id) {
+      case "animationinspector":
+        const AnimationInspector = this.browserRequire(
+          "devtools/client/inspector/animation/animation"
+        );
+        panel = new AnimationInspector(this, this.panelWin);
+        break;
+      case "boxmodel":
+        // box-model isn't a panel on its own, it used to, now it is being used by
+        // the layout view which retrieves an instance via getPanel.
+        const BoxModel = require("resource://devtools/client/inspector/boxmodel/box-model.js");
+        panel = new BoxModel(this, this.panelWin);
+        break;
+      case "changesview":
+        const ChangesView = this.browserRequire(
+          "devtools/client/inspector/changes/ChangesView"
+        );
+        panel = new ChangesView(this, this.panelWin);
+        break;
+      case "compatibilityview":
+        const CompatibilityView = this.browserRequire(
+          "devtools/client/inspector/compatibility/CompatibilityView"
+        );
+        panel = new CompatibilityView(this, this.panelWin);
+        break;
+      case "computedview":
+        const { ComputedViewTool } = this.browserRequire(
+          "devtools/client/inspector/computed/computed"
+        );
+        panel = new ComputedViewTool(this, this.panelWin);
+        break;
+      case "fontinspector":
+        const FontInspector = this.browserRequire(
+          "devtools/client/inspector/fonts/fonts"
+        );
+        panel = new FontInspector(this, this.panelWin);
+        break;
+      case "layoutview":
+        const LayoutView = this.browserRequire(
+          "devtools/client/inspector/layout/layout"
+        );
+        panel = new LayoutView(this, this.panelWin);
+        break;
+      case "ruleview":
+        const {
+          RuleViewTool,
+        } = require("resource://devtools/client/inspector/rules/rules.js");
+        panel = new RuleViewTool(this, this.panelWin);
+        break;
+      default:
+        // This is a custom panel or a non lazy-loaded one.
+        return null;
+    }
+
+    if (panel) {
+      this._panels.set(id, panel);
+    }
+
+    return panel;
+  },
+
+  /**
+   * Build the sidebar.
+   */
+  setupSidebar() {
+    const sidebar = this.panelDoc.getElementById("inspector-sidebar");
+    const options = {
+      showAllTabsMenu: true,
+      allTabsMenuButtonTooltip: INSPECTOR_L10N.getStr(
+        "allTabsMenuButton.tooltip"
+      ),
+      sidebarToggleButton: {
+        collapsed: !this.is3PaneModeEnabled,
+        collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideThreePaneMode"),
+        expandPaneTitle: INSPECTOR_L10N.getStr("inspector.showThreePaneMode"),
+        onClick: this.onSidebarToggle,
+      },
+    };
+
+    this.sidebar = new ToolSidebar(sidebar, this, "inspector", options);
+    this.sidebar.on("select", this.onSidebarSelect);
+
+    const ruleSideBar = this.panelDoc.getElementById("inspector-rules-sidebar");
+    this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, "inspector", {
+      hideTabstripe: true,
+    });
+
+    // Append all side panels
+    this.addRuleView();
+
+    // Inspector sidebar panels in order of appearance.
+    const sidebarPanels = [];
+    sidebarPanels.push({
+      id: "layoutview",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
+    });
+
+    sidebarPanels.push({
+      id: "computedview",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.computedViewTitle"),
+    });
+
+    sidebarPanels.push({
+      id: "changesview",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle"),
+    });
+
+    sidebarPanels.push({
+      id: "compatibilityview",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.compatibilityViewTitle"),
+    });
+
+    sidebarPanels.push({
+      id: "fontinspector",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
+    });
+
+    sidebarPanels.push({
+      id: "animationinspector",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle"),
+    });
+
+    const defaultTab = this.getActiveSidebar();
+
+    for (const { id, title } of sidebarPanels) {
+      // The Computed panel is not a React-based panel. We pick its element container from
+      // the DOM and wrap it in a React component (InspectorTabPanel) so it behaves like
+      // other panels when using the Inspector's tool sidebar.
+      if (id === "computedview") {
+        this.sidebar.queueExistingTab(id, title, defaultTab === id);
+      } else {
+        // When `panel` is a function, it is called when the tab should render. It is
+        // expected to return a React component to populate the tab's content area.
+        // Calling this method on-demand allows us to lazy-load the requested panel.
+        this.sidebar.queueTab(
+          id,
+          title,
+          {
+            props: {
+              id,
+              title,
+            },
+            panel: () => {
+              return this.getPanel(id).provider;
+            },
+          },
+          defaultTab === id
+        );
+      }
+    }
+
+    this.sidebar.addAllQueuedTabs();
+
+    // Persist splitter state in preferences.
+    this.sidebar.on("show", this.onSidebarShown);
+    this.sidebar.on("hide", this.onSidebarHidden);
+    this.sidebar.on("destroy", this.onSidebarHidden);
+
+    this.sidebar.show();
+  },
+
+  /**
+   * Setup any extension sidebar already registered to the toolbox when the inspector.
+   * has been created for the first time.
+   */
+  setupExtensionSidebars() {
+    for (const [sidebarId, { title }] of this.toolbox
+      .inspectorExtensionSidebars) {
+      this.addExtensionSidebar(sidebarId, { title });
+    }
+  },
+
+  /**
+   * Create a side-panel tab controlled by an extension
+   * using the devtools.panels.elements.createSidebarPane and sidebar object API
+   *
+   * @param {String} id
+   *        An unique id for the sidebar tab.
+   * @param {Object} options
+   * @param {String} options.title
+   *        The tab title
+   */
+  addExtensionSidebar(id, { title }) {
+    if (this._panels.has(id)) {
+      throw new Error(
+        `Cannot create an extension sidebar for the existent id: ${id}`
+      );
+    }
+
+    const extensionSidebar = new ExtensionSidebar(this, { id, title });
+
+    // TODO(rpl): pass some extension metadata (e.g. extension name and icon) to customize
+    // the render of the extension title (e.g. use the icon in the sidebar and show the
+    // extension name in a tooltip).
+    this.addSidebarTab(id, title, extensionSidebar.provider, false);
+
+    this._panels.set(id, extensionSidebar);
+
+    // Emit the created ExtensionSidebar instance to the listeners registered
+    // on the toolbox by the "devtools.panels.elements" WebExtensions API.
+    this.toolbox.emit(`extension-sidebar-created-${id}`, extensionSidebar);
+  },
+
+  /**
+   * Remove and destroy a side-panel tab controlled by an extension (e.g. when the
+   * extension has been disable/uninstalled while the toolbox and inspector were
+   * still open).
+   *
+   * @param {String} id
+   *        The id of the sidebar tab to destroy.
+   */
+  removeExtensionSidebar(id) {
+    if (!this._panels.has(id)) {
+      throw new Error(`Unable to find a sidebar panel with id "${id}"`);
+    }
+
+    const panel = this._panels.get(id);
+
+    if (!(panel instanceof ExtensionSidebar)) {
+      throw new Error(
+        `The sidebar panel with id "${id}" is not an ExtensionSidebar`
+      );
+    }
+
+    this._panels.delete(id);
+    this.sidebar.removeTab(id);
+    panel.destroy();
+  },
+
+  /**
+   * Register a side-panel tab. This API can be used outside of
+   * DevTools (e.g. from an extension) as well as by DevTools
+   * code base.
+   *
+   * @param {string} tab uniq id
+   * @param {string} title tab title
+   * @param {React.Component} panel component. See `InspectorPanelTab` as an example.
+   * @param {boolean} selected true if the panel should be selected
+   */
+  addSidebarTab(id, title, panel, selected) {
+    this.sidebar.addTab(id, title, panel, selected);
+  },
+
+  /**
+   * Method to check whether the document is a HTML document and
+   * pickColorFromPage method is available or not.
+   *
+   * @return {Boolean} true if the eyedropper highlighter is supported by the current
+   *         document.
+   */
+  async supportsEyeDropper() {
+    try {
+      return await this.inspectorFront.supportsHighlighters();
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  },
+
+  async setupToolbar() {
+    this.teardownToolbar();
+
+    // Setup the add-node button.
+    this.addNode = this.addNode.bind(this);
+    this.addNodeButton = this.panelDoc.getElementById(
+      "inspector-element-add-button"
+    );
+    this.addNodeButton.addEventListener("click", this.addNode);
+
+    // Setup the eye-dropper icon if we're in an HTML document and we have actor support.
+    const canShowEyeDropper = await this.supportsEyeDropper();
+
+    // Bail out if the inspector was destroyed in the meantime and panelDoc is no longer
+    // available.
+    if (!this.panelDoc) {
+      return;
+    }
+
+    if (canShowEyeDropper) {
+      this.onEyeDropperDone = this.onEyeDropperDone.bind(this);
+      this.onEyeDropperButtonClicked =
+        this.onEyeDropperButtonClicked.bind(this);
+      this.eyeDropperButton = this.panelDoc.getElementById(
+        "inspector-eyedropper-toggle"
+      );
+      this.eyeDropperButton.disabled = false;
+      this.eyeDropperButton.title = INSPECTOR_L10N.getStr(
+        "inspector.eyedropper.label"
+      );
+      this.eyeDropperButton.addEventListener(
+        "click",
+        this.onEyeDropperButtonClicked
+      );
+    } else {
+      const eyeDropperButton = this.panelDoc.getElementById(
+        "inspector-eyedropper-toggle"
+      );
+      eyeDropperButton.disabled = true;
+      eyeDropperButton.title = INSPECTOR_L10N.getStr(
+        "eyedropper.disabled.title"
+      );
+    }
+
+    this.emit("inspector-toolbar-updated");
+  },
+
+  teardownToolbar() {
+    if (this.addNodeButton) {
+      this.addNodeButton.removeEventListener("click", this.addNode);
+      this.addNodeButton = null;
+    }
+
+    if (this.eyeDropperButton) {
+      this.eyeDropperButton.removeEventListener(
+        "click",
+        this.onEyeDropperButtonClicked
+      );
+      this.eyeDropperButton = null;
+    }
+  },
+
+  _selectionCssSelectors: null,
+
+  /**
+   * Set the array of CSS selectors for the currently selected node.
+   * We use an array of selectors in case the element is in iframes.
+   * Will store the current target url along with it to allow pre-selection at
+   * reload
+   */
+  set selectionCssSelectors(cssSelectors = []) {
+    if (this._destroyed) {
+      return;
+    }
+
+    this._selectionCssSelectors = {
+      selectors: cssSelectors,
+      url: this.currentTarget.url,
+    };
+  },
+
+  /**
+   * Get the CSS selectors for the current selection if any, that is, if a node
+   * is actually selected and that node has been selected while on the same url
+   */
+  get selectionCssSelectors() {
+    if (
+      this._selectionCssSelectors &&
+      this._selectionCssSelectors.url === this.currentTarget.url
+    ) {
+      return this._selectionCssSelectors.selectors;
+    }
+    return [];
+  },
+
+  /**
+   * On any new selection made by the user, store the array of css selectors
+   * of the selected node so it can be restored after reload of the same page
+   */
+  updateSelectionCssSelectors() {
+    if (!this.selection.isElementNode()) {
+      return;
+    }
+
+    this.commands.inspectorCommand
+      .getNodeFrontSelectorsFromTopDocument(this.selection.nodeFront)
+      .then(selectors => {
+        this.selectionCssSelectors = selectors;
+        // emit an event so tests relying on the property being set can properly wait
+        // for it.
+        this.emitForTests("selection-css-selectors-updated", selectors);
+      }, this._handleRejectionIfNotDestroyed);
+  },
+
+  /**
+   * Can a new HTML element be inserted into the currently selected element?
+   * @return {Boolean}
+   */
+  canAddHTMLChild() {
+    const selection = this.selection;
+
+    // Don't allow to insert an element into these elements. This should only
+    // contain elements where walker.insertAdjacentHTML has no effect.
+    const invalidTagNames = ["html", "iframe"];
+
+    return (
+      selection.isHTMLNode() &&
+      selection.isElementNode() &&
+      !selection.isPseudoElementNode() &&
+      !selection.isAnonymousNode() &&
+      !invalidTagNames.includes(selection.nodeFront.nodeName.toLowerCase())
+    );
+  },
+
+  /**
+   * Update the state of the add button in the toolbar depending on the current selection.
+   */
+  updateAddElementButton() {
+    const btn = this.panelDoc.getElementById("inspector-element-add-button");
+    if (this.canAddHTMLChild()) {
+      btn.removeAttribute("disabled");
+    } else {
+      btn.setAttribute("disabled", "true");
+    }
+  },
+
+  /**
+   * Handler for the "host-changed" event from the toolbox. Resets the inspector
+   * sidebar sizes when the toolbox host type changes.
+   */
+  async onHostChanged() {
+    // Eagerly call our resize handling code to process the fact that we
+    // switched hosts. If we don't do this, we'll wait for resize events + 200ms
+    // to have passed, which causes the old layout to noticeably show up in the
+    // new host, followed by the updated one.
+    await this._onLazyPanelResize();
+    // Note that we may have been destroyed by now, especially in tests, so we
+    // need to check if that's happened before touching anything else.
+    if (!this.currentTarget || !this.is3PaneModeEnabled) {
+      return;
+    }
+
+    // When changing hosts, the toolbox chromeEventHandler might change, for instance when
+    // switching from docked to window hosts. Recreate the searchbox shortcuts.
+    this.searchboxShortcuts.destroy();
+    this.createSearchBoxShortcuts();
+
+    this.setSidebarSplitBoxState();
+  },
+
+  /**
+   * When a new node is selected.
+   */
+  onNewSelection(value, reason) {
+    if (reason === "selection-destroy") {
+      return;
+    }
+
+    this.updateAddElementButton();
+    this.updateSelectionCssSelectors();
+    this.trackReflowsInSelection();
+
+    const selfUpdate = this.updating("inspector-panel");
+    executeSoon(() => {
+      try {
+        selfUpdate(this.selection.nodeFront);
+        this.telemetry.scalarAdd(TELEMETRY_SCALAR_NODE_SELECTION_COUNT, 1);
+      } catch (ex) {
+        console.error(ex);
+      }
+    });
+  },
+
+  /**
+   * Starts listening for reflows in the targetFront of the currently selected nodeFront.
+   */
+  async trackReflowsInSelection() {
+    this.untrackReflowsInSelection();
+    if (!this.selection.nodeFront) {
+      return;
+    }
+
+    if (this._destroyed) {
+      return;
+    }
+
+    try {
+      await this.commands.resourceCommand.watchResources(
+        [this.commands.resourceCommand.TYPES.REFLOW],
+        {
+          onAvailable: this.onReflowInSelection,
+        }
+      );
+    } catch (e) {
+      // it can happen that watchResources fails as the client closes while we're processing
+      // some asynchronous call.
+      // In order to still get valid exceptions, we re-throw the exception if the inspector
+      // isn't destroyed.
+      if (!this._destroyed) {
+        throw e;
+      }
+    }
+  },
+
+  /**
+   * Stops listening for reflows.
+   */
+  untrackReflowsInSelection() {
+    this.commands.resourceCommand.unwatchResources(
+      [this.commands.resourceCommand.TYPES.REFLOW],
+      {
+        onAvailable: this.onReflowInSelection,
+      }
+    );
+  },
+
+  onReflowInSelection() {
+    // This event will be fired whenever a reflow is detected in the target front of the
+    // selected node front (so when a reflow is detected inside any of the windows that
+    // belong to the BrowsingContext when the currently selected node lives).
+    this.emit("reflow-in-selected-target");
+  },
+
+  /**
+   * Delay the "inspector-updated" notification while a tool
+   * is updating itself.  Returns a function that must be
+   * invoked when the tool is done updating with the node
+   * that the tool is viewing.
+   */
+  updating(name) {
+    if (
+      this._updateProgress &&
+      this._updateProgress.node != this.selection.nodeFront
+    ) {
+      this.cancelUpdate();
+    }
+
+    if (!this._updateProgress) {
+      // Start an update in progress.
+      const self = this;
+      this._updateProgress = {
+        node: this.selection.nodeFront,
+        outstanding: new Set(),
+        checkDone() {
+          if (this !== self._updateProgress) {
+            return;
+          }
+          // Cancel update if there is no `selection` anymore.
+          // It can happen if the inspector panel is already destroyed.
+          if (!self.selection || this.node !== self.selection.nodeFront) {
+            self.cancelUpdate();
+            return;
+          }
+          if (this.outstanding.size !== 0) {
+            return;
+          }
+
+          self._updateProgress = null;
+          self.emit("inspector-updated", name);
+        },
+      };
+    }
+
+    const progress = this._updateProgress;
+    const done = function () {
+      progress.outstanding.delete(done);
+      progress.checkDone();
+    };
+    progress.outstanding.add(done);
+    return done;
+  },
+
+  /**
+   * Cancel notification of inspector updates.
+   */
+  cancelUpdate() {
+    this._updateProgress = null;
+  },
+
+  /**
+   * When a node is deleted, select its parent node or the defaultNode if no
+   * parent is found (may happen when deleting an iframe inside which the
+   * node was selected).
+   */
+  onDetached(parentNode) {
+    this.breadcrumbs.cutAfter(this.breadcrumbs.indexOf(parentNode));
+    const nodeFront = parentNode ? parentNode : this._defaultNode;
+    this.selection.setNodeFront(nodeFront, { reason: "detached" });
+  },
+
+  /**
+   * Destroy the inspector.
+   */
+  destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+
+    this.cancelUpdate();
+
+    this.panelWin.removeEventListener("resize", this.onPanelWindowResize, true);
+    this.selection.off("new-node-front", this.onNewSelection);
+    this.selection.off("detached-front", this.onDetached);
+    this.toolbox.nodePicker.off("picker-node-canceled", this.onPickerCanceled);
+    this.toolbox.nodePicker.off("picker-node-hovered", this.onPickerHovered);
+    this.toolbox.nodePicker.off("picker-node-picked", this.onPickerPicked);
+
+    // Destroy the sidebar first as it may unregister stuff
+    // and still use random attributes on inspector and layout panel
+    this.sidebar.destroy();
+    // Unregister sidebar listener *after* destroying it
+    // in order to process its destroy event and save sidebar sizes
+    this.sidebar.off("select", this.onSidebarSelect);
+    this.sidebar.off("show", this.onSidebarShown);
+    this.sidebar.off("hide", this.onSidebarHidden);
+    this.sidebar.off("destroy", this.onSidebarHidden);
+
+    for (const [, panel] of this._panels) {
+      panel.destroy();
+    }
+    this._panels.clear();
+
+    if (this._highlighters) {
+      this._highlighters.destroy();
+    }
+
+    if (this._search) {
+      this._search.destroy();
+      this._search = null;
+    }
+
+    this.ruleViewSideBar.destroy();
+    this.ruleViewSideBar = null;
+
+    this._destroyMarkup();
+
+    this.teardownToolbar();
+
+    this.prefObserver.on(
+      DEFAULT_COLOR_UNIT_PREF,
+      this._handleDefaultColorUnitPrefChange
+    );
+    this.prefObserver.destroy();
+
+    this.breadcrumbs.destroy();
+    this.styleChangeTracker.destroy();
+    this.searchboxShortcuts.destroy();
+    this.searchboxShortcuts = null;
+
+    this.commands.targetCommand.unwatchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onSelected: this._onTargetSelected,
+      onDestroyed: this._onTargetDestroyed,
+    });
+    const { resourceCommand } = this.toolbox;
+    resourceCommand.unwatchResources(
+      [
+        resourceCommand.TYPES.ROOT_NODE,
+        resourceCommand.TYPES.CSS_CHANGE,
+        resourceCommand.TYPES.DOCUMENT_EVENT,
+      ],
+      { onAvailable: this.onResourceAvailable }
+    );
+    this.untrackReflowsInSelection();
+
+    this._InspectorTabPanel = null;
+    this._TabBar = null;
+    this._InspectorSplitBox = null;
+    this.sidebarSplitBoxRef = null;
+    // Note that we do not unmount inspector-splitter-box
+    // as it regresses inspector closing performance while not releasing
+    // any object (bug 1729925)
+    this.splitBox = null;
+
+    this._is3PaneModeEnabled = null;
+    this._markupBox = null;
+    this._markupFrame = null;
+    this._toolbox = null;
+    this._commands = null;
+    this.breadcrumbs = null;
+    this.inspectorFront = null;
+    this._cssProperties = null;
+    this.accessibilityFront = null;
+    this._highlighters = null;
+    this.walker = null;
+    this._defaultNode = null;
+    this.panelDoc = null;
+    this.panelWin.inspector = null;
+    this.panelWin = null;
+    this.resultsLength = null;
+    this.searchBox.removeEventListener("focus", this.listenForSearchEvents);
+    this.searchBox = null;
+    this.show3PaneTooltip = null;
+    this.sidebar = null;
+    this.store = null;
+    this.telemetry = null;
+  },
+
+  _destroyMarkup() {
+    if (this.markup) {
+      this.markup.destroy();
+      this.markup = null;
+    }
+
+    if (this._markupBox) {
+      this._markupBox.style.visibility = "hidden";
+    }
+  },
+
+  onEyeDropperButtonClicked() {
+    this.eyeDropperButton.classList.contains("checked")
+      ? this.hideEyeDropper()
+      : this.showEyeDropper();
+  },
+
+  startEyeDropperListeners() {
+    this.toolbox.tellRDMAboutPickerState(true, PICKER_TYPES.EYEDROPPER);
+    this.inspectorFront.once("color-pick-canceled", this.onEyeDropperDone);
+    this.inspectorFront.once("color-picked", this.onEyeDropperDone);
+    this.once("new-root", this.onEyeDropperDone);
+  },
+
+  stopEyeDropperListeners() {
+    this.toolbox.tellRDMAboutPickerState(false, PICKER_TYPES.EYEDROPPER);
+    this.inspectorFront.off("color-pick-canceled", this.onEyeDropperDone);
+    this.inspectorFront.off("color-picked", this.onEyeDropperDone);
+    this.off("new-root", this.onEyeDropperDone);
+  },
+
+  onEyeDropperDone() {
+    this.eyeDropperButton.classList.remove("checked");
+    this.stopEyeDropperListeners();
+  },
+
+  /**
+   * Show the eyedropper on the page.
+   * @return {Promise} resolves when the eyedropper is visible.
+   */
+  showEyeDropper() {
+    // The eyedropper button doesn't exist, most probably because the actor doesn't
+    // support the pickColorFromPage, or because the page isn't HTML.
+    if (!this.eyeDropperButton) {
+      return null;
+    }
+    // turn off node picker when color picker is starting
+    this.toolbox.nodePicker.stop({ canceled: true }).catch(console.error);
+    this.telemetry.scalarSet(TELEMETRY_EYEDROPPER_OPENED, 1);
+    this.eyeDropperButton.classList.add("checked");
+    this.startEyeDropperListeners();
+    return this.inspectorFront
+      .pickColorFromPage({ copyOnSelect: true })
+      .catch(console.error);
+  },
+
+  /**
+   * Hide the eyedropper.
+   * @return {Promise} resolves when the eyedropper is hidden.
+   */
+  hideEyeDropper() {
+    // The eyedropper button doesn't exist, most probably  because the page isn't HTML.
+    if (!this.eyeDropperButton) {
+      return null;
+    }
+
+    this.eyeDropperButton.classList.remove("checked");
+    this.stopEyeDropperListeners();
+    return this.inspectorFront.cancelPickColorFromPage().catch(console.error);
+  },
+
+  /**
+   * Create a new node as the last child of the current selection, expand the
+   * parent and select the new node.
+   */
+  async addNode() {
+    if (!this.canAddHTMLChild()) {
+      return;
+    }
+
+    // turn off node picker when add node is triggered
+    this.toolbox.nodePicker.stop({ canceled: true });
+
+    // turn off color picker when add node is triggered
+    this.hideEyeDropper();
+
+    const nodeFront = this.selection.nodeFront;
+    const html = "<div></div>";
+
+    // Insert the html and expect a childList markup mutation.
+    const onMutations = this.once("markupmutation");
+    await nodeFront.walkerFront.insertAdjacentHTML(
+      this.selection.nodeFront,
+      "beforeEnd",
+      html
+    );
+    await onMutations;
+
+    // Expand the parent node.
+    this.markup.expandNode(nodeFront);
+  },
+
+  /**
+   * Toggle a pseudo class.
+   */
+  togglePseudoClass(pseudo) {
+    if (this.selection.isElementNode()) {
+      const node = this.selection.nodeFront;
+      if (node.hasPseudoClassLock(pseudo)) {
+        return node.walkerFront.removePseudoClassLock(node, pseudo, {
+          parents: true,
+        });
+      }
+
+      const hierarchical = pseudo == ":hover" || pseudo == ":active";
+      return node.walkerFront.addPseudoClassLock(node, pseudo, {
+        parents: hierarchical,
+      });
+    }
+    return Promise.resolve();
+  },
+
+  /**
+   * Initiate screenshot command on selected node.
+   */
+  async screenshotNode() {
+    // Bug 1332936 - it's possible to call `screenshotNode` while the BoxModel highlighter
+    // is still visible, therefore showing it in the picture.
+    // Note that other highlighters will still be visible. See Bug 1663881
+    await this.highlighters.hideHighlighterType(
+      this.highlighters.TYPES.BOXMODEL
+    );
+
+    const clipboardEnabled = Services.prefs.getBoolPref(
+      "devtools.screenshot.clipboard.enabled"
+    );
+    const args = {
+      file: !clipboardEnabled,
+      nodeActorID: this.selection.nodeFront.actorID,
+      clipboard: clipboardEnabled,
+    };
+
+    const messages = await captureAndSaveScreenshot(
+      this.selection.nodeFront.targetFront,
+      this.panelWin,
+      args
+    );
+    const notificationBox = this.toolbox.getNotificationBox();
+    const priorityMap = {
+      error: notificationBox.PRIORITY_CRITICAL_HIGH,
+      warn: notificationBox.PRIORITY_WARNING_HIGH,
+    };
+    for (const { text, level } of messages) {
+      // captureAndSaveScreenshot returns "saved" messages, that indicate where the
+      // screenshot was saved. We don't want to display them as the download UI can be
+      // used to open the file.
+      if (level !== "warn" && level !== "error") {
+        continue;
+      }
+      notificationBox.appendNotification(text, null, null, priorityMap[level]);
+    }
+  },
+
+  /**
+   * Returns an object containing the shared handler functions used in React components.
+   */
+  getCommonComponentProps() {
+    return {
+      setSelectedNode: this.selection.setNodeFront,
+    };
+  },
+
+  onPickerCanceled() {
+    this.highlighters.hideHighlighterType(this.highlighters.TYPES.BOXMODEL);
+  },
+
+  onPickerHovered(nodeFront) {
+    this.highlighters.showHighlighterTypeForNode(
+      this.highlighters.TYPES.BOXMODEL,
+      nodeFront
+    );
+  },
+
+  onPickerPicked(nodeFront) {
+    if (this.toolbox.isDebugTargetFenix()) {
+      // When debugging a phone, as we don't have the "hover overlay", we want to provide
+      // feedback to the user so they know where they tapped
+      this.highlighters.showHighlighterTypeForNode(
+        this.highlighters.TYPES.BOXMODEL,
+        nodeFront,
+        { duration: this.HIGHLIGHTER_AUTOHIDE_TIMER }
+      );
+      return;
+    }
+    this.highlighters.hideHighlighterType(this.highlighters.TYPES.BOXMODEL);
+  },
+
+  async inspectNodeActor(nodeGrip, reason) {
+    const nodeFront = await this.inspectorFront.getNodeFrontFromNodeGrip(
+      nodeGrip
+    );
+    if (!nodeFront) {
+      console.error(
+        "The object cannot be linked to the inspector, the " +
+          "corresponding nodeFront could not be found."
+      );
+      return false;
+    }
+
+    const isAttached = await this.walker.isInDOMTree(nodeFront);
+    if (!isAttached) {
+      console.error("Selected DOMNode is not attached to the document tree.");
+      return false;
+    }
+
+    await this.selection.setNodeFront(nodeFront, { reason });
+    return true;
+  },
+
+  /**
+   * Called by toolbox.js on `Esc` keydown.
+   *
+   * @param {AbortController} abortController
+   */
+  onToolboxChromeEventHandlerEscapeKeyDown(abortController) {
+    // If the event tooltip is displayed, hide it and prevent the Esc event listener
+    // of the toolbox to occur (e.g. don't toggle split console)
+    if (
+      this.markup.hasEventDetailsTooltip() &&
+      this.markup.eventDetailsTooltip.isVisible()
+    ) {
+      this.markup.eventDetailsTooltip.hide();
+      abortController.abort();
+    }
+  },
+};
+
+exports.Inspector = Inspector;
diff --git a/devtools/client/inspector/layout/components/LayoutApp.js b/devtools/client/inspector/layout/components/LayoutApp.js
new file mode 100644
index 0000000000..a4a3e3b4e2
--- /dev/null
+++ b/devtools/client/inspector/layout/components/LayoutApp.js
@@ -0,0 +1,202 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  createRef,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const {
+  getSelectorFromGrip,
+  translateNodeFrontToGrip,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+const Accordion = createFactory(
+  require("resource://devtools/client/shared/components/Accordion.js")
+);
+const BoxModel = createFactory(
+  require("resource://devtools/client/inspector/boxmodel/components/BoxModel.js")
+);
+const Flexbox = createFactory(
+  require("resource://devtools/client/inspector/flexbox/components/Flexbox.js")
+);
+const Grid = createFactory(
+  require("resource://devtools/client/inspector/grids/components/Grid.js")
+);
+
+const BoxModelTypes = require("resource://devtools/client/inspector/boxmodel/types.js");
+const FlexboxTypes = require("resource://devtools/client/inspector/flexbox/types.js");
+const GridTypes = require("resource://devtools/client/inspector/grids/types.js");
+
+const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
+const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
+
+const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
+const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
+
+const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
+const FLEX_CONTAINER_OPENED_PREF = "devtools.layout.flex-container.opened";
+const FLEX_ITEM_OPENED_PREF = "devtools.layout.flex-item.opened";
+const GRID_OPENED_PREF = "devtools.layout.grid.opened";
+const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
+
+class LayoutApp extends PureComponent {
+  static get propTypes() {
+    return {
+      boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
+      dispatch: PropTypes.func.isRequired,
+      flexbox: PropTypes.shape(FlexboxTypes.flexbox).isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired,
+      highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings)
+        .isRequired,
+      onSetFlexboxOverlayColor: PropTypes.func.isRequired,
+      onSetGridOverlayColor: PropTypes.func.isRequired,
+      onShowBoxModelEditor: PropTypes.func.isRequired,
+      onShowGridOutlineHighlight: PropTypes.func,
+      onToggleGeometryEditor: PropTypes.func.isRequired,
+      onToggleGridHighlighter: PropTypes.func.isRequired,
+      onToggleShowGridAreas: PropTypes.func.isRequired,
+      onToggleShowGridLineNumbers: PropTypes.func.isRequired,
+      onToggleShowInfiniteLines: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      showBoxModelProperties: PropTypes.bool.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.containerRef = createRef();
+
+    this.scrollToTop = this.scrollToTop.bind(this);
+  }
+
+  getBoxModelSection() {
+    return {
+      component: BoxModel,
+      componentProps: this.props,
+      contentClassName: "layout-content",
+      header: BOXMODEL_L10N.getStr("boxmodel.title"),
+      id: "layout-section-boxmodel",
+      opened: Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
+      onToggle: opened => {
+        Services.prefs.setBoolPref(BOXMODEL_OPENED_PREF, opened);
+      },
+    };
+  }
+
+  getFlexAccordionData(flexContainer) {
+    if (!flexContainer.actorID) {
+      // No flex container or flex item selected.
+      return {
+        pref: FLEXBOX_OPENED_PREF,
+        id: "layout-section-flex",
+        header: LAYOUT_L10N.getStr("flexbox.header"),
+      };
+    } else if (!flexContainer.flexItemShown) {
+      // No flex item selected.
+      return {
+        pref: FLEX_CONTAINER_OPENED_PREF,
+        id: "layout-section-flex-container",
+        header: LAYOUT_L10N.getStr("flexbox.flexContainer"),
+      };
+    }
+
+    return {
+      pref: FLEX_ITEM_OPENED_PREF,
+      id: "layout-section-flex-item",
+      header: LAYOUT_L10N.getFormatStr(
+        "flexbox.flexItemOf",
+        getSelectorFromGrip(translateNodeFrontToGrip(flexContainer.nodeFront))
+      ),
+    };
+  }
+
+  getFlexSection(flexContainer) {
+    const { pref, id, header } = this.getFlexAccordionData(flexContainer);
+
+    return {
+      className: "flex-accordion",
+      component: Flexbox,
+      componentProps: {
+        ...this.props,
+        flexContainer,
+        scrollToTop: this.scrollToTop,
+      },
+      contentClassName: "layout-content",
+      header,
+      id,
+      opened: Services.prefs.getBoolPref(pref),
+      onToggle: opened => {
+        Services.prefs.setBoolPref(pref, opened);
+      },
+    };
+  }
+
+  getGridSection() {
+    return {
+      component: Grid,
+      componentProps: this.props,
+      contentClassName: "layout-content",
+      header: LAYOUT_L10N.getStr("layout.header"),
+      id: "layout-grid-section",
+      opened: Services.prefs.getBoolPref(GRID_OPENED_PREF),
+      onToggle: opened => {
+        Services.prefs.setBoolPref(GRID_OPENED_PREF, opened);
+      },
+    };
+  }
+
+  /**
+   * Scrolls to the top of the layout container.
+   */
+  scrollToTop() {
+    this.containerRef.current.scrollTop = 0;
+  }
+
+  render() {
+    const { flexContainer, flexItemContainer } = this.props.flexbox;
+
+    const items = [
+      this.getFlexSection(flexContainer),
+      this.getGridSection(),
+      this.getBoxModelSection(),
+    ];
+
+    // If the current selected node is both a flex container and flex item. Render
+    // an extra accordion with another Flexbox component where the node is shown as an
+    // item of its parent flex container.
+    // If the node was selected from the markup-view, then show this accordion after the
+    // container accordion. Otherwise show it first.
+    // The reason is that if the user selects an item-container in the markup view, it
+    // is assumed that they want to primarily see that element as a container, so the
+    // container info should be at the top.
+    if (flexItemContainer?.actorID) {
+      items.splice(
+        this.props.flexbox.initiatedByMarkupViewSelection ? 1 : 0,
+        0,
+        this.getFlexSection(flexItemContainer)
+      );
+    }
+
+    return dom.div(
+      {
+        className: "layout-container",
+        ref: this.containerRef,
+        role: "document",
+      },
+      Accordion({ items })
+    );
+  }
+}
+
+module.exports = connect(state => state)(LayoutApp);
diff --git a/devtools/client/inspector/layout/components/moz.build b/devtools/client/inspector/layout/components/moz.build
new file mode 100644
index 0000000000..bb3e2624ca
--- /dev/null
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "LayoutApp.js",
+)
diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js
new file mode 100644
index 0000000000..b44dc29c2a
--- /dev/null
+++ b/devtools/client/inspector/layout/layout.js
@@ -0,0 +1,136 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  createElement,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const FlexboxInspector = require("resource://devtools/client/inspector/flexbox/flexbox.js");
+const GridInspector = require("resource://devtools/client/inspector/grids/grid-inspector.js");
+
+const LayoutApp = createFactory(
+  require("resource://devtools/client/inspector/layout/components/LayoutApp.js")
+);
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+loader.lazyRequireGetter(
+  this,
+  "SwatchColorPickerTooltip",
+  "resource://devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js"
+);
+
+class LayoutView {
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.store = inspector.store;
+
+    this.init();
+  }
+
+  init() {
+    if (!this.inspector) {
+      return;
+    }
+
+    const { setSelectedNode } = this.inspector.getCommonComponentProps();
+
+    const {
+      onShowBoxModelEditor,
+      onShowRulePreviewTooltip,
+      onToggleGeometryEditor,
+    } = this.inspector.getPanel("boxmodel").getComponentProps();
+
+    this.flexboxInspector = new FlexboxInspector(
+      this.inspector,
+      this.inspector.panelWin
+    );
+    const { onSetFlexboxOverlayColor } =
+      this.flexboxInspector.getComponentProps();
+
+    this.gridInspector = new GridInspector(
+      this.inspector,
+      this.inspector.panelWin
+    );
+    const {
+      onSetGridOverlayColor,
+      onToggleGridHighlighter,
+      onToggleShowGridAreas,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
+    } = this.gridInspector.getComponentProps();
+
+    const layoutApp = LayoutApp({
+      getSwatchColorPickerTooltip: () => this.swatchColorPickerTooltip,
+      onSetFlexboxOverlayColor,
+      onSetGridOverlayColor,
+      onShowBoxModelEditor,
+      onShowRulePreviewTooltip,
+      onToggleGeometryEditor,
+      onToggleGridHighlighter,
+      onToggleShowGridAreas,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
+      setSelectedNode,
+      /**
+       * Shows the box model properties under the box model if true, otherwise, hidden by
+       * default.
+       */
+      showBoxModelProperties: true,
+    });
+
+    const provider = createElement(
+      Provider,
+      {
+        id: "layoutview",
+        key: "layoutview",
+        store: this.store,
+        title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
+      },
+      layoutApp
+    );
+
+    // Expose the provider to let inspector.js use it in setupSidebar.
+    this.provider = provider;
+  }
+
+  /**
+   * Destruction function called when the inspector is destroyed. Cleans up references.
+   */
+  destroy() {
+    if (this._swatchColorPickerTooltip) {
+      this._swatchColorPickerTooltip.destroy();
+      this._swatchColorPickerTooltip = null;
+    }
+
+    this.flexboxInspector.destroy();
+    this.gridInspector.destroy();
+
+    this.document = null;
+    this.inspector = null;
+    this.store = null;
+  }
+
+  get swatchColorPickerTooltip() {
+    if (!this._swatchColorPickerTooltip) {
+      this._swatchColorPickerTooltip = new SwatchColorPickerTooltip(
+        this.inspector.toolbox.doc,
+        this.inspector
+      );
+    }
+
+    return this._swatchColorPickerTooltip;
+  }
+}
+
+module.exports = LayoutView;
diff --git a/devtools/client/inspector/layout/moz.build b/devtools/client/inspector/layout/moz.build
new file mode 100644
index 0000000000..42d0bf4c7b
--- /dev/null
+++ b/devtools/client/inspector/layout/moz.build
@@ -0,0 +1,17 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "components",
+    "utils",
+]
+
+DevToolsModules(
+    "layout.js",
+)
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Inspector: Layout")
diff --git a/devtools/client/inspector/layout/utils/l10n.js b/devtools/client/inspector/layout/utils/l10n.js
new file mode 100644
index 0000000000..12f5be3ad3
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/l10n.js
@@ -0,0 +1,17 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/layout.properties"
+);
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+  getFormatStrWithNumbers: (...args) => L10N.getFormatStrWithNumbers(...args),
+  numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
+};
diff --git a/devtools/client/inspector/layout/utils/moz.build b/devtools/client/inspector/layout/utils/moz.build
new file mode 100644
index 0000000000..ddee85b5f7
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "l10n.js",
+)
diff --git a/devtools/client/inspector/markup/components/TextNode.js b/devtools/client/inspector/markup/components/TextNode.js
new file mode 100644
index 0000000000..1cb88f2538
--- /dev/null
+++ b/devtools/client/inspector/markup/components/TextNode.js
@@ -0,0 +1,88 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createElement,
+  createRef,
+  Fragment,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  editableItem,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+
+const {
+  getStr,
+  getFormatStr,
+} = require("resource://devtools/client/inspector/markup/utils/l10n.js");
+
+class TextNode extends PureComponent {
+  static get propTypes() {
+    return {
+      showTextEditor: PropTypes.func.isRequired,
+      type: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: this.props.value,
+    };
+
+    this.valuePreRef = createRef();
+  }
+
+  componentDidMount() {
+    editableItem(
+      {
+        element: this.valuePreRef.current,
+        trigger: "dblclick",
+      },
+      element => {
+        this.props.showTextEditor(element);
+      }
+    );
+  }
+
+  render() {
+    const { value } = this.state;
+    const isComment = this.props.type === "comment";
+    const isWhiteSpace = !/[^\s]/.exec(value);
+
+    return createElement(
+      Fragment,
+      null,
+      isComment ? dom.span({}, "<!--") : null,
+      dom.pre(
+        {
+          className: isWhiteSpace ? "whitespace" : "",
+          ref: this.valuePreRef,
+          style: {
+            display: "inline-block",
+            whiteSpace: "normal",
+          },
+          tabIndex: -1,
+          title: isWhiteSpace
+            ? getFormatStr(
+                "markupView.whitespaceOnly",
+                value.replace(/\n/g, "⏎").replace(/\t/g, "⇥").replace(/ /g, "◦")
+              )
+            : "",
+          "data-label": getStr("markupView.whitespaceOnly.label"),
+        },
+        value
+      ),
+      isComment ? dom.span({}, "-->") : null
+    );
+  }
+}
+
+module.exports = TextNode;
diff --git a/devtools/client/inspector/markup/components/moz.build b/devtools/client/inspector/markup/components/moz.build
new file mode 100644
index 0000000000..13e4ee411d
--- /dev/null
+++ b/devtools/client/inspector/markup/components/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "TextNode.js",
+)
diff --git a/devtools/client/inspector/markup/markup-context-menu.js b/devtools/client/inspector/markup/markup-context-menu.js
new file mode 100644
index 0000000000..d07761b40f
--- /dev/null
+++ b/devtools/client/inspector/markup/markup-context-menu.js
@@ -0,0 +1,950 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+loader.lazyRequireGetter(
+  this,
+  "Menu",
+  "resource://devtools/client/framework/menu.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "MenuItem",
+  "resource://devtools/client/framework/menu-item.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+
+loader.lazyGetter(this, "TOOLBOX_L10N", function () {
+  return new LocalizationHelper("devtools/client/locales/toolbox.properties");
+});
+
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+/**
+ * Context menu for the Markup view.
+ */
+class MarkupContextMenu {
+  constructor(markup) {
+    this.markup = markup;
+    this.inspector = markup.inspector;
+    this.selection = this.inspector.selection;
+    this.target = this.inspector.currentTarget;
+    this.telemetry = this.inspector.telemetry;
+    this.toolbox = this.inspector.toolbox;
+    this.walker = this.inspector.walker;
+  }
+
+  destroy() {
+    this.markup = null;
+    this.inspector = null;
+    this.selection = null;
+    this.target = null;
+    this.telemetry = null;
+    this.toolbox = null;
+    this.walker = null;
+  }
+
+  show(event) {
+    if (
+      !Element.isInstance(event.originalTarget) ||
+      event.originalTarget.closest("input[type=text]") ||
+      event.originalTarget.closest("input:not([type])") ||
+      event.originalTarget.closest("textarea")
+    ) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    this._openMenu({
+      screenX: event.screenX,
+      screenY: event.screenY,
+      target: event.target,
+    });
+  }
+
+  /**
+   * This method is here for the benefit of copying links.
+   */
+  _copyAttributeLink(link) {
+    this.inspector.inspectorFront
+      .resolveRelativeURL(link, this.selection.nodeFront)
+      .then(url => {
+        clipboardHelper.copyString(url);
+      }, console.error);
+  }
+
+  /**
+   * Copy the full CSS Path of the selected Node to the clipboard.
+   */
+  _copyCssPath() {
+    if (!this.selection.isNode()) {
+      return;
+    }
+
+    this.telemetry.scalarSet("devtools.copy.full.css.selector.opened", 1);
+    this.selection.nodeFront
+      .getCssPath()
+      .then(path => {
+        clipboardHelper.copyString(path);
+      })
+      .catch(console.error);
+  }
+
+  /**
+   * Copy the data-uri for the currently selected image in the clipboard.
+   */
+  _copyImageDataUri() {
+    const container = this.markup.getContainer(this.selection.nodeFront);
+    if (container && container.isPreviewable()) {
+      container.copyImageDataUri();
+    }
+  }
+
+  /**
+   * Copy the innerHTML of the selected Node to the clipboard.
+   */
+  _copyInnerHTML() {
+    this.markup.copyInnerHTML();
+  }
+
+  /**
+   * Copy the outerHTML of the selected Node to the clipboard.
+   */
+  _copyOuterHTML() {
+    this.markup.copyOuterHTML();
+  }
+
+  /**
+   * Copy a unique selector of the selected Node to the clipboard.
+   */
+  _copyUniqueSelector() {
+    if (!this.selection.isNode()) {
+      return;
+    }
+
+    this.telemetry.scalarSet("devtools.copy.unique.css.selector.opened", 1);
+    this.selection.nodeFront
+      .getUniqueSelector()
+      .then(selector => {
+        clipboardHelper.copyString(selector);
+      })
+      .catch(console.error);
+  }
+
+  /**
+   * Copy the XPath of the selected Node to the clipboard.
+   */
+  _copyXPath() {
+    if (!this.selection.isNode()) {
+      return;
+    }
+
+    this.telemetry.scalarSet("devtools.copy.xpath.opened", 1);
+    this.selection.nodeFront
+      .getXPath()
+      .then(path => {
+        clipboardHelper.copyString(path);
+      })
+      .catch(console.error);
+  }
+
+  /**
+   * Delete the selected node.
+   */
+  _deleteNode() {
+    if (!this.selection.isNode() || this.selection.isRoot()) {
+      return;
+    }
+
+    const nodeFront = this.selection.nodeFront;
+
+    // If the markup panel is active, use the markup panel to delete
+    // the node, making this an undoable action.
+    if (this.markup) {
+      this.markup.deleteNode(nodeFront);
+    } else {
+      // remove the node from content
+      nodeFront.walkerFront.removeNode(nodeFront);
+    }
+  }
+
+  /**
+   * Duplicate the selected node
+   */
+  _duplicateNode() {
+    if (
+      !this.selection.isElementNode() ||
+      this.selection.isRoot() ||
+      this.selection.isAnonymousNode() ||
+      this.selection.isPseudoElementNode()
+    ) {
+      return;
+    }
+
+    const nodeFront = this.selection.nodeFront;
+    nodeFront.walkerFront.duplicateNode(nodeFront).catch(console.error);
+  }
+
+  /**
+   * Edit the outerHTML of the selected Node.
+   */
+  _editHTML() {
+    if (!this.selection.isNode()) {
+      return;
+    }
+    this.markup.beginEditingHTML(this.selection.nodeFront);
+  }
+
+  /**
+   * Jumps to the custom element definition in the debugger.
+   */
+  _jumpToCustomElementDefinition() {
+    const { url, line, column } =
+      this.selection.nodeFront.customElementLocation;
+    this.toolbox.viewSourceInDebugger(
+      url,
+      line,
+      column,
+      null,
+      "show_custom_element"
+    );
+  }
+
+  /**
+   * Add attribute to node.
+   * Used for node context menu and shouldn't be called directly.
+   */
+  _onAddAttribute() {
+    const container = this.markup.getContainer(this.selection.nodeFront);
+    container.addAttribute();
+  }
+
+  /**
+   * Copy attribute value for node.
+   * Used for node context menu and shouldn't be called directly.
+   */
+  _onCopyAttributeValue() {
+    clipboardHelper.copyString(this.nodeMenuTriggerInfo.value);
+  }
+
+  /**
+   * This method is here for the benefit of the node-menu-link-copy menu item
+   * in the inspector contextual-menu.
+   */
+  _onCopyLink() {
+    this._copyAttributeLink(this.contextMenuTarget.dataset.link);
+  }
+
+  /**
+   * Edit attribute for node.
+   * Used for node context menu and shouldn't be called directly.
+   */
+  _onEditAttribute() {
+    const container = this.markup.getContainer(this.selection.nodeFront);
+    container.editAttribute(this.nodeMenuTriggerInfo.name);
+  }
+
+  /**
+   * This method is here for the benefit of the node-menu-link-follow menu item
+   * in the inspector contextual-menu.
+   */
+  _onFollowLink() {
+    const type = this.contextMenuTarget.dataset.type;
+    const link = this.contextMenuTarget.dataset.link;
+    this.markup.followAttributeLink(type, link);
+  }
+
+  /**
+   * Remove attribute from node.
+   * Used for node context menu and shouldn't be called directly.
+   */
+  _onRemoveAttribute() {
+    const container = this.markup.getContainer(this.selection.nodeFront);
+    container.removeAttribute(this.nodeMenuTriggerInfo.name);
+  }
+
+  /**
+   * Paste the contents of the clipboard as adjacent HTML to the selected Node.
+   *
+   * @param  {String} position
+   *         The position as specified for Element.insertAdjacentHTML
+   *         (i.e. "beforeBegin", "afterBegin", "beforeEnd", "afterEnd").
+   */
+  _pasteAdjacentHTML(position) {
+    const content = this._getClipboardContentForPaste();
+    if (!content) {
+      return Promise.reject("No clipboard content for paste");
+    }
+
+    const node = this.selection.nodeFront;
+    return this.markup.insertAdjacentHTMLToNode(node, position, content);
+  }
+
+  /**
+   * Paste the contents of the clipboard into the selected Node's inner HTML.
+   */
+  _pasteInnerHTML() {
+    const content = this._getClipboardContentForPaste();
+    if (!content) {
+      return Promise.reject("No clipboard content for paste");
+    }
+
+    const node = this.selection.nodeFront;
+    return this.markup.getNodeInnerHTML(node).then(oldContent => {
+      this.markup.updateNodeInnerHTML(node, content, oldContent);
+    });
+  }
+
+  /**
+   * Paste the contents of the clipboard into the selected Node's outer HTML.
+   */
+  _pasteOuterHTML() {
+    const content = this._getClipboardContentForPaste();
+    if (!content) {
+      return Promise.reject("No clipboard content for paste");
+    }
+
+    const node = this.selection.nodeFront;
+    return this.markup.getNodeOuterHTML(node).then(oldContent => {
+      this.markup.updateNodeOuterHTML(node, content, oldContent);
+    });
+  }
+
+  /**
+   * Show Accessibility properties for currently selected node
+   */
+  async _showAccessibilityProperties() {
+    const a11yPanel = await this.toolbox.selectTool("accessibility");
+    // Select the accessible object in the panel and wait for the event that
+    // tells us it has been done.
+    const onSelected = a11yPanel.once("new-accessible-front-selected");
+    a11yPanel.selectAccessibleForNode(
+      this.selection.nodeFront,
+      "inspector-context-menu"
+    );
+    await onSelected;
+  }
+
+  /**
+   * Show DOM properties
+   */
+  _showDOMProperties() {
+    this.toolbox.openSplitConsole().then(() => {
+      const { hud } = this.toolbox.getPanel("webconsole");
+      hud.ui.wrapper.dispatchEvaluateExpression("inspect($0, true)");
+    });
+  }
+
+  /**
+   * Use in Console.
+   *
+   * Takes the currently selected node in the inspector and assigns it to a
+   * temp variable on the content window.  Also opens the split console and
+   * autofills it with the temp variable.
+   */
+  async _useInConsole() {
+    await this.toolbox.openSplitConsole();
+    const { hud } = this.toolbox.getPanel("webconsole");
+
+    const evalString = `{ let i = 0;
+      while (window.hasOwnProperty("temp" + i) && i < 1000) {
+        i++;
+      }
+      window["temp" + i] = $0;
+      "temp" + i;
+    }`;
+
+    const res = await this.toolbox.commands.scriptCommand.execute(evalString, {
+      selectedNodeActor: this.selection.nodeFront.actorID,
+      // Prevent any type of breakpoint when evaluating this code
+      disableBreaks: true,
+      // Ensure always overriding "$0" console command, even if the page implements its own "$0" variable.
+      preferConsoleCommandsOverLocalSymbols: true,
+    });
+    hud.setInputValue(res.result);
+    this.inspector.emit("console-var-ready");
+  }
+
+  _getAttributesSubmenu(isEditableElement) {
+    const attributesSubmenu = new Menu();
+    const nodeInfo = this.nodeMenuTriggerInfo;
+    const isAttributeClicked =
+      isEditableElement && nodeInfo && nodeInfo.type === "attribute";
+
+    attributesSubmenu.append(
+      new MenuItem({
+        id: "node-menu-add-attribute",
+        label: INSPECTOR_L10N.getStr("inspectorAddAttribute.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorAddAttribute.accesskey"),
+        disabled: !isEditableElement,
+        click: () => this._onAddAttribute(),
+      })
+    );
+    attributesSubmenu.append(
+      new MenuItem({
+        id: "node-menu-copy-attribute",
+        label: INSPECTOR_L10N.getFormatStr(
+          "inspectorCopyAttributeValue.label",
+          isAttributeClicked ? `${nodeInfo.value}` : ""
+        ),
+        accesskey: INSPECTOR_L10N.getStr(
+          "inspectorCopyAttributeValue.accesskey"
+        ),
+        disabled: !isAttributeClicked,
+        click: () => this._onCopyAttributeValue(),
+      })
+    );
+    attributesSubmenu.append(
+      new MenuItem({
+        id: "node-menu-edit-attribute",
+        label: INSPECTOR_L10N.getFormatStr(
+          "inspectorEditAttribute.label",
+          isAttributeClicked ? `${nodeInfo.name}` : ""
+        ),
+        accesskey: INSPECTOR_L10N.getStr("inspectorEditAttribute.accesskey"),
+        disabled: !isAttributeClicked,
+        click: () => this._onEditAttribute(),
+      })
+    );
+    attributesSubmenu.append(
+      new MenuItem({
+        id: "node-menu-remove-attribute",
+        label: INSPECTOR_L10N.getFormatStr(
+          "inspectorRemoveAttribute.label",
+          isAttributeClicked ? `${nodeInfo.name}` : ""
+        ),
+        accesskey: INSPECTOR_L10N.getStr("inspectorRemoveAttribute.accesskey"),
+        disabled: !isAttributeClicked,
+        click: () => this._onRemoveAttribute(),
+      })
+    );
+
+    return attributesSubmenu;
+  }
+
+  /**
+   * Returns the clipboard content if it is appropriate for pasting
+   * into the current node's outer HTML, otherwise returns null.
+   */
+  _getClipboardContentForPaste() {
+    const content = clipboardHelper.getText();
+    if (content && content.trim().length) {
+      return content;
+    }
+    return null;
+  }
+
+  _getCopySubmenu(markupContainer, isElement, isFragment) {
+    const copySubmenu = new Menu();
+    copySubmenu.append(
+      new MenuItem({
+        id: "node-menu-copyinner",
+        label: INSPECTOR_L10N.getStr("inspectorCopyInnerHTML.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorCopyInnerHTML.accesskey"),
+        disabled: !isElement && !isFragment,
+        click: () => this._copyInnerHTML(),
+      })
+    );
+    copySubmenu.append(
+      new MenuItem({
+        id: "node-menu-copyouter",
+        label: INSPECTOR_L10N.getStr("inspectorCopyOuterHTML.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorCopyOuterHTML.accesskey"),
+        disabled: !isElement,
+        click: () => this._copyOuterHTML(),
+      })
+    );
+    copySubmenu.append(
+      new MenuItem({
+        id: "node-menu-copyuniqueselector",
+        label: INSPECTOR_L10N.getStr("inspectorCopyCSSSelector.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorCopyCSSSelector.accesskey"),
+        disabled: !isElement,
+        click: () => this._copyUniqueSelector(),
+      })
+    );
+    copySubmenu.append(
+      new MenuItem({
+        id: "node-menu-copycsspath",
+        label: INSPECTOR_L10N.getStr("inspectorCopyCSSPath.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorCopyCSSPath.accesskey"),
+        disabled: !isElement,
+        click: () => this._copyCssPath(),
+      })
+    );
+    copySubmenu.append(
+      new MenuItem({
+        id: "node-menu-copyxpath",
+        label: INSPECTOR_L10N.getStr("inspectorCopyXPath.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorCopyXPath.accesskey"),
+        disabled: !isElement,
+        click: () => this._copyXPath(),
+      })
+    );
+    copySubmenu.append(
+      new MenuItem({
+        id: "node-menu-copyimagedatauri",
+        label: INSPECTOR_L10N.getStr("inspectorImageDataUri.label"),
+        disabled:
+          !isElement || !markupContainer || !markupContainer.isPreviewable(),
+        click: () => this._copyImageDataUri(),
+      })
+    );
+
+    return copySubmenu;
+  }
+
+  _getDOMBreakpointSubmenu(isElement) {
+    const menu = new Menu();
+    const mutationBreakpoints = this.selection.nodeFront.mutationBreakpoints;
+
+    menu.append(
+      new MenuItem({
+        id: "node-menu-mutation-breakpoint-subtree",
+        checked: mutationBreakpoints.subtree,
+        click: () => this.markup.toggleMutationBreakpoint("subtree"),
+        disabled: !isElement,
+        label: INSPECTOR_L10N.getStr("inspectorSubtreeModification.label"),
+        type: "checkbox",
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        id: "node-menu-mutation-breakpoint-attribute",
+        checked: mutationBreakpoints.attribute,
+        click: () => this.markup.toggleMutationBreakpoint("attribute"),
+        disabled: !isElement,
+        label: INSPECTOR_L10N.getStr("inspectorAttributeModification.label"),
+        type: "checkbox",
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        checked: mutationBreakpoints.removal,
+        click: () => this.markup.toggleMutationBreakpoint("removal"),
+        disabled: !isElement,
+        label: INSPECTOR_L10N.getStr("inspectorNodeRemoval.label"),
+        type: "checkbox",
+      })
+    );
+
+    return menu;
+  }
+
+  /**
+   * Link menu items can be shown or hidden depending on the context and
+   * selected node, and their labels can vary.
+   *
+   * @return {Array} list of visible menu items related to links.
+   */
+  _getNodeLinkMenuItems() {
+    const linkFollow = new MenuItem({
+      id: "node-menu-link-follow",
+      visible: false,
+      click: () => this._onFollowLink(),
+    });
+    const linkCopy = new MenuItem({
+      id: "node-menu-link-copy",
+      visible: false,
+      click: () => this._onCopyLink(),
+    });
+
+    // Get information about the right-clicked node.
+    const popupNode = this.contextMenuTarget;
+    if (!popupNode || !popupNode.classList.contains("link")) {
+      return [linkFollow, linkCopy];
+    }
+
+    const type = popupNode.dataset.type;
+    if (type === "uri" || type === "cssresource" || type === "jsresource") {
+      // Links can't be opened in new tabs in the browser toolbox.
+      if (type === "uri" && !this.toolbox.isBrowserToolbox) {
+        linkFollow.visible = true;
+        linkFollow.label = INSPECTOR_L10N.getStr(
+          "inspector.menu.openUrlInNewTab.label"
+        );
+      } else if (type === "cssresource") {
+        linkFollow.visible = true;
+        linkFollow.label = TOOLBOX_L10N.getStr(
+          "toolbox.viewCssSourceInStyleEditor.label"
+        );
+      } else if (type === "jsresource") {
+        linkFollow.visible = true;
+        linkFollow.label = TOOLBOX_L10N.getStr(
+          "toolbox.viewJsSourceInDebugger.label"
+        );
+      }
+
+      linkCopy.visible = true;
+      linkCopy.label = INSPECTOR_L10N.getStr(
+        "inspector.menu.copyUrlToClipboard.label"
+      );
+    } else if (type === "idref") {
+      linkFollow.visible = true;
+      linkFollow.label = INSPECTOR_L10N.getFormatStr(
+        "inspector.menu.selectElement.label",
+        popupNode.dataset.link
+      );
+    }
+
+    return [linkFollow, linkCopy];
+  }
+
+  _getPasteSubmenu(isElement, isFragment, isAnonymous) {
+    const isPasteable =
+      !isAnonymous &&
+      (isFragment || isElement) &&
+      this._getClipboardContentForPaste();
+    const disableAdjacentPaste =
+      !isPasteable ||
+      !isElement ||
+      this.selection.isRoot() ||
+      this.selection.isBodyNode() ||
+      this.selection.isHeadNode();
+    const disableFirstLastPaste =
+      !isPasteable ||
+      !isElement ||
+      (this.selection.isHTMLNode() && this.selection.isRoot());
+
+    const pasteSubmenu = new Menu();
+    pasteSubmenu.append(
+      new MenuItem({
+        id: "node-menu-pasteinnerhtml",
+        label: INSPECTOR_L10N.getStr("inspectorPasteInnerHTML.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorPasteInnerHTML.accesskey"),
+        disabled: !isPasteable,
+        click: () => this._pasteInnerHTML(),
+      })
+    );
+    pasteSubmenu.append(
+      new MenuItem({
+        id: "node-menu-pasteouterhtml",
+        label: INSPECTOR_L10N.getStr("inspectorPasteOuterHTML.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorPasteOuterHTML.accesskey"),
+        disabled: !isPasteable || !isElement,
+        click: () => this._pasteOuterHTML(),
+      })
+    );
+    pasteSubmenu.append(
+      new MenuItem({
+        id: "node-menu-pastebefore",
+        label: INSPECTOR_L10N.getStr("inspectorHTMLPasteBefore.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorHTMLPasteBefore.accesskey"),
+        disabled: disableAdjacentPaste,
+        click: () => this._pasteAdjacentHTML("beforeBegin"),
+      })
+    );
+    pasteSubmenu.append(
+      new MenuItem({
+        id: "node-menu-pasteafter",
+        label: INSPECTOR_L10N.getStr("inspectorHTMLPasteAfter.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorHTMLPasteAfter.accesskey"),
+        disabled: disableAdjacentPaste,
+        click: () => this._pasteAdjacentHTML("afterEnd"),
+      })
+    );
+    pasteSubmenu.append(
+      new MenuItem({
+        id: "node-menu-pastefirstchild",
+        label: INSPECTOR_L10N.getStr("inspectorHTMLPasteFirstChild.label"),
+        accesskey: INSPECTOR_L10N.getStr(
+          "inspectorHTMLPasteFirstChild.accesskey"
+        ),
+        disabled: disableFirstLastPaste,
+        click: () => this._pasteAdjacentHTML("afterBegin"),
+      })
+    );
+    pasteSubmenu.append(
+      new MenuItem({
+        id: "node-menu-pastelastchild",
+        label: INSPECTOR_L10N.getStr("inspectorHTMLPasteLastChild.label"),
+        accesskey: INSPECTOR_L10N.getStr(
+          "inspectorHTMLPasteLastChild.accesskey"
+        ),
+        disabled: disableFirstLastPaste,
+        click: () => this._pasteAdjacentHTML("beforeEnd"),
+      })
+    );
+
+    return pasteSubmenu;
+  }
+
+  _getPseudoClassSubmenu(isElement) {
+    const menu = new Menu();
+
+    // Set the pseudo classes
+    for (const name of PSEUDO_CLASSES) {
+      const menuitem = new MenuItem({
+        id: "node-menu-pseudo-" + name.substr(1),
+        label: name.substr(1),
+        type: "checkbox",
+        click: () => this.inspector.togglePseudoClass(name),
+      });
+
+      if (isElement) {
+        const checked = this.selection.nodeFront.hasPseudoClassLock(name);
+        menuitem.checked = checked;
+      } else {
+        menuitem.disabled = true;
+      }
+
+      menu.append(menuitem);
+    }
+
+    return menu;
+  }
+
+  _getEditMarkupString() {
+    if (this.selection.isHTMLNode()) {
+      return "inspectorHTMLEdit";
+    } else if (this.selection.isSVGNode()) {
+      return "inspectorSVGEdit";
+    } else if (this.selection.isMathMLNode()) {
+      return "inspectorMathMLEdit";
+    }
+    return "inspectorXMLEdit";
+  }
+
+  _openMenu({ target, screenX = 0, screenY = 0 } = {}) {
+    if (this.selection.isSlotted()) {
+      // Slotted elements should not show any context menu.
+      return null;
+    }
+
+    const markupContainer = this.markup.getContainer(this.selection.nodeFront);
+
+    this.contextMenuTarget = target;
+    this.nodeMenuTriggerInfo =
+      markupContainer && markupContainer.editor.getInfoAtNode(target);
+
+    const isFragment = this.selection.isDocumentFragmentNode();
+    const isAnonymous = this.selection.isAnonymousNode();
+    const isElement =
+      this.selection.isElementNode() && !this.selection.isPseudoElementNode();
+    const isDuplicatableElement =
+      isElement && !isAnonymous && !this.selection.isRoot();
+    const isScreenshotable =
+      isElement && this.selection.nodeFront.isTreeDisplayed;
+
+    const menu = new Menu();
+    menu.append(
+      new MenuItem({
+        id: "node-menu-edithtml",
+        label: INSPECTOR_L10N.getStr(`${this._getEditMarkupString()}.label`),
+        accesskey: INSPECTOR_L10N.getStr("inspectorHTMLEdit.accesskey"),
+        disabled: isAnonymous || (!isElement && !isFragment),
+        click: () => this._editHTML(),
+      })
+    );
+    menu.append(
+      new MenuItem({
+        id: "node-menu-add",
+        label: INSPECTOR_L10N.getStr("inspectorAddNode.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorAddNode.accesskey"),
+        disabled: !this.inspector.canAddHTMLChild(),
+        click: () => this.inspector.addNode(),
+      })
+    );
+    menu.append(
+      new MenuItem({
+        id: "node-menu-duplicatenode",
+        label: INSPECTOR_L10N.getStr("inspectorDuplicateNode.label"),
+        disabled: !isDuplicatableElement,
+        click: () => this._duplicateNode(),
+      })
+    );
+    menu.append(
+      new MenuItem({
+        id: "node-menu-delete",
+        label: INSPECTOR_L10N.getStr("inspectorHTMLDelete.label"),
+        accesskey: INSPECTOR_L10N.getStr("inspectorHTMLDelete.accesskey"),
+        disabled: !this.markup.isDeletable(this.selection.nodeFront),
+        click: () => this._deleteNode(),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        label: INSPECTOR_L10N.getStr("inspectorAttributesSubmenu.label"),
+        accesskey: INSPECTOR_L10N.getStr(
+          "inspectorAttributesSubmenu.accesskey"
+        ),
+        submenu: this._getAttributesSubmenu(isElement && !isAnonymous),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        type: "separator",
+      })
+    );
+
+    if (this.selection.nodeFront.mutationBreakpoints) {
+      menu.append(
+        new MenuItem({
+          label: INSPECTOR_L10N.getStr("inspectorBreakpointSubmenu.label"),
+          // FIXME(bug 1598952): This doesn't work in shadow trees at all, but
+          // we still display the active menu. Also, this should probably be
+          // enabled for ShadowRoot, at least the non-attribute breakpoints.
+          submenu: this._getDOMBreakpointSubmenu(isElement),
+          id: "node-menu-mutation-breakpoint",
+        })
+      );
+    }
+
+    menu.append(
+      new MenuItem({
+        id: "node-menu-useinconsole",
+        label: INSPECTOR_L10N.getStr("inspectorUseInConsole.label"),
+        click: () => this._useInConsole(),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        id: "node-menu-showdomproperties",
+        label: INSPECTOR_L10N.getStr("inspectorShowDOMProperties.label"),
+        click: () => this._showDOMProperties(),
+      })
+    );
+
+    if (this.selection.isElementNode() || this.selection.isTextNode()) {
+      menu.append(
+        new MenuItem({
+          id: "node-menu-showaccessibilityproperties",
+          label: INSPECTOR_L10N.getStr(
+            "inspectorShowAccessibilityProperties.label"
+          ),
+          click: () => this._showAccessibilityProperties(),
+        })
+      );
+    }
+
+    if (this.selection.nodeFront.customElementLocation) {
+      menu.append(
+        new MenuItem({
+          id: "node-menu-jumptodefinition",
+          label: INSPECTOR_L10N.getStr(
+            "inspectorCustomElementDefinition.label"
+          ),
+          click: () => this._jumpToCustomElementDefinition(),
+        })
+      );
+    }
+
+    menu.append(
+      new MenuItem({
+        type: "separator",
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        label: INSPECTOR_L10N.getStr("inspectorPseudoClassSubmenu.label"),
+        submenu: this._getPseudoClassSubmenu(isElement),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        id: "node-menu-screenshotnode",
+        label: INSPECTOR_L10N.getStr("inspectorScreenshotNode.label"),
+        disabled: !isScreenshotable,
+        click: () => this.inspector.screenshotNode().catch(console.error),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        id: "node-menu-scrollnodeintoview",
+        label: INSPECTOR_L10N.getStr("inspectorScrollNodeIntoView.label"),
+        accesskey: INSPECTOR_L10N.getStr(
+          "inspectorScrollNodeIntoView.accesskey"
+        ),
+        disabled: !isElement,
+        click: () => this.markup.scrollNodeIntoView(),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        type: "separator",
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        label: INSPECTOR_L10N.getStr("inspectorCopyHTMLSubmenu.label"),
+        submenu: this._getCopySubmenu(markupContainer, isElement, isFragment),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        label: INSPECTOR_L10N.getStr("inspectorPasteHTMLSubmenu.label"),
+        submenu: this._getPasteSubmenu(isElement, isFragment, isAnonymous),
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        type: "separator",
+      })
+    );
+
+    const isNodeWithChildren =
+      this.selection.isNode() && markupContainer.hasChildren;
+    menu.append(
+      new MenuItem({
+        id: "node-menu-expand",
+        label: INSPECTOR_L10N.getStr("inspectorExpandNode.label"),
+        disabled: !isNodeWithChildren,
+        click: () => this.markup.expandAll(this.selection.nodeFront),
+      })
+    );
+    menu.append(
+      new MenuItem({
+        id: "node-menu-collapse",
+        label: INSPECTOR_L10N.getStr("inspectorCollapseAll.label"),
+        disabled: !isNodeWithChildren || !markupContainer.expanded,
+        click: () => this.markup.collapseAll(this.selection.nodeFront),
+      })
+    );
+
+    const nodeLinkMenuItems = this._getNodeLinkMenuItems();
+    if (nodeLinkMenuItems.filter(item => item.visible).length) {
+      menu.append(
+        new MenuItem({
+          id: "node-menu-link-separator",
+          type: "separator",
+        })
+      );
+    }
+
+    for (const menuitem of nodeLinkMenuItems) {
+      menu.append(menuitem);
+    }
+
+    menu.popup(screenX, screenY, this.toolbox.doc);
+    return menu;
+  }
+}
+
+module.exports = MarkupContextMenu;
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js
new file mode 100644
index 0000000000..5d10b003c9
--- /dev/null
+++ b/devtools/client/inspector/markup/markup.js
@@ -0,0 +1,2707 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const flags = require("resource://devtools/shared/flags.js");
+const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
+const nodeFilterConstants = require("resource://devtools/shared/dom-node-filter-constants.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const { PluralForm } = require("resource://devtools/shared/plural-form.js");
+const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js");
+const KeyShortcuts = require("resource://devtools/client/shared/key-shortcuts.js");
+const {
+  scrollIntoViewIfNeeded,
+} = require("resource://devtools/client/shared/scroll.js");
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+const MarkupElementContainer = require("resource://devtools/client/inspector/markup/views/element-container.js");
+const MarkupReadOnlyContainer = require("resource://devtools/client/inspector/markup/views/read-only-container.js");
+const MarkupTextContainer = require("resource://devtools/client/inspector/markup/views/text-container.js");
+const RootContainer = require("resource://devtools/client/inspector/markup/views/root-container.js");
+const WalkerEventListener = require("resource://devtools/client/inspector/shared/walker-event-listener.js");
+
+loader.lazyRequireGetter(
+  this,
+  ["createDOMMutationBreakpoint", "deleteDOMMutationBreakpoint"],
+  "resource://devtools/client/framework/actions/index.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "MarkupContextMenu",
+  "resource://devtools/client/inspector/markup/markup-context-menu.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "SlottedNodeContainer",
+  "resource://devtools/client/inspector/markup/views/slotted-node-container.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "getLongString",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "openContentLink",
+  "resource://devtools/client/shared/link.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "HTMLTooltip",
+  "resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "UndoStack",
+  "resource://devtools/client/shared/undo.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "beautify",
+  "resource://devtools/shared/jsbeautify/beautify.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "getTabPrefs",
+  "resource://devtools/shared/indentation.js",
+  true
+);
+
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+// Page size for pageup/pagedown
+const PAGE_SIZE = 10;
+const DEFAULT_MAX_CHILDREN = 100;
+const DRAG_DROP_AUTOSCROLL_EDGE_MAX_DISTANCE = 50;
+const DRAG_DROP_AUTOSCROLL_EDGE_RATIO = 0.1;
+const DRAG_DROP_MIN_AUTOSCROLL_SPEED = 2;
+const DRAG_DROP_MAX_AUTOSCROLL_SPEED = 8;
+const DRAG_DROP_HEIGHT_TO_SPEED = 500;
+const DRAG_DROP_HEIGHT_TO_SPEED_MIN = 0.5;
+const DRAG_DROP_HEIGHT_TO_SPEED_MAX = 1;
+const ATTR_COLLAPSE_ENABLED_PREF = "devtools.markup.collapseAttributes";
+const ATTR_COLLAPSE_LENGTH_PREF = "devtools.markup.collapseAttributeLength";
+const BEAUTIFY_HTML_ON_COPY_PREF = "devtools.markup.beautifyOnCopy";
+
+/**
+ * These functions are called when a shortcut (as defined in `_initShortcuts`) occurs.
+ * Each property in the following object corresponds to one of the shortcut that is
+ * handled by the markup-view.
+ * Each property value is a function that takes the markup-view instance as only
+ * argument, and returns a boolean that signifies whether the event should be consumed.
+ * By default, the event gets consumed after the shortcut handler returns,
+ * this means its propagation is stopped. If you do want the shortcut event
+ * to continue propagating through DevTools, then return true from the handler.
+ */
+const shortcutHandlers = {
+  // Localizable keys
+  "markupView.hide.key": markupView => {
+    const node = markupView._selectedContainer.node;
+    const walkerFront = node.walkerFront;
+
+    if (node.hidden) {
+      walkerFront.unhideNode(node);
+    } else {
+      walkerFront.hideNode(node);
+    }
+  },
+  "markupView.edit.key": markupView => {
+    markupView.beginEditingHTML(markupView._selectedContainer.node);
+  },
+  "markupView.scrollInto.key": markupView => {
+    markupView.scrollNodeIntoView();
+  },
+  // Generic keys
+  Delete: markupView => {
+    markupView.deleteNodeOrAttribute();
+  },
+  Backspace: markupView => {
+    markupView.deleteNodeOrAttribute(true);
+  },
+  Home: markupView => {
+    const rootContainer = markupView.getContainer(markupView._rootNode);
+    markupView.navigate(rootContainer.children.firstChild.container);
+  },
+  Left: markupView => {
+    if (markupView._selectedContainer.expanded) {
+      markupView.collapseNode(markupView._selectedContainer.node);
+    } else {
+      const parent = markupView._selectionWalker().parentNode();
+      if (parent) {
+        markupView.navigate(parent.container);
+      }
+    }
+  },
+  Right: markupView => {
+    if (
+      !markupView._selectedContainer.expanded &&
+      markupView._selectedContainer.hasChildren
+    ) {
+      markupView._expandContainer(markupView._selectedContainer);
+    } else {
+      const next = markupView._selectionWalker().nextNode();
+      if (next) {
+        markupView.navigate(next.container);
+      }
+    }
+  },
+  Up: markupView => {
+    const previousNode = markupView._selectionWalker().previousNode();
+    if (previousNode) {
+      markupView.navigate(previousNode.container);
+    }
+  },
+  Down: markupView => {
+    const nextNode = markupView._selectionWalker().nextNode();
+    if (nextNode) {
+      markupView.navigate(nextNode.container);
+    }
+  },
+  PageUp: markupView => {
+    const walker = markupView._selectionWalker();
+    let selection = markupView._selectedContainer;
+    for (let i = 0; i < PAGE_SIZE; i++) {
+      const previousNode = walker.previousNode();
+      if (!previousNode) {
+        break;
+      }
+      selection = previousNode.container;
+    }
+    markupView.navigate(selection);
+  },
+  PageDown: markupView => {
+    const walker = markupView._selectionWalker();
+    let selection = markupView._selectedContainer;
+    for (let i = 0; i < PAGE_SIZE; i++) {
+      const nextNode = walker.nextNode();
+      if (!nextNode) {
+        break;
+      }
+      selection = nextNode.container;
+    }
+    markupView.navigate(selection);
+  },
+  Enter: markupView => {
+    if (!markupView._selectedContainer.canFocus) {
+      markupView._selectedContainer.canFocus = true;
+      markupView._selectedContainer.focus();
+      return false;
+    }
+    return true;
+  },
+  Space: markupView => {
+    if (!markupView._selectedContainer.canFocus) {
+      markupView._selectedContainer.canFocus = true;
+      markupView._selectedContainer.focus();
+      return false;
+    }
+    return true;
+  },
+  Esc: markupView => {
+    if (markupView.isDragging) {
+      markupView.cancelDragging();
+      return false;
+    }
+    // Prevent cancelling the event when not
+    // dragging, to allow the split console to be toggled.
+    return true;
+  },
+};
+
+/**
+ * Vocabulary for the purposes of this file:
+ *
+ * MarkupContainer - the structure that holds an editor and its
+ *  immediate children in the markup panel.
+ *  - MarkupElementContainer: markup container for element nodes
+ *  - MarkupTextContainer: markup container for text / comment nodes
+ *  - MarkupReadonlyContainer: markup container for other nodes
+ * Node - A content node.
+ * object.elt - A UI element in the markup panel.
+ */
+
+/**
+ * The markup tree.  Manages the mapping of nodes to MarkupContainers,
+ * updating based on mutations, and the undo/redo bindings.
+ *
+ * @param  {Inspector} inspector
+ *         The inspector we're watching.
+ * @param  {iframe} frame
+ *         An iframe in which the caller has kindly loaded markup.xhtml.
+ * @param  {XULWindow} controllerWindow
+ *         Will enable the undo/redo feature from devtools/client/shared/undo.
+ *         Should be a XUL window, will typically point to the toolbox window.
+ */
+function MarkupView(inspector, frame, controllerWindow) {
+  EventEmitter.decorate(this);
+
+  this.controllerWindow = controllerWindow;
+  this.inspector = inspector;
+  this.highlighters = inspector.highlighters;
+  this.walker = this.inspector.walker;
+  this._frame = frame;
+  this.win = this._frame.contentWindow;
+  this.doc = this._frame.contentDocument;
+  this._elt = this.doc.getElementById("root");
+  this.telemetry = this.inspector.telemetry;
+  this._breakpointIDsInLocalState = new Map();
+  this._containersToUpdate = new Map();
+
+  this.maxChildren = Services.prefs.getIntPref(
+    "devtools.markup.pagesize",
+    DEFAULT_MAX_CHILDREN
+  );
+
+  this.collapseAttributes = Services.prefs.getBoolPref(
+    ATTR_COLLAPSE_ENABLED_PREF
+  );
+  this.collapseAttributeLength = Services.prefs.getIntPref(
+    ATTR_COLLAPSE_LENGTH_PREF
+  );
+
+  // Creating the popup to be used to show CSS suggestions.
+  // The popup will be attached to the toolbox document.
+  this.popup = new AutocompletePopup(inspector.toolbox.doc, {
+    autoSelect: true,
+  });
+
+  this._containers = new Map();
+  // This weakmap will hold keys used with the _containers map, in order to retrieve the
+  // slotted container for a given node front.
+  this._slottedContainerKeys = new WeakMap();
+
+  // Binding functions that need to be called in scope.
+  this._handleRejectionIfNotDestroyed =
+    this._handleRejectionIfNotDestroyed.bind(this);
+  this._isImagePreviewTarget = this._isImagePreviewTarget.bind(this);
+  this._onWalkerMutations = this._onWalkerMutations.bind(this);
+  this._onBlur = this._onBlur.bind(this);
+  this._onContextMenu = this._onContextMenu.bind(this);
+  this._onCopy = this._onCopy.bind(this);
+  this._onCollapseAttributesPrefChange =
+    this._onCollapseAttributesPrefChange.bind(this);
+  this._onWalkerNodeStatesChanged = this._onWalkerNodeStatesChanged.bind(this);
+  this._onFocus = this._onFocus.bind(this);
+  this._onResourceAvailable = this._onResourceAvailable.bind(this);
+  this._onTargetAvailable = this._onTargetAvailable.bind(this);
+  this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+  this._onMouseClick = this._onMouseClick.bind(this);
+  this._onMouseMove = this._onMouseMove.bind(this);
+  this._onMouseOut = this._onMouseOut.bind(this);
+  this._onMouseUp = this._onMouseUp.bind(this);
+  this._onNewSelection = this._onNewSelection.bind(this);
+  this._onToolboxPickerCanceled = this._onToolboxPickerCanceled.bind(this);
+  this._onToolboxPickerHover = this._onToolboxPickerHover.bind(this);
+  this._onDomMutation = this._onDomMutation.bind(this);
+
+  // Listening to various events.
+  this._elt.addEventListener("blur", this._onBlur, true);
+  this._elt.addEventListener("click", this._onMouseClick);
+  this._elt.addEventListener("contextmenu", this._onContextMenu);
+  this._elt.addEventListener("mousemove", this._onMouseMove);
+  this._elt.addEventListener("mouseout", this._onMouseOut);
+  this._frame.addEventListener("focus", this._onFocus);
+  this.inspector.selection.on("new-node-front", this._onNewSelection);
+  this._unsubscribeFromToolboxStore = this.inspector.toolbox.store.subscribe(
+    this._onDomMutation
+  );
+
+  if (flags.testing) {
+    // In tests, we start listening immediately to avoid having to simulate a mousemove.
+    this._initTooltips();
+  }
+
+  this.win.addEventListener("copy", this._onCopy);
+  this.win.addEventListener("mouseup", this._onMouseUp);
+  this.inspector.toolbox.nodePicker.on(
+    "picker-node-canceled",
+    this._onToolboxPickerCanceled
+  );
+  this.inspector.toolbox.nodePicker.on(
+    "picker-node-hovered",
+    this._onToolboxPickerHover
+  );
+
+  // Event listeners for highlighter events
+  this.onHighlighterShown = data =>
+    this.handleHighlighterEvent("highlighter-shown", data);
+  this.onHighlighterHidden = data =>
+    this.handleHighlighterEvent("highlighter-hidden", data);
+  this.inspector.highlighters.on("highlighter-shown", this.onHighlighterShown);
+  this.inspector.highlighters.on(
+    "highlighter-hidden",
+    this.onHighlighterHidden
+  );
+
+  this._onNewSelection();
+  if (this.inspector.selection.nodeFront) {
+    this.expandNode(this.inspector.selection.nodeFront);
+  }
+
+  this._prefObserver = new PrefObserver("devtools.markup");
+  this._prefObserver.on(
+    ATTR_COLLAPSE_ENABLED_PREF,
+    this._onCollapseAttributesPrefChange
+  );
+  this._prefObserver.on(
+    ATTR_COLLAPSE_LENGTH_PREF,
+    this._onCollapseAttributesPrefChange
+  );
+
+  this._initShortcuts();
+
+  this._walkerEventListener = new WalkerEventListener(this.inspector, {
+    "container-type-change": this._onWalkerNodeStatesChanged,
+    "display-change": this._onWalkerNodeStatesChanged,
+    "scrollable-change": this._onWalkerNodeStatesChanged,
+    "overflow-change": this._onWalkerNodeStatesChanged,
+    mutations: this._onWalkerMutations,
+  });
+
+  this.resourceCommand = this.inspector.toolbox.resourceCommand;
+  this.resourceCommand.watchResources([this.resourceCommand.TYPES.ROOT_NODE], {
+    onAvailable: this._onResourceAvailable,
+  });
+
+  this.targetCommand = this.inspector.commands.targetCommand;
+  this.targetCommand.watchTargets({
+    types: [this.targetCommand.TYPES.FRAME],
+    onAvailable: this._onTargetAvailable,
+    onDestroyed: this._onTargetDestroyed,
+  });
+}
+
+MarkupView.prototype = {
+  /**
+   * How long does a node flash when it mutates (in ms).
+   */
+  CONTAINER_FLASHING_DURATION: 500,
+
+  _selectedContainer: null,
+
+  get contextMenu() {
+    if (!this._contextMenu) {
+      this._contextMenu = new MarkupContextMenu(this);
+    }
+
+    return this._contextMenu;
+  },
+
+  hasEventDetailsTooltip() {
+    return !!this._eventDetailsTooltip;
+  },
+
+  get eventDetailsTooltip() {
+    if (!this._eventDetailsTooltip) {
+      // This tooltip will be attached to the toolbox document.
+      this._eventDetailsTooltip = new HTMLTooltip(this.toolbox.doc, {
+        type: "arrow",
+        consumeOutsideClicks: false,
+      });
+    }
+
+    return this._eventDetailsTooltip;
+  },
+
+  get toolbox() {
+    return this.inspector.toolbox;
+  },
+
+  get undo() {
+    if (!this._undo) {
+      this._undo = new UndoStack();
+      this._undo.installController(this.controllerWindow);
+    }
+
+    return this._undo;
+  },
+
+  _onDomMutation() {
+    const domMutationBreakpoints =
+      this.inspector.toolbox.store.getState().domMutationBreakpoints
+        .breakpoints;
+    const breakpointIDsInCurrentState = [];
+    for (const breakpoint of domMutationBreakpoints) {
+      const nodeFront = breakpoint.nodeFront;
+      const mutationType = breakpoint.mutationType;
+      const enabledStatus = breakpoint.enabled;
+      breakpointIDsInCurrentState.push(breakpoint.id);
+      // If breakpoint is not in local state
+      if (!this._breakpointIDsInLocalState.has(breakpoint.id)) {
+        this._breakpointIDsInLocalState.set(breakpoint.id, breakpoint);
+        if (!this._containersToUpdate.has(nodeFront)) {
+          this._containersToUpdate.set(nodeFront, new Map());
+        }
+      }
+      this._containersToUpdate.get(nodeFront).set(mutationType, enabledStatus);
+    }
+    // If a breakpoint is in local state but not current state, it has been
+    // removed by the user.
+    for (const id of this._breakpointIDsInLocalState.keys()) {
+      if (breakpointIDsInCurrentState.includes(id) === false) {
+        const nodeFront = this._breakpointIDsInLocalState.get(id).nodeFront;
+        const mutationType =
+          this._breakpointIDsInLocalState.get(id).mutationType;
+        this._containersToUpdate.get(nodeFront).delete(mutationType);
+        this._breakpointIDsInLocalState.delete(id);
+      }
+    }
+    // Update each container
+    for (const nodeFront of this._containersToUpdate.keys()) {
+      const mutationBreakpoints = this._containersToUpdate.get(nodeFront);
+      const container = this.getContainer(nodeFront);
+      container.update(mutationBreakpoints);
+      if (this._containersToUpdate.get(nodeFront).size === 0) {
+        this._containersToUpdate.delete(nodeFront);
+      }
+    }
+  },
+
+  /**
+   * Handle promise rejections for various asynchronous actions, and only log errors if
+   * the markup view still exists.
+   * This is useful to silence useless errors that happen when the markup view is
+   * destroyed while still initializing (and making protocol requests).
+   */
+  _handleRejectionIfNotDestroyed(e) {
+    if (!this._destroyed) {
+      console.error(e);
+    }
+  },
+
+  _initTooltips() {
+    if (this.imagePreviewTooltip) {
+      return;
+    }
+    // The tooltips will be attached to the toolbox document.
+    this.imagePreviewTooltip = new HTMLTooltip(this.toolbox.doc, {
+      type: "arrow",
+      useXulWrapper: true,
+    });
+    this._enableImagePreviewTooltip();
+  },
+
+  _enableImagePreviewTooltip() {
+    this.imagePreviewTooltip.startTogglingOnHover(
+      this._elt,
+      this._isImagePreviewTarget
+    );
+  },
+
+  _disableImagePreviewTooltip() {
+    if (!this.imagePreviewTooltip) {
+      return;
+    }
+    this.imagePreviewTooltip.stopTogglingOnHover();
+  },
+
+  _onToolboxPickerHover(nodeFront) {
+    this.showNode(nodeFront).then(() => {
+      this._showNodeAsHovered(nodeFront);
+    }, console.error);
+  },
+
+  /**
+   * If the element picker gets canceled, make sure and re-center the view on the
+   * current selected element.
+   */
+  _onToolboxPickerCanceled() {
+    if (this._selectedContainer) {
+      scrollIntoViewIfNeeded(this._selectedContainer.editor.elt);
+    }
+  },
+
+  isDragging: false,
+  _draggedContainer: null,
+
+  _onMouseMove(event) {
+    // Note that in tests, we start listening immediately from the constructor to avoid having to simulate a mousemove.
+    // Also note that initTooltips bails out if it is called many times, so it isn't an issue to call it a second
+    // time from here in case tests are doing a mousemove.
+    this._initTooltips();
+
+    let target = event.target;
+
+    if (this._draggedContainer) {
+      this._draggedContainer.onMouseMove(event);
+    }
+    // Auto-scroll if we're dragging.
+    if (this.isDragging) {
+      event.preventDefault();
+      this._autoScroll(event);
+      return;
+    }
+
+    // Show the current container as hovered and highlight it.
+    // This requires finding the current MarkupContainer (walking up the DOM).
+    while (!target.container) {
+      if (target.tagName.toLowerCase() === "body") {
+        return;
+      }
+      target = target.parentNode;
+    }
+
+    const container = target.container;
+    if (this._hoveredContainer !== container) {
+      this._showBoxModel(container.node);
+    }
+    this._showContainerAsHovered(container);
+
+    this.emit("node-hover");
+  },
+
+  /**
+   * If focus is moved outside of the markup view document and there is a
+   * selected container, make its contents not focusable by a keyboard.
+   */
+  _onBlur(event) {
+    if (!this._selectedContainer) {
+      return;
+    }
+
+    const { relatedTarget } = event;
+    if (relatedTarget && relatedTarget.ownerDocument === this.doc) {
+      return;
+    }
+
+    if (this._selectedContainer) {
+      this._selectedContainer.clearFocus();
+    }
+  },
+
+  _onContextMenu(event) {
+    this.contextMenu.show(event);
+  },
+
+  /**
+   * Executed on each mouse-move while a node is being dragged in the view.
+   * Auto-scrolls the view to reveal nodes below the fold to drop the dragged
+   * node in.
+   */
+  _autoScroll(event) {
+    const docEl = this.doc.documentElement;
+
+    if (this._autoScrollAnimationFrame) {
+      this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
+    }
+
+    // Auto-scroll when the mouse approaches top/bottom edge.
+    const fromBottom = docEl.clientHeight - event.pageY + this.win.scrollY;
+    const fromTop = event.pageY - this.win.scrollY;
+    const edgeDistance = Math.min(
+      DRAG_DROP_AUTOSCROLL_EDGE_MAX_DISTANCE,
+      docEl.clientHeight * DRAG_DROP_AUTOSCROLL_EDGE_RATIO
+    );
+
+    // The smaller the screen, the slower the movement.
+    const heightToSpeedRatio = Math.max(
+      DRAG_DROP_HEIGHT_TO_SPEED_MIN,
+      Math.min(
+        DRAG_DROP_HEIGHT_TO_SPEED_MAX,
+        docEl.clientHeight / DRAG_DROP_HEIGHT_TO_SPEED
+      )
+    );
+
+    if (fromBottom <= edgeDistance) {
+      // Map our distance range to a speed range so that the speed is not too
+      // fast or too slow.
+      const speed = map(
+        fromBottom,
+        0,
+        edgeDistance,
+        DRAG_DROP_MIN_AUTOSCROLL_SPEED,
+        DRAG_DROP_MAX_AUTOSCROLL_SPEED
+      );
+
+      this._runUpdateLoop(() => {
+        docEl.scrollTop -=
+          heightToSpeedRatio * (speed - DRAG_DROP_MAX_AUTOSCROLL_SPEED);
+      });
+    }
+
+    if (fromTop <= edgeDistance) {
+      const speed = map(
+        fromTop,
+        0,
+        edgeDistance,
+        DRAG_DROP_MIN_AUTOSCROLL_SPEED,
+        DRAG_DROP_MAX_AUTOSCROLL_SPEED
+      );
+
+      this._runUpdateLoop(() => {
+        docEl.scrollTop +=
+          heightToSpeedRatio * (speed - DRAG_DROP_MAX_AUTOSCROLL_SPEED);
+      });
+    }
+  },
+
+  /**
+   * Run a loop on the requestAnimationFrame.
+   */
+  _runUpdateLoop(update) {
+    const loop = () => {
+      update();
+      this._autoScrollAnimationFrame = this.win.requestAnimationFrame(loop);
+    };
+    loop();
+  },
+
+  _onMouseClick(event) {
+    // From the target passed here, let's find the parent MarkupContainer
+    // and forward the event if needed.
+    let parentNode = event.target;
+    let container;
+    while (parentNode !== this.doc.body) {
+      if (parentNode.container) {
+        container = parentNode.container;
+        break;
+      }
+      parentNode = parentNode.parentNode;
+    }
+
+    if (typeof container.onContainerClick === "function") {
+      // Forward the event to the container if it implements onContainerClick.
+      container.onContainerClick(event);
+    }
+  },
+
+  _onMouseUp(event) {
+    if (this._draggedContainer) {
+      this._draggedContainer.onMouseUp(event);
+    }
+
+    this.indicateDropTarget(null);
+    this.indicateDragTarget(null);
+    if (this._autoScrollAnimationFrame) {
+      this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
+    }
+  },
+
+  _onCollapseAttributesPrefChange() {
+    this.collapseAttributes = Services.prefs.getBoolPref(
+      ATTR_COLLAPSE_ENABLED_PREF
+    );
+    this.collapseAttributeLength = Services.prefs.getIntPref(
+      ATTR_COLLAPSE_LENGTH_PREF
+    );
+    this.update();
+  },
+
+  cancelDragging() {
+    if (!this.isDragging) {
+      return;
+    }
+
+    for (const [, container] of this._containers) {
+      if (container.isDragging) {
+        container.cancelDragging();
+        break;
+      }
+    }
+
+    this.indicateDropTarget(null);
+    this.indicateDragTarget(null);
+    if (this._autoScrollAnimationFrame) {
+      this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
+    }
+  },
+
+  _hoveredContainer: null,
+
+  /**
+   * Show a NodeFront's container as being hovered
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node to show as hovered
+   */
+  _showNodeAsHovered(nodeFront) {
+    const container = this.getContainer(nodeFront);
+    this._showContainerAsHovered(container);
+  },
+
+  _showContainerAsHovered(container) {
+    if (this._hoveredContainer === container) {
+      return;
+    }
+
+    if (this._hoveredContainer) {
+      this._hoveredContainer.hovered = false;
+    }
+
+    container.hovered = true;
+    this._hoveredContainer = container;
+  },
+
+  async _onMouseOut(event) {
+    // Emulate mouseleave by skipping any relatedTarget inside the markup-view.
+    if (this._elt.contains(event.relatedTarget)) {
+      return;
+    }
+
+    if (this._autoScrollAnimationFrame) {
+      this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
+    }
+    if (this.isDragging) {
+      return;
+    }
+
+    await this._hideBoxModel();
+    if (this._hoveredContainer) {
+      this._hoveredContainer.hovered = false;
+    }
+    this._hoveredContainer = null;
+
+    this.emit("leave");
+  },
+
+  /**
+   * Show the Box Model Highlighter on a given node front
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node for which to show the highlighter.
+   * @param  {Object} options
+   *         Configuration object with options for the Box Model Highlighter.
+   * @return {Promise} Resolves after the highlighter for this nodeFront is shown.
+   */
+  _showBoxModel(nodeFront, options) {
+    return this.inspector.highlighters.showHighlighterTypeForNode(
+      this.inspector.highlighters.TYPES.BOXMODEL,
+      nodeFront,
+      options
+    );
+  },
+
+  /**
+   * Hide the Box Model Highlighter for any node that may be highlighted.
+   *
+   * @return {Promise} Resolves when the highlighter is hidden.
+   */
+  _hideBoxModel() {
+    return this.inspector.highlighters.hideHighlighterType(
+      this.inspector.highlighters.TYPES.BOXMODEL
+    );
+  },
+
+  /**
+   * Delegate handler for highlighter events.
+   *
+   * This is the place to observe for highlighter events, check the highlighter type and
+   * event name, then react for example by modifying the DOM.
+   *
+   * @param {String} eventName
+   *        Highlighter event name. One of: "highlighter-hidden", "highlighter-shown"
+   * @param {Object} data
+   *        Object with data associated with the highlighter event.
+   *        {String} data.type
+   *        Highlighter type
+   *        {NodeFront} data.nodeFront
+   *        NodeFront of the node associated with the highlighter event
+   *        {Object} data.options
+   *        Optional configuration passed to the highlighter when shown
+   *        {CustomHighlighterFront} data.highlighter
+   *        Highlighter instance
+   *
+   */
+  handleHighlighterEvent(eventName, data) {
+    switch (data.type) {
+      // Toggle the "active" CSS class name on flex and grid display badges next to
+      // elements in the Markup view when a coresponding flex or grid highlighter is
+      // shown or hidden for a node.
+      case this.inspector.highlighters.TYPES.FLEXBOX:
+      case this.inspector.highlighters.TYPES.GRID:
+        const { nodeFront } = data;
+        if (!nodeFront) {
+          return;
+        }
+
+        // Find the badge corresponding to the node from the highlighter event payload.
+        const container = this.getContainer(nodeFront);
+        const badge = container?.editor?.displayBadge;
+        if (badge) {
+          const isActive = eventName == "highlighter-shown";
+          badge.classList.toggle("active", isActive);
+          badge.setAttribute("aria-pressed", isActive);
+        }
+
+        // There is a limit to how many grid highlighters can be active at the same time.
+        // If the limit was reached, disable all non-active grid badges.
+        if (data.type === this.inspector.highlighters.TYPES.GRID) {
+          // Matches badges for "grid", "inline-grid" and "subgrid"
+          const selector = "[data-display*='grid']:not(.active)";
+          const isLimited =
+            this.inspector.highlighters.isGridHighlighterLimitReached();
+          Array.from(this._elt.querySelectorAll(selector)).map(el => {
+            el.classList.toggle("interactive", !isLimited);
+          });
+        }
+        break;
+    }
+  },
+
+  /**
+   * Used by tests
+   */
+  getSelectedContainer() {
+    return this._selectedContainer;
+  },
+
+  /**
+   * Get the MarkupContainer object for a given node, or undefined if
+   * none exists.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node to get the container for.
+   * @param  {Boolean} slotted
+   *         true to get the slotted version of the container.
+   * @return {MarkupContainer} The container for the provided node.
+   */
+  getContainer(node, slotted) {
+    const key = this._getContainerKey(node, slotted);
+    return this._containers.get(key);
+  },
+
+  /**
+   * Register a given container for a given node/slotted node.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node to set the container for.
+   * @param  {Boolean} slotted
+   *         true if the container represents the slotted version of the node.
+   */
+  setContainer(node, container, slotted) {
+    const key = this._getContainerKey(node, slotted);
+    return this._containers.set(key, container);
+  },
+
+  /**
+   * Check if a MarkupContainer object exists for a given node/slotted node
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node to check.
+   * @param  {Boolean} slotted
+   *         true to check for a container matching the slotted version of the node.
+   * @return {Boolean} True if a container exists, false otherwise.
+   */
+  hasContainer(node, slotted) {
+    const key = this._getContainerKey(node, slotted);
+    return this._containers.has(key);
+  },
+
+  _getContainerKey(node, slotted) {
+    if (!slotted) {
+      return node;
+    }
+
+    if (!this._slottedContainerKeys.has(node)) {
+      this._slottedContainerKeys.set(node, { node });
+    }
+    return this._slottedContainerKeys.get(node);
+  },
+
+  _isContainerSelected(container) {
+    if (!container) {
+      return false;
+    }
+
+    const selection = this.inspector.selection;
+    return (
+      container.node == selection.nodeFront &&
+      container.isSlotted() == selection.isSlotted()
+    );
+  },
+
+  update() {
+    const updateChildren = node => {
+      this.getContainer(node).update();
+      for (const child of node.treeChildren()) {
+        updateChildren(child);
+      }
+    };
+
+    // Start with the documentElement
+    let documentElement;
+    for (const node of this._rootNode.treeChildren()) {
+      if (node.isDocumentElement === true) {
+        documentElement = node;
+        break;
+      }
+    }
+
+    // Recursively update each node starting with documentElement.
+    updateChildren(documentElement);
+  },
+
+  /**
+   * Executed when the mouse hovers over a target in the markup-view and is used
+   * to decide whether this target should be used to display an image preview
+   * tooltip.
+   * Delegates the actual decision to the corresponding MarkupContainer instance
+   * if one is found.
+   *
+   * @return {Promise} the promise returned by
+   *         MarkupElementContainer._isImagePreviewTarget
+   */
+  async _isImagePreviewTarget(target) {
+    // From the target passed here, let's find the parent MarkupContainer
+    // and ask it if the tooltip should be shown
+    if (this.isDragging) {
+      return false;
+    }
+
+    let parent = target,
+      container;
+    while (parent) {
+      if (parent.container) {
+        container = parent.container;
+        break;
+      }
+      parent = parent.parentNode;
+    }
+
+    if (container instanceof MarkupElementContainer) {
+      return container.isImagePreviewTarget(target, this.imagePreviewTooltip);
+    }
+
+    return false;
+  },
+
+  /**
+   * Given the known reason, should the current selection be briefly highlighted
+   * In a few cases, we don't want to highlight the node:
+   * - If the reason is null (used to reset the selection),
+   * - if it's "inspector-default-selection" (initial node selected, either when
+   *   opening the inspector or after a navigation/reload)
+   * - if it's "picker-node-picked" or "picker-node-previewed" (node selected with the
+   *   node picker. Note that this does not include the "Inspect element" context menu,
+   *   which has a dedicated reason, "browser-context-menu").
+   * - if it's "test" (this is a special case for mochitest. In tests, we often
+   * need to select elements but don't necessarily want the highlighter to come
+   * and go after a delay as this might break test scenarios)
+   * We also do not want to start a brief highlight timeout if the node is
+   * already being hovered over, since in that case it will already be
+   * highlighted.
+   */
+  _shouldNewSelectionBeHighlighted() {
+    const reason = this.inspector.selection.reason;
+    const unwantedReasons = [
+      "inspector-default-selection",
+      "nodeselected",
+      "picker-node-picked",
+      "picker-node-previewed",
+      "test",
+    ];
+
+    const isHighlight = this._isContainerSelected(this._hoveredContainer);
+    return !isHighlight && reason && !unwantedReasons.includes(reason);
+  },
+
+  /**
+   * React to new-node-front selection events.
+   * Highlights the node if needed, and make sure it is shown and selected in
+   * the view.
+   */
+  _onNewSelection(nodeFront, reason) {
+    const selection = this.inspector.selection;
+    // this will probably leak.
+    // TODO: use resource api listeners?
+    if (nodeFront) {
+      nodeFront.walkerFront.on(
+        "container-type-change",
+        this._onWalkerNodeStatesChanged
+      );
+      nodeFront.walkerFront.on(
+        "display-change",
+        this._onWalkerNodeStatesChanged
+      );
+      nodeFront.walkerFront.on(
+        "scrollable-change",
+        this._onWalkerNodeStatesChanged
+      );
+      nodeFront.walkerFront.on(
+        "overflow-change",
+        this._onWalkerNodeStatesChanged
+      );
+      nodeFront.walkerFront.on("mutations", this._onWalkerMutations);
+    }
+
+    if (this.htmlEditor) {
+      this.htmlEditor.hide();
+    }
+    if (this._isContainerSelected(this._hoveredContainer)) {
+      this._hoveredContainer.hovered = false;
+      this._hoveredContainer = null;
+    }
+
+    if (!selection.isNode()) {
+      this.unmarkSelectedNode();
+      return;
+    }
+
+    const done = this.inspector.updating("markup-view");
+    let onShowBoxModel;
+
+    // Highlight the element briefly if needed.
+    if (this._shouldNewSelectionBeHighlighted()) {
+      onShowBoxModel = this._showBoxModel(nodeFront, {
+        duration: this.inspector.HIGHLIGHTER_AUTOHIDE_TIMER,
+      });
+    }
+
+    const slotted = selection.isSlotted();
+    const smoothScroll = reason === "reveal-from-slot";
+    const onShow = this.showNode(selection.nodeFront, { slotted, smoothScroll })
+      .then(() => {
+        // We could be destroyed by now.
+        if (this._destroyed) {
+          return Promise.reject("markupview destroyed");
+        }
+
+        // Mark the node as selected.
+        const container = this.getContainer(selection.nodeFront, slotted);
+        this._markContainerAsSelected(container);
+
+        // Make sure the new selection is navigated to.
+        this.maybeNavigateToNewSelection();
+        return undefined;
+      })
+      .catch(this._handleRejectionIfNotDestroyed);
+
+    Promise.all([onShowBoxModel, onShow]).then(done);
+  },
+
+  /**
+   * Maybe make selected the current node selection's MarkupContainer depending
+   * on why the current node got selected.
+   */
+  async maybeNavigateToNewSelection() {
+    const { reason, nodeFront } = this.inspector.selection;
+
+    // The list of reasons that should lead to navigating to the node.
+    const reasonsToNavigate = [
+      // If the user picked an element with the element picker.
+      "picker-node-picked",
+      // If the user shift-clicked (previewed) an element.
+      "picker-node-previewed",
+      // If the user selected an element with the browser context menu.
+      "browser-context-menu",
+      // If the user added a new node by clicking in the inspector toolbar.
+      "node-inserted",
+    ];
+
+    // If the user performed an action with a keyboard, move keyboard focus to
+    // the markup tree container.
+    if (reason && reason.endsWith("-keyboard")) {
+      this.getContainer(this._rootNode).elt.focus();
+    }
+
+    if (reasonsToNavigate.includes(reason)) {
+      // not sure this is necessary
+      const root = await nodeFront.walkerFront.getRootNode();
+      this.getContainer(root).elt.focus();
+      this.navigate(this.getContainer(nodeFront));
+    }
+  },
+
+  /**
+   * Create a TreeWalker to find the next/previous
+   * node for selection.
+   */
+  _selectionWalker(start) {
+    const walker = this.doc.createTreeWalker(
+      start || this._elt,
+      nodeFilterConstants.SHOW_ELEMENT,
+      function (element) {
+        if (
+          element.container &&
+          element.container.elt === element &&
+          element.container.visible
+        ) {
+          return nodeFilterConstants.FILTER_ACCEPT;
+        }
+        return nodeFilterConstants.FILTER_SKIP;
+      }
+    );
+    walker.currentNode = this._selectedContainer.elt;
+    return walker;
+  },
+
+  _onCopy(evt) {
+    // Ignore copy events from editors
+    if (this._isInputOrTextarea(evt.target)) {
+      return;
+    }
+
+    const selection = this.inspector.selection;
+    if (selection.isNode()) {
+      this.copyOuterHTML();
+    }
+    evt.stopPropagation();
+    evt.preventDefault();
+  },
+
+  /**
+   * Copy the outerHTML of the selected Node to the clipboard.
+   */
+  copyOuterHTML() {
+    if (!this.inspector.selection.isNode()) {
+      return;
+    }
+    const node = this.inspector.selection.nodeFront;
+
+    switch (node.nodeType) {
+      case nodeConstants.ELEMENT_NODE:
+        copyLongHTMLString(node.walkerFront.outerHTML(node));
+        break;
+      case nodeConstants.COMMENT_NODE:
+        getLongString(node.getNodeValue()).then(comment => {
+          clipboardHelper.copyString("<!--" + comment + "-->");
+        });
+        break;
+      case nodeConstants.DOCUMENT_TYPE_NODE:
+        clipboardHelper.copyString(node.doctypeString);
+        break;
+    }
+  },
+
+  /**
+   * Copy the innerHTML of the selected Node to the clipboard.
+   */
+  copyInnerHTML() {
+    const nodeFront = this.inspector.selection.nodeFront;
+    if (!this.inspector.selection.isNode()) {
+      return;
+    }
+
+    copyLongHTMLString(nodeFront.walkerFront.innerHTML(nodeFront));
+  },
+
+  /**
+   * Given a type and link found in a node's attribute in the markup-view,
+   * attempt to follow that link (which may result in opening a new tab, the
+   * style editor or debugger).
+   */
+  followAttributeLink(type, link) {
+    if (!type || !link) {
+      return;
+    }
+
+    const nodeFront = this.inspector.selection.nodeFront;
+    if (type === "uri" || type === "cssresource" || type === "jsresource") {
+      // Open link in a new tab.
+      nodeFront.inspectorFront
+        .resolveRelativeURL(link, this.inspector.selection.nodeFront)
+        .then(url => {
+          if (type === "uri") {
+            openContentLink(url);
+          } else if (type === "cssresource") {
+            return this.toolbox.viewGeneratedSourceInStyleEditor(url);
+          } else if (type === "jsresource") {
+            return this.toolbox.viewGeneratedSourceInDebugger(url);
+          }
+          return null;
+        })
+        .catch(console.error);
+    } else if (type == "idref") {
+      // Select the node in the same document.
+      nodeFront.walkerFront
+        .document(nodeFront)
+        .then(doc => {
+          return nodeFront.walkerFront
+            .querySelector(doc, "#" + CSS.escape(link))
+            .then(node => {
+              if (!node) {
+                this.emit("idref-attribute-link-failed");
+                return;
+              }
+              this.inspector.selection.setNodeFront(node, {
+                reason: "markup-attribute-link",
+              });
+            });
+        })
+        .catch(console.error);
+    }
+  },
+
+  /**
+   * Register all key shortcuts.
+   */
+  _initShortcuts() {
+    const shortcuts = new KeyShortcuts({
+      window: this.win,
+    });
+
+    // Keep a pointer on shortcuts to destroy them when destroying the markup
+    // view.
+    this._shortcuts = shortcuts;
+
+    this._onShortcut = this._onShortcut.bind(this);
+
+    // Process localizable keys
+    [
+      "markupView.hide.key",
+      "markupView.edit.key",
+      "markupView.scrollInto.key",
+    ].forEach(name => {
+      const key = INSPECTOR_L10N.getStr(name);
+      shortcuts.on(key, event => this._onShortcut(name, event));
+    });
+
+    // Process generic keys:
+    [
+      "Delete",
+      "Backspace",
+      "Home",
+      "Left",
+      "Right",
+      "Up",
+      "Down",
+      "PageUp",
+      "PageDown",
+      "Esc",
+      "Enter",
+      "Space",
+    ].forEach(key => {
+      shortcuts.on(key, event => this._onShortcut(key, event));
+    });
+  },
+
+  /**
+   * Key shortcut listener.
+   */
+  _onShortcut(name, event) {
+    if (this._isInputOrTextarea(event.target)) {
+      return;
+    }
+
+    // If the selected element is a button (e.g. `flex` badge), we don't want to highjack
+    // keyboard activation.
+    if (
+      event.target.closest(":is(button, [role=button])") &&
+      (name === "Enter" || name === "Space")
+    ) {
+      return;
+    }
+
+    const handler = shortcutHandlers[name];
+    const shouldPropagate = handler(this);
+    if (shouldPropagate) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+  },
+
+  /**
+   * Check if a node is an input or textarea
+   */
+  _isInputOrTextarea(element) {
+    const name = element.tagName.toLowerCase();
+    return name === "input" || name === "textarea";
+  },
+
+  /**
+   * If there's an attribute on the current node that's currently focused, then
+   * delete this attribute, otherwise delete the node itself.
+   *
+   * @param  {Boolean} moveBackward
+   *         If set to true and if we're deleting the node, focus the previous
+   *         sibling after deletion, otherwise the next one.
+   */
+  deleteNodeOrAttribute(moveBackward) {
+    const focusedAttribute = this.doc.activeElement
+      ? this.doc.activeElement.closest(".attreditor")
+      : null;
+    if (focusedAttribute) {
+      // The focused attribute might not be in the current selected container.
+      const container = focusedAttribute.closest("li.child").container;
+      container.removeAttribute(focusedAttribute.dataset.attr);
+    } else {
+      this.deleteNode(this._selectedContainer.node, moveBackward);
+    }
+  },
+
+  /**
+   * Returns a value indicating whether a node can be deleted.
+   *
+   * @param {NodeFront} nodeFront
+   *        The node to test for deletion
+   */
+  isDeletable(nodeFront) {
+    return !(
+      nodeFront.isDocumentElement ||
+      nodeFront.nodeType == nodeConstants.DOCUMENT_NODE ||
+      nodeFront.nodeType == nodeConstants.DOCUMENT_TYPE_NODE ||
+      nodeFront.nodeType == nodeConstants.DOCUMENT_FRAGMENT_NODE ||
+      nodeFront.isAnonymous
+    );
+  },
+
+  /**
+   * Delete a node from the DOM.
+   * This is an undoable action.
+   *
+   * @param  {NodeFront} node
+   *         The node to remove.
+   * @param  {Boolean} moveBackward
+   *         If set to true, focus the previous sibling, otherwise the next one.
+   */
+  deleteNode(node, moveBackward) {
+    if (!this.isDeletable(node)) {
+      return;
+    }
+
+    const container = this.getContainer(node);
+
+    // Retain the node so we can undo this...
+    node.walkerFront
+      .retainNode(node)
+      .then(() => {
+        const parent = node.parentNode();
+        let nextSibling = null;
+        this.undo.do(
+          () => {
+            node.walkerFront.removeNode(node).then(siblings => {
+              nextSibling = siblings.nextSibling;
+              const prevSibling = siblings.previousSibling;
+              let focusNode = moveBackward ? prevSibling : nextSibling;
+
+              // If we can't move as the user wants, we move to the other direction.
+              // If there is no sibling elements anymore, move to the parent node.
+              if (!focusNode) {
+                focusNode = nextSibling || prevSibling || parent;
+              }
+
+              const isNextSiblingText = nextSibling
+                ? nextSibling.nodeType === nodeConstants.TEXT_NODE
+                : false;
+              const isPrevSiblingText = prevSibling
+                ? prevSibling.nodeType === nodeConstants.TEXT_NODE
+                : false;
+
+              // If the parent had two children and the next or previous sibling
+              // is a text node, then it now has only a single text node, is about
+              // to be in-lined; and focus should move to the parent.
+              if (
+                parent.numChildren === 2 &&
+                (isNextSiblingText || isPrevSiblingText)
+              ) {
+                focusNode = parent;
+              }
+
+              if (container.selected) {
+                this.navigate(this.getContainer(focusNode));
+              }
+            });
+          },
+          () => {
+            const isValidSibling = nextSibling && !nextSibling.isPseudoElement;
+            nextSibling = isValidSibling ? nextSibling : null;
+            node.walkerFront.insertBefore(node, parent, nextSibling);
+          }
+        );
+      })
+      .catch(console.error);
+  },
+
+  /**
+   * Scroll the node into view.
+   */
+  scrollNodeIntoView() {
+    if (!this.inspector.selection.isNode()) {
+      return;
+    }
+
+    this.inspector.selection.nodeFront.scrollIntoView();
+  },
+
+  async toggleMutationBreakpoint(name) {
+    if (!this.inspector.selection.isElementNode()) {
+      return;
+    }
+
+    const toolboxStore = this.inspector.toolbox.store;
+    const nodeFront = this.inspector.selection.nodeFront;
+
+    if (nodeFront.mutationBreakpoints[name]) {
+      toolboxStore.dispatch(deleteDOMMutationBreakpoint(nodeFront, name));
+    } else {
+      toolboxStore.dispatch(createDOMMutationBreakpoint(nodeFront, name));
+    }
+  },
+
+  /**
+   * If an editable item is focused, select its container.
+   */
+  _onFocus(event) {
+    let parent = event.target;
+    while (!parent.container) {
+      parent = parent.parentNode;
+    }
+    if (parent) {
+      this.navigate(parent.container);
+    }
+  },
+
+  /**
+   * Handle a user-requested navigation to a given MarkupContainer,
+   * updating the inspector's currently-selected node.
+   *
+   * @param  {MarkupContainer} container
+   *         The container we're navigating to.
+   */
+  navigate(container) {
+    if (!container) {
+      return;
+    }
+
+    this._markContainerAsSelected(container, "treepanel");
+  },
+
+  /**
+   * Make sure a node is included in the markup tool.
+   *
+   * @param  {NodeFront} node
+   *         The node in the content document.
+   * @param  {Boolean} flashNode
+   *         Whether the newly imported node should be flashed
+   * @param  {Boolean} slotted
+   *         Whether we are importing the slotted version of the node.
+   * @return {MarkupContainer} The MarkupContainer object for this element.
+   */
+  importNode(node, flashNode, slotted) {
+    if (!node) {
+      return null;
+    }
+
+    if (this.hasContainer(node, slotted)) {
+      return this.getContainer(node, slotted);
+    }
+
+    let container;
+    const { nodeType, isPseudoElement } = node;
+    if (node === node.walkerFront.rootNode) {
+      container = new RootContainer(this, node);
+      this._elt.appendChild(container.elt);
+    }
+    if (node === this.walker.rootNode) {
+      this._rootNode = node;
+    } else if (slotted) {
+      container = new SlottedNodeContainer(this, node, this.inspector);
+    } else if (nodeType == nodeConstants.ELEMENT_NODE && !isPseudoElement) {
+      container = new MarkupElementContainer(this, node, this.inspector);
+    } else if (
+      nodeType == nodeConstants.COMMENT_NODE ||
+      nodeType == nodeConstants.TEXT_NODE
+    ) {
+      container = new MarkupTextContainer(this, node, this.inspector);
+    } else {
+      container = new MarkupReadOnlyContainer(this, node, this.inspector);
+    }
+
+    if (flashNode) {
+      container.flashMutation();
+    }
+
+    this.setContainer(node, container, slotted);
+    this._forceUpdateChildren(container);
+
+    this.inspector.emit("container-created", container);
+
+    return container;
+  },
+
+  async _onResourceAvailable(resources) {
+    for (const resource of resources) {
+      if (
+        !this.resourceCommand ||
+        resource.resourceType !== this.resourceCommand.TYPES.ROOT_NODE ||
+        resource.isDestroyed()
+      ) {
+        // Only handle alive root-node resources
+        continue;
+      }
+
+      if (resource.targetFront.isTopLevel && resource.isTopLevelDocument) {
+        // The topmost root node will lead to the destruction and recreation of
+        // the MarkupView. This is handled by the inspector.
+        continue;
+      }
+
+      const parentNodeFront = resource.parentNode();
+      const container = this.getContainer(parentNodeFront);
+      if (container) {
+        // If there is no container for the parentNodeFront, the markup view is
+        // currently not watching this part of the tree.
+        this._forceUpdateChildren(container, {
+          flash: true,
+          updateLevel: true,
+        });
+      }
+    }
+  },
+
+  _onTargetAvailable({ targetFront }) {},
+
+  _onTargetDestroyed({ targetFront, isModeSwitching }) {
+    // Bug 1776250: We only watch targets in order to update containers which
+    // might no longer be able to display children hosted in remote processes,
+    // which corresponds to a Browser Toolbox mode switch.
+    if (isModeSwitching) {
+      const container = this.getContainer(targetFront.getParentNodeFront());
+      if (container) {
+        this._forceUpdateChildren(container, {
+          updateLevel: true,
+        });
+      }
+    }
+  },
+
+  /**
+   * Mutation observer used for included nodes.
+   */
+  _onWalkerMutations(mutations) {
+    for (const mutation of mutations) {
+      const type = mutation.type;
+      const target = mutation.target;
+
+      const container = this.getContainer(target);
+      if (!container) {
+        // Container might not exist if this came from a load event for a node
+        // we're not viewing.
+        continue;
+      }
+
+      if (
+        type === "attributes" ||
+        type === "characterData" ||
+        type === "customElementDefined" ||
+        type === "events" ||
+        type === "pseudoClassLock"
+      ) {
+        container.update();
+      } else if (
+        type === "childList" ||
+        type === "slotchange" ||
+        type === "shadowRootAttached"
+      ) {
+        this._forceUpdateChildren(container, {
+          flash: true,
+          updateLevel: true,
+        });
+      } else if (type === "inlineTextChild") {
+        this._forceUpdateChildren(container, { flash: true });
+        container.update();
+      }
+    }
+
+    this._waitForChildren().then(() => {
+      if (this._destroyed) {
+        // Could not fully update after markup mutations, the markup-view was destroyed
+        // while waiting for children. Bail out silently.
+        return;
+      }
+      this._flashMutatedNodes(mutations);
+      this.inspector.emit("markupmutation", mutations);
+
+      // Since the htmlEditor is absolutely positioned, a mutation may change
+      // the location in which it should be shown.
+      if (this.htmlEditor) {
+        this.htmlEditor.refresh();
+      }
+    });
+  },
+
+  /**
+   * React to display-change and scrollable-change events from the walker. These are
+   * events that tell us when something of interest changed on a collection of nodes:
+   * whether their display type changed, or whether they became scrollable.
+   *
+   * @param  {Array} nodes
+   *         An array of nodeFronts
+   */
+  _onWalkerNodeStatesChanged(nodes) {
+    for (const node of nodes) {
+      const container = this.getContainer(node);
+      if (container) {
+        container.update();
+      }
+    }
+  },
+
+  /**
+   * Given a list of mutations returned by the mutation observer, flash the
+   * corresponding containers to attract attention.
+   */
+  _flashMutatedNodes(mutations) {
+    const addedOrEditedContainers = new Set();
+    const removedContainers = new Set();
+
+    for (const { type, target, added, removed, newValue } of mutations) {
+      const container = this.getContainer(target);
+
+      if (container) {
+        if (type === "characterData") {
+          addedOrEditedContainers.add(container);
+        } else if (type === "attributes" && newValue === null) {
+          // Removed attributes should flash the entire node.
+          // New or changed attributes will flash the attribute itself
+          // in ElementEditor.flashAttribute.
+          addedOrEditedContainers.add(container);
+        } else if (type === "childList") {
+          // If there has been removals, flash the parent
+          if (removed.length) {
+            removedContainers.add(container);
+          }
+
+          // If there has been additions, flash the nodes if their associated
+          // container exist (so if their parent is expanded in the inspector).
+          added.forEach(node => {
+            const addedContainer = this.getContainer(node);
+            if (addedContainer) {
+              addedOrEditedContainers.add(addedContainer);
+
+              // The node may be added as a result of an append, in which case
+              // it will have been removed from another container first, but in
+              // these cases we don't want to flash both the removal and the
+              // addition
+              removedContainers.delete(container);
+            }
+          });
+        }
+      }
+    }
+
+    for (const container of removedContainers) {
+      container.flashMutation();
+    }
+    for (const container of addedOrEditedContainers) {
+      container.flashMutation();
+    }
+  },
+
+  /**
+   * Make sure the given node's parents are expanded and the
+   * node is scrolled on to screen.
+   */
+  showNode(node, { centered = true, slotted, smoothScroll = false } = {}) {
+    if (slotted && !this.hasContainer(node, slotted)) {
+      throw new Error("Tried to show a slotted node not previously imported");
+    } else {
+      this._ensureNodeImported(node);
+    }
+
+    return this._waitForChildren()
+      .then(() => {
+        if (this._destroyed) {
+          return Promise.reject("markupview destroyed");
+        }
+        return this._ensureVisible(node);
+      })
+      .then(() => {
+        const container = this.getContainer(node, slotted);
+        scrollIntoViewIfNeeded(container.editor.elt, centered, smoothScroll);
+      }, this._handleRejectionIfNotDestroyed);
+  },
+
+  _ensureNodeImported(node) {
+    let parent = node;
+
+    this.importNode(node);
+
+    while ((parent = this._getParentInTree(parent))) {
+      this.importNode(parent);
+      this.expandNode(parent);
+    }
+  },
+
+  /**
+   * Expand the container's children.
+   */
+  _expandContainer(container) {
+    return this._updateChildren(container, { expand: true }).then(() => {
+      if (this._destroyed) {
+        // Could not expand the node, the markup-view was destroyed in the meantime. Just
+        // silently give up.
+        return;
+      }
+      container.setExpanded(true);
+    });
+  },
+
+  /**
+   * Expand the node's children.
+   */
+  expandNode(node) {
+    const container = this.getContainer(node);
+    return this._expandContainer(container);
+  },
+
+  /**
+   * Expand the entire tree beneath a container.
+   *
+   * @param  {MarkupContainer} container
+   *         The container to expand.
+   */
+  _expandAll(container) {
+    return this._expandContainer(container)
+      .then(() => {
+        let child = container.children.firstChild;
+        const promises = [];
+        while (child) {
+          promises.push(this._expandAll(child.container));
+          child = child.nextSibling;
+        }
+        return Promise.all(promises);
+      })
+      .catch(console.error);
+  },
+
+  /**
+   * Expand the entire tree beneath a node.
+   *
+   * @param  {DOMNode} node
+   *         The node to expand, or null to start from the top.
+   * @return {Promise} promise that resolves once all children are expanded.
+   */
+  expandAll(node) {
+    node = node || this._rootNode;
+    return this._expandAll(this.getContainer(node));
+  },
+
+  /**
+   * Collapse the node's children.
+   */
+  collapseNode(node) {
+    const container = this.getContainer(node);
+    container.setExpanded(false);
+  },
+
+  _collapseAll(container) {
+    container.setExpanded(false);
+    const children = container.getChildContainers() || [];
+    children.forEach(child => this._collapseAll(child));
+  },
+
+  /**
+   * Collapse the entire tree beneath a node.
+   *
+   * @param  {DOMNode} node
+   *         The node to collapse.
+   * @return {Promise} promise that resolves once all children are collapsed.
+   */
+  collapseAll(node) {
+    this._collapseAll(this.getContainer(node));
+
+    // collapseAll is synchronous, return a promise for consistency with expandAll.
+    return Promise.resolve();
+  },
+
+  /**
+   * Returns either the innerHTML or the outerHTML for a remote node.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront to get the outerHTML / innerHTML for.
+   * @param  {Boolean} isOuter
+   *         If true, makes the function return the outerHTML,
+   *         otherwise the innerHTML.
+   * @return {Promise} that will be resolved with the outerHTML / innerHTML.
+   */
+  _getNodeHTML(node, isOuter) {
+    let walkerPromise = null;
+
+    if (isOuter) {
+      walkerPromise = node.walkerFront.outerHTML(node);
+    } else {
+      walkerPromise = node.walkerFront.innerHTML(node);
+    }
+
+    return getLongString(walkerPromise);
+  },
+
+  /**
+   * Retrieve the outerHTML for a remote node.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront to get the outerHTML for.
+   * @return {Promise} that will be resolved with the outerHTML.
+   */
+  getNodeOuterHTML(node) {
+    return this._getNodeHTML(node, true);
+  },
+
+  /**
+   * Retrieve the innerHTML for a remote node.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront to get the innerHTML for.
+   * @return {Promise} that will be resolved with the innerHTML.
+   */
+  getNodeInnerHTML(node) {
+    return this._getNodeHTML(node);
+  },
+
+  /**
+   * Listen to mutations, expect a given node to be removed and try and select
+   * the node that sits at the same place instead.
+   * This is useful when changing the outerHTML or the tag name so that the
+   * newly inserted node gets selected instead of the one that just got removed.
+   */
+  reselectOnRemoved(removedNode, reason) {
+    // Only allow one removed node reselection at a time, so that when there are
+    // more than 1 request in parallel, the last one wins.
+    this.cancelReselectOnRemoved();
+
+    // Get the removedNode index in its parent node to reselect the right node.
+    const isRootElement = ["html", "svg"].includes(
+      removedNode.tagName.toLowerCase()
+    );
+    const oldContainer = this.getContainer(removedNode);
+    const parentContainer = this.getContainer(removedNode.parentNode());
+    const childIndex = parentContainer
+      .getChildContainers()
+      .indexOf(oldContainer);
+
+    const onMutations = (this._removedNodeObserver = mutations => {
+      let isNodeRemovalMutation = false;
+      for (const mutation of mutations) {
+        const containsRemovedNode =
+          mutation.removed && mutation.removed.some(n => n === removedNode);
+        if (
+          mutation.type === "childList" &&
+          (containsRemovedNode || isRootElement)
+        ) {
+          isNodeRemovalMutation = true;
+          break;
+        }
+      }
+      if (!isNodeRemovalMutation) {
+        return;
+      }
+
+      this.inspector.off("markupmutation", onMutations);
+      this._removedNodeObserver = null;
+
+      // Don't select the new node if the user has already changed the current
+      // selection.
+      if (
+        this.inspector.selection.nodeFront === parentContainer.node ||
+        (this.inspector.selection.nodeFront === removedNode && isRootElement)
+      ) {
+        const childContainers = parentContainer.getChildContainers();
+        if (childContainers?.[childIndex]) {
+          const childContainer = childContainers[childIndex];
+          this._markContainerAsSelected(childContainer, reason);
+          if (childContainer.hasChildren) {
+            this.expandNode(childContainer.node);
+          }
+          this.emit("reselectedonremoved");
+        }
+      }
+    });
+
+    // Start listening for mutations until we find a childList change that has
+    // removedNode removed.
+    this.inspector.on("markupmutation", onMutations);
+  },
+
+  /**
+   * Make sure to stop listening for node removal markupmutations and not
+   * reselect the corresponding node when that happens.
+   * Useful when the outerHTML/tagname edition failed.
+   */
+  cancelReselectOnRemoved() {
+    if (this._removedNodeObserver) {
+      this.inspector.off("markupmutation", this._removedNodeObserver);
+      this._removedNodeObserver = null;
+      this.emit("canceledreselectonremoved");
+    }
+  },
+
+  /**
+   * Replace the outerHTML of any node displayed in the inspector with
+   * some other HTML code
+   *
+   * @param  {NodeFront} node
+   *         Node which outerHTML will be replaced.
+   * @param  {String} newValue
+   *         The new outerHTML to set on the node.
+   * @param  {String} oldValue
+   *         The old outerHTML that will be used if the user undoes the update.
+   * @return {Promise} that will resolve when the outer HTML has been updated.
+   */
+  updateNodeOuterHTML(node, newValue) {
+    const container = this.getContainer(node);
+    if (!container) {
+      return Promise.reject();
+    }
+
+    // Changing the outerHTML removes the node which outerHTML was changed.
+    // Listen to this removal to reselect the right node afterwards.
+    this.reselectOnRemoved(node, "outerhtml");
+    return node.walkerFront.setOuterHTML(node, newValue).catch(() => {
+      this.cancelReselectOnRemoved();
+    });
+  },
+
+  /**
+   * Replace the innerHTML of any node displayed in the inspector with
+   * some other HTML code
+   * @param  {Node} node
+   *         node which innerHTML will be replaced.
+   * @param  {String} newValue
+   *         The new innerHTML to set on the node.
+   * @param  {String} oldValue
+   *         The old innerHTML that will be used if the user undoes the update.
+   * @return {Promise} that will resolve when the inner HTML has been updated.
+   */
+  updateNodeInnerHTML(node, newValue, oldValue) {
+    const container = this.getContainer(node);
+    if (!container) {
+      return Promise.reject();
+    }
+
+    return new Promise((resolve, reject) => {
+      container.undo.do(
+        () => {
+          node.walkerFront.setInnerHTML(node, newValue).then(resolve, reject);
+        },
+        () => {
+          node.walkerFront.setInnerHTML(node, oldValue);
+        }
+      );
+    });
+  },
+
+  /**
+   * Insert adjacent HTML to any node displayed in the inspector.
+   *
+   * @param  {NodeFront} node
+   *         The reference node.
+   * @param  {String} position
+   *         The position as specified for Element.insertAdjacentHTML
+   *         (i.e. "beforeBegin", "afterBegin", "beforeEnd", "afterEnd").
+   * @param  {String} newValue
+   *         The adjacent HTML.
+   * @return {Promise} that will resolve when the adjacent HTML has
+   *         been inserted.
+   */
+  insertAdjacentHTMLToNode(node, position, value) {
+    const container = this.getContainer(node);
+    if (!container) {
+      return Promise.reject();
+    }
+
+    let injectedNodes = [];
+
+    return new Promise((resolve, reject) => {
+      container.undo.do(
+        () => {
+          // eslint-disable-next-line no-unsanitized/method
+          node.walkerFront
+            .insertAdjacentHTML(node, position, value)
+            .then(nodeArray => {
+              injectedNodes = nodeArray.nodes;
+              return nodeArray;
+            })
+            .then(resolve, reject);
+        },
+        () => {
+          node.walkerFront.removeNodes(injectedNodes);
+        }
+      );
+    });
+  },
+
+  /**
+   * Open an editor in the UI to allow editing of a node's html.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront to edit.
+   */
+  beginEditingHTML(node) {
+    // We use outer html for elements, but inner html for fragments.
+    const isOuter = node.nodeType == nodeConstants.ELEMENT_NODE;
+    const html = isOuter
+      ? this.getNodeOuterHTML(node)
+      : this.getNodeInnerHTML(node);
+    html.then(oldValue => {
+      const container = this.getContainer(node);
+      if (!container) {
+        return;
+      }
+      // Load load and create HTML Editor as it is rarely used and fetch complex deps
+      if (!this.htmlEditor) {
+        const HTMLEditor = require("resource://devtools/client/inspector/markup/views/html-editor.js");
+        this.htmlEditor = new HTMLEditor(this.doc);
+      }
+      this.htmlEditor.show(container.tagLine, oldValue);
+      const start = this.telemetry.msSystemNow();
+      this.htmlEditor.once("popuphidden", (commit, value) => {
+        // Need to focus the <html> element instead of the frame / window
+        // in order to give keyboard focus back to doc (from editor).
+        this.doc.documentElement.focus();
+
+        if (commit) {
+          if (isOuter) {
+            this.updateNodeOuterHTML(node, value, oldValue);
+          } else {
+            this.updateNodeInnerHTML(node, value, oldValue);
+          }
+        }
+
+        const end = this.telemetry.msSystemNow();
+        this.telemetry.recordEvent("edit_html", "inspector", null, {
+          made_changes: commit,
+          time_open: end - start,
+        });
+      });
+
+      this.emit("begin-editing");
+    });
+  },
+
+  /**
+   * Expand or collapse the given node.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront to update.
+   * @param  {Boolean} expanded
+   *         Whether the node should be expanded/collapsed.
+   * @param  {Boolean} applyToDescendants
+   *         Whether all descendants should also be expanded/collapsed
+   */
+  setNodeExpanded(node, expanded, applyToDescendants) {
+    if (expanded) {
+      if (applyToDescendants) {
+        this.expandAll(node);
+      } else {
+        this.expandNode(node);
+      }
+    } else if (applyToDescendants) {
+      this.collapseAll(node);
+    } else {
+      this.collapseNode(node);
+    }
+  },
+
+  /**
+   * Mark the given node selected, and update the inspector.selection
+   * object's NodeFront to keep consistent state between UI and selection.
+   *
+   * @param  {NodeFront} aNode
+   *         The NodeFront to mark as selected.
+   * @param  {String} reason
+   *         The reason for marking the node as selected.
+   * @return {Boolean} False if the node is already marked as selected, true
+   *         otherwise.
+   */
+  markNodeAsSelected(node, reason = "nodeselected") {
+    const container = this.getContainer(node);
+    return this._markContainerAsSelected(container);
+  },
+
+  _markContainerAsSelected(container, reason) {
+    if (!container || this._selectedContainer === container) {
+      return false;
+    }
+
+    const { node } = container;
+
+    // Un-select and remove focus from the previous container.
+    if (this._selectedContainer) {
+      this._selectedContainer.selected = false;
+      this._selectedContainer.clearFocus();
+    }
+
+    // Select the new container.
+    this._selectedContainer = container;
+    if (node) {
+      this._selectedContainer.selected = true;
+    }
+
+    // Change the current selection if needed.
+    if (!this._isContainerSelected(this._selectedContainer)) {
+      const isSlotted = container.isSlotted();
+      this.inspector.selection.setNodeFront(node, { reason, isSlotted });
+    }
+
+    return true;
+  },
+
+  /**
+   * Make sure that every ancestor of the selection are updated
+   * and included in the list of visible children.
+   */
+  _ensureVisible(node) {
+    while (node) {
+      const container = this.getContainer(node);
+      const parent = this._getParentInTree(node);
+      if (!container.elt.parentNode) {
+        const parentContainer = this.getContainer(parent);
+        if (parentContainer) {
+          this._forceUpdateChildren(parentContainer, { expand: true });
+        }
+      }
+
+      node = parent;
+    }
+    return this._waitForChildren();
+  },
+
+  /**
+   * Unmark selected node (no node selected).
+   */
+  unmarkSelectedNode() {
+    if (this._selectedContainer) {
+      this._selectedContainer.selected = false;
+      this._selectedContainer = null;
+    }
+  },
+
+  /**
+   * Check if the current selection is a descendent of the container.
+   * if so, make sure it's among the visible set for the container,
+   * and set the dirty flag if needed.
+   *
+   * @return The node that should be made visible, if any.
+   */
+  _checkSelectionVisible(container) {
+    let centered = null;
+    let node = this.inspector.selection.nodeFront;
+    while (node) {
+      if (this._getParentInTree(node) === container.node) {
+        centered = node;
+        break;
+      }
+      node = this._getParentInTree(node);
+    }
+
+    return centered;
+  },
+
+  async _forceUpdateChildren(container, options = {}) {
+    const { flash, updateLevel, expand } = options;
+
+    // Set childrenDirty to true to force fetching new children.
+    container.childrenDirty = true;
+
+    // Update the children to take care of changes in the markup view DOM
+    await this._updateChildren(container, { expand, flash });
+
+    // The markup view may have been destroyed in the meantime
+    if (this._destroyed) {
+      return;
+    }
+
+    if (updateLevel) {
+      // Update container (and its subtree) DOM tree depth level for
+      // accessibility where necessary.
+      container.updateLevel();
+    }
+  },
+
+  /**
+   * Make sure all children of the given container's node are
+   * imported and attached to the container in the right order.
+   *
+   * Children need to be updated only in the following circumstances:
+   * a) We just imported this node and have never seen its children.
+   *    container.childrenDirty will be set by importNode in this case.
+   * b) We received a childList mutation on the node.
+   *    container.childrenDirty will be set in that case too.
+   * c) We have changed the selection, and the path to that selection
+   *    wasn't loaded in a previous children request (because we only
+   *    grab a subset).
+   *    container.childrenDirty should be set in that case too!
+   *
+   * @param  {MarkupContainer} container
+   *         The markup container whose children need updating
+   * @param  {Object} options
+   *         Options are {expand:boolean,flash:boolean}
+   * @return {Promise} that will be resolved when the children are ready
+   *         (which may be immediately).
+   */
+  _updateChildren(container, options) {
+    // Slotted containers do not display any children.
+    if (container.isSlotted()) {
+      return Promise.resolve(container);
+    }
+
+    const expand = options?.expand;
+    const flash = options?.flash;
+
+    container.hasChildren = container.node.hasChildren;
+    // Accessibility should either ignore empty children or semantically
+    // consider them a group.
+    container.setChildrenRole();
+
+    if (!this._queuedChildUpdates) {
+      this._queuedChildUpdates = new Map();
+    }
+
+    if (this._queuedChildUpdates.has(container)) {
+      return this._queuedChildUpdates.get(container);
+    }
+
+    if (!container.childrenDirty) {
+      return Promise.resolve(container);
+    }
+
+    // Before bailing out for other conditions, check if the unavailable
+    // children badge needs updating (Bug 1776250).
+    if (
+      typeof container?.editor?.hasUnavailableChildren == "function" &&
+      container.editor.hasUnavailableChildren() !=
+        container.node.childrenUnavailable
+    ) {
+      container.update();
+    }
+
+    if (
+      container.inlineTextChild &&
+      container.inlineTextChild != container.node.inlineTextChild
+    ) {
+      // This container was doing double duty as a container for a single
+      // text child, back that out.
+      this._containers.delete(container.inlineTextChild);
+      container.clearInlineTextChild();
+
+      if (container.hasChildren && container.selected) {
+        container.setExpanded(true);
+      }
+    }
+
+    if (container.node.inlineTextChild) {
+      container.setExpanded(false);
+      // this container will do double duty as the container for the single
+      // text child.
+      while (container.children.firstChild) {
+        container.children.firstChild.remove();
+      }
+
+      container.setInlineTextChild(container.node.inlineTextChild);
+
+      this.setContainer(container.node.inlineTextChild, container);
+      container.childrenDirty = false;
+      return Promise.resolve(container);
+    }
+
+    if (!container.hasChildren) {
+      while (container.children.firstChild) {
+        container.children.firstChild.remove();
+      }
+      container.childrenDirty = false;
+      container.setExpanded(false);
+      return Promise.resolve(container);
+    }
+
+    // If we're not expanded (or asked to update anyway), we're done for
+    // now.  Note that this will leave the childrenDirty flag set, so when
+    // expanded we'll refresh the child list.
+    if (!(container.expanded || expand)) {
+      return Promise.resolve(container);
+    }
+
+    // We're going to issue a children request, make sure it includes the
+    // centered node.
+    const centered = this._checkSelectionVisible(container);
+
+    // Children aren't updated yet, but clear the childrenDirty flag anyway.
+    // If the dirty flag is re-set while we're fetching we'll need to fetch
+    // again.
+    container.childrenDirty = false;
+
+    const isShadowHost = container.node.isShadowHost;
+    const updatePromise = this._getVisibleChildren(container, centered)
+      .then(children => {
+        if (!this._containers) {
+          return Promise.reject("markup view destroyed");
+        }
+        this._queuedChildUpdates.delete(container);
+
+        // If children are dirty, we got a change notification for this node
+        // while the request was in progress, we need to do it again.
+        if (container.childrenDirty) {
+          return this._updateChildren(container, {
+            expand: centered || expand,
+          });
+        }
+
+        const fragment = this.doc.createDocumentFragment();
+
+        for (const child of children.nodes) {
+          const slotted = !isShadowHost && child.isDirectShadowHostChild;
+          const childContainer = this.importNode(child, flash, slotted);
+          fragment.appendChild(childContainer.elt);
+        }
+
+        while (container.children.firstChild) {
+          container.children.firstChild.remove();
+        }
+
+        if (!children.hasFirst) {
+          const topItem = this.buildMoreNodesButtonMarkup(container);
+          fragment.insertBefore(topItem, fragment.firstChild);
+        }
+        if (!children.hasLast) {
+          const bottomItem = this.buildMoreNodesButtonMarkup(container);
+          fragment.appendChild(bottomItem);
+        }
+
+        container.children.appendChild(fragment);
+        return container;
+      })
+      .catch(this._handleRejectionIfNotDestroyed);
+    this._queuedChildUpdates.set(container, updatePromise);
+    return updatePromise;
+  },
+
+  buildMoreNodesButtonMarkup(container) {
+    const elt = this.doc.createElement("li");
+    elt.classList.add("more-nodes", "devtools-class-comment");
+
+    const label = this.doc.createElement("span");
+    label.textContent = INSPECTOR_L10N.getStr("markupView.more.showing");
+    elt.appendChild(label);
+
+    const button = this.doc.createElement("button");
+    button.setAttribute("href", "#");
+    const showAllString = PluralForm.get(
+      container.node.numChildren,
+      INSPECTOR_L10N.getStr("markupView.more.showAll2")
+    );
+    button.textContent = showAllString.replace(
+      "#1",
+      container.node.numChildren
+    );
+    elt.appendChild(button);
+
+    button.addEventListener("click", () => {
+      container.maxChildren = -1;
+      this._forceUpdateChildren(container);
+    });
+
+    return elt;
+  },
+
+  _waitForChildren() {
+    if (!this._queuedChildUpdates) {
+      return Promise.resolve(undefined);
+    }
+
+    return Promise.all([...this._queuedChildUpdates.values()]);
+  },
+
+  /**
+   * Return a list of the children to display for this container.
+   */
+  async _getVisibleChildren(container, centered) {
+    let maxChildren = container.maxChildren || this.maxChildren;
+    if (maxChildren == -1) {
+      maxChildren = undefined;
+    }
+
+    // We have to use node's walker and not a top level walker
+    // as for fission frames, we are going to have multiple walkers
+    const inspectorFront = await container.node.targetFront.getFront(
+      "inspector"
+    );
+    return inspectorFront.walker.children(container.node, {
+      maxNodes: maxChildren,
+      center: centered,
+    });
+  },
+
+  /**
+   * The parent of a given node as rendered in the markup view is not necessarily
+   * node.parentNode(). For instance, shadow roots don't have a parentNode, but a host
+   * element. However they are represented as parent and children in the markup view.
+   *
+   * Use this method when you are interested in the parent of a node from the perspective
+   * of the markup-view tree, and not from the perspective of the actual DOM.
+   */
+  _getParentInTree(node) {
+    const parent = node.parentOrHost();
+    if (!parent) {
+      return null;
+    }
+
+    // If the parent node belongs to a different target while the node's target is the
+    // one selected by the user in the iframe picker, we don't want to go further up.
+    if (
+      node.targetFront !== parent.targetFront &&
+      node.targetFront ==
+        this.inspector.commands.targetCommand.selectedTargetFront
+    ) {
+      return null;
+    }
+
+    return parent;
+  },
+
+  /**
+   * Tear down the markup panel.
+   */
+  destroy() {
+    if (this._destroyed) {
+      return;
+    }
+
+    this._destroyed = true;
+
+    this._hoveredContainer = null;
+
+    if (this._contextMenu) {
+      this._contextMenu.destroy();
+      this._contextMenu = null;
+    }
+
+    if (this._eventDetailsTooltip) {
+      this._eventDetailsTooltip.destroy();
+      this._eventDetailsTooltip = null;
+    }
+
+    if (this.htmlEditor) {
+      this.htmlEditor.destroy();
+      this.htmlEditor = null;
+    }
+
+    if (this.imagePreviewTooltip) {
+      this.imagePreviewTooltip.destroy();
+      this.imagePreviewTooltip = null;
+    }
+
+    if (this._undo) {
+      this._undo.destroy();
+      this._undo = null;
+    }
+
+    if (this._shortcuts) {
+      this._shortcuts.destroy();
+      this._shortcuts = null;
+    }
+
+    this.popup.destroy();
+    this.popup = null;
+    this._selectedContainer = null;
+
+    this._elt.removeEventListener("blur", this._onBlur, true);
+    this._elt.removeEventListener("click", this._onMouseClick);
+    this._elt.removeEventListener("contextmenu", this._onContextMenu);
+    this._elt.removeEventListener("mousemove", this._onMouseMove);
+    this._elt.removeEventListener("mouseout", this._onMouseOut);
+    this._frame.removeEventListener("focus", this._onFocus);
+    this._unsubscribeFromToolboxStore();
+    this.inspector.selection.off("new-node-front", this._onNewSelection);
+    this.resourceCommand.unwatchResources(
+      [this.resourceCommand.TYPES.ROOT_NODE],
+      { onAvailable: this._onResourceAvailable }
+    );
+    this.targetCommand.unwatchTargets({
+      types: [this.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
+    this.inspector.toolbox.nodePicker.off(
+      "picker-node-hovered",
+      this._onToolboxPickerHover
+    );
+    this.inspector.toolbox.nodePicker.off(
+      "picker-node-canceled",
+      this._onToolboxPickerCanceled
+    );
+    this.inspector.highlighters.off(
+      "highlighter-shown",
+      this.onHighlighterShown
+    );
+    this.inspector.highlighters.off(
+      "highlighter-hidden",
+      this.onHighlighterHidden
+    );
+    this.win.removeEventListener("copy", this._onCopy);
+    this.win.removeEventListener("mouseup", this._onMouseUp);
+
+    this._walkerEventListener.destroy();
+    this._walkerEventListener = null;
+
+    this._prefObserver.off(
+      ATTR_COLLAPSE_ENABLED_PREF,
+      this._onCollapseAttributesPrefChange
+    );
+    this._prefObserver.off(
+      ATTR_COLLAPSE_LENGTH_PREF,
+      this._onCollapseAttributesPrefChange
+    );
+    this._prefObserver.destroy();
+
+    for (const [, container] of this._containers) {
+      container.destroy();
+    }
+    this._containers = null;
+
+    this._elt.innerHTML = "";
+    this._elt = null;
+
+    this.controllerWindow = null;
+    this.doc = null;
+    this.highlighters = null;
+    this.walker = null;
+    this.resourceCommand = null;
+    this.win = null;
+
+    this._lastDropTarget = null;
+    this._lastDragTarget = null;
+  },
+
+  /**
+   * Find the closest element with class tag-line. These are used to indicate
+   * drag and drop targets.
+   *
+   * @param  {DOMNode} el
+   * @return {DOMNode}
+   */
+  findClosestDragDropTarget(el) {
+    return el.classList.contains("tag-line")
+      ? el
+      : el.querySelector(".tag-line") || el.closest(".tag-line");
+  },
+
+  /**
+   * Takes an element as it's only argument and marks the element
+   * as the drop target
+   */
+  indicateDropTarget(el) {
+    if (this._lastDropTarget) {
+      this._lastDropTarget.classList.remove("drop-target");
+    }
+
+    if (!el) {
+      return;
+    }
+
+    const target = this.findClosestDragDropTarget(el);
+    if (target) {
+      target.classList.add("drop-target");
+      this._lastDropTarget = target;
+    }
+  },
+
+  /**
+   * Takes an element to mark it as indicator of dragging target's initial place
+   */
+  indicateDragTarget(el) {
+    if (this._lastDragTarget) {
+      this._lastDragTarget.classList.remove("drag-target");
+    }
+
+    if (!el) {
+      return;
+    }
+
+    const target = this.findClosestDragDropTarget(el);
+    if (target) {
+      target.classList.add("drag-target");
+      this._lastDragTarget = target;
+    }
+  },
+
+  /**
+   * Used to get the nodes required to modify the markup after dragging the
+   * element (parent/nextSibling).
+   */
+  get dropTargetNodes() {
+    const target = this._lastDropTarget;
+
+    if (!target) {
+      return null;
+    }
+
+    let parent, nextSibling;
+
+    if (
+      target.previousElementSibling &&
+      target.previousElementSibling.nodeName.toLowerCase() === "ul"
+    ) {
+      parent = target.parentNode.container.node;
+      nextSibling = null;
+    } else {
+      parent = target.parentNode.container.node.parentNode();
+      nextSibling = target.parentNode.container.node;
+    }
+
+    if (nextSibling) {
+      while (
+        nextSibling.isMarkerPseudoElement ||
+        nextSibling.isBeforePseudoElement
+      ) {
+        nextSibling =
+          this.getContainer(nextSibling).elt.nextSibling.container.node;
+      }
+      if (nextSibling.isAfterPseudoElement) {
+        parent = target.parentNode.container.node.parentNode();
+        nextSibling = null;
+      }
+    }
+
+    if (parent.nodeType !== nodeConstants.ELEMENT_NODE) {
+      return null;
+    }
+
+    return { parent, nextSibling };
+  },
+};
+
+/**
+ * Copy the content of a longString containing HTML code to the clipboard.
+ * The string is retrieved, and possibly beautified if the user has the right pref set and
+ * then placed in the clipboard.
+ *
+ * @param  {Promise} longStringActorPromise
+ *         The promise expected to resolve a LongStringActor instance
+ */
+async function copyLongHTMLString(longStringActorPromise) {
+  let string = await getLongString(longStringActorPromise);
+
+  if (Services.prefs.getBoolPref(BEAUTIFY_HTML_ON_COPY_PREF)) {
+    const { indentUnit, indentWithTabs } = getTabPrefs();
+    string = beautify.html(string, {
+      // eslint-disable-next-line camelcase
+      preserve_newlines: false,
+      // eslint-disable-next-line camelcase
+      indent_size: indentWithTabs ? 1 : indentUnit,
+      // eslint-disable-next-line camelcase
+      indent_char: indentWithTabs ? "\t" : " ",
+      unformatted: [],
+    });
+  }
+
+  clipboardHelper.copyString(string);
+}
+
+/**
+ * Map a number from one range to another.
+ */
+function map(value, oldMin, oldMax, newMin, newMax) {
+  const ratio = oldMax - oldMin;
+  if (ratio == 0) {
+    return value;
+  }
+  return newMin + (newMax - newMin) * ((value - oldMin) / ratio);
+}
+
+module.exports = MarkupView;
diff --git a/devtools/client/inspector/markup/markup.xhtml b/devtools/client/inspector/markup/markup.xhtml
new file mode 100644
index 0000000000..dd8115bdc1
--- /dev/null
+++ b/devtools/client/inspector/markup/markup.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/skin/badge.css"
+      type="text/css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/skin/markup.css"
+      type="text/css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css"
+      type="text/css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/sourceeditor/codemirror/addon/dialog/dialog.css"
+      type="text/css"
+    />
+    <link
+      rel="stylesheet"
+      href="chrome://devtools/content/shared/sourceeditor/codemirror/mozilla.css"
+      type="text/css"
+    />
+
+    <script src="chrome://devtools/content/shared/theme-switching.js"></script>
+  </head>
+  <body class="theme-body devtools-monospace" role="application">
+    <div id="root-wrapper" role="presentation">
+      <div id="root" role="presentation"></div>
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/moz.build b/devtools/client/inspector/markup/moz.build
new file mode 100644
index 0000000000..2411139aab
--- /dev/null
+++ b/devtools/client/inspector/markup/moz.build
@@ -0,0 +1,19 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "components",
+    "utils",
+    "views",
+]
+
+DevToolsModules(
+    "markup-context-menu.js",
+    "markup.js",
+    "utils.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/devtools/client/inspector/markup/test/browser.toml b/devtools/client/inspector/markup/test/browser.toml
new file mode 100644
index 0000000000..0b566f5e18
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser.toml
@@ -0,0 +1,434 @@
+[DEFAULT]
+prefs = ["devtools.chrome.enabled=false"] # Bug 1520383 - Force devtools.chrome.enabled to false regardless of whether we're in an official build so we don't show event bubbles from chrome event listeners in the inspector on unprivileged test pages.
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_markup_anonymous.html",
+  "doc_markup_dragdrop.html",
+  "doc_markup_dragdrop_autoscroll_01.html",
+  "doc_markup_dragdrop_autoscroll_02.html",
+  "doc_markup_edit.html",
+  "doc_markup_events_01.html",
+  "doc_markup_events_02.html",
+  "doc_markup_events_03.html",
+  "doc_markup_events_04.html",
+  "doc_markup_events_chrome_listeners.html",
+  "doc_markup_events_jquery.html",
+  "doc_markup_events_object_listener.html",
+  "doc_markup_events-overflow.html",
+  "doc_markup_events_react_development_15.4.1.html",
+  "doc_markup_events_react_development_15.4.1_jsx.html",
+  "doc_markup_events_react_production_15.3.1.html",
+  "doc_markup_events_react_production_15.3.1_jsx.html",
+  "doc_markup_events_react_production_16.2.0.html",
+  "doc_markup_events_react_production_16.2.0_jsx.html",
+  "doc_markup_events-source_map.html",
+  "doc_markup_events_toggle.html",
+  "doc_markup_flashing.html",
+  "doc_markup_html_mixed_case.html",
+  "doc_markup_image_and_canvas.html",
+  "doc_markup_image_and_canvas_2.html",
+  "doc_markup_links_aria_attributes.html",
+  "doc_markup_links.html",
+  "doc_markup_mutation.html",
+  "doc_markup_navigation.html",
+  "doc_markup_not_displayed.html",
+  "doc_markup_pagesize_01.html",
+  "doc_markup_pagesize_02.html",
+  "doc_markup_pseudo.html",
+  "doc_markup_search.html",
+  "doc_markup_subgrid.html",
+  "doc_markup_svg_attributes.html",
+  "doc_markup_toggle.html",
+  "doc_markup_tooltip.png",
+  "doc_markup_void_elements.html",
+  "doc_markup_void_elements.xhtml",
+  "doc_markup_whitespace.html",
+  "doc_markup_xul.xhtml",
+  "doc_markup_update-on-navigtion_1.html",
+  "doc_markup_update-on-navigtion_2.html",
+  "doc_markup_view-original-source.html",
+  "doc_markup_shadowdom_open_debugger_pretty_printed.html",
+  "events_bundle.js",
+  "events_bundle.js.map",
+  "events_original.js",
+  "head.js",
+  "helper_attributes_test_runner.js",
+  "helper_diff.js",
+  "helper_events_test_runner.js",
+  "helper_markup_accessibility_navigation.js",
+  "helper_outerhtml_test_runner.js",
+  "helper_style_attr_test_runner.js",
+  "lib_babel_6.21.0_min.js",
+  "lib_jquery_1.0.js",
+  "lib_jquery_1.1.js",
+  "lib_jquery_1.2_min.js",
+  "lib_jquery_1.3_min.js",
+  "lib_jquery_1.4_min.js",
+  "lib_jquery_1.6_min.js",
+  "lib_jquery_1.7_min.js",
+  "lib_jquery_1.11.1_min.js",
+  "lib_jquery_2.1.1_min.js",
+  "lib_react_16.2.0_min.js",
+  "lib_react_dom_15.3.1_min.js",
+  "lib_react_dom_15.4.1.js",
+  "lib_react_dom_16.2.0_min.js",
+  "lib_react_with_addons_15.3.1_min.js",
+  "lib_react_with_addons_15.4.1.js",
+  "react_external_listeners.js",
+  "shadowdom_open_debugger.min.js",
+  "!/devtools/client/debugger/test/mochitest/shared-head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_markup_accessibility_focus_blur.js"]
+skip-if = ["os == 'mac'"] # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
+
+["browser_markup_accessibility_navigation.js"]
+skip-if = ["os == 'mac'"] # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
+
+["browser_markup_accessibility_navigation_after_edit.js"]
+skip-if = ["os == 'mac'"] # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
+
+["browser_markup_accessibility_new_selection.js"]
+
+["browser_markup_accessibility_semantics.js"]
+
+["browser_markup_anonymous_01.js"]
+
+["browser_markup_anonymous_03.js"]
+
+["browser_markup_anonymous_04.js"]
+
+["browser_markup_container_badge.js"]
+
+["browser_markup_copy_html.js"]
+
+["browser_markup_copy_image_data.js"]
+
+["browser_markup_css_completion_style_attribute_01.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_css_completion_style_attribute_02.js"]
+
+["browser_markup_css_completion_style_attribute_03.js"]
+
+["browser_markup_display_node_01.js"]
+
+["browser_markup_display_node_02.js"]
+
+["browser_markup_dom_mutation_breakpoints.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_dragdrop_autoscroll_01.js"]
+
+["browser_markup_dragdrop_autoscroll_02.js"]
+
+["browser_markup_dragdrop_before_marker_pseudo.js"]
+
+["browser_markup_dragdrop_distance.js"]
+
+["browser_markup_dragdrop_dragRootNode.js"]
+
+["browser_markup_dragdrop_draggable.js"]
+
+["browser_markup_dragdrop_escapeKeyPress.js"]
+
+["browser_markup_dragdrop_invalidNodes.js"]
+
+["browser_markup_dragdrop_reorder.js"]
+
+["browser_markup_dragdrop_tooltip.js"]
+
+["browser_markup_events-overflow.js"]
+skip-if = ["true"] # Bug 1177550
+
+["browser_markup_events-windowed-host.js"]
+
+["browser_markup_events_01.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_02.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_03.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_04.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_chrome_blocked.js"]
+
+["browser_markup_events_chrome_not_blocked.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_click_to_close.js"]
+
+["browser_markup_events_jquery_1.0.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_1.1.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_1.11.1.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_1.2.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_1.3.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_1.4.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_1.6.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_1.7.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_jquery_2.1.1.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_keyboard_navigation.js"]
+
+["browser_markup_events_object_listener.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_react_development_15.4.1.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_react_development_15.4.1_jsx.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_react_production_15.3.1.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_react_production_15.3.1_jsx.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_react_production_16.2.0.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_react_production_16.2.0_jsx.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_source_map.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_markup_events_toggle.js"]
+skip-if = ["a11y_checks"] # Bug 1849028 and 1849179 for causing crashes
+
+["browser_markup_flex_display_badge.js"]
+
+["browser_markup_flex_display_badge_telemetry.js"]
+
+["browser_markup_grid_display_badge_01.js"]
+
+["browser_markup_grid_display_badge_02.js"]
+
+["browser_markup_grid_display_badge_03.js"]
+
+["browser_markup_grid_display_badge_telemetry.js"]
+
+["browser_markup_html_edit_01.js"]
+
+["browser_markup_html_edit_02.js"]
+
+["browser_markup_html_edit_03.js"]
+
+["browser_markup_html_edit_04.js"]
+
+["browser_markup_html_edit_undo-redo.js"]
+
+["browser_markup_iframe_blocked_by_csp.js"]
+
+["browser_markup_image_tooltip.js"]
+
+["browser_markup_image_tooltip_mutations.js"]
+
+["browser_markup_keybindings_01.js"]
+
+["browser_markup_keybindings_02.js"]
+
+["browser_markup_keybindings_03.js"]
+
+["browser_markup_keybindings_04.js"]
+
+["browser_markup_keybindings_delete_attributes.js"]
+
+["browser_markup_keybindings_scrolltonode.js"]
+
+["browser_markup_links_01.js"]
+
+["browser_markup_links_02.js"]
+
+["browser_markup_links_03.js"]
+
+["browser_markup_links_04.js"]
+
+["browser_markup_links_05.js"]
+
+["browser_markup_links_06.js"]
+
+["browser_markup_links_07.js"]
+
+["browser_markup_links_aria_attributes.js"]
+
+["browser_markup_load_01.js"]
+skip-if = ["true"] # Bug 1706833, times out waiting for context menu to open
+
+["browser_markup_mutation_01.js"]
+
+["browser_markup_mutation_02.js"]
+
+["browser_markup_navigation.js"]
+
+["browser_markup_node_names.js"]
+
+["browser_markup_node_names_namespaced.js"]
+
+["browser_markup_node_not_displayed_01.js"]
+
+["browser_markup_node_not_displayed_02.js"]
+
+["browser_markup_overflow_badge.js"]
+
+["browser_markup_pagesize_01.js"]
+
+["browser_markup_pagesize_02.js"]
+
+["browser_markup_pseudo_on_reload.js"]
+
+["browser_markup_remove_xul_attributes.js"]
+
+["browser_markup_screenshot_node.js"]
+
+["browser_markup_screenshot_node_about_page.js"]
+
+["browser_markup_screenshot_node_iframe.js"]
+
+["browser_markup_screenshot_node_shadowdom.js"]
+
+["browser_markup_screenshot_node_warning.js"]
+
+["browser_markup_scrollable_badge.js"]
+
+["browser_markup_scrollable_badge_click.js"]
+
+["browser_markup_search_01.js"]
+
+["browser_markup_shadowdom.js"]
+
+["browser_markup_shadowdom_clickreveal.js"]
+
+["browser_markup_shadowdom_clickreveal_scroll.js"]
+
+["browser_markup_shadowdom_copy_paths.js"]
+
+["browser_markup_shadowdom_delete.js"]
+
+["browser_markup_shadowdom_dynamic.js"]
+
+["browser_markup_shadowdom_hover.js"]
+
+["browser_markup_shadowdom_marker_and_before_pseudos.js"]
+
+["browser_markup_shadowdom_maxchildren.js"]
+
+["browser_markup_shadowdom_mutations_shadow.js"]
+
+["browser_markup_shadowdom_navigation.js"]
+
+["browser_markup_shadowdom_nested_pick_inspect.js"]
+
+["browser_markup_shadowdom_noslot.js"]
+
+["browser_markup_shadowdom_open_debugger.js"]
+
+["browser_markup_shadowdom_open_debugger_pretty_printed.js"]
+
+["browser_markup_shadowdom_shadowroot_mode.js"]
+
+["browser_markup_shadowdom_show_nodes_button.js"]
+
+["browser_markup_shadowdom_slotted_keyboard_focus.js"]
+
+["browser_markup_shadowdom_slotupdate.js"]
+
+["browser_markup_shadowdom_ua_widgets.js"]
+
+["browser_markup_shadowdom_ua_widgets_with_nac.js"]
+
+["browser_markup_subgrid_display_badge.js"]
+
+["browser_markup_tag_delete_whitespace_node.js"]
+
+["browser_markup_tag_edit_01.js"]
+
+["browser_markup_tag_edit_02.js"]
+
+["browser_markup_tag_edit_03.js"]
+
+["browser_markup_tag_edit_04-backspace.js"]
+
+["browser_markup_tag_edit_04-delete.js"]
+
+["browser_markup_tag_edit_05.js"]
+
+["browser_markup_tag_edit_06.js"]
+
+["browser_markup_tag_edit_07.js"]
+
+["browser_markup_tag_edit_08.js"]
+
+["browser_markup_tag_edit_09.js"]
+
+["browser_markup_tag_edit_10.js"]
+
+["browser_markup_tag_edit_11.js"]
+
+["browser_markup_tag_edit_12.js"]
+
+["browser_markup_tag_edit_13-other.js"]
+
+["browser_markup_tag_edit_avoid_refocus.js"]
+
+["browser_markup_tag_edit_long-classname.js"]
+
+["browser_markup_template.js"]
+
+["browser_markup_textcontent_display.js"]
+
+["browser_markup_textcontent_edit_01.js"]
+
+["browser_markup_textcontent_edit_02.js"]
+
+["browser_markup_toggle_01.js"]
+
+["browser_markup_toggle_02.js"]
+
+["browser_markup_toggle_03.js"]
+
+["browser_markup_toggle_04.js"]
+
+["browser_markup_toggle_closing_tag_line.js"]
+
+["browser_markup_update-on-navigtion.js"]
+
+["browser_markup_view-original-source.js"]
+skip-if = ["a11y_checks"] # Bug 1858041 and 1849028 intermittent a11y_checks results (fails on Try, passes on Autoland)
+
+["browser_markup_view-source.js"]
+skip-if = ["a11y_checks"] # Bug 1858041 and 1849028 intermittent a11y_checks results (fails on Try, passes on Autoland)
+
+["browser_markup_void_elements_html.js"]
+
+["browser_markup_void_elements_xhtml.js"]
+
+["browser_markup_whitespace.js"]
diff --git a/devtools/client/inspector/markup/test/browser_markup_accessibility_focus_blur.js b/devtools/client/inspector/markup/test/browser_markup_accessibility_focus_blur.js
new file mode 100644
index 0000000000..6be70144d8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_focus_blur.js
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test inspector markup view handling focus and blur when moving between markup
+// view, its root and other containers, and other parts of inspector.
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+  const markup = inspector.markup;
+  const doc = markup.doc;
+  const win = doc.defaultView;
+
+  const spanContainer = await getContainerForSelector("span", inspector);
+  const rootContainer = markup.getContainer(markup._rootNode);
+
+  is(
+    doc.activeElement,
+    doc.body,
+    "Keyboard focus by default is on document body"
+  );
+
+  await selectNode("span", inspector);
+
+  is(doc.activeElement, doc.body, "Keyboard focus is still on document body");
+
+  info("Focusing on the test span node using 'Return' key");
+  // Focus on the tree element.
+  rootContainer.elt.focus();
+  EventUtils.synthesizeKey("VK_RETURN", {}, win);
+
+  is(
+    doc.activeElement,
+    spanContainer.editor.tag,
+    "Keyboard focus should be on tag element of focused container"
+  );
+
+  info("Focusing on search box, external to markup view document");
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  is(
+    doc.activeElement,
+    doc.body,
+    "Keyboard focus should be removed from focused container"
+  );
+
+  info("Selecting the test span node again");
+  await selectNode("span", inspector);
+
+  is(
+    doc.activeElement,
+    doc.body,
+    "Keyboard focus should again be on document body"
+  );
+
+  info("Focusing on the test span node using 'Space' key");
+  // Focus on the tree element.
+  rootContainer.elt.focus();
+  EventUtils.synthesizeKey("VK_SPACE", {}, win);
+
+  is(
+    doc.activeElement,
+    spanContainer.editor.tag,
+    "Keyboard focus should again be on tag element of focused container"
+  );
+
+  await clickOnInspectMenuItem("h1");
+  is(
+    doc.activeElement,
+    rootContainer.elt,
+    "When inspect menu item is used keyboard focus should move to tree."
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
new file mode 100644
index 0000000000..d7eaffae82
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
@@ -0,0 +1,277 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* import-globals-from helper_markup_accessibility_navigation.js */
+
+"use strict";
+
+// Test keyboard navigation accessibility of inspector's markup view.
+
+loadHelperScript("helper_markup_accessibility_navigation.js");
+
+/**
+ * Test data has the format of:
+ * {
+ *   desc              {String}   description for better logging
+ *   key               {String}   key event's key
+ *   options           {?Object}  optional event data such as shiftKey, etc
+ *   focused           {String}   path to expected focused element relative to
+ *                                its container
+ *   activedescendant  {String}   path to expected aria-activedescendant element
+ *                                relative to its container
+ *   waitFor           {String}   optional event to wait for if keyboard actions
+ *                                result in asynchronous updates
+ * }
+ */
+const TESTS = [
+  {
+    desc: "Collapse body container",
+    focused: "root.elt",
+    activedescendant: "body.tagLine",
+    key: "VK_LEFT",
+    options: {},
+    waitFor: "collapsed",
+  },
+  {
+    desc: "Expand body container",
+    focused: "root.elt",
+    activedescendant: "body.tagLine",
+    key: "VK_RIGHT",
+    options: {},
+    waitFor: "expanded",
+  },
+  {
+    desc: "Select header container",
+    focused: "root.elt",
+    activedescendant: "header.tagLine",
+    key: "VK_DOWN",
+    options: {},
+    waitFor: "inspector-updated",
+  },
+  {
+    desc: "Expand header container",
+    focused: "root.elt",
+    activedescendant: "header.tagLine",
+    key: "VK_RIGHT",
+    options: {},
+    waitFor: "expanded",
+  },
+  {
+    desc: "Select text container",
+    focused: "root.elt",
+    activedescendant: "container-0.tagLine",
+    key: "VK_DOWN",
+    options: {},
+    waitFor: "inspector-updated",
+  },
+  {
+    desc: "Select header container again",
+    focused: "root.elt",
+    activedescendant: "header.tagLine",
+    key: "VK_UP",
+    options: {},
+    waitFor: "inspector-updated",
+  },
+  {
+    desc: "Collapse header container",
+    focused: "root.elt",
+    activedescendant: "header.tagLine",
+    key: "VK_LEFT",
+    options: {},
+    waitFor: "collapsed",
+  },
+  {
+    desc: "Focus on header container tag",
+    focused: "header.focusableElms.0",
+    activedescendant: "header.tagLine",
+    key: "VK_RETURN",
+    options: {},
+  },
+  {
+    desc: "Remove focus from header container tag",
+    focused: "root.elt",
+    activedescendant: "header.tagLine",
+    key: "VK_ESCAPE",
+    options: {},
+  },
+  {
+    desc: "Focus on header container tag again",
+    focused: "header.focusableElms.0",
+    activedescendant: "header.tagLine",
+    key: "VK_SPACE",
+    options: {},
+  },
+  {
+    desc: "Focus on header id attribute",
+    focused: "header.focusableElms.1",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Focus on header class attribute",
+    focused: "header.focusableElms.2",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Focus on header new attribute",
+    focused: "header.focusableElms.3",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Circle back and focus on header tag again",
+    focused: "header.focusableElms.0",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Circle back and focus on header new attribute again",
+    focused: "header.focusableElms.3",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: { shiftKey: true },
+  },
+  {
+    desc: "Tab back and focus on header class attribute",
+    focused: "header.focusableElms.2",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: { shiftKey: true },
+  },
+  {
+    desc: "Tab back and focus on header id attribute",
+    focused: "header.focusableElms.1",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: { shiftKey: true },
+  },
+  {
+    desc: "Tab back and focus on header tag",
+    focused: "header.focusableElms.0",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: { shiftKey: true },
+  },
+  {
+    desc: "Expand header container, ensure that focus is still on header tag",
+    focused: "header.focusableElms.0",
+    activedescendant: "header.tagLine",
+    key: "VK_RIGHT",
+    options: {},
+    waitFor: "expanded",
+  },
+  {
+    desc: "Activate header tag editor",
+    focused: "header.editor.tag.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_RETURN",
+    options: {},
+  },
+  {
+    desc: "Activate header id attribute editor",
+    focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Deselect text in header id attribute editor",
+    focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Activate header class attribute editor",
+    focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Deselect text in header class attribute editor",
+    focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Activate header new attribute editor",
+    focused: "header.editor.newAttr.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Circle back and activate header tag editor again",
+    focused: "header.editor.tag.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Circle back and activate header new attribute editor again",
+    focused: "header.editor.newAttr.inplaceEditor.input",
+    activedescendant: "header.tagLine",
+    key: "VK_TAB",
+    options: { shiftKey: true },
+  },
+  {
+    desc: "Exit edit mode and keep focus on header new attribute",
+    focused: "header.focusableElms.3",
+    activedescendant: "header.tagLine",
+    key: "VK_ESCAPE",
+    options: {},
+  },
+  {
+    desc: "Move the selection to body and reset focus to container tree",
+    focused: "docBody",
+    activedescendant: "body.tagLine",
+    key: "VK_UP",
+    options: {},
+    waitFor: "inspector-updated",
+  },
+];
+
+let containerID = 0;
+let elms = {};
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(`data:text/html;charset=utf-8,
+    <h1 id="some-id" class="some-class">foo<span>Child span<span></h1>`);
+
+  // Record containers that are created after inspector is initialized to be
+  // useful in testing.
+  inspector.on("container-created", memorizeContainer);
+  registerCleanupFunction(() => {
+    inspector.off("container-created", memorizeContainer);
+  });
+
+  elms.docBody = inspector.markup.doc.body;
+  elms.root = inspector.markup.getContainer(inspector.markup._rootNode);
+  elms.header = await getContainerForSelector("h1", inspector);
+  elms.body = await getContainerForSelector("body", inspector);
+
+  // Initial focus is on root element and active descendant should be set on
+  // body tag line.
+  testNavigationState(inspector, elms, elms.docBody, elms.body.tagLine);
+
+  // Focus on the tree element.
+  elms.root.elt.focus();
+
+  for (const testData of TESTS) {
+    await runAccessibilityNavigationTest(inspector, elms, testData);
+  }
+
+  elms = null;
+});
+
+// Record all containers that are created dynamically into elms object.
+function memorizeContainer(container) {
+  elms[`container-${containerID++}`] = container;
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
new file mode 100644
index 0000000000..7f3782fab0
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
@@ -0,0 +1,126 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* import-globals-from helper_markup_accessibility_navigation.js */
+
+"use strict";
+
+// Test keyboard navigation accessibility is preserved after editing attributes.
+
+loadHelperScript("helper_markup_accessibility_navigation.js");
+
+const TEST_URI = '<div id="some-id" class="some-class"></div>';
+
+/**
+ * Test data has the format of:
+ * {
+ *   desc              {String}   description for better logging
+ *   key               {String}   key event's key
+ *   options           {?Object}  optional event data such as shiftKey, etc
+ *   focused           {String}   path to expected focused element relative to
+ *                                its container
+ *   activedescendant  {String}   path to expected aria-activedescendant element
+ *                                relative to its container
+ *   waitFor           {String}   optional event to wait for if keyboard actions
+ *                                result in asynchronous updates
+ * }
+ */
+const TESTS = [
+  {
+    desc: "Select header container",
+    focused: "root.elt",
+    activedescendant: "div.tagLine",
+    key: "VK_DOWN",
+    options: {},
+    waitFor: "inspector-updated",
+  },
+  {
+    desc: "Focus on header tag",
+    focused: "div.focusableElms.0",
+    activedescendant: "div.tagLine",
+    key: "VK_RETURN",
+    options: {},
+  },
+  {
+    desc: "Activate header tag editor",
+    focused: "div.editor.tag.inplaceEditor.input",
+    activedescendant: "div.tagLine",
+    key: "VK_RETURN",
+    options: {},
+  },
+  {
+    desc: "Activate header id attribute editor",
+    focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
+    activedescendant: "div.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Deselect text in header id attribute editor",
+    focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
+    activedescendant: "div.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Move the cursor to the left",
+    focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
+    activedescendant: "div.tagLine",
+    key: "VK_LEFT",
+    options: {},
+  },
+  {
+    desc: "Modify the attribute",
+    focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
+    activedescendant: "div.tagLine",
+    key: "A",
+    options: {},
+  },
+  {
+    desc: "Commit the attribute change",
+    focused: "div.focusableElms.1",
+    activedescendant: "div.tagLine",
+    key: "VK_RETURN",
+    options: {},
+    waitFor: "inspector-updated",
+  },
+  {
+    desc: "Tab and focus on header class attribute",
+    focused: "div.focusableElms.2",
+    activedescendant: "div.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Tab and focus on header new attribute node",
+    focused: "div.focusableElms.3",
+    activedescendant: "div.tagLine",
+    key: "VK_TAB",
+    options: {},
+  },
+];
+
+let elms = {};
+
+add_task(async function () {
+  const url = `data:text/html;charset=utf-8,${TEST_URI}`;
+  const { inspector } = await openInspectorForURL(url);
+
+  elms.docBody = inspector.markup.doc.body;
+  elms.root = inspector.markup.getContainer(inspector.markup._rootNode);
+  elms.div = await getContainerForSelector("div", inspector);
+  elms.body = await getContainerForSelector("body", inspector);
+
+  // Initial focus is on root element and active descendant should be set on
+  // body tag line.
+  testNavigationState(inspector, elms, elms.docBody, elms.body.tagLine);
+
+  // Focus on the tree element.
+  elms.root.elt.focus();
+
+  for (const testData of TESTS) {
+    await runAccessibilityNavigationTest(inspector, elms, testData);
+  }
+
+  elms = null;
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_accessibility_new_selection.js b/devtools/client/inspector/markup/test/browser_markup_accessibility_new_selection.js
new file mode 100644
index 0000000000..f1a6d3d769
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_new_selection.js
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test inspector markup view handling new node selection that is triggered by
+// the user keyboard action. In this case markup tree container must receive
+// keyboard focus so that further interactions continue within the markup tree.
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+  const markup = inspector.markup;
+  const doc = markup.doc;
+  const rootContainer = markup.getContainer(markup._rootNode);
+
+  is(
+    doc.activeElement,
+    doc.body,
+    "Keyboard focus by default is on document body"
+  );
+
+  await selectNode("span", inspector, "test");
+  is(doc.activeElement, doc.body, "Keyboard focus remains on document body.");
+
+  await selectNode("h1", inspector, "test-keyboard");
+  is(
+    doc.activeElement,
+    rootContainer.elt,
+    "Keyboard focus must be on the markup tree conainer."
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_accessibility_semantics.js b/devtools/client/inspector/markup/test/browser_markup_accessibility_semantics.js
new file mode 100644
index 0000000000..8aa5a2e335
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_semantics.js
@@ -0,0 +1,146 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that inspector markup view has all expected ARIA properties set and
+// updated.
+
+const TOP_CONTAINER_LEVEL = 3;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(`
+    data:text/html;charset=utf-8,
+    <h1>foo</h1>
+    <span>bar</span>
+    <dl>
+      <dt></dt>
+    </dl>`);
+  const markup = inspector.markup;
+  const doc = markup.doc;
+  const win = doc.defaultView;
+
+  const rootElt = markup.getContainer(markup._rootNode).elt;
+  const bodyContainer = await getContainerForSelector("body", inspector);
+  const spanContainer = await getContainerForSelector("span", inspector);
+  const headerContainer = await getContainerForSelector("h1", inspector);
+  const listContainer = await getContainerForSelector("dl", inspector);
+
+  // Focus on the tree element.
+  rootElt.focus();
+
+  // Test tree related semantics
+  is(
+    rootElt.getAttribute("role"),
+    "tree",
+    "Root container should have tree semantics"
+  );
+  is(
+    rootElt.getAttribute("aria-dropeffect"),
+    "none",
+    "By default root container's drop effect should be set to none"
+  );
+  is(
+    rootElt.getAttribute("aria-activedescendant"),
+    bodyContainer.tagLine.getAttribute("id"),
+    "Default active descendant should be set to body"
+  );
+  is(
+    parseInt(bodyContainer.tagLine.getAttribute("aria-level"), 10),
+    TOP_CONTAINER_LEVEL - 1,
+    "Body container tagLine should have nested level up to date"
+  );
+  [spanContainer, headerContainer, listContainer].forEach(container => {
+    const treeitem = container.tagLine;
+    is(
+      treeitem.getAttribute("role"),
+      "treeitem",
+      "Child container tagLine elements should have tree item semantics"
+    );
+    is(
+      parseInt(treeitem.getAttribute("aria-level"), 10),
+      TOP_CONTAINER_LEVEL,
+      "Child container tagLine should have nested level up to date"
+    );
+    is(
+      treeitem.getAttribute("aria-grabbed"),
+      "false",
+      "Child container should be draggable but not grabbed by default"
+    );
+    is(
+      container.children.getAttribute("role"),
+      "group",
+      "Container with children should have its children element have group " +
+        "semantics"
+    );
+    ok(treeitem.id, "Tree item should have id assigned");
+    if (container.closeTagLine) {
+      is(
+        container.closeTagLine.getAttribute("role"),
+        "presentation",
+        "Ignore closing tag"
+      );
+    }
+    if (container.expander) {
+      is(
+        container.expander.getAttribute("role"),
+        "presentation",
+        "Ignore expander"
+      );
+    }
+  });
+
+  // Test expanding/expandable semantics
+  ok(
+    !spanContainer.tagLine.hasAttribute("aria-expanded"),
+    "Non expandable tree items should not have aria-expanded attribute"
+  );
+  ok(
+    !headerContainer.tagLine.hasAttribute("aria-expanded"),
+    "Non expandable tree items should not have aria-expanded attribute"
+  );
+  is(
+    listContainer.tagLine.getAttribute("aria-expanded"),
+    "false",
+    "Closed tree item should have aria-expanded unset"
+  );
+
+  info("Selecting and expanding list container");
+  await selectNode("dl", inspector);
+  EventUtils.synthesizeKey("VK_RIGHT", {}, win);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  is(
+    rootElt.getAttribute("aria-activedescendant"),
+    listContainer.tagLine.getAttribute("id"),
+    "Active descendant should not be set to list container tagLine"
+  );
+  is(
+    listContainer.tagLine.getAttribute("aria-expanded"),
+    "true",
+    "Open tree item should have aria-expanded set"
+  );
+  const listItemContainer = await getContainerForSelector("dt", inspector);
+  is(
+    parseInt(listItemContainer.tagLine.getAttribute("aria-level"), 10),
+    TOP_CONTAINER_LEVEL + 1,
+    "Grand child container tagLine should have nested level up to date"
+  );
+  is(
+    listItemContainer.children.getAttribute("role"),
+    "presentation",
+    "Container with no children should have its children element ignored by " +
+      "accessibility"
+  );
+
+  info("Collapsing list container");
+  EventUtils.synthesizeKey("VK_LEFT", {}, win);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  is(
+    listContainer.tagLine.getAttribute("aria-expanded"),
+    "false",
+    "Closed tree item should have aria-expanded unset"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_anonymous_01.js b/devtools/client/inspector/markup/test/browser_markup_anonymous_01.js
new file mode 100644
index 0000000000..4cf50de11e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_anonymous_01.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test native anonymous content in the markupview.
+const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const pseudo = await getNodeFront("#pseudo", inspector);
+
+  // Markup looks like: <div><::before /><span /><::after /></div>
+  const children = await inspector.walker.children(pseudo);
+  is(children.nodes.length, 3, "Children returned from walker");
+
+  info("Checking the ::before pseudo element");
+  const before = children.nodes[0];
+  await isEditingMenuDisabled(before, inspector);
+
+  info("Checking the normal child element");
+  const span = children.nodes[1];
+  await isEditingMenuEnabled(span, inspector);
+
+  info("Checking the ::after pseudo element");
+  const after = children.nodes[2];
+  await isEditingMenuDisabled(after, inspector);
+
+  const native = await getNodeFront("#native", inspector);
+
+  // Markup looks like: <div><input type="file"></div>
+  const nativeChildren = await inspector.walker.children(native);
+  is(nativeChildren.nodes.length, 1, "Children returned from walker");
+
+  info("Checking the input element");
+  const child = nativeChildren.nodes[0];
+  ok(!child.isAnonymous, "<input type=file> is not anonymous");
+
+  const grandchildren = await inspector.walker.children(child);
+  is(
+    grandchildren.nodes.length,
+    0,
+    "No native children returned from walker for <input type=file> by default"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_anonymous_03.js b/devtools/client/inspector/markup/test/browser_markup_anonymous_03.js
new file mode 100644
index 0000000000..2d251a884a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_anonymous_03.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test shadow DOM content in the markupview.
+// Note that many features are not yet enabled, but basic listing
+// of elements should be working.
+const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const shadowHostFront = await getNodeFront("#shadow", inspector.markup);
+  is(shadowHostFront.numChildren, 3, "Children of the shadow host are correct");
+
+  await inspector.markup.expandNode(shadowHostFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  const shadowContainer = inspector.markup.getContainer(shadowHostFront);
+  const containers = shadowContainer.getChildContainers();
+
+  info("Checking the ::before pseudo element");
+  const before = containers[1].node;
+  await isEditingMenuDisabled(before, inspector);
+
+  info("Checking shadow dom children");
+  const shadowRootFront = containers[0].node;
+  const children = await inspector.walker.children(shadowRootFront);
+
+  is(shadowRootFront.numChildren, 2, "Children of the shadow root are counted");
+  is(children.nodes.length, 2, "Children returned from walker");
+
+  info("Checking the <h3> shadow element");
+  const shadowChild1 = children.nodes[0];
+  await isEditingMenuEnabled(shadowChild1, inspector);
+
+  info("Checking the <select> shadow element");
+  const shadowChild2 = children.nodes[1];
+  await isEditingMenuEnabled(shadowChild2, inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_anonymous_04.js b/devtools/client/inspector/markup/test/browser_markup_anonymous_04.js
new file mode 100644
index 0000000000..f40006b88b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_anonymous_04.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test native anonymous content in the markupview with
+// devtools.inspector.showAllAnonymousContent set to true
+const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";
+const PREF = "devtools.inspector.showAllAnonymousContent";
+
+add_task(async function () {
+  Services.prefs.setBoolPref(PREF, true);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const native = await getNodeFront("#native", inspector);
+
+  // Markup looks like: <div><input type="file"></div>
+  const nativeChildren = await inspector.walker.children(native);
+  is(nativeChildren.nodes.length, 1, "Children returned from walker");
+
+  info("Checking the input element");
+  const child = nativeChildren.nodes[0];
+  ok(!child.isAnonymous, "<input type=file> is not anonymous");
+
+  const grandchildren = await inspector.walker.children(child);
+  is(
+    grandchildren.nodes.length,
+    2,
+    "<input type=file> has native anonymous children"
+  );
+
+  for (const node of grandchildren.nodes) {
+    ok(node.isAnonymous, "Child is anonymous");
+    ok(node._form.isNativeAnonymous, "Child is native anonymous");
+    await isEditingMenuDisabled(node, inspector);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_container_badge.js b/devtools/client/inspector/markup/test/browser_markup_container_badge.js
new file mode 100644
index 0000000000..00995e518d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_container_badge.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the container badge is displayed on element with expected container-type values.
+
+const TEST_URI = `
+  <style type="text/css">
+    #container-inline-size {
+      container-type: inline-size;
+    }
+
+    #container-size {
+      container-type: size;
+    }
+
+    #container-normal {
+      container-type: normal;
+    }
+  </style>
+  <div id="container-inline-size">container-inline-size</div>
+  <div id="container-size">container-size</div>
+  <div id="container-normal">container-normal</div>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.container-queries.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openLayoutView();
+
+  info(
+    "Check that the container badge is shown for element with container-type: inline-size"
+  );
+  let container = await getContainerForSelector(
+    "#container-inline-size",
+    inspector
+  );
+  const containerInlineSizeBadge = container.elt.querySelector(
+    ".inspector-badge[data-container]"
+  );
+  ok(
+    !!containerInlineSizeBadge,
+    "container badge is displayed for inline-size container"
+  );
+  is(
+    containerInlineSizeBadge.textContent,
+    "container",
+    "badge has expected text"
+  );
+  is(
+    containerInlineSizeBadge.title,
+    "container-type: inline-size",
+    "badge has expected title for inline-size container"
+  );
+
+  info("Change the element containerType value to see if the badge hides");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    content.document.querySelector(
+      "#container-inline-size"
+    ).style.containerType = "normal";
+  });
+  await waitFor(
+    () =>
+      container.elt.querySelector(".inspector-badge[data-container]") == null
+  );
+  ok(true, "The badge hides when changing the containerType value");
+
+  info(
+    "Check that the container badge is shown for element with container-type: size"
+  );
+  container = await getContainerForSelector("#container-size", inspector);
+  const containerSizeBadge = container.elt.querySelector(
+    ".inspector-badge[data-container]"
+  );
+  ok(!!containerSizeBadge, "container badge is displayed for size container");
+  is(containerSizeBadge.textContent, "container", "badge has expected text");
+  is(
+    containerSizeBadge.title,
+    "container-type: size",
+    "badge has expected title for size container"
+  );
+
+  info(
+    "Check that the container badge is not shown for element with container-type: normal"
+  );
+  container = await getContainerForSelector("#container-normal", inspector);
+  const noContainerBadge = container.elt.querySelector(
+    ".inspector-badge[data-container]"
+  );
+  ok(
+    !noContainerBadge,
+    "container badge is not displayed for element with container-type: normal"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_copy_html.js b/devtools/client/inspector/markup/test/browser_markup_copy_html.js
new file mode 100644
index 0000000000..e1693a6366
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_copy_html.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the copy inner and outer html menu options.
+
+// The nicely formatted HTML code.
+const FORMATTED_HTML = `<body>
+  <style>
+    div {
+      color: red;
+    }
+
+    span {
+      text-decoration: underline;
+    }
+  </style>
+  <div><span><em>Hello</em></span></div>
+  <script>
+    console.log("Hello!");
+  </script>
+</body>`;
+
+// The inner HTML of the body node from the code above.
+const FORMATTED_INNER_HTML = FORMATTED_HTML.replace(/<\/*body>/g, "")
+  .trim()
+  .replace(/^ {2}/gm, "");
+
+// The formatted outer HTML, using tabs rather than spaces.
+const TABS_FORMATTED_HTML = FORMATTED_HTML.replace(/[ ]{2}/g, "\t");
+
+// The formatted outer HTML, using 3 spaces instead of 2.
+const THREE_SPACES_FORMATTED_HTML = FORMATTED_HTML.replace(/[ ]{2}/g, "   ");
+
+// Uglify the formatted code by removing all spaces and line breaks.
+const UGLY_HTML = FORMATTED_HTML.replace(/[\r\n\s]+/g, "");
+
+// And here is the inner html of the body node from the ugly code above.
+const UGLY_INNER_HTML = UGLY_HTML.replace(/<\/*body>/g, "");
+
+add_task(async function () {
+  // Load the ugly code in a new tab and open the inspector.
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(UGLY_HTML)
+  );
+
+  info("Get the inner and outer html copy menu items");
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  const outerHtmlMenu = allMenuItems.find(
+    ({ id }) => id === "node-menu-copyouter"
+  );
+  const innerHtmlMenu = allMenuItems.find(
+    ({ id }) => id === "node-menu-copyinner"
+  );
+
+  info("Try to copy the outer html");
+  await waitForClipboardPromise(() => outerHtmlMenu.click(), UGLY_HTML);
+
+  info("Try to copy the inner html");
+  await waitForClipboardPromise(() => innerHtmlMenu.click(), UGLY_INNER_HTML);
+
+  info("Set the pref for beautifying html on copy");
+  await pushPref("devtools.markup.beautifyOnCopy", true);
+
+  info("Try to copy the beautified outer html");
+  await waitForClipboardPromise(() => outerHtmlMenu.click(), FORMATTED_HTML);
+
+  info("Try to copy the beautified inner html");
+  await waitForClipboardPromise(
+    () => innerHtmlMenu.click(),
+    FORMATTED_INNER_HTML
+  );
+
+  info("Set the pref to stop expanding tabs into spaces");
+  await pushPref("devtools.editor.expandtab", false);
+
+  info("Check that the beautified outer html uses tabs");
+  await waitForClipboardPromise(
+    () => outerHtmlMenu.click(),
+    TABS_FORMATTED_HTML
+  );
+
+  info("Set the pref to expand tabs to 3 spaces");
+  await pushPref("devtools.editor.expandtab", true);
+  await pushPref("devtools.editor.tabsize", 3);
+
+  info("Try to copy the beautified outer html");
+  await waitForClipboardPromise(
+    () => outerHtmlMenu.click(),
+    THREE_SPACES_FORMATTED_HTML
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_copy_image_data.js b/devtools/client/inspector/markup/test/browser_markup_copy_image_data.js
new file mode 100644
index 0000000000..0386551c41
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_copy_image_data.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that image nodes have the "copy data-uri" contextual menu item enabled
+// and that clicking it puts the image data into the clipboard
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_markup_image_and_canvas.html");
+  const { inspector } = await openInspector();
+
+  await selectNode("div", inspector);
+  await assertCopyImageDataNotAvailable(inspector);
+
+  await selectNode("img", inspector);
+  await assertCopyImageDataAvailable(inspector);
+  const expectedSrc = await getContentPageElementAttribute("img", "src");
+  await triggerCopyImageUrlAndWaitForClipboard(expectedSrc, inspector);
+
+  await selectNode("canvas", inspector);
+  await assertCopyImageDataAvailable(inspector);
+  const expectedURL = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.document.querySelector(".canvas").toDataURL()
+  );
+  await triggerCopyImageUrlAndWaitForClipboard(expectedURL, inspector);
+
+  // Check again that the menu isn't available on the DIV (to make sure our
+  // menu updating mechanism works)
+  await selectNode("div", inspector);
+  await assertCopyImageDataNotAvailable(inspector);
+});
+
+function assertCopyImageDataNotAvailable(inspector) {
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  const item = allMenuItems.find(i => i.id === "node-menu-copyimagedatauri");
+
+  ok(item, "The menu item was found in the contextual menu");
+  ok(item.disabled, "The menu item is disabled");
+}
+
+function assertCopyImageDataAvailable(inspector) {
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  const item = allMenuItems.find(i => i.id === "node-menu-copyimagedatauri");
+
+  ok(item, "The menu item was found in the contextual menu");
+  ok(!item.disabled, "The menu item is enabled");
+}
+
+function triggerCopyImageUrlAndWaitForClipboard(expected, inspector) {
+  return new Promise(resolve => {
+    SimpleTest.waitForClipboard(
+      expected,
+      () => {
+        inspector.markup
+          .getContainer(inspector.selection.nodeFront)
+          .copyImageDataUri();
+      },
+      () => {
+        ok(
+          true,
+          "The clipboard contains the expected value " +
+            expected.substring(0, 50) +
+            "..."
+        );
+        resolve();
+      },
+      () => {
+        ok(
+          false,
+          "The clipboard doesn't contain the expected value " +
+            expected.substring(0, 50) +
+            "..."
+        );
+        resolve();
+      }
+    );
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
new file mode 100644
index 0000000000..c27b626852
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_style_attr_test_runner.js */
+
+"use strict";
+
+// Test CSS state is correctly determined and the corresponding suggestions are
+// displayed. i.e. CSS property suggestions are shown when cursor is like:
+// ```style="di|"``` where | is the cursor; And CSS value suggestion is
+// displayed when the cursor is like: ```style="display:n|"``` properly. No
+// suggestions should ever appear when the attribute is not a style attribute.
+// The correctness and cycling of the suggestions is covered in the ruleview
+// tests.
+
+loadHelperScript("helper_style_attr_test_runner.js");
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+
+// test data format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    expected input.selectionStart,
+//    expected input.selectionEnd,
+//    is popup expected to be open ?
+//  ]
+const TEST_DATA = [
+  ["s", "s", 1, 1, false],
+  ["t", "st", 2, 2, false],
+  ["y", "sty", 3, 3, false],
+  ["l", "styl", 4, 4, false],
+  ["e", "style", 5, 5, false],
+  ["=", "style=", 6, 6, false],
+  ['"', 'style="', 7, 7, false],
+  ["d", 'style="display', 8, 14, true],
+  ["VK_TAB", 'style="display', 14, 14, true],
+  ["VK_TAB", 'style="dominant-baseline', 24, 24, true],
+  ["VK_TAB", 'style="d', 8, 8, true],
+  ["VK_TAB", 'style="direction', 16, 16, true],
+  ["click_2", 'style="display', 14, 14, false],
+  [":", 'style="display:block', 15, 20, true],
+  ["n", 'style="display:none', 16, 19, false],
+  ["VK_BACK_SPACE", 'style="display:n', 16, 16, false],
+  ["VK_BACK_SPACE", 'style="display:', 15, 15, false],
+  [" ", 'style="display: block', 16, 21, true],
+  [" ", 'style="display:  block', 17, 22, true],
+  ["i", 'style="display:  inherit', 18, 24, true],
+  ["VK_RIGHT", 'style="display:  inherit', 24, 24, false],
+  [";", 'style="display:  inherit;', 25, 25, false],
+  [" ", 'style="display:  inherit; ', 26, 26, false],
+  [" ", 'style="display:  inherit;  ', 27, 27, false],
+  ["VK_LEFT", 'style="display:  inherit;  ', 26, 26, false],
+  ["c", 'style="display:  inherit; color ', 27, 31, true],
+  ["VK_RIGHT", 'style="display:  inherit; color ', 31, 31, false],
+  [" ", 'style="display:  inherit; color  ', 32, 32, false],
+  ["c", 'style="display:  inherit; color c ', 33, 33, false],
+  ["VK_BACK_SPACE", 'style="display:  inherit; color  ', 32, 32, false],
+  [":", 'style="display:  inherit; color :aliceblue ', 33, 42, true],
+  ["c", 'style="display:  inherit; color :color ', 34, 38, true],
+  ["VK_DOWN", 'style="display:  inherit; color :color-mix ', 34, 42, true],
+  ["VK_RIGHT", 'style="display:  inherit; color :color-mix ', 42, 42, false],
+  [" ", 'style="display:  inherit; color :color-mix aliceblue ', 43, 52, true],
+  [
+    "!",
+    'style="display:  inherit; color :color-mix !important; ',
+    44,
+    54,
+    false,
+  ],
+  [
+    "VK_RIGHT",
+    'style="display:  inherit; color :color-mix !important; ',
+    54,
+    54,
+    false,
+  ],
+  [
+    "VK_RETURN",
+    'style="display:  inherit; color :color-mix !important;"',
+    -1,
+    -1,
+    false,
+  ],
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
new file mode 100644
index 0000000000..d934fc4e2c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_style_attr_test_runner.js */
+
+"use strict";
+
+// Test CSS autocompletion of the style attributes stops after closing the
+// attribute using a matching quote.
+
+loadHelperScript("helper_style_attr_test_runner.js");
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+
+// test data format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    expected input.selectionStart,
+//    expected input.selectionEnd,
+//    is popup expected to be open ?
+//  ]
+const TEST_DATA_DOUBLE = [
+  ["s", "s", 1, 1, false],
+  ["t", "st", 2, 2, false],
+  ["y", "sty", 3, 3, false],
+  ["l", "styl", 4, 4, false],
+  ["e", "style", 5, 5, false],
+  ["=", "style=", 6, 6, false],
+  ['"', 'style="', 7, 7, false],
+  ["c", 'style="color', 8, 12, true],
+  ["VK_RIGHT", 'style="color', 12, 12, false],
+  [":", 'style="color:aliceblue', 13, 22, true],
+  ["b", 'style="color:beige', 14, 18, true],
+  ["VK_RIGHT", 'style="color:beige', 18, 18, false],
+  ['"', 'style="color:beige"', 19, 19, false],
+  [" ", 'style="color:beige" ', 20, 20, false],
+  ["d", 'style="color:beige" d', 21, 21, false],
+  ["a", 'style="color:beige" da', 22, 22, false],
+  ["t", 'style="color:beige" dat', 23, 23, false],
+  ["a", 'style="color:beige" data', 24, 24, false],
+  ["VK_RETURN", 'style="color:beige"', -1, -1, false],
+];
+
+// Check that single quote attribute is also supported
+const TEST_DATA_SINGLE = [
+  ["s", "s", 1, 1, false],
+  ["t", "st", 2, 2, false],
+  ["y", "sty", 3, 3, false],
+  ["l", "styl", 4, 4, false],
+  ["e", "style", 5, 5, false],
+  ["=", "style=", 6, 6, false],
+  ["'", "style='", 7, 7, false],
+  ["c", "style='color", 8, 12, true],
+  ["VK_RIGHT", "style='color", 12, 12, false],
+  [":", "style='color:aliceblue", 13, 22, true],
+  ["b", "style='color:beige", 14, 18, true],
+  ["VK_RIGHT", "style='color:beige", 18, 18, false],
+  ["'", "style='color:beige'", 19, 19, false],
+  [" ", "style='color:beige' ", 20, 20, false],
+  ["d", "style='color:beige' d", 21, 21, false],
+  ["a", "style='color:beige' da", 22, 22, false],
+  ["t", "style='color:beige' dat", 23, 23, false],
+  ["a", "style='color:beige' data", 24, 24, false],
+  ["VK_RETURN", 'style="color:beige"', -1, -1, false],
+];
+
+// Check that autocompletion is still enabled after using url('1)
+const TEST_DATA_INNER = [
+  ["s", "s", 1, 1, false],
+  ["t", "st", 2, 2, false],
+  ["y", "sty", 3, 3, false],
+  ["l", "styl", 4, 4, false],
+  ["e", "style", 5, 5, false],
+  ["=", "style=", 6, 6, false],
+  ['"', 'style="', 7, 7, false],
+  ["b", 'style="border', 8, 13, true],
+  ["a", 'style="background', 9, 17, true],
+  ["VK_RIGHT", 'style="background', 17, 17, false],
+  [":", 'style="background:aliceblue', 18, 27, true],
+  ["u", 'style="background:unset', 19, 23, true],
+  ["r", 'style="background:url', 20, 21, false],
+  ["l", 'style="background:url', 21, 21, false],
+  ["(", 'style="background:url()', 22, 22, false],
+  ["'", "style=\"background:url(')", 23, 23, false],
+  ["1", "style=\"background:url('1)", 24, 24, false],
+  ["'", "style=\"background:url('1')", 25, 25, false],
+  [")", "style=\"background:url('1')", 26, 26, false],
+  [";", "style=\"background:url('1');", 27, 27, false],
+  [" ", "style=\"background:url('1'); ", 28, 28, false],
+  ["c", "style=\"background:url('1'); color", 29, 33, true],
+  ["VK_RIGHT", "style=\"background:url('1'); color", 33, 33, false],
+  [":", "style=\"background:url('1'); color:aliceblue", 34, 43, true],
+  ["b", "style=\"background:url('1'); color:beige", 35, 39, true],
+  ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false],
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_DOUBLE);
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_SINGLE);
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_INNER);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
new file mode 100644
index 0000000000..038bf33f8b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_style_attr_test_runner.js */
+
+"use strict";
+
+// Test CSS autocompletion of the style attribute can be triggered when the
+// caret is before a non-word character.
+
+loadHelperScript("helper_style_attr_test_runner.js");
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+
+// test data format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    expected input.selectionStart,
+//    expected input.selectionEnd,
+//    is popup expected to be open ?
+//  ]
+const TEST_DATA = [
+  ["s", "s", 1, 1, false],
+  ["t", "st", 2, 2, false],
+  ["y", "sty", 3, 3, false],
+  ["l", "styl", 4, 4, false],
+  ["e", "style", 5, 5, false],
+  ["=", "style=", 6, 6, false],
+  ['"', 'style="', 7, 7, false],
+  ['"', 'style=""', 8, 8, false],
+  ["VK_LEFT", 'style=""', 7, 7, false],
+  ["c", 'style="color"', 8, 12, true],
+  ["o", 'style="color"', 9, 12, true],
+  ["VK_RIGHT", 'style="color"', 12, 12, false],
+  [":", 'style="color:aliceblue"', 13, 22, true],
+  ["b", 'style="color:beige"', 14, 18, true],
+  ["VK_RIGHT", 'style="color:beige"', 18, 18, false],
+  [";", 'style="color:beige;"', 19, 19, false],
+  [";", 'style="color:beige;;"', 20, 20, false],
+  ["VK_LEFT", 'style="color:beige;;"', 19, 19, false],
+  ["p", 'style="color:beige;padding;"', 20, 26, true],
+  ["VK_RIGHT", 'style="color:beige;padding;"', 26, 26, false],
+  [":", 'style="color:beige;padding:inherit;"', 27, 34, true],
+  ["0", 'style="color:beige;padding:0;"', 28, 28, false],
+  ["VK_RETURN", 'style="color:beige;padding:0;"', -1, -1, false],
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
new file mode 100644
index 0000000000..6082d586c1
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that markup display node shows for only for grid and flex containers.
+
+const TEST_URI = `
+  <style type="text/css">
+    #grid {
+      display: grid;
+    }
+    #subgrid {
+      display: grid;
+      grid: subgrid / subgrid;
+    }
+    #flex {
+      display: flex;
+    }
+    #block {
+      display: block;
+    }
+  </style>
+  <div id="grid">
+    <div id="subgrid"></div>
+  </div>
+  <div id="flex">Flex</div>
+  <div id="block">Block</div>
+  <span>HELLO WORLD</span>
+`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  info("Check the display node is shown and the value of #grid.");
+  await selectNode("#grid", inspector);
+  const gridContainer = await getContainerForSelector("#grid", inspector);
+  const gridDisplayNode = gridContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(gridDisplayNode, "#grid display node is shown.");
+  is(
+    gridDisplayNode.textContent,
+    "grid",
+    "Got the correct display type for #grid."
+  );
+
+  info("Check the display node is shown and the value of #subgrid.");
+  await selectNode("#subgrid", inspector);
+  const subgridContainer = await getContainerForSelector("#subgrid", inspector);
+  const subgridDisplayNode = subgridContainer.elt.querySelector(
+    ".inspector-badge[data-display]"
+  );
+  ok(subgridDisplayNode, "#subgrid display node is shown");
+  is(
+    subgridDisplayNode.textContent,
+    "subgrid",
+    "Got the correct display type for #subgrid"
+  );
+
+  info("Check the display node is shown and the value of #flex.");
+  await selectNode("#flex", inspector);
+  const flexContainer = await getContainerForSelector("#flex", inspector);
+  const flexDisplayNode = flexContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(flexDisplayNode, "#flex display node is shown.");
+  is(
+    flexDisplayNode.textContent,
+    "flex",
+    "Got the correct display type for #flex"
+  );
+
+  info("Check the display node is hidden for #block.");
+  await selectNode("#block", inspector);
+  const blockContainer = await getContainerForSelector("#block", inspector);
+  const blockDisplayNode = blockContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(!blockDisplayNode, "#block display node is hidden.");
+
+  info("Check the display node is hidden for span.");
+  await selectNode("span", inspector);
+  const spanContainer = await getContainerForSelector("span", inspector);
+  const spanDisplayNode = spanContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(!spanDisplayNode, "span display node is hidden.");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
new file mode 100644
index 0000000000..7fc2e1d807
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
@@ -0,0 +1,216 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that markup display node are updated when their display changes.
+
+const TEST_URI = `
+  <style type="text/css">
+    #grid {
+      display: grid;
+    }
+    #flex {
+      display: flex;
+    }
+    #flex[hidden] {
+      display: none;
+    }
+    #block {
+      display: block;
+    }
+    #flex
+  </style>
+  <div id="grid">Grid</div>
+  <div id="flex" hidden="">Flex</div>
+  <div id="block">Block</div>
+`;
+
+const TEST_DATA = [
+  {
+    desc: "Hiding the #grid display node by changing its style property",
+    selector: "#grid",
+    before: {
+      textContent: "grid",
+      visible: true,
+      interactive: true,
+    },
+    async changeStyle() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node = content.document.getElementById("grid");
+        node.style.display = "block";
+      });
+    },
+    after: {
+      visible: false,
+    },
+  },
+  {
+    desc: "Reusing the 'grid' node, updating the display to 'grid again",
+    selector: "#grid",
+    before: {
+      visible: false,
+    },
+    async changeStyle() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node = content.document.getElementById("grid");
+        node.style.display = "grid";
+      });
+    },
+    after: {
+      textContent: "grid",
+      visible: true,
+      interactive: true,
+    },
+  },
+  {
+    desc: "Showing a 'contents' node by changing its style property",
+    selector: "#grid",
+    before: {
+      textContent: "grid",
+      visible: true,
+      interactive: true,
+    },
+    async changeStyle() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node = content.document.getElementById("grid");
+        node.style.display = "contents";
+      });
+    },
+    after: {
+      textContent: "contents",
+      visible: true,
+      interactive: false,
+    },
+  },
+  {
+    desc: "Showing a 'grid' node by changing its style property",
+    selector: "#block",
+    before: {
+      visible: false,
+    },
+    async changeStyle() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node = content.document.getElementById("block");
+        node.style.display = "grid";
+      });
+    },
+    after: {
+      textContent: "grid",
+      visible: true,
+      interactive: true,
+    },
+  },
+  {
+    desc: "Showing a 'flex' node by removing its hidden attribute",
+    selector: "#flex",
+    before: {
+      visible: false,
+    },
+    async changeStyle() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+        content.document.getElementById("flex").removeAttribute("hidden")
+      );
+    },
+    after: {
+      textContent: "flex",
+      visible: true,
+      interactive: true,
+    },
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  for (const data of TEST_DATA) {
+    info("Running test case: " + data.desc);
+    await runTestData(inspector, data);
+  }
+});
+
+async function runTestData(
+  inspector,
+  { selector, before, changeStyle, after }
+) {
+  await selectNode(selector, inspector);
+  const container = await getContainerForSelector(selector, inspector);
+
+  const beforeBadge = container.elt.querySelector(
+    ".inspector-badge[data-display]"
+  );
+  is(
+    !!beforeBadge,
+    before.visible,
+    `Display badge is visible as expected for ${selector}: ${before.visible}`
+  );
+  if (before.visible) {
+    is(
+      beforeBadge.textContent,
+      before.textContent,
+      `Got the correct before display type for ${selector}: ${beforeBadge.textContent}`
+    );
+    checkBadgeInteractiveState(beforeBadge, before.interactive, selector);
+  }
+
+  info("Listening for the display-change event");
+  const onDisplayChanged = inspector.markup.walker.once("display-change");
+  info("Making style changes");
+  await changeStyle();
+  const nodes = await onDisplayChanged;
+
+  info("Verifying that the list of changed nodes include our container");
+  ok(nodes.length, "The display-change event was received with a nodes");
+  let foundContainer = false;
+  for (const node of nodes) {
+    if (getContainerForNodeFront(node, inspector) === container) {
+      foundContainer = true;
+      break;
+    }
+  }
+  ok(foundContainer, "Container is part of the list of changed nodes");
+
+  const afterBadge = container.elt.querySelector(
+    ".inspector-badge[data-display]"
+  );
+  is(
+    !!afterBadge,
+    after.visible,
+    `Display badge is visible as expected for ${selector}: ${after.visible}`
+  );
+  if (after.visible) {
+    is(
+      afterBadge.textContent,
+      after.textContent,
+      `Got the correct after display type for ${selector}: ${afterBadge.textContent}`
+    );
+
+    checkBadgeInteractiveState(afterBadge, after.interactive, selector);
+  }
+}
+
+function checkBadgeInteractiveState(badgeEl, interactive, selector) {
+  if (interactive) {
+    ok(
+      !badgeEl.hasAttribute("role"),
+      `${badgeEl.textContent} badge for ${selector} does not override the default role`
+    );
+    is(
+      badgeEl.getAttribute("aria-pressed"),
+      "false",
+      `${badgeEl.textContent} badge for ${selector} has the expected aria-pressed attribute`
+    );
+  } else {
+    is(
+      badgeEl.getAttribute("role"),
+      "presentation",
+      `${badgeEl.textContent} badge for ${selector} is not interactive`
+    );
+    ok(
+      !badgeEl.hasAttribute("aria-pressed"),
+      `${badgeEl.textContent} badge for ${selector} does not have an aria-pressed attribute`
+    );
+  }
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js b/devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js
new file mode 100644
index 0000000000..79738c2e6e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js
@@ -0,0 +1,268 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js",
+  this
+);
+
+function toggleMutationBreakpoint(inspector) {
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  const attributeMenuItem = allMenuItems.find(
+    ({ id }) => id === "node-menu-mutation-breakpoint-attribute"
+  );
+  attributeMenuItem.click();
+}
+
+function getToolboxStoreMutationBreakpointsChanged(inspector) {
+  const toolboxStore = inspector.toolbox.store;
+
+  const breakpoints = getToolboxStoreDomMutationBreakpointsCount(toolboxStore);
+  return new Promise(resolve => {
+    const _unsubscribeFromToolboxStore = inspector.toolbox.store.subscribe(
+      () => {
+        if (
+          getToolboxStoreDomMutationBreakpointsCount(toolboxStore) !==
+          breakpoints
+        ) {
+          resolve();
+          _unsubscribeFromToolboxStore();
+        }
+      }
+    );
+  });
+}
+
+function getToolboxStoreDomMutationBreakpointsCount(toolboxStore) {
+  return toolboxStore.getState().domMutationBreakpoints.breakpoints.length;
+}
+
+// Test inspector markup view handling DOM mutation breakpoints icons
+// The icon should display when a breakpoint exists for a given node
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+
+  await selectNode("span", inspector);
+  toggleMutationBreakpoint(inspector);
+
+  const span = await getContainerForSelector("span", inspector);
+  const mutationMarker = span.tagLine.querySelector(
+    ".markup-tag-mutation-marker"
+  );
+
+  ok(
+    mutationMarker.classList.contains("has-mutations"),
+    "has-mutations class is present"
+  );
+
+  toggleMutationBreakpoint(inspector);
+  await waitFor(() => !mutationMarker.classList.contains("has-mutations"));
+
+  ok(true, "has-mutations class is not present");
+});
+
+// Test that the inspector markup view dom mutation breakpoint icon behaves
+// correctly when disabled
+add_task(async function () {
+  await pushPref("devtools.debugger.dom-mutation-breakpoints-visible", true);
+  const { inspector, toolbox } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+
+  await selectNode("span", inspector);
+  toggleMutationBreakpoint(inspector);
+
+  const span = await getContainerForSelector("span", inspector);
+  const mutationMarker = span.tagLine.querySelector(
+    ".markup-tag-mutation-marker"
+  );
+
+  ok(
+    mutationMarker.classList.contains("has-mutations"),
+    "has-mutations class is present"
+  );
+  is(
+    mutationMarker.classList.contains("mutation-breakpoint-disabled"),
+    false,
+    "mutation-breakpoint-disabled class is not present"
+  );
+
+  info("Switch over to the debugger pane");
+  await toolbox.selectTool("jsdebugger");
+
+  const dbg = createDebuggerContext(toolbox);
+
+  const mutationItem = await waitForElement(dbg, "domMutationItem");
+  mutationItem.scrollIntoView();
+
+  info("Disable the DOM mutation breakpoint");
+  const checkbox = mutationItem.querySelector("input");
+  checkbox.click();
+  await waitFor(() => !checkbox.checked);
+
+  await waitFor(
+    () =>
+      mutationMarker.classList.contains("has-mutations") &&
+      mutationMarker.classList.contains("mutation-breakpoint-disabled")
+  );
+
+  ok(
+    true,
+    "has-mutations and mutation-breakpoint-disabled classes are both present"
+  );
+
+  info("Re-enable the DOM mutation breakpoint");
+  checkbox.click();
+  await waitFor(() => checkbox.checked);
+
+  await waitFor(
+    () =>
+      mutationMarker.classList.contains("has-mutations") &&
+      !mutationMarker.classList.contains("mutation-breakpoint-disabled")
+  );
+
+  ok(
+    true,
+    "has-mutation class is present, mutation-breakpoint-disabled is not present"
+  );
+
+  // Test re-enabling disabled dom mutation breakpoint from inspector
+  info("Disable the DOM mutation breakpoint");
+  checkbox.click();
+  await waitFor(() => !checkbox.checked);
+
+  await waitFor(
+    () =>
+      mutationMarker.classList.contains("has-mutations") &&
+      mutationMarker.classList.contains("mutation-breakpoint-disabled")
+  );
+
+  ok(
+    true,
+    "has-mutations and mutation-breakpoint-disabled classes are both present"
+  );
+
+  info("Switch over to the inspector pane");
+  await toolbox.selectTool("inspector");
+
+  toggleMutationBreakpoint(inspector);
+  await waitFor(
+    () =>
+      mutationMarker.classList.contains("has-mutations") &&
+      !mutationMarker.classList.contains("mutation-breakpoint-disabled")
+  );
+
+  ok(
+    true,
+    "has-mutation class is present, mutation-breakpoint-disabled is not present"
+  );
+});
+
+// Test icon behavior with multiple breakpoints on the same node.
+add_task(async function () {
+  await pushPref("devtools.debugger.dom-mutation-breakpoints-visible", true);
+  const { inspector, toolbox } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+
+  await selectNode("span", inspector);
+  const span = await getContainerForSelector("span", inspector);
+  const mutationMarker = span.tagLine.querySelector(
+    ".markup-tag-mutation-marker"
+  );
+
+  info("Add 2 DOM mutation breakpoints");
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+
+  const attributeMenuItem = allMenuItems.find(
+    item => item.id === "node-menu-mutation-breakpoint-attribute"
+  );
+  attributeMenuItem.click();
+
+  const subtreeMenuItem = allMenuItems.find(
+    item => item.id === "node-menu-mutation-breakpoint-subtree"
+  );
+  subtreeMenuItem.click();
+
+  info("Switch over to the debugger pane");
+  await toolbox.selectTool("jsdebugger");
+
+  const dbg = createDebuggerContext(toolbox);
+
+  info("Confirm that DOM mutation breakpoints exists");
+  await waitForAllElements(dbg, "domMutationItem", 2, true);
+
+  const mutationItem = await waitForElement(dbg, "domMutationItem");
+
+  mutationItem.scrollIntoView();
+
+  info("Disable 1 dom mutation breakpoint");
+  const checkbox = mutationItem.querySelector("input");
+  checkbox.click();
+  await waitFor(() => !checkbox.checked);
+
+  await waitFor(
+    () =>
+      mutationMarker.classList.contains("has-mutations") &&
+      !mutationMarker.classList.contains("mutation-breakpoint-disabled")
+  );
+
+  ok(
+    true,
+    "has-mutation class is present, mutation-breakpoint-disabled is not present"
+  );
+});
+
+// Test inspector markup view handling DOM mutation breakpoints after reload
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1>"
+  );
+
+  await selectNode("h1", inspector);
+
+  info("Add a mutation breakpoint on the h1");
+  toggleMutationBreakpoint(inspector);
+
+  let h1 = await getContainerForSelector("h1", inspector);
+  let mutationMarker = h1.tagLine.querySelector(".markup-tag-mutation-marker");
+  ok(
+    mutationMarker.classList.contains("has-mutations"),
+    "has-mutations class is present"
+  );
+
+  info("Reload the page");
+  const onBreakpointsListChanged =
+    getToolboxStoreMutationBreakpointsChanged(inspector);
+  await reload();
+  await onBreakpointsListChanged;
+  ok(true, "Reloading impacted the number of DOM breakpoints");
+
+  h1 = await getContainerForSelector("h1", inspector);
+  mutationMarker = h1.tagLine.querySelector(".markup-tag-mutation-marker");
+  ok(
+    !mutationMarker.classList.contains("has-mutations"),
+    "has-mutations class is not present after reload"
+  );
+
+  info("Add a mutation breakpoint on the h1, after reload");
+  toggleMutationBreakpoint(inspector);
+  await waitFor(() => mutationMarker.classList.contains("has-mutations"));
+  ok(true, "has-mutations class was successfuly added");
+
+  info("Remove the mutation breakpoint on the h1");
+  // We need to wait until the mutation breakpoint was set on the nodeFront, otherwise
+  // the inspector code won't call the "remove" codepath. (waiting for the toolbox
+  // store change is not enough)
+  await waitFor(
+    () => inspector.selection.nodeFront.mutationBreakpoints.attribute
+  );
+  toggleMutationBreakpoint(inspector);
+  await waitFor(() => !mutationMarker.classList.contains("has-mutations"));
+  ok(true, "has-mutations class was removed");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_01.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_01.js
new file mode 100644
index 0000000000..72d69a3a1f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_01.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that dragging a node near the top or bottom edge of the markup-view
+// auto-scrolls the view on a large toolbox.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop_autoscroll_01.html";
+
+add_task(async function () {
+  // Set the toolbox as large as it would get. The toolbox automatically shrinks
+  // to not overflow to window.
+  await pushPref("devtools.toolbox.footer.height", 10000);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const markup = inspector.markup;
+  const viewHeight = markup.doc.documentElement.clientHeight;
+
+  info("Pretend the markup-view is dragging");
+  markup.isDragging = true;
+
+  info("Simulate a mousemove on the view, at the bottom, and expect scrolling");
+
+  markup._onMouseMove({
+    preventDefault: () => {},
+    target: markup.doc.body,
+    pageY: viewHeight + markup.doc.defaultView.scrollY,
+  });
+
+  const bottomScrollPos = await waitForScrollStop(markup.doc);
+  Assert.greater(bottomScrollPos, 0, "The view was scrolled down");
+
+  info("Simulate a mousemove at the top and expect more scrolling");
+
+  markup._onMouseMove({
+    preventDefault: () => {},
+    target: markup.doc.body,
+    pageY: markup.doc.defaultView.scrollY,
+  });
+
+  const topScrollPos = await waitForScrollStop(markup.doc);
+  Assert.less(topScrollPos, bottomScrollPos, "The view was scrolled up");
+  is(topScrollPos, 0, "The view was scrolled up to the top");
+
+  info("Simulate a mouseup to stop dragging");
+  markup._onMouseUp();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_02.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_02.js
new file mode 100644
index 0000000000..8857bf4f82
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_02.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that dragging a node near the top or bottom edge of the markup-view
+// auto-scrolls the view on a small toolbox.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop_autoscroll_02.html";
+
+add_task(async function () {
+  // Set the toolbox to very small in size.
+  await pushPref("devtools.toolbox.footer.height", 150);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const markup = inspector.markup;
+  const viewHeight = markup.doc.documentElement.clientHeight;
+
+  info("Pretend the markup-view is dragging");
+  markup.isDragging = true;
+
+  info("Simulate a mousemove on the view, at the bottom, and expect scrolling");
+
+  markup._onMouseMove({
+    preventDefault: () => {},
+    target: markup.doc.body,
+    pageY: viewHeight + markup.doc.defaultView.scrollY,
+  });
+
+  const bottomScrollPos = await waitForScrollStop(markup.doc);
+  Assert.greater(bottomScrollPos, 0, "The view was scrolled down");
+  info("Simulate a mousemove at the top and expect more scrolling");
+
+  markup._onMouseMove({
+    preventDefault: () => {},
+    target: markup.doc.body,
+    pageY: markup.doc.defaultView.scrollY,
+  });
+
+  const topScrollPos = await waitForScrollStop(markup.doc);
+  Assert.less(topScrollPos, bottomScrollPos, "The view was scrolled up");
+  is(topScrollPos, 0, "The view was scrolled up to the top");
+
+  info("Simulate a mouseup to stop dragging");
+  markup._onMouseUp();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_before_marker_pseudo.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_before_marker_pseudo.js
new file mode 100644
index 0000000000..7cca09ce94
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_before_marker_pseudo.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test drag and dropping a node before a ::marker pseudo.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Expand #list node");
+  const parentFront = await getNodeFront("#list", inspector);
+  await inspector.markup.expandNode(parentFront.parentNode());
+  await inspector.markup.expandNode(parentFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info("Scroll #list into view");
+  const parentContainer = await getContainerForNodeFront(
+    parentFront,
+    inspector
+  );
+  parentContainer.elt.scrollIntoView(true);
+
+  info("Test placing an element before a ::marker psuedo");
+  await moveElementBeforeMarker("#last-list-child", parentFront, inspector);
+  const childNodes = await getChildrenOf(parentFront, inspector);
+  is(
+    childNodes[0],
+    "_moz_generated_content_marker",
+    "::marker is still the first child of #list"
+  );
+  is(
+    childNodes[1],
+    "last-list-child",
+    "#last-list-child is now the second child of #list"
+  );
+  is(
+    childNodes[2],
+    "first-list-child",
+    "#first-list-child is now the last child of #list"
+  );
+});
+
+async function moveElementBeforeMarker(selector, parentFront, inspector) {
+  info(`Placing ${selector} before its parent's ::marker`);
+
+  const container = await getContainerForSelector(selector, inspector);
+  const parentContainer = await getContainerForNodeFront(
+    parentFront,
+    inspector
+  );
+  const offsetY =
+    parentContainer.tagLine.offsetTop +
+    parentContainer.tagLine.offsetHeight -
+    container.tagLine.offsetTop;
+
+  const onMutated = inspector.once("markupmutation");
+  const uiUpdate = inspector.once("inspector-updated");
+
+  await simulateNodeDragAndDrop(inspector, selector, 0, offsetY);
+
+  const mutations = await onMutated;
+  await uiUpdate;
+
+  is(mutations.length, 2, "2 mutations were received");
+}
+
+async function getChildrenOf(parentFront, { walker }) {
+  const { nodes } = await walker.children(parentFront);
+  return nodes.map(node => {
+    if (node.isMarkerPseudoElement) {
+      return node.displayName;
+    }
+    return node.id;
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_distance.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_distance.js
new file mode 100644
index 0000000000..6718d33317
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_distance.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that nodes don't start dragging before the mouse has moved by at least
+// the minimum vertical distance defined in markup-view.js by
+// DRAG_DROP_MIN_INITIAL_DISTANCE.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+const TEST_NODE = "#test";
+
+// Keep this in sync with DRAG_DROP_MIN_INITIAL_DISTANCE in markup-view.js
+const MIN_DISTANCE = 10;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Drag the test node by half of the minimum distance");
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE / 2);
+  await checkIsDragging(inspector, TEST_NODE, false);
+
+  info("Drag the test node by exactly the minimum distance");
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE);
+  await checkIsDragging(inspector, TEST_NODE, true);
+  inspector.markup.cancelDragging();
+
+  info("Drag the test node by more than the minimum distance");
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE * 2);
+  await checkIsDragging(inspector, TEST_NODE, true);
+  inspector.markup.cancelDragging();
+
+  info("Drag the test node by minus the minimum distance");
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE * -1);
+  await checkIsDragging(inspector, TEST_NODE, true);
+  inspector.markup.cancelDragging();
+});
+
+async function checkIsDragging(inspector, selector, isDragging) {
+  const container = await getContainerForSelector(selector, inspector);
+  if (isDragging) {
+    ok(container.isDragging, "The container is being dragged");
+    ok(inspector.markup.isDragging, "And the markup-view knows it");
+  } else {
+    ok(!container.isDragging, "The container hasn't been marked as dragging");
+    ok(!inspector.markup.isDragging, "And the markup-view either");
+  }
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_dragRootNode.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_dragRootNode.js
new file mode 100644
index 0000000000..4c29fcc509
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_dragRootNode.js
@@ -0,0 +1,21 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the root node isn't draggable (as well as head and body).
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+const TEST_DATA = ["html", "head", "body"];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const selector of TEST_DATA) {
+    info("Try to drag/drop node " + selector);
+    await simulateNodeDrag(inspector, selector);
+
+    const container = await getContainerForSelector(selector, inspector);
+    ok(!container.isDragging, "The container hasn't been marked as dragging");
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
new file mode 100644
index 0000000000..949161b01f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test which nodes are consider draggable by the markup-view.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+
+// Test cases should be objects with the following properties:
+// - node {String|Function} A CSS selector that uniquely identifies the node to
+//   be tested. Or a generator function called in a Task that should return the
+//   corresponding MarkupContainer object to be tested.
+// - draggable {Boolean} Whether or not the node should be draggable.
+const TEST_DATA = [
+  { node: "head", draggable: false },
+  { node: "body", draggable: false },
+  { node: "html", draggable: false },
+  { node: "style", draggable: true },
+  { node: "a", draggable: true },
+  { node: "p", draggable: true },
+  { node: "input", draggable: true },
+  { node: "div", draggable: true },
+  {
+    async node(inspector) {
+      const parentFront = await getNodeFront("#before", inspector);
+      const { nodes } = await inspector.walker.children(parentFront);
+      // Getting the comment node.
+      return getContainerForNodeFront(nodes[1], inspector);
+    },
+    draggable: true,
+  },
+  {
+    async node(inspector) {
+      const parentFront = await getNodeFront("#test", inspector);
+      const { nodes } = await inspector.walker.children(parentFront);
+      // Getting the ::before pseudo element.
+      return getContainerForNodeFront(nodes[0], inspector);
+    },
+    draggable: false,
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await inspector.markup.expandAll();
+
+  for (const { node, draggable } of TEST_DATA) {
+    let container;
+    let name;
+    if (typeof node === "string") {
+      container = await getContainerForSelector(node, inspector);
+      name = node;
+    } else {
+      container = await node(inspector);
+      name = container.toString();
+    }
+
+    const status = draggable ? "draggable" : "not draggable";
+    info(`Testing ${name}, expecting it to be ${status}`);
+    is(container.isDraggable(), draggable, `The node is ${status}`);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_escapeKeyPress.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_escapeKeyPress.js
new file mode 100644
index 0000000000..0c66fe4761
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_escapeKeyPress.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether ESCAPE keypress cancels dragging of an element.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  info("Get a test container");
+  await selectNode("#test", inspector);
+  const container = await getContainerForSelector("#test", inspector);
+
+  info("Simulate a drag/drop on this container");
+  await simulateNodeDrag(inspector, "#test");
+
+  ok(
+    container.isDragging && markup.isDragging,
+    "The container is being dragged"
+  );
+  ok(
+    markup.doc.body.classList.contains("dragging"),
+    "The dragging css class was added"
+  );
+
+  info("Simulate ESCAPE keypress");
+  EventUtils.sendKey("escape", inspector.panelWin);
+
+  ok(!container.isDragging && !markup.isDragging, "The dragging has stopped");
+  ok(
+    !markup.doc.body.classList.contains("dragging"),
+    "The dragging css class was removed"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js
new file mode 100644
index 0000000000..e12299394a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that pseudo-elements, anonymous nodes and slotted nodes are not draggable.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+
+add_task(async function () {
+  await pushPref("devtools.inspector.showAllAnonymousContent", true);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Expanding nodes below #test");
+  const parentFront = await getNodeFront("#test", inspector);
+  await inspector.markup.expandNode(parentFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info("Getting the ::before pseudo element and selecting it");
+  const parentContainer = await getContainerForNodeFront(
+    parentFront,
+    inspector
+  );
+  const beforePseudo = parentContainer.elt.children[1].firstChild.container;
+  parentContainer.elt.scrollIntoView(true);
+  await selectNode(beforePseudo.node, inspector);
+
+  info("Simulate dragging the ::before pseudo element");
+  await simulateNodeDrag(inspector, beforePseudo);
+
+  ok(!beforePseudo.isDragging, "::before pseudo element isn't dragging");
+
+  info("Expanding nodes below #anonymousParent");
+  const inputFront = await getNodeFront("#anonymousParent", inspector);
+  await inspector.markup.expandNode(inputFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info("Getting the anonymous node and selecting it");
+  const inputContainer = await getContainerForNodeFront(inputFront, inspector);
+  const anonymousDiv = inputContainer.elt.children[1].firstChild.container;
+  inputContainer.elt.scrollIntoView(true);
+  await selectNode(anonymousDiv.node, inspector);
+
+  info("Simulate dragging the anonymous node");
+  await simulateNodeDrag(inspector, anonymousDiv);
+
+  ok(!anonymousDiv.isDragging, "anonymous node isn't dragging");
+
+  info("Expanding all nodes below test-component");
+  const testComponentFront = await getNodeFront("test-component", inspector);
+  await inspector.markup.expandAll(testComponentFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info("Getting a slotted node and selecting it");
+  // Directly use the markup getContainer API in order to retrieve the slotted container
+  // for a given node front.
+  const slotted1Front = await getNodeFront(".slotted1", inspector);
+  const slottedContainer = inspector.markup.getContainer(slotted1Front, true);
+  slottedContainer.elt.scrollIntoView(true);
+  await selectNode(slotted1Front, inspector, "no-reason", true);
+
+  info("Simulate dragging the slotted node");
+  await simulateNodeDrag(inspector, slottedContainer);
+
+  ok(!slottedContainer.isDragging, "slotted node isn't dragging");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_reorder.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_reorder.js
new file mode 100644
index 0000000000..cbcc86fa74
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_reorder.js
@@ -0,0 +1,111 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test different kinds of drag and drop node re-ordering.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  let ids;
+
+  info("Expand #test node");
+  const parentFront = await getNodeFront("#test", inspector);
+  await inspector.markup.expandNode(parentFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info("Scroll #test into view");
+  const parentContainer = await getContainerForNodeFront(
+    parentFront,
+    inspector
+  );
+  parentContainer.elt.scrollIntoView(true);
+
+  info("Test putting an element back at its original place");
+  await dragElementToOriginalLocation("#firstChild", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
+  is(ids[0], "firstChild", "#firstChild is still the first child of #test");
+  is(ids[1], "middleChild", "#middleChild is still the second child of #test");
+
+  info("Testing switching elements inside their parent");
+  await moveElementDown("#firstChild", "#middleChild", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
+  is(ids[0], "middleChild", "#firstChild is now the second child of #test");
+  is(ids[1], "firstChild", "#middleChild is now the first child of #test");
+
+  info("Testing switching elements with a last child");
+  await moveElementDown("#firstChild", "#lastChild", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
+  is(ids[1], "lastChild", "#lastChild is now the second child of #test");
+  is(ids[2], "firstChild", "#firstChild is now the last child of #test");
+
+  info("Testing appending element to a parent");
+  await moveElementDown("#before", "#test", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
+  is(ids.length, 4, "New element appended to #test");
+  is(
+    ids[0],
+    "before",
+    "New element is appended at the right place (currently first child)"
+  );
+
+  info("Testing moving element to after it's parent");
+  await moveElementDown("#firstChild", "#test", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
+  is(ids.length, 3, "#firstChild is no longer #test's child");
+  const siblingFront = await inspector.walker.nextSibling(parentFront);
+  is(
+    siblingFront.id,
+    "firstChild",
+    "#firstChild is now #test's nextElementSibling"
+  );
+});
+
+async function dragElementToOriginalLocation(selector, inspector) {
+  info("Picking up and putting back down " + selector);
+
+  function onMutation() {
+    ok(false, "Mutation received from dragging a node back to its location");
+  }
+  inspector.on("markupmutation", onMutation);
+  await simulateNodeDragAndDrop(inspector, selector, 0, 0);
+
+  // Wait a bit to make sure the event never fires.
+  // This doesn't need to catch *all* cases, since the mutation
+  // will cause failure later in the test when it checks element ordering.
+  await wait(500);
+  inspector.off("markupmutation", onMutation);
+}
+
+async function moveElementDown(selector, next, inspector) {
+  info("Switching " + selector + " with " + next);
+
+  const container = await getContainerForSelector(next, inspector);
+  const height = container.tagLine.getBoundingClientRect().height;
+
+  const onMutated = inspector.once("markupmutation");
+  const uiUpdate = inspector.once("inspector-updated");
+
+  await simulateNodeDragAndDrop(inspector, selector, 0, Math.round(height) + 2);
+
+  const mutations = await onMutated;
+  await uiUpdate;
+
+  is(mutations.length, 2, "2 mutations were received");
+}
+
+async function getChildrenIDsOf(parentFront, { walker }) {
+  const { nodes } = await walker.children(parentFront);
+  // Filter out non-element nodes since children also returns pseudo-elements.
+  return nodes
+    .filter(node => {
+      return !node.isPseudoElement;
+    })
+    .map(node => {
+      return node.id;
+    });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js
new file mode 100644
index 0000000000..30e5567bc4
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that tooltips don't appear when dragging over tooltip targets.
+
+const TEST_URL = 'data:text/html;charset=utf8,<img src="about:logo" /><div>';
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  info("Get the tooltip target element for the image's src attribute");
+  const img = await getContainerForSelector("img", inspector);
+  const target = img.editor.getAttributeElement("src").querySelector(".link");
+
+  info("Check that the src attribute of the image is a valid tooltip target");
+  await assertTooltipShownOnHover(markup.imagePreviewTooltip, target);
+  await assertTooltipHiddenOnMouseOut(markup.imagePreviewTooltip, target);
+
+  info("Start dragging the test div");
+  await simulateNodeDrag(inspector, "div");
+
+  info("Now check that the src attribute of the image isn't a valid target");
+  const isValid = await markup.imagePreviewTooltip._toggle.isValidHoverTarget(
+    target
+  );
+  ok(!isValid, "The element is not a valid tooltip target");
+
+  info("Stop dragging the test div");
+  await simulateNodeDrop(inspector, "div");
+
+  info("Check again the src attribute of the image");
+  await assertTooltipShownOnHover(markup.imagePreviewTooltip, target);
+  await assertTooltipHiddenOnMouseOut(markup.imagePreviewTooltip, target);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
new file mode 100644
index 0000000000..ab7819f78b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URL = URL_ROOT + "doc_markup_events-overflow.html";
+const TEST_DATA = [
+  {
+    desc: "editor overflows container",
+    // scroll to bottom
+    initialScrollTop: -1,
+    // last header
+    headerToClick: 49,
+    alignBottom: true,
+    alignTop: false,
+  },
+  {
+    desc: "header overflows the container",
+    initialScrollTop: 2,
+    headerToClick: 0,
+    alignBottom: false,
+    alignTop: true,
+  },
+  {
+    desc: "neither header nor editor overflows the container",
+    initialScrollTop: 2,
+    headerToClick: 5,
+    alignBottom: false,
+    alignTop: false,
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const markupContainer = await getContainerForSelector("#events", inspector);
+  const evHolder = markupContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+  const tooltip = inspector.markup.eventDetailsTooltip;
+
+  info("Clicking to open event tooltip.");
+  EventUtils.synthesizeMouseAtCenter(
+    evHolder,
+    {},
+    inspector.markup.doc.defaultView
+  );
+  await tooltip.once("shown");
+  info("EventTooltip visible.");
+
+  const container = tooltip.panel;
+  const containerRect = container.getBoundingClientRect();
+  const headers = container.querySelectorAll(".event-header");
+
+  for (const data of TEST_DATA) {
+    info("Testing scrolling when " + data.desc);
+
+    if (data.initialScrollTop < 0) {
+      info("Scrolling container to the bottom.");
+      const newScrollTop = container.scrollHeight - container.clientHeight;
+      data.initialScrollTop = container.scrollTop = newScrollTop;
+    } else {
+      info("Scrolling container by " + data.initialScrollTop + "px");
+      container.scrollTop = data.initialScrollTop;
+    }
+
+    is(container.scrollTop, data.initialScrollTop, "Container scrolled.");
+
+    info("Clicking on header #" + data.headerToClick);
+    const header = headers[data.headerToClick];
+
+    const ready = tooltip.once("event-tooltip-ready");
+    EventUtils.synthesizeMouseAtCenter(header, {}, header.ownerGlobal);
+    await ready;
+
+    info("Event handler expanded.");
+
+    // Wait for any scrolling to finish.
+    await promiseNextTick();
+
+    if (data.alignTop) {
+      const headerRect = header.getBoundingClientRect();
+
+      is(
+        Math.round(headerRect.top),
+        Math.round(containerRect.top),
+        "Clicked header is aligned with the container top."
+      );
+    } else if (data.alignBottom) {
+      const editorRect = header.nextElementSibling.getBoundingClientRect();
+
+      is(
+        Math.round(editorRect.bottom),
+        Math.round(containerRect.bottom),
+        "Clicked event handler code is aligned with the container bottom."
+      );
+    } else {
+      is(
+        container.scrollTop,
+        data.initialScrollTop,
+        "Container did not scroll, as expected."
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
new file mode 100644
index 0000000000..166322eccd
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/*
+ * Test that the event details tooltip can be hidden by clicking outside of the tooltip
+ * after switching hosts.
+ */
+
+const TEST_URL = URL_ROOT + "doc_markup_events-overflow.html";
+
+registerCleanupFunction(() => {
+  // Restore the default Toolbox host position after the test.
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+});
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to avoid sidebar width issues with opening events"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+  await runTests(inspector);
+
+  await toolbox.switchHost("window");
+
+  // Switching hosts is not correctly waiting when DevTools run in content frame
+  // See Bug 1571421.
+  await wait(1000);
+
+  await runTests(inspector);
+
+  await toolbox.switchHost("bottom");
+
+  // Switching hosts is not correctly waiting when DevTools run in content frame
+  // See Bug 1571421.
+  await wait(1000);
+
+  await runTests(inspector);
+
+  await toolbox.destroy();
+});
+
+async function runTests(inspector) {
+  const markupContainer = await getContainerForSelector("#events", inspector);
+  const evHolder = markupContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+  const tooltip = inspector.markup.eventDetailsTooltip;
+
+  info("Clicking to open event tooltip.");
+  const onTooltipShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(
+    evHolder,
+    {},
+    inspector.markup.doc.defaultView
+  );
+  await onTooltipShown;
+  ok(tooltip.isVisible(), "EventTooltip visible.");
+
+  info("Click on another tag to hide the event tooltip");
+  const onTooltipHidden = tooltip.once("hidden");
+  const script = await getContainerForSelector("script", inspector);
+  const tag = script.elt.querySelector(".tag");
+  EventUtils.synthesizeMouseAtCenter(tag, {}, inspector.markup.doc.defaultView);
+
+  await onTooltipHidden;
+
+  ok(!tooltip.isVisible(), "EventTooltip hidden.");
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_01.js b/devtools/client/inspector/markup/test/browser_markup_events_01.js
new file mode 100644
index 0000000000..0fbd47b8f5
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_01.js
@@ -0,0 +1,132 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for DOM
+// events.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_01.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "load",
+        filename: TEST_URL,
+        attributes: ["Bubbling"],
+        handler: "function onload(event) {\n" + "  init();\n" + "}",
+      },
+    ],
+  },
+  {
+    selector: "#container",
+    expected: [
+      {
+        type: "mouseover",
+        filename: TEST_URL + ":48:31",
+        attributes: ["Capturing"],
+        handler:
+          "function mouseoverHandler(event) {\n" +
+          '  if (event.target.id !== "container") {\n' +
+          '    const output = document.getElementById("output");\n' +
+          "    output.textContent = event.target.textContent;\n" +
+          "  }\n" +
+          "}",
+      },
+    ],
+  },
+  {
+    selector: "#multiple",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":55:27",
+        attributes: ["Bubbling"],
+        handler:
+          "function clickHandler(event) {\n" +
+          '  const output = document.getElementById("output");\n' +
+          '  output.textContent = "click";\n' +
+          "}",
+      },
+      {
+        type: "mouseup",
+        filename: TEST_URL + ":60:29",
+        attributes: ["Bubbling"],
+        handler:
+          "function mouseupHandler(event) {\n" +
+          '  const output = document.getElementById("output");\n' +
+          '  output.textContent = "mouseup";\n' +
+          "}",
+      },
+    ],
+  },
+  // #noevents tests check that dynamically added events are properly displayed
+  // in the markupview
+  {
+    selector: "#noevents",
+    expected: [],
+  },
+  {
+    selector: "#noevents",
+    async beforeTest(inspector) {
+      const nodeMutated = inspector.once("markupmutation");
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+        content.wrappedJSObject.addNoeventsClickHandler()
+      );
+      await nodeMutated;
+    },
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":76:35",
+        attributes: ["Bubbling"],
+        handler:
+          "function noeventsClickHandler(event) {\n" +
+          '  alert("noevents has an event listener");\n' +
+          "}",
+      },
+    ],
+  },
+  {
+    selector: "#noevents",
+    async beforeTest(inspector) {
+      const nodeMutated = inspector.once("markupmutation");
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+        content.wrappedJSObject.removeNoeventsClickHandler()
+      );
+      await nodeMutated;
+    },
+    expected: [],
+  },
+  {
+    selector: "#DOM0",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL,
+        attributes: ["Bubbling"],
+        handler: "function onclick(event) {\n" + "  alert('DOM0')\n" + "}",
+      },
+    ],
+  },
+  {
+    selector: "#handleevent",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":71:29",
+        attributes: ["Bubbling"],
+        handler: "function(blah) {\n" + '  alert("handleEvent");\n' + "}",
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_02.js b/devtools/client/inspector/markup/test/browser_markup_events_02.js
new file mode 100644
index 0000000000..44840179d2
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_02.js
@@ -0,0 +1,123 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for DOM
+// events.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_02.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "#fatarrow",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":42:43",
+        attributes: ["Bubbling"],
+        handler: "() => {\n" + '  alert("Fat arrow without params!");\n' + "}",
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":46:43",
+        attributes: ["Bubbling"],
+        handler: "event => {\n" + '  alert("Fat arrow with 1 param!");\n' + "}",
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":50:43",
+        attributes: ["Bubbling"],
+        handler:
+          "(event, foo, bar) => {\n" +
+          '  alert("Fat arrow with 3 params!");\n' +
+          "}",
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":54:43",
+        attributes: ["Bubbling"],
+        handler: "b => b",
+      },
+    ],
+  },
+  {
+    selector: "#bound",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":65:32",
+        attributes: ["Bubbling"],
+        handler: "function(event) {\n" + '  alert("Bound event");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#boundhe",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":89:19",
+        attributes: ["Bubbling"],
+        handler: "function() {\n" + '  alert("boundHandleEvent");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#comment-inline",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":95:47",
+        attributes: ["Bubbling"],
+        handler:
+          "function functionProceededByInlineComment() {\n" +
+          '  alert("comment-inline");\n' +
+          "}",
+      },
+    ],
+  },
+  {
+    selector: "#comment-streaming",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":100:50",
+        attributes: ["Bubbling"],
+        handler:
+          "function functionProceededByStreamingComment() {\n" +
+          '  alert("comment-streaming");\n' +
+          "}",
+      },
+    ],
+  },
+  {
+    selector: "#anon-object-method",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":75:34",
+        attributes: ["Bubbling"],
+        handler: "function() {\n" + '  alert("obj.anonObjectMethod");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#object-method",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":79:34",
+        attributes: ["Bubbling"],
+        handler: "function kay() {\n" + '  alert("obj.objectMethod");\n' + "}",
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_03.js b/devtools/client/inspector/markup/test/browser_markup_events_03.js
new file mode 100644
index 0000000000..bebffec066
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js
@@ -0,0 +1,88 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for DOM
+// events.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_03.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "#es6-method",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":69:17",
+        attributes: ["Bubbling"],
+        handler:
+          "es6Method(foo, bar) {\n" + '  alert("obj.es6Method");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#generator",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":89:25",
+        attributes: ["Bubbling"],
+        handler: "function* generator() {\n" + '  alert("generator");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#anon-generator",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":46:58",
+        attributes: ["Bubbling"],
+        handler: "function*() {\n" + '  alert("anonGenerator");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#named-function-expression",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":22:18",
+        attributes: ["Bubbling"],
+        handler:
+          "function foo() {\n" + '  alert("namedFunctionExpression");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#anon-function-expression",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":26:45",
+        attributes: ["Bubbling"],
+        handler:
+          "function() {\n" + '  alert("anonFunctionExpression");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#returned-function",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":31:27",
+        attributes: ["Bubbling"],
+        handler: "function bar() {\n" + '  alert("returnedFunction");\n' + "}",
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_04.js b/devtools/client/inspector/markup/test/browser_markup_events_04.js
new file mode 100644
index 0000000000..b7dd546c29
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_04.js
@@ -0,0 +1,124 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for DOM
+// events.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_04.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":59:67",
+        attributes: ["Bubbling"],
+        handler:
+          "function(foo2, bar2) {\n" +
+          '  alert("documentElement event listener clicked");\n' +
+          "}",
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":55:51",
+        attributes: ["Bubbling"],
+        handler:
+          "function(foo, bar) {\n" +
+          '  alert("document event listener clicked");\n' +
+          "}",
+      },
+      {
+        type: "load",
+        filename: TEST_URL,
+        attributes: ["Bubbling"],
+        handler: "function onload(event) {\n" + "  init();\n" + "}",
+      },
+    ],
+  },
+  {
+    selector: "#constructed-function",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":1:0",
+        attributes: ["Bubbling"],
+        handler: "function anonymous() {\n" + "\n" + "}",
+      },
+    ],
+  },
+  {
+    selector: "#constructed-function-with-body-string",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":1:0",
+        attributes: ["Bubbling"],
+        handler:
+          "function anonymous(a, b, c) {\n" +
+          '  alert("constructedFuncWithBodyString");\n' +
+          "}",
+      },
+    ],
+  },
+  {
+    selector: "#multiple-assignment",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":26:47",
+        attributes: ["Bubbling"],
+        handler:
+          "function multi() {\n" + '  alert("multipleAssignment");\n' + "}",
+      },
+    ],
+  },
+  {
+    selector: "#promise",
+    expected: [
+      {
+        type: "click",
+        filename: "[native code]",
+        attributes: ["Bubbling"],
+        handler: "function() {\n" + "  [native code]\n" + "}",
+      },
+    ],
+  },
+  {
+    selector: "#math-pow",
+    expected: [
+      {
+        type: "click",
+        filename: "[native code]",
+        attributes: ["Bubbling"],
+        handler: "function pow(, ) {\n" + "  [native code]\n" + "}",
+      },
+    ],
+  },
+  {
+    selector: "#handleEvent",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":81:29",
+        attributes: ["Bubbling"],
+        handler:
+          "function(event) {\n" +
+          "  switch (event.type) {\n" +
+          '    case "click":\n' +
+          '      alert("handleEvent click");\n' +
+          "  }\n" +
+          "}",
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_chrome_blocked.js b/devtools/client/inspector/markup/test/browser_markup_events_chrome_blocked.js
new file mode 100644
index 0000000000..395b89fd07
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_chrome_blocked.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that markup view chrome event bubbles are hidden when
+// devtools.chrome.enabled = false.
+
+const TEST_URL = URL_ROOT + "doc_markup_events_chrome_listeners.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "div",
+    expected: [],
+  },
+];
+
+add_task(async function () {
+  waitForExplicitFinish();
+  await pushPref("devtools.chrome.enabled", false);
+
+  const { tab, inspector } = await openInspectorForURL(TEST_URL);
+  const browser = tab.linkedBrowser;
+
+  const badgeEventAdded = inspector.markup.once("badge-added-event");
+
+  info("Loading frame script");
+  await SpecialPowers.spawn(browser, [], () => {
+    const div = content.document.querySelector("div");
+    div.addEventListener("click", () => {
+      /* Do nothing */
+    });
+  });
+
+  // We need to check that the "badge-added-event" event is not triggered so we
+  // need to wait for 5 seconds here.
+  const result = await awaitWithTimeout(badgeEventAdded, 3000);
+  is(result, "timeout", "Ensure that no event badges were added");
+
+  for (const test of TEST_DATA) {
+    await checkEventsForNode(test, inspector);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_chrome_not_blocked.js b/devtools/client/inspector/markup/test/browser_markup_events_chrome_not_blocked.js
new file mode 100644
index 0000000000..c04dd3c396
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_chrome_not_blocked.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+("use strict");
+
+// Test that markup view chrome event bubbles are shown when
+// devtools.chrome.enabled = true.
+
+const TEST_URL = URL_ROOT + "doc_markup_events_chrome_listeners.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "div",
+    expected: [
+      {
+        type: "click",
+        filename:
+          getRootDirectory(gTestPath) +
+          "browser_markup_events_chrome_not_blocked.js:45:34",
+        attributes: ["Bubbling"],
+        handler: `() => {
+          /* Do nothing */
+        }`,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  waitForExplicitFinish();
+  await pushPref("devtools.chrome.enabled", true);
+
+  const { tab, inspector } = await openInspectorForURL(TEST_URL);
+  const browser = tab.linkedBrowser;
+
+  const eventBadgeAdded = inspector.markup.once("badge-added-event");
+  info("Loading frame script");
+
+  await SpecialPowers.spawn(browser, [], () => {
+    const div = content.document.querySelector("div");
+    div.addEventListener("click", () => {
+      /* Do nothing */
+    });
+  });
+  await eventBadgeAdded;
+
+  for (const test of TEST_DATA) {
+    await checkEventsForNode(test, inspector);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
new file mode 100644
index 0000000000..ed410fb85b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Tests that click events that close the current event tooltip are still propagated to
+// the target underneath.
+
+const TEST_URL = `
+  <body>
+    <div id="d1" onclick="console.log(1)">test</div>
+    <!--                                        -->
+    <!-- adding some comments to make sure      -->
+    <!-- the second event icon is not hidden by -->
+    <!-- the tooltip of the first event icon    -->
+    <!--                                        -->
+    <div id="d2" onclick="console.log(2)">test</div>
+  </body>
+`;
+
+add_task(async function () {
+  // Make the toolbox tall enough to show the full markup without the need
+  // to manage scrolling event badges into view.
+  await pushPref("devtools.toolbox.footer.height", 400);
+
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL)
+  );
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+
+  await inspector.markup.expandAll();
+
+  const container1 = await getContainerForSelector("#d1", inspector);
+  const evHolder1 = container1.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+
+  const container2 = await getContainerForSelector("#d2", inspector);
+  const evHolder2 = container2.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+
+  const tooltip = inspector.markup.eventDetailsTooltip;
+
+  info("Click the event icon for the first element");
+  let onShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(evHolder1, {}, inspector.markup.win);
+  await onShown;
+  info("event tooltip for the first div is shown");
+
+  info("Click the event icon for the second element");
+  let onHidden = tooltip.once("hidden");
+  onShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(evHolder2, {}, inspector.markup.win);
+
+  await onHidden;
+  info("previous tooltip hidden");
+
+  await onShown;
+  info("event tooltip for the second div is shown");
+
+  info("Check that clicking on evHolder2 again hides the tooltip");
+  onHidden = tooltip.once("hidden");
+  EventUtils.synthesizeMouseAtCenter(evHolder2, {}, inspector.markup.win);
+  await onHidden;
+
+  info("Check that the tooltip does not reappear immediately after");
+  await waitForTime(1000);
+  is(
+    tooltip.isVisible(),
+    false,
+    "The tooltip is still hidden after waiting for one second"
+  );
+
+  info("Open the tooltip on evHolder2 again");
+  onShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(evHolder2, {}, inspector.markup.win);
+  await onShown;
+
+  info("Click on the computed view tab");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  const onTabComputedViewSelected = inspector.sidebar.once(
+    "computedview-selected"
+  );
+  const computedViewTab = inspector.panelDoc.querySelector("#computedview-tab");
+  EventUtils.synthesizeMouseAtCenter(
+    computedViewTab,
+    {},
+    inspector.panelDoc.defaultView
+  );
+
+  await onTabComputedViewSelected;
+  info("computed view was selected");
+
+  await onHighlighterHidden;
+  info(
+    "box model highlighter hidden after moving the mouse out of the markup view"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.0.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.0.js
new file mode 100644
index 0000000000..cd555a641b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.0.js
@@ -0,0 +1,171 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.0).
+
+const TEST_LIB = "lib_jquery_1.0.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "DOMContentLoaded",
+        filename: URL_ROOT_SSL + TEST_LIB + ":1117:16",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            // Make sure that the DOM is not already loaded
+            if (!jQuery.isReady) {
+              // Remember that the DOM is ready
+              jQuery.isReady = true;
+
+              // If there are functions bound, to execute
+              if (jQuery.readyList) {
+                // Execute all of them
+                for (var i = 0; i < jQuery.readyList.length; i++)
+                  jQuery.readyList[i].apply(document);
+
+                // Reset the list of functions
+                jQuery.readyList = null;
+              }
+            }
+          }`,
+      },
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+      {
+        type: "load",
+        filename: URL_ROOT_SSL + TEST_LIB + ":894:18",
+        attributes: ["Bubbling"],
+        handler: `
+          function(event) {
+            if (typeof jQuery == "undefined") return;
+
+            event = event || jQuery.event.fix(window.event);
+
+            // If no correct event was found, fail
+            if (!event) return;
+
+            var returnValue = true;
+
+            var c = this.events[event.type];
+
+            for (var j in c) {
+              if (c[j].apply(this, [event]) === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                returnValue = false;
+              }
+            }
+
+            return returnValue;
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "click",
+        filename: URL_ROOT_SSL + TEST_LIB + ":894:18",
+        attributes: ["Bubbling"],
+        handler: `
+          function(event) {
+            if (typeof jQuery == "undefined") return;
+
+            event = event || jQuery.event.fix(window.event);
+
+            // If no correct event was found, fail
+            if (!event) return;
+
+            var returnValue = true;
+
+            var c = this.events[event.type];
+
+            for (var j in c) {
+              if (c[j].apply(this, [event]) === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                returnValue = false;
+              }
+            }
+
+            return returnValue;
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: URL_ROOT_SSL + TEST_LIB + ":894:18",
+        attributes: ["Bubbling"],
+        handler: `
+          function(event) {
+            if (typeof jQuery == "undefined") return;
+
+            event = event || jQuery.event.fix(window.event);
+
+            // If no correct event was found, fail
+            if (!event) return;
+
+            var returnValue = true;
+
+            var c = this.events[event.type];
+
+            for (var j in c) {
+              if (c[j].apply(this, [event]) === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                returnValue = false;
+              }
+            }
+
+            return returnValue;
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.1.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.1.js
new file mode 100644
index 0000000000..9152e173d9
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.1.js
@@ -0,0 +1,178 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.1).
+
+const TEST_LIB = "lib_jquery_1.1.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+      {
+        type: "load",
+        filename: URL_ROOT_SSL + TEST_LIB + ":1224:17",
+        attributes: ["Bubbling"],
+        handler: `
+          function(event) {
+            if (typeof jQuery == "undefined") return false;
+
+            // Empty object is for triggered events with no data
+            event = jQuery.event.fix(event || window.event || {});
+
+            // returned undefined or false
+            var returnValue;
+
+            var c = this.events[event.type];
+
+            var args = [].slice.call(arguments, 1);
+            args.unshift(event);
+
+            for (var j in c) {
+              // Pass in a reference to the handler function itself
+              // So that we can later remove it
+              args[0].handler = c[j];
+              args[0].data = c[j].data;
+
+              if (c[j].apply(this, args) === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                returnValue = false;
+              }
+            }
+
+            // Clean up added properties in IE to prevent memory leak
+            if (jQuery.browser.msie) event.target = event.preventDefault = event.stopPropagation = event.handler = event.data = null;
+
+            return returnValue;
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "click",
+        filename: URL_ROOT_SSL + TEST_LIB + ":1224:17",
+        attributes: ["Bubbling"],
+        handler: `
+          function(event) {
+            if (typeof jQuery == "undefined") return false;
+
+            // Empty object is for triggered events with no data
+            event = jQuery.event.fix(event || window.event || {});
+
+            // returned undefined or false
+            var returnValue;
+
+            var c = this.events[event.type];
+
+            var args = [].slice.call(arguments, 1);
+            args.unshift(event);
+
+            for (var j in c) {
+              // Pass in a reference to the handler function itself
+              // So that we can later remove it
+              args[0].handler = c[j];
+              args[0].data = c[j].data;
+
+              if (c[j].apply(this, args) === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                returnValue = false;
+              }
+            }
+
+            // Clean up added properties in IE to prevent memory leak
+            if (jQuery.browser.msie) event.target = event.preventDefault = event.stopPropagation = event.handler = event.data = null;
+
+            return returnValue;
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: URL_ROOT_SSL + TEST_LIB + ":1224:17",
+        attributes: ["Bubbling"],
+        handler: `
+          function(event) {
+            if (typeof jQuery == "undefined") return false;
+
+            // Empty object is for triggered events with no data
+            event = jQuery.event.fix(event || window.event || {});
+
+            // returned undefined or false
+            var returnValue;
+
+            var c = this.events[event.type];
+
+            var args = [].slice.call(arguments, 1);
+            args.unshift(event);
+
+            for (var j in c) {
+              // Pass in a reference to the handler function itself
+              // So that we can later remove it
+              args[0].handler = c[j];
+              args[0].data = c[j].data;
+
+              if (c[j].apply(this, args) === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                returnValue = false;
+              }
+            }
+
+            // Clean up added properties in IE to prevent memory leak
+            if (jQuery.browser.msie) event.target = event.preventDefault = event.stopPropagation = event.handler = event.data = null;
+
+            return returnValue;
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.11.1.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.11.1.js
new file mode 100644
index 0000000000..d1596e8e92
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.11.1.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.11.1).
+
+const TEST_LIB = "lib_jquery_1.11.1_min.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+    ],
+  },
+
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+    ],
+  },
+
+  {
+    selector: "#livediv",
+    expected: [
+      {
+        type: "dragend",
+        filename: TEST_URL + ":33:48",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragEnd() {
+            alert(4);
+          }`,
+      },
+      {
+        type: "dragleave",
+        filename: TEST_URL + ":32:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragLeave() {
+            alert(3);
+          }`,
+      },
+      {
+        type: "dragover",
+        filename: TEST_URL + ":35:49",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragOver() {
+            alert(6);
+          }`,
+      },
+      {
+        type: "drop",
+        filename: TEST_URL + ":34:45",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDrop() {
+            alert(5);
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.2.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.2.js
new file mode 100644
index 0000000000..e1dd53e207
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.2.js
@@ -0,0 +1,88 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.2).
+
+const TEST_LIB = "lib_jquery_1.2_min.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "click",
+        filename: URL_ROOT_SSL + TEST_LIB + ":24:10040",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            var val;
+            if (typeof jQuery == "undefined" || jQuery.event.triggered) return val;
+            val = jQuery.event.handle.apply(element, arguments);
+            return val;
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: URL_ROOT_SSL + TEST_LIB + ":24:10040",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            var val;
+            if (typeof jQuery == "undefined" || jQuery.event.triggered) return val;
+            val = jQuery.event.handle.apply(element, arguments);
+            return val;
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.3.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.3.js
new file mode 100644
index 0000000000..5cf3c9312b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.3.js
@@ -0,0 +1,97 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.3).
+
+const TEST_LIB = "lib_jquery_1.3_min.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "DOMContentLoaded",
+        filename: URL_ROOT_SSL + TEST_LIB + ":19:18937",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
+            n.ready()
+          }`,
+      },
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#livediv",
+    expected: [
+      {
+        type: "dblclick",
+        filename: TEST_URL + ":30:49",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function() {
+            return E.apply(this, arguments)
+          }`,
+      },
+      {
+        type: "dragstart",
+        filename: TEST_URL + ":31:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function() {
+            return E.apply(this, arguments)
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.4.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.4.js
new file mode 100644
index 0000000000..fcc438acfb
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.4.js
@@ -0,0 +1,132 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.4).
+
+const TEST_LIB = "lib_jquery_1.4_min.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "DOMContentLoaded",
+        filename: URL_ROOT_SSL + TEST_LIB + ":32:355",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            s.removeEventListener(\"DOMContentLoaded\", M, false);
+            c.ready()
+          }`,
+      },
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+      {
+        type: "load",
+        filename: URL_ROOT_SSL + TEST_LIB + ":26:107",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            if (!c.isReady) {
+              if (!s.body) return setTimeout(c.ready, 13);
+              c.isReady = true;
+              if (Q) {
+                for (var a, b = 0; a = Q[b++];) a.call(s, c);
+                Q = null
+              }
+              c.fn.triggerHandler && c(s).triggerHandler("ready")
+            }
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#livediv",
+    expected: [
+      {
+        type: "dblclick",
+        filename: TEST_URL + ":30:49",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function() {
+            return a.apply(d || this, arguments)
+          }`,
+      },
+      {
+        type: "dblclick",
+        filename: URL_ROOT_SSL + TEST_LIB + ":17:183",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function() {
+            return a.apply(d || this, arguments)
+          }`,
+      },
+      {
+        type: "dragstart",
+        filename: TEST_URL + ":31:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function() {
+            return a.apply(d || this, arguments)
+          }`,
+      },
+      {
+        type: "dragstart",
+        filename: URL_ROOT_SSL + TEST_LIB + ":17:183",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function() {
+            return a.apply(d || this, arguments)
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.6.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.6.js
new file mode 100644
index 0000000000..08b53a772d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.6.js
@@ -0,0 +1,298 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.6).
+
+const TEST_LIB = "lib_jquery_1.6_min.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "DOMContentLoaded",
+        filename: URL_ROOT_SSL + TEST_LIB + ":16:14483",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            c.removeEventListener("DOMContentLoaded", z, !1), e.ready()
+          }`,
+      },
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+      {
+        type: "load",
+        filename: URL_ROOT_SSL + TEST_LIB + ":16:10001",
+        attributes: ["Bubbling"],
+        handler: `
+          function(a) {
+            if (a === !0 && !--e.readyWait || a !== !0 && !e.isReady) {
+              if (!c.body) return setTimeout(e.ready, 1);
+              e.isReady = !0;
+              if (a !== !0 && --e.readyWait > 0) return;
+              y.resolveWith(c, [e]), e.fn.trigger && e(c).trigger("ready").unbind("ready")
+            }
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#livediv",
+    expected: [
+      {
+        type: "dblclick",
+        filename: TEST_URL + ":30:49",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDblClick() {
+            alert(1);
+          }`,
+      },
+      {
+        type: "dblclick",
+        filename: URL_ROOT_SSL + TEST_LIB + ":16:4732",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function M(a) {
+            var b, c, d, e, g, h, i, j, k, l, m, n, o, p = [],
+              q = [],
+              r = f._data(this, "events");
+            if (!(a.liveFired === this || !r || !r.live || a.target.disabled || a.button && a.type === "click")) {
+              a.namespace && (n = new RegExp("(^|\\\\.)" + a.namespace.split(".").join("\\\\.(?:.*\\\\.)?") + "(\\\\.|$)")), a.liveFired = this;
+              var s = r.live.slice(0);
+              for (i = 0; i < s.length; i++) g = s[i], g.origType.replace(x, "") === a.type ? q.push(g.selector) : s.splice(i--, 1);
+              e = f(a.target).closest(q, a.currentTarget);
+              for (j = 0, k = e.length; j < k; j++) {
+                m = e[j];
+                for (i = 0; i < s.length; i++) {
+                  g = s[i];
+                  if (m.selector === g.selector && (!n || n.test(g.namespace)) && !m.elem.disabled) {
+                    h = m.elem, d = null;
+                    if (g.preType === "mouseenter" || g.preType === "mouseleave") a.type = g.preType, d = f(a.relatedTarget).closest(g.selector)[0], d && f.contains(h, d) && (d = h);
+                    (!d || d !== h) && p.push({
+                      elem: h,
+                      handleObj: g,
+                      level: m.level
+                    })
+                  }
+                }
+              }
+              for (j = 0, k = p.length; j < k; j++) {
+                e = p[j];
+                if (c && e.level > c) break;
+                a.currentTarget = e.elem, a.data = e.handleObj.data, a.handleObj = e.handleObj, o = e.handleObj.origHandler.apply(e.elem, arguments);
+                if (o === !1 || a.isPropagationStopped()) {
+                  c = e.level, o === !1 && (b = !1);
+                  if (a.isImmediatePropagationStopped()) break
+                }
+              }
+              return b
+            }
+          }`,
+      },
+      {
+        type: "dragend",
+        filename: TEST_URL + ":33:48",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragEnd() {
+            alert(4);
+          }`,
+      },
+      {
+        type: "dragend",
+        filename: URL_ROOT_SSL + TEST_LIB + ":16:4732",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function M(a) {
+            var b, c, d, e, g, h, i, j, k, l, m, n, o, p = [],
+              q = [],
+              r = f._data(this, "events");
+            if (!(a.liveFired === this || !r || !r.live || a.target.disabled || a.button && a.type === "click")) {
+              a.namespace && (n = new RegExp("(^|\\\\.)" + a.namespace.split(".").join("\\\\.(?:.*\\\\.)?") + "(\\\\.|$)")), a.liveFired = this;
+              var s = r.live.slice(0);
+              for (i = 0; i < s.length; i++) g = s[i], g.origType.replace(x, "") === a.type ? q.push(g.selector) : s.splice(i--, 1);
+              e = f(a.target).closest(q, a.currentTarget);
+              for (j = 0, k = e.length; j < k; j++) {
+                m = e[j];
+                for (i = 0; i < s.length; i++) {
+                  g = s[i];
+                  if (m.selector === g.selector && (!n || n.test(g.namespace)) && !m.elem.disabled) {
+                    h = m.elem, d = null;
+                    if (g.preType === "mouseenter" || g.preType === "mouseleave") a.type = g.preType, d = f(a.relatedTarget).closest(g.selector)[0], d && f.contains(h, d) && (d = h);
+                    (!d || d !== h) && p.push({
+                      elem: h,
+                      handleObj: g,
+                      level: m.level
+                    })
+                  }
+                }
+              }
+              for (j = 0, k = p.length; j < k; j++) {
+                e = p[j];
+                if (c && e.level > c) break;
+                a.currentTarget = e.elem, a.data = e.handleObj.data, a.handleObj = e.handleObj, o = e.handleObj.origHandler.apply(e.elem, arguments);
+                if (o === !1 || a.isPropagationStopped()) {
+                  c = e.level, o === !1 && (b = !1);
+                  if (a.isImmediatePropagationStopped()) break
+                }
+              }
+              return b
+            }
+          }`,
+      },
+      {
+        type: "dragleave",
+        filename: TEST_URL + ":32:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragLeave() {
+            alert(3);
+          }`,
+      },
+      {
+        type: "dragleave",
+        filename: URL_ROOT_SSL + TEST_LIB + ":16:4732",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function M(a) {
+            var b, c, d, e, g, h, i, j, k, l, m, n, o, p = [],
+              q = [],
+              r = f._data(this, "events");
+            if (!(a.liveFired === this || !r || !r.live || a.target.disabled || a.button && a.type === "click")) {
+              a.namespace && (n = new RegExp("(^|\\\\.)" + a.namespace.split(".").join("\\\\.(?:.*\\\\.)?") + "(\\\\.|$)")), a.liveFired = this;
+              var s = r.live.slice(0);
+              for (i = 0; i < s.length; i++) g = s[i], g.origType.replace(x, "") === a.type ? q.push(g.selector) : s.splice(i--, 1);
+              e = f(a.target).closest(q, a.currentTarget);
+              for (j = 0, k = e.length; j < k; j++) {
+                m = e[j];
+                for (i = 0; i < s.length; i++) {
+                  g = s[i];
+                  if (m.selector === g.selector && (!n || n.test(g.namespace)) && !m.elem.disabled) {
+                    h = m.elem, d = null;
+                    if (g.preType === "mouseenter" || g.preType === "mouseleave") a.type = g.preType, d = f(a.relatedTarget).closest(g.selector)[0], d && f.contains(h, d) && (d = h);
+                    (!d || d !== h) && p.push({
+                      elem: h,
+                      handleObj: g,
+                      level: m.level
+                    })
+                  }
+                }
+              }
+              for (j = 0, k = p.length; j < k; j++) {
+                e = p[j];
+                if (c && e.level > c) break;
+                a.currentTarget = e.elem, a.data = e.handleObj.data, a.handleObj = e.handleObj, o = e.handleObj.origHandler.apply(e.elem, arguments);
+                if (o === !1 || a.isPropagationStopped()) {
+                  c = e.level, o === !1 && (b = !1);
+                  if (a.isImmediatePropagationStopped()) break
+                }
+              }
+              return b
+            }
+          }`,
+      },
+      {
+        type: "dragstart",
+        filename: TEST_URL + ":31:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragStart() {
+            alert(2);
+          }`,
+      },
+      {
+        type: "dragstart",
+        filename: URL_ROOT_SSL + TEST_LIB + ":16:4732",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function M(a) {
+            var b, c, d, e, g, h, i, j, k, l, m, n, o, p = [],
+              q = [],
+              r = f._data(this, "events");
+            if (!(a.liveFired === this || !r || !r.live || a.target.disabled || a.button && a.type === "click")) {
+              a.namespace && (n = new RegExp("(^|\\\\.)" + a.namespace.split(".").join("\\\\.(?:.*\\\\.)?") + "(\\\\.|$)")), a.liveFired = this;
+              var s = r.live.slice(0);
+              for (i = 0; i < s.length; i++) g = s[i], g.origType.replace(x, "") === a.type ? q.push(g.selector) : s.splice(i--, 1);
+              e = f(a.target).closest(q, a.currentTarget);
+              for (j = 0, k = e.length; j < k; j++) {
+                m = e[j];
+                for (i = 0; i < s.length; i++) {
+                  g = s[i];
+                  if (m.selector === g.selector && (!n || n.test(g.namespace)) && !m.elem.disabled) {
+                    h = m.elem, d = null;
+                    if (g.preType === "mouseenter" || g.preType === "mouseleave") a.type = g.preType, d = f(a.relatedTarget).closest(g.selector)[0], d && f.contains(h, d) && (d = h);
+                    (!d || d !== h) && p.push({
+                      elem: h,
+                      handleObj: g,
+                      level: m.level
+                    })
+                  }
+                }
+              }
+              for (j = 0, k = p.length; j < k; j++) {
+                e = p[j];
+                if (c && e.level > c) break;
+                a.currentTarget = e.elem, a.data = e.handleObj.data, a.handleObj = e.handleObj, o = e.handleObj.origHandler.apply(e.elem, arguments);
+                if (o === !1 || a.isPropagationStopped()) {
+                  c = e.level, o === !1 && (b = !1);
+                  if (a.isImmediatePropagationStopped()) break
+                }
+              }
+              return b
+            }
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.7.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.7.js
new file mode 100644
index 0000000000..eec7bbb0be
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.7.js
@@ -0,0 +1,148 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 1.7).
+
+const TEST_LIB = "lib_jquery_1.7_min.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "DOMContentLoaded",
+        filename: URL_ROOT_SSL + TEST_LIB + ":2:14177",
+        attributes: ["Bubbling"],
+        handler: `
+          function() {
+            c.removeEventListener("DOMContentLoaded", C, !1), e.ready()
+          }`,
+      },
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+      {
+        type: "load",
+        filename: URL_ROOT_SSL + TEST_LIB + ":2:9526",
+        attributes: ["Bubbling"],
+        handler: `
+          function(a) {
+            if (a === !0 && !--e.readyWait || a !== !0 && !e.isReady) {
+              if (!c.body) return setTimeout(e.ready, 1);
+              e.isReady = !0;
+              if (a !== !0 && --e.readyWait > 0) return;
+              B.fireWith(c, [e]), e.fn.trigger && e(c).trigger("ready").unbind("ready")
+            }
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#livediv",
+    expected: [
+      {
+        type: "dblclick",
+        filename: TEST_URL + ":30:49",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDblClick() {
+            alert(1);
+          }`,
+      },
+      {
+        type: "dragend",
+        filename: TEST_URL + ":33:48",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragEnd() {
+            alert(4);
+          }`,
+      },
+      {
+        type: "dragleave",
+        filename: TEST_URL + ":32:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragLeave() {
+            alert(3);
+          }`,
+      },
+      {
+        type: "dragover",
+        filename: TEST_URL + ":35:49",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragOver() {
+            alert(6);
+          }`,
+      },
+      {
+        type: "dragstart",
+        filename: TEST_URL + ":31:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragStart() {
+            alert(2);
+          }`,
+      },
+      {
+        type: "drop",
+        filename: TEST_URL + ":34:45",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDrop() {
+            alert(5);
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_jquery_2.1.1.js b/devtools/client/inspector/markup/test/browser_markup_events_jquery_2.1.1.js
new file mode 100644
index 0000000000..df9f7bc570
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_2.1.1.js
@@ -0,0 +1,121 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that markup view event bubbles show the correct event info for jQuery
+// and jQuery Live events (jQuery version 2.1.1).
+
+const TEST_LIB = "lib_jquery_2.1.1_min.js";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_jquery.html?" + TEST_LIB;
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "html",
+    expected: [
+      {
+        type: "load",
+        filename: TEST_URL + ":29:38",
+        attributes: ["Bubbling"],
+        handler: getDocMarkupEventsJQueryLoadHandlerText(),
+      },
+    ],
+  },
+  {
+    selector: "#testdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":36:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick1() {
+            alert(7);
+          }`,
+      },
+      {
+        type: "click",
+        filename: TEST_URL + ":37:43",
+        attributes: ["jQuery"],
+        handler: `
+          function divClick2() {
+            alert(8);
+          }`,
+      },
+      {
+        type: "keydown",
+        filename: TEST_URL + ":38:44",
+        attributes: ["jQuery"],
+        handler: `
+          function divKeyDown() {
+            alert(9);
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#livediv",
+    expected: [
+      {
+        type: "dragend",
+        filename: TEST_URL + ":33:48",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragEnd() {
+            alert(4);
+          }`,
+      },
+      {
+        type: "dragleave",
+        filename: TEST_URL + ":32:50",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragLeave() {
+            alert(3);
+          }`,
+      },
+      {
+        type: "dragover",
+        filename: TEST_URL + ":35:49",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDragOver() {
+            alert(6);
+          }`,
+      },
+      {
+        type: "drop",
+        filename: TEST_URL + ":34:45",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function liveDivDrop() {
+            alert(5);
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#inclassboundeventdiv",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":66:17",
+        attributes: ["jQuery", "Live"],
+        handler: `
+          function () {
+            alert(11);
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_keyboard_navigation.js b/devtools/client/inspector/markup/test/browser_markup_events_keyboard_navigation.js
new file mode 100644
index 0000000000..7c250291bf
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_keyboard_navigation.js
@@ -0,0 +1,145 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that the event listeners popup can be used from the keyboard.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_toggle.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await inspector.markup.expandAll();
+  await selectNode("#target", inspector);
+
+  info("Check that the event tooltip has the expected content");
+  const container = await getContainerForSelector("#target", inspector);
+  const eventTooltipBadge = container.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+  ok(eventTooltipBadge, "The event tooltip badge is displayed");
+  is(
+    eventTooltipBadge.getAttribute("aria-pressed"),
+    "false",
+    "The event tooltip badge is not pressed"
+  );
+
+  const tooltip = inspector.markup.eventDetailsTooltip;
+  const onTooltipShown = tooltip.once("shown");
+  eventTooltipBadge.focus();
+  EventUtils.synthesizeKey("VK_RETURN", {}, eventTooltipBadge.ownerGlobal);
+  await onTooltipShown;
+  ok(true, "The tooltip is shown");
+  is(
+    eventTooltipBadge.getAttribute("aria-pressed"),
+    "true",
+    "The event tooltip badge is pressed"
+  );
+
+  const tooltipDoc = tooltip.panel.ownerDocument;
+  const tooltipWin = tooltip.panel.ownerGlobal;
+  const tooltipContainerEl = tooltip.panel.querySelector(
+    ".devtools-tooltip-events-container"
+  );
+  const tooltipItems = Array.from(tooltipContainerEl.querySelectorAll("li"));
+  const twistyButton = tooltipItems[0].querySelector("button.theme-twisty");
+  is(
+    tooltipDoc.activeElement,
+    twistyButton,
+    "Focus is set on first twisty button"
+  );
+  ok(true, "Focus was moved to the twisty button");
+  is(
+    twistyButton.getAttribute("title"),
+    "“click” event listener code",
+    "Twisty button has expected title"
+  );
+  is(
+    twistyButton.getAttribute("aria-expanded"),
+    "false",
+    "Twisty button is not expanded"
+  );
+  is(
+    twistyButton.getAttribute("aria-owns"),
+    "cm-0",
+    "Twisty button has expected aria-owns attribute"
+  );
+  const cmIframeContainer = tooltipDoc.getElementById(
+    twistyButton.getAttribute("aria-owns")
+  );
+  ok(!!cmIframeContainer, "Twisty button aria-owns points to expected element");
+
+  info("Press Enter key to show event listener code");
+  EventUtils.synthesizeKey("VK_RETURN", {}, tooltipWin);
+  await waitFor(() => twistyButton.getAttribute("aria-expanded") === "true");
+  ok(true, "Twisty button is now expanded");
+  ok(
+    cmIframeContainer.hasAttribute("open"),
+    "iframe container has open attribute"
+  );
+
+  is(
+    cmIframeContainer.querySelector("iframe").getAttribute("title"),
+    "“click” event listener code"
+  );
+
+  info("Press Enter key again to hide event listener code");
+  EventUtils.synthesizeKey("VK_RETURN", {}, tooltipWin);
+  await waitFor(() => twistyButton.getAttribute("aria-expanded") === "false");
+  ok(true, "Twisty button is no longer expanded");
+  ok(
+    !cmIframeContainer.hasAttribute("open"),
+    "iframe container no longer has open attribute"
+  );
+
+  info("Press Tab key to focus first Open in debugger button");
+  EventUtils.synthesizeKey("VK_TAB", {}, tooltipWin);
+  const openInDebuggerButton = tooltipItems[0].querySelector(
+    "button.event-tooltip-debugger-icon"
+  );
+  is(
+    tooltipDoc.activeElement,
+    openInDebuggerButton,
+    "Focus was moved to the Open in Debugger button"
+  );
+  is(
+    openInDebuggerButton.getAttribute("title"),
+    "Open “click” in Debugger",
+    "Open in Debugger button has expected title"
+  );
+
+  info("Press Tab key to focus first checkbox");
+  EventUtils.synthesizeKey("VK_TAB", {}, tooltipWin);
+  const checkbox = tooltipItems[0].querySelector("input[type=checkbox]");
+  is(tooltipDoc.activeElement, checkbox, "Focus was moved to the checkbox");
+  is(
+    checkbox.getAttribute("aria-label"),
+    "Enable “click” event listener",
+    "Checkbox has expected label"
+  );
+
+  info("Press Tab key to move to next event listener item");
+  EventUtils.synthesizeKey("VK_TAB", {}, tooltipWin);
+  is(
+    tooltipDoc.activeElement,
+    tooltipItems[1].querySelector("button.theme-twisty"),
+    "Focus was moved to next event listener item twisty button"
+  );
+
+  info("Press Escape key to close popup");
+  const onTooltipHidden = tooltip.once("hidden");
+  EventUtils.sendKey("ESCAPE", inspector.toolbox.win);
+  await onTooltipHidden;
+  ok(true, "The tooltip is hidden");
+  await waitFor(
+    () => eventTooltipBadge.getAttribute("aria-pressed") === "false"
+  );
+  ok(true, "The event tooltip badge is not pressed anymore");
+
+  // wait for a bit to check the split console wasn't opened
+  await wait(500);
+  ok(!inspector.toolbox.splitConsole, "Split console is now hidden.");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_object_listener.js b/devtools/client/inspector/markup/test/browser_markup_events_object_listener.js
new file mode 100644
index 0000000000..d139a5d9c3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_object_listener.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that markup view event bubbles show the correct event info for object
+// style event listeners and that no bubbles are shown for objects without any
+// handleEvent method.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_object_listener.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  // eslint-disable-line
+  {
+    selector: "#valid-object-listener",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":20:23",
+        attributes: ["Bubbling"],
+        handler: `() => {\n` + `  console.log("handleEvent");\n` + `}`,
+      },
+    ],
+  },
+  {
+    selector: "#valid-invalid-object-listeners",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_URL + ":27:23",
+        attributes: ["Bubbling"],
+        handler: `() => {\n` + `  console.log("handleEvent");\n` + `}`,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1.js b/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1.js
new file mode 100644
index 0000000000..a9eac7053b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1.js
@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(4);
+
+// Test that markup view event bubbles show the correct event info for React
+// events (React development version 15.4.1) without JSX.
+
+const TEST_LIB = URL_ROOT_SSL + "lib_react_dom_15.4.1.js";
+const TEST_EXTERNAL_LISTENERS = URL_ROOT_SSL + "react_external_listeners.js";
+const TEST_URL =
+  URL_ROOT_SSL + "doc_markup_events_react_development_15.4.1.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "#inline",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":17530:42",
+        attributes: ["Bubbling"],
+        handler: `function emptyFunction() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_URL + ":22:33",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#external",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":17530:42",
+        attributes: ["Bubbling"],
+        handler: `function emptyFunction() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalinline",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":17530:42",
+        attributes: ["Bubbling"],
+        handler: `function emptyFunction() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+      {
+        type: "onMouseUp",
+        filename: TEST_URL + ":22:33",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalcapturing",
+    expected: [
+      {
+        type: "onClickCapture",
+        filename: TEST_EXTERNAL_LISTENERS + ":8:34",
+        attributes: ["React", "Capturing"],
+        handler: `
+          function externalCapturingFunction() {
+            alert("externalCapturingFunction");
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to avoid sidebar width issues with opening events"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.toolsidebar-width.inspector", 350);
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1_jsx.js b/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1_jsx.js
new file mode 100644
index 0000000000..fee94fea98
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1_jsx.js
@@ -0,0 +1,116 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(4);
+
+// Test that markup view event bubbles show the correct event info for React
+// events (React development version 15.4.1) using JSX.
+
+const TEST_LIB = URL_ROOT_SSL + "lib_react_dom_15.4.1.js";
+const TEST_LIB_BABEL = URL_ROOT_SSL + "lib_babel_6.21.0_min.js";
+const TEST_EXTERNAL_LISTENERS = URL_ROOT_SSL + "react_external_listeners.js";
+const TEST_URL =
+  URL_ROOT_SSL + "doc_markup_events_react_development_15.4.1_jsx.html";
+const TEST_INLINE_BABEL_ORIGINAL = URL_ROOT_SSL + "Inline%20Babel%20script:9";
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "#inlinejsx",
+    isSourceMapped: true,
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":17530:42",
+        attributes: ["Bubbling"],
+        handler: `function emptyFunction() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_INLINE_BABEL_ORIGINAL,
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function inlineFunction() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externaljsx",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":17530:42",
+        attributes: ["Bubbling"],
+        handler: `function emptyFunction() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalinlinejsx",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":17530:42",
+        attributes: ["Bubbling"],
+        handler: `function emptyFunction() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+      {
+        type: "onMouseUp",
+        filename: TEST_LIB_BABEL + ":11:41",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function inlineFunction() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalcapturingjsx",
+    expected: [
+      {
+        type: "onClickCapture",
+        filename: TEST_EXTERNAL_LISTENERS + ":8:34",
+        attributes: ["React", "Capturing"],
+        handler: `
+          function externalCapturingFunction() {
+            alert("externalCapturingFunction");
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to avoid sidebar width issues with opening events"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.toolsidebar-width.inspector", 350);
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1.js b/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1.js
new file mode 100644
index 0000000000..bbd0145bb3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1.js
@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(4);
+
+// Test that markup view event bubbles show the correct event info for React
+// events (React production version 15.3.1) without JSX.
+
+const TEST_LIB = URL_ROOT_SSL + "lib_react_with_addons_15.3.1_min.js";
+const TEST_EXTERNAL_LISTENERS = URL_ROOT_SSL + "react_external_listeners.js";
+const TEST_URL =
+  URL_ROOT_SSL + "doc_markup_events_react_production_15.3.1.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "#inline",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":16:27180",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_URL + ":22:33",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#external",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":16:27180",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalinline",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":16:27180",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+      {
+        type: "onMouseUp",
+        filename: TEST_URL + ":22:33",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalcapturing",
+    expected: [
+      {
+        type: "onClickCapture",
+        filename: TEST_EXTERNAL_LISTENERS + ":8:34",
+        attributes: ["React", "Capturing"],
+        handler: `
+          function externalCapturingFunction() {
+            alert("externalCapturingFunction");
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to avoid sidebar width issues with opening events"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.toolsidebar-width.inspector", 350);
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1_jsx.js b/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1_jsx.js
new file mode 100644
index 0000000000..f2b405c617
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1_jsx.js
@@ -0,0 +1,116 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(4);
+
+// Test that markup view event bubbles show the correct event info for React
+// events (React production version 15.3.1) using JSX.
+
+const TEST_LIB = URL_ROOT_SSL + "lib_react_with_addons_15.3.1_min.js";
+const TEST_LIB_BABEL = URL_ROOT_SSL + "lib_babel_6.21.0_min.js";
+const TEST_EXTERNAL_LISTENERS = URL_ROOT_SSL + "react_external_listeners.js";
+const TEST_URL =
+  URL_ROOT_SSL + "doc_markup_events_react_production_15.3.1_jsx.html";
+const TEST_INLINE_BABEL_ORIGINAL = URL_ROOT_SSL + "Inline%20Babel%20script:9";
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "#inlinejsx",
+    isSourceMapped: true,
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":16:27180",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_INLINE_BABEL_ORIGINAL,
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externaljsx",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":16:27180",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalinlinejsx",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":16:27180",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+      {
+        type: "onMouseUp",
+        filename: TEST_LIB_BABEL + ":11:41",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalcapturingjsx",
+    expected: [
+      {
+        type: "onClickCapture",
+        filename: TEST_EXTERNAL_LISTENERS + ":8:34",
+        attributes: ["React", "Capturing"],
+        handler: `
+          function externalCapturingFunction() {
+            alert("externalCapturingFunction");
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to avoid sidebar width issues with opening events"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.toolsidebar-width.inspector", 350);
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0.js b/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0.js
new file mode 100644
index 0000000000..3034330f14
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0.js
@@ -0,0 +1,133 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(4);
+
+// Test that markup view event bubbles show the correct event info for React
+// events (React production version 16.2.0) without JSX.
+
+const TEST_LIB = URL_ROOT_SSL + "lib_react_dom_16.2.0_min.js";
+const TEST_EXTERNAL_LISTENERS = URL_ROOT_SSL + "react_external_listeners.js";
+const TEST_URL =
+  URL_ROOT_SSL + "doc_markup_events_react_production_16.2.0.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "#inline",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":93:417",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_URL + ":21:22",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          inlineFunction() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#external",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":93:417",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalinline",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":93:417",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+      {
+        type: "onMouseUp",
+        filename: TEST_URL + ":21:22",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          inlineFunction() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalcapturing",
+    expected: [
+      {
+        type: "onClickCapture",
+        filename: TEST_EXTERNAL_LISTENERS + ":8:34",
+        attributes: ["React", "Capturing"],
+        handler: `
+          function externalCapturingFunction() {
+            alert("externalCapturingFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#doublebind",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":93:417",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_URL + ":21:22",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to avoid sidebar width issues with opening events"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.toolsidebar-width.inspector", 350);
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0_jsx.js b/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0_jsx.js
new file mode 100644
index 0000000000..4aedb216e2
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0_jsx.js
@@ -0,0 +1,114 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+"use strict";
+
+requestLongerTimeout(4);
+
+// Test that markup view event bubbles show the correct event info for React
+// events (React production version 16.2.0) using JSX.
+
+const TEST_LIB = URL_ROOT_SSL + "lib_react_dom_16.2.0_min.js";
+const TEST_LIB_BABEL = URL_ROOT_SSL + "lib_babel_6.21.0_min.js";
+const TEST_EXTERNAL_LISTENERS = URL_ROOT_SSL + "react_external_listeners.js";
+const TEST_URL =
+  URL_ROOT_SSL + "doc_markup_events_react_production_16.2.0_jsx.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+/*eslint-disable */
+const TEST_DATA = [
+  {
+    selector: "#inlinejsx",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":93:417",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_LIB_BABEL + ":26:34",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function inlineFunction() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externaljsx",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":93:417",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalinlinejsx",
+    expected: [
+      {
+        type: "click",
+        filename: TEST_LIB + ":93:417",
+        attributes: ["Bubbling"],
+        handler: `function() {}`,
+      },
+      {
+        type: "onClick",
+        filename: TEST_EXTERNAL_LISTENERS + ":4:25",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function externalFunction() {
+            alert("externalFunction");
+          }`,
+      },
+      {
+        type: "onMouseUp",
+        filename: TEST_LIB_BABEL + ":26:34",
+        attributes: ["React", "Bubbling"],
+        handler: `
+          function inlineFunction() {
+            alert("inlineFunction");
+          }`,
+      },
+    ],
+  },
+  {
+    selector: "#externalcapturingjsx",
+    expected: [
+      {
+        type: "onClickCapture",
+        filename: TEST_EXTERNAL_LISTENERS + ":8:34",
+        attributes: ["React", "Capturing"],
+        handler: `
+          function externalCapturingFunction() {
+            alert("externalCapturingFunction");
+          }`,
+      },
+    ],
+  },
+];
+/* eslint-enable */
+
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector to avoid sidebar width issues with opening events"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.toolsidebar-width.inspector", 350);
+  await runEventPopupTests(TEST_URL, TEST_DATA);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_source_map.js b/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
new file mode 100644
index 0000000000..39fb3c0575
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that source maps work in the event popup.
+
+const INITIAL_URL = URL_ROOT_SSL + "doc_markup_void_elements.html";
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events-source_map.html";
+
+/* import-globals-from helper_events_test_runner.js */
+loadHelperScript("helper_events_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "#clicky",
+    isSourceMapped: true,
+    expected: [
+      {
+        type: "click",
+        filename: "webpack:///events_original.js:7",
+        attributes: ["Bubbling"],
+        handler: `function clickme() {
+  console.log("clickme");
+}`,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  // Load some other URL before opening the toolbox, then navigate to
+  // the test URL.  This ensures that source map service will see the
+  // sources as they are loaded, avoiding any races.
+  const { toolbox, inspector } = await openInspectorForURL(INITIAL_URL);
+
+  // Ensure the source map service is operating.  This looks a bit
+  // funny, but sourceMapURLService is a getter, and we don't need the
+  // result.
+  toolbox.sourceMapURLService;
+
+  await navigateTo(TEST_URL);
+
+  await inspector.markup.expandAll();
+
+  for (const test of TEST_DATA) {
+    await checkEventsForNode(test, inspector);
+  }
+
+  // Wait for promises to avoid leaks when running this as a single test.
+  // We need to do this because we have opened a bunch of popups and don't them
+  // to affect other test runs when they are GCd.
+  await promiseNextTick();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_toggle.js b/devtools/client/inspector/markup/test/browser_markup_events_toggle.js
new file mode 100644
index 0000000000..5e1e437298
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_toggle.js
@@ -0,0 +1,295 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Test that event listeners can be disabled and re-enabled from the markup view event bubble.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_events_toggle.html";
+
+loadHelperScript("helper_events_test_runner.js");
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+  const { resourceCommand } = toolbox.commands;
+  await inspector.markup.expandAll();
+  await selectNode("#target", inspector);
+
+  info(
+    "Click on the target element to make sure the event listeners are properly set"
+  );
+  // There's a "mouseup" event listener that is `console.info` (so we can check "native" events).
+  // In order to know if it was called, we listen for the next console.info resource.
+  let { onResource: onConsoleInfoMessage } =
+    await resourceCommand.waitForNextResource(
+      resourceCommand.TYPES.CONSOLE_MESSAGE,
+      {
+        ignoreExistingResources: true,
+        predicate(resource) {
+          return resource.message.level == "info";
+        },
+      }
+    );
+  await safeSynthesizeMouseEventAtCenterInContentPage("#target");
+
+  let data = await getTargetElementHandledEventData();
+  is(data.click, 1, `target handled one "click" event`);
+  is(data.mousedown, 1, `target handled one "mousedown" event`);
+  await onConsoleInfoMessage;
+  ok(true, `the "mouseup" event listener (console.info) was called`);
+
+  info("Check that the event tooltip has the expected content");
+  const container = await getContainerForSelector("#target", inspector);
+  const eventTooltipBadge = container.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+  ok(eventTooltipBadge, "The event tooltip badge is displayed");
+
+  const tooltip = inspector.markup.eventDetailsTooltip;
+  let onTooltipShown = tooltip.once("shown");
+  eventTooltipBadge.click();
+  await onTooltipShown;
+  ok(true, "The tooltip is shown");
+
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click [x]", "mousedown [x]", "mouseup [x]"],
+    "The expected events are displayed, all enabled"
+  );
+  ok(
+    !eventTooltipBadge.classList.contains("has-disabled-events"),
+    "The event badge does not have the has-disabled-events class"
+  );
+
+  const [clickHeader, mousedownHeader, mouseupHeader] =
+    getHeadersInEventTooltip(tooltip);
+
+  info("Uncheck the mousedown event checkbox");
+  await toggleEventListenerCheckbox(tooltip, mousedownHeader);
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click [x]", "mousedown []", "mouseup [x]"],
+    "mousedown checkbox was unchecked"
+  );
+  ok(
+    eventTooltipBadge.classList.contains("has-disabled-events"),
+    "Unchecking an event applied the has-disabled-events class to the badge"
+  );
+  await safeSynthesizeMouseEventAtCenterInContentPage("#target");
+  data = await getTargetElementHandledEventData();
+  is(data.click, 2, `target handled another "click" event…`);
+  is(data.mousedown, 1, `… but not a mousedown one`);
+
+  info(
+    "Check that the event badge style is reset when re-enabling all disabled events"
+  );
+  await toggleEventListenerCheckbox(tooltip, mousedownHeader);
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click [x]", "mousedown [x]", "mouseup [x]"],
+    "mousedown checkbox is checked again"
+  );
+  ok(
+    !eventTooltipBadge.classList.contains("has-disabled-events"),
+    "The event badge does not have the has-disabled-events class after re-enabling disabled event"
+  );
+  info("Disable mousedown again for the rest of the test");
+  await toggleEventListenerCheckbox(tooltip, mousedownHeader);
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click [x]", "mousedown []", "mouseup [x]"],
+    "mousedown checkbox is unchecked again"
+  );
+
+  info("Uncheck the click event checkbox");
+  await toggleEventListenerCheckbox(tooltip, clickHeader);
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click []", "mousedown []", "mouseup [x]"],
+    "click checkbox was unchecked"
+  );
+  ok(
+    eventTooltipBadge.classList.contains("has-disabled-events"),
+    "event badge still has the has-disabled-events class"
+  );
+  await safeSynthesizeMouseEventAtCenterInContentPage("#target");
+  data = await getTargetElementHandledEventData();
+  is(data.click, 2, `click event listener was disabled`);
+  is(data.mousedown, 1, `and mousedown still is disabled as well`);
+
+  info("Uncheck the mouseup event checkbox");
+  await toggleEventListenerCheckbox(tooltip, mouseupHeader);
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click []", "mousedown []", "mouseup []"],
+    "mouseup checkbox was unchecked"
+  );
+
+  ({ onResource: onConsoleInfoMessage } =
+    await resourceCommand.waitForNextResource(
+      resourceCommand.TYPES.CONSOLE_MESSAGE,
+      {
+        ignoreExistingResources: true,
+        predicate(resource) {
+          return resource.message.level == "info";
+        },
+      }
+    ));
+  const onTimeout = wait(500).then(() => "TIMEOUT");
+  await safeSynthesizeMouseEventAtCenterInContentPage("#target");
+  const raceResult = await Promise.race([onConsoleInfoMessage, onTimeout]);
+  is(
+    raceResult,
+    "TIMEOUT",
+    "The mouseup event didn't trigger a console.info call, meaning the event listener was disabled"
+  );
+
+  info("Re-enable the mousedown event");
+  await toggleEventListenerCheckbox(tooltip, mousedownHeader);
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click []", "mousedown [x]", "mouseup []"],
+    "mousedown checkbox is checked again"
+  );
+  ok(
+    eventTooltipBadge.classList.contains("has-disabled-events"),
+    "event badge still has the has-disabled-events class"
+  );
+  await safeSynthesizeMouseEventAtCenterInContentPage("#target");
+  data = await getTargetElementHandledEventData();
+  is(data.click, 2, `no additional "click" event were handled`);
+  is(
+    data.mousedown,
+    2,
+    `but we did get a new "mousedown", the event listener was re-enabled`
+  );
+
+  info("Hide the tooltip and show it again");
+  const tooltipHidden = tooltip.once("hidden");
+  tooltip.hide();
+  await tooltipHidden;
+
+  onTooltipShown = tooltip.once("shown");
+  eventTooltipBadge.click();
+  await onTooltipShown;
+  ok(true, "The tooltip is shown again");
+
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click []", "mousedown [x]", "mouseup []"],
+    "Only mousedown checkbox is checked"
+  );
+
+  info("Re-enable mouseup events");
+  await toggleEventListenerCheckbox(
+    tooltip,
+    getHeadersInEventTooltip(tooltip).at(-1)
+  );
+  Assert.deepEqual(
+    getAsciiHeadersViz(tooltip),
+    ["click []", "mousedown [x]", "mouseup [x]"],
+    "mouseup is checked again"
+  );
+
+  ({ onResource: onConsoleInfoMessage } =
+    await resourceCommand.waitForNextResource(
+      resourceCommand.TYPES.CONSOLE_MESSAGE,
+      {
+        ignoreExistingResources: true,
+        predicate(resource) {
+          return resource.message.level == "info";
+        },
+      }
+    ));
+  await safeSynthesizeMouseEventAtCenterInContentPage("#target");
+  await onConsoleInfoMessage;
+  ok(true, "The mouseup event was re-enabled");
+  data = await getTargetElementHandledEventData();
+  is(data.click, 2, `"click" is still disabled`);
+  is(
+    data.mousedown,
+    3,
+    `we received a new "mousedown" event as part of the click`
+  );
+
+  info("Close DevTools to check that event listeners are re-enabled");
+  await closeToolbox();
+  await safeSynthesizeMouseEventAtCenterInContentPage("#target");
+  data = await getTargetElementHandledEventData();
+  is(
+    data.click,
+    3,
+    `a new "click" event was handled after the devtools was closed`
+  );
+  is(
+    data.mousedown,
+    4,
+    `a new "mousedown" event was handled after the devtools was closed`
+  );
+});
+
+function getHeadersInEventTooltip(tooltip) {
+  return Array.from(tooltip.panel.querySelectorAll(".event-header"));
+}
+
+/**
+ * Get an array of string representing a header in its state, e.g.
+ * [
+ *   "click [x]",
+ *   "mousedown []",
+ * ]
+ *
+ * represents an event tooltip with a click and a mousedown event, where the mousedown
+ * event has been disabled.
+ *
+ * @param {EventTooltip} tooltip
+ * @returns Array<String>
+ */
+function getAsciiHeadersViz(tooltip) {
+  return getHeadersInEventTooltip(tooltip).map(
+    el =>
+      `${el.querySelector(".event-tooltip-event-type").textContent} [${
+        getHeaderCheckbox(el).checked ? "x" : ""
+      }]`
+  );
+}
+
+function getHeaderCheckbox(headerEl) {
+  return headerEl.querySelector("input[type=checkbox]");
+}
+
+async function toggleEventListenerCheckbox(tooltip, headerEl) {
+  const onEventToggled = tooltip.eventTooltip.once(
+    "event-tooltip-listener-toggled"
+  );
+  const checkbox = getHeaderCheckbox(headerEl);
+  const previousValue = checkbox.checked;
+  EventUtils.synthesizeMouseAtCenter(
+    getHeaderCheckbox(headerEl),
+    {},
+    headerEl.ownerGlobal
+  );
+  await onEventToggled;
+  is(checkbox.checked, !previousValue, "The checkbox was toggled");
+  is(
+    headerEl.classList.contains("content-expanded"),
+    false,
+    "Clicking on the checkbox did not expand the header"
+  );
+}
+
+/**
+ * @returns Promise<Object> The object keys are event names (e.g. "click", "mousedown"), and
+ *          the values are number representing the number of time the event was handled.
+ *          Note that "mouseup" isn't handled here.
+ */
+function getTargetElementHandledEventData() {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    // In doc_markup_events_toggle.html , we count the events handled by the target in
+    // a stringified object in dataset.handledEvents.
+    return JSON.parse(
+      content.document.getElementById("target").dataset.handledEvents
+    );
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js b/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js
new file mode 100644
index 0000000000..fb16ffe361
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js
@@ -0,0 +1,163 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the flex display badge toggles on the flexbox highlighter.
+
+const TEST_URI = `
+  <style type="text/css">
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openLayoutView();
+  const { store } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  info("Check the flex display badge is shown and not active.");
+  await selectNode("#flex", inspector);
+
+  info("Wait until the flexbox store has been updated");
+  await waitUntilState(
+    store,
+    state =>
+      state.flexbox.flexContainer.nodeFront === inspector.selection.nodeFront
+  );
+
+  const flexContainer = await getContainerForSelector("#flex", inspector);
+  const flexDisplayBadge = flexContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(
+    !flexDisplayBadge.classList.contains("active"),
+    "flex display badge is not active."
+  );
+  is(
+    flexDisplayBadge.getAttribute("aria-pressed"),
+    "false",
+    "flex display badge is not pressed."
+  );
+  ok(
+    flexDisplayBadge.classList.contains("interactive"),
+    "flex display badge is interactive."
+  );
+
+  info("Check the initial state of the flex highlighter.");
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the highlighters overlay."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info("Toggling ON the flexbox highlighter from the flex display badge.");
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.flexbox.highlighted
+  );
+  flexDisplayBadge.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info(
+    "Check the flexbox highlighter is created and flex display badge state."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is created in the highlighters overlay."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+  ok(
+    flexDisplayBadge.classList.contains("active"),
+    "flex display badge is active."
+  );
+  is(
+    flexDisplayBadge.getAttribute("aria-pressed"),
+    "true",
+    "flex display badge is pressed."
+  );
+  ok(
+    flexDisplayBadge.classList.contains("interactive"),
+    "flex display badge is interactive."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the flex display badge.");
+  let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  onCheckboxChange = waitUntilState(store, state => !state.flexbox.highlighted);
+  flexDisplayBadge.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  ok(
+    !flexDisplayBadge.classList.contains("active"),
+    "flex display badge is not active."
+  );
+  is(
+    flexDisplayBadge.getAttribute("aria-pressed"),
+    "false",
+    "flex display badge is no longer pressed."
+  );
+  ok(
+    flexDisplayBadge.classList.contains("interactive"),
+    "flex display badge is interactive."
+  );
+
+  info("Toggling ON the flexbox highlighter from the keyboard.");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  onCheckboxChange = waitUntilState(store, state => state.flexbox.highlighted);
+
+  flexDisplayBadge.focus();
+  EventUtils.synthesizeKey("VK_RETURN", {}, flexDisplayBadge.ownerGlobal);
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter was displayed from the keyboard."
+  );
+  ok(
+    flexDisplayBadge.classList.contains("active"),
+    "flex display badge is active."
+  );
+  is(
+    flexDisplayBadge.getAttribute("aria-pressed"),
+    "true",
+    "flex display badge is pressed."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the keyboard.");
+  onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  onCheckboxChange = waitUntilState(store, state => !state.flexbox.highlighted);
+  EventUtils.synthesizeKey("VK_RETURN", {}, flexDisplayBadge.ownerGlobal);
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  ok(true, "Highlighter was hidden from the keyboard");
+  ok(
+    !flexDisplayBadge.classList.contains("active"),
+    "flex display badge was deactivated from the keyboard"
+  );
+  is(
+    flexDisplayBadge.getAttribute("aria-pressed"),
+    "false",
+    "flex display badge is no longer pressed."
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_flex_display_badge_telemetry.js b/devtools/client/inspector/markup/test/browser_markup_flex_display_badge_telemetry.js
new file mode 100644
index 0000000000..e65173fcde
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_flex_display_badge_telemetry.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry is correct when the flexbox highlighter is activated from
+// the markup view.
+
+const TEST_URI = `
+  <style type="text/css">
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  startTelemetry();
+  const { inspector } = await openLayoutView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const flexContainer = await getContainerForSelector("#flex", inspector);
+  const flexDisplayBadge = flexContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+
+  info("Toggling ON the flexbox highlighter from the flex display badge.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexDisplayBadge.click();
+  await onHighlighterShown;
+
+  info("Toggling OFF the flexbox highlighter from the flex display badge.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexDisplayBadge.click();
+  await onHighlighterHidden;
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.markup.flexboxhighlighter.opened", "", 1, "scalar");
+  checkTelemetry(
+    "DEVTOOLS_FLEXBOX_HIGHLIGHTER_TIME_ACTIVE_SECONDS",
+    "",
+    null,
+    "hasentries"
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js
new file mode 100644
index 0000000000..a68b972006
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid display badge toggles on the grid highlighter.
+
+const TEST_URI = `
+  <style type="text/css">
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openLayoutView();
+  const { highlighters, store } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  info("Check the grid display badge is shown and not active.");
+  await selectNode("#grid", inspector);
+  const gridContainer = await getContainerForSelector("#grid", inspector);
+  const gridDisplayBadge = gridContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(
+    !gridDisplayBadge.classList.contains("active"),
+    "grid display badge is not active."
+  );
+  ok(
+    gridDisplayBadge.classList.contains("interactive"),
+    "grid display badge is interactive."
+  );
+
+  info("Check the initial state of the grid highlighter.");
+  ok(
+    !highlighters.gridHighlighters.size,
+    "No CSS grid highlighter exists in the highlighters overlay."
+  );
+
+  info("Toggling ON the CSS grid highlighter from the grid display badge.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length === 1 && state.grids[0].highlighted
+  );
+  gridDisplayBadge.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info(
+    "Check that the CSS grid highlighter is created and the display badge state."
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "CSS grid highlighter is created in the highlighters overlay."
+  );
+  ok(
+    gridDisplayBadge.classList.contains("active"),
+    "grid display badge is active."
+  );
+  ok(
+    gridDisplayBadge.classList.contains("interactive"),
+    "grid display badge is interactive."
+  );
+
+  info("Toggling OFF the CSS grid highlighter from the grid display badge.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 1 && !state.grids[0].highlighted
+  );
+  gridDisplayBadge.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  ok(
+    !gridDisplayBadge.classList.contains("active"),
+    "grid display badge is not active."
+  );
+  ok(
+    gridDisplayBadge.classList.contains("interactive"),
+    "grid display badge is interactive."
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js
new file mode 100644
index 0000000000..7c66688f4e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js
@@ -0,0 +1,256 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests toggling multiple grid highlighters in the markup view with the grid display
+// badges.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid3" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 2);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openLayoutView();
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const grid1 = await getContainerForSelector("#grid1", inspector);
+  const grid2 = await getContainerForSelector("#grid2", inspector);
+  const grid3 = await getContainerForSelector("#grid3", inspector);
+  const gridDisplayBadge1 = grid1.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  const gridDisplayBadge2 = grid2.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  const gridDisplayBadge3 = grid3.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+
+  info(
+    "Check the initial state of the grid display badges and grid highlighters"
+  );
+  ok(
+    !gridDisplayBadge1.classList.contains("active"),
+    "#grid1 display badge is not active."
+  );
+  ok(
+    !gridDisplayBadge2.classList.contains("active"),
+    "#grid2 display badge is not active."
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("active"),
+    "#grid3 display badge is not active."
+  );
+  ok(
+    gridDisplayBadge1.classList.contains("interactive"),
+    "#grid1 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("interactive"),
+    "#grid2 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge3.classList.contains("interactive"),
+    "#grid3 display badge is interactive"
+  );
+  ok(
+    !highlighters.gridHighlighters.size,
+    "No CSS grid highlighter exists in the highlighters overlay."
+  );
+
+  info("Toggling ON the CSS grid highlighter from the #grid1 display badge.");
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridDisplayBadge1.click();
+  await onHighlighterShown;
+
+  ok(
+    gridDisplayBadge1.classList.contains("active"),
+    "#grid1 display badge is active."
+  );
+  ok(
+    !gridDisplayBadge2.classList.contains("active"),
+    "#grid2 display badge is not active."
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("active"),
+    "#grid3 display badge is not active."
+  );
+  ok(
+    gridDisplayBadge1.classList.contains("interactive"),
+    "#grid1 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("interactive"),
+    "#grid2 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge3.classList.contains("interactive"),
+    "#grid3 display badge is interactive"
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "Got expected number of grid highlighters shown."
+  );
+
+  info("Toggling ON the CSS grid highlighter from the #grid2 display badge.");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridDisplayBadge2.click();
+  await onHighlighterShown;
+
+  ok(
+    gridDisplayBadge1.classList.contains("active"),
+    "#grid1 display badge is active."
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("active"),
+    "#grid2 display badge is active."
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("active"),
+    "#grid3 display badge is not active."
+  );
+  ok(
+    gridDisplayBadge1.classList.contains("interactive"),
+    "#grid1 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("interactive"),
+    "#grid2 display badge is interactive"
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("interactive"),
+    "#grid3 display badge is not interactive"
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    2,
+    "Got expected number of grid highlighters shown."
+  );
+
+  info(
+    "Attempt to toggle ON the CSS grid highlighter from the #grid3 display badge."
+  );
+  gridDisplayBadge3.click();
+
+  ok(
+    gridDisplayBadge1.classList.contains("active"),
+    "#grid1 display badge is active."
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("active"),
+    "#grid2 display badge is active."
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("active"),
+    "#grid3 display badge is not active."
+  );
+  ok(
+    gridDisplayBadge1.classList.contains("interactive"),
+    "#grid1 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("interactive"),
+    "#grid2 display badge is interactive"
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("interactive"),
+    "#grid3 display badge is not interactive"
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    2,
+    "Got expected number of grid highlighters shown."
+  );
+
+  info("Toggling OFF the CSS grid highlighter from the #grid2 display badge.");
+  let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridDisplayBadge2.click();
+  await onHighlighterHidden;
+
+  ok(
+    gridDisplayBadge1.classList.contains("active"),
+    "#grid1 display badge is active."
+  );
+  ok(
+    !gridDisplayBadge2.classList.contains("active"),
+    "#grid2 display badge is not active."
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("active"),
+    "#grid3 display badge is not active."
+  );
+  ok(
+    gridDisplayBadge1.classList.contains("interactive"),
+    "#grid1 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("interactive"),
+    "#grid2 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge3.classList.contains("interactive"),
+    "#grid3 display badge is interactive"
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "Got expected number of grid highlighters shown."
+  );
+
+  info("Toggling OFF the CSS grid highlighter from the #grid1 display badge.");
+  onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridDisplayBadge1.click();
+  await onHighlighterHidden;
+
+  ok(
+    !gridDisplayBadge1.classList.contains("active"),
+    "#grid1 display badge is not active."
+  );
+  ok(
+    !gridDisplayBadge2.classList.contains("active"),
+    "#grid2 display badge is not active."
+  );
+  ok(
+    !gridDisplayBadge3.classList.contains("active"),
+    "#grid3 display badge is not active."
+  );
+  ok(
+    gridDisplayBadge1.classList.contains("interactive"),
+    "#grid1 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge2.classList.contains("interactive"),
+    "#grid2 display badge is interactive"
+  );
+  ok(
+    gridDisplayBadge3.classList.contains("interactive"),
+    "#grid3 display badge is interactive"
+  );
+  ok(
+    !highlighters.gridHighlighters.size,
+    "No CSS grid highlighter exists in the highlighters overlay."
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js
new file mode 100644
index 0000000000..6c4cb06b45
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that toggling a flex highlighter does not change a grid highlighter badge.
+// Bug 1592604
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+    .flex {
+      display: flex;
+    }
+  </style>
+  <div class="grid">
+  </div>
+  <div class="flex">
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openLayoutView();
+
+  const gridBadge = await enableHighlighterByBadge("grid", ".grid", inspector);
+  const flexBadge = await enableHighlighterByBadge("flex", ".flex", inspector);
+
+  info("Check that both display badges are active");
+  ok(flexBadge.classList.contains("active"), `flex display badge is active.`);
+  ok(gridBadge.classList.contains("active"), `grid display badge is active.`);
+});
+
+/**
+ * Enable the flex or grid highlighter by clicking on the corresponding badge
+ * next to a node in the markup view. Returns the badge element.
+ *
+ * @param  {String} type
+ *         Either "flex" or "grid"
+ * @param  {String} selector
+ *         Selector matching the flex or grid container element.
+ * @param  {Inspector} inspector
+ *         Instance of Inspector panel
+ * @return {Element} The DOM element of the display badge that shows next to the element
+ *         mathched by the selector in the markup view.
+ */
+async function enableHighlighterByBadge(type, selector, inspector) {
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  info(`Check the ${type} display badge is shown and not active.`);
+  const container = await getContainerForSelector(selector, inspector);
+  const badge = container.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(!badge.classList.contains("active"), `${type} badge is not active.`);
+  ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
+
+  info(`Toggling ON the ${type} highlighter from the ${type} display badge.`);
+  let onHighlighterShown;
+  switch (type) {
+    case "grid":
+      onHighlighterShown = waitForHighlighterTypeShown(
+        inspector.highlighters.TYPES.GRID
+      );
+      break;
+    case "flex":
+      onHighlighterShown = waitForHighlighterTypeShown(
+        inspector.highlighters.TYPES.FLEXBOX
+      );
+      break;
+  }
+
+  badge.click();
+  await onHighlighterShown;
+
+  ok(badge.classList.contains("active"), `${type} badge is active.`);
+  ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
+
+  return badge;
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_telemetry.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_telemetry.js
new file mode 100644
index 0000000000..8bb3cc1441
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_telemetry.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry count is correct when the grid highlighter is activated from
+// the markup view.
+
+const TEST_URI = `
+  <style type="text/css">
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  startTelemetry();
+  const { inspector } = await openLayoutView();
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const gridContainer = await getContainerForSelector("#grid", inspector);
+  const gridDisplayBadge = gridContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+
+  info("Toggling ON the CSS grid highlighter from the grid display badge.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length === 1 && state.grids[0].highlighted
+  );
+  gridDisplayBadge.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.markup.gridinspector.opened", "", 1, "scalar");
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js b/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
new file mode 100644
index 0000000000..5179902da6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
@@ -0,0 +1,111 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_outerhtml_test_runner.js */
+"use strict";
+
+// Test outerHTML edition via the markup-view
+
+requestLongerTimeout(2);
+
+loadHelperScript("helper_outerhtml_test_runner.js");
+
+const TEST_DATA = [
+  {
+    selector: "#one",
+    oldHTML: '<div id="one">First <em>Div</em></div>',
+    newHTML: '<div id="one">First Div</div>',
+    async validate() {
+      const text = await getContentPageElementProperty("#one", "textContent");
+      is(text, "First Div", "New div has expected text content");
+      const num = await getNumberOfMatchingElementsInContentPage("#one em");
+      is(num, 0, "No em remaining");
+    },
+  },
+  {
+    selector: "#removedChildren",
+    oldHTML:
+      '<div id="removedChildren">removedChild ' +
+      "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
+    newHTML: '<div id="removedChildren">removedChild</div>',
+  },
+  {
+    selector: "#addedChildren",
+    oldHTML: '<div id="addedChildren">addedChildren</div>',
+    newHTML:
+      '<div id="addedChildren">addedChildren ' +
+      "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
+  },
+  {
+    selector: "#addedAttribute",
+    oldHTML: '<div id="addedAttribute">addedAttribute</div>',
+    newHTML:
+      '<div id="addedAttribute" class="important" disabled checked>' +
+      "addedAttribute</div>",
+    async validate({ pageNodeFront, selectedNodeFront }) {
+      is(pageNodeFront, selectedNodeFront, "Original element is selected");
+      const html = await getContentPageElementProperty(
+        "#addedAttribute",
+        "outerHTML"
+      );
+      is(
+        html,
+        '<div id="addedAttribute" class="important" disabled="" ' +
+          'checked="">addedAttribute</div>',
+        "Attributes have been added"
+      );
+    },
+  },
+  {
+    selector: "#changedTag",
+    oldHTML: '<div id="changedTag">changedTag</div>',
+    newHTML: '<p id="changedTag" class="important">changedTag</p>',
+  },
+  {
+    selector: "#siblings",
+    oldHTML: '<div id="siblings">siblings</div>',
+    newHTML:
+      '<div id="siblings-before-sibling">before sibling</div>' +
+      '<div id="siblings">siblings (updated)</div>' +
+      '<div id="siblings-after-sibling">after sibling</div>',
+    async validate({ selectedNodeFront, inspector }) {
+      const beforeSiblingFront = await getNodeFront(
+        "#siblings-before-sibling",
+        inspector
+      );
+      is(beforeSiblingFront, selectedNodeFront, "Sibling has been selected");
+
+      const text = await getContentPageElementProperty(
+        "#siblings",
+        "textContent"
+      );
+      is(text, "siblings (updated)", "New div has expected text content");
+
+      const beforeText = await getContentPageElementProperty(
+        "#siblings-before-sibling",
+        "textContent"
+      );
+      is(beforeText, "before sibling", "Sibling has been inserted");
+
+      const afterText = await getContentPageElementProperty(
+        "#siblings-after-sibling",
+        "textContent"
+      );
+      is(afterText, "after sibling", "Sibling has been inserted");
+    },
+  },
+];
+
+const TEST_URL =
+  "data:text/html," +
+  "<!DOCTYPE html>" +
+  "<head><meta charset='utf-8' /></head>" +
+  "<body>" +
+  TEST_DATA.map(outer => outer.oldHTML).join("\n") +
+  "</body>" +
+  "</html>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  inspector.markup._frame.focus();
+  await runEditOuterHTMLTests(TEST_DATA, inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js b/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
new file mode 100644
index 0000000000..832ff21921
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
@@ -0,0 +1,157 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_outerhtml_test_runner.js */
+"use strict";
+
+// Test outerHTML edition via the markup-view
+
+loadHelperScript("helper_outerhtml_test_runner.js");
+requestLongerTimeout(2);
+
+const TEST_DATA = [
+  {
+    selector: "#badMarkup1",
+    oldHTML: '<div id="badMarkup1">badMarkup1</div>',
+    newHTML: '<div id="badMarkup1">badMarkup1</div> hanging</div>',
+    async validate({ pageNodeFront, selectedNodeFront }) {
+      is(pageNodeFront, selectedNodeFront, "Original element is selected");
+
+      const [textNodeName, textNodeData] = await SpecialPowers.spawn(
+        gBrowser.selectedBrowser,
+        [],
+        () => {
+          const node =
+            content.document.querySelector("#badMarkup1").nextSibling;
+          return [node.nodeName, node.data];
+        }
+      );
+      is(textNodeName, "#text", "Sibling is a text element");
+      is(textNodeData, " hanging", "New text node has expected text content");
+    },
+  },
+  {
+    selector: "#badMarkup2",
+    oldHTML: '<div id="badMarkup2">badMarkup2</div>',
+    newHTML:
+      '<div id="badMarkup2">badMarkup2</div> hanging<div></div>' +
+      "</div></div></body>",
+    async validate({ pageNodeFront, selectedNodeFront }) {
+      is(pageNodeFront, selectedNodeFront, "Original element is selected");
+
+      const [textNodeName, textNodeData] = await SpecialPowers.spawn(
+        gBrowser.selectedBrowser,
+        [],
+        () => {
+          const node =
+            content.document.querySelector("#badMarkup2").nextSibling;
+          return [node.nodeName, node.data];
+        }
+      );
+      is(textNodeName, "#text", "Sibling is a text element");
+      is(textNodeData, " hanging", "New text node has expected text content");
+    },
+  },
+  {
+    selector: "#badMarkup3",
+    oldHTML: '<div id="badMarkup3">badMarkup3</div>',
+    newHTML:
+      '<div id="badMarkup3">badMarkup3 <em>Emphasized <strong> ' +
+      "and strong</div>",
+    async validate({ pageNodeFront, selectedNodeFront }) {
+      is(pageNodeFront, selectedNodeFront, "Original element is selected");
+
+      const emText = await getContentPageElementProperty(
+        "#badMarkup3 em",
+        "textContent"
+      );
+      const strongText = await getContentPageElementProperty(
+        "#badMarkup3 strong",
+        "textContent"
+      );
+      is(emText, "Emphasized  and strong", "<em> was auto created");
+      is(strongText, " and strong", "<strong> was auto created");
+    },
+  },
+  {
+    selector: "#badMarkup4",
+    oldHTML: '<div id="badMarkup4">badMarkup4</div>',
+    newHTML: '<div id="badMarkup4">badMarkup4</p>',
+    async validate({ pageNodeFront, selectedNodeFront }) {
+      is(pageNodeFront, selectedNodeFront, "Original element is selected");
+
+      const divText = await getContentPageElementProperty(
+        "#badMarkup4",
+        "textContent"
+      );
+      const divTag = await getContentPageElementProperty(
+        "#badMarkup4",
+        "tagName"
+      );
+
+      const pText = await getContentPageElementProperty(
+        "#badMarkup4 p",
+        "textContent"
+      );
+      const pTag = await getContentPageElementProperty(
+        "#badMarkup4 p",
+        "tagName"
+      );
+
+      is(divText, "badMarkup4", "textContent is correct");
+      is(divTag, "DIV", "did not change to <p> tag");
+      is(pText, "", "The <p> tag has no children");
+      is(pTag, "P", "Created an empty <p> tag");
+    },
+  },
+  {
+    selector: "#badMarkup5",
+    oldHTML: '<p id="badMarkup5">badMarkup5</p>',
+    newHTML: '<p id="badMarkup5">badMarkup5 <div>with a nested div</div></p>',
+    async validate({ pageNodeFront, selectedNodeFront }) {
+      is(pageNodeFront, selectedNodeFront, "Original element is selected");
+
+      const num = await getNumberOfMatchingElementsInContentPage(
+        "#badMarkup5 div"
+      );
+
+      const pText = await getContentPageElementProperty(
+        "#badMarkup5",
+        "textContent"
+      );
+      const pTag = await getContentPageElementProperty(
+        "#badMarkup5",
+        "tagName"
+      );
+
+      const divText = await getContentPageElementProperty(
+        "#badMarkup5 ~ div",
+        "textContent"
+      );
+      const divTag = await getContentPageElementProperty(
+        "#badMarkup5 ~ div",
+        "tagName"
+      );
+
+      is(num, 0, "The invalid markup got created as a sibling");
+      is(pText, "badMarkup5 ", "The p tag does not take in the div content");
+      is(pTag, "P", "Did not change to a <div> tag");
+      is(divText, "with a nested div", "textContent is correct");
+      is(divTag, "DIV", "Did not change to <p> tag");
+    },
+  },
+];
+
+const TEST_URL =
+  "data:text/html," +
+  "<!DOCTYPE html>" +
+  "<head><meta charset='utf-8' /></head>" +
+  "<body>" +
+  TEST_DATA.map(outer => outer.oldHTML).join("\n") +
+  "</body>" +
+  "</html>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  inspector.markup._frame.focus();
+  await runEditOuterHTMLTests(TEST_DATA, inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_html_edit_03.js b/devtools/client/inspector/markup/test/browser_markup_html_edit_03.js
new file mode 100644
index 0000000000..af5dc091f3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_03.js
@@ -0,0 +1,305 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that outerHTML editing keybindings work as expected and that *special*
+// elements like <html>, <body> and <head> can be edited correctly.
+
+const TEST_URL =
+  "data:text/html," +
+  "<!DOCTYPE html>" +
+  "<head><meta charset='utf-8' /></head>" +
+  "<body>" +
+  '<div id="keyboard"></div>' +
+  "</body>" +
+  "</html>";
+const SELECTOR = "#keyboard";
+const OLD_HTML = '<div id="keyboard"></div>';
+const NEW_HTML = '<div id="keyboard">Edited</div>';
+
+requestLongerTimeout(2);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  inspector.markup._frame.focus();
+
+  info("Check that pressing escape cancels edits");
+  await testEscapeCancels(inspector);
+
+  info("Check that pressing F2 commits edits");
+  await testF2Commits(inspector);
+
+  info("Check that editing the <body> element works like other nodes");
+  await testBody(inspector);
+
+  info("Check that editing the <head> element works like other nodes");
+  await testHead(inspector);
+
+  info("Check that editing the <html> element works like other nodes");
+  await testDocumentElement(inspector);
+
+  info("Check (again) that editing the <html> element works like other nodes");
+  await testDocumentElement2(inspector);
+});
+
+async function testEscapeCancels(inspector) {
+  await selectNode(SELECTOR, inspector);
+
+  const onHtmlEditorCreated = once(inspector.markup, "begin-editing");
+  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  await onHtmlEditorCreated;
+  ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+
+  is(
+    await getContentPageElementProperty(SELECTOR, "outerHTML"),
+    OLD_HTML,
+    "The node is starting with old HTML."
+  );
+
+  inspector.markup.htmlEditor.editor.setText(NEW_HTML);
+
+  const onEditorHiddem = once(inspector.markup.htmlEditor, "popuphidden");
+  EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
+  await onEditorHiddem;
+  ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+
+  is(
+    await getContentPageElementProperty(SELECTOR, "outerHTML"),
+    OLD_HTML,
+    "Escape cancels edits"
+  );
+}
+
+async function testF2Commits(inspector) {
+  const onEditorShown = once(inspector.markup.htmlEditor, "popupshown");
+  inspector.markup._frame.contentDocument.documentElement.focus();
+  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  await onEditorShown;
+  ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+
+  is(
+    await getContentPageElementProperty(SELECTOR, "outerHTML"),
+    OLD_HTML,
+    "The node is starting with old HTML."
+  );
+
+  const onMutations = inspector.once("markupmutation");
+  inspector.markup.htmlEditor.editor.setText(NEW_HTML);
+  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  await onMutations;
+
+  ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+
+  is(
+    await getContentPageElementProperty(SELECTOR, "outerHTML"),
+    NEW_HTML,
+    "F2 commits edits - the node has new HTML."
+  );
+}
+
+async function testBody(inspector) {
+  const currentBodyHTML = await getContentPageElementProperty(
+    "body",
+    "outerHTML"
+  );
+  const bodyHTML = '<body id="updated"><p></p></body>';
+  const bodyFront = await getNodeFront("body", inspector);
+
+  const onUpdated = inspector.once("inspector-updated");
+  const onReselected = inspector.markup.once("reselectedonremoved");
+  await inspector.markup.updateNodeOuterHTML(
+    bodyFront,
+    bodyHTML,
+    currentBodyHTML
+  );
+  await onReselected;
+  await onUpdated;
+
+  const newBodyHTML = await getContentPageElementProperty("body", "outerHTML");
+  is(newBodyHTML, bodyHTML, "<body> HTML has been updated");
+
+  const headsNum = await getNumberOfMatchingElementsInContentPage("head");
+  is(headsNum, 1, "no extra <head>s have been added");
+}
+
+async function testHead(inspector) {
+  await selectNode("head", inspector);
+
+  const currentHeadHTML = await getContentPageElementProperty(
+    "head",
+    "outerHTML"
+  );
+  const headHTML =
+    '<head id="updated"><title>New Title</title>' +
+    '<script>window.foo="bar";</script></head>';
+  const headFront = await getNodeFront("head", inspector);
+
+  const onUpdated = inspector.once("inspector-updated");
+  const onReselected = inspector.markup.once("reselectedonremoved");
+  await inspector.markup.updateNodeOuterHTML(
+    headFront,
+    headHTML,
+    currentHeadHTML
+  );
+  await onReselected;
+  await onUpdated;
+
+  is(await getDocumentTitle(), "New Title", "New title has been added");
+  is(await getWindowFoo(), undefined, "Script has not been executed");
+  is(
+    await getContentPageElementProperty("head", "outerHTML"),
+    headHTML,
+    "<head> HTML has been updated"
+  );
+  is(
+    await getNumberOfMatchingElementsInContentPage("body"),
+    1,
+    "no extra <body>s have been added"
+  );
+}
+
+async function testDocumentElement(inspector) {
+  const currentDocElementOuterHMTL = await getDocumentOuterHTML();
+  const docElementHTML =
+    '<html id="updated" foo="bar"><head>' +
+    "<title>Updated from document element</title>" +
+    '<script>window.foo="bar";</script></head><body>' +
+    "<p>Hello</p></body></html>";
+  const docElementFront = await inspector.markup.walker.documentElement();
+
+  const onReselected = inspector.markup.once("reselectedonremoved");
+  await inspector.markup.updateNodeOuterHTML(
+    docElementFront,
+    docElementHTML,
+    currentDocElementOuterHMTL
+  );
+  await onReselected;
+
+  is(
+    await getDocumentTitle(),
+    "Updated from document element",
+    "New title has been added"
+  );
+  is(await getWindowFoo(), undefined, "Script has not been executed");
+  is(
+    await getContentPageElementAttribute("html", "id"),
+    "updated",
+    "<html> ID has been updated"
+  );
+  is(
+    await getContentPageElementAttribute("html", "class"),
+    null,
+    "<html> class has been updated"
+  );
+  is(
+    await getContentPageElementAttribute("html", "foo"),
+    "bar",
+    "<html> attribute has been updated"
+  );
+  is(
+    await getContentPageElementProperty("html", "outerHTML"),
+    docElementHTML,
+    "<html> HTML has been updated"
+  );
+  is(
+    await getNumberOfMatchingElementsInContentPage("head"),
+    1,
+    "no extra <head>s have been added"
+  );
+  is(
+    await getNumberOfMatchingElementsInContentPage("body"),
+    1,
+    "no extra <body>s have been added"
+  );
+  is(
+    await getContentPageElementProperty("body", "textContent"),
+    "Hello",
+    "document.body.textContent has been updated"
+  );
+}
+
+async function testDocumentElement2(inspector) {
+  const currentDocElementOuterHMTL = await getDocumentOuterHTML();
+  const docElementHTML =
+    '<html id="somethingelse" class="updated"><head>' +
+    "<title>Updated again from document element</title>" +
+    '<script>window.foo="bar";</script></head><body>' +
+    "<p>Hello again</p></body></html>";
+  const docElementFront = await inspector.markup.walker.documentElement();
+
+  const onReselected = inspector.markup.once("reselectedonremoved");
+  inspector.markup.updateNodeOuterHTML(
+    docElementFront,
+    docElementHTML,
+    currentDocElementOuterHMTL
+  );
+  await onReselected;
+
+  is(
+    await getDocumentTitle(),
+    "Updated again from document element",
+    "New title has been added"
+  );
+  is(await getWindowFoo(), undefined, "Script has not been executed");
+  is(
+    await getContentPageElementAttribute("html", "id"),
+    "somethingelse",
+    "<html> ID has been updated"
+  );
+  is(
+    await getContentPageElementAttribute("html", "class"),
+    "updated",
+    "<html> class has been updated"
+  );
+  is(
+    await getContentPageElementAttribute("html", "foo"),
+    null,
+    "<html> attribute has been removed"
+  );
+  is(
+    await getContentPageElementProperty("html", "outerHTML"),
+    docElementHTML,
+    "<html> HTML has been updated"
+  );
+  is(
+    await getNumberOfMatchingElementsInContentPage("head"),
+    1,
+    "no extra <head>s have been added"
+  );
+  is(
+    await getNumberOfMatchingElementsInContentPage("body"),
+    1,
+    "no extra <body>s have been added"
+  );
+  is(
+    await getContentPageElementProperty("body", "textContent"),
+    "Hello again",
+    "document.body.textContent has been updated"
+  );
+}
+
+function getDocumentTitle() {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.document.title
+  );
+}
+
+function getDocumentOuterHTML() {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.document.documentElement.outerHTML
+  );
+}
+
+function getWindowFoo() {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.wrappedJSObject.foo
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_html_edit_04.js b/devtools/client/inspector/markup/test/browser_markup_html_edit_04.js
new file mode 100644
index 0000000000..be56b47368
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_04.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that outerHTML editing keybindings work as expected and that the <svg>
+// root element can be edited correctly.
+
+const TEST_URL =
+  "data:image/svg+xml," +
+  '<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">' +
+  '<circle cx="50" cy="50" r="50"/>' +
+  "</svg>";
+
+requestLongerTimeout(2);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  inspector.markup._frame.focus();
+
+  info("Check that editing the <svg> element works like other nodes");
+  await testDocumentElement(inspector);
+
+  info("Check (again) that editing the <svg> element works like other nodes");
+  await testDocumentElement2(inspector);
+});
+
+async function testDocumentElement(inspector) {
+  const currentDocElementOuterHTML = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.document.documentElement.outerHTML
+  );
+  const docElementSVG =
+    '<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">' +
+    '<rect x="10" y="10" width="180" height="180"/>' +
+    "</svg>";
+  const docElementFront = await inspector.markup.walker.documentElement();
+
+  const onReselected = inspector.markup.once("reselectedonremoved");
+  await inspector.markup.updateNodeOuterHTML(
+    docElementFront,
+    docElementSVG,
+    currentDocElementOuterHTML
+  );
+  await onReselected;
+
+  is(
+    await getContentPageElementAttribute("svg", "width"),
+    "200",
+    "<svg> width has been updated"
+  );
+  is(
+    await getContentPageElementAttribute("svg", "height"),
+    "200",
+    "<svg> height has been updated"
+  );
+  is(
+    await getContentPageElementProperty("svg", "outerHTML"),
+    docElementSVG,
+    "<svg> markup has been updated"
+  );
+}
+
+async function testDocumentElement2(inspector) {
+  const currentDocElementOuterHTML = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.document.documentElement.outerHTML
+  );
+  const docElementSVG =
+    '<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">' +
+    '<ellipse cx="150" cy="150" rx="150" ry="100"/>' +
+    "</svg>";
+  const docElementFront = await inspector.markup.walker.documentElement();
+
+  const onReselected = inspector.markup.once("reselectedonremoved");
+  inspector.markup.updateNodeOuterHTML(
+    docElementFront,
+    docElementSVG,
+    currentDocElementOuterHTML
+  );
+  await onReselected;
+
+  is(
+    await getContentPageElementAttribute("svg", "width"),
+    "300",
+    "<svg> width has been updated"
+  );
+  is(
+    await getContentPageElementAttribute("svg", "height"),
+    "300",
+    "<svg> height has been updated"
+  );
+  is(
+    await getContentPageElementProperty("svg", "outerHTML"),
+    docElementSVG,
+    "<svg> markup has been updated"
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_html_edit_undo-redo.js b/devtools/client/inspector/markup/test/browser_markup_html_edit_undo-redo.js
new file mode 100644
index 0000000000..6f76d524d8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_undo-redo.js
@@ -0,0 +1,88 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the undo/redo stack is correctly cleared when opening the HTML editor on a
+// new node. Bug 1327674.
+
+const DIV1_HTML = '<div id="d1">content1</div>';
+const DIV2_HTML = '<div id="d2">content2</div>';
+const DIV2_HTML_UPDATED = '<div id="d2">content2_updated</div>';
+
+const TEST_URL =
+  "data:text/html," +
+  "<!DOCTYPE html>" +
+  "<head><meta charset='utf-8' /></head>" +
+  "<body>" +
+  DIV1_HTML +
+  DIV2_HTML +
+  "</body>" +
+  "</html>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  inspector.markup._frame.focus();
+
+  await selectNode("#d1", inspector);
+
+  info("Open the HTML editor on node #d1");
+  let onHtmlEditorCreated = once(inspector.markup, "begin-editing");
+  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  await onHtmlEditorCreated;
+
+  ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+  is(
+    inspector.markup.htmlEditor.editor.getText(),
+    DIV1_HTML,
+    "The editor content for d1 is correct."
+  );
+
+  info("Hide the HTML editor for #d1");
+  let onEditorHidden = once(inspector.markup.htmlEditor, "popuphidden");
+  EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
+  await onEditorHidden;
+  ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+
+  await selectNode("#d2", inspector);
+
+  info("Open the HTML editor on node #d2");
+  onHtmlEditorCreated = once(inspector.markup, "begin-editing");
+  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  await onHtmlEditorCreated;
+
+  ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+  is(
+    inspector.markup.htmlEditor.editor.getText(),
+    DIV2_HTML,
+    "The editor content for d2 is correct."
+  );
+
+  inspector.markup.htmlEditor.editor.setText(DIV2_HTML_UPDATED);
+  is(
+    inspector.markup.htmlEditor.editor.getText(),
+    DIV2_HTML_UPDATED,
+    "The editor content for d2 is updated."
+  );
+
+  inspector.markup.htmlEditor.editor.undo();
+  is(
+    inspector.markup.htmlEditor.editor.getText(),
+    DIV2_HTML,
+    "The editor content for d2 is reverted."
+  );
+
+  inspector.markup.htmlEditor.editor.undo();
+  is(
+    inspector.markup.htmlEditor.editor.getText(),
+    DIV2_HTML,
+    "The editor content for d2 has not been set to content1."
+  );
+
+  info("Hide the HTML editor for #d2");
+  onEditorHidden = once(inspector.markup.htmlEditor, "popuphidden");
+  EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
+  await onEditorHidden;
+  ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_iframe_blocked_by_csp.js b/devtools/client/inspector/markup/test/browser_markup_iframe_blocked_by_csp.js
new file mode 100644
index 0000000000..559919f2ef
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_iframe_blocked_by_csp.js
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that iframe blocked because of CSP doesn't cause the browser to freeze.
+
+const IFRAME_TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(`
+  <h1>Test expanding CSP-blocked iframe</h1>
+  <iframe src="https://example.org/document-builder.sjs?html=HelloIframe"></iframe>
+`)}&headers=content-security-policy:default-src 'self'`;
+const FRAME_TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(`
+  <frameset>
+    <frame src="https://example.org/document-builder.sjs?html=HelloFrame"></frame>
+  </frameset>
+`)}&headers=content-security-policy:default-src 'self'`;
+
+const BYPASS_WALKERFRONT_CHILDREN_IFRAME_GUARD_PREF =
+  "devtools.testing.bypass-walker-children-iframe-guard";
+
+add_task(async function () {
+  await pushPref(BYPASS_WALKERFRONT_CHILDREN_IFRAME_GUARD_PREF, true);
+  const { inspector } = await openInspectorForURL(IFRAME_TEST_URI);
+  await testElementBlockedByCSP("iframe", inspector);
+
+  // Don't wait for the load event as it doesn't happen because the frame is blocked.
+  await navigateTo(FRAME_TEST_URI, { waitForLoad: false });
+  await testElementBlockedByCSP("frame", inspector);
+});
+
+async function testElementBlockedByCSP(selector, inspector) {
+  await inspector.markup.expandAll();
+  info(`Check that markup node for "${selector}" can't be expanded`);
+  let container = await getContainerForSelector(selector, inspector);
+
+  is(
+    container.expander.style.visibility,
+    "hidden",
+    "Expand icon is hidden, even without the safe guard in WalkerFront#children"
+  );
+
+  info("Reload the page and do same assertion with the guard");
+  Services.prefs.clearUserPref(BYPASS_WALKERFRONT_CHILDREN_IFRAME_GUARD_PREF);
+  await reloadBrowser();
+
+  await inspector.markup.expandAll();
+  container = await getContainerForSelector(selector, inspector);
+  is(
+    container.expander.style.visibility,
+    "hidden",
+    "Expand icon is still hidden"
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
new file mode 100644
index 0000000000..f4a45c5079
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that image preview tooltips are shown on img and canvas tags in the
+// markup-view and that the tooltip actually contains an image and shows the
+// right dimension label
+
+const TEST_NODES = [
+  { selector: "img.local", size: "192" + " \u00D7 " + "192" },
+  { selector: "img.data", size: "64" + " \u00D7 " + "64" },
+  { selector: "img.remote", size: "22" + " \u00D7 " + "23" },
+  { selector: ".canvas", size: "600" + " \u00D7 " + "600" },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
+  const { inspector } = await openInspector();
+
+  info("Selecting the first <img> tag");
+  await selectNode("img", inspector);
+
+  for (const testNode of TEST_NODES) {
+    const target = await getImageTooltipTarget(testNode, inspector);
+    await assertTooltipShownOnHover(
+      inspector.markup.imagePreviewTooltip,
+      target
+    );
+    checkImageTooltip(testNode, inspector);
+    await assertTooltipHiddenOnMouseOut(
+      inspector.markup.imagePreviewTooltip,
+      target
+    );
+  }
+});
+
+async function getImageTooltipTarget({ selector }, inspector) {
+  const nodeFront = await getNodeFront(selector, inspector);
+  const isImg = nodeFront.tagName.toLowerCase() === "img";
+
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  let target = container.editor.tag;
+  if (isImg) {
+    target = container.editor.getAttributeElement("src").querySelector(".link");
+  }
+  return target;
+}
+
+function checkImageTooltip({ selector, size }, { markup }) {
+  const panel = markup.imagePreviewTooltip.panel;
+  const images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip for [" + selector + "] contains an image");
+
+  const label = panel.querySelector(".devtools-tooltip-caption");
+  is(
+    label.textContent,
+    size,
+    "Tooltip label for [" + selector + "] displays the right image size"
+  );
+
+  markup.imagePreviewTooltip.hide();
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js b/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
new file mode 100644
index 0000000000..3a2cc358a7
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that image preview tooltip shows updated content when the image src
+// changes.
+
+// prettier-ignore
+const INITIAL_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADI5JREFUeNrsWwuQFNUVPf1m5z87szv7HWSWj8CigBFMEFZKiQsB1PgJwUAZg1HBpIQsKmokEhNjWUnFVPnDWBT+KolJYbRMoqUVq0yCClpqiX8sCchPWFwVlt2db7+X93pez7zu6Vn2NxsVWh8987p7pu+9555z7+tZjTGGY3kjOMa34w447oBjfKsY7i/UNM3Y8eFSAkD50Plgw03K5P9gvGv7U5ieeR3PszeREiPNX3/0DL4hjslzhm8THh+OITfXk3dhiv4GDtGPVzCaeJmPLYzuu5qJuWfuw2QTlcN1X9pwQU7LhdZ/ZAseD45cOh9hHvDkc/yAF/DNhdb5Mrr3PvBMaAYW8fMSIi2G497IMEK/YutGtAYr6+ej+nxu/NN8Ks3N7AR6HgcLz0Eg1Ljg1UcxZzi5qewIkMYLRweTr2Kzp+nmyXAd5pS3XQDd+N/4h4zgu9FI7brlXf90nMEnuwQxlvv+hosE3TuexmWeysmT4W+WxkMaLzf9Y8ATgjcUn7T9H1gqrpFq8eV1gMn6t16NhngjfoX6q4DUP032Rd4LJgpSLwJ1yzFqBG69eRkah0MVyo0Acfe+yy9AG4nMiYCkeM53KKFXncBLAXqEm+wCqZwaueq7WCmuLTcKSJmj737ol2hurA9eq9VdyiO8yWa3NNyog+SB5CZodSsQq/dfu34tJpYbBaTMzvVddDZu16q5smXf4G8zEvqm4cyaAmJPuTJk3oJWdS4WzcVtfMZbThSQckb/pYfRGgo3zNOqZnEHbJPGK4abaDCQIIsT8V/qTaBqHkLh6LzXH8XZQhbLhYKyyCC/WeHYcNdmvOgfe8skzbWL270/T3wf7tSx/lGCbTu8xlzzmCSWLc5iwmgikcCHi3Mga0Ry913vBFvQwg90l6M4ImWKfsWOp7DSWxmfpPlCFuPFfsNfKrCnPYpQKIRgqBK7D0SxYaNHwkEiJMtl0ReDp3Lc5D3PGoTo/sKngCl7a5chFqvBatKwjBd7WwqIlzB/78NcoUcp5VSgGxm+7b8eqQRGnHMO634epO4S1EZww09/iFg5UmGoESDuznP1xVhTUX1WWHPzjpd25wyH0hRxI3LGM75nxmuNEEUVpAN0XgxmPoKralakbQnWlIMQyVBD/w+3orkq4lvualjKyWwzt4MaxqspQHVhPOWG64bxYuhZXSFGWhipbSDVragOu5Y9eAsmDDUKyBA703vemVhHoueD6e9wAzJK1WfmN0Umk5GGM4kEMZcuIECqgjm0nldAqmbjwtm4VxZH5AvlADP6mx9Eqy9Q0+KqW8Ch+47FaMMYmnNGfY1iPMshoC6qFxme4wQ+0p+ARE6H3+9veWEDWgUhDhUKyFARn4jM5BNxT0XsMg7bfymGK1ov3wtjDfhL4w0HVGUVBEjDaaE+QNdrcNWch1PG4W6xrjBUXECGivg++Cva3JUT4iQUz3V2RsSVaKLwOuDT89A3HdBQoxhNC+fnVm74ual2EG893P6G+PuP4SfiO4cCBWQooL9qCWKNXPbcI37Aa/lnlZxXRt4RFONGwSDCPAHqOuqjWct1QiEMw5mChM5X4K47FyNqcd3aK9AwFH0CGYLoe1ctxk2eWi57rg5JfGp9rzC6ggCdFlAgHBDw5Yxlcg6G8SyHCjMlsgmDD9zhSeHlF+JnAgWDTQUy2NxfdwOao1UVV3pi3+bE97YSbWpLAbn6zefHNQkp1PMpIBwwvslKgIYTKM2nEpNzrGcH3FXTEal0L38kJ4uDQgEZbO4vnI173LXf5NHZaiUxtaCxyZuo/rK6LpUg54yg3zTWRAArvDcRIPZ6BqzrQ1REpmL+DNw32OKIDCb3X1qPVn8wNNMT4w2bvs+q4bAZrqBh2skaL3yyhhIIZ4i6oHkUK0RckcB8GigEyRIH4A6Mgc8fatl0/+BkkQxC9gIT4ljna1rIZW9rEdNbjJcNjsnoYj7LHWCUwpITzEgzRQKZ3XAFHbTzA3hrz8TEUUZxFBhoKpABQt/97p+w0hMZG68I8R6FtlsJT3FELndZntjM+VMnylKYq8GJI3UZaRMpquGSGFVOEfv0YZBMNzz+uvjbfzS6xQERIhlI9FcvQWNdFVb7x1zCb+QNK8vb9NsiifmI5hBgVoOCBC1sb0ab5RomqENxLO3eA1/0NDRU47q2RQNbRCUDIb7lF2CNL3ZGxEV4n08TVvZWYG4pZyV0zUdS45tyCBByOHWiyvZmxFXDCyRo1ge5+Sy0TA+8lWMiP/6O0S32exGV9Jf4fr8azdUR3zL/CZz4MtvzdX5uOYs6NDOmpkuj5Huh+7qUQSYl0ThHzw0YQzcGo6bhzEqoYq5rN3yRiYiG3Vfe2Ybm/qKA9NNZ3nNm4F7/yDkg9AN+U1mHiBcXP8zuDN76jj8hg1QyiWQigalj02BJPhK8I0zxijAjhp5zhlpLUDvS+BCy2HMAvvB4XDgL9/SXC0g/ou/5+6/xLX8w0uJrOIkXfPvyhY0F6gr7M8H0KWFYikcqAXakB+xwD9CdREBLoau7Gz3cAdSIdLFxFtJTCqRChSjnutvhDcREtzjz2Tswtz+yeNRFUeXZXtWux7C1fuoVcbd3J//ipDX3uZZDLGrwweS+UBLL5TDliVBnF8P7H+XI8aRRGsIBJg/Zlslt1+W+D1JWoSyi+kD9jfhs78t7mhZhSl+fLfY1Bdyv3I8V/qpY3B1McgN7ZFT5/vNO0I5DPLLdPBIJA8qc4h2I0QplYfDpJwHT+aj0246r5S8rToG8OjCle8wk4OLvvYGa+Ovr84uo2qBSwJS9G5egoZFLTfiEqWDtbwGfHgKOdPHcS+ai7XDzMPW/FJRLGGcxnBbK4YJC2K+h+T6Bdu5CqHqCWERd3bawb7JI+iJ735+LNaHaprBLLHBm08U3XxShEsdt+f3eTh3v7aC95Dct4RCWL5OZWh/oXBZThxAIxyOXLzBk8aiEWJID8rK3CpPOmeHaGpvCS+7EHv5FujVHUSJPLXvIFeHcNc+9xrB2gws9KZdxuLFax/WLM5gzzSm/lTXF/OdAcapyvjxPqxqHjr2v4ckX2bS2dRBrc5lSdpKjEJ9/9tdwX2WMd53ZQ2IVo3RES+UwVSpCPvYepNx4gmTGDUKIMQ4eduPnD7mx9xOn/KZKOlFbStjONxHTtR+BYAPmnoZ1Zp8wkBRwP/EL3u0F/C2hGl7vpz7vW37T3vP7if8wroKuoh8ribknX9BK5rcF+mo1qKaKyRPJTgTDjbzY8szcuLb3bpH00u35T47j7prRpwDJTxzyG0dHgxPp5bPG8VdkpfPbUg3SgoOo2mwVukb98D5EqpswZTTulCggTk4gpYhv0++wIhCJxr0+Hq1sondis0SE2oxQe3qWXwWyO4DSQg9gJ8Iiw1VFcGqXxet0N9xE4ygIxv/9W6wo9WyROEX/R+eiobYSq2vHTOR631Eiv2lRfh9dvxkumkXh92Qsx8XrAJ+7YGbWuhxOi/U+31NQmzyqNYG8N/3wfo6CRtRHcN01FzkvojohwLu0VVvDa56IS/xcj2b7nN+O+m0jqpE1wMPXZxAN9iCVThtDvH7gmiRGRpU8Lspv1Uhq4wIVdQoyuGSLNYPKUCS8+CzNURbzMmjK3i8u0U793lmuV0ef9nWQ5MGC/DiUqEUSaCtXna9RJEspZS1lrXINK/pcq+SpT50t98QKMq1FRmDfx3vxty102k0PM4ssEnvuz5+G26Ij4yDpz6z9fV8bkyIkqBFkhej0Ib+ZQ34XJK9AfozaiimqIoX3Jp3tiISrcfYpuN2+iFph/02P36PNC9fVcCnp6H9jYouKyfaWufz5Tp9tVxcUniw7IohZv4dZz81/ns67z3AYPrc2n0+Ix2q8k0PWjgBy88XaibnfK9A+5LdDY2Ivhy36fbT8Zv3Lb1U1qLqUxorXEEXIs0mjjrtxoTZWtdvigNs2sgPiujTv6DIZLld6b/V5742JZV3fUsUVFy5gdsNtKWFzUCEVbNepD1MkSMVbsb6SZm7jI3/zODtQKgUMsOw8wDZ63t5xcV1TnaEAxoc6wrqY+Fj+N4DsqOnhOIdicrQSm1MPYCPlIqHn5bbHg8/bj2D3QfZnCX3mpAICDZV8jH5kpbZqTD0W+DxaA74CWzLN2nd14OlL72J38Lf7+TjC7dadZFDoZJQPrtaIKL/G0L6ktptPZVJ8fMqHYPZOKYPMyQGadIJfDvdXwAFiZOTvDBPydf5vk4rWA+RfdhBlaF/yDDBRoMu9pfnSjv/p7DG+HXfAcQcc49v/BBgAcFAO4DmB2GQAAAAASUVORK5CYII=";
+
+const UPDATED_SRC = URL_ROOT + "doc_markup_tooltip.png";
+
+const INITIAL_SRC_SIZE = "64" + " \u00D7 " + "64";
+const UPDATED_SRC_SIZE = "22" + " \u00D7 " + "23";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html,<p>markup view tooltip test</p><img>"
+  );
+
+  info("Retrieving NodeFront for the <img> element.");
+  const img = await getNodeFront("img", inspector);
+
+  info("Selecting the <img> element");
+  await selectNode(img, inspector);
+
+  info("Adding src attribute to the image.");
+  await updateImageSrc(img, INITIAL_SRC, inspector);
+
+  const container = getContainerForNodeFront(img, inspector);
+  ok(container, "Found markup container for the image.");
+
+  let target = container.editor
+    .getAttributeElement("src")
+    .querySelector(".link");
+  ok(target, "Found the src attribute in the markup view.");
+
+  info("Showing tooltip on the src link.");
+  await assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
+
+  checkImageTooltip(INITIAL_SRC_SIZE, inspector);
+
+  await assertTooltipHiddenOnMouseOut(
+    inspector.markup.imagePreviewTooltip,
+    target
+  );
+
+  info("Updating the image src.");
+  await updateImageSrc(img, UPDATED_SRC, inspector);
+
+  target = container.editor.getAttributeElement("src").querySelector(".link");
+  ok(target, "Found the src attribute in the markup view after mutation.");
+
+  info("Showing tooltip on the src link.");
+  await assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
+
+  info("Checking that the new image was shown.");
+  checkImageTooltip(UPDATED_SRC_SIZE, inspector);
+
+  await assertTooltipHiddenOnMouseOut(
+    inspector.markup.imagePreviewTooltip,
+    target
+  );
+});
+
+/**
+ * Updates the src attribute of the image. Return a Promise.
+ */
+function updateImageSrc(img, newSrc, inspector) {
+  const onMutated = inspector.once("markupmutation");
+  const onModified = img.modifyAttributes([
+    {
+      attributeName: "src",
+      newValue: newSrc,
+    },
+  ]);
+
+  return Promise.all([onMutated, onModified]);
+}
+
+/**
+ * Checks that the markup view tooltip contains an image element with the given
+ * size.
+ */
+function checkImageTooltip(size, { markup }) {
+  const panel = markup.imagePreviewTooltip.panel;
+  const images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+
+  const label = panel.querySelector(".devtools-tooltip-caption");
+  is(label.textContent, size, "Tooltip label displays the right image size");
+
+  markup.imagePreviewTooltip.hide();
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_keybindings_01.js b/devtools/client/inspector/markup/test/browser_markup_keybindings_01.js
new file mode 100644
index 0000000000..9488670d3c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_01.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Tests tabbing through attributes on a node
+
+const TEST_URL = "data:text/html;charset=utf8,<div id='test' a b c d e></div>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Focusing the tag editor of the test element");
+  const { editor } = await focusNode("div", inspector);
+  editor.tag.focus();
+
+  info("Pressing tab and expecting to focus the ID attribute, always first");
+  EventUtils.sendKey("tab", inspector.panelWin);
+  checkFocusedAttribute("id");
+
+  info("Hit enter to turn the attribute to edit mode");
+  EventUtils.sendKey("return", inspector.panelWin);
+  checkFocusedAttribute("id", true);
+
+  // Check the order of the other attributes in the DOM to the check they appear
+  // correctly in the markup-view
+  const attributes = (await getAttributesFromEditor("div", inspector)).slice(1);
+
+  info("Tabbing forward through attributes in edit mode");
+  for (const attribute of attributes) {
+    collapseSelectionAndTab(inspector);
+    checkFocusedAttribute(attribute, true);
+  }
+
+  info("Tabbing backward through attributes in edit mode");
+
+  // Just reverse the attributes other than id and remove the first one since
+  // it's already focused now.
+  const reverseAttributes = attributes.reverse();
+  reverseAttributes.shift();
+
+  for (const attribute of reverseAttributes) {
+    collapseSelectionAndShiftTab(inspector);
+    checkFocusedAttribute(attribute, true);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_keybindings_02.js b/devtools/client/inspector/markup/test/browser_markup_keybindings_02.js
new file mode 100644
index 0000000000..8b82a83aee
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_02.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that pressing ESC when a node in the markup-view is focused toggles
+// the split-console (see bug 988278)
+
+const TEST_URL = "data:text/html;charset=utf8,<div></div>";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Focusing the tag editor of the test element");
+  const { editor } = await getContainerForSelector("div", inspector);
+  editor.tag.focus();
+
+  info("Pressing ESC and wait for the split-console to open");
+  let onSplitConsole = toolbox.once("split-console");
+  const onConsoleReady = toolbox.once("webconsole-ready");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, inspector.panelWin);
+  await onSplitConsole;
+  await onConsoleReady;
+  ok(toolbox.splitConsole, "The split console is shown.");
+
+  info("Pressing ESC again and wait for the split-console to close");
+  onSplitConsole = toolbox.once("split-console");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, inspector.panelWin);
+  await onSplitConsole;
+  ok(!toolbox.splitConsole, "The split console is hidden.");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_keybindings_03.js b/devtools/client/inspector/markup/test/browser_markup_keybindings_03.js
new file mode 100644
index 0000000000..db918defd6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_03.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that selecting a node with the mouse (by clicking on the line) focuses
+// the first focusable element in the corresponding MarkupContainer so that the
+// keyboard can be used immediately.
+
+const TEST_URL = `data:text/html;charset=utf8,
+                  <div class='test-class'></div>Text node`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { walker } = inspector;
+
+  info("Select the test node to have the 2 test containers visible");
+  await selectNode("div", inspector);
+
+  const divFront = await walker.querySelector(walker.rootNode, "div");
+  const textFront = await walker.nextSibling(divFront);
+
+  info("Click on the MarkupContainer element for the text node");
+  await clickContainer(textFront, inspector);
+  is(
+    inspector.markup.doc.activeElement,
+    getContainerForNodeFront(textFront, inspector).editor.textNode.valuePreRef
+      .current,
+    "The currently focused element is the node's text content"
+  );
+
+  info("Click on the MarkupContainer element for the <div> node");
+  await clickContainer(divFront, inspector);
+  is(
+    inspector.markup.doc.activeElement,
+    getContainerForNodeFront(divFront, inspector).editor.tag,
+    "The currently focused element is the div's tagname"
+  );
+
+  info("Click on the test-class attribute, to make sure it gets focused");
+  const editor = getContainerForNodeFront(divFront, inspector).editor;
+  const attributeEditor = editor.attrElements
+    .get("class")
+    .querySelector(".editable");
+
+  const onFocus = once(attributeEditor, "focus");
+  EventUtils.synthesizeMouseAtCenter(
+    attributeEditor,
+    { type: "mousedown" },
+    inspector.markup.doc.defaultView
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    attributeEditor,
+    { type: "mouseup" },
+    inspector.markup.doc.defaultView
+  );
+  await onFocus;
+
+  is(
+    inspector.markup.doc.activeElement,
+    attributeEditor,
+    "The currently focused element is the div's class attribute"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_keybindings_04.js b/devtools/client/inspector/markup/test/browser_markup_keybindings_04.js
new file mode 100644
index 0000000000..078fc571a8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_04.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Tests that selecting a node using the browser context menu (inspect element)
+// or the element picker focuses that node so that the keyboard can be used
+// immediately.
+
+const TEST_URL = "data:text/html;charset=utf8,<div>test element</div>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select the test node with the browser ctx menu");
+  await clickOnInspectMenuItem("div");
+  assertNodeSelected(inspector, "div");
+
+  info(
+    "Press arrowUp to focus <body> " +
+      "(which works if the node was focused properly)"
+  );
+  await selectPreviousNodeWithArrowUp(inspector);
+  assertNodeSelected(inspector, "body");
+
+  info("Select the test node with the element picker");
+  await selectWithElementPicker(inspector);
+  assertNodeSelected(inspector, "div");
+
+  info(
+    "Press arrowUp to focus <body> " +
+      "(which works if the node was focused properly)"
+  );
+  await selectPreviousNodeWithArrowUp(inspector);
+  assertNodeSelected(inspector, "body");
+});
+
+function assertNodeSelected(inspector, tagName) {
+  is(
+    inspector.selection.nodeFront.tagName.toLowerCase(),
+    tagName,
+    `The <${tagName}> node is selected`
+  );
+}
+
+function selectPreviousNodeWithArrowUp(inspector) {
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  const onNodeHighlighted = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  const onUpdated = inspector.once("inspector-updated");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  return Promise.all([onUpdated, onNodeHighlighted]);
+}
+
+async function selectWithElementPicker(inspector) {
+  await startPicker(inspector.toolbox);
+
+  await safeSynthesizeMouseEventAtCenterInContentPage(
+    "div",
+    {
+      type: "mousemove",
+    },
+    gBrowser.selectedBrowser
+  );
+
+  BrowserTestUtils.synthesizeKey("KEY_Enter", {}, gBrowser.selectedBrowser);
+  await inspector.once("inspector-updated");
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js b/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
new file mode 100644
index 0000000000..ffa5e9d86c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that attributes can be deleted from the markup-view with the delete key
+// when they are focused.
+
+const HTML = '<div id="id" class="class" data-id="id"></div>';
+const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+// List of all the test cases. Each item is an object with the following props:
+// - selector: the css selector of the node that should be selected
+// - attribute: the name of the attribute that should be focused. Do not
+//   specify an attribute that would make it impossible to find the node using
+//   selector.
+// Note that after each test case, undo is called.
+const TEST_DATA = [
+  {
+    selector: "#id",
+    attribute: "class",
+  },
+  {
+    selector: "#id",
+    attribute: "data-id",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { walker } = inspector;
+
+  for (const { selector, attribute } of TEST_DATA) {
+    info("Get the container for node " + selector);
+    const { editor } = await getContainerForSelector(selector, inspector);
+
+    info("Focus attribute " + attribute);
+    const attr = editor.attrElements.get(attribute).querySelector(".editable");
+    attr.focus();
+
+    info("Delete the attribute by pressing delete");
+    const mutated = inspector.once("markupmutation");
+    EventUtils.sendKey("delete", inspector.panelWin);
+    await mutated;
+
+    info("Check that the node is still here");
+    let node = await walker.querySelector(walker.rootNode, selector);
+    ok(node, "The node hasn't been deleted");
+
+    info("Check that the attribute has been deleted");
+    node = await walker.querySelector(
+      walker.rootNode,
+      selector + "[" + attribute + "]"
+    );
+    ok(!node, "The attribute does not exist anymore in the DOM");
+    ok(
+      !editor.attrElements.get(attribute),
+      "The attribute has been removed from the container"
+    );
+
+    info("Undo the change");
+    await undoChange(inspector);
+    node = await walker.querySelector(
+      walker.rootNode,
+      selector + "[" + attribute + "]"
+    );
+    ok(node, "The attribute is back in the DOM");
+    ok(
+      editor.attrElements.get(attribute),
+      "The attribute is back on the container"
+    );
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_keybindings_scrolltonode.js b/devtools/client/inspector/markup/test/browser_markup_keybindings_scrolltonode.js
new file mode 100644
index 0000000000..faf8bc575c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_scrolltonode.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the keyboard shortcut "S" used to scroll to the selected node.
+
+const HTML = `<div style="width: 300px; height: 3000px; position:relative;">
+    <div id="scroll-top"
+      style="height: 50px; top: 0; position:absolute;">
+      TOP</div>
+    <div id="scroll-bottom"
+      style="height: 50px; bottom: 0; position:absolute;">
+      BOTTOM</div>
+  </div>`;
+const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Make sure the markup frame has the focus");
+  inspector.markup._frame.focus();
+
+  info("Before test starts, #scroll-top is visible, #scroll-bottom is hidden");
+  await checkElementIsInViewport("#scroll-top", true);
+  await checkElementIsInViewport("#scroll-bottom", false);
+
+  info("Select the #scroll-bottom node");
+  await selectNode("#scroll-bottom", inspector);
+  info("Press S to scroll to the bottom node");
+  let waitForScroll = BrowserTestUtils.waitForContentEvent(
+    gBrowser.selectedBrowser,
+    "scroll"
+  );
+  await EventUtils.synthesizeKey("S", {}, inspector.panelWin);
+  await waitForScroll;
+  ok(true, "Scroll event received");
+
+  info("#scroll-top should be scrolled out, #scroll-bottom should be visible");
+  await checkElementIsInViewport("#scroll-top", false);
+  await checkElementIsInViewport("#scroll-bottom", true);
+
+  info("Select the #scroll-top node");
+  await selectNode("#scroll-top", inspector);
+  info("Press S to scroll to the top node");
+  waitForScroll = BrowserTestUtils.waitForContentEvent(
+    gBrowser.selectedBrowser,
+    "scroll"
+  );
+  await EventUtils.synthesizeKey("S", {}, inspector.panelWin);
+  await waitForScroll;
+  ok(true, "Scroll event received");
+
+  info("#scroll-top should be visible, #scroll-bottom should be scrolled out");
+  await checkElementIsInViewport("#scroll-top", true);
+  await checkElementIsInViewport("#scroll-bottom", false);
+
+  info("Select #scroll-bottom node");
+  await selectNode("#scroll-bottom", inspector);
+  info("Press shift + S, nothing should happen due to the modifier");
+  await EventUtils.synthesizeKey("S", { shiftKey: true }, inspector.panelWin);
+
+  info("Same state, #scroll-top is visible, #scroll-bottom is scrolled out");
+  await checkElementIsInViewport("#scroll-top", true);
+  await checkElementIsInViewport("#scroll-bottom", false);
+});
+
+/**
+ * Verify that the element matching the provided selector is either in or out
+ * of the viewport, depending on the provided "expected" argument.
+ * Returns a promise that will resolve when the test has been performed.
+ *
+ * @param {String} selector
+ *        css selector for the element to test
+ * @param {Boolean} expected
+ *        true if the element is expected to be in the viewport, false otherwise
+ * @return {Promise} promise
+ */
+async function checkElementIsInViewport(selector, expected) {
+  const isInViewport = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector],
+    _selector => {
+      const node = content.document.querySelector(_selector);
+      const rect = node.getBoundingClientRect();
+      return (
+        rect.bottom >= 0 &&
+        rect.right >= 0 &&
+        rect.top <= content.innerHeight &&
+        rect.left <= content.innerWidth
+      );
+    }
+  );
+
+  is(
+    isInViewport,
+    expected,
+    selector + " in the viewport: expected to be " + expected
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_01.js b/devtools/client/inspector/markup/test/browser_markup_links_01.js
new file mode 100644
index 0000000000..503f9ee4a8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_01.js
@@ -0,0 +1,202 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that links are shown in attributes when the values (or part of the
+// values) are URIs or pointers to IDs.
+
+const TEST_URL = URL_ROOT + "doc_markup_links.html";
+
+const TEST_DATA = [
+  {
+    selector: "link",
+    attributes: [
+      {
+        attributeName: "href",
+        links: [{ type: "cssresource", value: "style.css" }],
+      },
+    ],
+  },
+  {
+    selector: "link[rel=icon]",
+    attributes: [
+      {
+        attributeName: "href",
+        links: [
+          {
+            type: "uri",
+            value: "/media/img/firefox/favicon-196.223e1bcaf067.png",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    selector: "form",
+    attributes: [
+      {
+        attributeName: "action",
+        links: [{ type: "uri", value: "/post_message" }],
+      },
+    ],
+  },
+  {
+    selector: "label[for=name]",
+    attributes: [
+      {
+        attributeName: "for",
+        links: [{ type: "idref", value: "name" }],
+      },
+    ],
+  },
+  {
+    selector: "label[for=message]",
+    attributes: [
+      {
+        attributeName: "for",
+        links: [{ type: "idref", value: "message" }],
+      },
+    ],
+  },
+  {
+    selector: "output",
+    attributes: [
+      {
+        attributeName: "form",
+        links: [{ type: "idref", value: "message-form" }],
+      },
+      {
+        attributeName: "for",
+        links: [
+          { type: "idref", value: "name" },
+          { type: "idref", value: "message" },
+          { type: "idref", value: "invalid" },
+        ],
+      },
+    ],
+  },
+  {
+    selector: "a",
+    attributes: [
+      {
+        attributeName: "href",
+        links: [{ type: "uri", value: "/go/somewhere/else" }],
+      },
+      {
+        attributeName: "ping",
+        links: [
+          { type: "uri", value: "/analytics?page=pageA" },
+          { type: "uri", value: "/analytics?user=test" },
+        ],
+      },
+    ],
+  },
+  {
+    selector: "li[contextmenu=menu1]",
+    attributes: [
+      {
+        attributeName: "contextmenu",
+        links: [{ type: "idref", value: "menu1" }],
+      },
+    ],
+  },
+  {
+    selector: "li[contextmenu=menu2]",
+    attributes: [
+      {
+        attributeName: "contextmenu",
+        links: [{ type: "idref", value: "menu2" }],
+      },
+    ],
+  },
+  {
+    selector: "li[contextmenu=menu3]",
+    attributes: [
+      {
+        attributeName: "contextmenu",
+        links: [{ type: "idref", value: "menu3" }],
+      },
+    ],
+  },
+  {
+    selector: "video",
+    attributes: [
+      {
+        attributeName: "poster",
+        links: [{ type: "uri", value: "doc_markup_tooltip.png" }],
+      },
+      {
+        attributeName: "src",
+        links: [{ type: "uri", value: "code-rush.mp4" }],
+      },
+    ],
+  },
+  {
+    selector: "script",
+    attributes: [
+      {
+        attributeName: "src",
+        links: [{ type: "jsresource", value: "lib_jquery_1.0.js" }],
+      },
+    ],
+  },
+  {
+    selector: "#invoker",
+    attributes: [
+      {
+        attributeName: "invoketarget",
+        links: [{ type: "idref", value: "invokee" }],
+      },
+    ],
+  },
+  {
+    selector: "#popover-invoker",
+    attributes: [
+      {
+        attributeName: "popovertarget",
+        links: [{ type: "idref", value: "my-popover" }],
+      },
+    ],
+  },
+];
+
+requestLongerTimeout(2);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const { selector, attributes } of TEST_DATA) {
+    info("Testing attributes on node " + selector);
+    await selectNode(selector, inspector);
+    const { editor } = await getContainerForSelector(selector, inspector);
+
+    for (const { attributeName, links } of attributes) {
+      info("Testing attribute " + attributeName);
+      const linkEls = editor.attrElements
+        .get(attributeName)
+        .querySelectorAll(".link");
+
+      is(linkEls.length, links.length, "The right number of links were found");
+
+      for (let i = 0; i < links.length; i++) {
+        const linkEl = linkEls[i];
+        const type = linkEl.dataset.type;
+
+        is(type, links[i].type, `Link ${i} has the right type`);
+        is(linkEl.textContent, links[i].value, `Link ${i} has the right value`);
+
+        const selectNodeButton = linkEl.querySelector("button.select-node");
+        if (type === "idref" || type === "idreflist") {
+          ok(selectNodeButton, `Link ${i} has an expected Select Node button`);
+        } else {
+          is(
+            selectNodeButton,
+            null,
+            `Link ${i} does not have a Select Node button`
+          );
+        }
+      }
+    }
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_02.js b/devtools/client/inspector/markup/test/browser_markup_links_02.js
new file mode 100644
index 0000000000..88de585c5e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_02.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that attributes are linkified correctly when attributes are updated
+// and created.
+
+const TEST_URL = URL_ROOT + "doc_markup_links.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Adding a contextmenu attribute to the body node");
+  await addNewAttributes("body", 'contextmenu="menu1"', inspector);
+
+  info("Checking for links in the new attribute");
+  let { editor } = await getContainerForSelector("body", inspector);
+  let linkEls = editor.attrElements
+    .get("contextmenu")
+    .querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu1", "The link has the right value");
+
+  info("Editing the contextmenu attribute on the body node");
+  const nodeMutated = inspector.once("markupmutation");
+  const attr = editor.attrElements
+    .get("contextmenu")
+    .querySelector(".editable");
+  setEditableFieldValue(attr, 'contextmenu="menu2"', inspector);
+  await nodeMutated;
+
+  info("Checking for links in the updated attribute");
+  ({ editor } = await getContainerForSelector("body", inspector));
+  linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu2", "The link has the right value");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_03.js b/devtools/client/inspector/markup/test/browser_markup_links_03.js
new file mode 100644
index 0000000000..8817c7c818
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_03.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that links appear correctly in attributes created in content.
+
+const TEST_URL = URL_ROOT + "doc_markup_links.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Adding a contextmenu attribute to the body node via the content");
+  let onMutated = inspector.once("markupmutation");
+  await setContentPageElementAttribute("body", "contextmenu", "menu1");
+  await onMutated;
+
+  info("Checking for links in the new attribute");
+  let { editor } = await getContainerForSelector("body", inspector);
+  let linkEls = editor.attrElements
+    .get("contextmenu")
+    .querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu1", "The link has the right value");
+
+  info("Editing the contextmenu attribute on the body node");
+  onMutated = inspector.once("markupmutation");
+
+  await setContentPageElementAttribute("body", "contextmenu", "menu2");
+  await onMutated;
+
+  info("Checking for links in the updated attribute");
+  ({ editor } = await getContainerForSelector("body", inspector));
+  linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu2", "The link has the right value");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_04.js b/devtools/client/inspector/markup/test/browser_markup_links_04.js
new file mode 100644
index 0000000000..fe77b4e870
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_04.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the contextual menu shows the right items when clicking on a link
+// in an attribute. Run the action to copy the link and check the clipboard.
+
+const TEST_URL = URL_ROOT + "doc_markup_links.html";
+
+const TOOLBOX_L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+// The test case array contains objects with the following properties:
+// - selector: css selector for the node to select in the inspector
+// - attributeName: name of the attribute to test
+// - popupNodeSelector: css selector for the element inside the attribute
+//   element to use as the contextual menu anchor
+// - isLinkFollowItemVisible: is the follow-link item expected to be displayed
+// - isLinkCopyItemVisible: is the copy-link item expected to be displayed
+// - linkFollowItemLabel: the expected label of the follow-link item
+// - linkCopyItemLabel: the expected label of the copy-link item
+const TEST_DATA = [
+  {
+    selector: "link",
+    attributeName: "href",
+    popupNodeSelector: ".link",
+    isLinkFollowItemVisible: true,
+    isLinkCopyItemVisible: true,
+    linkFollowItemLabel: TOOLBOX_L10N.getStr(
+      "toolbox.viewCssSourceInStyleEditor.label"
+    ),
+    linkCopyItemLabel: INSPECTOR_L10N.getStr(
+      "inspector.menu.copyUrlToClipboard.label"
+    ),
+  },
+  {
+    selector: "link[rel=icon]",
+    attributeName: "href",
+    popupNodeSelector: ".link",
+    isLinkFollowItemVisible: true,
+    isLinkCopyItemVisible: true,
+    linkFollowItemLabel: INSPECTOR_L10N.getStr(
+      "inspector.menu.openUrlInNewTab.label"
+    ),
+    linkCopyItemLabel: INSPECTOR_L10N.getStr(
+      "inspector.menu.copyUrlToClipboard.label"
+    ),
+  },
+  {
+    selector: "link",
+    attributeName: "rel",
+    popupNodeSelector: ".attr-value",
+    isLinkFollowItemVisible: false,
+    isLinkCopyItemVisible: false,
+  },
+  {
+    selector: "output",
+    attributeName: "for",
+    popupNodeSelector: ".link",
+    isLinkFollowItemVisible: true,
+    isLinkCopyItemVisible: false,
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "name"
+    ),
+  },
+  {
+    selector: "script",
+    attributeName: "src",
+    popupNodeSelector: ".link",
+    isLinkFollowItemVisible: true,
+    isLinkCopyItemVisible: true,
+    linkFollowItemLabel: TOOLBOX_L10N.getStr(
+      "toolbox.viewJsSourceInDebugger.label"
+    ),
+    linkCopyItemLabel: INSPECTOR_L10N.getStr(
+      "inspector.menu.copyUrlToClipboard.label"
+    ),
+  },
+  {
+    selector: "p[for]",
+    attributeName: "for",
+    popupNodeSelector: ".attr-value",
+    isLinkFollowItemVisible: false,
+    isLinkCopyItemVisible: false,
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const test of TEST_DATA) {
+    info("Selecting test node " + test.selector);
+    await selectNode(test.selector, inspector);
+    const nodeFront = inspector.selection.nodeFront;
+
+    info("Finding the popupNode to anchor the context-menu to");
+    const { editor } = await getContainerForSelector(test.selector, inspector);
+    const popupNode = editor.attrElements
+      .get(test.attributeName)
+      .querySelector(test.popupNodeSelector);
+    ok(popupNode, "Found the popupNode in attribute " + test.attributeName);
+
+    info("Simulating a context click on the popupNode");
+    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+      target: popupNode,
+    });
+
+    const linkFollow = allMenuItems.find(i => i.id === "node-menu-link-follow");
+    const linkCopy = allMenuItems.find(i => i.id === "node-menu-link-copy");
+
+    is(
+      linkFollow.visible,
+      test.isLinkFollowItemVisible,
+      "The follow-link item display is correct"
+    );
+    is(
+      linkCopy.visible,
+      test.isLinkCopyItemVisible,
+      "The copy-link item display is correct"
+    );
+
+    if (test.isLinkFollowItemVisible) {
+      is(
+        linkFollow.label,
+        test.linkFollowItemLabel,
+        "the follow-link label is correct"
+      );
+    }
+    if (test.isLinkCopyItemVisible) {
+      is(
+        linkCopy.label,
+        test.linkCopyItemLabel,
+        "the copy-link label is correct"
+      );
+
+      info("Get link from node attribute");
+      const link = await nodeFront.getAttribute(test.attributeName);
+      info("Resolve link to absolue URL");
+      const expected = await inspector.inspectorFront.resolveRelativeURL(
+        link,
+        nodeFront
+      );
+      info("Check the clipboard to see if the correct URL was copied");
+      await waitForClipboardPromise(() => linkCopy.click(), expected);
+    }
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_05.js b/devtools/client/inspector/markup/test/browser_markup_links_05.js
new file mode 100644
index 0000000000..62d3a7d8f6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_05.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the contextual menu items shown when clicking on links in
+// attributes actually do the right things.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_links.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select a node with a URI attribute");
+  await selectNode("video", inspector);
+
+  info("Set the popupNode to the node that contains the uri");
+  let { editor } = await getContainerForSelector("video", inspector);
+  openContextMenuAndGetAllItems(inspector, {
+    target: editor.attrElements.get("poster").querySelector(".link"),
+  });
+
+  info("Follow the link and wait for the new tab to open");
+  const onTabOpened = once(gBrowser.tabContainer, "TabOpen");
+  inspector.markup.contextMenu._onFollowLink();
+  const { target: tab } = await onTabOpened;
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+
+  ok(true, "A new tab opened");
+  is(
+    tab.linkedBrowser.currentURI.spec,
+    URL_ROOT_SSL + "doc_markup_tooltip.png",
+    "The URL for the new tab is correct"
+  );
+  gBrowser.removeTab(tab);
+
+  info("Select a node with a IDREF attribute");
+  await selectNode("label", inspector);
+
+  info("Set the popupNode to the node that contains the ref");
+  ({ editor } = await getContainerForSelector("label", inspector));
+  openContextMenuAndGetAllItems(inspector, {
+    target: editor.attrElements.get("for").querySelector(".link"),
+  });
+
+  info("Follow the link and wait for the new node to be selected");
+  const onSelection = inspector.selection.once("new-node-front");
+  inspector.markup.contextMenu._onFollowLink();
+  await onSelection;
+
+  ok(true, "A new node was selected");
+  is(inspector.selection.nodeFront.id, "name", "The right node was selected");
+
+  info("Select a node with an invalid IDREF attribute");
+  await selectNode("output", inspector);
+
+  info("Set the popupNode to the node that contains the ref");
+  ({ editor } = await getContainerForSelector("output", inspector));
+  openContextMenuAndGetAllItems(inspector, {
+    target: editor.attrElements.get("for").querySelectorAll(".link")[2],
+  });
+
+  info("Try to follow the link and check that no new node were selected");
+  const onFailed = inspector.markup.once("idref-attribute-link-failed");
+  inspector.markup.contextMenu._onFollowLink();
+  await onFailed;
+
+  ok(true, "The node selection failed");
+  is(
+    inspector.selection.nodeFront.tagName.toLowerCase(),
+    "output",
+    "The <output> node is still selected"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_06.js b/devtools/client/inspector/markup/test/browser_markup_links_06.js
new file mode 100644
index 0000000000..9e546760d2
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_06.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the contextual menu items shown when clicking on linked attributes
+// for <script> and <link> tags actually open the right tools.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_links.html";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js",
+  this
+);
+
+add_task(async function () {
+  const { toolbox, inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select a node with a cssresource attribute");
+  await selectNode("link", inspector);
+
+  info("Set the popupNode to the node that contains the uri");
+  let { editor } = await getContainerForSelector("link", inspector);
+  openContextMenuAndGetAllItems(inspector, {
+    target: editor.attrElements.get("href").querySelector(".link"),
+  });
+
+  info("Follow the link and wait for the style-editor to open");
+  const onStyleEditorReady = toolbox.once("styleeditor-ready");
+  inspector.markup.contextMenu._onFollowLink();
+  await onStyleEditorReady;
+
+  // No real need to test that the editor opened on the right file here as this
+  // is already tested in /framework/test/browser_toolbox_view_source_*
+  ok(true, "The style-editor was open");
+
+  info("Switch back to the inspector");
+  await toolbox.selectTool("inspector");
+
+  info("Select a node with a jsresource attribute");
+  await selectNode("script", inspector);
+
+  info("Set the popupNode to the node that contains the uri");
+  ({ editor } = await getContainerForSelector("script", inspector));
+  openContextMenuAndGetAllItems(inspector, {
+    target: editor.attrElements.get("src").querySelector(".link"),
+  });
+
+  info("Follow the link and wait for the debugger to open");
+  inspector.markup.contextMenu._onFollowLink();
+
+  // Wait for the debugger to have fully processed the opened source
+  await toolbox.getPanelWhenReady("jsdebugger");
+  const dbg = createDebuggerContext(toolbox);
+  await waitForSelectedSource(dbg, URL_ROOT_SSL + "lib_jquery_1.0.js");
+
+  // No real need to test that the debugger opened on the right file here as
+  // this is already tested in /framework/test/browser_toolbox_view_source_*
+  ok(true, "The debugger was open");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_07.js b/devtools/client/inspector/markup/test/browser_markup_links_07.js
new file mode 100644
index 0000000000..2a86f3b1d9
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_07.js
@@ -0,0 +1,141 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a middle-click or meta/ctrl-click on links in attributes actually
+// do follows the link.
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_links.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select a node with a URI attribute");
+  await selectNode("video", inspector);
+
+  info("Find the link element from the markup-view");
+  let { editor } = await getContainerForSelector("video", inspector);
+  let linkEl = editor.attrElements.get("poster").querySelector(".link");
+
+  info("Follow the link with middle-click and wait for the new tab to open");
+  await followLinkWaitForTab(
+    linkEl,
+    false,
+    URL_ROOT_SSL + "doc_markup_tooltip.png"
+  );
+
+  info("Follow the link with meta/ctrl-click and wait for the new tab to open");
+  await followLinkWaitForTab(
+    linkEl,
+    true,
+    URL_ROOT_SSL + "doc_markup_tooltip.png"
+  );
+
+  info("Check that simple click does not open a tab");
+  const onTabOpened = once(gBrowser.tabContainer, "TabOpen");
+  const onTimeout = wait(1000).then(() => "TIMEOUT");
+  EventUtils.synthesizeMouseAtCenter(linkEl, {}, linkEl.ownerGlobal);
+  const res = await Promise.race([onTabOpened, onTimeout]);
+  is(res, "TIMEOUT", "Tab was not opened on simple click");
+
+  info("Select a node with a IDREF attribute");
+  await selectNode("label", inspector);
+
+  info("Find the link element from the markup-view that contains the ref");
+  ({ editor } = await getContainerForSelector("label", inspector));
+  linkEl = editor.attrElements.get("for").querySelector(".link");
+
+  info("Follow link with middle-click, wait for new node to be selected.");
+  await followLinkWaitForNewNode(linkEl, false, inspector);
+
+  // We have to re-select the label as the link switched the currently selected
+  // node.
+  await selectNode("label", inspector);
+
+  info("Follow link with ctrl/meta-click, wait for new node to be selected.");
+  await followLinkWaitForNewNode(linkEl, true, inspector);
+
+  info("Select a node with an invalid IDREF attribute");
+  await selectNode("output", inspector);
+
+  info("Find the link element from the markup-view that contains the ref");
+  ({ editor } = await getContainerForSelector("output", inspector));
+  linkEl = editor.attrElements.get("for").querySelectorAll(".link")[2];
+
+  info("Try to follow link wiith middle-click, check no new node selected");
+  await followLinkNoNewNode(linkEl, false, inspector);
+
+  info("Try to follow link wiith meta/ctrl-click, check no new node selected");
+  await followLinkNoNewNode(linkEl, true, inspector);
+});
+
+function performMouseDown(linkEl, metactrl) {
+  const evt = linkEl.ownerDocument.createEvent("MouseEvents");
+
+  let button = -1;
+
+  if (metactrl) {
+    info("Performing Meta/Ctrl+Left Click");
+    button = 0;
+  } else {
+    info("Performing Middle Click");
+    button = 1;
+  }
+
+  evt.initMouseEvent(
+    "mousedown",
+    true,
+    true,
+    linkEl.ownerDocument.defaultView,
+    1,
+    0,
+    0,
+    0,
+    0,
+    metactrl,
+    false,
+    false,
+    metactrl,
+    button,
+    null
+  );
+
+  linkEl.dispatchEvent(evt);
+}
+
+async function followLinkWaitForTab(linkEl, isMetaClick, expectedTabURI) {
+  const onTabOpened = once(gBrowser.tabContainer, "TabOpen");
+  performMouseDown(linkEl, isMetaClick);
+  const { target } = await onTabOpened;
+  await BrowserTestUtils.browserLoaded(target.linkedBrowser);
+  ok(true, "A new tab opened");
+  is(
+    target.linkedBrowser.currentURI.spec,
+    expectedTabURI,
+    "The URL for the new tab is correct"
+  );
+  gBrowser.removeTab(target);
+}
+
+async function followLinkWaitForNewNode(linkEl, isMetaClick, inspector) {
+  const onSelection = inspector.selection.once("new-node-front");
+  performMouseDown(linkEl, isMetaClick);
+  await onSelection;
+
+  ok(true, "A new node was selected");
+  is(inspector.selection.nodeFront.id, "name", "The right node was selected");
+}
+
+async function followLinkNoNewNode(linkEl, isMetaClick, inspector) {
+  const onFailed = inspector.markup.once("idref-attribute-link-failed");
+  performMouseDown(linkEl, isMetaClick);
+  await onFailed;
+
+  ok(true, "The node selection failed");
+  is(
+    inspector.selection.nodeFront.tagName.toLowerCase(),
+    "output",
+    "The <output> node is still selected"
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
new file mode 100644
index 0000000000..1f50ae6b88
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the contextual menu shows the right items when clicking on a link
+// in aria attributes.
+
+const TEST_URL = URL_ROOT + "doc_markup_links_aria_attributes.html";
+
+// The test case array contains objects with the following properties:
+// - selector: css selector for the node to select in the inspector
+// - attributeName: name of the attribute to test
+// - links: an array of id strings that are expected to be in the attribute
+const TEST_DATA = [
+  {
+    selector: "#aria-activedescendant",
+    attributeName: "aria-activedescendant",
+    links: ["activedescendant01"],
+  },
+  {
+    selector: "#aria-controls",
+    attributeName: "aria-controls",
+    links: ["controls01", "controls02"],
+  },
+  {
+    selector: "#aria-describedby",
+    attributeName: "aria-describedby",
+    links: ["describedby01", "describedby02"],
+  },
+  {
+    selector: "#aria-details",
+    attributeName: "aria-details",
+    links: ["details01", "details02"],
+  },
+  {
+    selector: "#aria-errormessage",
+    attributeName: "aria-errormessage",
+    links: ["errormessage01"],
+  },
+  {
+    selector: "#aria-flowto",
+    attributeName: "aria-flowto",
+    links: ["flowto01", "flowto02"],
+  },
+  {
+    selector: "#aria-labelledby",
+    attributeName: "aria-labelledby",
+    links: ["labelledby01", "labelledby02"],
+  },
+  {
+    selector: "#aria-owns",
+    attributeName: "aria-owns",
+    links: ["owns01", "owns02"],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const test of TEST_DATA) {
+    info("Selecting test node " + test.selector);
+    await selectNode(test.selector, inspector);
+
+    info("Finding the popupNode to anchor the context-menu to");
+    const { editor } = await getContainerForSelector(test.selector, inspector);
+    const attributeEl = editor.attrElements.get(test.attributeName);
+    const linksEl = attributeEl.querySelectorAll(".link");
+
+    is(
+      linksEl.length,
+      test.links.length,
+      "We have the expected number of links in attribute " + test.attributeName
+    );
+
+    for (let i = 0; i < test.links.length; i++) {
+      info(`Checking link # ${i} for attribute "${test.attributeName}"`);
+
+      const linkEl = linksEl[i];
+      ok(linkEl, "Found the link");
+
+      const expectedReferencedNodeId = test.links[i];
+
+      info("Simulating a context click on the link");
+      const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+        target: linkEl,
+      });
+
+      const linkFollow = allMenuItems.find(
+        ({ id }) => id === "node-menu-link-follow"
+      );
+      const linkCopy = allMenuItems.find(
+        ({ id }) => id === "node-menu-link-copy"
+      );
+
+      is(linkFollow.visible, true, "The follow-link item is visible");
+      is(linkCopy.visible, false, "The copy-link item is not visible");
+      const linkFollowItemLabel = INSPECTOR_L10N.getFormatStr(
+        "inspector.menu.selectElement.label",
+        expectedReferencedNodeId
+      );
+      is(
+        linkFollow.label,
+        linkFollowItemLabel,
+        "the follow-link label is correct"
+      );
+
+      info("Check that select node button is displayed");
+      const buttonEl = linkEl.querySelector("button.select-node");
+      ok(buttonEl, "Found the select node button");
+      is(
+        buttonEl.getAttribute("title"),
+        linkFollowItemLabel,
+        "Button has expected title"
+      );
+
+      info("Check that clicking on button selects the associated node");
+      const onSelection = inspector.selection.once("new-node-front");
+      buttonEl.click();
+      await onSelection;
+
+      is(
+        inspector.selection.nodeFront.id,
+        expectedReferencedNodeId,
+        "The expected new node was selected"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_load_01.js b/devtools/client/inspector/markup/test/browser_markup_load_01.js
new file mode 100644
index 0000000000..1669cf5101
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_load_01.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint-disable mozilla/no-arbitrary-setTimeout */
+
+"use strict";
+
+// Tests that selecting an element with the 'Inspect Element' context
+// menu during a page reload doesn't cause the markup view to become empty.
+// See https://bugzilla.mozilla.org/show_bug.cgi?id=1036324
+
+const server = createTestHTTPServer();
+
+// Register a slow image handler so we can simulate a long time between
+// a reload and the load event firing.
+server.registerContentType("gif", "image/gif");
+server.registerPathHandler("/slow.gif", function (metadata, response) {
+  info("Image has been requested");
+  response.processAsync();
+  setTimeout(() => {
+    info("Image is responding");
+    response.finish();
+  }, 500);
+});
+
+// Test page load events.
+const TEST_URL =
+  "data:text/html," +
+  "<!DOCTYPE html>" +
+  "<head><meta charset='utf-8' /></head>" +
+  "<body>" +
+  "<p>Slow script</p>" +
+  "<img src='http://localhost:" +
+  server.identity.primaryPort +
+  "/slow.gif' />" +
+  "</body>" +
+  "</html>";
+
+add_task(async function () {
+  const { inspector, tab } = await openInspectorForURL(TEST_URL);
+
+  const domContentLoaded = waitForLinkedBrowserEvent(tab, "DOMContentLoaded");
+  const pageLoaded = waitForLinkedBrowserEvent(tab, "load");
+
+  ok(inspector.markup, "There is a markup view");
+
+  // Select an element while the tab is in the middle of a slow reload.
+  // Do not await here because we interact with the page during navigation.
+  const onToolboxNavigated = navigateTo(TEST_URL);
+
+  info("Wait for DOMContentLoaded");
+  await domContentLoaded;
+
+  info("Inspect element via context menu");
+  const markupLoaded = inspector.once("markuploaded");
+  await clickOnInspectMenuItem("img");
+
+  info("Wait for load");
+  await pageLoaded;
+
+  info("Wait for toolbox navigation");
+  await onToolboxNavigated;
+
+  info("Wait for markup-loaded after element inspection");
+  await markupLoaded;
+  info("Wait for multiple children updates after element inspection");
+  await waitForMultipleChildrenUpdates(inspector);
+
+  ok(inspector.markup, "There is a markup view");
+  is(inspector.markup._elt.children.length, 1, "The markup view is rendering");
+});
+
+function waitForLinkedBrowserEvent(tab, event) {
+  return BrowserTestUtils.waitForContentEvent(tab.linkedBrowser, event, true);
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_mutation_01.js b/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
new file mode 100644
index 0000000000..f03da91945
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
@@ -0,0 +1,421 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that various mutations to the dom update the markup view correctly.
+
+const TEST_URL = URL_ROOT + "doc_markup_mutation.html";
+
+// Mutation tests. Each entry in the array has the following properties:
+// - desc: for logging only
+// - numMutations: how many mutations are expected to come happen due to the
+//   test case.  Defaults to 1 if not set.
+// - test: a function supposed to mutate the DOM
+// - check: a function supposed to test that the mutation was handled
+const TEST_DATA = [
+  {
+    desc: "Adding an attribute",
+    async test() {
+      await setContentPageElementAttribute("#node1", "newattr", "newattrval");
+    },
+    async check(inspector) {
+      const { editor } = await getContainerForSelector("#node1", inspector);
+      ok(
+        [...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
+          return (
+            attr.textContent.trim() === 'newattr="newattrval"' &&
+            attr.dataset.value === "newattrval" &&
+            attr.dataset.attr === "newattr"
+          );
+        }),
+        "newattr attribute found"
+      );
+    },
+  },
+  {
+    desc: "Removing an attribute",
+    async test() {
+      await removeContentPageElementAttribute("#node1", "newattr");
+    },
+    async check(inspector) {
+      const { editor } = await getContainerForSelector("#node1", inspector);
+      ok(
+        ![...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
+          return attr.textContent.trim() === 'newattr="newattrval"';
+        }),
+        "newattr attribute removed"
+      );
+    },
+  },
+  {
+    desc: "Re-adding an attribute",
+    async test() {
+      await setContentPageElementAttribute("#node1", "newattr", "newattrval");
+    },
+    async check(inspector) {
+      const { editor } = await getContainerForSelector("#node1", inspector);
+      ok(
+        [...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
+          return (
+            attr.textContent.trim() === 'newattr="newattrval"' &&
+            attr.dataset.value === "newattrval" &&
+            attr.dataset.attr === "newattr"
+          );
+        }),
+        "newattr attribute found"
+      );
+    },
+  },
+  {
+    desc: "Changing an attribute",
+    async test() {
+      await setContentPageElementAttribute(
+        "#node1",
+        "newattr",
+        "newattrchanged"
+      );
+    },
+    async check(inspector) {
+      const { editor } = await getContainerForSelector("#node1", inspector);
+      ok(
+        [...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
+          return (
+            attr.textContent.trim() === 'newattr="newattrchanged"' &&
+            attr.dataset.value === "newattrchanged" &&
+            attr.dataset.attr === "newattr"
+          );
+        }),
+        "newattr attribute found"
+      );
+    },
+  },
+  {
+    desc: "Adding another attribute does not rerender unchanged attributes",
+    async test(inspector) {
+      const { editor } = await getContainerForSelector("#node1", inspector);
+
+      // This test checks the impact on the markup-view nodes after setting attributes on
+      // content nodes.
+      info("Expect attribute-container for 'new-attr' from the previous test");
+      const attributeContainer = editor.attrList.querySelector(
+        "[data-attr=newattr]"
+      );
+      ok(attributeContainer, "attribute-container for 'newattr' found");
+
+      info("Set a flag on the attribute-container to check after the mutation");
+      attributeContainer.beforeMutationFlag = true;
+
+      info(
+        "Add the attribute 'otherattr' on the content node to trigger the mutation"
+      );
+      await setContentPageElementAttribute("#node1", "otherattr", "othervalue");
+    },
+    async check(inspector) {
+      const { editor } = await getContainerForSelector("#node1", inspector);
+
+      info(
+        "Check the attribute-container for the new attribute mutation was created"
+      );
+      const otherAttrContainer = editor.attrList.querySelector(
+        "[data-attr=otherattr]"
+      );
+      ok(otherAttrContainer, "attribute-container for 'otherattr' found");
+
+      info(
+        "Check the attribute-container for 'new-attr' is the same node as earlier."
+      );
+      const newAttrContainer = editor.attrList.querySelector(
+        "[data-attr=newattr]"
+      );
+      ok(newAttrContainer, "attribute-container for 'newattr' found");
+      ok(
+        newAttrContainer.beforeMutationFlag,
+        "attribute-container same as earlier"
+      );
+    },
+  },
+  {
+    desc: "Adding ::after element",
+    numMutations: 2,
+    async test() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node1 = content.document.querySelector("#node1");
+        node1.classList.add("pseudo");
+      });
+    },
+    async check(inspector) {
+      const { children } = await getContainerForSelector("#node1", inspector);
+      is(
+        children.childNodes.length,
+        2,
+        "Node1 now has 2 children (text child and ::after"
+      );
+    },
+  },
+  {
+    desc: "Removing ::after element",
+    numMutations: 2,
+    async test() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node1 = content.document.querySelector("#node1");
+        node1.classList.remove("pseudo");
+      });
+    },
+    async check(inspector) {
+      const container = await getContainerForSelector("#node1", inspector);
+      ok(container.inlineTextChild, "Has single text child.");
+    },
+  },
+  {
+    desc: "Updating the text-content",
+    async test() {
+      await setContentPageElementProperty("#node1", "textContent", "newtext");
+    },
+    async check(inspector) {
+      const container = await getContainerForSelector("#node1", inspector);
+      ok(container.inlineTextChild, "Has single text child.");
+      ok(!container.canExpand, "Can't expand container with inlineTextChild.");
+      ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
+      is(
+        container.editor.elt.querySelector(".text").textContent.trim(),
+        "newtext",
+        "Single text child editor updated."
+      );
+    },
+  },
+  {
+    desc: "Adding a second text child",
+    async test() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node1 = content.document.querySelector("#node1");
+        const newText = node1.ownerDocument.createTextNode("more");
+        node1.appendChild(newText);
+      });
+    },
+    async check(inspector) {
+      const container = await getContainerForSelector("#node1", inspector);
+      ok(!container.inlineTextChild, "Does not have single text child.");
+      ok(container.canExpand, "Can expand container with child nodes.");
+      Assert.equal(
+        container.editor.elt.querySelector(".text"),
+        null,
+        "Single text child editor removed."
+      );
+    },
+  },
+  {
+    desc: "Go from 2 to 1 text child",
+    async test() {
+      await setContentPageElementProperty("#node1", "textContent", "newtext");
+    },
+    async check(inspector) {
+      const container = await getContainerForSelector("#node1", inspector);
+      ok(container.inlineTextChild, "Has single text child.");
+      ok(!container.canExpand, "Can't expand container with inlineTextChild.");
+      ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
+      is(
+        container.editor.elt.querySelector(".text").textContent.trim(),
+        "newtext",
+        "Single text child editor updated."
+      );
+    },
+  },
+  {
+    desc: "Removing an only text child",
+    async test() {
+      await setContentPageElementProperty("#node1", "innerHTML", "");
+    },
+    async check(inspector) {
+      const container = await getContainerForSelector("#node1", inspector);
+      ok(!container.inlineTextChild, "Does not have single text child.");
+      ok(!container.canExpand, "Can't expand empty container.");
+      Assert.equal(
+        container.editor.elt.querySelector(".text"),
+        null,
+        "Single text child editor removed."
+      );
+    },
+  },
+  {
+    desc: "Go from 0 to 1 text child",
+    async test() {
+      await setContentPageElementProperty("#node1", "textContent", "newtext");
+    },
+    async check(inspector) {
+      const container = await getContainerForSelector("#node1", inspector);
+      ok(container.inlineTextChild, "Has single text child.");
+      ok(!container.canExpand, "Can't expand container with inlineTextChild.");
+      ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
+      is(
+        container.editor.elt.querySelector(".text").textContent.trim(),
+        "newtext",
+        "Single text child editor updated."
+      );
+    },
+  },
+
+  {
+    desc: "Updating the innerHTML",
+    async test() {
+      await setContentPageElementProperty(
+        "#node2",
+        "innerHTML",
+        "<div><span>foo</span></div>"
+      );
+    },
+    async check(inspector) {
+      const container = await getContainerForSelector("#node2", inspector);
+
+      const openTags = container.children.querySelectorAll(".open .tag");
+      is(openTags.length, 2, "There are 2 tags in node2");
+      is(openTags[0].textContent.trim(), "div", "The first tag is a div");
+      is(openTags[1].textContent.trim(), "span", "The second tag is a span");
+
+      is(
+        container.children.querySelector(".text").textContent.trim(),
+        "foo",
+        "The span's textcontent is correct"
+      );
+    },
+  },
+  {
+    desc: "Removing child nodes",
+    async test() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node4 = content.document.querySelector("#node4");
+        while (node4.firstChild) {
+          node4.firstChild.remove();
+        }
+      });
+    },
+    async check(inspector) {
+      const { children } = await getContainerForSelector("#node4", inspector);
+      is(children.innerHTML, "", "Children have been removed");
+    },
+  },
+  {
+    desc: "Appending a child to a different parent",
+    async test() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node17 = content.document.querySelector("#node17");
+        const node2 = content.document.querySelector("#node2");
+        node2.appendChild(node17);
+      });
+    },
+    async check(inspector) {
+      const { children } = await getContainerForSelector("#node16", inspector);
+      is(
+        children.innerHTML,
+        "",
+        "Node17 has been removed from its node16 parent"
+      );
+
+      const container = await getContainerForSelector("#node2", inspector);
+      const openTags = container.children.querySelectorAll(".open .tag");
+      is(openTags.length, 3, "There are now 3 tags in node2");
+      is(openTags[2].textContent.trim(), "p", "The third tag is node17");
+    },
+  },
+  {
+    desc: "Swapping a parent and child element, putting them in the same tree",
+    // body
+    //  node1
+    //  node18
+    //    node19
+    //      node20
+    //        node21
+    // will become:
+    // body
+    //   node1
+    //     node20
+    //      node21
+    //      node18
+    //        node19
+    async test() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const node18 = content.document.querySelector("#node18");
+        const node20 = content.document.querySelector("#node20");
+        const node1 = content.document.querySelector("#node1");
+        node1.appendChild(node20);
+        node20.appendChild(node18);
+      });
+    },
+    async check(inspector) {
+      await inspector.markup.expandAll();
+
+      const { children } = await getContainerForSelector("#node1", inspector);
+      is(
+        children.childNodes.length,
+        2,
+        "Node1 now has 2 children (textnode and node20)"
+      );
+
+      const node20 = children.childNodes[1];
+      const node20Children = node20.container.children;
+      is(
+        node20Children.childNodes.length,
+        2,
+        "Node20 has 2 children (21 and 18)"
+      );
+
+      const node21 = node20Children.childNodes[0];
+      is(
+        node21.container.editor.elt.querySelector(".text").textContent.trim(),
+        "line21",
+        "Node21 has a single text child"
+      );
+
+      const node18 = node20Children.childNodes[1];
+      is(
+        node18
+          .querySelector(".open .attreditor .attr-value")
+          .textContent.trim(),
+        "node18",
+        "Node20's second child is indeed node18"
+      );
+    },
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Expanding all markup-view nodes");
+  await inspector.markup.expandAll();
+
+  for (let { desc, test, check, numMutations } of TEST_DATA) {
+    info("Starting test: " + desc);
+
+    numMutations = numMutations || 1;
+
+    info("Executing the test markup mutation");
+
+    // If a test expects more than one mutation it may come through in a single
+    // event or possibly in multiples.
+    let seenMutations = 0;
+    const promise = new Promise(resolve => {
+      inspector.on("markupmutation", function onmutation(mutations) {
+        seenMutations += mutations.length;
+        info(
+          "Receieved " +
+            seenMutations +
+            " mutations, expecting at least " +
+            numMutations
+        );
+        if (seenMutations >= numMutations) {
+          inspector.off("markupmutation", onmutation);
+          resolve();
+        }
+      });
+    });
+    await test(inspector);
+    await promise;
+
+    info("Expanding all markup-view nodes to make sure new nodes are imported");
+    await inspector.markup.expandAll();
+
+    info("Checking the markup-view content");
+    await check(inspector);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_mutation_02.js b/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
new file mode 100644
index 0000000000..8e7d3de4f4
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
@@ -0,0 +1,191 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that markup-containers in the markup-view do flash when their
+// corresponding DOM nodes mutate
+
+// Have to use the same timer functions used by the inspector.
+// eslint-disable-next-line mozilla/no-redeclare-with-import-autofix
+const { clearTimeout } = ChromeUtils.importESModule(
+  "resource://gre/modules/Timer.sys.mjs"
+);
+
+const TEST_URL = URL_ROOT + "doc_markup_flashing.html";
+
+// The test data contains a list of mutations to test.
+// Each item is an object:
+// - desc: a description of the test step, for better logging
+// - mutate: a generator function that should make changes to the content DOM
+// - attribute: if set, the test will expect the corresponding attribute to
+//   flash instead of the whole node
+// - flashedNode: [optional] the css selector of the node that is expected to
+//   flash in the markup-view as a result of the mutation.
+//   If missing, the rootNode (".list") will be expected to flash
+const TEST_DATA = [
+  {
+    desc: "Adding a new node should flash the new node",
+    async mutate() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const newLi = content.document.createElement("LI");
+        newLi.textContent = "new list item";
+        content.document.querySelector(".list").appendChild(newLi);
+      });
+    },
+    flashedNode: ".list li:nth-child(3)",
+  },
+  {
+    desc: "Removing a node should flash its parent",
+    async mutate() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const root = content.document.querySelector(".list");
+        root.removeChild(root.lastElementChild);
+      });
+    },
+  },
+  {
+    desc: "Re-appending an existing node should only flash this node",
+    async mutate() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const root = content.document.querySelector(".list");
+        root.appendChild(root.firstElementChild);
+      });
+    },
+    flashedNode: ".list .item:last-child",
+  },
+  {
+    desc: "Adding an attribute should flash the attribute",
+    attribute: "test-name",
+    async mutate() {
+      await setContentPageElementAttribute(
+        ".list",
+        "test-name",
+        "value-" + Date.now()
+      );
+    },
+  },
+  {
+    desc:
+      "Adding an attribute with css reserved characters should flash the " +
+      "attribute",
+    attribute: "one:two",
+    async mutate() {
+      await setContentPageElementAttribute(
+        ".list",
+        "one:two",
+        "value-" + Date.now()
+      );
+    },
+  },
+  {
+    desc: "Editing an attribute should flash the attribute",
+    attribute: "class",
+    async mutate() {
+      await setContentPageElementAttribute(
+        ".list",
+        "class",
+        "list value-" + Date.now()
+      );
+    },
+  },
+  {
+    desc: "Multiple changes to an attribute should flash the attribute",
+    attribute: "class",
+    async mutate() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const root = content.document.querySelector(".list");
+        root.removeAttribute("class");
+        root.setAttribute("class", "list value-" + Date.now());
+        root.setAttribute("class", "list value-" + Date.now());
+        root.removeAttribute("class");
+        root.setAttribute("class", "list value-" + Date.now());
+        root.setAttribute("class", "list value-" + Date.now());
+      });
+    },
+  },
+  {
+    desc: "Removing an attribute should flash the node",
+    async mutate() {
+      await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+        const root = content.document.querySelector(".list");
+        root.removeAttribute("class");
+      });
+    },
+  },
+];
+
+add_task(async function () {
+  await pushPref("privacy.reduceTimerPrecision", false);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  // Make sure mutated nodes flash for a very long time so we can more easily
+  // assert they do
+  inspector.markup.CONTAINER_FLASHING_DURATION = 1000 * 60 * 60;
+
+  info("Getting the <ul.list> root node to test mutations on");
+  const rootNodeFront = await getNodeFront(".list", inspector);
+
+  info("Selecting the last element of the root node before starting");
+  await selectNode(".list .item:nth-child(2)", inspector);
+
+  for (const { mutate, flashedNode, desc, attribute } of TEST_DATA) {
+    info("Starting test: " + desc);
+
+    info("Mutating the DOM and listening for markupmutation event");
+    const onMutation = inspector.once("markupmutation");
+    await mutate();
+    const mutations = await onMutation;
+
+    info("Wait for the breadcrumbs widget to update if it needs to");
+    if (inspector.breadcrumbs._hasInterestingMutations(mutations)) {
+      await inspector.once("breadcrumbs-updated");
+    }
+
+    info("Asserting that the correct markup-container is flashing");
+    let flashingNodeFront = rootNodeFront;
+    if (flashedNode) {
+      flashingNodeFront = await getNodeFront(flashedNode, inspector);
+    }
+
+    if (attribute) {
+      await assertAttributeFlashing(flashingNodeFront, attribute, inspector);
+    } else {
+      await assertNodeFlashing(flashingNodeFront, inspector);
+    }
+  }
+});
+
+function assertNodeFlashing(nodeFront, inspector) {
+  const container = getContainerForNodeFront(nodeFront, inspector);
+  ok(container, "Markup container for node found");
+  ok(
+    container.tagState.classList.contains("theme-bg-contrast"),
+    "Markup container for node is flashing"
+  );
+
+  // Clear the mutation flashing timeout now that we checked the node was
+  // flashing.
+  clearTimeout(container._flashMutationTimer);
+  container._flashMutationTimer = null;
+  container.tagState.classList.remove("theme-bg-contrast");
+}
+
+function assertAttributeFlashing(nodeFront, attribute, inspector) {
+  const container = getContainerForNodeFront(nodeFront, inspector);
+  ok(container, "Markup container for node found");
+  ok(
+    container.editor.attrElements.get(attribute),
+    "Attribute exists on editor"
+  );
+
+  const attributeElement = container.editor.getAttributeElement(attribute);
+
+  ok(
+    attributeElement.classList.contains("theme-bg-contrast"),
+    "Element for " + attribute + " attribute is flashing"
+  );
+
+  attributeElement.classList.remove("theme-bg-contrast");
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_navigation.js b/devtools/client/inspector/markup/test/browser_markup_navigation.js
new file mode 100644
index 0000000000..f6a408f10c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_navigation.js
@@ -0,0 +1,128 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup-view nodes can be navigated to with the keyboard
+
+const TEST_URL = URL_ROOT + "doc_markup_navigation.html";
+const TEST_DATA = [
+  ["KEY_PageUp", "*doctype*"],
+  ["KEY_ArrowDown", "html"],
+  ["KEY_ArrowDown", "head"],
+  ["KEY_ArrowDown", "body"],
+  ["KEY_ArrowDown", "node0"],
+  ["KEY_ArrowRight", "node0"],
+  ["KEY_ArrowDown", "node1"],
+  ["KEY_ArrowDown", "node2"],
+  ["KEY_ArrowDown", "node3"],
+  ["KEY_ArrowDown", "*comment*"],
+  ["KEY_ArrowDown", "node4"],
+  ["KEY_ArrowRight", "node4"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node5"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node6"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "*comment*"],
+  ["KEY_ArrowDown", "node7"],
+  ["KEY_ArrowRight", "node7"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node8"],
+  ["KEY_ArrowLeft", "node7"],
+  ["KEY_ArrowLeft", "node7"],
+  ["KEY_ArrowRight", "node7"],
+  ["KEY_ArrowRight", "*text*"],
+  ["KEY_ArrowDown", "node8"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node9"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node10"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node11"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node12"],
+  ["KEY_ArrowRight", "node12"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node13"],
+  ["KEY_ArrowDown", "node14"],
+  ["KEY_ArrowDown", "node15"],
+  ["KEY_ArrowDown", "node15"],
+  ["KEY_ArrowDown", "node15"],
+  ["KEY_ArrowUp", "node14"],
+  ["KEY_ArrowUp", "node13"],
+  ["KEY_ArrowUp", "*text*"],
+  ["KEY_ArrowUp", "node12"],
+  ["KEY_ArrowLeft", "node12"],
+  ["KEY_ArrowDown", "node14"],
+  ["KEY_Home", "*doctype*"],
+  ["KEY_PageDown", "*text*"],
+  ["KEY_ArrowDown", "node5"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node6"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "*comment*"],
+  ["KEY_ArrowDown", "node7"],
+  ["KEY_ArrowLeft", "node7"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node9"],
+  ["KEY_ArrowDown", "*text*"],
+  ["KEY_ArrowDown", "node10"],
+  ["KEY_PageUp", "*text*"],
+  ["KEY_PageUp", "*doctype*"],
+  ["KEY_ArrowDown", "html"],
+  ["KEY_ArrowLeft", "html"],
+  ["KEY_ArrowDown", "head"],
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Making sure the markup-view frame is focused");
+  inspector.markup._frame.focus();
+
+  info("Starting to iterate through the test data");
+  for (const [key, className] of TEST_DATA) {
+    info("Testing step: " + key + " to navigate to " + className);
+    EventUtils.synthesizeKey(key);
+
+    info("Making sure markup-view children get updated");
+    await waitForChildrenUpdated(inspector);
+
+    info("Checking the right node is selected");
+    checkSelectedNode(key, className, inspector);
+  }
+
+  // In theory, we should wait for the inspector-updated event at each iteration
+  // of the previous loop where we expect the current node to change (because
+  // changing the current node ends up refreshing the rule-view, breadcrumbs,
+  // ...), but this would make this test a *lot* slower. Instead, having a final
+  // catch-all event works too.
+  await inspector.once("inspector-updated");
+});
+
+function checkSelectedNode(key, className, inspector) {
+  const node = inspector.selection.nodeFront;
+
+  if (className == "*comment*") {
+    is(
+      node.nodeType,
+      Node.COMMENT_NODE,
+      "Found a comment after pressing " + key
+    );
+  } else if (className == "*text*") {
+    is(node.nodeType, Node.TEXT_NODE, "Found text after pressing " + key);
+  } else if (className == "*doctype*") {
+    is(
+      node.nodeType,
+      Node.DOCUMENT_TYPE_NODE,
+      "Found the doctype after pressing " + key
+    );
+  } else {
+    is(
+      node.className,
+      className,
+      "Found node: " + className + " after pressing " + key
+    );
+  }
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_node_names.js b/devtools/client/inspector/markup/test/browser_markup_node_names.js
new file mode 100644
index 0000000000..3bfc0495c3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_node_names.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test element node name in the markupview
+const TEST_URL = URL_ROOT + "doc_markup_html_mixed_case.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  // Get and open the svg element to show its children
+  const svgNodeFront = await getNodeFront("svg", inspector);
+  await inspector.markup.expandNode(svgNodeFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  const clipPathContainer = await getContainerForSelector(
+    "clipPath",
+    inspector
+  );
+  info("Checking the clipPath element");
+  Assert.strictEqual(
+    clipPathContainer.editor.tag.textContent,
+    "clipPath",
+    "clipPath node name is not lowercased"
+  );
+
+  const divContainer = await getContainerForSelector("div", inspector);
+
+  info("Checking the div element");
+  Assert.strictEqual(
+    divContainer.editor.tag.textContent,
+    "div",
+    "div node name is lowercased"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_node_names_namespaced.js b/devtools/client/inspector/markup/test/browser_markup_node_names_namespaced.js
new file mode 100644
index 0000000000..2eafa89e83
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_node_names_namespaced.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test namespaced element node names in the markupview.
+
+const XHTML = `
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg">
+    <body>
+      <svg:svg width="100" height="100">
+        <svg:clipPath id="clip">
+          <svg:rect id="rectangle" x="0" y="0" width="10" height="5"></svg:rect>
+        </svg:clipPath>
+        <svg:circle cx="0" cy="0" r="5"></svg:circle>
+      </svg:svg>
+    </body>
+  </html>
+`;
+
+const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  // Get and open the svg element to show its children.
+  const svgNodeFront = await getNodeFront("svg", inspector);
+  await inspector.markup.expandNode(svgNodeFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  const clipPathContainer = await getContainerForSelector(
+    "clipPath",
+    inspector
+  );
+  info("Checking the clipPath element");
+  Assert.strictEqual(
+    clipPathContainer.editor.tag.textContent,
+    "svg:clipPath",
+    "svg:clipPath node is correctly displayed"
+  );
+
+  const circlePathContainer = await getContainerForSelector(
+    "circle",
+    inspector
+  );
+  info("Checking the circle element");
+  Assert.strictEqual(
+    circlePathContainer.editor.tag.textContent,
+    "svg:circle",
+    "svg:circle node is correctly displayed"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js
new file mode 100644
index 0000000000..bf01f1544a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that nodes that are not displayed appear differently in the markup-view
+// when these nodes are imported in the view.
+
+// Note that nodes inside a display:none parent are obviously not displayed too
+// but the markup-view uses css inheritance to mark those as hidden instead of
+// having to visit each and every child of a hidden node. So there's no sense
+// testing children nodes.
+
+const TEST_URL = URL_ROOT + "doc_markup_not_displayed.html";
+const TEST_DATA = [
+  { selector: "#normal-div", isDisplayed: true },
+  { selector: "head", isDisplayed: false },
+  { selector: "#display-none", isDisplayed: false },
+  { selector: "#hidden-true", isDisplayed: false },
+  { selector: "#visibility-hidden", isDisplayed: true },
+  { selector: "#hidden-via-hide-shortcut", isDisplayed: false },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const { selector, isDisplayed } of TEST_DATA) {
+    info("Getting node " + selector);
+    const nodeFront = await getNodeFront(selector, inspector);
+    const container = getContainerForNodeFront(nodeFront, inspector);
+    is(
+      !container.elt.classList.contains("not-displayed"),
+      isDisplayed,
+      `The container for ${selector} is marked as displayed ${isDisplayed}`
+    );
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
new file mode 100644
index 0000000000..19d57072f5
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
@@ -0,0 +1,147 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that nodes are marked as displayed and not-displayed dynamically, when
+// their display changes
+
+const TEST_URL = URL_ROOT + "doc_markup_not_displayed.html";
+const TEST_DATA = [
+  {
+    desc: "Hiding a node by creating a new stylesheet",
+    selector: "#normal-div",
+    before: true,
+    changeStyle: () => {
+      const div = content.document.createElement("div");
+      div.id = "new-style";
+      div.innerHTML = "<style>#normal-div {display:none;}</style>";
+      content.document.body.appendChild(div);
+    },
+    after: false,
+  },
+  {
+    desc: "Showing a node by deleting an existing stylesheet",
+    selector: "#normal-div",
+    before: false,
+    changeStyle: () => content.document.getElementById("new-style").remove(),
+    after: true,
+  },
+  {
+    desc: "Hiding a node by changing its style property",
+    selector: "#display-none",
+    before: false,
+    changeStyle: () => {
+      const node = content.document.querySelector("#display-none");
+      node.style.display = "block";
+    },
+    after: true,
+  },
+  {
+    desc: "Showing a node by removing its hidden attribute",
+    selector: "#hidden-true",
+    before: false,
+    changeStyle: () =>
+      content.document.querySelector("#hidden-true").removeAttribute("hidden"),
+    after: true,
+  },
+  {
+    desc: "Hiding a node by adding a hidden attribute",
+    selector: "#hidden-true",
+    before: true,
+    changeStyle: () =>
+      content.document
+        .querySelector("#hidden-true")
+        .setAttribute("hidden", true),
+    after: false,
+  },
+  {
+    desc: "Showing a node by changin a stylesheet's rule",
+    selector: "#hidden-via-stylesheet",
+    before: false,
+    changeStyle: () => {
+      content.document.styleSheets[0].cssRules[0].style.setProperty(
+        "display",
+        "inline"
+      );
+    },
+    after: true,
+  },
+  {
+    desc: "Hiding a node by adding a new rule to a stylesheet",
+    selector: "#hidden-via-stylesheet",
+    before: true,
+    changeStyle: () => {
+      content.document.styleSheets[0].insertRule(
+        "#hidden-via-stylesheet {display: none;}",
+        1
+      );
+    },
+    after: false,
+  },
+  {
+    desc: "Hiding a node by adding a class that matches an existing rule",
+    selector: "#normal-div",
+    before: true,
+    changeStyle: () => {
+      content.document.styleSheets[0].insertRule(
+        ".a-new-class {display: none;}",
+        2
+      );
+      content.document
+        .querySelector("#normal-div")
+        .classList.add("a-new-class");
+    },
+    after: false,
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const data of TEST_DATA) {
+    info("Running test case: " + data.desc);
+    await runTestData(inspector, data);
+  }
+});
+
+async function runTestData(
+  inspector,
+  { selector, before, changeStyle, after }
+) {
+  info("Getting the " + selector + " test node");
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+  is(
+    !container.elt.classList.contains("not-displayed"),
+    before,
+    "The container is marked as " + (before ? "shown" : "hidden")
+  );
+
+  info("Listening for the display-change event");
+  const onDisplayChanged = new Promise(resolve => {
+    inspector.markup.walker.once("display-change", resolve);
+  });
+
+  info("Making style changes");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], changeStyle);
+  const nodes = await onDisplayChanged;
+
+  info("Verifying that the list of changed nodes include our container");
+
+  ok(nodes.length, "The display-change event was received with a nodes");
+  let foundContainer = false;
+  for (const node of nodes) {
+    if (getContainerForNodeFront(node, inspector) === container) {
+      foundContainer = true;
+      break;
+    }
+  }
+  ok(foundContainer, "Container is part of the list of changed nodes");
+
+  is(
+    !container.elt.classList.contains("not-displayed"),
+    after,
+    "The container is marked as " + (after ? "shown" : "hidden")
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js b/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js
new file mode 100644
index 0000000000..6770929594
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js
@@ -0,0 +1,101 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Tests that the overflow badge is shown to overflow causing elements and is updated
+// dynamically.
+
+const TEST_URI = `
+  <style type="text/css">
+    .parent {
+        width: 200px;
+        height: 200px;
+        overflow: scroll;
+    }
+    .fixed {
+        width: 50px;
+        height: 50px;
+    }
+    .shift {
+        margin-left: 300px;
+    }
+  </style>
+  <div id="top" class="parent">
+    <div id="child1" class="fixed shift">
+        <div id="child2" class="fixed"></div>
+    </div>
+    <div id="child3" class="shift">
+        <div id="child4" class="fixed"></div>
+    </div>
+  </div>
+`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  await expandChildContainers(inspector);
+
+  const child1 = await getContainerForSelector("#child1", inspector);
+  const child2 = await getContainerForSelector("#child2", inspector);
+  const child3 = await getContainerForSelector("#child3", inspector);
+  const child4 = await getContainerForSelector("#child4", inspector);
+
+  info(
+    "Checking if overflow badges appear correctly right after the markup-view is loaded"
+  );
+
+  checkBadges([child1, child4], [child2, child3]);
+
+  info("Changing the elements to check whether the badge updates correctly");
+
+  await toggleClass(inspector);
+
+  checkBadges([child2, child3], [child1, child4]);
+
+  info(
+    "Once again, changing the elements to check whether the badge updates correctly"
+  );
+
+  await toggleClass(inspector);
+
+  checkBadges([child1, child4], [child2, child3]);
+});
+
+async function expandChildContainers(inspector) {
+  const container = await getContainerForSelector("#top", inspector);
+
+  await expandContainer(inspector, container);
+  for (const child of container.getChildContainers()) {
+    await expandContainer(inspector, child);
+  }
+}
+
+async function toggleClass(inspector) {
+  const onStateChanged = inspector.walker.once("overflow-change");
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    content.document.querySelector("#child1").classList.toggle("fixed");
+    content.document.querySelector("#child3").classList.toggle("fixed");
+  });
+
+  await onStateChanged;
+}
+
+function checkBadges(elemsWithBadges, elemsWithNoBadges) {
+  const hasBadge = elem =>
+    elem.elt.querySelector(
+      `#${elem.elt.children[0].id} > span.editor > .inspector-badge.overflow-badge`
+    );
+
+  for (const elem of elemsWithBadges) {
+    ok(hasBadge(elem), `Overflow badge exists in ${elem.node.id}`);
+  }
+
+  for (const elem of elemsWithNoBadges) {
+    ok(!hasBadge(elem), `Overflow badge does not exist in ${elem.node.id}`);
+  }
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js b/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
new file mode 100644
index 0000000000..1700c9a433
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the markup view loads only as many nodes as specified by the
+// devtools.markup.pagesize preference.
+
+Services.prefs.setIntPref("devtools.markup.pagesize", 5);
+
+const TEST_URL = URL_ROOT + "doc_markup_pagesize_01.html";
+const TEST_DATA = [
+  {
+    desc: "Select the last item",
+    selector: "#z",
+    expected: "*more*vwxyz",
+  },
+  {
+    desc: "Select the first item",
+    selector: "#a",
+    expected: "abcde*more*",
+  },
+  {
+    desc: "Select the last item",
+    selector: "#z",
+    expected: "*more*vwxyz",
+  },
+  {
+    desc: "Select an already-visible item",
+    selector: "#v",
+    // Because "v" was already visible, we shouldn't have loaded
+    // a different page.
+    expected: "*more*vwxyz",
+  },
+  {
+    desc: "Verify childrenDirty reloads the page",
+    selector: "#w",
+    forceReload: true,
+    // But now that we don't already have a loaded page, selecting
+    // w should center around w.
+    expected: "*more*uvwxy*more*",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Start iterating through the test data");
+  for (const step of TEST_DATA) {
+    info("Start test: " + step.desc);
+
+    if (step.forceReload) {
+      await forceReload(inspector);
+    }
+    info("Selecting the node that corresponds to " + step.selector);
+    await selectNode(step.selector, inspector);
+
+    info("Checking that the right nodes are shwon");
+    await assertChildren(step.expected, inspector);
+  }
+
+  info("Checking that clicking the more button loads everything");
+  await clickShowMoreNodes(inspector);
+  await inspector.markup._waitForChildren();
+  await assertChildren("abcdefghijklmnopqrstuvwxyz", inspector);
+});
+
+async function assertChildren(expected, inspector) {
+  const container = await getContainerForSelector("body", inspector);
+  let found = "";
+  for (const child of container.children.children) {
+    if (child.classList.contains("more-nodes")) {
+      found += "*more*";
+    } else {
+      found += child.container.node.getAttribute("id");
+    }
+  }
+  is(found, expected, "Got the expected children.");
+}
+
+async function forceReload(inspector) {
+  const container = await getContainerForSelector("body", inspector);
+  container.childrenDirty = true;
+}
+
+async function clickShowMoreNodes(inspector) {
+  const container = await getContainerForSelector("body", inspector);
+  const button = container.elt.querySelector("button");
+  const win = button.ownerDocument.defaultView;
+  EventUtils.sendMouseEvent({ type: "click" }, button, win);
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_pagesize_02.js b/devtools/client/inspector/markup/test/browser_markup_pagesize_02.js
new file mode 100644
index 0000000000..21e1a1221b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_pagesize_02.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the markup view loads only as many nodes as specified
+// by the devtools.markup.pagesize preference and that pressing the "show all
+// nodes" actually shows the nodes
+
+const TEST_URL = URL_ROOT + "doc_markup_pagesize_02.html";
+
+// Make sure nodes are hidden when there are more than 5 in a row
+Services.prefs.setIntPref("devtools.markup.pagesize", 5);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Selecting the UL node");
+  await clickContainer("ul", inspector);
+  info("Reloading the page with the UL node selected will expand its children");
+  await reloadBrowser();
+  await inspector.markup._waitForChildren();
+
+  info("Click on the 'show all nodes' button in the UL's list of children");
+  await showAllNodes(inspector);
+
+  await assertAllNodesAreVisible(inspector);
+});
+
+async function showAllNodes(inspector) {
+  const container = await getContainerForSelector("ul", inspector);
+  const button = container.elt.querySelector("button");
+  ok(button, "All nodes button is here");
+  const win = button.ownerDocument.defaultView;
+
+  EventUtils.sendMouseEvent({ type: "click" }, button, win);
+  await inspector.markup._waitForChildren();
+}
+
+async function assertAllNodesAreVisible(inspector) {
+  const container = await getContainerForSelector("ul", inspector);
+  ok(
+    !container.elt.querySelector("button"),
+    "All nodes button isn't here anymore"
+  );
+  const numItems = await getNumberOfMatchingElementsInContentPage("ul > *");
+  is(container.children.childNodes.length, numItems);
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_pseudo_on_reload.js b/devtools/client/inspector/markup/test/browser_markup_pseudo_on_reload.js
new file mode 100644
index 0000000000..e91e1b192a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_pseudo_on_reload.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that reloading the page when an element with sibling pseudo elements is selected
+// does not result in missing elements in the markup-view after reload.
+// Non-regression test for bug 1506792.
+
+const TEST_URL = URL_ROOT + "doc_markup_pseudo.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await selectNode("div", inspector);
+
+  info("Check that the markup-view shows the expected nodes before reload");
+  await checkMarkupView(inspector);
+
+  await reloadBrowser();
+
+  info("Check that the markup-view shows the expected nodes after reload");
+  await checkMarkupView(inspector);
+});
+
+async function checkMarkupView(inspector) {
+  const articleContainer = await getContainerForSelector("article", inspector);
+  ok(articleContainer, "The parent <article> element was found");
+
+  const childrenContainers = articleContainer.getChildContainers();
+  const beforeNode = childrenContainers[0].node;
+  const divNode = childrenContainers[1].node;
+  const afterNode = childrenContainers[2].node;
+
+  ok(
+    beforeNode.isBeforePseudoElement,
+    "The first child is the ::before pseudo element"
+  );
+  is(divNode.displayName, "div", "The second child is the <div> element");
+  ok(
+    afterNode.isAfterPseudoElement,
+    "The last child is the ::after pseudo element"
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_remove_xul_attributes.js b/devtools/client/inspector/markup/test/browser_markup_remove_xul_attributes.js
new file mode 100644
index 0000000000..89ac844149
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_remove_xul_attributes.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test confirms that XUL attributes don't show up as empty
+// attributes after being deleted
+
+const TEST_URL = URL_ROOT_SSL + "doc_markup_xul.xhtml";
+
+add_task(async function () {
+  await SpecialPowers.pushPermissions([
+    { type: "allowXULXBL", allow: true, context: URL_ROOT_SSL },
+  ]);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const panelFront = await getNodeFront("#test", inspector);
+  ok(
+    panelFront.hasAttribute("id"),
+    "panelFront has id attribute in the beginning"
+  );
+
+  info("Removing panel's id attribute");
+  const onMutation = inspector.once("markupmutation");
+  await removeContentPageElementAttribute("#test", "id");
+
+  info("Waiting for markupmutation");
+  await onMutation;
+
+  is(
+    panelFront.hasAttribute("id"),
+    false,
+    "panelFront doesn't have id attribute anymore"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_screenshot_node.js b/devtools/client/inspector/markup/test/browser_markup_screenshot_node.js
new file mode 100644
index 0000000000..270d00cd85
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_screenshot_node.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = `data:text/html;charset=utf8,
+  <div id="blue-node" style="width:30px;height:30px;background:rgb(0, 0, 255)"></div>`;
+
+// Test that the "Screenshot Node" feature works with a regular node in the main document.
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(encodeURI(TEST_URL));
+
+  info("Select the blue node");
+  await selectNode("#blue-node", inspector);
+
+  info("Take a screenshot of the blue node and verify it looks as expected");
+  const blueScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(blueScreenshot, 30, 30, {
+    r: 0,
+    g: 0,
+    b: 255,
+  });
+
+  await toolbox.destroy();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js
new file mode 100644
index 0000000000..4d8f4ff6a6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = `about:preferences`;
+
+// Test that the "Screenshot Node" feature works in about:preferences (See Bug 1691349).
+
+function hexToCSS(hex) {
+  if (!hex) {
+    return null;
+  }
+  const rgba = InspectorUtils.colorToRGBA(hex);
+  info(`rgba: '${JSON.stringify(rgba)}'`);
+  // Drop off the 'a' component since the color will be opaque
+  return `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
+}
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Select the main content node");
+  await selectNode(".main-content", inspector);
+
+  let inContentPageBackgroundColor = await getComputedStyleProperty(
+    ":root",
+    null,
+    "--in-content-page-background"
+  );
+  inContentPageBackgroundColor = inContentPageBackgroundColor.trim();
+
+  info("Take a screenshot of the element and verify it looks as expected");
+  const image = await takeNodeScreenshot(inspector);
+  // We only check that we have the right background color, since it would be difficult
+  // to assert the look of any other area in the page.
+  await checkImageColorAt({
+    image,
+    x: 0,
+    y: 0,
+    expectedColor: hexToCSS(inContentPageBackgroundColor),
+    label: "The screenshot was taken",
+  });
+
+  await toolbox.destroy();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_iframe.js b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_iframe.js
new file mode 100644
index 0000000000..3b75ff10e3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_iframe.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const exampleOrgDocument = `https://example.org/document-builder.sjs`;
+const exampleComDocument = `https://example.com/document-builder.sjs`;
+
+const TEST_URL = `${exampleOrgDocument}?html=
+  <iframe
+    src="${exampleOrgDocument}?html=<div style='width:30px;height:30px;background:rgb(255,0,0)'></div>"
+    id="same-origin"></iframe>
+  <iframe
+    src="${exampleComDocument}?html=<div style='width:25px;height:10px;background:rgb(0,255,0)'></div>"
+    id="remote"></iframe>`;
+
+// Test that the "Screenshot Node" feature works with a node inside an iframe.
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(encodeURI(TEST_URL));
+
+  info("Select the red node");
+  await selectNodeInFrames(["#same-origin", "div"], inspector);
+
+  info(
+    "Take a screenshot of the red div in the same origin iframe node and verify it looks as expected"
+  );
+  const redScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(redScreenshot, 30, 30, {
+    r: 255,
+    g: 0,
+    b: 0,
+  });
+
+  info("Select the green node");
+  await selectNodeInFrames(["#remote", "div"], inspector);
+  info(
+    "Take a screenshot of the green div in the remote iframe node and verify it looks as expected"
+  );
+  const greenScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(greenScreenshot, 25, 10, {
+    r: 0,
+    g: 255,
+    b: 0,
+  });
+  await toolbox.destroy();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_shadowdom.js b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_shadowdom.js
new file mode 100644
index 0000000000..2f1382a6a3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_shadowdom.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = `data:text/html;charset=utf8,
+  <test-component></test-component>
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML =
+          '<div style="width:30px;height:30px;background:rgb(0, 128, 0)"></div>';
+      }
+    });
+  </script>`;
+
+// Test that the "Screenshot Node" feature works with a node inside a shadow root.
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(encodeURI(TEST_URL));
+
+  info("Select the green node");
+  const greenNode = await getNodeFrontInShadowDom(
+    "div",
+    "test-component",
+    inspector
+  );
+  await selectNode(greenNode, inspector);
+
+  info("Take a screenshot of the green node and verify it looks as expected");
+  const greenScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(greenScreenshot, 30, 30, {
+    r: 0,
+    g: 128,
+    b: 0,
+  });
+
+  await toolbox.destroy();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_warning.js b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_warning.js
new file mode 100644
index 0000000000..2ae713455a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_warning.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = `data:text/html;charset=utf8,
+  <div id="blue-node" style="width:30px;height:11000px;background:rgb(0, 0, 255)"></div>`;
+
+// Test taking a screenshot of a tall node displays a warning message in the notification box.
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(encodeURI(TEST_URL));
+
+  info("Select the blue node");
+  await selectNode("#blue-node", inspector);
+
+  info("Take a screenshot of the blue node and verify it looks as expected");
+  const blueScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(blueScreenshot, 30, 10000, {
+    r: 0,
+    g: 0,
+    b: 255,
+  });
+
+  info(
+    "Check that a warning message was displayed to indicate the screenshot was truncated"
+  );
+  const notificationBox = await waitFor(() =>
+    toolbox.doc.querySelector(".notificationbox")
+  );
+
+  const message = notificationBox.querySelector(".notification").textContent;
+  ok(
+    message.startsWith("The image was cut off"),
+    `The warning message is rendered as expected (${message})`
+  );
+
+  await toolbox.destroy();
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_scrollable_badge.js b/devtools/client/inspector/markup/test/browser_markup_scrollable_badge.js
new file mode 100644
index 0000000000..2f6a414249
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_scrollable_badge.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the scrollable badge is shown next to scrollable elements, and is updated
+// dynamically when necessary.
+
+const TEST_URI = `
+  <style type="text/css">
+    #wrapper {
+      width: 300px;
+      height: 300px;
+      overflow: scroll;
+    }
+    #wrapper.no-scroll {
+      overflow: hidden;
+    }
+    #content {
+      height: 1000px;
+    }
+  </style>
+  <div id="wrapper">
+    <div id="content"></div>
+  </div>
+`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  let badge = await getBadgeEl(inspector);
+  ok(badge, "The scrollable badge exists on the test node");
+
+  info("Make the test node non-scrollable");
+  let onStateChanged = inspector.walker.once("scrollable-change");
+  await toggleScrollableClass();
+  await onStateChanged;
+
+  badge = await getBadgeEl(inspector);
+  ok(!badge, "The scrollable badge doesn't exist anymore");
+
+  info("Make the test node scrollable again");
+  onStateChanged = inspector.walker.once("scrollable-change");
+  await toggleScrollableClass();
+  await onStateChanged;
+
+  badge = await getBadgeEl(inspector);
+  ok(badge, "The scrollable badge exists again");
+});
+
+async function getBadgeEl(inspector) {
+  const wrapperMarkupContainer = await getContainerForSelector(
+    "#wrapper",
+    inspector
+  );
+  return wrapperMarkupContainer.elt.querySelector(
+    ".inspector-badge.scrollable-badge"
+  );
+}
+
+async function toggleScrollableClass() {
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    content.document.querySelector("#wrapper").classList.toggle("no-scroll");
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_scrollable_badge_click.js b/devtools/client/inspector/markup/test/browser_markup_scrollable_badge_click.js
new file mode 100644
index 0000000000..04f27713e6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_scrollable_badge_click.js
@@ -0,0 +1,199 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Tests that the correct elements show up and get highlighted in the markup view when the
+// scrollable badge is clicked.
+
+const TEST_URI = `
+  <style type="text/css">
+    .parent {
+        width: 200px;
+        height: 200px;
+        overflow: scroll;
+    }
+    .fixed {
+        width: 50px;
+        height: 50px;
+    }
+    .shift {
+        margin-left: 300px;
+    }
+    .has-before::before {
+      content: "-";
+    }
+  </style>
+  <div id="top" class="parent">
+    <div id="child1" class="fixed shift">
+        <div id="child2" class="fixed"></div>
+    </div>
+    <div id="child3" class="shift has-before">
+        <div id="child4" class="fixed"></div>
+    </div>
+  </div>
+`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const container = await getContainerForSelector("#top", inspector);
+  const scrollableBage = container.elt.querySelector(".scrollable-badge");
+  is(
+    scrollableBage.getAttribute("aria-pressed"),
+    "false",
+    "Scrollable badge is not pressed by default"
+  );
+
+  info(
+    "Clicking on the scrollable badge so that the overflow causing elements show up in the markup view."
+  );
+  scrollableBage.click();
+
+  await waitForContainers(["#child1", "#child3", "#child4"], inspector);
+
+  await checkOverflowHighlight(
+    ["#child1", "#child4"],
+    ["#child2", "#child3"],
+    inspector
+  );
+
+  ok(scrollableBage.classList.contains("active"), "Scrollable badge is active");
+  is(
+    scrollableBage.getAttribute("aria-pressed"),
+    "true",
+    "Scrollable badge is pressed"
+  );
+
+  checkTelemetry("devtools.markup.scrollable.badge.clicked", "", 1, "scalar");
+
+  info(
+    "Changing CSS so elements update their overflow highlights accordingly."
+  );
+  await toggleClass(inspector);
+
+  // By default, #child2 will not be visible in the markup view,
+  // so expand its parent to make it visible.
+  const child1 = await getContainerForSelector("#child1", inspector);
+  await expandContainer(inspector, child1);
+
+  await checkOverflowHighlight(
+    ["#child2", "#child3"],
+    ["#child1", "#child4"],
+    inspector
+  );
+
+  info(
+    "Clicking on the scrollable badge again so that all the overflow highlight gets removed."
+  );
+  scrollableBage.click();
+
+  await checkOverflowHighlight(
+    [],
+    ["#child1", "#child2", "#child3", "#child4"],
+    inspector
+  );
+
+  ok(
+    !scrollableBage.classList.contains("active"),
+    "Scrollable badge is not active"
+  );
+  is(
+    scrollableBage.getAttribute("aria-pressed"),
+    "false",
+    "Scrollable badge is not pressed anymore"
+  );
+
+  checkTelemetry("devtools.markup.scrollable.badge.clicked", "", 2, "scalar");
+
+  info("Triggering badge with the keyboard");
+  scrollableBage.focus();
+  EventUtils.synthesizeKey("VK_RETURN", {}, scrollableBage.ownerGlobal);
+  await checkOverflowHighlight(
+    ["#child2", "#child3"],
+    ["#child1", "#child4"],
+    inspector
+  );
+  ok(
+    scrollableBage.classList.contains("active"),
+    "badge can be activated with the keyboard"
+  );
+  is(
+    scrollableBage.getAttribute("aria-pressed"),
+    "true",
+    "Scrollable badge is pressed"
+  );
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, scrollableBage.ownerGlobal);
+  await checkOverflowHighlight(
+    [],
+    ["#child1", "#child2", "#child3", "#child4"],
+    inspector
+  );
+  ok(
+    !scrollableBage.classList.contains("active"),
+    "Scrollable badge can be deactivated with the keyboard"
+  );
+  is(
+    scrollableBage.getAttribute("aria-pressed"),
+    "false",
+    "Scrollable badge is not pressed anymore"
+  );
+
+  info("Double-click on the scrollable badge");
+  EventUtils.sendMouseEvent({ type: "dblclick" }, scrollableBage);
+  ok(
+    container.expanded,
+    "Double clicking on the badge did not collapse the container"
+  );
+});
+
+async function getContainerForSelector(selector, inspector) {
+  const nodeFront = await getNodeFront(selector, inspector);
+  return getContainerForNodeFront(nodeFront, inspector);
+}
+
+async function waitForContainers(selectors, inspector) {
+  for (const selector of selectors) {
+    info(`Wait for markup container of ${selector}`);
+    await asyncWaitUntil(() => getContainerForSelector(selector, inspector));
+  }
+}
+
+async function elementHasHighlight(selector, inspector) {
+  const container = await getContainerForSelector(selector, inspector);
+  return container?.tagState.classList.contains("overflow-causing-highlighted");
+}
+
+async function checkOverflowHighlight(
+  selectorWithHighlight,
+  selectorWithNoHighlight,
+  inspector
+) {
+  for (const selector of selectorWithHighlight) {
+    ok(
+      await elementHasHighlight(selector, inspector),
+      `${selector} contains overflow highlight`
+    );
+  }
+  for (const selector of selectorWithNoHighlight) {
+    ok(
+      !(await elementHasHighlight(selector, inspector)),
+      `${selector} does not contain overflow highlight`
+    );
+  }
+}
+
+async function toggleClass(inspector) {
+  const onStateChanged = inspector.walker.once("overflow-change");
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    content.document.querySelector("#child1").classList.toggle("fixed");
+    content.document.querySelector("#child3").classList.toggle("fixed");
+  });
+
+  await onStateChanged;
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_search_01.js b/devtools/client/inspector/markup/test/browser_markup_search_01.js
new file mode 100644
index 0000000000..6288bcb942
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_search_01.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that searching for nodes using the selector-search input expands and
+// selects the right nodes in the markup-view, even when those nodes are deeply
+// nested (and therefore not attached yet when the markup-view is initialized).
+
+const TEST_URL = URL_ROOT + "doc_markup_search.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  let container = await getContainerForSelector("em", inspector, true);
+  ok(!container, "The <em> tag isn't present yet in the markup-view");
+
+  // Searching for the innermost element first makes sure that the inspector
+  // back-end is able to attach the resulting node to the tree it knows at the
+  // moment. When the inspector is started, the <body> is the default selected
+  // node, and only the parents up to the ROOT are known, and its direct
+  // children.
+  info("searching for the innermost child: <em>");
+  await searchFor("em", inspector);
+
+  container = await getContainerForSelector("em", inspector);
+  ok(container, "The <em> tag is now imported in the markup-view");
+
+  let nodeFront = await getNodeFront("em", inspector);
+  is(
+    inspector.selection.nodeFront,
+    nodeFront,
+    "The <em> tag is the currently selected node"
+  );
+
+  info("searching for other nodes too");
+  for (const node of ["span", "li", "ul"]) {
+    await searchFor(node, inspector);
+
+    nodeFront = await getNodeFront(node, inspector);
+    is(
+      inspector.selection.nodeFront,
+      nodeFront,
+      "The <" + node + "> tag is the currently selected node"
+    );
+  }
+});
+
+async function searchFor(selector, inspector) {
+  const onNewNodeFront = inspector.selection.once("new-node-front");
+
+  searchUsingSelectorSearch(selector, inspector);
+
+  await onNewNodeFront;
+  await inspector.once("inspector-updated");
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom.js
new file mode 100644
index 0000000000..1b701f872e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom.js
@@ -0,0 +1,290 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test a few static pages using webcomponents and check that they are displayed as
+// expected in the markup view.
+
+const TEST_DATA = [
+  {
+    // Test that expanding a shadow host shows a shadow root node and direct children.
+    // Test that expanding a shadow root shows the shadow dom.
+    // Test that slotted elements are visible in the shadow dom.
+    title: "generic shadow dom test",
+    url: `data:text/html;charset=utf-8,
+      <test-component>
+        <div slot="slot1">slotted-1<div>inner</div></div>
+        <div slot="slot2">slotted-2<div>inner</div></div>
+        <div class="no-slot-class">no-slot-text<div>inner</div></div>
+      </test-component>
+
+      <script>
+        'use strict';
+        customElements.define('test-component', class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = \`
+                <slot name="slot1"></slot>
+                <slot name="slot2"></slot>
+                <slot></slot>
+              \`;
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          name="slot1"
+            div!slotted
+          name="slot2"
+            div!slotted
+          slot
+            div!slotted
+        slot="slot1"
+          slotted-1
+          inner
+        slot="slot2"
+          slotted-2
+          inner
+        class="no-slot-class"
+          no-slot-text
+          inner`,
+  },
+  {
+    // Test that components without any direct children still display a shadow root node,
+    // if a shadow root is attached to the host.
+    title: "shadow root without direct children",
+    url: `data:text/html;charset=utf-8,
+      <test-component></test-component>
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = "<slot><div>fallback-content</div></slot>";
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          slot
+            fallback-content`,
+  },
+  {
+    // Test that markup view is correctly displayed for non-trivial shadow DOM nesting.
+    title: "nested components",
+    url: `data:text/html;charset=utf-8,
+      <test-component >
+        <div slot="slot1">slot1-1</div>
+        <third-component slot="slot2"></third-component>
+      </test-component>
+
+      <script>
+      (function() {
+        'use strict';
+
+        function defineComponent(name, html) {
+          customElements.define(name, class extends HTMLElement {
+            constructor() {
+              super();
+              let shadowRoot = this.attachShadow({mode: "#MODE#"});
+              shadowRoot.innerHTML = html;
+            }
+          });
+        }
+
+        defineComponent('test-component', \`
+          <div id="test-container">
+            <slot name="slot1"></slot>
+            <slot name="slot2"></slot>
+            <other-component><div slot="other1">other1-content</div></other-component>
+          </div>\`);
+        defineComponent('other-component',
+          '<div id="other-container"><slot id="other1" name="other1"></slot></div>');
+        defineComponent('third-component', '<div>Third component</div>');
+      })();
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          test-container
+            slot
+              div!slotted
+            slot
+              third-component!slotted
+            other-component
+              #shadow-root
+                div
+                  slot
+                    div!slotted
+              div
+        div
+        third-component
+          #shadow-root
+            div`,
+  },
+  {
+    // Test that ::before and ::after pseudo elements are correctly displayed in host
+    // components and in slot elements.
+    title: "pseudo elements",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component::before { content: "before-host" }
+        test-component::after { content: "after-host" }
+      </style>
+
+      <test-component>
+        <div class="light-dom"></div>
+      </test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = \`
+              <style>
+                slot { display: block } /* avoid whitespace nodes */
+                slot::before { content: "before-slot" }
+                slot::after { content: "after-slot" }
+              </style>
+              <slot>default content</slot>
+            \`;
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          style
+            slot { display: block }
+          slot
+            ::before
+            div!slotted
+            default content
+            ::after
+        ::before
+        class="light-dom"
+        ::after`,
+  },
+  {
+    // Test empty web components are still displayed correctly.
+    title: "empty components",
+    url: `data:text/html;charset=utf-8,
+      <test-component></test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = "";
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root`,
+  },
+  {
+    // Test shadow hosts show their shadow root even if they contain just a short text.
+    title: "shadow host with inline-text-child",
+    url: `data:text/html;charset=utf-8,
+      <test-component>
+        <inner-component>short-text-outside</inner-component>
+      </test-component>
+
+      <script>
+        "use strict";
+
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = "<div><slot></slot></div>";
+          }
+        });
+
+        customElements.define("inner-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = "short-text-inside";
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          div
+            slot
+              inner-component!slotted
+        inner-component
+          #shadow-root
+            short-text-inside
+          short-text-outside`,
+  },
+  {
+    // Test for Bug 1537877, crash with nested custom elements without slot.
+    title: "nested components without slot",
+    url: `data:text/html;charset=utf-8,
+      <test-component>
+        <inner-component slot="non-existing-slot"></inner-component>
+      </test-component>
+
+      <script>
+        "use strict";
+
+        customElements.define('test-component', class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = '<div>test-component-content</div>'
+          }
+        });
+
+        customElements.define('inner-component', class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = 'inner-component-content'
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          div
+        inner-component
+          #shadow-root
+            inner-component-content`,
+  },
+];
+
+for (const { url, tree, title } of TEST_DATA) {
+  // Test each configuration in both open and closed modes
+  add_task(async function () {
+    info(`Testing: [${title}] in OPEN mode`);
+    const { inspector, tab } = await openInspectorForURL(
+      url.replace(/#MODE#/g, "open")
+    );
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+  add_task(async function () {
+    info(`Testing: [${title}] in CLOSED mode`);
+    const { inspector, tab } = await openInspectorForURL(
+      url.replace(/#MODE#/g, "closed")
+    );
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal.js
new file mode 100644
index 0000000000..778420dba3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the corresponding non-slotted node container gets selected when clicking on
+// the reveal link for a slotted node.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">slot1-1</div>
+    <div slot="slot1" id="el2">slot1-2</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot name="slot1"></slot>';
+      }
+    });
+  </script>`;
+
+// Test reveal link with mouse navigation
+add_task(async function () {
+  const checkWithMouse = checkRevealLink.bind(null, clickOnRevealLink);
+  await testRevealLink(checkWithMouse, checkWithMouse);
+});
+
+// Test reveal link with keyboard navigation (Enter and Spacebar keys)
+add_task(async function () {
+  const checkWithEnter = checkRevealLink.bind(
+    null,
+    keydownOnRevealLink.bind(null, "KEY_Enter")
+  );
+  const checkWithSpacebar = checkRevealLink.bind(
+    null,
+    keydownOnRevealLink.bind(null, " ")
+  );
+
+  await testRevealLink(checkWithEnter, checkWithSpacebar);
+});
+
+async function testRevealLink(revealFnFirst, revealFnSecond) {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+
+  info("Expand the shadow root");
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Expand the slot");
+  const slotContainer = shadowRootContainer.getChildContainers()[0];
+  await expandContainer(inspector, slotContainer);
+
+  const slotChildContainers = slotContainer.getChildContainers();
+  is(slotChildContainers.length, 2, "Expecting 2 slotted children");
+
+  await revealFnFirst(inspector, slotChildContainers[0].node);
+  is(inspector.selection.nodeFront.id, "el1", "The right node was selected");
+  is(hostContainer.getChildContainers()[1].node, inspector.selection.nodeFront);
+
+  await revealFnSecond(inspector, slotChildContainers[1].node);
+  is(inspector.selection.nodeFront.id, "el2", "The right node was selected");
+  is(hostContainer.getChildContainers()[2].node, inspector.selection.nodeFront);
+}
+
+async function checkRevealLink(actionFn, inspector, node) {
+  const slottedContainer = inspector.markup.getContainer(node, true);
+  info("Select the slotted container for the element");
+  await selectNode(node, inspector, "no-reason", true);
+  ok(inspector.selection.isSlotted(), "The selection is the slotted version");
+  ok(
+    inspector.markup.getSelectedContainer().isSlotted(),
+    "The selected container is slotted"
+  );
+
+  const link = slottedContainer.elt.querySelector(".reveal-link");
+  is(
+    link.getAttribute("role"),
+    "link",
+    "Reveal link has the role=link attribute"
+  );
+
+  info("Click on the reveal link and wait for the new node to be selected");
+  await actionFn(inspector, slottedContainer);
+  const selectedFront = inspector.selection.nodeFront;
+  is(selectedFront, node, "The same node front is still selected");
+  ok(
+    !inspector.selection.isSlotted(),
+    "The selection is not the slotted version"
+  );
+  // wait until the selected container isn't the one we had before.
+  await waitFor(
+    () => inspector.markup.getSelectedContainer() !== slottedContainer
+  );
+  ok(
+    !inspector.markup.getSelectedContainer().isSlotted(),
+    "The selected container is not slotted"
+  );
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js
new file mode 100644
index 0000000000..7e3714420b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js
@@ -0,0 +1,88 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that clicking on "reveal" always scrolls the view to show the real container, even
+// if the node is already selected.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">slot1 content</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`
+          <slot name="slot1"></slot>
+          <div></div><div></div><div></div><div></div><div></div><div></div>
+          <div></div><div></div><div></div><div></div><div></div><div></div>
+          <div></div><div></div><div></div><div></div><div></div><div></div>
+          <div></div><div></div><div></div><div></div><div></div><div></div>
+          <!-- adding some nodes to make sure the slotted container and the real container
+           require scrolling -->
+        \`;
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+
+  info("Expand the shadow root");
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Expand the slot");
+  const slotContainer = shadowRootContainer.getChildContainers()[0];
+  await expandContainer(inspector, slotContainer);
+
+  const slotChildContainers = slotContainer.getChildContainers();
+  is(slotChildContainers.length, 1, "Expecting 1 slotted child");
+
+  const slottedContainer = slotChildContainers[0];
+  const realContainer = inspector.markup.getContainer(slottedContainer.node);
+  const slottedElement = slottedContainer.elt;
+  const realElement = realContainer.elt;
+
+  info("Click on the reveal link");
+  await clickOnRevealLink(inspector, slottedContainer);
+  // "new-node-front" will also trigger the scroll, so make sure we are testing after
+  // the scroll was performed.
+  await waitUntil(() => isScrolledOut(slottedElement));
+  is(isScrolledOut(slottedElement), true, "slotted element is scrolled out");
+  await waitUntil(() => !isScrolledOut(realElement));
+  is(isScrolledOut(realElement), false, "real element is not scrolled out");
+
+  info("Scroll back to see the slotted element");
+  slottedElement.scrollIntoView();
+  is(
+    isScrolledOut(slottedElement),
+    false,
+    "slotted element is not scrolled out"
+  );
+  is(isScrolledOut(realElement), true, "real element is scrolled out");
+
+  info("Click on the reveal link again");
+  await clickOnRevealLink(inspector, slottedContainer);
+  await waitUntil(() => isScrolledOut(slottedElement));
+  is(isScrolledOut(slottedElement), true, "slotted element is scrolled out");
+  await waitUntil(() => !isScrolledOut(realElement));
+  is(isScrolledOut(realElement), false, "real element is not scrolled out");
+});
+
+function isScrolledOut(element) {
+  const win = element.ownerGlobal;
+  const rect = element.getBoundingClientRect();
+  return rect.top < 0 || rect.top + rect.height > win.innerHeight;
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_copy_paths.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_copy_paths.js
new file mode 100644
index 0000000000..81af9ea3f0
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_copy_paths.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that using copyCssPath, copyXPath and copyUniqueSelector with an element under a
+// shadow root returns values relevant to the selected element, and relative to the shadow
+// root.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component></test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`
+          <div id="el1">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>\`;
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+
+  info("Expand the shadow root");
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Select the div under the shadow root");
+  const divContainer = shadowRootContainer.getChildContainers()[0];
+  await selectNode(divContainer.node, inspector);
+
+  info("Check the copied values for the various copy*Path helpers");
+  await waitForClipboardPromise(
+    () => inspector.markup.contextMenu._copyXPath(),
+    '//*[@id="el1"]'
+  );
+  await waitForClipboardPromise(
+    () => inspector.markup.contextMenu._copyCssPath(),
+    "div#el1"
+  );
+  await waitForClipboardPromise(
+    () => inspector.markup.contextMenu._copyUniqueSelector(),
+    "#el1"
+  );
+
+  info("Expand the div");
+  await expandContainer(inspector, divContainer);
+
+  info("Select the third span");
+  const spanContainer = divContainer.getChildContainers()[2];
+  await selectNode(spanContainer.node, inspector);
+
+  info("Check the copied values for the various copy*Path helpers");
+  await waitForClipboardPromise(
+    () => inspector.markup.contextMenu._copyXPath(),
+    "/div/span[3]"
+  );
+  await waitForClipboardPromise(
+    () => inspector.markup.contextMenu._copyCssPath(),
+    "div#el1 span"
+  );
+  await waitForClipboardPromise(
+    () => inspector.markup.contextMenu._copyUniqueSelector(),
+    "#el1 > span:nth-child(3)"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_delete.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_delete.js
new file mode 100644
index 0000000000..f5b707bb6a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_delete.js
@@ -0,0 +1,105 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that slot elements are correctly updated when slotted elements are being removed
+// from the DOM.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">slot1-1</div>
+    <div slot="slot1" id="el2">slot1-2</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot name="slot1"><div>default</div></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  // <test-component> is a shadow host.
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  await inspector.markup.expandNode(hostFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info(
+    "Test that expanding a shadow host shows shadow root and direct host children."
+  );
+  const { markup } = inspector;
+  const hostContainer = markup.getContainer(hostFront);
+  const childContainers = hostContainer.getChildContainers();
+
+  is(
+    childContainers.length,
+    3,
+    "Expecting 3 children: shadowroot, 2 host children"
+  );
+  assertContainerHasText(childContainers[0], "#shadow-root");
+  assertContainerHasText(childContainers[1], "div");
+  assertContainerHasText(childContainers[2], "div");
+
+  info("Expand the shadow root");
+  const shadowRootContainer = childContainers[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  const shadowChildContainers = shadowRootContainer.getChildContainers();
+  is(shadowChildContainers.length, 1, "Expecting 1 child slot");
+  assertContainerHasText(shadowChildContainers[0], "slot");
+
+  info("Expand the slot");
+  const slotContainer = shadowChildContainers[0];
+  await expandContainer(inspector, slotContainer);
+
+  let slotChildContainers = slotContainer.getChildContainers();
+  is(
+    slotChildContainers.length,
+    3,
+    "Expecting 3 children (2 slotted, fallback)"
+  );
+  assertContainerSlotted(slotChildContainers[0]);
+  assertContainerSlotted(slotChildContainers[1]);
+  assertContainerHasText(slotChildContainers[2], "div");
+
+  await deleteNode(inspector, "#el1");
+  slotChildContainers = slotContainer.getChildContainers();
+  is(
+    slotChildContainers.length,
+    2,
+    "Expecting 2 children (1 slotted, fallback)"
+  );
+  assertContainerSlotted(slotChildContainers[0]);
+  assertContainerHasText(slotChildContainers[1], "div");
+
+  await deleteNode(inspector, "#el2");
+  slotChildContainers = slotContainer.getChildContainers();
+  // After deleting the last host direct child we expect the slot to show the default
+  // content <div>default</div>
+  is(slotChildContainers.length, 1, "Expecting 1 child");
+  ok(
+    !slotChildContainers[0].isSlotted(),
+    "Container is a not slotted container"
+  );
+});
+
+async function deleteNode(inspector, selector) {
+  info("Select node " + selector + " and make sure it is focused");
+  await selectNode(selector, inspector);
+  await clickContainer(selector, inspector);
+
+  info("Delete the node");
+  const mutated = inspector.once("markupmutation");
+  const updated = inspector.once("inspector-updated");
+  EventUtils.sendKey("delete", inspector.panelWin);
+  await mutated;
+  await updated;
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_dynamic.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_dynamic.js
new file mode 100644
index 0000000000..597623ebf4
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_dynamic.js
@@ -0,0 +1,155 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the inspector is correctly updated when shadow roots are attached to
+// components after displaying them in the markup view.
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <div id="root">
+    <test-component>
+      <div slot="slot1" id="el1">slot1-1</div>
+      <div slot="slot1" id="el2">slot1-2</div>
+    </test-component>
+    <inline-component>inline text</inline-component>
+  </div>
+
+  <script>
+    'use strict';
+    window.attachTestComponent = function () {
+      customElements.define('test-component', class extends HTMLElement {
+        constructor() {
+          super();
+          let shadowRoot = this.attachShadow({mode: 'open'});
+          shadowRoot.innerHTML = \`<div id="slot1-container">
+                                     <slot name="slot1"></slot>
+                                   </div>
+                                   <other-component>
+                                     <div slot="slot2">slot2-1</div>
+                                   </other-component>\`;
+        }
+      });
+    }
+
+    window.attachOtherComponent = function () {
+      customElements.define('other-component', class extends HTMLElement {
+        constructor() {
+          super();
+          let shadowRoot = this.attachShadow({mode: 'open'});
+          shadowRoot.innerHTML = \`<div id="slot2-container">
+                                     <slot name="slot2"></slot>
+                                     <div>some-other-node</div>
+                                   </div>\`;
+        }
+      });
+    }
+
+    window.attachInlineComponent = function () {
+      customElements.define('inline-component', class extends HTMLElement {
+        constructor() {
+          super();
+          let shadowRoot = this.attachShadow({mode: 'open'});
+          shadowRoot.innerHTML = \`<div id="inline-component-content">
+                                     <div>some-inline-content</div>
+                                   </div>\`;
+        }
+      });
+    }
+  </script>`);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const tree = `
+    div
+      test-component
+        slot1-1
+        slot1-2
+      inline text`;
+  await assertMarkupViewAsTree(tree, "#root", inspector);
+
+  info("Attach a shadow root to test-component");
+  let mutated = waitForMutation(inspector, "shadowRootAttached");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    content.wrappedJSObject.attachTestComponent();
+  });
+  await mutated;
+
+  const treeAfterTestAttach = `
+    div
+      test-component
+        #shadow-root
+          slot1-container
+            slot
+              div!slotted
+              div!slotted
+          other-component
+            slot2-1
+        slot1-1
+        slot1-2
+      inline text`;
+  await assertMarkupViewAsTree(treeAfterTestAttach, "#root", inspector);
+
+  info("Attach a shadow root to other-component, nested in test-component");
+  mutated = waitForMutation(inspector, "shadowRootAttached");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    content.wrappedJSObject.attachOtherComponent();
+  });
+  await mutated;
+
+  const treeAfterOtherAttach = `
+    div
+      test-component
+        #shadow-root
+          slot1-container
+            slot
+              div!slotted
+              div!slotted
+          other-component
+            #shadow-root
+              slot2-container
+                slot
+                  div!slotted
+                some-other-node
+            slot2-1
+        slot1-1
+        slot1-2
+      inline text`;
+  await assertMarkupViewAsTree(treeAfterOtherAttach, "#root", inspector);
+
+  info(
+    "Attach a shadow root to inline-component, check the inline text child."
+  );
+  mutated = waitForMutation(inspector, "shadowRootAttached");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    content.wrappedJSObject.attachInlineComponent();
+  });
+  await mutated;
+
+  const treeAfterInlineAttach = `
+    div
+      test-component
+        #shadow-root
+          slot1-container
+            slot
+              div!slotted
+              div!slotted
+          other-component
+            #shadow-root
+              slot2-container
+                slot
+                  div!slotted
+                some-other-node
+            slot2-1
+        slot1-1
+        slot1-2
+      inline-component
+        #shadow-root
+          inline-component-content
+            some-inline-content
+        inline text`;
+  await assertMarkupViewAsTree(treeAfterInlineAttach, "#root", inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js
new file mode 100644
index 0000000000..c386e26d6d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Bug 1465873
+// Tests that hovering nodes in the content page with the element picked and finally
+// picking one does not break the markup view. The markup and sequence used here is a bit
+// eccentric but the issue from Bug 1465873 is tricky to reproduce.
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <test-component id="component1" background>
+    <div slot="slot1" data-index="1">slot1-1</div>
+  </test-component>
+  <script>
+  (function() {
+    'use strict';
+
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super(); // always call super() first in the ctor.
+
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`
+          <div id="wrapper" style="padding-top: 20px;">
+            a<span class="pick-target">pick-target</span>
+            <div id="slot1-container">
+              <slot id="slot1" name="slot1"></slot>
+            </div>
+          </div>
+        \`;
+      }
+    });
+  })();
+  </script>`);
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Waiting for element picker to become active.");
+  await startPicker(toolbox);
+
+  info("Move mouse over the padding of the test-component");
+  await hoverElement(inspector, "test-component", 10, 10);
+
+  info("Move mouse over the pick-target");
+  // Note we can't reach pick-target with a selector because this element lives in the
+  // shadow-dom of test-component. We aim for PADDING + 5 pixels
+  await hoverElement(inspector, "test-component", 10, 25);
+
+  info("Click and pick the pick-target");
+  await pickElement(inspector, "test-component", 10, 25);
+
+  info(
+    "Check that the markup view has the expected content after using the picker"
+  );
+  const tree = `
+    test-component
+      #shadow-root
+        wrapper
+          a
+          pick-target
+          slot1-container
+            slot1
+              div!slotted
+      div`;
+  await assertMarkupViewAsTree(tree, "test-component", inspector);
+
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = inspector.markup.getContainer(hostFront);
+  const moreNodesLink = hostContainer.elt.querySelector(".more-nodes");
+  ok(
+    !moreNodesLink,
+    "There is no 'more nodes' button displayed in the host container"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js
new file mode 100644
index 0000000000..4462671354
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(1);
+
+// Test a few static pages using webcomponents with ::marker and ::before
+// pseudos and check that they are displayed as expected in the markup view.
+
+const TEST_DATA = [
+  {
+    // Test that ::before on an empty shadow host is displayed when the host
+    // has a ::marker.
+    title: "::before after ::marker, empty node",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item; }
+        test-component::before { content: "before-host" }
+      </style>
+
+      <test-component></test-component>
+
+      <script>
+        'use strict';
+        customElements.define('test-component', class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+        ::marker
+        ::before`,
+  },
+  {
+    // Test ::before on a shadow host with content is displayed when the host
+    // has a ::marker.
+    title: "::before after ::marker, non-empty node",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item }
+        test-component::before { content: "before-host" }
+      </style>
+
+      <test-component>
+        <div class="light-dom"></div>
+      </test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = "<slot>default content</slot>";
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          slot
+            div!slotted
+            default content
+        ::marker
+        ::before
+        class="light-dom"`,
+  },
+  {
+    // Test just ::marker on a shadow host
+    title: "just ::marker, no ::before",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item }
+      </style>
+
+      <test-component></test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+        ::marker`,
+  },
+];
+
+for (const { url, tree, title } of TEST_DATA) {
+  // Test each configuration in both open and closed modes
+  add_task(async function () {
+    info(`Testing: [${title}] in OPEN mode`);
+    const { inspector, tab } = await openInspectorForURL(
+      url.replace(/#MODE#/g, "open")
+    );
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+  add_task(async function () {
+    info(`Testing: [${title}] in CLOSED mode`);
+    const { inspector, tab } = await openInspectorForURL(
+      url.replace(/#MODE#/g, "closed")
+    );
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_maxchildren.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_maxchildren.js
new file mode 100644
index 0000000000..5b0f359cee
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_maxchildren.js
@@ -0,0 +1,122 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup view properly displays the "more nodes" button both for host
+// elements and for slot elements.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+<test-component>
+  <div>node 1</div><div>node 2</div><div>node 3</div>
+  <div>node 4</div><div>node 5</div><div>node 6</div>
+</test-component>
+
+<script>
+  "use strict";
+  customElements.define("test-component", class extends HTMLElement {
+    constructor() {
+      super();
+      let shadowRoot = this.attachShadow({mode: "open"});
+      shadowRoot.innerHTML = "<slot>some default content</slot>";
+    }
+    connectedCallback() {}
+    disconnectedCallback() {}
+  });
+</script>`;
+
+const MAX_CHILDREN = 5;
+
+add_task(async function () {
+  await pushPref("devtools.markup.pagesize", MAX_CHILDREN);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  // <test-component> is a shadow host.
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  await inspector.markup.expandNode(hostFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info(
+    "Test that expanding a shadow host shows shadow root and direct host children."
+  );
+  const { markup } = inspector;
+  const hostContainer = markup.getContainer(hostFront);
+  let childContainers = hostContainer.getChildContainers();
+
+  is(
+    childContainers.length,
+    MAX_CHILDREN,
+    "Expecting 5 children: shadowroot, 4 host children"
+  );
+  assertContainerHasText(childContainers[0], "#shadow-root");
+  for (let i = 1; i < 5; i++) {
+    assertContainerHasText(childContainers[i], "div");
+    assertContainerHasText(childContainers[i], "node " + i);
+  }
+
+  info("Click on the more nodes button under the host element");
+  let moreNodesLink = hostContainer.elt.querySelector(".more-nodes");
+  ok(
+    !!moreNodesLink,
+    "A 'more nodes' button is displayed in the host container"
+  );
+  moreNodesLink.querySelector("button").click();
+  await inspector.markup._waitForChildren();
+
+  childContainers = hostContainer.getChildContainers();
+  is(childContainers.length, 7, "Expecting one additional host child");
+  assertContainerHasText(childContainers[6], "div");
+  assertContainerHasText(childContainers[6], "node 6");
+
+  info("Expand the shadow root");
+  const shadowRootContainer = childContainers[0];
+  const shadowRootFront = shadowRootContainer.node;
+  await inspector.markup.expandNode(shadowRootFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  const shadowChildContainers = shadowRootContainer.getChildContainers();
+  is(shadowChildContainers.length, 1, "Expecting 1 slot child");
+  assertContainerHasText(shadowChildContainers[0], "slot");
+
+  info("Expand the slot");
+  const slotContainer = shadowChildContainers[0];
+  const slotFront = slotContainer.node;
+  await inspector.markup.expandNode(slotFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  let slotChildContainers = slotContainer.getChildContainers();
+  is(slotChildContainers.length, MAX_CHILDREN, "Expecting 5 slotted children");
+  for (const slotChildContainer of slotChildContainers) {
+    assertContainerHasText(slotChildContainer, "div");
+    ok(
+      slotChildContainer.elt.querySelector(".reveal-link"),
+      "Slotted container has a reveal link element"
+    );
+  }
+
+  info("Click on the more nodes button under the slot element");
+  moreNodesLink = slotContainer.elt.querySelector(".more-nodes");
+  ok(
+    !!moreNodesLink,
+    "A 'more nodes' button is displayed in the host container"
+  );
+  EventUtils.sendMouseEvent(
+    { type: "click" },
+    moreNodesLink.querySelector("button")
+  );
+  await inspector.markup._waitForChildren();
+
+  slotChildContainers = slotContainer.getChildContainers();
+  is(
+    slotChildContainers.length,
+    7,
+    "Expecting one additional slotted element and fallback"
+  );
+  assertContainerHasText(slotChildContainers[5], "div");
+  ok(
+    slotChildContainers[5].elt.querySelector(".reveal-link"),
+    "Slotted container has a reveal link element"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_mutations_shadow.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_mutations_shadow.js
new file mode 100644
index 0000000000..5e8a967c27
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_mutations_shadow.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup view is correctly updated when elements under a shadow root are
+// deleted or updated.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">slot1-1</div>
+    <div slot="slot1" id="el2">slot1-2</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`<div id="slot1-container">
+                                   <slot name="slot1"></slot>
+                                 </div>
+                                 <div id="another-div"></div>\`;
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const tree = `
+    test-component
+      #shadow-root
+        slot1-container
+          slot
+            div!slotted
+            div!slotted
+        another-div
+      div
+      div`;
+  await assertMarkupViewAsTree(tree, "test-component", inspector);
+
+  info("Delete a shadow dom element and check the updated markup view");
+  let mutated = waitForMutation(inspector, "childList");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    const shadowRoot =
+      content.document.querySelector("test-component").shadowRoot;
+    const slotContainer = shadowRoot.getElementById("slot1-container");
+    slotContainer.remove();
+  });
+  await mutated;
+
+  const treeAfterDelete = `
+    test-component
+      #shadow-root
+        another-div
+      div
+      div`;
+  await assertMarkupViewAsTree(treeAfterDelete, "test-component", inspector);
+
+  mutated = inspector.once("markupmutation");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    const shadowRoot =
+      content.document.querySelector("test-component").shadowRoot;
+    const shadowDiv = shadowRoot.getElementById("another-div");
+    shadowDiv.setAttribute("random-attribute", "1");
+  });
+  await mutated;
+
+  info(
+    "Add an attribute on a shadow dom element and check the updated markup view"
+  );
+  const treeAfterAttrChange = `
+    test-component
+      #shadow-root
+        random-attribute
+      div
+      div`;
+  await assertMarkupViewAsTree(
+    treeAfterAttrChange,
+    "test-component",
+    inspector
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js
new file mode 100644
index 0000000000..ece16815ad
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js
@@ -0,0 +1,97 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup-view navigation works correctly with shadow dom slotted nodes.
+// Each slotted nodes has two containers representing the same node front in the markup
+// view, we need to make sure that navigating to the slotted version selects the slotted
+// container, and navigating to the non-slotted element selects the non-slotted container.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component class="test-component">
+    <div slot="slot1" class="slotted1"><div class="slot1-child">slot1-1</div></div>
+    <div slot="slot1" class="slotted2">slot1-2</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot class="slot1" name="slot1"></slot>';
+      }
+    });
+  </script>`;
+
+const TEST_DATA = [
+  ["KEY_PageUp", "html"],
+  ["KEY_ArrowDown", "head"],
+  ["KEY_ArrowDown", "body"],
+  ["KEY_ArrowDown", "test-component"],
+  ["KEY_ArrowRight", "test-component"],
+  ["KEY_ArrowDown", "shadow-root"],
+  ["KEY_ArrowRight", "shadow-root"],
+  ["KEY_ArrowDown", "slot1"],
+  ["KEY_ArrowRight", "slot1"],
+  ["KEY_ArrowDown", "div", "slotted1"],
+  ["KEY_ArrowDown", "div", "slotted2"],
+  ["KEY_ArrowDown", "slotted1"],
+  ["KEY_ArrowRight", "slotted1"],
+  ["KEY_ArrowDown", "slot1-child"],
+  ["KEY_ArrowDown", "slotted2"],
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Making sure the markup-view frame is focused");
+  inspector.markup._frame.focus();
+
+  info("Starting to iterate through the test data");
+  for (const [key, expected, slottedClassName] of TEST_DATA) {
+    info("Testing step: " + key + " to navigate to " + expected);
+    EventUtils.synthesizeKey(key);
+
+    info("Making sure markup-view children get updated");
+    await waitForChildrenUpdated(inspector);
+
+    info("Checking the right node is selected");
+    checkSelectedNode(key, expected, slottedClassName, inspector);
+  }
+
+  // Same as in browser_markup_navigation.js, use a single catch-call event listener.
+  await inspector.once("inspector-updated");
+});
+
+function checkSelectedNode(key, expected, slottedClassName, inspector) {
+  const selectedContainer = inspector.markup.getSelectedContainer();
+  const slotted = !!slottedClassName;
+
+  is(
+    selectedContainer.isSlotted(),
+    slotted,
+    `Selected container is ${slotted ? "slotted" : "not slotted"} as expected`
+  );
+  is(
+    inspector.selection.isSlotted(),
+    slotted,
+    `Inspector selection is also ${slotted ? "slotted" : "not slotted"}`
+  );
+  ok(
+    selectedContainer.elt.textContent.includes(expected),
+    "Found expected content: " +
+      expected +
+      " in container after pressing " +
+      key
+  );
+
+  if (slotted) {
+    is(
+      selectedContainer.node.className,
+      slottedClassName,
+      "Slotted has the expected classname " + slottedClassName
+    );
+  }
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js
new file mode 100644
index 0000000000..ee7fde1584
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js
@@ -0,0 +1,132 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup view is correctly expanded when inspecting an element nested
+// in several shadow roots:
+// - when using the context-menu "Inspect element"
+// - when using the element picker
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <test-outer></test-outer>
+  <script>
+  (function() {
+    'use strict';
+
+    function defineComponent(name, html) {
+      customElements.define(name, class extends HTMLElement {
+        constructor() {
+          super();
+          let shadowRoot = this.attachShadow({mode: 'open'});
+          shadowRoot.innerHTML = html;
+        }
+      });
+    }
+
+    defineComponent('test-outer', \`
+      <test-inner>
+        <test-image></test-image>
+      </test-inner>\`);
+
+    defineComponent('test-inner', \`
+      <div>
+        <div>
+          <div>
+            <slot></slot>
+          </div>
+        </div>
+      </div>\`);
+
+    defineComponent('test-image',
+      \`<div style="display:block; height: 200px; width: 100%; background:red"></div>\`);
+  })();
+  </script>`);
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Waiting for element picker to become active");
+  await startPicker(toolbox);
+  info("Click and pick the pick-target");
+  await pickElement(inspector, "test-outer", 10, 10);
+  info("Check that the markup view is displayed as expected");
+  await assertMarkupView(inspector);
+
+  info("Close DevTools before testing Inspect Element");
+  await toolbox.destroy();
+
+  info("Click on Inspect Element for our test-image <div>");
+  // Note: we click on test-outer, because we can't find the <div> using a simple
+  // querySelector. However the click is simulated in the middle of the <test-outer>
+  // component, and will always hit the test <div> which takes all the space.
+  const newInspector = await clickOnInspectMenuItem("test-outer");
+  info("Check again that the markup view is displayed as expected");
+  await assertMarkupView(newInspector);
+});
+
+async function assertMarkupView(inspector) {
+  const outerFront = await getNodeFront("test-outer", inspector);
+  const outerContainer = inspector.markup.getContainer(outerFront);
+  assertContainer(outerContainer, {
+    expanded: true,
+    text: "test-outer",
+    children: 1,
+  });
+
+  const outerShadowContainer = outerContainer.getChildContainers()[0];
+  assertContainer(outerShadowContainer, {
+    expanded: true,
+    text: "#shadow-root",
+    children: 1,
+  });
+
+  const innerContainer = outerShadowContainer.getChildContainers()[0];
+  assertContainer(innerContainer, {
+    expanded: true,
+    text: "test-inner",
+    children: 2,
+  });
+
+  const innerShadowContainer = innerContainer.getChildContainers()[0];
+  const imageContainer = innerContainer.getChildContainers()[1];
+  assertContainer(innerShadowContainer, {
+    expanded: false,
+    text: "#shadow-root",
+  });
+  assertContainer(imageContainer, {
+    expanded: true,
+    text: "test-image",
+    children: 1,
+  });
+
+  const imageShadowContainer = imageContainer.getChildContainers()[0];
+  assertContainer(imageShadowContainer, {
+    expanded: true,
+    text: "#shadow-root",
+    children: 1,
+  });
+
+  const redDivContainer = imageShadowContainer.getChildContainers()[0];
+  assertContainer(redDivContainer, { expanded: false, text: "div" });
+  is(redDivContainer.selected, true, "Div element is selected as expected");
+}
+
+/**
+ * Check if the provided markup container is expanded, has the expected text and the
+ * expected number of children.
+ */
+function assertContainer(container, { expanded, text, children }) {
+  is(container.expanded, expanded, "Container is expanded");
+  assertContainerHasText(container, text);
+  if (expanded) {
+    const childContainers = container.getChildContainers();
+    is(
+      childContainers.length,
+      children,
+      "Container has expected number of children"
+    );
+  }
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_noslot.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_noslot.js
new file mode 100644
index 0000000000..4c4a9c2e90
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_noslot.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup view is correctly displayed when a component has children but no
+// slots are available under the shadow root.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <style>
+    .has-before::before { content: "before-content" }
+  </style>
+
+  <div class="root">
+    <no-slot-component>
+      <div class="not-nested">light</div>
+      <div class="nested">
+        <div class="has-before"></div>
+        <div>dummy for Bug 1441863</div>
+      </div>
+    </no-slot-component>
+    <slot-component>
+      <div class="not-nested">light</div>
+      <div class="nested">
+        <div class="has-before"></div>
+      </div>
+    </slot-component>
+  </div>
+
+  <script>
+    'use strict';
+    customElements.define('no-slot-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<div class="no-slot-div"></div>';
+      }
+    });
+    customElements.define('slot-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  // We expect that host children are correctly displayed when no slots are defined.
+  const beforeTree = `
+  class="root"
+    no-slot-component
+      #shadow-root
+        no-slot-div
+      class="not-nested"
+      class="nested"
+        class="has-before"
+        dummy for Bug 1441863
+    slot-component
+      #shadow-root
+        slot
+          div!slotted
+          div!slotted
+      class="not-nested"
+      class="nested"
+        class="has-before"
+          ::before`;
+  await assertMarkupViewAsTree(beforeTree, ".root", inspector);
+
+  info(
+    "Move the non-slotted element with class has-before and check the pseudo appears"
+  );
+  const mutated = waitForNMutations(inspector, "childList", 3);
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    const root = content.document.querySelector(".root");
+    const hasBeforeEl = content.document.querySelector(
+      "no-slot-component .has-before"
+    );
+    root.appendChild(hasBeforeEl);
+  });
+  await mutated;
+
+  // As the non-slotted has-before is moved into the tree, the before pseudo is expected
+  // to appear.
+  const afterTree = `
+    class="root"
+      no-slot-component
+        #shadow-root
+          no-slot-div
+        class="not-nested"
+        class="nested"
+          dummy for Bug 1441863
+      slot-component
+        #shadow-root
+          slot
+            div!slotted
+            div!slotted
+        class="not-nested"
+        class="nested"
+          class="has-before"
+            ::before
+      class="has-before"
+        ::before`;
+  await assertMarkupViewAsTree(afterTree, ".root", inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js
new file mode 100644
index 0000000000..f508f777cd
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js
@@ -0,0 +1,152 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that markup view displays a "custom" badge for custom elements.
+// Test that the context menu also has a menu item to show the custom element definition.
+// Test that clicking on any of those opens the debugger.
+// Test that the markup view is correctly updated to show those items if the custom
+// element definition happens after opening the inspector.
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js",
+  this
+);
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+<test-component></test-component>
+<other-component>some-content</other-component>
+
+<script>
+  "use strict";
+  window.attachTestComponent = function() {
+    customElements.define("test-component", class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.innerHTML = "<slot>some default content</slot>";
+      }
+      connectedCallback() {}
+      disconnectedCallback() {}
+    });
+  }
+
+  window.defineOtherComponent = function() {
+    customElements.define('other-component', class extends HTMLParagraphElement {
+      constructor() {
+        super();
+      }
+    }, { extends: 'p' });
+  }
+</script>`);
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  // Test with an element to which we attach a shadow.
+  await runTest(inspector, toolbox, "test-component", "attachTestComponent");
+
+  // Test with an element to which we only add a custom element definition.
+  await runTest(inspector, toolbox, "other-component", "defineOtherComponent");
+});
+
+async function runTest(inspector, toolbox, selector, contentMethod) {
+  // Test element is a regular element (no shadow root or custom element definition).
+  info(`Select <${selector}>.`);
+  await selectNode(selector, inspector);
+  const testFront = await getNodeFront(selector, inspector);
+  const testContainer = inspector.markup.getContainer(testFront);
+  let customBadge = testContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-custom]"
+  );
+
+  // Verify that the "custom" badge and menu item are hidden.
+  ok(!customBadge, "[custom] badge is hidden");
+  let menuItem = getMenuItem("node-menu-jumptodefinition", inspector);
+  ok(
+    !menuItem,
+    selector + ": The menu item was not found in the contextual menu"
+  );
+
+  info(
+    "Call the content method that should attach a custom element definition"
+  );
+  const mutated = waitForMutation(inspector, "customElementDefined");
+  SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [{ contentMethod }],
+    function (args) {
+      content.wrappedJSObject[args.contentMethod]();
+    }
+  );
+  await mutated;
+
+  // Test element should now have a custom element definition.
+
+  // Check that the badge opens the debugger.
+  customBadge = testContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-custom]"
+  );
+  ok(customBadge, "[custom] badge is visible");
+  ok(
+    !customBadge.hasAttribute("aria-pressed"),
+    "[custom] badge is not a toggle button"
+  );
+
+  info("Click on the `custom` badge and verify that the debugger opens.");
+  let onDebuggerReady = toolbox.getPanelWhenReady("jsdebugger");
+  customBadge.click();
+  await onDebuggerReady;
+
+  const debuggerContext = createDebuggerContext(toolbox);
+  await waitUntilDebuggerReady(debuggerContext);
+  ok(true, "The debugger was opened when clicking on the custom badge");
+
+  info("Switch to the inspector");
+  await toolbox.selectTool("inspector");
+
+  // Check that the debugger can be opened with the keyboard.
+  info("Press the Enter key and verify that the debugger opens.");
+  customBadge.focus();
+  onDebuggerReady = toolbox.getPanelWhenReady("jsdebugger");
+  EventUtils.synthesizeKey("VK_RETURN", {}, customBadge.ownerGlobal);
+
+  await onDebuggerReady;
+  await waitUntilDebuggerReady(debuggerContext);
+  ok(true, "The debugger was opened via the keyboard");
+
+  info("Switch to the inspector");
+  await toolbox.selectTool("inspector");
+
+  // Check that the menu item also opens the debugger.
+  menuItem = getMenuItem("node-menu-jumptodefinition", inspector);
+  ok(menuItem, selector + ": The menu item was found in the contextual menu");
+  ok(!menuItem.disabled, selector + ": The menu item is not disabled");
+
+  info("Click on `Jump to Definition` and verify that the debugger opens.");
+  onDebuggerReady = toolbox.getPanelWhenReady("jsdebugger");
+  menuItem.click();
+  await onDebuggerReady;
+
+  await waitUntilDebuggerReady(debuggerContext);
+  ok(true, "The debugger was opened via the context menu");
+
+  info("Switch to the inspector");
+  await toolbox.selectTool("inspector");
+}
+
+function getMenuItem(id, inspector) {
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  return allMenuItems.find(i => i.id === "node-menu-jumptodefinition");
+}
+
+async function waitUntilDebuggerReady(debuggerContext) {
+  info("Wait until source is loaded in the debugger");
+
+  // We have to wait until the debugger has fully loaded the source otherwise
+  // we will get unhandled promise rejections.
+  await waitForLoadedSource(debuggerContext, TEST_URL);
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger_pretty_printed.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger_pretty_printed.js
new file mode 100644
index 0000000000..30d1f0748b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger_pretty_printed.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that clicking on the "custom" badge opens the debugger to the pretty-printed
+// custom element definition.
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js",
+  this
+);
+
+const TEST_URL =
+  URL_ROOT + "doc_markup_shadowdom_open_debugger_pretty_printed.html";
+
+add_task(async function () {
+  info("Open inspector.");
+  await clearDebuggerPreferences();
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  await selectNode("test-component", inspector);
+  const testFront = await getNodeFront("test-component", inspector);
+
+  const testContainer = inspector.markup.getContainer(testFront);
+  const customBadge = testContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-custom]"
+  );
+
+  info("Click custom badge.");
+  customBadge.click();
+
+  await toolbox.getPanelWhenReady("jsdebugger");
+  const dbg = createDebuggerContext(toolbox);
+
+  await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js");
+  await waitForSelectedLocation(dbg, 1);
+
+  info("Pretty-print source.");
+  clickElement(dbg, "prettyPrintButton");
+  await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js:formatted");
+  info("Switch back to the original source.");
+  await selectSource(dbg, "shadowdom_open_debugger.min.js");
+
+  info("Return to inspector.");
+  await toolbox.selectTool("inspector");
+
+  info("Click custom badge again.");
+  customBadge.click();
+
+  await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js:formatted");
+  await waitForSelectedLocation(dbg, 5);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_shadowroot_mode.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_shadowroot_mode.js
new file mode 100644
index 0000000000..fb98b7cb35
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_shadowroot_mode.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the shadow root mode is displayed properly
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <closed-component></closed-component>
+  <open-component></open-component>
+
+  <script>
+    'use strict';
+
+    customElements.define("closed-component", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({mode: "closed"});
+      }
+    });
+
+    customElements.define("open-component", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+      }
+    });
+  </script>
+`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  info("Find and expand the closed-component shadow DOM host.");
+  const closedHostFront = await getNodeFront("closed-component", inspector);
+  const closedHostContainer = markup.getContainer(closedHostFront);
+  await expandContainer(inspector, closedHostContainer);
+
+  info("Check the shadow root mode");
+  const closedShadowRootContainer = closedHostContainer.getChildContainers()[0];
+  assertContainerHasText(closedShadowRootContainer, "#shadow-root (closed)");
+
+  info("Find and expand the open-component shadow DOM host.");
+  const openHostFront = await getNodeFront("open-component", inspector);
+  const openHostContainer = markup.getContainer(openHostFront);
+  await expandContainer(inspector, openHostContainer);
+
+  info("Check the shadow root mode");
+  const openShadowRootContainer = openHostContainer.getChildContainers()[0];
+  assertContainerHasText(openShadowRootContainer, "#shadow-root (open)");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_show_nodes_button.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_show_nodes_button.js
new file mode 100644
index 0000000000..76d542c526
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_show_nodes_button.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the "Show all 'N' nodes" button displays the proper value
+
+const NODE_COUNT = 101;
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+  </test-component>
+
+  <script>
+    'use strict';
+    for (let i = 0; i < ${NODE_COUNT}; i++) {
+      const div = document.createElement("div");
+      div.innerHTML = i;
+      document.querySelector('test-component').appendChild(div);
+    }
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  info("Find and expand the component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Expand the slot");
+  const slotContainer = shadowRootContainer.getChildContainers()[0];
+  await expandContainer(inspector, slotContainer);
+
+  info("Find the 'Show all nodes' button");
+  const button = slotContainer.elt.querySelector(
+    "button:not(.inspector-badge)"
+  );
+  ok(
+    button.innerText.includes(NODE_COUNT),
+    `'Show all nodes' button contains correct node count (expected "${button.innerText}" to include "${NODE_COUNT}")`
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotted_keyboard_focus.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotted_keyboard_focus.js
new file mode 100644
index 0000000000..bdb65a0401
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotted_keyboard_focus.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that cycling focus with keyboard (via TAB key) in slotted nodes works.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">slot1-1</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot name="slot1"></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  const win = inspector.markup.doc.defaultView;
+
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+
+  info("Expand the shadow root");
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Expand the slot");
+  const slotContainer = shadowRootContainer.getChildContainers()[0];
+  await expandContainer(inspector, slotContainer);
+
+  info("Select the slotted container for the element");
+  const node = slotContainer.getChildContainers()[0].node;
+  const container = inspector.markup.getContainer(node, true);
+  await selectNode(node, inspector, "no-reason", true);
+
+  const root = inspector.markup.getContainer(inspector.markup._rootNode);
+  root.elt.focus();
+  const tagSpan = container.elt.querySelector(".tag");
+  const revealLink = container.elt.querySelector(".reveal-link");
+
+  info("Hit Enter to focus on the first element");
+  let tagFocused = once(tagSpan, "focus");
+  EventUtils.synthesizeAndWaitKey("KEY_Enter", {}, win);
+  await tagFocused;
+
+  info("Hit Tab to focus on the next element");
+  const linkFocused = once(revealLink, "focus");
+  EventUtils.synthesizeKey("KEY_Tab", {}, win);
+  await linkFocused;
+
+  info("Hit Tab again to cycle focus to the first element");
+  tagFocused = once(tagSpan, "focus");
+  EventUtils.synthesizeKey("KEY_Tab", {}, win);
+  await tagFocused;
+
+  Assert.strictEqual(
+    inspector.markup.doc.activeElement,
+    tagSpan,
+    "Focus has gone back to first element"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js
new file mode 100644
index 0000000000..c8f6d029cb
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that slotted elements are correctly updated when the slot attribute is modified
+// on already slotted elements.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1">slot1-1</div>
+    <div slot="slot1">slot1-2</div>
+    <div slot="slot2" id="to-update">slot2-1</div>
+    <div slot="slot2">slot2-2</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot name="slot1"></slot><slot name="slot2"></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const tree = `
+    test-component
+      #shadow-root
+        name="slot1"
+          div!slotted
+          div!slotted
+        name="slot2"
+          div!slotted
+          div!slotted
+      slot1-1
+      slot1-2
+      slot2-1
+      slot2-2`;
+  await assertMarkupViewAsTree(tree, "test-component", inspector);
+
+  info("Listening for the markupmutation event");
+  const mutated = inspector.once("markupmutation");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    content.document.getElementById("to-update").setAttribute("slot", "slot1");
+  });
+  await mutated;
+
+  // After mutation we expect slot1 to have one more slotted node, and slot2 one less.
+  const mutatedTree = `
+    test-component
+      #shadow-root
+        name="slot1"
+          div!slotted
+          div!slotted
+          div!slotted
+        name="slot2"
+          div!slotted
+      slot1-1
+      slot1-2
+      slot2-1
+      slot2-2`;
+  await assertMarkupViewAsTree(mutatedTree, "test-component", inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets.js
new file mode 100644
index 0000000000..d4acaf1380
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <video id="with-children" controls>
+    <div>some content</div>
+  </video>
+  <video id="no-children" controls></video>`;
+
+add_task(async function () {
+  info("Test a <video> element with no children, showAllAnonymousContent=true");
+  const { inspector, markup } = await setup({ showAllAnonymousContent: true });
+
+  info("Find the #no-children element.");
+  const hostFront = await getNodeFront("#no-children", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  ok(
+    hostContainer.canExpand,
+    "<video controls/> has children in the markup view"
+  );
+
+  info("Expand the <video> element");
+  await expandContainer(inspector, hostContainer);
+  is(hostContainer.getChildContainers().length, 3, "video has 3 children");
+
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  assertContainerHasText(shadowRootContainer, "#shadow-root");
+});
+
+add_task(async function () {
+  info("Test a <video> element with children, showAllAnonymousContent=true");
+  const { inspector, markup } = await setup({ showAllAnonymousContent: true });
+
+  info("Find the #with-children element.");
+  const hostFront = await getNodeFront("#with-children", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  ok(
+    hostContainer.canExpand,
+    "<video controls/> has children in the markup view"
+  );
+
+  info("Expand the <video> element");
+  await expandContainer(inspector, hostContainer);
+  is(hostContainer.getChildContainers().length, 4, "video has 4 children");
+
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  assertContainerHasText(shadowRootContainer, "#shadow-root");
+
+  const divContainer = hostContainer.getChildContainers()[1];
+  assertContainerHasText(divContainer, "some content");
+});
+
+add_task(async function () {
+  info(
+    "Test a <video> element with no children, showAllAnonymousContent=false"
+  );
+  const { inspector, markup } = await setup({
+    showAllAnonymousContent: false,
+  });
+
+  info("Find the #no-children element.");
+  const hostFront = await getNodeFront("#no-children", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  ok(!hostContainer.getChildContainers(), "video has no children");
+  ok(
+    !hostContainer.canExpand,
+    "<video controls/> shows no children in the markup view"
+  );
+});
+
+add_task(async function () {
+  info("Test a <video> element with children, showAllAnonymousContent=false");
+  const { inspector, markup } = await setup({
+    showAllAnonymousContent: false,
+  });
+
+  info("Find the #with-children element.");
+  const hostFront = await getNodeFront("#with-children", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  ok(
+    hostContainer.canExpand,
+    "<video controls/> has children in the markup view"
+  );
+
+  info("Expand the <video> element");
+  await expandContainer(inspector, hostContainer);
+  is(hostContainer.getChildContainers().length, 1, "video has 1 child");
+
+  const divContainer = hostContainer.getChildContainers()[0];
+  assertContainerHasText(divContainer, "some content");
+});
+
+async function setup({ showAllAnonymousContent }) {
+  await pushPref(
+    "devtools.inspector.showAllAnonymousContent",
+    showAllAnonymousContent
+  );
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  return { inspector, markup };
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets_with_nac.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets_with_nac.js
new file mode 100644
index 0000000000..a49618e0df
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets_with_nac.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <video id="video-with-subtitles" style="border: 4px solid red">
+    <track label="en" kind="subtitles" srclang="en" src="data:text/vtt,WEBVTT" default>
+  </video>`);
+
+const TEST_ID = "#video-with-subtitles";
+
+// Test that Inspector can show Native Anonymous Content (nac) in user agent widgets, as
+// siblings of the ua widget closed shadow-root.
+add_task(async function testMarkupView() {
+  info(
+    "Test a <video> element with subtitles, expect to see native anonymous content"
+  );
+  const { inspector } = await setup();
+
+  // We should only see the shadow root, the <track> and two NAC elements <img> and <div>.
+  const tree = `
+  video
+    #shadow-root!ignore-children
+    track
+    img
+    class="caption-box"`;
+  await assertMarkupViewAsTree(tree, TEST_ID, inspector);
+});
+
+add_task(async function testElementPicker() {
+  const { inspector, markup, toolbox } = await setup();
+
+  info("Waiting for element picker to become active.");
+  await startPicker(toolbox);
+
+  info("Move mouse over the video element and pick");
+  await hoverElement(inspector, TEST_ID, 50, 50);
+  await pickElement(inspector, TEST_ID, 50, 50);
+
+  info(
+    "Check that the markup view has the expected content after using the picker"
+  );
+  const tree = `
+  body
+    video
+      #shadow-root!ignore-children
+      track
+      img
+      class="caption-box"`;
+  // We are checking body here, because initially the picker bug fixed here was replacing
+  // all the children of the body.
+  await assertMarkupViewAsTree(tree, "body", inspector);
+
+  const moreNodesLink = markup.doc.querySelector(".more-nodes");
+  ok(
+    !moreNodesLink,
+    "There is no 'more nodes' button displayed in the markup view"
+  );
+});
+
+async function setup() {
+  await pushPref("devtools.inspector.showAllAnonymousContent", true);
+
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  return { inspector, markup, toolbox };
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_subgrid_display_badge.js b/devtools/client/inspector/markup/test/browser_markup_subgrid_display_badge.js
new file mode 100644
index 0000000000..0118e5ae33
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_subgrid_display_badge.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = URL_ROOT + "doc_markup_subgrid.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { highlighters, store } = inspector;
+
+  info("Check the subgrid display badge is shown and not active.");
+  await selectNode("main", inspector);
+  const eltContainer = await getContainerForSelector("main", inspector);
+  const subgridDisplayBadge = eltContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(
+    !subgridDisplayBadge.classList.contains("active"),
+    "subgrid display badge is not active."
+  );
+  ok(
+    subgridDisplayBadge.classList.contains("interactive"),
+    "subgrid display badge is interactive."
+  );
+
+  info("Check the initial state of the grid highlighter.");
+  ok(
+    !highlighters.gridHighlighters.size,
+    "No CSS grid highlighter exists in the highlighters overlay."
+  );
+
+  info("Toggling ON the CSS grid highlighter from the subgrid display badge.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length === 2 && state.grids[1].highlighted
+  );
+  subgridDisplayBadge.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info(
+    "Check that the CSS grid highlighter is created and the display badge state."
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "CSS grid highlighter is created in the highlighters overlay."
+  );
+  ok(
+    subgridDisplayBadge.classList.contains("active"),
+    "subgrid display badge is active."
+  );
+  ok(
+    subgridDisplayBadge.classList.contains("interactive"),
+    "subgrid display badge is interactive."
+  );
+
+  info("Toggling OFF the CSS grid highlighter from the subgrid display badge.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(
+    store,
+    state => state.grids.length == 2 && !state.grids[1].highlighted
+  );
+  subgridDisplayBadge.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  ok(
+    !subgridDisplayBadge.classList.contains("active"),
+    "subgrid display badge is not active."
+  );
+  ok(
+    subgridDisplayBadge.classList.contains("interactive"),
+    "subgrid display badge is interactive."
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js b/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js
new file mode 100644
index 0000000000..620440cda7
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// After deleting a node, whitespace siblings that had an impact on the layout might no
+// longer have any impact. This tests that the markup view is correctly rendered after
+// deleting a node that triggers such a change.
+
+const HTML = `<div>
+    <p id="container">
+      <span id="before-whitespace">1</span>      <span id="after-whitespace">2</span>
+    </p>
+  </div>`;
+
+const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+add_task(async function deleteNodeAfterWhitespace() {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info(
+    "Test deleting a node that will modify the whitespace nodes rendered in the " +
+      "markup view."
+  );
+
+  await selectAndFocusNode("#after-whitespace", inspector);
+  await deleteCurrentSelection(inspector);
+
+  // TODO: There is still an issue with selection here.  When the span is deleted, the
+  // selection goes to text-node. But since the text-node gets removed from the markup
+  // view after losing its impact on the layout, the selection remains on a node which
+  // is no longer part of the markup view (but still a valid node in the content DOM).
+  const parentNodeFront = await inspector.selection.nodeFront.parentNode();
+  const nodeFront = await getNodeFront("#container", inspector);
+  is(parentNodeFront, nodeFront, "Selection is as expected after deletion");
+
+  info("Check that the node was really removed");
+  let node = await getNodeFront("#after-whitespace", inspector);
+  ok(!node, "The node can't be found in the page anymore");
+
+  info("Undo the deletion to restore the original markup");
+  await undoChange(inspector);
+  node = await getNodeFront("#after-whitespace", inspector);
+  ok(node, "The node is back");
+
+  info(
+    "Test deleting the node before the whitespace and performing an undo preserves " +
+      "the node order"
+  );
+
+  await selectAndFocusNode("#before-whitespace", inspector);
+  await deleteCurrentSelection(inspector);
+
+  info("Undo the deletion to restore the original markup");
+  await undoChange(inspector);
+  node = await getNodeFront("#before-whitespace", inspector);
+  ok(node, "The node is back");
+
+  const nextSibling = await getNodeFront("#before-whitespace + *", inspector);
+  const afterWhitespace = await getNodeFront("#after-whitespace", inspector);
+  is(
+    nextSibling,
+    afterWhitespace,
+    "Order has been preserved after restoring the node"
+  );
+});
+
+async function selectAndFocusNode(selector, inspector) {
+  info(`Select node ${selector} and make sure it is focused`);
+  await selectNode(selector, inspector);
+  await clickContainer(selector, inspector);
+}
+
+async function deleteCurrentSelection(inspector) {
+  info("Delete the node with the delete key");
+  const mutated = inspector.once("markupmutation");
+  EventUtils.sendKey("delete", inspector.panelWin);
+  await Promise.all([mutated, inspector.once("inspector-updated")]);
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
new file mode 100644
index 0000000000..7de9f90a5b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_attributes_test_runner.js */
+"use strict";
+
+// Test editing various markup-containers' attribute fields
+
+loadHelperScript("helper_attributes_test_runner.js");
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+var TEST_DATA = [
+  {
+    desc: "Change an attribute",
+    node: "#node1",
+    originalAttributes: {
+      id: "node1",
+      class: "node1",
+    },
+    name: "class",
+    value: 'class="changednode1"',
+    expectedAttributes: {
+      id: "node1",
+      class: "changednode1",
+    },
+  },
+  {
+    desc:
+      'Try changing an attribute to a quote (") - this should result ' +
+      "in it being set to an empty string",
+    node: "#node22",
+    originalAttributes: {
+      id: "node22",
+      class: "unchanged",
+    },
+    name: "class",
+    value: 'class="""',
+    expectedAttributes: {
+      id: "node22",
+      class: "",
+    },
+  },
+  {
+    desc: "Remove an attribute",
+    node: "#node4",
+    originalAttributes: {
+      id: "node4",
+      class: "node4",
+    },
+    name: "class",
+    value: "",
+    expectedAttributes: {
+      id: "node4",
+    },
+  },
+  {
+    desc: "Try add attributes by adding to an existing attribute's entry",
+    node: "#node24",
+    originalAttributes: {
+      id: "node24",
+    },
+    name: "id",
+    value: 'id="node24" class="""',
+    expectedAttributes: {
+      id: "node24",
+      class: "",
+    },
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await runEditAttributesTests(TEST_DATA, inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
new file mode 100644
index 0000000000..f86617fdf0
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that an existing attribute can be modified
+
+const TEST_URL = `data:text/html,
+                  <div id='test-div'>Test modifying my ID attribute</div>`;
+
+add_task(async function () {
+  info("Opening the inspector on the test page");
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Selecting the test node");
+  await focusNode("#test-div", inspector);
+
+  info("Verify attributes, only ID should be there for now");
+  await assertAttributes("#test-div", {
+    id: "test-div",
+  });
+
+  info("Focus the ID attribute and change its content");
+  const { editor } = await getContainerForSelector("#test-div", inspector);
+  const attr = editor.attrElements.get("id").querySelector(".editable");
+  const mutated = inspector.once("markupmutation");
+  setEditableFieldValue(
+    attr,
+    attr.textContent + ' class="newclass" style="color:green"',
+    inspector
+  );
+  await mutated;
+
+  info("Verify attributes, should have ID, class and style");
+  await assertAttributes("#test-div", {
+    id: "test-div",
+    class: "newclass",
+    style: "color:green",
+  });
+
+  info("Trying to undo the change");
+  await undoChange(inspector);
+  await assertAttributes("#test-div", {
+    id: "test-div",
+  });
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_03.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_03.js
new file mode 100644
index 0000000000..097daf4c3f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_03.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a node's tagname can be edited in the markup-view
+
+const TEST_URL = `data:text/html;charset=utf-8,
+                  <div id='retag-me'><div id='retag-me-2'></div></div>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await inspector.markup.expandAll();
+
+  info("Selecting the test node");
+  await focusNode("#retag-me", inspector);
+
+  info("Getting the markup-container for the test node");
+  let container = await getContainerForSelector("#retag-me", inspector);
+  ok(container.expanded, "The container is expanded");
+
+  is(
+    (await getContentPageElementProperty("#retag-me", "tagName")).toLowerCase(),
+    "div",
+    "We've got #retag-me element, it's a DIV"
+  );
+  is(
+    await getContentPageElementProperty("#retag-me", "childElementCount"),
+    1,
+    "#retag-me has one child"
+  );
+
+  is(
+    await getContentPageElementProperty("#retag-me > *", "id"),
+    "retag-me-2",
+    "#retag-me's only child is #retag-me-2"
+  );
+
+  info("Changing #retag-me's tagname in the markup-view");
+  const mutated = inspector.once("markupmutation");
+  const tagEditor = container.editor.tag;
+  setEditableFieldValue(tagEditor, "p", inspector);
+  await mutated;
+
+  info("Checking that the markup-container exists and is correct");
+  container = await getContainerForSelector("#retag-me", inspector);
+  ok(container.expanded, "The container is still expanded");
+  ok(container.selected, "The container is still selected");
+
+  info("Checking that the tagname change was done");
+
+  is(
+    (await getContentPageElementProperty("#retag-me", "tagName")).toLowerCase(),
+    "p",
+    "The #retag-me element is now a P"
+  );
+  is(
+    await getContentPageElementProperty("#retag-me", "childElementCount"),
+    1,
+    "#retag-me still has one child"
+  );
+  is(
+    await getContentPageElementProperty("#retag-me > *", "id"),
+    "retag-me-2",
+    "#retag-me's only child is #retag-me-2"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
new file mode 100644
index 0000000000..7a5684ba9d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a node can be deleted from the markup-view with the backspace key.
+// Also checks that after deletion the correct element is highlighted.
+// The previous sibling is preferred, but the parent is a fallback.
+
+const HTML = `<style type="text/css">
+                #pseudo::before { content: 'before'; }
+                #pseudo::after { content: 'after'; }
+              </style>
+              <div id="parent">
+                <div id="first"></div>
+                <div id="second"></div>
+                <div id="third"></div>
+              </div>
+              <div id="only-child">
+                <div id="fourth"></div>
+              </div>
+              <div id="pseudo">
+                <div id="fifth"></div>
+              </div>`;
+const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+// List of all the test cases. Each item is an object with the following props:
+// - selector: the css selector of the node that should be selected
+// - focusedSelector: the css selector of the node we expect to be selected as
+//   a result of the deletion
+// - pseudo: (optional) if the focused node is actually supposed to be a pseudo element
+//   of the specified selector.
+// Note that after each test case, undo is called.
+const TEST_DATA = [
+  {
+    selector: "#first",
+    focusedSelector: "#second",
+  },
+  {
+    selector: "#second",
+    focusedSelector: "#first",
+  },
+  {
+    selector: "#third",
+    focusedSelector: "#second",
+  },
+  {
+    selector: "#fourth",
+    focusedSelector: "#only-child",
+  },
+  {
+    selector: "#fifth",
+    focusedSelector: "#pseudo",
+    pseudo: "before",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const data of TEST_DATA) {
+    await checkDeleteAndSelection(inspector, "back_space", data);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-delete.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-delete.js
new file mode 100644
index 0000000000..67504e319f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-delete.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a node can be deleted from the markup-view with the delete key.
+// Also checks that after deletion the correct element is highlighted.
+// The next sibling is preferred, but the parent is a fallback.
+
+const HTML = `<style type="text/css">
+                #pseudo::before { content: 'before'; }
+                #pseudo::after { content: 'after'; }
+              </style>
+              <div id="parent">
+                <div id="first"></div>
+                <div id="second"></div>
+                <div id="third"></div>
+              </div>
+              <div id="only-child">
+                <div id="fourth"></div>
+              </div>
+              <div id="pseudo">
+                <div id="fifth"></div>
+              </div>`;
+const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+// List of all the test cases. Each item is an object with the following props:
+// - selector: the css selector of the node that should be selected
+// - focusedSelector: the css selector of the node we expect to be selected as
+//   a result of the deletion
+// - pseudo: (optional) if the focused node is actually supposed to be a pseudo element
+//   of the specified selector.
+// Note that after each test case, undo is called.
+const TEST_DATA = [
+  {
+    selector: "#first",
+    focusedSelector: "#second",
+  },
+  {
+    selector: "#second",
+    focusedSelector: "#third",
+  },
+  {
+    selector: "#third",
+    focusedSelector: "#second",
+  },
+  {
+    selector: "#fourth",
+    focusedSelector: "#only-child",
+  },
+  {
+    selector: "#fifth",
+    focusedSelector: "#pseudo",
+    pseudo: "after",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const data of TEST_DATA) {
+    await checkDeleteAndSelection(inspector, "delete", data);
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_05.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_05.js
new file mode 100644
index 0000000000..37a2d2b4c3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_05.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_attributes_test_runner.js */
+"use strict";
+
+// Tests that adding various types of attributes to nodes in the markup-view
+// works as expected. Also checks that the changes are properly undoable and
+// redoable. For each step in the test, we:
+// - Create a new DIV
+// - Make the change, check that the change was made as we expect
+// - Undo the change, check that the node is back in its original state
+// - Redo the change, check that the node change was made again correctly.
+
+loadHelperScript("helper_attributes_test_runner.js");
+
+var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
+var TEST_DATA = [
+  {
+    desc: 'Add an attribute value without closing "',
+    text: 'style="display: block;',
+    expectedAttributes: {
+      style: "display: block;",
+    },
+  },
+  {
+    desc: "Add an attribute value without closing '",
+    text: "style='display: inline;",
+    expectedAttributes: {
+      style: "display: inline;",
+    },
+  },
+  {
+    desc: "Add an attribute wrapped with with double quotes double quote in it",
+    text: 'style="display: "inline',
+    expectedAttributes: {
+      style: "display: ",
+      inline: "",
+    },
+  },
+  {
+    desc: "Add an attribute wrapped with single quotes with single quote in it",
+    text: "style='display: 'inline",
+    expectedAttributes: {
+      style: "display: ",
+      inline: "",
+    },
+  },
+  {
+    desc: "Add an attribute with no value",
+    text: "disabled",
+    expectedAttributes: {
+      disabled: "",
+    },
+  },
+  {
+    desc: "Add multiple attributes with no value",
+    text: "disabled autofocus",
+    expectedAttributes: {
+      disabled: "",
+      autofocus: "",
+    },
+  },
+  {
+    desc: "Add multiple attributes with no value, and some with value",
+    text: "disabled name='name' data-test='test' autofocus",
+    expectedAttributes: {
+      disabled: "",
+      autofocus: "",
+      name: "name",
+      "data-test": "test",
+    },
+  },
+  {
+    desc: "Add attribute with xmlns",
+    text: "xmlns:edi='http://ecommerce.example.org/schema'",
+    expectedAttributes: {
+      "xmlns:edi": "http://ecommerce.example.org/schema",
+    },
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await runAddAttributesTests(TEST_DATA, "div", inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_06.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_06.js
new file mode 100644
index 0000000000..55a329905a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_06.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_attributes_test_runner.js */
+"use strict";
+
+// Tests that adding various types of attributes to nodes in the markup-view
+// works as expected. Also checks that the changes are properly undoable and
+// redoable. For each step in the test, we:
+// - Create a new DIV
+// - Make the change, check that the change was made as we expect
+// - Undo the change, check that the node is back in its original state
+// - Redo the change, check that the node change was made again correctly.
+
+loadHelperScript("helper_attributes_test_runner.js");
+
+var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
+var TEST_DATA = [
+  {
+    desc: "Mixed single and double quotes",
+    text: "name=\"hi\" maxlength='not a number'",
+    expectedAttributes: {
+      maxlength: "not a number",
+      name: "hi",
+    },
+  },
+  {
+    desc: "Invalid attribute name",
+    text: "x='y' <why-would-you-do-this>=\"???\"",
+    expectedAttributes: {
+      x: "y",
+    },
+  },
+  {
+    desc: "Double quote wrapped in single quotes",
+    text: "x='h\"i'",
+    expectedAttributes: {
+      x: 'h"i',
+    },
+  },
+  {
+    desc: "Single quote wrapped in double quotes",
+    text: 'x="h\'i"',
+    expectedAttributes: {
+      x: "h'i",
+    },
+  },
+  {
+    desc: "No quote wrapping",
+    text: "a=b x=y data-test=Some spaced data",
+    expectedAttributes: {
+      a: "b",
+      x: "y",
+      "data-test": "Some",
+      spaced: "",
+      data: "",
+    },
+  },
+  {
+    desc: "Duplicate Attributes",
+    text: "a=b a='c' a=\"d\"",
+    expectedAttributes: {
+      a: "b",
+    },
+  },
+  {
+    desc: "Inline styles",
+    text: "style=\"font-family: 'Lucida Grande', sans-serif; font-size: 75%;\"",
+    expectedAttributes: {
+      style: "font-family: 'Lucida Grande', sans-serif; font-size: 75%;",
+    },
+  },
+  {
+    desc: "Object attribute names",
+    text: 'toString="true" hasOwnProperty="false"',
+    expectedAttributes: {
+      tostring: "true",
+      hasownproperty: "false",
+    },
+  },
+  {
+    desc: "Add event handlers",
+    text:
+      "onclick=\"javascript: throw new Error('wont fire');\" " +
+      "onload=\"alert('here');\"",
+    expectedAttributes: {
+      onclick: "javascript: throw new Error('wont fire');",
+      onload: "alert('here');",
+    },
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await runAddAttributesTests(TEST_DATA, "div", inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
new file mode 100644
index 0000000000..38f7361725
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
@@ -0,0 +1,152 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_attributes_test_runner.js */
+"use strict";
+
+// One more test testing various add-attributes configurations
+// Some of the test data below asserts that long attributes get collapsed
+
+loadHelperScript("helper_attributes_test_runner.js");
+
+/*eslint-disable */
+const LONG_ATTRIBUTE =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const LONG_ATTRIBUTE_COLLAPSED =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEF\u2026UVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const DATA_URL_INLINE_STYLE =
+  'color: red; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC");';
+const DATA_URL_INLINE_STYLE_COLLAPSED =
+  'color: red; background: url("data:image/png;base64,iVBORw0KG\u2026NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC");';
+const DATA_URL_ATTRIBUTE =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC";
+const DATA_URL_ATTRIBUTE_COLLAPSED =
+  "data:image/png;base64,iVBORw0K\u20269/AFGGFyjOXZtQAAAAAElFTkSuQmCC";
+/* eslint-enable */
+
+var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
+var TEST_DATA = [
+  {
+    desc: "Add an attribute value containing < > &uuml; \" & '",
+    text: "src=\"somefile.html?param1=<a>&param2=&uuml;&param3='&quot;'\"",
+    expectedAttributes: {
+      src: "somefile.html?param1=<a>&param2=\xfc&param3='\"'",
+    },
+  },
+  {
+    desc: "Add an attribute by clicking the empty space after a node",
+    text: 'class="newclass" style="color:green"',
+    expectedAttributes: {
+      class: "newclass",
+      style: "color:green",
+    },
+  },
+  {
+    desc:
+      'Try add an attribute containing a quote (") attribute by ' +
+      "clicking the empty space after a node - this should result " +
+      "in it being set to an empty string",
+    text: 'class="newclass" style="""',
+    expectedAttributes: {
+      class: "newclass",
+      style: "",
+    },
+  },
+  {
+    desc:
+      "Try to add long data URL to make sure it is collapsed in attribute " +
+      "editor.",
+    text: `style='${DATA_URL_INLINE_STYLE}'`,
+    expectedAttributes: {
+      style: DATA_URL_INLINE_STYLE,
+    },
+    validate: (container, inspector) => {
+      const editor = container.editor;
+      const visibleAttrText = editor.attrElements
+        .get("style")
+        .querySelector(".attr-value").textContent;
+      is(visibleAttrText, DATA_URL_INLINE_STYLE_COLLAPSED);
+    },
+  },
+  {
+    desc:
+      "Try to add long attribute to make sure it is collapsed in attribute " +
+      "editor.",
+    text: `data-long="${LONG_ATTRIBUTE}"`,
+    expectedAttributes: {
+      "data-long": LONG_ATTRIBUTE,
+    },
+    validate: (container, inspector) => {
+      const editor = container.editor;
+      const visibleAttrText = editor.attrElements
+        .get("data-long")
+        .querySelector(".attr-value").textContent;
+      is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED);
+    },
+  },
+  {
+    desc:
+      "Try to add long data URL to make sure it is collapsed in attribute " +
+      "editor.",
+    text: `src="${DATA_URL_ATTRIBUTE}"`,
+    expectedAttributes: {
+      src: DATA_URL_ATTRIBUTE,
+    },
+    validate: (container, inspector) => {
+      const editor = container.editor;
+      const visibleAttrText = editor.attrElements
+        .get("src")
+        .querySelector(".attr-value").textContent;
+      is(visibleAttrText, DATA_URL_ATTRIBUTE_COLLAPSED);
+    },
+  },
+  {
+    desc:
+      "Try to add long attribute with collapseAttributes == false" +
+      "to make sure it isn't collapsed in attribute editor.",
+    text: `data-long="${LONG_ATTRIBUTE}"`,
+    expectedAttributes: {
+      "data-long": LONG_ATTRIBUTE,
+    },
+    setUp(inspector) {
+      Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
+    },
+    validate: (container, inspector) => {
+      const editor = container.editor;
+      const visibleAttrText = editor.attrElements
+        .get("data-long")
+        .querySelector(".attr-value").textContent;
+      is(visibleAttrText, LONG_ATTRIBUTE);
+    },
+    tearDown(inspector) {
+      Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
+    },
+  },
+  {
+    desc: "Try to collapse attributes with collapseAttributeLength == 5",
+    text: `data-long="${LONG_ATTRIBUTE}"`,
+    expectedAttributes: {
+      "data-long": LONG_ATTRIBUTE,
+    },
+    setUp(inspector) {
+      Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
+    },
+    validate: (container, inspector) => {
+      const firstChar = LONG_ATTRIBUTE[0];
+      const lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1];
+      const collapsed = firstChar + "\u2026" + lastChar;
+      const editor = container.editor;
+      const visibleAttrText = editor.attrElements
+        .get("data-long")
+        .querySelector(".attr-value").textContent;
+      is(visibleAttrText, collapsed);
+    },
+    tearDown(inspector) {
+      Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
+    },
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await runAddAttributesTests(TEST_DATA, "div", inspector);
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js
new file mode 100644
index 0000000000..9a6fef1db9
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js
@@ -0,0 +1,140 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing various markup-containers' attribute fields, in particular
+// attributes with long values and quotes
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+/*eslint-disable */
+const LONG_ATTRIBUTE =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const LONG_ATTRIBUTE_COLLAPSED =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEF\u2026UVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+/* eslint-enable */
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await inspector.markup.expandAll();
+  await testCollapsedLongAttribute(inspector);
+  await testModifyInlineStyleWithQuotes(inspector);
+  await testEditingAttributeWithMixedQuotes(inspector);
+});
+
+async function testCollapsedLongAttribute(inspector) {
+  info("Try to modify the collapsed long attribute, making sure it expands.");
+
+  info("Adding test attributes to the node");
+  let onMutation = inspector.once("markupmutation");
+  await setContentPageElementAttribute("#node24", "class", "");
+  await onMutation;
+
+  onMutation = inspector.once("markupmutation");
+  await setContentPageElementAttribute("#node24", "data-long", LONG_ATTRIBUTE);
+  await onMutation;
+
+  await assertAttributes("#node24", {
+    id: "node24",
+    class: "",
+    "data-long": LONG_ATTRIBUTE,
+  });
+
+  const { editor } = await focusNode("#node24", inspector);
+  const attr = editor.attrElements.get("data-long").querySelector(".editable");
+
+  // Check to make sure it has expanded after focus
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  const input = inplaceEditor(attr).input;
+  is(input.value, `data-long="${LONG_ATTRIBUTE}"`);
+  EventUtils.sendKey("escape", inspector.panelWin);
+
+  setEditableFieldValue(attr, input.value + ' data-short="ABC"', inspector);
+  await inspector.once("markupmutation");
+
+  const visibleAttrText = editor.attrElements
+    .get("data-long")
+    .querySelector(".attr-value").textContent;
+  is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED);
+
+  await assertAttributes("#node24", {
+    id: "node24",
+    class: "",
+    "data-long": LONG_ATTRIBUTE,
+    "data-short": "ABC",
+  });
+}
+
+async function testModifyInlineStyleWithQuotes(inspector) {
+  info('Modify inline style containing "');
+
+  await assertAttributes("#node26", {
+    id: "node26",
+    style:
+      'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");',
+  });
+
+  const onMutated = inspector.once("markupmutation");
+  const { editor } = await focusNode("#node26", inspector);
+  const attr = editor.attrElements.get("style").querySelector(".editable");
+
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  const input = inplaceEditor(attr).input;
+  let value = input.value;
+
+  is(
+    value,
+    "style='background-image: url(\"moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F\");'",
+    "Value contains actual double quotes"
+  );
+
+  value = value.replace(/mozilla\.org/, "mozilla.com");
+  input.value = value;
+
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  await onMutated;
+
+  await assertAttributes("#node26", {
+    id: "node26",
+    style:
+      'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.com%2F");',
+  });
+}
+
+async function testEditingAttributeWithMixedQuotes(inspector) {
+  info("Modify class containing \" and '");
+
+  await assertAttributes("#node27", {
+    id: "node27",
+    class: "Double \" and single '",
+  });
+
+  const onMutated = inspector.once("markupmutation");
+  const { editor } = await focusNode("#node27", inspector);
+  const attr = editor.attrElements.get("class").querySelector(".editable");
+
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  const input = inplaceEditor(attr).input;
+  let value = input.value;
+
+  is(value, 'class="Double &quot; and single \'"', "Value contains &quot;");
+
+  value = value.replace(/Double/, "&quot;").replace(/single/, "'");
+  input.value = value;
+
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  await onMutated;
+
+  await assertAttributes("#node27", {
+    id: "node27",
+    class: "\" \" and ' '",
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_09.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_09.js
new file mode 100644
index 0000000000..56a7007a4d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_09.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing a mixed-case attribute preserves the case
+
+const TEST_URL = URL_ROOT + "doc_markup_svg_attributes.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await inspector.markup.expandAll();
+  await selectNode("svg", inspector);
+
+  await testWellformedMixedCase(inspector);
+  await testMalformedMixedCase(inspector);
+});
+
+async function testWellformedMixedCase(inspector) {
+  info(
+    "Modifying a mixed-case attribute, " +
+      "expecting the attribute's case to be preserved"
+  );
+
+  info("Listening to markup mutations");
+  const onMutated = inspector.once("markupmutation");
+
+  info("Focusing the viewBox attribute editor");
+  const { editor } = await focusNode("svg", inspector);
+  const attr = editor.attrElements.get("viewBox").querySelector(".editable");
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  info("Editing the attribute value and waiting for the mutation event");
+  const input = inplaceEditor(attr).input;
+  input.value = 'viewBox="0 0 1 1"';
+  EventUtils.sendKey("return", inspector.panelWin);
+  await onMutated;
+
+  await assertAttributes("svg", {
+    viewBox: "0 0 1 1",
+    width: "200",
+    height: "200",
+  });
+}
+
+async function testMalformedMixedCase(inspector) {
+  info(
+    "Modifying a malformed, mixed-case attribute, " +
+      "expecting the attribute's case to be preserved"
+  );
+
+  info("Listening to markup mutations");
+  const onMutated = inspector.once("markupmutation");
+
+  info("Focusing the viewBox attribute editor");
+  const { editor } = await focusNode("svg", inspector);
+  const attr = editor.attrElements.get("viewBox").querySelector(".editable");
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  info("Editing the attribute value and waiting for the mutation event");
+  const input = inplaceEditor(attr).input;
+  input.value = 'viewBox="<>"';
+  EventUtils.sendKey("return", inspector.panelWin);
+  await onMutated;
+
+  await assertAttributes("svg", {
+    viewBox: "<>",
+    width: "200",
+    height: "200",
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_10.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_10.js
new file mode 100644
index 0000000000..720a6f3062
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_10.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that invalid tagname updates are handled correctly
+
+const TEST_URL = "data:text/html;charset=utf-8,<div></div>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await inspector.markup.expandAll();
+
+  info("Updating the DIV tagname to an invalid value");
+  const container = await focusNode("div", inspector);
+  const onCancelReselect = inspector.markup.once("canceledreselectonremoved");
+  const tagEditor = container.editor.tag;
+  setEditableFieldValue(tagEditor, "<<<", inspector);
+  await onCancelReselect;
+  ok(true, "The markup-view emitted the canceledreselectonremoved event");
+  is(
+    inspector.selection.nodeFront,
+    container.node,
+    "The test DIV is still selected"
+  );
+
+  info("Updating the DIV tagname to a valid value this time");
+  const onReselect = inspector.markup.once("reselectedonremoved");
+  setEditableFieldValue(tagEditor, "span", inspector);
+  await onReselect;
+  ok(true, "The markup-view emitted the reselectedonremoved event");
+
+  const spanFront = await getNodeFront("span", inspector);
+  is(
+    inspector.selection.nodeFront,
+    spanFront,
+    "The selected node is now the SPAN"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_11.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_11.js
new file mode 100644
index 0000000000..7e30ffe056
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_11.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Bug 1090874 - Tests that a node is not recreated when it's tagname editor
+// is blurred and no changes were done.
+
+const TEST_URL = "data:text/html;charset=utf-8,<div></div>";
+
+add_task(async function () {
+  let isEditTagNameCalled = false;
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  // Overriding the editTagName walkerActor method here to check that it isn't
+  // called when blurring the tagname field.
+  inspector.walker.editTagName = function () {
+    isEditTagNameCalled = true;
+  };
+
+  const container = await focusNode("div", inspector);
+  const tagEditor = container.editor.tag;
+
+  info("Blurring the tagname field");
+  tagEditor.blur();
+  is(isEditTagNameCalled, false, "The editTagName method wasn't called");
+
+  info("Updating the tagname to uppercase");
+  await focusNode("div", inspector);
+  setEditableFieldValue(tagEditor, "DIV", inspector);
+  is(isEditTagNameCalled, false, "The editTagName method wasn't called");
+
+  info("Updating the tagname to a different value");
+  setEditableFieldValue(tagEditor, "SPAN", inspector);
+  is(isEditTagNameCalled, true, "The editTagName method was called");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_12.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_12.js
new file mode 100644
index 0000000000..64f9e9d57a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_12.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that focus position is correct when tabbing through and editing
+// attributes.
+
+const TEST_URL =
+  "data:text/html;charset=utf8," +
+  "<div id='attr' a='1' b='2' c='3'></div>" +
+  "<div id='delattr' tobeinvalid='1' last='2'></div>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await testAttributeEditing(inspector);
+  await testAttributeDeletion(inspector);
+});
+
+async function testAttributeEditing(inspector) {
+  info("Testing focus position after attribute editing");
+
+  info("Setting the first non-id attribute in edit mode");
+  // focuses id
+  await activateFirstAttribute("#attr", inspector);
+  // focuses the first attr after id
+  collapseSelectionAndTab(inspector);
+
+  const attrs = await getAttributesFromEditor("#attr", inspector);
+
+  info(
+    "Editing this attribute, keeping the same name, " +
+      "and tabbing to the next"
+  );
+  await editAttributeAndTab(attrs[1] + '="99"', inspector);
+  checkFocusedAttribute(attrs[2], true);
+
+  info(
+    "Editing the new focused attribute, keeping the name, " +
+      "and tabbing to the previous"
+  );
+  await editAttributeAndTab(attrs[2] + '="99"', inspector, true);
+  checkFocusedAttribute(attrs[1], true);
+
+  info("Editing attribute name, changes attribute order");
+  await editAttributeAndTab("d='4'", inspector);
+  checkFocusedAttribute("id", true);
+
+  // Escape of the currently focused field for the next test
+  EventUtils.sendKey("escape", inspector.panelWin);
+}
+
+async function testAttributeDeletion(inspector) {
+  info("Testing focus position after attribute deletion");
+
+  info("Setting the first non-id attribute in edit mode");
+  // focuses id
+  await activateFirstAttribute("#delattr", inspector);
+  // focuses the first attr after id
+  collapseSelectionAndTab(inspector);
+
+  const attrs = await getAttributesFromEditor("#delattr", inspector);
+
+  info("Entering an invalid attribute to delete the attribute");
+  await editAttributeAndTab('"', inspector);
+  checkFocusedAttribute(attrs[2], true);
+
+  info("Deleting the last attribute");
+  await editAttributeAndTab(" ", inspector);
+
+  // Check we're on the newattr element
+  const focusedAttr = Services.focus.focusedElement;
+  ok(
+    focusedAttr.classList.contains("styleinspector-propertyeditor"),
+    "in newattr"
+  );
+  is(focusedAttr.tagName, "textarea", "newattr is active");
+}
+
+async function editAttributeAndTab(newValue, inspector, goPrevious) {
+  const onEditMutation = inspector.markup.once("refocusedonedit");
+  inspector.markup.doc.activeElement.value = newValue;
+  if (goPrevious) {
+    EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, inspector.panelWin);
+  } else {
+    EventUtils.sendKey("tab", inspector.panelWin);
+  }
+  await onEditMutation;
+}
+
+/**
+ * Given a markup container, focus and turn in edit mode its first attribute
+ * field.
+ */
+async function activateFirstAttribute(container, inspector) {
+  const { editor } = await focusNode(container, inspector);
+  editor.tag.focus();
+
+  // Go to "id" attribute and trigger edit mode.
+  EventUtils.sendKey("tab", inspector.panelWin);
+  EventUtils.sendKey("return", inspector.panelWin);
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_13-other.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_13-other.js
new file mode 100644
index 0000000000..50c657eb5f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_13-other.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that doesn't fit into any specific category.
+
+const TEST_URL = `data:text/html;charset=utf8,
+                  <div a b id='order' c class></div>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await testOriginalAttributesOrder(inspector);
+  await testOrderAfterAttributeChange(inspector);
+});
+
+async function testOriginalAttributesOrder(inspector) {
+  info("Testing order of attributes on initial node render");
+
+  const attributes = await getAttributesFromEditor("#order", inspector);
+  ok(isEqual(attributes, ["id", "class", "a", "b", "c"]), "ordered correctly");
+}
+
+async function testOrderAfterAttributeChange(inspector) {
+  info("Testing order of attributes after attribute is change by setAttribute");
+
+  await setContentPageElementAttribute("#order", "a", "changed");
+
+  const attributes = await getAttributesFromEditor("#order", inspector);
+  ok(
+    isEqual(attributes, ["id", "class", "a", "b", "c"]),
+    "order isn't changed"
+  );
+}
+
+function isEqual(a, b) {
+  return a.toString() === b.toString();
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_avoid_refocus.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_avoid_refocus.js
new file mode 100644
index 0000000000..ae6bd4c0ca
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_avoid_refocus.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Bug 1327683 - Tests that an editable attribute is not refocused
+// when the focus has been moved to an other element than the editor.
+
+const TEST_URL = 'data:text/html,<body class="abcd"></body>';
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await selectNode(".abcd", inspector);
+  await clickContainer(".abcd", inspector);
+
+  const container = await focusNode(".abcd", inspector);
+  ok(container && container.editor, "The markup-container was found");
+
+  info("Listening for the markupmutation event");
+  const nodeMutated = inspector.once("markupmutation");
+  const attr = container.editor.attrElements
+    .get("class")
+    .querySelector(".editable");
+
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  const input = inplaceEditor(attr).input;
+  ok(input, "Found editable field for class attribute");
+
+  input.value = 'class="wxyz"';
+
+  const onFocus = once(inspector.searchBox, "focus");
+  EventUtils.synthesizeMouseAtCenter(
+    inspector.searchBox,
+    {},
+    inspector.panelWin
+  );
+
+  info("Wait for the focus event on search box");
+  await onFocus;
+
+  info("Wait for the markup-mutation event");
+  await nodeMutated;
+
+  is(
+    inspector.panelDoc.activeElement,
+    inspector.searchBox,
+    "The currently focused element is the search box"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_long-classname.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_long-classname.js
new file mode 100644
index 0000000000..f30bc23de4
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_long-classname.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing long classnames shows the whole class attribute without scrollbars.
+
+const classname =
+  "this-long-class-attribute-should-be-displayed " +
+  "without-overflow-when-switching-to-edit-mode " +
+  "AAAAAAAAAAAA-BBBBBBBBBBBBB-CCCCCCCCCCCCC-DDDDDDDDDDDDDD-EEEEEEEEEEEEE";
+const TEST_URL = `data:text/html;charset=utf8, <div class="${classname}"></div>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await selectNode("div", inspector);
+  await clickContainer("div", inspector);
+
+  const container = await focusNode("div", inspector);
+  ok(container && container.editor, "The markup-container was found");
+
+  info("Listening for the markupmutation event");
+  const nodeMutated = inspector.once("markupmutation");
+  const attr = container.editor.attrElements
+    .get("class")
+    .querySelector(".editable");
+
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  const input = inplaceEditor(attr).input;
+  ok(input, "Found editable field for class attribute");
+
+  is(
+    input.scrollHeight,
+    input.clientHeight,
+    "input should not have vertical scrollbars"
+  );
+  is(
+    input.scrollWidth,
+    input.clientWidth,
+    "input should not have horizontal scrollbars"
+  );
+  input.value = 'class="other value"';
+
+  info("Commit the new class value");
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  info("Wait for the markup-mutation event");
+  await nodeMutated;
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_template.js b/devtools/client/inspector/markup/test/browser_markup_template.js
new file mode 100644
index 0000000000..8516d59346
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_template.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the markup view displaying the content of a <template> tag.
+
+add_task(async function () {
+  const TEST_URL =
+    `data:text/html;charset=utf-8,` +
+    encodeURIComponent(`
+    <div id="root">
+      <template>
+        <p>template content</p>
+      </template>
+
+      <div id="template-container" style="border: 1px solid black"></div>
+    </div>
+    <script>
+      "use strict";
+
+      const template = document.querySelector("template");
+      const clone = document.importNode(template.content, true);
+      document.querySelector("#template-container").appendChild(clone);
+    </script>`);
+
+  const EXPECTED_TREE = `
+    root
+      template
+        #document-fragment
+          p
+      template-container
+        p`;
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  await assertMarkupViewAsTree(EXPECTED_TREE, "#root", inspector);
+
+  info("Select the p element under the template .");
+  const templateFront = await getNodeFront("template", inspector);
+  const templateContainer = markup.getContainer(templateFront);
+  const documentFragmentContainer = templateContainer.getChildContainers()[0];
+  const pContainer = documentFragmentContainer.getChildContainers()[0];
+
+  await selectNode(pContainer.node, inspector, "no-reason", false);
+
+  const ruleView = inspector.getPanel("ruleview").view;
+  // We only display the style attribute.
+  is(
+    ruleView.element.querySelectorAll(".ruleview-rule").length,
+    1,
+    "No rules are displayed for this p element"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_textcontent_display.js b/devtools/client/inspector/markup/test/browser_markup_textcontent_display.js
new file mode 100644
index 0000000000..c250e02892
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_textcontent_display.js
@@ -0,0 +1,123 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the rendering of text nodes in the markup view.
+
+const LONG_VALUE =
+  "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do " +
+  "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.";
+const SCHEMA = "data:text/html;charset=UTF-8,";
+const TEST_URL = `${SCHEMA}<!DOCTYPE html>
+  <html>
+  <body>
+    <div id="shorttext">Short text</div>
+    <div id="longtext">${LONG_VALUE}</div>
+    <div id="shortcomment"><!--Short comment--></div>
+    <div id="longcomment"><!--${LONG_VALUE}--></div>
+    <div id="shorttext-and-node">Short text<span>Other element</span></div>
+    <div id="longtext-and-node">${LONG_VALUE}<span>Other element</span></div>
+  </body>
+  </html>`;
+
+const TEST_DATA = [
+  {
+    desc: "Test node containing a short text, short text nodes can be inlined.",
+    selector: "#shorttext",
+    inline: true,
+    value: "Short text",
+  },
+  {
+    desc: "Test node containing a long text, long text nodes are not inlined.",
+    selector: "#longtext",
+    inline: false,
+    value: LONG_VALUE,
+  },
+  {
+    desc: "Test node containing a short comment, comments are not inlined.",
+    selector: "#shortcomment",
+    inline: false,
+    value: "Short comment",
+  },
+  {
+    desc: "Test node containing a long comment, comments are not inlined.",
+    selector: "#longcomment",
+    inline: false,
+    value: LONG_VALUE,
+  },
+  {
+    desc: "Test node containing a short text and a span.",
+    selector: "#shorttext-and-node",
+    inline: false,
+    value: "Short text",
+  },
+  {
+    desc: "Test node containing a long text and a span.",
+    selector: "#longtext-and-node",
+    inline: false,
+    value: LONG_VALUE,
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const data of TEST_DATA) {
+    await checkNode(inspector, data);
+  }
+});
+
+async function checkNode(inspector, { desc, selector, inline, value }) {
+  info(desc);
+
+  const container = await getContainerForSelector(selector, inspector);
+  const nodeValue = await getFirstChildNodeValue(selector);
+  is(nodeValue, value, "The test node's text content is correct");
+
+  is(
+    !!container.inlineTextChild,
+    inline,
+    "Container inlineTextChild is as expected"
+  );
+  is(
+    !container.canExpand,
+    inline,
+    "Container canExpand property is as expected"
+  );
+
+  let textContainer;
+  if (inline) {
+    textContainer = container.elt.querySelector("pre");
+    ok(
+      !!textContainer,
+      "Text container is already rendered for inline text elements"
+    );
+    ok(
+      textContainer.parentNode.previousSibling.previousSibling.classList.contains(
+        "open"
+      ),
+      "Text container is after the open tag"
+    );
+    ok(
+      textContainer.parentNode.nextSibling.classList.contains("close"),
+      "Text container is before the close tag"
+    );
+  } else {
+    textContainer = container.elt.querySelector("pre");
+    ok(
+      !textContainer,
+      "Text container is not rendered for collapsed text nodes"
+    );
+    await inspector.markup.expandNode(container.node);
+    await waitForMultipleChildrenUpdates(inspector);
+
+    textContainer = container.elt.querySelector("pre");
+    ok(
+      !!textContainer,
+      "Text container is rendered after expanding the container"
+    );
+  }
+
+  is(textContainer.textContent, value, "The complete text node is rendered.");
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_01.js b/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_01.js
new file mode 100644
index 0000000000..82b6bb7b98
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_01.js
@@ -0,0 +1,110 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing a node's text content
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+const {
+  DEFAULT_VALUE_SUMMARY_LENGTH,
+} = require("resource://devtools/server/actors/inspector/walker.js");
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Expanding all nodes");
+  await inspector.markup.expandAll();
+  await waitForMultipleChildrenUpdates(inspector);
+
+  await editContainer(inspector, {
+    selector: ".node6",
+    newValue: "New text",
+    oldValue: "line6",
+  });
+
+  await editContainer(inspector, {
+    selector: "#node17",
+    newValue:
+      "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
+      "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
+    oldValue:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+      "Donec posuere placerat magna et imperdiet.",
+  });
+
+  await editContainer(inspector, {
+    selector: "#node17",
+    newValue: "New value",
+    oldValue:
+      "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
+      "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
+  });
+
+  await editContainer(inspector, {
+    selector: "#node17",
+    newValue:
+      "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
+      "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
+    oldValue: "New value",
+  });
+});
+
+async function editContainer(inspector, { selector, newValue, oldValue }) {
+  let nodeValue = await getFirstChildNodeValue(selector);
+  is(nodeValue, oldValue, "The test node's text content is correct");
+
+  info("Changing the text content");
+  const onMutated = inspector.once("markupmutation");
+  const container = await focusNode(selector, inspector);
+
+  const isOldValueInline = oldValue.length <= DEFAULT_VALUE_SUMMARY_LENGTH;
+  is(
+    !!container.inlineTextChild,
+    isOldValueInline,
+    "inlineTextChild is as expected"
+  );
+  is(
+    !container.canExpand,
+    isOldValueInline,
+    "canExpand property is as expected"
+  );
+
+  const field = container.elt.querySelector("pre");
+  is(
+    field.textContent,
+    oldValue,
+    "The text node has the correct original value after selecting"
+  );
+  setEditableFieldValue(field, newValue, inspector);
+
+  info("Listening to the markupmutation event");
+  await onMutated;
+
+  nodeValue = await getFirstChildNodeValue(selector);
+  is(nodeValue, newValue, "The test node's text content has changed");
+
+  const isNewValueInline = newValue.length <= DEFAULT_VALUE_SUMMARY_LENGTH;
+  is(
+    !!container.inlineTextChild,
+    isNewValueInline,
+    "inlineTextChild is as expected"
+  );
+  is(
+    !container.canExpand,
+    isNewValueInline,
+    "canExpand property is as expected"
+  );
+
+  if (isOldValueInline != isNewValueInline) {
+    is(
+      container.expanded,
+      !isNewValueInline,
+      "Container was automatically expanded/collapsed"
+    );
+  }
+
+  info("Selecting the <body> to reset the selection");
+  const bodyContainer = await getContainerForSelector("body", inspector);
+  inspector.markup.markNodeAsSelected(bodyContainer.node);
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_02.js b/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_02.js
new file mode 100644
index 0000000000..e099186e36
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_02.js
@@ -0,0 +1,121 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that using UP/DOWN next to a number when editing a text node does not
+// increment or decrement but simply navigates inside the editable field.
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+const SELECTOR = ".node6";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Expanding all nodes");
+  await inspector.markup.expandAll();
+  await waitForMultipleChildrenUpdates(inspector);
+
+  let nodeValue = await getFirstChildNodeValue(SELECTOR);
+  let expectedValue = "line6";
+  is(nodeValue, expectedValue, "The test node's text content is correct");
+
+  info("Open editable field for .node6");
+  const container = await focusNode(SELECTOR, inspector);
+  const field = container.elt.querySelector("pre");
+  field.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  const editor = inplaceEditor(field);
+
+  info("Initially, all the input content should be selected");
+  checkSelectionPositions(editor, 0, expectedValue.length);
+
+  info("Navigate using 'RIGHT': move the caret to the end");
+  await sendKey("VK_RIGHT", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Navigate using 'DOWN': no effect, already at the end");
+  await sendKey("VK_DOWN", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Navigate using 'UP': move to the start");
+  await sendKey("VK_UP", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, 0, 0);
+
+  info("Navigate using 'DOWN': move to the end");
+  await sendKey("VK_DOWN", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Type 'b' in the editable field");
+  await sendKey("b", {}, editor, inspector.panelWin);
+  expectedValue += "b";
+  is(editor.input.value, expectedValue, "Value should be updated");
+
+  info("Type 'a' in the editable field");
+  await sendKey("a", {}, editor, inspector.panelWin);
+  expectedValue += "a";
+  is(editor.input.value, expectedValue, "Value should be updated");
+
+  info("Create a new line using shift+RETURN");
+  await sendKey("VK_RETURN", { shiftKey: true }, editor, inspector.panelWin);
+  expectedValue += "\n";
+  is(editor.input.value, expectedValue, "Value should have a new line");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Type '1' in the editable field");
+  await sendKey("1", {}, editor, inspector.panelWin);
+  expectedValue += "1";
+  is(editor.input.value, expectedValue, "Value should be updated");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Navigate using 'UP': move back to the first line");
+  await sendKey("VK_UP", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  info("Caret should be back on the first line");
+  checkSelectionPositions(editor, 1, 1);
+
+  info("Commit the new value with RETURN, wait for the markupmutation event");
+  const onMutated = inspector.once("markupmutation");
+  await sendKey("VK_RETURN", {}, editor, inspector.panelWin);
+  await onMutated;
+
+  nodeValue = await getFirstChildNodeValue(SELECTOR);
+  is(nodeValue, expectedValue, "The test node's text content is correct");
+});
+
+/**
+ * Check that the editor selection is at the expected positions.
+ */
+function checkSelectionPositions(editor, expectedStart, expectedEnd) {
+  is(
+    editor.input.selectionStart,
+    expectedStart,
+    "Selection should start at " + expectedStart
+  );
+  is(
+    editor.input.selectionEnd,
+    expectedEnd,
+    "Selection should end at " + expectedEnd
+  );
+}
+
+/**
+ * Send a key and expect to receive a keypress event on the editor's input.
+ */
+function sendKey(key, options, editor, win) {
+  return new Promise(resolve => {
+    info("Adding event listener for down|left|right|back_space|return keys");
+    editor.input.addEventListener("keypress", function onKeypress() {
+      if (editor.input) {
+        editor.input.removeEventListener("keypress", onKeypress);
+      }
+      executeSoon(resolve);
+    });
+
+    EventUtils.synthesizeKey(key, options, win);
+  });
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_toggle_01.js b/devtools/client/inspector/markup/test/browser_markup_toggle_01.js
new file mode 100644
index 0000000000..93e7dbdd50
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_toggle_01.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling (expand/collapse) elements by clicking on twisties
+
+const TEST_URL = URL_ROOT + "doc_markup_toggle.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Getting the container for the html element");
+  let container = await getContainerForSelector("html", inspector);
+  ok(container.mustExpand, "HTML element mustExpand");
+  ok(container.canExpand, "HTML element canExpand");
+  is(container.expander.style.visibility, "hidden", "HTML twisty is hidden");
+
+  info("Getting the container for the UL parent element");
+  container = await getContainerForSelector("ul", inspector);
+  ok(!container.mustExpand, "UL element !mustExpand");
+  ok(container.canExpand, "UL element canExpand");
+  is(container.expander.style.visibility, "visible", "HTML twisty is visible");
+  ok(!container.selected, "UL container is not selected");
+
+  info("Clicking on the UL parent expander, and waiting for children");
+  await toggleContainerByClick(inspector, container);
+  ok(!container.selected, "UL container is still not selected after expand");
+
+  info("Checking that child LI elements have been created");
+  let numLi = await getNumberOfMatchingElementsInContentPage("li");
+  for (let i = 0; i < numLi; i++) {
+    const liContainer = await getContainerForSelector(
+      `li:nth-child(${i + 1})`,
+      inspector
+    );
+    ok(liContainer, "A container for the child LI element was created");
+  }
+  ok(container.expanded, "Parent UL container is expanded");
+
+  info("Clicking again on the UL expander");
+  await toggleContainerByClick(inspector, container);
+  ok(!container.selected, "UL container is still not selected after collapse");
+
+  info("Checking that child LI elements have been hidden");
+  numLi = await getNumberOfMatchingElementsInContentPage("li");
+  for (let i = 0; i < numLi; i++) {
+    const liContainer = await getContainerForSelector(
+      `li:nth-child(${i + 1})`,
+      inspector
+    );
+    is(
+      liContainer.elt.getClientRects().length,
+      0,
+      "The container for the child LI element was hidden"
+    );
+  }
+  ok(!container.expanded, "Parent UL container is collapsed");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_toggle_02.js b/devtools/client/inspector/markup/test/browser_markup_toggle_02.js
new file mode 100644
index 0000000000..95c7d9d28d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_toggle_02.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling (expand/collapse) elements by dbl-clicking on tag lines
+
+const TEST_URL = URL_ROOT + "doc_markup_toggle.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Getting the container for the UL parent element");
+  const container = await getContainerForSelector("ul", inspector);
+
+  info("Dbl-clicking on the UL parent expander, and waiting for children");
+  const onChildren = waitForChildrenUpdated(inspector);
+  const onUpdated = inspector.once("inspector-updated");
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { clickCount: 2 },
+    inspector.markup.doc.defaultView
+  );
+  await onChildren;
+  await onUpdated;
+
+  info("Checking that child LI elements have been created");
+  let numLi = await getNumberOfMatchingElementsInContentPage("li");
+  for (let i = 0; i < numLi; i++) {
+    const liContainer = await getContainerForSelector(
+      "li:nth-child(" + (i + 1) + ")",
+      inspector
+    );
+    ok(liContainer, "A container for the child LI element was created");
+  }
+  ok(container.expanded, "Parent UL container is expanded");
+
+  info("Dbl-clicking again on the UL expander");
+  // No need to wait, this is a local, synchronous operation where nodes are
+  // only hidden from the view, not destroyed
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { clickCount: 2 },
+    inspector.markup.doc.defaultView
+  );
+
+  info("Checking that child LI elements have been hidden");
+  numLi = await getNumberOfMatchingElementsInContentPage("li");
+  for (let i = 0; i < numLi; i++) {
+    const liContainer = await getContainerForSelector(
+      "li:nth-child(" + (i + 1) + ")",
+      inspector
+    );
+    is(
+      liContainer.elt.getClientRects().length,
+      0,
+      "The container for the child LI element was hidden"
+    );
+  }
+  ok(!container.expanded, "Parent UL container is collapsed");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_toggle_03.js b/devtools/client/inspector/markup/test/browser_markup_toggle_03.js
new file mode 100644
index 0000000000..fe7eef4a8f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_toggle_03.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling (expand/collapse) elements by alt-clicking on twisties, which
+// should expand/collapse all the descendants
+
+const TEST_URL = URL_ROOT + "doc_markup_toggle.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Getting the container for the UL parent element");
+  const container = await getContainerForSelector("ul", inspector);
+
+  info("Alt-clicking on collapsed expander should expand all children");
+  await toggleContainerByClick(inspector, container, { altKey: true });
+
+  info("Checking that all nodes exist and are expanded");
+  let nodeFronts = await getNodeFronts(inspector);
+  for (const nodeFront of nodeFronts) {
+    const nodeContainer = getContainerForNodeFront(nodeFront, inspector);
+    ok(nodeContainer, "Container for node " + nodeFront.tagName + " exists");
+    ok(
+      nodeContainer.expanded,
+      "Container for node " + nodeFront.tagName + " is expanded"
+    );
+  }
+
+  info("Alt-clicking on expanded expander should collapse all children");
+  await toggleContainerByClick(inspector, container, { altKey: true });
+
+  info("Checking that all nodes are collapsed");
+  nodeFronts = await getNodeFronts(inspector);
+  for (const nodeFront of nodeFronts) {
+    const nodeContainer = getContainerForNodeFront(nodeFront, inspector);
+    ok(
+      !nodeContainer.expanded,
+      "Container for node " + nodeFront.tagName + " is collapsed"
+    );
+  }
+});
+
+async function getNodeFronts(inspector) {
+  const nodeList = await inspector.walker.querySelectorAll(
+    inspector.walker.rootNode,
+    "ul, li, span, em"
+  );
+  return nodeList.items();
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_toggle_04.js b/devtools/client/inspector/markup/test/browser_markup_toggle_04.js
new file mode 100644
index 0000000000..9dceb9745e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_toggle_04.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test expanding elements by clicking on expand badge.
+
+const TEST_URL = URL_ROOT + "doc_markup_toggle.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Getting the container for the UL parent element");
+  const container = await getContainerForSelector("ul", inspector);
+  ok(!container.mustExpand, "UL element !mustExpand");
+  ok(container.canExpand, "UL element canExpand");
+
+  info("Clicking on the UL parent expand badge, and waiting for children");
+  const onChildren = waitForChildrenUpdated(inspector);
+  const onUpdated = inspector.once("inspector-updated");
+
+  EventUtils.synthesizeMouseAtCenter(
+    container.editor.expandBadge,
+    {},
+    inspector.markup.doc.defaultView
+  );
+  await onChildren;
+  await onUpdated;
+
+  info("Checking that child LI elements have been created");
+  const numLi = await getNumberOfMatchingElementsInContentPage("li");
+  for (let i = 0; i < numLi; i++) {
+    const liContainer = await getContainerForSelector(
+      `li:nth-child(${i + 1})`,
+      inspector
+    );
+    ok(liContainer, "A container for the child LI element was created");
+  }
+  ok(container.expanded, "Parent UL container is expanded");
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_toggle_closing_tag_line.js b/devtools/client/inspector/markup/test/browser_markup_toggle_closing_tag_line.js
new file mode 100644
index 0000000000..256d62cb3d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_toggle_closing_tag_line.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a closing tag line is displayed when expanding an element container.
+// Also check that no closing tag line is displayed for readonly containers (document,
+// roots...).
+
+const TEST_URL = `data:text/html;charset=utf8,
+<div class="outer-div"><span>test</span></div>
+<iframe src="data:text/html;charset=utf8,<div>test</div>"></iframe>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Getting the container for .outer-div parent element");
+  let container = await getContainerForSelector(".outer-div", inspector);
+  await toggleContainerByClick(inspector, container);
+
+  let closeTagLine = container.closeTagLine;
+  ok(
+    closeTagLine && closeTagLine.textContent.includes("div"),
+    "DIV has a close tag-line with the correct content"
+  );
+
+  info("Expand the iframe element");
+  container = await getContainerForSelector("iframe", inspector);
+  await toggleContainerByClick(inspector, container);
+  ok(container.expanded, "iframe is expanded");
+  closeTagLine = container.closeTagLine;
+  ok(
+    closeTagLine && closeTagLine.textContent.includes("iframe"),
+    "IFRAME has a close tag-line with the correct content"
+  );
+
+  info("Retrieve the nodefront for the #document root inside the iframe");
+  const iframe = await getNodeFront("iframe", inspector);
+  const { nodes } = await inspector.walker.children(iframe);
+  const documentFront = nodes[0];
+  Assert.strictEqual(
+    documentFront.displayName,
+    "#document",
+    "First child of IFRAME is #document"
+  );
+
+  info("Expand the iframe's #document node element");
+  container = getContainerForNodeFront(documentFront, inspector);
+  await toggleContainerByClick(inspector, container);
+  ok(container.expanded, "#document is expanded");
+  ok(
+    !container.closeTagLine,
+    "readonly (#document) node has no close tag-line"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_update-on-navigtion.js b/devtools/client/inspector/markup/test/browser_markup_update-on-navigtion.js
new file mode 100644
index 0000000000..e495580d66
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_update-on-navigtion.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that markup view handles page navigation correctly.
+
+const URL_1 = URL_ROOT_SSL + "doc_markup_update-on-navigtion_1.html";
+const URL_2 = URL_ROOT_SSL + "doc_markup_update-on-navigtion_2.html";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(URL_1);
+
+  assertMarkupViewIsLoaded();
+  await selectNode("#one", inspector);
+
+  const { resourceCommand } = toolbox.commands;
+  const { onResource: willNavigate } =
+    await resourceCommand.waitForNextResource(
+      resourceCommand.TYPES.DOCUMENT_EVENT,
+      {
+        ignoreExistingResources: true,
+        predicate(resource) {
+          return resource.name == "will-navigate";
+        },
+      }
+    );
+
+  // We should not await on navigateTo here, because the test will assert the
+  // various phases of the inspector during the navigation.
+  const onNavigated = navigateTo(URL_2);
+
+  info("Waiting for will-navigate");
+  await willNavigate;
+
+  info("Navigation to page 2 has started, the inspector should be empty");
+  assertMarkupViewIsEmpty();
+
+  info("Waiting for new-root");
+  await inspector.once("new-root");
+
+  info("Navigation to page 2 was done, the inspector should be back up");
+  assertMarkupViewIsLoaded();
+
+  await onNavigated;
+  await selectNode("#two", inspector);
+
+  function assertMarkupViewIsLoaded() {
+    const markupViewBox = inspector.panelDoc.getElementById("markup-box");
+    is(markupViewBox.childNodes.length, 1, "The markup-view is loaded");
+  }
+
+  function assertMarkupViewIsEmpty() {
+    const markupViewFrame =
+      inspector._markupFrame.contentDocument.getElementById("root");
+    is(markupViewFrame.childNodes.length, 0, "The markup-view is unloaded");
+  }
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_view-original-source.js b/devtools/client/inspector/markup/test/browser_markup_view-original-source.js
new file mode 100644
index 0000000000..db106563bc
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_view-original-source.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = URL_ROOT + "doc_markup_view-original-source.html";
+
+// Test that event handler links go to the right debugger source when the
+// event handler is source mapped.
+add_task(async function () {
+  const { inspector, tab, toolbox } = await openInspectorForURL(TEST_URI);
+
+  const nodeFront = await getNodeFront("#foo", inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  const evHolder = container.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+
+  evHolder.scrollIntoView();
+  EventUtils.synthesizeMouseAtCenter(
+    evHolder,
+    {},
+    inspector.markup.doc.defaultView
+  );
+
+  const tooltip = inspector.markup.eventDetailsTooltip;
+  await tooltip.once("shown");
+  await tooltip.once("event-tooltip-source-map-ready");
+
+  const debuggerIcon = tooltip.panel.querySelector(
+    ".event-tooltip-debugger-icon"
+  );
+  EventUtils.synthesizeMouse(debuggerIcon, 2, 2, {}, debuggerIcon.ownerGlobal);
+
+  await gDevTools.showToolboxForTab(tab, { toolId: "jsdebugger" });
+  const dbg = toolbox.getPanel("jsdebugger");
+
+  let source;
+  await BrowserTestUtils.waitForCondition(
+    () => {
+      source = dbg._selectors.getSelectedSource(dbg._getState());
+      return !!source;
+    },
+    "loaded source",
+    100,
+    20
+  );
+
+  is(
+    source.url,
+    "webpack:///events_original.js",
+    "expected original source to be loaded"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_view-source.js b/devtools/client/inspector/markup/test/browser_markup_view-source.js
new file mode 100644
index 0000000000..9a3507d535
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_view-source.js
@@ -0,0 +1,126 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js",
+  this
+);
+
+const DOCUMENT_SRC = `
+<body>
+<button id="btn-eval">Eval</button>
+<button id="btn-dom0" onclick="console.info('bloup')">DOM0</button>
+<script>
+var script = \`
+  function foo() {
+    console.log('handler');
+  }
+\`;
+eval(script);
+
+var button = document.getElementById("btn-eval");
+button.addEventListener("click", foo, false);
+</script>
+</body>`;
+
+const TEST_URI = "data:text/html;charset=utf-8," + DOCUMENT_SRC;
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
+
+  info(
+    "Test that event handler links go to the right debugger source when it came from an eval()"
+  );
+  const evaledSource = await clickOnJumpToDebuggerIconForNode(
+    inspector,
+    toolbox,
+    "#btn-eval"
+  );
+  is(evaledSource.url, null, "no expected url for eval source");
+
+  info("Add a breakpoint in opened source");
+  const debuggerContext = createDebuggerContext(toolbox);
+  await addBreakpoint(
+    debuggerContext,
+    debuggerContext.selectors.getSelectedSource(),
+    1
+  );
+  await safeSynthesizeMouseEventAtCenterInContentPage("#btn-eval");
+
+  await waitForPaused(debuggerContext);
+  ok(true, "The debugger paused on the evaled source breakpoint");
+  await resume(debuggerContext);
+
+  info(
+    "Test that event handler links go to the right debugger source when it's a dom0 event listener."
+  );
+  await toolbox.selectTool("inspector");
+  const dom0Source = await clickOnJumpToDebuggerIconForNode(
+    inspector,
+    toolbox,
+    "#btn-dom0"
+  );
+  is(dom0Source.url, null, "no expected url for dom0 event listener source");
+  await addBreakpoint(
+    debuggerContext,
+    debuggerContext.selectors.getSelectedSource(),
+    1
+  );
+  await safeSynthesizeMouseEventAtCenterInContentPage("#btn-dom0");
+  await waitForPaused(debuggerContext);
+  ok(true, "The debugger paused on the dom0 source breakpoint");
+  await resume(debuggerContext);
+});
+
+async function clickOnJumpToDebuggerIconForNode(
+  inspector,
+  toolbox,
+  nodeSelector
+) {
+  const nodeFront = await getNodeFront(nodeSelector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  const evHolder = container.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+  evHolder.scrollIntoView();
+  info(`Display event tooltip for node "${nodeSelector}"`);
+  evHolder.click();
+
+  const tooltip = inspector.markup.eventDetailsTooltip;
+  await tooltip.once("shown");
+
+  info(`Tooltip displayed, click on the "jump to debugger" icon`);
+  const debuggerIcon = tooltip.panel.querySelector(
+    ".event-tooltip-debugger-icon"
+  );
+
+  if (!debuggerIcon) {
+    ok(
+      false,
+      `There is no jump to debugger icon in event tooltip for node "${nodeSelector}"`
+    );
+    return null;
+  }
+
+  const onDebuggerSelected = toolbox.once(`jsdebugger-selected`);
+  EventUtils.synthesizeMouse(debuggerIcon, 2, 2, {}, debuggerIcon.ownerGlobal);
+
+  const dbg = await onDebuggerSelected;
+  ok(true, "The debugger was opened");
+
+  let source;
+  info("Wait for source to be opened");
+  await BrowserTestUtils.waitForCondition(
+    () => {
+      source = dbg._selectors.getSelectedSource(dbg._getState());
+      return !!source;
+    },
+    "loaded source",
+    100,
+    20
+  );
+  return source;
+}
diff --git a/devtools/client/inspector/markup/test/browser_markup_void_elements_html.js b/devtools/client/inspector/markup/test/browser_markup_void_elements_html.js
new file mode 100644
index 0000000000..09f6e0e06c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_void_elements_html.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test void element display in the markupview.
+const TEST_URL = URL_ROOT + "doc_markup_void_elements.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { win } = inspector.markup;
+
+  info("check non-void element closing tag is displayed");
+  const { editor } = await getContainerForSelector("h1", inspector);
+  ok(
+    !editor.elt.classList.contains("void-element"),
+    "h1 element does not have void-element class"
+  );
+  Assert.notStrictEqual(
+    !editor.elt.querySelector(".close").style.display,
+    "none",
+    "h1 element tag is not hidden"
+  );
+
+  info("check void element closing tag is hidden in HTML document");
+  let container = await getContainerForSelector("img", inspector);
+  ok(
+    container.editor.elt.classList.contains("void-element"),
+    "img element has the expected class"
+  );
+  let closeElement = container.editor.elt.querySelector(".close");
+  let computedStyle = win.getComputedStyle(closeElement);
+  Assert.strictEqual(
+    computedStyle.display,
+    "none",
+    "img closing tag is hidden"
+  );
+
+  info("check void element with pseudo element");
+  const hrNodeFront = await getNodeFront("hr.before", inspector);
+  container = getContainerForNodeFront(hrNodeFront, inspector);
+  ok(
+    container.editor.elt.classList.contains("void-element"),
+    "hr element has the expected class"
+  );
+  closeElement = container.editor.elt.querySelector(".close");
+  computedStyle = win.getComputedStyle(closeElement);
+  Assert.strictEqual(computedStyle.display, "none", "hr closing tag is hidden");
+
+  info("check expanded void element closing tag is not hidden");
+  await inspector.markup.expandNode(hrNodeFront);
+  await waitForMultipleChildrenUpdates(inspector);
+  ok(container.expanded, "hr container is expanded");
+  computedStyle = win.getComputedStyle(closeElement);
+  Assert.strictEqual(
+    computedStyle.display,
+    "none",
+    "hr closing tag is not hidden anymore"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_void_elements_xhtml.js b/devtools/client/inspector/markup/test/browser_markup_void_elements_xhtml.js
new file mode 100644
index 0000000000..9725068b92
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_void_elements_xhtml.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test void element display in the markupview.
+const TEST_URL = URL_ROOT + "doc_markup_void_elements.xhtml";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { win } = inspector.markup;
+
+  info("check non-void element closing tag is displayed");
+  const { editor } = await getContainerForSelector("h1", inspector);
+  ok(
+    !editor.elt.classList.contains("void-element"),
+    "h1 element does not have void-element class"
+  );
+  Assert.notStrictEqual(
+    !editor.elt.querySelector(".close").style.display,
+    "none",
+    "h1 element tag is not hidden"
+  );
+
+  info("check void element closing tag is not hidden in XHTML document");
+  const container = await getContainerForSelector("br", inspector);
+  ok(
+    !container.editor.elt.classList.contains("void-element"),
+    "br element does not have void-element class"
+  );
+  const closeElement = container.editor.elt.querySelector(".close");
+  const computedStyle = win.getComputedStyle(closeElement);
+  Assert.notStrictEqual(
+    computedStyle.display,
+    "none",
+    "br closing tag is not hidden"
+  );
+});
diff --git a/devtools/client/inspector/markup/test/browser_markup_whitespace.js b/devtools/client/inspector/markup/test/browser_markup_whitespace.js
new file mode 100644
index 0000000000..7eddd3b974
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_whitespace.js
@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whitespace text nodes do show up in the markup-view when needed.
+
+const TEST_URL = URL_ROOT + "doc_markup_whitespace.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+
+  await markup.expandAll();
+
+  info("Verify the number of child nodes and child elements in body");
+
+  // Body has 5 element children, but there are 6 text nodes in there too, they come from
+  // the HTML file formatting (spaces and carriage returns).
+  is(
+    await getElementChildNodesCount("body"),
+    11,
+    "The body node has 11 child nodes (includes text nodes)"
+  );
+  is(
+    await getContentPageElementProperty("body", "childElementCount"),
+    5,
+    "The body node has 5 child elements (only element nodes)"
+  );
+
+  // In body, there are only block-level elements, so whitespace text nodes do not have
+  // layout, so they should be skipped in the markup-view.
+  info("Check that the body's whitespace text node children aren't shown");
+  const bodyContainer = markup.getContainer(inspector.selection.nodeFront);
+  let childContainers = bodyContainer.getChildContainers();
+  is(
+    childContainers.length,
+    5,
+    "Only the element nodes are shown in the markup view"
+  );
+
+  // div#inline has 3 element children, but there are 4 text nodes in there too, like in
+  // body, they come from spaces and carriage returns in the HTML file.
+  info("Verify the number of child nodes and child elements in div#inline");
+  is(
+    await getElementChildNodesCount("#inline"),
+    7,
+    "The div#inline node has 7 child nodes (includes text nodes)"
+  );
+  is(
+    await getContentPageElementProperty("#inline", "childElementCount"),
+    3,
+    "The div#inline node has 3 child elements (only element nodes)"
+  );
+
+  // Within the inline formatting context in div#inline, the whitespace text nodes between
+  // the images have layout, so they should appear in the markup-view.
+  info("Check that the div#inline's whitespace text node children are shown");
+  await selectNode("#inline", inspector);
+  let divContainer = markup.getContainer(inspector.selection.nodeFront);
+  childContainers = divContainer.getChildContainers();
+  is(
+    childContainers.length,
+    5,
+    "Both the element nodes and some text nodes are shown in the markup view"
+  );
+
+  // div#pre has 2 element children, but there are 3 text nodes in there too, like in
+  // div#inline, they come from spaces and carriage returns in the HTML file.
+  info("Verify the number of child nodes and child elements in div#pre");
+  is(
+    await getElementChildNodesCount("#pre"),
+    5,
+    "The div#pre node has 5 child nodes (includes text nodes)"
+  );
+  is(
+    await getContentPageElementProperty("#pre", "childElementCount"),
+    2,
+    "The div#pre node has 2 child elements (only element nodes)"
+  );
+
+  // Within the inline formatting context in div#pre, the whitespace text nodes between
+  // the images have layout, so they should appear in the markup-view, but since
+  // white-space is set to pre, then the whitespace text nodes before and after the first
+  // and last image should also appear.
+  info("Check that the div#pre's whitespace text node children are shown");
+  await selectNode("#pre", inspector);
+  divContainer = markup.getContainer(inspector.selection.nodeFront);
+  childContainers = divContainer.getChildContainers();
+  is(
+    childContainers.length,
+    5,
+    "Both the element nodes and all text nodes are shown in the markup view"
+  );
+});
+
+function getElementChildNodesCount(selector) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector],
+    function (innerSelector) {
+      const node = content.document.querySelector(innerSelector);
+      return node.childNodes.length;
+    }
+  );
+}
diff --git a/devtools/client/inspector/markup/test/doc_markup_anonymous.html b/devtools/client/inspector/markup/test/doc_markup_anonymous.html
new file mode 100644
index 0000000000..1be4594030
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_anonymous.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Anonymous content test</title>
+  <style type="text/css">
+    #pseudo::before {
+      content: "before";
+    }
+    #pseudo::after {
+      content: "after";
+    }
+    #shadow::before {
+      content: "Testing ::before on a shadow host";
+    }
+  </style>
+</head>
+<body>
+  <div id="pseudo"><span>middle</span></div>
+
+  <div id="shadow">light dom</div>
+
+  <div id="native"><input type="file"></div>
+
+  <script>
+  "use strict";
+  var host = document.querySelector("#shadow");
+  var root = host.attachShadow({ mode: "open" });
+  root.innerHTML = "<h3>Shadow DOM</h3><select multiple></select>";
+  </script>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_dragdrop.html b/devtools/client/inspector/markup/test/doc_markup_dragdrop.html
new file mode 100644
index 0000000000..a13d42cbce
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_dragdrop.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=858038
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 858038</title>
+  <style>
+    #test::before {
+      content: 'This should not be draggable';
+    }
+  </style>
+</head>
+<body>
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=858038">Mozilla Bug 858038</a>
+  <p id="display"></p>
+  <div id="content" style="display: none">
+  </div>
+  <input id="anonymousParent" /><span id="before">Before<!-- Force not-inline --></span>
+  <pre id="test"><span id="firstChild">First</span><span id="middleChild">Middle</span><span id="lastChild">Last</span></pre>  <span id="after">After</span>
+
+  <test-component class="test-component">
+    <div slot="slot1" class="slotted1">slot1-1</div>
+    <div slot="slot1" class="slotted2">slot1-2</div>
+  </test-component>
+
+  <ol>
+    <li id="list"><span id="first-list-child"
+      >List item start</span><span id="last-list-child"
+      >List item end</span></li>
+  </ol>
+
+  <script>
+    "use strict";
+    customElements.define("test-component", class extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.innerHTML = '<slot class="slot1" name="slot1"></slot>';
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_dragdrop_autoscroll_01.html b/devtools/client/inspector/markup/test/doc_markup_dragdrop_autoscroll_01.html
new file mode 100644
index 0000000000..35f3b5f31e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_dragdrop_autoscroll_01.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=858038
+https://bugzilla.mozilla.org/show_bug.cgi?id=1226898
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 858038 and 1226898 - Autoscroll</title>
+</head>
+<body>
+  <div id="first"></div>
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=858038">Mozilla Bug 858038</a>
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226898">Mozilla Bug 1226898</a>
+  <p id="display">Test</p>
+  <div id="content" style="display: none">
+
+  </div>
+
+  <!-- Make sure the markup-view has enough nodes shown by default that it has a scrollbar -->
+
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_dragdrop_autoscroll_02.html b/devtools/client/inspector/markup/test/doc_markup_dragdrop_autoscroll_02.html
new file mode 100644
index 0000000000..9e4d92cf3b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_dragdrop_autoscroll_02.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=858038
+https://bugzilla.mozilla.org/show_bug.cgi?id=1226898
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 858038 and 1226898 - Autoscroll</title>
+</head>
+<body>
+  <div id="first"></div>
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=858038">Mozilla Bug 858038</a>
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226898">Mozilla Bug 1226898</a>
+  <p id="display">Test</p>
+  <div id="content" style="display: none">
+
+  </div>
+
+  <!-- Make sure the markup-view has enough nodes shown by default that it has a scrollbar -->
+
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_edit.html b/devtools/client/inspector/markup/test/doc_markup_edit.html
new file mode 100644
index 0000000000..ddefd1d873
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_edit.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+<html class="html">
+
+  <body class="body">
+    <div class="node0">
+      <div id="node1" class="node1">line1</div>
+      <div id="node2" class="node2">line2</div>
+      <p class="node3">line3</p>
+      <!-- A comment -->
+      <p id="node4" class="node4">line4
+        <span class="node5">line5</span>
+        <span class="node6">line6</span>
+        <!-- A comment -->
+        <a class="node7">line7<span class="node8">line8</span></a>
+        <span class="node9">line9</span>
+        <span class="node10">line10</span>
+        <span class="node11">line11</span>
+        <a class="node12">line12<span class="node13">line13</span></a>
+      </p>
+      <p id="node14">line14</p>
+      <p class="node15">line15</p>
+    </div>
+    <div id="node16">
+      <p id="node17">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere placerat magna et imperdiet.</p>
+    </div>
+    <div id="node18">
+      <div id="node19">
+        <div id="node20">
+          <div id="node21">
+            line21
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="node22" class="unchanged"></div>
+    <div id="node23"></div>
+    <div id="node24"></div>
+    <div id="retag-me">
+      <div id="retag-me-2"></div>
+    </div>
+    <div id="node25"></div>
+    <div id="node26" style='background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");'></div>
+    <div id="node27" class="Double &quot; and single &apos;"></div>
+    <img id="node-data-url" />
+    <div id="node-data-url-style"></div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events-overflow.html b/devtools/client/inspector/markup/test/doc_markup_events-overflow.html
new file mode 100644
index 0000000000..d604245fe8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events-overflow.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>doc_markup_events-overflow.html</title>
+</head>
+<body>
+  <h1>doc_markup_events-overflow.html</h1>
+  <span id="events">Inspect me!</span>
+  <script>
+    "use strict";
+    var el = document.getElementById("events");
+    for (var i = 50; i > 0; i--) {
+      el.addEventListener("click", function onClick() {
+        alert("click");
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events-source_map.html b/devtools/client/inspector/markup/test/doc_markup_events-source_map.html
new file mode 100644
index 0000000000..ece3abd7b8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events-source_map.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script type="application/javascript" src="events_bundle.js"></script>
+  </head>
+  <body onload="init();">
+    <div id="clicky">click here</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_01.html b/devtools/client/inspector/markup/test/doc_markup_events_01.html
new file mode 100644
index 0000000000..49496dc2f2
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_01.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+    #container {
+      border: 1px solid #000;
+      width: 200px;
+      height: 85px;
+    }
+
+    #container > div {
+      border: 1px solid #000;
+      display: inline-block;
+      margin: 2px;
+    }
+
+    #output,
+    #noevents,
+    #DOM0,
+    #handleevent,
+    #output,
+    #noevents {
+      cursor: auto;
+    }
+
+    #output {
+      min-height: 1.5em;
+    }
+    </style>
+    <script type="application/javascript">
+      "use strict";
+
+      /* exported init */
+      function init() {
+        const container = document.getElementById("container");
+        const multiple = document.getElementById("multiple");
+
+        container.addEventListener("mouseover", mouseoverHandler, true);
+        multiple.addEventListener("click", clickHandler);
+        multiple.addEventListener("mouseup", mouseupHandler);
+
+        const he = new HandleEventClick();
+        const handleevent = document.getElementById("handleevent");
+        handleevent.addEventListener("click", he);
+      }
+
+      function mouseoverHandler(event) {
+        if (event.target.id !== "container") {
+          const output = document.getElementById("output");
+          output.textContent = event.target.textContent;
+        }
+      }
+
+      function clickHandler(event) {
+        const output = document.getElementById("output");
+        output.textContent = "click";
+      }
+
+      function mouseupHandler(event) {
+        const output = document.getElementById("output");
+        output.textContent = "mouseup";
+      }
+
+      function HandleEventClick(hehe) {
+
+      }
+
+      HandleEventClick.prototype = {
+        // eslint-disable-next-line object-shorthand
+        handleEvent: function(blah) {
+          alert("handleEvent");
+        }
+      };
+
+      function noeventsClickHandler(event) {
+        alert("noevents has an event listener");
+      }
+
+      /* exported addNoeventsClickHandler, removeNoeventsClickHandler */
+      function addNoeventsClickHandler() {
+        const noevents = document.getElementById("noevents");
+        noevents.addEventListener("click", noeventsClickHandler);
+      }
+
+      function removeNoeventsClickHandler() {
+        const noevents = document.getElementById("noevents");
+        noevents.removeEventListener("click", noeventsClickHandler);
+      }
+    </script>
+  </head>
+  <body onload="init();">
+    <h1>Events test 1</h1>
+    <div id="container">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+      <div>7</div>
+      <div>8</div>
+      <div>9</div>
+      <div>10</div>
+      <div>11</div>
+      <div>12</div>
+      <div>13</div>
+      <div>14</div>
+      <div>15</div>
+      <div>16</div>
+      <div id="multiple">multiple</div>
+    </div>
+    <div id="output"></div>
+    <div id="noevents">noevents</div>
+    <div id="DOM0" onclick="alert('DOM0')">DOM0 event here</div>
+    <div id="handleevent">handleEvent</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_02.html b/devtools/client/inspector/markup/test/doc_markup_events_02.html
new file mode 100644
index 0000000000..0da7c397a6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_02.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+    #fatarrow,
+    #bound,
+    #boundhe,
+    #comment-inline,
+    #comment-streaming,
+    #anon-object-method,
+    #object-method {
+      border: 1px solid #000;
+      width: 200px;
+      min-height: 1em;
+      cursor: pointer;
+    }
+    </style>
+    <script type="application/javascript">
+      "use strict";
+
+      /* exported init */
+      function init() {
+        const fatarrow = document.getElementById("fatarrow");
+
+        const he = new HandleEventClick();
+        const anonObjectMethod = document.getElementById("anon-object-method");
+        anonObjectMethod.addEventListener("click", he.anonObjectMethod);
+
+        const objectMethod = document.getElementById("object-method");
+        objectMethod.addEventListener("click", he.objectMethod);
+
+        const bhe = new BoundHandleEventClick();
+        const boundheNode = document.getElementById("boundhe");
+        bhe.handleEvent = bhe.handleEvent.bind(bhe);
+        boundheNode.addEventListener("click", bhe);
+
+        const boundNode = document.getElementById("bound");
+        BoundClickHandler = BoundClickHandler.bind(this);
+        boundNode.addEventListener("click", BoundClickHandler);
+
+        fatarrow.addEventListener("click", () => {
+          alert("Fat arrow without params!");
+        });
+
+        fatarrow.addEventListener("click", event => {
+          alert("Fat arrow with 1 param!");
+        });
+
+        fatarrow.addEventListener("click", (event, foo, bar) => {
+          alert("Fat arrow with 3 params!");
+        });
+
+        fatarrow.addEventListener("click", b => b);
+
+        const inlineCommentNode = document.getElementById("comment-inline");
+        inlineCommentNode
+          .addEventListener("click", functionProceededByInlineComment);
+
+        const streamingCommentNode = document.getElementById("comment-streaming");
+        streamingCommentNode
+          .addEventListener("click", functionProceededByStreamingComment);
+      }
+
+      function BoundClickHandler(event) {
+        alert("Bound event");
+      }
+
+      function HandleEventClick(hehe) {
+
+      }
+
+      HandleEventClick.prototype = {
+        // eslint-disable-next-line object-shorthand
+        anonObjectMethod: function() {
+          alert("obj.anonObjectMethod");
+        },
+
+        objectMethod: function kay() {
+          alert("obj.objectMethod");
+        },
+      };
+
+      function BoundHandleEventClick() {
+
+      }
+
+      BoundHandleEventClick.prototype = {
+        handleEvent() {
+          alert("boundHandleEvent");
+        }
+      };
+
+      // A function proceeded with an inline comment
+      function functionProceededByInlineComment() {
+        alert("comment-inline");
+      }
+
+      /* A function proceeded with a streaming comment */
+      function functionProceededByStreamingComment() {
+        alert("comment-streaming");
+      }
+    </script>
+  </head>
+  <body onload="init();">
+    <h1>Events test 2</h1>
+    <div id="fatarrow">Fat arrows</div>
+    <div id="boundhe">Bound handleEvent</div>
+    <div id="bound">Bound event</div>
+    <div id="comment-inline">Event proceeded by an inline comment</div>
+    <div id="comment-streaming">Event proceeded by a streaming comment</div>
+    <div id="anon-object-method">Anonymous object method</div>
+    <div id="object-method">Object method</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_03.html b/devtools/client/inspector/markup/test/doc_markup_events_03.html
new file mode 100644
index 0000000000..a0c067e33e
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_03.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+    #es6-method,
+    #generator,
+    #anon-generator,
+    #named-function-expression,
+    #anon-function-expression,
+    #returned-function {
+      border: 1px solid #000;
+      width: 200px;
+      min-height: 1em;
+      cursor: pointer;
+    }
+    </style>
+    <script type="application/javascript">
+      "use strict";
+
+      const namedFunctionExpression =
+      function foo() {
+        alert("namedFunctionExpression");
+      }
+
+      const anonFunctionExpression = function() {
+        alert("anonFunctionExpression");
+      };
+
+      const returnedFunction = (function() {
+        return function bar() {
+          alert("returnedFunction");
+        }
+      })();
+
+      /* exported init */
+      function init() {
+        const em = new Es6Method();
+        const es6Method = document.getElementById("es6-method");
+        es6Method.addEventListener("click", em.es6Method);
+
+        const generatorNode = document.getElementById("generator");
+        generatorNode.addEventListener("click", generator);
+
+        const anonGenerator = document.getElementById("anon-generator");
+        anonGenerator.addEventListener("click", function* () {
+          alert("anonGenerator");
+        });
+
+        const namedFunctionExpressionNode =
+          document.getElementById("named-function-expression");
+        namedFunctionExpressionNode.addEventListener("click",
+                                                     namedFunctionExpression);
+
+        const anonFunctionExpressionNode =
+          document.getElementById("anon-function-expression");
+        anonFunctionExpressionNode.addEventListener("click",
+                                                     anonFunctionExpression);
+
+        const returnedFunctionNode = document.getElementById("returned-function");
+        returnedFunctionNode.addEventListener("click", returnedFunction);
+      }
+
+      function Es6Method(hehe) {
+
+      }
+
+      Es6Method.prototype = {
+        es6Method(foo, bar) {
+          alert("obj.es6Method");
+        }
+      };
+
+      function HandleEvent() {
+        const handleEventNode = document.getElementById("handleEvent");
+        handleEventNode.addEventListener("click", this);
+      }
+
+      HandleEvent.prototype = {
+        // eslint-disable-next-line object-shorthand
+        handleEvent: function(event) {
+          switch (event.type) {
+            case "click":
+              alert("handleEvent click");
+          }
+        }
+      };
+
+      function* generator() {
+        alert("generator");
+      }
+    </script>
+  </head>
+  <body onload="init();">
+    <h1>Events test 3</h1>
+    <div id="es6-method">ES6 method</div>
+    <div id="generator">Generator</div>
+    <div id="anon-generator">Anonymous Generator</div>
+    <div id="named-function-expression">Named Function Expression</div>
+    <div id="anon-function-expression">Anonymous Function Expression</div>
+    <div id="returned-function">Returned Function</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_04.html b/devtools/client/inspector/markup/test/doc_markup_events_04.html
new file mode 100644
index 0000000000..93d105bf3d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_04.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+    #constructed-function,
+    #constructed-function-with-body-string,
+    #multiple-assignment,
+    #promise,
+    #math-pow,
+    #handleEvent {
+      border: 1px solid #000;
+      width: 200px;
+      min-height: 1em;
+      cursor: pointer;
+    }
+    </style>
+    <script type="application/javascript">
+      "use strict";
+
+      const constructedFunc = new Function();
+
+      const constructedFuncWithBodyString =
+        new Function('a', 'b', 'c', 'alert("constructedFuncWithBodyString");');
+
+      const multipleAssignment = function multi() {
+        alert("multipleAssignment");
+      }
+
+      /* exported init */
+      function init() {
+        const constructedFunctionNode =
+          document.getElementById("constructed-function");
+        constructedFunctionNode.addEventListener("click", constructedFunc);
+
+        const constructedFunctionWithBodyStringNode =
+          document.getElementById("constructed-function-with-body-string");
+        constructedFunctionWithBodyStringNode
+          .addEventListener("click", constructedFuncWithBodyString);
+
+        const multipleAssignmentNode =
+          document.getElementById("multiple-assignment");
+        multipleAssignmentNode.addEventListener("click", multipleAssignment);
+
+        const promiseNode = document.getElementById("promise");
+        new Promise((resolve, reject) => {
+          promiseNode.addEventListener("click", resolve);
+        });
+
+        const mathPowNode = document.getElementById("math-pow");
+        mathPowNode.addEventListener("click", Math.pow);
+
+        new HandleEvent();
+
+        document.addEventListener("click", function(foo, bar) {
+          alert("document event listener clicked");
+        });
+
+        document.documentElement.addEventListener("click", function(foo2, bar2) {
+          alert("documentElement event listener clicked");
+        });
+      }
+
+      function Es6Method(hehe) {
+
+      }
+
+      Es6Method.prototype = {
+        es6Method(foo, bar) {
+          alert("obj.es6Method");
+        }
+      };
+
+      function HandleEvent() {
+        const handleEventNode = document.getElementById("handleEvent");
+        handleEventNode.addEventListener("click", this);
+      }
+
+      HandleEvent.prototype = {
+        // eslint-disable-next-line object-shorthand
+        handleEvent: function(event) {
+          switch (event.type) {
+            case "click":
+              alert("handleEvent click");
+          }
+        }
+      };
+    </script>
+  </head>
+  <body onload="init();">
+    <h1>Events test 4</h1>
+    <div id="constructed-function">Constructed Function</div>
+    <div id="constructed-function-with-body-string">
+      Constructed Function with body string
+    </div>
+    <div id="multiple-assignment">Multiple Assignment</div>
+    <div id="promise">Promise</div>
+    <div id="math-pow">Math.pow</div>
+    <div id="handleEvent">HandleEvent</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_chrome_listeners.html b/devtools/client/inspector/markup/test/doc_markup_events_chrome_listeners.html
new file mode 100644
index 0000000000..1158a24daf
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_chrome_listeners.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+	<div></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_jquery.html b/devtools/client/inspector/markup/test/doc_markup_events_jquery.html
new file mode 100644
index 0000000000..efcb51c667
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_jquery.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <style>
+      input {
+        margin: 5px 3px 10px 10px;
+      }
+
+      div {
+        width: 100px;
+        height: 100px;
+        border: 1px solid #000;
+      }
+    </style>
+
+    <script type="application/javascript">
+      "use strict";
+
+      const jq = document.location.search.substr(1);
+      const script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", jq);
+      document.head.appendChild(script);
+
+      // If you update the content of the callback, remember to
+      // update helper_events_test_runner.js `getDocMarkupEventsJQueryLoadHandlerText`.
+      window.addEventListener("load", () => {
+        const handler1 = function liveDivDblClick() { alert(1); };
+        const handler2 = function liveDivDragStart() { alert(2); };
+        const handler3 = function liveDivDragLeave() { alert(3); };
+        const handler4 = function liveDivDragEnd() { alert(4); };
+        const handler5 = function liveDivDrop() { alert(5); };
+        const handler6 = function liveDivDragOver() { alert(6); };
+        const handler7 = function divClick1() { alert(7); };
+        const handler8 = function divClick2() { alert(8); };
+        const handler9 = function divKeyDown() { alert(9); };
+        const handler10 = function divDragOut() { alert(10); };
+
+        if ($("#livediv").live) {
+          $("#livediv").live( "dblclick", handler1);
+          $("#livediv").live( "dragstart", handler2);
+        }
+
+        if ($("#livediv").delegate) {
+          $(document).delegate( "#livediv", "dragleave", handler3);
+          $(document).delegate( "#livediv", "dragend", handler4);
+        }
+
+        if ($("#livediv").on) {
+          $(document).on( "drop", "#livediv", handler5);
+          $(document).on( "dragover", "#livediv", handler6);
+          $(document).on( "dragout", "#livediv:xxxxx", handler10);
+        }
+
+        const div = $("div")[0];
+        $(div).click(handler7);
+        $(div).click(handler8);
+        $(div).keydown(handler9);
+
+        class MyClass {
+          constructor() {
+            $(document).on("click", '#inclassboundeventdiv', this.onClick.bind(this));
+          }
+          onClick() { alert(11); }
+        }
+        new MyClass();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="testdiv"></div>
+    <br>
+    <div id="livediv"></div>
+    <br>
+    <div id="inclassboundeventdiv"></div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_object_listener.html b/devtools/client/inspector/markup/test/doc_markup_events_object_listener.html
new file mode 100644
index 0000000000..07000977bd
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_object_listener.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      div {
+        border: 1px solid #000;
+      }
+    </style>
+    <script>
+      "use strict";
+
+      /* exported init */
+      function init() {
+        const valid = document.querySelector("#valid-object-listener");
+        const validInvalid = document.querySelector("#valid-invalid-object-listeners");
+
+        // Add a valid event to #valid.
+        valid.addEventListener('click', {
+          handleEvent: () => {
+            console.log("handleEvent");
+          }
+        });
+
+        // Add valid and invalid events to #validInvalid.
+        validInvalid.addEventListener('click', {
+          handleEvent: () => {
+            console.log("handleEvent");
+          }
+        });
+        validInvalid.addEventListener('dblclick', {});
+      }
+    </script>
+  </head>
+  <body onload="init();">
+    <h1>Events test with event object listeners</h1>
+    <div id="valid-object-listener">Valid object listener</div>
+    <div id="valid-invalid-object-listeners">Valid and invalid object listeners</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_react_development_15.4.1.html b/devtools/client/inspector/markup/test/doc_markup_events_react_development_15.4.1.html
new file mode 100644
index 0000000000..e467b9baa0
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_react_development_15.4.1.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <script src="lib_react_with_addons_15.4.1.js"></script>
+    <script src="lib_react_dom_15.4.1.js"></script>
+    <script src="react_external_listeners.js"></script>
+  </head>
+  <body>
+    <h1>doc_markup_events_react_development_15.4.1.html</h1>
+
+    <div id="container"></div>
+
+    <script>
+      "use strict";
+
+      /* global React, ReactDOM, externalCapturingFunction, externalFunction */
+
+      var ClickMe2 = React.createClass({
+        // eslint-disable-next-line object-shorthand
+        inlineFunction: function () {
+          alert("inlineFunction");
+        },
+
+        render() {
+          return React.createElement(
+            "div",
+            null,
+            React.createElement(
+              "h3",
+              {
+                id: "inline",
+                onClick: this.inlineFunction
+              },
+              "Click for inlineFunction"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "external",
+                onClick: externalFunction
+              },
+              "Click for externalFunction"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "externalinline",
+                onClick: externalFunction,
+                onMouseUp: this.inlineFunction
+              },
+              "Click for both"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "externalcapturing",
+                onClickCapture: externalCapturingFunction
+              },
+              "Click for externalCapturingFunction"
+            )
+          );
+        }
+      });
+
+      ReactDOM.render(
+        React.createElement(ClickMe2),
+        document.getElementById("container")
+      );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_react_development_15.4.1_jsx.html b/devtools/client/inspector/markup/test/doc_markup_events_react_development_15.4.1_jsx.html
new file mode 100644
index 0000000000..2483984ca1
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_react_development_15.4.1_jsx.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <script src="lib_babel_6.21.0_min.js"></script>
+    <script src="lib_react_with_addons_15.4.1.js"></script>
+    <script src="lib_react_dom_15.4.1.js"></script>
+    <script src="react_external_listeners.js"></script>
+  </head>
+  <body>
+    <h1>doc_markup_events_react_development_15.4.1_jsx.html</h1>
+
+    <div id="container"></div>
+
+    <script type="text/babel">
+      "use strict";
+
+      /* global React, ReactDOM, externalCapturingFunction, externalFunction */
+      /* exported ClickMe */
+
+      var ClickMe = React.createClass({
+        // eslint-disable-next-line object-shorthand
+        inlineFunction: function () {
+          alert("inlineFunction");
+        },
+
+        render() {
+          return (
+            <div>
+              <h3 id="inlinejsx" onClick={this.inlineFunction}>Click for inlineFunction</h3>
+              <h3 id="externaljsx" onClick={externalFunction}>Click for externalFunction</h3>
+              <h3 id="externalinlinejsx" onClick={externalFunction}
+                  onMouseUp={this.inlineFunction}>
+                Click for both
+              </h3>
+              <h3 id="externalcapturingjsx" onClickCapture={externalCapturingFunction}>
+                Click for externalCapturingFunction
+              </h3>
+            </div>
+          );
+        }
+      });
+
+      ReactDOM.render(
+        <ClickMe />,
+        document.getElementById("container")
+      );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_react_production_15.3.1.html b/devtools/client/inspector/markup/test/doc_markup_events_react_production_15.3.1.html
new file mode 100644
index 0000000000..5cf07bec32
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_react_production_15.3.1.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <script src="lib_react_with_addons_15.3.1_min.js"></script>
+    <script src="lib_react_dom_15.3.1_min.js"></script>
+    <script src="react_external_listeners.js"></script>
+  </head>
+  <body>
+    <h1>doc_markup_events_react_production_15.3.1.html</h1>
+
+    <div id="container"></div>
+
+    <script>
+      "use strict";
+
+      /* global React, ReactDOM, externalCapturingFunction, externalFunction */
+
+      var ClickMe2 = React.createClass({
+        // eslint-disable-next-line object-shorthand
+        inlineFunction: function () {
+          alert("inlineFunction");
+        },
+
+        render() {
+          return React.createElement(
+            "div",
+            null,
+            React.createElement(
+              "h3",
+              {
+                id: "inline",
+                onClick: this.inlineFunction
+              },
+              "Click for inlineFunction"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "external",
+                onClick: externalFunction
+              },
+              "Click for externalFunction"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "externalinline",
+                onClick: externalFunction,
+                onMouseUp: this.inlineFunction
+              },
+              "Click for both"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "externalcapturing",
+                onClickCapture: externalCapturingFunction
+              },
+              "Click for externalCapturingFunction"
+            )
+          );
+        }
+      });
+
+      ReactDOM.render(
+        React.createElement(ClickMe2),
+        document.getElementById("container")
+      );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_react_production_15.3.1_jsx.html b/devtools/client/inspector/markup/test/doc_markup_events_react_production_15.3.1_jsx.html
new file mode 100644
index 0000000000..f67317c9df
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_react_production_15.3.1_jsx.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <script src="lib_babel_6.21.0_min.js"></script>
+    <script src="lib_react_with_addons_15.3.1_min.js"></script>
+    <script src="lib_react_dom_15.3.1_min.js"></script>
+    <script src="react_external_listeners.js"></script>
+  </head>
+  <body>
+    <h1>doc_markup_events_react_production_15.3.1_jsx.html</h1>
+
+    <div id="container"></div>
+
+    <script type="text/babel">
+      "use strict";
+
+      /* global React, ReactDOM, externalCapturingFunction, externalFunction */
+      /* exported ClickMe */
+
+      var ClickMe = React.createClass({
+        // eslint-disable-next-line object-shorthand
+        inlineFunction: function () {
+          alert("inlineFunction");
+        },
+
+        render() {
+          return (
+            <div>
+              <h3 id="inlinejsx" onClick={this.inlineFunction}>Click for inlineFunction</h3>
+              <h3 id="externaljsx" onClick={externalFunction}>Click for externalFunction</h3>
+              <h3 id="externalinlinejsx" onClick={externalFunction}
+                  onMouseUp={this.inlineFunction}>
+                Click for both
+              </h3>
+              <h3 id="externalcapturingjsx" onClickCapture={externalCapturingFunction}>
+                Click for externalCapturingFunction
+              </h3>
+            </div>
+          );
+        }
+      });
+
+      ReactDOM.render(
+        <ClickMe />,
+        document.getElementById("container")
+      );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_react_production_16.2.0.html b/devtools/client/inspector/markup/test/doc_markup_events_react_production_16.2.0.html
new file mode 100644
index 0000000000..032d57539c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_react_production_16.2.0.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <script src="lib_react_16.2.0_min.js"></script>
+    <script src="lib_react_dom_16.2.0_min.js"></script>
+    <script src="react_external_listeners.js"></script>
+  </head>
+  <body>
+    <h1>doc_markup_events_react_production_16.2.0.html</h1>
+
+    <div id="container"></div>
+
+    <script>
+      "use strict";
+
+      /* global React, ReactDOM, externalCapturingFunction, externalFunction */
+
+      class ClickMe2 extends React.Component {
+        inlineFunction() {
+          alert("inlineFunction");
+        }
+
+        render() {
+          return React.createElement(
+            "div",
+            null,
+            React.createElement(
+              "h3",
+              {
+                id: "inline",
+                onClick: this.inlineFunction
+              },
+              "Click for inlineFunction"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "external",
+                onClick: externalFunction
+              },
+              "Click for externalFunction"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "externalinline",
+                onClick: externalFunction,
+                onMouseUp: this.inlineFunction
+              },
+              "Click for both"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "externalcapturing",
+                onClickCapture: externalCapturingFunction
+              },
+              "Click for externalCapturingFunction"
+            ),
+            React.createElement(
+              "h3",
+              {
+                id: "doublebind",
+                onClick: this.inlineFunction.bind(this).bind(this)
+              },
+              "Click for inlineFunction bound twice"
+            )
+          );
+        }
+      }
+
+      ReactDOM.render(
+        React.createElement(ClickMe2),
+        document.getElementById("container")
+      );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_react_production_16.2.0_jsx.html b/devtools/client/inspector/markup/test/doc_markup_events_react_production_16.2.0_jsx.html
new file mode 100644
index 0000000000..ed39b90c2b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_react_production_16.2.0_jsx.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <script src="lib_babel_6.21.0_min.js"></script>
+    <script src="lib_react_16.2.0_min.js"></script>
+    <script src="lib_react_dom_16.2.0_min.js"></script>
+    <script src="react_external_listeners.js"></script>
+  </head>
+  <body>
+    <h1>doc_markup_events_react_production_16.2.0_jsx.html</h1>
+
+    <div id="container"></div>
+
+    <script type="text/babel">
+      "use strict";
+
+      /* global React, ReactDOM, externalCapturingFunction, externalFunction */
+      /* exported ClickMe */
+
+      class ClickMe extends React.Component {
+        inlineFunction() {
+          alert("inlineFunction");
+        }
+
+        render() {
+          return (
+            <div>
+              <h3 id="inlinejsx" onClick={this.inlineFunction}>Click for inlineFunction</h3>
+              <h3 id="externaljsx" onClick={externalFunction}>Click for externalFunction</h3>
+              <h3 id="externalinlinejsx" onClick={externalFunction}
+                  onMouseUp={this.inlineFunction}>
+                Click for both
+              </h3>
+              <h3 id="externalcapturingjsx" onClickCapture={externalCapturingFunction}>
+                Click for externalCapturingFunction
+              </h3>
+            </div>
+          );
+        }
+      }
+
+      ReactDOM.render(
+        <ClickMe />,
+        document.getElementById("container")
+      );
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_toggle.html b/devtools/client/inspector/markup/test/doc_markup_events_toggle.html
new file mode 100644
index 0000000000..0f9bdc6a11
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_toggle.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <h1>Toggle Event Listeners</h1>
+    <button id="target" onclick="handleEvent(event)">Target</button>
+    <script>
+      "use strict";
+
+      function handleEvent(e) {
+        const data = JSON.parse(e.target.dataset.handledEvents || "{}");
+        data[e.type] = (data[e.type] || 0) + 1;
+        e.target.dataset.handledEvents = JSON.stringify(data);
+      }
+
+      const domEventsElement = document.getElementById("target");
+      // adding regular event listener
+      domEventsElement.addEventListener("mousedown", handleEvent);
+      // and a "native" event listener
+      domEventsElement.addEventListener("mouseup", console.info)
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_flashing.html b/devtools/client/inspector/markup/test/doc_markup_flashing.html
new file mode 100644
index 0000000000..82df5b05d5
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_flashing.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>mutation flashing test</title>
+</head>
+<body>
+  <div id="root">
+    <ul class="list">
+      <li class="item">item</li>
+      <li class="item">item</li>
+    </ul>
+  </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_html_mixed_case.html b/devtools/client/inspector/markup/test/doc_markup_html_mixed_case.html
new file mode 100644
index 0000000000..ab26005e17
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_html_mixed_case.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <svg viewBox="0 0 2 2" width=200 height=200>
+      <clipPath>
+        <rect x=0 y=0 width=1 height=1 />
+      </clipPath>
+      <circle cx=1 cy=1 r=1 fill=lime />
+    </svg>
+    <DIV></DIV>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_image_and_canvas.html b/devtools/client/inspector/markup/test/doc_markup_image_and_canvas.html
new file mode 100644
index 0000000000..6486bd2d40
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_image_and_canvas.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="html">
+  <head class="head">
+    <meta charset=utf-8 />
+    <title>Image and Canvas markup-view test</title>
+  </head>
+  <body>
+    <div></div>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAdYElEQVRogVWYZ3QV5pWuz6y5694pKzNzZ26SyWQyccpkJo5jx8GOHXcbgzHYgOkgJECIYoQAIQkhoYoaoIKEQEK9HUnnqJxedXpvOk3l6OiogkB0XOLkzpo/z/2BV9a6P971re/ffvbe6/32twVB3QFC+oMEdcmMa/cT0uxnwpBCwnaEZc8J7npPMDO2n8Dop3iHNhIc2URUtoVp1XYS2iSiol3E5UeZ12YRNxSz6G1idXaU5Xk9E5MqEvNO4vMu4gk7iYSVpYSRlYSelVk1t+Mqlue1LM1pWE5ouJPQcG9WxaNZNU/ier6aNfF1wspKUM29yTGeLNq4k9CyEJdxa0HC4vwwgoDmWeBBXTJBXTIRXQqTxgPELanM2Y8QUe4krNhBWLadSfVO5saSWLaksGw5yLLpEM62j/F17SQ6cpQ5UzHLgSZuTw1yZ17L6oqd+TkLc3M25uYsLM2ZuTVnYGVOy524gltxOUuzapa+hVlNqFidkbASEbHg6SZubWfJPcgXcT1P5wysTCm5HVdxO6FkcVbK8oIMQXjsAOGxZCL6Z5mfNB5gynSQKUMKE/r9hBW7mBnbz5L1MCvOYzzwZ/A0coZH/gxuW45gbHwfbe372Dt2sWAu5PFkK6tTvdyeFnN3QcPctJK5mIaFuI7lhI47CQ2rCRX3EjJW43LuJLTcndPxYE7Dw1kJtyO9TBirMfZnMXw9FU3nGR5MDPD1kpqliJg7cQWri3rmZ+QsJlQIosYDhPT7CWn3EdYlEf0WJqzZS1C5i1lLKnc86Tzwn+Zh4AxfTeTyf+OFfBHMYslwGHvLR0grX2O44i08A4e467vC41gHD2N93J8Rczcu4e6snNWE4tk5K+VefJT7iVHuz0pYjal4mNDxJKHg3kQ/cVstNtFpBmu30pj3FvXn3sQnO8+TmX4ezo6yGpdzb2GM5cQYs1MqBCHtXsbVuwmodhHU7GFyLJmY6SAzpoPEjAdYdBznrv80D8fP8iScw59mCvnvuVIe+M8wpUjC2voR0srf0XX+VwxVvoVPdJhV7yW+jnfwzVwff1gU8/XiCE/nh3g0K+Z+TMj9mJBHs4M8mRvlaVzJFzNK7keExM3VeIcz0bXtRVSzlo7S16n8/Gf0XfmIeXcNf1yRc2d6hDszWh4uu0hM6hFMGJKZNKYwbT5IwnGEW9507oUyeRTN5slELg9CWTyOnufrqQL+OFPMfycq+GaqmAXTcdx9W9DUv81Yw7vorr6HqvY9LC1biclPcNtSyC17Kfd81dwPNHA/dIN7oSZWI83cn2zl6Ww3f1gU86c5GV9MiJg31WHvO4mi/jNGqtcjrnobYflr1Gf9B/U5L+KVneWb5WFWJgZZmlDwZMXP0owdwe1AOndDp3gYzebJVC5Pp/P4IpbPV7ELfD1TxNPJfL6YKuQP08V8Eyvhy2gRK85MIrJkHN2bMTV/yHjfZ0wO7SEo3IG/ZxvBvt2M9+/D07OH8FAaE9J0YqpsYrrzzBgKmDEXMeeoYNlTx21nPXFtOY7uEwxXfUpf4bsIC9+iO+8VmjKf50bWC9RkPI+u7QD3ox3cnxnh9qSCe3M2bsWsCJ7O5PFVooA/LZTwx/kSvojlcz+cw11/Jnd8Z7njzWbFk8WqJ4dVTw5L1jNMqtIIDCUREO1mSpJEXJbEzGgS0cGdBPs+I9K7g1D3Nvxdn+Fu34qvdzfjAwfwDR7E2ZeCqXs/hu5kjN0HMLYmoW7YzmDJOjpy3qAr5036z79N26k1XD74U+qOP09t+ouM1O5i3tXI10sq7ie0LExoWJwyIPhDoogvYvk8iGRzJ5DJHd8ZbnvOMG89ybT+CBOawwTlKbjFe3EM7MErSiYqP0pMk05ce4JF/XFmZSnMjO5lQrQDb9sGXE3r8bVuxNvyMYGOLQR7dxAS7iHQv4/AwAG8gwcxd+9B1bSZ0cvv0p3/Mo0n/pO2U2sQ5a2j9cQbFG/5MWfXfpfinT+jIf0N2gs2ccvdzJ9uabgbk3JrSsXqnAnBnUAmi650pg1pjCuScIl3Yuz+BG3bBlTNH6Fs2oD65kZ0bVuwCfcQlR9nwZjDsuU8C4ZMFvWfMzm6j1D/dvzdm3E0rcPRtA5/2yYC7Z/8GSLQvQ1vzw68vbvx9e/F0bcHc8dmdNffo6/wBerS/pXGY88zkv8xA2c3UrrleY68+vec3/RTrqW/R/uFzcwYr/J4ZoT7szLufWu/AlPPZnTtH6Ns/hBp43uIqt+kp/wVhFW/Z7T+QzQ3t+AWHWBae5o5Uw4LljwWrfksWPJYMGUzrzvB+MBObG0bsTStx3DtA6w31hPo2MJ451Y8LZvwdmzB27UVZ8dmHJ1bcXZvw927A3ffZ7h6N6C6+hqd2c/Tdvq3DJ/fRFf6enLX/Zyk5/+G8xv/k9asjfSU7CSivsTdSB8P5xQ8Xh5jZVaNoLvsVTpL19BT/jsGLr/JwOW3GbzyDpqbW/ANpzJvPseKq5i7nlKWrIXMGfNYMF9g0VLEoukccdVxHJ2b0TWuRX9tHWON67Hc3ISneye+rp14O3fg796Bt2cH7q5t2Ns+wdb+Cc6uLbh7P8E3sBFX90eMNa5HUfkRPZlrKdz0Cw6++B32/fKvqNy3hv6i7Ygu7WXSeIXVqQEezct5tKTndlyNoLf8Tfoq3mLw8vtI6jcgb9yEvm07gdFjLFrzeTR+mRVnKdOaLIKSDKY1OdxxlbPqqeKW9QLR0cOYbm5EffVDjDc3Y23fhqNzN57e/bi69+HuScLTm4Svbx/e3t24u7bhaP8UZ+eneHo+wdmzDo9wIz7hLhyt++jN/oBT7/4Te3/5Fxx74x+4fvL3DJR9ysDlLSSc1TydH+L+nJQ7CS0rCQOCgUsfILryISO1G5E1bEbXsgvXwGFi2mxu2UtZtpVw113BirOcOWMB86ZCVpzl3HaUMTeWi1e4D8219agbPsLevQfvYCo+0RE8omM4+9OwdR3A1p2EszcJr3AfPuEuvD3b8PdsIdC/FVffx7iFn+Lr38t4fxr6ut00HH6Zwi0/omr/v9N+7jW6S9+h4+K7xB3lfLE4xOqslNszelbnHQgGK9YxWr0JWd1mVNe2Ye05yLQmhxVn2bMs2y+ybCtlWn0en/gkvuEMprV5TGvzCEoyMLVtR167FnXjJ/jFaUQVmUQUZwkpsghIz2DpOYyxIxlzxx6cvfvwC/fi79tBULiNkGg740Pb8Yl34RXuIzhwmPDgCaxN+xkpW8dA8Rt0Fb1MZ+nLXM//NaGxHB7O9nF3RsbtmJG7CS+Ckas7kTfvR30zBU37IbySLG7763g61cLDyA2eTLZi78+g5vRrFCT/gq6SjwiMZjKlycc1cBRd0xZGrnyA5sZWxkczmNYVMKkvIaorIawpwiLMQN+Vhr4tCWvXPrzCffj7dhEU7iAs3sO4eA+h0RR8/Ul4e/YzLUknLs3A27kLzdUPGCx7icHy33A99z/wyT9nNXqT+zMj3IsbuBO3I1D3ZyPtPcXYUC4uXRlhey1LU518uSLlm1U1y+EeJC0nObPnBfa9+48UpLyAtH4fPvEZxofSsXbuxtmbhLM/jZD0HFO6SsZVldiHi3FKL+JXlSFpPkTf5c3Im7Zj696Lo2snnp5dTAynMC1NIyRKxte3j/GBZKZHj5CQHWV6aD+Rvm0Ya99EXPBLbp5+DkXtem45qngSE7I6KebxvA6BS3+Vcdt1pv3tTI23MR1sZ3VxlG8em/jqgYFEsA9x82kObvwJ7/xCQMZnP8HYcYw5XQkB8edMKdLxDBwgLDuDazCToKKCwfpj1Odv51TSGmovfIq84wRm0SlGr+9AXLMBW/deIsNp+Pr2MTFyhLA4lcDAAcZFKUREB5kaSmF6KIkZ0R58TeuQFf+G5s//lcHi3xNT5fAo0sKDSSGPZyUIJpxdxP19zIWETHrbiAU6eHJbxX89sfD0loqovZmumlRO7vwVJz/7KS0X1uEZPMmMOocJaTqhkTSiss+JyrMZrt1NXdZ6Sk+8T27aW+z44F9Y/+pfk536G7qufMbojd0om3dh7UkhIErDN3gQ/+BhxsVHCAwdwSc6hE+YQqB/P5PiZOKjKUwKd6C/8hbN6c/Rnv0ibuERVgPXeRzr52F8CMFiYJhZ3yAJ/wDz4X7uJST81xMLf3pgYnlyEK+2Bml7JoP1aZj6zjKlLWbOWMCCMZcVWx7zY2eJqU/RX7GB0sO/Zucb36Hy9Hoy9r7CKz8V8G/fEfDRa/+Tyqw30fQewz2agV2YhnvwKFFFJh7RMXzD6fhHTuId/hxnfyouYTLBwRQmRw4wM5KCrWkDfXkv0XHuZYztB1jxNvBlQszjxAiChEvElK2HeZ+I+3EVX67o+eaegYcLSmb83QT0DUxYbjBtbSA6Vsm0oYQlewl3nBdYsmSzZDnHtDaToZrNXDn9Ojvf/nuyU15l59of8fPvCnj9lwLOH/s9yr7TeFT5uGXnCCrPManJJ6o6z7g0h4D8HOOKXMYVufhkZ/BJ0hkfPsr4UCqRoUO4OrejrF6LuPw99C37WbBX82VCxOPEEIJZp5gpWx/zPjF3p+Xcm1XwaEnL09tjPF7UPhucwoPMutuIWa8SM1UQtxSTMOWSMGYxqc4gMHqMsDwHVUsa9ec/ISv5d5xLe4czh96grngX6sF8Io6rRGxXmLBUseC9yoKzhrCmiLDuIuGxMsJjZUQM5USMpUR0+YSVZwlJTzI+dBhPbxKW1u2oGj5F25LEtOEij2NCHsYHEMy6RcRdgyyGRrk7o+LRkp6v7jl4esfK4pQcn7EVnfgS8p5CrKNlhMYuMWmsJGEv5+74ZRZthbhEaXiGzmAWZuJXViHryEHdV4isJx+nthab6hJOXSUTrgaWwm0sh9tIOK8RNVwmarpCxFxD1FJLxFpL2FJN1FxJ1FDM5Nh5IvJT+ESHcfcdwNi2B21LEhFNIQ+mOng0I0RgkdbhUjcy5e7j9rSCp3esPL5jxWHqoK7qBAf3vs3xlLWkJ39AZupaGor3YhoqZtbVyIKnjthYHvGxfILK8/ikBfiVVbiV1ZhHKhkbqcAgKcesrMRjqCbqamTGd5O4t5mY8zqTtgaCxjqClnrCtusEbQ34zTUEzJeZsFQxY6tgxpBPUJKOR3QES3cyutZ9hFR5PJhs5VG8G4F3rBGLsppJfw8L0xLik6PcWTYh7C7jxz/6H/zz9/6CH37vL3nuB/+L//jx3/DRmz/jUn4ybt0NVqJ9rASuEjcWElTmE9JWELM0MmVrIWxqxme4jt/UiM/cQMBylbCjkZi3hYXxThaDPSwGe5gPdBHzthFxNBO03yBov07IXk/EWkPUXEbMXMSMMY+gJB2H8BDOgaN4JZnMOi7z1XwfAr2kFKu2hrmJQW7NK1iaU3P3roP+/su89OIP+NEP/44ffP9v+bu/+Qv++i8FPP+zf+JCVgpOXSfLkRHmnHXEzaVMGcqYNtcQdzQRd3Uw6+lhbryfCVcLEVczEed1JtxNxLwtxP0dzHo7iHvambQ3E7U3E3G0EHG2Eva0EHXfJOqsZ8JeRcx2kVlTAWHFKdyDabhERwlITzHnqOCPCz0I1EMFeK0N3JodZnlOTiIuZ3JSTnNzIW+8+Ut+/vN/4SfP/ZDvffd/8w/f+St+++K/U5yXjlbajlPbzIztKtPGMqJj5UyZa5mxNzPjbCXu7mTG20XM18GUp5VJVxMTzhtM2q8zYbtB1NxE2HidgK6OkOkaEUcLk54Oor42JjwtRF0NTDmqmTSVEjNdIKw4hWvwEM7+VHwjJ5izFPGHRCuCMUkREed1bsXELM4MMxESYTC0UFl5ik2fvMWPf/x9nvvxD/n5z37CmpdeYN+uT7l5rRyjug+T4joR4xX8qgu4ZBfwa8qZsFwn5mghYm7Cq69j2tPKlLuZCWcjE/YGIpYGwsYGxvUNBLX1BDTVhAz1TNqbmXC1EHY2M25rZNxSTdhcybgmn7AmG9/Icay9+7D0JOEcOEhMn8vTyXoE5pEiwuZ6liL9rMyMMhMeQiW9SnnJMVKSNvL273/Db196nt+teZFPN3zA2ZMHab9RhlrajF5ag01aiEOSi1NSgFdZTshQz4TlBiHTNXy6WqLWa0Rt9USsV4mY6wibrhIx1BPWXyM61kBUX8uksZ4Jy3XC5mt4xmpxaKtwaC7i0RThkmbhlWZgF6ZgbN+OqX0ntr4kosoM7geqEFjFxUQM9dwO93MvLmUuNIxe1kBF4VGSdnzA5g1v8e7rv+GDN9ewb8cGcs+kcKMum6Gei8j7CzGIc3HJ8vCqSvEoynDIKnArL+PT1RIYq8OprMClvohXU45XU45fXYlffYmgppaI9ioxQx3TY7VE9LX4NNXYVVVY5Bexygqxy/NwSs7iHD6OqWs3uptbMLZvx967l7DkGLccFxA4RaXMmJt4MCHmXnSEOe8gfkMnzdVZ7N38Fq/9+ie8+IsfsuZX/8bH773E8ZR11JSlIu7OQ9F/HllXOsquE8g70pG2ZqDszsE0VIJDVoFTUY55pACrpACXvAiXvAi3rBSPrJyA4gphZTWT2ktEVOX4FeW45eXY5WVYFaXYFUXYFbm4ZJk4xUfRtW5Ddf1jjK1bsXbvxic+yKz+DAK7uJSEo5VHk6MsBQZIeIXcisrQiGo5vv9D3lvzHK/88ru88JO/5YXn/ooPXvk+pw69w7WKJNpqD9JxeTeNhZu4nPUBV/M3IWo8jm2kFI+iAvNIATZpMU5FCV5VKT51GT5VBT5VFUFNLVHdVYKKMvyyYpySQhySYhyKctyaCtzqUjyqAryybByDR1E3f4a8YQP65k8xt2/D1beXCdlRBDPeDhbDQpajAyxEBliKDjEXHMCuuoqwKYuTyW+x/cOf8eGr/4cNr3+fjW/8Mx+/9k9sf/+HHN3+K5LX/wtJa7/LiW0/p+7cBmQ3T2AduoBjtACHtBC3ogSPshSPugKf9jI+TTVedTVuZTUuxSWc0ou4FSX4VBUE9JcJGqoJj1UzrinHryzGJz2HuecI2pu70d/cjq5pM/obH+Pu3cGs5giCh0sKHt9SsjonYWGin4WJfpYmBog6b2KWVtJ86QAlp9ZzOvlVsg6+TvbBNzm171VOJ/2OC0feoezE+1SdfJemC5tRNB/HMXwBt7QQ23Ae1qHzeJSluBUlOBUXcSkrcKku4VZfwaupw6utwaWqxKOtxK+7RMRQw4S5hgnjFSL6CsKaEkLyPKy9R9E070J/czvG5q0YbmzE1b2VKWkKgq/v6vjDPS2PFuUsRoXMjnexEO4l7u8gbG7ENFKKuOkkHVcOIqw7grjxJH21R+m6nEpfzWFGrh9H3nQMU28WflkxAdVFnKN5mMXZWIZycEgLcMqK/gzgUV3Gq67Gq63Bq615VhVtFaGxS0SMV5gwXmHCUPHsS6rOJyjNxNyVgvb6VsZubMbU/Anm5o24OrcQGdqL4NHCCF+syHmyJOH2VB+J8TYS/hamnU2EjM9szyEpxTiYj22kGLe0AvtwKebBQmziQhyiPOyiXJxDebhH8rAP52IaOINZnI1DkodtJBeHtACPshSftgq/7go+TTUu1SUcikq8mkt4NZUEtBUEtRWEtKWE1AUE5Nn4JRk4+1MxtG5H2/gxumvP9kfGxg9xtW4i0r8LwYPZAb64LeHr21Lux/tZDLWR8DYx7Wggaqpm1tXIhLGaoLaScU0FfsVFnCMF2MR5uIYu4B7JwyY6i0l4CmNfBmN9GRgHMrANZeOS5eFRXMCtKMSjLMGruohHXYFHXYVbVYlb9cxSfaoK/KqL+FSFBBR5+GRn8AwdxTV4AHP7NgzNH6O/thZ9/Xuor7yJ6vIb2BrXEe7ZjuDx3CBf3hriyyUxd6c6SfgaiTuvErPXErPVELPVMGW6TERfQUBVglt6AYf4HHZRDo6hbBxDZ7EOnsbcfxJz/0msg6ewDWfilOTgluUS0pcQ0BTjVhTikBZgkxbiUpbh01YxPnaFce0V/OpKfMpSvIo8vJJMXENHsAuTsHZvx9iyAUPzWgzX3kNT8zry8jXIyn6Lqe49Au2bETyZFfJkXsjj2R5uhZqIOaqZNFcxZakkZq0iMlZKVFfyrKyKPHyyXHzSc7hHsnCIT2EXZWAXZWAbPIllMB2r6CSO4dO4ZefwKs4T1BUT0BTjURXgkhfgVBbjUZcR0FcRNFwmqLvMuKYCn6IIjyQH99Dn2Pr3Y+78DEPbBvQ33kV77Q00Nb9DWfky0osvoSx/BWvDWsbbtyJ4ONPF49keHs50sBxsZMZ+mQlzGZOmZ5oyXGRirIigOo+AModxxTO5Rk5iEqZhEx3HLv4cm+g4xt4jjPWmYRlMxyXNYlyTj0t+Do8ij4CmmHF9KaGxCgJjlfj1FQS05QS1lQTUZXhk+ThHzmAfTMPcvRt960Z0N95H0/B7lNVrkFa+iPTir5GXr0F35S1czRsJ9+xCcH+ylccznTyYamPRV8+0pYKooZSorpiw9gJRfSFhbR5BVTYBxVnGZafxSzLwjqTjHvocu/gYdvExbKKjWAePYRk8hlV0Aos4A+vQKbyK8/jVBYT0F4mYKoiYKgjqy/GpS/AoS/DIi3FK87ENn8UuSsc+mIq1dy/mjs0YW9ahqHmNweL/pPf8TxkqeQH1lTcxNqzF1bKVUO9eBKvRVh5MtXF/spVFXz0xaxUTxotE9YWENPmENOcJqnMYV2bil58mIMvAJ0nHPXwch+gIloHDmPtTMQkPYew7xFhvKoa+wxiFxxkTHieoLSSkKyakv0hIf5FxfSk+TRFuRSFO2QXc8gIcklxsw5k4hk7gFKdh69uHsW0z2utrUda+wXDFbxkpexlt3TvYmjfh6tzOuHA/U5JjCFZCLaxGW1mNtrIcuMas4wpT5nIiY0UEtRcIqnMJKLMIKM4QUJxhXH6KgCwd7+hx3MNHcQ0dwSlOwypK/RbmMKb+I5j6P8c8cAK37BxuWS5ueT5ueT5OeR4O2XlsknNYR3Oe3SU5OEazcA2fwj18HFtfMvqWrSivrkVy5R1GL72Bsu49rK1b8PTtJTBwgNDIEaZVpxEs+2+yEmrhbqSNlVAzi54G4vbLTJrKiIwVEVDm4JWdwSM5iWvkBJ6Rz/+/wJ3iVByiQ1hFqZj7UzH3H8YsPPYMoP8kqs4jaLqPoRdmYBw8g3k4C8tI9p9ll+bglOXgkmbhGj2NY/A4xq5k9Dd3or62GVndRygbNmJs3Y6nP4XA0BECI58TVpxhSn8OwYKvmeXxFu5EOrgbbWcl1MK851krTZrKCChzcEtOYR08gqH3ILqu/Wg7k9B37kXXsQdN2w40bTtQt+5E1bILRctulC37UbUfRNWWymhzCrKWw6i70zEMZGIdPod99FkFbJJszMNncEjP4pJl4hjOwNSdhq41hbHWZMztB7B1peLqO4p/OJ2wPPPZukWdQ1Sfx5SlCMGcu5kFXzMr4Q7uT/Vwf6Kb5UATs/aaZxCGYsZV53AOp2PoPYi6fS+Kll0omrchb9rCSMNGRq5tYKThE0avbWH0+jZkTXuRtySjbE1F232Csb4MTKIsbCO5OKX5uOUFuBT5uBTnMY+cwiY9jVOWiXXoFKa+4xi7jmHvO4l3MJOINI+o4gJT6iIm9UVEdAUE9QWExgqJmIsQxJxNxN1N3Brv4GFMyMNYH7eCN5l11jJtrWLKXE5YX4hPnol9+Dgm4SH03cmoO3ajaH0GIW/+FOXN7ahbd6Pt3I+hJ+3bR+00Lsl5XJJ8XJICXJKCPwN4FIV4VPk4FWdxKTNxK7LwyHPwSXIJSi8QlRcxpSojrqsiPnaJ2NglpgwVhPQl+PRFeHUFuLTnEUzaGpl23GDJ38bDmJBHM/3fAlxl2lpFSFdMQJ2HT56FS5KOXXwMc38q+p4kNJ270HXsQt+1E2PPfqz9qdjFx/BKMgko8gipCwmoSvApinBJCrAPfzsbSfJwywvwqi8QNFzAqz+HX5NLSFdEzFTBnLWaJUs9C6Y65k1XmbPUM2e5SsxSTdR0iYCxFLe2AKs6l/8HXK32/y5m8HIAAAAASUVORK5CYII=" />
+    <canvas class="canvas" width="600" height="600"></canvas>
+    <script type="text/javascript">
+      "use strict";
+
+      const context = document.querySelector(".canvas").getContext("2d");
+      context.beginPath();
+      context.moveTo(300, 0);
+      context.lineTo(600, 600);
+      context.lineTo(0, 600);
+      context.closePath();
+      context.fillStyle = "#ffc821";
+      context.fill();
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_image_and_canvas_2.html b/devtools/client/inspector/markup/test/doc_markup_image_and_canvas_2.html
new file mode 100644
index 0000000000..00fbd36168
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_image_and_canvas_2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="html">
+  <head class="head">
+    <meta charset=utf-8 />
+    <title>Image and Canvas markup-view test</title>
+  </head>
+  <body>
+    <img class="local" src="chrome://branding/content/about-logo.png" />
+    <img class="data" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADI5JREFUeNrsWwuQFNUVPf1m5z87szv7HWSWj8CigBFMEFZKiQsB1PgJwUAZg1HBpIQsKmokEhNjWUnFVPnDWBT+KolJYbRMoqUVq0yCClpqiX8sCchPWFwVlt2db7+X93pez7zu6Vn2NxsVWh8987p7pu+9555z7+tZjTGGY3kjOMa34w447oBjfKsY7i/UNM3Y8eFSAkD50Plgw03K5P9gvGv7U5ieeR3PszeREiPNX3/0DL4hjslzhm8THh+OITfXk3dhiv4GDtGPVzCaeJmPLYzuu5qJuWfuw2QTlcN1X9pwQU7LhdZ/ZAseD45cOh9hHvDkc/yAF/DNhdb5Mrr3PvBMaAYW8fMSIi2G497IMEK/YutGtAYr6+ej+nxu/NN8Ks3N7AR6HgcLz0Eg1Ljg1UcxZzi5qewIkMYLRweTr2Kzp+nmyXAd5pS3XQDd+N/4h4zgu9FI7brlXf90nMEnuwQxlvv+hosE3TuexmWeysmT4W+WxkMaLzf9Y8ATgjcUn7T9H1gqrpFq8eV1gMn6t16NhngjfoX6q4DUP032Rd4LJgpSLwJ1yzFqBG69eRkah0MVyo0Acfe+yy9AG4nMiYCkeM53KKFXncBLAXqEm+wCqZwaueq7WCmuLTcKSJmj737ol2hurA9eq9VdyiO8yWa3NNyog+SB5CZodSsQq/dfu34tJpYbBaTMzvVddDZu16q5smXf4G8zEvqm4cyaAmJPuTJk3oJWdS4WzcVtfMZbThSQckb/pYfRGgo3zNOqZnEHbJPGK4abaDCQIIsT8V/qTaBqHkLh6LzXH8XZQhbLhYKyyCC/WeHYcNdmvOgfe8skzbWL270/T3wf7tSx/lGCbTu8xlzzmCSWLc5iwmgikcCHi3Mga0Ry913vBFvQwg90l6M4ImWKfsWOp7DSWxmfpPlCFuPFfsNfKrCnPYpQKIRgqBK7D0SxYaNHwkEiJMtl0ReDp3Lc5D3PGoTo/sKngCl7a5chFqvBatKwjBd7WwqIlzB/78NcoUcp5VSgGxm+7b8eqQRGnHMO634epO4S1EZww09/iFg5UmGoESDuznP1xVhTUX1WWHPzjpd25wyH0hRxI3LGM75nxmuNEEUVpAN0XgxmPoKralakbQnWlIMQyVBD/w+3orkq4lvualjKyWwzt4MaxqspQHVhPOWG64bxYuhZXSFGWhipbSDVragOu5Y9eAsmDDUKyBA703vemVhHoueD6e9wAzJK1WfmN0Umk5GGM4kEMZcuIECqgjm0nldAqmbjwtm4VxZH5AvlADP6mx9Eqy9Q0+KqW8Ch+47FaMMYmnNGfY1iPMshoC6qFxme4wQ+0p+ARE6H3+9veWEDWgUhDhUKyFARn4jM5BNxT0XsMg7bfymGK1ov3wtjDfhL4w0HVGUVBEjDaaE+QNdrcNWch1PG4W6xrjBUXECGivg++Cva3JUT4iQUz3V2RsSVaKLwOuDT89A3HdBQoxhNC+fnVm74ual2EG893P6G+PuP4SfiO4cCBWQooL9qCWKNXPbcI37Aa/lnlZxXRt4RFONGwSDCPAHqOuqjWct1QiEMw5mChM5X4K47FyNqcd3aK9AwFH0CGYLoe1ctxk2eWi57rg5JfGp9rzC6ggCdFlAgHBDw5Yxlcg6G8SyHCjMlsgmDD9zhSeHlF+JnAgWDTQUy2NxfdwOao1UVV3pi3+bE97YSbWpLAbn6zefHNQkp1PMpIBwwvslKgIYTKM2nEpNzrGcH3FXTEal0L38kJ4uDQgEZbO4vnI173LXf5NHZaiUxtaCxyZuo/rK6LpUg54yg3zTWRAArvDcRIPZ6BqzrQ1REpmL+DNw32OKIDCb3X1qPVn8wNNMT4w2bvs+q4bAZrqBh2skaL3yyhhIIZ4i6oHkUK0RckcB8GigEyRIH4A6Mgc8fatl0/+BkkQxC9gIT4ljna1rIZW9rEdNbjJcNjsnoYj7LHWCUwpITzEgzRQKZ3XAFHbTzA3hrz8TEUUZxFBhoKpABQt/97p+w0hMZG68I8R6FtlsJT3FELndZntjM+VMnylKYq8GJI3UZaRMpquGSGFVOEfv0YZBMNzz+uvjbfzS6xQERIhlI9FcvQWNdFVb7x1zCb+QNK8vb9NsiifmI5hBgVoOCBC1sb0ab5RomqENxLO3eA1/0NDRU47q2RQNbRCUDIb7lF2CNL3ZGxEV4n08TVvZWYG4pZyV0zUdS45tyCBByOHWiyvZmxFXDCyRo1ge5+Sy0TA+8lWMiP/6O0S32exGV9Jf4fr8azdUR3zL/CZz4MtvzdX5uOYs6NDOmpkuj5Huh+7qUQSYl0ThHzw0YQzcGo6bhzEqoYq5rN3yRiYiG3Vfe2Ybm/qKA9NNZ3nNm4F7/yDkg9AN+U1mHiBcXP8zuDN76jj8hg1QyiWQigalj02BJPhK8I0zxijAjhp5zhlpLUDvS+BCy2HMAvvB4XDgL9/SXC0g/ou/5+6/xLX8w0uJrOIkXfPvyhY0F6gr7M8H0KWFYikcqAXakB+xwD9CdREBLoau7Gz3cAdSIdLFxFtJTCqRChSjnutvhDcREtzjz2Tswtz+yeNRFUeXZXtWux7C1fuoVcbd3J//ipDX3uZZDLGrwweS+UBLL5TDliVBnF8P7H+XI8aRRGsIBJg/Zlslt1+W+D1JWoSyi+kD9jfhs78t7mhZhSl+fLfY1Bdyv3I8V/qpY3B1McgN7ZFT5/vNO0I5DPLLdPBIJA8qc4h2I0QplYfDpJwHT+aj0246r5S8rToG8OjCle8wk4OLvvYGa+Ovr84uo2qBSwJS9G5egoZFLTfiEqWDtbwGfHgKOdPHcS+ai7XDzMPW/FJRLGGcxnBbK4YJC2K+h+T6Bdu5CqHqCWERd3bawb7JI+iJ735+LNaHaprBLLHBm08U3XxShEsdt+f3eTh3v7aC95Dct4RCWL5OZWh/oXBZThxAIxyOXLzBk8aiEWJID8rK3CpPOmeHaGpvCS+7EHv5FujVHUSJPLXvIFeHcNc+9xrB2gws9KZdxuLFax/WLM5gzzSm/lTXF/OdAcapyvjxPqxqHjr2v4ckX2bS2dRBrc5lSdpKjEJ9/9tdwX2WMd53ZQ2IVo3RES+UwVSpCPvYepNx4gmTGDUKIMQ4eduPnD7mx9xOn/KZKOlFbStjONxHTtR+BYAPmnoZ1Zp8wkBRwP/EL3u0F/C2hGl7vpz7vW37T3vP7if8wroKuoh8ribknX9BK5rcF+mo1qKaKyRPJTgTDjbzY8szcuLb3bpH00u35T47j7prRpwDJTxzyG0dHgxPp5bPG8VdkpfPbUg3SgoOo2mwVukb98D5EqpswZTTulCggTk4gpYhv0++wIhCJxr0+Hq1sondis0SE2oxQe3qWXwWyO4DSQg9gJ8Iiw1VFcGqXxet0N9xE4ygIxv/9W6wo9WyROEX/R+eiobYSq2vHTOR631Eiv2lRfh9dvxkumkXh92Qsx8XrAJ+7YGbWuhxOi/U+31NQmzyqNYG8N/3wfo6CRtRHcN01FzkvojohwLu0VVvDa56IS/xcj2b7nN+O+m0jqpE1wMPXZxAN9iCVThtDvH7gmiRGRpU8Lspv1Uhq4wIVdQoyuGSLNYPKUCS8+CzNURbzMmjK3i8u0U793lmuV0ef9nWQ5MGC/DiUqEUSaCtXna9RJEspZS1lrXINK/pcq+SpT50t98QKMq1FRmDfx3vxty102k0PM4ssEnvuz5+G26Ij4yDpz6z9fV8bkyIkqBFkhej0Ib+ZQ34XJK9AfozaiimqIoX3Jp3tiISrcfYpuN2+iFph/02P36PNC9fVcCnp6H9jYouKyfaWufz5Tp9tVxcUniw7IohZv4dZz81/ns67z3AYPrc2n0+Ix2q8k0PWjgBy88XaibnfK9A+5LdDY2Ivhy36fbT8Zv3Lb1U1qLqUxorXEEXIs0mjjrtxoTZWtdvigNs2sgPiujTv6DIZLld6b/V5742JZV3fUsUVFy5gdsNtKWFzUCEVbNepD1MkSMVbsb6SZm7jI3/zODtQKgUMsOw8wDZ63t5xcV1TnaEAxoc6wrqY+Fj+N4DsqOnhOIdicrQSm1MPYCPlIqHn5bbHg8/bj2D3QfZnCX3mpAICDZV8jH5kpbZqTD0W+DxaA74CWzLN2nd14OlL72J38Lf7+TjC7dadZFDoZJQPrtaIKL/G0L6ktptPZVJ8fMqHYPZOKYPMyQGadIJfDvdXwAFiZOTvDBPydf5vk4rWA+RfdhBlaF/yDDBRoMu9pfnSjv/p7DG+HXfAcQcc49v/BBgAcFAO4DmB2GQAAAAASUVORK5CYII=" />
+    <img class="remote" src="http://example.com/browser/devtools/client/inspector/markup/test/doc_markup_tooltip.png" />
+    <canvas class="canvas" width="600" height="600"></canvas>
+    <script type="text/javascript">
+      "use strict";
+
+      const context = document.querySelector(".canvas").getContext("2d");
+      context.beginPath();
+      context.moveTo(300, 0);
+      context.lineTo(600, 600);
+      context.lineTo(0, 600);
+      context.closePath();
+      context.fillStyle = "#ffc821";
+      context.fill();
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_links.html b/devtools/client/inspector/markup/test/doc_markup_links.html
new file mode 100644
index 0000000000..81828dafa5
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_links.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Markup-view links</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="icon" type="image/png" sizes="196x196" href="/media/img/firefox/favicon-196.223e1bcaf067.png">
+  </head>
+  <body>
+    <form id="message-form" method="post" action="/post_message">
+      <p for="invalid-idref">
+        <label for="name">Name</label>
+        <input id="name" type="text" />
+      </p>
+      <p>
+        <label for="message">Message</label>
+        <input id="message" type="text" />
+      </p>
+      <p>
+        <button>Send message</button>
+      </p>
+      <output form="message-form" for="name message invalid">Thank you for your message!</output>
+    </form>
+    <a href="/go/somewhere/else" ping="/analytics?page=pageA /analytics?user=test">Click me, I'm a link</a>
+    <ul>
+      <li contextmenu="menu1">Item 1</li>
+      <li contextmenu="menu2">Item 2</li>
+      <li contextmenu="menu3">Item 3</li>
+    </ul>
+    <menu type="context" id="menu1">
+      <menuitem label="custom menu 1"></menuitem>
+    </menu>
+    <menu type="context" id="menu2">
+      <menuitem label="custom menu 2"></menuitem>
+    </menu>
+    <menu type="context" id="menu3">
+      <menuitem label="custom menu 3"></menuitem>
+    </menu>
+    <video controls poster="doc_markup_tooltip.png" src="code-rush.mp4"></video>
+    <div id="invokee"></div>
+    <button id="invoker" invoketarget="invokee">Invoke</button>
+    <div id="my-popover" popover></div>
+    <button id="popover-invoker" popovertarget="my-popover">Invoke</button>
+    <script type="text/javascript" src="lib_jquery_1.0.js"></script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
new file mode 100644
index 0000000000..0e3bf0a57f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Markup-view Linkify ARIA attributes</title>
+  </head>
+  <body>
+    <div id="aria-activedescendant"
+      aria-activedescendant="activedescendant01">aria-activedescendant test</div>
+    <div id="activedescendant01">#activedescendant01</div>
+
+    <div id="aria-controls"
+      aria-controls="controls01 controls02">aria-controls test</div>
+    <div id="controls01">#controls01</div>
+    <div id="controls02">#controls02</div>
+
+    <div id="aria-describedby"
+      aria-describedby="describedby01 describedby02">aria-describedby test</div>
+    <div id="describedby01">#describedby01</div>
+    <div id="describedby02">#describedby02</div>
+
+    <div id="aria-details" aria-details="details01 details02">aria-details test</div>
+    <div id="details01">details01</div>
+    <div id="details02">details02</div>
+
+    <div id="aria-errormessage"
+      aria-errormessage="errormessage01">aria-errormessage test</div>
+    <div id="errormessage01">errormessage01</div>
+
+    <div id="aria-flowto"
+      aria-flowto="flowto01 flowto02">aria-flowto test</div>
+    <div id="flowto01">#flowto01</div>
+    <div id="flowto02">#flowto01</div>
+
+    <div id="aria-labelledby"
+      aria-labelledby="labelledby01 labelledby02">aria-labelledby test</div>
+    <div id="labelledby01">#labelledby01</div>
+    <div id="labelledby02">#labelledby02</div>
+
+    <div id="aria-owns" aria-owns="owns01 owns02">aria-owns test</div>
+    <div id="owns01">#owns01</div>
+    <div id="owns02">#owns02</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_mutation.html b/devtools/client/inspector/markup/test/doc_markup_mutation.html
new file mode 100644
index 0000000000..f021c9fcf7
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_mutation.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+<html class="html">
+  <style type="text/css">
+    #node1.pseudo::after {
+      content: "after";
+    }
+  </style>
+
+  <body class="body">
+    <div class="node0">
+      <div id="node1" class="node1">line1</div>
+      <div id="node2" class="node2">line2</div>
+      <p class="node3">line3</p>
+      <!-- A comment -->
+      <p id="node4" class="node4">line4
+        <span class="node5">line5</span>
+        <span class="node6">line6</span>
+        <!-- A comment -->
+        <a class="node7">line7<span class="node8">line8</span></a>
+        <span class="node9">line9</span>
+        <span class="node10">line10</span>
+        <span class="node11">line11</span>
+        <a class="node12">line12<span class="node13">line13</span></a>
+      </p>
+      <p id="node14">line14</p>
+      <p class="node15">line15</p>
+    </div>
+    <div id="node16">
+      <p id="node17">line17</p>
+    </div>
+    <div id="node18">
+      <div id="node19">
+        <div id="node20">
+          <div id="node21">
+            line21
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_navigation.html b/devtools/client/inspector/markup/test/doc_markup_navigation.html
new file mode 100644
index 0000000000..9633052e17
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_navigation.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<html class="html">
+  <head class="head">
+    <meta charset=utf-8 />
+  </head>
+
+  <body class="body">
+    <div class="node0">
+      <p class="node1">line1</p>
+      <p class="node2">line2</p>
+      <p class="node3">line3</p>
+      <!-- A comment -->
+      <p class="node4">line4
+      <span class="node5">line5</span>
+      <span class="node6">line6</span>
+      <!-- A comment -->
+      <a class="node7">line7<span class="node8">line8</span></a>
+      <span class="node9">line9</span>
+      <span class="node10">line10</span>
+      <span class="node11">line11</span>
+      <a class="node12">line12<span class="node13">line13</span></a>
+      </p>
+      <p class="node14">line14</p>
+      <p class="node15">line15</p>
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_not_displayed.html b/devtools/client/inspector/markup/test/doc_markup_not_displayed.html
new file mode 100644
index 0000000000..20a4b94155
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_not_displayed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    #hidden-via-stylesheet {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="normal-div"></div>
+  <div id="display-none" style="display:none;"></div>
+  <div id="hidden-true" hidden="true"></div>
+  <div id="hidden-via-hide-shortcut" class="__fx-devtools-hide-shortcut__"></div>
+  <div id="visibility-hidden" style="visibility:hidden;"></div>
+  <div id="hidden-via-stylesheet"></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_pagesize_01.html b/devtools/client/inspector/markup/test/doc_markup_pagesize_01.html
new file mode 100644
index 0000000000..8323f0b2e7
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_pagesize_01.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html class="html">
+  <body class="body">
+    <div id="a"></div>
+    <div id="b"></div>
+    <div id="c"></div>
+    <div id="d"></div>
+    <div id="e"></div>
+    <div id="f"></div>
+    <div id="g"></div>
+    <div id="h"></div>
+    <div id="i"></div>
+    <div id="j"></div>
+    <div id="k"></div>
+    <div id="l"></div>
+    <div id="m"></div>
+    <div id="n"></div>
+    <div id="o"></div>
+    <div id="p"></div>
+    <div id="q"></div>
+    <div id="r"></div>
+    <div id="s"></div>
+    <div id="t"></div>
+    <div id="u"></div>
+    <div id="v"></div>
+    <div id="w"></div>
+    <div id="x"></div>
+    <div id="y"></div>
+    <div id="z"></div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_pagesize_02.html b/devtools/client/inspector/markup/test/doc_markup_pagesize_02.html
new file mode 100644
index 0000000000..db2502c89c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_pagesize_02.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+
+<html class="html">
+  <body class="body">
+    <ul>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+        <li>some content</li>
+    </ul>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_pseudo.html b/devtools/client/inspector/markup/test/doc_markup_pseudo.html
new file mode 100644
index 0000000000..7da0970f15
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_pseudo.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+article::before,
+article::after {
+  content: "";
+}
+</style>
+<article>
+  <div>test node</div>
+</article>
diff --git a/devtools/client/inspector/markup/test/doc_markup_search.html b/devtools/client/inspector/markup/test/doc_markup_search.html
new file mode 100644
index 0000000000..e4c6fa02cd
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_search.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+  <ul>
+    <li>
+      <span>this is an <em>important</em> node</span>
+    </li>
+  </ul>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_shadowdom_open_debugger_pretty_printed.html b/devtools/client/inspector/markup/test/doc_markup_shadowdom_open_debugger_pretty_printed.html
new file mode 100644
index 0000000000..725bb0753b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_shadowdom_open_debugger_pretty_printed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>

+<html lang="en">

+<head>

+  <meta charset="UTF-8">

+  <title>Custom Element Pretty-Printed Source Test</title>

+  <script src="shadowdom_open_debugger.min.js"></script>

+</head>

+<body>

+    <test-component></test-component>

+</body>

+</html>

diff --git a/devtools/client/inspector/markup/test/doc_markup_subgrid.html b/devtools/client/inspector/markup/test/doc_markup_subgrid.html
new file mode 100644
index 0000000000..b66ef1a9b6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_subgrid.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    .container {
+      display: grid;
+      grid-gap: 5px;
+      grid-template: auto / 1fr 3fr 1fr;
+      background: lightyellow;
+    }
+
+    header, aside, section, footer {
+      background: lightblue;
+      font-family: sans-serif;
+      font-size: 3em;
+    }
+
+    header, footer {
+      grid-column: span 3;
+    }
+
+    main {
+      grid-column: span 3;
+      display: grid;
+      grid: subgrid / subgrid;
+    }
+
+    .aside1 {
+      grid-column: 1;
+    }
+
+    .aside2 {
+      grid-column: 3;
+    }
+
+    section {
+      grid-column: 2;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>Header</header>
+    <main>
+      <aside class="aside1">aside</aside>
+      <section>section</section>
+      <aside class="aside2">aside2</aside>
+    </main>
+    <footer>footer</footer>
+  </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_svg_attributes.html b/devtools/client/inspector/markup/test/doc_markup_svg_attributes.html
new file mode 100644
index 0000000000..04b699be71
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_svg_attributes.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <svg viewBox="0 0 2 2" width=200 height=200>
+      <circle cx=1 cy=1 r=1 fill=lime />
+    </svg>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_toggle.html b/devtools/client/inspector/markup/test/doc_markup_toggle.html
new file mode 100644
index 0000000000..521db100ca
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_toggle.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Expanding and collapsing markup-view containers</title>
+</head>
+<body>
+  <ul>
+    <li>
+      <span>list <em>item<!-- force expand --></em></span>
+    </li>
+    <li>
+      <span>list <em>item<!-- force expand --></em></span>
+    </li>
+    <li>
+      <span>list <em>item<!-- force expand --></em></span>
+    </li>
+    <li>
+      <span>list <em>item<!-- force expand --></em></span>
+    </li>
+    <li>
+      <span>list <em>item<!-- force expand --></em></span>
+    </li>
+    <li>
+      <span>list <em>item<!-- force expand --></em></span>
+    </li>
+  </ul>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_tooltip.png b/devtools/client/inspector/markup/test/doc_markup_tooltip.png
new file mode 100644
index 0000000000..699ef7940b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_tooltip.png
diff --git a/devtools/client/inspector/markup/test/doc_markup_update-on-navigtion_1.html b/devtools/client/inspector/markup/test/doc_markup_update-on-navigtion_1.html
new file mode 100644
index 0000000000..d2fdb16294
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_update-on-navigtion_1.html
@@ -0,0 +1 @@
+<div id='one' style='color:red;'>ONE</div>
diff --git a/devtools/client/inspector/markup/test/doc_markup_update-on-navigtion_2.html b/devtools/client/inspector/markup/test/doc_markup_update-on-navigtion_2.html
new file mode 100644
index 0000000000..93d84a0885
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_update-on-navigtion_2.html
@@ -0,0 +1 @@
+<div id='two' style='color:green;'>TWO</div>
diff --git a/devtools/client/inspector/markup/test/doc_markup_view-original-source.html b/devtools/client/inspector/markup/test/doc_markup_view-original-source.html
new file mode 100644
index 0000000000..4d080ab607
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_view-original-source.html
@@ -0,0 +1,9 @@
+<body>
+<button id="foo">Button</button>
+<script src="events_bundle.js"></script>
+<script>
+"use strict";
+var button = document.getElementById("foo");
+button.addEventListener("click", window.init);
+</script>
+</body>
diff --git a/devtools/client/inspector/markup/test/doc_markup_void_elements.html b/devtools/client/inspector/markup/test/doc_markup_void_elements.html
new file mode 100644
index 0000000000..72a937980f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_void_elements.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="html">
+  <head class="head">
+    <meta charset=utf-8 />
+    <style>
+    .before:before {
+      content: "before";
+    }
+    </style>
+  </head>
+  <body class="body">
+    <h1>Test void elements in HTML document</h1>
+    <img>
+    <hr>
+    <hr class="before">
+    <br>
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_void_elements.xhtml b/devtools/client/inspector/markup/test/doc_markup_void_elements.xhtml
new file mode 100644
index 0000000000..331346b24a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_void_elements.xhtml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html
+     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head class="head">
+    <meta charset="utf-8" />
+    <style>
+    .before:before {
+      content: "before";
+    }
+    </style>
+  </head>
+  <body class="body">
+    <h1>Test void elements in XHTML document</h1>
+    <hr class="before" />
+    <img />
+    <hr />
+    <br />
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_whitespace.html b/devtools/client/inspector/markup/test/doc_markup_whitespace.html
new file mode 100644
index 0000000000..b0b999f1b2
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_whitespace.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>

+<html>

+  <head>

+    <meta charset="utf-8">

+    <style>

+      #pre {

+        white-space: pre;

+      }

+    </style>

+  </head>

+  <body>

+    <div>div 1</div>

+    <div>div 2</div>

+    <div>div 3</div>

+    <div id="inline">

+      <img src="chrome://branding/content/about-logo.png" />

+      <img src="chrome://branding/content/about-logo.png" />

+      <img src="chrome://branding/content/about-logo.png" />

+    </div>

+    <div id="pre">

+      <img src="chrome://branding/content/about-logo.png" />

+      <img src="chrome://branding/content/about-logo.png" />

+    </div>

+  </body>

+</html>
diff --git a/devtools/client/inspector/markup/test/doc_markup_xul.xhtml b/devtools/client/inspector/markup/test/doc_markup_xul.xhtml
new file mode 100644
index 0000000000..34f13dae0b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_xul.xhtml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<xul:window xmlns="http://www.w3.org/1999/xhtml"
+            xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+            title="Test Bug 984442">
+
+  <xul:panel id="test"></xul:panel>
+
+</xul:window>
diff --git a/devtools/client/inspector/markup/test/events_bundle.js b/devtools/client/inspector/markup/test/events_bundle.js
new file mode 100644
index 0000000000..4759b27226
--- /dev/null
+++ b/devtools/client/inspector/markup/test/events_bundle.js
@@ -0,0 +1,94 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+
+
+function clickme() {
+  console.log("clickme");
+}
+
+function init() {
+  let s = document.querySelector("#clicky");
+  s.addEventListener("click", clickme);
+}
+
+window.init = init;
+
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=events_bundle.js.map
\ No newline at end of file
diff --git a/devtools/client/inspector/markup/test/events_bundle.js.map b/devtools/client/inspector/markup/test/events_bundle.js.map
new file mode 100644
index 0000000000..ab8e56cd2f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/events_bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap 43c031d75b9220c44a01","webpack:///./events_original.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;AChEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA","file":"events_bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 43c031d75b9220c44a01","/* vim: set ts=2 et sw=2 tw=80: */\n/* Any copyright is dedicated to the Public Domain.\n   http://creativecommons.org/publicdomain/zero/1.0/ */\n\n\"use strict\";\n\nfunction clickme() {\n  console.log(\"clickme\");\n}\n\nfunction init() {\n  let s = document.querySelector(\"#clicky\");\n  s.addEventListener(\"click\", clickme);\n}\n\nwindow.init = init;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./events_original.js\n// module id = 0\n// module chunks = 0"],"sourceRoot":""}
\ No newline at end of file
diff --git a/devtools/client/inspector/markup/test/events_original.js b/devtools/client/inspector/markup/test/events_original.js
new file mode 100644
index 0000000000..4b45f7db56
--- /dev/null
+++ b/devtools/client/inspector/markup/test/events_original.js
@@ -0,0 +1,15 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+function clickme() {
+  console.log("clickme");
+}
+
+function init() {
+  const s = document.querySelector("#clicky");
+  s.addEventListener("click", clickme);
+}
+
+window.init = init;
diff --git a/devtools/client/inspector/markup/test/head.js b/devtools/client/inspector/markup/test/head.js
new file mode 100644
index 0000000000..ddd0451608
--- /dev/null
+++ b/devtools/client/inspector/markup/test/head.js
@@ -0,0 +1,671 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+var {
+  getInplaceEditorForSpan: inplaceEditor,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+var clipboard = require("resource://devtools/shared/platform/clipboard.js");
+
+// If a test times out we want to see the complete log and not just the last few
+// lines.
+SimpleTest.requestCompleteLog();
+
+// Toggle this pref on to see all DevTools event communication. This is hugely
+// useful for fixing race conditions.
+// Services.prefs.setBoolPref("devtools.dump.emit", true);
+
+// Clear preferences that may be set during the course of tests.
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.dump.emit");
+  Services.prefs.clearUserPref("devtools.inspector.htmlPanelOpen");
+  Services.prefs.clearUserPref("devtools.inspector.sidebarOpen");
+  Services.prefs.clearUserPref("devtools.markup.pagesize");
+  Services.prefs.clearUserPref("devtools.inspector.showAllAnonymousContent");
+});
+
+/**
+ * Some tests may need to import one or more of the test helper scripts.
+ * A test helper script is simply a js file that contains common test code that
+ * is either not common-enough to be in head.js, or that is located in a
+ * separate directory.
+ * The script will be loaded synchronously and in the test's scope.
+ * @param {String} filePath The file path, relative to the current directory.
+ *                 Examples:
+ *                 - "helper_attributes_test_runner.js"
+ */
+function loadHelperScript(filePath) {
+  const testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
+  Services.scriptloader.loadSubScript(testDir + "/" + filePath, this);
+}
+
+/**
+ * Get the MarkupContainer object instance that corresponds to the given
+ * NodeFront
+ * @param {NodeFront} nodeFront
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return {MarkupContainer}
+ */
+function getContainerForNodeFront(nodeFront, { markup }) {
+  return markup.getContainer(nodeFront);
+}
+
+/**
+ * Get the MarkupContainer object instance that corresponds to the given
+ * selector
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @param {Boolean} Set to true in the event that the node shouldn't be found.
+ * @return {MarkupContainer}
+ */
+var getContainerForSelector = async function (
+  selector,
+  inspector,
+  expectFailure = false
+) {
+  info("Getting the markup-container for node " + selector);
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  if (expectFailure) {
+    ok(!container, "Shouldn't find markup-container for selector: " + selector);
+  } else {
+    ok(container, "Found markup-container for selector: " + selector);
+  }
+
+  return container;
+};
+
+/**
+ * Retrieve the nodeValue for the firstChild of a provided selector on the content page.
+ *
+ * @param {String} selector
+ * @return {String} the nodeValue of the first
+ */
+function getFirstChildNodeValue(selector) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector],
+    _selector => {
+      return content.document.querySelector(_selector).firstChild.nodeValue;
+    }
+  );
+}
+
+/**
+ * Using the markupview's _waitForChildren function, wait for all queued
+ * children updates to be handled.
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when all queued children updates have been
+ * handled
+ */
+function waitForChildrenUpdated({ markup }) {
+  info("Waiting for queued children updates to be handled");
+  return new Promise(resolve => {
+    markup._waitForChildren().then(() => {
+      executeSoon(resolve);
+    });
+  });
+}
+
+/**
+ * Simulate a click on the markup-container (a line in the markup-view)
+ * that corresponds to the selector passed.
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return {Promise} Resolves when the node has been selected.
+ */
+var clickContainer = async function (selector, inspector) {
+  info("Clicking on the markup-container for node " + selector);
+
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  const updated = container.selected
+    ? Promise.resolve()
+    : inspector.once("inspector-updated");
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mousedown" },
+    inspector.markup.doc.defaultView
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mouseup" },
+    inspector.markup.doc.defaultView
+  );
+  return updated;
+};
+
+/**
+ * Focus a given editable element, enter edit mode, set value, and commit
+ * @param {DOMNode} field The element that gets editable after receiving focus
+ * and <ENTER> keypress
+ * @param {String} value The string value to be set into the edited field
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ */
+function setEditableFieldValue(field, value, inspector) {
+  field.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  const input = inplaceEditor(field).input;
+  ok(input, "Found editable field for setting value: " + value);
+  input.value = value;
+  EventUtils.sendKey("return", inspector.panelWin);
+}
+
+/**
+ * Focus the new-attribute inplace-editor field of a node's markup container
+ * and enters the given text, then wait for it to be applied and the for the
+ * node to mutates (when new attribute(s) is(are) created)
+ * @param {String} selector The selector for the node to edit.
+ * @param {String} text The new attribute text to be entered (e.g. "id='test'")
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when the node has mutated
+ */
+var addNewAttributes = async function (selector, text, inspector) {
+  info(`Entering text "${text}" in new attribute field for node ${selector}`);
+
+  const container = await focusNode(selector, inspector);
+  ok(container, "The container for '" + selector + "' was found");
+
+  info("Listening for the markupmutation event");
+  const nodeMutated = inspector.once("markupmutation");
+  setEditableFieldValue(container.editor.newAttr, text, inspector);
+  await nodeMutated;
+};
+
+/**
+ * Checks that a node has the given attributes.
+ *
+ * @param {String} selector The selector for the node to check.
+ * @param {Object} expected An object containing the attributes to check.
+ *        e.g. {id: "id1", class: "someclass"}
+ *
+ * Note that node.getAttribute() returns attribute values provided by the HTML
+ * parser. The parser only provides unescaped entities so &amp; will return &.
+ */
+var assertAttributes = async function (selector, expected) {
+  const actualAttributes = await getContentPageElementAttributes(selector);
+  is(
+    actualAttributes.length,
+    Object.keys(expected).length,
+    "The node " + selector + " has the expected number of attributes."
+  );
+  for (const attr in expected) {
+    const foundAttr = actualAttributes.find(({ name }) => name === attr);
+    const foundValue = foundAttr ? foundAttr.value : undefined;
+    ok(foundAttr, "The node " + selector + " has the attribute " + attr);
+    is(
+      foundValue,
+      expected[attr],
+      "The node " + selector + " has the correct " + attr + " attribute value"
+    );
+  }
+};
+
+/**
+ * Undo the last markup-view action and wait for the corresponding mutation to
+ * occur
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when the markup-mutation has been treated or
+ * rejects if no undo action is possible
+ */
+function undoChange(inspector) {
+  const canUndo = inspector.markup.undo.canUndo();
+  ok(canUndo, "The last change in the markup-view can be undone");
+  if (!canUndo) {
+    return Promise.reject();
+  }
+
+  const mutated = inspector.once("markupmutation");
+  inspector.markup.undo.undo();
+  return mutated;
+}
+
+/**
+ * Redo the last markup-view action and wait for the corresponding mutation to
+ * occur
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when the markup-mutation has been treated or
+ * rejects if no redo action is possible
+ */
+function redoChange(inspector) {
+  const canRedo = inspector.markup.undo.canRedo();
+  ok(canRedo, "The last change in the markup-view can be redone");
+  if (!canRedo) {
+    return Promise.reject();
+  }
+
+  const mutated = inspector.once("markupmutation");
+  inspector.markup.undo.redo();
+  return mutated;
+}
+
+/**
+ * Get the selector-search input box from the inspector panel
+ * @return {DOMNode}
+ */
+function getSelectorSearchBox(inspector) {
+  return inspector.panelWin.document.getElementById("inspector-searchbox");
+}
+
+/**
+ * Using the inspector panel's selector search box, search for a given selector.
+ * The selector input string will be entered in the input field and the <ENTER>
+ * keypress will be simulated.
+ * This function won't wait for any events and is not async. It's up to callers
+ * to subscribe to events and react accordingly.
+ */
+function searchUsingSelectorSearch(selector, inspector) {
+  info('Entering "' + selector + '" into the selector-search input field');
+  const field = getSelectorSearchBox(inspector);
+  field.focus();
+  field.value = selector;
+  EventUtils.sendKey("return", inspector.panelWin);
+}
+
+/**
+ * Check to see if the inspector menu items for editing are disabled.
+ * Things like Edit As HTML, Delete Node, etc.
+ * @param {NodeFront} nodeFront
+ * @param {InspectorPanel} inspector
+ * @param {Boolean} assert Should this function run assertions inline.
+ * @return A promise that resolves with a boolean indicating whether
+ *         the menu items are disabled once the menu has been checked.
+ */
+var isEditingMenuDisabled = async function (
+  nodeFront,
+  inspector,
+  assert = true
+) {
+  // To ensure clipboard contains something to paste.
+  clipboard.copyString("<p>test</p>");
+
+  await selectNode(nodeFront, inspector);
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+
+  const deleteMenuItem = allMenuItems.find(i => i.id === "node-menu-delete");
+  const editHTMLMenuItem = allMenuItems.find(
+    i => i.id === "node-menu-edithtml"
+  );
+  const pasteHTMLMenuItem = allMenuItems.find(
+    i => i.id === "node-menu-pasteouterhtml"
+  );
+
+  if (assert) {
+    ok(deleteMenuItem.disabled, "Delete menu item is disabled");
+    ok(editHTMLMenuItem.disabled, "Edit HTML menu item is disabled");
+    ok(pasteHTMLMenuItem.disabled, "Paste HTML menu item is disabled");
+  }
+
+  return (
+    deleteMenuItem.disabled &&
+    editHTMLMenuItem.disabled &&
+    pasteHTMLMenuItem.disabled
+  );
+};
+
+/**
+ * Check to see if the inspector menu items for editing are enabled.
+ * Things like Edit As HTML, Delete Node, etc.
+ * @param {NodeFront} nodeFront
+ * @param {InspectorPanel} inspector
+ * @param {Boolean} assert Should this function run assertions inline.
+ * @return A promise that resolves with a boolean indicating whether
+ *         the menu items are enabled once the menu has been checked.
+ */
+var isEditingMenuEnabled = async function (
+  nodeFront,
+  inspector,
+  assert = true
+) {
+  // To ensure clipboard contains something to paste.
+  clipboard.copyString("<p>test</p>");
+
+  await selectNode(nodeFront, inspector);
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+
+  const deleteMenuItem = allMenuItems.find(i => i.id === "node-menu-delete");
+  const editHTMLMenuItem = allMenuItems.find(
+    i => i.id === "node-menu-edithtml"
+  );
+  const pasteHTMLMenuItem = allMenuItems.find(
+    i => i.id === "node-menu-pasteouterhtml"
+  );
+
+  if (assert) {
+    ok(!deleteMenuItem.disabled, "Delete menu item is enabled");
+    ok(!editHTMLMenuItem.disabled, "Edit HTML menu item is enabled");
+    ok(!pasteHTMLMenuItem.disabled, "Paste HTML menu item is enabled");
+  }
+
+  return (
+    !deleteMenuItem.disabled &&
+    !editHTMLMenuItem.disabled &&
+    !pasteHTMLMenuItem.disabled
+  );
+};
+
+/**
+ * Wait for all current promises to be resolved. See this as executeSoon that
+ * can be used with yield.
+ */
+function promiseNextTick() {
+  return new Promise(resolve => {
+    executeSoon(resolve);
+  });
+}
+
+/**
+ * `await` with timeout.
+ *
+ * Usage:
+ *   const badgeEventAdded = inspector.markup.once("badge-added-event");
+ *   ...
+ *   const result = await awaitWithTimeout(badgeEventAdded, 3000);
+ *   is(result, "timeout", "Ensure that no event badges were added");
+ *
+ * @param  {Promise} promise
+ *         Promise to resolve
+ * @param  {Number} ms
+ *         Milliseconds to wait.
+ * @return "timeout" on timeout, otherwise the result of the fulfilled promise.
+ */
+async function awaitWithTimeout(promise, ms) {
+  const timeout = new Promise(resolve => {
+    // eslint-disable-next-line
+    const wait = setTimeout(() => {
+      clearTimeout(wait);
+      resolve("timeout");
+    }, ms);
+  });
+
+  return Promise.race([promise, timeout]);
+}
+
+/**
+ * Collapses the current text selection in an input field and tabs to the next
+ * field.
+ */
+function collapseSelectionAndTab(inspector) {
+  // collapse selection and move caret to end
+  EventUtils.sendKey("tab", inspector.panelWin);
+  // next element
+  EventUtils.sendKey("tab", inspector.panelWin);
+}
+
+/**
+ * Collapses the current text selection in an input field and tabs to the
+ * previous field.
+ */
+function collapseSelectionAndShiftTab(inspector) {
+  // collapse selection and move caret to end
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, inspector.panelWin);
+  // previous element
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, inspector.panelWin);
+}
+
+/**
+ * Check that the current focused element is an attribute element in the markup
+ * view.
+ * @param {String} attrName The attribute name expected to be found
+ * @param {Boolean} editMode Whether or not the attribute should be in edit mode
+ */
+function checkFocusedAttribute(attrName, editMode) {
+  const focusedAttr = Services.focus.focusedElement;
+  ok(focusedAttr, "Has a focused element");
+
+  const dataAttr = focusedAttr.parentNode.dataset.attr;
+  is(dataAttr, attrName, attrName + " attribute editor is currently focused.");
+  if (editMode) {
+    // Using a multiline editor for attributes, the focused element should be a textarea.
+    is(focusedAttr.tagName, "textarea", attrName + "is in edit mode");
+  } else {
+    is(focusedAttr.tagName, "span", attrName + "is not in edit mode");
+  }
+}
+
+/**
+ * Get attributes for node as how they are represented in editor.
+ *
+ * @param  {String} selector
+ * @param  {InspectorPanel} inspector
+ * @return {Promise}
+ *         A promise that resolves with an array of attribute names
+ *         (e.g. ["id", "class", "href"])
+ */
+var getAttributesFromEditor = async function (selector, inspector) {
+  const nodeList = (
+    await getContainerForSelector(selector, inspector)
+  ).tagLine.querySelectorAll("[data-attr]");
+
+  return [...nodeList].map(node => node.getAttribute("data-attr"));
+};
+
+/**
+ * Simulate dragging a MarkupContainer by calling its mousedown and mousemove
+ * handlers.
+ * @param {InspectorPanel} inspector The current inspector-panel instance.
+ * @param {String|MarkupContainer} selector The selector to identify the node or
+ * the MarkupContainer for this node.
+ * @param {Number} xOffset Optional x offset to drag by.
+ * @param {Number} yOffset Optional y offset to drag by.
+ */
+async function simulateNodeDrag(
+  inspector,
+  selector,
+  xOffset = 10,
+  yOffset = 10
+) {
+  const container =
+    typeof selector === "string"
+      ? await getContainerForSelector(selector, inspector)
+      : selector;
+  container.elt.scrollIntoView(true);
+  const rect = container.tagLine.getBoundingClientRect();
+  const scrollX = inspector.markup.doc.documentElement.scrollLeft;
+  const scrollY = inspector.markup.doc.documentElement.scrollTop;
+
+  info("Simulate mouseDown on element " + selector);
+  container._onMouseDown({
+    target: container.tagLine,
+    button: 0,
+    pageX: scrollX + rect.x,
+    pageY: scrollY + rect.y,
+    stopPropagation: () => {},
+    preventDefault: () => {},
+  });
+
+  // _onMouseDown selects the node, so make sure to wait for the
+  // inspector-updated event if the current selection was different.
+  if (inspector.selection.nodeFront !== container.node) {
+    await inspector.once("inspector-updated");
+  }
+
+  info("Simulate mouseMove on element " + selector);
+  container.onMouseMove({
+    pageX: scrollX + rect.x + xOffset,
+    pageY: scrollY + rect.y + yOffset,
+  });
+}
+
+/**
+ * Simulate dropping a MarkupContainer by calling its mouseup handler. This is
+ * meant to be called after simulateNodeDrag has been called.
+ * @param {InspectorPanel} inspector The current inspector-panel instance.
+ * @param {String|MarkupContainer} selector The selector to identify the node or
+ * the MarkupContainer for this node.
+ */
+async function simulateNodeDrop(inspector, selector) {
+  info("Simulate mouseUp on element " + selector);
+  const container =
+    typeof selector === "string"
+      ? await getContainerForSelector(selector, inspector)
+      : selector;
+  container.onMouseUp();
+  inspector.markup._onMouseUp();
+}
+
+/**
+ * Simulate drag'n'dropping a MarkupContainer by calling its mousedown,
+ * mousemove and mouseup handlers.
+ * @param {InspectorPanel} inspector The current inspector-panel instance.
+ * @param {String|MarkupContainer} selector The selector to identify the node or
+ * the MarkupContainer for this node.
+ * @param {Number} xOffset Optional x offset to drag by.
+ * @param {Number} yOffset Optional y offset to drag by.
+ */
+async function simulateNodeDragAndDrop(inspector, selector, xOffset, yOffset) {
+  await simulateNodeDrag(inspector, selector, xOffset, yOffset);
+  await simulateNodeDrop(inspector, selector);
+}
+
+/**
+ * Waits until the element has not scrolled for 30 consecutive frames.
+ */
+async function waitForScrollStop(doc) {
+  const el = doc.documentElement;
+  const win = doc.defaultView;
+  let lastScrollTop = el.scrollTop;
+  let stopFrameCount = 0;
+  while (stopFrameCount < 30) {
+    // Wait for a frame.
+    await new Promise(resolve => win.requestAnimationFrame(resolve));
+
+    // Check if the element has scrolled.
+    if (lastScrollTop == el.scrollTop) {
+      // No scrolling since the last frame.
+      stopFrameCount++;
+    } else {
+      // The element has scrolled. Reset the frame counter.
+      stopFrameCount = 0;
+      lastScrollTop = el.scrollTop;
+    }
+  }
+
+  return lastScrollTop;
+}
+
+/**
+ * Select a node in the inspector and try to delete it using the provided key. After that,
+ * check that the expected element is focused.
+ *
+ * @param {InspectorPanel} inspector
+ *        The current inspector-panel instance.
+ * @param {String} key
+ *        The key to simulate to delete the node
+ * @param {Object}
+ *        - {String} selector: selector of the element to delete.
+ *        - {String} focusedSelector: selector of the element that should be selected
+ *        after deleting the node.
+ *        - {String} pseudo: optional, "before" or "after" if the element focused after
+ *        deleting the node is supposed to be a before/after pseudo-element.
+ */
+async function checkDeleteAndSelection(
+  inspector,
+  key,
+  { selector, focusedSelector, pseudo }
+) {
+  info(
+    "Test deleting node " +
+      selector +
+      " with " +
+      key +
+      ", " +
+      "expecting " +
+      focusedSelector +
+      " to be focused"
+  );
+
+  info("Select node " + selector + " and make sure it is focused");
+  await selectNode(selector, inspector);
+  await clickContainer(selector, inspector);
+
+  info("Delete the node with: " + key);
+  const mutated = inspector.once("markupmutation");
+  EventUtils.sendKey(key, inspector.panelWin);
+  await Promise.all([mutated, inspector.once("inspector-updated")]);
+
+  let nodeFront = await getNodeFront(focusedSelector, inspector);
+  if (pseudo) {
+    // Update the selector for logging in case of failure.
+    focusedSelector = focusedSelector + "::" + pseudo;
+    // Retrieve the :before or :after pseudo element of the nodeFront.
+    const { nodes } = await inspector.walker.children(nodeFront);
+    nodeFront = pseudo === "before" ? nodes[0] : nodes[nodes.length - 1];
+  }
+
+  is(
+    inspector.selection.nodeFront,
+    nodeFront,
+    focusedSelector + " is selected after deletion"
+  );
+
+  info("Check that the node was really removed");
+  let node = await getNodeFront(selector, inspector);
+  ok(!node, "The node can't be found in the page anymore");
+
+  info("Undo the deletion to restore the original markup");
+  await undoChange(inspector);
+  node = await getNodeFront(selector, inspector);
+  ok(node, "The node is back");
+}
+
+/**
+ * Click on the reveal link the provided slotted container.
+ * Will resolve when selection emits "new-node-front".
+ */
+async function clickOnRevealLink(inspector, container) {
+  const onSelection = inspector.selection.once("new-node-front");
+  const revealLink = container.elt.querySelector(".reveal-link");
+  const tagline = revealLink.closest(".tag-line");
+  const win = inspector.markup.doc.defaultView;
+
+  // First send a mouseover on the tagline to force the link to be displayed.
+  EventUtils.synthesizeMouseAtCenter(tagline, { type: "mouseover" }, win);
+  EventUtils.synthesizeMouseAtCenter(revealLink, {}, win);
+
+  await onSelection;
+}
+
+/**
+ * Hit `key` on the reveal link in the provided slotted container.
+ * Will resolve when selection emits "new-node-front".
+ */
+async function keydownOnRevealLink(key, inspector, container) {
+  const revealLink = container.elt.querySelector(".reveal-link");
+  const win = inspector.markup.doc.defaultView;
+
+  const root = inspector.markup.getContainer(inspector.markup._rootNode);
+  root.elt.focus();
+
+  // we need to go through a ENTER + TAB  key sequence to focus on
+  // the .reveal-link element with the keyboard
+  const revealFocused = once(revealLink, "focus");
+  EventUtils.synthesizeKey("KEY_Enter", {}, win);
+  EventUtils.synthesizeKey("KEY_Tab", {}, win);
+  info("Waiting for .reveal-link to be focused");
+  await revealFocused;
+
+  // hit `key` on the .reveal-link
+  const onSelection = inspector.selection.once("new-node-front");
+  EventUtils.synthesizeKey(key, {}, win);
+  await onSelection;
+}
diff --git a/devtools/client/inspector/markup/test/helper_attributes_test_runner.js b/devtools/client/inspector/markup/test/helper_attributes_test_runner.js
new file mode 100644
index 0000000000..ff8fbdeb09
--- /dev/null
+++ b/devtools/client/inspector/markup/test/helper_attributes_test_runner.js
@@ -0,0 +1,161 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from head.js */
+"use strict";
+
+/**
+ * Run a series of add-attributes tests.
+ * This function will iterate over the provided tests array and run each test.
+ * Each test's goal is to provide some text to be entered into the test node's
+ * new-attribute field and check that the given attributes have been created.
+ * After each test has run, the markup-view's undo command will be called and
+ * the test runner will check if all the new attributes are gone.
+ * @param {Array} tests See runAddAttributesTest for the structure
+ * @param {DOMNode|String} nodeOrSelector The node or node selector
+ * corresponding to an element on the current test page that has *no attributes*
+ * when the test starts. It will be used to add and remove attributes.
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ * @return a promise that resolves when the tests have run
+ */
+function runAddAttributesTests(tests, nodeOrSelector, inspector) {
+  info("Running " + tests.length + " add-attributes tests");
+  return (async function () {
+    info("Selecting the test node");
+    await selectNode("div", inspector);
+
+    for (const test of tests) {
+      await runAddAttributesTest(test, "div", inspector);
+    }
+  })();
+}
+
+/**
+ * Run a single add-attribute test.
+ * See runAddAttributesTests for a description.
+ * @param {Object} test A test object should contain the following properties:
+ *        - desc {String} a textual description for that test, to help when
+ *        reading logs
+ *        - text {String} the string to be inserted into the new attribute field
+ *        - expectedAttributes {Object} a key/value pair object that will be
+ *        used to check the attributes on the test element
+ *        - validate {Function} optional extra function that will be called
+ *        after the attributes have been added and which should be used to
+ *        assert some more things this test runner might not be checking. The
+ *        function will be called with the following arguments:
+ *          - {DOMNode} The element being tested
+ *          - {MarkupContainer} The corresponding container in the markup-view
+ *          - {InspectorPanel} The instance of the InspectorPanel opened
+ * @param {String} selector The node selector corresponding to the test element
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ */
+async function runAddAttributesTest(test, selector, inspector) {
+  if (test.setUp) {
+    test.setUp(inspector);
+  }
+
+  info("Starting add-attribute test: " + test.desc);
+  await addNewAttributes(selector, test.text, inspector);
+
+  info("Assert that the attribute(s) has/have been applied correctly");
+  await assertAttributes(selector, test.expectedAttributes);
+
+  if (test.validate) {
+    const container = await getContainerForSelector(selector, inspector);
+    test.validate(container, inspector);
+  }
+
+  info("Undo the change");
+  await undoChange(inspector);
+
+  info("Assert that the attribute(s) has/have been removed correctly");
+  await assertAttributes(selector, {});
+  if (test.tearDown) {
+    test.tearDown(inspector);
+  }
+}
+
+/**
+ * Run a series of edit-attributes tests.
+ * This function will iterate over the provided tests array and run each test.
+ * Each test's goal is to locate a given element on the current test page,
+ * assert its current attributes, then provide the name of one of them and a
+ * value to be set into it, and then check if the new attributes are correct.
+ * After each test has run, the markup-view's undo and redo commands will be
+ * called and the test runner will assert again that the attributes are correct.
+ * @param {Array} tests See runEditAttributesTest for the structure
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ * @return a promise that resolves when the tests have run
+ */
+function runEditAttributesTests(tests, inspector) {
+  info("Running " + tests.length + " edit-attributes tests");
+  return (async function () {
+    info("Expanding all nodes in the markup-view");
+    await inspector.markup.expandAll();
+
+    for (const test of tests) {
+      await runEditAttributesTest(test, inspector);
+    }
+  })();
+}
+
+/**
+ * Run a single edit-attribute test.
+ * See runEditAttributesTests for a description.
+ * @param {Object} test A test object should contain the following properties:
+ *        - desc {String} a textual description for that test, to help when
+ *        reading logs
+ *        - node {String} a css selector that will be used to select the node
+ *        which will be tested during this iteration
+ *        - originalAttributes {Object} a key/value pair object that will be
+ *        used to check the attributes of the node before the test runs
+ *        - name {String} the name of the attribute to focus the editor for
+ *        - value {String} the new value to be typed in the focused editor
+ *        - expectedAttributes {Object} a key/value pair object that will be
+ *        used to check the attributes on the test element
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ */
+async function runEditAttributesTest(test, inspector) {
+  info("Starting edit-attribute test: " + test.desc);
+
+  info("Selecting the test node " + test.node);
+  await selectNode(test.node, inspector);
+
+  info("Asserting that the node has the right attributes to start with");
+  await assertAttributes(test.node, test.originalAttributes);
+
+  info("Editing attribute " + test.name + " with value " + test.value);
+
+  const container = await focusNode(test.node, inspector);
+  ok(
+    container && container.editor,
+    "The markup-container for " + test.node + " was found"
+  );
+
+  info("Listening for the markupmutation event");
+  const nodeMutated = inspector.once("markupmutation");
+  const attr = container.editor.attrElements
+    .get(test.name)
+    .querySelector(".editable");
+  setEditableFieldValue(attr, test.value, inspector);
+  await nodeMutated;
+
+  info("Asserting the new attributes after edition");
+  await assertAttributes(test.node, test.expectedAttributes);
+
+  info("Undo the change and assert that the attributes have been changed back");
+  await undoChange(inspector);
+  await assertAttributes(test.node, test.originalAttributes);
+
+  info(
+    "Redo the change and assert that the attributes have been changed " +
+      "again"
+  );
+  await redoChange(inspector);
+  await assertAttributes(test.node, test.expectedAttributes);
+}
diff --git a/devtools/client/inspector/markup/test/helper_diff.js b/devtools/client/inspector/markup/test/helper_diff.js
new file mode 100644
index 0000000000..5a97fa548d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/helper_diff.js
@@ -0,0 +1,286 @@
+/**
+ * This diff utility is taken from:
+ * https://github.com/Slava/diff.js
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2014 Slava
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * USAGE:
+ *   diff(text1, text2);
+ */
+
+/**
+ * Longest Common Subsequence
+ *
+ * @param A - sequence of atoms - Array
+ * @param B - sequence of atoms - Array
+ * @param equals - optional comparator of atoms - returns true or false,
+ *                 if not specified, triple equals operator is used
+ * @returns Array - sequence of atoms, one of LCSs, edit script from A to B
+ */
+var LCS = function (A, B, /* optional */ equals) {
+  // We just compare atoms with default equals operator by default
+  if (equals === undefined)
+    equals = function (a, b) { return a === b; };
+
+  // NOTE: all intervals from now on are both sides inclusive
+  // Get the points in Edit Graph, one of the LCS paths goes through.
+  // The points are located on the same diagonal and represent the middle
+  // snake ([D/2] out of D+1) in the optimal edit path in edit graph.
+  // @param startA, endA - substring of A we are working on
+  // @param startB, endB - substring of B we are working on
+  // @returns Array - [
+  //                   [x, y], - beginning of the middle snake
+  //                   [u, v], - end of the middle snake
+  //                    D,     - optimal edit distance
+  //                    LCS ]  - length of LCS
+  var findMidSnake = function (startA, endA, startB, endB) {
+    var N = endA - startA + 1;
+    var M = endB - startB + 1;
+    var Max = N + M;
+    var Delta = N - M;
+    var halfMaxCeil = (Max + 1) / 2 | 0;
+
+    var foundOverlap = false;
+    var overlap = null;
+
+    // Maps -Max .. 0 .. +Max, diagonal index to endpoints for furthest reaching
+    // D-path on current iteration.
+    var V = {};
+    // Same but for reversed paths.
+    var U = {};
+
+    // Special case for the base case, D = 0, k = 0, x = y = 0
+    V[1] = 0;
+    // Special case for the base case reversed, D = 0, k = 0, x = N, y = M
+    U[Delta - 1] = N;
+
+    // Iterate over each possible length of edit script
+    for (var D = 0; D <= halfMaxCeil; D++) {
+      // Iterate over each diagonal
+      for (var k = -D; k <= D && !overlap; k += 2) {
+        // Positions in sequences A and B of furthest going D-path on diagonal k.
+        var x, y;
+
+        // Choose from each diagonal we extend
+        if (k === -D || (k !== D && V[k - 1] < V[k + 1]))
+          // Extending path one point down, that's why x doesn't change, y
+          // increases implicitly
+          x = V[k + 1];
+        else
+          // Extending path one point to the right, x increases
+          x = V[k - 1] + 1;
+
+        // We can calculate the y out of x and diagonal index.
+        y = x - k;
+
+        if (isNaN(y) || x > N || y > M)
+          continue;
+
+        var xx = x;
+        // Try to extend the D-path with diagonal paths. Possible only if atoms
+        // A_x match B_y
+        while (x < N && y < M // if there are atoms to compare
+               && equals(A[startA + x], B[startB + y])) {
+          x++; y++;
+        }
+
+        // We can safely update diagonal k, since on every iteration we consider
+        // only even or only odd diagonals and the result of one depends only on
+        // diagonals of different iteration.
+        V[k] = x;
+
+        // Check feasibility, Delta is checked for being odd.
+        if ((Delta & 1) === 1 && inRange(k, Delta - (D - 1), Delta + (D - 1)))
+          // Forward D-path can overlap with reversed D-1-path
+          if (V[k] >= U[k])
+            // Found an overlap, the middle snake, convert X-components to dots
+            overlap = [xx, x].map(toPoint, k); // XXX ES5
+      }
+
+      if (overlap)
+        var SES = D * 2 - 1;
+
+      // Iterate over each diagonal for reversed case
+      for (var k = -D; k <= D && !overlap; k += 2) {
+        // The real diagonal we are looking for is k + Delta
+        var K = k + Delta;
+        var x, y;
+        if (k === D || (k !== -D && U[K - 1] < U[K + 1]))
+          x = U[K - 1];
+        else
+          x = U[K + 1] - 1;
+
+        y = x - K;
+        if (isNaN(y) || x < 0 || y < 0)
+          continue;
+        var xx = x;
+        while (x > 0 && y > 0 && equals(A[startA + x - 1], B[startB + y - 1])) {
+          x--; y--;
+        }
+        U[K] = x;
+
+        if (Delta % 2 === 0 && inRange(K, -D, D))
+          if (U[K] <= V[K])
+            overlap = [x, xx].map(toPoint, K); // XXX ES5
+      }
+
+      if (overlap) {
+        SES = SES || D * 2;
+        // Remember we had offset of each sequence?
+        for (var i = 0; i < 2; i++) for (var j = 0; j < 2; j++)
+          overlap[i][j] += [startA, startB][j] - i;
+        return overlap.concat([ SES, (Max - SES) / 2 ]);
+      }
+    }
+  };
+
+  var lcsAtoms = [];
+  var lcs = function (startA, endA, startB, endB) {
+    var N = endA - startA + 1;
+    var M = endB - startB + 1;
+
+    if (N > 0 && M > 0) {
+      var middleSnake = findMidSnake(startA, endA, startB, endB);
+      // A[x;u] == B[y,v] and is part of LCS
+      var x = middleSnake[0][0], y = middleSnake[0][1];
+      var u = middleSnake[1][0], v = middleSnake[1][1];
+      var D = middleSnake[2];
+
+      if (D > 1) {
+        lcs(startA, x - 1, startB, y - 1);
+        if (x <= u) {
+          [].push.apply(lcsAtoms, A.slice(x, u + 1));
+        }
+        lcs(u + 1, endA, v + 1, endB);
+      } else if (M > N)
+        [].push.apply(lcsAtoms, A.slice(startA, endA + 1));
+      else
+        [].push.apply(lcsAtoms, B.slice(startB, endB + 1));
+    }
+  };
+
+  lcs(0, A.length - 1, 0, B.length - 1);
+  return lcsAtoms;
+};
+
+// Helpers
+var inRange = function (x, l, r) {
+  return (l <= x && x <= r) || (r <= x && x <= l);
+};
+
+// Takes X-component as argument, diagonal as context,
+// returns array-pair of form x, y
+var toPoint = function (x) {
+  return [x, x - this];  // XXX context is not the best way to pass diagonal
+};
+
+// Wrappers
+LCS.StringLCS = function (A, B) {
+  return LCS(A.split(''), B.split('')).join('');
+};
+
+/**
+ * Diff sequence
+ *
+ * @param A - sequence of atoms - Array
+ * @param B - sequence of atoms - Array
+ * @param equals - optional comparator of atoms - returns true or false,
+ *                 if not specified, triple equals operator is used
+ * @returns Array - sequence of objects in a form of:
+ *   - operation: one of "none", "add", "delete"
+ *   - atom: the atom found in either A or B
+ * Applying operations from diff sequence you should be able to transform A to B
+ */
+function diff(A, B, equals) {
+  // We just compare atoms with default equals operator by default
+  if (equals === undefined)
+    equals = function (a, b) { return a === b; };
+
+  var diff = [];
+  var i = 0, j = 0;
+  var N = A.length, M = B.length, K = 0;
+
+  while (i < N && j < M && equals(A[i], B[j]))
+    i++, j++;
+
+  while (i < N && j < M && equals(A[N-1], B[M-1]))
+    N--, M--, K++;
+
+  [].push.apply(diff, A.slice(0, i).map(function (atom) {
+    return { operation: "none", atom: atom }; }));
+
+  var lcs = LCS(A.slice(i, N), B.slice(j, M), equals);
+
+  for (var k = 0; k < lcs.length; k++) {
+    var atom = lcs[k];
+    var ni = customIndexOf.call(A, atom, i, equals);
+    var nj = customIndexOf.call(B, atom, j, equals);
+
+    // XXX ES5 map
+    // Delete unmatched atoms from A
+    [].push.apply(diff, A.slice(i, ni).map(function (atom) {
+      return { operation: "delete", atom: atom };
+    }));
+
+    // Add unmatched atoms from B
+    [].push.apply(diff, B.slice(j, nj).map(function (atom) {
+      return { operation: "add", atom: atom };
+    }));
+
+    // Add the atom found in both sequences
+    diff.push({ operation: "none", atom: atom });
+
+    i = ni + 1;
+    j = nj + 1;
+  }
+
+  // Don't forget about the rest
+
+  [].push.apply(diff, A.slice(i, N).map(function (atom) {
+    return { operation: "delete", atom: atom };
+  }));
+
+  [].push.apply(diff, B.slice(j, M).map(function (atom) {
+    return { operation: "add", atom: atom };
+  }));
+
+  [].push.apply(diff, A.slice(N, N + K).map(function (atom) {
+    return { operation: "none", atom: atom }; }));
+
+  return diff;
+};
+
+// Accepts custom comparator
+var customIndexOf = function(item, start, equals){
+  var arr = this;
+  for (var i = start; i < arr.length; i++)
+    if (equals(item, arr[i]))
+      return i;
+  return -1;
+};
+
+function textDiff(text1, text2) {
+  return diff(text1.split("\n"), text2.split("\n"));
+}
diff --git a/devtools/client/inspector/markup/test/helper_events_test_runner.js b/devtools/client/inspector/markup/test/helper_events_test_runner.js
new file mode 100644
index 0000000000..1b100d39bc
--- /dev/null
+++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js
@@ -0,0 +1,297 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from head.js */
+/* import-globals-from helper_diff.js */
+"use strict";
+
+const beautify = require("resource://devtools/shared/jsbeautify/beautify.js");
+
+loadHelperScript("helper_diff.js");
+
+/**
+ * Generator function that runs checkEventsForNode() for each object in the
+ * TEST_DATA array.
+ */
+async function runEventPopupTests(url, tests) {
+  const { inspector } = await openInspectorForURL(url);
+
+  await inspector.markup.expandAll();
+
+  for (const test of tests) {
+    await checkEventsForNode(test, inspector);
+  }
+
+  // Wait for promises to avoid leaks when running this as a single test.
+  // We need to do this because we have opened a bunch of popups and don't them
+  // to affect other test runs when they are GCd.
+  await promiseNextTick();
+}
+
+/**
+ * Generator function that takes a selector and expected results and returns
+ * the event info.
+ *
+ * @param {Object} test
+ *  A test object should contain the following properties:
+ *        - selector {String} a css selector targeting the node to edit
+ *        - expected {Array} array of expected event objects
+ *          - type {String} event type
+ *          - filename {String} filename:line where the evt handler is defined
+ *          - attributes {Array} array of event attributes ({String})
+ *          - handler {String} string representation of the handler
+ *        - beforeTest {Function} (optional) a function to execute on the page
+ *        before running the test
+ *        - isSourceMapped {Boolean} (optional) true if the location
+ *        is source-mapped, requiring some extra delay before the checks
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ */
+async function checkEventsForNode(test, inspector) {
+  const { selector, expected, beforeTest, isSourceMapped } = test;
+  const container = await getContainerForSelector(selector, inspector);
+
+  if (typeof beforeTest === "function") {
+    await beforeTest(inspector);
+  }
+
+  const evHolder = container.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+
+  if (expected.length === 0) {
+    // If no event is expected, check that event bubble is hidden.
+    ok(!evHolder, "event bubble should be hidden");
+    return;
+  }
+
+  const tooltip = inspector.markup.eventDetailsTooltip;
+
+  await selectNode(selector, inspector);
+
+  let sourceMapPromise = null;
+  if (isSourceMapped) {
+    sourceMapPromise = tooltip.once("event-tooltip-source-map-ready");
+  }
+
+  // Click button to show tooltip
+  info("Clicking evHolder");
+  evHolder.scrollIntoView({
+    block: "center",
+    inline: "end",
+    behavior: "instant",
+  });
+  EventUtils.synthesizeMouseAtCenter(
+    evHolder,
+    {},
+    inspector.markup.doc.defaultView
+  );
+  await tooltip.once("shown");
+  info("tooltip shown");
+
+  if (isSourceMapped) {
+    info("Waiting for source map to be applied");
+    await sourceMapPromise;
+  }
+
+  // Check values
+  const headers = tooltip.panel.querySelectorAll(".event-header");
+  const nodeFront = container.node;
+  const cssSelector = nodeFront.nodeName + "#" + nodeFront.id;
+
+  for (let i = 0; i < headers.length; i++) {
+    const label = `${cssSelector}.${expected[i].type} (index ${i})`;
+    info(`${label} START`);
+
+    const header = headers[i];
+    const type = header.querySelector(".event-tooltip-event-type");
+    const filename = header.querySelector(".event-tooltip-filename");
+    const attributes = Array.from(
+      header.querySelectorAll(".event-tooltip-attributes")
+    );
+    const contentBox = header.nextElementSibling;
+
+    info("Looking for " + type.textContent);
+
+    is(type.textContent, expected[i].type, "type matches for " + cssSelector);
+    is(
+      filename.textContent,
+      expected[i].filename,
+      "filename matches for " + cssSelector
+    );
+
+    Assert.deepEqual(
+      attributes.map(el => el.textContent),
+      expected[i].attributes,
+      `we have the expected attributes for "${cssSelector}"`
+    );
+
+    is(
+      header.classList.contains("content-expanded"),
+      false,
+      "We are not in expanded state"
+    );
+
+    // Make sure the header is not hidden by scrollbars before clicking.
+    header.scrollIntoView();
+
+    // Avoid clicking the header's center (could hit the debugger button)
+    EventUtils.synthesizeMouse(header, 2, 2, {}, type.ownerGlobal);
+    await tooltip.once("event-tooltip-ready");
+
+    is(
+      header.classList.contains("content-expanded") &&
+        contentBox.hasAttribute("open"),
+      true,
+      "We are in expanded state and icon changed"
+    );
+
+    is(
+      tooltip.panel.querySelectorAll(".event-header.content-expanded")
+        .length === 1 &&
+        tooltip.panel.querySelectorAll(".event-tooltip-content-box[open]")
+          .length === 1,
+      true,
+      "Only one event box is expanded at a time"
+    );
+
+    const editor = tooltip.eventTooltip._eventEditors.get(contentBox).editor;
+    const tidiedHandler = beautify.js(expected[i].handler, {
+      indent_size: 2,
+    });
+    testDiff(
+      editor.getText(),
+      tidiedHandler,
+      "handler matches for " + cssSelector,
+      ok
+    );
+
+    const checkbox = header.querySelector("input[type=checkbox]");
+    ok(checkbox, "The event toggling checkbox is displayed");
+    const disabled = checkbox.hasAttribute("disabled");
+    // We can't disable React/jQuery events at the moment, so ensure that for those,
+    // the checkbox is disabled.
+    const shouldBeDisabled =
+      expected[i].attributes?.includes("React") ||
+      expected[i].attributes?.includes("jQuery");
+    Assert.strictEqual(
+      disabled,
+      shouldBeDisabled,
+      `The checkbox is ${shouldBeDisabled ? "disabled" : "enabled"}\n`
+    );
+
+    info(`${label} END`);
+  }
+
+  const tooltipHidden = tooltip.once("hidden");
+  tooltip.hide();
+  await tooltipHidden;
+}
+
+/**
+ * This should be kept in sync with the content of the window load event listener callback
+ * content in doc_markup_events_jquery.html.
+ */
+function getDocMarkupEventsJQueryLoadHandlerText() {
+  return `
+          () => {
+            const handler1 = function liveDivDblClick() {
+              alert(1);
+            };
+            const handler2 = function liveDivDragStart() {
+              alert(2);
+            };
+            const handler3 = function liveDivDragLeave() {
+              alert(3);
+            };
+            const handler4 = function liveDivDragEnd() {
+              alert(4);
+            };
+            const handler5 = function liveDivDrop() {
+              alert(5);
+            };
+            const handler6 = function liveDivDragOver() {
+              alert(6);
+            };
+            const handler7 = function divClick1() {
+              alert(7);
+            };
+            const handler8 = function divClick2() {
+              alert(8);
+            };
+            const handler9 = function divKeyDown() {
+              alert(9);
+            };
+            const handler10 = function divDragOut() {
+              alert(10);
+            };
+
+            if ($("#livediv").live) {
+              $("#livediv").live("dblclick", handler1);
+              $("#livediv").live("dragstart", handler2);
+            }
+
+            if ($("#livediv").delegate) {
+              $(document).delegate("#livediv", "dragleave", handler3);
+              $(document).delegate("#livediv", "dragend", handler4);
+            }
+
+            if ($("#livediv").on) {
+              $(document).on("drop", "#livediv", handler5);
+              $(document).on("dragover", "#livediv", handler6);
+              $(document).on("dragout", "#livediv:xxxxx", handler10);
+            }
+
+            const div = $("div")[0];
+            $(div).click(handler7);
+            $(div).click(handler8);
+            $(div).keydown(handler9);
+
+            class MyClass {
+              constructor() {
+                $(document).on("click", '#inclassboundeventdiv', this.onClick.bind(this));
+              }
+              onClick() { alert(11); }
+            }
+            new MyClass();
+          }`;
+}
+
+/**
+ * Create diff of two strings.
+ *
+ * @param  {String} text1
+ *         String to compare with text2.
+ * @param  {String} text2 [description]
+ *         String to compare with text1.
+ * @param  {String} msg
+ *         Message to display on failure. A diff will be displayed after this
+ *         message.
+ */
+function testDiff(text1, text2, msg) {
+  let out = "";
+
+  if (text1 === text2) {
+    ok(true, msg);
+    return;
+  }
+
+  const result = textDiff(text1, text2);
+
+  for (const { atom, operation } of result) {
+    switch (operation) {
+      case "add":
+        out += "+ " + atom + "\n";
+        break;
+      case "delete":
+        out += "- " + atom + "\n";
+        break;
+      case "none":
+        out += "  " + atom + "\n";
+        break;
+    }
+  }
+
+  ok(false, msg + "\nDIFF:\n==========\n" + out + "==========\n");
+}
diff --git a/devtools/client/inspector/markup/test/helper_markup_accessibility_navigation.js b/devtools/client/inspector/markup/test/helper_markup_accessibility_navigation.js
new file mode 100644
index 0000000000..870a58abf8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/helper_markup_accessibility_navigation.js
@@ -0,0 +1,92 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from head.js */
+"use strict";
+
+/**
+ * Execute a keyboard event and check that the state is as expected (focused element, aria
+ * attribute etc...).
+ *
+ * @param {InspectorPanel} inspector
+ *        Current instance of the inspector being tested.
+ * @param {Object} elms
+ *        Map of elements that will be used to retrieve live references to children
+ *        elements
+ * @param {Element} focused
+ *        Element expected to be focused
+ * @param {Element} activedescendant
+ *        Element expected to be the aria activedescendant of the root node
+ */
+function testNavigationState(inspector, elms, focused, activedescendant) {
+  const doc = inspector.markup.doc;
+  const id = activedescendant.getAttribute("id");
+  is(doc.activeElement, focused, `Keyboard focus should be set to ${focused}`);
+  is(
+    elms.root.elt.getAttribute("aria-activedescendant"),
+    id,
+    `Active descendant should be set to ${id}`
+  );
+}
+
+/**
+ * Lookup the provided dotted path ("prop1.subprop2.myProp") in the provided object.
+ *
+ * @param {Object} obj
+ *        Object to expand.
+ * @param {String} path
+ *        Dotted path to use to expand the object.
+ * @return {?} anything that is found at the provided path in the object.
+ */
+function lookupPath(obj, path) {
+  const segments = path.split(".");
+  return segments.reduce((prev, current) => prev[current], obj);
+}
+
+/**
+ * Execute a keyboard event and check that the state is as expected (focused element, aria
+ * attribute etc...).
+ *
+ * @param {InspectorPanel} inspector
+ *        Current instance of the inspector being tested.
+ * @param {Object} elms
+ *        MarkupContainers/Elements that will be used to retrieve references to other
+ *        elements based on objects' paths.
+ * @param {Object} testData
+ *        - {String} desc: description for better logging.
+ *        - {String} key: keyboard event's key.
+ *        - {Object} options, optional: event data such as shiftKey, etc.
+ *        - {String} focused: path to expected focused element in elms map.
+ *        - {String} activedescendant: path to expected aria-activedescendant element in
+ *          elms map.
+ *        - {String} waitFor, optional: markupview event to wait for if keyboard actions
+ *          result in async updates. Also accepts the inspector event "inspector-updated".
+ */
+async function runAccessibilityNavigationTest(
+  inspector,
+  elms,
+  { desc, key, options, focused, activedescendant, waitFor }
+) {
+  info(desc);
+
+  const markup = inspector.markup;
+  const doc = markup.doc;
+  const win = doc.defaultView;
+
+  let updated;
+  if (waitFor) {
+    updated =
+      waitFor === "inspector-updated"
+        ? inspector.once(waitFor)
+        : markup.once(waitFor);
+  } else {
+    updated = Promise.resolve();
+  }
+  EventUtils.synthesizeKey(key, options, win);
+  await updated;
+
+  const focusedElement = lookupPath(elms, focused);
+  const activeDescendantElement = lookupPath(elms, activedescendant);
+  testNavigationState(inspector, elms, focusedElement, activeDescendantElement);
+}
diff --git a/devtools/client/inspector/markup/test/helper_outerhtml_test_runner.js b/devtools/client/inspector/markup/test/helper_outerhtml_test_runner.js
new file mode 100644
index 0000000000..223a36dd4f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/helper_outerhtml_test_runner.js
@@ -0,0 +1,99 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from head.js */
+"use strict";
+
+/**
+ * Run a series of edit-outer-html tests.
+ * This function will iterate over the provided tests array and run each test.
+ * Each test's goal is to provide a node (a selector) and a new outer-HTML to be
+ * inserted in place of the current one for that node.
+ * This test runner will wait for the mutation event to be fired and will check
+ * a few things. Each test may also provide its own validate function to perform
+ * assertions and verify that the new outer html is correct.
+ * @param {Array} tests See runEditOuterHTMLTest for the structure
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ * @return a promise that resolves when the tests have run
+ */
+function runEditOuterHTMLTests(tests, inspector) {
+  info("Running " + tests.length + " edit-outer-html tests");
+  return (async function () {
+    for (const step of tests) {
+      await runEditOuterHTMLTest(step, inspector);
+    }
+  })();
+}
+
+/**
+ * Run a single edit-outer-html test.
+ * See runEditOuterHTMLTests for a description.
+ * @param {Object} test A test object should contain the following properties:
+ *        - selector {String} a css selector targeting the node to edit
+ *        - oldHTML {String}
+ *        - newHTML {String}
+ *        - validate {Function} will be executed when the edition test is done,
+ *        after the new outer-html has been inserted. Should be used to verify
+ *        the actual DOM, see if it corresponds to the newHTML string provided
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ */
+async function runEditOuterHTMLTest(test, inspector) {
+  info("Running an edit outerHTML test on '" + test.selector + "'");
+  await selectNode(test.selector, inspector);
+
+  const onUpdated = inspector.once("inspector-updated");
+
+  info("Listen for reselectedonremoved and edit the outerHTML");
+  const onReselected = inspector.markup.once("reselectedonremoved");
+  await inspector.markup.updateNodeOuterHTML(
+    inspector.selection.nodeFront,
+    test.newHTML,
+    test.oldHTML
+  );
+  await onReselected;
+
+  // Typically selectedNode will === pageNode, but if a new element has been
+  // injected in front of it, this will not be the case. If this happens.
+  const selectedNodeFront = inspector.selection.nodeFront;
+  const pageNodeFront = await inspector.walker.querySelector(
+    inspector.walker.rootNode,
+    test.selector
+  );
+
+  if (test.validate) {
+    await test.validate({
+      pageNodeFront,
+      selectedNodeFront,
+      inspector,
+    });
+  } else {
+    is(
+      pageNodeFront,
+      selectedNodeFront,
+      "Original node (grabbed by selector) is selected"
+    );
+
+    const outerHTML = await getContentPageElementProperty(
+      test.selector,
+      "outerHTML"
+    );
+    is(outerHTML, test.newHTML, "Outer HTML has been updated");
+  }
+
+  // Wait for the inspector to be fully updated to avoid causing errors by
+  // abruptly closing hanging requests when the test ends
+  await onUpdated;
+
+  const closeTagLine =
+    inspector.markup.getContainer(pageNodeFront).closeTagLine;
+  if (closeTagLine) {
+    is(
+      closeTagLine.querySelectorAll(".theme-fg-contrast").length,
+      0,
+      "No contrast class"
+    );
+  }
+}
diff --git a/devtools/client/inspector/markup/test/helper_style_attr_test_runner.js b/devtools/client/inspector/markup/test/helper_style_attr_test_runner.js
new file mode 100644
index 0000000000..029651cf74
--- /dev/null
+++ b/devtools/client/inspector/markup/test/helper_style_attr_test_runner.js
@@ -0,0 +1,151 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from head.js */
+"use strict";
+
+/**
+ * Perform an style attribute edition and autocompletion test in the test
+ * url, for #node14. Test data should be an
+ * array of arrays structured as follows :
+ *  [
+ *    what key to press,
+ *    expected input box value after keypress,
+ *    expected input.selectionStart,
+ *    expected input.selectionEnd,
+ *    is popup expected to be open ?
+ *  ]
+ *
+ * The test will start by adding a new attribute on the node, and then send each
+ * key specified in the testData. The last item of this array should leave the
+ * new attribute editor, either by committing or cancelling the edit.
+ *
+ * @param {InspectorPanel} inspector
+ * @param {Array} testData
+ *        Array of arrays representing the characters to type for the new
+ *        attribute as well as the expected state at each step
+ */
+async function runStyleAttributeAutocompleteTests(inspector, testData) {
+  info("Expand all markup nodes");
+  await inspector.markup.expandAll();
+
+  info("Select #node14");
+  const container = await focusNode("#node14", inspector);
+
+  info("Focus and open the new attribute inplace-editor");
+  const attr = container.editor.newAttr;
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  const editor = inplaceEditor(attr);
+
+  for (let i = 0; i < testData.length; i++) {
+    const data = testData[i];
+
+    // Skip empty key.
+    if (!data.length) {
+      continue;
+    }
+
+    // Expect a markupmutation event at the last iteration since that's when the
+    // attribute is actually created.
+    const onMutation =
+      i === testData.length - 1 ? inspector.once("markupmutation") : null;
+
+    info(`Entering test data ${i}: ${data[0]}, expecting: [${data[1]}]`);
+    await enterData(data, editor, inspector);
+
+    info(`Test data ${i} entered. Checking state.`);
+    await checkData(data, editor, inspector);
+
+    await onMutation;
+  }
+
+  // Undoing the action will remove the new attribute, so make sure to wait for
+  // the markupmutation event here again.
+  const onMutation = inspector.once("markupmutation");
+  while (inspector.markup.undo.canUndo()) {
+    await undoChange(inspector);
+  }
+  await onMutation;
+}
+
+/**
+ * Process a test data entry.
+ * @param {Array} data
+ *        test data - click or key - to enter
+ * @param {InplaceEditor} editor
+ * @param {InspectorPanel} inspector
+ * @return {Promise} promise that will resolve when the test data has been
+ *         applied
+ */
+function enterData(data, editor, inspector) {
+  const key = data[0];
+
+  if (/^click_[0-9]+$/.test(key)) {
+    const suggestionIndex = parseInt(key.split("_")[1], 10);
+    return clickOnSuggestion(suggestionIndex, editor);
+  }
+
+  return sendKey(key, editor, inspector);
+}
+
+function clickOnSuggestion(index, editor) {
+  return new Promise(resolve => {
+    info("Clicking on item " + index + " in the list");
+    editor.once("after-suggest", () => executeSoon(resolve));
+    editor.popup._list.childNodes[index].click();
+  });
+}
+
+function sendKey(key, editor, inspector) {
+  return new Promise(resolve => {
+    if (/(down|left|right|back_space|return)/gi.test(key)) {
+      info("Adding event listener for down|left|right|back_space|return keys");
+      editor.input.addEventListener("keypress", function onKeypress() {
+        if (editor.input) {
+          editor.input.removeEventListener("keypress", onKeypress);
+        }
+        executeSoon(resolve);
+      });
+    } else {
+      editor.once("after-suggest", () => executeSoon(resolve));
+    }
+
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+  });
+}
+
+/**
+ * Verify that the inplace editor is in the expected state for the provided
+ * test data.
+ */
+async function checkData(data, editor, inspector) {
+  const [, completion, selStart, selEnd, popupOpen] = data;
+
+  if (selEnd != -1) {
+    is(editor.input.value, completion, "Completed value is correct");
+    is(
+      editor.input.selectionStart,
+      selStart,
+      "Selection start position is correct"
+    );
+    is(editor.input.selectionEnd, selEnd, "Selection end position is correct");
+    is(
+      editor.popup.isOpen,
+      popupOpen,
+      "Popup is " + (popupOpen ? "open" : "closed")
+    );
+  } else {
+    const nodeFront = await getNodeFront("#node14", inspector);
+    const container = getContainerForNodeFront(nodeFront, inspector);
+    const attr = container.editor.attrElements
+      .get("style")
+      .querySelector(".editable");
+    is(
+      attr.textContent,
+      completion,
+      "Correct value is persisted after pressing Enter"
+    );
+  }
+}
diff --git a/devtools/client/inspector/markup/test/lib_babel_6.21.0_min.js b/devtools/client/inspector/markup/test/lib_babel_6.21.0_min.js
new file mode 100644
index 0000000000..584af43bfe
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_babel_6.21.0_min.js
@@ -0,0 +1,24 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Babel=t():e.Babel=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}(function(e){for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t))switch(typeof e[t]){case"function":break;case"object":e[t]=function(t){var r=t.slice(1),n=e[t[0]];return function(e,t,i){n.apply(this,[e,t,i].concat(r))}}(e[t]);break;default:e[t]=e[e[t]]}return e}([function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e,t){return g(t)&&"string"==typeof t[0]?e.hasOwnProperty(t[0])?[e[t[0]]].concat(t.slice(1)):void 0:"string"==typeof t?e[t]:t}function s(e){var t=(e.presets||[]).map(function(e){var t=i(E,e);if(!t)throw new Error('Invalid preset specified in Babel options: "'+e+'"');return g(t)&&"object"===h(t[0])&&t[0].hasOwnProperty("buildPreset")&&(t[0]=d({},t[0],{buildPreset:t[0].buildPreset})),t}),r=(e.plugins||[]).map(function(e){var t=i(b,e);if(!t)throw new Error('Invalid plugin specified in Babel options: "'+e+'"');return t});return d({babelrc:!1},e,{presets:t,plugins:r})}function a(e,t){return v.transform(e,s(t))}function o(e,t,r){return v.transformFromAst(e,t,s(r))}function u(e,t){b.hasOwnProperty(e)&&console.warn('A plugin named "'+e+'" is already registered, it will be overridden'),b[e]=t}function l(e){Object.keys(e).forEach(function(t){return u(t,e[t])})}function c(e,t){E.hasOwnProperty(e)&&console.warn('A preset named "'+e+'" is already registered, it will be overridden'),E[e]=t}function f(e){Object.keys(e).forEach(function(t){return c(t,e[t])})}function p(){window.removeEventListener("DOMContentLoaded",x)}Object.defineProperty(t,"__esModule",{value:!0}),t.version=t.availablePresets=t.availablePlugins=void 0;var d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.transform=a,t.transformFromAst=o,t.registerPlugin=u,t.registerPlugins=l,t.registerPreset=c,t.registerPresets=f,t.disableScriptTags=p;var m=r(289),v=n(m),y=r(623),g=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},b=t.availablePlugins={},E=t.availablePresets={};l({"check-es2015-constants":r(66),"external-helpers":r(319),"syntax-async-functions":r(67),"syntax-async-generators":r(193),"syntax-class-constructor-call":r(194),"syntax-class-properties":r(195),"syntax-decorators":r(126),"syntax-do-expressions":r(196),"syntax-exponentiation-operator":r(197),"syntax-export-extensions":r(198),"syntax-flow":r(68),"syntax-function-bind":r(199),"syntax-function-sent":r(321),"syntax-jsx":r(127),"syntax-object-rest-spread":r(200),"syntax-trailing-function-commas":r(128),"transform-async-functions":r(322),"transform-async-to-generator":r(129),"transform-async-to-module-method":r(324),"transform-class-constructor-call":r(201),"transform-class-properties":r(202),"transform-decorators":r(203),"transform-decorators-legacy":r(325).default,"transform-do-expressions":r(204),"transform-es2015-arrow-functions":r(69),"transform-es2015-block-scoped-functions":r(70),"transform-es2015-block-scoping":r(71),"transform-es2015-classes":r(72),"transform-es2015-computed-properties":r(73),"transform-es2015-destructuring":r(74),"transform-es2015-duplicate-keys":r(130),"transform-es2015-for-of":r(75),"transform-es2015-function-name":r(76),"transform-es2015-instanceof":r(328),"transform-es2015-literals":r(77),"transform-es2015-modules-amd":r(131),"transform-es2015-modules-commonjs":r(78),"transform-es2015-modules-systemjs":r(206),"transform-es2015-modules-umd":r(207),"transform-es2015-object-super":r(79),"transform-es2015-parameters":r(80),"transform-es2015-shorthand-properties":r(81),"transform-es2015-spread":r(82),"transform-es2015-sticky-regex":r(83),"transform-es2015-template-literals":r(84),"transform-es2015-typeof-symbol":r(85),"transform-es2015-unicode-regex":r(86),"transform-es3-member-expression-literals":r(332),"transform-es3-property-literals":r(333),"transform-es5-property-mutators":r(334),"transform-eval":r(335),"transform-exponentiation-operator":r(132),"transform-export-extensions":r(208),"transform-flow-comments":r(336),"transform-flow-strip-types":r(209),"transform-function-bind":r(210),"transform-jscript":r(337),"transform-object-assign":r(338),"transform-object-rest-spread":r(211),"transform-object-set-prototype-of-to-assign":r(339),"transform-proto-to-assign":r(340),"transform-react-constant-elements":r(341),"transform-react-display-name":r(212),"transform-react-inline-elements":r(342),"transform-react-jsx":r(213),"transform-react-jsx-compat":r(343),"transform-react-jsx-self":r(344),"transform-react-jsx-source":r(345),"transform-regenerator":r(87),"transform-runtime":r(347),"transform-strict-mode":r(214),"undeclared-variables-check":r(348)}),f({es2015:r(215),es2016:r(216),es2017:r(217),latest:r(349),react:r(350),"stage-0":r(351),"stage-1":r(218),"stage-2":r(219),"stage-3":r(220),"es2015-no-commonjs":{plugins:[r(84),r(77),r(76),r(69),r(70),r(72),r(79),r(81),r(73),r(75),r(83),r(86),r(66),r(82),r(80),r(74),r(71),r(85),[r(87),{async:!1,asyncGenerators:!1}]]},"es2015-loose":{plugins:[[r(84),{loose:!0}],r(77),r(76),r(69),r(70),[r(72),{loose:!0}],r(79),r(81),r(130),[r(73),{loose:!0}],[r(75),{loose:!0}],r(83),r(86),r(66),[r(82),{loose:!0}],r(80),[r(74),{loose:!0}],r(71),r(85),[r(78),{loose:!0}],[r(87),{async:!1,asyncGenerators:!1}]]}});var x=(t.version="6.19.0",function(){return(0,y.runScripts)(a)});"undefined"!=typeof window&&window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",x,!1)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){var t=te["is"+e];t||(t=te["is"+e]=function(t,r){return te.is(e,t,r)}),te["assert"+e]=function(r,n){if(n=n||{},!t(r,n))throw new Error("Expected type "+(0,M.default)(e)+" with option "+(0,M.default)(n))}}function a(e,t,r){if(!t)return!1;var n=o(t.type,e);return!!n&&("undefined"==typeof r||te.shallowEqual(t,r))}function o(e,t){if(e===t)return!0;if(te.ALIAS_KEYS[t])return!1;var r=te.FLIPPED_ALIAS_KEYS[t];if(r){if(r[0]===e)return!0;for(var n=r,i=Array.isArray(n),s=0,n=i?n:(0,O.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;if(e===o)return!0}}return!1}function u(e,t,r){if(e){var n=te.NODE_FIELDS[e.type];if(n){var i=n[t];i&&i.validate&&(i.optional&&null==r||i.validate(e,t,r))}}}function l(e,t){for(var r=(0,R.default)(t),n=r,i=Array.isArray(n),s=0,n=i?n:(0,O.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;if(e[o]!==t[o])return!1}return!0}function c(e,t,r){return e.object=te.memberExpression(e.object,e.property,e.computed),e.property=t,e.computed=!!r,e}function f(e,t){return e.object=te.memberExpression(t,e.object),e}function p(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"body";return e[t]=te.toBlock(e[t],e)}function d(e){if(!e)return e;var t={};for(var r in e)"_"!==r[0]&&(t[r]=e[r]);return t}function h(e){var t=d(e);return delete t.loc,t}function m(e){if(!e)return e;var t={};for(var r in e)if("_"!==r[0]){var n=e[r];n&&(n.type?n=te.cloneDeep(n):Array.isArray(n)&&(n=n.map(te.cloneDeep))),t[r]=n}return t}function v(e,t){var r=e.split(".");return function(e){if(!te.isMemberExpression(e))return!1;for(var n=[e],i=0;n.length;){var s=n.shift();if(t&&i===r.length)return!0;if(te.isIdentifier(s)){if(r[i]!==s.name)return!1}else{if(!te.isStringLiteral(s)){if(te.isMemberExpression(s)){if(s.computed&&!te.isStringLiteral(s.property))return!1;n.push(s.object),n.push(s.property);continue}return!1}if(r[i]!==s.value)return!1}if(++i>r.length)return!1}return!0}}function y(e){for(var t=te.COMMENT_KEYS,r=Array.isArray(t),n=0,t=r?t:(0,O.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;delete e[s]}return e}function g(e,t){return b(e,t),E(e,t),x(e,t),e}function b(e,t){A("trailingComments",e,t)}function E(e,t){A("leadingComments",e,t)}function x(e,t){A("innerComments",e,t)}function A(e,t,r){t&&r&&(t[e]=(0,$.default)((0,q.default)([].concat(t[e],r[e]))))}function S(e,t){if(!e||!t)return e;for(var r=te.INHERIT_KEYS.optional,n=Array.isArray(r),i=0,r=n?r:(0,O.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;null==e[a]&&(e[a]=t[a])}for(var o in t)"_"===o[0]&&(e[o]=t[o]);for(var u=te.INHERIT_KEYS.force,l=Array.isArray(u),c=0,u=l?u:(0,O.default)(u);;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;e[p]=t[p]}return te.inheritsComments(e,t),e}function _(e){if(!D(e))throw new TypeError("Not a valid node "+(e&&e.type))}function D(e){return!(!e||!Q.VISITOR_KEYS[e.type])}function C(e,t,r){if(e){var n=te.VISITOR_KEYS[e.type];if(n){r=r||{},t(e,r);for(var i=n,s=Array.isArray(i),a=0,i=s?i:(0,O.default)(i);;){var o;if(s){if(a>=i.length)break;o=i[a++]}else{if(a=i.next(),a.done)break;o=a.value}var u=o,l=e[u];if(Array.isArray(l))for(var c=l,f=Array.isArray(c),p=0,c=f?c:(0,O.default)(c);;){var d;if(f){if(p>=c.length)break;d=c[p++]}else{if(p=c.next(),p.done)break;d=p.value}var h=d;C(h,t,r)}else C(l,t,r)}}}}function w(e,t){t=t||{};for(var r=t.preserveComments?se:ae,n=r,i=Array.isArray(n),s=0,n=i?n:(0,O.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;null!=e[o]&&(e[o]=void 0)}for(var u in e)"_"===u[0]&&null!=e[u]&&(e[u]=void 0);for(var l=(0,P.default)(e),c=l,f=Array.isArray(c),p=0,c=f?c:(0,O.default)(c);;){var d;if(f){if(p>=c.length)break;d=c[p++]}else{if(p=c.next(),p.done)break;d=p.value}var h=d;e[h]=null}}function F(e,t){return C(e,w,t),e}t.__esModule=!0,t.createTypeAnnotationBasedOnTypeof=t.removeTypeDuplicates=t.createUnionTypeAnnotation=t.valueToNode=t.toBlock=t.toExpression=t.toStatement=t.toBindingIdentifierName=t.toIdentifier=t.toKeyAlias=t.toSequenceExpression=t.toComputedKey=t.isNodesEquivalent=t.isImmutable=t.isScope=t.isSpecifierDefault=t.isVar=t.isBlockScoped=t.isLet=t.isValidIdentifier=t.isReferenced=t.isBinding=t.getOuterBindingIdentifiers=t.getBindingIdentifiers=t.TYPES=t.react=t.DEPRECATED_KEYS=t.BUILDER_KEYS=t.NODE_FIELDS=t.ALIAS_KEYS=t.VISITOR_KEYS=t.NOT_LOCAL_BINDING=t.BLOCK_SCOPED_SYMBOL=t.INHERIT_KEYS=t.UNARY_OPERATORS=t.STRING_UNARY_OPERATORS=t.NUMBER_UNARY_OPERATORS=t.BOOLEAN_UNARY_OPERATORS=t.BINARY_OPERATORS=t.NUMBER_BINARY_OPERATORS=t.BOOLEAN_BINARY_OPERATORS=t.COMPARISON_BINARY_OPERATORS=t.EQUALITY_BINARY_OPERATORS=t.BOOLEAN_NUMBER_BINARY_OPERATORS=t.UPDATE_OPERATORS=t.LOGICAL_OPERATORS=t.COMMENT_KEYS=t.FOR_INIT_KEYS=t.FLATTENABLE_KEYS=t.STATEMENT_OR_BLOCK_KEYS=void 0;var k=r(353),P=i(k),T=r(2),O=i(T),B=r(20),R=i(B),I=r(34),M=i(I),N=r(135);Object.defineProperty(t,"STATEMENT_OR_BLOCK_KEYS",{enumerable:!0,get:function(){return N.STATEMENT_OR_BLOCK_KEYS}}),Object.defineProperty(t,"FLATTENABLE_KEYS",{enumerable:!0,get:function(){return N.FLATTENABLE_KEYS}}),Object.defineProperty(t,"FOR_INIT_KEYS",{enumerable:!0,get:function(){return N.FOR_INIT_KEYS}}),Object.defineProperty(t,"COMMENT_KEYS",{enumerable:!0,get:function(){return N.COMMENT_KEYS}}),Object.defineProperty(t,"LOGICAL_OPERATORS",{enumerable:!0,get:function(){return N.LOGICAL_OPERATORS}}),Object.defineProperty(t,"UPDATE_OPERATORS",{enumerable:!0,get:function(){return N.UPDATE_OPERATORS}}),Object.defineProperty(t,"BOOLEAN_NUMBER_BINARY_OPERATORS",{enumerable:!0,get:function(){return N.BOOLEAN_NUMBER_BINARY_OPERATORS}}),Object.defineProperty(t,"EQUALITY_BINARY_OPERATORS",{enumerable:!0,get:function(){return N.EQUALITY_BINARY_OPERATORS}}),Object.defineProperty(t,"COMPARISON_BINARY_OPERATORS",{enumerable:!0,get:function(){return N.COMPARISON_BINARY_OPERATORS}}),Object.defineProperty(t,"BOOLEAN_BINARY_OPERATORS",{enumerable:!0,get:function(){return N.BOOLEAN_BINARY_OPERATORS}}),Object.defineProperty(t,"NUMBER_BINARY_OPERATORS",{enumerable:!0,get:function(){return N.NUMBER_BINARY_OPERATORS}}),Object.defineProperty(t,"BINARY_OPERATORS",{enumerable:!0,get:function(){return N.BINARY_OPERATORS}}),Object.defineProperty(t,"BOOLEAN_UNARY_OPERATORS",{enumerable:!0,get:function(){return N.BOOLEAN_UNARY_OPERATORS}}),Object.defineProperty(t,"NUMBER_UNARY_OPERATORS",{enumerable:!0,get:function(){return N.NUMBER_UNARY_OPERATORS}}),Object.defineProperty(t,"STRING_UNARY_OPERATORS",{enumerable:!0,get:function(){return N.STRING_UNARY_OPERATORS}}),Object.defineProperty(t,"UNARY_OPERATORS",{enumerable:!0,get:function(){return N.UNARY_OPERATORS}}),Object.defineProperty(t,"INHERIT_KEYS",{enumerable:!0,get:function(){return N.INHERIT_KEYS}}),Object.defineProperty(t,"BLOCK_SCOPED_SYMBOL",{enumerable:!0,get:function(){return N.BLOCK_SCOPED_SYMBOL}}),Object.defineProperty(t,"NOT_LOCAL_BINDING",{enumerable:!0,get:function(){return N.NOT_LOCAL_BINDING}}),t.is=a,t.isType=o,t.validate=u,t.shallowEqual=l,t.appendToMemberExpression=c,t.prependToMemberExpression=f,t.ensureBlock=p,t.clone=d,t.cloneWithoutLoc=h,t.cloneDeep=m,t.buildMatchMemberExpression=v,t.removeComments=y,t.inheritsComments=g,t.inheritTrailingComments=b,t.inheritLeadingComments=E,t.inheritInnerComments=x,t.inherits=S,t.assertNode=_,t.isNode=D,t.traverseFast=C,t.removeProperties=w,t.removePropertiesDeep=F;var L=r(224);Object.defineProperty(t,"getBindingIdentifiers",{enumerable:!0,get:function(){return L.getBindingIdentifiers}}),Object.defineProperty(t,"getOuterBindingIdentifiers",{enumerable:!0,get:function(){return L.getOuterBindingIdentifiers}});var j=r(388);Object.defineProperty(t,"isBinding",{enumerable:!0,get:function(){return j.isBinding}}),Object.defineProperty(t,"isReferenced",{enumerable:!0,get:function(){return j.isReferenced}}),Object.defineProperty(t,"isValidIdentifier",{enumerable:!0,get:function(){return j.isValidIdentifier}}),Object.defineProperty(t,"isLet",{enumerable:!0,get:function(){return j.isLet}}),Object.defineProperty(t,"isBlockScoped",{enumerable:!0,get:function(){return j.isBlockScoped}}),Object.defineProperty(t,"isVar",{enumerable:!0,get:function(){return j.isVar}}),Object.defineProperty(t,"isSpecifierDefault",{enumerable:!0,get:function(){return j.isSpecifierDefault}}),Object.defineProperty(t,"isScope",{enumerable:!0,get:function(){return j.isScope}}),Object.defineProperty(t,"isImmutable",{enumerable:!0,get:function(){return j.isImmutable}}),Object.defineProperty(t,"isNodesEquivalent",{enumerable:!0,get:function(){return j.isNodesEquivalent}});var U=r(378);Object.defineProperty(t,"toComputedKey",{enumerable:!0,get:function(){return U.toComputedKey}}),Object.defineProperty(t,"toSequenceExpression",{enumerable:!0,get:function(){return U.toSequenceExpression}}),Object.defineProperty(t,"toKeyAlias",{enumerable:!0,get:function(){return U.toKeyAlias}}),Object.defineProperty(t,"toIdentifier",{enumerable:!0,get:function(){return U.toIdentifier}}),Object.defineProperty(t,"toBindingIdentifierName",{enumerable:!0,get:function(){return U.toBindingIdentifierName}}),Object.defineProperty(t,"toStatement",{enumerable:!0,get:function(){return U.toStatement}}),Object.defineProperty(t,"toExpression",{enumerable:!0,get:function(){return U.toExpression}}),Object.defineProperty(t,"toBlock",{enumerable:!0,get:function(){return U.toBlock}}),Object.defineProperty(t,"valueToNode",{enumerable:!0,get:function(){return U.valueToNode}});var V=r(386);Object.defineProperty(t,"createUnionTypeAnnotation",{enumerable:!0,get:function(){return V.createUnionTypeAnnotation}}),Object.defineProperty(t,"removeTypeDuplicates",{enumerable:!0,get:function(){return V.removeTypeDuplicates}}),Object.defineProperty(t,"createTypeAnnotationBasedOnTypeof",{enumerable:!0,get:function(){return V.createTypeAnnotationBasedOnTypeof}});var G=r(619),W=i(G),Y=r(570),q=i(Y),K=r(111),H=i(K),J=r(112),X=i(J),z=r(596),$=i(z);r(383);var Q=r(28),Z=r(387),ee=n(Z),te=t;t.VISITOR_KEYS=Q.VISITOR_KEYS,t.ALIAS_KEYS=Q.ALIAS_KEYS,t.NODE_FIELDS=Q.NODE_FIELDS,t.BUILDER_KEYS=Q.BUILDER_KEYS,t.DEPRECATED_KEYS=Q.DEPRECATED_KEYS,t.react=ee;for(var re in te.VISITOR_KEYS)s(re);te.FLIPPED_ALIAS_KEYS={},(0,X.default)(te.ALIAS_KEYS,function(e,t){(0,X.default)(e,function(e){var r=te.FLIPPED_ALIAS_KEYS[e]=te.FLIPPED_ALIAS_KEYS[e]||[];r.push(t)})}),(0,X.default)(te.FLIPPED_ALIAS_KEYS,function(e,t){te[t.toUpperCase()+"_TYPES"]=e,s(t)});t.TYPES=(0,R.default)(te.VISITOR_KEYS).concat((0,R.default)(te.FLIPPED_ALIAS_KEYS)).concat((0,R.default)(te.DEPRECATED_KEYS));(0,X.default)(te.BUILDER_KEYS,function(e,t){function r(){if(arguments.length>e.length)throw new Error("t."+t+": Too many arguments passed. Received "+arguments.length+" but can receive no more than "+e.length);var r={};r.type=t;for(var n=0,i=e,s=Array.isArray(i),a=0,i=s?i:(0,O.default)(i);;){var o;if(s){if(a>=i.length)break;o=i[a++]}else{if(a=i.next(),a.done)break;o=a.value}var l=o,c=te.NODE_FIELDS[t][l],f=arguments[n++];void 0===f&&(f=(0,H.default)(c.default)),r[l]=f}for(var p in r)u(r,p,r[p]);return r}te[t]=r,te[t[0].toLowerCase()+t.slice(1)]=r});var ne=function(e){function t(t){return function(){return console.trace("The node type "+e+" has been renamed to "+r),t.apply(this,arguments)}}var r=te.DEPRECATED_KEYS[e];te[e]=te[e[0].toLowerCase()+e.slice(1)]=t(te[r]),te["is"+e]=t(te["is"+r]),te["assert"+e]=t(te["assert"+r])};for(var ie in te.DEPRECATED_KEYS)ne(ie);(0,W.default)(te),(0,W.default)(te.VISITOR_KEYS);var se=["tokens","start","end","loc","raw","rawValue"],ae=te.COMMENT_KEYS.concat(["comments"]).concat(se)},function(e,t,r){"use strict";e.exports={default:r(397),__esModule:!0}},function(e,t){"use strict";t.__esModule=!0,t.default=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){e=(0,l.default)(e);var r=e,n=r.program;return t.length&&(0,m.default)(e,A,null,t),n.body.length>1?n.body:n.body[0]}t.__esModule=!0;var a=r(10),o=i(a);t.default=function(e,t){var r=void 0;try{throw new Error}catch(e){e.stack&&(r=e.stack.split("\n").slice(1).join("\n"))}t=(0,f.default)({allowReturnOutsideFunction:!0,allowSuperOutsideMethod:!0,preserveComments:!1},t);var n=function(){var i=void 0;try{i=y.parse(e,t),i=m.default.removeProperties(i,{preserveComments:t.preserveComments}),m.default.cheap(i,function(e){e[E]=!0})}catch(e){throw (e.stack=e.stack+"from\n"+r, e)}return n=function(){return i},i};return function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return s(n(),t)}};var u=r(568),l=i(u),c=r(174),f=i(c),p=r(270),d=i(p),h=r(8),m=i(h),v=r(136),y=n(v),g=r(1),b=n(g),E="_fromTemplate",x=(0,o.default)(),A={noScope:!0,enter:function(e,t){var r=e.node;if(r[x])return e.skip();b.isExpressionStatement(r)&&(r=r.expression);var n=void 0;if(b.isIdentifier(r)&&r[E])if((0,d.default)(t[0],r.name))n=t[0][r.name];else if("$"===r.name[0]){var i=+r.name.slice(1);t[i]&&(n=t[i])}null===n&&e.remove(),n&&(n[x]=!0,e.replaceInline(n))},exit:function(e){var t=e.node;t.loc||m.default.clearNode(t)}};e.exports=t.default},function(e,t){"use strict";var r=e.exports={version:"2.4.0"};"number"==typeof __e&&(__e=r)},function(e,t){"use strict";var r=Array.isArray;e.exports=r},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.__esModule=!0;var s=r(356),a=n(s),o=r(10),u=n(o),l="function"==typeof u.default&&"symbol"===i(a.default)?function(e){return"undefined"==typeof e?"undefined":i(e)}:function(e){return e&&"function"==typeof u.default&&e.constructor===u.default&&e!==u.default.prototype?"symbol":"undefined"==typeof e?"undefined":i(e)};t.default="function"==typeof u.default&&"symbol"===l(a.default)?function(e){return"undefined"==typeof e?"undefined":l(e)}:function(e){return e&&"function"==typeof u.default&&e.constructor===u.default&&e!==u.default.prototype?"symbol":"undefined"==typeof e?"undefined":l(e)}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t,r,n,i){if(e){if(t||(t={}),!t.noScope&&!r&&"Program"!==e.type&&"File"!==e.type)throw new Error(y.get("traverseNeedsParent",e.type));m.explode(t),s.node(e,t,r,n,i)}}function a(e,t){e.node.type===t.type&&(t.has=!0,e.stop())}t.__esModule=!0,t.visitors=t.Hub=t.Scope=t.NodePath=void 0;var o=r(2),u=i(o),l=r(35);Object.defineProperty(t,"NodePath",{enumerable:!0,get:function(){return i(l).default}});var c=r(134);Object.defineProperty(t,"Scope",{enumerable:!0,get:function(){return i(c).default}});var f=r(221);Object.defineProperty(t,"Hub",{enumerable:!0,get:function(){return i(f).default}}),t.default=s;var p=r(360),d=i(p),h=r(377),m=n(h),v=r(19),y=n(v),g=r(113),b=i(g),E=r(1),x=n(E),A=r(89),S=n(A);t.visitors=m,s.visitors=m,s.verify=m.verify,s.explode=m.explode,s.NodePath=r(35),s.Scope=r(134),s.Hub=r(221),s.cheap=function(e,t){return x.traverseFast(e,t)},s.node=function(e,t,r,n,i,s){var a=x.VISITOR_KEYS[e.type];if(a)for(var o=new d.default(r,t,n,i),l=a,c=Array.isArray(l),f=0,l=c?l:(0,u.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var h=p;if((!s||!s[h])&&o.visit(e,h))return}},s.clearNode=function(e,t){x.removeProperties(e,t),S.path.delete(e)},s.removeProperties=function(e,t){return x.traverseFast(e,s.clearNode,t),e},s.hasType=function(e,t,r,n){if((0,b.default)(n,e.type))return!1;if(e.type===r)return!0;var i={has:!1,type:r};return s(e,{blacklist:n,enter:a},t,i),i.has},s.clearCache=function(){S.clear()},s.clearCache.clearPath=S.clearPath,s.clearCache.clearScope=S.clearScope,s.copyCache=function(e,t){S.path.has(e)&&S.path.set(t,S.path.get(e))}},function(e,t,r){"use strict";e.exports={default:r(402),__esModule:!0}},function(e,t,r){"use strict";e.exports={default:r(407),__esModule:!0}},function(e,t,r){"use strict";var n=r(149)("wks"),i=r(97),s=r(14).Symbol,a="function"==typeof s,o=e.exports=function(e){return n[e]||(n[e]=a&&s[e]||(a?s:i)("Symbol."+e))};o.store=n},function(e,t){"use strict";function r(e){var t="undefined"==typeof e?"undefined":n(e);return null!=e&&("object"==t||"function"==t)}var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=r},function(e,t){"use strict";function r(e){return null!=e&&"object"==("undefined"==typeof e?"undefined":n(e))}var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=r},function(e,t){"use strict";var r=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(e,t,r){"use strict";function n(e){return null==e?void 0===e?u:o:(e=Object(e),l&&l in e?s(e):a(e))}var i=r(44),s=r(525),a=r(551),o="[object Null]",u="[object Undefined]",l=i?i.toStringTag:void 0;e.exports=n},function(e,t,r){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=r(259),s="object"==("undefined"==typeof self?"undefined":n(self))&&self&&self.Object===Object&&self,a=i||s||Function("return this")();e.exports=a},function(e,t,r){(function(e){"use strict";function r(e,t){for(var r=0,n=e.length-1;n>=0;n--){var i=e[n];"."===i?e.splice(n,1):".."===i?(e.splice(n,1),r++):r&&(e.splice(n,1),r--)}if(t)for(;r--;r)e.unshift("..");return e}function n(e,t){if(e.filter)return e.filter(t);for(var r=[],n=0;n<e.length;n++)t(e[n],n,e)&&r.push(e[n]);return r}var i=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/,s=function(e){return i.exec(e).slice(1)};t.resolve=function(){for(var t="",i=!1,s=arguments.length-1;s>=-1&&!i;s--){var a=s>=0?arguments[s]:e.cwd();if("string"!=typeof a)throw new TypeError("Arguments to path.resolve must be strings");a&&(t=a+"/"+t,i="/"===a.charAt(0))}return t=r(n(t.split("/"),function(e){return!!e}),!i).join("/"),(i?"/":"")+t||"."},t.normalize=function(e){var i=t.isAbsolute(e),s="/"===a(e,-1);return e=r(n(e.split("/"),function(e){return!!e}),!i).join("/"),e||i||(e="."),e&&s&&(e+="/"),(i?"/":"")+e},t.isAbsolute=function(e){return"/"===e.charAt(0)},t.join=function(){var e=Array.prototype.slice.call(arguments,0);return t.normalize(n(e,function(e,t){if("string"!=typeof e)throw new TypeError("Arguments to path.join must be strings");return e}).join("/"))},t.relative=function(e,r){function n(e){for(var t=0;t<e.length&&""===e[t];t++);for(var r=e.length-1;r>=0&&""===e[r];r--);return t>r?[]:e.slice(t,r-t+1)}e=t.resolve(e).substr(1),r=t.resolve(r).substr(1);for(var i=n(e.split("/")),s=n(r.split("/")),a=Math.min(i.length,s.length),o=a,u=0;u<a;u++)if(i[u]!==s[u]){o=u;break}for(var l=[],u=o;u<i.length;u++)l.push("..");return l=l.concat(s.slice(o)),l.join("/")},t.sep="/",t.delimiter=":",t.dirname=function(e){var t=s(e),r=t[0],n=t[1];return r||n?(n&&(n=n.substr(0,n.length-1)),r+n):"."},t.basename=function(e,t){var r=s(e)[2];return t&&r.substr(-1*t.length)===t&&(r=r.substr(0,r.length-t.length)),r},t.extname=function(e){return s(e)[3]};var a="b"==="ab".substr(-1)?function(e,t,r){return e.substr(t,r)}:function(e,t,r){return t<0&&(t=e.length+t),e.substr(t,r)}}).call(t,r(18))},function(e,t){"use strict";function r(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}function i(e){if(c===setTimeout)return setTimeout(e,0);if((c===r||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function s(e){if(f===clearTimeout)return clearTimeout(e);if((f===n||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function a(){m&&d&&(m=!1,d.length?h=d.concat(h):v=-1,h.length&&o())}function o(){if(!m){var e=i(a);m=!0;for(var t=h.length;t;){for(d=h,h=[];++v<t;)d&&d[v].run();v=-1,t=h.length}d=null,m=!1,s(e)}}function u(e,t){this.fun=e,this.array=t}function l(){}var c,f,p=e.exports={};!function(){try{c="function"==typeof setTimeout?setTimeout:r}catch(e){c=r}try{f="function"==typeof clearTimeout?clearTimeout:n}catch(e){f=n}}();var d,h=[],m=!1,v=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var r=1;r<arguments.length;r++)t[r-1]=arguments[r];h.push(new u(e,t)),1!==h.length||m||i(o)},u.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=l,p.addListener=l,p.once=l,p.off=l,p.removeListener=l,p.removeAllListeners=l,p.emit=l,p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];var i=f[e];if(!i)throw new ReferenceError("Unknown message "+(0,u.default)(e));return r=a(r),i.replace(/\$(\d+)/g,function(e,t){return r[t-1]})}function a(e){return e.map(function(e){if(null!=e&&e.inspect)return e.inspect();try{return(0,u.default)(e)||e+""}catch(t){return c.inspect(e)}})}t.__esModule=!0,t.MESSAGES=void 0;var o=r(34),u=i(o);t.get=s,t.parseArgs=a;var l=r(118),c=n(l),f=t.MESSAGES={tailCallReassignmentDeopt:"Function reference has been reassigned, so it will probably be dereferenced, therefore we can't optimise this with confidence",classesIllegalBareSuper:"Illegal use of bare super",classesIllegalSuperCall:"Direct super call is illegal in non-constructor, use super.$1() instead",scopeDuplicateDeclaration:"Duplicate declaration $1",settersNoRest:"Setters aren't allowed to have a rest",noAssignmentsInForHead:"No assignments allowed in for-in/of head",expectedMemberExpressionOrIdentifier:"Expected type MemberExpression or Identifier",invalidParentForThisNode:"We don't know how to handle this node within the current parent - please open an issue",readOnly:"$1 is read-only",unknownForHead:"Unknown node type $1 in ForStatement",didYouMean:"Did you mean $1?",codeGeneratorDeopt:"Note: The code generator has deoptimised the styling of $1 as it exceeds the max of $2.",missingTemplatesDirectory:"no templates directory - this is most likely the result of a broken `npm publish`. Please report to https://github.com/babel/babel/issues",unsupportedOutputType:"Unsupported output type $1",illegalMethodName:"Illegal method name $1",lostTrackNodePath:"We lost track of this node's position, likely because the AST was directly manipulated",modulesIllegalExportName:"Illegal export $1",modulesDuplicateDeclarations:"Duplicate module declarations with the same source but in different scopes",undeclaredVariable:"Reference to undeclared variable $1",undeclaredVariableType:"Referencing a type alias outside of a type annotation",undeclaredVariableSuggestion:"Reference to undeclared variable $1 - did you mean $2?",traverseNeedsParent:"You must pass a scope and parentPath unless traversing a Program/File. Instead of that you tried to traverse a $1 node without passing scope and parentPath.",traverseVerifyRootFunction:"You passed `traverse()` a function when it expected a visitor object, are you sure you didn't mean `{ enter: Function }`?",traverseVerifyVisitorProperty:"You passed `traverse()` a visitor object with the property $1 that has the invalid property $2",traverseVerifyNodeType:"You gave us a visitor for the node type $1 but it's not a valid type",pluginNotObject:"Plugin $2 specified in $1 was expected to return an object when invoked but returned $3",pluginNotFunction:"Plugin $2 specified in $1 was expected to return a function but returned $3",pluginUnknown:"Unknown plugin $1 specified in $2 at $3, attempted to resolve relative to $4",pluginInvalidProperty:"Plugin $2 specified in $1 provided an invalid property of $3"}},function(e,t,r){"use strict";e.exports={default:r(404),__esModule:!0}},function(e,t,r){"use strict";var n=r(24);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t,r){"use strict";e.exports=!r(36)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,r){"use strict";var n=r(14),i=r(5),s=r(54),a=r(30),o="prototype",u=function e(t,r,u){var l,c,f,p=t&e.F,d=t&e.G,h=t&e.S,m=t&e.P,v=t&e.B,y=t&e.W,g=d?i:i[r]||(i[r]={}),b=g[o],E=d?n:h?n[r]:(n[r]||{})[o];d&&(u=r);
+for(l in u)c=!p&&E&&void 0!==E[l],c&&l in g||(f=c?E[l]:u[l],g[l]=d&&"function"!=typeof E[l]?u[l]:v&&c?s(f,n):y&&E[l]==f?function(e){var t=function(t,r,n){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,r)}return new e(t,r,n)}return e.apply(this,arguments)};return t[o]=e[o],t}(f):m&&"function"==typeof f?s(Function.call,f):f,m&&((g.virtual||(g.virtual={}))[l]=f,t&e.R&&b&&!b[l]&&a(b,l,f)))};u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,e.exports=u},function(e,t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=function(e){return"object"===("undefined"==typeof e?"undefined":r(e))?null!==e:"function"==typeof e}},function(e,t,r){"use strict";var n=r(21),i=r(228),s=r(152),a=Object.defineProperty;t.f=r(22)?Object.defineProperty:function(e,t,r){if(n(e),t=s(t,!0),n(r),i)try{return a(e,t,r)}catch(e){}if("get"in r||"set"in r)throw TypeError("Accessors not supported!");return"value"in r&&(e[t]=r.value),e}},function(e,t,r){"use strict";function n(e){return null!=e&&s(e.length)&&!i(e)}var i=r(116),s=r(175);e.exports=n},function(e,t,r){"use strict";function n(e){return a(e)?i(e):s(e)}var i=r(243),s=r(487),a=r(26);e.exports=n},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){return Array.isArray(e)?"array":null===e?"null":void 0===e?"undefined":"undefined"==typeof e?"undefined":(0,g.default)(e)}function a(e){function t(t,r,n){if(Array.isArray(n))for(var i=0;i<n.length;i++)e(t,r+"["+i+"]",n[i])}return t.each=e,t}function o(){function e(e,t,n){if(r.indexOf(n)<0)throw new TypeError("Property "+t+" expected value to be one of "+(0,v.default)(r)+" but got "+(0,v.default)(n))}for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];return e.oneOf=r,e}function u(){function e(e,t,n){for(var i=!1,s=r,a=Array.isArray(s),o=0,s=a?s:(0,h.default)(s);;){var u;if(a){if(o>=s.length)break;u=s[o++]}else{if(o=s.next(),o.done)break;u=o.value}var l=u;if(E.is(l,n)){i=!0;break}}if(!i)throw new TypeError("Property "+t+" of "+e.type+" expected node to be of a type "+(0,v.default)(r)+" but instead got "+(0,v.default)(n&&n.type))}for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];return e.oneOfNodeTypes=r,e}function l(){function e(e,t,n){for(var i=!1,a=r,o=Array.isArray(a),u=0,a=o?a:(0,h.default)(a);;){var l;if(o){if(u>=a.length)break;l=a[u++]}else{if(u=a.next(),u.done)break;l=u.value}var c=l;if(s(n)===c||E.is(c,n)){i=!0;break}}if(!i)throw new TypeError("Property "+t+" of "+e.type+" expected node to be of a type "+(0,v.default)(r)+" but instead got "+(0,v.default)(n&&n.type))}for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];return e.oneOfNodeOrValueTypes=r,e}function c(e){function t(t,r,n){var i=s(n)===e;if(!i)throw new TypeError("Property "+r+" expected type of "+e+" but got "+s(n))}return t.type=e,t}function f(){function e(){for(var e=r,t=Array.isArray(e),n=0,e=t?e:(0,h.default)(e);;){var i;if(t){if(n>=e.length)break;i=e[n++]}else{if(n=e.next(),n.done)break;i=n.value}var s=i;s.apply(void 0,arguments)}}for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];return e.chainOf=r,e}function p(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.inherits&&C[t.inherits]||{};t.fields=t.fields||r.fields||{},t.visitor=t.visitor||r.visitor||[],t.aliases=t.aliases||r.aliases||[],t.builder=t.builder||r.builder||t.visitor||[],t.deprecatedAlias&&(D[t.deprecatedAlias]=e);for(var n=t.visitor.concat(t.builder),i=Array.isArray(n),a=0,n=i?n:(0,h.default)(n);;){var o;if(i){if(a>=n.length)break;o=n[a++]}else{if(a=n.next(),a.done)break;o=a.value}var u=o;t.fields[u]=t.fields[u]||{}}for(var l in t.fields){var f=t.fields[l];t.builder.indexOf(l)===-1&&(f.optional=!0),void 0===f.default?f.default=null:f.validate||(f.validate=c(s(f.default)))}x[e]=t.visitor,_[e]=t.builder,S[e]=t.fields,A[e]=t.aliases,C[e]=t}t.__esModule=!0,t.DEPRECATED_KEYS=t.BUILDER_KEYS=t.NODE_FIELDS=t.ALIAS_KEYS=t.VISITOR_KEYS=void 0;var d=r(2),h=i(d),m=r(34),v=i(m),y=r(7),g=i(y);t.assertEach=a,t.assertOneOf=o,t.assertNodeType=u,t.assertNodeOrValueType=l,t.assertValueType=c,t.chain=f,t.default=p;var b=r(1),E=n(b),x=t.VISITOR_KEYS={},A=t.ALIAS_KEYS={},S=t.NODE_FIELDS={},_=t.BUILDER_KEYS={},D=t.DEPRECATED_KEYS={},C={}},function(e,t){"use strict";var r={}.hasOwnProperty;e.exports=function(e,t){return r.call(e,t)}},function(e,t,r){"use strict";var n=r(25),i=r(94);e.exports=r(22)?function(e,t,r){return n.f(e,t,i(1,r))}:function(e,t,r){return e[t]=r,e}},function(e,t,r){"use strict";function n(e,t,r,n){var a=!r;r||(r={});for(var o=-1,u=t.length;++o<u;){var l=t[o],c=n?n(r[l],e[l],l,r,e):void 0;void 0===c&&(c=e[l]),a?s(r,l,c):i(r,l,c)}return r}var i=r(161),s=r(162);e.exports=n},function(e,t){"use strict";e.exports={filename:{type:"filename",description:"filename to use when reading from stdin - this will be used in source-maps, errors etc",default:"unknown",shorthand:"f"},filenameRelative:{hidden:!0,type:"string"},inputSourceMap:{hidden:!0},env:{hidden:!0,default:{}},mode:{description:"",hidden:!0},retainLines:{type:"boolean",default:!1,description:"retain line numbers - will result in really ugly code"},highlightCode:{description:"enable/disable ANSI syntax highlighting of code frames (on by default)",type:"boolean",default:!0},suppressDeprecationMessages:{type:"boolean",default:!1,hidden:!0},presets:{type:"list",description:"",default:[]},plugins:{type:"list",default:[],description:""},ignore:{type:"list",description:"list of glob paths to **not** compile",default:[]},only:{type:"list",description:"list of glob paths to **only** compile"},code:{hidden:!0,default:!0,type:"boolean"},metadata:{hidden:!0,default:!0,type:"boolean"},ast:{hidden:!0,default:!0,type:"boolean"},extends:{type:"string",hidden:!0},comments:{type:"boolean",default:!0,description:"write comments to generated output (true by default)"},shouldPrintComment:{hidden:!0,description:"optional callback to control whether a comment should be inserted, when this is used the comments option is ignored"},wrapPluginVisitorMethod:{hidden:!0,description:"optional callback to wrap all visitor methods"},compact:{type:"booleanString",default:"auto",description:"do not include superfluous whitespace characters and line terminators [true|false|auto]"},minified:{type:"boolean",default:!1,description:"save as much bytes when printing [true|false]"},sourceMap:{alias:"sourceMaps",hidden:!0},sourceMaps:{type:"booleanString",description:"[true|false|inline]",default:!1,shorthand:"s"},sourceMapTarget:{type:"string",description:"set `file` on returned source map"},sourceFileName:{type:"string",description:"set `sources[0]` on returned source map"},sourceRoot:{type:"filename",description:"the root from which all sources are relative"},babelrc:{description:"Whether or not to look up .babelrc and .babelignore files",type:"boolean",default:!0},sourceType:{description:"",default:"module"},auxiliaryCommentBefore:{type:"string",description:"print a comment before any injected non-user code"},auxiliaryCommentAfter:{type:"string",description:"print a comment after any injected non-user code"},resolveModuleSource:{hidden:!0},getModuleId:{hidden:!0},moduleRoot:{type:"filename",description:"optional prefix for the AMD module formatter that will be prepend to the filename on module definitions"},moduleIds:{type:"boolean",default:!1,shorthand:"M",description:"insert an explicit id for modules"},moduleId:{description:"specify a custom name for module ids",type:"string"},passPerPreset:{description:"Whether to spawn a traversal pass per a preset. By default all presets are merged.",type:"boolean",default:!1,hidden:!0},parserOpts:{description:"Options to pass into the parser, or to change parsers (parserOpts.parser)",default:!1},generatorOpts:{description:"Options to pass into the generator, or to change generators (generatorOpts.generator)",default:!1}}},function(e,t,r){(function(n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function s(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var a=r(359),o=s(a),u=r(34),l=s(u),c=r(88),f=s(c),p=r(2),d=s(p),h=r(7),m=s(h),v=r(3),y=s(v),g=r(182),b=i(g),E=r(65),x=s(E),A=r(19),S=i(A),_=r(51),D=r(119),C=s(D),w=r(569),F=s(w),k=r(111),P=s(k),T=r(290),O=s(T),B=r(32),R=s(B),I=r(53),M=s(I),N=r(50),L=s(N),j=r(17),U=s(j),V=function(){function e(t){(0,y.default)(this,e),this.resolvedConfigs=[],this.options=e.createBareOptions(),this.log=t}return e.memoisePluginContainer=function(t,r,n,i){for(var s=e.memoisedPlugins,a=Array.isArray(s),o=0,s=a?s:(0,d.default)(s);;){var u;if(a){if(o>=s.length)break;u=s[o++]}else{if(o=s.next(),o.done)break;u=o.value}var l=u;if(l.container===t)return l.plugin}var c=void 0;if(c="function"==typeof t?t(b):t,"object"===("undefined"==typeof c?"undefined":(0,m.default)(c))){var f=new x.default(c,i);return e.memoisedPlugins.push({container:t,plugin:f}),f}throw new TypeError(S.get("pluginNotObject",r,n,"undefined"==typeof c?"undefined":(0,m.default)(c))+r+n)},e.createBareOptions=function(){var e={};for(var t in R.default){var r=R.default[t];e[t]=(0,P.default)(r.default)}return e},e.normalisePlugin=function(t,r,n,i){if(t=t.__esModule?t.default:t,!(t instanceof x.default)){if("function"!=typeof t&&"object"!==("undefined"==typeof t?"undefined":(0,m.default)(t)))throw new TypeError(S.get("pluginNotFunction",r,n,"undefined"==typeof t?"undefined":(0,m.default)(t)));t=e.memoisePluginContainer(t,r,n,i)}return t.init(r,n),t},e.normalisePlugins=function(t,n,i){return i.map(function(i,s){var a=void 0,o=void 0;if(!i)throw new TypeError("Falsy value found in plugins");Array.isArray(i)?(a=i[0],o=i[1]):a=i;var u="string"==typeof a?a:t+"$"+s;if("string"==typeof a){var l=(0,C.default)("babel-plugin-"+a,n)||(0,C.default)(a,n);if(!l)throw new ReferenceError(S.get("pluginUnknown",a,t,s,n));a=r(179)(l)}return a=e.normalisePlugin(a,t,s,u),[a,o]})},e.prototype.mergeOptions=function(t){var r=this,i=t.options,s=t.extending,a=t.alias,o=t.loc,u=t.dirname;if(a=a||"foreign",i){("object"!==("undefined"==typeof i?"undefined":(0,m.default)(i))||Array.isArray(i))&&this.log.error("Invalid options type for "+a,TypeError);var l=(0,F.default)(i,function(e){if(e instanceof x.default)return e});u=u||n.cwd(),o=o||a;for(var c in l){var p=R.default[c];if(!p&&this.log)if(M.default[c])this.log.error("Using removed Babel 5 option: "+a+"."+c+" - "+M.default[c].message,ReferenceError);else{var d="Unknown option: "+a+"."+c+". Check out http://babeljs.io/docs/usage/options/ for more information about options.",h="A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:\n\nInvalid:\n  `{ presets: [{option: value}] }`\nValid:\n  `{ presets: [['presetName', {option: value}]] }`\n\nFor more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.";this.log.error(d+"\n\n"+h,ReferenceError)}}(0,_.normaliseOptions)(l),l.plugins&&(l.plugins=e.normalisePlugins(o,u,l.plugins)),l.presets&&(l.passPerPreset?l.presets=this.resolvePresets(l.presets,u,function(e,t){r.mergeOptions({options:e,extending:e,alias:t,loc:t,dirname:u})}):(this.mergePresets(l.presets,u),delete l.presets)),i===s?(0,f.default)(s,l):(0,O.default)(s||this.options,l)}},e.prototype.mergePresets=function(e,t){var r=this;this.resolvePresets(e,t,function(e,t){r.mergeOptions({options:e,alias:t,loc:t,dirname:U.default.dirname(t||"")})})},e.prototype.resolvePresets=function(e,t,n){return e.map(function(e){var i=void 0;if(Array.isArray(e)){if(e.length>2)throw new Error("Unexpected extra options "+(0,l.default)(e.slice(2))+" passed to preset.");var s=e;e=s[0],i=s[1]}var a=void 0;try{if("string"==typeof e){if(a=(0,C.default)("babel-preset-"+e,t)||(0,C.default)(e,t),!a){var u=e.match(/^(@[^\/]+)\/(.+)$/);if(u){var c=u[1],f=u[2];e=c+"/babel-preset-"+f,a=(0,C.default)(e,t)}}if(!a)throw new Error("Couldn't find preset "+(0,l.default)(e)+" relative to directory "+(0,l.default)(t));e=r(179)(a)}if("object"===("undefined"==typeof e?"undefined":(0,m.default)(e))&&e.__esModule)if(e.default)e=e.default;else{var p=e,d=(p.__esModule,(0,o.default)(p,["__esModule"]));e=d}if("object"===("undefined"==typeof e?"undefined":(0,m.default)(e))&&e.buildPreset&&(e=e.buildPreset),"function"!=typeof e&&void 0!==i)throw new Error("Options "+(0,l.default)(i)+" passed to "+(a||"a preset")+" which does not accept options.");if("function"==typeof e&&(e=e(b,i)),"object"!==("undefined"==typeof e?"undefined":(0,m.default)(e)))throw new Error("Unsupported preset format: "+e+".");n&&n(e,a)}catch(e){throw (a&&(e.message+=" (While processing preset: "+(0,l.default)(a)+")"), e)}return e});},e.prototype.normaliseOptions=function(){var e=this.options;for(var t in R.default){var r=R.default[t],n=e[t];!n&&r.optional||(r.alias?e[r.alias]=e[r.alias]||n:e[t]=n)}},e.prototype.init=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=(0,L.default)(e,this.log),r=Array.isArray(t),n=0,t=r?t:(0,d.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;this.mergeOptions(s)}return this.normaliseOptions(e),this.options},e;}();t.default=V,V.memoisedPlugins=[],e.exports=t.default}).call(t,r(18))},function(e,t,r){"use strict";e.exports={default:r(398),__esModule:!0}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s),o=r(3),u=i(o),l=r(222),c=n(l),f=r(236),p=i(f),d=r(454),h=i(d),m=r(8),v=i(m),y=r(174),g=i(y),b=r(134),E=i(b),x=r(1),A=n(x),S=r(89),_=(0,p.default)("babel"),D=function(){function e(t,r){(0,u.default)(this,e),this.parent=r,this.hub=t,this.contexts=[],this.data={},this.shouldSkip=!1,this.shouldStop=!1,this.removed=!1,this.state=null,this.opts=null,this.skipKeys=null,this.parentPath=null,this.context=null,this.container=null,this.listKey=null,this.inList=!1,this.parentKey=null,this.key=null,this.node=null,this.scope=null,this.type=null,this.typeAnnotation=null}return e.get=function(t){var r=t.hub,n=t.parentPath,i=t.parent,s=t.container,a=t.listKey,o=t.key;!r&&n&&(r=n.hub),(0,h.default)(i,"To get a node path the parent needs to exist");var u=s[o],l=S.path.get(i)||[];S.path.has(i)||S.path.set(i,l);for(var c=void 0,f=0;f<l.length;f++){var p=l[f];if(p.node===u){c=p;break}}return c||(c=new e(r,i),l.push(c)),c.setup(n,s,a,o),c},e.prototype.getScope=function(e){var t=e;return this.isScope()&&(t=new E.default(this,e)),t},e.prototype.setData=function(e,t){return this.data[e]=t},e.prototype.getData=function(e,t){var r=this.data[e];return!r&&t&&(r=this.data[e]=t),r},e.prototype.buildCodeFrameError=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:SyntaxError;return this.hub.file.buildCodeFrameError(this.node,e,t)},e.prototype.traverse=function(e,t){(0,v.default)(this.node,e,this.scope,t,this)},e.prototype.mark=function(e,t){this.hub.file.metadata.marked.push({type:e,message:t,loc:this.node.loc})},e.prototype.set=function(e,t){A.validate(this.node,e,t),this.node[e]=t},e.prototype.getPathLocation=function(){var e=[],t=this;do{var r=t.key;t.inList&&(r=t.listKey+"["+r+"]"),e.unshift(r)}while(t=t.parentPath);return e.join(".")},e.prototype.debug=function(e){_.enabled&&_(this.getPathLocation()+" "+this.type+": "+e())},e}();t.default=D,(0,g.default)(D.prototype,r(361)),(0,g.default)(D.prototype,r(367)),(0,g.default)(D.prototype,r(375)),(0,g.default)(D.prototype,r(365)),(0,g.default)(D.prototype,r(364)),(0,g.default)(D.prototype,r(370)),(0,g.default)(D.prototype,r(363)),(0,g.default)(D.prototype,r(374)),(0,g.default)(D.prototype,r(373)),(0,g.default)(D.prototype,r(366)),(0,g.default)(D.prototype,r(362));for(var C=function(){if(F){if(k>=w.length)return"break";P=w[k++]}else{if(k=w.next(),k.done)return"break";P=k.value}var e=P,t="is"+e;D.prototype[t]=function(e){return A[t](this.node,e)},D.prototype["assert"+e]=function(r){if(!this[t](r))throw new TypeError("Expected node path of type "+e)}},w=A.TYPES,F=Array.isArray(w),k=0,w=F?w:(0,a.default)(w);;){var P,T=C();if("break"===T)break}var O=function(e){if("_"===e[0])return"continue";A.TYPES.indexOf(e)<0&&A.TYPES.push(e);var t=c[e];D.prototype["is"+e]=function(e){return t.checkPath(this,e)}};for(var B in c){O(B)}e.exports=t.default},function(e,t){"use strict";e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,r){"use strict";var n=r(142),i=r(90);e.exports=function(e){return n(i(e))}},function(e,t,r){"use strict";function n(e,t){var r=s(e,t);return i(r)?r:void 0}var i=r(484),s=r(526);e.exports=n},function(e,t){"use strict";e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children=[],e.webpackPolyfill=1),e}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t,r,n){if(e.selfReference){if(!n.hasBinding(r.name)||n.hasGlobal(r.name)){if(!p.isFunction(t))return;var i=d;t.generator&&(i=h);var s=i({FUNCTION:t,FUNCTION_ID:r,FUNCTION_KEY:n.generateUidIdentifier(r.name)}).expression;s.callee._skipModulesRemap=!0;for(var a=s.callee.body.body[0].params,o=0,l=(0,u.default)(t);o<l;o++)a.push(n.generateUidIdentifier("x"));return s}n.rename(r.name)}t.id=r,n.getProgramParent().references[r.name]=!0}function a(e,t,r){var n={selfAssignment:!1,selfReference:!1,outerDeclar:r.getBindingIdentifier(t),references:[],name:t},i=r.getOwnBinding(t);return i?"param"===i.kind&&(n.selfReference=!0):(n.outerDeclar||r.hasGlobal(t))&&r.traverse(e,m,n),n}t.__esModule=!0,t.default=function(e){var t=e.node,r=e.parent,n=e.scope,i=e.id;if(!t.id){if(!p.isObjectProperty(r)&&!p.isObjectMethod(r,{kind:"method"})||r.computed&&!p.isLiteral(r.key)){if(p.isVariableDeclarator(r)){if(i=r.id,p.isIdentifier(i)){var o=n.parent.getBinding(i.name);if(o&&o.constant&&n.getBinding(i.name)===o)return t.id=i,void(t.id[p.NOT_LOCAL_BINDING]=!0)}}else if(p.isAssignmentExpression(r))i=r.left;else if(!i)return}else i=r.key;var u=void 0;if(i&&p.isLiteral(i))u=i.value;else{if(!i||!p.isIdentifier(i))return;u=i.name}u=p.toBindingIdentifierName(u),i=p.identifier(u),i[p.NOT_LOCAL_BINDING]=!0;var l=a(t,u,n);return s(l,t,i,n)||t}};var o=r(187),u=i(o),l=r(4),c=i(l),f=r(1),p=n(f),d=(0,c.default)("\n  (function (FUNCTION_KEY) {\n    function FUNCTION_ID() {\n      return FUNCTION_KEY.apply(this, arguments);\n    }\n\n    FUNCTION_ID.toString = function () {\n      return FUNCTION_KEY.toString();\n    }\n\n    return FUNCTION_ID;\n  })(FUNCTION)\n"),h=(0,c.default)("\n  (function (FUNCTION_KEY) {\n    function* FUNCTION_ID() {\n      return yield* FUNCTION_KEY.apply(this, arguments);\n    }\n\n    FUNCTION_ID.toString = function () {\n      return FUNCTION_KEY.toString();\n    };\n\n    return FUNCTION_ID;\n  })(FUNCTION)\n"),m={"ReferencedIdentifier|BindingIdentifier":function(e,t){if(e.node.name===t.name){var r=e.scope.getBindingIdentifier(t.name);r===t.outerDeclar&&(t.selfReference=!0,e.stop())}}};e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(354),s=n(i),a=r(9),o=n(a),u=r(7),l=n(u);t.default=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":(0,l.default)(t)));e.prototype=(0,o.default)(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(s.default?(0,s.default)(e,t):e.__proto__=t)}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(7),s=n(i);t.default=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":(0,s.default)(t))&&"function"!=typeof t?e:t}},function(e,t,r){"use strict";var n=r(234),i=r(141);e.exports=Object.keys||function(e){return n(e,i)}},function(e,t,r){"use strict";var n=r(16),i=n.Symbol;e.exports=i},function(e,t){"use strict";function r(e,t){return e===t||e!==e&&t!==t}e.exports=r},function(e,t,r){"use strict";function n(e){return a(e)?i(e,!0):s(e)}var i=r(243),s=r(488),a=r(26);e.exports=n},function(e,t,r){"use strict";function n(e){var t=i(e),r=t%1;return t===t?r?t-r:t:0}var i=r(592);e.exports=n},function(e,t){(function(t){e.exports=t}).call(t,{})},function(e,t,r){(function(e){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.File=void 0;var s=r(7),a=i(s),o=r(2),u=i(o),l=r(9),c=i(l),f=r(88),p=i(f),d=r(3),h=i(d),m=r(42),v=i(m),y=r(41),g=i(y),b=r(192),E=i(b),x=r(122),A=n(x),S=r(396),_=i(S),D=r(33),C=i(D),w=r(296),F=i(w),k=r(8),P=i(k),T=r(287),O=i(T),B=r(183),R=i(B),I=r(181),M=i(I),N=r(269),L=i(N),j=r(121),U=i(j),V=r(120),G=i(V),W=r(136),Y=r(123),q=n(Y),K=r(17),H=i(K),J=r(1),X=n(J),z=r(119),$=i(z),Q=r(293),Z=i(Q),ee=r(294),te=i(ee),re=/^#!.*/,ne=[[Z.default],[te.default]],ie={enter:function(e,t){var r=e.node.loc;r&&(t.loc=r,e.stop())}},se=function(t){function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=arguments[1];(0,h.default)(this,n);var i=(0,v.default)(this,t.call(this));return i.pipeline=r,i.log=new U.default(i,e.filename||"unknown"),i.opts=i.initOptions(e),i.parserOpts={sourceType:i.opts.sourceType,sourceFileName:i.opts.filename,plugins:[]},i.pluginVisitors=[],i.pluginPasses=[],i.buildPluginsForOptions(i.opts),i.opts.passPerPreset&&(i.perPresetOpts=[],i.opts.presets.forEach(function(e){var t=(0,p.default)((0,c.default)(i.opts),e);i.perPresetOpts.push(t),i.buildPluginsForOptions(t)})),i.metadata={usedHelpers:[],marked:[],modules:{imports:[],exports:{exported:[],specifiers:[]}}},i.dynamicImportTypes={},i.dynamicImportIds={},i.dynamicImports=[],i.declarations={},i.usedHelpers={},i.path=null,i.ast={},i.code="",i.shebang="",i.hub=new k.Hub(i),i}return(0,g.default)(n,t),n.prototype.getMetadata=function(){for(var e=!1,t=this.ast.program.body,r=Array.isArray(t),n=0,t=r?t:(0,u.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;if(X.isModuleDeclaration(s)){e=!0;break}}e&&this.path.traverse(A,this)},n.prototype.initOptions=function(e){e=new C.default(this.log,this.pipeline).init(e),e.inputSourceMap&&(e.sourceMaps=!0),e.moduleId&&(e.moduleIds=!0),e.basename=H.default.basename(e.filename,H.default.extname(e.filename)),e.ignore=q.arrayify(e.ignore,q.regexify),e.only&&(e.only=q.arrayify(e.only,q.regexify)),(0,L.default)(e,{moduleRoot:e.sourceRoot}),(0,L.default)(e,{sourceRoot:e.moduleRoot}),(0,L.default)(e,{filenameRelative:e.filename});var t=H.default.basename(e.filenameRelative);return(0,L.default)(e,{sourceFileName:t,sourceMapTarget:t}),e},n.prototype.buildPluginsForOptions=function(e){if(Array.isArray(e.plugins)){for(var t=e.plugins.concat(ne),r=[],n=[],i=t,s=Array.isArray(i),a=0,i=s?i:(0,u.default)(i);;){var o;if(s){if(a>=i.length)break;o=i[a++]}else{if(a=i.next(),a.done)break;o=a.value}var l=o,c=l[0],f=l[1];r.push(c.visitor),n.push(new F.default(this,c,f)),c.manipulateOptions&&c.manipulateOptions(e,this.parserOpts,this)}this.pluginVisitors.push(r),this.pluginPasses.push(n)}},n.prototype.getModuleName=function(){var e=this.opts;if(!e.moduleIds)return null;if(null!=e.moduleId&&!e.getModuleId)return e.moduleId;var t=e.filenameRelative,r="";if(null!=e.moduleRoot&&(r=e.moduleRoot+"/"),!e.filenameRelative)return r+e.filename.replace(/^\//,"");if(null!=e.sourceRoot){var n=new RegExp("^"+e.sourceRoot+"/?");t=t.replace(n,"")}return t=t.replace(/\.(\w*?)$/,""),r+=t,r=r.replace(/\\/g,"/"),e.getModuleId?e.getModuleId(r)||r:r},n.prototype.resolveModuleSource=function e(t){var e=this.opts.resolveModuleSource;return e&&(t=e(t,this.opts.filename)),t},n.prototype.addImport=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:t,n=e+":"+t,i=this.dynamicImportIds[n];if(!i){e=this.resolveModuleSource(e),i=this.dynamicImportIds[n]=this.scope.generateUidIdentifier(r);var s=[];"*"===t?s.push(X.importNamespaceSpecifier(i)):"default"===t?s.push(X.importDefaultSpecifier(i)):s.push(X.importSpecifier(i,X.identifier(t)));var a=X.importDeclaration(s,X.stringLiteral(e));a._blockHoist=3,this.path.unshiftContainer("body",a)}return i},n.prototype.addHelper=function(e){var t=this.declarations[e];if(t)return t;this.usedHelpers[e]||(this.metadata.usedHelpers.push(e),this.usedHelpers[e]=!0);var r=this.get("helperGenerator"),n=this.get("helpersNamespace");if(r){var i=r(e);if(i)return i}else if(n)return X.memberExpression(n,X.identifier(e));var s=(0,E.default)(e),a=this.declarations[e]=this.scope.generateUidIdentifier(e);return X.isFunctionExpression(s)&&!s.id?(s.body._compact=!0,s._generated=!0,s.id=a,s.type="FunctionDeclaration",this.path.unshiftContainer("body",s)):(s._compact=!0,this.scope.push({id:a,init:s,unique:!0})),a},n.prototype.addTemplateObject=function(e,t,r){var n=r.elements.map(function(e){return e.value}),i=e+"_"+r.elements.length+"_"+n.join(","),s=this.declarations[i];if(s)return s;var a=this.declarations[i]=this.scope.generateUidIdentifier("templateObject"),o=this.addHelper(e),u=X.callExpression(o,[t,r]);return u._compact=!0,this.scope.push({id:a,init:u,_blockHoist:1.9}),a},n.prototype.buildCodeFrameError=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:SyntaxError,n=e&&(e.loc||e._loc),i=new r(t);return n?i.loc=n.start:((0,P.default)(e,ie,this.scope,i),i.message+=" (This is an error on an internal node. Probably an internal error",i.loc&&(i.message+=". Location has been estimated."),i.message+=")"),i},n.prototype.mergeSourceMap=function(e){var t=this.opts.inputSourceMap;if(!t)return e;var r=function(){var r=new O.default.SourceMapConsumer(t),n=new O.default.SourceMapConsumer(e),i=new O.default.SourceMapGenerator({file:r.file,sourceRoot:r.sourceRoot}),s=n.sources[0];r.eachMapping(function(e){var t=n.generatedPositionFor({line:e.generatedLine,column:e.generatedColumn,source:s});null!=t.column&&i.addMapping({source:e.source,original:null==e.source?null:{line:e.originalLine,column:e.originalColumn},generated:t})});var a=i.toJSON();return t.mappings=a.mappings,{v:t}}();return"object"===("undefined"==typeof r?"undefined":(0,a.default)(r))?r.v:void 0},n.prototype.parse=function(t){var n=W.parse,i=this.opts.parserOpts;if(i&&(i=(0,p.default)({},this.parserOpts,i),i.parser)){if("string"==typeof i.parser){var s=H.default.dirname(this.opts.filename)||e.cwd(),a=(0,$.default)(i.parser,s);if(!a)throw new Error("Couldn't find parser "+i.parser+' with "parse" method relative to directory '+s);n=r(178)(a).parse}else n=i.parser;i.parser={parse:function(e){return(0,W.parse)(e,i)}}}this.log.debug("Parse start");var o=n(t,i||this.parserOpts);return this.log.debug("Parse stop"),o},n.prototype._addAst=function(e){this.path=k.NodePath.get({hub:this.hub,parentPath:null,parent:e,container:e,key:"program"}).setContext(),this.scope=this.path.scope,this.ast=e,this.getMetadata()},n.prototype.addAst=function(e){this.log.debug("Start set AST"),this._addAst(e),this.log.debug("End set AST")},n.prototype.transform=function(){for(var e=0;e<this.pluginPasses.length;e++){var t=this.pluginPasses[e];this.call("pre",t),this.log.debug("Start transform traverse");var r=P.default.visitors.merge(this.pluginVisitors[e],t,this.opts.wrapPluginVisitorMethod);(0,P.default)(this.ast,r,this.scope),this.log.debug("End transform traverse"),this.call("post",t)}return this.generate()},n.prototype.wrap=function(t,r){t+="";try{return this.shouldIgnore()?this.makeResult({code:t,ignored:!0}):r()}catch(r){if(r._babel)throw r;r._babel=!0;var n=r.message=this.opts.filename+": "+r.message,i=r.loc;if(i&&(r.codeFrame=(0,M.default)(t,i.line,i.column+1,this.opts),n+="\n"+r.codeFrame),e.browser&&(r.message=n),r.stack){var s=r.stack.replace(r.message,n);r.stack=s}throw r}},n.prototype.addCode=function(e){e=(e||"")+"",e=this.parseInputSourceMap(e),this.code=e},n.prototype.parseCode=function(){this.parseShebang();var e=this.parse(this.code);this.addAst(e)},n.prototype.shouldIgnore=function(){var e=this.opts;return q.shouldIgnore(e.filename,e.ignore,e.only)},n.prototype.call=function(e,t){for(var r=t,n=Array.isArray(r),i=0,r=n?r:(0,u.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s,o=a.plugin,l=o[e];l&&l.call(a,this)}},n.prototype.parseInputSourceMap=function(e){var t=this.opts;if(t.inputSourceMap!==!1){var r=_.default.fromSource(e);r&&(t.inputSourceMap=r.toObject(),e=_.default.removeComments(e))}return e},n.prototype.parseShebang=function(){var e=re.exec(this.code);e&&(this.shebang=e[0],this.code=this.code.replace(re,""))},n.prototype.makeResult=function(e){var t=e.code,r=e.map,n=e.ast,i=e.ignored,s={metadata:null,options:this.opts,ignored:!!i,code:null,ast:null,map:r||null};return this.opts.code&&(s.code=t),this.opts.ast&&(s.ast=n),this.opts.metadata&&(s.metadata=this.metadata),s},n.prototype.generate=function(){var t=this.opts,n=this.ast,i={ast:n};if(!t.code)return this.makeResult(i);var s=R.default;if(t.generatorOpts.generator&&(s=t.generatorOpts.generator,"string"==typeof s)){var a=H.default.dirname(this.opts.filename)||e.cwd(),o=(0,$.default)(s,a);if(!o)throw new Error("Couldn't find generator "+s+' with "print" method relative to directory '+a);s=r(178)(o).print}this.log.debug("Generation start");var u=s(n,t.generatorOpts?(0,p.default)(t,t.generatorOpts):t,this.code);return i.code=u.code,i.map=u.map,this.log.debug("Generation end"),this.shebang&&(i.code=this.shebang+"\n"+i.code),i.map&&(i.map=this.mergeSourceMap(i.map)),"inline"!==t.sourceMaps&&"both"!==t.sourceMaps||(i.code+="\n"+_.default.fromObject(i.map).toComment()),"inline"===t.sourceMaps&&(i.map=null),this.makeResult(i)},n}(G.default);t.default=se,t.File=se}).call(t,r(18))},function(e,t,r){(function(n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function s(e){var t=x[e];return null==t?x[e]=E.default.existsSync(e):t}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments[1],r=e.filename,n=new C(t);return e.babelrc!==!1&&n.findConfigs(r),n.mergeConfig({options:e,alias:"base",dirname:r&&g.default.dirname(r)}),n.configs}t.__esModule=!0;var o=r(88),u=i(o),l=r(3),c=i(l);t.default=a;var f=r(119),p=i(f),d=r(458),h=i(d),m=r(600),v=i(m),y=r(17),g=i(y),b=r(117),E=i(b),x={},A={},S=".babelignore",_=".babelrc",D="package.json",C=function(){function e(t){(0,c.default)(this,e),this.resolvedConfigs=[],this.configs=[],this.log=t}return e.prototype.findConfigs=function(e){if(e){(0,v.default)(e)||(e=g.default.join(n.cwd(),e));for(var t=!1,r=!1;e!==(e=g.default.dirname(e));){if(!t){var i=g.default.join(e,_);s(i)&&(this.addConfig(i),t=!0);var a=g.default.join(e,D);!t&&s(a)&&(t=this.addConfig(a,"babel",JSON))}if(!r){var o=g.default.join(e,S);s(o)&&(this.addIgnoreConfig(o),r=!0)}if(r&&t)return}}},e.prototype.addIgnoreConfig=function(e){var t=E.default.readFileSync(e,"utf8"),r=t.split("\n");r=r.map(function(e){return e.replace(/#(.*?)$/,"").trim()}).filter(function(e){return!!e}),r.length&&this.mergeConfig({options:{ignore:r},alias:e,dirname:g.default.dirname(e)})},e.prototype.addConfig=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:h.default;
+if(this.resolvedConfigs.indexOf(e)>=0)return!1;this.resolvedConfigs.push(e);var n=E.default.readFileSync(e,"utf8"),i=void 0;try{i=A[n]=A[n]||r.parse(n),t&&(i=i[t])}catch(t){throw (t.message=e+": Error while parsing JSON - "+t.message, t)}return this.mergeConfig({options:i,alias:e,dirname:g.default.dirname(e)}),!!i},e.prototype.mergeConfig=function(e){var t=e.options,r=e.alias,i=e.loc,s=e.dirname;if(!t)return!1;if(t=(0,u.default)({},t),s=s||n.cwd(),i=i||r,t.extends){var a=(0,p.default)(t.extends,s);a?this.addConfig(a):this.log&&this.log.error("Couldn't resolve extends clause of "+t.extends+" in "+r),delete t.extends}this.configs.push({options:t,alias:r,loc:i,dirname:s});var o=void 0,l=n.env.BABEL_ENV||"production"||"development";t.env&&(o=t.env[l],delete t.env),this.mergeConfig({options:o,alias:r+".env."+l,dirname:s})},e;}();e.exports=t.default}).call(t,r(18))},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function s(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};for(var t in e){var r=e[t];if(null!=r){var n=l.default[t];if(n&&n.alias&&(n=l.default[n.alias]),n){var i=o[n.type];i&&(r=i(r)),e[t]=r}}}return e}t.__esModule=!0,t.config=void 0,t.normaliseOptions=s;var a=r(52),o=i(a),u=r(32),l=n(u);t.config=l.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){return!!e}function a(e){return f.booleanify(e)}function o(e){return f.list(e)}t.__esModule=!0,t.filename=void 0,t.boolean=s,t.booleanString=a,t.list=o;var u=r(283),l=i(u),c=r(123),f=n(c);t.filename=l.default},function(e,t){"use strict";e.exports={auxiliaryComment:{message:"Use `auxiliaryCommentBefore` or `auxiliaryCommentAfter`"},blacklist:{message:"Put the specific transforms you want in the `plugins` option"},breakConfig:{message:"This is not a necessary option in Babel 6"},experimental:{message:"Put the specific transforms you want in the `plugins` option"},externalHelpers:{message:"Use the `external-helpers` plugin instead. Check out http://babeljs.io/docs/plugins/external-helpers/"},extra:{message:""},jsxPragma:{message:"use the `pragma` option in the `react-jsx` plugin . Check out http://babeljs.io/docs/plugins/transform-react-jsx/"},loose:{message:"Specify the `loose` option for the relevant plugin you are using or use a preset that sets the option."},metadataUsedHelpers:{message:"Not required anymore as this is enabled by default"},modules:{message:"Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules"},nonStandard:{message:"Use the `react-jsx` and `flow-strip-types` plugins to support JSX and Flow. Also check out the react preset http://babeljs.io/docs/plugins/preset-react/"},optional:{message:"Put the specific transforms you want in the `plugins` option"},sourceMapName:{message:"Use the `sourceMapTarget` option"},stage:{message:"Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets"},whitelist:{message:"Put the specific transforms you want in the `plugins` option"}}},function(e,t,r){"use strict";var n=r(411);e.exports=function(e,t,r){if(n(e),void 0===t)return e;switch(r){case 1:return function(r){return e.call(t,r)};case 2:return function(r,n){return e.call(t,r,n)};case 3:return function(r,n,i){return e.call(t,r,n,i)}}return function(){return e.apply(t,arguments)}}},function(e,t){"use strict";e.exports={}},function(e,t,r){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=r(97)("meta"),s=r(24),a=r(29),o=r(25).f,u=0,l=Object.isExtensible||function(){return!0},c=!r(36)(function(){return l(Object.preventExtensions({}))}),f=function(e){o(e,i,{value:{i:"O"+ ++u,w:{}}})},p=function(e,t){if(!s(e))return"symbol"==("undefined"==typeof e?"undefined":n(e))?e:("string"==typeof e?"S":"P")+e;if(!a(e,i)){if(!l(e))return"F";if(!t)return"E";f(e)}return e[i].i},d=function(e,t){if(!a(e,i)){if(!l(e))return!0;if(!t)return!1;f(e)}return e[i].w},h=function(e){return c&&m.NEED&&l(e)&&!a(e,i)&&f(e),e},m=e.exports={KEY:i,NEED:!1,fastKey:p,getWeak:d,onFreeze:h}},function(e,t,r){"use strict";r(434);for(var n=r(14),i=r(30),s=r(55),a=r(11)("toStringTag"),o=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],u=0;u<5;u++){var l=o[u],c=n[l],f=c&&c.prototype;f&&!f[a]&&i(f,a,l),s[l]=s.Array}},function(e,t){"use strict";function r(e,t){for(var r=-1,n=null==e?0:e.length,i=Array(n);++r<n;)i[r]=t(e[r],r,e);return i}e.exports=r},function(e,t,r){"use strict";function n(e){return"function"==typeof e?e:null==e?o:"object"==("undefined"==typeof e?"undefined":i(e))?u(e)?a(e[0],e[1]):s(e):l(e)}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=r(489),a=r(490),o=r(60),u=r(6),l=r(587);e.exports=n},function(e,t){"use strict";function r(e){return e}e.exports=r},function(e,t,r){"use strict";function n(e){return"symbol"==("undefined"==typeof e?"undefined":i(e))||a(e)&&s(e)==o}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=r(15),a=r(13),o="[object Symbol]";e.exports=n},function(e,t,r){"use strict";function n(e){return null==e?"":i(e)}var i=r(165);e.exports=n},function(e,t){"use strict";function r(e,t,r){if(t in e)return e[t];if(3===arguments.length)return r;throw new Error('"'+t+'" is a required argument.')}function n(e){var t=e.match(v);return t?{scheme:t[1],auth:t[2],host:t[3],port:t[4],path:t[5]}:null}function i(e){var t="";return e.scheme&&(t+=e.scheme+":"),t+="//",e.auth&&(t+=e.auth+"@"),e.host&&(t+=e.host),e.port&&(t+=":"+e.port),e.path&&(t+=e.path),t}function s(e){var r=e,s=n(e);if(s){if(!s.path)return e;r=s.path}for(var a,o=t.isAbsolute(r),u=r.split(/\/+/),l=0,c=u.length-1;c>=0;c--)a=u[c],"."===a?u.splice(c,1):".."===a?l++:l>0&&(""===a?(u.splice(c+1,l),l=0):(u.splice(c,2),l--));return r=u.join("/"),""===r&&(r=o?"/":"."),s?(s.path=r,i(s)):r}function a(e,t){""===e&&(e="."),""===t&&(t=".");var r=n(t),a=n(e);if(a&&(e=a.path||"/"),r&&!r.scheme)return a&&(r.scheme=a.scheme),i(r);if(r||t.match(y))return t;if(a&&!a.host&&!a.path)return a.host=t,i(a);var o="/"===t.charAt(0)?t:s(e.replace(/\/+$/,"")+"/"+t);return a?(a.path=o,i(a)):o}function o(e,t){""===e&&(e="."),e=e.replace(/\/$/,"");for(var r=0;0!==t.indexOf(e+"/");){var n=e.lastIndexOf("/");if(n<0)return t;if(e=e.slice(0,n),e.match(/^([^\/]+:\/)?\/*$/))return t;++r}return Array(r+1).join("../")+t.substr(e.length+1)}function u(e){return e}function l(e){return f(e)?"$"+e:e}function c(e){return f(e)?e.slice(1):e}function f(e){if(!e)return!1;var t=e.length;if(t<9)return!1;if(95!==e.charCodeAt(t-1)||95!==e.charCodeAt(t-2)||111!==e.charCodeAt(t-3)||116!==e.charCodeAt(t-4)||111!==e.charCodeAt(t-5)||114!==e.charCodeAt(t-6)||112!==e.charCodeAt(t-7)||95!==e.charCodeAt(t-8)||95!==e.charCodeAt(t-9))return!1;for(var r=t-10;r>=0;r--)if(36!==e.charCodeAt(r))return!1;return!0}function p(e,t,r){var n=e.source-t.source;return 0!==n?n:(n=e.originalLine-t.originalLine,0!==n?n:(n=e.originalColumn-t.originalColumn,0!==n||r?n:(n=e.generatedColumn-t.generatedColumn,0!==n?n:(n=e.generatedLine-t.generatedLine,0!==n?n:e.name-t.name))))}function d(e,t,r){var n=e.generatedLine-t.generatedLine;return 0!==n?n:(n=e.generatedColumn-t.generatedColumn,0!==n||r?n:(n=e.source-t.source,0!==n?n:(n=e.originalLine-t.originalLine,0!==n?n:(n=e.originalColumn-t.originalColumn,0!==n?n:e.name-t.name))))}function h(e,t){return e===t?0:e>t?1:-1}function m(e,t){var r=e.generatedLine-t.generatedLine;return 0!==r?r:(r=e.generatedColumn-t.generatedColumn,0!==r?r:(r=h(e.source,t.source),0!==r?r:(r=e.originalLine-t.originalLine,0!==r?r:(r=e.originalColumn-t.originalColumn,0!==r?r:h(e.name,t.name)))))}t.getArg=r;var v=/^(?:([\w+\-.]+):)?\/\/(?:(\w+:\w+)@)?([\w.]*)(?::(\d+))?(\S*)$/,y=/^data:.+\,.+$/;t.urlParse=n,t.urlGenerate=i,t.normalize=s,t.join=a,t.isAbsolute=function(e){return"/"===e.charAt(0)||!!e.match(v)},t.relative=o;var g=function(){var e=Object.create(null);return!("__proto__"in e)}();t.toSetString=g?u:l,t.fromSetString=g?u:c,t.compareByOriginalPositions=p,t.compareByGeneratedPositionsDeflated=d,t.compareByGeneratedPositionsInflated=m},function(e,t,r){(function(t){"use strict";function n(e,t){if(e===t)return 0;for(var r=e.length,n=t.length,i=0,s=Math.min(r,n);i<s;++i)if(e[i]!==t[i]){r=e[i],n=t[i];break}return r<n?-1:n<r?1:0}function i(e){return t.Buffer&&"function"==typeof t.Buffer.isBuffer?t.Buffer.isBuffer(e):!(null==e||!e._isBuffer)}function s(e){return Object.prototype.toString.call(e)}function a(e){return!i(e)&&("function"==typeof t.ArrayBuffer&&("function"==typeof ArrayBuffer.isView?ArrayBuffer.isView(e):!!e&&(e instanceof DataView||!!(e.buffer&&e.buffer instanceof ArrayBuffer))))}function o(e){if(x.isFunction(e)){if(_)return e.name;var t=e.toString(),r=t.match(C);return r&&r[1]}}function u(e,t){return"string"==typeof e?e.length<t?e:e.slice(0,t):e}function l(e){if(_||!x.isFunction(e))return x.inspect(e);var t=o(e),r=t?": "+t:"";return"[Function"+r+"]"}function c(e){return u(l(e.actual),128)+" "+e.operator+" "+u(l(e.expected),128)}function f(e,t,r,n,i){throw new D.AssertionError({message:r,actual:e,expected:t,operator:n,stackStartFunction:i})}function p(e,t){e||f(e,!0,t,"==",D.ok)}function d(e,t,r,o){if(e===t)return!0;if(i(e)&&i(t))return 0===n(e,t);if(x.isDate(e)&&x.isDate(t))return e.getTime()===t.getTime();if(x.isRegExp(e)&&x.isRegExp(t))return e.source===t.source&&e.global===t.global&&e.multiline===t.multiline&&e.lastIndex===t.lastIndex&&e.ignoreCase===t.ignoreCase;if(null!==e&&"object"===("undefined"==typeof e?"undefined":E(e))||null!==t&&"object"===("undefined"==typeof t?"undefined":E(t))){if(a(e)&&a(t)&&s(e)===s(t)&&!(e instanceof Float32Array||e instanceof Float64Array))return 0===n(new Uint8Array(e.buffer),new Uint8Array(t.buffer));if(i(e)!==i(t))return!1;o=o||{actual:[],expected:[]};var u=o.actual.indexOf(e);return u!==-1&&u===o.expected.indexOf(t)||(o.actual.push(e),o.expected.push(t),m(e,t,r,o))}return r?e===t:e==t}function h(e){return"[object Arguments]"==Object.prototype.toString.call(e)}function m(e,t,r,n){if(null===e||void 0===e||null===t||void 0===t)return!1;if(x.isPrimitive(e)||x.isPrimitive(t))return e===t;if(r&&Object.getPrototypeOf(e)!==Object.getPrototypeOf(t))return!1;var i=h(e),s=h(t);if(i&&!s||!i&&s)return!1;if(i)return e=S.call(e),t=S.call(t),d(e,t,r);var a,o,u=w(e),l=w(t);if(u.length!==l.length)return!1;for(u.sort(),l.sort(),o=u.length-1;o>=0;o--)if(u[o]!==l[o])return!1;for(o=u.length-1;o>=0;o--)if(a=u[o],!d(e[a],t[a],r,n))return!1;return!0}function v(e,t,r){d(e,t,!0)&&f(e,t,r,"notDeepStrictEqual",v)}function y(e,t){if(!e||!t)return!1;if("[object RegExp]"==Object.prototype.toString.call(t))return t.test(e);try{if(e instanceof t)return!0}catch(e){}return!Error.isPrototypeOf(t)&&t.call({},e)===!0}function g(e){var t;try{e()}catch(e){t=e}return t}function b(e,t,r,n){var i;if("function"!=typeof t)throw new TypeError('"block" argument must be a function');"string"==typeof r&&(n=r,r=null),i=g(t),n=(r&&r.name?" ("+r.name+").":".")+(n?" "+n:"."),e&&!i&&f(i,r,"Missing expected exception"+n);var s="string"==typeof n,a=!e&&x.isError(i),o=!e&&i&&!r;if((a&&s&&y(i,r)||o)&&f(i,r,"Got unwanted exception"+n),e&&i&&r&&!y(i,r)||!e&&i)throw i}var E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},x=r(118),A=Object.prototype.hasOwnProperty,S=Array.prototype.slice,_=function(){return"foo"===function(){}.name}(),D=e.exports=p,C=/\s*function\s+([^\(\s]*)\s*/;D.AssertionError=function(e){this.name="AssertionError",this.actual=e.actual,this.expected=e.expected,this.operator=e.operator,e.message?(this.message=e.message,this.generatedMessage=!1):(this.message=c(this),this.generatedMessage=!0);var t=e.stackStartFunction||f;if(Error.captureStackTrace)Error.captureStackTrace(this,t);else{var r=new Error;if(r.stack){var n=r.stack,i=o(t),s=n.indexOf("\n"+i);if(s>=0){var a=n.indexOf("\n",s+1);n=n.substring(a+1)}this.stack=n}}},x.inherits(D.AssertionError,Error),D.fail=f,D.ok=p,D.equal=function(e,t,r){e!=t&&f(e,t,r,"==",D.equal)},D.notEqual=function(e,t,r){e==t&&f(e,t,r,"!=",D.notEqual)},D.deepEqual=function(e,t,r){d(e,t,!1)||f(e,t,r,"deepEqual",D.deepEqual)},D.deepStrictEqual=function(e,t,r){d(e,t,!0)||f(e,t,r,"deepStrictEqual",D.deepStrictEqual)},D.notDeepEqual=function(e,t,r){d(e,t,!1)&&f(e,t,r,"notDeepEqual",D.notDeepEqual)},D.notDeepStrictEqual=v,D.strictEqual=function(e,t,r){e!==t&&f(e,t,r,"===",D.strictEqual)},D.notStrictEqual=function(e,t,r){e===t&&f(e,t,r,"!==",D.notStrictEqual)},D.throws=function(e,t,r){b(!0,e,t,r)},D.doesNotThrow=function(e,t,r){b(!1,e,t,r)},D.ifError=function(e){if(e)throw e};var w=Object.keys||function(e){var t=[];for(var r in e)A.call(e,r)&&t.push(r);return t}}).call(t,function(){return this}())},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s),o=r(3),u=i(o),l=r(42),c=i(l),f=r(41),p=i(f),d=r(33),h=i(d),m=r(19),v=n(m),y=r(120),g=i(y),b=r(8),E=i(b),x=r(174),A=i(x),S=r(111),_=i(S),D=["enter","exit"],C=function(e){function t(r,n){(0,u.default)(this,t);var i=(0,c.default)(this,e.call(this));return i.initialized=!1,i.raw=(0,A.default)({},r),i.key=i.take("name")||n,i.manipulateOptions=i.take("manipulateOptions"),i.post=i.take("post"),i.pre=i.take("pre"),i.visitor=i.normaliseVisitor((0,_.default)(i.take("visitor"))||{}),i}return(0,p.default)(t,e),t.prototype.take=function(e){var t=this.raw[e];return delete this.raw[e],t},t.prototype.chain=function(e,t){if(!e[t])return this[t];if(!this[t])return e[t];var r=[e[t],this[t]];return function(){for(var e=void 0,t=arguments.length,n=Array(t),i=0;i<t;i++)n[i]=arguments[i];for(var s=r,o=Array.isArray(s),u=0,s=o?s:(0,a.default)(s);;){var l;if(o){if(u>=s.length)break;l=s[u++]}else{if(u=s.next(),u.done)break;l=u.value}var c=l;if(c){var f=c.apply(this,n);null!=f&&(e=f)}}return e}},t.prototype.maybeInherit=function(e){var t=this.take("inherits");t&&(t=h.default.normalisePlugin(t,e,"inherits"),this.manipulateOptions=this.chain(t,"manipulateOptions"),this.post=this.chain(t,"post"),this.pre=this.chain(t,"pre"),this.visitor=E.default.visitors.merge([t.visitor,this.visitor]))},t.prototype.init=function(e,t){if(!this.initialized){this.initialized=!0,this.maybeInherit(e);for(var r in this.raw)throw new Error(v.get("pluginInvalidProperty",e,t,r))}},t.prototype.normaliseVisitor=function(e){for(var t=D,r=Array.isArray(t),n=0,t=r?t:(0,a.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;if(e[s])throw new Error("Plugins aren't allowed to specify catch-all enter/exit handlers. Please target individual nodes.")}return E.default.explode(e),e},t}(g.default);t.default=C,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){var t=e.messages;return{visitor:{Scope:function(e){var r=e.scope;for(var n in r.bindings){var i=r.bindings[n];if("const"===i.kind||"module"===i.kind)for(var a=i.constantViolations,o=Array.isArray(a),u=0,a=o?a:(0,s.default)(a);;){var l;if(o){if(u>=a.length)break;l=a[u++]}else{if(u=a.next(),u.done)break;l=u.value}var c=l;throw c.buildCodeFrameError(t.get("readOnly",n))}}}}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("asyncFunctions")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("flow")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types;return{visitor:{ArrowFunctionExpression:function(e,r){if(r.opts.spec){var n=e.node;if(n.shadow)return;n.shadow={this:!1},n.type="FunctionExpression";var i=t.thisExpression();i._forceShadow=e,e.ensureBlock(),e.get("body").unshiftContainer("body",t.expressionStatement(t.callExpression(r.addHelper("newArrowCheck"),[t.thisExpression(),i]))),e.replaceWith(t.callExpression(t.memberExpression(n,t.identifier("bind")),[t.thisExpression()]))}else e.arrowFunctionToShadowed()}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){function t(e,t){for(var n=t.get(e),i=n,a=Array.isArray(i),o=0,i=a?i:(0,s.default)(i);;){var u;if(a){if(o>=i.length)break;u=i[o++]}else{if(o=i.next(),o.done)break;u=o.value}var l=u,c=l.node;if(l.isFunctionDeclaration()){var f=r.variableDeclaration("let",[r.variableDeclarator(c.id,r.toExpression(c))]);f._blockHoist=2,c.id=null,l.replaceWith(f)}}}var r=e.types;return{visitor:{BlockStatement:function(e){var n=e.node,i=e.parent;r.isFunction(i,{body:n})||r.isExportDeclaration(i)||t("body",e)},SwitchCase:function(e){t("consequent",e)}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){return E.isLoop(e.parent)||E.isCatchClause(e.parent)}function a(e){return!!E.isVariableDeclaration(e)&&(!!e[E.BLOCK_SCOPED_SYMBOL]||("let"===e.kind||"const"===e.kind))}function o(e,t,r,n){var i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];if(t||(t=e.node),!E.isFor(r))for(var s=0;s<t.declarations.length;s++){var a=t.declarations[s];a.init=a.init||n.buildUndefinedNode()}if(t[E.BLOCK_SCOPED_SYMBOL]=!0,t.kind="var",i){var o=n.getFunctionParent(),u=e.getBindingIdentifiers();for(var l in u){var c=n.getOwnBinding(l);c&&(c.kind="var"),n.moveBindingTo(l,o)}}}function u(e){return E.isVariableDeclaration(e,{kind:"var"})&&!a(e)}function l(e){return E.isBreakStatement(e)?"break":E.isContinueStatement(e)?"continue":void 0}t.__esModule=!0;var c=r(10),f=i(c),p=r(9),d=i(p),h=r(3),m=i(h);t.default=function(){return{visitor:{VariableDeclaration:function(e,t){var r=e.node,n=e.parent,i=e.scope;if(a(r)&&(o(e,null,n,i,!0),r._tdzThis)){for(var s=[r],u=0;u<r.declarations.length;u++){var l=r.declarations[u];if(l.init){var c=E.assignmentExpression("=",l.id,l.init);c._ignoreBlockScopingTDZ=!0,s.push(E.expressionStatement(c))}l.init=t.addHelper("temporalUndefined")}r._blockHoist=2,e.isCompletionRecord()&&s.push(E.expressionStatement(i.buildUndefinedNode())),e.replaceWithMultiple(s)}},Loop:function(e,t){var r=e.node,n=e.parent,i=e.scope;E.ensureBlock(r);var s=new R(e,e.get("body"),n,i,t),a=s.run();a&&e.replaceWith(a)},CatchClause:function(e,t){var r=e.parent,n=e.scope,i=new R(null,e.get("body"),r,n,t);i.run()},"BlockStatement|SwitchStatement|Program":function(e,t){if(!s(e)){var r=new R(null,e,e.parent,e.scope,t);r.run()}}}}};var v=r(8),y=i(v),g=r(326),b=r(1),E=n(b),x=r(278),A=i(x),S=r(573),_=i(S),D=r(4),C=i(D),w=(0,C.default)('\n  if (typeof RETURN === "object") return RETURN.v;\n'),F=y.default.visitors.merge([{Function:function(e,t){return e.traverse(k,t),e.skip()}},g.visitor]),k=y.default.visitors.merge([{ReferencedIdentifier:function(e,t){var r=t.letReferences[e.node.name];if(r){var n=e.scope.getBindingIdentifier(e.node.name);n&&n!==r||(t.closurify=!0)}}},g.visitor]),P={enter:function(e,t){var r=e.node,n=e.parent;if(e.isForStatement()){if(u(r.init,r)){var i=t.pushDeclar(r.init);1===i.length?r.init=i[0]:r.init=E.sequenceExpression(i)}}else if(e.isFor())u(r.left,r)&&(t.pushDeclar(r.left),r.left=r.left.declarations[0].id);else if(u(r,n))e.replaceWithMultiple(t.pushDeclar(r).map(function(e){return E.expressionStatement(e)}));else if(e.isFunction())return e.skip()}},T={LabeledStatement:function(e,t){var r=e.node;t.innerLabels.push(r.label.name)}},O={enter:function(e,t){if(e.isAssignmentExpression()||e.isUpdateExpression()){var r=e.getBindingIdentifiers();for(var n in r)t.outsideReferences[n]===e.scope.getBindingIdentifier(n)&&(t.reassignments[n]=!0)}}},B={Loop:function(e,t){var r=t.ignoreLabeless;t.ignoreLabeless=!0,e.traverse(B,t),t.ignoreLabeless=r,e.skip()},Function:function(e){e.skip()},SwitchCase:function(e,t){var r=t.inSwitchCase;t.inSwitchCase=!0,e.traverse(B,t),t.inSwitchCase=r,e.skip()},"BreakStatement|ContinueStatement|ReturnStatement":function(e,t){var r=e.node,n=e.parent,i=e.scope;if(!r[this.LOOP_IGNORE]){var s=void 0,a=l(r);if(a){if(r.label){if(t.innerLabels.indexOf(r.label.name)>=0)return;a=a+"|"+r.label.name}else{if(t.ignoreLabeless)return;if(t.inSwitchCase)return;if(E.isBreakStatement(r)&&E.isSwitchCase(n))return}t.hasBreakContinue=!0,t.map[a]=r,s=E.stringLiteral(a)}e.isReturnStatement()&&(t.hasReturn=!0,s=E.objectExpression([E.objectProperty(E.identifier("v"),r.argument||i.buildUndefinedNode())])),s&&(s=E.returnStatement(s),s[this.LOOP_IGNORE]=!0,e.skip(),e.replaceWith(E.inherits(s,r)))}}},R=function(){function e(t,r,n,i,s){(0,m.default)(this,e),this.parent=n,this.scope=i,this.file=s,this.blockPath=r,this.block=r.node,this.outsideLetReferences=(0,d.default)(null),this.hasLetReferences=!1,this.letReferences=(0,d.default)(null),this.body=[],t&&(this.loopParent=t.parent,this.loopLabel=E.isLabeledStatement(this.loopParent)&&this.loopParent.label,this.loopPath=t,this.loop=t.node)}return e.prototype.run=function(){var e=this.block;if(!e._letDone){e._letDone=!0;var t=this.getLetReferences();if(E.isFunction(this.parent)||E.isProgram(this.block))return void this.updateScopeInfo();if(this.hasLetReferences)return t?this.wrapClosure():this.remap(),this.updateScopeInfo(t),this.loopLabel&&!E.isLabeledStatement(this.loopParent)?E.labeledStatement(this.loopLabel,this.loop):void 0}},e.prototype.updateScopeInfo=function(e){var t=this.scope,r=t.getFunctionParent(),n=this.letReferences;for(var i in n){var s=n[i],a=t.getBinding(s.name);a&&("let"!==a.kind&&"const"!==a.kind||(a.kind="var",e?t.removeBinding(s.name):t.moveBindingTo(s.name,r)))}},e.prototype.remap=function(){var e=this.letReferences,t=this.scope;for(var r in e){var n=e[r];(t.parentHasBinding(r)||t.hasGlobal(r))&&(t.hasOwnBinding(r)&&t.rename(n.name),this.blockPath.scope.hasOwnBinding(r)&&this.blockPath.scope.rename(n.name))}},e.prototype.wrapClosure=function(){var e=this.block,t=this.outsideLetReferences;if(this.loop)for(var r in t){var n=t[r];(this.scope.hasGlobal(n.name)||this.scope.parentHasBinding(n.name))&&(delete t[n.name],delete this.letReferences[n.name],this.scope.rename(n.name),this.letReferences[n.name]=n,t[n.name]=n)}this.has=this.checkLoop(),this.hoistVarDeclarations();var i=(0,A.default)(t),s=(0,A.default)(t),a=this.blockPath.isSwitchStatement(),o=E.functionExpression(null,i,E.blockStatement(a?[e]:e.body));o.shadow=!0,this.addContinuations(o);var u=o;this.loop&&(u=this.scope.generateUidIdentifier("loop"),this.loopPath.insertBefore(E.variableDeclaration("var",[E.variableDeclarator(u,o)])));var l=E.callExpression(u,s),c=this.scope.generateUidIdentifier("ret"),f=y.default.hasType(o.body,this.scope,"YieldExpression",E.FUNCTION_TYPES);f&&(o.generator=!0,l=E.yieldExpression(l,!0));var p=y.default.hasType(o.body,this.scope,"AwaitExpression",E.FUNCTION_TYPES);p&&(o.async=!0,l=E.awaitExpression(l)),this.buildClosure(c,l),a?this.blockPath.replaceWithMultiple(this.body):e.body=this.body},e.prototype.buildClosure=function(e,t){var r=this.has;r.hasReturn||r.hasBreakContinue?this.buildHas(e,t):this.body.push(E.expressionStatement(t))},e.prototype.addContinuations=function(e){var t={reassignments:{},outsideReferences:this.outsideLetReferences};this.scope.traverse(e,O,t);for(var r=0;r<e.params.length;r++){var n=e.params[r];if(t.reassignments[n.name]){var i=this.scope.generateUidIdentifier(n.name);e.params[r]=i,this.scope.rename(n.name,i.name,e),e.body.body.push(E.expressionStatement(E.assignmentExpression("=",n,i)))}}},e.prototype.getLetReferences=function(){var e=this,t=this.block,r=[];if(this.loop){var n=this.loop.left||this.loop.init;a(n)&&(r.push(n),(0,_.default)(this.outsideLetReferences,E.getBindingIdentifiers(n)))}var i=function n(i,s){s=s||i.node,(E.isClassDeclaration(s)||E.isFunctionDeclaration(s)||a(s))&&(a(s)&&o(i,s,t,e.scope),r=r.concat(s.declarations||s)),E.isLabeledStatement(s)&&n(i.get("body"),s.body)};if(t.body)for(var s=0;s<t.body.length;s++){var u=this.blockPath.get("body")[s];i(u)}if(t.cases)for(var l=0;l<t.cases.length;l++)for(var c=t.cases[l].consequent,f=0;f<c.length;f++){var p=this.blockPath.get("cases")[l],d=c[f];i(p,d)}for(var h=0;h<r.length;h++){var m=r[h],v=E.getBindingIdentifiers(m,!1,!0);(0,_.default)(this.letReferences,v),this.hasLetReferences=!0}if(this.hasLetReferences){var y={letReferences:this.letReferences,closurify:!1,file:this.file};return this.blockPath.traverse(F,y),y.closurify}},e.prototype.checkLoop=function(){var e={hasBreakContinue:!1,ignoreLabeless:!1,inSwitchCase:!1,innerLabels:[],hasReturn:!1,isLoop:!!this.loop,map:{},LOOP_IGNORE:(0,f.default)()};return this.blockPath.traverse(T,e),this.blockPath.traverse(B,e),e},e.prototype.hoistVarDeclarations=function(){this.blockPath.traverse(P,this)},e.prototype.pushDeclar=function(e){var t=[],r=E.getBindingIdentifiers(e);for(var n in r)t.push(E.variableDeclarator(r[n]));this.body.push(E.variableDeclaration(e.kind,t));for(var i=[],s=0;s<e.declarations.length;s++){var a=e.declarations[s];if(a.init){var o=E.assignmentExpression("=",a.id,a.init);i.push(E.inherits(o,a))}}return i},e.prototype.buildHas=function(e,t){var r=this.body;r.push(E.variableDeclaration("var",[E.variableDeclarator(e,t)]));var n=void 0,i=this.has,s=[];if(i.hasReturn&&(n=w({RETURN:e})),i.hasBreakContinue){for(var a in i.map)s.push(E.switchCase(E.stringLiteral(a),[i.map[a]]));if(i.hasReturn&&s.push(E.switchCase(null,[n])),1===s.length){var o=s[0];r.push(E.ifStatement(E.binaryExpression("===",e,o.test),o.consequent[0]))}else{if(this.loop)for(var u=0;u<s.length;u++){var l=s[u].consequent[0];E.isBreakStatement(l)&&!l.label&&(l.label=this.loopLabel=this.loopLabel||this.scope.generateUidIdentifier("loop"))}r.push(E.switchStatement(e,s))}}else i.hasReturn&&r.push(n)},e}();e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(10),s=n(i);t.default=function(e){var t=e.types,r=(0,s.default)();return{visitor:{ExportDefaultDeclaration:function(e){if(e.get("declaration").isClassDeclaration()){var r=e.node,n=r.declaration.id||e.scope.generateUidIdentifier("class");r.declaration.id=n,e.replaceWith(r.declaration),e.insertAfter(t.exportDefaultDeclaration(n))}},ClassDeclaration:function(e){var r=e.node,n=r.id||e.scope.generateUidIdentifier("class");e.replaceWith(t.variableDeclaration("let",[t.variableDeclarator(n,t.toExpression(r))]))},ClassExpression:function(e,t){var n=e.node;if(!n[r]){var i=(0,f.default)(e);if(i&&i!==n)return e.replaceWith(i);n[r]=!0;var s=l.default;t.opts.loose&&(s=o.default),e.replaceWith(new s(e,t.file).run())}}}}};var a=r(327),o=n(a),u=r(205),l=n(u),c=r(40),f=n(c);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){function t(e){return o.isObjectProperty(e)?e.value:o.isObjectMethod(e)?o.functionExpression(null,e.params,e.body,e.generator,e.async):void 0}function r(e,r,i){"get"===r.kind&&"set"===r.kind?n(e,r,i):i.push(o.expressionStatement(o.assignmentExpression("=",o.memberExpression(e,r.key,r.computed||o.isLiteral(r.key)),t(r))))}function n(e,r){var n=(e.objId,e.body),i=e.getMutatorId,s=e.scope,a=!r.computed&&o.isIdentifier(r.key)?o.stringLiteral(r.key.name):r.key,u=s.maybeGenerateMemoised(a);u&&(n.push(o.expressionStatement(o.assignmentExpression("=",u,a))),a=u),n.push.apply(n,l({MUTATOR_MAP_REF:i(),KEY:a,VALUE:t(r),KIND:o.identifier(r.kind)}))}function i(e){for(var t=e.computedProps,i=Array.isArray(t),a=0,t=i?t:(0,s.default)(t);;){var o;if(i){if(a>=t.length)break;o=t[a++]}else{if(a=t.next(),a.done)break;o=a.value}var u=o;"get"===u.kind||"set"===u.kind?n(e,u):r(e.objId,u,e.body)}}function a(e){for(var i=e.objId,a=e.body,u=e.computedProps,l=e.state,c=u,f=Array.isArray(c),p=0,c=f?c:(0,s.default)(c);;){var d;if(f){if(p>=c.length)break;d=c[p++]}else{if(p=c.next(),p.done)break;d=p.value}var h=d,m=o.toComputedKey(h);if("get"===h.kind||"set"===h.kind)n(e,h);else if(o.isStringLiteral(m,{value:"__proto__"}))r(i,h,a);else{if(1===u.length)return o.callExpression(l.addHelper("defineProperty"),[e.initPropExpression,m,t(h)]);a.push(o.expressionStatement(o.callExpression(l.addHelper("defineProperty"),[i,m,t(h)])))}}}var o=e.types,u=e.template,l=u("\n    MUTATOR_MAP_REF[KEY] = MUTATOR_MAP_REF[KEY] || {};\n    MUTATOR_MAP_REF[KEY].KIND = VALUE;\n  ");return{visitor:{ObjectExpression:{exit:function(e,t){for(var r=e.node,n=e.parent,u=e.scope,l=!1,c=r.properties,f=Array.isArray(c),p=0,c=f?c:(0,s.default)(c);;){var d;if(f){if(p>=c.length)break;d=c[p++]}else{if(p=c.next(),p.done)break;d=p.value}var h=d;if(l=h.computed===!0)break}if(l){for(var m=[],v=[],y=!1,g=r.properties,b=Array.isArray(g),E=0,g=b?g:(0,s.default)(g);;){var x;if(b){if(E>=g.length)break;x=g[E++]}else{if(E=g.next(),E.done)break;x=E.value}var A=x;A.computed&&(y=!0),y?v.push(A):m.push(A)}var S=u.generateUidIdentifierBasedOnNode(n),_=o.objectExpression(m),D=[];D.push(o.variableDeclaration("var",[o.variableDeclarator(S,_)]));var C=a;t.opts.loose&&(C=i);var w=void 0,F=function(){return w||(w=u.generateUidIdentifier("mutatorMap"),D.push(o.variableDeclaration("var",[o.variableDeclarator(w,o.objectExpression([]))]))),w},k=C({scope:u,objId:S,body:D,computedProps:v,initPropExpression:_,getMutatorId:F,state:t});w&&D.push(o.expressionStatement(o.callExpression(t.addHelper("defineEnumerableProperties"),[S,w]))),k?e.replaceWith(k):(D.push(o.expressionStatement(S)),e.replaceWithMultiple(D))}}}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=r(2),o=n(a);t.default=function(e){function t(e){for(var t=e.declarations,r=Array.isArray(t),i=0,t=r?t:(0,o.default)(t);;){var s;if(r){if(i>=t.length)break;s=t[i++]}else{if(i=t.next(),i.done)break;s=i.value}var a=s;if(n.isPattern(a.id))return!0}return!1}function r(e){for(var t=e.elements,r=Array.isArray(t),i=0,t=r?t:(0,o.default)(t);;){var s;if(r){if(i>=t.length)break;s=t[i++]}else{if(i=t.next(),i.done)break;s=i.value}var a=s;if(n.isRestElement(a))return!0}return!1}var n=e.types,i={ReferencedIdentifier:function(e,t){t.bindings[e.node.name]&&(t.deopt=!0,e.stop())}},a=function(){function e(t){(0,s.default)(this,e),this.blockHoist=t.blockHoist,this.operator=t.operator,this.arrays={},this.nodes=t.nodes||[],this.scope=t.scope,this.file=t.file,this.kind=t.kind}return e.prototype.buildVariableAssignment=function(e,t){var r=this.operator;n.isMemberExpression(e)&&(r="=");var i=void 0;return i=r?n.expressionStatement(n.assignmentExpression(r,e,t)):n.variableDeclaration(this.kind,[n.variableDeclarator(e,t)]),i._blockHoist=this.blockHoist,i},e.prototype.buildVariableDeclaration=function(e,t){var r=n.variableDeclaration("var",[n.variableDeclarator(e,t)]);return r._blockHoist=this.blockHoist,r},e.prototype.push=function(e,t){n.isObjectPattern(e)?this.pushObjectPattern(e,t):n.isArrayPattern(e)?this.pushArrayPattern(e,t):n.isAssignmentPattern(e)?this.pushAssignmentPattern(e,t):this.nodes.push(this.buildVariableAssignment(e,t));
+},e.prototype.toArray=function(e,t){return this.file.opts.loose||n.isIdentifier(e)&&this.arrays[e.name]?e:this.scope.toArray(e,t)},e.prototype.pushAssignmentPattern=function(e,t){var r=this.scope.generateUidIdentifierBasedOnNode(t),i=n.variableDeclaration("var",[n.variableDeclarator(r,t)]);i._blockHoist=this.blockHoist,this.nodes.push(i);var s=n.conditionalExpression(n.binaryExpression("===",r,n.identifier("undefined")),e.right,r),a=e.left;if(n.isPattern(a)){var o=n.expressionStatement(n.assignmentExpression("=",r,s));o._blockHoist=this.blockHoist,this.nodes.push(o),this.push(a,r)}else this.nodes.push(this.buildVariableAssignment(a,s))},e.prototype.pushObjectRest=function(e,t,r,i){for(var s=[],a=0;a<e.properties.length;a++){var o=e.properties[a];if(a>=i)break;if(!n.isRestProperty(o)){var u=o.key;n.isIdentifier(u)&&!o.computed&&(u=n.stringLiteral(o.key.name)),s.push(u)}}s=n.arrayExpression(s);var l=n.callExpression(this.file.addHelper("objectWithoutProperties"),[t,s]);this.nodes.push(this.buildVariableAssignment(r.argument,l))},e.prototype.pushObjectProperty=function(e,t){n.isLiteral(e.key)&&(e.computed=!0);var r=e.value,i=n.memberExpression(t,e.key,e.computed);n.isPattern(r)?this.push(r,i):this.nodes.push(this.buildVariableAssignment(r,i))},e.prototype.pushObjectPattern=function(e,t){if(e.properties.length||this.nodes.push(n.expressionStatement(n.callExpression(this.file.addHelper("objectDestructuringEmpty"),[t]))),e.properties.length>1&&!this.scope.isStatic(t)){var r=this.scope.generateUidIdentifierBasedOnNode(t);this.nodes.push(this.buildVariableDeclaration(r,t)),t=r}for(var i=0;i<e.properties.length;i++){var s=e.properties[i];n.isRestProperty(s)?this.pushObjectRest(e,t,s,i):this.pushObjectProperty(s,t)}},e.prototype.canUnpackArrayPattern=function(e,t){if(!n.isArrayExpression(t))return!1;if(!(e.elements.length>t.elements.length)){if(e.elements.length<t.elements.length&&!r(e))return!1;for(var s=e.elements,a=Array.isArray(s),u=0,s=a?s:(0,o.default)(s);;){var l;if(a){if(u>=s.length)break;l=s[u++]}else{if(u=s.next(),u.done)break;l=u.value}var c=l;if(!c)return!1;if(n.isMemberExpression(c))return!1}for(var f=t.elements,p=Array.isArray(f),d=0,f=p?f:(0,o.default)(f);;){var h;if(p){if(d>=f.length)break;h=f[d++]}else{if(d=f.next(),d.done)break;h=d.value}var m=h;if(n.isSpreadElement(m))return!1;if(n.isCallExpression(m))return!1;if(n.isMemberExpression(m))return!1}var v=n.getBindingIdentifiers(e),y={deopt:!1,bindings:v};return this.scope.traverse(t,i,y),!y.deopt}},e.prototype.pushUnpackedArrayPattern=function(e,t){for(var r=0;r<e.elements.length;r++){var i=e.elements[r];n.isRestElement(i)?this.push(i.argument,n.arrayExpression(t.elements.slice(r))):this.push(i,t.elements[r])}},e.prototype.pushArrayPattern=function(e,t){if(e.elements){if(this.canUnpackArrayPattern(e,t))return this.pushUnpackedArrayPattern(e,t);var i=!r(e)&&e.elements.length,s=this.toArray(t,i);n.isIdentifier(s)?t=s:(t=this.scope.generateUidIdentifierBasedOnNode(t),this.arrays[t.name]=!0,this.nodes.push(this.buildVariableDeclaration(t,s)));for(var a=0;a<e.elements.length;a++){var o=e.elements[a];if(o){var u=void 0;n.isRestElement(o)?(u=this.toArray(t),a>0&&(u=n.callExpression(n.memberExpression(u,n.identifier("slice")),[n.numericLiteral(a)])),o=o.argument):u=n.memberExpression(t,n.numericLiteral(a),!0),this.push(o,u)}}}},e.prototype.init=function(e,t){if(!n.isArrayExpression(t)&&!n.isMemberExpression(t)){var r=this.scope.maybeGenerateMemoised(t,!0);r&&(this.nodes.push(this.buildVariableDeclaration(r,t)),t=r)}return this.push(e,t),this.nodes},e}();return{visitor:{ExportNamedDeclaration:function(e){var r=e.get("declaration");if(r.isVariableDeclaration()&&t(r.node)){var i=[];for(var s in e.getOuterBindingIdentifiers(e)){var a=n.identifier(s);i.push(n.exportSpecifier(a,a))}e.replaceWith(r.node),e.insertAfter(n.exportNamedDeclaration(null,i))}},ForXStatement:function(e,t){var r=e.node,i=e.scope,s=r.left;if(n.isPattern(s)){var o=i.generateUidIdentifier("ref");return r.left=n.variableDeclaration("var",[n.variableDeclarator(o)]),e.ensureBlock(),void r.body.body.unshift(n.variableDeclaration("var",[n.variableDeclarator(s,o)]))}if(n.isVariableDeclaration(s)){var u=s.declarations[0].id;if(n.isPattern(u)){var l=i.generateUidIdentifier("ref");r.left=n.variableDeclaration(s.kind,[n.variableDeclarator(l,null)]);var c=[],f=new a({kind:s.kind,file:t,scope:i,nodes:c});f.init(u,l),e.ensureBlock();var p=r.body;p.body=c.concat(p.body)}}},CatchClause:function(e,t){var r=e.node,i=e.scope,s=r.param;if(n.isPattern(s)){var o=i.generateUidIdentifier("ref");r.param=o;var u=[],l=new a({kind:"let",file:t,scope:i,nodes:u});l.init(s,o),r.body.body=u.concat(r.body.body)}},AssignmentExpression:function(e,t){var r=e.node,i=e.scope;if(n.isPattern(r.left)){var s=[],o=new a({operator:r.operator,file:t,scope:i,nodes:s}),u=void 0;!e.isCompletionRecord()&&e.parentPath.isExpressionStatement()||(u=i.generateUidIdentifierBasedOnNode(r.right,"ref"),s.push(n.variableDeclaration("var",[n.variableDeclarator(u,r.right)])),n.isArrayExpression(r.right)&&(o.arrays[u.name]=!0)),o.init(r.left,u||r.right),u&&s.push(n.expressionStatement(u)),e.replaceWithMultiple(s)}},VariableDeclaration:function(e,r){var i=e.node,s=e.scope,u=e.parent;if(!n.isForXStatement(u)&&u&&e.container&&t(i)){for(var l=[],c=void 0,f=0;f<i.declarations.length;f++){c=i.declarations[f];var p=c.init,d=c.id,h=new a({blockHoist:i._blockHoist,nodes:l,scope:s,kind:i.kind,file:r});n.isPattern(d)?(h.init(d,p),+f!==i.declarations.length-1&&n.inherits(l[l.length-1],c)):l.push(n.inherits(h.buildVariableAssignment(c.id,c.init),c))}for(var m=[],v=l,y=Array.isArray(v),g=0,v=y?v:(0,o.default)(v);;){var b;if(y){if(g>=v.length)break;b=v[g++]}else{if(g=v.next(),g.done)break;b=g.value}var E=b,x=m[m.length-1];if(x&&n.isVariableDeclaration(x)&&n.isVariableDeclaration(E)&&x.kind===E.kind){var A;(A=x.declarations).push.apply(A,E.declarations)}else m.push(E)}for(var S=m,_=Array.isArray(S),D=0,S=_?S:(0,o.default)(S);;){var C;if(_){if(D>=S.length)break;C=S[D++]}else{if(D=S.next(),D.done)break;C=D.value}var w=C;if(w.declarations)for(var F=w.declarations,k=Array.isArray(F),P=0,F=k?F:(0,o.default)(F);;){var T;if(k){if(P>=F.length)break;T=F[P++]}else{if(P=F.next(),P.done)break;T=P.value}var O=T,B=O.id.name;s.bindings[B]&&(s.bindings[B].kind=w.kind)}}1===m.length?e.replaceWith(m[0]):e.replaceWithMultiple(m)}}}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){function t(e){var t=e.node,r=e.scope,n=[],i=t.right;if(!a.isIdentifier(i)||!r.hasBinding(i.name)){var s=r.generateUidIdentifier("arr");n.push(a.variableDeclaration("var",[a.variableDeclarator(s,i)])),i=s}var u=r.generateUidIdentifier("i"),l=o({BODY:t.body,KEY:u,ARR:i});a.inherits(l,t),a.ensureBlock(l);var c=a.memberExpression(i,u,!0),f=t.left;return a.isVariableDeclaration(f)?(f.declarations[0].init=c,l.body.body.unshift(f)):l.body.body.unshift(a.expressionStatement(a.assignmentExpression("=",f,c))),e.parentPath.isLabeledStatement()&&(l=a.labeledStatement(e.parentPath.node.label,l)),n.push(l),n}function r(e,t){var r=e.node,n=e.scope,s=r.left,o=void 0,l=void 0;if(a.isIdentifier(s)||a.isPattern(s)||a.isMemberExpression(s))l=s;else{if(!a.isVariableDeclaration(s))throw t.buildCodeFrameError(s,i.get("unknownForHead",s.type));l=n.generateUidIdentifier("ref"),o=a.variableDeclaration(s.kind,[a.variableDeclarator(s.declarations[0].id,l)])}var c=n.generateUidIdentifier("iterator"),f=n.generateUidIdentifier("isArray"),p=u({LOOP_OBJECT:c,IS_ARRAY:f,OBJECT:r.right,INDEX:n.generateUidIdentifier("i"),ID:l});return o||p.body.body.shift(),{declar:o,node:p,loop:p}}function n(e,t){var r=e.node,n=e.scope,s=e.parent,o=r.left,u=void 0,c=n.generateUidIdentifier("step"),f=a.memberExpression(c,a.identifier("value"));if(a.isIdentifier(o)||a.isPattern(o)||a.isMemberExpression(o))u=a.expressionStatement(a.assignmentExpression("=",o,f));else{if(!a.isVariableDeclaration(o))throw t.buildCodeFrameError(o,i.get("unknownForHead",o.type));u=a.variableDeclaration(o.kind,[a.variableDeclarator(o.declarations[0].id,f)])}var p=n.generateUidIdentifier("iterator"),d=l({ITERATOR_HAD_ERROR_KEY:n.generateUidIdentifier("didIteratorError"),ITERATOR_COMPLETION:n.generateUidIdentifier("iteratorNormalCompletion"),ITERATOR_ERROR_KEY:n.generateUidIdentifier("iteratorError"),ITERATOR_KEY:p,STEP_KEY:c,OBJECT:r.right,BODY:null}),h=a.isLabeledStatement(s),m=d[3].block.body,v=m[0];return h&&(m[0]=a.labeledStatement(s.label,v)),{replaceParent:h,declar:u,loop:v,node:d}}var i=e.messages,s=e.template,a=e.types,o=s("\n    for (var KEY = 0; KEY < ARR.length; KEY++) BODY;\n  "),u=s("\n    for (var LOOP_OBJECT = OBJECT,\n             IS_ARRAY = Array.isArray(LOOP_OBJECT),\n             INDEX = 0,\n             LOOP_OBJECT = IS_ARRAY ? LOOP_OBJECT : LOOP_OBJECT[Symbol.iterator]();;) {\n      var ID;\n      if (IS_ARRAY) {\n        if (INDEX >= LOOP_OBJECT.length) break;\n        ID = LOOP_OBJECT[INDEX++];\n      } else {\n        INDEX = LOOP_OBJECT.next();\n        if (INDEX.done) break;\n        ID = INDEX.value;\n      }\n    }\n  "),l=s("\n    var ITERATOR_COMPLETION = true;\n    var ITERATOR_HAD_ERROR_KEY = false;\n    var ITERATOR_ERROR_KEY = undefined;\n    try {\n      for (var ITERATOR_KEY = OBJECT[Symbol.iterator](), STEP_KEY; !(ITERATOR_COMPLETION = (STEP_KEY = ITERATOR_KEY.next()).done); ITERATOR_COMPLETION = true) {\n      }\n    } catch (err) {\n      ITERATOR_HAD_ERROR_KEY = true;\n      ITERATOR_ERROR_KEY = err;\n    } finally {\n      try {\n        if (!ITERATOR_COMPLETION && ITERATOR_KEY.return) {\n          ITERATOR_KEY.return();\n        }\n      } finally {\n        if (ITERATOR_HAD_ERROR_KEY) {\n          throw ITERATOR_ERROR_KEY;\n        }\n      }\n    }\n  ");return{visitor:{ForOfStatement:function(e,i){if(e.get("right").isArrayExpression())return e.parentPath.isLabeledStatement()?e.parentPath.replaceWithMultiple(t(e)):e.replaceWithMultiple(t(e));var s=n;i.opts.loose&&(s=r);var o=e.node,u=s(e,i),l=u.declar,c=u.loop,f=c.body;e.ensureBlock(),l&&f.body.push(l),f.body=f.body.concat(o.body.body),a.inherits(c,o),a.inherits(c.body,o.body),u.replaceParent?(e.parentPath.replaceWithMultiple(u.node),e.remove()):e.replaceWithMultiple(u.node)}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){return{visitor:{"ArrowFunctionExpression|FunctionExpression":{exit:function(e){if("value"!==e.key&&!e.parentPath.isObjectProperty()){var t=(0,s.default)(e);t&&e.replaceWith(t)}}},ObjectProperty:function(e){var t=e.get("value");if(t.isFunction()){var r=(0,s.default)(t);r&&t.replaceWith(r)}}}}};var i=r(40),s=n(i);e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{visitor:{NumericLiteral:function(e){var t=e.node;t.extra&&/^0[ob]/i.test(t.extra.raw)&&(t.extra=void 0)},StringLiteral:function(e){var t=e.node;t.extra&&/\\[u]/gi.test(t.extra.raw)&&(t.extra=void 0)}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(20),a=i(s),o=r(9),u=i(o),l=r(2),c=i(l),f=r(10),p=i(f);t.default=function(){var e=(0,p.default)(),t={ReferencedIdentifier:function(e){var t=e.node.name,r=this.remaps[t];if(r&&this.scope.getBinding(t)===e.scope.getBinding(t)){if(e.parentPath.isCallExpression({callee:e.node}))e.replaceWith(y.sequenceExpression([y.numericLiteral(0),r]));else if(e.isJSXIdentifier()&&y.isMemberExpression(r)){var n=r.object,i=r.property;e.replaceWith(y.JSXMemberExpression(y.JSXIdentifier(n.name),y.JSXIdentifier(i.name)))}else e.replaceWith(r);this.requeueInParent(e)}},AssignmentExpression:function(t){var r=t.node;if(!r[e]){var n=t.get("left");if(n.isIdentifier()){var i=n.node.name,s=this.exports[i];if(s&&this.scope.getBinding(i)===t.scope.getBinding(i)){r[e]=!0;for(var a=s,o=Array.isArray(a),u=0,a=o?a:(0,c.default)(a);;){var l;if(o){if(u>=a.length)break;l=a[u++]}else{if(u=a.next(),u.done)break;l=u.value}var f=l;r=A(f,r).expression}t.replaceWith(r),this.requeueInParent(t)}}}},UpdateExpression:function(e){var t=e.get("argument");if(t.isIdentifier()){var r=t.node.name,n=this.exports[r];if(n&&this.scope.getBinding(r)===e.scope.getBinding(r)){var i=y.assignmentExpression(e.node.operator[0]+"=",t.node,y.numericLiteral(1));if(e.parentPath.isExpressionStatement()&&!e.isCompletionRecord()||e.node.prefix)return e.replaceWith(i),void this.requeueInParent(e);var s=[];s.push(i);var a=void 0;a="--"===e.node.operator?"+":"-",s.push(y.binaryExpression(a,t.node,y.numericLiteral(1))),e.replaceWithMultiple(y.sequenceExpression(s))}}}};return{inherits:r(214),visitor:{ThisExpression:function(e,t){this.ranCommonJS||t.opts.allowTopLevelThis===!0||e.findParent(function(e){return!e.is("shadow")&&_.indexOf(e.type)>=0})||e.replaceWith(y.identifier("undefined"))},Program:{exit:function(e){function r(t,r){var n=D[t];if(n)return n;var i=e.scope.generateUidIdentifier((0,d.basename)(t,(0,d.extname)(t))),s=y.variableDeclaration("var",[y.variableDeclarator(i,g(y.stringLiteral(t)).expression)]);return p[t]&&(s.loc=p[t].loc),"number"==typeof r&&r>0&&(s._blockHoist=r),v.push(s),D[t]=i}function n(e,t,r){var n=e[t]||[];e[t]=n.concat(r)}this.ranCommonJS=!0;var i=!!this.opts.strict,s=e.scope;s.rename("module"),s.rename("exports"),s.rename("require");for(var o=!1,l=!1,f=e.get("body"),p=(0,u.default)(null),h=(0,u.default)(null),m=(0,u.default)(null),v=[],_=(0,u.default)(null),D=(0,u.default)(null),C=f,w=Array.isArray(C),F=0,C=w?C:(0,c.default)(C);;){var k;if(w){if(F>=C.length)break;k=C[F++]}else{if(F=C.next(),F.done)break;k=F.value}var P=k;if(P.isExportDeclaration()){o=!0;for(var T=[].concat(P.get("declaration"),P.get("specifiers")),O=T,B=Array.isArray(O),R=0,O=B?O:(0,c.default)(O);;){var I;if(B){if(R>=O.length)break;I=O[R++]}else{if(R=O.next(),R.done)break;I=R.value}var M=I,N=M.getBindingIdentifiers();if(N.__esModule)throw M.buildCodeFrameError('Illegal export "__esModule"')}}if(P.isImportDeclaration()){var L;l=!0;var j=P.node.source.value,U=p[j]||{specifiers:[],maxBlockHoist:0,loc:P.node.loc};(L=U.specifiers).push.apply(L,P.node.specifiers),"number"==typeof P.node._blockHoist&&(U.maxBlockHoist=Math.max(P.node._blockHoist,U.maxBlockHoist)),p[j]=U,P.remove()}else if(P.isExportDefaultDeclaration()){var V=P.get("declaration");if(V.isFunctionDeclaration()){var G=V.node.id,W=y.identifier("default");G?(n(h,G.name,W),v.push(A(W,G)),P.replaceWith(V.node)):(v.push(A(W,y.toExpression(V.node))),P.remove())}else if(V.isClassDeclaration()){var Y=V.node.id,q=y.identifier("default");Y?(n(h,Y.name,q),P.replaceWithMultiple([V.node,A(q,Y)])):(P.replaceWith(A(q,y.toExpression(V.node))),P.parentPath.requeue(P.get("expression.left")))}else P.replaceWith(A(y.identifier("default"),V.node)),P.parentPath.requeue(P.get("expression.left"))}else if(P.isExportNamedDeclaration()){var K=P.get("declaration");if(K.node){if(K.isFunctionDeclaration()){var H=K.node.id;n(h,H.name,H),v.push(A(H,H)),P.replaceWith(K.node)}else if(K.isClassDeclaration()){var J=K.node.id;n(h,J.name,J),P.replaceWithMultiple([K.node,A(J,J)]),m[J.name]=!0}else if(K.isVariableDeclaration()){for(var X=K.get("declarations"),z=X,$=Array.isArray(z),Q=0,z=$?z:(0,c.default)(z);;){var Z;if($){if(Q>=z.length)break;Z=z[Q++]}else{if(Q=z.next(),Q.done)break;Z=Q.value}var ee=Z,te=ee.get("id"),re=ee.get("init");re.node||re.replaceWith(y.identifier("undefined")),te.isIdentifier()&&(n(h,te.node.name,te.node),re.replaceWith(A(te.node,re.node).expression),m[te.node.name]=!0)}P.replaceWith(K.node)}continue}var ne=P.get("specifiers"),ie=[],se=P.node.source;if(se)for(var ae=r(se.value,P.node._blockHoist),oe=ne,ue=Array.isArray(oe),le=0,oe=ue?oe:(0,c.default)(oe);;){var ce;if(ue){if(le>=oe.length)break;ce=oe[le++]}else{if(le=oe.next(),le.done)break;ce=le.value}var fe=ce;fe.isExportNamespaceSpecifier()||fe.isExportDefaultSpecifier()||fe.isExportSpecifier()&&("default"===fe.node.local.name?v.push(E(y.stringLiteral(fe.node.exported.name),y.memberExpression(y.callExpression(this.addHelper("interopRequireDefault"),[ae]),fe.node.local))):v.push(E(y.stringLiteral(fe.node.exported.name),y.memberExpression(ae,fe.node.local))),m[fe.node.exported.name]=!0)}else for(var pe=ne,de=Array.isArray(pe),he=0,pe=de?pe:(0,c.default)(pe);;){var me;if(de){if(he>=pe.length)break;me=pe[he++]}else{if(he=pe.next(),he.done)break;me=he.value}var ve=me;ve.isExportSpecifier()&&(n(h,ve.node.local.name,ve.node.exported),m[ve.node.exported.name]=!0,ie.push(A(ve.node.exported,ve.node.local)))}P.replaceWithMultiple(ie)}else if(P.isExportAllDeclaration()){var ye=S({OBJECT:r(P.node.source.value,P.node._blockHoist)});ye.loc=P.node.loc,v.push(ye),P.remove()}}for(var ge in p){var be=p[ge],T=be.specifiers,Ee=be.maxBlockHoist;if(T.length){for(var xe=r(ge,Ee),Ae=void 0,Se=0;Se<T.length;Se++){var _e=T[Se];if(y.isImportNamespaceSpecifier(_e)){if(i)_[_e.local.name]=xe;else{var De=y.variableDeclaration("var",[y.variableDeclarator(_e.local,y.callExpression(this.addHelper("interopRequireWildcard"),[xe]))]);Ee>0&&(De._blockHoist=Ee),v.push(De)}Ae=_e.local}else y.isImportDefaultSpecifier(_e)&&(T[Se]=y.importSpecifier(_e.local,y.identifier("default")))}for(var Ce=T,we=Array.isArray(Ce),Fe=0,Ce=we?Ce:(0,c.default)(Ce);;){var ke;if(we){if(Fe>=Ce.length)break;ke=Ce[Fe++]}else{if(Fe=Ce.next(),Fe.done)break;ke=Fe.value}var Pe=ke;if(y.isImportSpecifier(Pe)){var Te=xe;if("default"===Pe.imported.name)if(Ae)Te=Ae;else{Te=Ae=e.scope.generateUidIdentifier(xe.name);var Oe=y.variableDeclaration("var",[y.variableDeclarator(Te,y.callExpression(this.addHelper("interopRequireDefault"),[xe]))]);Ee>0&&(Oe._blockHoist=Ee),v.push(Oe)}_[Pe.local.name]=y.memberExpression(Te,y.cloneWithoutLoc(Pe.imported))}}}else{var Be=g(y.stringLiteral(ge));Be.loc=p[ge].loc,v.push(Be)}}if(l&&(0,a.default)(m).length){var Re=y.identifier("undefined");for(var Ie in m)Re=A(y.identifier(Ie),Re).expression;var Me=y.expressionStatement(Re);Me._blockHoist=3,v.unshift(Me)}if(o&&!i){var Ne=b;this.opts.loose&&(Ne=x);var Le=Ne();Le._blockHoist=3,v.unshift(Le)}e.unshiftContainer("body",v),e.traverse(t,{remaps:_,scope:s,exports:h,requeueInParent:function(t){return e.requeue(t)}})}}}}};var d=r(17),h=r(4),m=i(h),v=r(1),y=n(v),g=(0,m.default)("\n  require($0);\n"),b=(0,m.default)('\n  Object.defineProperty(exports, "__esModule", {\n    value: true\n  });\n'),E=(0,m.default)("\n  Object.defineProperty(exports, $0, {\n    enumerable: true,\n    get: function () {\n      return $1;\n    }\n  });\n"),x=(0,m.default)("\n  exports.__esModule = true;\n"),A=(0,m.default)("\n  exports.$0 = $1;\n"),S=(0,m.default)('\n  Object.keys(OBJECT).forEach(function (key) {\n    if (key === "default" || key === "__esModule") return;\n    Object.defineProperty(exports, key, {\n      enumerable: true,\n      get: function () {\n        return OBJECT[key];\n      }\n    });\n  });\n'),_=["FunctionExpression","FunctionDeclaration","ClassProperty","ClassMethod","ObjectMethod"];e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i),a=r(10),o=n(a);t.default=function(e){function t(e,t,r,n,i){var s=new l.default({getObjectRef:n,methodNode:t,methodPath:e,isStatic:!0,scope:r,file:i});s.replace()}var r=e.types,n=(0,o.default)();return{visitor:{Super:function(e){var t=e.findParent(function(e){return e.isObjectExpression()});t&&(t.node[n]=!0)},ObjectExpression:{exit:function(e,i){if(e.node[n]){for(var a=void 0,o=function(){return a=a||e.scope.generateUidIdentifier("obj")},u=e.get("properties"),l=u,c=Array.isArray(l),f=0,l=c?l:(0,s.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var d=p;d.isObjectProperty()&&(d=d.get("value")),t(d,d.node,e.scope,o,i)}a&&(e.scope.push({id:a}),e.replaceWith(r.assignmentExpression("=",a,e.node)))}}}}}};var u=r(191),l=n(u);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s);t.default=function(){return{visitor:o.visitors.merge([{ArrowFunctionExpression:function(e){for(var t=e.get("params"),r=t,n=Array.isArray(r),i=0,r=n?r:(0,a.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var o=s;if(o.isRestElement()||o.isAssignmentPattern()){e.arrowFunctionToShadowed();break}}}},l.visitor,d.visitor,f.visitor])}};var o=r(8),u=r(330),l=n(u),c=r(329),f=n(c),p=r(331),d=n(p);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.default=function(){return{visitor:{ObjectMethod:function(e){var t=e.node;if("method"===t.kind){var r=s.functionExpression(null,t.params,t.body,t.generator,t.async);r.returnType=t.returnType,e.replaceWith(s.objectProperty(t.key,r,t.computed))}},ObjectProperty:function(e){var t=e.node;t.shorthand&&(t.shorthand=!1)}}}};var i=r(1),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){function t(e,t,r){return r.opts.loose&&!i.isIdentifier(e.argument,{name:"arguments"})?e.argument:t.toArray(e.argument,!0)}function r(e){for(var t=0;t<e.length;t++)if(i.isSpreadElement(e[t]))return!0;return!1}function n(e,r,n){function a(){u.length&&(o.push(i.arrayExpression(u)),u=[])}for(var o=[],u=[],l=e,c=Array.isArray(l),f=0,l=c?l:(0,s.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var d=p;i.isSpreadElement(d)?(a(),o.push(t(d,r,n))):u.push(d)}return a(),o}var i=e.types;return{visitor:{ArrayExpression:function(e,t){var s=e.node,a=e.scope,o=s.elements;if(r(o)){var u=n(o,a,t),l=u.shift();i.isArrayExpression(l)||(u.unshift(l),l=i.arrayExpression([])),e.replaceWith(i.callExpression(i.memberExpression(l,i.identifier("concat")),u))}},CallExpression:function(e,t){var s=e.node,a=e.scope,o=s.arguments;if(r(o)){var u=e.get("callee");if(!u.isSuper()){var l=i.identifier("undefined");s.arguments=[];var c=void 0;c=1===o.length&&"arguments"===o[0].argument.name?[o[0].argument]:n(o,a,t);var f=c.shift();c.length?s.arguments.push(i.callExpression(i.memberExpression(f,i.identifier("concat")),c)):s.arguments.push(f);var p=s.callee;if(u.isMemberExpression()){var d=a.maybeGenerateMemoised(p.object);d?(p.object=i.assignmentExpression("=",d,p.object),l=d):l=p.object,i.appendToMemberExpression(p,i.identifier("apply"))}else s.callee=i.memberExpression(s.callee,i.identifier("apply"));i.isSuper(l)&&(l=i.thisExpression()),s.arguments.unshift(l)}}},NewExpression:function(e,t){var s=e.node,a=e.scope,o=s.arguments;if(r(o)){var u=n(o,a,t),l=i.arrayExpression([i.nullLiteral()]);o=i.callExpression(i.memberExpression(l,i.identifier("concat")),u),e.replaceWith(i.newExpression(i.callExpression(i.memberExpression(i.memberExpression(i.memberExpression(i.identifier("Function"),i.identifier("prototype")),i.identifier("bind")),i.identifier("apply")),[s.callee,o]),[]))}}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.default=function(){return{visitor:{RegExpLiteral:function(e){var t=e.node;s.is(t,"y")&&e.replaceWith(o.newExpression(o.identifier("RegExp"),[o.stringLiteral(t.pattern),o.stringLiteral(t.flags)]))}}}};var i=r(190),s=n(i),a=r(1),o=n(a);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){function t(e){return n.isLiteral(e)&&"string"==typeof e.value}function r(e,t){return n.binaryExpression("+",e,t)}var n=e.types;return{visitor:{TaggedTemplateExpression:function(e,t){for(var r=e.node,i=r.quasi,a=[],o=[],u=[],l=i.quasis,c=Array.isArray(l),f=0,l=c?l:(0,s.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var d=p;o.push(n.stringLiteral(d.value.cooked)),u.push(n.stringLiteral(d.value.raw))}o=n.arrayExpression(o),u=n.arrayExpression(u);var h="taggedTemplateLiteral";t.opts.loose&&(h+="Loose");var m=t.file.addTemplateObject(h,o,u);a.push(m),a=a.concat(i.expressions),e.replaceWith(n.callExpression(r.tag,a))},TemplateLiteral:function(e,i){for(var a=[],o=e.get("expressions"),u=e.node.quasis,l=Array.isArray(u),c=0,u=l?u:(0,s.default)(u);;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;a.push(n.stringLiteral(p.value.cooked));var d=o.shift();d&&(!i.opts.spec||d.isBaseType("string")||d.isBaseType("number")?a.push(d.node):a.push(n.callExpression(n.identifier("String"),[d.node])))}if(a=a.filter(function(e){return!n.isLiteral(e,{value:""})}),t(a[0])||t(a[1])||a.unshift(n.stringLiteral("")),a.length>1){for(var h=r(a.shift(),a.shift()),m=a,v=Array.isArray(m),y=0,m=v?m:(0,s.default)(m);;){var g;if(v){if(y>=m.length)break;g=m[y++]}else{if(y=m.next(),y.done)break;g=y.value}var b=g;h=r(h,b)}e.replaceWith(h)}else e.replaceWith(a[0])}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(10),s=n(i);t.default=function(e){var t=e.types,r=(0,s.default)();return{visitor:{Scope:function(e){var t=e.scope;t.getBinding("Symbol")&&t.rename("Symbol")},UnaryExpression:function(e){var n=e.node,i=e.parent;if(!n[r]&&!e.find(function(e){return e.node&&!!e.node._generated})){if(e.parentPath.isBinaryExpression()&&t.EQUALITY_BINARY_OPERATORS.indexOf(i.operator)>=0){var s=e.getOpposite();if(s.isLiteral()&&"symbol"!==s.node.value&&"object"!==s.node.value)return}if("typeof"===n.operator){var a=t.callExpression(this.addHelper("typeof"),[n.argument]);if(e.get("argument").isIdentifier()){var o=t.stringLiteral("undefined"),u=t.unaryExpression("typeof",n.argument);u[r]=!0,e.replaceWith(t.conditionalExpression(t.binaryExpression("===",u,o),o,a))}else e.replaceWith(a)}}}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){return{visitor:{RegExpLiteral:function(e){var t=e.node;u.is(t,"u")&&(t.pattern=(0,a.default)(t.pattern,t.flags),u.pullFlag(t,"u"))}}}};var s=r(607),a=i(s),o=r(190),u=n(o);e.exports=t.default},function(e,t,r){"use strict";e.exports=r(602)},function(e,t,r){"use strict";e.exports={default:r(401),__esModule:!0}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(){s(),a()}function s(){t.path=l=new u.default}function a(){t.scope=c=new u.default}t.__esModule=!0,t.scope=t.path=void 0;var o=r(357),u=n(o);t.clear=i,t.clearPath=s,t.clearScope=a;var l=t.path=new u.default,c=t.scope=new u.default},function(e,t){"use strict";e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t,r){"use strict";var n=r(54),i=r(422),s=r(421),a=r(21),o=r(151),u=r(235),l={},c={},f=e.exports=function(e,t,r,f,p){var d,h,m,v,y=p?function(){return e}:u(e),g=n(r,f,t?2:1),b=0;if("function"!=typeof y)throw TypeError(e+" is not iterable!");if(s(y)){for(d=o(e.length);d>b;b++)if(v=t?g(a(h=e[b])[0],h[1]):g(e[b]),v===l||v===c)return v}else for(m=y.call(e);!(h=m.next()).done;)if(v=i(m,g,h.value,t),v===l||v===c)return v};f.BREAK=l,f.RETURN=c},function(e,t,r){"use strict";var n=r(21),i=r(425),s=r(141),a=r(148)("IE_PROTO"),o=function(){},u="prototype",l=function(){var e,t=r(227)("iframe"),n=s.length,i="<",a=">";for(t.style.display="none",r(420).appendChild(t),t.src="javascript:",e=t.contentWindow.document,e.open(),e.write(i+"script"+a+"document.F=Object"+i+"/script"+a),e.close(),l=e.F;n--;)delete l[u][s[n]];return l()};e.exports=Object.create||function(e,t){var r;return null!==e?(o[u]=n(e),r=new o,o[u]=null,r[a]=e):r=l(),void 0===t?r:i(r,t)}},function(e,t){"use strict";t.f={}.propertyIsEnumerable},function(e,t){"use strict";e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,r){"use strict";var n=r(25).f,i=r(29),s=r(11)("toStringTag");e.exports=function(e,t,r){e&&!i(e=r?e:e.prototype,s)&&n(e,s,{configurable:!0,value:t})}},function(e,t,r){"use strict";var n=r(90);e.exports=function(e){return Object(n(e))}},function(e,t){"use strict";var r=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++r+n).toString(36))}},function(e,t){"use strict"},function(e,t,r){"use strict";function n(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}var i=r(538),s=r(539),a=r(540),o=r(541),u=r(542);n.prototype.clear=i,n.prototype.delete=s,n.prototype.get=a,n.prototype.has=o,n.prototype.set=u,e.exports=n},function(e,t,r){"use strict";function n(e){var t=this.__data__=new i(e);this.size=t.size}var i=r(99),s=r(557),a=r(558),o=r(559),u=r(560),l=r(561);n.prototype.clear=s,n.prototype.delete=a,n.prototype.get=o,n.prototype.has=u,n.prototype.set=l,e.exports=n},function(e,t,r){"use strict";function n(e,t){for(var r=e.length;r--;)if(i(e[r][0],t))return r;return-1}var i=r(45);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){return t===t?a(e,t,r):i(e,s,r)}var i=r(164),s=r(483),a=r(562);e.exports=n},function(e,t,r){"use strict";function n(e,t){return a(s(e,t,i),e+"")}var i=r(60),s=r(552),a=r(555);e.exports=n},function(e,t){"use strict";function r(e){return function(t){return e(t)}}e.exports=r},function(e,t,r){"use strict";function n(e){return i(function(t,r){var n=-1,i=r.length,a=i>1?r[i-1]:void 0,o=i>2?r[2]:void 0;for(a=e.length>3&&"function"==typeof a?(i--,a):void 0,o&&s(r[0],r[1],o)&&(a=i<3?void 0:a,i=1),t=Object(t);++n<i;){var u=r[n];u&&e(t,u,n,a)}return t})}var i=r(103),s=r(171);e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=e.__data__;return i(t)?r["string"==typeof t?"string":"hash"]:r.map}var i=r(536);e.exports=n},function(e,t){"use strict";function r(e){var t=e&&e.constructor,r="function"==typeof t&&t.prototype||n;return e===r}var n=Object.prototype;e.exports=r},function(e,t,r){"use strict";var n=r(38),i=n(Object,"create");e.exports=i},function(e,t){"use strict";function r(e){var t=-1,r=Array(e.size);return e.forEach(function(e){r[++t]=e}),r}e.exports=r},function(e,t,r){"use strict";function n(e){if("string"==typeof e||i(e))return e;var t=e+"";return"0"==t&&1/e==-s?"-0":t}var i=r(61),s=1/0;e.exports=n},function(e,t,r){"use strict";function n(e){return i(e,s)}var i=r(163),s=4;e.exports=n},function(e,t,r){"use strict";e.exports=r(578)},function(e,t,r){"use strict";function n(e,t,r,n){e=s(e)?e:u(e),r=r&&!n?o(r):0;var c=e.length;return r<0&&(r=l(c+r,0)),a(e)?r<=c&&e.indexOf(t,r)>-1:!!c&&i(e,t,r)>-1}var i=r(102),s=r(26),a=r(176),o=r(47),u=r(278),l=Math.max;e.exports=n},function(e,t,r){"use strict";var n=r(480),i=r(13),s=Object.prototype,a=s.hasOwnProperty,o=s.propertyIsEnumerable,u=n(function(){return arguments}())?n:function(e){return i(e)&&a.call(e,"callee")&&!o.call(e,"callee")};e.exports=u},function(e,t,r){(function(e){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=r(16),s=r(591),a="object"==n(t)&&t&&!t.nodeType&&t,o=a&&"object"==n(e)&&e&&!e.nodeType&&e,u=o&&o.exports===a,l=u?i.Buffer:void 0,c=l?l.isBuffer:void 0,f=c||s;e.exports=f}).call(t,r(39)(e))},function(e,t,r){"use strict";function n(e){if(!s(e))return!1;var t=i(e);return t==o||t==u||t==a||t==l;
+}var i=r(15),s=r(12),a="[object AsyncFunction]",o="[object Function]",u="[object GeneratorFunction]",l="[object Proxy]";e.exports=n},98,function(e,t,r){(function(e,n){"use strict";function i(e,r){var n={seen:[],stylize:a};return arguments.length>=3&&(n.depth=arguments[2]),arguments.length>=4&&(n.colors=arguments[3]),m(r)?n.showHidden=r:r&&t._extend(n,r),x(n.showHidden)&&(n.showHidden=!1),x(n.depth)&&(n.depth=2),x(n.colors)&&(n.colors=!1),x(n.customInspect)&&(n.customInspect=!0),n.colors&&(n.stylize=s),u(n,e,n.depth)}function s(e,t){var r=i.styles[t];return r?"["+i.colors[r][0]+"m"+e+"["+i.colors[r][1]+"m":e}function a(e,t){return e}function o(e){var t={};return e.forEach(function(e,r){t[e]=!0}),t}function u(e,r,n){if(e.customInspect&&r&&C(r.inspect)&&r.inspect!==t.inspect&&(!r.constructor||r.constructor.prototype!==r)){var i=r.inspect(n,e);return b(i)||(i=u(e,i,n)),i}var s=l(e,r);if(s)return s;var a=Object.keys(r),m=o(a);if(e.showHidden&&(a=Object.getOwnPropertyNames(r)),D(r)&&(a.indexOf("message")>=0||a.indexOf("description")>=0))return c(r);if(0===a.length){if(C(r)){var v=r.name?": "+r.name:"";return e.stylize("[Function"+v+"]","special")}if(A(r))return e.stylize(RegExp.prototype.toString.call(r),"regexp");if(_(r))return e.stylize(Date.prototype.toString.call(r),"date");if(D(r))return c(r)}var y="",g=!1,E=["{","}"];if(h(r)&&(g=!0,E=["[","]"]),C(r)){var x=r.name?": "+r.name:"";y=" [Function"+x+"]"}if(A(r)&&(y=" "+RegExp.prototype.toString.call(r)),_(r)&&(y=" "+Date.prototype.toUTCString.call(r)),D(r)&&(y=" "+c(r)),0===a.length&&(!g||0==r.length))return E[0]+y+E[1];if(n<0)return A(r)?e.stylize(RegExp.prototype.toString.call(r),"regexp"):e.stylize("[Object]","special");e.seen.push(r);var S;return S=g?f(e,r,n,m,a):a.map(function(t){return p(e,r,n,m,t,g)}),e.seen.pop(),d(S,y,E)}function l(e,t){if(x(t))return e.stylize("undefined","undefined");if(b(t)){var r="'"+JSON.stringify(t).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return e.stylize(r,"string")}return g(t)?e.stylize(""+t,"number"):m(t)?e.stylize(""+t,"boolean"):v(t)?e.stylize("null","null"):void 0}function c(e){return"["+Error.prototype.toString.call(e)+"]"}function f(e,t,r,n,i){for(var s=[],a=0,o=t.length;a<o;++a)T(t,String(a))?s.push(p(e,t,r,n,String(a),!0)):s.push("");return i.forEach(function(i){i.match(/^\d+$/)||s.push(p(e,t,r,n,i,!0))}),s}function p(e,t,r,n,i,s){var a,o,l;if(l=Object.getOwnPropertyDescriptor(t,i)||{value:t[i]},l.get?o=l.set?e.stylize("[Getter/Setter]","special"):e.stylize("[Getter]","special"):l.set&&(o=e.stylize("[Setter]","special")),T(n,i)||(a="["+i+"]"),o||(e.seen.indexOf(l.value)<0?(o=v(r)?u(e,l.value,null):u(e,l.value,r-1),o.indexOf("\n")>-1&&(o=s?o.split("\n").map(function(e){return"  "+e}).join("\n").substr(2):"\n"+o.split("\n").map(function(e){return"   "+e}).join("\n"))):o=e.stylize("[Circular]","special")),x(a)){if(s&&i.match(/^\d+$/))return o;a=JSON.stringify(""+i),a.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(a=a.substr(1,a.length-2),a=e.stylize(a,"name")):(a=a.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),a=e.stylize(a,"string"))}return a+": "+o}function d(e,t,r){var n=0,i=e.reduce(function(e,t){return n++,t.indexOf("\n")>=0&&n++,e+t.replace(/\u001b\[\d\d?m/g,"").length+1},0);return i>60?r[0]+(""===t?"":t+"\n ")+" "+e.join(",\n  ")+" "+r[1]:r[0]+t+" "+e.join(", ")+" "+r[1]}function h(e){return Array.isArray(e)}function m(e){return"boolean"==typeof e}function v(e){return null===e}function y(e){return null==e}function g(e){return"number"==typeof e}function b(e){return"string"==typeof e}function E(e){return"symbol"===("undefined"==typeof e?"undefined":O(e))}function x(e){return void 0===e}function A(e){return S(e)&&"[object RegExp]"===F(e)}function S(e){return"object"===("undefined"==typeof e?"undefined":O(e))&&null!==e}function _(e){return S(e)&&"[object Date]"===F(e)}function D(e){return S(e)&&("[object Error]"===F(e)||e instanceof Error)}function C(e){return"function"==typeof e}function w(e){return null===e||"boolean"==typeof e||"number"==typeof e||"string"==typeof e||"symbol"===("undefined"==typeof e?"undefined":O(e))||"undefined"==typeof e}function F(e){return Object.prototype.toString.call(e)}function k(e){return e<10?"0"+e.toString(10):e.toString(10)}function P(){var e=new Date,t=[k(e.getHours()),k(e.getMinutes()),k(e.getSeconds())].join(":");return[e.getDate(),M[e.getMonth()],t].join(" ")}function T(e,t){return Object.prototype.hasOwnProperty.call(e,t)}var O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},B=/%[sdj%]/g;t.format=function(e){if(!b(e)){for(var t=[],r=0;r<arguments.length;r++)t.push(i(arguments[r]));return t.join(" ")}for(var r=1,n=arguments,s=n.length,a=String(e).replace(B,function(e){if("%%"===e)return"%";if(r>=s)return e;switch(e){case"%s":return String(n[r++]);case"%d":return Number(n[r++]);case"%j":try{return JSON.stringify(n[r++])}catch(e){return"[Circular]"}default:return e}}),o=n[r];r<s;o=n[++r])a+=v(o)||!S(o)?" "+o:" "+i(o);return a},t.deprecate=function(r,i){function s(){if(!a){if(n.throwDeprecation)throw new Error(i);n.traceDeprecation?console.trace(i):console.error(i),a=!0}return r.apply(this,arguments)}if(x(e.process))return function(){return t.deprecate(r,i).apply(this,arguments)};if(n.noDeprecation===!0)return r;var a=!1;return s};var R,I={};t.debuglog=function(e){if(x(R)&&(R=n.env.NODE_DEBUG||""),e=e.toUpperCase(),!I[e])if(new RegExp("\\b"+e+"\\b","i").test(R)){var r=n.pid;I[e]=function(){var n=t.format.apply(t,arguments);console.error("%s %d: %s",e,r,n)}}else I[e]=function(){};return I[e]},t.inspect=i,i.colors={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},i.styles={special:"cyan",number:"yellow",boolean:"yellow",undefined:"grey",null:"bold",string:"green",date:"magenta",regexp:"red"},t.isArray=h,t.isBoolean=m,t.isNull=v,t.isNullOrUndefined=y,t.isNumber=g,t.isString=b,t.isSymbol=E,t.isUndefined=x,t.isRegExp=A,t.isObject=S,t.isDate=_,t.isError=D,t.isFunction=C,t.isPrimitive=w,t.isBuffer=r(621);var M=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];t.log=function(){console.log("%s - %s",P(),t.format.apply(t,arguments))},t.inherits=r(620),t._extend=function(e,t){if(!t||!S(t))return e;for(var r=Object.keys(t),n=r.length;n--;)e[r[n]]=t[r[n]];return e}}).call(t,function(){return this}(),r(18))},function(e,t,r){(function(n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(7),a=i(s);t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.cwd();if("object"===("undefined"==typeof u.default?"undefined":(0,a.default)(u.default)))return null;var r=f[t];if(!r){r=new u.default;var i=c.default.join(t,".babelrc");r.id=i,r.filename=i,r.paths=u.default._nodeModulePaths(t),f[t]=r}try{return u.default._resolveFilename(e,r)}catch(e){return null}};var o=r(117),u=i(o),l=r(17),c=i(l),f={};e.exports=t.default}).call(t,r(18))},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(133),s=n(i),a=r(3),o=n(a),u=r(42),l=n(u),c=r(41),f=n(c),p=function(e){function t(){(0,o.default)(this,t);var r=(0,l.default)(this,e.call(this));return r.dynamicData={},r}return(0,f.default)(t,e),t.prototype.setDynamic=function(e,t){this.dynamicData[e]=t},t.prototype.get=function(t){if(this.has(t))return e.prototype.get.call(this,t);if(Object.prototype.hasOwnProperty.call(this.dynamicData,t)){var r=this.dynamicData[t]();return this.set(t,r),r}},t}(s.default);t.default=p,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=r(236),o=n(a),u=(0,o.default)("babel:verbose"),l=(0,o.default)("babel"),c=[],f=function(){function e(t,r){(0,s.default)(this,e),this.filename=r,this.file=t}return e.prototype._buildMessage=function(e){var t="[BABEL] "+this.filename;return e&&(t+=": "+e),t},e.prototype.warn=function(e){console.warn(this._buildMessage(e))},e.prototype.error=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Error;throw new t(this._buildMessage(e))},e.prototype.deprecate=function(e){this.file.opts&&this.file.opts.suppressDeprecationMessages||(e=this._buildMessage(e),c.indexOf(e)>=0||(c.push(e),console.error(e)))},e.prototype.verbose=function(e){u.enabled&&u(this._buildMessage(e))},e.prototype.debug=function(e){l.enabled&&l(this._buildMessage(e))},e.prototype.deopt=function(e,t){this.debug(t)},e}();t.default=f,e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){var r=e.node,n=r.source?r.source.value:null,i=t.metadata.modules.exports,s=e.get("declaration");if(s.isStatement()){var a=s.getBindingIdentifiers();for(var o in a)i.exported.push(o),i.specifiers.push({kind:"local",local:o,exported:e.isExportDefaultDeclaration()?"default":o})}if(e.isExportNamedDeclaration()&&r.specifiers)for(var l=r.specifiers,f=Array.isArray(l),p=0,l=f?l:(0,u.default)(l);;){var d;if(f){if(p>=l.length)break;d=l[p++]}else{if(p=l.next(),p.done)break;d=p.value}var h=d,m=h.exported.name;i.exported.push(m),c.isExportDefaultSpecifier(h)&&i.specifiers.push({kind:"external",local:m,exported:m,source:n}),c.isExportNamespaceSpecifier(h)&&i.specifiers.push({kind:"external-namespace",exported:m,source:n});var v=h.local;v&&(n&&i.specifiers.push({kind:"external",local:v.name,exported:m,source:n}),n||i.specifiers.push({kind:"local",local:v.name,exported:m}))}e.isExportAllDeclaration()&&i.specifiers.push({kind:"external-all",source:n})}function a(e){e.skip()}t.__esModule=!0,t.ImportDeclaration=t.ModuleDeclaration=void 0;var o=r(2),u=i(o);t.ExportDeclaration=s,t.Scope=a;var l=r(1),c=n(l);t.ModuleDeclaration={enter:function(e,t){var r=e.node;r.source&&(r.source.value=t.resolveModuleSource(r.source.value))}},t.ImportDeclaration={exit:function(e,t){var r=e.node,n=[],i=[];t.metadata.modules.imports.push({source:r.source.value,imported:i,specifiers:n});for(var s=e.get("specifiers"),a=Array.isArray(s),o=0,s=a?s:(0,u.default)(s);;){var l;if(a){if(o>=s.length)break;l=s[o++]}else{if(o=s.next(),o.done)break;l=o.value}var c=l,f=c.node.local.name;if(c.isImportDefaultSpecifier()&&(i.push("default"),n.push({kind:"named",imported:"default",local:f})),c.isImportSpecifier()){var p=c.node.imported.name;i.push(p),n.push({kind:"named",imported:p,local:f})}c.isImportNamespaceSpecifier()&&(i.push("*"),n.push({kind:"namespace",local:f}))}}}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){var r=t||i.EXTENSIONS,n=k.default.extname(e);return(0,S.default)(r,n)}function s(e){return e?Array.isArray(e)?e:"string"==typeof e?e.split(","):[e]:[]}function a(e){if(!e)return new RegExp(/.^/);if(Array.isArray(e)&&(e=new RegExp(e.map(m.default).join("|"),"i")),"string"==typeof e){e=(0,T.default)(e),((0,y.default)(e,"./")||(0,y.default)(e,"*/"))&&(e=e.slice(2)),(0,y.default)(e,"**/")&&(e=e.slice(3));var t=x.default.makeRe(e,{nocase:!0});return new RegExp(t.source.slice(1,-1),"i")}if((0,w.default)(e))return e;throw new TypeError("illegal type for regexify")}function o(e,t){return e?(0,b.default)(e)?o([e],t):(0,D.default)(e)?o(s(e),t):Array.isArray(e)?(t&&(e=e.map(t)),e):[e]:[]}function u(e){return"true"===e||1==e||!("false"===e||0==e||!e)&&e}function l(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments[2];if(e=e.replace(/\\/g,"/"),r){for(var n=r,i=Array.isArray(n),s=0,n=i?n:(0,p.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;if(c(o,e))return!1}return!0}if(t.length)for(var u=t,l=Array.isArray(u),f=0,u=l?u:(0,p.default)(u);;){var d;if(l){if(f>=u.length)break;d=u[f++]}else{if(f=u.next(),f.done)break;d=f.value}var h=d;if(c(h,e))return!0}return!1}function c(e,t){return"function"==typeof e?e(t):e.test(t)}t.__esModule=!0,t.inspect=t.inherits=void 0;var f=r(2),p=n(f),d=r(118);Object.defineProperty(t,"inherits",{enumerable:!0,get:function(){return d.inherits}}),Object.defineProperty(t,"inspect",{enumerable:!0,get:function(){return d.inspect}}),t.canCompile=i,t.list=s,t.regexify=a,t.arrayify=o,t.booleanify=u,t.shouldIgnore=l;var h=r(572),m=n(h),v=r(590),y=n(v),g=r(271),b=n(g),E=r(597),x=n(E),A=r(113),S=n(A),_=r(176),D=n(_),C=r(274),w=n(C),F=r(17),k=n(F),P=r(283),T=n(P);i.EXTENSIONS=[".js",".jsx",".es6",".es"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function s(e){e.variance&&("plus"===e.variance?this.token("+"):"minus"===e.variance&&this.token("-")),this.word(e.name)}function a(e){this.token("..."),this.print(e.argument,e)}function o(e){var t=e.properties;this.token("{"),this.printInnerComments(e),t.length&&(this.space(),this.printList(t,e,{indent:!0,statement:!0}),this.space()),this.token("}")}function u(e){this.printJoin(e.decorators,e),this._method(e)}function l(e){if(this.printJoin(e.decorators,e),e.computed)this.token("["),this.print(e.key,e),this.token("]");else{if(y.isAssignmentPattern(e.value)&&y.isIdentifier(e.key)&&e.key.name===e.value.left.name)return void this.print(e.value,e);if(this.print(e.key,e),e.shorthand&&y.isIdentifier(e.key)&&y.isIdentifier(e.value)&&e.key.name===e.value.name)return}this.token(":"),this.space(),this.print(e.value,e)}function c(e){var t=e.elements,r=t.length;this.token("["),this.printInnerComments(e);for(var n=0;n<t.length;n++){var i=t[n];i?(n>0&&this.space(),this.print(i,e),n<r-1&&this.token(",")):this.token(",")}this.token("]")}function f(e){this.word("/"+e.pattern+"/"+e.flags)}function p(e){this.word(e.value?"true":"false")}function d(){this.word("null")}function h(e){var t=this.getPossibleRaw(e),r=e.value+"";null==t?this.number(r):this.format.minified?this.number(t.length<r.length?t:r):this.number(t)}function m(e,t){var r=this.getPossibleRaw(e);if(!this.format.minified&&null!=r)return void this.token(r);var n={quotes:y.isJSX(t)?"double":this.format.quotes,wrap:!0};this.format.jsonCompatibleStrings&&(n.json=!0);var i=(0,b.default)(e.value,n);return this.token(i)}t.__esModule=!0,t.ArrayPattern=t.ObjectPattern=t.RestProperty=t.SpreadProperty=t.SpreadElement=void 0,t.Identifier=s,t.RestElement=a,t.ObjectExpression=o,t.ObjectMethod=u,t.ObjectProperty=l,t.ArrayExpression=c,t.RegExpLiteral=f,t.BooleanLiteral=p,t.NullLiteral=d,t.NumericLiteral=h,t.StringLiteral=m;var v=r(1),y=i(v),g=r(457),b=n(g);t.SpreadElement=a,t.SpreadProperty=a,t.RestProperty=a,t.ObjectPattern=o,t.ArrayPattern=c},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){var r=e.node,n=r.body;r.async=!1;var i=p.functionExpression(null,[],p.blockStatement(n.body),!0);i.shadow=!0,n.body=[p.returnStatement(p.callExpression(p.callExpression(t,[i]),[]))],r.generator=!1}function a(e,t){var r=e.node,n=e.isFunctionDeclaration(),i=r.id,s=m;e.isArrowFunctionExpression()?e.arrowFunctionToShadowed():!n&&i&&(s=v),r.async=!1,r.generator=!0,r.id=null,n&&(r.type="FunctionExpression");var a=p.callExpression(t,[r]),o=s({NAME:i,REF:e.scope.generateUidIdentifier("ref"),FUNCTION:a,PARAMS:r.params.reduce(function(t,r){return t.done=t.done||p.isAssignmentPattern(r)||p.isRestElement(r),t.done||t.params.push(e.scope.generateUidIdentifier("x")),t},{params:[],done:!1}).params}).expression;if(n){var l=p.variableDeclaration("let",[p.variableDeclarator(p.identifier(i.name),p.callExpression(o,[]))]);l._blockHoist=!0,e.replaceWith(l)}else{var c=o.body.body[1].argument;i||(0,u.default)({node:c,parent:e.parent,scope:e.scope}),!c||c.id||r.params.length?e.replaceWith(p.callExpression(o,[])):e.replaceWith(a)}}t.__esModule=!0,t.default=function(e,t,r){r||(r={wrapAsync:t},t=null),e.traverse(y,{file:t,wrapAwait:r.wrapAwait}),e.isClassMethod()||e.isObjectMethod()?s(e,r.wrapAsync):a(e,r.wrapAsync)};var o=r(40),u=i(o),l=r(4),c=i(l),f=r(1),p=n(f),d=r(317),h=i(d),m=(0,c.default)("\n  (() => {\n    var REF = FUNCTION;\n    return function NAME(PARAMS) {\n      return REF.apply(this, arguments);\n    };\n  })\n"),v=(0,c.default)("\n  (() => {\n    var REF = FUNCTION;\n    function NAME(PARAMS) {\n      return REF.apply(this, arguments);\n    }\n    return NAME;\n  })\n"),y={Function:function(e){return e.isArrowFunctionExpression()&&!e.node.async?void e.arrowFunctionToShadowed():void e.skip()},AwaitExpression:function(e,t){var r=e.node,n=t.wrapAwait;r.type="YieldExpression",n&&(r.argument=p.callExpression(n,[r.argument]))},ForAwaitStatement:function(e,t){var r=t.file,n=t.wrapAwait,i=e.node,s=(0,h.default)(e,{getAsyncIterator:r.addHelper("asyncIterator"),wrapAwait:n}),a=s.declar,o=s.loop,u=o.body;e.ensureBlock(),a&&u.body.push(a),u.body=u.body.concat(i.body.body),p.inherits(o,i),p.inherits(o.body,i.body),s.replaceParent?(e.parentPath.replaceWithMultiple(s.node),e.remove()):e.replaceWithMultiple(s.node)}};e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("decorators")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("jsx")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("trailingFunctionCommas")}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){return{inherits:r(67),visitor:{Function:function(e,t){e.node.async&&!e.node.generator&&(0,s.default)(e,t.file,{wrapAsync:t.addHelper("asyncToGenerator")})}}}};var i=r(125),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){return f.isIdentifier(e)?e.name:e.value.toString()}t.__esModule=!0;var a=r(2),o=i(a),u=r(9),l=i(u);t.default=function(){return{visitor:{ObjectExpression:function(e){for(var t=e.node,r=t.properties.filter(function(e){return!f.isSpreadProperty(e)&&!e.computed}),n=(0,l.default)(null),i=(0,l.default)(null),a=(0,l.default)(null),u=r,c=Array.isArray(u),p=0,u=c?u:(0,o.default)(u);;){var d;if(c){if(p>=u.length)break;d=u[p++]}else{if(p=u.next(),p.done)break;d=p.value}var h=d,m=s(h.key),v=!1;switch(h.kind){case"get":(n[m]||i[m])&&(v=!0),i[m]=!0;break;case"set":(n[m]||a[m])&&(v=!0),a[m]=!0;break;default:(n[m]||i[m]||a[m])&&(v=!0),n[m]=!0}v&&(h.computed=!0,h.key=f.stringLiteral(m))}}}}};var c=r(1),f=n(c);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(9),s=n(i);t.default=function(e){function t(e){if(!e.isCallExpression())return!1;if(!e.get("callee").isIdentifier({name:"require"}))return!1;if(e.scope.getBinding("require"))return!1;var t=e.get("arguments");if(1!==t.length)return!1;var r=t[0];return!!r.isStringLiteral()}var n=e.types,i={ReferencedIdentifier:function(e){var t=e.node,r=e.scope;"exports"!==t.name||r.getBinding("exports")||(this.hasExports=!0),"module"!==t.name||r.getBinding("module")||(this.hasModule=!0)},CallExpression:function(e){t(e)&&(this.bareSources.push(e.node.arguments[0]),e.remove())},VariableDeclarator:function(e){var r=e.get("id");if(r.isIdentifier()){var n=e.get("init");if(t(n)){var i=n.node.arguments[0];this.sourceNames[i.value]=!0,this.sources.push([r.node,i]),e.remove()}}}};return{inherits:r(78),pre:function(){this.sources=[],this.sourceNames=(0,s.default)(null),this.bareSources=[],this.hasExports=!1,this.hasModule=!1},visitor:{Program:{exit:function(e){var t=this;if(!this.ran){this.ran=!0,e.traverse(i,this);var r=this.sources.map(function(e){return e[0]}),s=this.sources.map(function(e){return e[1]});s=s.concat(this.bareSources.filter(function(e){return!t.sourceNames[e.value]}));var a=this.getModuleName();a&&(a=n.stringLiteral(a)),this.hasExports&&(s.unshift(n.stringLiteral("exports")),r.unshift(n.identifier("exports"))),this.hasModule&&(s.unshift(n.stringLiteral("module")),r.unshift(n.identifier("module")));var o=e.node,c=l({PARAMS:r,BODY:o.body});c.expression.body.directives=o.directives,o.directives=[],o.body=[u({MODULE_NAME:a,SOURCES:s,FACTORY:c})]}}}}}};var a=r(4),o=n(a),u=(0,o.default)("\n  define(MODULE_NAME, [SOURCES], FACTORY);\n"),l=(0,o.default)("\n  (function (PARAMS) {\n    BODY;\n  })\n");e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){var t=e.types;return{inherits:r(197),visitor:(0,s.default)({operator:"**",build:function(e,r){return t.callExpression(t.memberExpression(t.identifier("Math"),t.identifier("pow")),[e,r])}})}};var i=r(313),s=n(i);e.exports=t.default},function(e,t,r){"use strict";e.exports={default:r(399),__esModule:!0}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t,r){for(var n=I.scope.get(e.node)||[],i=n,s=Array.isArray(i),a=0,i=s?i:(0,v.default)(i);;){var o;if(s){if(a>=i.length)break;o=i[a++]}else{if(a=i.next(),a.done)break;o=a.value}var u=o;if(u.parent===t&&u.path===e)return u}n.push(r),I.scope.has(e.node)||I.scope.set(e.node,n)}function a(e,t){if(R.isModuleDeclaration(e))if(e.source)a(e.source,t);else if(e.specifiers&&e.specifiers.length)for(var r=e.specifiers,n=Array.isArray(r),i=0,r=n?r:(0,v.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var o=s;a(o,t)}else e.declaration&&a(e.declaration,t);else if(R.isModuleSpecifier(e))a(e.local,t);else if(R.isMemberExpression(e))a(e.object,t),a(e.property,t);else if(R.isIdentifier(e))t.push(e.name);else if(R.isLiteral(e))t.push(e.value);else if(R.isCallExpression(e))a(e.callee,t);else if(R.isObjectExpression(e)||R.isObjectPattern(e))for(var u=e.properties,l=Array.isArray(u),c=0,u=l?u:(0,v.default)(u);;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;a(p.key||p.argument,t)}}t.__esModule=!0;var o=r(20),u=i(o),l=r(9),c=i(l),f=r(133),p=i(f),d=r(3),h=i(d),m=r(2),v=i(m),y=r(113),g=i(y),b=r(276),E=i(b),x=r(376),A=i(x),S=r(8),_=i(S),D=r(269),C=i(D),w=r(19),F=n(w),k=r(223),P=i(k),T=r(451),O=i(T),B=r(1),R=n(B),I=r(89),M=0,N={For:function(e){for(var t=R.FOR_INIT_KEYS,r=Array.isArray(t),n=0,t=r?t:(0,v.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i,a=e.get(s);a.isVar()&&e.scope.getFunctionParent().registerBinding("var",a)}},Declaration:function(e){e.isBlockScoped()||e.isExportDeclaration()&&e.get("declaration").isDeclaration()||e.scope.getFunctionParent().registerDeclaration(e)},ReferencedIdentifier:function(e,t){t.references.push(e)},ForXStatement:function(e,t){var r=e.get("left");(r.isPattern()||r.isIdentifier())&&t.constantViolations.push(r)},ExportDeclaration:{exit:function(e){var t=e.node,r=e.scope,n=t.declaration;if(R.isClassDeclaration(n)||R.isFunctionDeclaration(n)){var i=n.id;if(!i)return;var s=r.getBinding(i.name);s&&s.reference(e)}else if(R.isVariableDeclaration(n))for(var a=n.declarations,o=Array.isArray(a),u=0,a=o?a:(0,v.default)(a);;){var l;if(o){if(u>=a.length)break;l=a[u++]}else{if(u=a.next(),u.done)break;l=u.value}var c=l,f=R.getBindingIdentifiers(c);for(var p in f){var d=r.getBinding(p);d&&d.reference(e)}}}},LabeledStatement:function(e){e.scope.getProgramParent().addGlobal(e.node),e.scope.getBlockParent().registerDeclaration(e)},AssignmentExpression:function(e,t){t.assignments.push(e)},UpdateExpression:function(e,t){t.constantViolations.push(e.get("argument"))},UnaryExpression:function(e,t){"delete"===e.node.operator&&t.constantViolations.push(e.get("argument"))},BlockScoped:function(e){var t=e.scope;t.path===e&&(t=t.parent),t.getBlockParent().registerDeclaration(e)},ClassDeclaration:function(e){var t=e.node.id;if(t){var r=t.name;e.scope.bindings[r]=e.scope.getBinding(r)}},Block:function(e){for(var t=e.get("body"),r=t,n=Array.isArray(r),i=0,r=n?r:(0,v.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;a.isFunctionDeclaration()&&e.scope.getBlockParent().registerDeclaration(a)}}},L=0,j=function(){function e(t,r){if((0,h.default)(this,e),r&&r.block===t.node)return r;var n=s(t,r,this);return n?n:(this.uid=L++,this.parent=r,this.hub=t.hub,this.parentBlock=t.parent,this.block=t.node,this.path=t,void(this.labels=new p.default))}return e.prototype.traverse=function(e,t,r){(0,_.default)(e,t,this,r,this.path)},e.prototype.generateDeclaredUidIdentifier=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"temp",t=this.generateUidIdentifier(e);return this.push({id:t}),t},e.prototype.generateUidIdentifier=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"temp";return R.identifier(this.generateUid(e))},e.prototype.generateUid=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"temp";e=R.toIdentifier(e).replace(/^_+/,"").replace(/[0-9]+$/g,"");var t=void 0,r=0;do t=this._generateUid(e,r),r++;while(this.hasLabel(t)||this.hasBinding(t)||this.hasGlobal(t)||this.hasReference(t));var n=this.getProgramParent();return n.references[t]=!0,n.uids[t]=!0,t},e.prototype._generateUid=function(e,t){var r=e;return t>1&&(r+=t),"_"+r},e.prototype.generateUidIdentifierBasedOnNode=function(e,t){var r=e;R.isAssignmentExpression(e)?r=e.left:R.isVariableDeclarator(e)?r=e.id:(R.isObjectProperty(r)||R.isObjectMethod(r))&&(r=r.key);var n=[];a(r,n);var i=n.join("$");return i=i.replace(/^_/,"")||t||"ref",this.generateUidIdentifier(i.slice(0,20))},e.prototype.isStatic=function(e){if(R.isThisExpression(e)||R.isSuper(e))return!0;if(R.isIdentifier(e)){var t=this.getBinding(e.name);return t?t.constant:this.hasBinding(e.name)}return!1},e.prototype.maybeGenerateMemoised=function(e,t){if(this.isStatic(e))return null;var r=this.generateUidIdentifierBasedOnNode(e);return t||this.push({id:r}),r},e.prototype.checkBlockScopedCollisions=function(e,t,r,n){if("param"!==t&&("hoisted"!==t||"let"!==e.kind)){var i=!1;if(i||(i="let"===t||"let"===e.kind||"const"===e.kind||"module"===e.kind),i||(i="param"===e.kind&&("let"===t||"const"===t)),i)throw this.hub.file.buildCodeFrameError(n,F.get("scopeDuplicateDeclaration",r),TypeError)}},e.prototype.rename=function(e,t,r){var n=this.getBinding(e);if(n)return t=t||this.generateUidIdentifier(e).name,new A.default(n,e,t).rename(r)},e.prototype._renameFromMap=function(e,t,r,n){e[t]&&(e[r]=n,e[t]=null)},e.prototype.dump=function(){var e=(0,E.default)("-",60);console.log(e);var t=this;do{console.log("#",t.block.type);for(var r in t.bindings){var n=t.bindings[r];console.log(" -",r,{constant:n.constant,references:n.references,violations:n.constantViolations.length,kind:n.kind})}}while(t=t.parent);console.log(e)},e.prototype.toArray=function(e,t){var r=this.hub.file;if(R.isIdentifier(e)){var n=this.getBinding(e.name);if(n&&n.constant&&n.path.isGenericType("Array"))return e}if(R.isArrayExpression(e))return e;if(R.isIdentifier(e,{name:"arguments"}))return R.callExpression(R.memberExpression(R.memberExpression(R.memberExpression(R.identifier("Array"),R.identifier("prototype")),R.identifier("slice")),R.identifier("call")),[e]);var i="toArray",s=[e];return t===!0?i="toConsumableArray":t&&(s.push(R.numericLiteral(t)),i="slicedToArray"),R.callExpression(r.addHelper(i),s)},e.prototype.hasLabel=function(e){return!!this.getLabel(e)},e.prototype.getLabel=function(e){return this.labels.get(e)},e.prototype.registerLabel=function(e){this.labels.set(e.node.label.name,e)},e.prototype.registerDeclaration=function(e){if(e.isLabeledStatement())this.registerLabel(e);else if(e.isFunctionDeclaration())this.registerBinding("hoisted",e.get("id"),e);else if(e.isVariableDeclaration())for(var t=e.get("declarations"),r=t,n=Array.isArray(r),i=0,r=n?r:(0,v.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;this.registerBinding(e.node.kind,a)}else if(e.isClassDeclaration())this.registerBinding("let",e);else if(e.isImportDeclaration())for(var o=e.get("specifiers"),u=o,l=Array.isArray(u),c=0,u=l?u:(0,v.default)(u);;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;this.registerBinding("module",p)}else if(e.isExportDeclaration()){var d=e.get("declaration");(d.isClassDeclaration()||d.isFunctionDeclaration()||d.isVariableDeclaration())&&this.registerDeclaration(d)}else this.registerBinding("unknown",e)},e.prototype.buildUndefinedNode=function(){return this.hasBinding("undefined")?R.unaryExpression("void",R.numericLiteral(0),!0):R.identifier("undefined")},e.prototype.registerConstantViolation=function(e){var t=e.getBindingIdentifiers();for(var r in t){var n=this.getBinding(r);n&&n.reassign(e)}},e.prototype.registerBinding=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:t;if(!e)throw new ReferenceError("no `kind`");if(t.isVariableDeclaration())for(var n=t.get("declarations"),i=n,s=Array.isArray(i),a=0,i=s?i:(0,v.default)(i);;){var o;if(s){if(a>=i.length)break;o=i[a++]}else{if(a=i.next(),a.done)break;o=a.value}var u=o;this.registerBinding(e,u)}else{var l=this.getProgramParent(),c=t.getBindingIdentifiers(!0);for(var f in c)for(var p=c[f],d=Array.isArray(p),h=0,p=d?p:(0,v.default)(p);;){var m;if(d){if(h>=p.length)break;m=p[h++]}else{if(h=p.next(),h.done)break;m=h.value}var y=m,g=this.getOwnBinding(f);if(g){if(g.identifier===y)continue;this.checkBlockScopedCollisions(g,e,f,y)}g&&g.path.isFlow()&&(g=null),l.references[f]=!0,this.bindings[f]=new P.default({identifier:y,existing:g,scope:this,path:r,kind:e})}}},e.prototype.addGlobal=function(e){this.globals[e.name]=e},e.prototype.hasUid=function(e){var t=this;do if(t.uids[e])return!0;while(t=t.parent);return!1},e.prototype.hasGlobal=function(e){var t=this;do if(t.globals[e])return!0;while(t=t.parent);return!1},e.prototype.hasReference=function(e){var t=this;do if(t.references[e])return!0;while(t=t.parent);return!1},e.prototype.isPure=function(e,t){if(R.isIdentifier(e)){var r=this.getBinding(e.name);return!!r&&(!t||r.constant)}if(R.isClass(e))return!(e.superClass&&!this.isPure(e.superClass,t))&&this.isPure(e.body,t);if(R.isClassBody(e)){for(var n=e.body,i=Array.isArray(n),s=0,n=i?n:(0,v.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;if(!this.isPure(o,t))return!1}return!0}if(R.isBinary(e))return this.isPure(e.left,t)&&this.isPure(e.right,t);if(R.isArrayExpression(e)){for(var u=e.elements,l=Array.isArray(u),c=0,u=l?u:(0,v.default)(u);;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;if(!this.isPure(p,t))return!1}return!0}if(R.isObjectExpression(e)){for(var d=e.properties,h=Array.isArray(d),m=0,d=h?d:(0,v.default)(d);;){var y;if(h){if(m>=d.length)break;y=d[m++]}else{if(m=d.next(),m.done)break;y=m.value}var g=y;if(!this.isPure(g,t))return!1}return!0}return R.isClassMethod(e)?!(e.computed&&!this.isPure(e.key,t))&&("get"!==e.kind&&"set"!==e.kind):R.isClassProperty(e)||R.isObjectProperty(e)?!(e.computed&&!this.isPure(e.key,t))&&this.isPure(e.value,t):R.isUnaryExpression(e)?this.isPure(e.argument,t):R.isPureish(e);
+},e.prototype.setData=function(e,t){return this.data[e]=t},e.prototype.getData=function(e){var t=this;do{var r=t.data[e];if(null!=r)return r}while(t=t.parent)},e.prototype.removeData=function(e){var t=this;do{var r=t.data[e];null!=r&&(t.data[e]=null)}while(t=t.parent)},e.prototype.init=function(){this.references||this.crawl()},e.prototype.crawl=function(){M++,this._crawl(),M--},e.prototype._crawl=function(){var e=this.path;if(this.references=(0,c.default)(null),this.bindings=(0,c.default)(null),this.globals=(0,c.default)(null),this.uids=(0,c.default)(null),this.data=(0,c.default)(null),e.isLoop())for(var t=R.FOR_INIT_KEYS,r=Array.isArray(t),n=0,t=r?t:(0,v.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i,a=e.get(s);a.isBlockScoped()&&this.registerBinding(a.node.kind,a)}if(e.isFunctionExpression()&&e.has("id")&&(e.get("id").node[R.NOT_LOCAL_BINDING]||this.registerBinding("local",e.get("id"),e)),e.isClassExpression()&&e.has("id")&&(e.get("id").node[R.NOT_LOCAL_BINDING]||this.registerBinding("local",e)),e.isFunction())for(var o=e.get("params"),u=o,l=Array.isArray(u),f=0,u=l?u:(0,v.default)(u);;){var p;if(l){if(f>=u.length)break;p=u[f++]}else{if(f=u.next(),f.done)break;p=f.value}var d=p;this.registerBinding("param",d)}e.isCatchClause()&&this.registerBinding("let",e);var h=this.getProgramParent();if(!h.crawling){var m={references:[],constantViolations:[],assignments:[]};this.crawling=!0,e.traverse(N,m),this.crawling=!1;for(var y=m.assignments,g=Array.isArray(y),b=0,y=g?y:(0,v.default)(y);;){var E;if(g){if(b>=y.length)break;E=y[b++]}else{if(b=y.next(),b.done)break;E=b.value}var x=E,A=x.getBindingIdentifiers(),S=void 0;for(var _ in A)x.scope.getBinding(_)||(S=S||x.scope.getProgramParent(),S.addGlobal(A[_]));x.scope.registerConstantViolation(x)}for(var D=m.references,C=Array.isArray(D),w=0,D=C?D:(0,v.default)(D);;){var F;if(C){if(w>=D.length)break;F=D[w++]}else{if(w=D.next(),w.done)break;F=w.value}var k=F,P=k.scope.getBinding(k.node.name);P?P.reference(k):k.scope.getProgramParent().addGlobal(k.node)}for(var T=m.constantViolations,O=Array.isArray(T),B=0,T=O?T:(0,v.default)(T);;){var I;if(O){if(B>=T.length)break;I=T[B++]}else{if(B=T.next(),B.done)break;I=B.value}var M=I;M.scope.registerConstantViolation(M)}}},e.prototype.push=function(e){var t=this.path;t.isBlockStatement()||t.isProgram()||(t=this.getBlockParent().path),t.isSwitchStatement()&&(t=this.getFunctionParent().path),(t.isLoop()||t.isCatchClause()||t.isFunction())&&(R.ensureBlock(t.node),t=t.get("body"));var r=e.unique,n=e.kind||"var",i=null==e._blockHoist?2:e._blockHoist,s="declaration:"+n+":"+i,a=!r&&t.getData(s);if(!a){var o=R.variableDeclaration(n,[]);o._generated=!0,o._blockHoist=i;var u=t.unshiftContainer("body",[o]);a=u[0],r||t.setData(s,a)}var l=R.variableDeclarator(e.id,e.init);a.node.declarations.push(l),this.registerBinding(n,a.get("declarations").pop())},e.prototype.getProgramParent=function(){var e=this;do if(e.path.isProgram())return e;while(e=e.parent);throw new Error("We couldn't find a Function or Program...")},e.prototype.getFunctionParent=function(){var e=this;do if(e.path.isFunctionParent())return e;while(e=e.parent);throw new Error("We couldn't find a Function or Program...")},e.prototype.getBlockParent=function(){var e=this;do if(e.path.isBlockParent())return e;while(e=e.parent);throw new Error("We couldn't find a BlockStatement, For, Switch, Function, Loop or Program...")},e.prototype.getAllBindings=function(){var e=(0,c.default)(null),t=this;do(0,C.default)(e,t.bindings),t=t.parent;while(t);return e},e.prototype.getAllBindingsOfKind=function(){for(var e=(0,c.default)(null),t=arguments,r=Array.isArray(t),n=0,t=r?t:(0,v.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i,a=this;do{for(var o in a.bindings){var u=a.bindings[o];u.kind===s&&(e[o]=u)}a=a.parent}while(a)}return e},e.prototype.bindingIdentifierEquals=function(e,t){return this.getBindingIdentifier(e)===t},e.prototype.warnOnFlowBinding=function(e){return 0===M&&e&&e.path.isFlow()&&console.warn("\n        You or one of the Babel plugins you are using are using Flow declarations as bindings.\n        Support for this will be removed in version 6.8. To find out the caller, grep for this\n        message and change it to a `console.trace()`.\n      "),e},e.prototype.getBinding=function(e){var t=this;do{var r=t.getOwnBinding(e);if(r)return this.warnOnFlowBinding(r)}while(t=t.parent)},e.prototype.getOwnBinding=function(e){return this.warnOnFlowBinding(this.bindings[e])},e.prototype.getBindingIdentifier=function(e){var t=this.getBinding(e);return t&&t.identifier},e.prototype.getOwnBindingIdentifier=function(e){var t=this.bindings[e];return t&&t.identifier},e.prototype.hasOwnBinding=function(e){return!!this.getOwnBinding(e)},e.prototype.hasBinding=function(t,r){return!!t&&(!!this.hasOwnBinding(t)||(!!this.parentHasBinding(t,r)||(!!this.hasUid(t)||(!(r||!(0,g.default)(e.globals,t))||!(r||!(0,g.default)(e.contextVariables,t))))))},e.prototype.parentHasBinding=function(e,t){return this.parent&&this.parent.hasBinding(e,t)},e.prototype.moveBindingTo=function(e,t){var r=this.getBinding(e);r&&(r.scope.removeOwnBinding(e),r.scope=t,t.bindings[e]=r)},e.prototype.removeOwnBinding=function(e){delete this.bindings[e]},e.prototype.removeBinding=function(e){var t=this.getBinding(e);t&&t.scope.removeOwnBinding(e);var r=this;do r.uids[e]&&(r.uids[e]=!1);while(r=r.parent)},e}();j.globals=(0,u.default)(O.default.builtin),j.contextVariables=["arguments","undefined","Infinity","NaN"],t.default=j,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.NOT_LOCAL_BINDING=t.BLOCK_SCOPED_SYMBOL=t.INHERIT_KEYS=t.UNARY_OPERATORS=t.STRING_UNARY_OPERATORS=t.NUMBER_UNARY_OPERATORS=t.BOOLEAN_UNARY_OPERATORS=t.BINARY_OPERATORS=t.NUMBER_BINARY_OPERATORS=t.BOOLEAN_BINARY_OPERATORS=t.COMPARISON_BINARY_OPERATORS=t.EQUALITY_BINARY_OPERATORS=t.BOOLEAN_NUMBER_BINARY_OPERATORS=t.UPDATE_OPERATORS=t.LOGICAL_OPERATORS=t.COMMENT_KEYS=t.FOR_INIT_KEYS=t.FLATTENABLE_KEYS=t.STATEMENT_OR_BLOCK_KEYS=void 0;var i=r(355),s=n(i),a=(t.STATEMENT_OR_BLOCK_KEYS=["consequent","body","alternate"],t.FLATTENABLE_KEYS=["body","expressions"],t.FOR_INIT_KEYS=["left","init"],t.COMMENT_KEYS=["leadingComments","trailingComments","innerComments"],t.LOGICAL_OPERATORS=["||","&&"],t.UPDATE_OPERATORS=["++","--"],t.BOOLEAN_NUMBER_BINARY_OPERATORS=[">","<",">=","<="]),o=t.EQUALITY_BINARY_OPERATORS=["==","===","!=","!=="],u=t.COMPARISON_BINARY_OPERATORS=[].concat(o,["in","instanceof"]),l=t.BOOLEAN_BINARY_OPERATORS=[].concat(u,a),c=t.NUMBER_BINARY_OPERATORS=["-","/","%","*","**","&","|",">>",">>>","<<","^"],f=(t.BINARY_OPERATORS=["+"].concat(c,l),t.BOOLEAN_UNARY_OPERATORS=["delete","!"]),p=t.NUMBER_UNARY_OPERATORS=["+","-","++","--","~"],d=t.STRING_UNARY_OPERATORS=["typeof"];t.UNARY_OPERATORS=["void"].concat(f,p,d),t.INHERIT_KEYS={optional:["typeAnnotation","typeParameters","returnType"],force:["start","loc","end"]},t.BLOCK_SCOPED_SYMBOL=(0,s.default)("var used to be block scoped"),t.NOT_LOCAL_BINDING=(0,s.default)("should not be considered a local binding")},function(e,t){"use strict";function r(e){return e=e.split(" "),function(t){return e.indexOf(t)>=0}}function n(e,t){for(var r=65536,n=0;n<t.length;n+=2){if(r+=t[n],r>e)return!1;if(r+=t[n+1],r>=e)return!0}}function i(e){return e<65?36===e:e<91||(e<97?95===e:e<123||(e<=65535?e>=170&&P.test(String.fromCharCode(e)):n(e,O)))}function s(e){return e<48?36===e:e<58||!(e<65)&&(e<91||(e<97?95===e:e<123||(e<=65535?e>=170&&T.test(String.fromCharCode(e)):n(e,O)||n(e,B))))}function a(e){var t={};for(var r in R)t[r]=e&&r in e?e[r]:R[r];return t}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){return new I(e,{beforeExpr:!0,binop:t})}function l(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.keyword=e,j[e]=L["_"+e]=new I(e,t)}function c(e){return 10===e||13===e||8232===e||8233===e}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function d(e,t){for(var r=1,n=0;;){V.lastIndex=n;var i=V.exec(e);if(!(i&&i.index<t))return new q(r,t-n);++r,n=i.index+i[0].length}}function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function m(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function v(e){return e<=65535?String.fromCharCode(e):String.fromCharCode((e-65536>>10)+55296,(e-65536&1023)+56320)}function y(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function g(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":D(t))&&"function"!=typeof t?e:t}function b(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":D(t)));e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function x(e,t,r,n){return e.type=t,e.end=r,e.loc.end=n,this.processComment(e),e}function A(e){return e[e.length-1]}function S(e){return"JSXIdentifier"===e.type?e.name:"JSXNamespacedName"===e.type?e.namespace.name+":"+e.name.name:"JSXMemberExpression"===e.type?S(e.object)+"."+S(e.property):void 0}function _(e,t){return new $(t,e).parse()}var D="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var C={6:r("enum await"),strict:r("implements interface let package private protected public static yield"),strictBind:r("eval arguments")},w=r("break case catch continue debugger default do else finally for function if return switch throw try var while with null true false instanceof typeof void delete new in this let const class extends export import yield super"),F="ªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽͿΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԯԱ-Ֆՙա-ևא-תװ-ײؠ-يٮٯٱ-ۓەۥۦۮۯۺ-ۼۿܐܒ-ܯݍ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࢠ-ࢴࢶ-ࢽऄ-हऽॐक़-ॡॱ-ঀঅ-ঌএঐও-নপ-রলশ-হঽৎড়ঢ়য়-ৡৰৱਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-ઍએ-ઑઓ-નપ-રલળવ-હઽૐૠૡૹଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହଽଡ଼ଢ଼ୟ-ୡୱஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹௐఅ-ఌఎ-ఐఒ-నప-హఽౘ-ౚౠౡಀಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹಽೞೠೡೱೲഅ-ഌഎ-ഐഒ-ഺഽൎൔ-ൖൟ-ൡൺ-ൿඅ-ඖක-නඳ-රලව-ෆก-ะาำเ-ๆກຂຄງຈຊຍດ-ທນ-ຟມ-ຣລວສຫອ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿၐ-ၕၚ-ၝၡၥၦၮ-ၰၵ-ႁႎႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚᎀ-ᎏᎠ-Ᏽᏸ-ᏽᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᛮ-ᛸᜀ-ᜌᜎ-ᜑᜠ-ᜱᝀ-ᝑᝠ-ᝬᝮ-ᝰក-ឳៗៜᠠ-ᡷᢀ-ᢨᢪᢰ-ᣵᤀ-ᤞᥐ-ᥭᥰ-ᥴᦀ-ᦫᦰ-ᧉᨀ-ᨖᨠ-ᩔᪧᬅ-ᬳᭅ-ᭋᮃ-ᮠᮮᮯᮺ-ᯥᰀ-ᰣᱍ-ᱏᱚ-ᱽᲀ-ᲈᳩ-ᳬᳮ-ᳱᳵᳶᴀ-ᶿḀ-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼⁱⁿₐ-ₜℂℇℊ-ℓℕ℘-ℝℤΩℨK-ℹℼ-ℿⅅ-ⅉⅎⅠ-ↈⰀ-Ⱞⰰ-ⱞⱠ-ⳤⳫ-ⳮⳲⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞ々-〇〡-〩〱-〵〸-〼ぁ-ゖ゛-ゟァ-ヺー-ヿㄅ-ㄭㄱ-ㆎㆠ-ㆺㇰ-ㇿ㐀-䶵一-鿕ꀀ-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘟꘪꘫꙀ-ꙮꙿ-ꚝꚠ-ꛯꜗ-ꜟꜢ-ꞈꞋ-ꞮꞰ-ꞷꟷ-ꠁꠃ-ꠅꠇ-ꠊꠌ-ꠢꡀ-ꡳꢂ-ꢳꣲ-ꣷꣻꣽꤊ-ꤥꤰ-ꥆꥠ-ꥼꦄ-ꦲꧏꧠ-ꧤꧦ-ꧯꧺ-ꧾꨀ-ꨨꩀ-ꩂꩄ-ꩋꩠ-ꩶꩺꩾ-ꪯꪱꪵꪶꪹ-ꪽꫀꫂꫛ-ꫝꫠ-ꫪꫲ-ꫴꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꬰ-ꭚꭜ-ꭥꭰ-ꯢ가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ff-stﬓ-ﬗיִײַ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ",k="‌‍·̀-ͯ·҃-֑҇-ׇֽֿׁׂׅׄؐ-ًؚ-٩ٰۖ-ۜ۟-۪ۤۧۨ-ۭ۰-۹ܑܰ-݊ަ-ް߀-߉߫-߳ࠖ-࠙ࠛ-ࠣࠥ-ࠧࠩ-࡙࠭-࡛ࣔ-ࣣ࣡-ःऺ-़ा-ॏ॑-ॗॢॣ०-९ঁ-ঃ়া-ৄেৈো-্ৗৢৣ০-৯ਁ-ਃ਼ਾ-ੂੇੈੋ-੍ੑ੦-ੱੵઁ-ઃ઼ા-ૅે-ૉો-્ૢૣ૦-૯ଁ-ଃ଼ା-ୄେୈୋ-୍ୖୗୢୣ୦-୯ஂா-ூெ-ைொ-்ௗ௦-௯ఀ-ఃా-ౄె-ైొ-్ౕౖౢౣ౦-౯ಁ-ಃ಼ಾ-ೄೆ-ೈೊ-್ೕೖೢೣ೦-೯ഁ-ഃാ-ൄെ-ൈൊ-്ൗൢൣ൦-൯ංඃ්ා-ුූෘ-ෟ෦-෯ෲෳัิ-ฺ็-๎๐-๙ັິ-ູົຼ່-ໍ໐-໙༘༙༠-༩༹༵༷༾༿ཱ-྄྆྇ྍ-ྗྙ-ྼ࿆ါ-ှ၀-၉ၖ-ၙၞ-ၠၢ-ၤၧ-ၭၱ-ၴႂ-ႍႏ-ႝ፝-፟፩-፱ᜒ-᜔ᜲ-᜴ᝒᝓᝲᝳ឴-៓៝០-៩᠋-᠍᠐-᠙ᢩᤠ-ᤫᤰ-᤻᥆-᥏᧐-᧚ᨗ-ᨛᩕ-ᩞ᩠-᩿᩼-᪉᪐-᪙᪰-᪽ᬀ-ᬄ᬴-᭄᭐-᭙᭫-᭳ᮀ-ᮂᮡ-ᮭ᮰-᮹᯦-᯳ᰤ-᰷᱀-᱉᱐-᱙᳐-᳔᳒-᳨᳭ᳲ-᳴᳸᳹᷀-᷵᷻-᷿‿⁀⁔⃐-⃥⃜⃡-⃰⳯-⵿⳱ⷠ-〪ⷿ-゙゚〯꘠-꘩꙯ꙴ-꙽ꚞꚟ꛰꛱ꠂ꠆ꠋꠣ-ꠧꢀꢁꢴ-ꣅ꣐-꣙꣠-꣱꤀-꤉ꤦ-꤭ꥇ-꥓ꦀ-ꦃ꦳-꧀꧐-꧙ꧥ꧰-꧹ꨩ-ꨶꩃꩌꩍ꩐-꩙ꩻ-ꩽꪰꪲ-ꪴꪷꪸꪾ꪿꫁ꫫ-ꫯꫵ꫶ꯣ-ꯪ꯬꯭꯰-꯹ﬞ︀-️︠-︯︳︴﹍-﹏０-９＿",P=new RegExp("["+F+"]"),T=new RegExp("["+F+k+"]");F=k=null;var O=[0,11,2,25,2,18,2,1,2,14,3,13,35,122,70,52,268,28,4,48,48,31,17,26,6,37,11,29,3,35,5,7,2,4,43,157,19,35,5,35,5,39,9,51,157,310,10,21,11,7,153,5,3,0,2,43,2,1,4,0,3,22,11,22,10,30,66,18,2,1,11,21,11,25,71,55,7,1,65,0,16,3,2,2,2,26,45,28,4,28,36,7,2,27,28,53,11,21,11,18,14,17,111,72,56,50,14,50,785,52,76,44,33,24,27,35,42,34,4,0,13,47,15,3,22,0,2,0,36,17,2,24,85,6,2,0,2,3,2,14,2,9,8,46,39,7,3,1,3,21,2,6,2,1,2,4,4,0,19,0,13,4,159,52,19,3,54,47,21,1,2,0,185,46,42,3,37,47,21,0,60,42,86,25,391,63,32,0,449,56,264,8,2,36,18,0,50,29,881,921,103,110,18,195,2749,1070,4050,582,8634,568,8,30,114,29,19,47,17,3,32,20,6,18,881,68,12,0,67,12,65,0,32,6124,20,754,9486,1,3071,106,6,12,4,8,8,9,5991,84,2,70,2,1,3,0,3,1,3,3,2,11,2,0,2,6,2,64,2,3,3,7,2,6,2,27,2,3,2,4,2,0,4,6,2,339,3,24,2,24,2,30,2,24,2,30,2,24,2,30,2,24,2,30,2,24,2,7,4149,196,60,67,1213,3,2,26,2,1,2,0,3,0,2,9,2,3,2,0,2,0,7,0,5,0,2,0,2,0,2,2,2,1,2,0,3,0,2,0,2,0,2,0,2,0,2,1,2,0,3,3,2,6,2,3,2,3,2,0,2,9,2,16,6,2,2,4,2,16,4421,42710,42,4148,12,221,3,5761,10591,541],B=[509,0,227,0,150,4,294,9,1368,2,2,1,6,3,41,2,5,0,166,1,1306,2,54,14,32,9,16,3,46,10,54,9,7,2,37,13,2,9,52,0,13,2,49,13,10,2,4,9,83,11,7,0,161,11,6,9,7,3,57,0,2,6,3,1,3,2,10,0,11,1,3,6,4,4,193,17,10,9,87,19,13,9,214,6,3,8,28,1,83,16,16,9,82,12,9,9,84,14,5,9,423,9,838,7,2,7,17,9,57,21,2,13,19882,9,135,4,60,6,26,9,1016,45,17,3,19723,1,5319,4,4,5,9,7,3,6,31,3,149,2,1418,49,513,54,5,49,9,0,15,0,23,4,2,14,1361,6,2,16,3,6,2,1,2,4,2214,6,110,6,6,9,792487,239],R={sourceType:"script",sourceFilename:void 0,allowReturnOutsideFunction:!1,allowImportExportEverywhere:!1,allowSuperOutsideMethod:!1,plugins:[],strictMode:null},I=function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};o(this,e),this.label=t,this.keyword=r.keyword,this.beforeExpr=!!r.beforeExpr,this.startsExpr=!!r.startsExpr,this.rightAssociative=!!r.rightAssociative,this.isLoop=!!r.isLoop,this.isAssign=!!r.isAssign,this.prefix=!!r.prefix,this.postfix=!!r.postfix,this.binop=r.binop||null,this.updateContext=null},M={beforeExpr:!0},N={startsExpr:!0},L={num:new I("num",N),regexp:new I("regexp",N),string:new I("string",N),name:new I("name",N),eof:new I("eof"),bracketL:new I("[",{beforeExpr:!0,startsExpr:!0}),bracketR:new I("]"),braceL:new I("{",{beforeExpr:!0,startsExpr:!0}),braceBarL:new I("{|",{beforeExpr:!0,startsExpr:!0}),braceR:new I("}"),braceBarR:new I("|}"),parenL:new I("(",{beforeExpr:!0,startsExpr:!0}),parenR:new I(")"),comma:new I(",",M),semi:new I(";",M),colon:new I(":",M),doubleColon:new I("::",M),dot:new I("."),question:new I("?",M),arrow:new I("=>",M),template:new I("template"),ellipsis:new I("...",M),backQuote:new I("`",N),dollarBraceL:new I("${",{beforeExpr:!0,startsExpr:!0}),at:new I("@"),eq:new I("=",{beforeExpr:!0,isAssign:!0}),assign:new I("_=",{beforeExpr:!0,isAssign:!0}),incDec:new I("++/--",{prefix:!0,postfix:!0,startsExpr:!0}),prefix:new I("prefix",{beforeExpr:!0,prefix:!0,startsExpr:!0}),logicalOR:u("||",1),logicalAND:u("&&",2),bitwiseOR:u("|",3),bitwiseXOR:u("^",4),bitwiseAND:u("&",5),equality:u("==/!=",6),relational:u("</>",7),bitShift:u("<</>>",8),plusMin:new I("+/-",{beforeExpr:!0,binop:9,prefix:!0,startsExpr:!0}),modulo:u("%",10),star:u("*",10),slash:u("/",10),exponent:new I("**",{beforeExpr:!0,binop:11,rightAssociative:!0})},j={};l("break"),l("case",M),l("catch"),l("continue"),l("debugger"),l("default",M),l("do",{isLoop:!0,beforeExpr:!0}),l("else",M),l("finally"),l("for",{isLoop:!0}),l("function",N),l("if"),l("return",M),l("switch"),l("throw",M),l("try"),l("var"),l("let"),l("const"),l("while",{isLoop:!0}),l("with"),l("new",{beforeExpr:!0,startsExpr:!0}),l("this",N),l("super",N),l("class"),l("extends",M),l("export"),l("import"),l("yield",{beforeExpr:!0,startsExpr:!0}),l("null",N),l("true",N),l("false",N),l("in",{beforeExpr:!0,binop:7}),l("instanceof",{beforeExpr:!0,binop:7}),l("typeof",{beforeExpr:!0,prefix:!0,startsExpr:!0}),l("void",{beforeExpr:!0,prefix:!0,startsExpr:!0}),l("delete",{beforeExpr:!0,prefix:!0,startsExpr:!0});var U=/\r\n?|\n|\u2028|\u2029/,V=new RegExp(U.source,"g"),G=/[\u1680\u180e\u2000-\u200a\u202f\u205f\u3000\ufeff]/,W=function e(t,r,n,i){f(this,e),this.token=t,this.isExpr=!!r,this.preserveSpace=!!n,this.override=i},Y={braceStatement:new W("{",(!1)),braceExpression:new W("{",(!0)),templateQuasi:new W("${",(!0)),parenStatement:new W("(",(!1)),parenExpression:new W("(",(!0)),template:new W("`",(!0),(!0),function(e){return e.readTmplToken()}),functionExpression:new W("function",(!0))};L.parenR.updateContext=L.braceR.updateContext=function(){if(1===this.state.context.length)return void(this.state.exprAllowed=!0);var e=this.state.context.pop();e===Y.braceStatement&&this.curContext()===Y.functionExpression?(this.state.context.pop(),this.state.exprAllowed=!1):e===Y.templateQuasi?this.state.exprAllowed=!0:this.state.exprAllowed=!e.isExpr},L.name.updateContext=function(e){this.state.exprAllowed=!1,e!==L._let&&e!==L._const&&e!==L._var||U.test(this.input.slice(this.state.end))&&(this.state.exprAllowed=!0)},L.braceL.updateContext=function(e){this.state.context.push(this.braceIsBlock(e)?Y.braceStatement:Y.braceExpression),this.state.exprAllowed=!0},L.dollarBraceL.updateContext=function(){this.state.context.push(Y.templateQuasi),this.state.exprAllowed=!0},L.parenL.updateContext=function(e){var t=e===L._if||e===L._for||e===L._with||e===L._while;this.state.context.push(t?Y.parenStatement:Y.parenExpression),this.state.exprAllowed=!0},L.incDec.updateContext=function(){},L._function.updateContext=function(){this.curContext()!==Y.braceStatement&&this.state.context.push(Y.functionExpression),this.state.exprAllowed=!1},L.backQuote.updateContext=function(){this.curContext()===Y.template?this.state.context.pop():this.state.context.push(Y.template),this.state.exprAllowed=!1};var q=function e(t,r){p(this,e),this.line=t,this.column=r},K=function e(t,r){p(this,e),this.start=t,this.end=r},H=function(){function e(){h(this,e)}return e.prototype.init=function(e,t){return this.strict=e.strictMode!==!1&&"module"===e.sourceType,this.input=t,this.potentialArrowAt=-1,this.inMethod=this.inFunction=this.inGenerator=this.inAsync=this.inType=this.noAnonFunctionType=!1,this.labels=[],this.decorators=[],this.tokens=[],this.comments=[],this.trailingComments=[],this.leadingComments=[],this.commentStack=[],this.pos=this.lineStart=0,this.curLine=1,this.type=L.eof,this.value=null,this.start=this.end=this.pos,this.startLoc=this.endLoc=this.curPosition(),this.lastTokEndLoc=this.lastTokStartLoc=null,this.lastTokStart=this.lastTokEnd=this.pos,this.context=[Y.braceStatement],this.exprAllowed=!0,this.containsEsc=this.containsOctal=!1,this.octalPosition=null,this.exportedIdentifiers=[],this},e.prototype.curPosition=function(){return new q(this.curLine,this.pos-this.lineStart)},e.prototype.clone=function(t){var r=new e;for(var n in this){var i=this[n];t&&"context"!==n||!Array.isArray(i)||(i=i.slice()),r[n]=i}return r},e}(),J=function e(t){m(this,e),this.type=t.type,this.value=t.value,this.start=t.start,this.end=t.end,this.loc=new K(t.startLoc,t.endLoc)},X=function(){function e(t,r){m(this,e),this.state=new H,this.state.init(t,r)}return e.prototype.next=function(){this.isLookahead||this.state.tokens.push(new J(this.state)),this.state.lastTokEnd=this.state.end,this.state.lastTokStart=this.state.start,this.state.lastTokEndLoc=this.state.endLoc,this.state.lastTokStartLoc=this.state.startLoc,this.nextToken()},e.prototype.eat=function(e){return!!this.match(e)&&(this.next(),!0)},e.prototype.match=function(e){return this.state.type===e},e.prototype.isKeyword=function(e){return w(e)},e.prototype.lookahead=function(){var e=this.state;this.state=e.clone(!0),this.isLookahead=!0,this.next(),this.isLookahead=!1;var t=this.state.clone(!0);return this.state=e,t},e.prototype.setStrict=function(e){if(this.state.strict=e,this.match(L.num)||this.match(L.string)){for(this.state.pos=this.state.start;this.state.pos<this.state.lineStart;)this.state.lineStart=this.input.lastIndexOf("\n",this.state.lineStart-2)+1,--this.state.curLine;this.nextToken()}},e.prototype.curContext=function(){return this.state.context[this.state.context.length-1]},e.prototype.nextToken=function(){var e=this.curContext();return e&&e.preserveSpace||this.skipSpace(),this.state.containsOctal=!1,this.state.octalPosition=null,this.state.start=this.state.pos,this.state.startLoc=this.state.curPosition(),this.state.pos>=this.input.length?this.finishToken(L.eof):e.override?e.override(this):this.readToken(this.fullCharCodeAtPos())},e.prototype.readToken=function(e){return i(e)||92===e?this.readWord():this.getTokenFromCode(e)},e.prototype.fullCharCodeAtPos=function(){var e=this.input.charCodeAt(this.state.pos);if(e<=55295||e>=57344)return e;var t=this.input.charCodeAt(this.state.pos+1);return(e<<10)+t-56613888},e.prototype.pushComment=function(e,t,r,n,i,s){var a={type:e?"CommentBlock":"CommentLine",value:t,start:r,end:n,loc:new K(i,s)};this.isLookahead||(this.state.tokens.push(a),this.state.comments.push(a),this.addComment(a))},e.prototype.skipBlockComment=function(){var e=this.state.curPosition(),t=this.state.pos,r=this.input.indexOf("*/",this.state.pos+=2);r===-1&&this.raise(this.state.pos-2,"Unterminated comment"),this.state.pos=r+2,V.lastIndex=t;for(var n=void 0;(n=V.exec(this.input))&&n.index<this.state.pos;)++this.state.curLine,this.state.lineStart=n.index+n[0].length;this.pushComment(!0,this.input.slice(t+2,r),t,this.state.pos,e,this.state.curPosition())},e.prototype.skipLineComment=function(e){for(var t=this.state.pos,r=this.state.curPosition(),n=this.input.charCodeAt(this.state.pos+=e);this.state.pos<this.input.length&&10!==n&&13!==n&&8232!==n&&8233!==n;)++this.state.pos,n=this.input.charCodeAt(this.state.pos);this.pushComment(!1,this.input.slice(t+e,this.state.pos),t,this.state.pos,r,this.state.curPosition())},e.prototype.skipSpace=function(){e:for(;this.state.pos<this.input.length;){var e=this.input.charCodeAt(this.state.pos);switch(e){case 32:case 160:++this.state.pos;break;case 13:10===this.input.charCodeAt(this.state.pos+1)&&++this.state.pos;case 10:case 8232:case 8233:++this.state.pos,++this.state.curLine,this.state.lineStart=this.state.pos;break;case 47:switch(this.input.charCodeAt(this.state.pos+1)){case 42:this.skipBlockComment();break;case 47:this.skipLineComment(2);break;default:break e}break;default:if(!(e>8&&e<14||e>=5760&&G.test(String.fromCharCode(e))))break e;++this.state.pos}}},e.prototype.finishToken=function(e,t){this.state.end=this.state.pos,this.state.endLoc=this.state.curPosition();var r=this.state.type;this.state.type=e,this.state.value=t,this.updateContext(r)},e.prototype.readToken_dot=function(){var e=this.input.charCodeAt(this.state.pos+1);if(e>=48&&e<=57)return this.readNumber(!0);var t=this.input.charCodeAt(this.state.pos+2);return 46===e&&46===t?(this.state.pos+=3,this.finishToken(L.ellipsis)):(++this.state.pos,this.finishToken(L.dot))},e.prototype.readToken_slash=function(){if(this.state.exprAllowed)return++this.state.pos,this.readRegexp();var e=this.input.charCodeAt(this.state.pos+1);return 61===e?this.finishOp(L.assign,2):this.finishOp(L.slash,1)},e.prototype.readToken_mult_modulo=function(e){var t=42===e?L.star:L.modulo,r=1,n=this.input.charCodeAt(this.state.pos+1);return 42===n&&(r++,n=this.input.charCodeAt(this.state.pos+2),t=L.exponent),61===n&&(r++,t=L.assign),this.finishOp(t,r)},e.prototype.readToken_pipe_amp=function(e){var t=this.input.charCodeAt(this.state.pos+1);return t===e?this.finishOp(124===e?L.logicalOR:L.logicalAND,2):61===t?this.finishOp(L.assign,2):124===e&&125===t&&this.hasPlugin("flow")?this.finishOp(L.braceBarR,2):this.finishOp(124===e?L.bitwiseOR:L.bitwiseAND,1)},e.prototype.readToken_caret=function(){var e=this.input.charCodeAt(this.state.pos+1);return 61===e?this.finishOp(L.assign,2):this.finishOp(L.bitwiseXOR,1)},e.prototype.readToken_plus_min=function(e){var t=this.input.charCodeAt(this.state.pos+1);return t===e?45===t&&62===this.input.charCodeAt(this.state.pos+2)&&U.test(this.input.slice(this.state.lastTokEnd,this.state.pos))?(this.skipLineComment(3),this.skipSpace(),this.nextToken()):this.finishOp(L.incDec,2):61===t?this.finishOp(L.assign,2):this.finishOp(L.plusMin,1)},e.prototype.readToken_lt_gt=function(e){var t=this.input.charCodeAt(this.state.pos+1),r=1;return t===e?(r=62===e&&62===this.input.charCodeAt(this.state.pos+2)?3:2,61===this.input.charCodeAt(this.state.pos+r)?this.finishOp(L.assign,r+1):this.finishOp(L.bitShift,r)):33===t&&60===e&&45===this.input.charCodeAt(this.state.pos+2)&&45===this.input.charCodeAt(this.state.pos+3)?(this.inModule&&this.unexpected(),this.skipLineComment(4),this.skipSpace(),this.nextToken()):(61===t&&(r=2),this.finishOp(L.relational,r))},e.prototype.readToken_eq_excl=function(e){var t=this.input.charCodeAt(this.state.pos+1);return 61===t?this.finishOp(L.equality,61===this.input.charCodeAt(this.state.pos+2)?3:2):61===e&&62===t?(this.state.pos+=2,this.finishToken(L.arrow)):this.finishOp(61===e?L.eq:L.prefix,1)},e.prototype.getTokenFromCode=function(e){switch(e){case 46:return this.readToken_dot();case 40:return++this.state.pos,this.finishToken(L.parenL);case 41:return++this.state.pos,this.finishToken(L.parenR);case 59:return++this.state.pos,this.finishToken(L.semi);case 44:return++this.state.pos,this.finishToken(L.comma);case 91:return++this.state.pos,this.finishToken(L.bracketL);case 93:return++this.state.pos,this.finishToken(L.bracketR);case 123:return this.hasPlugin("flow")&&124===this.input.charCodeAt(this.state.pos+1)?this.finishOp(L.braceBarL,2):(++this.state.pos,this.finishToken(L.braceL));case 125:return++this.state.pos,this.finishToken(L.braceR);case 58:return this.hasPlugin("functionBind")&&58===this.input.charCodeAt(this.state.pos+1)?this.finishOp(L.doubleColon,2):(++this.state.pos,this.finishToken(L.colon));case 63:return++this.state.pos,this.finishToken(L.question);case 64:return++this.state.pos,this.finishToken(L.at);case 96:return++this.state.pos,this.finishToken(L.backQuote);case 48:var t=this.input.charCodeAt(this.state.pos+1);if(120===t||88===t)return this.readRadixNumber(16);if(111===t||79===t)return this.readRadixNumber(8);if(98===t||66===t)return this.readRadixNumber(2);case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:return this.readNumber(!1);case 34:case 39:return this.readString(e);case 47:return this.readToken_slash();case 37:case 42:return this.readToken_mult_modulo(e);case 124:case 38:return this.readToken_pipe_amp(e);case 94:return this.readToken_caret();case 43:case 45:return this.readToken_plus_min(e);case 60:case 62:return this.readToken_lt_gt(e);case 61:case 33:return this.readToken_eq_excl(e);case 126:return this.finishOp(L.prefix,1)}this.raise(this.state.pos,"Unexpected character '"+v(e)+"'")},e.prototype.finishOp=function(e,t){var r=this.input.slice(this.state.pos,this.state.pos+t);return this.state.pos+=t,this.finishToken(e,r)},e.prototype.readRegexp=function(){for(var e=void 0,t=void 0,r=this.state.pos;;){this.state.pos>=this.input.length&&this.raise(r,"Unterminated regular expression");var n=this.input.charAt(this.state.pos);if(U.test(n)&&this.raise(r,"Unterminated regular expression"),e)e=!1;else{if("["===n)t=!0;else if("]"===n&&t)t=!1;else if("/"===n&&!t)break;e="\\"===n}++this.state.pos}var i=this.input.slice(r,this.state.pos);++this.state.pos;var s=this.readWord1();if(s){var a=/^[gmsiyu]*$/;a.test(s)||this.raise(r,"Invalid regular expression flag")}return this.finishToken(L.regexp,{pattern:i,flags:s})},e.prototype.readInt=function(e,t){for(var r=this.state.pos,n=0,i=0,s=null==t?1/0:t;i<s;++i){var a=this.input.charCodeAt(this.state.pos),o=void 0;if(o=a>=97?a-97+10:a>=65?a-65+10:a>=48&&a<=57?a-48:1/0,o>=e)break;++this.state.pos,n=n*e+o}return this.state.pos===r||null!=t&&this.state.pos-r!==t?null:n},e.prototype.readRadixNumber=function(e){this.state.pos+=2;var t=this.readInt(e);return null==t&&this.raise(this.state.start+2,"Expected number in radix "+e),i(this.fullCharCodeAtPos())&&this.raise(this.state.pos,"Identifier directly after number"),this.finishToken(L.num,t)},e.prototype.readNumber=function(e){var t=this.state.pos,r=!1,n=48===this.input.charCodeAt(this.state.pos);e||null!==this.readInt(10)||this.raise(t,"Invalid number");var s=this.input.charCodeAt(this.state.pos);46===s&&(++this.state.pos,this.readInt(10),r=!0,s=this.input.charCodeAt(this.state.pos)),69!==s&&101!==s||(s=this.input.charCodeAt(++this.state.pos),43!==s&&45!==s||++this.state.pos,null===this.readInt(10)&&this.raise(t,"Invalid number"),r=!0),i(this.fullCharCodeAtPos())&&this.raise(this.state.pos,"Identifier directly after number");var a=this.input.slice(t,this.state.pos),o=void 0;return r?o=parseFloat(a):n&&1!==a.length?/[89]/.test(a)||this.state.strict?this.raise(t,"Invalid number"):o=parseInt(a,8):o=parseInt(a,10),this.finishToken(L.num,o)},e.prototype.readCodePoint=function(){var e=this.input.charCodeAt(this.state.pos),t=void 0;if(123===e){var r=++this.state.pos;t=this.readHexChar(this.input.indexOf("}",this.state.pos)-this.state.pos),++this.state.pos,t>1114111&&this.raise(r,"Code point out of bounds")}else t=this.readHexChar(4);return t},e.prototype.readString=function(e){for(var t="",r=++this.state.pos;;){this.state.pos>=this.input.length&&this.raise(this.state.start,"Unterminated string constant");var n=this.input.charCodeAt(this.state.pos);if(n===e)break;92===n?(t+=this.input.slice(r,this.state.pos),t+=this.readEscapedChar(!1),r=this.state.pos):(c(n)&&this.raise(this.state.start,"Unterminated string constant"),++this.state.pos)}return t+=this.input.slice(r,this.state.pos++),this.finishToken(L.string,t)},e.prototype.readTmplToken=function(){for(var e="",t=this.state.pos;;){this.state.pos>=this.input.length&&this.raise(this.state.start,"Unterminated template");var r=this.input.charCodeAt(this.state.pos);if(96===r||36===r&&123===this.input.charCodeAt(this.state.pos+1))return this.state.pos===this.state.start&&this.match(L.template)?36===r?(this.state.pos+=2,this.finishToken(L.dollarBraceL)):(++this.state.pos,this.finishToken(L.backQuote)):(e+=this.input.slice(t,this.state.pos),this.finishToken(L.template,e));if(92===r)e+=this.input.slice(t,this.state.pos),e+=this.readEscapedChar(!0),t=this.state.pos;else if(c(r)){switch(e+=this.input.slice(t,this.state.pos),++this.state.pos,r){case 13:10===this.input.charCodeAt(this.state.pos)&&++this.state.pos;case 10:e+="\n";break;default:e+=String.fromCharCode(r)}++this.state.curLine,this.state.lineStart=this.state.pos,t=this.state.pos}else++this.state.pos}},e.prototype.readEscapedChar=function(e){var t=this.input.charCodeAt(++this.state.pos);switch(++this.state.pos,t){case 110:return"\n";case 114:return"\r";case 120:return String.fromCharCode(this.readHexChar(2));case 117:return v(this.readCodePoint());case 116:return"\t";case 98:return"\b";case 118:return"\v";case 102:return"\f";case 13:10===this.input.charCodeAt(this.state.pos)&&++this.state.pos;case 10:return this.state.lineStart=this.state.pos,++this.state.curLine,"";default:if(t>=48&&t<=55){var r=this.input.substr(this.state.pos-1,3).match(/^[0-7]+/)[0],n=parseInt(r,8);return n>255&&(r=r.slice(0,-1),n=parseInt(r,8)),n>0&&(this.state.containsOctal||(this.state.containsOctal=!0,this.state.octalPosition=this.state.pos-2),(this.state.strict||e)&&this.raise(this.state.pos-2,"Octal literal in strict mode")),this.state.pos+=r.length-1,String.fromCharCode(n)}return String.fromCharCode(t)}},e.prototype.readHexChar=function(e){var t=this.state.pos,r=this.readInt(16,e);return null===r&&this.raise(t,"Bad character escape sequence"),r},e.prototype.readWord1=function(){this.state.containsEsc=!1;for(var e="",t=!0,r=this.state.pos;this.state.pos<this.input.length;){var n=this.fullCharCodeAtPos();if(s(n))this.state.pos+=n<=65535?1:2;else{if(92!==n)break;this.state.containsEsc=!0,e+=this.input.slice(r,this.state.pos);var a=this.state.pos;117!==this.input.charCodeAt(++this.state.pos)&&this.raise(this.state.pos,"Expecting Unicode escape sequence \\uXXXX"),++this.state.pos;var o=this.readCodePoint();(t?i:s)(o,!0)||this.raise(a,"Invalid Unicode escape"),e+=v(o),
+r=this.state.pos}t=!1}return e+this.input.slice(r,this.state.pos)},e.prototype.readWord=function(){var e=this.readWord1(),t=L.name;return!this.state.containsEsc&&this.isKeyword(e)&&(t=j[e]),this.finishToken(t,e)},e.prototype.braceIsBlock=function(e){if(e===L.colon){var t=this.curContext();if(t===Y.braceStatement||t===Y.braceExpression)return!t.isExpr}return e===L._return?U.test(this.input.slice(this.state.lastTokEnd,this.state.start)):e===L._else||e===L.semi||e===L.eof||e===L.parenR||(e===L.braceL?this.curContext()===Y.braceStatement:!this.state.exprAllowed)},e.prototype.updateContext=function(e){var t=void 0,r=this.state.type;r.keyword&&e===L.dot?this.state.exprAllowed=!1:(t=r.updateContext)?t.call(this,e):this.state.exprAllowed=r.beforeExpr},e}(),z={},$=function(e){function t(r,n){y(this,t),r=a(r);var i=g(this,e.call(this,r,n));return i.options=r,i.inModule="module"===i.options.sourceType,i.input=n,i.plugins=i.loadPlugins(i.options.plugins),i.filename=r.sourceFilename,0===i.state.pos&&"#"===i.input[0]&&"!"===i.input[1]&&i.skipLineComment(2),i}return b(t,e),t.prototype.isReservedWord=function(e){return"await"===e?this.inModule:C[6](e)},t.prototype.hasPlugin=function(e){return!(!this.plugins["*"]&&!this.plugins[e])},t.prototype.extend=function(e,t){this[e]=t(this[e])},t.prototype.loadAllPlugins=function(){var e=this,t=Object.keys(z).filter(function(e){return"flow"!==e});t.push("flow"),t.forEach(function(t){var r=z[t];r&&r(e)})},t.prototype.loadPlugins=function(e){if(e.indexOf("*")>=0)return this.loadAllPlugins(),{"*":!0};var t={};e.indexOf("flow")>=0&&(e=e.filter(function(e){return"flow"!==e}),e.push("flow"));for(var r=e,n=Array.isArray(r),i=0,r=n?r:r[Symbol.iterator]();;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;if(!t[a]){t[a]=!0;var o=z[a];o&&o(this)}}return t},t.prototype.parse=function(){var e=this.startNode(),t=this.startNode();return this.nextToken(),this.parseTopLevel(e,t)},t}(X),Q="function"==typeof Symbol&&"symbol"===D(Symbol.iterator)?function(e){return"undefined"==typeof e?"undefined":D(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":"undefined"==typeof e?"undefined":D(e)},Z=$.prototype;Z.addExtra=function(e,t,r){if(e){var n=e.extra=e.extra||{};n[t]=r}},Z.isRelational=function(e){return this.match(L.relational)&&this.state.value===e},Z.expectRelational=function(e){this.isRelational(e)?this.next():this.unexpected(null,L.relational)},Z.isContextual=function(e){return this.match(L.name)&&this.state.value===e},Z.eatContextual=function(e){return this.state.value===e&&this.eat(L.name)},Z.expectContextual=function(e,t){this.eatContextual(e)||this.unexpected(null,t)},Z.canInsertSemicolon=function(){return this.match(L.eof)||this.match(L.braceR)||U.test(this.input.slice(this.state.lastTokEnd,this.state.start))},Z.isLineTerminator=function(){return this.eat(L.semi)||this.canInsertSemicolon()},Z.semicolon=function(){this.isLineTerminator()||this.unexpected(null,L.semi)},Z.expect=function(e,t){return this.eat(e)||this.unexpected(t,e)},Z.unexpected=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"Unexpected token";t&&"object"===("undefined"==typeof t?"undefined":Q(t))&&t.label&&(t="Unexpected token, expected "+t.label),this.raise(null!=e?e:this.state.start,t)};var ee=$.prototype;ee.parseTopLevel=function(e,t){return t.sourceType=this.options.sourceType,this.parseBlockBody(t,!0,!0,L.eof),e.program=this.finishNode(t,"Program"),e.comments=this.state.comments,e.tokens=this.state.tokens,this.finishNode(e,"File")};var te={kind:"loop"},re={kind:"switch"};ee.stmtToDirective=function(e){var t=e.expression,r=this.startNodeAt(t.start,t.loc.start),n=this.startNodeAt(e.start,e.loc.start),i=this.input.slice(t.start,t.end),s=r.value=i.slice(1,-1);return this.addExtra(r,"raw",i),this.addExtra(r,"rawValue",s),n.value=this.finishNodeAt(r,"DirectiveLiteral",t.end,t.loc.end),this.finishNodeAt(n,"Directive",e.end,e.loc.end)},ee.parseStatement=function(e,t){this.match(L.at)&&this.parseDecorators(!0);var r=this.state.type,n=this.startNode();switch(r){case L._break:case L._continue:return this.parseBreakContinueStatement(n,r.keyword);case L._debugger:return this.parseDebuggerStatement(n);case L._do:return this.parseDoStatement(n);case L._for:return this.parseForStatement(n);case L._function:return e||this.unexpected(),this.parseFunctionStatement(n);case L._class:return e||this.unexpected(),this.takeDecorators(n),this.parseClass(n,!0);case L._if:return this.parseIfStatement(n);case L._return:return this.parseReturnStatement(n);case L._switch:return this.parseSwitchStatement(n);case L._throw:return this.parseThrowStatement(n);case L._try:return this.parseTryStatement(n);case L._let:case L._const:e||this.unexpected();case L._var:return this.parseVarStatement(n,r);case L._while:return this.parseWhileStatement(n);case L._with:return this.parseWithStatement(n);case L.braceL:return this.parseBlock();case L.semi:return this.parseEmptyStatement(n);case L._export:case L._import:if(this.hasPlugin("dynamicImport")&&this.lookahead().type===L.parenL)break;return this.options.allowImportExportEverywhere||(t||this.raise(this.state.start,"'import' and 'export' may only appear at the top level"),this.inModule||this.raise(this.state.start,"'import' and 'export' may appear only with 'sourceType: module'")),r===L._import?this.parseImport(n):this.parseExport(n);case L.name:if("async"===this.state.value){var i=this.state.clone();if(this.next(),this.match(L._function)&&!this.canInsertSemicolon())return this.expect(L._function),this.parseFunction(n,!0,!1,!0);this.state=i}}var s=this.state.value,a=this.parseExpression();return r===L.name&&"Identifier"===a.type&&this.eat(L.colon)?this.parseLabeledStatement(n,s,a):this.parseExpressionStatement(n,a)},ee.takeDecorators=function(e){this.state.decorators.length&&(e.decorators=this.state.decorators,this.state.decorators=[])},ee.parseDecorators=function(e){for(;this.match(L.at);)this.state.decorators.push(this.parseDecorator());e&&this.match(L._export)||this.match(L._class)||this.raise(this.state.start,"Leading decorators must be attached to a class declaration")},ee.parseDecorator=function(){this.hasPlugin("decorators")||this.unexpected();var e=this.startNode();return this.next(),e.expression=this.parseMaybeAssign(),this.finishNode(e,"Decorator")},ee.parseBreakContinueStatement=function(e,t){var r="break"===t;this.next(),this.isLineTerminator()?e.label=null:this.match(L.name)?(e.label=this.parseIdentifier(),this.semicolon()):this.unexpected();var n=void 0;for(n=0;n<this.state.labels.length;++n){var i=this.state.labels[n];if(null==e.label||i.name===e.label.name){if(null!=i.kind&&(r||"loop"===i.kind))break;if(e.label&&r)break}}return n===this.state.labels.length&&this.raise(e.start,"Unsyntactic "+t),this.finishNode(e,r?"BreakStatement":"ContinueStatement")},ee.parseDebuggerStatement=function(e){return this.next(),this.semicolon(),this.finishNode(e,"DebuggerStatement")},ee.parseDoStatement=function(e){return this.next(),this.state.labels.push(te),e.body=this.parseStatement(!1),this.state.labels.pop(),this.expect(L._while),e.test=this.parseParenExpression(),this.eat(L.semi),this.finishNode(e,"DoWhileStatement")},ee.parseForStatement=function(e){this.next(),this.state.labels.push(te);var t=!1;if(this.hasPlugin("asyncGenerators")&&this.state.inAsync&&this.isContextual("await")&&(t=!0,this.next()),this.expect(L.parenL),this.match(L.semi))return t&&this.unexpected(),this.parseFor(e,null);if(this.match(L._var)||this.match(L._let)||this.match(L._const)){var r=this.startNode(),n=this.state.type;return this.next(),this.parseVar(r,!0,n),this.finishNode(r,"VariableDeclaration"),!this.match(L._in)&&!this.isContextual("of")||1!==r.declarations.length||r.declarations[0].init?(t&&this.unexpected(),this.parseFor(e,r)):this.parseForIn(e,r,t)}var i={start:0},s=this.parseExpression(!0,i);if(this.match(L._in)||this.isContextual("of")){var a=this.isContextual("of")?"for-of statement":"for-in statement";return this.toAssignable(s,void 0,a),this.checkLVal(s,void 0,void 0,a),this.parseForIn(e,s,t)}return i.start&&this.unexpected(i.start),t&&this.unexpected(),this.parseFor(e,s)},ee.parseFunctionStatement=function(e){return this.next(),this.parseFunction(e,!0)},ee.parseIfStatement=function(e){return this.next(),e.test=this.parseParenExpression(),e.consequent=this.parseStatement(!1),e.alternate=this.eat(L._else)?this.parseStatement(!1):null,this.finishNode(e,"IfStatement")},ee.parseReturnStatement=function(e){return this.state.inFunction||this.options.allowReturnOutsideFunction||this.raise(this.state.start,"'return' outside of function"),this.next(),this.isLineTerminator()?e.argument=null:(e.argument=this.parseExpression(),this.semicolon()),this.finishNode(e,"ReturnStatement")},ee.parseSwitchStatement=function(e){this.next(),e.discriminant=this.parseParenExpression(),e.cases=[],this.expect(L.braceL),this.state.labels.push(re);for(var t,r=void 0;!this.match(L.braceR);)if(this.match(L._case)||this.match(L._default)){var n=this.match(L._case);r&&this.finishNode(r,"SwitchCase"),e.cases.push(r=this.startNode()),r.consequent=[],this.next(),n?r.test=this.parseExpression():(t&&this.raise(this.state.lastTokStart,"Multiple default clauses"),t=!0,r.test=null),this.expect(L.colon)}else r?r.consequent.push(this.parseStatement(!0)):this.unexpected();return r&&this.finishNode(r,"SwitchCase"),this.next(),this.state.labels.pop(),this.finishNode(e,"SwitchStatement")},ee.parseThrowStatement=function(e){return this.next(),U.test(this.input.slice(this.state.lastTokEnd,this.state.start))&&this.raise(this.state.lastTokEnd,"Illegal newline after throw"),e.argument=this.parseExpression(),this.semicolon(),this.finishNode(e,"ThrowStatement")};var ne=[];ee.parseTryStatement=function(e){if(this.next(),e.block=this.parseBlock(),e.handler=null,this.match(L._catch)){var t=this.startNode();this.next(),this.expect(L.parenL),t.param=this.parseBindingAtom(),this.checkLVal(t.param,!0,Object.create(null),"catch clause"),this.expect(L.parenR),t.body=this.parseBlock(),e.handler=this.finishNode(t,"CatchClause")}return e.guardedHandlers=ne,e.finalizer=this.eat(L._finally)?this.parseBlock():null,e.handler||e.finalizer||this.raise(e.start,"Missing catch or finally clause"),this.finishNode(e,"TryStatement")},ee.parseVarStatement=function(e,t){return this.next(),this.parseVar(e,!1,t),this.semicolon(),this.finishNode(e,"VariableDeclaration")},ee.parseWhileStatement=function(e){return this.next(),e.test=this.parseParenExpression(),this.state.labels.push(te),e.body=this.parseStatement(!1),this.state.labels.pop(),this.finishNode(e,"WhileStatement")},ee.parseWithStatement=function(e){return this.state.strict&&this.raise(this.state.start,"'with' in strict mode"),this.next(),e.object=this.parseParenExpression(),e.body=this.parseStatement(!1),this.finishNode(e,"WithStatement")},ee.parseEmptyStatement=function(e){return this.next(),this.finishNode(e,"EmptyStatement")},ee.parseLabeledStatement=function(e,t,r){for(var n=this.state.labels,i=Array.isArray(n),s=0,n=i?n:n[Symbol.iterator]();;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;o.name===t&&this.raise(r.start,"Label '"+t+"' is already declared")}for(var u=this.state.type.isLoop?"loop":this.match(L._switch)?"switch":null,l=this.state.labels.length-1;l>=0;l--){var c=this.state.labels[l];if(c.statementStart!==e.start)break;c.statementStart=this.state.start,c.kind=u}return this.state.labels.push({name:t,kind:u,statementStart:this.state.start}),e.body=this.parseStatement(!0),this.state.labels.pop(),e.label=r,this.finishNode(e,"LabeledStatement")},ee.parseExpressionStatement=function(e,t){return e.expression=t,this.semicolon(),this.finishNode(e,"ExpressionStatement")},ee.parseBlock=function(e){var t=this.startNode();return this.expect(L.braceL),this.parseBlockBody(t,e,!1,L.braceR),this.finishNode(t,"BlockStatement")},ee.parseBlockBody=function(e,t,r,n){e.body=[],e.directives=[];for(var i=!1,s=void 0,a=void 0;!this.eat(n);){i||!this.state.containsOctal||a||(a=this.state.octalPosition);var o=this.parseStatement(!0,r);if(!t||i||"ExpressionStatement"!==o.type||"StringLiteral"!==o.expression.type||o.expression.extra.parenthesized)i=!0,e.body.push(o);else{var u=this.stmtToDirective(o);e.directives.push(u),void 0===s&&"use strict"===u.value.value&&(s=this.state.strict,this.setStrict(!0),a&&this.raise(a,"Octal literal in strict mode"))}}s===!1&&this.setStrict(!1)},ee.parseFor=function(e,t){return e.init=t,this.expect(L.semi),e.test=this.match(L.semi)?null:this.parseExpression(),this.expect(L.semi),e.update=this.match(L.parenR)?null:this.parseExpression(),this.expect(L.parenR),e.body=this.parseStatement(!1),this.state.labels.pop(),this.finishNode(e,"ForStatement")},ee.parseForIn=function(e,t,r){var n=void 0;return r?(this.eatContextual("of"),n="ForAwaitStatement"):(n=this.match(L._in)?"ForInStatement":"ForOfStatement",this.next()),e.left=t,e.right=this.parseExpression(),this.expect(L.parenR),e.body=this.parseStatement(!1),this.state.labels.pop(),this.finishNode(e,n)},ee.parseVar=function(e,t,r){for(e.declarations=[],e.kind=r.keyword;;){var n=this.startNode();if(this.parseVarHead(n),this.eat(L.eq)?n.init=this.parseMaybeAssign(t):r!==L._const||this.match(L._in)||this.isContextual("of")?"Identifier"===n.id.type||t&&(this.match(L._in)||this.isContextual("of"))?n.init=null:this.raise(this.state.lastTokEnd,"Complex binding patterns require an initialization value"):this.unexpected(),e.declarations.push(this.finishNode(n,"VariableDeclarator")),!this.eat(L.comma))break}return e},ee.parseVarHead=function(e){e.id=this.parseBindingAtom(),this.checkLVal(e.id,!0,void 0,"variable declaration")},ee.parseFunction=function(e,t,r,n,i){var s=this.state.inMethod;return this.state.inMethod=!1,this.initFunction(e,n),this.match(L.star)&&(e.async&&!this.hasPlugin("asyncGenerators")?this.unexpected():(e.generator=!0,this.next())),!t||i||this.match(L.name)||this.match(L._yield)||this.unexpected(),(this.match(L.name)||this.match(L._yield))&&(e.id=this.parseBindingIdentifier()),this.parseFunctionParams(e),this.parseFunctionBody(e,r),this.state.inMethod=s,this.finishNode(e,t?"FunctionDeclaration":"FunctionExpression")},ee.parseFunctionParams=function(e){this.expect(L.parenL),e.params=this.parseBindingList(L.parenR)},ee.parseClass=function(e,t,r){return this.next(),this.parseClassId(e,t,r),this.parseClassSuper(e),this.parseClassBody(e),this.finishNode(e,t?"ClassDeclaration":"ClassExpression")},ee.isClassProperty=function(){return this.match(L.eq)||this.isLineTerminator()},ee.isClassMutatorStarter=function(){return!1},ee.parseClassBody=function(e){var t=this.state.strict;this.state.strict=!0;var r=!1,n=!1,i=[],s=this.startNode();for(s.body=[],this.expect(L.braceL);!this.eat(L.braceR);)if(!this.eat(L.semi))if(this.match(L.at))i.push(this.parseDecorator());else{var a=this.startNode();i.length&&(a.decorators=i,i=[]);var o=!1,u=this.match(L.name)&&"static"===this.state.value,l=this.eat(L.star),c=!1,f=!1;if(this.parsePropertyName(a),a.static=u&&!this.match(L.parenL),a.static&&(l=this.eat(L.star),this.parsePropertyName(a)),!l){if(this.isClassProperty()){s.body.push(this.parseClassProperty(a));continue}"Identifier"===a.key.type&&!a.computed&&this.hasPlugin("classConstructorCall")&&"call"===a.key.name&&this.match(L.name)&&"constructor"===this.state.value&&(o=!0,this.parsePropertyName(a))}var p=!this.match(L.parenL)&&!a.computed&&"Identifier"===a.key.type&&"async"===a.key.name;if(p&&(this.hasPlugin("asyncGenerators")&&this.eat(L.star)&&(l=!0),f=!0,this.parsePropertyName(a)),a.kind="method",!a.computed){var d=a.key;f||l||this.isClassMutatorStarter()||"Identifier"!==d.type||this.match(L.parenL)||"get"!==d.name&&"set"!==d.name||(c=!0,a.kind=d.name,d=this.parsePropertyName(a));var h=!o&&!a.static&&("Identifier"===d.type&&"constructor"===d.name||"StringLiteral"===d.type&&"constructor"===d.value);h&&(n&&this.raise(d.start,"Duplicate constructor in the same class"),c&&this.raise(d.start,"Constructor can't have get/set modifier"),l&&this.raise(d.start,"Constructor can't be a generator"),f&&this.raise(d.start,"Constructor can't be an async function"),a.kind="constructor",n=!0);var m=a.static&&("Identifier"===d.type&&"prototype"===d.name||"StringLiteral"===d.type&&"prototype"===d.value);m&&this.raise(d.start,"Classes may not have static property named prototype")}if(o&&(r&&this.raise(a.start,"Duplicate constructor call in the same class"),a.kind="constructorCall",r=!0),"constructor"!==a.kind&&"constructorCall"!==a.kind||!a.decorators||this.raise(a.start,"You can't attach decorators to a class constructor"),this.parseClassMethod(s,a,l,f),c){var v="get"===a.kind?0:1;if(a.params.length!==v){var y=a.start;"get"===a.kind?this.raise(y,"getter should have no params"):this.raise(y,"setter should have exactly one param")}}}i.length&&this.raise(this.state.start,"You have trailing decorators with no method"),e.body=this.finishNode(s,"ClassBody"),this.state.strict=t},ee.parseClassProperty=function(e){return this.match(L.eq)?(this.hasPlugin("classProperties")||this.unexpected(),this.next(),e.value=this.parseMaybeAssign()):e.value=null,this.semicolon(),this.finishNode(e,"ClassProperty")},ee.parseClassMethod=function(e,t,r,n){this.parseMethod(t,r,n),e.body.push(this.finishNode(t,"ClassMethod"))},ee.parseClassId=function(e,t,r){this.match(L.name)?e.id=this.parseIdentifier():r||!t?e.id=null:this.unexpected()},ee.parseClassSuper=function(e){e.superClass=this.eat(L._extends)?this.parseExprSubscripts():null},ee.parseExport=function(e){if(this.next(),this.match(L.star)){var t=this.startNode();if(this.next(),!this.hasPlugin("exportExtensions")||!this.eatContextual("as"))return this.parseExportFrom(e,!0),this.finishNode(e,"ExportAllDeclaration");t.exported=this.parseIdentifier(),e.specifiers=[this.finishNode(t,"ExportNamespaceSpecifier")],this.parseExportSpecifiersMaybe(e),this.parseExportFrom(e,!0)}else if(this.hasPlugin("exportExtensions")&&this.isExportDefaultSpecifier()){var r=this.startNode();if(r.exported=this.parseIdentifier(!0),e.specifiers=[this.finishNode(r,"ExportDefaultSpecifier")],this.match(L.comma)&&this.lookahead().type===L.star){this.expect(L.comma);var n=this.startNode();this.expect(L.star),this.expectContextual("as"),n.exported=this.parseIdentifier(),e.specifiers.push(this.finishNode(n,"ExportNamespaceSpecifier"))}else this.parseExportSpecifiersMaybe(e);this.parseExportFrom(e,!0)}else{if(this.eat(L._default)){var i=this.startNode(),s=!1;return this.eat(L._function)?i=this.parseFunction(i,!0,!1,!1,!0):this.match(L._class)?i=this.parseClass(i,!0,!0):(s=!0,i=this.parseMaybeAssign()),e.declaration=i,s&&this.semicolon(),this.checkExport(e,!0,!0),this.finishNode(e,"ExportDefaultDeclaration")}this.state.type.keyword||this.shouldParseExportDeclaration()?(e.specifiers=[],e.source=null,e.declaration=this.parseExportDeclaration(e)):(e.declaration=null,e.specifiers=this.parseExportSpecifiers(),this.parseExportFrom(e))}return this.checkExport(e,!0),this.finishNode(e,"ExportNamedDeclaration")},ee.parseExportDeclaration=function(){return this.parseStatement(!0)},ee.isExportDefaultSpecifier=function(){if(this.match(L.name))return"type"!==this.state.value&&"async"!==this.state.value&&"interface"!==this.state.value;if(!this.match(L._default))return!1;var e=this.lookahead();return e.type===L.comma||e.type===L.name&&"from"===e.value},ee.parseExportSpecifiersMaybe=function(e){this.eat(L.comma)&&(e.specifiers=e.specifiers.concat(this.parseExportSpecifiers()))},ee.parseExportFrom=function(e,t){this.eatContextual("from")?(e.source=this.match(L.string)?this.parseExprAtom():this.unexpected(),this.checkExport(e)):t?this.unexpected():e.source=null,this.semicolon()},ee.shouldParseExportDeclaration=function(){return this.isContextual("async")},ee.checkExport=function(e,t,r){if(t)if(r)this.checkDuplicateExports(e,"default");else if(e.specifiers&&e.specifiers.length)for(var n=e.specifiers,i=Array.isArray(n),s=0,n=i?n:n[Symbol.iterator]();;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;this.checkDuplicateExports(o,o.exported.name)}else if(e.declaration)if("FunctionDeclaration"===e.declaration.type||"ClassDeclaration"===e.declaration.type)this.checkDuplicateExports(e,e.declaration.id.name);else if("VariableDeclaration"===e.declaration.type)for(var u=e.declaration.declarations,l=Array.isArray(u),c=0,u=l?u:u[Symbol.iterator]();;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;this.checkDeclaration(p.id)}if(this.state.decorators.length){var d=e.declaration&&("ClassDeclaration"===e.declaration.type||"ClassExpression"===e.declaration.type);e.declaration&&d||this.raise(e.start,"You can only use decorators on an export when exporting a class"),this.takeDecorators(e.declaration)}},ee.checkDeclaration=function(e){if("ObjectPattern"===e.type)for(var t=e.properties,r=Array.isArray(t),n=0,t=r?t:t[Symbol.iterator]();;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;this.checkDeclaration(s)}else if("ArrayPattern"===e.type)for(var a=e.elements,o=Array.isArray(a),u=0,a=o?a:a[Symbol.iterator]();;){var l;if(o){if(u>=a.length)break;l=a[u++]}else{if(u=a.next(),u.done)break;l=u.value}var c=l;c&&this.checkDeclaration(c)}else"ObjectProperty"===e.type?this.checkDeclaration(e.value):"RestElement"===e.type||"RestProperty"===e.type?this.checkDeclaration(e.argument):"Identifier"===e.type&&this.checkDuplicateExports(e,e.name)},ee.checkDuplicateExports=function(e,t){this.state.exportedIdentifiers.indexOf(t)>-1&&this.raiseDuplicateExportError(e,t),this.state.exportedIdentifiers.push(t)},ee.raiseDuplicateExportError=function(e,t){this.raise(e.start,"default"===t?"Only one default export allowed per module.":"`"+t+"` has already been exported. Exported identifiers must be unique.")},ee.parseExportSpecifiers=function(){var e=[],t=!0,r=void 0;for(this.expect(L.braceL);!this.eat(L.braceR);){if(t)t=!1;else if(this.expect(L.comma),this.eat(L.braceR))break;var n=this.match(L._default);n&&!r&&(r=!0);var i=this.startNode();i.local=this.parseIdentifier(n),i.exported=this.eatContextual("as")?this.parseIdentifier(!0):i.local.__clone(),e.push(this.finishNode(i,"ExportSpecifier"))}return r&&!this.isContextual("from")&&this.unexpected(),e},ee.parseImport=function(e){return this.next(),this.match(L.string)?(e.specifiers=[],e.source=this.parseExprAtom()):(e.specifiers=[],this.parseImportSpecifiers(e),this.expectContextual("from"),e.source=this.match(L.string)?this.parseExprAtom():this.unexpected()),this.semicolon(),this.finishNode(e,"ImportDeclaration")},ee.parseImportSpecifiers=function(e){var t=!0;if(this.match(L.name)){var r=this.state.start,n=this.state.startLoc;if(e.specifiers.push(this.parseImportSpecifierDefault(this.parseIdentifier(),r,n)),!this.eat(L.comma))return}if(this.match(L.star)){var i=this.startNode();return this.next(),this.expectContextual("as"),i.local=this.parseIdentifier(),this.checkLVal(i.local,!0,void 0,"import namespace specifier"),void e.specifiers.push(this.finishNode(i,"ImportNamespaceSpecifier"))}for(this.expect(L.braceL);!this.eat(L.braceR);){if(t)t=!1;else if(this.expect(L.comma),this.eat(L.braceR))break;var s=this.startNode();s.imported=this.parseIdentifier(!0),s.local=this.eatContextual("as")?this.parseIdentifier():s.imported.__clone(),this.checkLVal(s.local,!0,void 0,"import specifier"),e.specifiers.push(this.finishNode(s,"ImportSpecifier"))}},ee.parseImportSpecifierDefault=function(e,t,r){var n=this.startNodeAt(t,r);return n.local=e,this.checkLVal(n.local,!0,void 0,"default import specifier"),this.finishNode(n,"ImportDefaultSpecifier")};var ie=$.prototype;ie.toAssignable=function(e,t,r){if(e)switch(e.type){case"Identifier":case"ObjectPattern":case"ArrayPattern":case"AssignmentPattern":break;case"ObjectExpression":e.type="ObjectPattern";for(var n=e.properties,i=Array.isArray(n),s=0,n=i?n:n[Symbol.iterator]();;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;"ObjectMethod"===o.type?"get"===o.kind||"set"===o.kind?this.raise(o.key.start,"Object pattern can't contain getter or setter"):this.raise(o.key.start,"Object pattern can't contain methods"):this.toAssignable(o,t,"object destructuring pattern")}break;case"ObjectProperty":this.toAssignable(e.value,t,r);break;case"SpreadProperty":e.type="RestProperty";break;case"ArrayExpression":e.type="ArrayPattern",this.toAssignableList(e.elements,t,r);break;case"AssignmentExpression":"="===e.operator?(e.type="AssignmentPattern",delete e.operator):this.raise(e.left.end,"Only '=' operator can be used for specifying default value.");break;case"MemberExpression":if(!t)break;default:var u="Invalid left-hand side"+(r?" in "+r:"expression");this.raise(e.start,u)}return e},ie.toAssignableList=function(e,t,r){var n=e.length;if(n){var i=e[n-1];if(i&&"RestElement"===i.type)--n;else if(i&&"SpreadElement"===i.type){i.type="RestElement";var s=i.argument;this.toAssignable(s,t,r),"Identifier"!==s.type&&"MemberExpression"!==s.type&&"ArrayPattern"!==s.type&&this.unexpected(s.start),--n}}for(var a=0;a<n;a++){var o=e[a];o&&this.toAssignable(o,t,r)}return e},ie.toReferencedList=function(e){return e},ie.parseSpread=function(e){var t=this.startNode();return this.next(),t.argument=this.parseMaybeAssign(!1,e),this.finishNode(t,"SpreadElement")},ie.parseRest=function(){var e=this.startNode();return this.next(),e.argument=this.parseBindingIdentifier(),this.finishNode(e,"RestElement")},ie.shouldAllowYieldIdentifier=function(){return this.match(L._yield)&&!this.state.strict&&!this.state.inGenerator},ie.parseBindingIdentifier=function(){return this.parseIdentifier(this.shouldAllowYieldIdentifier())},ie.parseBindingAtom=function(){switch(this.state.type){case L._yield:(this.state.strict||this.state.inGenerator)&&this.unexpected();case L.name:return this.parseIdentifier(!0);case L.bracketL:var e=this.startNode();return this.next(),e.elements=this.parseBindingList(L.bracketR,!0),this.finishNode(e,"ArrayPattern");case L.braceL:return this.parseObj(!0);default:this.unexpected()}},ie.parseBindingList=function(e,t){for(var r=[],n=!0;!this.eat(e);)if(n?n=!1:this.expect(L.comma),t&&this.match(L.comma))r.push(null);else{if(this.eat(e))break;if(this.match(L.ellipsis)){r.push(this.parseAssignableListItemTypes(this.parseRest())),this.expect(e);break}for(var i=[];this.match(L.at);)i.push(this.parseDecorator());var s=this.parseMaybeDefault();i.length&&(s.decorators=i),this.parseAssignableListItemTypes(s),r.push(this.parseMaybeDefault(s.start,s.loc.start,s))}return r},ie.parseAssignableListItemTypes=function(e){return e},ie.parseMaybeDefault=function(e,t,r){if(t=t||this.state.startLoc,e=e||this.state.start,r=r||this.parseBindingAtom(),!this.eat(L.eq))return r;var n=this.startNodeAt(e,t);return n.left=r,n.right=this.parseMaybeAssign(),this.finishNode(n,"AssignmentPattern")},ie.checkLVal=function(e,t,r,n){switch(e.type){case"Identifier":if(this.checkReservedWord(e.name,e.start,!1,!0),r){var i="_"+e.name;r[i]?this.raise(e.start,"Argument name clash in strict mode"):r[i]=!0}break;case"MemberExpression":t&&this.raise(e.start,(t?"Binding":"Assigning to")+" member expression");break;case"ObjectPattern":for(var s=e.properties,a=Array.isArray(s),o=0,s=a?s:s[Symbol.iterator]();;){var u;if(a){if(o>=s.length)break;u=s[o++]}else{if(o=s.next(),o.done)break;u=o.value}var l=u;"ObjectProperty"===l.type&&(l=l.value),this.checkLVal(l,t,r,"object destructuring pattern")}break;case"ArrayPattern":for(var c=e.elements,f=Array.isArray(c),p=0,c=f?c:c[Symbol.iterator]();;){var d;if(f){if(p>=c.length)break;d=c[p++]}else{if(p=c.next(),p.done)break;d=p.value}var h=d;h&&this.checkLVal(h,t,r,"array destructuring pattern")}break;case"AssignmentPattern":this.checkLVal(e.left,t,r,"assignment pattern");break;case"RestProperty":this.checkLVal(e.argument,t,r,"rest property");break;case"RestElement":this.checkLVal(e.argument,t,r,"rest element");break;default:var m=(t?"Binding invalid":"Invalid")+" left-hand side"+(n?" in "+n:"expression");this.raise(e.start,m)}};var se=$.prototype;se.checkPropClash=function(e,t){if(!e.computed){var r=e.key,n=void 0;switch(r.type){case"Identifier":n=r.name;break;case"StringLiteral":case"NumericLiteral":n=String(r.value);break;default:return}"__proto__"!==n||e.kind||(t.proto&&this.raise(r.start,"Redefinition of __proto__ property"),t.proto=!0)}},se.parseExpression=function(e,t){var r=this.state.start,n=this.state.startLoc,i=this.parseMaybeAssign(e,t);if(this.match(L.comma)){var s=this.startNodeAt(r,n);for(s.expressions=[i];this.eat(L.comma);)s.expressions.push(this.parseMaybeAssign(e,t));return this.toReferencedList(s.expressions),this.finishNode(s,"SequenceExpression")}return i},se.parseMaybeAssign=function(e,t,r,n){var i=this.state.start,s=this.state.startLoc;if(this.match(L._yield)&&this.state.inGenerator){var a=this.parseYield();return r&&(a=r.call(this,a,i,s)),a}var o=void 0;t?o=!1:(t={start:0},o=!0),(this.match(L.parenL)||this.match(L.name))&&(this.state.potentialArrowAt=this.state.start);var u=this.parseMaybeConditional(e,t,n);if(r&&(u=r.call(this,u,i,s)),this.state.type.isAssign){var l=this.startNodeAt(i,s);if(l.operator=this.state.value,l.left=this.match(L.eq)?this.toAssignable(u,void 0,"assignment expression"):u,t.start=0,this.checkLVal(u,void 0,void 0,"assignment expression"),u.extra&&u.extra.parenthesized){var c=void 0;"ObjectPattern"===u.type?c="`({a}) = 0` use `({a} = 0)`":"ArrayPattern"===u.type&&(c="`([a]) = 0` use `([a] = 0)`"),c&&this.raise(u.start,"You're trying to assign to a parenthesized expression, eg. instead of "+c)}return this.next(),l.right=this.parseMaybeAssign(e),this.finishNode(l,"AssignmentExpression")}return o&&t.start&&this.unexpected(t.start),u},se.parseMaybeConditional=function(e,t,r){var n=this.state.start,i=this.state.startLoc,s=this.parseExprOps(e,t);return t&&t.start?s:this.parseConditional(s,e,n,i,r)},se.parseConditional=function(e,t,r,n){if(this.eat(L.question)){var i=this.startNodeAt(r,n);return i.test=e,i.consequent=this.parseMaybeAssign(),this.expect(L.colon),i.alternate=this.parseMaybeAssign(t),this.finishNode(i,"ConditionalExpression")}return e},se.parseExprOps=function(e,t){var r=this.state.start,n=this.state.startLoc,i=this.parseMaybeUnary(t);return t&&t.start?i:this.parseExprOp(i,r,n,-1,e)},se.parseExprOp=function(e,t,r,n,i){var s=this.state.type.binop;if(!(null==s||i&&this.match(L._in))&&s>n){var a=this.startNodeAt(t,r);a.left=e,a.operator=this.state.value,"**"!==a.operator||"UnaryExpression"!==e.type||!e.extra||e.extra.parenthesizedArgument||e.extra.parenthesized||this.raise(e.argument.start,"Illegal expression. Wrap left hand side or entire exponentiation in parentheses.");var o=this.state.type;this.next();var u=this.state.start,l=this.state.startLoc;return a.right=this.parseExprOp(this.parseMaybeUnary(),u,l,o.rightAssociative?s-1:s,i),this.finishNode(a,o===L.logicalOR||o===L.logicalAND?"LogicalExpression":"BinaryExpression"),this.parseExprOp(a,t,r,n,i)}return e},se.parseMaybeUnary=function(e){if(this.state.type.prefix){var t=this.startNode(),r=this.match(L.incDec);t.operator=this.state.value,t.prefix=!0,this.next();var n=this.state.type;return t.argument=this.parseMaybeUnary(),this.addExtra(t,"parenthesizedArgument",!(n!==L.parenL||t.argument.extra&&t.argument.extra.parenthesized)),e&&e.start&&this.unexpected(e.start),r?this.checkLVal(t.argument,void 0,void 0,"prefix operation"):this.state.strict&&"delete"===t.operator&&"Identifier"===t.argument.type&&this.raise(t.start,"Deleting local variable in strict mode"),this.finishNode(t,r?"UpdateExpression":"UnaryExpression")}var i=this.state.start,s=this.state.startLoc,a=this.parseExprSubscripts(e);if(e&&e.start)return a;for(;this.state.type.postfix&&!this.canInsertSemicolon();){var o=this.startNodeAt(i,s);o.operator=this.state.value,o.prefix=!1,o.argument=a,this.checkLVal(a,void 0,void 0,"postfix operation"),
+this.next(),a=this.finishNode(o,"UpdateExpression")}return a},se.parseExprSubscripts=function(e){var t=this.state.start,r=this.state.startLoc,n=this.state.potentialArrowAt,i=this.parseExprAtom(e);return"ArrowFunctionExpression"===i.type&&i.start===n?i:e&&e.start?i:this.parseSubscripts(i,t,r)},se.parseSubscripts=function(e,t,r,n){for(;;){if(!n&&this.eat(L.doubleColon)){var i=this.startNodeAt(t,r);return i.object=e,i.callee=this.parseNoCallExpr(),this.parseSubscripts(this.finishNode(i,"BindExpression"),t,r,n)}if(this.eat(L.dot)){var s=this.startNodeAt(t,r);s.object=e,s.property=this.parseIdentifier(!0),s.computed=!1,e=this.finishNode(s,"MemberExpression")}else if(this.eat(L.bracketL)){var a=this.startNodeAt(t,r);a.object=e,a.property=this.parseExpression(),a.computed=!0,this.expect(L.bracketR),e=this.finishNode(a,"MemberExpression")}else if(!n&&this.match(L.parenL)){var o=this.state.potentialArrowAt===e.start&&"Identifier"===e.type&&"async"===e.name&&!this.canInsertSemicolon();this.next();var u=this.startNodeAt(t,r);if(u.callee=e,u.arguments=this.parseCallExpressionArguments(L.parenR,o),"Import"===u.callee.type&&1!==u.arguments.length&&this.raise(u.start,"import() requires exactly one argument"),e=this.finishNode(u,"CallExpression"),o&&this.shouldParseAsyncArrow())return this.parseAsyncArrowFromCallExpression(this.startNodeAt(t,r),u);this.toReferencedList(u.arguments)}else{if(!this.match(L.backQuote))return e;var l=this.startNodeAt(t,r);l.tag=e,l.quasi=this.parseTemplate(),e=this.finishNode(l,"TaggedTemplateExpression")}}},se.parseCallExpressionArguments=function(e,t){for(var r=void 0,n=[],i=!0;!this.eat(e);){if(i)i=!1;else if(this.expect(L.comma),this.eat(e))break;this.match(L.parenL)&&!r&&(r=this.state.start),n.push(this.parseExprListItem(void 0,t?{start:0}:void 0))}return t&&r&&this.shouldParseAsyncArrow()&&this.unexpected(),n},se.shouldParseAsyncArrow=function(){return this.match(L.arrow)},se.parseAsyncArrowFromCallExpression=function(e,t){return this.expect(L.arrow),this.parseArrowExpression(e,t.arguments,!0)},se.parseNoCallExpr=function(){var e=this.state.start,t=this.state.startLoc;return this.parseSubscripts(this.parseExprAtom(),e,t,!0)},se.parseExprAtom=function(e){var t=void 0,r=this.state.potentialArrowAt===this.state.start;switch(this.state.type){case L._super:return this.state.inMethod||this.options.allowSuperOutsideMethod||this.raise(this.state.start,"'super' outside of function or class"),t=this.startNode(),this.next(),this.match(L.parenL)||this.match(L.bracketL)||this.match(L.dot)||this.unexpected(),this.match(L.parenL)&&"constructor"!==this.state.inMethod&&!this.options.allowSuperOutsideMethod&&this.raise(t.start,"super() outside of class constructor"),this.finishNode(t,"Super");case L._import:return this.hasPlugin("dynamicImport")||this.unexpected(),t=this.startNode(),this.next(),this.match(L.parenL)||this.unexpected(null,L.parenL),this.finishNode(t,"Import");case L._this:return t=this.startNode(),this.next(),this.finishNode(t,"ThisExpression");case L._yield:this.state.inGenerator&&this.unexpected();case L.name:t=this.startNode();var n="await"===this.state.value&&this.state.inAsync,i=this.shouldAllowYieldIdentifier(),s=this.parseIdentifier(n||i);if("await"===s.name){if(this.state.inAsync||this.inModule)return this.parseAwait(t)}else{if("async"===s.name&&this.match(L._function)&&!this.canInsertSemicolon())return this.next(),this.parseFunction(t,!1,!1,!0);if(r&&"async"===s.name&&this.match(L.name)){var a=[this.parseIdentifier()];return this.expect(L.arrow),this.parseArrowExpression(t,a,!0)}}return r&&!this.canInsertSemicolon()&&this.eat(L.arrow)?this.parseArrowExpression(t,[s]):s;case L._do:if(this.hasPlugin("doExpressions")){var o=this.startNode();this.next();var u=this.state.inFunction,l=this.state.labels;return this.state.labels=[],this.state.inFunction=!1,o.body=this.parseBlock(!1,!0),this.state.inFunction=u,this.state.labels=l,this.finishNode(o,"DoExpression")}case L.regexp:var c=this.state.value;return t=this.parseLiteral(c.value,"RegExpLiteral"),t.pattern=c.pattern,t.flags=c.flags,t;case L.num:return this.parseLiteral(this.state.value,"NumericLiteral");case L.string:return this.parseLiteral(this.state.value,"StringLiteral");case L._null:return t=this.startNode(),this.next(),this.finishNode(t,"NullLiteral");case L._true:case L._false:return t=this.startNode(),t.value=this.match(L._true),this.next(),this.finishNode(t,"BooleanLiteral");case L.parenL:return this.parseParenAndDistinguishExpression(null,null,r);case L.bracketL:return t=this.startNode(),this.next(),t.elements=this.parseExprList(L.bracketR,!0,e),this.toReferencedList(t.elements),this.finishNode(t,"ArrayExpression");case L.braceL:return this.parseObj(!1,e);case L._function:return this.parseFunctionExpression();case L.at:this.parseDecorators();case L._class:return t=this.startNode(),this.takeDecorators(t),this.parseClass(t,!1);case L._new:return this.parseNew();case L.backQuote:return this.parseTemplate();case L.doubleColon:t=this.startNode(),this.next(),t.object=null;var f=t.callee=this.parseNoCallExpr();if("MemberExpression"===f.type)return this.finishNode(t,"BindExpression");this.raise(f.start,"Binding should be performed on object property.");default:this.unexpected()}},se.parseFunctionExpression=function(){var e=this.startNode(),t=this.parseIdentifier(!0);return this.state.inGenerator&&this.eat(L.dot)&&this.hasPlugin("functionSent")?this.parseMetaProperty(e,t,"sent"):this.parseFunction(e,!1)},se.parseMetaProperty=function(e,t,r){return e.meta=t,e.property=this.parseIdentifier(!0),e.property.name!==r&&this.raise(e.property.start,"The only valid meta property for new is "+t.name+"."+r),this.finishNode(e,"MetaProperty")},se.parseLiteral=function(e,t){var r=this.startNode();return this.addExtra(r,"rawValue",e),this.addExtra(r,"raw",this.input.slice(this.state.start,this.state.end)),r.value=e,this.next(),this.finishNode(r,t)},se.parseParenExpression=function(){this.expect(L.parenL);var e=this.parseExpression();return this.expect(L.parenR),e},se.parseParenAndDistinguishExpression=function(e,t,r){e=e||this.state.start,t=t||this.state.startLoc;var n=void 0;this.expect(L.parenL);for(var i=this.state.start,s=this.state.startLoc,a=[],o=!0,u={start:0},l=void 0,c=void 0,f={start:0};!this.match(L.parenR);){if(o)o=!1;else if(this.expect(L.comma,f.start||null),this.match(L.parenR)){c=this.state.start;break}if(this.match(L.ellipsis)){var p=this.state.start,d=this.state.startLoc;l=this.state.start,a.push(this.parseParenItem(this.parseRest(),d,p));break}a.push(this.parseMaybeAssign(!1,u,this.parseParenItem,f))}var h=this.state.start,m=this.state.startLoc;this.expect(L.parenR);var v=this.startNodeAt(e,t);if(r&&this.shouldParseArrow()&&(v=this.parseArrow(v))){for(var y=a,g=Array.isArray(y),b=0,y=g?y:y[Symbol.iterator]();;){var E;if(g){if(b>=y.length)break;E=y[b++]}else{if(b=y.next(),b.done)break;E=b.value}var x=E;x.extra&&x.extra.parenthesized&&this.unexpected(x.extra.parenStart)}return this.parseArrowExpression(v,a)}return a.length||this.unexpected(this.state.lastTokStart),c&&this.unexpected(c),l&&this.unexpected(l),u.start&&this.unexpected(u.start),f.start&&this.unexpected(f.start),a.length>1?(n=this.startNodeAt(i,s),n.expressions=a,this.toReferencedList(n.expressions),this.finishNodeAt(n,"SequenceExpression",h,m)):n=a[0],this.addExtra(n,"parenthesized",!0),this.addExtra(n,"parenStart",e),n},se.shouldParseArrow=function(){return!this.canInsertSemicolon()},se.parseArrow=function(e){if(this.eat(L.arrow))return e},se.parseParenItem=function(e){return e},se.parseNew=function(){var e=this.startNode(),t=this.parseIdentifier(!0);return this.eat(L.dot)?this.parseMetaProperty(e,t,"target"):(e.callee=this.parseNoCallExpr(),this.eat(L.parenL)?(e.arguments=this.parseExprList(L.parenR),this.toReferencedList(e.arguments)):e.arguments=[],this.finishNode(e,"NewExpression"))},se.parseTemplateElement=function(){var e=this.startNode();return e.value={raw:this.input.slice(this.state.start,this.state.end).replace(/\r\n?/g,"\n"),cooked:this.state.value},this.next(),e.tail=this.match(L.backQuote),this.finishNode(e,"TemplateElement")},se.parseTemplate=function(){var e=this.startNode();this.next(),e.expressions=[];var t=this.parseTemplateElement();for(e.quasis=[t];!t.tail;)this.expect(L.dollarBraceL),e.expressions.push(this.parseExpression()),this.expect(L.braceR),e.quasis.push(t=this.parseTemplateElement());return this.next(),this.finishNode(e,"TemplateLiteral")},se.parseObj=function(e,t){var r=[],n=Object.create(null),i=!0,s=this.startNode();s.properties=[],this.next();for(var a=null;!this.eat(L.braceR);){if(i)i=!1;else if(this.expect(L.comma),this.eat(L.braceR))break;for(;this.match(L.at);)r.push(this.parseDecorator());var o=this.startNode(),u=!1,l=!1,c=void 0,f=void 0;if(r.length&&(o.decorators=r,r=[]),this.hasPlugin("objectRestSpread")&&this.match(L.ellipsis)){if(o=this.parseSpread(),o.type=e?"RestProperty":"SpreadProperty",s.properties.push(o),!e)continue;var p=this.state.start;if(null===a){if(this.eat(L.braceR))break;if(this.match(L.comma)&&this.lookahead().type===L.braceR)continue;a=p;continue}this.unexpected(a,"Cannot have multiple rest elements when destructuring")}if(o.method=!1,o.shorthand=!1,(e||t)&&(c=this.state.start,f=this.state.startLoc),e||(u=this.eat(L.star)),!e&&this.isContextual("async")){u&&this.unexpected();var d=this.parseIdentifier();this.match(L.colon)||this.match(L.parenL)||this.match(L.braceR)||this.match(L.eq)||this.match(L.comma)?o.key=d:(l=!0,this.hasPlugin("asyncGenerators")&&(u=this.eat(L.star)),this.parsePropertyName(o))}else this.parsePropertyName(o);this.parseObjPropValue(o,c,f,u,l,e,t),this.checkPropClash(o,n),o.shorthand&&this.addExtra(o,"shorthand",!0),s.properties.push(o)}return null!==a&&this.unexpected(a,"The rest element has to be the last element when destructuring"),r.length&&this.raise(this.state.start,"You have trailing decorators with no property"),this.finishNode(s,e?"ObjectPattern":"ObjectExpression")},se.parseObjPropValue=function(e,t,r,n,i,s,a){if(i||n||this.match(L.parenL))return s&&this.unexpected(),e.kind="method",e.method=!0,this.parseMethod(e,n,i),this.finishNode(e,"ObjectMethod");if(this.eat(L.colon))return e.value=s?this.parseMaybeDefault(this.state.start,this.state.startLoc):this.parseMaybeAssign(!1,a),this.finishNode(e,"ObjectProperty");if(!(s||e.computed||"Identifier"!==e.key.type||"get"!==e.key.name&&"set"!==e.key.name||this.match(L.comma)||this.match(L.braceR))){(n||i)&&this.unexpected(),e.kind=e.key.name,this.parsePropertyName(e),this.parseMethod(e,!1);var o="get"===e.kind?0:1;if(e.params.length!==o){var u=e.start;"get"===e.kind?this.raise(u,"getter should have no params"):this.raise(u,"setter should have exactly one param")}return this.finishNode(e,"ObjectMethod")}return e.computed||"Identifier"!==e.key.type?void this.unexpected():(s?(this.checkReservedWord(e.key.name,e.key.start,!0,!0),e.value=this.parseMaybeDefault(t,r,e.key.__clone())):this.match(L.eq)&&a?(a.start||(a.start=this.state.start),e.value=this.parseMaybeDefault(t,r,e.key.__clone())):e.value=e.key.__clone(),e.shorthand=!0,this.finishNode(e,"ObjectProperty"))},se.parsePropertyName=function(e){return this.eat(L.bracketL)?(e.computed=!0,e.key=this.parseMaybeAssign(),this.expect(L.bracketR),e.key):(e.computed=!1,e.key=this.match(L.num)||this.match(L.string)?this.parseExprAtom():this.parseIdentifier(!0))},se.initFunction=function(e,t){e.id=null,e.generator=!1,e.expression=!1,e.async=!!t},se.parseMethod=function(e,t,r){var n=this.state.inMethod;return this.state.inMethod=e.kind||!0,this.initFunction(e,r),this.expect(L.parenL),e.params=this.parseBindingList(L.parenR),e.generator=t,this.parseFunctionBody(e),this.state.inMethod=n,e},se.parseArrowExpression=function(e,t,r){return this.initFunction(e,r),e.params=this.toAssignableList(t,!0,"arrow function parameters"),this.parseFunctionBody(e,!0),this.finishNode(e,"ArrowFunctionExpression")},se.parseFunctionBody=function(e,t){var r=t&&!this.match(L.braceL),n=this.state.inAsync;if(this.state.inAsync=e.async,r)e.body=this.parseMaybeAssign(),e.expression=!0;else{var i=this.state.inFunction,s=this.state.inGenerator,a=this.state.labels;this.state.inFunction=!0,this.state.inGenerator=e.generator,this.state.labels=[],e.body=this.parseBlock(!0),e.expression=!1,this.state.inFunction=i,this.state.inGenerator=s,this.state.labels=a}this.state.inAsync=n;var o=this.state.strict,u=!1;if(t&&(o=!0),!r&&e.body.directives.length)for(var l=e.body.directives,c=Array.isArray(l),f=0,l=c?l:l[Symbol.iterator]();;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var d=p;if("use strict"===d.value.value){u=!0,o=!0;break}}if(u&&e.id&&"Identifier"===e.id.type&&"yield"===e.id.name&&this.raise(e.id.start,"Binding yield in strict mode"),o){var h=Object.create(null),m=this.state.strict;u&&(this.state.strict=!0),e.id&&this.checkLVal(e.id,!0,void 0,"function name");for(var v=e.params,y=Array.isArray(v),g=0,v=y?v:v[Symbol.iterator]();;){var b;if(y){if(g>=v.length)break;b=v[g++]}else{if(g=v.next(),g.done)break;b=g.value}var E=b;u&&"Identifier"!==E.type&&this.raise(E.start,"Non-simple parameter in strict mode"),this.checkLVal(E,!0,h,"function parameter list")}this.state.strict=m}},se.parseExprList=function(e,t,r){for(var n=[],i=!0;!this.eat(e);){if(i)i=!1;else if(this.expect(L.comma),this.eat(e))break;n.push(this.parseExprListItem(t,r))}return n},se.parseExprListItem=function(e,t){var r=void 0;return r=e&&this.match(L.comma)?null:this.match(L.ellipsis)?this.parseSpread(t):this.parseMaybeAssign(!1,t,this.parseParenItem)},se.parseIdentifier=function(e){var t=this.startNode();return this.match(L.name)?(e||this.checkReservedWord(this.state.value,this.state.start,!1,!1),t.name=this.state.value):e&&this.state.type.keyword?t.name=this.state.type.keyword:this.unexpected(),!e&&"await"===t.name&&this.state.inAsync&&this.raise(t.start,"invalid use of await inside of an async function"),t.loc.identifierName=t.name,this.next(),this.finishNode(t,"Identifier")},se.checkReservedWord=function(e,t,r,n){(this.isReservedWord(e)||r&&this.isKeyword(e))&&this.raise(t,e+" is a reserved word"),this.state.strict&&(C.strict(e)||n&&C.strictBind(e))&&this.raise(t,e+" is a reserved word in strict mode")},se.parseAwait=function(e){return this.state.inAsync||this.unexpected(),this.match(L.star)&&this.raise(e.start,"await* has been removed from the async functions proposal. Use Promise.all() instead."),e.argument=this.parseMaybeUnary(),this.finishNode(e,"AwaitExpression")},se.parseYield=function(){var e=this.startNode();return this.next(),this.match(L.semi)||this.canInsertSemicolon()||!this.match(L.star)&&!this.state.type.startsExpr?(e.delegate=!1,e.argument=null):(e.delegate=this.eat(L.star),e.argument=this.parseMaybeAssign()),this.finishNode(e,"YieldExpression")};var ae=$.prototype,oe=["leadingComments","trailingComments","innerComments"],ue=function(){function e(t,r,n){E(this,e),this.type="",this.start=t,this.end=0,this.loc=new K(r),n&&(this.loc.filename=n)}return e.prototype.__clone=function(){var t=new e;for(var r in this)oe.indexOf(r)<0&&(t[r]=this[r]);return t},e}();ae.startNode=function(){return new ue(this.state.start,this.state.startLoc,this.filename)},ae.startNodeAt=function(e,t){return new ue(e,t,this.filename)},ae.finishNode=function(e,t){return x.call(this,e,t,this.state.lastTokEnd,this.state.lastTokEndLoc)},ae.finishNodeAt=function(e,t,r,n){return x.call(this,e,t,r,n)};var le=$.prototype;le.raise=function(e,t){var r=d(this.input,e);t+=" ("+r.line+":"+r.column+")";var n=new SyntaxError(t);throw (n.pos=e, n.loc=r, n)};var ce=$.prototype;ce.addComment=function(e){this.filename&&(e.loc.filename=this.filename),this.state.trailingComments.push(e),this.state.leadingComments.push(e)},ce.processComment=function(e){if(!("Program"===e.type&&e.body.length>0)){var t=this.state.commentStack,r=void 0,n=void 0,i=void 0,s=void 0;if(this.state.trailingComments.length>0)this.state.trailingComments[0].start>=e.end?(n=this.state.trailingComments,this.state.trailingComments=[]):this.state.trailingComments.length=0;else{var a=A(t);t.length>0&&a.trailingComments&&a.trailingComments[0].start>=e.end&&(n=a.trailingComments,a.trailingComments=null)}for(;t.length>0&&A(t).start>=e.start;)r=t.pop();if(r){if(r.leadingComments)if(r!==e&&A(r.leadingComments).end<=e.start)e.leadingComments=r.leadingComments,r.leadingComments=null;else for(i=r.leadingComments.length-2;i>=0;--i)if(r.leadingComments[i].end<=e.start){e.leadingComments=r.leadingComments.splice(0,i+1);break}}else if(this.state.leadingComments.length>0)if(A(this.state.leadingComments).end<=e.start){if(this.state.commentPreviousNode)for(s=0;s<this.state.leadingComments.length;s++)this.state.leadingComments[s].end<this.state.commentPreviousNode.end&&(this.state.leadingComments.splice(s,1),s--);this.state.leadingComments.length>0&&(e.leadingComments=this.state.leadingComments,this.state.leadingComments=[])}else{for(i=0;i<this.state.leadingComments.length&&!(this.state.leadingComments[i].end>e.start);i++);e.leadingComments=this.state.leadingComments.slice(0,i),0===e.leadingComments.length&&(e.leadingComments=null),n=this.state.leadingComments.slice(i),0===n.length&&(n=null)}this.state.commentPreviousNode=e,n&&(n.length&&n[0].start>=e.start&&A(n).end<=e.end?e.innerComments=n:e.trailingComments=n),t.push(e)}};var fe=$.prototype;fe.flowParseTypeInitialiser=function(e,t){var r=this.state.inType;this.state.inType=!0,this.expect(e||L.colon),t&&(this.match(L.bitwiseAND)||this.match(L.bitwiseOR))&&this.next();var n=this.flowParseType();return this.state.inType=r,n},fe.flowParseDeclareClass=function(e){return this.next(),this.flowParseInterfaceish(e,!0),this.finishNode(e,"DeclareClass")},fe.flowParseDeclareFunction=function(e){this.next();var t=e.id=this.parseIdentifier(),r=this.startNode(),n=this.startNode();this.isRelational("<")?r.typeParameters=this.flowParseTypeParameterDeclaration():r.typeParameters=null,this.expect(L.parenL);var i=this.flowParseFunctionTypeParams();return r.params=i.params,r.rest=i.rest,this.expect(L.parenR),r.returnType=this.flowParseTypeInitialiser(),n.typeAnnotation=this.finishNode(r,"FunctionTypeAnnotation"),t.typeAnnotation=this.finishNode(n,"TypeAnnotation"),this.finishNode(t,t.type),this.semicolon(),this.finishNode(e,"DeclareFunction")},fe.flowParseDeclare=function(e){return this.match(L._class)?this.flowParseDeclareClass(e):this.match(L._function)?this.flowParseDeclareFunction(e):this.match(L._var)?this.flowParseDeclareVariable(e):this.isContextual("module")?this.lookahead().type===L.dot?this.flowParseDeclareModuleExports(e):this.flowParseDeclareModule(e):this.isContextual("type")?this.flowParseDeclareTypeAlias(e):this.isContextual("interface")?this.flowParseDeclareInterface(e):void this.unexpected()},fe.flowParseDeclareVariable=function(e){return this.next(),e.id=this.flowParseTypeAnnotatableIdentifier(),this.semicolon(),this.finishNode(e,"DeclareVariable")},fe.flowParseDeclareModule=function(e){this.next(),this.match(L.string)?e.id=this.parseExprAtom():e.id=this.parseIdentifier();var t=e.body=this.startNode(),r=t.body=[];for(this.expect(L.braceL);!this.match(L.braceR);){var n=this.startNode();this.expectContextual("declare","Unexpected token. Only declares are allowed inside declare module"),r.push(this.flowParseDeclare(n))}return this.expect(L.braceR),this.finishNode(t,"BlockStatement"),this.finishNode(e,"DeclareModule")},fe.flowParseDeclareModuleExports=function(e){return this.expectContextual("module"),this.expect(L.dot),this.expectContextual("exports"),e.typeAnnotation=this.flowParseTypeAnnotation(),this.semicolon(),this.finishNode(e,"DeclareModuleExports")},fe.flowParseDeclareTypeAlias=function(e){return this.next(),this.flowParseTypeAlias(e),this.finishNode(e,"DeclareTypeAlias")},fe.flowParseDeclareInterface=function(e){return this.next(),this.flowParseInterfaceish(e),this.finishNode(e,"DeclareInterface")},fe.flowParseInterfaceish=function(e,t){if(e.id=this.parseIdentifier(),this.isRelational("<")?e.typeParameters=this.flowParseTypeParameterDeclaration():e.typeParameters=null,e.extends=[],e.mixins=[],this.eat(L._extends))do e.extends.push(this.flowParseInterfaceExtends());while(this.eat(L.comma));if(this.isContextual("mixins")){this.next();do e.mixins.push(this.flowParseInterfaceExtends());while(this.eat(L.comma))}e.body=this.flowParseObjectType(t)},fe.flowParseInterfaceExtends=function(){var e=this.startNode();return e.id=this.flowParseQualifiedTypeIdentifier(),this.isRelational("<")?e.typeParameters=this.flowParseTypeParameterInstantiation():e.typeParameters=null,this.finishNode(e,"InterfaceExtends")},fe.flowParseInterface=function(e){return this.flowParseInterfaceish(e,!1),this.finishNode(e,"InterfaceDeclaration")},fe.flowParseTypeAlias=function(e){return e.id=this.parseIdentifier(),this.isRelational("<")?e.typeParameters=this.flowParseTypeParameterDeclaration():e.typeParameters=null,e.right=this.flowParseTypeInitialiser(L.eq,!0),this.semicolon(),this.finishNode(e,"TypeAlias")},fe.flowParseTypeParameter=function(){var e=this.startNode(),t=this.flowParseVariance(),r=this.flowParseTypeAnnotatableIdentifier();return e.name=r.name,e.variance=t,e.bound=r.typeAnnotation,this.match(L.eq)&&(this.eat(L.eq),e.default=this.flowParseType()),this.finishNode(e,"TypeParameter")},fe.flowParseTypeParameterDeclaration=function(){var e=this.state.inType,t=this.startNode();t.params=[],this.state.inType=!0,this.isRelational("<")||this.match(L.jsxTagStart)?this.next():this.unexpected();do t.params.push(this.flowParseTypeParameter()),this.isRelational(">")||this.expect(L.comma);while(!this.isRelational(">"));return this.expectRelational(">"),this.state.inType=e,this.finishNode(t,"TypeParameterDeclaration")},fe.flowParseTypeParameterInstantiation=function(){var e=this.startNode(),t=this.state.inType;for(e.params=[],this.state.inType=!0,this.expectRelational("<");!this.isRelational(">");)e.params.push(this.flowParseType()),this.isRelational(">")||this.expect(L.comma);return this.expectRelational(">"),this.state.inType=t,this.finishNode(e,"TypeParameterInstantiation")},fe.flowParseObjectPropertyKey=function(){return this.match(L.num)||this.match(L.string)?this.parseExprAtom():this.parseIdentifier(!0)},fe.flowParseObjectTypeIndexer=function(e,t,r){return e.static=t,this.expect(L.bracketL),this.lookahead().type===L.colon?(e.id=this.flowParseObjectPropertyKey(),e.key=this.flowParseTypeInitialiser()):(e.id=null,e.key=this.flowParseType()),this.expect(L.bracketR),e.value=this.flowParseTypeInitialiser(),e.variance=r,this.flowObjectTypeSemicolon(),this.finishNode(e,"ObjectTypeIndexer")},fe.flowParseObjectTypeMethodish=function(e){for(e.params=[],e.rest=null,e.typeParameters=null,this.isRelational("<")&&(e.typeParameters=this.flowParseTypeParameterDeclaration()),this.expect(L.parenL);this.match(L.name);)e.params.push(this.flowParseFunctionTypeParam()),this.match(L.parenR)||this.expect(L.comma);return this.eat(L.ellipsis)&&(e.rest=this.flowParseFunctionTypeParam()),this.expect(L.parenR),e.returnType=this.flowParseTypeInitialiser(),this.finishNode(e,"FunctionTypeAnnotation")},fe.flowParseObjectTypeMethod=function(e,t,r,n){var i=this.startNodeAt(e,t);return i.value=this.flowParseObjectTypeMethodish(this.startNodeAt(e,t)),i.static=r,i.key=n,i.optional=!1,this.flowObjectTypeSemicolon(),this.finishNode(i,"ObjectTypeProperty")},fe.flowParseObjectTypeCallProperty=function(e,t){var r=this.startNode();return e.static=t,e.value=this.flowParseObjectTypeMethodish(r),this.flowObjectTypeSemicolon(),this.finishNode(e,"ObjectTypeCallProperty")},fe.flowParseObjectType=function(e,t){var r=this.state.inType;this.state.inType=!0;var n=this.startNode(),i=void 0,s=void 0,a=!1;n.callProperties=[],n.properties=[],n.indexers=[];var o=void 0,u=void 0;for(t&&this.match(L.braceBarL)?(this.expect(L.braceBarL),o=L.braceBarR,u=!0):(this.expect(L.braceL),o=L.braceR,u=!1),n.exact=u;!this.match(o);){var l=!1,c=this.state.start,f=this.state.startLoc;i=this.startNode(),e&&this.isContextual("static")&&this.lookahead().type!==L.colon&&(this.next(),a=!0);var p=this.state.start,d=this.flowParseVariance();this.match(L.bracketL)?n.indexers.push(this.flowParseObjectTypeIndexer(i,a,d)):this.match(L.parenL)||this.isRelational("<")?(d&&this.unexpected(p),n.callProperties.push(this.flowParseObjectTypeCallProperty(i,e))):(s=this.flowParseObjectPropertyKey(),this.isRelational("<")||this.match(L.parenL)?(d&&this.unexpected(p),n.properties.push(this.flowParseObjectTypeMethod(c,f,a,s))):(this.eat(L.question)&&(l=!0),i.key=s,i.value=this.flowParseTypeInitialiser(),i.optional=l,i.static=a,i.variance=d,this.flowObjectTypeSemicolon(),n.properties.push(this.finishNode(i,"ObjectTypeProperty")))),a=!1}this.expect(o);var h=this.finishNode(n,"ObjectTypeAnnotation");return this.state.inType=r,h},fe.flowObjectTypeSemicolon=function(){this.eat(L.semi)||this.eat(L.comma)||this.match(L.braceR)||this.match(L.braceBarR)||this.unexpected()},fe.flowParseQualifiedTypeIdentifier=function(e,t,r){e=e||this.state.start,t=t||this.state.startLoc;for(var n=r||this.parseIdentifier();this.eat(L.dot);){var i=this.startNodeAt(e,t);i.qualification=n,i.id=this.parseIdentifier(),n=this.finishNode(i,"QualifiedTypeIdentifier")}return n},fe.flowParseGenericType=function(e,t,r){var n=this.startNodeAt(e,t);return n.typeParameters=null,n.id=this.flowParseQualifiedTypeIdentifier(e,t,r),this.isRelational("<")&&(n.typeParameters=this.flowParseTypeParameterInstantiation()),this.finishNode(n,"GenericTypeAnnotation")},fe.flowParseTypeofType=function(){var e=this.startNode();return this.expect(L._typeof),e.argument=this.flowParsePrimaryType(),this.finishNode(e,"TypeofTypeAnnotation")},fe.flowParseTupleType=function(){var e=this.startNode();for(e.types=[],this.expect(L.bracketL);this.state.pos<this.input.length&&!this.match(L.bracketR)&&(e.types.push(this.flowParseType()),!this.match(L.bracketR));)this.expect(L.comma);return this.expect(L.bracketR),this.finishNode(e,"TupleTypeAnnotation")},fe.flowParseFunctionTypeParam=function(){var e=null,t=!1,r=null,n=this.startNode(),i=this.lookahead();return i.type===L.colon||i.type===L.question?(e=this.parseIdentifier(),this.eat(L.question)&&(t=!0),r=this.flowParseTypeInitialiser()):r=this.flowParseType(),n.name=e,n.optional=t,n.typeAnnotation=r,this.finishNode(n,"FunctionTypeParam")},fe.reinterpretTypeAsFunctionTypeParam=function(e){var t=this.startNodeAt(e.start,e.loc);return t.name=null,t.optional=!1,t.typeAnnotation=e,this.finishNode(t,"FunctionTypeParam")},fe.flowParseFunctionTypeParams=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t={params:e,rest:null};this.match(L.name);)t.params.push(this.flowParseFunctionTypeParam()),this.match(L.parenR)||this.expect(L.comma);return this.eat(L.ellipsis)&&(t.rest=this.flowParseFunctionTypeParam()),t},fe.flowIdentToTypeAnnotation=function(e,t,r,n){switch(n.name){case"any":return this.finishNode(r,"AnyTypeAnnotation");case"void":return this.finishNode(r,"VoidTypeAnnotation");case"bool":case"boolean":return this.finishNode(r,"BooleanTypeAnnotation");case"mixed":return this.finishNode(r,"MixedTypeAnnotation");case"empty":return this.finishNode(r,"EmptyTypeAnnotation");case"number":return this.finishNode(r,"NumberTypeAnnotation");case"string":return this.finishNode(r,"StringTypeAnnotation");default:return this.flowParseGenericType(e,t,n)}},fe.flowParsePrimaryType=function(){var e=this.state.start,t=this.state.startLoc,r=this.startNode(),n=void 0,i=void 0,s=!1,a=this.state.noAnonFunctionType;switch(this.state.type){case L.name:return this.flowIdentToTypeAnnotation(e,t,r,this.parseIdentifier());case L.braceL:return this.flowParseObjectType(!1,!1);case L.braceBarL:return this.flowParseObjectType(!1,!0);case L.bracketL:return this.flowParseTupleType();case L.relational:if("<"===this.state.value)return r.typeParameters=this.flowParseTypeParameterDeclaration(),this.expect(L.parenL),n=this.flowParseFunctionTypeParams(),r.params=n.params,r.rest=n.rest,this.expect(L.parenR),this.expect(L.arrow),r.returnType=this.flowParseType(),this.finishNode(r,"FunctionTypeAnnotation");break;case L.parenL:if(this.next(),!this.match(L.parenR)&&!this.match(L.ellipsis))if(this.match(L.name)){var o=this.lookahead().type;s=o!==L.question&&o!==L.colon}else s=!0;if(s){if(this.state.noAnonFunctionType=!1,i=this.flowParseType(),this.state.noAnonFunctionType=a,this.state.noAnonFunctionType||!(this.match(L.comma)||this.match(L.parenR)&&this.lookahead().type===L.arrow))return this.expect(L.parenR),i;this.eat(L.comma)}return n=i?this.flowParseFunctionTypeParams([this.reinterpretTypeAsFunctionTypeParam(i)]):this.flowParseFunctionTypeParams(),r.params=n.params,r.rest=n.rest,this.expect(L.parenR),this.expect(L.arrow),r.returnType=this.flowParseType(),r.typeParameters=null,this.finishNode(r,"FunctionTypeAnnotation");case L.string:return r.value=this.state.value,this.addExtra(r,"rawValue",r.value),this.addExtra(r,"raw",this.input.slice(this.state.start,this.state.end)),this.next(),this.finishNode(r,"StringLiteralTypeAnnotation");case L._true:case L._false:return r.value=this.match(L._true),this.next(),this.finishNode(r,"BooleanLiteralTypeAnnotation");case L.plusMin:if("-"===this.state.value)return this.next(),this.match(L.num)||this.unexpected(),r.value=-this.state.value,this.addExtra(r,"rawValue",r.value),this.addExtra(r,"raw",this.input.slice(this.state.start,this.state.end)),this.next(),this.finishNode(r,"NumericLiteralTypeAnnotation");case L.num:return r.value=this.state.value,this.addExtra(r,"rawValue",r.value),this.addExtra(r,"raw",this.input.slice(this.state.start,this.state.end)),this.next(),this.finishNode(r,"NumericLiteralTypeAnnotation");case L._null:return r.value=this.match(L._null),this.next(),this.finishNode(r,"NullLiteralTypeAnnotation");case L._this:return r.value=this.match(L._this),this.next(),this.finishNode(r,"ThisTypeAnnotation");case L.star:return this.next(),this.finishNode(r,"ExistentialTypeParam");default:if("typeof"===this.state.type.keyword)return this.flowParseTypeofType()}this.unexpected()},fe.flowParsePostfixType=function(){for(var e=this.state.start,t=this.state.startLoc,r=this.flowParsePrimaryType();!this.canInsertSemicolon()&&this.match(L.bracketL);){var n=this.startNodeAt(e,t);n.elementType=r,this.expect(L.bracketL),this.expect(L.bracketR),r=this.finishNode(n,"ArrayTypeAnnotation")}return r},fe.flowParsePrefixType=function(){var e=this.startNode();return this.eat(L.question)?(e.typeAnnotation=this.flowParsePrefixType(),this.finishNode(e,"NullableTypeAnnotation")):this.flowParsePostfixType()},fe.flowParseAnonFunctionWithoutParens=function(){var e=this.flowParsePrefixType();if(!this.state.noAnonFunctionType&&this.eat(L.arrow)){var t=this.startNodeAt(e.start,e.loc);return t.params=[this.reinterpretTypeAsFunctionTypeParam(e)],t.rest=null,t.returnType=this.flowParseType(),t.typeParameters=null,this.finishNode(t,"FunctionTypeAnnotation")}return e},fe.flowParseIntersectionType=function(){var e=this.startNode(),t=this.flowParseAnonFunctionWithoutParens();for(e.types=[t];this.eat(L.bitwiseAND);)e.types.push(this.flowParseAnonFunctionWithoutParens());return 1===e.types.length?t:this.finishNode(e,"IntersectionTypeAnnotation")},fe.flowParseUnionType=function(){var e=this.startNode(),t=this.flowParseIntersectionType();for(e.types=[t];this.eat(L.bitwiseOR);)e.types.push(this.flowParseIntersectionType());return 1===e.types.length?t:this.finishNode(e,"UnionTypeAnnotation")},fe.flowParseType=function(){var e=this.state.inType;this.state.inType=!0;var t=this.flowParseUnionType();return this.state.inType=e,t},fe.flowParseTypeAnnotation=function(){var e=this.startNode();return e.typeAnnotation=this.flowParseTypeInitialiser(),this.finishNode(e,"TypeAnnotation")},fe.flowParseTypeAnnotatableIdentifier=function(){var e=this.parseIdentifier();return this.match(L.colon)&&(e.typeAnnotation=this.flowParseTypeAnnotation(),this.finishNode(e,e.type)),e},fe.typeCastToParameter=function(e){return e.expression.typeAnnotation=e.typeAnnotation,
+this.finishNodeAt(e.expression,e.expression.type,e.typeAnnotation.end,e.typeAnnotation.loc.end)},fe.flowParseVariance=function(){var e=null;return this.match(L.plusMin)&&("+"===this.state.value?e="plus":"-"===this.state.value&&(e="minus"),this.next()),e};var pe=function(e){e.extend("parseFunctionBody",function(e){return function(t,r){return this.match(L.colon)&&!r&&(t.returnType=this.flowParseTypeAnnotation()),e.call(this,t,r)}}),e.extend("parseStatement",function(e){return function(t,r){if(this.state.strict&&this.match(L.name)&&"interface"===this.state.value){var n=this.startNode();return this.next(),this.flowParseInterface(n)}return e.call(this,t,r)}}),e.extend("parseExpressionStatement",function(e){return function(t,r){if("Identifier"===r.type)if("declare"===r.name){if(this.match(L._class)||this.match(L.name)||this.match(L._function)||this.match(L._var))return this.flowParseDeclare(t)}else if(this.match(L.name)){if("interface"===r.name)return this.flowParseInterface(t);if("type"===r.name)return this.flowParseTypeAlias(t)}return e.call(this,t,r)}}),e.extend("shouldParseExportDeclaration",function(e){return function(){return this.isContextual("type")||this.isContextual("interface")||e.call(this)}}),e.extend("parseConditional",function(e){return function(t,r,n,i,s){if(s&&this.match(L.question)){var a=this.state.clone();try{return e.call(this,t,r,n,i)}catch(e){if(e instanceof SyntaxError)return this.state=a,s.start=e.pos||this.state.start,t;throw e}}return e.call(this,t,r,n,i)}}),e.extend("parseParenItem",function(e){return function(t,r,n){if(t=e.call(this,t,r,n),this.eat(L.question)&&(t.optional=!0),this.match(L.colon)){var i=this.startNodeAt(r,n);return i.expression=t,i.typeAnnotation=this.flowParseTypeAnnotation(),this.finishNode(i,"TypeCastExpression")}return t}}),e.extend("parseExport",function(e){return function(t){return t=e.call(this,t),"ExportNamedDeclaration"===t.type&&(t.exportKind=t.exportKind||"value"),t}}),e.extend("parseExportDeclaration",function(e){return function(t){if(this.isContextual("type")){t.exportKind="type";var r=this.startNode();return this.next(),this.match(L.braceL)?(t.specifiers=this.parseExportSpecifiers(),this.parseExportFrom(t),null):this.flowParseTypeAlias(r)}if(this.isContextual("interface")){t.exportKind="type";var n=this.startNode();return this.next(),this.flowParseInterface(n)}return e.call(this,t)}}),e.extend("parseClassId",function(e){return function(t){e.apply(this,arguments),this.isRelational("<")&&(t.typeParameters=this.flowParseTypeParameterDeclaration())}}),e.extend("isKeyword",function(e){return function(t){return(!this.state.inType||"void"!==t)&&e.call(this,t)}}),e.extend("parsePropertyName",function(e){return function(t){var r=this.state.inType;this.state.inType=!0;var n=e.call(this,t);return this.state.inType=r,n}}),e.extend("readToken",function(e){return function(t){return!this.state.inType||62!==t&&60!==t?e.call(this,t):this.finishOp(L.relational,1)}}),e.extend("jsx_readToken",function(e){return function(){if(!this.state.inType)return e.call(this)}}),e.extend("toAssignable",function(e){return function(t,r,n){return"TypeCastExpression"===t.type?e.call(this,this.typeCastToParameter(t),r,n):e.call(this,t,r,n)}}),e.extend("toAssignableList",function(e){return function(t,r,n){for(var i=0;i<t.length;i++){var s=t[i];s&&"TypeCastExpression"===s.type&&(t[i]=this.typeCastToParameter(s))}return e.call(this,t,r,n)}}),e.extend("toReferencedList",function(){return function(e){for(var t=0;t<e.length;t++){var r=e[t];r&&r._exprListItem&&"TypeCastExpression"===r.type&&this.raise(r.start,"Unexpected type cast")}return e}}),e.extend("parseExprListItem",function(e){return function(t,r){var n=this.startNode(),i=e.call(this,t,r);return this.match(L.colon)?(n._exprListItem=!0,n.expression=i,n.typeAnnotation=this.flowParseTypeAnnotation(),this.finishNode(n,"TypeCastExpression")):i}}),e.extend("checkLVal",function(e){return function(t){if("TypeCastExpression"!==t.type)return e.apply(this,arguments)}}),e.extend("parseClassProperty",function(e){return function(t){return delete t.variancePos,this.match(L.colon)&&(t.typeAnnotation=this.flowParseTypeAnnotation()),e.call(this,t)}}),e.extend("isClassProperty",function(e){return function(){return this.match(L.colon)||e.call(this)}}),e.extend("parseClassMethod",function(){return function(e,t,r,n){t.variance&&this.unexpected(t.variancePos),delete t.variance,delete t.variancePos,this.isRelational("<")&&(t.typeParameters=this.flowParseTypeParameterDeclaration()),this.parseMethod(t,r,n),e.body.push(this.finishNode(t,"ClassMethod"))}}),e.extend("parseClassSuper",function(e){return function(t,r){if(e.call(this,t,r),t.superClass&&this.isRelational("<")&&(t.superTypeParameters=this.flowParseTypeParameterInstantiation()),this.isContextual("implements")){this.next();var n=t.implements=[];do{var i=this.startNode();i.id=this.parseIdentifier(),this.isRelational("<")?i.typeParameters=this.flowParseTypeParameterInstantiation():i.typeParameters=null,n.push(this.finishNode(i,"ClassImplements"))}while(this.eat(L.comma))}}}),e.extend("parsePropertyName",function(e){return function(t){var r=this.state.start,n=this.flowParseVariance(),i=e.call(this,t);return t.variance=n,t.variancePos=r,i}}),e.extend("parseObjPropValue",function(e){return function(t){t.variance&&this.unexpected(t.variancePos),delete t.variance,delete t.variancePos;var r=void 0;this.isRelational("<")&&(r=this.flowParseTypeParameterDeclaration(),this.match(L.parenL)||this.unexpected()),e.apply(this,arguments),r&&((t.value||t).typeParameters=r)}}),e.extend("parseAssignableListItemTypes",function(){return function(e){return this.eat(L.question)&&(e.optional=!0),this.match(L.colon)&&(e.typeAnnotation=this.flowParseTypeAnnotation()),this.finishNode(e,e.type),e}}),e.extend("parseMaybeDefault",function(e){return function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];var i=e.apply(this,r);return"AssignmentPattern"===i.type&&i.typeAnnotation&&i.right.start<i.typeAnnotation.start&&this.raise(i.typeAnnotation.start,"Type annotations must come before default assignments, e.g. instead of `age = 25: number` use `age: number = 25`"),i}}),e.extend("parseImportSpecifiers",function(e){return function(t){t.importKind="value";var r=null;if(this.match(L._typeof)?r="typeof":this.isContextual("type")&&(r="type"),r){var n=this.lookahead();(n.type===L.name&&"from"!==n.value||n.type===L.braceL||n.type===L.star)&&(this.next(),t.importKind=r)}e.call(this,t)}}),e.extend("parseFunctionParams",function(e){return function(t){this.isRelational("<")&&(t.typeParameters=this.flowParseTypeParameterDeclaration()),e.call(this,t)}}),e.extend("parseVarHead",function(e){return function(t){e.call(this,t),this.match(L.colon)&&(t.id.typeAnnotation=this.flowParseTypeAnnotation(),this.finishNode(t.id,t.id.type))}}),e.extend("parseAsyncArrowFromCallExpression",function(e){return function(t,r){if(this.match(L.colon)){var n=this.state.noAnonFunctionType;this.state.noAnonFunctionType=!0,t.returnType=this.flowParseTypeAnnotation(),this.state.noAnonFunctionType=n}return e.call(this,t,r)}}),e.extend("shouldParseAsyncArrow",function(e){return function(){return this.match(L.colon)||e.call(this)}}),e.extend("parseMaybeAssign",function(e){return function(){for(var t=null,r=arguments.length,n=Array(r),i=0;i<r;i++)n[i]=arguments[i];if(L.jsxTagStart&&this.match(L.jsxTagStart)){var s=this.state.clone();try{return e.apply(this,n)}catch(e){if(!(e instanceof SyntaxError))throw e;this.state=s,t=e}}if(this.state.context.push(Y.parenExpression),null!=t||this.isRelational("<")){var a=void 0,o=void 0;try{o=this.flowParseTypeParameterDeclaration(),a=e.apply(this,n),a.typeParameters=o,a.start=o.start,a.loc.start=o.loc.start}catch(e){throw t||e}if("ArrowFunctionExpression"===a.type)return a;if(null!=t)throw t;this.raise(o.start,"Expected an arrow function after this type parameter declaration")}return this.state.context.pop(),e.apply(this,n)}}),e.extend("parseArrow",function(e){return function(t){if(this.match(L.colon)){var r=this.state.clone();try{var n=this.state.noAnonFunctionType;this.state.noAnonFunctionType=!0;var i=this.flowParseTypeAnnotation();this.state.noAnonFunctionType=n,this.canInsertSemicolon()&&this.unexpected(),this.match(L.arrow)||this.unexpected(),t.returnType=i}catch(e){if(!(e instanceof SyntaxError))throw e;this.state=r}}return e.call(this,t)}}),e.extend("shouldParseArrow",function(e){return function(){return this.match(L.colon)||e.call(this)}}),e.extend("isClassMutatorStarter",function(e){return function(){return!!this.isRelational("<")||e.call(this)}})},de={quot:'"',amp:"&",apos:"'",lt:"<",gt:">",nbsp:" ",iexcl:"¡",cent:"¢",pound:"£",curren:"¤",yen:"¥",brvbar:"¦",sect:"§",uml:"¨",copy:"©",ordf:"ª",laquo:"«",not:"¬",shy:"­",reg:"®",macr:"¯",deg:"°",plusmn:"±",sup2:"²",sup3:"³",acute:"´",micro:"µ",para:"¶",middot:"·",cedil:"¸",sup1:"¹",ordm:"º",raquo:"»",frac14:"¼",frac12:"½",frac34:"¾",iquest:"¿",Agrave:"À",Aacute:"Á",Acirc:"Â",Atilde:"Ã",Auml:"Ä",Aring:"Å",AElig:"Æ",Ccedil:"Ç",Egrave:"È",Eacute:"É",Ecirc:"Ê",Euml:"Ë",Igrave:"Ì",Iacute:"Í",Icirc:"Î",Iuml:"Ï",ETH:"Ð",Ntilde:"Ñ",Ograve:"Ò",Oacute:"Ó",Ocirc:"Ô",Otilde:"Õ",Ouml:"Ö",times:"×",Oslash:"Ø",Ugrave:"Ù",Uacute:"Ú",Ucirc:"Û",Uuml:"Ü",Yacute:"Ý",THORN:"Þ",szlig:"ß",agrave:"à",aacute:"á",acirc:"â",atilde:"ã",auml:"ä",aring:"å",aelig:"æ",ccedil:"ç",egrave:"è",eacute:"é",ecirc:"ê",euml:"ë",igrave:"ì",iacute:"í",icirc:"î",iuml:"ï",eth:"ð",ntilde:"ñ",ograve:"ò",oacute:"ó",ocirc:"ô",otilde:"õ",ouml:"ö",divide:"÷",oslash:"ø",ugrave:"ù",uacute:"ú",ucirc:"û",uuml:"ü",yacute:"ý",thorn:"þ",yuml:"ÿ",OElig:"Œ",oelig:"œ",Scaron:"Š",scaron:"š",Yuml:"Ÿ",fnof:"ƒ",circ:"ˆ",tilde:"˜",Alpha:"Α",Beta:"Β",Gamma:"Γ",Delta:"Δ",Epsilon:"Ε",Zeta:"Ζ",Eta:"Η",Theta:"Θ",Iota:"Ι",Kappa:"Κ",Lambda:"Λ",Mu:"Μ",Nu:"Ν",Xi:"Ξ",Omicron:"Ο",Pi:"Π",Rho:"Ρ",Sigma:"Σ",Tau:"Τ",Upsilon:"Υ",Phi:"Φ",Chi:"Χ",Psi:"Ψ",Omega:"Ω",alpha:"α",beta:"β",gamma:"γ",delta:"δ",epsilon:"ε",zeta:"ζ",eta:"η",theta:"θ",iota:"ι",kappa:"κ",lambda:"λ",mu:"μ",nu:"ν",xi:"ξ",omicron:"ο",pi:"π",rho:"ρ",sigmaf:"ς",sigma:"σ",tau:"τ",upsilon:"υ",phi:"φ",chi:"χ",psi:"ψ",omega:"ω",thetasym:"ϑ",upsih:"ϒ",piv:"ϖ",ensp:" ",emsp:" ",thinsp:" ",zwnj:"‌",zwj:"‍",lrm:"‎",rlm:"‏",ndash:"–",mdash:"—",lsquo:"‘",rsquo:"’",sbquo:"‚",ldquo:"“",rdquo:"”",bdquo:"„",dagger:"†",Dagger:"‡",bull:"•",hellip:"…",permil:"‰",prime:"′",Prime:"″",lsaquo:"‹",rsaquo:"›",oline:"‾",frasl:"⁄",euro:"€",image:"ℑ",weierp:"℘",real:"ℜ",trade:"™",alefsym:"ℵ",larr:"←",uarr:"↑",rarr:"→",darr:"↓",harr:"↔",crarr:"↵",lArr:"⇐",uArr:"⇑",rArr:"⇒",dArr:"⇓",hArr:"⇔",forall:"∀",part:"∂",exist:"∃",empty:"∅",nabla:"∇",isin:"∈",notin:"∉",ni:"∋",prod:"∏",sum:"∑",minus:"−",lowast:"∗",radic:"√",prop:"∝",infin:"∞",ang:"∠",and:"∧",or:"∨",cap:"∩",cup:"∪",int:"∫",there4:"∴",sim:"∼",cong:"≅",asymp:"≈",ne:"≠",equiv:"≡",le:"≤",ge:"≥",sub:"⊂",sup:"⊃",nsub:"⊄",sube:"⊆",supe:"⊇",oplus:"⊕",otimes:"⊗",perp:"⊥",sdot:"⋅",lceil:"⌈",rceil:"⌉",lfloor:"⌊",rfloor:"⌋",lang:"〈",rang:"〉",loz:"◊",spades:"♠",clubs:"♣",hearts:"♥",diams:"♦"},he=/^[\da-fA-F]+$/,me=/^\d+$/;Y.j_oTag=new W("<tag",(!1)),Y.j_cTag=new W("</tag",(!1)),Y.j_expr=new W("<tag>...</tag>",(!0),(!0)),L.jsxName=new I("jsxName"),L.jsxText=new I("jsxText",{beforeExpr:!0}),L.jsxTagStart=new I("jsxTagStart",{startsExpr:!0}),L.jsxTagEnd=new I("jsxTagEnd"),L.jsxTagStart.updateContext=function(){this.state.context.push(Y.j_expr),this.state.context.push(Y.j_oTag),this.state.exprAllowed=!1},L.jsxTagEnd.updateContext=function(e){var t=this.state.context.pop();t===Y.j_oTag&&e===L.slash||t===Y.j_cTag?(this.state.context.pop(),this.state.exprAllowed=this.curContext()===Y.j_expr):this.state.exprAllowed=!0};var ve=$.prototype;ve.jsxReadToken=function(){for(var e="",t=this.state.pos;;){this.state.pos>=this.input.length&&this.raise(this.state.start,"Unterminated JSX contents");var r=this.input.charCodeAt(this.state.pos);switch(r){case 60:case 123:return this.state.pos===this.state.start?60===r&&this.state.exprAllowed?(++this.state.pos,this.finishToken(L.jsxTagStart)):this.getTokenFromCode(r):(e+=this.input.slice(t,this.state.pos),this.finishToken(L.jsxText,e));case 38:e+=this.input.slice(t,this.state.pos),e+=this.jsxReadEntity(),t=this.state.pos;break;default:c(r)?(e+=this.input.slice(t,this.state.pos),e+=this.jsxReadNewLine(!0),t=this.state.pos):++this.state.pos}}},ve.jsxReadNewLine=function(e){var t=this.input.charCodeAt(this.state.pos),r=void 0;return++this.state.pos,13===t&&10===this.input.charCodeAt(this.state.pos)?(++this.state.pos,r=e?"\n":"\r\n"):r=String.fromCharCode(t),++this.state.curLine,this.state.lineStart=this.state.pos,r},ve.jsxReadString=function(e){for(var t="",r=++this.state.pos;;){this.state.pos>=this.input.length&&this.raise(this.state.start,"Unterminated string constant");var n=this.input.charCodeAt(this.state.pos);if(n===e)break;38===n?(t+=this.input.slice(r,this.state.pos),t+=this.jsxReadEntity(),r=this.state.pos):c(n)?(t+=this.input.slice(r,this.state.pos),t+=this.jsxReadNewLine(!1),r=this.state.pos):++this.state.pos}return t+=this.input.slice(r,this.state.pos++),this.finishToken(L.string,t)},ve.jsxReadEntity=function(){for(var e="",t=0,r=void 0,n=this.input[this.state.pos],i=++this.state.pos;this.state.pos<this.input.length&&t++<10;){if(n=this.input[this.state.pos++],";"===n){"#"===e[0]?"x"===e[1]?(e=e.substr(2),he.test(e)&&(r=String.fromCharCode(parseInt(e,16)))):(e=e.substr(1),me.test(e)&&(r=String.fromCharCode(parseInt(e,10)))):r=de[e];break}e+=n}return r?r:(this.state.pos=i,"&")},ve.jsxReadWord=function(){var e=void 0,t=this.state.pos;do e=this.input.charCodeAt(++this.state.pos);while(s(e)||45===e);return this.finishToken(L.jsxName,this.input.slice(t,this.state.pos))},ve.jsxParseIdentifier=function(){var e=this.startNode();return this.match(L.jsxName)?e.name=this.state.value:this.state.type.keyword?e.name=this.state.type.keyword:this.unexpected(),this.next(),this.finishNode(e,"JSXIdentifier")},ve.jsxParseNamespacedName=function(){var e=this.state.start,t=this.state.startLoc,r=this.jsxParseIdentifier();if(!this.eat(L.colon))return r;var n=this.startNodeAt(e,t);return n.namespace=r,n.name=this.jsxParseIdentifier(),this.finishNode(n,"JSXNamespacedName")},ve.jsxParseElementName=function(){for(var e=this.state.start,t=this.state.startLoc,r=this.jsxParseNamespacedName();this.eat(L.dot);){var n=this.startNodeAt(e,t);n.object=r,n.property=this.jsxParseIdentifier(),r=this.finishNode(n,"JSXMemberExpression")}return r},ve.jsxParseAttributeValue=function(){var e=void 0;switch(this.state.type){case L.braceL:if(e=this.jsxParseExpressionContainer(),"JSXEmptyExpression"!==e.expression.type)return e;this.raise(e.start,"JSX attributes must only be assigned a non-empty expression");case L.jsxTagStart:case L.string:return e=this.parseExprAtom(),e.extra=null,e;default:this.raise(this.state.start,"JSX value should be either an expression or a quoted JSX text")}},ve.jsxParseEmptyExpression=function(){var e=this.startNodeAt(this.lastTokEnd,this.lastTokEndLoc);return this.finishNodeAt(e,"JSXEmptyExpression",this.start,this.startLoc)},ve.jsxParseSpreadChild=function(){var e=this.startNode();return this.expect(L.braceL),this.expect(L.ellipsis),e.expression=this.parseExpression(),this.expect(L.braceR),this.finishNode(e,"JSXSpreadChild")},ve.jsxParseExpressionContainer=function(){var e=this.startNode();return this.next(),this.match(L.braceR)?e.expression=this.jsxParseEmptyExpression():e.expression=this.parseExpression(),this.expect(L.braceR),this.finishNode(e,"JSXExpressionContainer")},ve.jsxParseAttribute=function(){var e=this.startNode();return this.eat(L.braceL)?(this.expect(L.ellipsis),e.argument=this.parseMaybeAssign(),this.expect(L.braceR),this.finishNode(e,"JSXSpreadAttribute")):(e.name=this.jsxParseNamespacedName(),e.value=this.eat(L.eq)?this.jsxParseAttributeValue():null,this.finishNode(e,"JSXAttribute"))},ve.jsxParseOpeningElementAt=function(e,t){var r=this.startNodeAt(e,t);for(r.attributes=[],r.name=this.jsxParseElementName();!this.match(L.slash)&&!this.match(L.jsxTagEnd);)r.attributes.push(this.jsxParseAttribute());return r.selfClosing=this.eat(L.slash),this.expect(L.jsxTagEnd),this.finishNode(r,"JSXOpeningElement")},ve.jsxParseClosingElementAt=function(e,t){var r=this.startNodeAt(e,t);return r.name=this.jsxParseElementName(),this.expect(L.jsxTagEnd),this.finishNode(r,"JSXClosingElement")},ve.jsxParseElementAt=function(e,t){var r=this.startNodeAt(e,t),n=[],i=this.jsxParseOpeningElementAt(e,t),s=null;if(!i.selfClosing){e:for(;;)switch(this.state.type){case L.jsxTagStart:if(e=this.state.start,t=this.state.startLoc,this.next(),this.eat(L.slash)){s=this.jsxParseClosingElementAt(e,t);break e}n.push(this.jsxParseElementAt(e,t));break;case L.jsxText:n.push(this.parseExprAtom());break;case L.braceL:this.lookahead().type===L.ellipsis?n.push(this.jsxParseSpreadChild()):n.push(this.jsxParseExpressionContainer());break;default:this.unexpected()}S(s.name)!==S(i.name)&&this.raise(s.start,"Expected corresponding JSX closing tag for <"+S(i.name)+">")}return r.openingElement=i,r.closingElement=s,r.children=n,this.match(L.relational)&&"<"===this.state.value&&this.raise(this.state.start,"Adjacent JSX elements must be wrapped in an enclosing tag"),this.finishNode(r,"JSXElement")},ve.jsxParseElement=function(){var e=this.state.start,t=this.state.startLoc;return this.next(),this.jsxParseElementAt(e,t)};var ye=function(e){e.extend("parseExprAtom",function(e){return function(t){if(this.match(L.jsxText)){var r=this.parseLiteral(this.state.value,"JSXText");return r.extra=null,r}return this.match(L.jsxTagStart)?this.jsxParseElement():e.call(this,t)}}),e.extend("readToken",function(e){return function(t){var r=this.curContext();if(r===Y.j_expr)return this.jsxReadToken();if(r===Y.j_oTag||r===Y.j_cTag){if(i(t))return this.jsxReadWord();if(62===t)return++this.state.pos,this.finishToken(L.jsxTagEnd);if((34===t||39===t)&&r===Y.j_oTag)return this.jsxReadString(t)}return 60===t&&this.state.exprAllowed?(++this.state.pos,this.finishToken(L.jsxTagStart)):e.call(this,t)}}),e.extend("updateContext",function(e){return function(t){if(this.match(L.braceL)){var r=this.curContext();r===Y.j_oTag?this.state.context.push(Y.braceExpression):r===Y.j_expr?this.state.context.push(Y.templateQuasi):e.call(this,t),this.state.exprAllowed=!0}else{if(!this.match(L.slash)||t!==L.jsxTagStart)return e.call(this,t);this.state.context.length-=2,this.state.context.push(Y.j_cTag),this.state.exprAllowed=!1}}})};z.flow=pe,z.jsx=ye,t.parse=_,t.tokTypes=L},function(e,t){"use strict";e.exports=function(e,t,r,n){if(!(e instanceof t)||void 0!==n&&n in e)throw TypeError(r+": incorrect invocation!");return e}},function(e,t,r){"use strict";var n=r(54),i=r(142),s=r(96),a=r(151),o=r(416);e.exports=function(e,t){var r=1==e,u=2==e,l=3==e,c=4==e,f=6==e,p=5==e||f,d=t||o;return function(t,o,h){for(var m,v,y=s(t),g=i(y),b=n(o,h,3),E=a(g.length),x=0,A=r?d(t,E):u?d(t,0):void 0;E>x;x++)if((p||x in g)&&(m=g[x],v=b(m,x,y),e))if(r)A[x]=v;else if(v)switch(e){case 3:return!0;case 5:return m;case 6:return x;case 2:A.push(m)}else if(c)return!1;return f?-1:l||c?c:A}}},function(e,t){"use strict";var r={}.toString;e.exports=function(e){return r.call(e).slice(8,-1)}},function(e,t,r){"use strict";var n=r(14),i=r(23),s=r(56),a=r(36),o=r(30),u=r(146),l=r(91),c=r(137),f=r(24),p=r(95),d=r(25).f,h=r(138)(0),m=r(22);e.exports=function(e,t,r,v,y,g){var b=n[e],E=b,x=y?"set":"add",A=E&&E.prototype,S={};return m&&"function"==typeof E&&(g||A.forEach&&!a(function(){(new E).entries().next()}))?(E=t(function(t,r){c(t,E,e,"_c"),t._c=new b,void 0!=r&&l(r,y,t[x],t)}),h("add,clear,delete,forEach,get,has,set,keys,values,entries,toJSON".split(","),function(e){var t="add"==e||"set"==e;e in A&&(!g||"clear"!=e)&&o(E.prototype,e,function(r,n){if(c(this,E,e),!t&&g&&!f(r))return"get"==e&&void 0;var i=this._c[e](0===r?0:r,n);return t?this:i})}),"size"in A&&d(E.prototype,"size",{get:function(){return this._c.size}})):(E=v.getConstructor(t,e,y,x),u(E.prototype,r),s.NEED=!0),p(E,e),S[e]=E,i(i.G+i.W+i.F,S),g||v.setStrong(E,e,y),E}},function(e,t){"use strict";e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t,r){"use strict";var n=r(139);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t,r){"use strict";var n=r(144),i=r(23),s=r(147),a=r(30),o=r(29),u=r(55),l=r(423),c=r(95),f=r(427),p=r(11)("iterator"),d=!([].keys&&"next"in[].keys()),h="@@iterator",m="keys",v="values",y=function(){return this};e.exports=function(e,t,r,g,b,E,x){l(r,t,g);var A,S,_,D=function(e){if(!d&&e in k)return k[e];switch(e){case m:return function(){return new r(this,e)};case v:return function(){return new r(this,e)}}return function(){return new r(this,e)}},C=t+" Iterator",w=b==v,F=!1,k=e.prototype,P=k[p]||k[h]||b&&k[b],T=P||D(b),O=b?w?D("entries"):T:void 0,B="Array"==t?k.entries||P:P;if(B&&(_=f(B.call(new e)),_!==Object.prototype&&(c(_,C,!0),n||o(_,p)||a(_,p,y))),w&&P&&P.name!==v&&(F=!0,T=function(){return P.call(this)}),n&&!x||!d&&!F&&k[p]||a(k,p,T),u[t]=T,u[C]=y,b)if(A={values:w?T:D(v),keys:E?T:D(m),entries:O},x)for(S in A)S in k||s(k,S,A[S]);else i(i.P+i.F*(d||F),t,A);return A}},function(e,t){"use strict";e.exports=!0},function(e,t){"use strict";t.f=Object.getOwnPropertySymbols},function(e,t,r){"use strict";var n=r(30);e.exports=function(e,t,r){for(var i in t)r&&e[i]?e[i]=t[i]:n(e,i,t[i]);return e}},function(e,t,r){"use strict";e.exports=r(30)},function(e,t,r){"use strict";var n=r(149)("keys"),i=r(97);e.exports=function(e){return n[e]||(n[e]=i(e))}},function(e,t,r){"use strict";var n=r(14),i="__core-js_shared__",s=n[i]||(n[i]={});e.exports=function(e){return s[e]||(s[e]={})}},function(e,t){"use strict";var r=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?n:r)(e)}},function(e,t,r){"use strict";var n=r(150),i=Math.min;e.exports=function(e){return e>0?i(n(e),9007199254740991):0}},function(e,t,r){"use strict";var n=r(24);e.exports=function(e,t){if(!n(e))return e;var r,i;if(t&&"function"==typeof(r=e.toString)&&!n(i=r.call(e)))return i;if("function"==typeof(r=e.valueOf)&&!n(i=r.call(e)))return i;if(!t&&"function"==typeof(r=e.toString)&&!n(i=r.call(e)))return i;throw TypeError("Can't convert object to primitive value")}},function(e,t,r){"use strict";var n=r(14),i=r(5),s=r(144),a=r(154),o=r(25).f;e.exports=function(e){var t=i.Symbol||(i.Symbol=s?{}:n.Symbol||{});"_"==e.charAt(0)||e in t||o(t,e,{value:a.f(e)})}},function(e,t,r){"use strict";t.f=r(11)},function(e,t,r){"use strict";var n=r(431)(!0);r(143)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,r=this._i;return r>=t.length?{value:void 0,done:!0}:(e=n(t,r),this._i+=e.length,{value:e,done:!1})})},function(e,t,r){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=r(14),s=r(29),a=r(22),o=r(23),u=r(147),l=r(56).KEY,c=r(36),f=r(149),p=r(95),d=r(97),h=r(11),m=r(154),v=r(153),y=r(424),g=r(419),b=r(229),E=r(21),x=r(37),A=r(152),S=r(94),_=r(92),D=r(426),C=r(232),w=r(25),F=r(43),k=C.f,P=w.f,T=D.f,O=i.Symbol,B=i.JSON,R=B&&B.stringify,I="prototype",M=h("_hidden"),N=h("toPrimitive"),L={}.propertyIsEnumerable,j=f("symbol-registry"),U=f("symbols"),V=f("op-symbols"),G=Object[I],W="function"==typeof O,Y=i.QObject,q=!Y||!Y[I]||!Y[I].findChild,K=a&&c(function(){return 7!=_(P({},"a",{get:function(){return P(this,"a",{value:7}).a}})).a})?function(e,t,r){var n=k(G,t);n&&delete G[t],P(e,t,r),n&&e!==G&&P(G,t,n)}:P,H=function(e){var t=U[e]=_(O[I]);return t._k=e,t},J=W&&"symbol"==n(O.iterator)?function(e){return"symbol"==("undefined"==typeof e?"undefined":n(e))}:function(e){return e instanceof O},X=function(e,t,r){return e===G&&X(V,t,r),E(e),t=A(t,!0),E(r),s(U,t)?(r.enumerable?(s(e,M)&&e[M][t]&&(e[M][t]=!1),r=_(r,{enumerable:S(0,!1)})):(s(e,M)||P(e,M,S(1,{})),e[M][t]=!0),K(e,t,r)):P(e,t,r)},z=function(e,t){E(e);for(var r,n=g(t=x(t)),i=0,s=n.length;s>i;)X(e,r=n[i++],t[r]);return e},$=function(e,t){return void 0===t?_(e):z(_(e),t)},Q=function(e){var t=L.call(this,e=A(e,!0));return!(this===G&&s(U,e)&&!s(V,e))&&(!(t||!s(this,e)||!s(U,e)||s(this,M)&&this[M][e])||t)},Z=function(e,t){if(e=x(e),t=A(t,!0),e!==G||!s(U,t)||s(V,t)){var r=k(e,t);return!r||!s(U,t)||s(e,M)&&e[M][t]||(r.enumerable=!0),r}},ee=function(e){for(var t,r=T(x(e)),n=[],i=0;r.length>i;)s(U,t=r[i++])||t==M||t==l||n.push(t);return n},te=function(e){for(var t,r=e===G,n=T(r?V:x(e)),i=[],a=0;n.length>a;)!s(U,t=n[a++])||r&&!s(G,t)||i.push(U[t]);return i};W||(O=function(){if(this instanceof O)throw TypeError("Symbol is not a constructor!");var e=d(arguments.length>0?arguments[0]:void 0),t=function t(r){this===G&&t.call(V,r),s(this,M)&&s(this[M],e)&&(this[M][e]=!1),K(this,e,S(1,r))};return a&&q&&K(G,e,{configurable:!0,set:t}),H(e)},u(O[I],"toString",function(){return this._k}),C.f=Z,w.f=X,r(233).f=D.f=ee,r(93).f=Q,r(145).f=te,a&&!r(144)&&u(G,"propertyIsEnumerable",Q,!0),m.f=function(e){return H(h(e))}),o(o.G+o.W+o.F*!W,{Symbol:O});for(var re="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),ne=0;re.length>ne;)h(re[ne++]);for(var re=F(h.store),ne=0;re.length>ne;)v(re[ne++]);o(o.S+o.F*!W,"Symbol",{for:function(e){return s(j,e+="")?j[e]:j[e]=O(e)},keyFor:function(e){if(J(e))return y(j,e);throw TypeError(e+" is not a symbol!")},useSetter:function(){q=!0},useSimple:function(){q=!1}}),o(o.S+o.F*!W,"Object",{create:$,defineProperty:X,defineProperties:z,getOwnPropertyDescriptor:Z,getOwnPropertyNames:ee,getOwnPropertySymbols:te}),B&&o(o.S+o.F*(!W||c(function(){var e=O();return"[null]"!=R([e])||"{}"!=R({a:e})||"{}"!=R(Object(e))})),"JSON",{stringify:function(e){if(void 0!==e&&!J(e)){for(var t,r,n=[e],i=1;arguments.length>i;)n.push(arguments[i++]);return t=n[1],"function"==typeof t&&(r=t),!r&&b(t)||(t=function(e,t){if(r&&(t=r.call(this,e,t)),!J(t))return t}),n[1]=t,R.apply(B,n)}}}),O[I][N]||r(30)(O[I],N,O[I].valueOf),p(O,"Symbol"),p(Math,"Math",!0),p(i.JSON,"JSON",!0)},function(e,t,r){"use strict";!function(){t.ast=r(449),t.code=r(237),t.keyword=r(450)}()},function(e,t,r){"use strict";var n=r(38),i=r(16),s=n(i,"Map");e.exports=s},function(e,t,r){"use strict";function n(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}var i=r(543),s=r(544),a=r(545),o=r(546),u=r(547);n.prototype.clear=i,n.prototype.delete=s,n.prototype.get=a,n.prototype.has=o,n.prototype.set=u,e.exports=n},function(e,t){"use strict";function r(e,t){for(var r=-1,n=t.length,i=e.length;++r<n;)e[i+r]=t[r];return e}e.exports=r},function(e,t,r){"use strict";function n(e,t,r){var n=e[t];o.call(e,t)&&s(n,r)&&(void 0!==r||t in e)||i(e,t,r)}var i=r(162),s=r(45),a=Object.prototype,o=a.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e,t,r){"__proto__"==t&&i?i(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r}var i=r(257);e.exports=n},function(e,t,r){"use strict";function n(e,t,r,w,F,k){var P,B=t&S,R=t&_,M=t&D;if(r&&(P=F?r(e,w,F,k):r(e)),void 0!==P)return P;if(!x(e))return e;var N=b(e);if(N){if(P=v(e),!B)return c(e,P)}else{var L=m(e),j=L==T||L==O;if(E(e))return l(e,B);if(L==I||L==C||j&&!F){if(P=R||j?{}:g(e),!B)return R?p(e,u(P,e)):f(e,o(P,e))}else{if(!Q[L])return F?e:{};P=y(e,L,n,B)}}k||(k=new i);var U=k.get(e);if(U)return U;k.set(e,P);var V=M?R?h:d:R?keysIn:A,G=N?void 0:V(e);return s(G||e,function(i,s){G&&(s=i,i=e[s]),a(P,s,n(i,t,r,s,e,k))}),P}var i=r(100),s=r(242),a=r(161),o=r(471),u=r(472),l=r(254),c=r(167),f=r(514),p=r(515),d=r(522),h=r(523),m=r(261),v=r(533),y=r(534),g=r(263),b=r(6),E=r(115),x=r(12),A=r(27),S=1,_=2,D=4,C="[object Arguments]",w="[object Array]",F="[object Boolean]",k="[object Date]",P="[object Error]",T="[object Function]",O="[object GeneratorFunction]",B="[object Map]",R="[object Number]",I="[object Object]",M="[object RegExp]",N="[object Set]",L="[object String]",j="[object Symbol]",U="[object WeakMap]",V="[object ArrayBuffer]",G="[object DataView]",W="[object Float32Array]",Y="[object Float64Array]",q="[object Int8Array]",K="[object Int16Array]",H="[object Int32Array]",J="[object Uint8Array]",X="[object Uint8ClampedArray]",z="[object Uint16Array]",$="[object Uint32Array]",Q={};Q[C]=Q[w]=Q[V]=Q[G]=Q[F]=Q[k]=Q[W]=Q[Y]=Q[q]=Q[K]=Q[H]=Q[B]=Q[R]=Q[I]=Q[M]=Q[N]=Q[L]=Q[j]=Q[J]=Q[X]=Q[z]=Q[$]=!0,Q[P]=Q[T]=Q[U]=!1,e.exports=n},function(e,t){"use strict";function r(e,t,r,n){for(var i=e.length,s=r+(n?1:-1);n?s--:++s<i;)if(t(e[s],s,e))return s;return-1}e.exports=r},function(e,t,r){"use strict";function n(e){if("string"==typeof e)return e;if(a(e))return s(e,n)+"";if(o(e))return c?c.call(e):"";var t=e+"";return"0"==t&&1/e==-u?"-0":t}var i=r(44),s=r(58),a=r(6),o=r(61),u=1/0,l=i?i.prototype:void 0,c=l?l.toString:void 0;e.exports=n},function(e,t,r){"use strict";function n(e){var t=new e.constructor(e.byteLength);return new i(t).set(new i(e)),t}var i=r(240);e.exports=n},function(e,t){"use strict";function r(e,t){var r=-1,n=e.length;for(t||(t=Array(n));++r<n;)t[r]=e[r];return t}e.exports=r},function(e,t,r){"use strict";var n=r(173),i=n(Object.getPrototypeOf,Object);e.exports=i},function(e,t,r){"use strict";var n=r(173),i=r(277),s=Object.getOwnPropertySymbols,a=s?n(s,Object):i;e.exports=a},function(e,t){"use strict";function r(e,t){return t=null==t?n:t,!!t&&("number"==typeof e||i.test(e))&&e>-1&&e%1==0&&e<t}var n=9007199254740991,i=/^(?:0|[1-9]\d*)$/;e.exports=r},function(e,t,r){"use strict";function n(e,t,r){if(!u(r))return!1;var n="undefined"==typeof t?"undefined":i(t);return!!("number"==n?a(r)&&o(t,r.length):"string"==n&&t in r)&&s(r[t],e)}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=r(45),a=r(26),o=r(170),u=r(12);e.exports=n},function(e,t,r){"use strict";function n(e,t){if(s(e))return!1;var r="undefined"==typeof e?"undefined":i(e);return!("number"!=r&&"symbol"!=r&&"boolean"!=r&&null!=e&&!a(e))||(u.test(e)||!o.test(e)||null!=t&&e in Object(t))}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=r(6),a=r(61),o=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,u=/^\w*$/;e.exports=n},function(e,t){"use strict";function r(e,t){return function(r){return e(t(r))}}e.exports=r},function(e,t,r){"use strict";var n=r(161),i=r(31),s=r(105),a=r(26),o=r(107),u=r(27),l=Object.prototype,c=l.hasOwnProperty,f=s(function(e,t){if(o(t)||a(t))return void i(t,u(t),e);for(var r in t)c.call(t,r)&&n(e,r,t[r])});e.exports=f},function(e,t){"use strict";function r(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=n}var n=9007199254740991;e.exports=r},function(e,t,r){"use strict";function n(e){return"string"==typeof e||!s(e)&&a(e)&&i(e)==o}var i=r(15),s=r(6),a=r(13),o="[object String]";e.exports=n},function(e,t,r){"use strict";var n=r(486),i=r(104),s=r(267),a=s&&s.isTypedArray,o=a?i(a):n;e.exports=o},function(e,t,r){function n(e){return r(i(e))}function i(e){return s[e]||function(){throw new Error("Cannot find module '"+e+"'.")}()}var s={"./index":49,"./index.js":49,"./logger":121,"./logger.js":121,"./metadata":122,"./metadata.js":122,"./options/build-config-chain":50,"./options/build-config-chain.js":50,"./options/config":32,"./options/config.js":32,"./options/index":51,"./options/index.js":51,"./options/option-manager":33,"./options/option-manager.js":33,"./options/parsers":52,"./options/parsers.js":52,"./options/removed":53,"./options/removed.js":53};n.keys=function(){return Object.keys(s)},n.resolve=i,e.exports=n,n.id=178},function(e,t,r){function n(e){return r(i(e))}function i(e){return s[e]||function(){throw new Error("Cannot find module '"+e+"'.")}()}
+var s={"./build-config-chain":50,"./build-config-chain.js":50,"./config":32,"./config.js":32,"./index":51,"./index.js":51,"./option-manager":33,"./option-manager.js":33,"./parsers":52,"./parsers.js":52,"./removed":53,"./removed.js":53};n.keys=function(){return Object.keys(s)},n.resolve=i,e.exports=n,n.id=179},function(e,t){"use strict";e.exports=function(){return/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){return{keyword:e.cyan,capitalized:e.yellow,jsx_tag:e.yellow,punctuator:e.yellow,number:e.magenta,string:e.green,regex:e.magenta,comment:e.grey,invalid:e.white.bgRed.bold,gutter:e.grey,marker:e.red.bold}}function s(e){var t=e.slice(-2),r=t[0],n=t[1],i=u.default.matchToToken(e);if("name"===i.type){if(c.default.keyword.isReservedWordES6(i.value))return"keyword";if(h.test(i.value)&&("<"===n[r-1]||"</"==n.substr(r-2,2)))return"jsx_tag";if(i.value[0]!==i.value[0].toLowerCase())return"capitalized"}return"punctuator"===i.type&&m.test(i.value)?"bracket":i.type}function a(e,t){return t.replace(u.default,function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];var i=s(r),a=e[i];return a?r[0].split(d).map(function(e){return a(e)}).join("\n"):r[0]})}t.__esModule=!0,t.default=function(e,t,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};r=Math.max(r,0);var s=n.highlightCode&&p.default.supportsColor||n.forceColor,o=p.default;n.forceColor&&(o=new p.default.constructor({enabled:!0}));var u=function(e,t){return s?e(t):t},l=i(o);s&&(e=a(l,e));var c=n.linesAbove||2,f=n.linesBelow||3,h=e.split(d),m=Math.max(t-(c+1),0),v=Math.min(h.length,t+f);t||r||(m=0,v=h.length);var y=String(v).length,g=h.slice(m,v).map(function(e,n){var i=m+1+n,s=(" "+i).slice(-y),a=" "+s+" | ";if(i===t){var o="";if(r){var c=e.slice(0,r-1).replace(/[^\t]/g," ");o=["\n ",u(l.gutter,a.replace(/\d/g," ")),c,u(l.marker,"^")].join("")}return[u(l.marker,">"),u(l.gutter,a),e,o].join("")}return" "+u(l.gutter,a)+e}).join("\n");return s?o.reset(g):g};var o=r(456),u=n(o),l=r(157),c=n(l),f=r(394),p=n(f),d=/\r\n|[\n\r\u2028\u2029]/,h=/^[a-z][\w-]*$/i,m=/^[()\[\]{}]$/;e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){throw new Error("The ("+e+") Babel 5 plugin is being run with Babel 6.")}function a(e,t,r){(0,h.default)(t)&&(r=t,t={}),t.filename=e,v.default.readFile(e,function(e,n){var i=void 0;if(!e)try{i=P(n,t)}catch(t){e=t}e?r(e):r(null,i)})}function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.filename=e,P(v.default.readFileSync(e,"utf8"),t)}t.__esModule=!0,t.transformFromAst=t.transform=t.analyse=t.Pipeline=t.OptionManager=t.traverse=t.types=t.messages=t.util=t.version=t.template=t.buildExternalHelpers=t.options=t.File=void 0;var u=r(49);Object.defineProperty(t,"File",{enumerable:!0,get:function(){return i(u).default}});var l=r(32);Object.defineProperty(t,"options",{enumerable:!0,get:function(){return i(l).default}});var c=r(292);Object.defineProperty(t,"buildExternalHelpers",{enumerable:!0,get:function(){return i(c).default}});var f=r(4);Object.defineProperty(t,"template",{enumerable:!0,get:function(){return i(f).default}});var p=r(622);Object.defineProperty(t,"version",{enumerable:!0,get:function(){return p.version}}),t.Plugin=s,t.transformFile=a,t.transformFileSync=o;var d=r(116),h=i(d),m=r(117),v=i(m),y=r(123),g=n(y),b=r(19),E=n(b),x=r(1),A=n(x),S=r(8),_=i(S),D=r(33),C=i(D),w=r(295),F=i(w);t.util=g,t.messages=E,t.types=A,t.traverse=_.default,t.OptionManager=C.default,t.Pipeline=F.default;var k=new F.default,P=(t.analyse=k.analyse.bind(k),t.transform=k.transform.bind(k));t.transformFromAst=k.transformFromAst.bind(k)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t,r){var n="  ";if(e&&"string"==typeof e){var i=(0,h.default)(e).indent;i&&" "!==i&&(n=i)}var s={auxiliaryCommentBefore:t.auxiliaryCommentBefore,auxiliaryCommentAfter:t.auxiliaryCommentAfter,shouldPrintComment:t.shouldPrintComment,retainLines:t.retainLines,retainFunctionParens:t.retainFunctionParens,comments:null==t.comments||t.comments,compact:t.compact,minified:t.minified,concise:t.concise,quotes:t.quotes||a(e,r),jsonCompatibleStrings:t.jsonCompatibleStrings,indent:{adjustMultilineComment:!0,style:n,base:0},flowCommaSeparator:t.flowCommaSeparator};return s.minified?(s.compact=!0,s.shouldPrintComment=s.shouldPrintComment||function(){return s.comments}):s.shouldPrintComment=s.shouldPrintComment||function(e){return s.comments||e.indexOf("@license")>=0||e.indexOf("@preserve")>=0},"auto"===s.compact&&(s.compact=e.length>5e5,s.compact&&console.error("[BABEL] "+g.get("codeGeneratorDeopt",t.filename,"500KB"))),s.compact&&(s.indent.adjustMultilineComment=!1),s}function a(e,t){var r="double";if(!e)return r;for(var n={single:0,double:0},i=0,s=0;s<t.length;s++){var a=t[s];if("string"===a.type.label){var o=e.slice(a.start,a.end);if("'"===o[0]?n.single++:n.double++,i++,i>=3)break}}return n.single>n.double?"single":"double"}t.__esModule=!0,t.CodeGenerator=void 0;var o=r(3),u=i(o),l=r(42),c=i(l),f=r(41),p=i(f);t.default=function(e,t,r){var n=new x(e,t,r);return n.generate()};var d=r(447),h=i(d),m=r(310),v=i(m),y=r(19),g=n(y),b=r(309),E=i(b),x=function(e){function t(r,n,i){(0,u.default)(this,t),n=n||{};var a=r.tokens||[],o=s(i,n,a),l=n.sourceMaps?new v.default(n,i):null,f=(0,c.default)(this,e.call(this,o,l,a));return f.ast=r,f}return(0,p.default)(t,e),t.prototype.generate=function(){return e.prototype.generate.call(this,this.ast)},t}(E.default);t.CodeGenerator=function(){function e(t,r,n){(0,u.default)(this,e),this._generator=new x(t,r,n)}return e.prototype.generate=function(){return this._generator.generate()},e}()},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){function t(e,t){var n=r[e];r[e]=n?function(e,r,i){var s=n(e,r,i);return null==s?t(e,r,i):s}:t}for(var r={},n=(0,m.default)(e),i=Array.isArray(n),s=0,n=i?n:(0,d.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a,u=x.FLIPPED_ALIAS_KEYS[o];if(u)for(var l=u,c=Array.isArray(l),f=0,l=c?l:(0,d.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var h=p;t(h,e[o])}else t(o,e[o])}return r}function a(e,t,r,n){var i=e[t.type];return i?i(t,r,n):null}function o(e){return!!x.isCallExpression(e)||!!x.isMemberExpression(e)&&(o(e.object)||!e.computed&&o(e.property))}function u(e,t,r){if(!e)return 0;x.isExpressionStatement(e)&&(e=e.expression);var n=a(S,e,t);if(!n){var i=a(_,e,t);if(i)for(var s=0;s<i.length&&!(n=u(i[s],e,r));s++);}return n&&n[r]||0}function l(e,t){return u(e,t,"before")}function c(e,t){return u(e,t,"after")}function f(e,t,r){return!!t&&(!(!x.isNewExpression(t)||t.callee!==e||!o(e))||a(A,e,t,r))}t.__esModule=!0;var p=r(2),d=i(p),h=r(20),m=i(h);t.needsWhitespace=u,t.needsWhitespaceBefore=l,t.needsWhitespaceAfter=c,t.needsParens=f;var v=r(308),y=i(v),g=r(307),b=n(g),E=r(1),x=n(E),A=s(b),S=s(y.default.nodes),_=s(y.default.list)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){function t(e,r){if(u.isJSXIdentifier(e)){if("this"===e.name&&u.isReferenced(e,r))return u.thisExpression();if(!a.default.keyword.isIdentifierNameES6(e.name))return u.stringLiteral(e.name);e.type="Identifier"}else if(u.isJSXMemberExpression(e))return u.memberExpression(t(e.object,e),t(e.property,e));return e}function r(e){return u.isJSXExpressionContainer(e)?e.expression:e}function n(e){var t=r(e.value||u.booleanLiteral(!0));return u.isStringLiteral(t)&&!u.isJSXExpressionContainer(e.value)&&(t.value=t.value.replace(/\n\s+/g," ")),u.isValidIdentifier(e.name.name)?e.name.type="Identifier":e.name=u.stringLiteral(e.name.name),u.inherits(u.objectProperty(e.name,t),e)}function i(r,n){r.parent.children=u.react.buildChildren(r.parent);var i=t(r.node.name,r.node),a=[],o=void 0;u.isIdentifier(i)?o=i.name:u.isLiteral(i)&&(o=i.value);var l={tagExpr:i,tagName:o,args:a};e.pre&&e.pre(l,n);var c=r.node.attributes;return c=c.length?s(c,n):u.nullLiteral(),a.push(c),e.post&&e.post(l,n),l.call||u.callExpression(l.callee,a)}function s(e,t){function r(){i.length&&(s.push(u.objectExpression(i)),i=[])}var i=[],s=[],a=t.opts.useBuiltIns||!1;if("boolean"!=typeof a)throw new Error("transform-react-jsx currently only accepts a boolean option for useBuiltIns (defaults to false)");for(;e.length;){var o=e.shift();u.isJSXSpreadAttribute(o)?(r(),s.push(o.argument)):i.push(n(o))}if(r(),1===s.length)e=s[0];else{u.isObjectExpression(s[0])||s.unshift(u.objectExpression([]));var l=a?u.memberExpression(u.identifier("Object"),u.identifier("assign")):t.addHelper("extends");e=u.callExpression(l,s)}return e}var o={};return o.JSXNamespacedName=function(e){throw e.buildCodeFrameError("Namespace tags are not supported. ReactJSX is not XML.")},o.JSXElement={exit:function(e,t){var r=i(e.get("openingElement"),t);r.arguments=r.arguments.concat(e.node.children),r.arguments.length>=3&&(r._prettyCall=!0),e.replaceWith(u.inherits(r,e.node))}},o};var s=r(157),a=i(s),o=r(1),u=n(o);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){return!g.isClassMethod(e)&&!g.isObjectMethod(e)||"get"!==e.kind&&"set"!==e.kind?"value":e.kind}function a(e,t,r,n,i){var a=g.toKeyAlias(t),o={};if((0,v.default)(e,a)&&(o=e[a]),e[a]=o,o._inherits=o._inherits||[],o._inherits.push(t),o._key=t.key,t.computed&&(o._computed=!0),t.decorators){var u=o.decorators=o.decorators||g.arrayExpression([]);u.elements=u.elements.concat(t.decorators.map(function(e){return e.expression}).reverse())}if(o.value||o.initializer)throw n.buildCodeFrameError(t,"Key conflict with sibling node");var l=void 0,c=void 0;(g.isObjectProperty(t)||g.isObjectMethod(t)||g.isClassMethod(t))&&(l=g.toComputedKey(t,t.key)),g.isObjectProperty(t)||g.isClassProperty(t)?c=t.value:(g.isObjectMethod(t)||g.isClassMethod(t))&&(c=g.functionExpression(null,t.params,t.body,t.generator,t.async),c.returnType=t.returnType);var f=s(t);return r&&"value"===f||(r=f),i&&g.isStringLiteral(l)&&("value"===r||"initializer"===r)&&g.isFunctionExpression(c)&&(c=(0,p.default)({id:l,node:c,scope:i})),c&&(g.inheritsComments(c,t),o[r]=c),o}function o(e){for(var t in e)if(e[t]._computed)return!0;return!1}function u(e){for(var t=g.arrayExpression([]),r=0;r<e.properties.length;r++){var n=e.properties[r],i=n.value;i.properties.unshift(g.objectProperty(g.identifier("key"),g.toComputedKey(n))),t.elements.push(i)}return t}function l(e){var t=g.objectExpression([]);return(0,h.default)(e,function(e){var r=g.objectExpression([]),n=g.objectProperty(e._key,r,e._computed);(0,h.default)(e,function(e,t){if("_"!==t[0]){var n=e;(g.isClassMethod(e)||g.isClassProperty(e))&&(e=e.value);var i=g.objectProperty(g.identifier(t),e);g.inheritsComments(i,n),g.removeComments(n),r.properties.push(i)}}),t.properties.push(n)}),t}function c(e){return(0,h.default)(e,function(e){e.value&&(e.writable=g.booleanLiteral(!0)),e.configurable=g.booleanLiteral(!0),e.enumerable=g.booleanLiteral(!0)}),l(e)}t.__esModule=!0,t.push=a,t.hasComputed=o,t.toComputedObjectFromClass=u,t.toClassObject=l,t.toDefineObject=c;var f=r(40),p=i(f),d=r(112),h=i(d),m=r(270),v=i(m),y=r(1),g=n(y)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.default=function(e){for(var t=e.params,r=0;r<t.length;r++){var n=t[r];if(s.isAssignmentPattern(n)||s.isRestElement(n))return r}return t.length};var i=r(1),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s);t.default=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"var";e.traverse(l,{kind:r,emit:t})};var o=r(1),u=n(o),l={Scope:function(e,t){"let"===t.kind&&e.skip()},Function:function(e){e.skip()},VariableDeclaration:function(e,t){if(!t.kind||e.node.kind===t.kind){for(var r=[],n=e.get("declarations"),i=void 0,s=n,o=Array.isArray(s),l=0,s=o?s:(0,a.default)(s);;){var c;if(o){if(l>=s.length)break;c=s[l++]}else{if(l=s.next(),l.done)break;c=l.value}var f=c;i=f.node.id,f.node.init&&r.push(u.expressionStatement(u.assignmentExpression("=",f.node.id,f.node.init)));for(var p in f.getBindingIdentifiers())t.emit(u.identifier(p),p)}e.parentPath.isFor({left:e.node})?e.replaceWith(i):e.replaceWithMultiple(r)}}};e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.default=function(e,t,r){return 1===r.length&&s.isSpreadElement(r[0])&&s.isIdentifier(r[0].argument,{name:"arguments"})?s.callExpression(s.memberExpression(e,s.identifier("apply")),[t,r[0].argument]):s.callExpression(s.memberExpression(e,s.identifier("call")),[t].concat(r))};var i=r(1),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){return c.isRegExpLiteral(e)&&e.flags.indexOf(t)>=0}function a(e,t){var r=e.flags.split("");e.flags.indexOf(t)<0||((0,u.default)(r,t),e.flags=r.join(""))}t.__esModule=!0,t.is=s,t.pullFlag=a;var o=r(275),u=i(o),l=r(1),c=n(l)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){return!!y.isSuper(e)&&(!y.isMemberExpression(t,{computed:!1})&&!y.isCallExpression(t,{callee:e}))}function a(e){return y.isMemberExpression(e)&&y.isSuper(e.object)}function o(e,t){var r=t?e:y.memberExpression(e,y.identifier("prototype"));return y.logicalExpression("||",y.memberExpression(r,y.identifier("__proto__")),y.callExpression(y.memberExpression(y.identifier("Object"),y.identifier("getPrototypeOf")),[r]))}t.__esModule=!0;var u=r(3),l=i(u),c=r(10),f=i(c),p=r(189),d=i(p),h=r(19),m=n(h),v=r(1),y=n(v),g=(0,f.default)(),b={Function:function(e){e.inShadow("this")||e.skip()},ReturnStatement:function(e,t){e.inShadow("this")||t.returns.push(e)},ThisExpression:function(e,t){e.node[g]||t.thises.push(e)},enter:function(e,t){var r=t.specHandle;t.isLoose&&(r=t.looseHandle);var n=e.isCallExpression()&&e.get("callee").isSuper(),i=r.call(t,e);i&&(t.hasSuper=!0),n&&t.bareSupers.push(e),i===!0&&e.requeue(),i!==!0&&i&&(Array.isArray(i)?e.replaceWithMultiple(i):e.replaceWith(i))}},E=function(){function e(t){var r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];(0,l.default)(this,e),this.forceSuperMemoisation=t.forceSuperMemoisation,this.methodPath=t.methodPath,this.methodNode=t.methodNode,this.superRef=t.superRef,this.isStatic=t.isStatic,this.hasSuper=!1,this.inClass=r,this.isLoose=t.isLoose,this.scope=this.methodPath.scope,this.file=t.file,this.opts=t,this.bareSupers=[],this.returns=[],this.thises=[]}return e.prototype.getObjectRef=function(){return this.opts.objectRef||this.opts.getObjectRef()},e.prototype.setSuperProperty=function(e,t,r){return y.callExpression(this.file.addHelper("set"),[o(this.getObjectRef(),this.isStatic),r?e:y.stringLiteral(e.name),t,y.thisExpression()])},e.prototype.getSuperProperty=function(e,t){return y.callExpression(this.file.addHelper("get"),[o(this.getObjectRef(),this.isStatic),t?e:y.stringLiteral(e.name),y.thisExpression()])},e.prototype.replace=function(){this.methodPath.traverse(b,this)},e.prototype.getLooseSuperProperty=function(e,t){var r=this.methodNode,n=this.superRef||y.identifier("Function");return t.property===e?void 0:y.isCallExpression(t,{callee:e})?void 0:y.isMemberExpression(t)&&!r.static?y.memberExpression(n,y.identifier("prototype")):n},e.prototype.looseHandle=function(e){var t=e.node;if(e.isSuper())return this.getLooseSuperProperty(t,e.parent);if(e.isCallExpression()){var r=t.callee;if(!y.isMemberExpression(r))return;if(!y.isSuper(r.object))return;return y.appendToMemberExpression(r,y.identifier("call")),t.arguments.unshift(y.thisExpression()),!0}},e.prototype.specHandleAssignmentExpression=function(e,t,r){return"="===r.operator?this.setSuperProperty(r.left.property,r.right,r.left.computed):(e=e||t.scope.generateUidIdentifier("ref"),[y.variableDeclaration("var",[y.variableDeclarator(e,r.left)]),y.expressionStatement(y.assignmentExpression("=",r.left,y.binaryExpression(r.operator[0],e,r.right)))])},e.prototype.specHandle=function(e){var t=void 0,r=void 0,n=void 0,i=e.parent,o=e.node;if(s(o,i))throw e.buildCodeFrameError(m.get("classesIllegalBareSuper"));if(y.isCallExpression(o)){var u=o.callee;if(y.isSuper(u))return;a(u)&&(t=u.property,r=u.computed,n=o.arguments)}else if(y.isMemberExpression(o)&&y.isSuper(o.object))t=o.property,r=o.computed;else{if(y.isUpdateExpression(o)&&a(o.argument)){var l=y.binaryExpression(o.operator[0],o.argument,y.numericLiteral(1));if(o.prefix)return this.specHandleAssignmentExpression(null,e,l);var c=e.scope.generateUidIdentifier("ref");return this.specHandleAssignmentExpression(c,e,l).concat(y.expressionStatement(c))}if(y.isAssignmentExpression(o)&&a(o.left))return this.specHandleAssignmentExpression(null,e,o)}if(t){var f=this.getSuperProperty(t,r);return n?this.optimiseCall(f,n):f}},e.prototype.optimiseCall=function(e,t){var r=y.thisExpression();return r[g]=!0,(0,d.default)(e,r,t)},e}();t.default=E,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){var t=u.default[e];if(!t)throw new ReferenceError("Unknown helper "+e);return t().expression}t.__esModule=!0,t.list=void 0;var s=r(20),a=n(s);t.get=i;var o=r(318),u=n(o);t.list=(0,a.default)(u.default).map(function(e){return"_"===e[0]?e.slice(1):e}).filter(function(e){return"__esModule"!==e});t.default=i},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("asyncGenerators")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("classConstructorCall")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("classProperties")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("doExpressions")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("exponentiationOperator")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("exportExtensions")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("functionBind")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("objectRestSpread")}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i),a=r(10),o=n(a);t.default=function(e){function t(e){for(var t=e.get("body.body"),r=t,n=Array.isArray(r),i=0,r=n?r:(0,s.default)(r);;){var a;if(n){if(i>=r.length)break;a=r[i++]}else{if(i=r.next(),i.done)break;a=i.value}var o=a;if("constructorCall"===o.node.kind)return o}return null}function n(e,t){var r=t,n=r.node,s=n.id||t.scope.generateUidIdentifier("class");t.parentPath.isExportDefaultDeclaration()&&(t=t.parentPath,t.insertAfter(i.exportDefaultDeclaration(s))),t.replaceWithMultiple(c({CLASS_REF:t.scope.generateUidIdentifier(s.name),CALL_REF:t.scope.generateUidIdentifier(s.name+"Call"),CALL:i.functionExpression(null,e.node.params,e.node.body),CLASS:i.toExpression(n),WRAPPER_REF:s})),e.remove()}var i=e.types,a=(0,o.default)();return{inherits:r(194),visitor:{Class:function(e){if(!e.node[a]){e.node[a]=!0;var r=t(e);r&&n(r,e)}}}}};var u=r(4),l=n(u),c=(0,l.default)("\n  let CLASS_REF = CLASS;\n  var CALL_REF = CALL;\n  var WRAPPER_REF = function (...args) {\n    if (this instanceof WRAPPER_REF) {\n      return Reflect.construct(CLASS_REF, args);\n    } else {\n      return CALL_REF.apply(this, args);\n    }\n  };\n  WRAPPER_REF.__proto__ = CLASS_REF;\n  WRAPPER_REF;\n");e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){var t=e.types,n={Super:function(e){e.parentPath.isCallExpression({callee:e.node})&&this.push(e.parentPath)}},i={ReferencedIdentifier:function(e){this.scope.hasOwnBinding(e.node.name)&&(this.collision=!0,e.skip())}},a=(0,l.default)("\n    Object.defineProperty(REF, KEY, {\n      // configurable is false by default\n      enumerable: true,\n      writable: true,\n      value: VALUE\n    });\n  "),u=function(e,r){var n=r.key,i=r.value,s=r.computed;return a({REF:e,KEY:t.isIdentifier(n)&&!s?t.stringLiteral(n.name):n,VALUE:i?i:t.identifier("undefined")})},c=function(e,r){var n=r.key,i=r.value,s=r.computed;return t.expressionStatement(t.assignmentExpression("=",t.memberExpression(e,n,s||t.isLiteral(n)),i))};return{inherits:r(195),visitor:{Class:function(e,r){for(var a=r.opts.spec?u:c,l=!!e.node.superClass,f=void 0,p=[],d=e.get("body"),h=d.get("body"),m=Array.isArray(h),v=0,h=m?h:(0,s.default)(h);;){var y;if(m){if(v>=h.length)break;y=h[v++]}else{if(v=h.next(),v.done)break;y=v.value}var g=y;g.isClassProperty()?p.push(g):g.isClassMethod({kind:"constructor"})&&(f=g)}if(p.length){var b=[],E=void 0;e.isClassExpression()||!e.node.id?((0,o.default)(e),E=e.scope.generateUidIdentifier("class")):E=e.node.id;for(var x=[],A=p,S=Array.isArray(A),_=0,A=S?A:(0,s.default)(A);;){var D;if(S){if(_>=A.length)break;D=A[_++]}else{if(_=A.next(),_.done)break;D=_.value}var C=D,w=C.node;if(!(w.decorators&&w.decorators.length>0)&&(r.opts.spec||w.value)){var F=w.static;if(F)b.push(a(E,w));else{if(!w.value)continue;x.push(a(t.thisExpression(),w))}}}if(x.length){if(!f){var k=t.classMethod("constructor",t.identifier("constructor"),[],t.blockStatement([]));l&&(k.params=[t.restElement(t.identifier("args"))],k.body.body.push(t.returnStatement(t.callExpression(t.super(),[t.spreadElement(t.identifier("args"))]))));var P=d.unshiftContainer("body",k);f=P[0]}for(var T={collision:!1,scope:f.scope},O=p,B=Array.isArray(O),R=0,O=B?O:(0,s.default)(O);;){var I;if(B){if(R>=O.length)break;I=O[R++]}else{if(R=O.next(),R.done)break;I=R.value}var M=I;if(M.traverse(i,T),T.collision)break}if(T.collision){var N=e.scope.generateUidIdentifier("initialiseProps");b.push(t.variableDeclaration("var",[t.variableDeclarator(N,t.functionExpression(null,[],t.blockStatement(x)))])),x=[t.expressionStatement(t.callExpression(t.memberExpression(N,t.identifier("call")),[t.thisExpression()]))]}if(l){var L=[];f.traverse(n,L);for(var j=L,U=Array.isArray(j),V=0,j=U?j:(0,s.default)(j);;){var G;if(U){if(V>=j.length)break;G=j[V++]}else{if(V=j.next(),V.done)break;G=V.value}var W=G;W.insertAfter(x)}}else f.get("body").unshiftContainer("body",x)}for(var Y=p,q=Array.isArray(Y),K=0,Y=q?Y:(0,s.default)(Y);;){var H;if(q){if(K>=Y.length)break;H=Y[K++]}else{if(K=Y.next(),K.done)break;H=K.value}var J=H;J.remove()}b.length&&(e.isClassExpression()?(e.scope.push({id:E}),e.replaceWith(t.assignmentExpression("=",E,e.node))):(e.node.id||(e.node.id=E),e.parentPath.isExportDeclaration()&&(e=e.parentPath)),e.insertAfter(b))}},ArrowFunctionExpression:function(e){var t=e.get("body");if(t.isClassExpression()){var r=t.get("body"),n=r.get("body");n.some(function(e){return e.isClassProperty()})&&e.ensureBlock()}}}}};var a=r(40),o=n(a),u=r(4),l=n(u);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(9),s=n(i),a=r(2),o=n(a);t.default=function(e){function t(e){return e.reverse().map(function(e){return e.expression})}function n(e,r,n){var i=[],a=e.node.decorators;if(a){e.node.decorators=null,a=t(a);for(var l=a,c=Array.isArray(l),f=0,l=c?l:(0,o.default)(l);;){var d;if(c){if(f>=l.length)break;d=l[f++]}else{if(f=l.next(),f.done)break;d=f.value}var h=d;i.push(p({CLASS_REF:r,DECORATOR:h}))}}for(var m=(0,s.default)(null),v=e.get("body.body"),y=Array.isArray(v),g=0,v=y?v:(0,o.default)(v);;){var b;if(y){if(g>=v.length)break;b=v[g++]}else{if(g=v.next(),g.done)break;b=g.value}var E=b,x=E.node.decorators;if(x){var A=u.toKeyAlias(E.node);m[A]=m[A]||[],m[A].push(E.node),E.remove()}}for(var S in m)var _=m[S];return i}function i(e){if(e.isClass()){if(e.node.decorators)return!0;for(var t=e.node.body.body,r=Array.isArray(t),n=0,t=r?t:(0,o.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;if(s.decorators)return!0}}else if(e.isObjectExpression())for(var a=e.node.properties,u=Array.isArray(a),l=0,a=u?a:(0,o.default)(a);;){var c;if(u){if(l>=a.length)break;c=a[l++]}else{if(l=a.next(),l.done)break;c=l.value}var f=c;if(f.decorators)return!0}return!1}function a(e){throw e.buildCodeFrameError('Decorators are not officially supported yet in 6.x pending a proposal update.\nHowever, if you need to use them you can install the legacy decorators transform with:\n\nnpm install babel-plugin-transform-decorators-legacy --save-dev\n\nand add the following line to your .babelrc file:\n\n{\n  "plugins": ["transform-decorators-legacy"]\n}\n\nThe repo url is: https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy.\n    ')}var u=e.types;return{inherits:r(126),visitor:{ClassExpression:function(e){if(i(e)){a(e),(0,f.default)(e);var t=e.scope.generateDeclaredUidIdentifier("ref"),r=[];r.push(u.assignmentExpression("=",t,e.node)),r=r.concat(n(e,t,this)),r.push(t),e.replaceWith(u.sequenceExpression(r))}},ClassDeclaration:function(e){if(i(e)){a(e),(0,f.default)(e);var t=e.node.id,r=[];r=r.concat(n(e,t,this).map(function(e){return u.expressionStatement(e)})),r.push(u.expressionStatement(t)),e.insertAfter(r)}},ObjectExpression:function(e){i(e)&&a(e)}}}};var u=r(4),l=n(u),c=r(316),f=n(c),p=(0,l.default)("\n  CLASS_REF = DECORATOR(CLASS_REF) || CLASS_REF;\n");e.exports=t.default},function(e,t,r){"use strict";t.__esModule=!0,t.default=function(){return{inherits:r(196),visitor:{DoExpression:function(e){var t=e.node.body.body;t.length?e.replaceWithMultiple(t):e.replaceWith(e.scope.buildUndefinedNode())}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s),o=r(3),u=i(o),l=r(8),c=r(191),f=i(c),p=r(189),d=i(p),h=r(186),m=n(h),v=r(4),y=i(v),g=r(1),b=n(g),E=(0,y.default)("\n  (function () {\n    super(...arguments);\n  })\n"),x={"FunctionExpression|FunctionDeclaration":function(e){e.is("shadow")||e.skip()},Method:function(e){e.skip()}},A=l.visitors.merge([x,{Super:function(e){if(this.isDerived&&!this.hasBareSuper&&!e.parentPath.isCallExpression({callee:e.node}))throw e.buildCodeFrameError("'super.*' is not allowed before super()")},CallExpression:{exit:function(e){if(e.get("callee").isSuper()&&(this.hasBareSuper=!0,!this.isDerived))throw e.buildCodeFrameError("super() is only allowed in a derived constructor")}},ThisExpression:function(e){if(this.isDerived&&!this.hasBareSuper&&!e.inShadow("this"))throw e.buildCodeFrameError("'this' is not allowed before super()")}}]),S=l.visitors.merge([x,{ThisExpression:function(e){this.superThises.push(e)}}]),_=function(){function e(t,r){(0,u.default)(this,e),this.parent=t.parent,this.scope=t.scope,this.node=t.node,this.path=t,this.file=r,this.clearDescriptors(),this.instancePropBody=[],this.instancePropRefs={},this.staticPropBody=[],this.body=[],this.bareSuperAfter=[],this.bareSupers=[],this.pushedConstructor=!1,this.pushedInherits=!1,this.isLoose=!1,this.superThises=[],this.classId=this.node.id,this.classRef=this.node.id?b.identifier(this.node.id.name):this.scope.generateUidIdentifier("class"),this.superName=this.node.superClass||b.identifier("Function"),this.isDerived=!!this.node.superClass}return e.prototype.run=function(){var e=this,t=this.superName,r=this.file,n=this.body,i=this.constructorBody=b.blockStatement([]);this.constructor=this.buildConstructor();var s=[],a=[];if(this.isDerived&&(a.push(t),t=this.scope.generateUidIdentifierBasedOnNode(t),s.push(t),this.superName=t),this.buildBody(),i.body.unshift(b.expressionStatement(b.callExpression(r.addHelper("classCallCheck"),[b.thisExpression(),this.classRef]))),n=n.concat(this.staticPropBody.map(function(t){return t(e.classRef)})),this.classId&&1===n.length)return b.toExpression(n[0]);n.push(b.returnStatement(this.classRef));var o=b.functionExpression(null,s,b.blockStatement(n));return o.shadow=!0,b.callExpression(o,a)},e.prototype.buildConstructor=function(){var e=b.functionDeclaration(this.classRef,[],this.constructorBody);return b.inherits(e,this.node),e},e.prototype.pushToMap=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"value",n=arguments[3],i=void 0;e.static?(this.hasStaticDescriptors=!0,i=this.staticMutatorMap):(this.hasInstanceDescriptors=!0,i=this.instanceMutatorMap);var s=m.push(i,e,r,this.file,n);return t&&(s.enumerable=b.booleanLiteral(!0)),s},e.prototype.constructorMeMaybe=function(){for(var e=!1,t=this.path.get("body.body"),r=t,n=Array.isArray(r),i=0,r=n?r:(0,a.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var o=s;if(e=o.equals("kind","constructor"))break}if(!e){var u=void 0,l=void 0;if(this.isDerived){var c=E().expression;u=c.params,l=c.body}else u=[],l=b.blockStatement([]);this.path.get("body").unshiftContainer("body",b.classMethod("constructor",b.identifier("constructor"),u,l))}},e.prototype.buildBody=function(){if(this.constructorMeMaybe(),this.pushBody(),this.verifyConstructor(),this.userConstructor){var e=this.constructorBody;e.body=e.body.concat(this.userConstructor.body.body),b.inherits(this.constructor,this.userConstructor),b.inherits(e,this.userConstructor.body)}this.pushDescriptors()},e.prototype.pushBody=function(){for(var e=this.path.get("body.body"),t=e,r=Array.isArray(t),n=0,t=r?t:(0,a.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i,o=s.node;if(s.isClassProperty())throw s.buildCodeFrameError("Missing class properties transform.");if(o.decorators)throw s.buildCodeFrameError("Method has decorators, put the decorator plugin before the classes one.");if(b.isClassMethod(o)){var u="constructor"===o.kind;if(u&&(s.traverse(A,this),!this.hasBareSuper&&this.isDerived))throw s.buildCodeFrameError("missing super() call in constructor");
+var l=new f.default({forceSuperMemoisation:u,methodPath:s,methodNode:o,objectRef:this.classRef,superRef:this.superName,isStatic:o.static,isLoose:this.isLoose,scope:this.scope,file:this.file},(!0));l.replace(),u?this.pushConstructor(l,o,s):this.pushMethod(o,s)}}},e.prototype.clearDescriptors=function(){this.hasInstanceDescriptors=!1,this.hasStaticDescriptors=!1,this.instanceMutatorMap={},this.staticMutatorMap={}},e.prototype.pushDescriptors=function(){this.pushInherits();var e=this.body,t=void 0,r=void 0;if(this.hasInstanceDescriptors&&(t=m.toClassObject(this.instanceMutatorMap)),this.hasStaticDescriptors&&(r=m.toClassObject(this.staticMutatorMap)),t||r){t&&(t=m.toComputedObjectFromClass(t)),r&&(r=m.toComputedObjectFromClass(r));var n=b.nullLiteral(),i=[this.classRef,n,n,n,n];t&&(i[1]=t),r&&(i[2]=r),this.instanceInitializersId&&(i[3]=this.instanceInitializersId,e.unshift(this.buildObjectAssignment(this.instanceInitializersId))),this.staticInitializersId&&(i[4]=this.staticInitializersId,e.unshift(this.buildObjectAssignment(this.staticInitializersId)));for(var s=0,a=0;a<i.length;a++)i[a]!==n&&(s=a);i=i.slice(0,s+1),e.push(b.expressionStatement(b.callExpression(this.file.addHelper("createClass"),i)))}this.clearDescriptors()},e.prototype.buildObjectAssignment=function(e){return b.variableDeclaration("var",[b.variableDeclarator(e,b.objectExpression([]))])},e.prototype.wrapSuperCall=function(e,t,r,n){var i=e.node;this.isLoose?(i.arguments.unshift(b.thisExpression()),2===i.arguments.length&&b.isSpreadElement(i.arguments[1])&&b.isIdentifier(i.arguments[1].argument,{name:"arguments"})?(i.arguments[1]=i.arguments[1].argument,i.callee=b.memberExpression(t,b.identifier("apply"))):i.callee=b.memberExpression(t,b.identifier("call"))):i=(0,d.default)(b.logicalExpression("||",b.memberExpression(this.classRef,b.identifier("__proto__")),b.callExpression(b.memberExpression(b.identifier("Object"),b.identifier("getPrototypeOf")),[this.classRef])),b.thisExpression(),i.arguments);var s=b.callExpression(this.file.addHelper("possibleConstructorReturn"),[b.thisExpression(),i]),a=this.bareSuperAfter.map(function(e){return e(r)});e.parentPath.isExpressionStatement()&&e.parentPath.container===n.node.body&&n.node.body.length-1===e.parentPath.key?((this.superThises.length||a.length)&&(e.scope.push({id:r}),s=b.assignmentExpression("=",r,s)),a.length&&(s=b.toSequenceExpression([s].concat(a,[r]))),e.parentPath.replaceWith(b.returnStatement(s))):e.replaceWithMultiple([b.variableDeclaration("var",[b.variableDeclarator(r,s)])].concat(a,[b.expressionStatement(r)]))},e.prototype.verifyConstructor=function(){var e=this;if(this.isDerived){var t=this.userConstructorPath,r=t.get("body");t.traverse(S,this);for(var n=!!this.bareSupers.length,i=this.superName||b.identifier("Function"),s=t.scope.generateUidIdentifier("this"),o=this.bareSupers,u=Array.isArray(o),l=0,o=u?o:(0,a.default)(o);;){var c;if(u){if(l>=o.length)break;c=o[l++]}else{if(l=o.next(),l.done)break;c=l.value}var f=c;this.wrapSuperCall(f,i,s,r),n&&f.find(function(e){return e===t||(e.isLoop()||e.isConditional()?(n=!1,!0):void 0)})}for(var p=this.superThises,d=Array.isArray(p),h=0,p=d?p:(0,a.default)(p);;){var m;if(d){if(h>=p.length)break;m=p[h++]}else{if(h=p.next(),h.done)break;m=h.value}var v=m;v.replaceWith(s)}var y=function(t){return b.callExpression(e.file.addHelper("possibleConstructorReturn"),[s].concat(t||[]))},g=r.get("body");g.length&&!g.pop().isReturnStatement()&&r.pushContainer("body",b.returnStatement(n?s:y()));for(var E=this.superReturns,x=Array.isArray(E),A=0,E=x?E:(0,a.default)(E);;){var _;if(x){if(A>=E.length)break;_=E[A++]}else{if(A=E.next(),A.done)break;_=A.value}var D=_;if(D.node.argument){var C=D.scope.generateDeclaredUidIdentifier("ret");D.get("argument").replaceWithMultiple([b.assignmentExpression("=",C,D.node.argument),y(C)])}else D.get("argument").replaceWith(y())}}},e.prototype.pushMethod=function(e,t){var r=t?t.scope:this.scope;"method"===e.kind&&this._processMethod(e,r)||this.pushToMap(e,!1,null,r)},e.prototype._processMethod=function(){return!1},e.prototype.pushConstructor=function(e,t,r){this.bareSupers=e.bareSupers,this.superReturns=e.returns,r.scope.hasOwnBinding(this.classRef.name)&&r.scope.rename(this.classRef.name);var n=this.constructor;this.userConstructorPath=r,this.userConstructor=t,this.hasConstructor=!0,b.inheritsComments(n,t),n._ignoreUserWhitespace=!0,n.params=t.params,b.inherits(n.body,t.body),n.body.directives=t.body.directives,this._pushConstructor()},e.prototype._pushConstructor=function(){this.pushedConstructor||(this.pushedConstructor=!0,(this.hasInstanceDescriptors||this.hasStaticDescriptors)&&this.pushDescriptors(),this.body.push(this.constructor),this.pushInherits())},e.prototype.pushInherits=function(){this.isDerived&&!this.pushedInherits&&(this.pushedInherits=!0,this.body.unshift(b.expressionStatement(b.callExpression(this.file.addHelper("inherits"),[this.classRef,this.superName]))))},e}();t.default=_,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(9),s=n(i),a=r(2),o=n(a),u=r(10),l=n(u);t.default=function(e){var t=e.types,r=(0,l.default)(),n={"AssignmentExpression|UpdateExpression":function(e){if(!e.node[r]){e.node[r]=!0;var n=e.get(e.isAssignmentExpression()?"left":"argument");if(n.isIdentifier()){var i=n.node.name;if(this.scope.getBinding(i)===e.scope.getBinding(i)){var s=this.exports[i];if(s){var a=e.node,u=e.isUpdateExpression()&&!a.prefix;u&&("++"===a.operator?a=t.binaryExpression("+",a.argument,t.numericLiteral(1)):"--"===a.operator?a=t.binaryExpression("-",a.argument,t.numericLiteral(1)):u=!1);for(var l=s,c=Array.isArray(l),f=0,l=c?l:(0,o.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var d=p;a=this.buildCall(d,a).expression}u&&(a=t.sequenceExpression([a,e.node])),e.replaceWith(a)}}}}}};return{visitor:{CallExpression:function(e,r){if(e.node.callee.type===v){var n=r.contextIdent;e.replaceWith(t.callExpression(t.memberExpression(n,t.identifier("import")),e.node.arguments))}},ReferencedIdentifier:function(e,r){"__moduleName"!=e.node.name||e.scope.hasBinding("__moduleName")||e.replaceWith(t.memberExpression(r.contextIdent,t.identifier("id")))},Program:{enter:function(e,t){t.contextIdent=e.scope.generateUidIdentifier("context")},exit:function(e,r){function i(e,t){p[e]=p[e]||[],p[e].push(t)}function a(e,t,r){var n=void 0;d.forEach(function(t){t.key===e&&(n=t)}),n||d.push(n={key:e,imports:[],exports:[]}),n[t]=n[t].concat(r)}function u(e,r){return t.expressionStatement(t.callExpression(l,[t.stringLiteral(e),r]))}for(var l=e.scope.generateUidIdentifier("export"),c=r.contextIdent,p=(0,s.default)(null),d=[],v=[],y=[],g=[],b=[],E=[],x=e.get("body"),A=!0,S=x,_=Array.isArray(S),D=0,S=_?S:(0,o.default)(S);;){var C;if(_){if(D>=S.length)break;C=S[D++]}else{if(D=S.next(),D.done)break;C=D.value}var w=C;if(w.isExportDeclaration()&&(w=w.get("declaration")),w.isVariableDeclaration()&&"var"!==w.node.kind){A=!1;break}}for(var F=x,k=Array.isArray(F),P=0,F=k?F:(0,o.default)(F);;){var T;if(k){if(P>=F.length)break;T=F[P++]}else{if(P=F.next(),P.done)break;T=P.value}var O=T;if(A&&O.isFunctionDeclaration())v.push(O.node),E.push(O);else if(O.isImportDeclaration()){var B=O.node.source.value;a(B,"imports",O.node.specifiers);for(var R in O.getBindingIdentifiers())O.scope.removeBinding(R),b.push(t.identifier(R));O.remove()}else if(O.isExportAllDeclaration())a(O.node.source.value,"exports",O.node),O.remove();else if(O.isExportDefaultDeclaration()){var I=O.get("declaration");if(I.isClassDeclaration()||I.isFunctionDeclaration()){var M=I.node.id,N=[];M?(N.push(I.node),N.push(u("default",M)),i(M.name,"default")):N.push(u("default",t.toExpression(I.node))),!A||I.isClassDeclaration()?O.replaceWithMultiple(N):(v=v.concat(N),E.push(O))}else O.replaceWith(u("default",I.node))}else if(O.isExportNamedDeclaration()){var L=O.get("declaration");if(L.node){O.replaceWith(L);var j=[],U=void 0;if(O.isFunction()){var V=L.node,G=V.id.name;if(A)i(G,G),v.push(V),v.push(u(G,V.id)),E.push(O);else{var W;W={},W[G]=V.id,U=W}}else U=L.getBindingIdentifiers();for(var Y in U)i(Y,Y),j.push(u(Y,t.identifier(Y)));O.insertAfter(j)}else{var q=O.node.specifiers;if(q&&q.length)if(O.node.source)a(O.node.source.value,"exports",q),O.remove();else{for(var K=[],H=q,J=Array.isArray(H),X=0,H=J?H:(0,o.default)(H);;){var z;if(J){if(X>=H.length)break;z=H[X++]}else{if(X=H.next(),X.done)break;z=X.value}var $=z;K.push(u($.exported.name,$.local)),i($.local.name,$.exported.name)}O.replaceWithMultiple(K)}}}}d.forEach(function(r){for(var n=[],i=e.scope.generateUidIdentifier(r.key),s=r.imports,a=Array.isArray(s),u=0,s=a?s:(0,o.default)(s);;){var c;if(a){if(u>=s.length)break;c=s[u++]}else{if(u=s.next(),u.done)break;c=u.value}var f=c;t.isImportNamespaceSpecifier(f)?n.push(t.expressionStatement(t.assignmentExpression("=",f.local,i))):t.isImportDefaultSpecifier(f)&&(f=t.importSpecifier(f.local,t.identifier("default"))),t.isImportSpecifier(f)&&n.push(t.expressionStatement(t.assignmentExpression("=",f.local,t.memberExpression(i,f.imported))))}if(r.exports.length){var p=e.scope.generateUidIdentifier("exportObj");n.push(t.variableDeclaration("var",[t.variableDeclarator(p,t.objectExpression([]))]));for(var d=r.exports,h=Array.isArray(d),v=0,d=h?d:(0,o.default)(d);;){var b;if(h){if(v>=d.length)break;b=d[v++]}else{if(v=d.next(),v.done)break;b=v.value}var E=b;t.isExportAllDeclaration(E)?n.push(m({KEY:e.scope.generateUidIdentifier("key"),EXPORT_OBJ:p,TARGET:i})):t.isExportSpecifier(E)&&n.push(t.expressionStatement(t.assignmentExpression("=",t.memberExpression(p,E.exported),t.memberExpression(i,E.local))))}n.push(t.expressionStatement(t.callExpression(l,[p])))}g.push(t.stringLiteral(r.key)),y.push(t.functionExpression(null,[i],t.blockStatement(n)))});var Q=this.getModuleName();Q&&(Q=t.stringLiteral(Q)),A&&(0,f.default)(e,function(e){return b.push(e)}),b.length&&v.unshift(t.variableDeclaration("var",b.map(function(e){return t.variableDeclarator(e)}))),e.traverse(n,{exports:p,buildCall:u,scope:e.scope});for(var Z=E,ee=Array.isArray(Z),te=0,Z=ee?Z:(0,o.default)(Z);;){var re;if(ee){if(te>=Z.length)break;re=Z[te++]}else{if(te=Z.next(),te.done)break;re=te.value}var ne=re;ne.remove()}e.node.body=[h({SYSTEM_REGISTER:t.memberExpression(t.identifier(r.opts.systemGlobal||"System"),t.identifier("register")),BEFORE_BODY:v,MODULE_NAME:Q,SETTERS:y,SOURCES:g,BODY:e.node.body,EXPORT_IDENTIFIER:l,CONTEXT_IDENTIFIER:c})]}}}}};var c=r(188),f=n(c),p=r(4),d=n(p),h=(0,d.default)('\n  SYSTEM_REGISTER(MODULE_NAME, [SOURCES], function (EXPORT_IDENTIFIER, CONTEXT_IDENTIFIER) {\n    "use strict";\n    BEFORE_BODY;\n    return {\n      setters: [SETTERS],\n      execute: function () {\n        BODY;\n      }\n    };\n  });\n'),m=(0,d.default)('\n  for (var KEY in TARGET) {\n    if (KEY !== "default" && KEY !== "__esModule") EXPORT_OBJ[KEY] = TARGET[KEY];\n  }\n'),v="Import";e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){function t(e){if(e.isExpressionStatement()){var t=e.get("expression");if(!t.isCallExpression())return!1;if(!t.get("callee").isIdentifier({name:"define"}))return!1;var r=t.get("arguments");return!(3===r.length&&!r.shift().isStringLiteral())&&(2===r.length&&(!!r.shift().isArrayExpression()&&!!r.shift().isFunctionExpression()))}}var n=e.types;return{inherits:r(131),visitor:{Program:{exit:function(e,r){var s=e.get("body").pop();if(t(s)){var a=s.node.expression,c=a.arguments,f=3===c.length?c.shift():null,p=a.arguments[0],d=a.arguments[1],h=r.opts.globals||{},m=p.elements.map(function(e){return"module"===e.value||"exports"===e.value?n.identifier(e.value):n.callExpression(n.identifier("require"),[e])}),v=p.elements.map(function(e){if("module"===e.value)return n.identifier("mod");if("exports"===e.value)return n.memberExpression(n.identifier("mod"),n.identifier("exports"));var t=void 0;if(r.opts.exactGlobals){var s=h[e.value];t=s?s.split(".").reduce(function(e,t){return n.memberExpression(e,n.identifier(t))},n.identifier("global")):n.memberExpression(n.identifier("global"),n.identifier(n.toIdentifier(e.value)))}else{var a=(0,i.basename)(e.value,(0,i.extname)(e.value)),o=h[a]||a;t=n.memberExpression(n.identifier("global"),n.identifier(n.toIdentifier(o)))}return t}),y=f?f.value:this.file.opts.basename,g=n.memberExpression(n.identifier("global"),n.identifier(n.toIdentifier(y))),b=null;if(r.opts.exactGlobals){var E=h[y];if(E){b=[];var x=E.split(".");g=x.slice(1).reduce(function(e,t){return b.push(o({GLOBAL_REFERENCE:e})),n.memberExpression(e,n.identifier(t))},n.memberExpression(n.identifier("global"),n.identifier(x[0])))}}var A=u({BROWSER_ARGUMENTS:v,PREREQUISITE_ASSIGNMENTS:b,GLOBAL_TO_ASSIGN:g});s.replaceWith(l({MODULE_NAME:f,AMD_ARGUMENTS:p,COMMON_ARGUMENTS:m,GLOBAL_EXPORT:A,FUNC:d}))}}}}}};var i=r(17),s=r(4),a=n(s),o=(0,a.default)("\n  GLOBAL_REFERENCE = GLOBAL_REFERENCE || {}\n"),u=(0,a.default)("\n  var mod = { exports: {} };\n  factory(BROWSER_ARGUMENTS);\n  PREREQUISITE_ASSIGNMENTS\n  GLOBAL_TO_ASSIGN = mod.exports;\n"),l=(0,a.default)('\n  (function (global, factory) {\n    if (typeof define === "function" && define.amd) {\n      define(MODULE_NAME, AMD_ARGUMENTS, factory);\n    } else if (typeof exports !== "undefined") {\n      factory(COMMON_ARGUMENTS);\n    } else {\n      GLOBAL_EXPORT\n    }\n  })(this, FUNC);\n');e.exports=t.default},function(e,t,r){"use strict";t.__esModule=!0,t.default=function(e){function t(e,r,i){var s=e.specifiers[0];if(n.isExportNamespaceSpecifier(s)||n.isExportDefaultSpecifier(s)){var a=e.specifiers.shift(),o=i.generateUidIdentifier(a.exported.name),u=void 0;u=n.isExportNamespaceSpecifier(a)?n.importNamespaceSpecifier(o):n.importDefaultSpecifier(o),r.push(n.importDeclaration([u],e.source)),r.push(n.exportNamedDeclaration(null,[n.exportSpecifier(o,a.exported)])),t(e,r,i)}}var n=e.types;return{inherits:r(198),visitor:{ExportNamedDeclaration:function(e){var r=e.node,n=e.scope,i=[];t(r,i,n),i.length&&(r.specifiers.length>=1&&i.push(r),e.replaceWithMultiple(i))}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){var t=e.types,n="@flow";return{inherits:r(68),visitor:{Program:function(e,t){for(var r=t.file.ast.comments,i=r,a=Array.isArray(i),o=0,i=a?i:(0,s.default)(i);;){var u;if(a){if(o>=i.length)break;u=i[o++]}else{if(o=i.next(),o.done)break;u=o.value}var l=u;l.value.indexOf(n)>=0&&(l.value=l.value.replace(n,""),l.value.replace(/\*/g,"").trim()||(l.ignore=!0))}},Flow:function(e){e.remove()},ClassProperty:function(e){e.node.variance=null,e.node.typeAnnotation=null,e.node.value||e.remove()},Class:function(e){e.node.implements=null,e.get("body.body").forEach(function(e){e.isClassProperty()&&(e.node.typeAnnotation=null,e.node.value||e.remove())})},AssignmentPattern:function(e){var t=e.node;t.left.optional=!1},Function:function(e){for(var t=e.node,r=0;r<t.params.length;r++){var n=t.params[r];n.optional=!1}},TypeCastExpression:function(e){var r=e.node;do r=r.expression;while(t.isTypeCastExpression(r));e.replaceWith(r)}}}},e.exports=t.default},function(e,t,r){"use strict";t.__esModule=!0,t.default=function(e){function t(e){var t=e.path.getData("functionBind");return t?t:(t=e.generateDeclaredUidIdentifier("context"),e.path.setData("functionBind",t))}function n(e,t){var r=e.object||e.callee.object;return t.isStatic(r)&&r}function i(e,r){var i=n(e,r);if(i)return i;var a=t(r);return e.object?e.callee=s.sequenceExpression([s.assignmentExpression("=",a,e.object),e.callee]):e.callee.object=s.assignmentExpression("=",a,e.callee.object),a}var s=e.types;return{inherits:r(199),visitor:{CallExpression:function(e){var t=e.node,r=e.scope,n=t.callee;if(s.isBindExpression(n)){var a=i(n,r);t.callee=s.memberExpression(n.callee,s.identifier("call")),t.arguments.unshift(a)}},BindExpression:function(e){var t=e.node,r=e.scope,n=i(t,r);e.replaceWith(s.callExpression(s.memberExpression(t.callee,s.identifier("bind")),[n]))}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){function t(e){var t=!1;return e.traverse({RestProperty:function(){t=!0,e.stop()}}),t}function n(e){for(var t=e.properties,r=Array.isArray(t),n=0,t=r?t:(0,s.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var a=i;if(o.isSpreadProperty(a))return!0}return!1}function i(e,t,r){for(var n=t.pop(),i=[],a=t,u=Array.isArray(a),l=0,a=u?a:(0,s.default)(a);;){var c;if(u){if(l>=a.length)break;c=a[l++]}else{if(l=a.next(),l.done)break;c=l.value}var f=c,p=f.key;o.isIdentifier(p)&&!f.computed&&(p=o.stringLiteral(f.key.name)),i.push(p)}return[n.argument,o.callExpression(e.addHelper("objectWithoutProperties"),[r,o.arrayExpression(i)])]}function a(e,r,n){if(e.isObjectPattern()&&t(e)){var i=e.parentPath,s=i.scope.generateUidIdentifier("ref"),a=o.variableDeclaration("let",[o.variableDeclarator(e.node,s)]);a._blockHoist=r?n-r:1,i.ensureBlock(),i.get("body").unshiftContainer("body",a),e.replaceWith(s)}}var o=e.types;return{inherits:r(200),visitor:{Function:function(e){for(var t=e.get("params"),r=0;r<t.length;r++)a(t[r],r,t.length)},VariableDeclarator:function(e,t){if(e.get("id").isObjectPattern()){var r=e.parentPath.node.kind,n=[];e.traverse({RestProperty:function(e){var r=this.originalPath.node.init;e.findParent(function(e){if(e.isObjectProperty())r=o.memberExpression(r,o.identifier(e.node.key.name));else if(e.isVariableDeclarator())return!0});var s=i(t,e.parentPath.node.properties,r),a=s[0],u=s[1];n.push(o.variableDeclarator(a,u)),0===e.parentPath.node.properties.length&&e.findParent(function(e){return e.isObjectProperty()||e.isVariableDeclaration()}).remove()}},{originalPath:e}),n.length>0&&e.parentPath.getSibling(e.parentPath.key+1).insertBefore(o.variableDeclaration(r,n))}},ExportNamedDeclaration:function(e){var r=e.get("declaration");if(r.isVariableDeclaration()&&t(r)){var n=[];for(var i in e.getOuterBindingIdentifiers(e)){var s=o.identifier(i);n.push(o.exportSpecifier(s,s))}e.replaceWith(r.node),e.insertAfter(o.exportNamedDeclaration(null,n))}},CatchClause:function(e){a(e.get("param"))},AssignmentExpression:function(e,r){var n=e.get("left");if(n.isObjectPattern()&&t(n)){var s=[],a=void 0;(e.isCompletionRecord()||e.parentPath.isExpressionStatement())&&(a=e.scope.generateUidIdentifierBasedOnNode(e.node.right,"ref"),s.push(o.variableDeclaration("var",[o.variableDeclarator(a,e.node.right)])));var u=i(r,e.node.left.properties,a),l=u[0],c=u[1],f=o.clone(e.node);f.right=a,s.push(o.expressionStatement(f)),s.push(o.toStatement(o.assignmentExpression("=",l,c))),a&&s.push(o.expressionStatement(a)),e.replaceWithMultiple(s)}},ForXStatement:function(e){var r=e.node,n=e.scope,i=e.get("left"),s=r.left;if(o.isObjectPattern(s)&&t(i)){var a=n.generateUidIdentifier("ref");return r.left=o.variableDeclaration("var",[o.variableDeclarator(a)]),e.ensureBlock(),void r.body.body.unshift(o.variableDeclaration("var",[o.variableDeclarator(s,a)]))}if(o.isVariableDeclaration(s)){var u=s.declarations[0].id;if(o.isObjectPattern(u)){var l=n.generateUidIdentifier("ref");r.left=o.variableDeclaration(s.kind,[o.variableDeclarator(l,null)]),e.ensureBlock(),r.body.body.unshift(o.variableDeclaration(r.left.kind,[o.variableDeclarator(u,l)]))}}},ObjectExpression:function(e,t){function r(){u.length&&(a.push(o.objectExpression(u)),u=[])}if(n(e.node)){var i=t.opts.useBuiltIns||!1;if("boolean"!=typeof i)throw new Error("transform-object-rest-spread currently only accepts a boolean option for useBuiltIns (defaults to false)");for(var a=[],u=[],l=e.node.properties,c=Array.isArray(l),f=0,l=c?l:(0,s.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var d=p;o.isSpreadProperty(d)?(r(),a.push(d.argument)):u.push(d)}r(),o.isObjectExpression(a[0])||a.unshift(o.objectExpression([]));var h=i?o.memberExpression(o.identifier("Object"),o.identifier("assign")):t.addHelper("extends");e.replaceWith(o.callExpression(h,a))}}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){function t(e,t){for(var r=t.arguments[0].properties,i=!0,s=0;s<r.length;s++){var a=r[s],o=n.toComputedKey(a);if(n.isLiteral(o,{value:"displayName"})){i=!1;break}}i&&r.unshift(n.objectProperty(n.identifier("displayName"),n.stringLiteral(e)))}function r(e){if(!e||!n.isCallExpression(e))return!1;if(!i(e.callee))return!1;var t=e.arguments;if(1!==t.length)return!1;var r=t[0];return!!n.isObjectExpression(r)}var n=e.types,i=n.buildMatchMemberExpression("React.createClass");return{visitor:{ExportDefaultDeclaration:function(e,n){var i=e.node;if(r(i.declaration)){var a=n.file.opts.basename;"index"===a&&(a=s.default.basename(s.default.dirname(n.file.opts.filename))),t(a,i.declaration)}},CallExpression:function(e){var i=e.node;if(r(i)){var s=void 0;e.find(function(e){if(e.isAssignmentExpression())s=e.node.left;else if(e.isObjectProperty())s=e.node.key;else if(e.isVariableDeclarator())s=e.node.id;else if(e.isStatement())return!0;if(s)return!0}),s&&(n.isMemberExpression(s)&&(s=s.property),n.isIdentifier(s)&&t(s.name,i))}}}}};var i=r(17),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){var t=e.types,n=/\*?\s*@jsx\s+([^\s]+)/,i=r(185)({pre:function(e){var r=e.tagName,n=e.args;t.react.isCompatTag(r)?n.push(t.stringLiteral(r)):n.push(e.tagExpr)},post:function(e,t){e.callee=t.get("jsxIdentifier")()}});return i.Program=function(e,r){for(var i=r.file,a=r.opts.pragma||"React.createElement",o=i.ast.comments,u=Array.isArray(o),l=0,o=u?o:(0,s.default)(o);;){var c;if(u){if(l>=o.length)break;c=o[l++]}else{if(l=o.next(),l.done)break;c=l.value}var f=c,p=n.exec(f.value);if(p){if(a=p[1],"React.DOM"===a)throw i.buildCodeFrameError(f,"The @jsx React.DOM pragma has been deprecated as of React 0.12");break}}r.set("jsxIdentifier",function(){return a.split(".").map(function(e){return t.identifier(e)}).reduce(function(e,r){return t.memberExpression(e,r)})})},{inherits:r(127),visitor:i}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s);t.default=function(){return{visitor:{Program:function(e,t){if(t.opts.strict!==!1&&t.opts.strictMode!==!1){for(var r=e.node,n=r.directives,i=Array.isArray(n),s=0,n=i?n:(0,a.default)(n);;){var o;if(i){if(s>=n.length)break;o=n[s++]}else{if(s=n.next(),s.done)break;o=s.value}var l=o;if("use strict"===l.value.value)return}e.unshiftContainer("directives",u.directive(u.directiveLiteral("use strict")))}}}}};var o=r(1),u=n(o);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=["commonjs","amd","umd","systemjs"],n=!1,i="commonjs",s=!1;if(void 0!==t&&(void 0!==t.loose&&(n=t.loose),void 0!==t.modules&&(i=t.modules),void 0!==t.spec&&(s=t.spec)),"boolean"!=typeof n)throw new Error("Preset es2015 'loose' option must be a boolean.");if("boolean"!=typeof s)throw new Error("Preset es2015 'spec' option must be a boolean.");if(i!==!1&&r.indexOf(i)===-1)throw new Error("Preset es2015 'modules' option must be 'false' to indicate no modules\nor a module type which be be one of: 'commonjs' (default), 'amd', 'umd', 'systemjs'");var o={loose:n};return{plugins:[[a.default,{loose:n,spec:s}],u.default,c.default,[p.default,{spec:s}],h.default,[v.default,o],g.default,E.default,A.default,[_.default,o],[C.default,o],F.default,P.default,O.default,[R.default,o],M.default,[L.default,o],U.default,G.default,"commonjs"===i&&[Y.default,o],"systemjs"===i&&[K.default,o],"amd"===i&&[J.default,o],"umd"===i&&[z.default,o],[Q.default,{async:!1,asyncGenerators:!1}]].filter(Boolean)}}t.__esModule=!0;var s=r(84),a=n(s),o=r(77),u=n(o),l=r(76),c=n(l),f=r(69),p=n(f),d=r(70),h=n(d),m=r(72),v=n(m),y=r(79),g=n(y),b=r(81),E=n(b),x=r(130),A=n(x),S=r(73),_=n(S),D=r(75),C=n(D),w=r(83),F=n(w),k=r(86),P=n(k),T=r(66),O=n(T),B=r(82),R=n(B),I=r(80),M=n(I),N=r(74),L=n(N),j=r(71),U=n(j),V=r(85),G=n(V),W=r(78),Y=n(W),q=r(206),K=n(q),H=r(131),J=n(H),X=r(207),z=n(X),$=r(87),Q=n($),Z=i({});t.default=Z,Object.defineProperty(Z,"buildPreset",{configurable:!0,writable:!0,enumerable:!1,value:i}),e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(132),s=n(i);t.default={plugins:[s.default]},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(128),s=n(i),a=r(129),o=n(a);t.default={plugins:[s.default,o.default]},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(219),s=n(i),a=r(201),o=n(a),u=r(208),l=n(u);t.default={presets:[s.default],plugins:[o.default,l.default]},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(220),s=n(i),a=r(202),o=n(a),u=r(203),l=n(u),c=r(320),f=n(c);t.default={presets:[s.default],plugins:[f.default,o.default,l.default]},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(128),s=n(i),a=r(129),o=n(a),u=r(132),l=n(u),c=r(211),f=n(c),p=r(323),d=n(p);t.default={plugins:[s.default,o.default,l.default,d.default,f.default]},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=function e(t,r){(0,s.default)(this,e),this.file=t,this.options=r};t.default=a,e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.Flow=t.Pure=t.Generated=t.User=t.Var=t.BlockScoped=t.Referenced=t.Scope=t.Expression=t.Statement=t.BindingIdentifier=t.ReferencedMemberExpression=t.ReferencedIdentifier=void 0;var i=r(1),s=n(i);t.ReferencedIdentifier={types:["Identifier","JSXIdentifier"],checkPath:function(e,t){var r=e.node,n=e.parent;if(!s.isIdentifier(r,t)&&!s.isJSXMemberExpression(n,t)){if(!s.isJSXIdentifier(r,t))return!1;if(i.react.isCompatTag(r.name))return!1}return s.isReferenced(r,n)}},t.ReferencedMemberExpression={types:["MemberExpression"],checkPath:function(e){var t=e.node,r=e.parent;return s.isMemberExpression(t)&&s.isReferenced(t,r)}},t.BindingIdentifier={types:["Identifier"],checkPath:function(e){var t=e.node,r=e.parent;return s.isIdentifier(t)&&s.isBinding(t,r)}},t.Statement={types:["Statement"],checkPath:function(e){var t=e.node,r=e.parent;if(s.isStatement(t)){if(s.isVariableDeclaration(t)){if(s.isForXStatement(r,{left:t}))return!1;if(s.isForStatement(r,{init:t}))return!1}return!0}return!1}},t.Expression={types:["Expression"],checkPath:function(e){return e.isIdentifier()?e.isReferencedIdentifier():s.isExpression(e.node)}},t.Scope={types:["Scopable"],checkPath:function(e){return s.isScope(e.node,e.parent)}},t.Referenced={checkPath:function(e){return s.isReferenced(e.node,e.parent)}},t.BlockScoped={checkPath:function(e){return s.isBlockScoped(e.node)}},t.Var={types:["VariableDeclaration"],checkPath:function(e){return s.isVar(e.node)}},t.User={checkPath:function(e){return e.node&&!!e.node.loc}},t.Generated={checkPath:function(e){return!e.isUser()}},t.Pure={checkPath:function(e,t){return e.scope.isPure(e.node,t)}},t.Flow={types:["Flow","ImportDeclaration","ExportDeclaration"],checkPath:function(e){var t=e.node;return!!s.isFlow(t)||(s.isImportDeclaration(t)?"type"===t.importKind||"typeof"===t.importKind:!!s.isExportDeclaration(t)&&"type"===t.exportKind)}}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=function(){function e(t){var r=t.existing,n=t.identifier,i=t.scope,a=t.path,o=t.kind;(0,s.default)(this,e),this.identifier=n,this.scope=i,this.path=a,this.kind=o,this.constantViolations=[],this.constant=!0,this.referencePaths=[],this.referenced=!1,this.references=0,this.clearValue(),r&&(this.constantViolations=[].concat(r.path,r.constantViolations,this.constantViolations))}return e.prototype.deoptValue=function(){this.clearValue(),this.hasDeoptedValue=!0},e.prototype.setValue=function(e){this.hasDeoptedValue||(this.hasValue=!0,this.value=e)},e.prototype.clearValue=function(){this.hasDeoptedValue=!1,this.hasValue=!1,this.value=null},e.prototype.reassign=function(e){this.constant=!1,this.constantViolations.indexOf(e)===-1&&this.constantViolations.push(e)},e.prototype.reference=function(e){this.referencePaths.indexOf(e)===-1&&(this.referenced=!0,this.references++,this.referencePaths.push(e))},e.prototype.dereference=function(){this.references--,this.referenced=!!this.references},e}();t.default=a,e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t,r){for(var n=[].concat(e),i=(0,u.default)(null);n.length;){var s=n.shift();if(s){var a=c.getBindingIdentifiers.keys[s.type];if(c.isIdentifier(s))if(t){var o=i[s.name]=i[s.name]||[];o.push(s)}else i[s.name]=s;else if(c.isExportDeclaration(s))c.isDeclaration(e.declaration)&&n.push(e.declaration);else{if(r){if(c.isFunctionDeclaration(s)){n.push(s.id);continue}if(c.isFunctionExpression(s))continue}if(a)for(var l=0;l<a.length;l++){var f=a[l];s[f]&&(n=n.concat(s[f]))}}}}return i}function a(e,t){return s(e,t,!0)}t.__esModule=!0;var o=r(9),u=i(o);t.getBindingIdentifiers=s,t.getOuterBindingIdentifiers=a;var l=r(1),c=n(l);s.keys={DeclareClass:["id"],DeclareFunction:["id"],DeclareModule:["id"],DeclareVariable:["id"],InterfaceDeclaration:["id"],TypeAlias:["id"],CatchClause:["param"],LabeledStatement:["label"],UnaryExpression:["argument"],AssignmentExpression:["left"],ImportSpecifier:["local"],ImportNamespaceSpecifier:["local"],ImportDefaultSpecifier:["local"],ImportDeclaration:["specifiers"],ExportSpecifier:["exported"],ExportNamespaceSpecifier:["exported"],ExportDefaultSpecifier:["exported"],FunctionDeclaration:["id","params"],FunctionExpression:["id","params"],ClassDeclaration:["id"],ClassExpression:["id"],RestElement:["argument"],UpdateExpression:["argument"],RestProperty:["argument"],ObjectProperty:["value"],AssignmentPattern:["left"],ArrayPattern:["elements"],ObjectPattern:["properties"],VariableDeclaration:["declarations"],VariableDeclarator:["id"]}},function(e,t,r){"use strict";var n=r(139),i=r(11)("toStringTag"),s="Arguments"==n(function(){return arguments}()),a=function(e,t){try{return e[t]}catch(e){}};e.exports=function(e){var t,r,o;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(r=a(t=Object(e),i))?r:s?n(t):"Object"==(o=n(t))&&"function"==typeof t.callee?"Arguments":o}},function(e,t,r){"use strict";var n=r(146),i=r(56).getWeak,s=r(21),a=r(24),o=r(137),u=r(91),l=r(138),c=r(29),f=l(5),p=l(6),d=0,h=function(e){return e._l||(e._l=new m)},m=function(){this.a=[]},v=function(e,t){return f(e.a,function(e){return e[0]===t})};m.prototype={get:function(e){var t=v(this,e);if(t)return t[1]},has:function(e){return!!v(this,e)},set:function(e,t){var r=v(this,e);r?r[1]=t:this.a.push([e,t])},delete:function(e){var t=p(this.a,function(t){return t[0]===e});return~t&&this.a.splice(t,1),!!~t}},e.exports={getConstructor:function(e,t,r,s){var l=e(function(e,n){o(e,l,t,"_i"),e._i=d++,e._l=void 0,void 0!=n&&u(n,r,e[s],e)});return n(l.prototype,{delete:function(e){
+if(!a(e))return!1;var t=i(e);return t===!0?h(this).delete(e):t&&c(t,this._i)&&delete t[this._i]},has:function(e){if(!a(e))return!1;var t=i(e);return t===!0?h(this).has(e):t&&c(t,this._i)}}),l},def:function(e,t,r){var n=i(s(t),!0);return n===!0?h(e).set(t,r):n[e._i]=r,e},ufstore:h}},function(e,t,r){"use strict";var n=r(24),i=r(14).document,s=n(i)&&n(i.createElement);e.exports=function(e){return s?i.createElement(e):{}}},function(e,t,r){"use strict";e.exports=!r(22)&&!r(36)(function(){return 7!=Object.defineProperty(r(227)("div"),"a",{get:function(){return 7}}).a})},function(e,t,r){"use strict";var n=r(139);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t){"use strict";e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,r){"use strict";var n=r(43),i=r(145),s=r(93),a=r(96),o=r(142),u=Object.assign;e.exports=!u||r(36)(function(){var e={},t={},r=Symbol(),n="abcdefghijklmnopqrst";return e[r]=7,n.split("").forEach(function(e){t[e]=e}),7!=u({},e)[r]||Object.keys(u({},t)).join("")!=n})?function(e,t){for(var r=a(e),u=arguments.length,l=1,c=i.f,f=s.f;u>l;)for(var p,d=o(arguments[l++]),h=c?n(d).concat(c(d)):n(d),m=h.length,v=0;m>v;)f.call(d,p=h[v++])&&(r[p]=d[p]);return r}:u},function(e,t,r){"use strict";var n=r(93),i=r(94),s=r(37),a=r(152),o=r(29),u=r(228),l=Object.getOwnPropertyDescriptor;t.f=r(22)?l:function(e,t){if(e=s(e),t=a(t,!0),u)try{return l(e,t)}catch(e){}if(o(e,t))return i(!n.f.call(e,t),e[t])}},function(e,t,r){"use strict";var n=r(234),i=r(141).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,i)}},function(e,t,r){"use strict";var n=r(29),i=r(37),s=r(414)(!1),a=r(148)("IE_PROTO");e.exports=function(e,t){var r,o=i(e),u=0,l=[];for(r in o)r!=a&&n(o,r)&&l.push(r);for(;t.length>u;)n(o,r=t[u++])&&(~s(l,r)||l.push(r));return l}},function(e,t,r){"use strict";var n=r(225),i=r(11)("iterator"),s=r(55);e.exports=r(5).getIteratorMethod=function(e){if(void 0!=e)return e[i]||e["@@iterator"]||s[n(e)]}},function(e,t,r){(function(n){"use strict";function i(){return"undefined"!=typeof window&&"process"in window&&"renderer"===window.process.type||("undefined"!=typeof document&&"WebkitAppearance"in document.documentElement.style||"undefined"!=typeof window&&window.console&&(console.firebug||console.exception&&console.table)||navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31||navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))}function s(e){var r=this.useColors;if(e[0]=(r?"%c":"")+this.namespace+(r?" %c":" ")+e[0]+(r?"%c ":" ")+"+"+t.humanize(this.diff),r){var n="color: "+this.color;e.splice(1,0,n,"color: inherit");var i=0,s=0;e[0].replace(/%[a-z%]/g,function(e){"%%"!==e&&(i++,"%c"===e&&(s=i))}),e.splice(s,0,n)}}function a(){return"object"===("undefined"==typeof console?"undefined":c(console))&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function o(e){try{null==e?t.storage.removeItem("debug"):t.storage.debug=e}catch(e){}}function u(){try{return t.storage.debug}catch(e){}if("undefined"!=typeof n&&"env"in n)return n.env.DEBUG}function l(){try{return window.localStorage}catch(e){}}var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t=e.exports=r(446),t.log=a,t.formatArgs=s,t.save=o,t.load=u,t.useColors=i,t.storage="undefined"!=typeof window.chrome&&"undefined"!=typeof window.chrome.storage?window.chrome.storage.local:l(),t.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],t.formatters.j=function(e){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},t.enable(u())}).call(t,r(18))},function(e,t){"use strict";!function(){function t(e){return 48<=e&&e<=57}function r(e){return 48<=e&&e<=57||97<=e&&e<=102||65<=e&&e<=70}function n(e){return e>=48&&e<=55}function i(e){return 32===e||9===e||11===e||12===e||160===e||e>=5760&&d.indexOf(e)>=0}function s(e){return 10===e||13===e||8232===e||8233===e}function a(e){if(e<=65535)return String.fromCharCode(e);var t=String.fromCharCode(Math.floor((e-65536)/1024)+55296),r=String.fromCharCode((e-65536)%1024+56320);return t+r}function o(e){return e<128?h[e]:p.NonAsciiIdentifierStart.test(a(e))}function u(e){return e<128?m[e]:p.NonAsciiIdentifierPart.test(a(e))}function l(e){return e<128?h[e]:f.NonAsciiIdentifierStart.test(a(e))}function c(e){return e<128?m[e]:f.NonAsciiIdentifierPart.test(a(e))}var f,p,d,h,m,v;for(p={NonAsciiIdentifierStart:/[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B2\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA7AD\uA7B0\uA7B1\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64\uAB65\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]/,NonAsciiIdentifierPart:/[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u08A0-\u08B2\u08E4-\u0963\u0966-\u096F\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C00-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58\u0C59\u0C60-\u0C63\u0C66-\u0C6F\u0C81-\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D01-\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D57\u0D60-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191E\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19D9\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1AB0-\u1ABD\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1CD0-\u1CD2\u1CD4-\u1CF6\u1CF8\u1CF9\u1D00-\u1DF5\u1DFC-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u200C\u200D\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u2E2F\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099\u309A\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA69D\uA69F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA7AD\uA7B0\uA7B1\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C4\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uA9E0-\uA9FE\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64\uAB65\uABC0-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE2D\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]/},f={NonAsciiIdentifierStart:/[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B2\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309B-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA7AD\uA7B0\uA7B1\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64\uAB65\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF30-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDE00-\uDE11\uDE13-\uDE2B\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF5D-\uDF61]|\uD805[\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDE00-\uDE2F\uDE44\uDE80-\uDEAA]|\uD806[\uDCA0-\uDCDF\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF98]|\uD809[\uDC00-\uDC6E]|[\uD80C\uD840-\uD868\uD86A-\uD86C][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F]|\uD82C[\uDC00\uDC01]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D]|\uD87E[\uDC00-\uDE1D]/,NonAsciiIdentifierPart:/[\xAA\xB5\xB7\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u08A0-\u08B2\u08E4-\u0963\u0966-\u096F\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C00-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58\u0C59\u0C60-\u0C63\u0C66-\u0C6F\u0C81-\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D01-\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D57\u0D60-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1369-\u1371\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191E\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19DA\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1AB0-\u1ABD\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1CD0-\u1CD2\u1CD4-\u1CF6\u1CF8\u1CF9\u1D00-\u1DF5\u1DFC-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u200C\u200D\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA69D\uA69F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA7AD\uA7B0\uA7B1\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C4\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uA9E0-\uA9FE\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64\uAB65\uABC0-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE2D\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDDFD\uDE80-\uDE9C\uDEA0-\uDED0\uDEE0\uDF00-\uDF1F\uDF30-\uDF4A\uDF50-\uDF7A\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00-\uDE03\uDE05\uDE06\uDE0C-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE38-\uDE3A\uDE3F\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE6\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48]|\uD804[\uDC00-\uDC46\uDC66-\uDC6F\uDC7F-\uDCBA\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD00-\uDD34\uDD36-\uDD3F\uDD50-\uDD73\uDD76\uDD80-\uDDC4\uDDD0-\uDDDA\uDE00-\uDE11\uDE13-\uDE37\uDEB0-\uDEEA\uDEF0-\uDEF9\uDF01-\uDF03\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3C-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF57\uDF5D-\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC80-\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDB5\uDDB8-\uDDC0\uDE00-\uDE40\uDE44\uDE50-\uDE59\uDE80-\uDEB7\uDEC0-\uDEC9]|\uD806[\uDCA0-\uDCE9\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF98]|\uD809[\uDC00-\uDC6E]|[\uD80C\uD840-\uD868\uD86A-\uD86C][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDED0-\uDEED\uDEF0-\uDEF4\uDF00-\uDF36\uDF40-\uDF43\uDF50-\uDF59\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50-\uDF7E\uDF8F-\uDF9F]|\uD82C[\uDC00\uDC01]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99\uDC9D\uDC9E]|\uD834[\uDD65-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD\uDE42-\uDE44]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD83A[\uDC00-\uDCC4\uDCD0-\uDCD6]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D]|\uD87E[\uDC00-\uDE1D]|\uDB40[\uDD00-\uDDEF]/},d=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279],h=new Array(128),v=0;v<128;++v)h[v]=v>=97&&v<=122||v>=65&&v<=90||36===v||95===v;for(m=new Array(128),v=0;v<128;++v)m[v]=v>=97&&v<=122||v>=65&&v<=90||v>=48&&v<=57||36===v||95===v;e.exports={isDecimalDigit:t,isHexDigit:r,isOctalDigit:n,isWhiteSpace:i,isLineTerminator:s,isIdentifierStartES5:o,isIdentifierPartES5:u,isIdentifierStartES6:l,isIdentifierPartES6:c}}()},function(e,t,r){"use strict";var n=r(38),i=r(16),s=n(i,"Set");e.exports=s},function(e,t,r){"use strict";function n(e){var t=-1,r=null==e?0:e.length;for(this.__data__=new i;++t<r;)this.add(e[t])}var i=r(159),s=r(553),a=r(554);n.prototype.add=n.prototype.push=s,n.prototype.has=a,e.exports=n},function(e,t,r){"use strict";var n=r(16),i=n.Uint8Array;e.exports=i},function(e,t){"use strict";function r(e,t,r){switch(r.length){case 0:return e.call(t);case 1:return e.call(t,r[0]);case 2:return e.call(t,r[0],r[1]);case 3:return e.call(t,r[0],r[1],r[2])}return e.apply(t,r)}e.exports=r},function(e,t){"use strict";function r(e,t){for(var r=-1,n=null==e?0:e.length;++r<n&&t(e[r],r,e)!==!1;);return e}e.exports=r},function(e,t,r){"use strict";function n(e,t){var r=a(e),n=!r&&s(e),c=!r&&!n&&o(e),p=!r&&!n&&!c&&l(e),d=r||n||c||p,h=d?i(e.length,String):[],m=h.length;for(var v in e)!t&&!f.call(e,v)||d&&("length"==v||c&&("offset"==v||"parent"==v)||p&&("buffer"==v||"byteLength"==v||"byteOffset"==v)||u(v,m))||h.push(v);return h}var i=r(501),s=r(114),a=r(6),o=r(115),u=r(170),l=r(177),c=Object.prototype,f=c.hasOwnProperty;e.exports=n},function(e,t){"use strict";function r(e,t,r,n){var i=-1,s=null==e?0:e.length;for(n&&s&&(r=e[++i]);++i<s;)r=t(r,e[i],i,e);return r}e.exports=r},function(e,t,r){"use strict";function n(e,t,r){(void 0===r||s(e[t],r))&&(void 0!==r||t in e)||i(e,t,r)}var i=r(162),s=r(45);e.exports=n},function(e,t,r){"use strict";var n=r(476),i=r(517),s=i(n);e.exports=s},function(e,t,r){"use strict";var n=r(518),i=n();e.exports=i},function(e,t,r){"use strict";function n(e,t){t=i(t,e);for(var r=0,n=t.length;null!=e&&r<n;)e=e[s(t[r++])];return r&&r==n?e:void 0}var i=r(253),s=r(110);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){var n=t(e);return s(e)?n:i(n,r(e))}var i=r(160),s=r(6);e.exports=n},function(e,t,r){"use strict";function n(e,t,r,o,u){return e===t||(null==e||null==t||!s(e)&&!a(t)?e!==e&&t!==t:i(e,t,r,o,n,u))}var i=r(481),s=r(12),a=r(13);e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=-1,n=s(e)?Array(e.length):[];return i(e,function(e,i,s){n[++r]=t(e,i,s)}),n}var i=r(246),s=r(26);e.exports=n},function(e,t){"use strict";function r(e,t){return e.has(t)}e.exports=r},function(e,t,r){"use strict";function n(e,t){return i(e)?e:s(e,t)?[e]:a(o(e))}var i=r(6),s=r(172),a=r(564),o=r(62);e.exports=n},function(e,t,r){(function(e){"use strict";function n(e,t){if(t)return e.slice();var r=e.length,n=c?c(r):new e.constructor(r);return e.copy(n),n}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=r(16),a="object"==i(t)&&t&&!t.nodeType&&t,o=a&&"object"==i(e)&&e&&!e.nodeType&&e,u=o&&o.exports===a,l=u?s.Buffer:void 0,c=l?l.allocUnsafe:void 0;e.exports=n}).call(t,r(39)(e))},function(e,t,r){"use strict";function n(e,t){var r=t?i(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)}var i=r(166);e.exports=n},function(e,t,r){"use strict";function n(e){return function(t,r,n){var o=Object(t);if(!s(t)){var u=i(r,3);t=a(t),r=function(e){return u(o[e],e,o)}}var l=e(t,r,n);return l>-1?o[u?t[l]:l]:void 0}}var i=r(59),s=r(26),a=r(27);e.exports=n},function(e,t,r){"use strict";var n=r(38),i=function(){try{var e=n(Object,"defineProperty");return e({},"",{}),e}catch(e){}}();e.exports=i},function(e,t,r){"use strict";function n(e,t,r,n,l,c){
+var f=r&o,p=e.length,d=t.length;if(p!=d&&!(f&&d>p))return!1;var h=c.get(e);if(h&&c.get(t))return h==t;var m=-1,v=!0,y=r&u?new i:void 0;for(c.set(e,t),c.set(t,e);++m<p;){var g=e[m],b=t[m];if(n)var E=f?n(b,g,m,t,e,c):n(g,b,m,e,t,c);if(void 0!==E){if(E)continue;v=!1;break}if(y){if(!s(t,function(e,t){if(!a(y,t)&&(g===e||l(g,e,r,n,c)))return y.push(t)})){v=!1;break}}else if(g!==b&&!l(g,b,r,n,c)){v=!1;break}}return c.delete(e),c.delete(t),v}var i=r(239),s=r(468),a=r(252),o=1,u=2;e.exports=n},function(e,t){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n="object"==("undefined"==typeof t?"undefined":r(t))&&t&&t.Object===Object&&t;e.exports=n}).call(t,function(){return this}())},function(e,t,r){"use strict";var n=r(160),i=r(168),s=r(169),a=r(277),o=Object.getOwnPropertySymbols,u=o?function(e){for(var t=[];e;)n(t,s(e)),e=i(e);return t}:a;e.exports=u},function(e,t,r){"use strict";var n=r(460),i=r(158),s=r(462),a=r(238),o=r(463),u=r(15),l=r(268),c="[object Map]",f="[object Object]",p="[object Promise]",d="[object Set]",h="[object WeakMap]",m="[object DataView]",v=l(n),y=l(i),g=l(s),b=l(a),E=l(o),x=u;(n&&x(new n(new ArrayBuffer(1)))!=m||i&&x(new i)!=c||s&&x(s.resolve())!=p||a&&x(new a)!=d||o&&x(new o)!=h)&&(x=function(e){var t=u(e),r=t==f?e.constructor:void 0,n=r?l(r):"";if(n)switch(n){case v:return m;case y:return c;case g:return p;case b:return d;case E:return h}return t}),e.exports=x},function(e,t,r){"use strict";function n(e,t,r){t=i(t,e);for(var n=-1,c=t.length,f=!1;++n<c;){var p=l(t[n]);if(!(f=null!=e&&r(e,p)))break;e=e[p]}return f||++n!=c?f:(c=null==e?0:e.length,!!c&&u(c)&&o(p,c)&&(a(e)||s(e)))}var i=r(253),s=r(114),a=r(6),o=r(170),u=r(175),l=r(110);e.exports=n},function(e,t,r){"use strict";function n(e){return"function"!=typeof e.constructor||a(e)?{}:i(s(e))}var i=r(474),s=r(168),a=r(107);e.exports=n},function(e,t,r){"use strict";function n(e){return e===e&&!i(e)}var i=r(12);e.exports=n},function(e,t){"use strict";function r(e){var t=-1,r=Array(e.size);return e.forEach(function(e,n){r[++t]=[n,e]}),r}e.exports=r},function(e,t){"use strict";function r(e,t){return function(r){return null!=r&&(r[e]===t&&(void 0!==t||e in Object(r)))}}e.exports=r},function(e,t,r){(function(e){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=r(259),s="object"==n(t)&&t&&!t.nodeType&&t,a=s&&"object"==n(e)&&e&&!e.nodeType&&e,o=a&&a.exports===s,u=o&&i.process,l=function(){try{return u&&u.binding&&u.binding("util")}catch(e){}}();e.exports=l}).call(t,r(39)(e))},function(e,t){"use strict";function r(e){if(null!=e){try{return i.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var n=Function.prototype,i=n.toString;e.exports=r},function(e,t,r){"use strict";var n=r(241),i=r(470),s=r(567),a=r(103),o=a(function(e){return e.push(void 0,i),n(s,void 0,e)});e.exports=o},function(e,t,r){"use strict";function n(e,t){return null!=e&&s(e,t,i)}var i=r(477),s=r(262);e.exports=n},function(e,t,r){"use strict";function n(e){return e===!0||e===!1||s(e)&&i(e)==a}var i=r(15),s=r(13),a="[object Boolean]";e.exports=n},function(e,t,r){"use strict";function n(e){return"number"==typeof e||s(e)&&i(e)==a}var i=r(15),s=r(13),a="[object Number]";e.exports=n},function(e,t,r){"use strict";function n(e){if(!a(e)||i(e)!=o)return!1;var t=s(e);if(null===t)return!0;var r=f.call(t,"constructor")&&t.constructor;return"function"==typeof r&&r instanceof r&&c.call(r)==p}var i=r(15),s=r(168),a=r(13),o="[object Object]",u=Function.prototype,l=Object.prototype,c=u.toString,f=l.hasOwnProperty,p=c.call(Object);e.exports=n},function(e,t,r){"use strict";var n=r(485),i=r(104),s=r(267),a=s&&s.isRegExp,o=a?i(a):n;e.exports=o},function(e,t,r){"use strict";var n=r(103),i=r(588),s=n(i);e.exports=s},function(e,t,r){"use strict";function n(e,t,r){return t=(r?s(e,t,r):void 0===t)?1:a(t),i(o(e),t)}var i=r(497),s=r(171),a=r(47),o=r(62);e.exports=n},function(e,t){"use strict";function r(){return[]}e.exports=r},function(e,t,r){"use strict";function n(e){return null==e?[]:i(e,s(e))}var i=r(503),s=r(27);e.exports=n},function(e,t){"use strict";function r(e,t,r){if(c)try{c.call(l,e,t,{value:r})}catch(n){e[t]=r}else e[t]=r}function n(e){return e&&(r(e,"call",e.call),r(e,"apply",e.apply)),e}function i(e){return f?f.call(l,e):(m.prototype=e||null,new m)}function s(){do var e=a(h.call(d.call(v(),36),2));while(p.call(y,e));return y[e]=e}function a(e){var t={};return t[e]=!0,Object.keys(t)[0]}function o(e){return i(null)}function u(e){function t(t){function n(r,n){if(r===u)return n?i=null:i||(i=e(t))}var i;r(t,a,n)}function n(e){return p.call(e,a)||t(e),e[a](u)}var a=s(),u=i(null);return e=e||o,n.forget=function(e){p.call(e,a)&&e[a](u,!0)},n}var l=Object,c=Object.defineProperty,f=Object.create;n(c),n(f);var p=n(Object.prototype.hasOwnProperty),d=n(Number.prototype.toString),h=n(String.prototype.slice),m=function(){},v=Math.random,y=i(null);r(t,"makeUniqueKey",s);var g=Object.getOwnPropertyNames;Object.getOwnPropertyNames=function(e){for(var t=g(e),r=0,n=0,i=t.length;r<i;++r)p.call(y,t[r])||(r>n&&(t[n]=t[r]),++n);return t.length=n,t},r(t,"makeAccessor",u)},function(e,t,r){var n;(function(e,i){"use strict";var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(a){var o="object"==s(t)&&t,u="object"==s(e)&&e&&e.exports==o&&e,l="object"==("undefined"==typeof i?"undefined":s(i))&&i;l.global!==l&&l.window!==l||(a=l);var c={rangeOrder:"A range’s `stop` value must be greater than or equal to the `start` value.",codePointRange:"Invalid code point value. Code points range from U+000000 to U+10FFFF."},f=55296,p=56319,d=56320,h=57343,m=/\\x00([^0123456789]|$)/g,v={},y=v.hasOwnProperty,g=function(e,t){var r;for(r in t)y.call(t,r)&&(e[r]=t[r]);return e},b=function(e,t){for(var r=-1,n=e.length;++r<n;)t(e[r],r)},E=v.toString,x=function(e){return"[object Array]"==E.call(e)},A=function(e){return"number"==typeof e||"[object Number]"==E.call(e)},S="0000",_=function(e,t){var r=String(e);return r.length<t?(S+r).slice(-t):r},D=function(e){return Number(e).toString(16).toUpperCase()},C=[].slice,w=function(e){for(var t,r=-1,n=e.length,i=n-1,s=[],a=!0,o=0;++r<n;)if(t=e[r],a)s.push(t),o=t,a=!1;else if(t==o+1){if(r!=i){o=t;continue}a=!0,s.push(t+1)}else s.push(o+1,t),o=t;return a||s.push(t+1),s},F=function(e,t){for(var r,n,i=0,s=e.length;i<s;){if(r=e[i],n=e[i+1],t>=r&&t<n)return t==r?n==r+1?(e.splice(i,2),e):(e[i]=t+1,e):t==n-1?(e[i+1]=t,e):(e.splice(i,2,r,t,t+1,n),e);i+=2}return e},k=function(e,t,r){if(r<t)throw Error(c.rangeOrder);for(var n,i,s=0;s<e.length;){if(n=e[s],i=e[s+1]-1,n>r)return e;if(t<=n&&r>=i)e.splice(s,2);else{if(t>=n&&r<i)return t==n?(e[s]=r+1,e[s+1]=i+1,e):(e.splice(s,2,n,t,r+1,i+1),e);if(t>=n&&t<=i)e[s+1]=t;else if(r>=n&&r<=i)return e[s]=r+1,e;s+=2}}return e},P=function(e,t){var r,n,i=0,s=null,a=e.length;if(t<0||t>1114111)throw RangeError(c.codePointRange);for(;i<a;){if(r=e[i],n=e[i+1],t>=r&&t<n)return e;if(t==r-1)return e[i]=t,e;if(r>t)return e.splice(null!=s?s+2:0,0,t,t+1),e;if(t==n)return t+1==e[i+2]?(e.splice(i,4,r,e[i+3]),e):(e[i+1]=t+1,e);s=i,i+=2}return e.push(t,t+1),e},T=function(e,t){for(var r,n,i=0,s=e.slice(),a=t.length;i<a;)r=t[i],n=t[i+1]-1,s=r==n?P(s,r):B(s,r,n),i+=2;return s},O=function(e,t){for(var r,n,i=0,s=e.slice(),a=t.length;i<a;)r=t[i],n=t[i+1]-1,s=r==n?F(s,r):k(s,r,n),i+=2;return s},B=function(e,t,r){if(r<t)throw Error(c.rangeOrder);if(t<0||t>1114111||r<0||r>1114111)throw RangeError(c.codePointRange);for(var n,i,s=0,a=!1,o=e.length;s<o;){if(n=e[s],i=e[s+1],a){if(n==r+1)return e.splice(s-1,2),e;if(n>r)return e;n>=t&&n<=r&&(i>t&&i-1<=r?(e.splice(s,2),s-=2):(e.splice(s-1,2),s-=2))}else{if(n==r+1)return e[s]=t,e;if(n>r)return e.splice(s,0,t,r+1),e;if(t>=n&&t<i&&r+1<=i)return e;t>=n&&t<i||i==t?(e[s+1]=r+1,a=!0):t<=n&&r+1>=i&&(e[s]=t,e[s+1]=r+1,a=!0)}s+=2}return a||e.push(t,r+1),e},R=function(e,t){var r=0,n=e.length,i=e[r],s=e[n-1];if(n>=2&&(t<i||t>s))return!1;for(;r<n;){if(i=e[r],s=e[r+1],t>=i&&t<s)return!0;r+=2}return!1},I=function(e,t){for(var r,n=0,i=t.length,s=[];n<i;)r=t[n],R(e,r)&&s.push(r),++n;return w(s)},M=function(e){return!e.length},N=function(e){return 2==e.length&&e[0]+1==e[1]},L=function(e){for(var t,r,n=0,i=[],s=e.length;n<s;){for(t=e[n],r=e[n+1];t<r;)i.push(t),++t;n+=2}return i},j=Math.floor,U=function(e){return parseInt(j((e-65536)/1024)+f,10)},V=function(e){return parseInt((e-65536)%1024+d,10)},G=String.fromCharCode,W=function(e){var t;return t=9==e?"\\t":10==e?"\\n":12==e?"\\f":13==e?"\\r":92==e?"\\\\":36==e||e>=40&&e<=43||45==e||46==e||63==e||e>=91&&e<=94||e>=123&&e<=125?"\\"+G(e):e>=32&&e<=126?G(e):e<=255?"\\x"+_(D(e),2):"\\u"+_(D(e),4)},Y=function(e){return e<=65535?W(e):"\\u{"+e.toString(16).toUpperCase()+"}"},q=function(e){var t,r=e.length,n=e.charCodeAt(0);return n>=f&&n<=p&&r>1?(t=e.charCodeAt(1),1024*(n-f)+t-d+65536):n},K=function(e){var t,r,n="",i=0,s=e.length;if(N(e))return W(e[0]);for(;i<s;)t=e[i],r=e[i+1]-1,n+=t==r?W(t):t+1==r?W(t)+W(r):W(t)+"-"+W(r),i+=2;return"["+n+"]"},H=function(e){var t,r,n="",i=0,s=e.length;if(N(e))return Y(e[0]);for(;i<s;)t=e[i],r=e[i+1]-1,n+=t==r?Y(t):t+1==r?Y(t)+Y(r):Y(t)+"-"+Y(r),i+=2;return"["+n+"]"},J=function(e){for(var t,r,n=[],i=[],s=[],a=[],o=0,u=e.length;o<u;)t=e[o],r=e[o+1]-1,t<f?(r<f&&s.push(t,r+1),r>=f&&r<=p&&(s.push(t,f),n.push(f,r+1)),r>=d&&r<=h&&(s.push(t,f),n.push(f,p+1),i.push(d,r+1)),r>h&&(s.push(t,f),n.push(f,p+1),i.push(d,h+1),r<=65535?s.push(h+1,r+1):(s.push(h+1,65536),a.push(65536,r+1)))):t>=f&&t<=p?(r>=f&&r<=p&&n.push(t,r+1),r>=d&&r<=h&&(n.push(t,p+1),i.push(d,r+1)),r>h&&(n.push(t,p+1),i.push(d,h+1),r<=65535?s.push(h+1,r+1):(s.push(h+1,65536),a.push(65536,r+1)))):t>=d&&t<=h?(r>=d&&r<=h&&i.push(t,r+1),r>h&&(i.push(t,h+1),r<=65535?s.push(h+1,r+1):(s.push(h+1,65536),a.push(65536,r+1)))):t>h&&t<=65535?r<=65535?s.push(t,r+1):(s.push(t,65536),a.push(65536,r+1)):a.push(t,r+1),o+=2;return{loneHighSurrogates:n,loneLowSurrogates:i,bmp:s,astral:a}},X=function(e){for(var t,r,n,i,s,a,o=[],u=[],l=!1,c=-1,f=e.length;++c<f;)if(t=e[c],r=e[c+1]){for(n=t[0],i=t[1],s=r[0],a=r[1],u=i;s&&n[0]==s[0]&&n[1]==s[1];)u=N(a)?P(u,a[0]):B(u,a[0],a[1]-1),++c,t=e[c],n=t[0],i=t[1],r=e[c+1],s=r&&r[0],a=r&&r[1],l=!0;o.push([n,l?u:i]),l=!1}else o.push(t);return z(o)},z=function(e){if(1==e.length)return e;for(var t=-1,r=-1;++t<e.length;){var n=e[t],i=n[1],s=i[0],a=i[1];for(r=t;++r<e.length;){var o=e[r],u=o[1],l=u[0],c=u[1];s==l&&a==c&&(N(o[0])?n[0]=P(n[0],o[0][0]):n[0]=B(n[0],o[0][0],o[0][1]-1),e.splice(r,1),--r)}}return e},$=function(e){if(!e.length)return[];for(var t,r,n,i,s,a,o=0,u=[],l=e.length;o<l;){t=e[o],r=e[o+1]-1,n=U(t),i=V(t),s=U(r),a=V(r);var c=i==d,f=a==h,p=!1;n==s||c&&f?(u.push([[n,s+1],[i,a+1]]),p=!0):u.push([[n,n+1],[i,h+1]]),!p&&n+1<s&&(f?(u.push([[n+1,s+1],[d,a+1]]),p=!0):u.push([[n+1,s],[d,h+1]])),p||u.push([[s,s+1],[d,a+1]]),o+=2}return X(u)},Q=function(e){var t=[];return b(e,function(e){var r=e[0],n=e[1];t.push(K(r)+K(n))}),t.join("|")},Z=function(e,t,r){if(r)return H(e);var n=[],i=J(e),s=i.loneHighSurrogates,a=i.loneLowSurrogates,o=i.bmp,u=i.astral,l=!M(s),c=!M(a),f=$(u);return t&&(o=T(o,s),l=!1,o=T(o,a),c=!1),M(o)||n.push(K(o)),f.length&&n.push(Q(f)),l&&n.push(K(s)+"(?![\\uDC00-\\uDFFF])"),c&&n.push("(?:[^\\uD800-\\uDBFF]|^)"+K(a)),n.join("|")},ee=function e(t){return arguments.length>1&&(t=C.call(arguments)),this instanceof e?(this.data=[],t?this.add(t):this):(new e).add(t)};ee.version="1.3.2";var te=ee.prototype;g(te,{add:function(e){var t=this;return null==e?t:e instanceof ee?(t.data=T(t.data,e.data),t):(arguments.length>1&&(e=C.call(arguments)),x(e)?(b(e,function(e){t.add(e)}),t):(t.data=P(t.data,A(e)?e:q(e)),t))},remove:function(e){var t=this;return null==e?t:e instanceof ee?(t.data=O(t.data,e.data),t):(arguments.length>1&&(e=C.call(arguments)),x(e)?(b(e,function(e){t.remove(e)}),t):(t.data=F(t.data,A(e)?e:q(e)),t))},addRange:function(e,t){var r=this;return r.data=B(r.data,A(e)?e:q(e),A(t)?t:q(t)),r},removeRange:function(e,t){var r=this,n=A(e)?e:q(e),i=A(t)?t:q(t);return r.data=k(r.data,n,i),r},intersection:function(e){var t=this,r=e instanceof ee?L(e.data):e;return t.data=I(t.data,r),t},contains:function(e){return R(this.data,A(e)?e:q(e))},clone:function(){var e=new ee;return e.data=this.data.slice(0),e},toString:function(e){var t=Z(this.data,!!e&&e.bmpOnly,!!e&&e.hasUnicodeFlag);return t?t.replace(m,"\\0$1"):"[]"},toRegExp:function(e){var t=this.toString(e&&e.indexOf("u")!=-1?{hasUnicodeFlag:!0}:null);return RegExp(t,e||"")},valueOf:function(){return L(this.data)}}),te.toArray=te.valueOf,"object"==s(r(48))&&r(48)?(n=function(){return ee}.call(t,r,t,e),!(void 0!==n&&(e.exports=n))):o&&!o.nodeType?u?u.exports=ee:o.regenerate=ee:a.regenerate=ee}(void 0)}).call(t,r(39)(e),function(){return this}())},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){h.default.ok(this instanceof s),v.assertIdentifier(e),this.nextTempId=0,this.contextId=e,this.listing=[],this.marked=[!0],this.finalLoc=a(),this.tryEntries=[],this.leapManager=new g.LeapManager(this)}function a(){return v.numericLiteral(-1)}function o(e){return new Error("all declarations should have been transformed into assignments before the Exploder began its work: "+(0,p.default)(e))}function u(e){var t=e.type;return"normal"===t?!S.call(e,"target"):"break"===t||"continue"===t?!S.call(e,"value")&&v.isLiteral(e.target):("return"===t||"throw"===t)&&(S.call(e,"value")&&!S.call(e,"target"))}var l=r(7),c=i(l),f=r(34),p=i(f),d=r(64),h=i(d),m=r(1),v=n(m),y=r(603),g=n(y),b=r(604),E=n(b),x=r(282),A=n(x),S=Object.prototype.hasOwnProperty,_=s.prototype;t.Emitter=s,_.mark=function(e){v.assertLiteral(e);var t=this.listing.length;return e.value===-1?e.value=t:h.default.strictEqual(e.value,t),this.marked[t]=!0,e},_.emit=function(e){v.isExpression(e)&&(e=v.expressionStatement(e)),v.assertStatement(e),this.listing.push(e)},_.emitAssign=function(e,t){return this.emit(this.assign(e,t)),e},_.assign=function(e,t){return v.expressionStatement(v.assignmentExpression("=",e,t))},_.contextProperty=function(e,t){return v.memberExpression(this.contextId,t?v.stringLiteral(e):v.identifier(e),!!t)},_.stop=function(e){e&&this.setReturnValue(e),this.jump(this.finalLoc)},_.setReturnValue=function(e){v.assertExpression(e.value),this.emitAssign(this.contextProperty("rval"),this.explodeExpression(e))},_.clearPendingException=function(e,t){v.assertLiteral(e);var r=v.callExpression(this.contextProperty("catch",!0),[e]);t?this.emitAssign(t,r):this.emit(r)},_.jump=function(e){this.emitAssign(this.contextProperty("next"),e),this.emit(v.breakStatement())},_.jumpIf=function(e,t){v.assertExpression(e),v.assertLiteral(t),this.emit(v.ifStatement(e,v.blockStatement([this.assign(this.contextProperty("next"),t),v.breakStatement()])))},_.jumpIfNot=function(e,t){v.assertExpression(e),v.assertLiteral(t);var r=void 0;r=v.isUnaryExpression(e)&&"!"===e.operator?e.argument:v.unaryExpression("!",e),this.emit(v.ifStatement(r,v.blockStatement([this.assign(this.contextProperty("next"),t),v.breakStatement()])))},_.makeTempVar=function(){return this.contextProperty("t"+this.nextTempId++)},_.getContextFunction=function(e){return v.functionExpression(e||null,[this.contextId],v.blockStatement([this.getDispatchLoop()]),!1,!1)},_.getDispatchLoop=function(){var e=this,t=[],r=void 0,n=!1;return e.listing.forEach(function(i,s){e.marked.hasOwnProperty(s)&&(t.push(v.switchCase(v.numericLiteral(s),r=[])),n=!1),n||(r.push(i),v.isCompletionStatement(i)&&(n=!0))}),this.finalLoc.value=this.listing.length,t.push(v.switchCase(this.finalLoc,[]),v.switchCase(v.stringLiteral("end"),[v.returnStatement(v.callExpression(this.contextProperty("stop"),[]))])),v.whileStatement(v.numericLiteral(1),v.switchStatement(v.assignmentExpression("=",this.contextProperty("prev"),this.contextProperty("next")),t))},_.getTryLocsList=function(){if(0===this.tryEntries.length)return null;var e=0;return v.arrayExpression(this.tryEntries.map(function(t){var r=t.firstLoc.value;h.default.ok(r>=e,"try entries out of order"),e=r;var n=t.catchEntry,i=t.finallyEntry,s=[t.firstLoc,n?n.firstLoc:null];return i&&(s[2]=i.firstLoc,s[3]=i.afterLoc),v.arrayExpression(s)}))},_.explode=function(e,t){var r=e.node,n=this;if(v.assertNode(r),v.isDeclaration(r))throw o(r);if(v.isStatement(r))return n.explodeStatement(e);if(v.isExpression(r))return n.explodeExpression(e,t);switch(r.type){case"Program":return e.get("body").map(n.explodeStatement,n);case"VariableDeclarator":throw o(r);case"Property":case"SwitchCase":case"CatchClause":throw new Error(r.type+" nodes should be handled by their parents");default:throw new Error("unknown Node of type "+(0,p.default)(r.type))}},_.explodeStatement=function(e,t){var r=e.node,n=this,i=void 0,s=void 0,o=void 0;if(v.assertStatement(r),t?v.assertIdentifier(t):t=null,v.isBlockStatement(r))return void e.get("body").forEach(function(e){n.explodeStatement(e)});if(!E.containsLeap(r))return void n.emit(r);var u=function(){switch(r.type){case"ExpressionStatement":n.explodeExpression(e.get("expression"),!0);break;case"LabeledStatement":s=a(),n.leapManager.withEntry(new g.LabeledEntry(s,r.label),function(){n.explodeStatement(e.get("body"),r.label)}),n.mark(s);break;case"WhileStatement":i=a(),s=a(),n.mark(i),n.jumpIfNot(n.explodeExpression(e.get("test")),s),n.leapManager.withEntry(new g.LoopEntry(s,i,t),function(){n.explodeStatement(e.get("body"))}),n.jump(i),n.mark(s);break;case"DoWhileStatement":var u=a(),l=a();s=a(),n.mark(u),n.leapManager.withEntry(new g.LoopEntry(s,l,t),function(){n.explode(e.get("body"))}),n.mark(l),n.jumpIf(n.explodeExpression(e.get("test")),u),n.mark(s);break;case"ForStatement":o=a();var c=a();s=a(),r.init&&n.explode(e.get("init"),!0),n.mark(o),r.test&&n.jumpIfNot(n.explodeExpression(e.get("test")),s),n.leapManager.withEntry(new g.LoopEntry(s,c,t),function(){n.explodeStatement(e.get("body"))}),n.mark(c),r.update&&n.explode(e.get("update"),!0),n.jump(o),n.mark(s);break;case"TypeCastExpression":return{v:n.explodeExpression(e.get("expression"))};case"ForInStatement":o=a(),s=a();var f=n.makeTempVar();n.emitAssign(f,v.callExpression(A.runtimeProperty("keys"),[n.explodeExpression(e.get("right"))])),n.mark(o);var d=n.makeTempVar();n.jumpIf(v.memberExpression(v.assignmentExpression("=",d,v.callExpression(f,[])),v.identifier("done"),!1),s),n.emitAssign(r.left,v.memberExpression(d,v.identifier("value"),!1)),n.leapManager.withEntry(new g.LoopEntry(s,o,t),function(){n.explodeStatement(e.get("body"))}),n.jump(o),n.mark(s);break;case"BreakStatement":n.emitAbruptCompletion({type:"break",target:n.leapManager.getBreakLoc(r.label)});break;case"ContinueStatement":n.emitAbruptCompletion({type:"continue",target:n.leapManager.getContinueLoc(r.label)});break;case"SwitchStatement":var m=n.emitAssign(n.makeTempVar(),n.explodeExpression(e.get("discriminant")));s=a();for(var y=a(),b=y,E=[],x=r.cases||[],S=x.length-1;S>=0;--S){var _=x[S];v.assertSwitchCase(_),_.test?b=v.conditionalExpression(v.binaryExpression("===",m,_.test),E[S]=a(),b):E[S]=y}var C=e.get("discriminant");C.replaceWith(b),n.jump(n.explodeExpression(C)),n.leapManager.withEntry(new g.SwitchEntry(s),function(){e.get("cases").forEach(function(e){var t=e.key;n.mark(E[t]),e.get("consequent").forEach(function(e){n.explodeStatement(e)})})}),n.mark(s),y.value===-1&&(n.mark(y),h.default.strictEqual(s.value,y.value));break;case"IfStatement":var w=r.alternate&&a();s=a(),n.jumpIfNot(n.explodeExpression(e.get("test")),w||s),n.explodeStatement(e.get("consequent")),w&&(n.jump(s),n.mark(w),n.explodeStatement(e.get("alternate"))),n.mark(s);break;case"ReturnStatement":n.emitAbruptCompletion({type:"return",value:n.explodeExpression(e.get("argument"))});break;case"WithStatement":throw new Error("WithStatement not supported in generator functions.");case"TryStatement":s=a();var F=r.handler,k=F&&a(),P=k&&new g.CatchEntry(k,F.param),T=r.finalizer&&a(),O=T&&new g.FinallyEntry(T,s),B=new g.TryEntry(n.getUnmarkedCurrentLoc(),P,O);n.tryEntries.push(B),n.updateContextPrevLoc(B.firstLoc),n.leapManager.withEntry(B,function(){n.explodeStatement(e.get("block")),k&&!function(){T?n.jump(T):n.jump(s),n.updateContextPrevLoc(n.mark(k));var t=e.get("handler.body"),r=n.makeTempVar();n.clearPendingException(B.firstLoc,r),t.traverse(D,{safeParam:r,catchParamName:F.param.name}),n.leapManager.withEntry(P,function(){n.explodeStatement(t)})}(),T&&(n.updateContextPrevLoc(n.mark(T)),n.leapManager.withEntry(O,function(){n.explodeStatement(e.get("finalizer"))}),n.emit(v.returnStatement(v.callExpression(n.contextProperty("finish"),[O.firstLoc]))))}),n.mark(s);break;case"ThrowStatement":n.emit(v.throwStatement(n.explodeExpression(e.get("argument"))));break;default:throw new Error("unknown Statement of type "+(0,p.default)(r.type))}}();return"object"===("undefined"==typeof u?"undefined":(0,c.default)(u))?u.v:void 0};var D={Identifier:function(e,t){e.node.name===t.catchParamName&&A.isReference(e)&&e.replaceWith(t.safeParam)},Scope:function(e,t){e.scope.hasOwnBinding(t.catchParamName)&&e.skip()}};_.emitAbruptCompletion=function(e){u(e)||h.default.ok(!1,"invalid completion record: "+(0,p.default)(e)),h.default.notStrictEqual(e.type,"normal","normal completions are not abrupt");var t=[v.stringLiteral(e.type)];"break"===e.type||"continue"===e.type?(v.assertLiteral(e.target),t[1]=e.target):"return"!==e.type&&"throw"!==e.type||e.value&&(v.assertExpression(e.value),t[1]=e.value),this.emit(v.returnStatement(v.callExpression(this.contextProperty("abrupt"),t)))},_.getUnmarkedCurrentLoc=function(){return v.numericLiteral(this.listing.length)},_.updateContextPrevLoc=function(e){e?(v.assertLiteral(e),e.value===-1?e.value=this.listing.length:h.default.strictEqual(e.value,this.listing.length)):e=this.getUnmarkedCurrentLoc(),this.emitAssign(this.contextProperty("prev"),e)},_.explodeExpression=function(e,t){function r(e){return v.assertExpression(e),t?void s.emit(e):e}function n(e,t,r){h.default.ok(!r||!e,"Ignoring the result of a child expression but forcing it to be assigned to a temporary variable?");var n=s.explodeExpression(t,r);return r||(e||l&&!v.isLiteral(n))&&(n=s.emitAssign(e||s.makeTempVar(),n)),n}var i=e.node;if(!i)return i;v.assertExpression(i);var s=this,o=void 0,u=void 0;if(!E.containsLeap(i))return r(i);var l=E.containsLeap.onlyChildren(i),f=function(){switch(i.type){case"MemberExpression":return{v:r(v.memberExpression(s.explodeExpression(e.get("object")),i.computed?n(null,e.get("property")):i.property,i.computed))};case"CallExpression":var l=e.get("callee"),c=e.get("arguments"),f=void 0,d=[],m=!1;if(c.forEach(function(e){m=m||E.containsLeap(e.node)}),v.isMemberExpression(l.node))if(m){var y=n(s.makeTempVar(),l.get("object")),g=l.node.computed?n(null,l.get("property")):l.node.property;d.unshift(y),f=v.memberExpression(v.memberExpression(y,g,l.node.computed),v.identifier("call"),!1)}else f=s.explodeExpression(l);else f=n(null,l),v.isMemberExpression(f)&&(f=v.sequenceExpression([v.numericLiteral(0),f]));return c.forEach(function(e){d.push(n(null,e))}),{v:r(v.callExpression(f,d))};case"NewExpression":return{v:r(v.newExpression(n(null,e.get("callee")),e.get("arguments").map(function(e){return n(null,e)})))};case"ObjectExpression":return{v:r(v.objectExpression(e.get("properties").map(function(e){return e.isObjectProperty()?v.objectProperty(e.node.key,n(null,e.get("value")),e.node.computed):e.node})))};case"ArrayExpression":return{v:r(v.arrayExpression(e.get("elements").map(function(e){return n(null,e)})))};case"SequenceExpression":var b=i.expressions.length-1;return e.get("expressions").forEach(function(e){e.key===b?o=s.explodeExpression(e,t):s.explodeExpression(e,!0)}),{v:o};case"LogicalExpression":u=a(),t||(o=s.makeTempVar());var x=n(o,e.get("left"));return"&&"===i.operator?s.jumpIfNot(x,u):(h.default.strictEqual(i.operator,"||"),s.jumpIf(x,u)),n(o,e.get("right"),t),s.mark(u),{v:o};case"ConditionalExpression":var A=a();u=a();var S=s.explodeExpression(e.get("test"));return s.jumpIfNot(S,A),t||(o=s.makeTempVar()),n(o,e.get("consequent"),t),s.jump(u),s.mark(A),n(o,e.get("alternate"),t),s.mark(u),{v:o};case"UnaryExpression":return{v:r(v.unaryExpression(i.operator,s.explodeExpression(e.get("argument")),!!i.prefix))};case"BinaryExpression":return{v:r(v.binaryExpression(i.operator,n(null,e.get("left")),n(null,e.get("right"))))};case"AssignmentExpression":return{v:r(v.assignmentExpression(i.operator,s.explodeExpression(e.get("left")),s.explodeExpression(e.get("right"))))};case"UpdateExpression":return{v:r(v.updateExpression(i.operator,s.explodeExpression(e.get("argument")),i.prefix))};case"YieldExpression":u=a();var _=i.argument&&s.explodeExpression(e.get("argument"));if(_&&i.delegate){var D=s.makeTempVar();return s.emit(v.returnStatement(v.callExpression(s.contextProperty("delegateYield"),[_,v.stringLiteral(D.property.name),u]))),s.mark(u),{v:D}}return s.emitAssign(s.contextProperty("next"),u),s.emit(v.returnStatement(_||null)),s.mark(u),{v:s.contextProperty("sent")};default:throw new Error("unknown Expression of type "+(0,p.default)(i.type))}}();return"object"===("undefined"==typeof f?"undefined":(0,c.default)(f))?f.v:void 0}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return o.memberExpression(o.identifier("regeneratorRuntime"),o.identifier(e),!1)}function s(e){return e.isReferenced()||e.parentPath.isAssignmentExpression({left:e.node})}t.__esModule=!0,t.runtimeProperty=i,t.isReference=s;var a=r(1),o=n(a)},function(e,t){"use strict";e.exports=function(e){var t=/^\\\\\?\\/.test(e),r=/[^\x00-\x80]+/.test(e);return t||r?e:e.replace(/\\/g,"/")}},function(e,t,r){"use strict";function n(){this._array=[],this._set=Object.create(null)}var i=r(63),s=Object.prototype.hasOwnProperty;n.fromArray=function(e,t){for(var r=new n,i=0,s=e.length;i<s;i++)r.add(e[i],t);return r},n.prototype.size=function(){return Object.getOwnPropertyNames(this._set).length},n.prototype.add=function(e,t){var r=i.toSetString(e),n=s.call(this._set,r),a=this._array.length;n&&!t||this._array.push(e),n||(this._set[r]=a)},n.prototype.has=function(e){var t=i.toSetString(e);return s.call(this._set,t)},n.prototype.indexOf=function(e){var t=i.toSetString(e);if(s.call(this._set,t))return this._set[t];throw new Error('"'+e+'" is not in the set.')},n.prototype.at=function(e){if(e>=0&&e<this._array.length)return this._array[e];throw new Error("No element indexed by "+e)},n.prototype.toArray=function(){return this._array.slice()},t.ArraySet=n},function(e,t,r){"use strict";function n(e){return e<0?(-e<<1)+1:(e<<1)+0}function i(e){var t=1===(1&e),r=e>>1;return t?-r:r}var s=r(611),a=5,o=1<<a,u=o-1,l=o;t.encode=function(e){var t,r="",i=n(e);do t=i&u,i>>>=a,i>0&&(t|=l),r+=s.encode(t);while(i>0);return r},t.decode=function(e,t,r){var n,o,c=e.length,f=0,p=0;do{if(t>=c)throw new Error("Expected more digits in base 64 VLQ value.");if(o=s.decode(e.charCodeAt(t++)),o===-1)throw new Error("Invalid base64 digit: "+e.charAt(t-1));n=!!(o&l),o&=u,f+=o<<p,p+=a}while(n);r.value=i(f),r.rest=t}},function(e,t,r){"use strict";function n(e){e||(e={}),this._file=s.getArg(e,"file",null),this._sourceRoot=s.getArg(e,"sourceRoot",null),this._skipValidation=s.getArg(e,"skipValidation",!1),this._sources=new a,this._names=new a,this._mappings=new o,this._sourcesContents=null}var i=r(285),s=r(63),a=r(284).ArraySet,o=r(613).MappingList;n.prototype._version=3,n.fromSourceMap=function(e){var t=e.sourceRoot,r=new n({file:e.file,sourceRoot:t});return e.eachMapping(function(e){var n={generated:{line:e.generatedLine,column:e.generatedColumn}};null!=e.source&&(n.source=e.source,null!=t&&(n.source=s.relative(t,n.source)),n.original={line:e.originalLine,column:e.originalColumn},null!=e.name&&(n.name=e.name)),r.addMapping(n)}),e.sources.forEach(function(t){var n=e.sourceContentFor(t);null!=n&&r.setSourceContent(t,n)}),r},n.prototype.addMapping=function(e){var t=s.getArg(e,"generated"),r=s.getArg(e,"original",null),n=s.getArg(e,"source",null),i=s.getArg(e,"name",null);this._skipValidation||this._validateMapping(t,r,n,i),null!=n&&(n=String(n),this._sources.has(n)||this._sources.add(n)),null!=i&&(i=String(i),this._names.has(i)||this._names.add(i)),this._mappings.add({generatedLine:t.line,generatedColumn:t.column,originalLine:null!=r&&r.line,originalColumn:null!=r&&r.column,source:n,name:i})},n.prototype.setSourceContent=function(e,t){var r=e;null!=this._sourceRoot&&(r=s.relative(this._sourceRoot,r)),null!=t?(this._sourcesContents||(this._sourcesContents=Object.create(null)),this._sourcesContents[s.toSetString(r)]=t):this._sourcesContents&&(delete this._sourcesContents[s.toSetString(r)],0===Object.keys(this._sourcesContents).length&&(this._sourcesContents=null))},n.prototype.applySourceMap=function(e,t,r){var n=t;if(null==t){if(null==e.file)throw new Error('SourceMapGenerator.prototype.applySourceMap requires either an explicit source file, or the source map\'s "file" property. Both were omitted.');n=e.file}var i=this._sourceRoot;null!=i&&(n=s.relative(i,n));var o=new a,u=new a;this._mappings.unsortedForEach(function(t){if(t.source===n&&null!=t.originalLine){var a=e.originalPositionFor({line:t.originalLine,column:t.originalColumn});null!=a.source&&(t.source=a.source,null!=r&&(t.source=s.join(r,t.source)),null!=i&&(t.source=s.relative(i,t.source)),t.originalLine=a.line,t.originalColumn=a.column,null!=a.name&&(t.name=a.name))}var l=t.source;null==l||o.has(l)||o.add(l);var c=t.name;null==c||u.has(c)||u.add(c)},this),this._sources=o,this._names=u,e.sources.forEach(function(t){var n=e.sourceContentFor(t);null!=n&&(null!=r&&(t=s.join(r,t)),null!=i&&(t=s.relative(i,t)),this.setSourceContent(t,n))},this)},n.prototype._validateMapping=function(e,t,r,n){if((!(e&&"line"in e&&"column"in e&&e.line>0&&e.column>=0)||t||r||n)&&!(e&&"line"in e&&"column"in e&&t&&"line"in t&&"column"in t&&e.line>0&&e.column>=0&&t.line>0&&t.column>=0&&r))throw new Error("Invalid mapping: "+JSON.stringify({generated:e,source:r,original:t,name:n}))},n.prototype._serializeMappings=function(){for(var e,t,r,n,a=0,o=1,u=0,l=0,c=0,f=0,p="",d=this._mappings.toArray(),h=0,m=d.length;h<m;h++){if(t=d[h],e="",t.generatedLine!==o)for(a=0;t.generatedLine!==o;)e+=";",o++;else if(h>0){if(!s.compareByGeneratedPositionsInflated(t,d[h-1]))continue;e+=","}e+=i.encode(t.generatedColumn-a),a=t.generatedColumn,null!=t.source&&(n=this._sources.indexOf(t.source),e+=i.encode(n-f),f=n,e+=i.encode(t.originalLine-1-l),l=t.originalLine-1,e+=i.encode(t.originalColumn-u),u=t.originalColumn,null!=t.name&&(r=this._names.indexOf(t.name),e+=i.encode(r-c),c=r)),p+=e}return p},n.prototype._generateSourcesContent=function(e,t){return e.map(function(e){if(!this._sourcesContents)return null;null!=t&&(e=s.relative(t,e));var r=s.toSetString(e);return Object.prototype.hasOwnProperty.call(this._sourcesContents,r)?this._sourcesContents[r]:null},this)},n.prototype.toJSON=function(){var e={version:this._version,sources:this._sources.toArray(),names:this._names.toArray(),mappings:this._serializeMappings()};return null!=this._file&&(e.file=this._file),null!=this._sourceRoot&&(e.sourceRoot=this._sourceRoot),this._sourcesContents&&(e.sourcesContent=this._generateSourcesContent(e.sources,e.sourceRoot)),e},n.prototype.toString=function(){return JSON.stringify(this.toJSON())},t.SourceMapGenerator=n},function(e,t,r){"use strict";t.SourceMapGenerator=r(286).SourceMapGenerator,t.SourceMapConsumer=r(615).SourceMapConsumer,
+t.SourceNode=r(616).SourceNode},function(e,t,r){(function(e){"use strict";function t(){var e={modifiers:{reset:[0,0],bold:[1,22],dim:[2,22],italic:[3,23],underline:[4,24],inverse:[7,27],hidden:[8,28],strikethrough:[9,29]},colors:{black:[30,39],red:[31,39],green:[32,39],yellow:[33,39],blue:[34,39],magenta:[35,39],cyan:[36,39],white:[37,39],gray:[90,39]},bgColors:{bgBlack:[40,49],bgRed:[41,49],bgGreen:[42,49],bgYellow:[43,49],bgBlue:[44,49],bgMagenta:[45,49],bgCyan:[46,49],bgWhite:[47,49]}};return e.colors.grey=e.colors.gray,Object.keys(e).forEach(function(t){var r=e[t];Object.keys(r).forEach(function(t){var n=r[t];e[t]=r[t]={open:"["+n[0]+"m",close:"["+n[1]+"m"}}),Object.defineProperty(e,t,{value:r,enumerable:!1})}),e}Object.defineProperty(e,"exports",{enumerable:!0,get:t})}).call(t,r(39)(e))},function(e,t,r){"use strict";e.exports=r(182)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e,t){if(e&&t)return(0,o.default)(e,t,function(e,t){if(t&&Array.isArray(e)){for(var r=t.slice(0),n=e,i=Array.isArray(n),a=0,n=i?n:(0,s.default)(n);;){var o;if(i){if(a>=n.length)break;o=n[a++]}else{if(a=n.next(),a.done)break;o=a.value}var u=o;r.indexOf(u)<0&&r.push(u)}return r}})};var a=r(585),o=n(a);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.default=function(e,t,r){if(e){if("Program"===e.type)return s.file(e,t||[],r||[]);if("File"===e.type)return e}throw new Error("Not a valid ast?")};var i=r(1),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function s(e,t){var r=[],n=E.functionExpression(null,[E.identifier("global")],E.blockStatement(r)),i=E.program([E.expressionStatement(E.callExpression(n,[c.get("selfGlobal")]))]);return r.push(E.variableDeclaration("var",[E.variableDeclarator(e,E.assignmentExpression("=",E.memberExpression(E.identifier("global"),e),E.objectExpression([])))])),t(r),i}function a(e,t){var r=[];return r.push(E.variableDeclaration("var",[E.variableDeclarator(e,E.identifier("global"))])),t(r),E.program([x({FACTORY_PARAMETERS:E.identifier("global"),BROWSER_ARGUMENTS:E.assignmentExpression("=",E.memberExpression(E.identifier("root"),e),E.objectExpression([])),COMMON_ARGUMENTS:E.identifier("exports"),AMD_ARGUMENTS:E.arrayExpression([E.stringLiteral("exports")]),FACTORY_BODY:r,UMD_ROOT:E.identifier("this")})])}function o(e,t){var r=[];return r.push(E.variableDeclaration("var",[E.variableDeclarator(e,E.objectExpression([]))])),t(r),r.push(E.expressionStatement(e)),E.program(r)}function u(e,t,r){(0,g.default)(c.list,function(n){if(!(r&&r.indexOf(n)<0)){var i=E.identifier(n);e.push(E.expressionStatement(E.assignmentExpression("=",E.memberExpression(t,i),c.get(n))))}})}t.__esModule=!0,t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"global",r=E.identifier("babelHelpers"),n=function(t){return u(t,r,e)},i=void 0,l={global:s,umd:a,var:o}[t];if(!l)throw new Error(h.get("unsupportedOutputType",t));return i=l(r,n),(0,p.default)(i).code};var l=r(192),c=i(l),f=r(183),p=n(f),d=r(19),h=i(d),m=r(4),v=n(m),y=r(112),g=n(y),b=r(1),E=i(b),x=(0,v.default)('\n  (function (root, factory) {\n    if (typeof define === "function" && define.amd) {\n      define(AMD_ARGUMENTS, factory);\n    } else if (typeof exports === "object") {\n      factory(COMMON_ARGUMENTS);\n    } else {\n      factory(BROWSER_ARGUMENTS);\n    }\n  })(UMD_ROOT, function (FACTORY_PARAMETERS) {\n    FACTORY_BODY\n  });\n');e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(65),s=n(i),a=r(589),o=n(a);t.default=new s.default({name:"internal.blockHoist",visitor:{Block:{exit:function(e){for(var t=e.node,r=!1,n=0;n<t.body.length;n++){var i=t.body[n];if(i&&null!=i._blockHoist){r=!0;break}}r&&(t.body=(0,o.default)(t.body,function(e){var t=e&&e._blockHoist;return null==t&&(t=1),t===!0&&(t=2),-1*t}))}}}}),e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){return!!e.is("_forceShadow")||t}function a(e,t){var r=e.inShadow(t);if(s(e,r)){var n=e.node._shadowedFunctionLiteral,i=void 0,a=!1,o=e.find(function(t){if(t.parentPath&&t.parentPath.isClassProperty()&&"value"===t.key)return!0;if(e===t)return!1;if((t.isProgram()||t.isFunction())&&(i=i||t),t.isProgram())return a=!0,!0;if(t.isFunction()&&!t.isArrowFunctionExpression()){if(n){if(t===n||t.node===n.node)return!0}else if(!t.is("shadow"))return!0;return a=!0,!1}return!1});if(n&&o.isProgram()&&!n.isProgram()&&(o=e.findParent(function(e){return e.isProgram()||e.isFunction()})),o!==i&&a){var u=o.getData(t);if(u)return e.replaceWith(u);var l=e.scope.generateUidIdentifier(t);o.setData(t,l);var c=o.findParent(function(e){return e.isClass()}),f=!!(c&&c.node&&c.node.superClass);if("this"===t&&o.isMethod({kind:"constructor"})&&f)o.scope.push({id:l}),o.traverse(h,{id:l});else{var d="this"===t?p.thisExpression():p.identifier(t);n&&(d._shadowedFunctionLiteral=n),o.scope.push({id:l,init:d})}return e.replaceWith(l)}}}t.__esModule=!0;var o=r(10),u=i(o),l=r(65),c=i(l),f=r(1),p=n(f),d=(0,u.default)("super this bound"),h={CallExpression:function(e){if(e.get("callee").isSuper()){var t=e.node;t[d]||(t[d]=!0,e.replaceWith(p.assignmentExpression("=",this.id,t)))}}};t.default=new c.default({name:"internal.shadowFunctions",visitor:{ThisExpression:function(e){a(e,"this")},ReferencedIdentifier:function(e){"arguments"===e.node.name&&a(e,"arguments")}}}),e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=r(291),o=n(a),u=r(65),l=n(u),c=r(49),f=n(c),p=function(){function e(){(0,s.default)(this,e)}return e.prototype.lint=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.code=!1,t.mode="lint",this.transform(e,t)},e.prototype.pretransform=function(e,t){var r=new f.default(t,this);return r.wrap(e,function(){return r.addCode(e),r.parseCode(e),r})},e.prototype.transform=function(e,t){var r=new f.default(t,this);return r.wrap(e,function(){return r.addCode(e),r.parseCode(e),r.transform()})},e.prototype.analyse=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments[2];return t.code=!1,r&&(t.plugins=t.plugins||[],t.plugins.push(new l.default({visitor:r}))),this.transform(e,t).metadata},e.prototype.transformFromAst=function(e,t,r){e=(0,o.default)(e);var n=new f.default(r,this);return n.wrap(t,function(){return n.addCode(t),n.addAst(e),n.transform()})},e}();t.default=p,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=r(42),o=n(a),u=r(41),l=n(u),c=r(120),f=n(c),p=r(49),d=(n(p),function(e){function t(r,n){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};(0,s.default)(this,t);var a=(0,o.default)(this,e.call(this));return a.plugin=n,a.key=n.key,a.file=r,a.opts=i,a}return(0,l.default)(t,e),t.prototype.addHelper=function(){var e;return(e=this.file).addHelper.apply(e,arguments)},t.prototype.addImport=function(){var e;return(e=this.file).addImport.apply(e,arguments)},t.prototype.getModuleName=function(){var e;return(e=this.file).getModuleName.apply(e,arguments)},t.prototype.buildCodeFrameError=function(){var e;return(e=this.file).buildCodeFrameError.apply(e,arguments)},t}(f.default));t.default=d,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=r(595),o=n(a),u=/^[ \t]+$/,l=function(){function e(t){(0,s.default)(this,e),this._map=null,this._buf=[],this._last="",this._queue=[],this._position={line:1,column:0},this._sourcePosition={identifierName:null,line:null,column:null,filename:null},this._map=t}return e.prototype.get=function(){this._flush();var e=this._map,t={code:(0,o.default)(this._buf.join("")),map:null,rawMappings:e&&e.getRawMappings()};return e&&Object.defineProperty(t,"map",{configurable:!0,enumerable:!0,get:function(){return this.map=e.get()},set:function(e){Object.defineProperty(this,"map",{value:e,writable:!0})}}),t},e.prototype.append=function(e){this._flush();var t=this._sourcePosition,r=t.line,n=t.column,i=t.filename,s=t.identifierName;this._append(e,r,n,s,i)},e.prototype.queue=function(e){if("\n"===e)for(;this._queue.length>0&&u.test(this._queue[0][0]);)this._queue.shift();var t=this._sourcePosition,r=t.line,n=t.column,i=t.filename,s=t.identifierName;this._queue.unshift([e,r,n,s,i])},e.prototype._flush=function(){for(var e=void 0;e=this._queue.pop();)this._append.apply(this,e)},e.prototype._append=function(e,t,r,n,i){this._map&&"\n"!==e[0]&&this._map.mark(this._position.line,this._position.column,t,r,n,i),this._buf.push(e),this._last=e[e.length-1];for(var s=0;s<e.length;s++)"\n"===e[s]?(this._position.line++,this._position.column=0):this._position.column++},e.prototype.removeTrailingNewline=function(){this._queue.length>0&&"\n"===this._queue[0][0]&&this._queue.shift()},e.prototype.removeLastSemicolon=function(){this._queue.length>0&&";"===this._queue[0][0]&&this._queue.shift()},e.prototype.endsWith=function(e){if(1===e.length){var t=void 0;if(this._queue.length>0){var r=this._queue[0][0];t=r[r.length-1]}else t=this._last;return t===e}var n=this._last+this._queue.reduce(function(e,t){return t[0]+e},"");return e.length<=n.length&&n.slice(-e.length)===e},e.prototype.hasContent=function(){return this._queue.length>0||!!this._last},e.prototype.source=function(e,t){if(!e||t){var r=t?t[e]:null;this._sourcePosition.identifierName=t&&t.identifierName||null,this._sourcePosition.line=r?r.line:null,this._sourcePosition.column=r?r.column:null,this._sourcePosition.filename=t&&t.filename||null}},e.prototype.withSource=function(e,t,r){if(!this._map)return r();var n=this._sourcePosition.line,i=this._sourcePosition.column,s=this._sourcePosition.filename,a=this._sourcePosition.identifierName;this.source(e,t),r(),this._sourcePosition.line=n,this._sourcePosition.column=i,this._sourcePosition.filename=s,this._sourcePosition.identifierName=a},e.prototype.getCurrentColumn=function(){var e=this._queue.reduce(function(e,t){return t[0]+e},""),t=e.lastIndexOf("\n");return t===-1?this._position.column+e.length:e.length-1-t},e.prototype.getCurrentLine=function(){for(var e=this._queue.reduce(function(e,t){return t[0]+e},""),t=0,r=0;r<e.length;r++)"\n"===e[r]&&t++;return this._position.line+t},e}();t.default=l,e.exports=t.default},function(e,t,r){"use strict";function n(e){this.print(e.program,e)}function i(e){this.printInnerComments(e,!1),this.printSequence(e.directives,e),e.directives&&e.directives.length&&this.newline(),this.printSequence(e.body,e)}function s(e){this.token("{"),this.printInnerComments(e);var t=e.directives&&e.directives.length;e.body.length||t?(this.newline(),this.printSequence(e.directives,e,{indent:!0}),t&&this.newline(),this.printSequence(e.body,e,{indent:!0}),this.removeTrailingNewline(),this.source("end",e.loc),this.endsWith("\n")||this.newline(),this.rightBrace()):(this.source("end",e.loc),this.token("}"))}function a(){}function o(e){this.print(e.value,e),this.semicolon()}t.__esModule=!0,t.File=n,t.Program=i,t.BlockStatement=s,t.Noop=a,t.Directive=o;var u=r(124);Object.defineProperty(t,"DirectiveLiteral",{enumerable:!0,get:function(){return u.StringLiteral}})},function(e,t){"use strict";function r(e){this.printJoin(e.decorators,e),this.word("class"),e.id&&(this.space(),this.print(e.id,e)),this.print(e.typeParameters,e),e.superClass&&(this.space(),this.word("extends"),this.space(),this.print(e.superClass,e),this.print(e.superTypeParameters,e)),e.implements&&(this.space(),this.word("implements"),this.space(),this.printList(e.implements,e)),this.space(),this.print(e.body,e)}function n(e){this.token("{"),this.printInnerComments(e),0===e.body.length?this.token("}"):(this.newline(),this.indent(),this.printSequence(e.body,e),this.dedent(),this.endsWith("\n")||this.newline(),this.rightBrace())}function i(e){this.printJoin(e.decorators,e),e.static&&(this.word("static"),this.space()),e.computed?(this.token("["),this.print(e.key,e),this.token("]")):(this._variance(e),this.print(e.key,e)),this.print(e.typeAnnotation,e),e.value&&(this.space(),this.token("="),this.space(),this.print(e.value,e)),this.semicolon()}function s(e){this.printJoin(e.decorators,e),e.static&&(this.word("static"),this.space()),"constructorCall"===e.kind&&(this.word("call"),this.space()),this._method(e)}t.__esModule=!0,t.ClassDeclaration=r,t.ClassBody=n,t.ClassProperty=i,t.ClassMethod=s,t.ClassExpression=r},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){"void"===e.operator||"delete"===e.operator||"typeof"===e.operator?(this.word(e.operator),this.space()):this.token(e.operator),this.print(e.argument,e)}function a(e){this.word("do"),this.space(),this.print(e.body,e)}function o(e){this.token("("),this.print(e.expression,e),this.token(")")}function u(e){e.prefix?(this.token(e.operator),this.print(e.argument,e)):(this.print(e.argument,e),this.token(e.operator))}function l(e){this.print(e.test,e),this.space(),this.token("?"),this.space(),this.print(e.consequent,e),this.space(),this.token(":"),this.space(),this.print(e.alternate,e)}function c(e,t){this.word("new"),this.space(),this.print(e.callee,e),(0!==e.arguments.length||!this.format.minified||k.isCallExpression(t,{callee:e})||k.isMemberExpression(t)||k.isNewExpression(t))&&(this.token("("),this.printList(e.arguments,e),this.token(")"))}function f(e){this.printList(e.expressions,e)}function p(){this.word("this")}function d(){this.word("super")}function h(e){this.token("@"),this.print(e.expression,e),this.newline()}function m(){this.token(","),this.newline(),this.endsWith("\n")||this.space()}function v(e){this.print(e.callee,e),this.token("(");var t=e._prettyCall,r=void 0;t&&(r=m,this.newline(),this.indent()),this.printList(e.arguments,e,{separator:r}),t&&(this.newline(),this.dedent()),this.token(")")}function y(){this.word("import")}function g(e){return function(t){if(this.word(e),t.delegate&&this.token("*"),t.argument){this.space();var r=this.startTerminatorless();this.print(t.argument,t),this.endTerminatorless(r)}}}function b(){this.semicolon(!0)}function E(e){this.print(e.expression,e),this.semicolon()}function x(e){this.print(e.left,e),e.left.optional&&this.token("?"),this.print(e.left.typeAnnotation,e),this.space(),this.token("="),this.space(),this.print(e.right,e)}function A(e,t){var r=this.inForStatementInitCounter&&"in"===e.operator&&!T.needsParens(e,t);r&&this.token("("),this.print(e.left,e),this.space(),"in"===e.operator||"instanceof"===e.operator?this.word(e.operator):this.token(e.operator),this.space(),this.print(e.right,e),r&&this.token(")")}function S(e){this.print(e.object,e),this.token("::"),this.print(e.callee,e)}function _(e){if(this.print(e.object,e),!e.computed&&k.isMemberExpression(e.property))throw new TypeError("Got a MemberExpression for MemberExpression property");var t=e.computed;k.isLiteral(e.property)&&(0,w.default)(e.property.value)&&(t=!0),t?(this.token("["),this.print(e.property,e),this.token("]")):(this.token("."),this.print(e.property,e))}function D(e){this.print(e.meta,e),this.token("."),this.print(e.property,e)}t.__esModule=!0,t.LogicalExpression=t.BinaryExpression=t.AwaitExpression=t.YieldExpression=void 0,t.UnaryExpression=s,t.DoExpression=a,t.ParenthesizedExpression=o,t.UpdateExpression=u,t.ConditionalExpression=l,t.NewExpression=c,t.SequenceExpression=f,t.ThisExpression=p,t.Super=d,t.Decorator=h,t.CallExpression=v,t.Import=y,t.EmptyStatement=b,t.ExpressionStatement=E,t.AssignmentPattern=x,t.AssignmentExpression=A,t.BindExpression=S,t.MemberExpression=_,t.MetaProperty=D;var C=r(272),w=i(C),F=r(1),k=n(F),P=r(184),T=n(P);t.YieldExpression=g("yield"),t.AwaitExpression=g("await");t.BinaryExpression=A,t.LogicalExpression=A},function(e,t,r){"use strict";function n(){this.word("any")}function i(e){this.print(e.elementType,e),this.token("["),this.token("]")}function s(){this.word("boolean")}function a(e){this.word(e.value?"true":"false")}function o(){this.word("null")}function u(e){this.word("declare"),this.space(),this.word("class"),this.space(),this._interfaceish(e)}function l(e){this.word("declare"),this.space(),this.word("function"),this.space(),this.print(e.id,e),this.print(e.id.typeAnnotation.typeAnnotation,e),this.semicolon()}function c(e){this.word("declare"),this.space(),this.InterfaceDeclaration(e)}function f(e){this.word("declare"),this.space(),this.word("module"),this.space(),this.print(e.id,e),this.space(),this.print(e.body,e)}function p(e){this.word("declare"),this.space(),this.word("module"),this.token("."),this.word("exports"),this.print(e.typeAnnotation,e)}function d(e){this.word("declare"),this.space(),this.TypeAlias(e)}function h(e){this.word("declare"),this.space(),this.word("var"),this.space(),this.print(e.id,e),this.print(e.id.typeAnnotation,e),this.semicolon()}function m(){this.token("*")}function v(e,t){this.print(e.typeParameters,e),this.token("("),this.printList(e.params,e),e.rest&&(e.params.length&&(this.token(","),this.space()),this.token("..."),this.print(e.rest,e)),this.token(")"),"ObjectTypeCallProperty"===t.type||"DeclareFunction"===t.type?this.token(":"):(this.space(),this.token("=>")),this.space(),this.print(e.returnType,e)}function y(e){this.print(e.name,e),e.optional&&this.token("?"),this.token(":"),this.space(),this.print(e.typeAnnotation,e)}function g(e){this.print(e.id,e),this.print(e.typeParameters,e)}function b(e){this.print(e.id,e),this.print(e.typeParameters,e),e.extends.length&&(this.space(),this.word("extends"),this.space(),this.printList(e.extends,e)),e.mixins&&e.mixins.length&&(this.space(),this.word("mixins"),this.space(),this.printList(e.mixins,e)),this.space(),this.print(e.body,e)}function E(e){"plus"===e.variance?this.token("+"):"minus"===e.variance&&this.token("-")}function x(e){this.word("interface"),this.space(),this._interfaceish(e)}function A(){this.space(),this.token("&"),this.space()}function S(e){this.printJoin(e.types,e,{separator:A})}function _(){this.word("mixed")}function D(){this.word("empty")}function C(e){this.token("?"),this.print(e.typeAnnotation,e)}function w(){this.word("number")}function F(){this.word("string")}function k(){this.word("this")}function P(e){this.token("["),this.printList(e.types,e),this.token("]")}function T(e){this.word("typeof"),this.space(),this.print(e.argument,e)}function O(e){this.word("type"),this.space(),this.print(e.id,e),this.print(e.typeParameters,e),this.space(),this.token("="),this.space(),this.print(e.right,e),this.semicolon()}function B(e){this.token(":"),this.space(),e.optional&&this.token("?"),this.print(e.typeAnnotation,e)}function R(e){this._variance(e),this.word(e.name),e.bound&&this.print(e.bound,e),e.default&&(this.space(),this.token("="),this.space(),this.print(e.default,e))}function I(e){this.token("<"),this.printList(e.params,e,{}),this.token(">")}function M(e){var t=this;e.exact?this.token("{|"):this.token("{");var r=e.properties.concat(e.callProperties,e.indexers);r.length&&(this.space(),this.printJoin(r,e,{addNewlines:function(e){if(e&&!r[0])return 1},indent:!0,statement:!0,iterator:function(){1!==r.length&&(t.format.flowCommaSeparator?t.token(","):t.semicolon(),t.space())}}),this.space()),e.exact?this.token("|}"):this.token("}")}function N(e){e.static&&(this.word("static"),this.space()),this.print(e.value,e)}function L(e){e.static&&(this.word("static"),this.space()),this._variance(e),this.token("["),this.print(e.id,e),this.token(":"),this.space(),this.print(e.key,e),this.token("]"),this.token(":"),this.space(),this.print(e.value,e)}function j(e){e.static&&(this.word("static"),this.space()),this._variance(e),this.print(e.key,e),e.optional&&this.token("?"),this.token(":"),this.space(),this.print(e.value,e)}function U(e){this.print(e.qualification,e),this.token("."),this.print(e.id,e)}function V(){this.space(),this.token("|"),this.space()}function G(e){this.printJoin(e.types,e,{separator:V})}function W(e){this.token("("),this.print(e.expression,e),this.print(e.typeAnnotation,e),this.token(")")}function Y(){this.word("void")}t.__esModule=!0,t.AnyTypeAnnotation=n,t.ArrayTypeAnnotation=i,t.BooleanTypeAnnotation=s,t.BooleanLiteralTypeAnnotation=a,t.NullLiteralTypeAnnotation=o,t.DeclareClass=u,t.DeclareFunction=l,t.DeclareInterface=c,t.DeclareModule=f,t.DeclareModuleExports=p,t.DeclareTypeAlias=d,t.DeclareVariable=h,t.ExistentialTypeParam=m,t.FunctionTypeAnnotation=v,t.FunctionTypeParam=y,t.InterfaceExtends=g,t._interfaceish=b,t._variance=E,t.InterfaceDeclaration=x,t.IntersectionTypeAnnotation=S,t.MixedTypeAnnotation=_,t.EmptyTypeAnnotation=D,t.NullableTypeAnnotation=C;var q=r(124);Object.defineProperty(t,"NumericLiteralTypeAnnotation",{enumerable:!0,get:function(){return q.NumericLiteral}}),Object.defineProperty(t,"StringLiteralTypeAnnotation",{enumerable:!0,get:function(){return q.StringLiteral}}),t.NumberTypeAnnotation=w,t.StringTypeAnnotation=F,t.ThisTypeAnnotation=k,t.TupleTypeAnnotation=P,t.TypeofTypeAnnotation=T,t.TypeAlias=O,t.TypeAnnotation=B,t.TypeParameter=R,t.TypeParameterInstantiation=I,t.ObjectTypeAnnotation=M,t.ObjectTypeCallProperty=N,t.ObjectTypeIndexer=L,t.ObjectTypeProperty=j,t.QualifiedTypeIdentifier=U,t.UnionTypeAnnotation=G,t.TypeCastExpression=W,t.VoidTypeAnnotation=Y,t.ClassImplements=g,t.GenericTypeAnnotation=g,t.TypeParameterDeclaration=I},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){this.print(e.name,e),e.value&&(this.token("="),this.print(e.value,e))}function s(e){this.word(e.name)}function a(e){this.print(e.namespace,e),this.token(":"),this.print(e.name,e)}function o(e){this.print(e.object,e),this.token("."),this.print(e.property,e)}function u(e){this.token("{"),this.token("..."),this.print(e.argument,e),this.token("}")}function l(e){this.token("{"),this.print(e.expression,e),this.token("}")}function c(e){this.token("{"),this.token("..."),this.print(e.expression,e),this.token("}")}function f(e){this.token(e.value)}function p(e){var t=e.openingElement;if(this.print(t,e),!t.selfClosing){this.indent();for(var r=e.children,n=Array.isArray(r),i=0,r=n?r:(0,g.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;this.print(a,e)}this.dedent(),this.print(e.closingElement,e)}}function d(){this.space()}function h(e){this.token("<"),this.print(e.name,e),e.attributes.length>0&&(this.space(),this.printJoin(e.attributes,e,{separator:d})),e.selfClosing?(this.space(),this.token("/>")):this.token(">")}function m(e){this.token("</"),this.print(e.name,e),this.token(">")}function v(){}t.__esModule=!0;var y=r(2),g=n(y);t.JSXAttribute=i,t.JSXIdentifier=s,t.JSXNamespacedName=a,t.JSXMemberExpression=o,t.JSXSpreadAttribute=u,t.JSXExpressionContainer=l,t.JSXSpreadChild=c,t.JSXText=f,t.JSXElement=p,t.JSXOpeningElement=h,t.JSXClosingElement=m,t.JSXEmptyExpression=v},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){var t=this;this.print(e.typeParameters,e),this.token("("),this.printList(e.params,e,{iterator:function(e){e.optional&&t.token("?"),t.print(e.typeAnnotation,e)}}),this.token(")"),e.returnType&&this.print(e.returnType,e)}function s(e){var t=e.kind,r=e.key;"method"!==t&&"init"!==t||e.generator&&this.token("*"),"get"!==t&&"set"!==t||(this.word(t),this.space()),e.async&&(this.word("async"),this.space()),e.computed?(this.token("["),this.print(r,e),this.token("]")):this.print(r,e),this._params(e),this.space(),this.print(e.body,e)}function a(e){e.async&&(this.word("async"),this.space()),this.word("function"),e.generator&&this.token("*"),e.id?(this.space(),this.print(e.id,e)):this.space(),this._params(e),this.space(),this.print(e.body,e)}function o(e){e.async&&(this.word("async"),this.space());var t=e.params[0];1===e.params.length&&c.isIdentifier(t)&&!u(e,t)?this.print(t,e):this._params(e),this.space(),this.token("=>"),this.space(),this.print(e.body,e)}function u(e,t){return e.typeParameters||e.returnType||t.typeAnnotation||t.optional||t.trailingComments}t.__esModule=!0,t.FunctionDeclaration=void 0,t._params=i,t._method=s,t.FunctionExpression=a,t.ArrowFunctionExpression=o;var l=r(1),c=n(l);t.FunctionDeclaration=a},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){this.print(e.imported,e),e.local&&e.local.name!==e.imported.name&&(this.space(),this.word("as"),this.space(),this.print(e.local,e))}function s(e){this.print(e.local,e)}function a(e){this.print(e.exported,e)}function o(e){this.print(e.local,e),e.exported&&e.local.name!==e.exported.name&&(this.space(),this.word("as"),this.space(),this.print(e.exported,e))}function u(e){this.token("*"),this.space(),this.word("as"),this.space(),this.print(e.exported,e)}function l(e){this.word("export"),this.space(),this.token("*"),e.exported&&(this.space(),this.word("as"),this.space(),this.print(e.exported,e)),this.space(),this.word("from"),this.space(),this.print(e.source,e),this.semicolon()}function c(){this.word("export"),this.space(),p.apply(this,arguments)}function f(){this.word("export"),this.space(),this.word("default"),this.space(),p.apply(this,arguments)}function p(e){if(e.declaration){var t=e.declaration;this.print(t,e),v.isStatement(t)||this.semicolon()}else{"type"===e.exportKind&&(this.word("type"),this.space());for(var r=e.specifiers.slice(0),n=!1;;){var i=r[0];if(!v.isExportDefaultSpecifier(i)&&!v.isExportNamespaceSpecifier(i))break;n=!0,this.print(r.shift(),e),r.length&&(this.token(","),this.space())}(r.length||!r.length&&!n)&&(this.token("{"),r.length&&(this.space(),this.printList(r,e),this.space()),this.token("}")),e.source&&(this.space(),this.word("from"),this.space(),this.print(e.source,e)),this.semicolon()}}function d(e){this.word("import"),this.space(),"type"!==e.importKind&&"typeof"!==e.importKind||(this.word(e.importKind),this.space());var t=e.specifiers.slice(0);if(t&&t.length){for(;;){var r=t[0];if(!v.isImportDefaultSpecifier(r)&&!v.isImportNamespaceSpecifier(r))break;this.print(t.shift(),e),t.length&&(this.token(","),this.space())}t.length&&(this.token("{"),this.space(),this.printList(t,e),this.space(),this.token("}")),this.space(),this.word("from"),this.space()}this.print(e.source,e),this.semicolon()}function h(e){this.token("*"),this.space(),this.word("as"),this.space(),this.print(e.local,e)}t.__esModule=!0,t.ImportSpecifier=i,t.ImportDefaultSpecifier=s,t.ExportDefaultSpecifier=a,t.ExportSpecifier=o,t.ExportNamespaceSpecifier=u,t.ExportAllDeclaration=l,t.ExportNamedDeclaration=c,t.ExportDefaultDeclaration=f,t.ImportDeclaration=d,t.ImportNamespaceSpecifier=h;var m=r(1),v=n(m)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){this.word("with"),this.space(),this.token("("),this.print(e.object,e),this.token(")"),this.printBlock(e)}function a(e){this.word("if"),this.space(),this.token("("),this.print(e.test,e),this.token(")"),this.space();var t=e.alternate&&D.isIfStatement(o(e.consequent));t&&(this.token("{"),this.newline(),this.indent()),this.printAndIndentOnComments(e.consequent,e),t&&(this.dedent(),this.newline(),this.token("}")),e.alternate&&(this.endsWith("}")&&this.space(),this.word("else"),this.space(),this.printAndIndentOnComments(e.alternate,e))}function o(e){return D.isStatement(e.body)?o(e.body):e}function u(e){this.word("for"),this.space(),this.token("("),this.inForStatementInitCounter++,this.print(e.init,e),this.inForStatementInitCounter--,this.token(";"),e.test&&(this.space(),this.print(e.test,e)),this.token(";"),e.update&&(this.space(),this.print(e.update,e)),this.token(")"),this.printBlock(e)}function l(e){this.word("while"),this.space(),this.token("("),this.print(e.test,e),this.token(")"),this.printBlock(e)}function c(e){this.word("do"),this.space(),this.print(e.body,e),this.space(),this.word("while"),this.space(),this.token("("),this.print(e.test,e),this.token(")"),this.semicolon()}function f(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"label";return function(r){this.word(e);var n=r[t];if(n){this.space();var i=this.startTerminatorless();this.print(n,r),this.endTerminatorless(i)}this.semicolon()}}function p(e){this.print(e.label,e),this.token(":"),this.space(),this.print(e.body,e)}function d(e){this.word("try"),this.space(),this.print(e.block,e),this.space(),e.handlers?this.print(e.handlers[0],e):this.print(e.handler,e),e.finalizer&&(this.space(),this.word("finally"),this.space(),this.print(e.finalizer,e))}function h(e){this.word("catch"),this.space(),this.token("("),this.print(e.param,e),this.token(")"),this.space(),this.print(e.body,e)}function m(e){this.word("switch"),this.space(),this.token("("),this.print(e.discriminant,e),this.token(")"),this.space(),this.token("{"),this.printSequence(e.cases,e,{indent:!0,addNewlines:function(t,r){if(!t&&e.cases[e.cases.length-1]===r)return-1}}),this.token("}")}function v(e){e.test?(this.word("case"),this.space(),this.print(e.test,e),this.token(":")):(this.word("default"),this.token(":")),e.consequent.length&&(this.newline(),this.printSequence(e.consequent,e,{indent:!0}))}function y(){this.word("debugger"),this.semicolon()}function g(){if(this.token(","),this.newline(),this.endsWith("\n"))for(var e=0;e<4;e++)this.space(!0)}function b(){if(this.token(","),this.newline(),this.endsWith("\n"))for(var e=0;e<6;e++)this.space(!0)}function E(e,t){this.word(e.kind),this.space();var r=!1;if(!D.isFor(t))for(var n=e.declarations,i=Array.isArray(n),s=0,n=i?n:(0,S.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;o.init&&(r=!0)}var u=void 0;r&&(u="const"===e.kind?b:g),this.printList(e.declarations,e,{separator:u}),(!D.isFor(t)||t.left!==e&&t.init!==e)&&this.semicolon()}function x(e){this.print(e.id,e),this.print(e.id.typeAnnotation,e),e.init&&(this.space(),this.token("="),this.space(),this.print(e.init,e))}t.__esModule=!0,t.ThrowStatement=t.BreakStatement=t.ReturnStatement=t.ContinueStatement=t.ForAwaitStatement=t.ForOfStatement=t.ForInStatement=void 0;var A=r(2),S=i(A);t.WithStatement=s,t.IfStatement=a,t.ForStatement=u,t.WhileStatement=l,t.DoWhileStatement=c,t.LabeledStatement=p,t.TryStatement=d,t.CatchClause=h,t.SwitchStatement=m,t.SwitchCase=v,t.DebuggerStatement=y,t.VariableDeclaration=E,t.VariableDeclarator=x;var _=r(1),D=n(_),C=function(e){return function(t){this.word("for"),this.space(),"await"===e&&(this.word("await"),this.space(),e="of"),this.token("("),this.print(t.left,t),this.space(),this.word(e),this.space(),this.print(t.right,t),this.token(")"),this.printBlock(t)}};t.ForInStatement=C("in"),t.ForOfStatement=C("of"),t.ForAwaitStatement=C("await"),t.ContinueStatement=f("continue"),t.ReturnStatement=f("return","argument"),t.BreakStatement=f("break"),t.ThrowStatement=f("throw","argument")},function(e,t){"use strict";function r(e){this.print(e.tag,e),this.print(e.quasi,e)}function n(e,t){var r=t.quasis[0]===e,n=t.quasis[t.quasis.length-1]===e,i=(r?"`":"}")+e.value.raw+(n?"`":"${");
+r||this.space(),this.token(i),n||this.space()}function i(e){for(var t=e.quasis,r=0;r<t.length;r++)this.print(t[r],e),r+1<t.length&&this.print(e.expressions[r],e)}t.__esModule=!0,t.TaggedTemplateExpression=r,t.TemplateElement=n,t.TemplateLiteral=i},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e,t){return b.isArrayTypeAnnotation(t)}function s(e,t){return!(!b.isMemberExpression(t)||t.object!==e)}function a(e,t,r){return y(r,{considerArrow:!0})}function o(e,t){if((b.isCallExpression(t)||b.isNewExpression(t))&&t.callee===e)return!0;if(b.isUnaryLike(t))return!0;if(b.isMemberExpression(t)&&t.object===e)return!0;if(b.isBinary(t)){var r=t.operator,n=E[r],i=e.operator,s=E[i];if(n>s)return!0;if(n===s&&t.right===e&&!b.isLogicalExpression(t))return!0}return!1}function u(e,t){if("in"===e.operator){if(b.isVariableDeclarator(t))return!0;if(b.isFor(t))return!0}return!1}function l(e,t){return!b.isForStatement(t)&&((!b.isExpressionStatement(t)||t.expression!==e)&&(!b.isReturnStatement(t)&&(!b.isThrowStatement(t)&&((!b.isSwitchStatement(t)||t.discriminant!==e)&&((!b.isWhileStatement(t)||t.test!==e)&&((!b.isIfStatement(t)||t.test!==e)&&(!b.isForInStatement(t)||t.right!==e)))))))}function c(e,t){return b.isBinary(t)||b.isUnaryLike(t)||b.isCallExpression(t)||b.isMemberExpression(t)||b.isNewExpression(t)||b.isConditionalExpression(t)&&e===t.test}function f(e,t,r){return y(r,{considerDefaultExports:!0})}function p(e,t){return!!b.isMemberExpression(t,{object:e})||!(!b.isCallExpression(t,{callee:e})&&!b.isNewExpression(t,{callee:e}))}function d(e,t,r){return y(r,{considerDefaultExports:!0})}function h(e,t){return!!b.isExportDeclaration(t)||(!(!b.isBinaryExpression(t)&&!b.isLogicalExpression(t))||(!!b.isUnaryExpression(t)||p(e,t)))}function m(e,t){return!!b.isUnaryLike(t)||(!!b.isBinary(t)||(!!b.isConditionalExpression(t,{test:e})||p(e,t)))}function v(e){return!!b.isObjectPattern(e.left)||m.apply(void 0,arguments)}function y(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.considerArrow,n=void 0!==r&&r,i=t.considerDefaultExports,s=void 0!==i&&i,a=e.length-1,o=e[a];a--;for(var u=e[a];a>0;){if(b.isExpressionStatement(u,{expression:o}))return!0;if(s&&b.isExportDefaultDeclaration(u,{declaration:o}))return!0;if(n&&b.isArrowFunctionExpression(u,{body:o}))return!0;if(!(b.isCallExpression(u,{callee:o})||b.isSequenceExpression(u)&&u.expressions[0]===o||b.isMemberExpression(u,{object:o})||b.isConditional(u,{test:o})||b.isBinary(u,{left:o})||b.isAssignmentExpression(u,{left:o})))return!1;o=u,a--,u=e[a]}return!1}t.__esModule=!0,t.AwaitExpression=t.FunctionTypeAnnotation=void 0,t.NullableTypeAnnotation=i,t.UpdateExpression=s,t.ObjectExpression=a,t.Binary=o,t.BinaryExpression=u,t.SequenceExpression=l,t.YieldExpression=c,t.ClassExpression=f,t.UnaryLike=p,t.FunctionExpression=d,t.ArrowFunctionExpression=h,t.ConditionalExpression=m,t.AssignmentExpression=v;var g=r(1),b=n(g),E={"||":0,"&&":1,"|":2,"^":3,"&":4,"==":5,"===":5,"!=":5,"!==":5,"<":6,">":6,"<=":6,">=":6,in:6,instanceof:6,">>":7,"<<":7,">>>":7,"+":8,"-":8,"*":9,"/":9,"%":9,"**":10};t.FunctionTypeAnnotation=i,t.AwaitExpression=c},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return m.isMemberExpression(e)?(s(e.object,t),e.computed&&s(e.property,t)):m.isBinary(e)||m.isAssignmentExpression(e)?(s(e.left,t),s(e.right,t)):m.isCallExpression(e)?(t.hasCall=!0,s(e.callee,t)):m.isFunction(e)?t.hasFunction=!0:m.isIdentifier(e)&&(t.hasHelper=t.hasHelper||a(e.callee)),t}function a(e){return m.isMemberExpression(e)?a(e.object)||a(e.property):m.isIdentifier(e)?"require"===e.name||"_"===e.name[0]:m.isCallExpression(e)?a(e.callee):!(!m.isBinary(e)&&!m.isAssignmentExpression(e))&&(m.isIdentifier(e.left)&&a(e.left)||a(e.right))}function o(e){return m.isLiteral(e)||m.isObjectExpression(e)||m.isArrayExpression(e)||m.isIdentifier(e)||m.isMemberExpression(e)}var u=r(271),l=i(u),c=r(112),f=i(c),p=r(583),d=i(p),h=r(1),m=n(h);t.nodes={AssignmentExpression:function(e){var t=s(e.right);if(t.hasCall&&t.hasHelper||t.hasFunction)return{before:t.hasFunction,after:!0}},SwitchCase:function(e,t){return{before:e.consequent.length||t.cases[0]===e}},LogicalExpression:function(e){if(m.isFunction(e.left)||m.isFunction(e.right))return{after:!0}},Literal:function(e){if("use strict"===e.value)return{after:!0}},CallExpression:function(e){if(m.isFunction(e.callee)||a(e))return{before:!0,after:!0}},VariableDeclaration:function(e){for(var t=0;t<e.declarations.length;t++){var r=e.declarations[t],n=a(r.id)&&!o(r.init);if(!n){var i=s(r.init);n=a(r.init)&&i.hasCall||i.hasFunction}if(n)return{before:!0,after:!0}}},IfStatement:function(e){if(m.isBlockStatement(e.consequent))return{before:!0,after:!0}}},t.nodes.ObjectProperty=t.nodes.ObjectTypeProperty=t.nodes.ObjectMethod=t.nodes.SpreadProperty=function(e,t){if(t.properties[0]===e)return{before:!0}},t.list={VariableDeclaration:function(e){return(0,d.default)(e.declarations,"init")},ArrayExpression:function(e){return e.elements},ObjectExpression:function(e){return e.properties}},(0,f.default)({Function:!0,Class:!0,Loop:!0,LabeledStatement:!0,SwitchStatement:!0,TryStatement:!0},function(e,r){(0,l.default)(e)&&(e={after:e,before:e}),(0,f.default)([r].concat(m.FLIPPED_ALIAS_KEYS[r]||[]),function(r){t.nodes[r]=function(){return e}})})},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(){this.token(","),this.space()}t.__esModule=!0;var a=r(88),o=i(a),u=r(2),l=i(u),c=r(34),f=i(c),p=r(358),d=i(p),h=r(3),m=i(h),v=r(574),y=i(v),g=r(576),b=i(g),E=r(582),x=i(E),A=r(276),S=i(A),_=r(297),D=i(_),C=r(184),w=n(C),F=r(311),k=i(F),P=r(1),T=n(P),O=/e/i,B=/\.0+$/,R=/^0[box]/,I=function(){function e(t,r,n){(0,m.default)(this,e),this.inForStatementInitCounter=0,this._printStack=[],this._indent=0,this._insideAux=!1,this._printedCommentStarts={},this._parenPushNewlineState=null,this._printAuxAfterOnNextUserNode=!1,this._printedComments=new d.default,this._endsWithInteger=!1,this._endsWithWord=!1,this.format=t||{},this._buf=new D.default(r),this._whitespace=n.length>0?new k.default(n):null}return e.prototype.generate=function(e){return this.print(e),this._maybeAddAuxComment(),this._buf.get()},e.prototype.indent=function(){this.format.compact||this.format.concise||this._indent++},e.prototype.dedent=function(){this.format.compact||this.format.concise||this._indent--},e.prototype.semicolon=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this._maybeAddAuxComment(),this._append(";",!e)},e.prototype.rightBrace=function(){this.format.minified&&this._buf.removeLastSemicolon(),this.token("}")},e.prototype.space=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.format.compact||(this._buf.hasContent()&&!this.endsWith(" ")&&!this.endsWith("\n")||e)&&this._space()},e.prototype.word=function(e){this._endsWithWord&&this._space(),this._maybeAddAuxComment(),this._append(e),this._endsWithWord=!0},e.prototype.number=function(e){this.word(e),this._endsWithInteger=(0,x.default)(+e)&&!R.test(e)&&!O.test(e)&&!B.test(e)&&"."!==e[e.length-1]},e.prototype.token=function(e){("--"===e&&this.endsWith("!")||"+"===e[0]&&this.endsWith("+")||"-"===e[0]&&this.endsWith("-")||"."===e[0]&&this._endsWithInteger)&&this._space(),this._maybeAddAuxComment(),this._append(e)},e.prototype.newline=function(e){if(!this.format.retainLines&&!this.format.compact){if(this.format.concise)return void this.space();if(!(this.endsWith("\n\n")||("number"!=typeof e&&(e=1),e=Math.min(2,e),(this.endsWith("{\n")||this.endsWith(":\n"))&&e--,e<=0)))for(var t=0;t<e;t++)this._newline()}},e.prototype.endsWith=function(e){return this._buf.endsWith(e)},e.prototype.removeTrailingNewline=function(){this._buf.removeTrailingNewline()},e.prototype.source=function(e,t){this._catchUp(e,t),this._buf.source(e,t)},e.prototype.withSource=function(e,t,r){this._catchUp(e,t),this._buf.withSource(e,t,r)},e.prototype._space=function(){this._append(" ",!0)},e.prototype._newline=function(){this._append("\n",!0)},e.prototype._append=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this._maybeAddParen(e),this._maybeIndent(e),t?this._buf.queue(e):this._buf.append(e),this._endsWithWord=!1,this._endsWithInteger=!1},e.prototype._maybeIndent=function(e){this._indent&&this.endsWith("\n")&&"\n"!==e[0]&&this._buf.queue(this._getIndent())},e.prototype._maybeAddParen=function(e){var t=this._parenPushNewlineState;if(t){this._parenPushNewlineState=null;var r=void 0;for(r=0;r<e.length&&" "===e[r];r++);if(r!==e.length){var n=e[r];"\n"!==n&&"/"!==n||(this.token("("),this.indent(),t.printed=!0)}}},e.prototype._catchUp=function(e,t){if(this.format.retainLines){var r=t?t[e]:null;if(r&&null!==r.line)for(var n=r.line-this._buf.getCurrentLine(),i=0;i<n;i++)this._newline()}},e.prototype._getIndent=function(){return(0,S.default)(this.format.indent.style,this._indent)},e.prototype.startTerminatorless=function(){return this._parenPushNewlineState={printed:!1}},e.prototype.endTerminatorless=function(e){e.printed&&(this.dedent(),this.newline(),this.token(")"))},e.prototype.print=function(e,t){var r=this;if(e){var n=this.format.concise;e._compact&&(this.format.concise=!0);var i=this[e.type];if(!i)throw new ReferenceError("unknown node of type "+(0,f.default)(e.type)+" with constructor "+(0,f.default)(e&&e.constructor.name));this._printStack.push(e);var s=this._insideAux;this._insideAux=!e.loc,this._maybeAddAuxComment(this._insideAux&&!s);var a=w.needsParens(e,t,this._printStack);this.format.retainFunctionParens&&"FunctionExpression"===e.type&&e.extra&&e.extra.parenthesized&&(a=!0),a&&this.token("("),this._printLeadingComments(e,t);var o=T.isProgram(e)||T.isFile(e)?null:e.loc;this.withSource("start",o,function(){r[e.type](e,t)}),this._printTrailingComments(e,t),a&&this.token(")"),this._printStack.pop(),this.format.concise=n,this._insideAux=s}},e.prototype._maybeAddAuxComment=function(e){e&&this._printAuxBeforeComment(),this._insideAux||this._printAuxAfterComment()},e.prototype._printAuxBeforeComment=function(){if(!this._printAuxAfterOnNextUserNode){this._printAuxAfterOnNextUserNode=!0;var e=this.format.auxiliaryCommentBefore;e&&this._printComment({type:"CommentBlock",value:e})}},e.prototype._printAuxAfterComment=function(){if(this._printAuxAfterOnNextUserNode){this._printAuxAfterOnNextUserNode=!1;var e=this.format.auxiliaryCommentAfter;e&&this._printComment({type:"CommentBlock",value:e})}},e.prototype.getPossibleRaw=function(e){var t=e.extra;if(t&&null!=t.raw&&null!=t.rawValue&&e.value===t.rawValue)return t.raw},e.prototype.printJoin=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(e&&e.length){r.indent&&this.indent();for(var n={addNewlines:r.addNewlines},i=0;i<e.length;i++){var s=e[i];s&&(r.statement&&this._printNewline(!0,s,t,n),this.print(s,t),r.iterator&&r.iterator(s,i),r.separator&&i<e.length-1&&r.separator.call(this),r.statement&&this._printNewline(!1,s,t,n))}r.indent&&this.dedent()}},e.prototype.printAndIndentOnComments=function(e,t){var r=!!e.leadingComments;r&&this.indent(),this.print(e,t),r&&this.dedent()},e.prototype.printBlock=function(e){var t=e.body;T.isEmptyStatement(t)||this.space(),this.print(t,e)},e.prototype._printTrailingComments=function(e,t){this._printComments(this._getComments(!1,e,t))},e.prototype._printLeadingComments=function(e,t){this._printComments(this._getComments(!0,e,t))},e.prototype.printInnerComments=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];e.innerComments&&(t&&this.indent(),this._printComments(e.innerComments),t&&this.dedent())},e.prototype.printSequence=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return r.statement=!0,this.printJoin(e,t,r)},e.prototype.printList=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return null==r.separator&&(r.separator=s),this.printJoin(e,t,r)},e.prototype._printNewline=function(e,t,r,n){var i=this;if(!this.format.retainLines&&!this.format.compact){if(this.format.concise)return void this.space();var s=0;if(null!=t.start&&!t._ignoreUserWhitespace&&this._whitespace)if(e){var a=t.leadingComments,o=a&&(0,y.default)(a,function(e){return!!e.loc&&i.format.shouldPrintComment(e.value)});s=this._whitespace.getNewlinesBefore(o||t)}else{var u=t.trailingComments,l=u&&(0,b.default)(u,function(e){return!!e.loc&&i.format.shouldPrintComment(e.value)});s=this._whitespace.getNewlinesAfter(l||t)}else{e||s++,n.addNewlines&&(s+=n.addNewlines(e,t)||0);var c=w.needsWhitespaceAfter;e&&(c=w.needsWhitespaceBefore),c(t,r)&&s++,this._buf.hasContent()||(s=0)}this.newline(s)}},e.prototype._getComments=function(e,t){return t&&(e?t.leadingComments:t.trailingComments)||[]},e.prototype._printComment=function(e){var t=this;if(this.format.shouldPrintComment(e.value)&&!e.ignore&&!this._printedComments.has(e)){if(this._printedComments.add(e),null!=e.start){if(this._printedCommentStarts[e.start])return;this._printedCommentStarts[e.start]=!0}this.newline(this._whitespace?this._whitespace.getNewlinesBefore(e):0),this.endsWith("[")||this.endsWith("{")||this.space();var r="CommentLine"===e.type?"//"+e.value+"\n":"/*"+e.value+"*/";if("CommentBlock"===e.type&&this.format.indent.adjustMultilineComment){var n=e.loc&&e.loc.start.column;if(n){var i=new RegExp("\\n\\s{1,"+n+"}","g");r=r.replace(i,"\n")}var s=Math.max(this._getIndent().length,this._buf.getCurrentColumn());r=r.replace(/\n(?!$)/g,"\n"+(0,S.default)(" ",s))}this.withSource("start",e.loc,function(){t._append(r)}),this.newline((this._whitespace?this._whitespace.getNewlinesAfter(e):0)+("CommentLine"===e.type?-1:0))}},e.prototype._printComments=function(e){if(e&&e.length)for(var t=e,r=Array.isArray(t),n=0,t=r?t:(0,l.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;this._printComment(s)}},e}();t.default=I;for(var M=[r(306),r(300),r(305),r(299),r(303),r(304),r(124),r(301),r(298),r(302)],N=0;N<M.length;N++){var L=M[N];(0,o.default)(I.prototype,L)}e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(20),s=n(i),a=r(7),o=n(a),u=r(3),l=n(u),c=r(287),f=n(c),p=function(){function e(t,r){(0,l.default)(this,e),this._cachedMap=null,this._code=r,this._opts=t,this._rawMappings=[]}return e.prototype.get=function(){var e=this;return this._cachedMap||!function(){var t=e._cachedMap=new f.default.SourceMapGenerator({file:e._opts.sourceMapTarget,sourceRoot:e._opts.sourceRoot}),r=e._code;"string"==typeof r?t.setSourceContent(e._opts.sourceFileName,r):"object"===("undefined"==typeof r?"undefined":(0,o.default)(r))&&(0,s.default)(r).forEach(function(e){t.setSourceContent(e,r[e])}),e._rawMappings.forEach(t.addMapping,t)}(),this._cachedMap.toJSON()},e.prototype.getRawMappings=function(){return this._rawMappings.slice()},e.prototype.mark=function(e,t,r,n,i,s){this._lastGenLine!==e&&null===r||this._lastGenLine===e&&this._lastSourceLine===r&&this._lastSourceColumn===n||(this._cachedMap=null,this._lastGenLine=e,this._lastSourceLine=r,this._lastSourceColumn=n,this._rawMappings.push({name:i||void 0,generated:{line:e,column:t},source:null==r?void 0:s||this._opts.sourceFileName,original:null==r?void 0:{line:r,column:n}}))},e}();t.default=p,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(3),s=n(i),a=function(){function e(t){(0,s.default)(this,e),this.tokens=t,this.used={}}return e.prototype.getNewlinesBefore=function(e){var t=void 0,r=void 0,n=this.tokens,i=this._findToken(function(t){return t.start-e.start},0,n.length);if(i>=0){for(;i&&e.start===n[i-1].start;)--i;t=n[i-1],r=n[i]}return this._getNewlinesBetween(t,r)},e.prototype.getNewlinesAfter=function(e){var t=void 0,r=void 0,n=this.tokens,i=this._findToken(function(t){return t.end-e.end},0,n.length);if(i>=0){for(;i&&e.end===n[i-1].end;)--i;t=n[i],r=n[i+1],","===r.type.label&&(r=n[i+2])}return r&&"eof"===r.type.label?1:this._getNewlinesBetween(t,r)},e.prototype._getNewlinesBetween=function(e,t){if(!t||!t.loc)return 0;for(var r=e?e.loc.end.line:1,n=t.loc.start.line,i=0,s=r;s<n;s++)"undefined"==typeof this.used[s]&&(this.used[s]=!0,i++);return i},e.prototype._findToken=function(e,t,r){if(t>=r)return-1;var n=t+r>>>1,i=e(this.tokens[n]);return i<0?this._findToken(e,n+1,r):i>0?this._findToken(e,t,n):0===i?n:-1},e}();t.default=a,e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){for(var t=e,r=Array.isArray(t),n=0,t=r?t:(0,o.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i,a=s.node,u=a.expression;if(l.isMemberExpression(u)){var c=s.scope.maybeGenerateMemoised(u.object),f=void 0,p=[];c?(f=c,p.push(l.assignmentExpression("=",c,u.object))):f=u.object,p.push(l.callExpression(l.memberExpression(l.memberExpression(f,u.property,u.computed),l.identifier("bind")),[f])),1===p.length?a.expression=p[0]:a.expression=l.sequenceExpression(p)}}}t.__esModule=!0;var a=r(2),o=i(a);t.default=s;var u=r(1),l=n(u);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){function t(t){return t&&t.operator===e.operator+"="}function r(e,t){return u.assignmentExpression("=",e,t)}var n={};return n.ExpressionStatement=function(n,i){if(!n.isCompletionRecord()){var s=n.node.expression;if(t(s)){var o=[],l=(0,a.default)(s.left,o,i,n.scope,!0);o.push(u.expressionStatement(r(l.ref,e.build(l.uid,s.right)))),n.replaceWithMultiple(o)}}},n.AssignmentExpression=function(n,i){var s=n.node,o=n.scope;if(t(s)){var u=[],l=(0,a.default)(s.left,u,i,o);u.push(r(l.ref,e.build(l.uid,s.right))),n.replaceWithMultiple(u)}},n.BinaryExpression=function(t){var r=t.node;r.operator===e.operator&&t.replaceWith(e.build(r.left,r.right))},n};var s=r(315),a=i(s),o=r(1),u=n(o);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.scope,r=e.node,n=u.functionExpression(null,[],r.body,r.generator,r.async),i=n,s=[];(0,a.default)(e,function(e){return t.push({id:e})});var o={foundThis:!1,foundArguments:!1};e.traverse(l,o),o.foundArguments&&(i=u.memberExpression(n,u.identifier("apply")),s=[],o.foundThis&&s.push(u.thisExpression()),o.foundArguments&&(o.foundThis||s.push(u.nullLiteral()),s.push(u.identifier("arguments"))));var c=u.callExpression(i,s);return r.generator&&(c=u.yieldExpression(c,!0)),u.returnStatement(c)};var s=r(188),a=i(s),o=r(1),u=n(o),l={enter:function(e,t){e.isThisExpression()&&(t.foundThis=!0),e.isReferencedIdentifier({name:"arguments"})&&(t.foundArguments=!0)},Function:function(e){e.skip()}};e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e,t,r,n){var i=void 0;if(o.isSuper(e))return e;if(o.isIdentifier(e)){if(n.hasBinding(e.name))return e;i=e}else{if(!o.isMemberExpression(e))throw new Error("We can't explode this node type "+e.type);if(i=e.object,o.isSuper(i)||o.isIdentifier(i)&&n.hasBinding(i.name))return i}var s=n.generateUidIdentifierBasedOnNode(i);return t.push(o.variableDeclaration("var",[o.variableDeclarator(s,i)])),s}function s(e,t,r,n){var i=e.property,s=o.toComputedKey(e,i);if(o.isLiteral(s)&&o.isPureish(s))return s;var a=n.generateUidIdentifierBasedOnNode(i);return t.push(o.variableDeclaration("var",[o.variableDeclarator(a,i)])),a}t.__esModule=!0,t.default=function(e,t,r,n,a){var u=void 0;u=o.isIdentifier(e)&&a?e:i(e,t,r,n);var l=void 0,c=void 0;if(o.isIdentifier(e))l=e,c=u;else{var f=s(e,t,r,n),p=e.computed||o.isLiteral(f);c=l=o.memberExpression(u,f,p)}return{uid:c,ref:l}};var a=r(1),o=n(a);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s);t.default=function(e){function t(t){if(t.node&&!t.isPure()){var r=e.scope.generateDeclaredUidIdentifier();n.push(c.assignmentExpression("=",r,t.node)),t.replaceWith(r)}}function r(e){if(Array.isArray(e)&&e.length){e=e.reverse(),(0,u.default)(e);for(var r=e,n=Array.isArray(r),i=0,r=n?r:(0,a.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var o=s;t(o)}}}e.assertClass();var n=[];t(e.get("superClass")),r(e.get("decorators"),!0);for(var i=e.get("body.body"),s=i,o=Array.isArray(s),l=0,s=o?s:(0,a.default)(s);;){var f;if(o){if(l>=s.length)break;f=s[l++]}else{if(l=s.next(),l.done)break;f=l.value}var p=f;p.is("computed")&&t(p.get("key")),p.has("decorators")&&r(e.get("decorators"))}n&&e.insertBefore(n.map(function(e){return c.expressionStatement(e)}))};var o=r(312),u=i(o),l=r(1),c=n(l);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.default=function(e,t){var r=e.node,n=e.scope,i=e.parent,s=n.generateUidIdentifier("step"),o=n.generateUidIdentifier("value"),u=r.left,l=void 0;a.isIdentifier(u)||a.isPattern(u)||a.isMemberExpression(u)?l=a.expressionStatement(a.assignmentExpression("=",u,o)):a.isVariableDeclaration(u)&&(l=a.variableDeclaration(u.kind,[a.variableDeclarator(u.declarations[0].id,o)]));var d=f();(0,c.default)(d,p,null,{ITERATOR_HAD_ERROR_KEY:n.generateUidIdentifier("didIteratorError"),ITERATOR_COMPLETION:n.generateUidIdentifier("iteratorNormalCompletion"),ITERATOR_ERROR_KEY:n.generateUidIdentifier("iteratorError"),ITERATOR_KEY:n.generateUidIdentifier("iterator"),GET_ITERATOR:t.getAsyncIterator,OBJECT:r.right,STEP_VALUE:o,STEP_KEY:s,AWAIT:t.wrapAwait}),d=d.body.body;var h=a.isLabeledStatement(i),m=d[3].block.body,v=m[0];return h&&(m[0]=a.labeledStatement(i.label,v)),{replaceParent:h,node:d,declar:l,loop:v}};var s=r(1),a=i(s),o=r(4),u=n(o),l=r(8),c=n(l),f=(0,u.default)("\n  function* wrapper() {\n    var ITERATOR_COMPLETION = true;\n    var ITERATOR_HAD_ERROR_KEY = false;\n    var ITERATOR_ERROR_KEY = undefined;\n    try {\n      for (\n        var ITERATOR_KEY = GET_ITERATOR(OBJECT), STEP_KEY, STEP_VALUE;\n        (\n          STEP_KEY = yield AWAIT(ITERATOR_KEY.next()),\n          ITERATOR_COMPLETION = STEP_KEY.done,\n          STEP_VALUE = yield AWAIT(STEP_KEY.value),\n          !ITERATOR_COMPLETION\n        );\n        ITERATOR_COMPLETION = true) {\n      }\n    } catch (err) {\n      ITERATOR_HAD_ERROR_KEY = true;\n      ITERATOR_ERROR_KEY = err;\n    } finally {\n      try {\n        if (!ITERATOR_COMPLETION && ITERATOR_KEY.return) {\n          yield AWAIT(ITERATOR_KEY.return());\n        }\n      } finally {\n        if (ITERATOR_HAD_ERROR_KEY) {\n          throw ITERATOR_ERROR_KEY;\n        }\n      }\n    }\n  }\n"),p={noScope:!0,Identifier:function(e,t){e.node.name in t&&e.replaceInline(t[e.node.name])},CallExpression:function(e,t){var r=e.node.callee;a.isIdentifier(r)&&"AWAIT"===r.name&&!t.AWAIT&&e.replaceWith(e.node.arguments[0])}};e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(4),s=n(i),a={};t.default=a,a.typeof=(0,s.default)('\n  (typeof Symbol === "function" && typeof Symbol.iterator === "symbol")\n    ? function (obj) { return typeof obj; }\n    : function (obj) {\n        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype\n          ? "symbol"\n          : typeof obj;\n      };\n'),a.jsx=(0,s.default)('\n  (function () {\n    var REACT_ELEMENT_TYPE = (typeof Symbol === "function" && Symbol.for && Symbol.for("react.element")) || 0xeac7;\n\n    return function createRawReactElement (type, props, key, children) {\n      var defaultProps = type && type.defaultProps;\n      var childrenLength = arguments.length - 3;\n\n      if (!props && childrenLength !== 0) {\n        // If we\'re going to assign props.children, we create a new object now\n        // to avoid mutating defaultProps.\n        props = {};\n      }\n      if (props && defaultProps) {\n        for (var propName in defaultProps) {\n          if (props[propName] === void 0) {\n            props[propName] = defaultProps[propName];\n          }\n        }\n      } else if (!props) {\n        props = defaultProps || {};\n      }\n\n      if (childrenLength === 1) {\n        props.children = children;\n      } else if (childrenLength > 1) {\n        var childArray = Array(childrenLength);\n        for (var i = 0; i < childrenLength; i++) {\n          childArray[i] = arguments[i + 3];\n        }\n        props.children = childArray;\n      }\n\n      return {\n        $$typeof: REACT_ELEMENT_TYPE,\n        type: type,\n        key: key === undefined ? null : \'\' + key,\n        ref: null,\n        props: props,\n        _owner: null,\n      };\n    };\n\n  })()\n'),a.asyncIterator=(0,s.default)('\n  (function (iterable) {\n    if (typeof Symbol === "function") {\n      if (Symbol.asyncIterator) {\n        var method = iterable[Symbol.asyncIterator];\n        if (method != null) return method.call(iterable);\n      }\n      if (Symbol.iterator) {\n        return iterable[Symbol.iterator]();\n      }\n    }\n    throw new TypeError("Object is not async iterable");\n  })\n'),a.asyncGenerator=(0,s.default)('\n  (function () {\n    function AwaitValue(value) {\n      this.value = value;\n    }\n\n    function AsyncGenerator(gen) {\n      var front, back;\n\n      function send(key, arg) {\n        return new Promise(function (resolve, reject) {\n          var request = {\n            key: key,\n            arg: arg,\n            resolve: resolve,\n            reject: reject,\n            next: null\n          };\n\n          if (back) {\n            back = back.next = request;\n          } else {\n            front = back = request;\n            resume(key, arg);\n          }\n        });\n      }\n\n      function resume(key, arg) {\n        try {\n          var result = gen[key](arg)\n          var value = result.value;\n          if (value instanceof AwaitValue) {\n            Promise.resolve(value.value).then(\n              function (arg) { resume("next", arg); },\n              function (arg) { resume("throw", arg); });\n          } else {\n            settle(result.done ? "return" : "normal", result.value);\n          }\n        } catch (err) {\n          settle("throw", err);\n        }\n      }\n\n      function settle(type, value) {\n        switch (type) {\n          case "return":\n            front.resolve({ value: value, done: true });\n            break;\n          case "throw":\n            front.reject(value);\n            break;\n          default:\n            front.resolve({ value: value, done: false });\n            break;\n        }\n\n        front = front.next;\n        if (front) {\n          resume(front.key, front.arg);\n        } else {\n          back = null;\n        }\n      }\n\n      this._invoke = send;\n\n      // Hide "return" method if generator return is not supported\n      if (typeof gen.return !== "function") {\n        this.return = undefined;\n      }\n    }\n\n    if (typeof Symbol === "function" && Symbol.asyncIterator) {\n      AsyncGenerator.prototype[Symbol.asyncIterator] = function () { return this; };\n    }\n\n    AsyncGenerator.prototype.next = function (arg) { return this._invoke("next", arg); };\n    AsyncGenerator.prototype.throw = function (arg) { return this._invoke("throw", arg); };\n    AsyncGenerator.prototype.return = function (arg) { return this._invoke("return", arg); };\n\n    return {\n      wrap: function (fn) {\n        return function () {\n          return new AsyncGenerator(fn.apply(this, arguments));\n        };\n      },\n      await: function (value) {\n        return new AwaitValue(value);\n      }\n    };\n\n  })()\n'),a.asyncGeneratorDelegate=(0,s.default)('\n  (function (inner, awaitWrap) {\n    var iter = {}, waiting = false;\n\n    function pump(key, value) {\n      waiting = true;\n      value = new Promise(function (resolve) { resolve(inner[key](value)); });\n      return { done: false, value: awaitWrap(value) };\n    };\n\n    if (typeof Symbol === "function" && Symbol.iterator) {\n      iter[Symbol.iterator] = function () { return this; };\n    }\n\n    iter.next = function (value) {\n      if (waiting) {\n        waiting = false;\n        return value;\n      }\n      return pump("next", value);\n    };\n\n    if (typeof inner.throw === "function") {\n      iter.throw = function (value) {\n        if (waiting) {\n          waiting = false;\n          throw value;\n        }\n        return pump("throw", value);\n      };\n    }\n\n    if (typeof inner.return === "function") {\n      iter.return = function (value) {\n        return pump("return", value);\n      };\n    }\n\n    return iter;\n  })\n'),a.asyncToGenerator=(0,s.default)('\n  (function (fn) {\n    return function () {\n      var gen = fn.apply(this, arguments);\n      return new Promise(function (resolve, reject) {\n        function step(key, arg) {\n          try {\n            var info = gen[key](arg);\n            var value = info.value;\n          } catch (error) {\n            reject(error);\n            return;\n          }\n\n          if (info.done) {\n            resolve(value);\n          } else {\n            return Promise.resolve(value).then(function (value) {\n              step("next", value);\n            }, function (err) {\n              step("throw", err);\n            });\n          }\n        }\n\n        return step("next");\n      });\n    };\n  })\n'),a.classCallCheck=(0,s.default)('\n  (function (instance, Constructor) {\n    if (!(instance instanceof Constructor)) {\n      throw new TypeError("Cannot call a class as a function");\n    }\n  });\n'),a.createClass=(0,s.default)('\n  (function() {\n    function defineProperties(target, props) {\n      for (var i = 0; i < props.length; i ++) {\n        var descriptor = props[i];\n        descriptor.enumerable = descriptor.enumerable || false;\n        descriptor.configurable = true;\n        if ("value" in descriptor) descriptor.writable = true;\n        Object.defineProperty(target, descriptor.key, descriptor);\n      }\n    }\n\n    return function (Constructor, protoProps, staticProps) {\n      if (protoProps) defineProperties(Constructor.prototype, protoProps);\n      if (staticProps) defineProperties(Constructor, staticProps);\n      return Constructor;\n    };\n  })()\n'),a.defineEnumerableProperties=(0,s.default)('\n  (function (obj, descs) {\n    for (var key in descs) {\n      var desc = descs[key];\n      desc.configurable = desc.enumerable = true;\n      if ("value" in desc) desc.writable = true;\n      Object.defineProperty(obj, key, desc);\n    }\n    return obj;\n  })\n'),
+a.defaults=(0,s.default)("\n  (function (obj, defaults) {\n    var keys = Object.getOwnPropertyNames(defaults);\n    for (var i = 0; i < keys.length; i++) {\n      var key = keys[i];\n      var value = Object.getOwnPropertyDescriptor(defaults, key);\n      if (value && value.configurable && obj[key] === undefined) {\n        Object.defineProperty(obj, key, value);\n      }\n    }\n    return obj;\n  })\n"),a.defineProperty=(0,s.default)("\n  (function (obj, key, value) {\n    // Shortcircuit the slow defineProperty path when possible.\n    // We are trying to avoid issues where setters defined on the\n    // prototype cause side effects under the fast path of simple\n    // assignment. By checking for existence of the property with\n    // the in operator, we can optimize most of this overhead away.\n    if (key in obj) {\n      Object.defineProperty(obj, key, {\n        value: value,\n        enumerable: true,\n        configurable: true,\n        writable: true\n      });\n    } else {\n      obj[key] = value;\n    }\n    return obj;\n  });\n"),a.extends=(0,s.default)("\n  Object.assign || (function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n    return target;\n  })\n"),a.get=(0,s.default)('\n  (function get(object, property, receiver) {\n    if (object === null) object = Function.prototype;\n\n    var desc = Object.getOwnPropertyDescriptor(object, property);\n\n    if (desc === undefined) {\n      var parent = Object.getPrototypeOf(object);\n\n      if (parent === null) {\n        return undefined;\n      } else {\n        return get(parent, property, receiver);\n      }\n    } else if ("value" in desc) {\n      return desc.value;\n    } else {\n      var getter = desc.get;\n\n      if (getter === undefined) {\n        return undefined;\n      }\n\n      return getter.call(receiver);\n    }\n  });\n'),a.inherits=(0,s.default)('\n  (function (subClass, superClass) {\n    if (typeof superClass !== "function" && superClass !== null) {\n      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);\n    }\n    subClass.prototype = Object.create(superClass && superClass.prototype, {\n      constructor: {\n        value: subClass,\n        enumerable: false,\n        writable: true,\n        configurable: true\n      }\n    });\n    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n  })\n'),a.instanceof=(0,s.default)('\n  (function (left, right) {\n    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {\n      return right[Symbol.hasInstance](left);\n    } else {\n      return left instanceof right;\n    }\n  });\n'),a.interopRequireDefault=(0,s.default)("\n  (function (obj) {\n    return obj && obj.__esModule ? obj : { default: obj };\n  })\n"),a.interopRequireWildcard=(0,s.default)("\n  (function (obj) {\n    if (obj && obj.__esModule) {\n      return obj;\n    } else {\n      var newObj = {};\n      if (obj != null) {\n        for (var key in obj) {\n          if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];\n        }\n      }\n      newObj.default = obj;\n      return newObj;\n    }\n  })\n"),a.newArrowCheck=(0,s.default)('\n  (function (innerThis, boundThis) {\n    if (innerThis !== boundThis) {\n      throw new TypeError("Cannot instantiate an arrow function");\n    }\n  });\n'),a.objectDestructuringEmpty=(0,s.default)('\n  (function (obj) {\n    if (obj == null) throw new TypeError("Cannot destructure undefined");\n  });\n'),a.objectWithoutProperties=(0,s.default)("\n  (function (obj, keys) {\n    var target = {};\n    for (var i in obj) {\n      if (keys.indexOf(i) >= 0) continue;\n      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;\n      target[i] = obj[i];\n    }\n    return target;\n  })\n"),a.possibleConstructorReturn=(0,s.default)('\n  (function (self, call) {\n    if (!self) {\n      throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called");\n    }\n    return call && (typeof call === "object" || typeof call === "function") ? call : self;\n  });\n'),a.selfGlobal=(0,s.default)('\n  typeof global === "undefined" ? self : global\n'),a.set=(0,s.default)('\n  (function set(object, property, value, receiver) {\n    var desc = Object.getOwnPropertyDescriptor(object, property);\n\n    if (desc === undefined) {\n      var parent = Object.getPrototypeOf(object);\n\n      if (parent !== null) {\n        set(parent, property, value, receiver);\n      }\n    } else if ("value" in desc && desc.writable) {\n      desc.value = value;\n    } else {\n      var setter = desc.set;\n\n      if (setter !== undefined) {\n        setter.call(receiver, value);\n      }\n    }\n\n    return value;\n  });\n'),a.slicedToArray=(0,s.default)('\n  (function () {\n    // Broken out into a separate function to avoid deoptimizations due to the try/catch for the\n    // array iterator case.\n    function sliceIterator(arr, i) {\n      // this is an expanded form of `for...of` that properly supports abrupt completions of\n      // iterators etc. variable names have been minimised to reduce the size of this massive\n      // helper. sometimes spec compliancy is annoying :(\n      //\n      // _n = _iteratorNormalCompletion\n      // _d = _didIteratorError\n      // _e = _iteratorError\n      // _i = _iterator\n      // _s = _step\n\n      var _arr = [];\n      var _n = true;\n      var _d = false;\n      var _e = undefined;\n      try {\n        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n          _arr.push(_s.value);\n          if (i && _arr.length === i) break;\n        }\n      } catch (err) {\n        _d = true;\n        _e = err;\n      } finally {\n        try {\n          if (!_n && _i["return"]) _i["return"]();\n        } finally {\n          if (_d) throw _e;\n        }\n      }\n      return _arr;\n    }\n\n    return function (arr, i) {\n      if (Array.isArray(arr)) {\n        return arr;\n      } else if (Symbol.iterator in Object(arr)) {\n        return sliceIterator(arr, i);\n      } else {\n        throw new TypeError("Invalid attempt to destructure non-iterable instance");\n      }\n    };\n  })();\n'),a.slicedToArrayLoose=(0,s.default)('\n  (function (arr, i) {\n    if (Array.isArray(arr)) {\n      return arr;\n    } else if (Symbol.iterator in Object(arr)) {\n      var _arr = [];\n      for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {\n        _arr.push(_step.value);\n        if (i && _arr.length === i) break;\n      }\n      return _arr;\n    } else {\n      throw new TypeError("Invalid attempt to destructure non-iterable instance");\n    }\n  });\n'),a.taggedTemplateLiteral=(0,s.default)("\n  (function (strings, raw) {\n    return Object.freeze(Object.defineProperties(strings, {\n        raw: { value: Object.freeze(raw) }\n    }));\n  });\n"),a.taggedTemplateLiteralLoose=(0,s.default)("\n  (function (strings, raw) {\n    strings.raw = raw;\n    return strings;\n  });\n"),a.temporalRef=(0,s.default)('\n  (function (val, name, undef) {\n    if (val === undef) {\n      throw new ReferenceError(name + " is not defined - temporal dead zone");\n    } else {\n      return val;\n    }\n  })\n'),a.temporalUndefined=(0,s.default)("\n  ({})\n"),a.toArray=(0,s.default)("\n  (function (arr) {\n    return Array.isArray(arr) ? arr : Array.from(arr);\n  });\n"),a.toConsumableArray=(0,s.default)("\n  (function (arr) {\n    if (Array.isArray(arr)) {\n      for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];\n      return arr2;\n    } else {\n      return Array.from(arr);\n    }\n  });\n"),e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types;return{pre:function(e){e.set("helpersNamespace",t.identifier("babelHelpers"))}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("dynamicImport")}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{manipulateOptions:function(e,t){t.plugins.push("functionSent")}}},e.exports=t.default},function(e,t,r){"use strict";t.__esModule=!0,t.default=function(){return{inherits:r(67)}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){var t=e.types,n={Function:function(e){e.skip()},YieldExpression:function(e,r){var n=e.node;if(n.delegate){var i=r.addHelper("asyncGeneratorDelegate");n.argument=t.callExpression(i,[t.callExpression(r.addHelper("asyncIterator"),[n.argument]),t.memberExpression(r.addHelper("asyncGenerator"),t.identifier("await"))])}}};return{inherits:r(193),visitor:{Function:function(e,r){e.node.async&&e.node.generator&&(e.traverse(n,r),(0,s.default)(e,r.file,{wrapAsync:t.memberExpression(r.addHelper("asyncGenerator"),t.identifier("wrap")),wrapAwait:t.memberExpression(r.addHelper("asyncGenerator"),t.identifier("await"))}))}}}};var i=r(125),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){return{inherits:r(67),visitor:{Function:function(e,t){e.node.async&&!e.node.generator&&(0,s.default)(e,t.file,{wrapAsync:t.addImport(t.opts.module,t.opts.method)})}}}};var i=r(125),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){function t(e,t){if(!t.applyDecoratedDescriptor){t.applyDecoratedDescriptor=e.scope.generateUidIdentifier("applyDecoratedDescriptor");var r=p({NAME:t.applyDecoratedDescriptor});e.scope.getProgramParent().path.unshiftContainer("body",r)}return t.applyDecoratedDescriptor}function n(e,t){if(!t.initializerDefineProp){t.initializerDefineProp=e.scope.generateUidIdentifier("initDefineProp");var r=f({NAME:t.initializerDefineProp});e.scope.getProgramParent().path.unshiftContainer("body",r)}return t.initializerDefineProp}function i(e,t){if(!t.initializerWarningHelper){t.initializerWarningHelper=e.scope.generateUidIdentifier("initializerWarningHelper");var r=c({NAME:t.initializerWarningHelper});e.scope.getProgramParent().path.unshiftContainer("body",r)}return t.initializerWarningHelper}function s(e){var t=(e.isClass()?[e].concat(e.get("body.body")):e.get("properties")).reduce(function(e,t){return e.concat(t.node.decorators||[])},[]),r=t.filter(function(e){return!y.isIdentifier(e.expression)});if(0!==r.length)return y.sequenceExpression(r.map(function(t){var r=t.expression,n=t.expression=e.scope.generateDeclaredUidIdentifier("dec");return y.assignmentExpression("=",n,r)}).concat([e.node]))}function d(e,t){var r=e.node.decorators||[];if(e.node.decorators=null,0!==r.length){var n=e.scope.generateDeclaredUidIdentifier("class");return r.map(function(e){return e.expression}).reverse().reduce(function(e,t){return a({CLASS_REF:n,DECORATOR:t,INNER:e}).expression},e.node)}}function h(e,t){var r=e.node.body.body.some(function(e){return(e.decorators||[]).length>0});if(r)return v(e,t,e.node.body.body)}function m(e,t){var r=e.node.properties.some(function(e){return(e.decorators||[]).length>0});if(r)return v(e,t,e.node.properties)}function v(e,r,n){var s=(e.scope.generateDeclaredUidIdentifier("desc"),e.scope.generateDeclaredUidIdentifier("value"),e.scope.generateDeclaredUidIdentifier(e.isClass()?"class":"obj")),a=n.reduce(function(n,a){var c=a.decorators||[];if(a.decorators=null,0===c.length)return n;if(a.computed)throw e.buildCodeFrameError("Computed method/property decorators are not yet supported.");var f=y.isLiteral(a.key)?a.key:y.stringLiteral(a.key.name),p=e.isClass()&&!a.static?o({CLASS_REF:s}).expression:s;if(y.isClassProperty(a,{static:!1})){var d=e.scope.generateDeclaredUidIdentifier("descriptor"),h=a.value?y.functionExpression(null,[],y.blockStatement([y.returnStatement(a.value)])):y.nullLiteral();a.value=y.callExpression(i(e,r),[d,y.thisExpression()]),n=n.concat([y.assignmentExpression("=",d,y.callExpression(t(e,r),[p,f,y.arrayExpression(c.map(function(e){return e.expression})),y.objectExpression([y.objectProperty(y.identifier("enumerable"),y.booleanLiteral(!0)),y.objectProperty(y.identifier("initializer"),h)])]))])}else n=n.concat(y.callExpression(t(e,r),[p,f,y.arrayExpression(c.map(function(e){return e.expression})),y.isObjectProperty(a)||y.isClassProperty(a,{static:!0})?l({TEMP:e.scope.generateDeclaredUidIdentifier("init"),TARGET:p,PROPERTY:f}).expression:u({TARGET:p,PROPERTY:f}).expression,p]));return n},[]);return y.sequenceExpression([y.assignmentExpression("=",s,e.node),y.sequenceExpression(a),s])}var y=e.types;return{inherits:r(126),visitor:{ExportDefaultDeclaration:function(e){if(e.get("declaration").isClassDeclaration()){var t=e.node,r=t.declaration.id||e.scope.generateUidIdentifier("default");t.declaration.id=r,e.replaceWith(t.declaration),e.insertAfter(y.exportNamedDeclaration(null,[y.exportSpecifier(r,y.identifier("default"))]))}},ClassDeclaration:function(e){var t=e.node,r=t.id||e.scope.generateUidIdentifier("class");e.replaceWith(y.variableDeclaration("let",[y.variableDeclarator(r,y.toExpression(t))]))},ClassExpression:function(e,t){var r=s(e)||d(e,t)||h(e,t);r&&e.replaceWith(r)},ObjectExpression:function(e,t){var r=s(e)||m(e,t);r&&e.replaceWith(r)},AssignmentExpression:function(e,t){t.initializerWarningHelper&&e.get("left").isMemberExpression()&&e.get("left.property").isIdentifier()&&e.get("right").isCallExpression()&&e.get("right.callee").isIdentifier({name:t.initializerWarningHelper.name})&&e.replaceWith(y.callExpression(n(e,t),[e.get("left.object").node,y.stringLiteral(e.get("left.property").node.name),e.get("right.arguments")[0].node,e.get("right.arguments")[1].node]))}}}};var i=r(4),s=n(i),a=(0,s.default)("\n  DECORATOR(CLASS_REF = INNER) || CLASS_REF;\n"),o=(0,s.default)("\n  CLASS_REF.prototype;\n"),u=(0,s.default)("\n    Object.getOwnPropertyDescriptor(TARGET, PROPERTY);\n"),l=(0,s.default)("\n    (TEMP = Object.getOwnPropertyDescriptor(TARGET, PROPERTY), (TEMP = TEMP ? TEMP.value : undefined), {\n        enumerable: true,\n        configurable: true,\n        writable: true,\n        initializer: function(){\n            return TEMP;\n        }\n    })\n"),c=(0,s.default)("\n    function NAME(descriptor, context){\n        throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');\n    }\n"),f=(0,s.default)("\n    function NAME(target, property, descriptor, context){\n        if (!descriptor) return;\n\n        Object.defineProperty(target, property, {\n            enumerable: descriptor.enumerable,\n            configurable: descriptor.configurable,\n            writable: descriptor.writable,\n            value: descriptor.initializer ? descriptor.initializer.call(context) : void 0,\n        });\n    }\n"),p=(0,s.default)("\n    function NAME(target, property, decorators, descriptor, context){\n        var desc = {};\n        Object['ke' + 'ys'](descriptor).forEach(function(key){\n            desc[key] = descriptor[key];\n        });\n        desc.enumerable = !!desc.enumerable;\n        desc.configurable = !!desc.configurable;\n        if ('value' in desc || desc.initializer){\n            desc.writable = true;\n        }\n\n        desc = decorators.slice().reverse().reduce(function(desc, decorator){\n            return decorator(target, property, desc) || desc;\n        }, desc);\n\n        if (context && desc.initializer !== void 0){\n            desc.value = desc.initializer ? desc.initializer.call(context) : void 0;\n            desc.initializer = undefined;\n        }\n\n        if (desc.initializer === void 0){\n            // This is a hack to avoid this being processed by 'transform-runtime'.\n            // See issue #9.\n            Object['define' + 'Property'](target, property, desc);\n            desc = null;\n        }\n\n        return desc;\n    }\n")},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e,t){var r=t._guessExecutionStatusRelativeTo(e);return"before"===r?"inside":"after"===r?"outside":"maybe"}function s(e,t){return u.callExpression(t.addHelper("temporalRef"),[e,u.stringLiteral(e.name),t.addHelper("temporalUndefined")])}function a(e,t,r){var n=r.letReferences[e.name];return!!n&&t.getBindingIdentifier(e.name)===n}t.__esModule=!0,t.visitor=void 0;var o=r(1),u=n(o);t.visitor={ReferencedIdentifier:function(e,t){if(this.file.opts.tdz){var r=e.node,n=e.parent,o=e.scope;if(!e.parentPath.isFor({left:r})&&a(r,o,t)){var l=o.getBinding(r.name).path,c=i(e,l);if("inside"!==c)if("maybe"===c){var f=s(r,t.file);if(l.parent._tdzThis=!0,e.skip(),e.parentPath.isUpdateExpression()){if(n._ignoreBlockScopingTDZ)return;e.parentPath.replaceWith(u.sequenceExpression([f,n]))}else e.replaceWith(f)}else"outside"===c&&e.replaceWith(u.throwStatement(u.inherits(u.newExpression(u.identifier("ReferenceError"),[u.stringLiteral(r.name+" is not defined - temporal dead zone")]),r)))}}},AssignmentExpression:{exit:function(e,t){if(this.file.opts.tdz){var r=e.node;if(!r._ignoreBlockScopingTDZ){var n=[],i=e.getBindingIdentifiers();for(var o in i){var l=i[o];a(l,e.scope,t)&&n.push(s(l,t.file))}n.length&&(r._ignoreBlockScopingTDZ=!0,n.push(r),e.replaceWithMultiple(n.map(u.expressionStatement)))}}}}}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(3),a=i(s),o=r(42),u=i(o),l=r(41),c=i(l),f=r(40),p=i(f),d=r(205),h=i(d),m=r(1),v=n(m),y=function(e){function t(){(0,a.default)(this,t);var r=(0,u.default)(this,e.apply(this,arguments));return r.isLoose=!0,r}return(0,c.default)(t,e),t.prototype._processMethod=function(e,t){if(!e.decorators){var r=this.classRef;e.static||(r=v.memberExpression(r,v.identifier("prototype")));var n=v.memberExpression(r,e.key,e.computed||v.isLiteral(e.key)),i=v.functionExpression(null,e.params,e.body,e.generator,e.async);i.returnType=e.returnType;var s=v.toComputedKey(e,e.key);v.isStringLiteral(s)&&(i=(0,p.default)({node:i,id:s,scope:t}));var a=v.expressionStatement(v.assignmentExpression("=",n,i));return v.inheritsComments(a,e),this.body.push(a),!0}},t}(h.default);t.default=y,e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types;return{visitor:{BinaryExpression:function(e){var r=e.node;"instanceof"===r.operator&&e.replaceWith(t.callExpression(this.addHelper("instanceof"),[r.left,r.right]))}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){for(var t=e.params,r=Array.isArray(t),n=0,t=r?t:(0,u.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;if(!v.isIdentifier(s))return!0}return!1}function a(e,t){if(!e.hasOwnBinding(t.name))return!0;var r=e.getOwnBinding(t.name),n=r.kind;return"param"===n||"local"===n}t.__esModule=!0,t.visitor=void 0;var o=r(2),u=i(o),l=r(187),c=i(l),f=r(314),p=i(f),d=r(4),h=i(d),m=r(1),v=n(m),y=(0,h.default)("\n  let VARIABLE_NAME =\n    ARGUMENTS.length > ARGUMENT_KEY && ARGUMENTS[ARGUMENT_KEY] !== undefined ?\n      ARGUMENTS[ARGUMENT_KEY]\n    :\n      DEFAULT_VALUE;\n"),g=(0,h.default)("\n  let $0 = $1[$2];\n"),b={ReferencedIdentifier:function(e,t){var r=e.scope,n=e.node;"eval"!==n.name&&a(r,n)||(t.iife=!0,e.stop())},Scope:function(e){e.skip()}};t.visitor={Function:function(e){function t(e,t,n){var i=y({VARIABLE_NAME:e,DEFAULT_VALUE:t,ARGUMENT_KEY:v.numericLiteral(n),ARGUMENTS:u});i._blockHoist=r.params.length-n,o.push(i)}var r=e.node,n=e.scope;if(s(r)){e.ensureBlock();var i={iife:!1,scope:n},o=[],u=v.identifier("arguments");u._shadowedFunctionLiteral=e;for(var l=(0,c.default)(r),f=e.get("params"),d=0;d<f.length;d++){var h=f[d];if(h.isAssignmentPattern()){var m=h.get("left"),E=h.get("right");if(d>=l||m.isPattern()){var x=n.generateUidIdentifier("x");x._isDefaultPlaceholder=!0,r.params[d]=x}else r.params[d]=m.node;i.iife||(E.isIdentifier()&&!a(n,E.node)?i.iife=!0:E.traverse(b,i)),t(m.node,E.node,d)}else i.iife||h.isIdentifier()||h.traverse(b,i)}for(var A=l+1;A<r.params.length;A++){var S=r.params[A];if(!S._isDefaultPlaceholder){var _=g(S,u,v.numericLiteral(A));_._blockHoist=r.params.length-A,o.push(_)}}r.params=r.params.slice(0,l),i.iife?(o.push((0,p.default)(e,n)),e.set("body",v.blockStatement(o))):e.get("body").unshiftContainer("body",o)}}}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}t.__esModule=!0,t.visitor=void 0;var i=r(1),s=n(i);t.visitor={Function:function(e){for(var t=e.get("params"),r=s.isRestElement(t[t.length-1])?1:0,n=t.length-r,i=0;i<n;i++){var a=t[i];if(a.isArrayPattern()||a.isObjectPattern()){var o=e.scope.generateUidIdentifier("ref"),u=s.variableDeclaration("let",[s.variableDeclarator(a.node,o)]);u._blockHoist=n-i,e.ensureBlock(),e.get("body").unshiftContainer("body",u),a.replaceWith(o)}}}}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){return d.isRestElement(e.params[e.params.length-1])}function a(e,t,r){var n=void 0;n=d.isNumericLiteral(e.parent.property)?d.numericLiteral(e.parent.property.value+r):0===r?e.parent.property:d.binaryExpression("+",e.parent.property,d.numericLiteral(r));var i=e.scope;if(i.isPure(n))e.parentPath.replaceWith(m({ARGUMENTS:t,INDEX:n}));else{var s=i.generateUidIdentifierBasedOnNode(n);i.push({id:s,kind:"var"}),e.parentPath.replaceWith(v({ARGUMENTS:t,INDEX:n,REF:s}))}}function o(e,t,r){r?e.parentPath.replaceWith(y({ARGUMENTS:t,OFFSET:d.numericLiteral(r)})):e.replaceWith(t)}t.__esModule=!0,t.visitor=void 0;var u=r(2),l=i(u),c=r(4),f=i(c),p=r(1),d=n(p),h=(0,f.default)("\n  for (var LEN = ARGUMENTS.length,\n           ARRAY = Array(ARRAY_LEN),\n           KEY = START;\n       KEY < LEN;\n       KEY++) {\n    ARRAY[ARRAY_KEY] = ARGUMENTS[KEY];\n  }\n"),m=(0,f.default)("\n  ARGUMENTS.length <= INDEX ? undefined : ARGUMENTS[INDEX]\n"),v=(0,f.default)("\n  REF = INDEX, ARGUMENTS.length <= REF ? undefined : ARGUMENTS[REF]\n"),y=(0,f.default)("\n  ARGUMENTS.length <= OFFSET ? 0 : ARGUMENTS.length - OFFSET\n"),g={Scope:function(e,t){e.scope.bindingIdentifierEquals(t.name,t.outerBinding)||e.skip()},Flow:function(e){e.isTypeCastExpression()||e.skip()},"Function|ClassProperty":function(e,t){var r=t.noOptimise;t.noOptimise=!0,e.traverse(g,t),t.noOptimise=r,e.skip()},ReferencedIdentifier:function(e,t){var r=e.node;if("arguments"===r.name&&(t.deopted=!0),r.name===t.name)if(t.noOptimise)t.deopted=!0;else{var n=e.parentPath;if("params"===n.listKey&&n.key<t.offset)return;if(n.isMemberExpression({object:r})){var i=n.parentPath,s=!t.deopted&&!(i.isAssignmentExpression()&&n.node===i.node.left||i.isLVal()||i.isForXStatement()||i.isUpdateExpression()||i.isUnaryExpression({operator:"delete"})||(i.isCallExpression()||i.isNewExpression())&&n.node===i.node.callee);if(s)if(n.node.computed){if(n.get("property").isBaseType("number"))return void t.candidates.push({cause:"indexGetter",path:e})}else if("length"===n.node.property.name)return void t.candidates.push({cause:"lengthGetter",path:e})}if(0===t.offset&&n.isSpreadElement()){var a=n.parentPath;if(a.isCallExpression()&&1===a.node.arguments.length)return void t.candidates.push({cause:"argSpread",path:e})}t.references.push(e)}},BindingIdentifier:function(e,t){var r=e.node;r.name===t.name&&(t.deopted=!0)}};t.visitor={Function:function(e){var t=e.node,r=e.scope;if(s(t)){var n=t.params.pop().argument,i=d.identifier("arguments");i._shadowedFunctionLiteral=e;var u={references:[],offset:t.params.length,argumentsNode:i,outerBinding:r.getBindingIdentifier(n.name),candidates:[],name:n.name,deopted:!1};if(e.traverse(g,u),u.deopted||u.references.length){u.references=u.references.concat(u.candidates.map(function(e){var t=e.path;return t})),u.deopted=u.deopted||!!t.shadow;var c=d.numericLiteral(t.params.length),f=r.generateUidIdentifier("key"),p=r.generateUidIdentifier("len"),m=f,v=p;t.params.length&&(m=d.binaryExpression("-",f,c),v=d.conditionalExpression(d.binaryExpression(">",p,c),d.binaryExpression("-",p,c),d.numericLiteral(0)));var y=h({ARGUMENTS:i,ARRAY_KEY:m,ARRAY_LEN:v,START:c,ARRAY:n,KEY:f,LEN:p});if(u.deopted)y._blockHoist=t.params.length+1,t.body.body.unshift(y);else{y._blockHoist=1;var b=e.getEarliestCommonAncestorFrom(u.references).getStatementParent();b.findParent(function(e){return e.isLoop()?void(b=e):e.isFunction()}),b.insertBefore(y)}}else for(var E=u.candidates,x=Array.isArray(E),A=0,E=x?E:(0,l.default)(E);;){var S;if(x){if(A>=E.length)break;S=E[A++]}else{if(A=E.next(),A.done)break;S=A.value}var _=S,D=_.path,C=_.cause;switch(C){case"indexGetter":a(D,i,u.offset);break;case"lengthGetter":o(D,i,u.offset);break;default:D.replaceWith(i)}}}}}},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types;return{visitor:{MemberExpression:{exit:function(e){var r=e.node,n=r.property;r.computed||!t.isIdentifier(n)||t.isValidIdentifier(n.name)||(r.property=t.stringLiteral(n.name),r.computed=!0)}}}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types;return{visitor:{ObjectProperty:{exit:function(e){var r=e.node,n=r.key;r.computed||!t.isIdentifier(n)||t.isValidIdentifier(n.name)||(r.key=t.stringLiteral(n.name))}}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s);t.default=function(e){var t=e.types;return{visitor:{ObjectExpression:function(e,r){for(var n=e.node,i=!1,s=n.properties,o=Array.isArray(s),l=0,s=o?s:(0,a.default)(s);;){var c;if(o){if(l>=s.length)break;c=s[l++]}else{if(l=s.next(),l.done)break;c=l.value}var f=c;if("get"===f.kind||"set"===f.kind){i=!0;break}}if(i){var p={};n.properties=n.properties.filter(function(e){return!!(e.computed||"get"!==e.kind&&"set"!==e.kind)||(u.push(p,e,null,r),!1)}),e.replaceWith(t.callExpression(t.memberExpression(t.identifier("Object"),t.identifier("defineProperties")),[n,u.toDefineObject(p)]))}}}}};var o=r(186),u=n(o);e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.parse,r=e.traverse;return{visitor:{CallExpression:function(e){if(e.get("callee").isIdentifier({name:"eval"})&&1===e.node.arguments.length){var n=e.get("arguments")[0].evaluate();if(!n.confident)return;var i=n.value;if("string"!=typeof i)return;var s=t(i);return r.removeProperties(s),s.program}}}}},e.exports=t.default},function(e,t,r){"use strict";t.__esModule=!0,t.default=function(e){function t(e,t){e.addComment("trailing",n(e,t)),e.replaceWith(i.noop())}function n(e,t){var r=e.getSource().replace(/\*-\//g,"*-ESCAPED/").replace(/\*\//g,"*-/");return t&&t.optional&&(r="?"+r),":"!==r[0]&&(r=":: "+r),r}var i=e.types;return{inherits:r(68),visitor:{TypeCastExpression:function(e){var t=e.node;e.get("expression").addComment("trailing",n(e.get("typeAnnotation"))),e.replaceWith(i.parenthesizedExpression(t.expression))},Identifier:function(e){var t=e.node;t.optional&&!t.typeAnnotation&&e.addComment("trailing",":: ?")},AssignmentPattern:{exit:function(e){var t=e.node;t.left.optional=!1}},Function:{exit:function(e){var t=e.node;t.params.forEach(function(e){return e.optional=!1})}},ClassProperty:function(e){var r=e.node,n=e.parent;r.value||t(e,n)},"ExportNamedDeclaration|Flow":function(e){var r=e.node,n=e.parent;i.isExportNamedDeclaration(r)&&!i.isFlow(r.declaration)||t(e,n)},ImportDeclaration:function(e){var r=e.node,n=e.parent;i.isImportDeclaration(r)&&"type"!==r.importKind&&"typeof"!==r.importKind||t(e,n)}}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types;return{visitor:{FunctionExpression:{exit:function(e){var r=e.node;r.id&&(r._ignoreUserWhitespace=!0,e.replaceWith(t.callExpression(t.functionExpression(null,[],t.blockStatement([t.toStatement(r),t.returnStatement(r.id)])),[])))}}}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{visitor:{CallExpression:function(e,t){e.get("callee").matchesPattern("Object.assign")&&(e.node.callee=t.addHelper("extends"))}}}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){return{visitor:{CallExpression:function(e,t){e.get("callee").matchesPattern("Object.setPrototypeOf")&&(e.node.callee=t.addHelper("defaults"))}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){function t(e){return i.isLiteral(i.toComputedKey(e,e.key),{value:"__proto__"})}function r(e){var t=e.left;return i.isMemberExpression(t)&&i.isLiteral(i.toComputedKey(t,t.property),{value:"__proto__"})}function n(e,t,r){return i.expressionStatement(i.callExpression(r.addHelper("defaults"),[t,e.right]))}var i=e.types;return{visitor:{AssignmentExpression:function(e,t){if(r(e.node)){var s=[],a=e.node.left.object,o=e.scope.maybeGenerateMemoised(a);o&&s.push(i.expressionStatement(i.assignmentExpression("=",o,a))),s.push(n(e.node,o||a,t)),o&&s.push(o),e.replaceWithMultiple(s)}},ExpressionStatement:function(e,t){var s=e.node.expression;i.isAssignmentExpression(s,{operator:"="})&&r(s)&&e.replaceWith(n(s,s.left.object,t))},ObjectExpression:function(e,r){for(var n=void 0,a=e.node,u=a.properties,l=Array.isArray(u),c=0,u=l?u:(0,s.default)(u);;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;t(p)&&(n=p.value,(0,o.default)(a.properties,p))}if(n){var d=[i.objectExpression([]),n];a.properties.length&&d.push(a),e.replaceWith(i.callExpression(r.addHelper("extends"),d))}}}}};var a=r(275),o=n(a);e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(){var e={enter:function(e,t){var r=function(){t.isImmutable=!1,e.stop()};return e.isJSXClosingElement()?void e.skip():e.isJSXIdentifier({name:"ref"})&&e.parentPath.isJSXAttribute({name:e.node})?r():void(e.isJSXIdentifier()||e.isIdentifier()||e.isJSXMemberExpression()||e.isImmutable()||r())}};return{visitor:{JSXElement:function(t){if(!t.node._hoisted){var r={isImmutable:!0};t.traverse(e,r),r.isImmutable?t.hoist():t.node._hoisted=!0}}}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(2),s=n(i);t.default=function(e){function t(e){for(var t=0;t<e.length;t++){var n=e[t];if(i.isJSXSpreadAttribute(n))return!0;if(r(n,"ref"))return!0}return!1}function r(e,t){return i.isJSXAttribute(e)&&i.isJSXIdentifier(e.name,{name:t})}function n(e){var t=e.value;return t?(i.isJSXExpressionContainer(t)&&(t=t.expression),t):i.identifier("true")}var i=e.types;return{visitor:{JSXElement:function(e,a){function o(e,t,r){e.push(i.objectProperty(t,r))}var u=e.node,l=u.openingElement;if(!t(l.attributes)){var c=i.objectExpression([]),f=null,p=l.name;i.isJSXIdentifier(p)&&i.react.isCompatTag(p.name)&&(p=i.stringLiteral(p.name));
+for(var d=l.attributes,h=Array.isArray(d),m=0,d=h?d:(0,s.default)(d);;){var v;if(h){if(m>=d.length)break;v=d[m++]}else{if(m=d.next(),m.done)break;v=m.value}var y=v;if(r(y,"key"))f=n(y);else{var g=y.name.name,b=i.isValidIdentifier(g)?i.identifier(g):i.stringLiteral(g);o(c.properties,b,n(y))}}var E=[p,c];if(f||u.children.length){var x=i.react.buildChildren(u);E.push.apply(E,[f||i.unaryExpression("void",i.numericLiteral(0),!0)].concat(x))}var A=i.callExpression(a.addHelper("jsx"),E);e.replaceWith(A)}}}}},e.exports=t.default},function(e,t,r){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types;return{manipulateOptions:function(e,t){t.plugins.push("jsx")},visitor:r(185)({pre:function(e){e.callee=e.tagExpr},post:function(e){t.react.isCompatTag(e.tagName)&&(e.call=t.callExpression(t.memberExpression(t.memberExpression(t.identifier("React"),t.identifier("DOM")),e.tagExpr,t.isLiteral(e.tagExpr)),e.args))}})}},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){var t=e.types,n={JSXOpeningElement:function(e){var n=e.node,i=t.jSXIdentifier(r),s=t.thisExpression();n.attributes.push(t.jSXAttribute(i,t.jSXExpressionContainer(s)))}};return{visitor:n}};var r="__self";e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){function t(e,t){var r=null!=t?i.numericLiteral(t):i.nullLiteral(),n=i.objectProperty(i.identifier("fileName"),e),s=i.objectProperty(i.identifier("lineNumber"),r);return i.objectExpression([n,s])}var i=e.types,s={JSXOpeningElement:function(e,s){var a=i.jSXIdentifier(r),o=e.container.openingElement.loc;if(o){for(var u=e.container.openingElement.attributes,l=0;l<u.length;l++){var c=u[l].name;if(c&&c.name===r)return}if(!s.fileNameIdentifier){var f="unknown"!==s.file.log.filename?s.file.log.filename:null,p=e.scope.generateUidIdentifier(n);e.hub.file.scope.push({id:p,init:i.stringLiteral(f)}),s.fileNameIdentifier=p}var d=t(s.fileNameIdentifier,o.start.line);u.push(i.jSXAttribute(a,i.jSXExpressionContainer(d)))}}};return{visitor:s}};var r="__source",n="_jsxFileName";e.exports=t.default},function(e,t){"use strict";e.exports={builtins:{Symbol:"symbol",Promise:"promise",Map:"map",WeakMap:"weak-map",Set:"set",WeakSet:"weak-set",Observable:"observable",setImmediate:"set-immediate",clearImmediate:"clear-immediate",asap:"asap"},methods:{Array:{concat:"array/concat",copyWithin:"array/copy-within",entries:"array/entries",every:"array/every",fill:"array/fill",filter:"array/filter",findIndex:"array/find-index",find:"array/find",forEach:"array/for-each",from:"array/from",includes:"array/includes",indexOf:"array/index-of",join:"array/join",keys:"array/keys",lastIndexOf:"array/last-index-of",map:"array/map",of:"array/of",pop:"array/pop",push:"array/push",reduceRight:"array/reduce-right",reduce:"array/reduce",reverse:"array/reverse",shift:"array/shift",slice:"array/slice",some:"array/some",sort:"array/sort",splice:"array/splice",unshift:"array/unshift",values:"array/values"},JSON:{stringify:"json/stringify"},Object:{assign:"object/assign",create:"object/create",defineProperties:"object/define-properties",defineProperty:"object/define-property",entries:"object/entries",freeze:"object/freeze",getOwnPropertyDescriptor:"object/get-own-property-descriptor",getOwnPropertyDescriptors:"object/get-own-property-descriptors",getOwnPropertyNames:"object/get-own-property-names",getOwnPropertySymbols:"object/get-own-property-symbols",getPrototypeOf:"object/get-prototype-of",isExtensible:"object/is-extensible",isFrozen:"object/is-frozen",isSealed:"object/is-sealed",is:"object/is",keys:"object/keys",preventExtensions:"object/prevent-extensions",seal:"object/seal",setPrototypeOf:"object/set-prototype-of",values:"object/values"},RegExp:{escape:"regexp/escape"},Math:{acosh:"math/acosh",asinh:"math/asinh",atanh:"math/atanh",cbrt:"math/cbrt",clz32:"math/clz32",cosh:"math/cosh",expm1:"math/expm1",fround:"math/fround",hypot:"math/hypot",imul:"math/imul",log10:"math/log10",log1p:"math/log1p",log2:"math/log2",sign:"math/sign",sinh:"math/sinh",tanh:"math/tanh",trunc:"math/trunc",iaddh:"math/iaddh",isubh:"math/isubh",imulh:"math/imulh",umulh:"math/umulh"},Symbol:{asyncIterator:"symbol/async-iterator",for:"symbol/for",hasInstance:"symbol/has-instance",isConcatSpreadable:"symbol/is-concat-spreadable",iterator:"symbol/iterator",keyFor:"symbol/key-for",match:"symbol/match",observable:"symbol/observable",replace:"symbol/replace",search:"symbol/search",species:"symbol/species",split:"symbol/split",toPrimitive:"symbol/to-primitive",toStringTag:"symbol/to-string-tag",unscopables:"symbol/unscopables"},String:{at:"string/at",codePointAt:"string/code-point-at",endsWith:"string/ends-with",fromCodePoint:"string/from-code-point",includes:"string/includes",matchAll:"string/match-all",padLeft:"string/pad-left",padRight:"string/pad-right",padStart:"string/pad-start",padEnd:"string/pad-end",raw:"string/raw",repeat:"string/repeat",startsWith:"string/starts-with",trim:"string/trim",trimLeft:"string/trim-left",trimRight:"string/trim-right",trimStart:"string/trim-start",trimEnd:"string/trim-end"},Number:{EPSILON:"number/epsilon",isFinite:"number/is-finite",isInteger:"number/is-integer",isNaN:"number/is-nan",isSafeInteger:"number/is-safe-integer",MAX_SAFE_INTEGER:"number/max-safe-integer",MIN_SAFE_INTEGER:"number/min-safe-integer",parseFloat:"number/parse-float",parseInt:"number/parse-int"},Reflect:{apply:"reflect/apply",construct:"reflect/construct",defineProperty:"reflect/define-property",deleteProperty:"reflect/delete-property",enumerate:"reflect/enumerate",getOwnPropertyDescriptor:"reflect/get-own-property-descriptor",getPrototypeOf:"reflect/get-prototype-of",get:"reflect/get",has:"reflect/has",isExtensible:"reflect/is-extensible",ownKeys:"reflect/own-keys",preventExtensions:"reflect/prevent-extensions",setPrototypeOf:"reflect/set-prototype-of",set:"reflect/set",defineMetadata:"reflect/define-metadata",deleteMetadata:"reflect/delete-metadata",getMetadata:"reflect/get-metadata",getMetadataKeys:"reflect/get-metadata-keys",getOwnMetadata:"reflect/get-own-metadata",getOwnMetadataKeys:"reflect/get-own-metadata-keys",hasMetadata:"reflect/has-metadata",hasOwnMetadata:"reflect/has-own-metadata",metadata:"reflect/metadata"},System:{global:"system/global"},Error:{isError:"error/is-error"},Date:{},Function:{}}}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.definitions=void 0,t.default=function(e){function t(e){return e.moduleName||"babel-runtime"}function r(e,t){return Object.prototype.hasOwnProperty.call(e,t)}var n=e.types,i=["interopRequireWildcard","interopRequireDefault"];return{pre:function(e){var r=t(this.opts);this.opts.helpers!==!1&&e.set("helperGenerator",function(t){if(i.indexOf(t)<0)return e.addImport(r+"/helpers/"+t,"default",t)}),this.setDynamic("regeneratorIdentifier",function(){return e.addImport(r+"/regenerator","default","regeneratorRuntime")})},visitor:{ReferencedIdentifier:function(e,i){var a=e.node,o=e.parent,u=e.scope;if("regeneratorRuntime"===a.name&&i.opts.regenerator!==!1)return void e.replaceWith(i.get("regeneratorIdentifier"));if(i.opts.polyfill!==!1&&!n.isMemberExpression(o)&&r(s.default.builtins,a.name)&&!u.getBindingIdentifier(a.name)){var l=t(i.opts);e.replaceWith(i.addImport(l+"/core-js/"+s.default.builtins[a.name],"default",a.name))}},CallExpression:function(e,r){if(r.opts.polyfill!==!1&&!e.node.arguments.length){var i=e.node.callee;if(n.isMemberExpression(i)&&i.computed&&e.get("callee.property").matchesPattern("Symbol.iterator")){var s=t(r.opts);e.replaceWith(n.callExpression(r.addImport(s+"/core-js/get-iterator","default","getIterator"),[i.object]))}}},BinaryExpression:function(e,r){if(r.opts.polyfill!==!1&&"in"===e.node.operator&&e.get("left").matchesPattern("Symbol.iterator")){var i=t(r.opts);e.replaceWith(n.callExpression(r.addImport(i+"/core-js/is-iterable","default","isIterable"),[e.node.right]))}},MemberExpression:{enter:function(e,i){if(i.opts.polyfill!==!1&&e.isReferenced()){var a=e.node,o=a.object,u=a.property;if(n.isReferenced(o,a)&&!a.computed&&r(s.default.methods,o.name)){var l=s.default.methods[o.name];if(r(l,u.name)&&!e.scope.getBindingIdentifier(o.name)){if("Object"===o.name&&"defineProperty"===u.name&&e.parentPath.isCallExpression()){var c=e.parentPath.node;if(3===c.arguments.length&&n.isLiteral(c.arguments[1]))return}var f=t(i.opts);e.replaceWith(i.addImport(f+"/core-js/"+l[u.name],"default",o.name+"$"+u.name))}}}},exit:function(e,i){if(i.opts.polyfill!==!1&&e.isReferenced()){var a=e.node,o=a.object;if(r(s.default.builtins,o.name)&&!e.scope.getBindingIdentifier(o.name)){var u=t(i.opts);e.replaceWith(n.memberExpression(i.addImport(u+"/core-js/"+s.default.builtins[o.name],"default",o.name),a.property,a.computed))}}}}}}};var i=r(346),s=n(i);t.definitions=s.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){var t=e.messages;return {visitor:{ReferencedIdentifier:function(e){var r=e.node,n=e.scope,i=n.getBinding(r.name);if(i&&"type"===i.kind&&!e.parentPath.isFlow())throw e.buildCodeFrameError(t.get("undeclaredVariableType",r.name),ReferenceError);if(!n.hasBinding(r.name)){var a=n.getAllBindings(),o=void 0,u=-1;for(var l in a){var c=(0,s.default)(r.name,l);c<=0||c>3||c<=u||(o=l,u=c)}var f=void 0;throw (f=o?t.get("undeclaredVariableSuggestion",r.name,o):t.get("undeclaredVariable",r.name), e.buildCodeFrameError(f,ReferenceError))}}}};};var i=r(459),s=n(i);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return{presets:[t.es2015!==!1&&[s.default.buildPreset,t.es2015],t.es2016!==!1&&o.default,t.es2017!==!1&&l.default].filter(Boolean)}};var i=r(215),s=n(i),a=r(216),o=n(a),u=r(217),l=n(u);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(213),s=n(i),a=r(209),o=n(a),u=r(68),l=n(u),c=r(127),f=n(c),p=r(212),d=n(p);t.default={plugins:[s.default,o.default,l.default,f.default,d.default],env:{development:{plugins:[]}}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=r(218),s=n(i),a=r(204),o=n(a),u=r(210),l=n(u);t.default={presets:[s.default],plugins:[o.default,l.default]},e.exports=t.default},function(e,t,r){"use strict";e.exports={default:r(400),__esModule:!0}},function(e,t,r){"use strict";e.exports={default:r(403),__esModule:!0}},function(e,t,r){"use strict";e.exports={default:r(405),__esModule:!0}},function(e,t,r){"use strict";e.exports={default:r(406),__esModule:!0}},function(e,t,r){"use strict";e.exports={default:r(408),__esModule:!0}},function(e,t,r){"use strict";e.exports={default:r(409),__esModule:!0}},function(e,t,r){"use strict";e.exports={default:r(410),__esModule:!0}},function(e,t){"use strict";t.__esModule=!0,t.default=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(2),a=i(s),o=r(3),u=i(o),l=r(35),c=i(l),f=r(1),p=n(f),d=!1,h=function(){function e(t,r,n,i){(0,u.default)(this,e),this.queue=null,this.parentPath=i,this.scope=t,this.state=n,this.opts=r}return e.prototype.shouldVisit=function(e){var t=this.opts;if(t.enter||t.exit)return!0;if(t[e.type])return!0;var r=p.VISITOR_KEYS[e.type];if(!r||!r.length)return!1;for(var n=r,i=Array.isArray(n),s=0,n=i?n:(0,a.default)(n);;){var o;if(i){if(s>=n.length)break;o=n[s++]}else{if(s=n.next(),s.done)break;o=s.value}var u=o;if(e[u])return!0}return!1},e.prototype.create=function(e,t,r,n){return c.default.get({parentPath:this.parentPath,parent:e,container:t,key:r,listKey:n})},e.prototype.maybeQueue=function(e,t){if(this.trap)throw new Error("Infinite cycle detected");this.queue&&(t?this.queue.push(e):this.priorityQueue.push(e))},e.prototype.visitMultiple=function(e,t,r){if(0===e.length)return!1;for(var n=[],i=0;i<e.length;i++){var s=e[i];s&&this.shouldVisit(s)&&n.push(this.create(t,e,i,r))}return this.visitQueue(n)},e.prototype.visitSingle=function(e,t){return!!this.shouldVisit(e[t])&&this.visitQueue([this.create(e,e,t)])},e.prototype.visitQueue=function(e){this.queue=e,this.priorityQueue=[];for(var t=[],r=!1,n=e,i=Array.isArray(n),s=0,n=i?n:(0,a.default)(n);;){var o;if(i){if(s>=n.length)break;o=n[s++]}else{if(s=n.next(),s.done)break;o=s.value}var u=o;if(u.resync(),0!==u.contexts.length&&u.contexts[u.contexts.length-1]===this||u.pushContext(this),null!==u.key&&(d&&e.length>=1e4&&(this.trap=!0),!(t.indexOf(u.node)>=0))){if(t.push(u.node),u.visit()){r=!0;break}if(this.priorityQueue.length&&(r=this.visitQueue(this.priorityQueue),this.priorityQueue=[],this.queue=e,r))break}}for(var l=e,c=Array.isArray(l),f=0,l=c?l:(0,a.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var h=p;h.popContext()}return this.queue=null,r},e.prototype.visit=function(e,t){var r=e[t];return!!r&&(Array.isArray(r)?this.visitMultiple(r,e,t):this.visitSingle(e,t))},e}();t.default=h,e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){for(var t=this;t=t.parentPath;)if(e(t))return t;return null}function a(e){var t=this;do if(e(t))return t;while(t=t.parentPath);return null}function o(){return this.findParent(function(e){return e.isFunction()||e.isProgram()})}function u(){var e=this;do if(Array.isArray(e.container))return e;while(e=e.parentPath)}function l(e){return this.getDeepestCommonAncestorFrom(e,function(e,t,r){for(var n=void 0,i=b.VISITOR_KEYS[e.type],s=r,a=Array.isArray(s),o=0,s=a?s:(0,y.default)(s);;){var u;if(a){if(o>=s.length)break;u=s[o++]}else{if(o=s.next(),o.done)break;u=o.value}var l=u,c=l[t+1];if(n)if(c.listKey&&n.listKey===c.listKey&&c.key<n.key)n=c;else{var f=i.indexOf(n.parentKey),p=i.indexOf(c.parentKey);f>p&&(n=c)}else n=c}return n})}function c(e,t){var r=this;if(!e.length)return this;if(1===e.length)return e[0];var n=1/0,i=void 0,s=void 0,a=e.map(function(e){var t=[];do t.unshift(e);while((e=e.parentPath)&&e!==r);return t.length<n&&(n=t.length),t}),o=a[0];e:for(var u=0;u<n;u++){for(var l=o[u],c=a,f=Array.isArray(c),p=0,c=f?c:(0,y.default)(c);;){var d;if(f){if(p>=c.length)break;d=c[p++]}else{if(p=c.next(),p.done)break;d=p.value}var h=d;if(h[u]!==l)break e}i=u,s=l}if(s)return t?t(s,i,a):s;throw new Error("Couldn't find intersection")}function f(){var e=this,t=[];do t.push(e);while(e=e.parentPath);return t}function p(e){return e.isDescendant(this)}function d(e){return!!this.findParent(function(t){return t===e})}function h(){for(var e=this;e;){for(var t=arguments,r=Array.isArray(t),n=0,t=r?t:(0,y.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;if(e.node.type===s)return!0}e=e.parentPath}return!1}function m(e){var t=this.isFunction()?this:this.findParent(function(e){return e.isFunction()});if(t){if(t.isFunctionExpression()||t.isFunctionDeclaration()){var r=t.node.shadow;if(r&&(!e||r[e]!==!1))return t}else if(t.isArrowFunctionExpression())return t;return null}}t.__esModule=!0;var v=r(2),y=i(v);t.findParent=s,t.find=a,t.getFunctionParent=o,t.getStatementParent=u,t.getEarliestCommonAncestorFrom=l,t.getDeepestCommonAncestorFrom=c,t.getAncestry=f,t.isAncestor=p,t.isDescendant=d,t.inType=h,t.inShadow=m;var g=r(1),b=n(g),E=r(35);i(E)},function(e,t){"use strict";function r(){if("string"!=typeof this.key){var e=this.node;if(e){var t=e.trailingComments,r=e.leadingComments;if(t||r){var n=this.getSibling(this.key-1),i=this.getSibling(this.key+1);n.node||(n=i),i.node||(i=n),n.addComments("trailing",r),i.addComments("leading",t)}}}}function n(e,t,r){this.addComments(e,[{type:r?"CommentLine":"CommentBlock",value:t}])}function i(e,t){if(t){var r=this.node;if(r){var n=e+"Comments";r[n]?r[n]=r[n].concat(t):r[n]=t}}}t.__esModule=!0,t.shareCommentsWithSiblings=r,t.addComment=n,t.addComments=i},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){var t=this.opts;return this.debug(function(){return e}),!(!this.node||!this._call(t[e]))||!!this.node&&this._call(t[this.node.type]&&t[this.node.type][e])}function s(e){if(!e)return!1;for(var t=e,r=Array.isArray(t),n=0,t=r?t:(0,D.default)(t);;){var i;if(r){if(n>=t.length)break;i=t[n++]}else{if(n=t.next(),n.done)break;i=n.value}var s=i;if(s){var a=this.node;if(!a)return!0;var o=s.call(this.state,this,this.state);if(o)throw new Error("Unexpected return value from visitor method "+s);if(this.node!==a)return!0;if(this.shouldStop||this.shouldSkip||this.removed)return!0}}return!1}function a(){var e=this.opts.blacklist;return e&&e.indexOf(this.node.type)>-1}function o(){return!!this.node&&(!this.isBlacklisted()&&((!this.opts.shouldSkip||!this.opts.shouldSkip(this))&&(this.call("enter")||this.shouldSkip?(this.debug(function(){return"Skip..."}),this.shouldStop):(this.debug(function(){return"Recursing into..."}),w.default.node(this.node,this.opts,this.scope,this.state,this,this.skipKeys),this.call("exit"),this.shouldStop))))}function u(){this.shouldSkip=!0}function l(e){this.skipKeys[e]=!0}function c(){this.shouldStop=!0,this.shouldSkip=!0}function f(){if(!this.opts||!this.opts.noScope){var e=this.context&&this.context.scope;if(!e)for(var t=this.parentPath;t&&!e;){if(t.opts&&t.opts.noScope)return;e=t.scope,t=t.parentPath}this.scope=this.getScope(e),this.scope&&this.scope.init()}}function p(e){return this.shouldSkip=!1,this.shouldStop=!1,this.removed=!1,this.skipKeys={},e&&(this.context=e,this.state=e.state,this.opts=e.opts),this.setScope(),this}function d(){this.removed||(this._resyncParent(),this._resyncList(),this._resyncKey())}function h(){this.parentPath&&(this.parent=this.parentPath.node)}function m(){if(this.container&&this.node!==this.container[this.key]){if(Array.isArray(this.container)){for(var e=0;e<this.container.length;e++)if(this.container[e]===this.node)return this.setKey(e)}else for(var t in this.container)if(this.container[t]===this.node)return this.setKey(t);this.key=null}}function v(){if(this.parent&&this.inList){var e=this.parent[this.listKey];this.container!==e&&(this.container=e||null)}}function y(){null!=this.key&&this.container&&this.container[this.key]===this.node||this._markRemoved()}function g(){this.contexts.pop(),this.setContext(this.contexts[this.contexts.length-1])}function b(e){this.contexts.push(e),this.setContext(e)}function E(e,t,r,n){this.inList=!!r,this.listKey=r,this.parentKey=r||n,this.container=t,this.parentPath=e||this.parentPath,this.setKey(n)}function x(e){this.key=e,this.node=this.container[this.key],this.type=this.node&&this.node.type}function A(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this;if(!e.removed)for(var t=this.contexts,r=t,n=Array.isArray(r),i=0,r=n?r:(0,D.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;a.maybeQueue(e)}}function S(){for(var e=this,t=this.contexts;!t.length;)e=e.parentPath,t=e.contexts;return t}t.__esModule=!0;var _=r(2),D=n(_);t.call=i,t._call=s,t.isBlacklisted=a,t.visit=o,t.skip=u,t.skipKey=l,t.stop=c,t.setScope=f,t.setContext=p,t.resync=d,t._resyncParent=h,t._resyncKey=m,t._resyncList=v,t._resyncRemoved=y,t.popContext=g,t.pushContext=b,t.setup=E,t.setKey=x,t.requeue=A,t._getQueueContexts=S;var C=r(8),w=n(C)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(){var e=this.node,t=void 0;if(this.isMemberExpression())t=e.property;else{if(!this.isProperty()&&!this.isMethod())throw new ReferenceError("todo");t=e.key}return e.computed||u.isIdentifier(t)&&(t=u.stringLiteral(t.name)),t}function s(){return u.ensureBlock(this.node)}function a(){if(this.isArrowFunctionExpression()){this.ensureBlock();var e=this.node;e.expression=!1,e.type="FunctionExpression",e.shadow=e.shadow||!0}}t.__esModule=!0,t.toComputedKey=i,t.ensureBlock=s,t.arrowFunctionToShadowed=a;var o=r(1),u=n(o)},function(e,t,r){(function(e){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(){var e=this.evaluate();if(e.confident)return!!e.value}function s(){function t(e){i&&(s=e,i=!1)}function r(e){var r=e.node;if(a.has(r)){var s=a.get(r);return s.resolved?s.value:void t(e)}var o={resolved:!1};a.set(r,o);var u=n(e);return i&&(o.resolved=!0,o.value=u),u}function n(n){if(i){var s=n.node;if(n.isSequenceExpression()){var a=n.get("expressions");return r(a[a.length-1])}if(n.isStringLiteral()||n.isNumericLiteral()||n.isBooleanLiteral())return s.value;if(n.isNullLiteral())return null;if(n.isTemplateLiteral()){for(var u="",c=0,f=n.get("expressions"),h=s.quasis,m=Array.isArray(h),v=0,h=m?h:(0,l.default)(h);;){var y;if(m){if(v>=h.length)break;y=h[v++]}else{if(v=h.next(),v.done)break;y=v.value}var g=y;if(!i)break;u+=g.value.cooked;var b=f[c++];b&&(u+=String(r(b)))}if(!i)return;return u}if(n.isConditionalExpression()){var E=r(n.get("test"));if(!i)return;return r(E?n.get("consequent"):n.get("alternate"))}if(n.isExpressionWrapper())return r(n.get("expression"));if(n.isMemberExpression()&&!n.parentPath.isCallExpression({callee:s})){var x=n.get("property"),A=n.get("object");if(A.isLiteral()&&x.isIdentifier()){var S=A.node.value,_="undefined"==typeof S?"undefined":(0,o.default)(S);if("number"===_||"string"===_)return S[x.node.name]}}if(n.isReferencedIdentifier()){var D=n.scope.getBinding(s.name);if(D&&D.constantViolations.length>0)return t(D.path);if(D&&n.node.start<D.path.node.end)return t(D.path);if(D&&D.hasValue)return D.value;if("undefined"===s.name)return;if("Infinity"===s.name)return 1/0;if("NaN"===s.name)return NaN;var C=n.resolve();return C===n?t(n):r(C)}if(n.isUnaryExpression({prefix:!0})){if("void"===s.operator)return;var w=n.get("argument");if("typeof"===s.operator&&(w.isFunction()||w.isClass()))return"function";var F=r(w);if(!i)return;switch(s.operator){case"!":return!F;case"+":return+F;case"-":return-F;case"~":return~F;case"typeof":return"undefined"==typeof F?"undefined":(0,o.default)(F)}}if(n.isArrayExpression()){for(var k=[],P=n.get("elements"),T=P,O=Array.isArray(T),B=0,T=O?T:(0,l.default)(T);;){var R;if(O){if(B>=T.length)break;R=T[B++]}else{if(B=T.next(),B.done)break;R=B.value}var I=R;if(I=I.evaluate(),!I.confident)return t(I);k.push(I.value)}return k}if(n.isObjectExpression()){for(var M={},N=n.get("properties"),L=N,j=Array.isArray(L),U=0,L=j?L:(0,l.default)(L);;){var V;if(j){if(U>=L.length)break;V=L[U++]}else{if(U=L.next(),U.done)break;V=U.value}var G=V;if(G.isObjectMethod()||G.isSpreadProperty())return t(G);var W=G.get("key"),Y=W;if(G.node.computed){if(Y=Y.evaluate(),!Y.confident)return t(W);Y=Y.value}else Y=Y.isIdentifier()?Y.node.name:Y.node.value;var q=G.get("value"),K=q.evaluate();if(!K.confident)return t(q);K=K.value,M[Y]=K}return M}if(n.isLogicalExpression()){var H=i,J=r(n.get("left")),X=i;i=H;var z=r(n.get("right")),$=i;switch(i=X&&$,s.operator){case"||":if(J&&X)return i=!0,J;if(!i)return;return J||z;case"&&":if((!J&&X||!z&&$)&&(i=!0),!i)return;return J&&z}}if(n.isBinaryExpression()){var Q=r(n.get("left"));if(!i)return;var Z=r(n.get("right"));if(!i)return;switch(s.operator){case"-":return Q-Z;case"+":return Q+Z;case"/":return Q/Z;case"*":return Q*Z;case"%":return Q%Z;case"**":return Math.pow(Q,Z);case"<":return Q<Z;case">":return Q>Z;case"<=":return Q<=Z;case">=":return Q>=Z;case"==":return Q==Z;case"!=":return Q!=Z;case"===":return Q===Z;case"!==":return Q!==Z;case"|":return Q|Z;case"&":return Q&Z;case"^":return Q^Z;case"<<":return Q<<Z;case">>":return Q>>Z;case">>>":return Q>>>Z}}if(n.isCallExpression()){var ee=n.get("callee"),te=void 0,re=void 0;if(ee.isIdentifier()&&!n.scope.getBinding(ee.node.name,!0)&&p.indexOf(ee.node.name)>=0&&(re=e[s.callee.name]),ee.isMemberExpression()){var ne=ee.get("object"),ie=ee.get("property");if(ne.isIdentifier()&&ie.isIdentifier()&&p.indexOf(ne.node.name)>=0&&d.indexOf(ie.node.name)<0&&(te=e[ne.node.name],re=te[ie.node.name]),ne.isLiteral()&&ie.isIdentifier()){var se=(0,o.default)(ne.node.value);"string"!==se&&"number"!==se||(te=ne.node.value,re=te[ie.node.name])}}if(re){var ae=n.get("arguments").map(r);if(!i)return;return re.apply(te,ae)}}t(n)}}var i=!0,s=void 0,a=new f.default,u=r(this);return i||(u=void 0),{confident:i,deopt:s,value:u}}t.__esModule=!0;var a=r(7),o=n(a),u=r(2),l=n(u),c=r(133),f=n(c);t.evaluateTruthy=i,t.evaluate=s;var p=["String","Number","Math"],d=["random"]}).call(t,function(){return this}())},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(){var e=this;do{if(!e.parentPath||Array.isArray(e.container)&&e.isStatement())break;e=e.parentPath}while(e);if(e&&(e.isProgram()||e.isFile()))throw new Error("File/Program node, we can't possibly find a statement parent to this");return e}function a(){return"left"===this.key?this.getSibling("right"):"right"===this.key?this.getSibling("left"):void 0}function o(){var e=[],t=function(t){t&&(e=e.concat(t.getCompletionRecords()))};if(this.isIfStatement())t(this.get("consequent")),t(this.get("alternate"));else if(this.isDoExpression()||this.isFor()||this.isWhile())t(this.get("body"));else if(this.isProgram()||this.isBlockStatement())t(this.get("body").pop());else{if(this.isFunction())return this.get("body").getCompletionRecords();this.isTryStatement()?(t(this.get("block")),t(this.get("handler")),t(this.get("finalizer"))):e.push(this)}return e}function u(e){return x.default.get({parentPath:this.parentPath,parent:this.parent,container:this.container,listKey:this.listKey,key:e})}function l(e,t){t===!0&&(t=this.context);var r=e.split(".");return 1===r.length?this._getKey(e,t):this._getPattern(r,t)}function c(e,t){var r=this,n=this.node,i=n[e];return Array.isArray(i)?i.map(function(s,a){return x.default.get({listKey:e,parentPath:r,parent:n,container:i,key:a}).setContext(t)}):x.default.get({parentPath:this,parent:n,container:n,key:e}).setContext(t)}function f(e,t){for(var r=this,n=e,i=Array.isArray(n),s=0,n=i?n:(0,b.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;r="."===o?r.parentPath:Array.isArray(r)?r[o]:r.get(o,t)}return r}function p(e){return S.getBindingIdentifiers(this.node,e)}function d(e){return S.getOuterBindingIdentifiers(this.node,e)}function h(){for(var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=this,n=[].concat(r),i=(0,y.default)(null);n.length;){var s=n.shift();if(s&&s.node){var a=S.getBindingIdentifiers.keys[s.node.type];if(s.isIdentifier())if(e){var o=i[s.node.name]=i[s.node.name]||[];o.push(s)}else i[s.node.name]=s;else if(s.isExportDeclaration()){var u=s.get("declaration");u.isDeclaration()&&n.push(u)}else{if(t){if(s.isFunctionDeclaration()){n.push(s.get("id"));continue}if(s.isFunctionExpression())continue}if(a)for(var l=0;l<a.length;l++){var c=a[l],f=s.get(c);(Array.isArray(f)||f.node)&&(n=n.concat(f))}}}}return i}function m(e){return this.getBindingIdentifierPaths(e,!0)}t.__esModule=!0;var v=r(9),y=i(v),g=r(2),b=i(g);t.getStatementParent=s,t.getOpposite=a,t.getCompletionRecords=o,t.getSibling=u,t.get=l,t._getKey=c,t._getPattern=f,t.getBindingIdentifiers=p,t.getOuterBindingIdentifiers=d,t.getBindingIdentifierPaths=h,t.getOuterBindingIdentifierPaths=m;var E=r(35),x=i(E),A=r(1),S=n(A)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(){if(this.typeAnnotation)return this.typeAnnotation;var e=this._getTypeAnnotation()||y.anyTypeAnnotation();return y.isTypeAnnotation(e)&&(e=e.typeAnnotation),this.typeAnnotation=e}function a(){var e=this.node;{if(e){if(e.typeAnnotation)return e.typeAnnotation;var t=m[e.type];return t?t.call(this,e):(t=m[this.parentPath.type],t&&t.validParent?this.parentPath.getTypeAnnotation():void 0)}if("init"===this.key&&this.parentPath.isVariableDeclarator()){var r=this.parentPath.parentPath,n=r.parentPath;return"left"===r.key&&n.isForInStatement()?y.stringTypeAnnotation():"left"===r.key&&n.isForOfStatement()?y.anyTypeAnnotation():y.voidTypeAnnotation()}}}function o(e,t){return u(e,this.getTypeAnnotation(),t)}function u(e,t,r){if("string"===e)return y.isStringTypeAnnotation(t);if("number"===e)return y.isNumberTypeAnnotation(t);if("boolean"===e)return y.isBooleanTypeAnnotation(t);if("any"===e)return y.isAnyTypeAnnotation(t);if("mixed"===e)return y.isMixedTypeAnnotation(t);if("empty"===e)return y.isEmptyTypeAnnotation(t);if("void"===e)return y.isVoidTypeAnnotation(t);if(r)return!1;throw new Error("Unknown base type "+e)}function l(e){var t=this.getTypeAnnotation();if(y.isAnyTypeAnnotation(t))return!0;if(y.isUnionTypeAnnotation(t)){for(var r=t.types,n=Array.isArray(r),i=0,r=n?r:(0,d.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;if(y.isAnyTypeAnnotation(a)||u(e,a,!0))return!0}return!1}return u(e,t,!0)}function c(e){var t=this.getTypeAnnotation();if(e=e.getTypeAnnotation(),!y.isAnyTypeAnnotation(t)&&y.isFlowBaseAnnotation(t))return e.type===t.type}function f(e){var t=this.getTypeAnnotation();return y.isGenericTypeAnnotation(t)&&y.isIdentifier(t.id,{name:e})}t.__esModule=!0;var p=r(2),d=i(p);t.getTypeAnnotation=s,t._getTypeAnnotation=a,t.isBaseType=o,t.couldBeBaseType=l,t.baseTypeStrictlyMatches=c,t.isGenericType=f;var h=r(369),m=n(h),v=r(1),y=n(v)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){var r=e.scope.getBinding(t),n=[];e.typeAnnotation=d.unionTypeAnnotation(n);var i=[],s=a(r,e,i),o=l(e,t);if(o&&!function(){var e=a(r,o.ifStatement);s=s.filter(function(t){return e.indexOf(t)<0}),n.push(o.typeAnnotation)}(),s.length){s=s.concat(i);for(var u=s,c=Array.isArray(u),p=0,u=c?u:(0,f.default)(u);;){var h;if(c){if(p>=u.length)break;h=u[p++]}else{if(p=u.next(),p.done)break;h=p.value}var m=h;n.push(m.getTypeAnnotation())}}if(n.length)return d.createUnionTypeAnnotation(n)}function a(e,t,r){var n=e.constantViolations.slice();return n.unshift(e.path),n.filter(function(e){e=e.resolve();var n=e._guessExecutionStatusRelativeTo(t);return r&&"function"===n&&r.push(e),"before"===n})}function o(e,t){var r=t.node.operator,n=t.get("right").resolve(),i=t.get("left").resolve(),s=void 0;if(i.isIdentifier({name:e})?s=n:n.isIdentifier({name:e})&&(s=i),s)return"==="===r?s.getTypeAnnotation():d.BOOLEAN_NUMBER_BINARY_OPERATORS.indexOf(r)>=0?d.numberTypeAnnotation():void 0;if("==="===r){var a=void 0,o=void 0;if(i.isUnaryExpression({operator:"typeof"})?(a=i,o=n):n.isUnaryExpression({operator:"typeof"})&&(a=n,o=i),(o||a)&&(o=o.resolve(),o.isLiteral())){var u=o.node.value;if("string"==typeof u&&a.get("argument").isIdentifier({name:e}))return d.createTypeAnnotationBasedOnTypeof(o.node.value)}}}function u(e){for(var t=void 0;t=e.parentPath;){if(t.isIfStatement()||t.isConditionalExpression())return"test"===e.key?void 0:t;e=t}}function l(e,t){var r=u(e);if(r){var n=r.get("test"),i=[n],s=[];do{var a=i.shift().resolve();if(a.isLogicalExpression()&&(i.push(a.get("left")),i.push(a.get("right"))),a.isBinaryExpression()){
+var c=o(t,a);c&&s.push(c)}}while(i.length);return s.length?{typeAnnotation:d.createUnionTypeAnnotation(s),ifStatement:r}:l(r,t)}}t.__esModule=!0;var c=r(2),f=i(c);t.default=function(e){if(this.isReferenced()){var t=this.scope.getBinding(e.name);return t?t.identifier.typeAnnotation?t.identifier.typeAnnotation:s(this,e.name):"undefined"===e.name?d.voidTypeAnnotation():"NaN"===e.name||"Infinity"===e.name?d.numberTypeAnnotation():void("arguments"===e.name)}};var p=r(1),d=n(p);e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(){var e=this.get("id");return e.isIdentifier()?this.get("init").getTypeAnnotation():void 0}function a(e){return e.typeAnnotation}function o(e){if(this.get("callee").isIdentifier())return P.genericTypeAnnotation(e.callee)}function u(){return P.stringTypeAnnotation()}function l(e){var t=e.operator;return"void"===t?P.voidTypeAnnotation():P.NUMBER_UNARY_OPERATORS.indexOf(t)>=0?P.numberTypeAnnotation():P.STRING_UNARY_OPERATORS.indexOf(t)>=0?P.stringTypeAnnotation():P.BOOLEAN_UNARY_OPERATORS.indexOf(t)>=0?P.booleanTypeAnnotation():void 0}function c(e){var t=e.operator;if(P.NUMBER_BINARY_OPERATORS.indexOf(t)>=0)return P.numberTypeAnnotation();if(P.BOOLEAN_BINARY_OPERATORS.indexOf(t)>=0)return P.booleanTypeAnnotation();if("+"===t){var r=this.get("right"),n=this.get("left");return n.isBaseType("number")&&r.isBaseType("number")?P.numberTypeAnnotation():n.isBaseType("string")||r.isBaseType("string")?P.stringTypeAnnotation():P.unionTypeAnnotation([P.stringTypeAnnotation(),P.numberTypeAnnotation()])}}function f(){return P.createUnionTypeAnnotation([this.get("left").getTypeAnnotation(),this.get("right").getTypeAnnotation()])}function p(){return P.createUnionTypeAnnotation([this.get("consequent").getTypeAnnotation(),this.get("alternate").getTypeAnnotation()])}function d(){return this.get("expressions").pop().getTypeAnnotation()}function h(){return this.get("right").getTypeAnnotation()}function m(e){var t=e.operator;if("++"===t||"--"===t)return P.numberTypeAnnotation()}function v(){return P.stringTypeAnnotation()}function y(){return P.numberTypeAnnotation()}function g(){return P.booleanTypeAnnotation()}function b(){return P.nullLiteralTypeAnnotation()}function E(){return P.genericTypeAnnotation(P.identifier("RegExp"))}function x(){return P.genericTypeAnnotation(P.identifier("Object"))}function A(){return P.genericTypeAnnotation(P.identifier("Array"))}function S(){return A()}function _(){return P.genericTypeAnnotation(P.identifier("Function"))}function D(){return w(this.get("callee"))}function C(){return w(this.get("tag"))}function w(e){if(e=e.resolve(),e.isFunction()){if(e.is("async"))return e.is("generator")?P.genericTypeAnnotation(P.identifier("AsyncIterator")):P.genericTypeAnnotation(P.identifier("Promise"));if(e.node.returnType)return e.node.returnType}}t.__esModule=!0,t.ClassDeclaration=t.ClassExpression=t.FunctionDeclaration=t.ArrowFunctionExpression=t.FunctionExpression=t.Identifier=void 0;var F=r(368);Object.defineProperty(t,"Identifier",{enumerable:!0,get:function(){return i(F).default}}),t.VariableDeclarator=s,t.TypeCastExpression=a,t.NewExpression=o,t.TemplateLiteral=u,t.UnaryExpression=l,t.BinaryExpression=c,t.LogicalExpression=f,t.ConditionalExpression=p,t.SequenceExpression=d,t.AssignmentExpression=h,t.UpdateExpression=m,t.StringLiteral=v,t.NumericLiteral=y,t.BooleanLiteral=g,t.NullLiteral=b,t.RegExpLiteral=E,t.ObjectExpression=x,t.ArrayExpression=A,t.RestElement=S,t.CallExpression=D,t.TaggedTemplateExpression=C;var k=r(1),P=n(k);a.validParent=!0,S.validParent=!0,t.FunctionExpression=_,t.ArrowFunctionExpression=_,t.FunctionDeclaration=_,t.ClassExpression=_,t.ClassDeclaration=_},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){function r(e){var t=n[s];return"*"===t||e===t}if(!this.isMemberExpression())return!1;for(var n=e.split("."),i=[this.node],s=0;i.length;){var a=i.shift();if(t&&s===n.length)return!0;if(k.isIdentifier(a)){if(!r(a.name))return!1}else if(k.isLiteral(a)){if(!r(a.value))return!1}else{if(k.isMemberExpression(a)){if(a.computed&&!k.isLiteral(a.property))return!1;i.unshift(a.property),i.unshift(a.object);continue}if(!k.isThisExpression(a))return!1;if(!r("this"))return!1}if(++s>n.length)return!1}return s===n.length}function a(e){var t=this.node&&this.node[e];return t&&Array.isArray(t)?!!t.length:!!t}function o(){return this.scope.isStatic(this.node)}function u(e){return!this.has(e)}function l(e,t){return this.node[e]===t}function c(e){return k.isType(this.type,e)}function f(){return("init"===this.key||"left"===this.key)&&this.parentPath.isFor()}function p(e){return!("body"!==this.key||!this.parentPath.isArrowFunctionExpression())&&(this.isExpression()?k.isBlockStatement(e):!!this.isBlockStatement()&&k.isExpression(e))}function d(e){var t=this,r=!0;do{var n=t.container;if(t.isFunction()&&!r)return!!e;if(r=!1,Array.isArray(n)&&t.key!==n.length-1)return!1}while((t=t.parentPath)&&!t.isProgram());return!0}function h(){return!this.parentPath.isLabeledStatement()&&!k.isBlockStatement(this.container)&&(0,w.default)(k.STATEMENT_OR_BLOCK_KEYS,this.key)}function m(e,t){if(!this.isReferencedIdentifier())return!1;var r=this.scope.getBinding(this.node.name);if(!r||"module"!==r.kind)return!1;var n=r.path,i=n.parentPath;return!!i.isImportDeclaration()&&(i.node.source.value===e&&(!t||(!(!n.isImportDefaultSpecifier()||"default"!==t)||(!(!n.isImportNamespaceSpecifier()||"*"!==t)||!(!n.isImportSpecifier()||n.node.imported.name!==t)))))}function v(){var e=this.node;return e.end?this.hub.file.code.slice(e.start,e.end):""}function y(e){return"after"!==this._guessExecutionStatusRelativeTo(e)}function g(e){var t=e.scope.getFunctionParent(),r=this.scope.getFunctionParent();if(t.node!==r.node){var n=this._guessExecutionStatusRelativeToDifferentFunctions(t);if(n)return n;e=t.path}var i=e.getAncestry();if(i.indexOf(this)>=0)return"after";var s=this.getAncestry(),a=void 0,o=void 0,u=void 0;for(u=0;u<s.length;u++){var l=s[u];if(o=i.indexOf(l),o>=0){a=l;break}}if(!a)return"before";var c=i[o-1],f=s[u-1];if(!c||!f)return"before";if(c.listKey&&c.container===f.container)return c.key>f.key?"before":"after";var p=k.VISITOR_KEYS[c.type].indexOf(c.key),d=k.VISITOR_KEYS[f.type].indexOf(f.key);return p>d?"before":"after"}function b(e){var t=e.path;if(t.isFunctionDeclaration()){var r=t.scope.getBinding(t.node.id.name);if(!r.references)return"before";for(var n=r.referencePaths,i=n,s=Array.isArray(i),a=0,i=s?i:(0,D.default)(i);;){var o;if(s){if(a>=i.length)break;o=i[a++]}else{if(a=i.next(),a.done)break;o=a.value}var u=o;if("callee"!==u.key||!u.parentPath.isCallExpression())return}for(var l=void 0,c=n,f=Array.isArray(c),p=0,c=f?c:(0,D.default)(c);;){var d;if(f){if(p>=c.length)break;d=c[p++]}else{if(p=c.next(),p.done)break;d=p.value}var h=d,m=!!h.find(function(e){return e.node===t.node});if(!m){var v=this._guessExecutionStatusRelativeTo(h);if(l){if(l!==v)return}else l=v}}return l}}function E(e,t){return this._resolve(e,t)||this}function x(e,t){var r=this;if(!(t&&t.indexOf(this)>=0))if(t=t||[],t.push(this),this.isVariableDeclarator()){if(this.get("id").isIdentifier())return this.get("init").resolve(e,t)}else if(this.isReferencedIdentifier()){var n=this.scope.getBinding(this.node.name);if(!n)return;if(!n.constant)return;if("module"===n.kind)return;if(n.path!==this){var i=function(){var i=n.path.resolve(e,t);return r.find(function(e){return e.node===i.node})?{v:void 0}:{v:i}}();if("object"===("undefined"==typeof i?"undefined":(0,S.default)(i)))return i.v}}else{if(this.isTypeCastExpression())return this.get("expression").resolve(e,t);if(e&&this.isMemberExpression()){var s=this.toComputedKey();if(!k.isLiteral(s))return;var a=s.value,o=this.get("object").resolve(e,t);if(o.isObjectExpression())for(var u=o.get("properties"),l=u,c=Array.isArray(l),f=0,l=c?l:(0,D.default)(l);;){var p;if(c){if(f>=l.length)break;p=l[f++]}else{if(f=l.next(),f.done)break;p=f.value}var d=p;if(d.isProperty()){var h=d.get("key"),m=d.isnt("computed")&&h.isIdentifier({name:a});if(m=m||h.isLiteral({value:a}))return d.get("value").resolve(e,t)}}else if(o.isArrayExpression()&&!isNaN(+a)){var v=o.get("elements"),y=v[a];if(y)return y.resolve(e,t)}}}}t.__esModule=!0,t.is=void 0;var A=r(7),S=i(A),_=r(2),D=i(_);t.matchesPattern=s,t.has=a,t.isStatic=o,t.isnt=u,t.equals=l,t.isNodeType=c,t.canHaveVariableDeclarationOrExpression=f,t.canSwapBetweenExpressionAndStatement=p,t.isCompletionRecord=d,t.isStatementOrBlock=h,t.referencesImport=m,t.getSource=v,t.willIMaybeExecuteBefore=y,t._guessExecutionStatusRelativeTo=g,t._guessExecutionStatusRelativeToDifferentFunctions=b,t.resolve=E,t._resolve=x;var C=r(113),w=i(C),F=r(1),k=n(F);t.is=a},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(3),a=i(s),o=r(2),u=i(o),l=r(1),c=n(l),f={ReferencedIdentifier:function(e,t){if(!e.isJSXIdentifier()||!l.react.isCompatTag(e.node.name)){var r=e.scope.getBinding(e.node.name);if(r&&r===t.scope.getBinding(e.node.name))if(r.constant)t.bindings[e.node.name]=r;else for(var n=r.constantViolations,i=Array.isArray(n),s=0,n=i?n:(0,u.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;t.breakOnScopePaths=t.breakOnScopePaths.concat(o.getAncestry())}}}},p=function(){function e(t,r){(0,a.default)(this,e),this.breakOnScopePaths=[],this.bindings={},this.scopes=[],this.scope=r,this.path=t}return e.prototype.isCompatibleScope=function(e){for(var t in this.bindings){var r=this.bindings[t];if(!e.bindingIdentifierEquals(t,r.identifier))return!1}return!0},e.prototype.getCompatibleScopes=function(){var e=this.path.scope;do{if(!this.isCompatibleScope(e))break;if(this.scopes.push(e),this.breakOnScopePaths.indexOf(e.path)>=0)break}while(e=e.parent)},e.prototype.getAttachmentPath=function(){var e=this._getAttachmentPath();if(e){var t=e.scope;if(t.path===e&&(t=e.scope.parent),t.path.isProgram()||t.path.isFunction())for(var r in this.bindings)if(t.hasOwnBinding(r)){var n=this.bindings[r];if("param"!==n.kind&&this.getAttachmentParentForPath(n.path).key>e.key)return}return e}},e.prototype._getAttachmentPath=function(){var e=this.scopes,t=e.pop();if(t){if(t.path.isFunction()){if(this.hasOwnParamBindings(t)){if(this.scope===t)return;return t.path.get("body").get("body")[0]}return this.getNextScopeAttachmentParent()}return t.path.isProgram()?this.getNextScopeAttachmentParent():void 0}},e.prototype.getNextScopeAttachmentParent=function(){var e=this.scopes.pop();if(e)return this.getAttachmentParentForPath(e.path)},e.prototype.getAttachmentParentForPath=function(e){do if(!e.parentPath||Array.isArray(e.container)&&e.isStatement()||e.isVariableDeclarator()&&e.parentPath.node.declarations.length>1)return e;while(e=e.parentPath)},e.prototype.hasOwnParamBindings=function(e){for(var t in this.bindings)if(e.hasOwnBinding(t)){var r=this.bindings[t];if("param"===r.kind)return!0}return!1},e.prototype.run=function(){var e=this.path.node;if(!e._hoisted){e._hoisted=!0,this.path.traverse(f,this),this.getCompatibleScopes();var t=this.getAttachmentPath();if(t&&t.getFunctionParent()!==this.path.getFunctionParent()){var r=t.scope.generateUidIdentifier("ref"),n=c.variableDeclarator(r,this.path.node);t.insertBefore([t.isVariableDeclarator()?n:c.variableDeclaration("var",[n])]);var i=this.path.parentPath;i.isJSXElement()&&this.path.container===i.node.children&&(r=c.JSXExpressionContainer(r)),this.path.replaceWith(r)}}},e}();t.default=p,e.exports=t.default},function(e,t){"use strict";t.__esModule=!0;t.hooks=[function(e,t){if("body"===e.key&&t.isArrowFunctionExpression())return e.replaceWith(e.scope.buildUndefinedNode()),!0},function(e,t){var r=!1;if(r=r||"test"===e.key&&(t.isWhile()||t.isSwitchCase()),r=r||"declaration"===e.key&&t.isExportDeclaration(),r=r||"body"===e.key&&t.isLabeledStatement(),r=r||"declarations"===e.listKey&&t.isVariableDeclaration()&&1===t.node.declarations.length,r=r||"expression"===e.key&&t.isExpressionStatement())return t.remove(),!0},function(e,t){if(t.isSequenceExpression()&&1===t.node.expressions.length)return t.replaceWith(t.node.expressions[0]),!0},function(e,t){if(t.isBinary())return"left"===e.key?t.replaceWith(t.node.right):t.replaceWith(t.node.left),!0},function(e,t){if(t.isIfStatement()&&("consequent"===e.key||"alternate"===e.key)||t.isLoop()&&"body"===e.key)return e.replaceWith({type:"BlockStatement",body:[]}),!0}]},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){if(this._assertUnremoved(),e=this._verifyNodeList(e),this.parentPath.isExpressionStatement()||this.parentPath.isLabeledStatement())return this.parentPath.insertBefore(e);if(this.isNodeType("Expression")||this.parentPath.isForStatement()&&"init"===this.key)this.node&&e.push(this.node),this.replaceExpressionWithStatements(e);else{if(this._maybePopFromStatements(e),Array.isArray(this.container))return this._containerInsertBefore(e);if(!this.isStatementOrBlock())throw new Error("We don't know what to do with this node type. We were previously a Statement but we can't fit in here?");this.node&&e.push(this.node),this._replaceWith(C.blockStatement(e))}return[this]}function a(e,t){this.updateSiblingKeys(e,t.length);for(var r=[],n=0;n<t.length;n++){var i=e+n,s=t[n];if(this.container.splice(i,0,s),this.context){var a=this.context.create(this.parent,this.container,i,this.listKey);this.context.queue&&a.pushContext(this.context),r.push(a)}else r.push(_.default.get({parentPath:this.parentPath,parent:this.parent,container:this.container,listKey:this.listKey,key:i}))}for(var o=this._getQueueContexts(),u=r,l=Array.isArray(u),c=0,u=l?u:(0,b.default)(u);;){var f;if(l){if(c>=u.length)break;f=u[c++]}else{if(c=u.next(),c.done)break;f=c.value}var p=f;p.setScope(),p.debug(function(){return"Inserted."});for(var d=o,h=Array.isArray(d),m=0,d=h?d:(0,b.default)(d);;){var v;if(h){if(m>=d.length)break;v=d[m++]}else{if(m=d.next(),m.done)break;v=m.value}var y=v;y.maybeQueue(p,!0)}}return r}function o(e){return this._containerInsert(this.key,e)}function u(e){return this._containerInsert(this.key+1,e)}function l(e){var t=e[e.length-1],r=C.isIdentifier(t)||C.isExpressionStatement(t)&&C.isIdentifier(t.expression);r&&!this.isCompletionRecord()&&e.pop()}function c(e){if(this._assertUnremoved(),e=this._verifyNodeList(e),this.parentPath.isExpressionStatement()||this.parentPath.isLabeledStatement())return this.parentPath.insertAfter(e);if(this.isNodeType("Expression")||this.parentPath.isForStatement()&&"init"===this.key){if(this.node){var t=this.scope.generateDeclaredUidIdentifier();e.unshift(C.expressionStatement(C.assignmentExpression("=",t,this.node))),e.push(C.expressionStatement(t))}this.replaceExpressionWithStatements(e)}else{if(this._maybePopFromStatements(e),Array.isArray(this.container))return this._containerInsertAfter(e);if(!this.isStatementOrBlock())throw new Error("We don't know what to do with this node type. We were previously a Statement but we can't fit in here?");this.node&&e.unshift(this.node),this._replaceWith(C.blockStatement(e))}return[this]}function f(e,t){if(this.parent)for(var r=E.path.get(this.parent),n=0;n<r.length;n++){var i=r[n];i.key>=e&&(i.key+=t)}}function p(e){if(!e)return[];e.constructor!==Array&&(e=[e]);for(var t=0;t<e.length;t++){var r=e[t],n=void 0;if(r?"object"!==("undefined"==typeof r?"undefined":(0,y.default)(r))?n="contains a non-object node":r.type?r instanceof _.default&&(n="has a NodePath when it expected a raw object"):n="without a type":n="has falsy node",n){var i=Array.isArray(r)?"array":"undefined"==typeof r?"undefined":(0,y.default)(r);throw new Error("Node list "+n+" with the index of "+t+" and type of "+i)}}return e}function d(e,t){this._assertUnremoved(),t=this._verifyNodeList(t);var r=_.default.get({parentPath:this,parent:this.node,container:this.node[e],listKey:e,key:0});return r.insertBefore(t)}function h(e,t){this._assertUnremoved(),t=this._verifyNodeList(t);var r=this.node[e],n=_.default.get({parentPath:this,parent:this.node,container:r,listKey:e,key:r.length});return n.replaceWithMultiple(t)}function m(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.scope,t=new A.default(this,e);return t.run()}t.__esModule=!0;var v=r(7),y=i(v),g=r(2),b=i(g);t.insertBefore=s,t._containerInsert=a,t._containerInsertBefore=o,t._containerInsertAfter=u,t._maybePopFromStatements=l,t.insertAfter=c,t.updateSiblingKeys=f,t._verifyNodeList=p,t.unshiftContainer=d,t.pushContainer=h,t.hoist=m;var E=r(89),x=r(371),A=i(x),S=r(35),_=i(S),D=r(1),C=n(D)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(){return this._assertUnremoved(),this.resync(),this._callRemovalHooks()?void this._markRemoved():(this.shareCommentsWithSiblings(),this._remove(),void this._markRemoved())}function s(){for(var e=f.hooks,t=Array.isArray(e),r=0,e=t?e:(0,c.default)(e);;){var n;if(t){if(r>=e.length)break;n=e[r++]}else{if(r=e.next(),r.done)break;n=r.value}var i=n;if(i(this,this.parentPath))return!0}}function a(){Array.isArray(this.container)?(this.container.splice(this.key,1),this.updateSiblingKeys(this.key,-1)):this._replaceWith(null)}function o(){this.shouldSkip=!0,this.removed=!0,this.node=null}function u(){if(this.removed)throw this.buildCodeFrameError("NodePath has been removed so is read-only.")}t.__esModule=!0;var l=r(2),c=n(l);t.remove=i,t._callRemovalHooks=s,t._remove=a,t._markRemoved=o,t._assertUnremoved=u;var f=r(372)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){this.resync(),e=this._verifyNodeList(e),x.inheritLeadingComments(e[0],this.node),x.inheritTrailingComments(e[e.length-1],this.node),this.node=this.container[this.key]=null,this.insertAfter(e),this.node?this.requeue():this.remove()}function a(e){this.resync();try{e="("+e+")",e=(0,b.parse)(e)}catch(r){var t=r.loc;throw (t&&(r.message+=" - make sure this is an expression.",r.message+="\n"+(0,h.default)(e,t.line,t.column+1)), r)}return e=e.program.body[0].expression,v.default.removeProperties(e),this.replaceWith(e)}function o(e){if(this.resync(),this.removed)throw new Error("You can't replace this node, we've already removed it");if(e instanceof g.default&&(e=e.node),!e)throw new Error("You passed `path.replaceWith()` a falsy node, use `path.remove()` instead");if(this.node!==e){if(this.isProgram()&&!x.isProgram(e))throw new Error("You can only replace a Program root node with another Program node");if(Array.isArray(e))throw new Error("Don't use `path.replaceWith()` with an array of nodes, use `path.replaceWithMultiple()`");if("string"==typeof e)throw new Error("Don't use `path.replaceWith()` with a source string, use `path.replaceWithSourceString()`");if(this.isNodeType("Statement")&&x.isExpression(e)&&(this.canHaveVariableDeclarationOrExpression()||this.canSwapBetweenExpressionAndStatement(e)||(e=x.expressionStatement(e))),this.isNodeType("Expression")&&x.isStatement(e)&&!this.canHaveVariableDeclarationOrExpression()&&!this.canSwapBetweenExpressionAndStatement(e))return this.replaceExpressionWithStatements([e]);var t=this.node;t&&(x.inheritsComments(e,t),x.removeComments(t)),this._replaceWith(e),this.type=e.type,this.setScope(),this.requeue()}}function u(e){if(!this.container)throw new ReferenceError("Container is falsy");this.inList?x.validate(this.parent,this.key,[e]):x.validate(this.parent,this.key,e),this.debug(function(){return"Replace with "+(e&&e.type)}),this.node=this.container[this.key]=e}function l(e){this.resync();var t=x.toSequenceExpression(e,this.scope);if(x.isSequenceExpression(t)){var r=t.expressions;r.length>=2&&this.parentPath.isExpressionStatement()&&this._maybePopFromStatements(r),1===r.length?this.replaceWith(r[0]):this.replaceWith(t)}else{if(!t){var n=x.functionExpression(null,[],x.blockStatement(e));n.shadow=!0,this.replaceWith(x.callExpression(n,[])),this.traverse(A);for(var i=this.get("callee").getCompletionRecords(),s=i,a=Array.isArray(s),o=0,s=a?s:(0,p.default)(s);;){var u;if(a){if(o>=s.length)break;u=s[o++]}else{if(o=s.next(),o.done)break;u=o.value}var l=u;if(l.isExpressionStatement()){var c=l.findParent(function(e){return e.isLoop()});if(c){var f=this.get("callee"),d=f.scope.generateDeclaredUidIdentifier("ret");f.get("body").pushContainer("body",x.returnStatement(d)),l.get("expression").replaceWith(x.assignmentExpression("=",d,l.node.expression))}else l.replaceWith(x.returnStatement(l.node.expression))}}return this.node}this.replaceWith(t)}}function c(e){return this.resync(),Array.isArray(e)?Array.isArray(this.container)?(e=this._verifyNodeList(e),this._containerInsertAfter(e),this.remove()):this.replaceWithMultiple(e):this.replaceWith(e)}t.__esModule=!0;var f=r(2),p=i(f);t.replaceWithMultiple=s,t.replaceWithSourceString=a,t.replaceWith=o,t._replaceWith=u,t.replaceExpressionWithStatements=l,t.replaceInline=c;var d=r(181),h=i(d),m=r(8),v=i(m),y=r(35),g=i(y),b=r(136),E=r(1),x=n(E),A={Function:function(e){e.skip()},VariableDeclaration:function(e){if("var"===e.node.kind){var t=e.getBindingIdentifiers();for(var r in t)e.scope.push({id:t[r]});for(var n=[],i=e.node.declarations,s=Array.isArray(i),a=0,i=s?i:(0,p.default)(i);;){var o;if(s){if(a>=i.length)break;o=i[a++]}else{if(a=i.next(),a.done)break;o=a.value}var u=o;u.init&&n.push(x.expressionStatement(x.assignmentExpression("=",u.id,u.init)))}e.replaceWithMultiple(n)}}}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=r(3),a=i(s),o=r(223),u=(i(o),r(1)),l=n(u),c={ReferencedIdentifier:function(e,t){var r=e.node;r.name===t.oldName&&(r.name=t.newName)},Scope:function(e,t){e.scope.bindingIdentifierEquals(t.oldName,t.binding.identifier)||e.skip()},"AssignmentExpression|Declaration":function(e,t){var r=e.getOuterBindingIdentifiers();for(var n in r)n===t.oldName&&(r[n].name=t.newName)}},f=function(){function e(t,r,n){(0,a.default)(this,e),this.newName=n,this.oldName=r,this.binding=t}return e.prototype.maybeConvertFromExportDeclaration=function(e){var t=e.parentPath.isExportDeclaration()&&e.parentPath;if(t){var r=t.isExportDefaultDeclaration();r&&(e.isFunctionDeclaration()||e.isClassDeclaration())&&!e.node.id&&(e.node.id=e.scope.generateUidIdentifier("default"));var n=e.getOuterBindingIdentifiers(),i=[];for(var s in n){var a=s===this.oldName?this.newName:s,o=r?"default":s;i.push(l.exportSpecifier(l.identifier(a),l.identifier(o)))}if(i.length){var u=l.exportNamedDeclaration(null,i);e.isFunctionDeclaration()&&(u._blockHoist=3),t.insertAfter(u),t.replaceWith(e.node)}}},e.prototype.maybeConvertFromClassFunctionDeclaration=function(e){},e.prototype.maybeConvertFromClassFunctionExpression=function(e){},e.prototype.rename=function(e){var t=this.binding,r=this.oldName,n=this.newName,i=t.scope,s=t.path,a=s.find(function(e){return e.isDeclaration()||e.isFunctionExpression()});a&&this.maybeConvertFromExportDeclaration(a),i.traverse(e||i.block,c,this),e||(i.removeOwnBinding(r),i.bindings[n]=t,this.binding.identifier.name=n),"hoisted"===t.type,a&&(this.maybeConvertFromClassFunctionDeclaration(a),this.maybeConvertFromClassFunctionExpression(a))},e}();t.default=f,e.exports=t.default},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){if(e._exploded)return e;e._exploded=!0;for(var t in e)if(!d(t)){var r=t.split("|");if(1!==r.length){var n=e[t];delete e[t];for(var i=r,s=Array.isArray(i),o=0,i=s?i:(0,E.default)(i);;){var u;if(s){if(o>=i.length)break;u=i[o++]}else{if(o=i.next(),o.done)break;u=o.value}var l=u;e[l]=n}}}a(e),delete e.__esModule,c(e),f(e);for(var m=(0,g.default)(e),v=Array.isArray(m),y=0,m=v?m:(0,E.default)(m);;){var b;if(v){if(y>=m.length)break;b=m[y++]}else{if(y=m.next(),y.done)break;b=y.value}var x=b;if(!d(x)){var S=A[x];if(S){var _=e[x];for(var D in _)_[D]=p(S,_[D]);if(delete e[x],S.types)for(var w=S.types,k=Array.isArray(w),P=0,w=k?w:(0,E.default)(w);;){var T;if(k){if(P>=w.length)break;T=w[P++]}else{if(P=w.next(),P.done)break;T=P.value}var O=T;e[O]?h(e[O],_):e[O]=_}else h(e,_)}}}for(var B in e)if(!d(B)){var R=e[B],I=C.FLIPPED_ALIAS_KEYS[B],M=C.DEPRECATED_KEYS[B];if(M&&(console.trace("Visitor defined for "+B+" but it has been renamed to "+M),I=[M]),I){delete e[B];for(var N=I,L=Array.isArray(N),j=0,N=L?N:(0,E.default)(N);;){var U;if(L){if(j>=N.length)break;U=N[j++]}else{if(j=N.next(),j.done)break;U=j.value}var V=U,G=e[V];G?h(G,R):e[V]=(0,F.default)(R)}}}for(var W in e)d(W)||f(e[W]);return e}function a(e){if(!e._verified){if("function"==typeof e)throw new Error(_.get("traverseVerifyRootFunction"));for(var t in e)if("enter"!==t&&"exit"!==t||o(t,e[t]),!d(t)){if(C.TYPES.indexOf(t)<0)throw new Error(_.get("traverseVerifyNodeType",t));var r=e[t];if("object"===("undefined"==typeof r?"undefined":(0,v.default)(r)))for(var n in r){if("enter"!==n&&"exit"!==n)throw new Error(_.get("traverseVerifyVisitorProperty",t,n));o(t+"."+n,r[n])}}e._verified=!0}}function o(e,t){for(var r=[].concat(t),n=r,i=Array.isArray(n),s=0,n=i?n:(0,E.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;if("function"!=typeof o)throw new TypeError("Non-function found defined in "+e+" with type "+("undefined"==typeof o?"undefined":(0,v.default)(o)))}}function u(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments[2],n={},i=0;i<e.length;i++){var a=e[i],o=t[i];s(a);for(var u in a){var c=a[u];(o||r)&&(c=l(c,o,r));var f=n[u]=n[u]||{};h(f,c)}}return n}function l(e,t,r){var n={},i=function(i){var s=e[i];return Array.isArray(s)?(s=s.map(function(e){var n=e;return t&&(n=function(r){return e.call(t,r,t)}),r&&(n=r(t.key,i,n)),n}),void(n[i]=s)):"continue"};for(var s in e){i(s)}return n}function c(e){for(var t in e)if(!d(t)){var r=e[t];"function"==typeof r&&(e[t]={enter:r})}}function f(e){e.enter&&!Array.isArray(e.enter)&&(e.enter=[e.enter]),e.exit&&!Array.isArray(e.exit)&&(e.exit=[e.exit])}function p(e,t){var r=function(r){if(e.checkPath(r))return t.apply(this,arguments)};return r.toString=function(){return t.toString()},r}function d(e){return"_"===e[0]||("enter"===e||"exit"===e||"shouldSkip"===e||("blacklist"===e||"noScope"===e||"skipKeys"===e))}function h(e,t){for(var r in t)e[r]=[].concat(e[r]||[],t[r])}t.__esModule=!0;var m=r(7),v=i(m),y=r(20),g=i(y),b=r(2),E=i(b);t.explode=s,t.verify=a,t.merge=u;var x=r(222),A=n(x),S=r(19),_=n(S),D=r(1),C=n(D),w=r(111),F=i(w)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.key||e.property;return e.computed||k.isIdentifier(t)&&(t=k.stringLiteral(t.name)),t}function a(e,t){function r(e){for(var s=!1,a=[],o=e,u=Array.isArray(o),l=0,o=u?o:(0,b.default)(o);;){var c;if(u){if(l>=o.length)break;c=o[l++]}else{if(l=o.next(),l.done)break;c=l.value}var f=c;if(k.isExpression(f))a.push(f);else if(k.isExpressionStatement(f))a.push(f.expression);else{if(k.isVariableDeclaration(f)){if("var"!==f.kind)return i=!0;for(var p=f.declarations,d=Array.isArray(p),h=0,p=d?p:(0,b.default)(p);;){var m;if(d){if(h>=p.length)break;m=p[h++]}else{if(h=p.next(),h.done)break;m=h.value}var v=m,y=k.getBindingIdentifiers(v);for(var g in y)n.push({kind:f.kind,id:y[g]});v.init&&a.push(k.assignmentExpression("=",v.id,v.init))}s=!0;continue}if(k.isIfStatement(f)){var E=f.consequent?r([f.consequent]):t.buildUndefinedNode(),x=f.alternate?r([f.alternate]):t.buildUndefinedNode();if(!E||!x)return i=!0;a.push(k.conditionalExpression(f.test,E,x))}else{if(!k.isBlockStatement(f)){if(k.isEmptyStatement(f)){s=!0;continue}return i=!0}a.push(r(f.body))}}s=!1}return(s||0===a.length)&&a.push(t.buildUndefinedNode()),1===a.length?a[0]:k.sequenceExpression(a)}if(e&&e.length){var n=[],i=!1,s=r(e);if(!i){for(var a=0;a<n.length;a++)t.push(n[a]);return s}}}function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.key,r=void 0;return"method"===e.kind?o.increment()+"":(r=k.isIdentifier(t)?t.name:k.isStringLiteral(t)?(0,y.default)(t.value):(0,y.default)(k.removePropertiesDeep(k.cloneDeep(t))),e.computed&&(r="["+r+"]"),e.static&&(r="static:"+r),r)}function u(e){return e+="",e=e.replace(/[^a-zA-Z0-9$_]/g,"-"),e=e.replace(/^[-0-9]+/,""),e=e.replace(/[-\s]+(.)?/g,function(e,t){return t?t.toUpperCase():""}),k.isValidIdentifier(e)||(e="_"+e),e||"_"}function l(e){return e=u(e),"eval"!==e&&"arguments"!==e||(e="_"+e),e}function c(e,t){if(k.isStatement(e))return e;var r=!1,n=void 0;if(k.isClass(e))r=!0,n="ClassDeclaration";else if(k.isFunction(e))r=!0,n="FunctionDeclaration";else if(k.isAssignmentExpression(e))return k.expressionStatement(e);if(r&&!e.id&&(n=!1),!n){if(t)return!1;throw new Error("cannot turn "+e.type+" to a statement")}return e.type=n,e}function f(e){if(k.isExpressionStatement(e)&&(e=e.expression),k.isExpression(e))return e;if(k.isClass(e)?e.type="ClassExpression":k.isFunction(e)&&(e.type="FunctionExpression"),!k.isExpression(e))throw new Error("cannot turn "+e.type+" to an expression");return e}function p(e,t){return k.isBlockStatement(e)?e:(k.isEmptyStatement(e)&&(e=[]),Array.isArray(e)||(k.isStatement(e)||(e=k.isFunction(t)?k.returnStatement(e):k.expressionStatement(e)),e=[e]),k.blockStatement(e))}function d(e){if(void 0===e)return k.identifier("undefined");if(e===!0||e===!1)return k.booleanLiteral(e);if(null===e)return k.nullLiteral();if((0,w.default)(e))return k.stringLiteral(e);if((0,S.default)(e))return k.numericLiteral(e);if((0,D.default)(e)){var t=e.source,r=e.toString().match(/\/([a-z]+|)$/)[1];return k.regExpLiteral(t,r)}if(Array.isArray(e))return k.arrayExpression(e.map(k.valueToNode));if((0,x.default)(e)){var n=[];for(var i in e){var s=void 0;s=k.isValidIdentifier(i)?k.identifier(i):k.stringLiteral(i),n.push(k.objectProperty(s,k.valueToNode(e[i])))}return k.objectExpression(n)}throw new Error("don't know how to turn this value into a node")}t.__esModule=!0;var h=r(352),m=i(h),v=r(34),y=i(v),g=r(2),b=i(g);t.toComputedKey=s,t.toSequenceExpression=a,t.toKeyAlias=o,t.toIdentifier=u,t.toBindingIdentifierName=l,t.toStatement=c,t.toExpression=f,t.toBlock=p,t.valueToNode=d;var E=r(273),x=i(E),A=r(272),S=i(A),_=r(274),D=i(_),C=r(176),w=i(C),F=r(1),k=n(F);o.uid=0,o.increment=function(){return o.uid>=m.default?o.uid=0:o.uid++}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}var s=r(1),a=i(s),o=r(135),u=r(28),l=n(u);(0,l.default)("ArrayExpression",{fields:{elements:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeOrValueType)("null","Expression","SpreadElement"))),default:[]}},visitor:["elements"],aliases:["Expression"]}),(0,l.default)("AssignmentExpression",{
+fields:{operator:{validate:(0,u.assertValueType)("string")},left:{validate:(0,u.assertNodeType)("LVal")},right:{validate:(0,u.assertNodeType)("Expression")}},builder:["operator","left","right"],visitor:["left","right"],aliases:["Expression"]}),(0,l.default)("BinaryExpression",{builder:["operator","left","right"],fields:{operator:{validate:u.assertOneOf.apply(void 0,o.BINARY_OPERATORS)},left:{validate:(0,u.assertNodeType)("Expression")},right:{validate:(0,u.assertNodeType)("Expression")}},visitor:["left","right"],aliases:["Binary","Expression"]}),(0,l.default)("Directive",{visitor:["value"],fields:{value:{validate:(0,u.assertNodeType)("DirectiveLiteral")}}}),(0,l.default)("DirectiveLiteral",{builder:["value"],fields:{value:{validate:(0,u.assertValueType)("string")}}}),(0,l.default)("BlockStatement",{builder:["body","directives"],visitor:["directives","body"],fields:{directives:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Directive"))),default:[]},body:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Statement")))}},aliases:["Scopable","BlockParent","Block","Statement"]}),(0,l.default)("BreakStatement",{visitor:["label"],fields:{label:{validate:(0,u.assertNodeType)("Identifier"),optional:!0}},aliases:["Statement","Terminatorless","CompletionStatement"]}),(0,l.default)("CallExpression",{visitor:["callee","arguments"],fields:{callee:{validate:(0,u.assertNodeType)("Expression")},arguments:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Expression","SpreadElement")))}},aliases:["Expression"]}),(0,l.default)("CatchClause",{visitor:["param","body"],fields:{param:{validate:(0,u.assertNodeType)("Identifier")},body:{validate:(0,u.assertNodeType)("BlockStatement")}},aliases:["Scopable"]}),(0,l.default)("ConditionalExpression",{visitor:["test","consequent","alternate"],fields:{test:{validate:(0,u.assertNodeType)("Expression")},consequent:{validate:(0,u.assertNodeType)("Expression")},alternate:{validate:(0,u.assertNodeType)("Expression")}},aliases:["Expression","Conditional"]}),(0,l.default)("ContinueStatement",{visitor:["label"],fields:{label:{validate:(0,u.assertNodeType)("Identifier"),optional:!0}},aliases:["Statement","Terminatorless","CompletionStatement"]}),(0,l.default)("DebuggerStatement",{aliases:["Statement"]}),(0,l.default)("DoWhileStatement",{visitor:["test","body"],fields:{test:{validate:(0,u.assertNodeType)("Expression")},body:{validate:(0,u.assertNodeType)("Statement")}},aliases:["Statement","BlockParent","Loop","While","Scopable"]}),(0,l.default)("EmptyStatement",{aliases:["Statement"]}),(0,l.default)("ExpressionStatement",{visitor:["expression"],fields:{expression:{validate:(0,u.assertNodeType)("Expression")}},aliases:["Statement","ExpressionWrapper"]}),(0,l.default)("File",{builder:["program","comments","tokens"],visitor:["program"],fields:{program:{validate:(0,u.assertNodeType)("Program")}}}),(0,l.default)("ForInStatement",{visitor:["left","right","body"],aliases:["Scopable","Statement","For","BlockParent","Loop","ForXStatement"],fields:{left:{validate:(0,u.assertNodeType)("VariableDeclaration","LVal")},right:{validate:(0,u.assertNodeType)("Expression")},body:{validate:(0,u.assertNodeType)("Statement")}}}),(0,l.default)("ForStatement",{visitor:["init","test","update","body"],aliases:["Scopable","Statement","For","BlockParent","Loop"],fields:{init:{validate:(0,u.assertNodeType)("VariableDeclaration","Expression"),optional:!0},test:{validate:(0,u.assertNodeType)("Expression"),optional:!0},update:{validate:(0,u.assertNodeType)("Expression"),optional:!0},body:{validate:(0,u.assertNodeType)("Statement")}}}),(0,l.default)("FunctionDeclaration",{builder:["id","params","body","generator","async"],visitor:["id","params","body","returnType","typeParameters"],fields:{id:{validate:(0,u.assertNodeType)("Identifier")},params:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("LVal")))},body:{validate:(0,u.assertNodeType)("BlockStatement")},generator:{default:!1,validate:(0,u.assertValueType)("boolean")},async:{default:!1,validate:(0,u.assertValueType)("boolean")}},aliases:["Scopable","Function","BlockParent","FunctionParent","Statement","Pureish","Declaration"]}),(0,l.default)("FunctionExpression",{inherits:"FunctionDeclaration",aliases:["Scopable","Function","BlockParent","FunctionParent","Expression","Pureish"],fields:{id:{validate:(0,u.assertNodeType)("Identifier"),optional:!0},params:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("LVal")))},body:{validate:(0,u.assertNodeType)("BlockStatement")},generator:{default:!1,validate:(0,u.assertValueType)("boolean")},async:{default:!1,validate:(0,u.assertValueType)("boolean")}}}),(0,l.default)("Identifier",{builder:["name"],visitor:["typeAnnotation"],aliases:["Expression","LVal"],fields:{name:{validate:function(e,t,r){!a.isValidIdentifier(r)}},decorators:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Decorator")))}}}),(0,l.default)("IfStatement",{visitor:["test","consequent","alternate"],aliases:["Statement","Conditional"],fields:{test:{validate:(0,u.assertNodeType)("Expression")},consequent:{validate:(0,u.assertNodeType)("Statement")},alternate:{optional:!0,validate:(0,u.assertNodeType)("Statement")}}}),(0,l.default)("LabeledStatement",{visitor:["label","body"],aliases:["Statement"],fields:{label:{validate:(0,u.assertNodeType)("Identifier")},body:{validate:(0,u.assertNodeType)("Statement")}}}),(0,l.default)("StringLiteral",{builder:["value"],fields:{value:{validate:(0,u.assertValueType)("string")}},aliases:["Expression","Pureish","Literal","Immutable"]}),(0,l.default)("NumericLiteral",{builder:["value"],deprecatedAlias:"NumberLiteral",fields:{value:{validate:(0,u.assertValueType)("number")}},aliases:["Expression","Pureish","Literal","Immutable"]}),(0,l.default)("NullLiteral",{aliases:["Expression","Pureish","Literal","Immutable"]}),(0,l.default)("BooleanLiteral",{builder:["value"],fields:{value:{validate:(0,u.assertValueType)("boolean")}},aliases:["Expression","Pureish","Literal","Immutable"]}),(0,l.default)("RegExpLiteral",{builder:["pattern","flags"],deprecatedAlias:"RegexLiteral",aliases:["Expression","Literal"],fields:{pattern:{validate:(0,u.assertValueType)("string")},flags:{validate:(0,u.assertValueType)("string"),default:""}}}),(0,l.default)("LogicalExpression",{builder:["operator","left","right"],visitor:["left","right"],aliases:["Binary","Expression"],fields:{operator:{validate:u.assertOneOf.apply(void 0,o.LOGICAL_OPERATORS)},left:{validate:(0,u.assertNodeType)("Expression")},right:{validate:(0,u.assertNodeType)("Expression")}}}),(0,l.default)("MemberExpression",{builder:["object","property","computed"],visitor:["object","property"],aliases:["Expression","LVal"],fields:{object:{validate:(0,u.assertNodeType)("Expression")},property:{validate:function(e,t,r){var n=e.computed?"Expression":"Identifier";(0,u.assertNodeType)(n)(e,t,r)}},computed:{default:!1}}}),(0,l.default)("NewExpression",{visitor:["callee","arguments"],aliases:["Expression"],fields:{callee:{validate:(0,u.assertNodeType)("Expression")},arguments:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Expression","SpreadElement")))}}}),(0,l.default)("Program",{visitor:["directives","body"],builder:["body","directives"],fields:{directives:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Directive"))),default:[]},body:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Statement")))}},aliases:["Scopable","BlockParent","Block","FunctionParent"]}),(0,l.default)("ObjectExpression",{visitor:["properties"],aliases:["Expression"],fields:{properties:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("ObjectMethod","ObjectProperty","SpreadProperty")))}}}),(0,l.default)("ObjectMethod",{builder:["kind","key","params","body","computed"],fields:{kind:{validate:(0,u.chain)((0,u.assertValueType)("string"),(0,u.assertOneOf)("method","get","set")),default:"method"},computed:{validate:(0,u.assertValueType)("boolean"),default:!1},key:{validate:function(e,t,r){var n=e.computed?["Expression"]:["Identifier","StringLiteral","NumericLiteral"];u.assertNodeType.apply(void 0,n)(e,t,r)}},decorators:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Decorator")))},body:{validate:(0,u.assertNodeType)("BlockStatement")},generator:{default:!1,validate:(0,u.assertValueType)("boolean")},async:{default:!1,validate:(0,u.assertValueType)("boolean")}},visitor:["key","params","body","decorators","returnType","typeParameters"],aliases:["UserWhitespacable","Function","Scopable","BlockParent","FunctionParent","Method","ObjectMember"]}),(0,l.default)("ObjectProperty",{builder:["key","value","computed","shorthand","decorators"],fields:{computed:{validate:(0,u.assertValueType)("boolean"),default:!1},key:{validate:function(e,t,r){var n=e.computed?["Expression"]:["Identifier","StringLiteral","NumericLiteral"];u.assertNodeType.apply(void 0,n)(e,t,r)}},value:{validate:(0,u.assertNodeType)("Expression")},shorthand:{validate:(0,u.assertValueType)("boolean"),default:!1},decorators:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Decorator"))),optional:!0}},visitor:["key","value","decorators"],aliases:["UserWhitespacable","Property","ObjectMember"]}),(0,l.default)("RestElement",{visitor:["argument","typeAnnotation"],aliases:["LVal"],fields:{argument:{validate:(0,u.assertNodeType)("LVal")},decorators:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Decorator")))}}}),(0,l.default)("ReturnStatement",{visitor:["argument"],aliases:["Statement","Terminatorless","CompletionStatement"],fields:{argument:{validate:(0,u.assertNodeType)("Expression"),optional:!0}}}),(0,l.default)("SequenceExpression",{visitor:["expressions"],fields:{expressions:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Expression")))}},aliases:["Expression"]}),(0,l.default)("SwitchCase",{visitor:["test","consequent"],fields:{test:{validate:(0,u.assertNodeType)("Expression"),optional:!0},consequent:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("Statement")))}}}),(0,l.default)("SwitchStatement",{visitor:["discriminant","cases"],aliases:["Statement","BlockParent","Scopable"],fields:{discriminant:{validate:(0,u.assertNodeType)("Expression")},cases:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("SwitchCase")))}}}),(0,l.default)("ThisExpression",{aliases:["Expression"]}),(0,l.default)("ThrowStatement",{visitor:["argument"],aliases:["Statement","Terminatorless","CompletionStatement"],fields:{argument:{validate:(0,u.assertNodeType)("Expression")}}}),(0,l.default)("TryStatement",{visitor:["block","handler","finalizer"],aliases:["Statement"],fields:{body:{validate:(0,u.assertNodeType)("BlockStatement")},handler:{optional:!0,handler:(0,u.assertNodeType)("BlockStatement")},finalizer:{optional:!0,validate:(0,u.assertNodeType)("BlockStatement")}}}),(0,l.default)("UnaryExpression",{builder:["operator","argument","prefix"],fields:{prefix:{default:!0},argument:{validate:(0,u.assertNodeType)("Expression")},operator:{validate:u.assertOneOf.apply(void 0,o.UNARY_OPERATORS)}},visitor:["argument"],aliases:["UnaryLike","Expression"]}),(0,l.default)("UpdateExpression",{builder:["operator","argument","prefix"],fields:{prefix:{default:!1},argument:{validate:(0,u.assertNodeType)("Expression")},operator:{validate:u.assertOneOf.apply(void 0,o.UPDATE_OPERATORS)}},visitor:["argument"],aliases:["Expression"]}),(0,l.default)("VariableDeclaration",{builder:["kind","declarations"],visitor:["declarations"],aliases:["Statement","Declaration"],fields:{kind:{validate:(0,u.chain)((0,u.assertValueType)("string"),(0,u.assertOneOf)("var","let","const"))},declarations:{validate:(0,u.chain)((0,u.assertValueType)("array"),(0,u.assertEach)((0,u.assertNodeType)("VariableDeclarator")))}}}),(0,l.default)("VariableDeclarator",{visitor:["id","init"],fields:{id:{validate:(0,u.assertNodeType)("LVal")},init:{optional:!0,validate:(0,u.assertNodeType)("Expression")}}}),(0,l.default)("WhileStatement",{visitor:["test","body"],aliases:["Statement","BlockParent","Loop","While","Scopable"],fields:{test:{validate:(0,u.assertNodeType)("Expression")},body:{validate:(0,u.assertNodeType)("BlockStatement","Statement")}}}),(0,l.default)("WithStatement",{visitor:["object","body"],aliases:["Statement"],fields:{object:{object:(0,u.assertNodeType)("Expression")},body:{validate:(0,u.assertNodeType)("BlockStatement","Statement")}}})},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var i=r(28),s=n(i);(0,s.default)("AssignmentPattern",{visitor:["left","right"],aliases:["Pattern","LVal"],fields:{left:{validate:(0,i.assertNodeType)("Identifier")},right:{validate:(0,i.assertNodeType)("Expression")},decorators:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("Decorator")))}}}),(0,s.default)("ArrayPattern",{visitor:["elements","typeAnnotation"],aliases:["Pattern","LVal"],fields:{elements:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("Expression")))},decorators:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("Decorator")))}}}),(0,s.default)("ArrowFunctionExpression",{builder:["params","body","async"],visitor:["params","body","returnType","typeParameters"],aliases:["Scopable","Function","BlockParent","FunctionParent","Expression","Pureish"],fields:{params:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("LVal")))},body:{validate:(0,i.assertNodeType)("BlockStatement","Expression")},async:{validate:(0,i.assertValueType)("boolean"),default:!1}}}),(0,s.default)("ClassBody",{visitor:["body"],fields:{body:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("ClassMethod","ClassProperty")))}}}),(0,s.default)("ClassDeclaration",{builder:["id","superClass","body","decorators"],visitor:["id","body","superClass","mixins","typeParameters","superTypeParameters","implements","decorators"],aliases:["Scopable","Class","Statement","Declaration","Pureish"],fields:{id:{validate:(0,i.assertNodeType)("Identifier")},body:{validate:(0,i.assertNodeType)("ClassBody")},superClass:{optional:!0,validate:(0,i.assertNodeType)("Expression")},decorators:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("Decorator")))}}}),(0,s.default)("ClassExpression",{inherits:"ClassDeclaration",aliases:["Scopable","Class","Expression","Pureish"],fields:{id:{optional:!0,validate:(0,i.assertNodeType)("Identifier")},body:{validate:(0,i.assertNodeType)("ClassBody")},superClass:{optional:!0,validate:(0,i.assertNodeType)("Expression")},decorators:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("Decorator")))}}}),(0,s.default)("ExportAllDeclaration",{visitor:["source"],aliases:["Statement","Declaration","ModuleDeclaration","ExportDeclaration"],fields:{source:{validate:(0,i.assertNodeType)("StringLiteral")}}}),(0,s.default)("ExportDefaultDeclaration",{visitor:["declaration"],aliases:["Statement","Declaration","ModuleDeclaration","ExportDeclaration"],fields:{declaration:{validate:(0,i.assertNodeType)("FunctionDeclaration","ClassDeclaration","Expression")}}}),(0,s.default)("ExportNamedDeclaration",{visitor:["declaration","specifiers","source"],aliases:["Statement","Declaration","ModuleDeclaration","ExportDeclaration"],fields:{declaration:{validate:(0,i.assertNodeType)("Declaration"),optional:!0},specifiers:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("ExportSpecifier")))},source:{validate:(0,i.assertNodeType)("StringLiteral"),optional:!0}}}),(0,s.default)("ExportSpecifier",{visitor:["local","exported"],aliases:["ModuleSpecifier"],fields:{local:{validate:(0,i.assertNodeType)("Identifier")},exported:{validate:(0,i.assertNodeType)("Identifier")}}}),(0,s.default)("ForOfStatement",{visitor:["left","right","body"],aliases:["Scopable","Statement","For","BlockParent","Loop","ForXStatement"],fields:{left:{validate:(0,i.assertNodeType)("VariableDeclaration","LVal")},right:{validate:(0,i.assertNodeType)("Expression")},body:{validate:(0,i.assertNodeType)("Statement")}}}),(0,s.default)("ImportDeclaration",{visitor:["specifiers","source"],aliases:["Statement","Declaration","ModuleDeclaration"],fields:{specifiers:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("ImportSpecifier","ImportDefaultSpecifier","ImportNamespaceSpecifier")))},source:{validate:(0,i.assertNodeType)("StringLiteral")}}}),(0,s.default)("ImportDefaultSpecifier",{visitor:["local"],aliases:["ModuleSpecifier"],fields:{local:{validate:(0,i.assertNodeType)("Identifier")}}}),(0,s.default)("ImportNamespaceSpecifier",{visitor:["local"],aliases:["ModuleSpecifier"],fields:{local:{validate:(0,i.assertNodeType)("Identifier")}}}),(0,s.default)("ImportSpecifier",{visitor:["local","imported"],aliases:["ModuleSpecifier"],fields:{local:{validate:(0,i.assertNodeType)("Identifier")},imported:{validate:(0,i.assertNodeType)("Identifier")}}}),(0,s.default)("MetaProperty",{visitor:["meta","property"],aliases:["Expression"],fields:{meta:{validate:(0,i.assertValueType)("string")},property:{validate:(0,i.assertValueType)("string")}}}),(0,s.default)("ClassMethod",{aliases:["Function","Scopable","BlockParent","FunctionParent","Method"],builder:["kind","key","params","body","computed","static"],visitor:["key","params","body","decorators","returnType","typeParameters"],fields:{kind:{validate:(0,i.chain)((0,i.assertValueType)("string"),(0,i.assertOneOf)("get","set","method","constructor")),default:"method"},computed:{default:!1,validate:(0,i.assertValueType)("boolean")},static:{default:!1,validate:(0,i.assertValueType)("boolean")},key:{validate:function(e,t,r){var n=e.computed?["Expression"]:["Identifier","StringLiteral","NumericLiteral"];i.assertNodeType.apply(void 0,n)(e,t,r)}},params:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("LVal")))},body:{validate:(0,i.assertNodeType)("BlockStatement")},generator:{default:!1,validate:(0,i.assertValueType)("boolean")},async:{default:!1,validate:(0,i.assertValueType)("boolean")}}}),(0,s.default)("ObjectPattern",{visitor:["properties","typeAnnotation"],aliases:["Pattern","LVal"],fields:{properties:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("RestProperty","Property")))},decorators:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("Decorator")))}}}),(0,s.default)("SpreadElement",{visitor:["argument"],aliases:["UnaryLike"],fields:{argument:{validate:(0,i.assertNodeType)("Expression")}}}),(0,s.default)("Super",{aliases:["Expression"]}),(0,s.default)("TaggedTemplateExpression",{visitor:["tag","quasi"],aliases:["Expression"],fields:{tag:{validate:(0,i.assertNodeType)("Expression")},quasi:{validate:(0,i.assertNodeType)("TemplateLiteral")}}}),(0,s.default)("TemplateElement",{builder:["value","tail"],fields:{value:{},tail:{validate:(0,i.assertValueType)("boolean"),default:!1}}}),(0,s.default)("TemplateLiteral",{visitor:["quasis","expressions"],aliases:["Expression","Literal"],fields:{quasis:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("TemplateElement")))},expressions:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("Expression")))}}}),(0,s.default)("YieldExpression",{builder:["argument","delegate"],visitor:["argument"],aliases:["Expression","Terminatorless"],fields:{delegate:{validate:(0,i.assertValueType)("boolean"),default:!1},argument:{optional:!0,validate:(0,i.assertNodeType)("Expression")}}})},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var i=r(28),s=n(i);(0,s.default)("AwaitExpression",{builder:["argument"],visitor:["argument"],aliases:["Expression","Terminatorless"],fields:{argument:{validate:(0,i.assertNodeType)("Expression")}}}),(0,s.default)("ForAwaitStatement",{visitor:["left","right","body"],aliases:["Scopable","Statement","For","BlockParent","Loop","ForXStatement"],fields:{left:{validate:(0,i.assertNodeType)("VariableDeclaration","LVal")},right:{validate:(0,i.assertNodeType)("Expression")},body:{validate:(0,i.assertNodeType)("Statement")}}}),(0,s.default)("BindExpression",{visitor:["object","callee"],aliases:["Expression"],fields:{}}),(0,s.default)("Import",{aliases:["Expression"]}),(0,s.default)("Decorator",{visitor:["expression"],fields:{expression:{validate:(0,i.assertNodeType)("Expression")}}}),(0,s.default)("DoExpression",{visitor:["body"],aliases:["Expression"],fields:{body:{validate:(0,i.assertNodeType)("BlockStatement")}}}),(0,s.default)("ExportDefaultSpecifier",{visitor:["exported"],aliases:["ModuleSpecifier"],fields:{exported:{validate:(0,i.assertNodeType)("Identifier")}}}),(0,s.default)("ExportNamespaceSpecifier",{visitor:["exported"],aliases:["ModuleSpecifier"],fields:{exported:{validate:(0,i.assertNodeType)("Identifier")}}}),(0,s.default)("RestProperty",{visitor:["argument"],aliases:["UnaryLike"],fields:{argument:{validate:(0,i.assertNodeType)("LVal")}}}),(0,s.default)("SpreadProperty",{visitor:["argument"],aliases:["UnaryLike"],fields:{argument:{validate:(0,i.assertNodeType)("Expression")}}})},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var i=r(28),s=n(i);(0,s.default)("AnyTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"],fields:{}}),(0,s.default)("ArrayTypeAnnotation",{visitor:["elementType"],aliases:["Flow"],fields:{}}),(0,s.default)("BooleanTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"],fields:{}}),(0,s.default)("BooleanLiteralTypeAnnotation",{aliases:["Flow"],fields:{}}),(0,s.default)("NullLiteralTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"],fields:{}}),(0,s.default)("ClassImplements",{visitor:["id","typeParameters"],aliases:["Flow"],fields:{}}),(0,s.default)("ClassProperty",{visitor:["key","value","typeAnnotation","decorators"],builder:["key","value","typeAnnotation","decorators","computed"],aliases:["Property"],fields:{computed:{validate:(0,i.assertValueType)("boolean"),default:!1}}}),(0,s.default)("DeclareClass",{visitor:["id","typeParameters","extends","body"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("DeclareFunction",{visitor:["id"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("DeclareInterface",{visitor:["id","typeParameters","extends","body"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("DeclareModule",{visitor:["id","body"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("DeclareModuleExports",{visitor:["typeAnnotation"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("DeclareTypeAlias",{visitor:["id","typeParameters","right"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("DeclareVariable",{visitor:["id"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("ExistentialTypeParam",{aliases:["Flow"]}),(0,s.default)("FunctionTypeAnnotation",{visitor:["typeParameters","params","rest","returnType"],aliases:["Flow"],fields:{}}),(0,s.default)("FunctionTypeParam",{visitor:["name","typeAnnotation"],aliases:["Flow"],fields:{}}),(0,s.default)("GenericTypeAnnotation",{visitor:["id","typeParameters"],aliases:["Flow"],fields:{}}),(0,s.default)("InterfaceExtends",{visitor:["id","typeParameters"],aliases:["Flow"],fields:{}}),(0,s.default)("InterfaceDeclaration",{visitor:["id","typeParameters","extends","body"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("IntersectionTypeAnnotation",{visitor:["types"],aliases:["Flow"],fields:{}}),(0,s.default)("MixedTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"]}),(0,s.default)("EmptyTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"]}),(0,s.default)("NullableTypeAnnotation",{visitor:["typeAnnotation"],aliases:["Flow"],fields:{}}),(0,s.default)("NumericLiteralTypeAnnotation",{aliases:["Flow"],fields:{}}),(0,s.default)("NumberTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"],fields:{}}),(0,s.default)("StringLiteralTypeAnnotation",{aliases:["Flow"],fields:{}}),(0,s.default)("StringTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"],fields:{}}),(0,s.default)("ThisTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"],fields:{}}),(0,s.default)("TupleTypeAnnotation",{visitor:["types"],aliases:["Flow"],fields:{}}),(0,s.default)("TypeofTypeAnnotation",{visitor:["argument"],aliases:["Flow"],fields:{}}),(0,s.default)("TypeAlias",{visitor:["id","typeParameters","right"],aliases:["Flow","FlowDeclaration","Statement","Declaration"],fields:{}}),(0,s.default)("TypeAnnotation",{visitor:["typeAnnotation"],aliases:["Flow"],fields:{}}),(0,s.default)("TypeCastExpression",{visitor:["expression","typeAnnotation"],aliases:["Flow","ExpressionWrapper","Expression"],fields:{}}),(0,s.default)("TypeParameter",{visitor:["bound"],aliases:["Flow"],fields:{}}),(0,s.default)("TypeParameterDeclaration",{visitor:["params"],aliases:["Flow"],fields:{}}),(0,s.default)("TypeParameterInstantiation",{visitor:["params"],aliases:["Flow"],fields:{}}),(0,s.default)("ObjectTypeAnnotation",{visitor:["properties","indexers","callProperties"],aliases:["Flow"],fields:{}}),(0,s.default)("ObjectTypeCallProperty",{visitor:["value"],aliases:["Flow","UserWhitespacable"],fields:{}}),(0,s.default)("ObjectTypeIndexer",{visitor:["id","key","value"],aliases:["Flow","UserWhitespacable"],fields:{}}),(0,s.default)("ObjectTypeProperty",{visitor:["key","value"],aliases:["Flow","UserWhitespacable"],fields:{}}),(0,s.default)("QualifiedTypeIdentifier",{visitor:["id","qualification"],aliases:["Flow"],fields:{}}),(0,s.default)("UnionTypeAnnotation",{visitor:["types"],aliases:["Flow"],fields:{}}),(0,s.default)("VoidTypeAnnotation",{aliases:["Flow","FlowBaseAnnotation"],fields:{}})},function(e,t,r){"use strict";r(28),r(379),r(380),r(382),r(384),r(385),r(381)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var i=r(28),s=n(i);(0,s.default)("JSXAttribute",{visitor:["name","value"],aliases:["JSX","Immutable"],fields:{name:{validate:(0,i.assertNodeType)("JSXIdentifier","JSXNamespacedName")},value:{optional:!0,validate:(0,i.assertNodeType)("JSXElement","StringLiteral","JSXExpressionContainer")}}}),(0,s.default)("JSXClosingElement",{visitor:["name"],aliases:["JSX","Immutable"],fields:{name:{validate:(0,i.assertNodeType)("JSXIdentifier","JSXMemberExpression")}}}),(0,s.default)("JSXElement",{builder:["openingElement","closingElement","children","selfClosing"],visitor:["openingElement","children","closingElement"],aliases:["JSX","Immutable","Expression"],fields:{openingElement:{validate:(0,i.assertNodeType)("JSXOpeningElement")},closingElement:{optional:!0,validate:(0,i.assertNodeType)("JSXClosingElement")},children:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("JSXText","JSXExpressionContainer","JSXSpreadChild","JSXElement")))}}}),(0,s.default)("JSXEmptyExpression",{aliases:["JSX","Expression"]}),(0,s.default)("JSXExpressionContainer",{visitor:["expression"],aliases:["JSX","Immutable"],fields:{expression:{validate:(0,i.assertNodeType)("Expression")}}}),(0,s.default)("JSXSpreadChild",{visitor:["expression"],aliases:["JSX","Immutable"],fields:{expression:{validate:(0,i.assertNodeType)("Expression")}}}),(0,s.default)("JSXIdentifier",{builder:["name"],aliases:["JSX","Expression"],fields:{name:{validate:(0,i.assertValueType)("string")}}}),(0,s.default)("JSXMemberExpression",{visitor:["object","property"],aliases:["JSX","Expression"],fields:{object:{validate:(0,i.assertNodeType)("JSXMemberExpression","JSXIdentifier")},property:{validate:(0,i.assertNodeType)("JSXIdentifier")}}}),(0,s.default)("JSXNamespacedName",{visitor:["namespace","name"],aliases:["JSX"],fields:{namespace:{validate:(0,i.assertNodeType)("JSXIdentifier")},name:{validate:(0,i.assertNodeType)("JSXIdentifier")}}}),(0,s.default)("JSXOpeningElement",{builder:["name","attributes","selfClosing"],visitor:["name","attributes"],aliases:["JSX","Immutable"],fields:{name:{validate:(0,i.assertNodeType)("JSXIdentifier","JSXMemberExpression")},selfClosing:{default:!1,validate:(0,i.assertValueType)("boolean")},attributes:{validate:(0,i.chain)((0,i.assertValueType)("array"),(0,i.assertEach)((0,i.assertNodeType)("JSXAttribute","JSXSpreadAttribute")))}}}),(0,s.default)("JSXSpreadAttribute",{visitor:["argument"],aliases:["JSX"],fields:{argument:{validate:(0,i.assertNodeType)("Expression")}}}),(0,s.default)("JSXText",{aliases:["JSX","Immutable"],builder:["value"],fields:{value:{validate:(0,i.assertValueType)("string")}}})},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var i=r(28),s=n(i);(0,s.default)("Noop",{visitor:[]}),(0,s.default)("ParenthesizedExpression",{visitor:["expression"],aliases:["Expression","ExpressionWrapper"],fields:{expression:{validate:(0,i.assertNodeType)("Expression")}}})},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){var t=s(e);return 1===t.length?t[0]:u.unionTypeAnnotation(t)}function s(e){for(var t={},r={},n=[],i=[],a=0;a<e.length;a++){var o=e[a];if(o&&!(i.indexOf(o)>=0)){if(u.isAnyTypeAnnotation(o))return[o];if(u.isFlowBaseAnnotation(o))r[o.type]=o;else if(u.isUnionTypeAnnotation(o))n.indexOf(o.types)<0&&(e=e.concat(o.types),n.push(o.types));else if(u.isGenericTypeAnnotation(o)){var l=o.id.name;if(t[l]){var c=t[l];c.typeParameters?o.typeParameters&&(c.typeParameters.params=s(c.typeParameters.params.concat(o.typeParameters.params))):c=o.typeParameters}else t[l]=o}else i.push(o)}}for(var f in r)i.push(r[f]);for(var p in t)i.push(t[p]);return i}function a(e){if("string"===e)return u.stringTypeAnnotation();if("number"===e)return u.numberTypeAnnotation();if("undefined"===e)return u.voidTypeAnnotation();if("boolean"===e)return u.booleanTypeAnnotation();if("function"===e)return u.genericTypeAnnotation(u.identifier("Function"));if("object"===e)return u.genericTypeAnnotation(u.identifier("Object"));if("symbol"===e)return u.genericTypeAnnotation(u.identifier("Symbol"));throw new Error("Invalid typeof value")}t.__esModule=!0,t.createUnionTypeAnnotation=i,t.removeTypeDuplicates=s,t.createTypeAnnotationBasedOnTypeof=a;var o=r(1),u=n(o)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return!!e&&/^[a-z]|\-/.test(e)}function s(e,t){for(var r=e.value.split(/\r\n|\n|\r/),n=0,i=0;i<r.length;i++)r[i].match(/[^ \t]/)&&(n=i);for(var s="",a=0;a<r.length;a++){var o=r[a],l=0===a,c=a===r.length-1,f=a===n,p=o.replace(/\t/g," ");l||(p=p.replace(/^[ ]+/,"")),c||(p=p.replace(/[ ]+$/,"")),p&&(f||(p+=" "),s+=p)}s&&t.push(u.stringLiteral(s))}function a(e){for(var t=[],r=0;r<e.children.length;r++){var n=e.children[r];u.isJSXText(n)?s(n,t):(u.isJSXExpressionContainer(n)&&(n=n.expression),u.isJSXEmptyExpression(n)||t.push(n))}return t}t.__esModule=!0,t.isReactComponent=void 0,t.isCompatTag=i,t.buildChildren=a;var o=r(1),u=n(o);t.isReactComponent=u.buildMatchMemberExpression("React.Component")},function(e,t,r){"use strict";
+function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){var r=x.getBindingIdentifiers.keys[t.type];if(r)for(var n=0;n<r.length;n++){var i=r[n],s=t[i];if(Array.isArray(s)){if(s.indexOf(e)>=0)return!0}else if(s===e)return!0}return!1}function a(e,t){switch(t.type){case"BindExpression":return t.object===e||t.callee===e;case"MemberExpression":case"JSXMemberExpression":return!(t.property!==e||!t.computed)||t.object===e;case"MetaProperty":return!1;case"ObjectProperty":if(t.key===e)return t.computed;case"VariableDeclarator":return t.id!==e;case"ArrowFunctionExpression":case"FunctionDeclaration":case"FunctionExpression":for(var r=t.params,n=Array.isArray(r),i=0,r=n?r:(0,E.default)(r);;){var s;if(n){if(i>=r.length)break;s=r[i++]}else{if(i=r.next(),i.done)break;s=i.value}var a=s;if(a===e)return!1}return t.id!==e;case"ExportSpecifier":return!t.source&&t.local===e;case"ExportNamespaceSpecifier":case"ExportDefaultSpecifier":return!1;case"JSXAttribute":return t.name!==e;case"ClassProperty":return t.key===e?t.computed:t.value===e;case"ImportDefaultSpecifier":case"ImportNamespaceSpecifier":case"ImportSpecifier":return!1;case"ClassDeclaration":case"ClassExpression":return t.id!==e;case"ClassMethod":case"ObjectMethod":return t.key===e&&t.computed;case"LabeledStatement":return!1;case"CatchClause":return t.param!==e;case"RestElement":return!1;case"AssignmentExpression":return t.right===e;case"AssignmentPattern":return t.right===e;case"ObjectPattern":case"ArrayPattern":return!1}return!0}function o(e){return"string"==typeof e&&!S.default.keyword.isReservedWordES6(e,!0)&&S.default.keyword.isIdentifierNameES6(e)}function u(e){return D.isVariableDeclaration(e)&&("var"!==e.kind||e[C.BLOCK_SCOPED_SYMBOL])}function l(e){return D.isFunctionDeclaration(e)||D.isClassDeclaration(e)||D.isLet(e)}function c(e){return D.isVariableDeclaration(e,{kind:"var"})&&!e[C.BLOCK_SCOPED_SYMBOL]}function f(e){return D.isImportDefaultSpecifier(e)||D.isIdentifier(e.imported||e.exported,{name:"default"})}function p(e,t){return(!D.isBlockStatement(e)||!D.isFunction(t,{body:e}))&&D.isScopable(e)}function d(e){return!!D.isType(e.type,"Immutable")||!!D.isIdentifier(e)&&"undefined"===e.name}function h(e,t){if("object"!==("undefined"==typeof e?"undefined":(0,g.default)(e))||"object"!==("undefined"==typeof e?"undefined":(0,g.default)(e))||null==e||null==t)return e===t;if(e.type!==t.type)return!1;for(var r=(0,v.default)(D.NODE_FIELDS[e.type]||e.type),n=r,i=Array.isArray(n),s=0,n=i?n:(0,E.default)(n);;){var a;if(i){if(s>=n.length)break;a=n[s++]}else{if(s=n.next(),s.done)break;a=s.value}var o=a;if((0,g.default)(e[o])!==(0,g.default)(t[o]))return!1;if(Array.isArray(e[o])){if(!Array.isArray(t[o]))return!1;if(e[o].length!==t[o].length)return!1;for(var u=0;u<e[o].length;u++)if(!h(e[o][u],t[o][u]))return!1}else if(!h(e[o],t[o]))return!1}return!0}t.__esModule=!0;var m=r(20),v=i(m),y=r(7),g=i(y),b=r(2),E=i(b);t.isBinding=s,t.isReferenced=a,t.isValidIdentifier=o,t.isLet=u,t.isBlockScoped=l,t.isVar=c,t.isSpecifierDefault=f,t.isScope=p,t.isImmutable=d,t.isNodesEquivalent=h;var x=r(224),A=r(157),S=i(A),_=r(1),D=n(_),C=r(135)},function(e,t){"use strict";function r(e,t,r){e instanceof RegExp&&(e=n(e,r)),t instanceof RegExp&&(t=n(t,r));var s=i(e,t,r);return s&&{start:s[0],end:s[1],pre:r.slice(0,s[0]),body:r.slice(s[0]+e.length,s[1]),post:r.slice(s[1]+t.length)}}function n(e,t){var r=t.match(e);return r?r[0]:null}function i(e,t,r){var n,i,s,a,o,u=r.indexOf(e),l=r.indexOf(t,u+1),c=u;if(u>=0&&l>0){for(n=[],s=r.length;c>=0&&!o;)c==u?(n.push(c),u=r.indexOf(e,c+1)):1==n.length?o=[n.pop(),l]:(i=n.pop(),i<s&&(s=i,a=l),l=r.indexOf(t,c+1)),c=u<l&&u>=0?u:l;n.length&&(o=[s,a])}return o}e.exports=r,r.range=i},function(e,t){"use strict";function r(e){var t=e.length;if(t%4>0)throw new Error("Invalid string. Length must be a multiple of 4");return"="===e[t-2]?2:"="===e[t-1]?1:0}function n(e){return 3*e.length/4-r(e)}function i(e){var t,n,i,s,a,o,u=e.length;a=r(e),o=new c(3*u/4-a),i=a>0?u-4:u;var f=0;for(t=0,n=0;t<i;t+=4,n+=3)s=l[e.charCodeAt(t)]<<18|l[e.charCodeAt(t+1)]<<12|l[e.charCodeAt(t+2)]<<6|l[e.charCodeAt(t+3)],o[f++]=s>>16&255,o[f++]=s>>8&255,o[f++]=255&s;return 2===a?(s=l[e.charCodeAt(t)]<<2|l[e.charCodeAt(t+1)]>>4,o[f++]=255&s):1===a&&(s=l[e.charCodeAt(t)]<<10|l[e.charCodeAt(t+1)]<<4|l[e.charCodeAt(t+2)]>>2,o[f++]=s>>8&255,o[f++]=255&s),o}function s(e){return u[e>>18&63]+u[e>>12&63]+u[e>>6&63]+u[63&e]}function a(e,t,r){for(var n,i=[],a=t;a<r;a+=3)n=(e[a]<<16)+(e[a+1]<<8)+e[a+2],i.push(s(n));return i.join("")}function o(e){for(var t,r=e.length,n=r%3,i="",s=[],o=16383,l=0,c=r-n;l<c;l+=o)s.push(a(e,l,l+o>c?c:l+o));return 1===n?(t=e[r-1],i+=u[t>>2],i+=u[t<<4&63],i+="=="):2===n&&(t=(e[r-2]<<8)+e[r-1],i+=u[t>>10],i+=u[t>>4&63],i+=u[t<<2&63],i+="="),s.push(i),s.join("")}t.byteLength=n,t.toByteArray=i,t.fromByteArray=o;for(var u=[],l=[],c="undefined"!=typeof Uint8Array?Uint8Array:Array,f="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",p=0,d=f.length;p<d;++p)u[p]=f[p],l[f.charCodeAt(p)]=p;l["-".charCodeAt(0)]=62,l["_".charCodeAt(0)]=63},function(e,t,r){"use strict";function n(e){return parseInt(e,10)==e?parseInt(e,10):e.charCodeAt(0)}function i(e){return e.split("\\\\").join(m).split("\\{").join(v).split("\\}").join(y).split("\\,").join(g).split("\\.").join(b)}function s(e){return e.split(m).join("\\").split(v).join("{").split(y).join("}").split(g).join(",").split(b).join(".")}function a(e){if(!e)return[""];var t=[],r=h("{","}",e);if(!r)return e.split(",");var n=r.pre,i=r.body,s=r.post,o=n.split(",");o[o.length-1]+="{"+i+"}";var u=a(s);return s.length&&(o[o.length-1]+=u.shift(),o.push.apply(o,u)),t.push.apply(t,o),t}function o(e){return e?("{}"===e.substr(0,2)&&(e="\\{\\}"+e.substr(2)),p(i(e),!0).map(s)):[]}function u(e){return"{"+e+"}"}function l(e){return/^-?0\d/.test(e)}function c(e,t){return e<=t}function f(e,t){return e>=t}function p(e,t){var r=[],i=h("{","}",e);if(!i||/\$$/.test(i.pre))return[e];var s=/^-?\d+\.\.-?\d+(?:\.\.-?\d+)?$/.test(i.body),o=/^[a-zA-Z]\.\.[a-zA-Z](?:\.\.-?\d+)?$/.test(i.body),m=s||o,v=/^(.*,)+(.+)?$/.test(i.body);if(!m&&!v)return i.post.match(/,.*\}/)?(e=i.pre+"{"+i.body+y+i.post,p(e)):[e];var g;if(m)g=i.body.split(/\.\./);else if(g=a(i.body),1===g.length&&(g=p(g[0],!1).map(u),1===g.length)){var b=i.post.length?p(i.post,!1):[""];return b.map(function(e){return i.pre+g[0]+e})}var E,x=i.pre,b=i.post.length?p(i.post,!1):[""];if(m){var A=n(g[0]),S=n(g[1]),_=Math.max(g[0].length,g[1].length),D=3==g.length?Math.abs(n(g[2])):1,C=c,w=S<A;w&&(D*=-1,C=f);var F=g.some(l);E=[];for(var k=A;C(k,S);k+=D){var P;if(o)P=String.fromCharCode(k),"\\"===P&&(P="");else if(P=String(k),F){var T=_-P.length;if(T>0){var O=new Array(T+1).join("0");P=k<0?"-"+O+P.slice(1):O+P}}E.push(P)}}else E=d(g,function(e){return p(e,!1)});for(var B=0;B<E.length;B++)for(var R=0;R<b.length;R++){var I=x+E[B]+b[R];(!t||m||I)&&r.push(I)}return r}var d=r(395),h=r(389);e.exports=o;var m="\0SLASH"+Math.random()+"\0",v="\0OPEN"+Math.random()+"\0",y="\0CLOSE"+Math.random()+"\0",g="\0COMMA"+Math.random()+"\0",b="\0PERIOD"+Math.random()+"\0"},function(e,t,r){(function(e){"use strict";function n(){try{var e=new Uint8Array(1);return e.__proto__={__proto__:Uint8Array.prototype,foo:function(){return 42}},42===e.foo()&&"function"==typeof e.subarray&&0===e.subarray(1,1).byteLength}catch(e){return!1}}function i(){return a.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function s(e,t){if(i()<t)throw new RangeError("Invalid typed array length");return a.TYPED_ARRAY_SUPPORT?(e=new Uint8Array(t),e.__proto__=a.prototype):(null===e&&(e=new a(t)),e.length=t),e}function a(e,t,r){if(!(a.TYPED_ARRAY_SUPPORT||this instanceof a))return new a(e,t,r);if("number"==typeof e){if("string"==typeof t)throw new Error("If encoding is specified then the first argument must be a string");return c(this,e)}return o(this,e,t,r)}function o(e,t,r,n){if("number"==typeof t)throw new TypeError('"value" argument must not be a number');return"undefined"!=typeof ArrayBuffer&&t instanceof ArrayBuffer?d(e,t,r,n):"string"==typeof t?f(e,t,r):h(e,t)}function u(e){if("number"!=typeof e)throw new TypeError('"size" argument must be a number');if(e<0)throw new RangeError('"size" argument must not be negative')}function l(e,t,r,n){return u(t),t<=0?s(e,t):void 0!==r?"string"==typeof n?s(e,t).fill(r,n):s(e,t).fill(r):s(e,t)}function c(e,t){if(u(t),e=s(e,t<0?0:0|m(t)),!a.TYPED_ARRAY_SUPPORT)for(var r=0;r<t;++r)e[r]=0;return e}function f(e,t,r){if("string"==typeof r&&""!==r||(r="utf8"),!a.isEncoding(r))throw new TypeError('"encoding" must be a valid string encoding');var n=0|y(t,r);e=s(e,n);var i=e.write(t,r);return i!==n&&(e=e.slice(0,i)),e}function p(e,t){var r=t.length<0?0:0|m(t.length);e=s(e,r);for(var n=0;n<r;n+=1)e[n]=255&t[n];return e}function d(e,t,r,n){if(t.byteLength,r<0||t.byteLength<r)throw new RangeError("'offset' is out of bounds");if(t.byteLength<r+(n||0))throw new RangeError("'length' is out of bounds");return t=void 0===r&&void 0===n?new Uint8Array(t):void 0===n?new Uint8Array(t,r):new Uint8Array(t,r,n),a.TYPED_ARRAY_SUPPORT?(e=t,e.__proto__=a.prototype):e=p(e,t),e}function h(e,t){if(a.isBuffer(t)){var r=0|m(t.length);return e=s(e,r),0===e.length?e:(t.copy(e,0,0,r),e)}if(t){if("undefined"!=typeof ArrayBuffer&&t.buffer instanceof ArrayBuffer||"length"in t)return"number"!=typeof t.length||z(t.length)?s(e,0):p(e,t);if("Buffer"===t.type&&Z(t.data))return p(e,t.data)}throw new TypeError("First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.")}function m(e){if(e>=i())throw new RangeError("Attempt to allocate Buffer larger than maximum size: 0x"+i().toString(16)+" bytes");return 0|e}function v(e){return+e!=e&&(e=0),a.alloc(+e)}function y(e,t){if(a.isBuffer(e))return e.length;if("undefined"!=typeof ArrayBuffer&&"function"==typeof ArrayBuffer.isView&&(ArrayBuffer.isView(e)||e instanceof ArrayBuffer))return e.byteLength;"string"!=typeof e&&(e=""+e);var r=e.length;if(0===r)return 0;for(var n=!1;;)switch(t){case"ascii":case"latin1":case"binary":return r;case"utf8":case"utf-8":case void 0:return q(e).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*r;case"hex":return r>>>1;case"base64":return J(e).length;default:if(n)return q(e).length;t=(""+t).toLowerCase(),n=!0}}function g(e,t,r){var n=!1;if((void 0===t||t<0)&&(t=0),t>this.length)return"";if((void 0===r||r>this.length)&&(r=this.length),r<=0)return"";if(r>>>=0,t>>>=0,r<=t)return"";for(e||(e="utf8");;)switch(e){case"hex":return B(this,t,r);case"utf8":case"utf-8":return k(this,t,r);case"ascii":return T(this,t,r);case"latin1":case"binary":return O(this,t,r);case"base64":return F(this,t,r);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return R(this,t,r);default:if(n)throw new TypeError("Unknown encoding: "+e);e=(e+"").toLowerCase(),n=!0}}function b(e,t,r){var n=e[t];e[t]=e[r],e[r]=n}function E(e,t,r,n,i){if(0===e.length)return-1;if("string"==typeof r?(n=r,r=0):r>2147483647?r=2147483647:r<-2147483648&&(r=-2147483648),r=+r,isNaN(r)&&(r=i?0:e.length-1),r<0&&(r=e.length+r),r>=e.length){if(i)return-1;r=e.length-1}else if(r<0){if(!i)return-1;r=0}if("string"==typeof t&&(t=a.from(t,n)),a.isBuffer(t))return 0===t.length?-1:x(e,t,r,n,i);if("number"==typeof t)return t=255&t,a.TYPED_ARRAY_SUPPORT&&"function"==typeof Uint8Array.prototype.indexOf?i?Uint8Array.prototype.indexOf.call(e,t,r):Uint8Array.prototype.lastIndexOf.call(e,t,r):x(e,[t],r,n,i);throw new TypeError("val must be string, number or Buffer")}function x(e,t,r,n,i){function s(e,t){return 1===a?e[t]:e.readUInt16BE(t*a)}var a=1,o=e.length,u=t.length;if(void 0!==n&&(n=String(n).toLowerCase(),"ucs2"===n||"ucs-2"===n||"utf16le"===n||"utf-16le"===n)){if(e.length<2||t.length<2)return-1;a=2,o/=2,u/=2,r/=2}var l;if(i){var c=-1;for(l=r;l<o;l++)if(s(e,l)===s(t,c===-1?0:l-c)){if(c===-1&&(c=l),l-c+1===u)return c*a}else c!==-1&&(l-=l-c),c=-1}else for(r+u>o&&(r=o-u),l=r;l>=0;l--){for(var f=!0,p=0;p<u;p++)if(s(e,l+p)!==s(t,p)){f=!1;break}if(f)return l}return-1}function A(e,t,r,n){r=Number(r)||0;var i=e.length-r;n?(n=Number(n),n>i&&(n=i)):n=i;var s=t.length;if(s%2!==0)throw new TypeError("Invalid hex string");n>s/2&&(n=s/2);for(var a=0;a<n;++a){var o=parseInt(t.substr(2*a,2),16);if(isNaN(o))return a;e[r+a]=o}return a}function S(e,t,r,n){return X(q(t,e.length-r),e,r,n)}function _(e,t,r,n){return X(K(t),e,r,n)}function D(e,t,r,n){return _(e,t,r,n)}function C(e,t,r,n){return X(J(t),e,r,n)}function w(e,t,r,n){return X(H(t,e.length-r),e,r,n)}function F(e,t,r){return 0===t&&r===e.length?$.fromByteArray(e):$.fromByteArray(e.slice(t,r))}function k(e,t,r){r=Math.min(e.length,r);for(var n=[],i=t;i<r;){var s=e[i],a=null,o=s>239?4:s>223?3:s>191?2:1;if(i+o<=r){var u,l,c,f;switch(o){case 1:s<128&&(a=s);break;case 2:u=e[i+1],128===(192&u)&&(f=(31&s)<<6|63&u,f>127&&(a=f));break;case 3:u=e[i+1],l=e[i+2],128===(192&u)&&128===(192&l)&&(f=(15&s)<<12|(63&u)<<6|63&l,f>2047&&(f<55296||f>57343)&&(a=f));break;case 4:u=e[i+1],l=e[i+2],c=e[i+3],128===(192&u)&&128===(192&l)&&128===(192&c)&&(f=(15&s)<<18|(63&u)<<12|(63&l)<<6|63&c,f>65535&&f<1114112&&(a=f))}}null===a?(a=65533,o=1):a>65535&&(a-=65536,n.push(a>>>10&1023|55296),a=56320|1023&a),n.push(a),i+=o}return P(n)}function P(e){var t=e.length;if(t<=ee)return String.fromCharCode.apply(String,e);for(var r="",n=0;n<t;)r+=String.fromCharCode.apply(String,e.slice(n,n+=ee));return r}function T(e,t,r){var n="";r=Math.min(e.length,r);for(var i=t;i<r;++i)n+=String.fromCharCode(127&e[i]);return n}function O(e,t,r){var n="";r=Math.min(e.length,r);for(var i=t;i<r;++i)n+=String.fromCharCode(e[i]);return n}function B(e,t,r){var n=e.length;(!t||t<0)&&(t=0),(!r||r<0||r>n)&&(r=n);for(var i="",s=t;s<r;++s)i+=Y(e[s]);return i}function R(e,t,r){for(var n=e.slice(t,r),i="",s=0;s<n.length;s+=2)i+=String.fromCharCode(n[s]+256*n[s+1]);return i}function I(e,t,r){if(e%1!==0||e<0)throw new RangeError("offset is not uint");if(e+t>r)throw new RangeError("Trying to access beyond buffer length")}function M(e,t,r,n,i,s){if(!a.isBuffer(e))throw new TypeError('"buffer" argument must be a Buffer instance');if(t>i||t<s)throw new RangeError('"value" argument is out of bounds');if(r+n>e.length)throw new RangeError("Index out of range")}function N(e,t,r,n){t<0&&(t=65535+t+1);for(var i=0,s=Math.min(e.length-r,2);i<s;++i)e[r+i]=(t&255<<8*(n?i:1-i))>>>8*(n?i:1-i)}function L(e,t,r,n){t<0&&(t=4294967295+t+1);for(var i=0,s=Math.min(e.length-r,4);i<s;++i)e[r+i]=t>>>8*(n?i:3-i)&255}function j(e,t,r,n,i,s){if(r+n>e.length)throw new RangeError("Index out of range");if(r<0)throw new RangeError("Index out of range")}function U(e,t,r,n,i){return i||j(e,t,r,4,3.4028234663852886e38,-3.4028234663852886e38),Q.write(e,t,r,n,23,4),r+4}function V(e,t,r,n,i){return i||j(e,t,r,8,1.7976931348623157e308,-1.7976931348623157e308),Q.write(e,t,r,n,52,8),r+8}function G(e){if(e=W(e).replace(te,""),e.length<2)return"";for(;e.length%4!==0;)e+="=";return e}function W(e){return e.trim?e.trim():e.replace(/^\s+|\s+$/g,"")}function Y(e){return e<16?"0"+e.toString(16):e.toString(16)}function q(e,t){t=t||1/0;for(var r,n=e.length,i=null,s=[],a=0;a<n;++a){if(r=e.charCodeAt(a),r>55295&&r<57344){if(!i){if(r>56319){(t-=3)>-1&&s.push(239,191,189);continue}if(a+1===n){(t-=3)>-1&&s.push(239,191,189);continue}i=r;continue}if(r<56320){(t-=3)>-1&&s.push(239,191,189),i=r;continue}r=(i-55296<<10|r-56320)+65536}else i&&(t-=3)>-1&&s.push(239,191,189);if(i=null,r<128){if((t-=1)<0)break;s.push(r)}else if(r<2048){if((t-=2)<0)break;s.push(r>>6|192,63&r|128)}else if(r<65536){if((t-=3)<0)break;s.push(r>>12|224,r>>6&63|128,63&r|128)}else{if(!(r<1114112))throw new Error("Invalid code point");if((t-=4)<0)break;s.push(r>>18|240,r>>12&63|128,r>>6&63|128,63&r|128)}}return s}function K(e){for(var t=[],r=0;r<e.length;++r)t.push(255&e.charCodeAt(r));return t}function H(e,t){for(var r,n,i,s=[],a=0;a<e.length&&!((t-=2)<0);++a)r=e.charCodeAt(a),n=r>>8,i=r%256,s.push(i),s.push(n);return s}function J(e){return $.toByteArray(G(e))}function X(e,t,r,n){for(var i=0;i<n&&!(i+r>=t.length||i>=e.length);++i)t[i+r]=e[i];return i}function z(e){return e!==e}var $=r(390),Q=r(453),Z=r(393);t.Buffer=a,t.SlowBuffer=v,t.INSPECT_MAX_BYTES=50,a.TYPED_ARRAY_SUPPORT=void 0!==e.TYPED_ARRAY_SUPPORT?e.TYPED_ARRAY_SUPPORT:n(),t.kMaxLength=i(),a.poolSize=8192,a._augment=function(e){return e.__proto__=a.prototype,e},a.from=function(e,t,r){return o(null,e,t,r)},a.TYPED_ARRAY_SUPPORT&&(a.prototype.__proto__=Uint8Array.prototype,a.__proto__=Uint8Array,"undefined"!=typeof Symbol&&Symbol.species&&a[Symbol.species]===a&&Object.defineProperty(a,Symbol.species,{value:null,configurable:!0})),a.alloc=function(e,t,r){return l(null,e,t,r)},a.allocUnsafe=function(e){return c(null,e)},a.allocUnsafeSlow=function(e){return c(null,e)},a.isBuffer=function(e){return!(null==e||!e._isBuffer)},a.compare=function(e,t){if(!a.isBuffer(e)||!a.isBuffer(t))throw new TypeError("Arguments must be Buffers");if(e===t)return 0;for(var r=e.length,n=t.length,i=0,s=Math.min(r,n);i<s;++i)if(e[i]!==t[i]){r=e[i],n=t[i];break}return r<n?-1:n<r?1:0},a.isEncoding=function(e){switch(String(e).toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"latin1":case"binary":case"base64":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return!0;default:return!1}},a.concat=function(e,t){if(!Z(e))throw new TypeError('"list" argument must be an Array of Buffers');if(0===e.length)return a.alloc(0);var r;if(void 0===t)for(t=0,r=0;r<e.length;++r)t+=e[r].length;var n=a.allocUnsafe(t),i=0;for(r=0;r<e.length;++r){var s=e[r];if(!a.isBuffer(s))throw new TypeError('"list" argument must be an Array of Buffers');s.copy(n,i),i+=s.length}return n},a.byteLength=y,a.prototype._isBuffer=!0,a.prototype.swap16=function(){var e=this.length;if(e%2!==0)throw new RangeError("Buffer size must be a multiple of 16-bits");for(var t=0;t<e;t+=2)b(this,t,t+1);return this},a.prototype.swap32=function(){var e=this.length;if(e%4!==0)throw new RangeError("Buffer size must be a multiple of 32-bits");for(var t=0;t<e;t+=4)b(this,t,t+3),b(this,t+1,t+2);return this},a.prototype.swap64=function(){var e=this.length;if(e%8!==0)throw new RangeError("Buffer size must be a multiple of 64-bits");for(var t=0;t<e;t+=8)b(this,t,t+7),b(this,t+1,t+6),b(this,t+2,t+5),b(this,t+3,t+4);return this},a.prototype.toString=function(){var e=0|this.length;return 0===e?"":0===arguments.length?k(this,0,e):g.apply(this,arguments)},a.prototype.equals=function(e){if(!a.isBuffer(e))throw new TypeError("Argument must be a Buffer");return this===e||0===a.compare(this,e)},a.prototype.inspect=function(){var e="",r=t.INSPECT_MAX_BYTES;return this.length>0&&(e=this.toString("hex",0,r).match(/.{2}/g).join(" "),this.length>r&&(e+=" ... ")),"<Buffer "+e+">"},a.prototype.compare=function(e,t,r,n,i){if(!a.isBuffer(e))throw new TypeError("Argument must be a Buffer");if(void 0===t&&(t=0),void 0===r&&(r=e?e.length:0),void 0===n&&(n=0),void 0===i&&(i=this.length),t<0||r>e.length||n<0||i>this.length)throw new RangeError("out of range index");if(n>=i&&t>=r)return 0;if(n>=i)return-1;if(t>=r)return 1;if(t>>>=0,r>>>=0,n>>>=0,i>>>=0,this===e)return 0;for(var s=i-n,o=r-t,u=Math.min(s,o),l=this.slice(n,i),c=e.slice(t,r),f=0;f<u;++f)if(l[f]!==c[f]){s=l[f],o=c[f];break}return s<o?-1:o<s?1:0},a.prototype.includes=function(e,t,r){return this.indexOf(e,t,r)!==-1},a.prototype.indexOf=function(e,t,r){return E(this,e,t,r,!0)},a.prototype.lastIndexOf=function(e,t,r){return E(this,e,t,r,!1)},a.prototype.write=function(e,t,r,n){if(void 0===t)n="utf8",r=this.length,t=0;else if(void 0===r&&"string"==typeof t)n=t,r=this.length,t=0;else{if(!isFinite(t))throw new Error("Buffer.write(string, encoding, offset[, length]) is no longer supported");t=0|t,isFinite(r)?(r=0|r,void 0===n&&(n="utf8")):(n=r,r=void 0)}var i=this.length-t;if((void 0===r||r>i)&&(r=i),e.length>0&&(r<0||t<0)||t>this.length)throw new RangeError("Attempt to write outside buffer bounds");n||(n="utf8");for(var s=!1;;)switch(n){case"hex":return A(this,e,t,r);case"utf8":case"utf-8":return S(this,e,t,r);case"ascii":return _(this,e,t,r);case"latin1":case"binary":return D(this,e,t,r);case"base64":return C(this,e,t,r);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return w(this,e,t,r);default:if(s)throw new TypeError("Unknown encoding: "+n);n=(""+n).toLowerCase(),s=!0}},a.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}};var ee=4096;a.prototype.slice=function(e,t){var r=this.length;e=~~e,t=void 0===t?r:~~t,e<0?(e+=r,e<0&&(e=0)):e>r&&(e=r),t<0?(t+=r,t<0&&(t=0)):t>r&&(t=r),t<e&&(t=e);var n;if(a.TYPED_ARRAY_SUPPORT)n=this.subarray(e,t),n.__proto__=a.prototype;else{var i=t-e;n=new a(i,(void 0));for(var s=0;s<i;++s)n[s]=this[s+e]}return n},a.prototype.readUIntLE=function(e,t,r){e=0|e,t=0|t,r||I(e,t,this.length);for(var n=this[e],i=1,s=0;++s<t&&(i*=256);)n+=this[e+s]*i;return n},a.prototype.readUIntBE=function(e,t,r){e=0|e,t=0|t,r||I(e,t,this.length);for(var n=this[e+--t],i=1;t>0&&(i*=256);)n+=this[e+--t]*i;return n},a.prototype.readUInt8=function(e,t){return t||I(e,1,this.length),this[e]},a.prototype.readUInt16LE=function(e,t){return t||I(e,2,this.length),this[e]|this[e+1]<<8},a.prototype.readUInt16BE=function(e,t){return t||I(e,2,this.length),this[e]<<8|this[e+1]},a.prototype.readUInt32LE=function(e,t){return t||I(e,4,this.length),(this[e]|this[e+1]<<8|this[e+2]<<16)+16777216*this[e+3]},a.prototype.readUInt32BE=function(e,t){return t||I(e,4,this.length),16777216*this[e]+(this[e+1]<<16|this[e+2]<<8|this[e+3])},a.prototype.readIntLE=function(e,t,r){e=0|e,t=0|t,r||I(e,t,this.length);for(var n=this[e],i=1,s=0;++s<t&&(i*=256);)n+=this[e+s]*i;return i*=128,n>=i&&(n-=Math.pow(2,8*t)),n},a.prototype.readIntBE=function(e,t,r){e=0|e,t=0|t,r||I(e,t,this.length);for(var n=t,i=1,s=this[e+--n];n>0&&(i*=256);)s+=this[e+--n]*i;return i*=128,s>=i&&(s-=Math.pow(2,8*t)),s},a.prototype.readInt8=function(e,t){return t||I(e,1,this.length),128&this[e]?(255-this[e]+1)*-1:this[e]},a.prototype.readInt16LE=function(e,t){t||I(e,2,this.length);var r=this[e]|this[e+1]<<8;return 32768&r?4294901760|r:r},a.prototype.readInt16BE=function(e,t){t||I(e,2,this.length);var r=this[e+1]|this[e]<<8;return 32768&r?4294901760|r:r},a.prototype.readInt32LE=function(e,t){return t||I(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},a.prototype.readInt32BE=function(e,t){return t||I(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},a.prototype.readFloatLE=function(e,t){return t||I(e,4,this.length),Q.read(this,e,!0,23,4)},a.prototype.readFloatBE=function(e,t){return t||I(e,4,this.length),Q.read(this,e,!1,23,4)},a.prototype.readDoubleLE=function(e,t){return t||I(e,8,this.length),Q.read(this,e,!0,52,8)},a.prototype.readDoubleBE=function(e,t){return t||I(e,8,this.length),Q.read(this,e,!1,52,8)},a.prototype.writeUIntLE=function(e,t,r,n){if(e=+e,t=0|t,r=0|r,!n){var i=Math.pow(2,8*r)-1;M(this,e,t,r,i,0)}var s=1,a=0;for(this[t]=255&e;++a<r&&(s*=256);)this[t+a]=e/s&255;return t+r},a.prototype.writeUIntBE=function(e,t,r,n){if(e=+e,t=0|t,r=0|r,!n){var i=Math.pow(2,8*r)-1;M(this,e,t,r,i,0)}var s=r-1,a=1;for(this[t+s]=255&e;--s>=0&&(a*=256);)this[t+s]=e/a&255;return t+r},a.prototype.writeUInt8=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,1,255,0),a.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),this[t]=255&e,t+1},a.prototype.writeUInt16LE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,2,65535,0),a.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):N(this,e,t,!0),t+2},a.prototype.writeUInt16BE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,2,65535,0),a.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):N(this,e,t,!1),t+2},a.prototype.writeUInt32LE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,4,4294967295,0),a.TYPED_ARRAY_SUPPORT?(this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e):L(this,e,t,!0),t+4},a.prototype.writeUInt32BE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,4,4294967295,0),a.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):L(this,e,t,!1),t+4},a.prototype.writeIntLE=function(e,t,r,n){if(e=+e,t=0|t,!n){var i=Math.pow(2,8*r-1);M(this,e,t,r,i-1,-i)}var s=0,a=1,o=0;for(this[t]=255&e;++s<r&&(a*=256);)e<0&&0===o&&0!==this[t+s-1]&&(o=1),this[t+s]=(e/a>>0)-o&255;return t+r},a.prototype.writeIntBE=function(e,t,r,n){if(e=+e,t=0|t,!n){var i=Math.pow(2,8*r-1);M(this,e,t,r,i-1,-i)}var s=r-1,a=1,o=0;for(this[t+s]=255&e;--s>=0&&(a*=256);)e<0&&0===o&&0!==this[t+s+1]&&(o=1),this[t+s]=(e/a>>0)-o&255;return t+r},a.prototype.writeInt8=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,1,127,-128),a.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),e<0&&(e=255+e+1),this[t]=255&e,t+1},a.prototype.writeInt16LE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,2,32767,-32768),a.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):N(this,e,t,!0),t+2},a.prototype.writeInt16BE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,2,32767,-32768),a.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):N(this,e,t,!1),t+2},a.prototype.writeInt32LE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,4,2147483647,-2147483648),a.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24):L(this,e,t,!0),t+4},a.prototype.writeInt32BE=function(e,t,r){return e=+e,t=0|t,r||M(this,e,t,4,2147483647,-2147483648),e<0&&(e=4294967295+e+1),a.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):L(this,e,t,!1),t+4},a.prototype.writeFloatLE=function(e,t,r){return U(this,e,t,!0,r)},a.prototype.writeFloatBE=function(e,t,r){return U(this,e,t,!1,r)},a.prototype.writeDoubleLE=function(e,t,r){return V(this,e,t,!0,r)},a.prototype.writeDoubleBE=function(e,t,r){return V(this,e,t,!1,r)},a.prototype.copy=function(e,t,r,n){if(r||(r=0),n||0===n||(n=this.length),t>=e.length&&(t=e.length),t||(t=0),n>0&&n<r&&(n=r),n===r)return 0;if(0===e.length||0===this.length)return 0;if(t<0)throw new RangeError("targetStart out of bounds");if(r<0||r>=this.length)throw new RangeError("sourceStart out of bounds");if(n<0)throw new RangeError("sourceEnd out of bounds");n>this.length&&(n=this.length),e.length-t<n-r&&(n=e.length-t+r);var i,s=n-r;if(this===e&&r<t&&t<n)for(i=s-1;i>=0;--i)e[i+t]=this[i+r];else if(s<1e3||!a.TYPED_ARRAY_SUPPORT)for(i=0;i<s;++i)e[i+t]=this[i+r];else Uint8Array.prototype.set.call(e,this.subarray(r,r+s),t);return s},a.prototype.fill=function(e,t,r,n){if("string"==typeof e){if("string"==typeof t?(n=t,t=0,r=this.length):"string"==typeof r&&(n=r,r=this.length),1===e.length){var i=e.charCodeAt(0);i<256&&(e=i)}if(void 0!==n&&"string"!=typeof n)throw new TypeError("encoding must be a string");if("string"==typeof n&&!a.isEncoding(n))throw new TypeError("Unknown encoding: "+n)}else"number"==typeof e&&(e=255&e);if(t<0||this.length<t||this.length<r)throw new RangeError("Out of range index");if(r<=t)return this;t>>>=0,r=void 0===r?this.length:r>>>0,e||(e=0);var s;if("number"==typeof e)for(s=t;s<r;++s)this[s]=e;else{var o=a.isBuffer(e)?e:q(new a(e,n).toString()),u=o.length;for(s=0;s<r-t;++s)this[s+t]=o[s%u]}return this};var te=/[^+\/0-9A-Za-z-_]/g}).call(t,function(){return this}())},function(e,t){"use strict";var r={}.toString;e.exports=Array.isArray||function(e){return"[object Array]"==r.call(e)}},function(e,t,r){(function(t){"use strict";function n(e){this.enabled=e&&void 0!==e.enabled?e.enabled:f}function i(e){var t=function e(){return s.apply(e,arguments)};return t._styles=e,t.enabled=this.enabled,t.__proto__=m,t}function s(){var e=arguments,t=e.length,r=0!==t&&String(arguments[0]);if(t>1)for(var n=1;n<t;n++)r+=" "+e[n];if(!this.enabled||!r)return r;var i=this._styles,s=i.length,a=u.dim.open;for(!d||i.indexOf("gray")===-1&&i.indexOf("grey")===-1||(u.dim.open="");s--;){var o=u[i[s]];r=o.open+r.replace(o.closeRe,o.open)+o.close}return u.dim.open=a,r}function a(){var e={};return Object.keys(h).forEach(function(t){e[t]={get:function(){return i.call(this,[t])}}}),e}var o=r(448),u=r(288),l=r(617),c=r(452),f=r(618),p=Object.defineProperties,d="win32"===t.platform&&!/^xterm/i.test(t.env.TERM);d&&(u.blue.open="");var h=function(){var e={};return Object.keys(u).forEach(function(t){u[t].closeRe=new RegExp(o(u[t].close),"g"),e[t]={get:function(){return i.call(this,this._styles.concat(t))}}}),e}(),m=p(function(){},h);p(n.prototype,a()),e.exports=new n,e.exports.styles=u,e.exports.hasColor=c,e.exports.stripColor=l,e.exports.supportsColor=f}).call(t,r(18))},function(e,t){"use strict";e.exports=function(e,t){for(var n=[],i=0;i<e.length;i++){var s=t(e[i],i);r(s)?n.push.apply(n,s):n.push(s)}return n};var r=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)}},function(e,t,r){(function(e){"use strict";function n(t){return new e(t,"base64").toString()}function i(e){return e.split(",").pop()}function s(e,t){var r=f.exec(e);f.lastIndex=0;var n=r[1]||r[2],i=l.resolve(t,n);try{return u.readFileSync(i,"utf8")}catch(e){throw new Error("An error occurred while trying to read the map file at "+i+"\n"+e)}}function a(e,t){t=t||{},t.isFileComment&&(e=s(e,t.commentFileDir)),t.hasComment&&(e=i(e)),t.isEncoded&&(e=n(e)),(t.isJSON||t.isEncoded)&&(e=JSON.parse(e)),this.sourcemap=e}function o(e){for(var r,n=e.split("\n"),i=n.length-1;i>0;i--)if(r=n[i],~r.indexOf("sourceMappingURL=data:"))return t.fromComment(r)}var u=r(117),l=r(17),c=/^\s*\/(?:\/|\*)[@#]\s+sourceMappingURL=data:(?:application|text)\/json;(?:charset[:=]\S+;)?base64,(.*)$/gm,f=/(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^\*]+?)[ \t]*(?:\*\/){1}[ \t]*$)/gm;a.prototype.toJSON=function(e){return JSON.stringify(this.sourcemap,null,e)},a.prototype.toBase64=function(){var t=this.toJSON();return new e(t).toString("base64")},a.prototype.toComment=function(e){var t=this.toBase64(),r="sourceMappingURL=data:application/json;base64,"+t;return e&&e.multiline?"/*# "+r+" */":"//# "+r},a.prototype.toObject=function(){return JSON.parse(this.toJSON())},a.prototype.addProperty=function(e,t){if(this.sourcemap.hasOwnProperty(e))throw new Error("property %s already exists on the sourcemap, use set property instead");return this.setProperty(e,t)},a.prototype.setProperty=function(e,t){return this.sourcemap[e]=t,this},a.prototype.getProperty=function(e){return this.sourcemap[e]},t.fromObject=function(e){return new a(e)},t.fromJSON=function(e){return new a(e,{isJSON:!0})},t.fromBase64=function(e){return new a(e,{isEncoded:!0})},t.fromComment=function(e){return e=e.replace(/^\/\*/g,"//").replace(/\*\/$/g,""),new a(e,{isEncoded:!0,hasComment:!0})},t.fromMapFileComment=function(e,t){return new a(e,{commentFileDir:t,isFileComment:!0,isJSON:!0})},t.fromSource=function(e,r){if(r){var n=o(e);return n?n:null}var i=e.match(c);return c.lastIndex=0,i?t.fromComment(i.pop()):null},t.fromMapFileSource=function(e,r){var n=e.match(f);return f.lastIndex=0,n?t.fromMapFileComment(n.pop(),r):null},t.removeComments=function(e){return c.lastIndex=0,e.replace(c,"")},t.removeMapFileComments=function(e){return f.lastIndex=0,e.replace(f,"")},t.generateMapFileComment=function(e,t){var r="sourceMappingURL="+e;return t&&t.multiline?"/*# "+r+" */":"//# "+r},Object.defineProperty(t,"commentRegex",{get:function(){return c.lastIndex=0,c}}),Object.defineProperty(t,"mapFileCommentRegex",{get:function(){return f.lastIndex=0,f}})}).call(t,r(392).Buffer)},function(e,t,r){"use strict";r(57),r(155),e.exports=r(433)},function(e,t,r){"use strict";var n=r(5),i=n.JSON||(n.JSON={stringify:JSON.stringify});e.exports=function(e){return i.stringify.apply(i,arguments)}},function(e,t,r){"use strict";r(98),r(155),r(57),r(435),r(443),e.exports=r(5).Map},function(e,t,r){"use strict";r(436),e.exports=9007199254740991},function(e,t,r){"use strict";r(437),e.exports=r(5).Object.assign},function(e,t,r){"use strict";r(438);var n=r(5).Object;e.exports=function(e,t){return n.create(e,t)}},function(e,t,r){"use strict";r(156),e.exports=r(5).Object.getOwnPropertySymbols;
+},function(e,t,r){"use strict";r(439),e.exports=r(5).Object.keys},function(e,t,r){"use strict";r(440),e.exports=r(5).Object.setPrototypeOf},function(e,t,r){"use strict";r(156),e.exports=r(5).Symbol.for},function(e,t,r){"use strict";r(156),r(98),r(444),r(445),e.exports=r(5).Symbol},function(e,t,r){"use strict";r(155),r(57),e.exports=r(154).f("iterator")},function(e,t,r){"use strict";r(98),r(57),r(441),e.exports=r(5).WeakMap},function(e,t,r){"use strict";r(98),r(57),r(442),e.exports=r(5).WeakSet},function(e,t){"use strict";e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t){"use strict";e.exports=function(){}},function(e,t,r){"use strict";var n=r(91);e.exports=function(e,t){var r=[];return n(e,!1,r.push,r,t),r}},function(e,t,r){"use strict";var n=r(37),i=r(151),s=r(432);e.exports=function(e){return function(t,r,a){var o,u=n(t),l=i(u.length),c=s(a,l);if(e&&r!=r){for(;l>c;)if(o=u[c++],o!=o)return!0}else for(;l>c;c++)if((e||c in u)&&u[c]===r)return e||c||0;return!e&&-1}}},function(e,t,r){"use strict";var n=r(24),i=r(229),s=r(11)("species");e.exports=function(e){var t;return i(e)&&(t=e.constructor,"function"!=typeof t||t!==Array&&!i(t.prototype)||(t=void 0),n(t)&&(t=t[s],null===t&&(t=void 0))),void 0===t?Array:t}},function(e,t,r){"use strict";var n=r(415);e.exports=function(e,t){return new(n(e))(t)}},function(e,t,r){"use strict";var n=r(25).f,i=r(92),s=r(146),a=r(54),o=r(137),u=r(90),l=r(91),c=r(143),f=r(230),p=r(430),d=r(22),h=r(56).fastKey,m=d?"_s":"size",v=function(e,t){var r,n=h(t);if("F"!==n)return e._i[n];for(r=e._f;r;r=r.n)if(r.k==t)return r};e.exports={getConstructor:function(e,t,r,c){var f=e(function(e,n){o(e,f,t,"_i"),e._i=i(null),e._f=void 0,e._l=void 0,e[m]=0,void 0!=n&&l(n,r,e[c],e)});return s(f.prototype,{clear:function(){for(var e=this,t=e._i,r=e._f;r;r=r.n)r.r=!0,r.p&&(r.p=r.p.n=void 0),delete t[r.i];e._f=e._l=void 0,e[m]=0},delete:function(e){var t=this,r=v(t,e);if(r){var n=r.n,i=r.p;delete t._i[r.i],r.r=!0,i&&(i.n=n),n&&(n.p=i),t._f==r&&(t._f=n),t._l==r&&(t._l=i),t[m]--}return!!r},forEach:function(e){o(this,f,"forEach");for(var t,r=a(e,arguments.length>1?arguments[1]:void 0,3);t=t?t.n:this._f;)for(r(t.v,t.k,this);t&&t.r;)t=t.p},has:function(e){return!!v(this,e)}}),d&&n(f.prototype,"size",{get:function(){return u(this[m])}}),f},def:function(e,t,r){var n,i,s=v(e,t);return s?s.v=r:(e._l=s={i:i=h(t,!0),k:t,v:r,p:n=e._l,n:void 0,r:!1},e._f||(e._f=s),n&&(n.n=s),e[m]++,"F"!==i&&(e._i[i]=s)),e},getEntry:v,setStrong:function(e,t,r){c(e,t,function(e,t){this._t=e,this._k=t,this._l=void 0},function(){for(var e=this,t=e._k,r=e._l;r&&r.r;)r=r.p;return e._t&&(e._l=r=r?r.n:e._t._f)?"keys"==t?f(0,r.k):"values"==t?f(0,r.v):f(0,[r.k,r.v]):(e._t=void 0,f(1))},r?"entries":"values",!r,!0),p(t)}}},function(e,t,r){"use strict";var n=r(225),i=r(413);e.exports=function(e){return function(){if(n(this)!=e)throw TypeError(e+"#toJSON isn't generic");return i(this)}}},function(e,t,r){"use strict";var n=r(43),i=r(145),s=r(93);e.exports=function(e){var t=n(e),r=i.f;if(r)for(var a,o=r(e),u=s.f,l=0;o.length>l;)u.call(e,a=o[l++])&&t.push(a);return t}},function(e,t,r){"use strict";e.exports=r(14).document&&document.documentElement},function(e,t,r){"use strict";var n=r(55),i=r(11)("iterator"),s=Array.prototype;e.exports=function(e){return void 0!==e&&(n.Array===e||s[i]===e)}},function(e,t,r){"use strict";var n=r(21);e.exports=function(e,t,r,i){try{return i?t(n(r)[0],r[1]):t(r)}catch(t){var s=e.return;throw (void 0!==s&&n(s.call(e)), t)}}},function(e,t,r){"use strict";var n=r(92),i=r(94),s=r(95),a={};r(30)(a,r(11)("iterator"),function(){return this}),e.exports=function(e,t,r){e.prototype=n(a,{next:i(1,r)}),s(e,t+" Iterator")}},function(e,t,r){"use strict";var n=r(43),i=r(37);e.exports=function(e,t){for(var r,s=i(e),a=n(s),o=a.length,u=0;o>u;)if(s[r=a[u++]]===t)return r}},function(e,t,r){"use strict";var n=r(25),i=r(21),s=r(43);e.exports=r(22)?Object.defineProperties:function(e,t){i(e);for(var r,a=s(t),o=a.length,u=0;o>u;)n.f(e,r=a[u++],t[r]);return e}},function(e,t,r){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=r(37),s=r(233).f,a={}.toString,o="object"==("undefined"==typeof window?"undefined":n(window))&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],u=function(e){try{return s(e)}catch(e){return o.slice()}};e.exports.f=function(e){return o&&"[object Window]"==a.call(e)?u(e):s(i(e))}},function(e,t,r){"use strict";var n=r(29),i=r(96),s=r(148)("IE_PROTO"),a=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=i(e),n(e,s)?e[s]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?a:null}},function(e,t,r){"use strict";var n=r(23),i=r(5),s=r(36);e.exports=function(e,t){var r=(i.Object||{})[e]||Object[e],a={};a[e]=t(r),n(n.S+n.F*s(function(){r(1)}),"Object",a)}},function(e,t,r){"use strict";var n=r(24),i=r(21),s=function(e,t){if(i(e),!n(t)&&null!==t)throw TypeError(t+": can't set as prototype!")};e.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(e,t,n){try{n=r(54)(Function.call,r(232).f(Object.prototype,"__proto__").set,2),n(e,[]),t=!(e instanceof Array)}catch(e){t=!0}return function(e,r){return s(e,r),t?e.__proto__=r:n(e,r),e}}({},!1):void 0),check:s}},function(e,t,r){"use strict";var n=r(14),i=r(5),s=r(25),a=r(22),o=r(11)("species");e.exports=function(e){var t="function"==typeof i[e]?i[e]:n[e];a&&t&&!t[o]&&s.f(t,o,{configurable:!0,get:function(){return this}})}},function(e,t,r){"use strict";var n=r(150),i=r(90);e.exports=function(e){return function(t,r){var s,a,o=String(i(t)),u=n(r),l=o.length;return u<0||u>=l?e?"":void 0:(s=o.charCodeAt(u),s<55296||s>56319||u+1===l||(a=o.charCodeAt(u+1))<56320||a>57343?e?o.charAt(u):s:e?o.slice(u,u+2):(s-55296<<10)+(a-56320)+65536)}}},function(e,t,r){"use strict";var n=r(150),i=Math.max,s=Math.min;e.exports=function(e,t){return e=n(e),e<0?i(e+t,0):s(e,t)}},function(e,t,r){"use strict";var n=r(21),i=r(235);e.exports=r(5).getIterator=function(e){var t=i(e);if("function"!=typeof t)throw TypeError(e+" is not iterable!");return n(t.call(e))}},function(e,t,r){"use strict";var n=r(412),i=r(230),s=r(55),a=r(37);e.exports=r(143)(Array,"Array",function(e,t){this._t=a(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,r=this._i++;return!e||r>=e.length?(this._t=void 0,i(1)):"keys"==t?i(0,r):"values"==t?i(0,e[r]):i(0,[r,e[r]])},"values"),s.Arguments=s.Array,n("keys"),n("values"),n("entries")},function(e,t,r){"use strict";var n=r(417);e.exports=r(140)("Map",function(e){return function(){return e(this,arguments.length>0?arguments[0]:void 0)}},{get:function(e){var t=n.getEntry(this,e);return t&&t.v},set:function(e,t){return n.def(this,0===e?0:e,t)}},n,!0)},function(e,t,r){"use strict";var n=r(23);n(n.S,"Number",{MAX_SAFE_INTEGER:9007199254740991})},function(e,t,r){"use strict";var n=r(23);n(n.S+n.F,"Object",{assign:r(231)})},function(e,t,r){"use strict";var n=r(23);n(n.S,"Object",{create:r(92)})},function(e,t,r){"use strict";var n=r(96),i=r(43);r(428)("keys",function(){return function(e){return i(n(e))}})},function(e,t,r){"use strict";var n=r(23);n(n.S,"Object",{setPrototypeOf:r(429).set})},function(e,t,r){"use strict";var n,i=r(138)(0),s=r(147),a=r(56),o=r(231),u=r(226),l=r(24),c=a.getWeak,f=Object.isExtensible,p=u.ufstore,d={},h=function(e){return function(){return e(this,arguments.length>0?arguments[0]:void 0)}},m={get:function(e){if(l(e)){var t=c(e);return t===!0?p(this).get(e):t?t[this._i]:void 0}},set:function(e,t){return u.def(this,e,t)}},v=e.exports=r(140)("WeakMap",h,m,u,!0,!0);7!=(new v).set((Object.freeze||Object)(d),7).get(d)&&(n=u.getConstructor(h),o(n.prototype,m),a.NEED=!0,i(["delete","has","get","set"],function(e){var t=v.prototype,r=t[e];s(t,e,function(t,i){if(l(t)&&!f(t)){this._f||(this._f=new n);var s=this._f[e](t,i);return"set"==e?this:s}return r.call(this,t,i)})}))},function(e,t,r){"use strict";var n=r(226);r(140)("WeakSet",function(e){return function(){return e(this,arguments.length>0?arguments[0]:void 0)}},{add:function(e){return n.def(this,e,!0)}},n,!1,!0)},function(e,t,r){"use strict";var n=r(23);n(n.P+n.R,"Map",{toJSON:r(418)("Map")})},function(e,t,r){"use strict";r(153)("asyncIterator")},function(e,t,r){"use strict";r(153)("observable")},function(e,t,r){"use strict";function n(e){var r,n=0;for(r in e)n=(n<<5)-n+e.charCodeAt(r),n|=0;return t.colors[Math.abs(n)%t.colors.length]}function i(e){function r(){if(r.enabled){var e=r,n=+new Date,i=n-(l||n);e.diff=i,e.prev=l,e.curr=n,l=n;for(var s=new Array(arguments.length),a=0;a<s.length;a++)s[a]=arguments[a];s[0]=t.coerce(s[0]),"string"!=typeof s[0]&&s.unshift("%O");var o=0;s[0]=s[0].replace(/%([a-zA-Z%])/g,function(r,n){if("%%"===r)return r;o++;var i=t.formatters[n];if("function"==typeof i){var a=s[o];r=i.call(e,a),s.splice(o,1),o--}return r}),t.formatArgs.call(e,s);var u=r.log||t.log||console.log.bind(console);u.apply(e,s)}}return r.namespace=e,r.enabled=t.enabled(e),r.useColors=t.useColors(),r.color=n(e),"function"==typeof t.init&&t.init(r),r}function s(e){t.save(e);for(var r=(e||"").split(/[\s,]+/),n=r.length,i=0;i<n;i++)r[i]&&(e=r[i].replace(/\*/g,".*?"),"-"===e[0]?t.skips.push(new RegExp("^"+e.substr(1)+"$")):t.names.push(new RegExp("^"+e+"$")))}function a(){t.enable("")}function o(e){var r,n;for(r=0,n=t.skips.length;r<n;r++)if(t.skips[r].test(e))return!1;for(r=0,n=t.names.length;r<n;r++)if(t.names[r].test(e))return!0;return!1}function u(e){return e instanceof Error?e.stack||e.message:e}t=e.exports=i.debug=i.default=i,t.coerce=u,t.disable=a,t.enable=s,t.enabled=o,t.humanize=r(598),t.names=[],t.skips=[],t.formatters={};var l},function(e,t,r){"use strict";function n(e){var t=0,r=0,n=0;for(var i in e){var s=e[i],a=s[0],o=s[1];(a>r||a===r&&o>n)&&(r=a,n=o,t=Number(i))}return t}var i=r(610),s=/^(?:( )+|\t+)/;e.exports=function(e){if("string"!=typeof e)throw new TypeError("Expected a string");var t,r,a=0,o=0,u=0,l={};e.split(/\n/g).forEach(function(e){if(e){var n,i=e.match(s);i?(n=i[0].length,i[1]?o++:a++):n=0;var c=n-u;u=n,c?(r=c>0,t=l[r?c:-c],t?t[0]++:t=l[c]=[1,0]):t&&(t[1]+=Number(r))}});var c,f,p=n(l);return p?o>=a?(c="space",f=i(" ",p)):(c="tab",f=i("\t",p)):(c=null,f=""),{amount:p,type:c,indent:f}}},function(e,t){"use strict";var r=/[|\\{}()[\]^$+*?.]/g;e.exports=function(e){if("string"!=typeof e)throw new TypeError("Expected a string");return e.replace(r,"\\$&")}},function(e,t){"use strict";!function(){function t(e){if(null==e)return!1;switch(e.type){case"ArrayExpression":case"AssignmentExpression":case"BinaryExpression":case"CallExpression":case"ConditionalExpression":case"FunctionExpression":case"Identifier":case"Literal":case"LogicalExpression":case"MemberExpression":case"NewExpression":case"ObjectExpression":case"SequenceExpression":case"ThisExpression":case"UnaryExpression":case"UpdateExpression":return!0}return!1}function r(e){if(null==e)return!1;switch(e.type){case"DoWhileStatement":case"ForInStatement":case"ForStatement":case"WhileStatement":return!0}return!1}function n(e){if(null==e)return!1;switch(e.type){case"BlockStatement":case"BreakStatement":case"ContinueStatement":case"DebuggerStatement":case"DoWhileStatement":case"EmptyStatement":case"ExpressionStatement":case"ForInStatement":case"ForStatement":case"IfStatement":case"LabeledStatement":case"ReturnStatement":case"SwitchStatement":case"ThrowStatement":case"TryStatement":case"VariableDeclaration":case"WhileStatement":case"WithStatement":return!0}return!1}function i(e){return n(e)||null!=e&&"FunctionDeclaration"===e.type}function s(e){switch(e.type){case"IfStatement":return null!=e.alternate?e.alternate:e.consequent;case"LabeledStatement":case"ForStatement":case"ForInStatement":case"WhileStatement":case"WithStatement":return e.body}return null}function a(e){var t;if("IfStatement"!==e.type)return!1;if(null==e.alternate)return!1;t=e.consequent;do{if("IfStatement"===t.type&&null==t.alternate)return!0;t=s(t)}while(t);return!1}e.exports={isExpression:t,isStatement:n,isIterationStatement:r,isSourceElement:i,isProblematicIfStatement:a,trailingStatement:s}}()},function(e,t,r){"use strict";!function(){function t(e){switch(e){case"implements":case"interface":case"package":case"private":case"protected":case"public":case"static":case"let":return!0;default:return!1}}function n(e,t){return!(!t&&"yield"===e)&&i(e,t)}function i(e,r){if(r&&t(e))return!0;switch(e.length){case 2:return"if"===e||"in"===e||"do"===e;case 3:return"var"===e||"for"===e||"new"===e||"try"===e;case 4:return"this"===e||"else"===e||"case"===e||"void"===e||"with"===e||"enum"===e;case 5:return"while"===e||"break"===e||"catch"===e||"throw"===e||"const"===e||"yield"===e||"class"===e||"super"===e;case 6:return"return"===e||"typeof"===e||"delete"===e||"switch"===e||"export"===e||"import"===e;case 7:return"default"===e||"finally"===e||"extends"===e;case 8:return"function"===e||"continue"===e||"debugger"===e;case 10:return"instanceof"===e;default:return!1}}function s(e,t){return"null"===e||"true"===e||"false"===e||n(e,t)}function a(e,t){return"null"===e||"true"===e||"false"===e||i(e,t)}function o(e){return"eval"===e||"arguments"===e}function u(e){var t,r,n;if(0===e.length)return!1;if(n=e.charCodeAt(0),!d.isIdentifierStartES5(n))return!1;for(t=1,r=e.length;t<r;++t)if(n=e.charCodeAt(t),!d.isIdentifierPartES5(n))return!1;return!0}function l(e,t){return 1024*(e-55296)+(t-56320)+65536}function c(e){var t,r,n,i,s;if(0===e.length)return!1;for(s=d.isIdentifierStartES6,t=0,r=e.length;t<r;++t){if(n=e.charCodeAt(t),55296<=n&&n<=56319){if(++t,t>=r)return!1;if(i=e.charCodeAt(t),!(56320<=i&&i<=57343))return!1;n=l(n,i)}if(!s(n))return!1;s=d.isIdentifierPartES6}return!0}function f(e,t){return u(e)&&!s(e,t)}function p(e,t){return c(e)&&!a(e,t)}var d=r(237);e.exports={isKeywordES5:n,isKeywordES6:i,isReservedWordES5:s,isReservedWordES6:a,isRestrictedWord:o,isIdentifierNameES5:u,isIdentifierNameES6:c,isIdentifierES5:f,isIdentifierES6:p}}()},function(e,t,r){"use strict";e.exports=r(624)},function(e,t,r){"use strict";var n=r(180),i=new RegExp(n().source);e.exports=i.test.bind(i)},function(e,t){"use strict";t.read=function(e,t,r,n,i){var s,a,o=8*i-n-1,u=(1<<o)-1,l=u>>1,c=-7,f=r?i-1:0,p=r?-1:1,d=e[t+f];for(f+=p,s=d&(1<<-c)-1,d>>=-c,c+=o;c>0;s=256*s+e[t+f],f+=p,c-=8);for(a=s&(1<<-c)-1,s>>=-c,c+=n;c>0;a=256*a+e[t+f],f+=p,c-=8);if(0===s)s=1-l;else{if(s===u)return a?NaN:(d?-1:1)*(1/0);a+=Math.pow(2,n),s-=l}return(d?-1:1)*a*Math.pow(2,s-n)},t.write=function(e,t,r,n,i,s){var a,o,u,l=8*s-i-1,c=(1<<l)-1,f=c>>1,p=23===i?Math.pow(2,-24)-Math.pow(2,-77):0,d=n?0:s-1,h=n?1:-1,m=t<0||0===t&&1/t<0?1:0;for(t=Math.abs(t),isNaN(t)||t===1/0?(o=isNaN(t)?1:0,a=c):(a=Math.floor(Math.log(t)/Math.LN2),t*(u=Math.pow(2,-a))<1&&(a--,u*=2),t+=a+f>=1?p/u:p*Math.pow(2,1-f),t*u>=2&&(a++,u/=2),a+f>=c?(o=0,a=c):a+f>=1?(o=(t*u-1)*Math.pow(2,i),a+=f):(o=t*Math.pow(2,f-1)*Math.pow(2,i),a=0));i>=8;e[r+d]=255&o,d+=h,o/=256,i-=8);for(a=a<<i|o,l+=i;l>0;e[r+d]=255&a,d+=h,a/=256,l-=8);e[r+d-h]|=128*m}},function(e,t,r){"use strict";var n=function(e,t,r,n,i,s,a,o){if(!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[r,n,i,s,a,o],c=0;u=new Error(t.replace(/%s/g,function(){return l[c++]})),u.name="Invariant Violation"}throw (u.framesToPop=1, u)}};e.exports=n},function(e,t,r){"use strict";var n=r(599);e.exports=Number.isFinite||function(e){return!("number"!=typeof e||n(e)||e===1/0||e===-(1/0))}},function(e,t){"use strict";e.exports=/((['"])(?:(?!\2|\\).|\\(?:\r\n|[\s\S]))*(\2)?|`(?:[^`\\$]|\\[\s\S]|\$(?!\{)|\$\{(?:[^{}]|\{[^}]*\}?)*\}?)*(`)?)|(\/\/.*)|(\/\*(?:[^*]|\*(?!\/))*(\*\/)?)|(\/(?!\*)(?:\[(?:(?![\]\\]).|\\.)*\]|(?![\/\]\\]).|\\.)+\/(?:(?!\s*(?:\b|[\u0080-\uFFFF$\\'"~({]|[+\-!](?!=)|\.?\d))|[gmiyu]{1,5}\b(?![\u0080-\uFFFF$\\]|\s*(?:[+\-*%&|^<>!=?({]|\/(?![\/*])))))|(0[xX][\da-fA-F]+|0[oO][0-7]+|0[bB][01]+|(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|((?!\d)(?:(?!\s)[$\w\u0080-\uFFFF]|\\u[\da-fA-F]{4}|\\u\{[\da-fA-F]{1,6}\})+)|(--|\+\+|&&|\|\||=>|\.{3}|(?:[+\-\/%&|^]|\*{1,2}|<{1,2}|>{1,3}|!=?|={1,2})=?|[?~.,:;[\](){}])|(\s+)|(^$|[\s\S])/g,e.exports.matchToToken=function(e){var t={type:"invalid",value:e[0]};return e[1]?(t.type="string",t.closed=!(!e[3]&&!e[4])):e[5]?t.type="comment":e[6]?(t.type="comment",t.closed=!!e[7]):e[8]?t.type="regex":e[9]?t.type="number":e[10]?t.type="name":e[11]?t.type="punctuator":e[12]&&(t.type="whitespace"),t}},function(e,t,r){var n;(function(e,i){"use strict";var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(a){var o="object"==s(t)&&t,u="object"==s(e)&&e&&e.exports==o&&e,l="object"==("undefined"==typeof i?"undefined":s(i))&&i;l.global!==l&&l.window!==l||(a=l);var c={},f=c.hasOwnProperty,p=function(e,t){var r;for(r in e)f.call(e,r)&&t(r,e[r])},d=function(e,t){return t?(p(t,function(t,r){e[t]=r}),e):e},h=function(e,t){for(var r=e.length,n=-1;++n<r;)t(e[n])},m=c.toString,v=function(e){return"[object Array]"==m.call(e)},y=function(e){return"[object Object]"==m.call(e)},g=function(e){return"string"==typeof e||"[object String]"==m.call(e)},b=function(e){return"number"==typeof e||"[object Number]"==m.call(e)},E=function(e){return"function"==typeof e||"[object Function]"==m.call(e)},x=function(e){return"[object Map]"==m.call(e)},A=function(e){return"[object Set]"==m.call(e)},S={'"':'\\"',"'":"\\'","\\":"\\\\","\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t"},_=/["'\\\b\f\n\r\t]/,D=/[0-9]/,C=/[ !#-&\(-\[\]-~]/,w=function e(t,r){var n={escapeEverything:!1,escapeEtago:!1,quotes:"single",wrap:!1,es6:!1,json:!1,compact:!0,lowercaseHex:!1,numbers:"decimal",indent:"\t",__indent__:"",__inline1__:!1,__inline2__:!1},i=r&&r.json;i&&(n.quotes="double",n.wrap=!0),r=d(n,r),"single"!=r.quotes&&"double"!=r.quotes&&(r.quotes="single");var s,a="double"==r.quotes?'"':"'",o=r.compact,u=r.indent,l=r.lowercaseHex,c="",f=r.__inline1__,m=r.__inline2__,w=o?"":"\n",F=!0,k="binary"==r.numbers,P="octal"==r.numbers,T="decimal"==r.numbers,O="hexadecimal"==r.numbers;if(i&&t&&E(t.toJSON)&&(t=t.toJSON()),!g(t)){if(x(t))return 0==t.size?"new Map()":(o||(r.__inline1__=!0),"new Map("+e(Array.from(t),r)+")");if(A(t))return 0==t.size?"new Set()":"new Set("+e(Array.from(t),r)+")";if(v(t))return s=[],r.wrap=!0,f?(r.__inline1__=!1,r.__inline2__=!0):(c=r.__indent__,u+=c,r.__indent__=u),h(t,function(t){F=!1,m&&(r.__inline2__=!1),s.push((o||m?"":u)+e(t,r))}),F?"[]":m?"["+s.join(", ")+"]":"["+w+s.join(","+w)+w+(o?"":c)+"]";if(!b(t))return y(t)?(s=[],r.wrap=!0,c=r.__indent__,u+=c,r.__indent__=u,p(t,function(t,n){F=!1,s.push((o?"":u)+e(t,r)+":"+(o?"":" ")+e(n,r))}),F?"{}":"{"+w+s.join(","+w)+w+(o?"":c)+"}"):i?JSON.stringify(t)||"null":String(t);if(i)return JSON.stringify(t);if(T)return String(t);if(O){var B=t.toString(16);return l||(B=B.toUpperCase()),"0x"+B}if(k)return"0b"+t.toString(2);if(P)return"0o"+t.toString(8)}var R,I,M,N=t,L=-1,j=N.length;for(s="";++L<j;){var U=N.charAt(L);if(r.es6&&(R=N.charCodeAt(L),R>=55296&&R<=56319&&j>L+1&&(I=N.charCodeAt(L+1),I>=56320&&I<=57343))){M=1024*(R-55296)+I-56320+65536;var V=M.toString(16);l||(V=V.toUpperCase()),s+="\\u{"+V+"}",L++}else{if(!r.escapeEverything){if(C.test(U)){s+=U;continue}if('"'==U){s+=a==U?'\\"':U;continue}if("'"==U){s+=a==U?"\\'":U;continue}}if("\0"!=U||i||D.test(N.charAt(L+1)))if(_.test(U))s+=S[U];else{var G=U.charCodeAt(0),V=G.toString(16);l||(V=V.toUpperCase());var W=V.length>2||i,Y="\\"+(W?"u":"x")+("0000"+V).slice(W?-4:-2);s+=Y}else s+="\\0"}}return r.wrap&&(s=a+s+a),r.escapeEtago?s.replace(/<\/(script|style)/gi,"<\\/$1"):s};w.version="1.3.0","object"==s(r(48))&&r(48)?(n=function(){return w}.call(t,r,t,e),!(void 0!==n&&(e.exports=n))):o&&!o.nodeType?u?u.exports=w:o.jsesc=w:a.jsesc=w}(void 0)}).call(t,r(39)(e),function(){return this}())},function(e,t,r){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i="object"===n(t)?t:{};i.parse=function(){var e,t,r,i,s,a,o={"'":"'",'"':'"',"\\":"\\","/":"/","\n":"",b:"\b",f:"\f",n:"\n",r:"\r",t:"\t"},u=[" ","\t","\r","\n","\v","\f"," ","\ufeff"],l=function(e){return""===e?"EOF":"'"+e+"'"},c=function n(i){var n=new SyntaxError;throw (n.message=i+" at line "+t+" column "+r+" of the JSON5 data. Still to read: "+JSON.stringify(s.substring(e-1,e+19)), n.at=e, n.lineNumber=t, n.columnNumber=r, n)},f=function(n){return n&&n!==i&&c("Expected "+l(n)+" instead of "+l(i)),i=s.charAt(e),e++,r++,("\n"===i||"\r"===i&&"\n"!==p())&&(t++,r=0),i},p=function(){return s.charAt(e)},d=function(){var e=i;for("_"!==i&&"$"!==i&&(i<"a"||i>"z")&&(i<"A"||i>"Z")&&c("Bad identifier as unquoted key");f()&&("_"===i||"$"===i||i>="a"&&i<="z"||i>="A"&&i<="Z"||i>="0"&&i<="9");)e+=i;return e},h=function e(){var e,t="",r="",n=10;if("-"!==i&&"+"!==i||(t=i,f(i)),"I"===i)return e=E(),("number"!=typeof e||isNaN(e))&&c("Unexpected word for number"),"-"===t?-e:e;if("N"===i)return e=E(),isNaN(e)||c("expected word to be NaN"),e;switch("0"===i&&(r+=i,f(),"x"===i||"X"===i?(r+=i,f(),n=16):i>="0"&&i<="9"&&c("Octal literal")),n){case 10:for(;i>="0"&&i<="9";)r+=i,f();if("."===i)for(r+=".";f()&&i>="0"&&i<="9";)r+=i;if("e"===i||"E"===i)for(r+=i,f(),"-"!==i&&"+"!==i||(r+=i,f());i>="0"&&i<="9";)r+=i,f();break;case 16:for(;i>="0"&&i<="9"||i>="A"&&i<="F"||i>="a"&&i<="f";)r+=i,f()}return e="-"===t?-r:+r,isFinite(e)?e:void c("Bad number")},m=function e(){var t,r,n,s,e="";if('"'===i||"'"===i)for(n=i;f();){if(i===n)return f(),e;if("\\"===i)if(f(),"u"===i){for(s=0,r=0;r<4&&(t=parseInt(f(),16),isFinite(t));r+=1)s=16*s+t;e+=String.fromCharCode(s)}else if("\r"===i)"\n"===p()&&f();else{if("string"!=typeof o[i])break;e+=o[i]}else{if("\n"===i)break;e+=i}}c("Bad string")},v=function(){"/"!==i&&c("Not an inline comment");do if(f(),"\n"===i||"\r"===i)return void f();while(i)},y=function(){"*"!==i&&c("Not a block comment");do for(f();"*"===i;)if(f("*"),"/"===i)return void f("/");while(i);c("Unterminated block comment")},g=function(){"/"!==i&&c("Not a comment"),f("/"),"/"===i?v():"*"===i?y():c("Unrecognized comment")},b=function(){for(;i;)if("/"===i)g();else{if(!(u.indexOf(i)>=0))return;f()}},E=function(){switch(i){case"t":return f("t"),f("r"),f("u"),f("e"),!0;case"f":return f("f"),f("a"),f("l"),f("s"),f("e"),!1;case"n":return f("n"),f("u"),f("l"),f("l"),null;case"I":return f("I"),f("n"),f("f"),f("i"),f("n"),f("i"),f("t"),f("y"),1/0;case"N":return f("N"),f("a"),f("N"),NaN}c("Unexpected "+l(i))},x=function e(){var e=[];if("["===i)for(f("["),b();i;){if("]"===i)return f("]"),e;if(","===i?c("Missing array element"):e.push(a()),b(),","!==i)return f("]"),e;f(","),b()}c("Bad array")},A=function e(){var t,e={};if("{"===i)for(f("{"),b();i;){if("}"===i)return f("}"),e;if(t='"'===i||"'"===i?m():d(),b(),f(":"),e[t]=a(),b(),","!==i)return f("}"),e;f(","),b()}c("Bad object")};return a=function(){switch(b(),i){case"{":return A();case"[":return x();case'"':case"'":return m();case"-":case"+":case".":return h();default:return i>="0"&&i<="9"?h():E()}},function(o,u){var l;return s=String(o),e=0,t=1,r=1,i=" ",l=a(),b(),i&&c("Syntax error"),"function"==typeof u?function e(t,r){var i,s,a=t[r];if(a&&"object"===("undefined"==typeof a?"undefined":n(a)))for(i in a)Object.prototype.hasOwnProperty.call(a,i)&&(s=e(a,i),void 0!==s?a[i]=s:delete a[i]);return u.call(t,r,a)}({"":l},""):l}}(),i.stringify=function(e,t,r){function s(e){return e>="a"&&e<="z"||e>="A"&&e<="Z"||e>="0"&&e<="9"||"_"===e||"$"===e}function a(e){return e>="a"&&e<="z"||e>="A"&&e<="Z"||"_"===e||"$"===e}function o(e){if("string"!=typeof e)return!1;if(!a(e[0]))return!1;for(var t=1,r=e.length;t<r;){if(!s(e[t]))return!1;t++}return!0}function u(e){return Array.isArray?Array.isArray(e):"[object Array]"===Object.prototype.toString.call(e)}function l(e){return"[object Date]"===Object.prototype.toString.call(e)}function c(e){for(var t=0;t<v.length;t++)if(v[t]===e)throw new TypeError("Converting circular structure to JSON")}function f(e,t,r){if(!e)return"";e.length>10&&(e=e.substring(0,10));for(var n=r?"":"\n",i=0;i<t;i++)n+=e;return n}function p(e){return y.lastIndex=0,y.test(e)?'"'+e.replace(y,function(e){var t=g[e];return"string"==typeof t?t:"\\u"+("0000"+e.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+e+'"'}function d(e,t,r){var i,s,a=h(e,t,r);switch(a&&!l(a)&&(a=a.valueOf()),"undefined"==typeof a?"undefined":n(a)){case"boolean":return a.toString();case"number":return isNaN(a)||!isFinite(a)?"null":a.toString();case"string":return p(a.toString());case"object":if(null===a)return"null";if(u(a)){c(a),i="[",v.push(a);for(var y=0;y<a.length;y++)s=d(a,y,!1),i+=f(m,v.length),i+=null===s||"undefined"==typeof s?"null":s,y<a.length-1?i+=",":m&&(i+="\n");v.pop(),a.length&&(i+=f(m,v.length,!0)),i+="]"}else{c(a),i="{";var g=!1;v.push(a);for(var b in a)if(a.hasOwnProperty(b)){var E=d(a,b,!1);r=!1,"undefined"!=typeof E&&null!==E&&(i+=f(m,v.length),g=!0,t=o(b)?b:p(b),i+=t+":"+(m?" ":"")+E+",")}v.pop(),i=g?i.substring(0,i.length-1)+f(m,v.length)+"}":"{}"}return i;default:return}}if(t&&"function"!=typeof t&&!u(t))throw new Error("Replacer must be a function or an array");var h=function(e,r,n){var i=e[r];return i&&i.toJSON&&"function"==typeof i.toJSON&&(i=i.toJSON()),"function"==typeof t?t.call(e,r,i):t?n||u(e)||t.indexOf(r)>=0?i:void 0:i};i.isWord=o;var m,v=[];r&&("string"==typeof r?m=r:"number"==typeof r&&r>=0&&(m=f(" ",r,!0)));var y=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,g={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},b={"":e};return void 0===e?h(b,"",!0):d(b,"",!0)}},function(e,t){"use strict";var r=[],n=[];e.exports=function(e,t){if(e===t)return 0;var i=e.length,s=t.length;if(0===i)return s;if(0===s)return i;for(var a,o,u,l,c=0,f=0;c<i;)n[c]=e.charCodeAt(c),r[c]=++c;for(;f<s;)for(a=t.charCodeAt(f),u=f++,o=f,c=0;c<i;c++)l=a===n[c]?u:u+1,u=r[c],o=r[c]=u>o?l>o?o+1:l:l>u?u+1:l;return o}},function(e,t,r){"use strict";var n=r(38),i=r(16),s=n(i,"DataView");e.exports=s},function(e,t,r){"use strict";function n(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}var i=r(528),s=r(529),a=r(530),o=r(531),u=r(532);n.prototype.clear=i,n.prototype.delete=s,n.prototype.get=a,n.prototype.has=o,n.prototype.set=u,e.exports=n},function(e,t,r){"use strict";var n=r(38),i=r(16),s=n(i,"Promise");e.exports=s},function(e,t,r){"use strict";var n=r(38),i=r(16),s=n(i,"WeakMap");e.exports=s},function(e,t){"use strict";function r(e,t){return e.set(t[0],t[1]),e}e.exports=r},function(e,t){"use strict";function r(e,t){return e.add(t),e}e.exports=r},function(e,t,r){"use strict";function n(e,t){var r=null==e?0:e.length;return!!r&&i(e,t,0)>-1}var i=r(102);e.exports=n},function(e,t){"use strict";function r(e,t,r){for(var n=-1,i=null==e?0:e.length;++n<i;)if(r(t,e[n]))return!0;return!1}e.exports=r},function(e,t){"use strict";function r(e,t){for(var r=-1,n=null==e?0:e.length;++r<n;)if(t(e[r],r,e))return!0;return!1}e.exports=r},function(e,t){"use strict";function r(e){return e.split("")}e.exports=r},function(e,t,r){"use strict";function n(e,t,r,n){return void 0===e||i(e,s[r])&&!a.call(n,r)?t:e}var i=r(45),s=Object.prototype,a=s.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e,t){return e&&i(t,s(t),e)}var i=r(31),s=r(27);e.exports=n},function(e,t,r){"use strict";function n(e,t){return e&&i(t,s(t),e)}var i=r(31),s=r(46);e.exports=n},function(e,t){"use strict";function r(e,t,r){return e===e&&(void 0!==r&&(e=e<=r?e:r),void 0!==t&&(e=e>=t?e:t)),e}e.exports=r},function(e,t,r){"use strict";var n=r(12),i=Object.create,s=function(){function e(){}return function(t){if(!n(t))return{};if(i)return i(t);e.prototype=t;var r=new e;return e.prototype=void 0,r}}();e.exports=s},function(e,t,r){"use strict";function n(e,t,r,a,o){var u=-1,l=e.length;for(r||(r=s),o||(o=[]);++u<l;){var c=e[u];t>0&&r(c)?t>1?n(c,t-1,r,a,o):i(o,c):a||(o[o.length]=c)}return o}var i=r(160),s=r(535);e.exports=n},function(e,t,r){"use strict";function n(e,t){return e&&i(e,t,s)}var i=r(247),s=r(27);e.exports=n},function(e,t){"use strict";function r(e,t){return null!=e&&i.call(e,t)}var n=Object.prototype,i=n.hasOwnProperty;e.exports=r},function(e,t){"use strict";function r(e,t){return null!=e&&t in Object(e)}e.exports=r},function(e,t){"use strict";function r(e,t,r,n){for(var i=r-1,s=e.length;++i<s;)if(n(e[i],t))return i;return-1}e.exports=r},function(e,t,r){"use strict";function n(e){return s(e)&&i(e)==a}var i=r(15),s=r(13),a="[object Arguments]";e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n,v,g){var b=l(e),E=l(t),x=h,A=h;b||(x=u(e),x=x==d?m:x),E||(A=u(t),A=A==d?m:A);var S=x==m,_=A==m,D=x==A;if(D&&c(e)){if(!c(t))return!1;b=!0,S=!1}if(D&&!S)return g||(g=new i),b||f(e)?s(e,t,r,n,v,g):a(e,t,x,r,n,v,g);if(!(r&p)){var C=S&&y.call(e,"__wrapped__"),w=_&&y.call(t,"__wrapped__");if(C||w){var F=C?e.value():e,k=w?t.value():t;return g||(g=new i),v(F,k,r,n,g)}}return!!D&&(g||(g=new i),o(e,t,r,n,v,g))}var i=r(100),s=r(258),a=r(520),o=r(521),u=r(261),l=r(6),c=r(115),f=r(177),p=1,d="[object Arguments]",h="[object Array]",m="[object Object]",v=Object.prototype,y=v.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n){var u=r.length,l=u,c=!n;if(null==e)return!l;for(e=Object(e);u--;){var f=r[u];if(c&&f[2]?f[1]!==e[f[0]]:!(f[0]in e))return!1}for(;++u<l;){f=r[u];var p=f[0],d=e[p],h=f[1];if(c&&f[2]){if(void 0===d&&!(p in e))return!1}else{var m=new i;if(n)var v=n(d,h,p,e,t,m);if(!(void 0===v?s(h,d,a|o,n,m):v))return!1}}return!0}var i=r(100),s=r(250),a=1,o=2;e.exports=n},function(e,t){"use strict";function r(e){return e!==e}e.exports=r},function(e,t,r){"use strict";function n(e){if(!a(e)||s(e))return!1;var t=i(e)?h:l;return t.test(o(e))}var i=r(116),s=r(537),a=r(12),o=r(268),u=/[\\^$.*+?()[\]{}|]/g,l=/^\[object .+?Constructor\]$/,c=Function.prototype,f=Object.prototype,p=c.toString,d=f.hasOwnProperty,h=RegExp("^"+p.call(d).replace(u,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");e.exports=n},function(e,t,r){"use strict";function n(e){return s(e)&&i(e)==a}var i=r(15),s=r(13),a="[object RegExp]";e.exports=n},function(e,t,r){"use strict";function n(e){return a(e)&&s(e.length)&&!!T[i(e)]}var i=r(15),s=r(175),a=r(13),o="[object Arguments]",u="[object Array]",l="[object Boolean]",c="[object Date]",f="[object Error]",p="[object Function]",d="[object Map]",h="[object Number]",m="[object Object]",v="[object RegExp]",y="[object Set]",g="[object String]",b="[object WeakMap]",E="[object ArrayBuffer]",x="[object DataView]",A="[object Float32Array]",S="[object Float64Array]",_="[object Int8Array]",D="[object Int16Array]",C="[object Int32Array]",w="[object Uint8Array]",F="[object Uint8ClampedArray]",k="[object Uint16Array]",P="[object Uint32Array]",T={};T[A]=T[S]=T[_]=T[D]=T[C]=T[w]=T[F]=T[k]=T[P]=!0,T[o]=T[u]=T[E]=T[l]=T[x]=T[c]=T[f]=T[p]=T[d]=T[h]=T[m]=T[v]=T[y]=T[g]=T[b]=!1,e.exports=n},function(e,t,r){"use strict";function n(e){if(!i(e))return s(e);var t=[];for(var r in Object(e))o.call(e,r)&&"constructor"!=r&&t.push(r);return t}var i=r(107),s=r(549),a=Object.prototype,o=a.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e){if(!i(e))return a(e);var t=s(e),r=[];for(var n in e)("constructor"!=n||!t&&u.call(e,n))&&r.push(n);return r}var i=r(12),s=r(107),a=r(550),o=Object.prototype,u=o.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e){var t=s(e);return 1==t.length&&t[0][2]?a(t[0][0],t[0][1]):function(r){return r===e||i(r,e,t)}}var i=r(482),s=r(524),a=r(266);e.exports=n},function(e,t,r){"use strict";function n(e,t){
+return o(e)&&u(t)?l(c(e),t):function(r){var n=s(r,e);return void 0===n&&n===t?a(r,e):i(t,n,f|p)}}var i=r(250),s=r(579),a=r(580),o=r(172),u=r(264),l=r(266),c=r(110),f=1,p=2;e.exports=n},function(e,t,r){"use strict";function n(e,t,r,c,f){e!==t&&a(t,function(a,l){if(u(a))f||(f=new i),o(e,t,l,r,n,c,f);else{var p=c?c(e[l],a,l+"",e,t,f):void 0;void 0===p&&(p=a),s(e,l,p)}},l)}var i=r(100),s=r(245),a=r(247),o=r(492),u=r(12),l=r(46);e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n,g,b,E){var x=e[r],A=t[r],S=E.get(A);if(S)return void i(e,r,S);var _=b?b(x,A,r+"",e,t,E):void 0,D=void 0===_;if(D){var C=c(A),w=!C&&p(A),F=!C&&!w&&v(A);_=A,C||w||F?c(x)?_=x:f(x)?_=o(x):w?(D=!1,_=s(A,!0)):F?(D=!1,_=a(A,!0)):_=[]:m(A)||l(A)?(_=x,l(x)?_=y(x):(!h(x)||n&&d(x))&&(_=u(A))):D=!1}D&&(E.set(A,_),g(_,A,n,b,E),E.delete(A)),i(e,r,_)}var i=r(245),s=r(254),a=r(255),o=r(167),u=r(263),l=r(114),c=r(6),f=r(581),p=r(115),d=r(116),h=r(12),m=r(273),v=r(177),y=r(594);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){var n=-1;t=i(t.length?t:[c],u(s));var f=a(e,function(e,r,s){var a=i(t,function(t){return t(e)});return{criteria:a,index:++n,value:e}});return o(f,function(e,t){return l(e,t,r)})}var i=r(58),s=r(59),a=r(251),o=r(500),u=r(104),l=r(513),c=r(60);e.exports=n},function(e,t){"use strict";function r(e){return function(t){return null==t?void 0:t[e]}}e.exports=r},function(e,t,r){"use strict";function n(e){return function(t){return i(t,e)}}var i=r(248);e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n){var l=n?a:s,f=-1,p=t.length,d=e;for(e===t&&(t=u(t)),r&&(d=i(e,o(r)));++f<p;)for(var h=0,m=t[f],v=r?r(m):m;(h=l(d,v,h,n))>-1;)d!==e&&c.call(d,h,1),c.call(e,h,1);return e}var i=r(58),s=r(102),a=r(479),o=r(104),u=r(167),l=Array.prototype,c=l.splice;e.exports=n},function(e,t){"use strict";function r(e,t){var r="";if(!e||t<1||t>n)return r;do t%2&&(r+=e),t=i(t/2),t&&(e+=e);while(t);return r}var n=9007199254740991,i=Math.floor;e.exports=r},function(e,t,r){"use strict";var n=r(571),i=r(257),s=r(60),a=i?function(e,t){return i(e,"toString",{configurable:!0,enumerable:!1,value:n(t),writable:!0})}:s;e.exports=a},function(e,t){"use strict";function r(e,t,r){var n=-1,i=e.length;t<0&&(t=-t>i?0:i+t),r=r>i?i:r,r<0&&(r+=i),i=t>r?0:r-t>>>0,t>>>=0;for(var s=Array(i);++n<i;)s[n]=e[n+t];return s}e.exports=r},function(e,t){"use strict";function r(e,t){var r=e.length;for(e.sort(t);r--;)e[r]=e[r].value;return e}e.exports=r},function(e,t){"use strict";function r(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}e.exports=r},function(e,t,r){"use strict";function n(e,t,r){var n=-1,f=s,p=e.length,d=!0,h=[],m=h;if(r)d=!1,f=a;else if(p>=c){var v=t?null:u(e);if(v)return l(v);d=!1,f=o,m=new i}else m=t?[]:h;e:for(;++n<p;){var y=e[n],g=t?t(y):y;if(y=r||0!==y?y:0,d&&g===g){for(var b=m.length;b--;)if(m[b]===g)continue e;t&&m.push(g),h.push(y)}else f(m,g,r)||(m!==h&&m.push(g),h.push(y))}return h}var i=r(239),s=r(466),a=r(467),o=r(252),u=r(519),l=r(109),c=200;e.exports=n},function(e,t,r){"use strict";function n(e,t){return i(t,function(t){return e[t]})}var i=r(58);e.exports=n},function(e,t,r){"use strict";function n(e){return"function"==typeof e?e:i}var i=r(60);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){var n=e.length;return r=void 0===r?n:r,!t&&r>=n?e:i(e,t,r)}var i=r(499);e.exports=n},function(e,t,r){"use strict";function n(e,t){for(var r=e.length;r--&&i(t,e[r],0)>-1;);return r}var i=r(102);e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=t?i(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.byteLength)}var i=r(166);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){var n=t?r(a(e),o):a(e);return s(n,i,new e.constructor)}var i=r(464),s=r(244),a=r(265),o=1;e.exports=n},function(e,t){"use strict";function r(e){var t=new e.constructor(e.source,n.exec(e));return t.lastIndex=e.lastIndex,t}var n=/\w*$/;e.exports=r},function(e,t,r){"use strict";function n(e,t,r){var n=t?r(a(e),o):a(e);return s(n,i,new e.constructor)}var i=r(465),s=r(244),a=r(109),o=1;e.exports=n},function(e,t,r){"use strict";function n(e){return a?Object(a.call(e)):{}}var i=r(44),s=i?i.prototype:void 0,a=s?s.valueOf:void 0;e.exports=n},function(e,t,r){"use strict";function n(e,t){if(e!==t){var r=void 0!==e,n=null===e,s=e===e,a=i(e),o=void 0!==t,u=null===t,l=t===t,c=i(t);if(!u&&!c&&!a&&e>t||a&&o&&l&&!u&&!c||n&&o&&l||!r&&l||!s)return 1;if(!n&&!a&&!c&&e<t||c&&r&&s&&!n&&!a||u&&r&&s||!o&&s||!l)return-1}return 0}var i=r(61);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){for(var n=-1,s=e.criteria,a=t.criteria,o=s.length,u=r.length;++n<o;){var l=i(s[n],a[n]);if(l){if(n>=u)return l;var c=r[n];return l*("desc"==c?-1:1)}}return e.index-t.index}var i=r(512);e.exports=n},function(e,t,r){"use strict";function n(e,t){return i(e,s(e),t)}var i=r(31),s=r(169);e.exports=n},function(e,t,r){"use strict";function n(e,t){return i(e,s(e),t)}var i=r(31),s=r(260);e.exports=n},function(e,t,r){"use strict";var n=r(16),i=n["__core-js_shared__"];e.exports=i},function(e,t,r){"use strict";function n(e,t){return function(r,n){if(null==r)return r;if(!i(r))return e(r,n);for(var s=r.length,a=t?s:-1,o=Object(r);(t?a--:++a<s)&&n(o[a],a,o)!==!1;);return r}}var i=r(26);e.exports=n},function(e,t){"use strict";function r(e){return function(t,r,n){for(var i=-1,s=Object(t),a=n(t),o=a.length;o--;){var u=a[e?o:++i];if(r(s[u],u,s)===!1)break}return t}}e.exports=r},function(e,t,r){"use strict";var n=r(238),i=r(586),s=r(109),a=1/0,o=n&&1/s(new n([,-0]))[1]==a?function(e){return new n(e)}:i;e.exports=o},function(e,t,r){"use strict";function n(e,t,r,n,i,S,D){switch(r){case A:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case x:return!(e.byteLength!=t.byteLength||!S(new s(e),new s(t)));case p:case d:case v:return a(+e,+t);case h:return e.name==t.name&&e.message==t.message;case y:case b:return e==t+"";case m:var C=u;case g:var w=n&c;if(C||(C=l),e.size!=t.size&&!w)return!1;var F=D.get(e);if(F)return F==t;n|=f,D.set(e,t);var k=o(C(e),C(t),n,i,S,D);return D.delete(e),k;case E:if(_)return _.call(e)==_.call(t)}return!1}var i=r(44),s=r(240),a=r(45),o=r(258),u=r(265),l=r(109),c=1,f=2,p="[object Boolean]",d="[object Date]",h="[object Error]",m="[object Map]",v="[object Number]",y="[object RegExp]",g="[object Set]",b="[object String]",E="[object Symbol]",x="[object ArrayBuffer]",A="[object DataView]",S=i?i.prototype:void 0,_=S?S.valueOf:void 0;e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n,a,u){var l=r&s,c=i(e),f=c.length,p=i(t),d=p.length;if(f!=d&&!l)return!1;for(var h=f;h--;){var m=c[h];if(!(l?m in t:o.call(t,m)))return!1}var v=u.get(e);if(v&&u.get(t))return v==t;var y=!0;u.set(e,t),u.set(t,e);for(var g=l;++h<f;){m=c[h];var b=e[m],E=t[m];if(n)var x=l?n(E,b,m,t,e,u):n(b,E,m,e,t,u);if(!(void 0===x?b===E||a(b,E,r,n,u):x)){y=!1;break}g||(g="constructor"==m)}if(y&&!g){var A=e.constructor,S=t.constructor;A!=S&&"constructor"in e&&"constructor"in t&&!("function"==typeof A&&A instanceof A&&"function"==typeof S&&S instanceof S)&&(y=!1)}return u.delete(e),u.delete(t),y}var i=r(27),s=1,a=Object.prototype,o=a.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e){return i(e,a,s)}var i=r(249),s=r(169),a=r(27);e.exports=n},function(e,t,r){"use strict";function n(e){return i(e,a,s)}var i=r(249),s=r(260),a=r(46);e.exports=n},function(e,t,r){"use strict";function n(e){for(var t=s(e),r=t.length;r--;){var n=t[r],a=e[n];t[r]=[n,a,i(a)]}return t}var i=r(264),s=r(27);e.exports=n},function(e,t,r){"use strict";function n(e){var t=a.call(e,u),r=e[u];try{e[u]=void 0;var n=!0}catch(e){}var i=o.call(e);return n&&(t?e[u]=r:delete e[u]),i}var i=r(44),s=Object.prototype,a=s.hasOwnProperty,o=s.toString,u=i?i.toStringTag:void 0;e.exports=n},function(e,t){"use strict";function r(e,t){return null==e?void 0:e[t]}e.exports=r},function(e,t){"use strict";function r(e){return c.test(e)}var n="\\ud800-\\udfff",i="\\u0300-\\u036f",s="\\ufe20-\\ufe2f",a="\\u20d0-\\u20ff",o=i+s+a,u="\\ufe0e\\ufe0f",l="\\u200d",c=RegExp("["+l+n+o+u+"]");e.exports=r},function(e,t,r){"use strict";function n(){this.__data__=i?i(null):{},this.size=0}var i=r(108);e.exports=n},function(e,t){"use strict";function r(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}e.exports=r},function(e,t,r){"use strict";function n(e){var t=this.__data__;if(i){var r=t[e];return r===s?void 0:r}return o.call(t,e)?t[e]:void 0}var i=r(108),s="__lodash_hash_undefined__",a=Object.prototype,o=a.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e){var t=this.__data__;return i?void 0!==t[e]:a.call(t,e)}var i=r(108),s=Object.prototype,a=s.hasOwnProperty;e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=i&&void 0===t?s:t,this}var i=r(108),s="__lodash_hash_undefined__";e.exports=n},function(e,t){"use strict";function r(e){var t=e.length,r=e.constructor(t);return t&&"string"==typeof e[0]&&i.call(e,"index")&&(r.index=e.index,r.input=e.input),r}var n=Object.prototype,i=n.hasOwnProperty;e.exports=r},function(e,t,r){"use strict";function n(e,t,r,n){var P=e.constructor;switch(t){case b:return i(e);case f:case p:return new P((+e));case E:return s(e,n);case x:case A:case S:case _:case D:case C:case w:case F:case k:return c(e,n);case d:return a(e,n,r);case h:case y:return new P(e);case m:return o(e);case v:return u(e,n,r);case g:return l(e)}}var i=r(166),s=r(507),a=r(508),o=r(509),u=r(510),l=r(511),c=r(255),f="[object Boolean]",p="[object Date]",d="[object Map]",h="[object Number]",m="[object RegExp]",v="[object Set]",y="[object String]",g="[object Symbol]",b="[object ArrayBuffer]",E="[object DataView]",x="[object Float32Array]",A="[object Float64Array]",S="[object Int8Array]",_="[object Int16Array]",D="[object Int32Array]",C="[object Uint8Array]",w="[object Uint8ClampedArray]",F="[object Uint16Array]",k="[object Uint32Array]";e.exports=n},function(e,t,r){"use strict";function n(e){return a(e)||s(e)||!!(o&&e&&e[o])}var i=r(44),s=r(114),a=r(6),o=i?i.isConcatSpreadable:void 0;e.exports=n},function(e,t){"use strict";function r(e){var t="undefined"==typeof e?"undefined":n(e);return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=r},function(e,t,r){"use strict";function n(e){return!!s&&s in e}var i=r(516),s=function(){var e=/[^.]+$/.exec(i&&i.keys&&i.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();e.exports=n},function(e,t){"use strict";function r(){this.__data__=[],this.size=0}e.exports=r},function(e,t,r){"use strict";function n(e){var t=this.__data__,r=i(t,e);if(r<0)return!1;var n=t.length-1;return r==n?t.pop():a.call(t,r,1),--this.size,!0}var i=r(101),s=Array.prototype,a=s.splice;e.exports=n},function(e,t,r){"use strict";function n(e){var t=this.__data__,r=i(t,e);return r<0?void 0:t[r][1]}var i=r(101);e.exports=n},function(e,t,r){"use strict";function n(e){return i(this.__data__,e)>-1}var i=r(101);e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=this.__data__,n=i(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this}var i=r(101);e.exports=n},function(e,t,r){"use strict";function n(){this.size=0,this.__data__={hash:new i,map:new(a||s),string:new i}}var i=r(461),s=r(99),a=r(158);e.exports=n},function(e,t,r){"use strict";function n(e){var t=i(this,e).delete(e);return this.size-=t?1:0,t}var i=r(106);e.exports=n},function(e,t,r){"use strict";function n(e){return i(this,e).get(e)}var i=r(106);e.exports=n},function(e,t,r){"use strict";function n(e){return i(this,e).has(e)}var i=r(106);e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=i(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this}var i=r(106);e.exports=n},function(e,t,r){"use strict";function n(e){var t=i(e,function(e){return r.size===s&&r.clear(),e}),r=t.cache;return t}var i=r(584),s=500;e.exports=n},function(e,t,r){"use strict";var n=r(173),i=n(Object.keys,Object);e.exports=i},function(e,t){"use strict";function r(e){var t=[];if(null!=e)for(var r in Object(e))t.push(r);return t}e.exports=r},function(e,t){"use strict";function r(e){return i.call(e)}var n=Object.prototype,i=n.toString;e.exports=r},function(e,t,r){"use strict";function n(e,t,r){return t=s(void 0===t?e.length-1:t,0),function(){for(var n=arguments,a=-1,o=s(n.length-t,0),u=Array(o);++a<o;)u[a]=n[t+a];a=-1;for(var l=Array(t+1);++a<t;)l[a]=n[a];return l[t]=r(u),i(e,this,l)}}var i=r(241),s=Math.max;e.exports=n},function(e,t){"use strict";function r(e){return this.__data__.set(e,n),this}var n="__lodash_hash_undefined__";e.exports=r},function(e,t){"use strict";function r(e){return this.__data__.has(e)}e.exports=r},function(e,t,r){"use strict";var n=r(498),i=r(556),s=i(n);e.exports=s},function(e,t){"use strict";function r(e){var t=0,r=0;return function(){var a=s(),o=i-(a-r);if(r=a,o>0){if(++t>=n)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}var n=800,i=16,s=Date.now;e.exports=r},function(e,t,r){"use strict";function n(){this.__data__=new i,this.size=0}var i=r(99);e.exports=n},function(e,t){"use strict";function r(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r}e.exports=r},function(e,t){"use strict";function r(e){return this.__data__.get(e)}e.exports=r},function(e,t){"use strict";function r(e){return this.__data__.has(e)}e.exports=r},function(e,t,r){"use strict";function n(e,t){var r=this.__data__;if(r instanceof i){var n=r.__data__;if(!s||n.length<o-1)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new a(n)}return r.set(e,t),this.size=r.size,this}var i=r(99),s=r(158),a=r(159),o=200;e.exports=n},function(e,t){"use strict";function r(e,t,r){for(var n=r-1,i=e.length;++n<i;)if(e[n]===t)return n;return-1}e.exports=r},function(e,t,r){"use strict";function n(e){return s(e)?a(e):i(e)}var i=r(469),s=r(527),a=r(565);e.exports=n},function(e,t,r){"use strict";var n=r(548),i=/^\./,s=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,a=/\\(\\)?/g,o=n(function(e){var t=[];return i.test(e)&&t.push(""),e.replace(s,function(e,r,n,i){t.push(n?i.replace(a,"$1"):r||e)}),t});e.exports=o},function(e,t){"use strict";function r(e){return e.match(A)||[]}var n="\\ud800-\\udfff",i="\\u0300-\\u036f",s="\\ufe20-\\ufe2f",a="\\u20d0-\\u20ff",o=i+s+a,u="\\ufe0e\\ufe0f",l="["+n+"]",c="["+o+"]",f="\\ud83c[\\udffb-\\udfff]",p="(?:"+c+"|"+f+")",d="[^"+n+"]",h="(?:\\ud83c[\\udde6-\\uddff]){2}",m="[\\ud800-\\udbff][\\udc00-\\udfff]",v="\\u200d",y=p+"?",g="["+u+"]?",b="(?:"+v+"(?:"+[d,h,m].join("|")+")"+g+y+")*",E=g+y+b,x="(?:"+[d+c+"?",c,h,m,l].join("|")+")",A=RegExp(f+"(?="+f+")|"+x+E,"g");e.exports=r},function(e,t,r){"use strict";var n=r(31),i=r(105),s=r(46),a=i(function(e,t){n(t,s(t),e)});e.exports=a},function(e,t,r){"use strict";var n=r(31),i=r(105),s=r(46),a=i(function(e,t,r,i){n(t,s(t),e,i)});e.exports=a},function(e,t,r){"use strict";function n(e){return i(e,s|a)}var i=r(163),s=1,a=4;e.exports=n},function(e,t,r){"use strict";function n(e,t){return t="function"==typeof t?t:void 0,i(e,s|a,t)}var i=r(163),s=1,a=4;e.exports=n},function(e,t){"use strict";function r(e){for(var t=-1,r=null==e?0:e.length,n=0,i=[];++t<r;){var s=e[t];s&&(i[n++]=s)}return i}e.exports=r},function(e,t){"use strict";function r(e){return function(){return e}}e.exports=r},function(e,t,r){"use strict";function n(e){return e=i(e),e&&a.test(e)?e.replace(s,"\\$&"):e}var i=r(62),s=/[\\^$.*+?()[\]{}|]/g,a=RegExp(s.source);e.exports=n},function(e,t,r){"use strict";e.exports=r(566)},function(e,t,r){"use strict";var n=r(256),i=r(575),s=n(i);e.exports=s},function(e,t,r){"use strict";function n(e,t,r){var n=null==e?0:e.length;if(!n)return-1;var u=null==r?0:a(r);return u<0&&(u=o(n+u,0)),i(e,s(t,3),u)}var i=r(164),s=r(59),a=r(47),o=Math.max;e.exports=n},function(e,t,r){"use strict";var n=r(256),i=r(577),s=n(i);e.exports=s},function(e,t,r){"use strict";function n(e,t,r){var n=null==e?0:e.length;if(!n)return-1;var l=n-1;return void 0!==r&&(l=a(r),l=r<0?o(n+l,0):u(l,n-1)),i(e,s(t,3),l,!0)}var i=r(164),s=r(59),a=r(47),o=Math.max,u=Math.min;e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=o(e)?i:s;return r(e,a(t))}var i=r(242),s=r(246),a=r(504),o=r(6);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){var n=null==e?void 0:i(e,t);return void 0===n?r:n}var i=r(248);e.exports=n},function(e,t,r){"use strict";function n(e,t){return null!=e&&s(e,t,i)}var i=r(478),s=r(262);e.exports=n},function(e,t,r){"use strict";function n(e){return s(e)&&i(e)}var i=r(26),s=r(13);e.exports=n},function(e,t,r){"use strict";function n(e){return"number"==typeof e&&e==i(e)}var i=r(47);e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=o(e)?i:a;return r(e,s(t,3))}var i=r(58),s=r(59),a=r(251),o=r(6);e.exports=n},function(e,t,r){"use strict";function n(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError(s);var r=function r(){var n=arguments,i=t?t.apply(this,n):n[0],s=r.cache;if(s.has(i))return s.get(i);var a=e.apply(this,n);return r.cache=s.set(i,a)||s,a};return r.cache=new(n.Cache||i),r}var i=r(159),s="Expected a function";n.Cache=i,e.exports=n},function(e,t,r){"use strict";var n=r(491),i=r(105),s=i(function(e,t,r,i){n(e,t,r,i)});e.exports=s},function(e,t){"use strict";function r(){}e.exports=r},function(e,t,r){"use strict";function n(e){return a(e)?i(o(e)):s(e)}var i=r(494),s=r(495),a=r(172),o=r(110);e.exports=n},function(e,t,r){"use strict";function n(e,t){return e&&e.length&&t&&t.length?i(e,t):e}var i=r(496);e.exports=n},function(e,t,r){"use strict";var n=r(475),i=r(493),s=r(103),a=r(171),o=s(function(e,t){if(null==e)return[];var r=t.length;return r>1&&a(e,t[0],t[1])?t=[]:r>2&&a(t[0],t[1],t[2])&&(t=[t[0]]),i(e,n(t,1),[])});e.exports=o},function(e,t,r){"use strict";function n(e,t,r){return e=o(e),r=i(a(r),0,e.length),t=s(t),e.slice(r,r+t.length)==t}var i=r(473),s=r(165),a=r(47),o=r(62);e.exports=n},function(e,t){"use strict";function r(){return!1}e.exports=r},function(e,t,r){"use strict";function n(e){if(!e)return 0===e?e:0;if(e=i(e),e===s||e===-s){var t=e<0?-1:1;return t*a}return e===e?e:0}var i=r(593),s=1/0,a=1.7976931348623157e308;e.exports=n},function(e,t,r){"use strict";function n(e){if("number"==typeof e)return e;if(s(e))return a;if(i(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=i(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var r=l.test(e);return r||c.test(e)?f(e.slice(2),r?2:8):u.test(e)?a:+e}var i=r(12),s=r(61),a=NaN,o=/^\s+|\s+$/g,u=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,c=/^0o[0-7]+$/i,f=parseInt;e.exports=n},function(e,t,r){"use strict";function n(e){return i(e,s(e))}var i=r(31),s=r(46);e.exports=n},function(e,t,r){"use strict";function n(e,t,r){if(e=u(e),e&&(r||void 0===t))return e.replace(l,"");if(!e||!(t=i(t)))return e;var n=o(e),c=a(n,o(t))+1;return s(n,0,c).join("")}var i=r(165),s=r(505),a=r(506),o=r(563),u=r(62),l=/\s+$/;e.exports=n},function(e,t,r){"use strict";function n(e){return e&&e.length?i(e):[]}var i=r(502);e.exports=n},function(e,t,r){"use strict";function n(e){return e.split("").reduce(function(e,t){return e[t]=!0,e},{})}function i(e,t){return t=t||{},function(r,n,i){return a(r,e,t)}}function s(e,t){e=e||{},t=t||{};var r={};return Object.keys(t).forEach(function(e){r[e]=t[e]}),Object.keys(e).forEach(function(t){r[t]=e[t]}),r}function a(e,t,r){if("string"!=typeof t)throw new TypeError("glob pattern string required");return r||(r={}),!(!r.nocomment&&"#"===t.charAt(0))&&(""===t.trim()?""===e:new o(t,r).match(e))}function o(e,t){if(!(this instanceof o))return new o(e,t);if("string"!=typeof e)throw new TypeError("glob pattern string required");t||(t={}),e=e.trim(),"/"!==v.sep&&(e=e.split(v.sep).join("/")),this.options=t,this.set=[],this.pattern=e,this.regexp=null,this.negate=!1,this.comment=!1,this.empty=!1,this.make()}function u(){if(!this._made){var e=this.pattern,t=this.options;if(!t.nocomment&&"#"===e.charAt(0))return void(this.comment=!0);if(!e)return void(this.empty=!0);this.parseNegate();var r=this.globSet=this.braceExpand();t.debug&&(this.debug=console.error),this.debug(this.pattern,r),r=this.globParts=r.map(function(e){return e.split(D)}),this.debug(this.pattern,r),r=r.map(function(e,t,r){return e.map(this.parse,this)},this),this.debug(this.pattern,r),r=r.filter(function(e){return e.indexOf(!1)===-1}),this.debug(this.pattern,r),this.set=r}}function l(){var e=this.pattern,t=!1,r=this.options,n=0;if(!r.nonegate){for(var i=0,s=e.length;i<s&&"!"===e.charAt(i);i++)t=!t,n++;n&&(this.pattern=e.substr(n)),this.negate=t}}function c(e,t){if(t||(t=this instanceof o?this.options:{}),e="undefined"==typeof e?this.pattern:e,"undefined"==typeof e)throw new TypeError("undefined pattern");return t.nobrace||!e.match(/\{.*\}/)?[e]:g(e)}function f(e,t){function r(){if(i){switch(i){case"*":a+=x,o=!0;break;case"?":a+=E,o=!0;break;default:a+="\\"+i}v.debug("clearStateChar %j %j",i,a),i=!1}}if(e.length>65536)throw new TypeError("pattern is too long");var n=this.options;if(!n.noglobstar&&"**"===e)return y;if(""===e)return"";for(var i,s,a="",o=!!n.nocase,u=!1,l=[],c=[],f=!1,p=-1,d=-1,m="."===e.charAt(0)?"":n.dot?"(?!(?:^|\\/)\\.{1,2}(?:$|\\/))":"(?!\\.)",v=this,g=0,A=e.length;g<A&&(s=e.charAt(g));g++)if(this.debug("%s\t%s %s %j",e,g,a,s),u&&_[s])a+="\\"+s,u=!1;else switch(s){case"/":return!1;case"\\":r(),u=!0;continue;case"?":case"*":case"+":case"@":case"!":if(this.debug("%s\t%s %s %j <-- stateChar",e,g,a,s),f){this.debug("  in class"),"!"===s&&g===d+1&&(s="^"),a+=s;continue}v.debug("call clearStateChar %j",i),r(),i=s,n.noext&&r();continue;case"(":if(f){a+="(";continue}if(!i){a+="\\(";continue}l.push({type:i,start:g-1,reStart:a.length,open:b[i].open,close:b[i].close}),a+="!"===i?"(?:(?!(?:":"(?:",this.debug("plType %j %j",i,a),i=!1;continue;case")":if(f||!l.length){a+="\\)";continue}r(),o=!0;var S=l.pop();a+=S.close,"!"===S.type&&c.push(S),S.reEnd=a.length;continue;case"|":if(f||!l.length||u){a+="\\|",u=!1;continue}r(),a+="|";continue;case"[":if(r(),f){a+="\\"+s;continue}f=!0,d=g,p=a.length,a+=s;continue;case"]":if(g===d+1||!f){a+="\\"+s,u=!1;continue}if(f){var D=e.substring(d+1,g);try{RegExp("["+D+"]")}catch(e){var w=this.parse(D,C);a=a.substr(0,p)+"\\["+w[0]+"\\]",o=o||w[1],f=!1;continue}}o=!0,f=!1,a+=s;continue;default:r(),u?u=!1:!_[s]||"^"===s&&f||(a+="\\"),a+=s}for(f&&(D=e.substr(d+1),w=this.parse(D,C),a=a.substr(0,p)+"\\["+w[0],o=o||w[1]),S=l.pop();S;S=l.pop()){var F=a.slice(S.reStart+S.open.length);this.debug("setting tail",a,S),F=F.replace(/((?:\\{2}){0,64})(\\?)\|/g,function(e,t,r){return r||(r="\\"),t+t+r+"|"}),this.debug("tail=%j\n   %s",F,F,S,a);var k="*"===S.type?x:"?"===S.type?E:"\\"+S.type;o=!0,a=a.slice(0,S.reStart)+k+"\\("+F}r(),u&&(a+="\\\\");var P=!1;switch(a.charAt(0)){case".":case"[":case"(":P=!0}for(var T=c.length-1;T>-1;T--){var O=c[T],B=a.slice(0,O.reStart),R=a.slice(O.reStart,O.reEnd-8),I=a.slice(O.reEnd-8,O.reEnd),M=a.slice(O.reEnd);I+=M;var N=B.split("(").length-1,L=M;for(g=0;g<N;g++)L=L.replace(/\)[+*?]?/,"");M=L;var j="";""===M&&t!==C&&(j="$");var U=B+R+M+j+I;a=U}if(""!==a&&o&&(a="(?=.)"+a),P&&(a=m+a),t===C)return[a,o];if(!o)return h(e);var V=n.nocase?"i":"";try{var G=new RegExp("^"+a+"$",V)}catch(e){return new RegExp("$.")}return G._glob=e,G._src=a,G}function p(){if(this.regexp||this.regexp===!1)return this.regexp;var e=this.set;if(!e.length)return this.regexp=!1,this.regexp;var t=this.options,r=t.noglobstar?x:t.dot?A:S,n=t.nocase?"i":"",i=e.map(function(e){return e.map(function(e){return e===y?r:"string"==typeof e?m(e):e._src}).join("\\/")}).join("|");i="^(?:"+i+")$",this.negate&&(i="^(?!"+i+").*$");try{this.regexp=new RegExp(i,n)}catch(e){this.regexp=!1}return this.regexp}function d(e,t){if(this.debug("match",e,this.pattern),this.comment)return!1;if(this.empty)return""===e;if("/"===e&&t)return!0;var r=this.options;"/"!==v.sep&&(e=e.split(v.sep).join("/")),e=e.split(D),this.debug(this.pattern,"split",e);var n=this.set;this.debug(this.pattern,"set",n);var i,s;for(s=e.length-1;s>=0&&!(i=e[s]);s--);for(s=0;s<n.length;s++){var a=n[s],o=e;r.matchBase&&1===a.length&&(o=[i]);var u=this.matchOne(o,a,t);if(u)return!!r.flipNegate||!this.negate}return!r.flipNegate&&this.negate}function h(e){return e.replace(/\\(.)/g,"$1")}function m(e){return e.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&")}e.exports=a,a.Minimatch=o;var v={sep:"/"};try{v=r(17)}catch(e){}var y=a.GLOBSTAR=o.GLOBSTAR={},g=r(391),b={"!":{open:"(?:(?!(?:",close:"))[^/]*?)"},"?":{open:"(?:",close:")?"},"+":{open:"(?:",close:")+"},"*":{open:"(?:",close:")*"},"@":{open:"(?:",close:")"}},E="[^/]",x=E+"*?",A="(?:(?!(?:\\/|^)(?:\\.{1,2})($|\\/)).)*?",S="(?:(?!(?:\\/|^)\\.).)*?",_=n("().*{}+?[]^$\\!"),D=/\/+/;a.filter=i,a.defaults=function(e){if(!e||!Object.keys(e).length)return a;var t=a,r=function(r,n,i){return t.minimatch(r,n,s(e,i))};return r.Minimatch=function(r,n){return new t.Minimatch(r,s(e,n))},r},o.defaults=function(e){return e&&Object.keys(e).length?a.defaults(e).Minimatch:o},o.prototype.debug=function(){},o.prototype.make=u,o.prototype.parseNegate=l,a.braceExpand=function(e,t){return c(e,t)},o.prototype.braceExpand=c,o.prototype.parse=f;var C={};a.makeRe=function(e,t){return new o(e,t||{}).makeRe()},o.prototype.makeRe=p,a.match=function(e,t,r){r=r||{};var n=new o(t,r);return e=e.filter(function(e){return n.match(e)}),n.options.nonull&&!e.length&&e.push(t),e},o.prototype.match=d,o.prototype.matchOne=function(e,t,r){var n=this.options;this.debug("matchOne",{this:this,file:e,pattern:t}),this.debug("matchOne",e.length,t.length);for(var i=0,s=0,a=e.length,o=t.length;i<a&&s<o;i++,s++){this.debug("matchOne loop");var u=t[s],l=e[i];if(this.debug(t,u,l),u===!1)return!1;if(u===y){this.debug("GLOBSTAR",[t,u,l]);var c=i,f=s+1;if(f===o){for(this.debug("** at the end");i<a;i++)if("."===e[i]||".."===e[i]||!n.dot&&"."===e[i].charAt(0))return!1;return!0}for(;c<a;){var p=e[c];if(this.debug("\nglobstar while",e,c,t,f,p),this.matchOne(e.slice(c),t.slice(f),r))return this.debug("globstar found match!",c,a,p),!0;if("."===p||".."===p||!n.dot&&"."===p.charAt(0)){this.debug("dot detected!",e,c,t,f);break}this.debug("globstar swallow a segment, and continue"),c++}return!(!r||(this.debug("\n>>> no match, partial?",e,c,t,f),c!==a))}var d;if("string"==typeof u?(d=n.nocase?l.toLowerCase()===u.toLowerCase():l===u,this.debug("string match",u,l,d)):(d=l.match(u),this.debug("pattern match",u,l,d)),!d)return!1}if(i===a&&s===o)return!0;if(i===a)return r;if(s===o){var h=i===a-1&&""===e[i];return h}throw new Error("wtf?")}},function(e,t){"use strict";function r(e){if(e=String(e),!(e.length>1e4)){var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(t){var r=parseFloat(t[1]),n=(t[2]||"ms").toLowerCase();switch(n){case"years":case"year":case"yrs":case"yr":case"y":return r*f;case"days":case"day":case"d":return r*c;case"hours":case"hour":case"hrs":case"hr":case"h":return r*l;case"minutes":case"minute":case"mins":case"min":case"m":return r*u;case"seconds":case"second":case"secs":case"sec":case"s":return r*o;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return r;default:return}}}}function n(e){return e>=c?Math.round(e/c)+"d":e>=l?Math.round(e/l)+"h":e>=u?Math.round(e/u)+"m":e>=o?Math.round(e/o)+"s":e+"ms"}function i(e){return s(e,c,"day")||s(e,l,"hour")||s(e,u,"minute")||s(e,o,"second")||e+" ms"}function s(e,t,r){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+r:Math.ceil(e/t)+" "+r+"s"}var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=1e3,u=60*o,l=60*u,c=24*l,f=365.25*c;e.exports=function(e,t){t=t||{};var s="undefined"==typeof e?"undefined":a(e);if("string"===s&&e.length>0)return r(e);if("number"===s&&isNaN(e)===!1)return t.long?i(e):n(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},function(e,t){"use strict";e.exports=Number.isNaN||function(e){return e!==e}},function(e,t,r){(function(t){"use strict";function r(e){return"/"===e.charAt(0)}function n(e){var t=/^([a-zA-Z]:|[\\\/]{2}[^\\\/]+[\\\/]+[^\\\/]+)?([\\\/])?([\s\S]*?)$/,r=t.exec(e),n=r[1]||"",i=Boolean(n&&":"!==n.charAt(1));return Boolean(r[2]||i)}e.exports="win32"===t.platform?n:r,e.exports.posix=r,e.exports.win32=n}).call(t,r(18))},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}var s=r(20),a=i(s),o=r(1),u=n(o),l=Object.prototype.hasOwnProperty;t.hoist=function(e){function t(e,t){u.assertVariableDeclaration(e);var n=[];return e.declarations.forEach(function(e){r[e.id.name]=u.identifier(e.id.name),e.init?n.push(u.assignmentExpression("=",e.id,e.init)):t&&n.push(e.id)}),0===n.length?null:1===n.length?n[0]:u.sequenceExpression(n)}u.assertFunction(e.node);var r={};e.get("body").traverse({VariableDeclaration:{exit:function(e){var r=t(e.node,!1);null===r?e.remove():e.replaceWith(u.expressionStatement(r)),e.skip()}},ForStatement:function(e){var r=e.node.init;u.isVariableDeclaration(r)&&e.get("init").replaceWith(t(r,!1))},ForXStatement:function(e){var r=e.get("left");r.isVariableDeclaration()&&r.replaceWith(t(r.node,!0))},FunctionDeclaration:function(e){var t=e.node;r[t.id.name]=t.id;var n=u.expressionStatement(u.assignmentExpression("=",t.id,u.functionExpression(t.id,t.params,t.body,t.generator,t.expression)));e.parentPath.isBlockStatement()?(e.parentPath.unshiftContainer("body",n),e.remove()):e.replaceWith(n),e.skip()},FunctionExpression:function(e){e.skip()}});var n={};e.get("params").forEach(function(e){var t=e.node;u.isIdentifier(t)&&(n[t.name]=t)});var i=[];return(0,a.default)(r).forEach(function(e){l.call(n,e)||i.push(u.variableDeclarator(r[e],null))}),0===i.length?null:u.variableDeclaration("var",i)}},function(e,t,r){"use strict";t.__esModule=!0,t.default=function(){return r(605)}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(){m.default.ok(this instanceof s)}function a(e){s.call(this),y.assertLiteral(e),this.returnLoc=e}function o(e,t,r){s.call(this),y.assertLiteral(e),y.assertLiteral(t),r?y.assertIdentifier(r):r=null,this.breakLoc=e,this.continueLoc=t,this.label=r}function u(e){s.call(this),y.assertLiteral(e),this.breakLoc=e}function l(e,t,r){s.call(this),y.assertLiteral(e),t?m.default.ok(t instanceof c):t=null,r?m.default.ok(r instanceof f):r=null,m.default.ok(t||r),this.firstLoc=e,this.catchEntry=t,this.finallyEntry=r}function c(e,t){s.call(this),y.assertLiteral(e),y.assertIdentifier(t),this.firstLoc=e,this.paramId=t}function f(e,t){s.call(this),y.assertLiteral(e),y.assertLiteral(t),this.firstLoc=e,this.afterLoc=t}function p(e,t){s.call(this),y.assertLiteral(e),y.assertIdentifier(t),this.breakLoc=e,this.label=t}function d(e){m.default.ok(this instanceof d);var t=r(281).Emitter;m.default.ok(e instanceof t),this.emitter=e,this.entryStack=[new a(e.finalLoc)]}var h=r(64),m=i(h),v=r(1),y=n(v),g=r(118);(0,g.inherits)(a,s),t.FunctionEntry=a,(0,g.inherits)(o,s),t.LoopEntry=o,(0,g.inherits)(u,s),t.SwitchEntry=u,(0,g.inherits)(l,s),t.TryEntry=l,(0,g.inherits)(c,s),t.CatchEntry=c,(0,g.inherits)(f,s),t.FinallyEntry=f,(0,g.inherits)(p,s),t.LabeledEntry=p;var b=d.prototype;t.LeapManager=d,b.withEntry=function(e,t){m.default.ok(e instanceof s),this.entryStack.push(e);try{t.call(this.emitter)}finally{var r=this.entryStack.pop();m.default.strictEqual(r,e)}},b._findLeapLocation=function(e,t){for(var r=this.entryStack.length-1;r>=0;--r){var n=this.entryStack[r],i=n[e];
+if(i)if(t){if(n.label&&n.label.name===t.name)return i}else if(!(n instanceof p))return i}return null},b.getBreakLoc=function(e){return this._findLeapLocation("breakLoc",e)},b.getContinueLoc=function(e){return this._findLeapLocation("continueLoc",e)}},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e,t){function r(e){function t(e){return r||(Array.isArray(e)?e.some(t):l.isNode(e)&&(o.default.strictEqual(r,!1),r=n(e))),r}l.assertNode(e);var r=!1,i=l.VISITOR_KEYS[e.type];if(i)for(var s=0;s<i.length;s++){var a=i[s],u=e[a];t(u)}return r}function n(n){l.assertNode(n);var i=c(n);return f.call(i,e)?i[e]:f.call(p,n.type)?i[e]=!1:f.call(t,n.type)?i[e]=!0:i[e]=r(n)}return n.onlyChildren=r,n}var a=r(64),o=i(a),u=r(1),l=n(u),c=r(279).makeAccessor(),f=Object.prototype.hasOwnProperty,p={FunctionExpression:!0},d={CallExpression:!0,ForInStatement:!0,UnaryExpression:!0,BinaryExpression:!0,AssignmentExpression:!0,UpdateExpression:!0,NewExpression:!0},h={YieldExpression:!0,BreakStatement:!0,ContinueStatement:!0,ReturnStatement:!0,ThrowStatement:!0};for(var m in h)f.call(h,m)&&(d[m]=h[m]);t.hasSideEffects=s("hasSideEffects",d),t.containsLeap=s("containsLeap",h)},function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function s(e){var t=e.node;if(f.assertFunction(t),t.id||(t.id=e.scope.parent.generateUidIdentifier("callee")),t.generator&&f.isFunctionDeclaration(t)){var r=e.findParent(function(e){return e.isProgram()||e.isBlockStatement()});if(!r)return t.id;var n=a(r),i=n.declarations[0].id,s=n.declarations[0].init.callee.object;f.assertArrayExpression(s);var o=s.elements.length;return s.elements.push(t.id),f.memberExpression(i,f.numericLiteral(o),!0)}return t.id}function a(e){var t=e.node;l.default.ok(Array.isArray(t.body));var r=v(t);return r.decl?r.decl:(r.decl=f.variableDeclaration("var",[f.variableDeclarator(e.scope.generateUidIdentifier("marked"),f.callExpression(f.memberExpression(f.arrayExpression([]),f.identifier("map"),!1),[m.runtimeProperty("mark")]))]),e.unshiftContainer("body",r.decl),r.decl)}function o(e,t){var r={didRenameArguments:!1,argsId:t};return e.traverse(y,r),r.didRenameArguments}var u=r(64),l=i(u),c=r(1),f=n(c),p=r(601),d=r(281),h=r(282),m=n(h),v=r(279).makeAccessor();t.visitor={Function:{exit:function(e,t){var r=e.node;if(r.generator){if(r.async){if(t.opts.asyncGenerators===!1)return}else if(t.opts.generators===!1)return}else{if(!r.async)return;if(t.opts.async===!1)return}var n=e.scope.generateUidIdentifier("context"),i=e.scope.generateUidIdentifier("args");e.ensureBlock();var a=e.get("body");r.async&&a.traverse(b),a.traverse(g,{context:n});var u=[],l=[];a.get("body").forEach(function(e){var t=e.node;f.isExpressionStatement(t)&&f.isStringLiteral(t.expression)?u.push(t):t&&null!=t._blockHoist?u.push(t):l.push(t)}),u.length>0&&(a.node.body=l);var c=s(e);f.assertIdentifier(r.id);var h=f.identifier(r.id.name+"$"),v=(0,p.hoist)(e),y=o(e,i);y&&(v=v||f.variableDeclaration("var",[]),v.declarations.push(f.variableDeclarator(i,f.identifier("arguments"))));var E=new d.Emitter(n);E.explode(e.get("body")),v&&v.declarations.length>0&&u.push(v);var x=[E.getContextFunction(h),r.generator?c:f.nullLiteral(),f.thisExpression()],A=E.getTryLocsList();A&&x.push(A);var S=f.callExpression(m.runtimeProperty(r.async?"async":"wrap"),x);u.push(f.returnStatement(S)),r.body=f.blockStatement(u);var _=a.node.directives;_&&(r.body.directives=_);var D=r.generator;D&&(r.generator=!1),r.async&&(r.async=!1),D&&f.isExpression(r)&&e.replaceWith(f.callExpression(m.runtimeProperty("mark"),[r])),e.requeue()}}};var y={"FunctionExpression|FunctionDeclaration":function(e){e.skip()},Identifier:function(e,t){"arguments"===e.node.name&&m.isReference(e)&&(e.replaceWith(t.argsId),t.didRenameArguments=!0)}},g={MetaProperty:function(e){var t=e.node;"function"===t.meta.name&&"sent"===t.property.name&&e.replaceWith(f.memberExpression(this.context,f.identifier("_sent")))}},b={Function:function(e){e.skip()},AwaitExpression:function(e){var t=e.node.argument;e.replaceWith(f.yieldExpression(f.callExpression(m.runtimeProperty("awrap"),[t]),!1))}}},function(e,t,r){"use strict";var n=r(280);t.REGULAR={d:n().addRange(48,57),D:n().addRange(0,47).addRange(58,65535),s:n(32,160,5760,8239,8287,12288,65279).addRange(9,13).addRange(8192,8202).addRange(8232,8233),S:n().addRange(0,8).addRange(14,31).addRange(33,159).addRange(161,5759).addRange(5761,8191).addRange(8203,8231).addRange(8234,8238).addRange(8240,8286).addRange(8288,12287).addRange(12289,65278).addRange(65280,65535),w:n(95).addRange(48,57).addRange(65,90).addRange(97,122),W:n(96).addRange(0,47).addRange(58,64).addRange(91,94).addRange(123,65535)},t.UNICODE={d:n().addRange(48,57),D:n().addRange(0,47).addRange(58,1114111),s:n(32,160,5760,8239,8287,12288,65279).addRange(9,13).addRange(8192,8202).addRange(8232,8233),S:n().addRange(0,8).addRange(14,31).addRange(33,159).addRange(161,5759).addRange(5761,8191).addRange(8203,8231).addRange(8234,8238).addRange(8240,8286).addRange(8288,12287).addRange(12289,65278).addRange(65280,1114111),w:n(95).addRange(48,57).addRange(65,90).addRange(97,122),W:n(96).addRange(0,47).addRange(58,64).addRange(91,94).addRange(123,1114111)},t.UNICODE_IGNORE_CASE={d:n().addRange(48,57),D:n().addRange(0,47).addRange(58,1114111),s:n(32,160,5760,8239,8287,12288,65279).addRange(9,13).addRange(8192,8202).addRange(8232,8233),S:n().addRange(0,8).addRange(14,31).addRange(33,159).addRange(161,5759).addRange(5761,8191).addRange(8203,8231).addRange(8234,8238).addRange(8240,8286).addRange(8288,12287).addRange(12289,65278).addRange(65280,1114111),w:n(95,383,8490).addRange(48,57).addRange(65,90).addRange(97,122),W:n(75,83,96).addRange(0,47).addRange(58,64).addRange(91,94).addRange(123,1114111)}},function(e,t,r){"use strict";function n(e){return S?A?m.UNICODE_IGNORE_CASE[e]:m.UNICODE[e]:m.REGULAR[e]}function i(e,t){return y.call(e,t)}function s(e,t){for(var r in t)e[r]=t[r]}function a(e,t){if(t){var r=p(t,"");switch(r.type){case"characterClass":case"group":case"value":break;default:r=o(r,t)}s(e,r)}}function o(e,t){return{type:"group",behavior:"ignore",body:[e],raw:"(?:"+t+")"}}function u(e){return!!i(h,e)&&h[e]}function l(e){var t=d();e.body.forEach(function(e){switch(e.type){case"value":if(t.add(e.codePoint),A&&S){var r=u(e.codePoint);r&&t.add(r)}break;case"characterClassRange":var i=e.min.codePoint,s=e.max.codePoint;t.addRange(i,s),A&&S&&t.iuAddRange(i,s);break;case"characterClassEscape":t.add(n(e.value));break;default:throw Error("Unknown term type: "+e.type)}});return e.negative&&(t=(S?g:b).clone().remove(t)),a(e,t.toString()),e}function c(e){switch(e.type){case"dot":a(e,(S?E:x).toString());break;case"characterClass":e=l(e);break;case"characterClassEscape":a(e,n(e.value).toString());break;case"alternative":case"disjunction":case"group":case"quantifier":e.body=e.body.map(c);break;case"value":var t=e.codePoint,r=d(t);if(A&&S){var i=u(t);i&&r.add(i)}a(e,r.toString());break;case"anchor":case"empty":case"group":case"reference":break;default:throw Error("Unknown term type: "+e.type)}return e}var f=r(608).generate,p=r(609).parse,d=r(280),h=r(625),m=r(606),v={},y=v.hasOwnProperty,g=d().addRange(0,1114111),b=d().addRange(0,65535),E=g.clone().remove(10,13,8232,8233),x=E.clone().intersection(b);d.prototype.iuAddRange=function(e,t){var r=this;do{var n=u(e);n&&r.add(n)}while(++e<=t);return r};var A=!1,S=!1;e.exports=function(e,t){var r=p(e,t);return A=!!t&&t.indexOf("i")>-1,S=!!t&&t.indexOf("u")>-1,s(r,c(r)),f(r)}},function(e,t,r){var n;(function(e,i){"use strict";var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};(function(){function a(){var e,t,r=16384,n=[],i=-1,s=arguments.length;if(!s)return"";for(var a="";++i<s;){var o=Number(arguments[i]);if(!isFinite(o)||o<0||o>1114111||k(o)!=o)throw RangeError("Invalid code point: "+o);o<=65535?n.push(o):(o-=65536,e=(o>>10)+55296,t=o%1024+56320,n.push(e,t)),(i+1==s||n.length>r)&&(a+=F.apply(null,n),n.length=0)}return a}function o(e,t){if(t.indexOf("|")==-1){if(e==t)return;throw Error("Invalid node type: "+e)}if(t=o.hasOwnProperty(t)?o[t]:o[t]=RegExp("^(?:"+t+")$"),!t.test(e))throw Error("Invalid node type: "+e)}function u(e){var t=e.type;if(u.hasOwnProperty(t)&&"function"==typeof u[t])return u[t](e);throw Error("Invalid node type: "+t)}function l(e){o(e.type,"alternative");var t=e.body,r=t?t.length:0;if(1==r)return x(t[0]);for(var n=-1,i="";++n<r;)i+=x(t[n]);return i}function c(e){switch(o(e.type,"anchor"),e.kind){case"start":return"^";case"end":return"$";case"boundary":return"\\b";case"not-boundary":return"\\B";default:throw Error("Invalid assertion")}}function f(e){return o(e.type,"anchor|characterClass|characterClassEscape|dot|group|reference|value"),u(e)}function p(e){o(e.type,"characterClass");var t=e.body,r=t?t.length:0,n=-1,i="[";for(e.negative&&(i+="^");++n<r;)i+=m(t[n]);return i+="]"}function d(e){return o(e.type,"characterClassEscape"),"\\"+e.value}function h(e){o(e.type,"characterClassRange");var t=e.min,r=e.max;if("characterClassRange"==t.type||"characterClassRange"==r.type)throw Error("Invalid character class range");return m(t)+"-"+m(r)}function m(e){return o(e.type,"anchor|characterClassEscape|characterClassRange|dot|value"),u(e)}function v(e){o(e.type,"disjunction");var t=e.body,r=t?t.length:0;if(0==r)throw Error("No body");if(1==r)return u(t[0]);for(var n=-1,i="";++n<r;)0!=n&&(i+="|"),i+=u(t[n]);return i}function y(e){return o(e.type,"dot"),"."}function g(e){o(e.type,"group");var t="(";switch(e.behavior){case"normal":break;case"ignore":t+="?:";break;case"lookahead":t+="?=";break;case"negativeLookahead":t+="?!";break;default:throw Error("Invalid behaviour: "+e.behaviour)}var r=e.body,n=r?r.length:0;if(1==n)t+=u(r[0]);else for(var i=-1;++i<n;)t+=u(r[i]);return t+=")"}function b(e){o(e.type,"quantifier");var t="",r=e.min,n=e.max;switch(n){case void 0:case null:switch(r){case 0:t="*";break;case 1:t="+";break;default:t="{"+r+",}"}break;default:t=r==n?"{"+r+"}":0==r&&1==n?"?":"{"+r+","+n+"}"}return e.greedy||(t+="?"),f(e.body[0])+t}function E(e){return o(e.type,"reference"),"\\"+e.matchIndex}function x(e){return o(e.type,"anchor|characterClass|characterClassEscape|empty|group|quantifier|reference|value"),u(e)}function A(e){o(e.type,"value");var t=e.kind,r=e.codePoint;switch(t){case"controlLetter":return"\\c"+a(r+64);case"hexadecimalEscape":return"\\x"+("00"+r.toString(16).toUpperCase()).slice(-2);case"identifier":return"\\"+a(r);case"null":return"\\"+r;case"octal":return"\\"+r.toString(8);case"singleEscape":switch(r){case 8:return"\\b";case 9:return"\\t";case 10:return"\\n";case 11:return"\\v";case 12:return"\\f";case 13:return"\\r";default:throw Error("Invalid codepoint: "+r)}case"symbol":return a(r);case"unicodeEscape":return"\\u"+("0000"+r.toString(16).toUpperCase()).slice(-4);case"unicodeCodePointEscape":return"\\u{"+r.toString(16).toUpperCase()+"}";default:throw Error("Unsupported node kind: "+t)}}var S={function:!0,object:!0},_=S["undefined"==typeof window?"undefined":s(window)]&&window||this,D=S[s(t)]&&t,C=S[s(e)]&&e&&!e.nodeType&&e,w=D&&C&&"object"==("undefined"==typeof i?"undefined":s(i))&&i;!w||w.global!==w&&w.window!==w&&w.self!==w||(_=w);var F=String.fromCharCode,k=Math.floor;u.alternative=l,u.anchor=c,u.characterClass=p,u.characterClassEscape=d,u.characterClassRange=h,u.disjunction=v,u.dot=y,u.group=g,u.quantifier=b,u.reference=E,u.value=A,"object"==s(r(48))&&r(48)?(n=function(){return{generate:u}}.call(t,r,t,e),!(void 0!==n&&(e.exports=n))):D&&C?D.generate=u:_.regjsgen={generate:u}}).call(void 0)}).call(t,r(39)(e),function(){return this}())},function(e,t){"use strict";!function(){function t(e,t){function r(t){return t.raw=e.substring(t.range[0],t.range[1]),t}function n(e,t){return e.range[0]=t,r(e)}function i(e,t){return r({type:"anchor",kind:e,range:[$-t,$]})}function s(e,t,n,i){return r({type:"value",kind:e,codePoint:t,range:[n,i]})}function a(e,t,r,n){return n=n||0,s(e,t,$-(r.length+n),$)}function o(e){var t=e[0],r=t.charCodeAt(0);if(z){var n;if(1===t.length&&r>=55296&&r<=56319&&(n=x().charCodeAt(0),n>=56320&&n<=57343))return $++,s("symbol",1024*(r-55296)+n-56320+65536,$-2,$)}return s("symbol",r,$-1,$)}function u(e,t,n){return r({type:"disjunction",body:e,range:[t,n]})}function l(){return r({type:"dot",range:[$-1,$]})}function c(e){return r({type:"characterClassEscape",value:e,range:[$-2,$]})}function f(e){return r({type:"reference",matchIndex:parseInt(e,10),range:[$-1-e.length,$]})}function p(e,t,n,i){return r({type:"group",behavior:e,body:t,range:[n,i]})}function d(e,t,n,i){return null==i&&(n=$-1,i=$),r({type:"quantifier",min:e,max:t,greedy:!0,body:null,range:[n,i]})}function h(e,t,n){return r({type:"alternative",body:e,range:[t,n]})}function m(e,t,n,i){return r({type:"characterClass",body:e,negative:t,range:[n,i]})}function v(e,t,n,i){return e.codePoint>t.codePoint&&K("invalid range in character class",e.raw+"-"+t.raw,n,i),r({type:"characterClassRange",min:e,max:t,range:[n,i]})}function y(e){return"alternative"===e.type?e.body:[e]}function g(t){t=t||1;var r=e.substring($,$+t);return $+=t||1,r}function b(e){E(e)||K("character",e)}function E(t){if(e.indexOf(t,$)===$)return g(t.length)}function x(){return e[$]}function A(t){return e.indexOf(t,$)===$}function S(t){return e[$+1]===t}function _(t){var r=e.substring($),n=r.match(t);return n&&(n.range=[],n.range[0]=$,g(n[0].length),n.range[1]=$),n}function D(){var e=[],t=$;for(e.push(C());E("|");)e.push(C());return 1===e.length?e[0]:u(e,t,$)}function C(){for(var e,t=[],r=$;e=w();)t.push(e);return 1===t.length?t[0]:h(t,r,$)}function w(){if($>=e.length||A("|")||A(")"))return null;var t=k();if(t)return t;var r=T();r||K("Expected atom");var i=P()||!1;return i?(i.body=y(r),n(i,r.range[0]),i):r}function F(e,t,r,n){var i=null,s=$;if(E(e))i=t;else{if(!E(r))return!1;i=n}var a=D();a||K("Expected disjunction"),b(")");var o=p(i,y(a),s,$);return"normal"==i&&X&&J++,o}function k(){return E("^")?i("start",1):E("$")?i("end",1):E("\\b")?i("boundary",2):E("\\B")?i("not-boundary",2):F("(?=","lookahead","(?!","negativeLookahead")}function P(){var e,t,r,n,i=$;return E("*")?t=d(0):E("+")?t=d(1):E("?")?t=d(0,1):(e=_(/^\{([0-9]+)\}/))?(r=parseInt(e[1],10),t=d(r,r,e.range[0],e.range[1])):(e=_(/^\{([0-9]+),\}/))?(r=parseInt(e[1],10),t=d(r,void 0,e.range[0],e.range[1])):(e=_(/^\{([0-9]+),([0-9]+)\}/))&&(r=parseInt(e[1],10),n=parseInt(e[2],10),r>n&&K("numbers out of order in {} quantifier","",i,$),t=d(r,n,e.range[0],e.range[1])),t&&E("?")&&(t.greedy=!1,t.range[1]+=1),t}function T(){var e;return(e=_(/^[^^$\\.*+?(){[|]/))?o(e):E(".")?l():E("\\")?(e=R(),e||K("atomEscape"),e):(e=j())?e:F("(?:","ignore","(","normal")}function O(e){if(z){var t,n;if("unicodeEscape"==e.kind&&(t=e.codePoint)>=55296&&t<=56319&&A("\\")&&S("u")){var i=$;$++;var s=B();"unicodeEscape"==s.kind&&(n=s.codePoint)>=56320&&n<=57343?(e.range[1]=s.range[1],e.codePoint=1024*(t-55296)+n-56320+65536,e.type="value",e.kind="unicodeCodePointEscape",r(e)):$=i}}return e}function B(){return R(!0)}function R(e){var t,r=$;if(t=I())return t;if(e){if(E("b"))return a("singleEscape",8,"\\b");E("B")&&K("\\B not possible inside of CharacterClass","",r)}return t=M()}function I(){var e,t;if(e=_(/^(?!0)\d+/)){t=e[0];var r=parseInt(e[0],10);return r<=J?f(e[0]):(H.push(r),g(-e[0].length),(e=_(/^[0-7]{1,3}/))?a("octal",parseInt(e[0],8),e[0],1):(e=o(_(/^[89]/)),n(e,e.range[0]-1)))}return(e=_(/^[0-7]{1,3}/))?(t=e[0],/^0{1,3}$/.test(t)?a("null",0,"0",t.length+1):a("octal",parseInt(t,8),t,1)):!!(e=_(/^[dDsSwW]/))&&c(e[0])}function M(){var e;if(e=_(/^[fnrtv]/)){var t=0;switch(e[0]){case"t":t=9;break;case"n":t=10;break;case"v":t=11;break;case"f":t=12;break;case"r":t=13}return a("singleEscape",t,"\\"+e[0])}return(e=_(/^c([a-zA-Z])/))?a("controlLetter",e[1].charCodeAt(0)%32,e[1],2):(e=_(/^x([0-9a-fA-F]{2})/))?a("hexadecimalEscape",parseInt(e[1],16),e[1],2):(e=_(/^u([0-9a-fA-F]{4})/))?O(a("unicodeEscape",parseInt(e[1],16),e[1],2)):z&&(e=_(/^u\{([0-9a-fA-F]+)\}/))?a("unicodeCodePointEscape",parseInt(e[1],16),e[1],4):L()}function N(e){var t=new RegExp("[ªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮ̀-ʹͶͷͺ-ͽͿΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁ҃-҇Ҋ-ԯԱ-Ֆՙա-և֑-ׇֽֿׁׂׅׄא-תװ-ײؐ-ؚؠ-٩ٮ-ۓە-ۜ۟-۪ۨ-ۼۿܐ-݊ݍ-ޱ߀-ߵߺࠀ-࠭ࡀ-࡛ࢠ-ࢲࣤ-ॣ०-९ॱ-ঃঅ-ঌএঐও-নপ-রলশ-হ়-ৄেৈো-ৎৗড়ঢ়য়-ৣ০-ৱਁ-ਃਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹ਼ਾ-ੂੇੈੋ-੍ੑਖ਼-ੜਫ਼੦-ੵઁ-ઃઅ-ઍએ-ઑઓ-નપ-રલળવ-હ઼-ૅે-ૉો-્ૐૠ-ૣ૦-૯ଁ-ଃଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହ଼-ୄେୈୋ-୍ୖୗଡ଼ଢ଼ୟ-ୣ୦-୯ୱஂஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹா-ூெ-ைொ-்ௐௗ௦-௯ఀ-ఃఅ-ఌఎ-ఐఒ-నప-హఽ-ౄె-ైొ-్ౕౖౘౙౠ-ౣ౦-౯ಁ-ಃಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹ಼-ೄೆ-ೈೊ-್ೕೖೞೠ-ೣ೦-೯ೱೲഁ-ഃഅ-ഌഎ-ഐഒ-ഺഽ-ൄെ-ൈൊ-ൎൗൠ-ൣ൦-൯ൺ-ൿංඃඅ-ඖක-නඳ-රලව-ෆ්ා-ුූෘ-ෟ෦-෯ෲෳก-ฺเ-๎๐-๙ກຂຄງຈຊຍດ-ທນ-ຟມ-ຣລວສຫອ-ູົ-ຽເ-ໄໆ່-ໍ໐-໙ໜ-ໟༀ༘༙༠-༩༹༵༷༾-ཇཉ-ཬཱ-྄྆-ྗྙ-ྼ࿆က-၉ၐ-ႝႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚ፝-፟ᎀ-ᎏᎠ-Ᏼᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᛮ-ᛸᜀ-ᜌᜎ-᜔ᜠ-᜴ᝀ-ᝓᝠ-ᝬᝮ-ᝰᝲᝳក-៓ៗៜ៝០-៩᠋-᠍᠐-᠙ᠠ-ᡷᢀ-ᢪᢰ-ᣵᤀ-ᤞᤠ-ᤫᤰ-᤻᥆-ᥭᥰ-ᥴᦀ-ᦫᦰ-ᧉ᧐-᧙ᨀ-ᨛᨠ-ᩞ᩠-᩿᩼-᪉᪐-᪙ᪧ᪰-᪽ᬀ-ᭋ᭐-᭙᭫-᭳ᮀ-᯳ᰀ-᰷᱀-᱉ᱍ-ᱽ᳐-᳔᳒-ᳶ᳸᳹ᴀ-᷵᷼-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼ‌‍‿⁀⁔ⁱⁿₐ-ₜ⃐-⃥⃜⃡-⃰ℂℇℊ-ℓℕℙ-ℝℤΩℨK-ℭℯ-ℹℼ-ℿⅅ-ⅉⅎⅠ-ↈⰀ-Ⱞⰰ-ⱞⱠ-ⳤⳫ-ⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯ⵿-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞⷠ-ⷿⸯ々-〇〡-〯〱-〵〸-〼ぁ-ゖ゙゚ゝ-ゟァ-ヺー-ヿㄅ-ㄭㄱ-ㆎㆠ-ㆺㇰ-ㇿ㐀-䶵一-鿌ꀀ-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘫꙀ-꙯ꙴ-꙽ꙿ-ꚝꚟ-꛱ꜗ-ꜟꜢ-ꞈꞋ-ꞎꞐ-ꞭꞰꞱꟷ-ꠧꡀ-ꡳꢀ-꣄꣐-꣙꣠-ꣷꣻ꤀-꤭ꤰ-꥓ꥠ-ꥼꦀ-꧀ꧏ-꧙ꧠ-ꧾꨀ-ꨶꩀ-ꩍ꩐-꩙ꩠ-ꩶꩺ-ꫂꫛ-ꫝꫠ-ꫯꫲ-꫶ꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꬰ-ꭚꭜ-ꭟꭤꭥꯀ-ꯪ꯬꯭꯰-꯹가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ff-stﬓ-ﬗיִ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻ︀-️︠-︭︳︴﹍-﹏ﹰ-ﹴﹶ-ﻼ０-９Ａ-Ｚ＿ａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ]");return 36===e||95===e||e>=65&&e<=90||e>=97&&e<=122||e>=48&&e<=57||92===e||e>=128&&t.test(String.fromCharCode(e))}function L(){var e,t="‌",r="‍";return N(x())?E(t)?a("identifier",8204,t):E(r)?a("identifier",8205,r):null:(e=g(),a("identifier",e.charCodeAt(0),e,1))}function j(){var e,t=$;return(e=_(/^\[\^/))?(e=U(),b("]"),m(e,!0,t,$)):E("[")?(e=U(),b("]"),m(e,!1,t,$)):null}function U(){var e;return A("]")?[]:(e=G(),e||K("nonEmptyClassRanges"),e)}function V(e){var t,r,n;if(A("-")&&!S("]")){b("-"),n=Y(),n||K("classAtom"),r=$;var i=U();return i||K("classRanges"),t=e.range[0],"empty"===i.type?[v(e,n,t,r)]:[v(e,n,t,r)].concat(i)}return n=W(),n||K("nonEmptyClassRangesNoDash"),[e].concat(n)}function G(){var e=Y();return e||K("classAtom"),A("]")?[e]:V(e)}function W(){var e=Y();return e||K("classAtom"),A("]")?e:V(e)}function Y(){return E("-")?o("-"):q()}function q(){var e;return(e=_(/^[^\\\]-]/))?o(e[0]):E("\\")?(e=B(),e||K("classEscape"),O(e)):void 0}function K(t,r,n,i){n=null==n?$:n,i=null==i?n:i;var s=Math.max(0,n-10),a=Math.min(i+10,e.length),o="    "+e.substring(s,a),u="    "+new Array(n-s+1).join(" ")+"^";throw SyntaxError(t+" at position "+n+(r?": "+r:"")+"\n"+o+"\n"+u)}var H=[],J=0,X=!0,z=(t||"").indexOf("u")!==-1,$=0;e=String(e),""===e&&(e="(?:)");var Q=D();Q.range[1]!==e.length&&K("Could not parse entire input - got stuck","",Q.range[1]);for(var Z=0;Z<H.length;Z++)if(H[Z]<=J)return $=0,X=!1,D();return Q}var r={parse:t};"undefined"!=typeof e&&e.exports?e.exports=r:window.regjsparser=r}()},function(e,t,r){"use strict";var n=r(455);e.exports=function(e,t){if("string"!=typeof e)throw new TypeError("Expected `input` to be a string");if(t<0||!n(t))throw new TypeError("Expected `count` to be a positive finite number");var r="";do 1&t&&(r+=e),e+=e;while(t>>=1);return r}},function(e,t){"use strict";var r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split("");t.encode=function(e){if(0<=e&&e<r.length)return r[e];throw new TypeError("Must be between 0 and 63: "+e)},t.decode=function(e){var t=65,r=90,n=97,i=122,s=48,a=57,o=43,u=47,l=26,c=52;return t<=e&&e<=r?e-t:n<=e&&e<=i?e-n+l:s<=e&&e<=a?e-s+c:e==o?62:e==u?63:-1}},function(e,t){"use strict";function r(e,n,i,s,a,o){var u=Math.floor((n-e)/2)+e,l=a(i,s[u],!0);return 0===l?u:l>0?n-u>1?r(u,n,i,s,a,o):o==t.LEAST_UPPER_BOUND?n<s.length?n:-1:u:u-e>1?r(e,u,i,s,a,o):o==t.LEAST_UPPER_BOUND?u:e<0?-1:e}t.GREATEST_LOWER_BOUND=1,t.LEAST_UPPER_BOUND=2,t.search=function(e,n,i,s){if(0===n.length)return-1;var a=r(-1,n.length,e,n,i,s||t.GREATEST_LOWER_BOUND);if(a<0)return-1;for(;a-1>=0&&0===i(n[a],n[a-1],!0);)--a;return a}},function(e,t,r){"use strict";function n(e,t){var r=e.generatedLine,n=t.generatedLine,i=e.generatedColumn,a=t.generatedColumn;return n>r||n==r&&a>=i||s.compareByGeneratedPositionsInflated(e,t)<=0}function i(){this._array=[],this._sorted=!0,this._last={generatedLine:-1,generatedColumn:0}}var s=r(63);i.prototype.unsortedForEach=function(e,t){this._array.forEach(e,t)},i.prototype.add=function(e){n(this._last,e)?(this._last=e,this._array.push(e)):(this._sorted=!1,this._array.push(e))},i.prototype.toArray=function(){return this._sorted||(this._array.sort(s.compareByGeneratedPositionsInflated),this._sorted=!0),this._array},t.MappingList=i},function(e,t){"use strict";function r(e,t,r){var n=e[t];e[t]=e[r],e[r]=n}function n(e,t){return Math.round(e+Math.random()*(t-e))}function i(e,t,s,a){if(s<a){var o=n(s,a),u=s-1;r(e,o,a);for(var l=e[a],c=s;c<a;c++)t(e[c],l)<=0&&(u+=1,r(e,u,c));r(e,u+1,c);var f=u+1;i(e,t,s,f-1),i(e,t,f+1,a)}}t.quickSort=function(e,t){i(e,t,0,e.length-1)}},function(e,t,r){"use strict";function n(e){var t=e;return"string"==typeof e&&(t=JSON.parse(e.replace(/^\)\]\}'/,""))),null!=t.sections?new a(t):new i(t)}function i(e){var t=e;"string"==typeof e&&(t=JSON.parse(e.replace(/^\)\]\}'/,"")));var r=o.getArg(t,"version"),n=o.getArg(t,"sources"),i=o.getArg(t,"names",[]),s=o.getArg(t,"sourceRoot",null),a=o.getArg(t,"sourcesContent",null),u=o.getArg(t,"mappings"),c=o.getArg(t,"file",null);if(r!=this._version)throw new Error("Unsupported version: "+r);n=n.map(String).map(o.normalize).map(function(e){return s&&o.isAbsolute(s)&&o.isAbsolute(e)?o.relative(s,e):e}),this._names=l.fromArray(i.map(String),!0),this._sources=l.fromArray(n,!0),this.sourceRoot=s,this.sourcesContent=a,this._mappings=u,this.file=c}function s(){this.generatedLine=0,this.generatedColumn=0,this.source=null,this.originalLine=null,this.originalColumn=null,this.name=null}function a(e){var t=e;"string"==typeof e&&(t=JSON.parse(e.replace(/^\)\]\}'/,"")));var r=o.getArg(t,"version"),i=o.getArg(t,"sections");if(r!=this._version)throw new Error("Unsupported version: "+r);this._sources=new l,this._names=new l;var s={line:-1,column:0};this._sections=i.map(function(e){if(e.url)throw new Error("Support for url field in sections not implemented.");var t=o.getArg(e,"offset"),r=o.getArg(t,"line"),i=o.getArg(t,"column");if(r<s.line||r===s.line&&i<s.column)throw new Error("Section offsets must be ordered and non-overlapping.");return s=t,{generatedOffset:{generatedLine:r+1,generatedColumn:i+1},consumer:new n(o.getArg(e,"map"))}})}var o=r(63),u=r(612),l=r(284).ArraySet,c=r(285),f=r(614).quickSort;n.fromSourceMap=function(e){return i.fromSourceMap(e)},n.prototype._version=3,n.prototype.__generatedMappings=null,Object.defineProperty(n.prototype,"_generatedMappings",{get:function(){return this.__generatedMappings||this._parseMappings(this._mappings,this.sourceRoot),this.__generatedMappings}}),n.prototype.__originalMappings=null,Object.defineProperty(n.prototype,"_originalMappings",{get:function(){return this.__originalMappings||this._parseMappings(this._mappings,this.sourceRoot),this.__originalMappings}}),n.prototype._charIsMappingSeparator=function(e,t){var r=e.charAt(t);return";"===r||","===r},n.prototype._parseMappings=function(e,t){throw new Error("Subclasses must implement _parseMappings")},n.GENERATED_ORDER=1,n.ORIGINAL_ORDER=2,n.GREATEST_LOWER_BOUND=1,n.LEAST_UPPER_BOUND=2,n.prototype.eachMapping=function(e,t,r){var i,s=t||null,a=r||n.GENERATED_ORDER;switch(a){case n.GENERATED_ORDER:i=this._generatedMappings;break;case n.ORIGINAL_ORDER:i=this._originalMappings;break;default:throw new Error("Unknown order of iteration.")}var u=this.sourceRoot;i.map(function(e){var t=null===e.source?null:this._sources.at(e.source);return null!=t&&null!=u&&(t=o.join(u,t)),{source:t,generatedLine:e.generatedLine,generatedColumn:e.generatedColumn,originalLine:e.originalLine,originalColumn:e.originalColumn,name:null===e.name?null:this._names.at(e.name)}},this).forEach(e,s)},n.prototype.allGeneratedPositionsFor=function(e){var t=o.getArg(e,"line"),r={source:o.getArg(e,"source"),originalLine:t,originalColumn:o.getArg(e,"column",0)};if(null!=this.sourceRoot&&(r.source=o.relative(this.sourceRoot,r.source)),!this._sources.has(r.source))return[];r.source=this._sources.indexOf(r.source);var n=[],i=this._findMapping(r,this._originalMappings,"originalLine","originalColumn",o.compareByOriginalPositions,u.LEAST_UPPER_BOUND);if(i>=0){var s=this._originalMappings[i];if(void 0===e.column)for(var a=s.originalLine;s&&s.originalLine===a;)n.push({line:o.getArg(s,"generatedLine",null),column:o.getArg(s,"generatedColumn",null),lastColumn:o.getArg(s,"lastGeneratedColumn",null)}),s=this._originalMappings[++i];else for(var l=s.originalColumn;s&&s.originalLine===t&&s.originalColumn==l;)n.push({line:o.getArg(s,"generatedLine",null),column:o.getArg(s,"generatedColumn",null),lastColumn:o.getArg(s,"lastGeneratedColumn",null)}),s=this._originalMappings[++i]}return n},t.SourceMapConsumer=n,i.prototype=Object.create(n.prototype),i.prototype.consumer=n,i.fromSourceMap=function(e){var t=Object.create(i.prototype),r=t._names=l.fromArray(e._names.toArray(),!0),n=t._sources=l.fromArray(e._sources.toArray(),!0);t.sourceRoot=e._sourceRoot,t.sourcesContent=e._generateSourcesContent(t._sources.toArray(),t.sourceRoot),t.file=e._file;for(var a=e._mappings.toArray().slice(),u=t.__generatedMappings=[],c=t.__originalMappings=[],p=0,d=a.length;p<d;p++){var h=a[p],m=new s;m.generatedLine=h.generatedLine,m.generatedColumn=h.generatedColumn,h.source&&(m.source=n.indexOf(h.source),m.originalLine=h.originalLine,m.originalColumn=h.originalColumn,h.name&&(m.name=r.indexOf(h.name)),c.push(m)),u.push(m)}return f(t.__originalMappings,o.compareByOriginalPositions),t},i.prototype._version=3,Object.defineProperty(i.prototype,"sources",{get:function(){return this._sources.toArray().map(function(e){return null!=this.sourceRoot?o.join(this.sourceRoot,e):e},this)}}),i.prototype._parseMappings=function(e,t){for(var r,n,i,a,u,l=1,p=0,d=0,h=0,m=0,v=0,y=e.length,g=0,b={},E={},x=[],A=[];g<y;)if(";"===e.charAt(g))l++,g++,p=0;else if(","===e.charAt(g))g++;else{for(r=new s,r.generatedLine=l,a=g;a<y&&!this._charIsMappingSeparator(e,a);a++);if(n=e.slice(g,a),i=b[n])g+=n.length;else{for(i=[];g<a;)c.decode(e,g,E),u=E.value,g=E.rest,i.push(u);if(2===i.length)throw new Error("Found a source, but no line and column");if(3===i.length)throw new Error("Found a source and line, but no column");b[n]=i}r.generatedColumn=p+i[0],p=r.generatedColumn,i.length>1&&(r.source=m+i[1],m+=i[1],r.originalLine=d+i[2],d=r.originalLine,r.originalLine+=1,r.originalColumn=h+i[3],h=r.originalColumn,i.length>4&&(r.name=v+i[4],v+=i[4])),A.push(r),"number"==typeof r.originalLine&&x.push(r)}f(A,o.compareByGeneratedPositionsDeflated),this.__generatedMappings=A,f(x,o.compareByOriginalPositions),this.__originalMappings=x},i.prototype._findMapping=function(e,t,r,n,i,s){if(e[r]<=0)throw new TypeError("Line must be greater than or equal to 1, got "+e[r]);if(e[n]<0)throw new TypeError("Column must be greater than or equal to 0, got "+e[n]);return u.search(e,t,i,s)},i.prototype.computeColumnSpans=function(){for(var e=0;e<this._generatedMappings.length;++e){var t=this._generatedMappings[e];if(e+1<this._generatedMappings.length){var r=this._generatedMappings[e+1];if(t.generatedLine===r.generatedLine){t.lastGeneratedColumn=r.generatedColumn-1;continue}}t.lastGeneratedColumn=1/0}},i.prototype.originalPositionFor=function(e){var t={generatedLine:o.getArg(e,"line"),generatedColumn:o.getArg(e,"column")},r=this._findMapping(t,this._generatedMappings,"generatedLine","generatedColumn",o.compareByGeneratedPositionsDeflated,o.getArg(e,"bias",n.GREATEST_LOWER_BOUND));if(r>=0){var i=this._generatedMappings[r];if(i.generatedLine===t.generatedLine){var s=o.getArg(i,"source",null);null!==s&&(s=this._sources.at(s),null!=this.sourceRoot&&(s=o.join(this.sourceRoot,s)));var a=o.getArg(i,"name",null);return null!==a&&(a=this._names.at(a)),{source:s,line:o.getArg(i,"originalLine",null),column:o.getArg(i,"originalColumn",null),name:a}}}return{source:null,line:null,column:null,name:null}},i.prototype.hasContentsOfAllSources=function(){return!!this.sourcesContent&&(this.sourcesContent.length>=this._sources.size()&&!this.sourcesContent.some(function(e){return null==e}))},i.prototype.sourceContentFor=function(e,t){if(!this.sourcesContent)return null;if(null!=this.sourceRoot&&(e=o.relative(this.sourceRoot,e)),this._sources.has(e))return this.sourcesContent[this._sources.indexOf(e)];var r;if(null!=this.sourceRoot&&(r=o.urlParse(this.sourceRoot))){var n=e.replace(/^file:\/\//,"");if("file"==r.scheme&&this._sources.has(n))return this.sourcesContent[this._sources.indexOf(n)];if((!r.path||"/"==r.path)&&this._sources.has("/"+e))return this.sourcesContent[this._sources.indexOf("/"+e)]}if(t)return null;throw new Error('"'+e+'" is not in the SourceMap.')},i.prototype.generatedPositionFor=function(e){var t=o.getArg(e,"source");if(null!=this.sourceRoot&&(t=o.relative(this.sourceRoot,t)),!this._sources.has(t))return{line:null,column:null,lastColumn:null};t=this._sources.indexOf(t);var r={source:t,originalLine:o.getArg(e,"line"),originalColumn:o.getArg(e,"column")},i=this._findMapping(r,this._originalMappings,"originalLine","originalColumn",o.compareByOriginalPositions,o.getArg(e,"bias",n.GREATEST_LOWER_BOUND));if(i>=0){var s=this._originalMappings[i];if(s.source===r.source)return{line:o.getArg(s,"generatedLine",null),column:o.getArg(s,"generatedColumn",null),lastColumn:o.getArg(s,"lastGeneratedColumn",null)}}return{line:null,column:null,lastColumn:null}},t.BasicSourceMapConsumer=i,a.prototype=Object.create(n.prototype),a.prototype.constructor=n,a.prototype._version=3,Object.defineProperty(a.prototype,"sources",{get:function(){for(var e=[],t=0;t<this._sections.length;t++)for(var r=0;r<this._sections[t].consumer.sources.length;r++)e.push(this._sections[t].consumer.sources[r]);return e}}),a.prototype.originalPositionFor=function(e){var t={generatedLine:o.getArg(e,"line"),generatedColumn:o.getArg(e,"column")},r=u.search(t,this._sections,function(e,t){var r=e.generatedLine-t.generatedOffset.generatedLine;return r?r:e.generatedColumn-t.generatedOffset.generatedColumn}),n=this._sections[r];return n?n.consumer.originalPositionFor({line:t.generatedLine-(n.generatedOffset.generatedLine-1),column:t.generatedColumn-(n.generatedOffset.generatedLine===t.generatedLine?n.generatedOffset.generatedColumn-1:0),bias:e.bias}):{source:null,line:null,column:null,name:null}},a.prototype.hasContentsOfAllSources=function(){return this._sections.every(function(e){return e.consumer.hasContentsOfAllSources()})},a.prototype.sourceContentFor=function(e,t){for(var r=0;r<this._sections.length;r++){var n=this._sections[r],i=n.consumer.sourceContentFor(e,!0);if(i)return i}if(t)return null;throw new Error('"'+e+'" is not in the SourceMap.')},a.prototype.generatedPositionFor=function(e){for(var t=0;t<this._sections.length;t++){var r=this._sections[t];if(r.consumer.sources.indexOf(o.getArg(e,"source"))!==-1){var n=r.consumer.generatedPositionFor(e);if(n){var i={line:n.line+(r.generatedOffset.generatedLine-1),column:n.column+(r.generatedOffset.generatedLine===n.line?r.generatedOffset.generatedColumn-1:0)};return i}}}return{line:null,column:null}},a.prototype._parseMappings=function(e,t){this.__generatedMappings=[],this.__originalMappings=[];for(var r=0;r<this._sections.length;r++)for(var n=this._sections[r],i=n.consumer._generatedMappings,s=0;s<i.length;s++){var a=i[s],u=n.consumer._sources.at(a.source);null!==n.consumer.sourceRoot&&(u=o.join(n.consumer.sourceRoot,u)),this._sources.add(u),u=this._sources.indexOf(u);var l=n.consumer._names.at(a.name);this._names.add(l),l=this._names.indexOf(l);var c={source:u,generatedLine:a.generatedLine+(n.generatedOffset.generatedLine-1),
+generatedColumn:a.generatedColumn+(n.generatedOffset.generatedLine===a.generatedLine?n.generatedOffset.generatedColumn-1:0),originalLine:a.originalLine,originalColumn:a.originalColumn,name:l};this.__generatedMappings.push(c),"number"==typeof c.originalLine&&this.__originalMappings.push(c)}f(this.__generatedMappings,o.compareByGeneratedPositionsDeflated),f(this.__originalMappings,o.compareByOriginalPositions)},t.IndexedSourceMapConsumer=a},function(e,t,r){"use strict";function n(e,t,r,n,i){this.children=[],this.sourceContents={},this.line=null==e?null:e,this.column=null==t?null:t,this.source=null==r?null:r,this.name=null==i?null:i,this[u]=!0,null!=n&&this.add(n)}var i=r(286).SourceMapGenerator,s=r(63),a=/(\r?\n)/,o=10,u="$$$isSourceNode$$$";n.fromStringWithSourceMap=function(e,t,r){function i(e,t){if(null===e||void 0===e.source)o.add(t);else{var i=r?s.join(r,e.source):e.source;o.add(new n(e.originalLine,e.originalColumn,i,t,e.name))}}var o=new n,u=e.split(a),l=function(){var e=u.shift(),t=u.shift()||"";return e+t},c=1,f=0,p=null;return t.eachMapping(function(e){if(null!==p){if(!(c<e.generatedLine)){var t=u[0],r=t.substr(0,e.generatedColumn-f);return u[0]=t.substr(e.generatedColumn-f),f=e.generatedColumn,i(p,r),void(p=e)}i(p,l()),c++,f=0}for(;c<e.generatedLine;)o.add(l()),c++;if(f<e.generatedColumn){var t=u[0];o.add(t.substr(0,e.generatedColumn)),u[0]=t.substr(e.generatedColumn),f=e.generatedColumn}p=e},this),u.length>0&&(p&&i(p,l()),o.add(u.join(""))),t.sources.forEach(function(e){var n=t.sourceContentFor(e);null!=n&&(null!=r&&(e=s.join(r,e)),o.setSourceContent(e,n))}),o},n.prototype.add=function(e){if(Array.isArray(e))e.forEach(function(e){this.add(e)},this);else{if(!e[u]&&"string"!=typeof e)throw new TypeError("Expected a SourceNode, string, or an array of SourceNodes and strings. Got "+e);e&&this.children.push(e)}return this},n.prototype.prepend=function(e){if(Array.isArray(e))for(var t=e.length-1;t>=0;t--)this.prepend(e[t]);else{if(!e[u]&&"string"!=typeof e)throw new TypeError("Expected a SourceNode, string, or an array of SourceNodes and strings. Got "+e);this.children.unshift(e)}return this},n.prototype.walk=function(e){for(var t,r=0,n=this.children.length;r<n;r++)t=this.children[r],t[u]?t.walk(e):""!==t&&e(t,{source:this.source,line:this.line,column:this.column,name:this.name})},n.prototype.join=function(e){var t,r,n=this.children.length;if(n>0){for(t=[],r=0;r<n-1;r++)t.push(this.children[r]),t.push(e);t.push(this.children[r]),this.children=t}return this},n.prototype.replaceRight=function(e,t){var r=this.children[this.children.length-1];return r[u]?r.replaceRight(e,t):"string"==typeof r?this.children[this.children.length-1]=r.replace(e,t):this.children.push("".replace(e,t)),this},n.prototype.setSourceContent=function(e,t){this.sourceContents[s.toSetString(e)]=t},n.prototype.walkSourceContents=function(e){for(var t=0,r=this.children.length;t<r;t++)this.children[t][u]&&this.children[t].walkSourceContents(e);for(var n=Object.keys(this.sourceContents),t=0,r=n.length;t<r;t++)e(s.fromSetString(n[t]),this.sourceContents[n[t]])},n.prototype.toString=function(){var e="";return this.walk(function(t){e+=t}),e},n.prototype.toStringWithSourceMap=function(e){var t={code:"",line:1,column:0},r=new i(e),n=!1,s=null,a=null,u=null,l=null;return this.walk(function(e,i){t.code+=e,null!==i.source&&null!==i.line&&null!==i.column?(s===i.source&&a===i.line&&u===i.column&&l===i.name||r.addMapping({source:i.source,original:{line:i.line,column:i.column},generated:{line:t.line,column:t.column},name:i.name}),s=i.source,a=i.line,u=i.column,l=i.name,n=!0):n&&(r.addMapping({generated:{line:t.line,column:t.column}}),s=null,n=!1);for(var c=0,f=e.length;c<f;c++)e.charCodeAt(c)===o?(t.line++,t.column=0,c+1===f?(s=null,n=!1):n&&r.addMapping({source:i.source,original:{line:i.line,column:i.column},generated:{line:t.line,column:t.column},name:i.name})):t.column++}),this.walkSourceContents(function(e,t){r.setSourceContent(e,t)}),{code:t.code,map:r}},t.SourceNode=n},function(e,t,r){"use strict";var n=r(180)();e.exports=function(e){return"string"==typeof e?e.replace(n,""):e}},function(e,t,r){(function(t){"use strict";var r=t.argv,n=r.indexOf("--"),i=function(e){e="--"+e;var t=r.indexOf(e);return t!==-1&&(n===-1||t<n)};e.exports=function(){return"FORCE_COLOR"in t.env||!(i("no-color")||i("no-colors")||i("color=false"))&&(!!(i("color")||i("colors")||i("color=true")||i("color=always"))||!(t.stdout&&!t.stdout.isTTY)&&("win32"===t.platform||("COLORTERM"in t.env||"dumb"!==t.env.TERM&&!!/^screen|^xterm|^vt100|color|ansi|cygwin|linux/i.test(t.env.TERM))))}()}).call(t,r(18))},function(e,t){"use strict";e.exports=function e(t){function r(){}r.prototype=t,new r}},function(e,t){"use strict";"function"==typeof Object.create?e.exports=function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:e.exports=function(e,t){e.super_=t;var r=function(){};r.prototype=t.prototype,e.prototype=new r,e.prototype.constructor=e}},function(e,t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=function(e){return e&&"object"===("undefined"==typeof e?"undefined":r(e))&&"function"==typeof e.copy&&"function"==typeof e.fill&&"function"==typeof e.readUInt8}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.version="6.21.0"},function(e,t){"use strict";function r(e,t){var r=void 0;return null!=t.url?r=t.url:(r="Inline Babel script",p++,p>1&&(r+=" ("+p+")")),e(t.content,l({filename:r},n(t))).code}function n(e){return{presets:e.presets||["react","es2015"],plugins:e.plugins||["transform-class-properties","transform-object-rest-spread","transform-flow-strip-types"],sourceMaps:"inline"}}function i(e,t){var n=document.createElement("script");n.text=r(e,t),f.appendChild(n)}function s(e,t,r){var n=new XMLHttpRequest;return n.open("GET",e,!0),"overrideMimeType"in n&&n.overrideMimeType("text/plain"),n.onreadystatechange=function(){if(4===n.readyState){if(0!==n.status&&200!==n.status)throw (r(), new Error("Could not load "+e));t(n.responseText)}},n.send(null);}function a(e,t){var r=e.getAttribute(t);return""===r?[]:r?r.split(",").map(function(e){return e.trim()}):null}function o(e,t){function r(){var t,r;for(r=0;r<o;r++)if(t=n[r],t.loaded&&!t.executed)t.executed=!0,i(e,t);else if(!t.loaded&&!t.error&&!t.async)break}var n=[],o=t.length;t.forEach(function(e,t){var i={async:e.hasAttribute("async"),error:!1,executed:!1,plugins:a(e,"data-plugins"),presets:a(e,"data-presets")};e.src?(n[t]=l({},i,{content:null,loaded:!1,url:e.src}),s(e.src,function(e){n[t].loaded=!0,n[t].content=e,r()},function(){n[t].error=!0,r()})):n[t]=l({},i,{content:e.innerHTML,loaded:!0,url:null})}),r()}function u(e){f=document.getElementsByTagName("head")[0];for(var t=document.getElementsByTagName("script"),r=[],n=0;n<t.length;n++){var i=t.item(n),s=i.type.split(";")[0];c.indexOf(s)!==-1&&r.push(i)}0!==r.length&&(console.warn("You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/"),o(e,r))}Object.defineProperty(t,"__esModule",{value:!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};t.runScripts=u;var c=["text/jsx","text/babel"],f=void 0,p=0},function(e,t){e.exports={builtin:{Array:!1,ArrayBuffer:!1,Boolean:!1,constructor:!1,DataView:!1,Date:!1,decodeURI:!1,decodeURIComponent:!1,encodeURI:!1,encodeURIComponent:!1,Error:!1,escape:!1,eval:!1,EvalError:!1,Float32Array:!1,Float64Array:!1,Function:!1,hasOwnProperty:!1,Infinity:!1,Int16Array:!1,Int32Array:!1,Int8Array:!1,isFinite:!1,isNaN:!1,isPrototypeOf:!1,JSON:!1,Map:!1,Math:!1,NaN:!1,Number:!1,Object:!1,parseFloat:!1,parseInt:!1,Promise:!1,propertyIsEnumerable:!1,Proxy:!1,RangeError:!1,ReferenceError:!1,Reflect:!1,RegExp:!1,Set:!1,String:!1,Symbol:!1,SyntaxError:!1,System:!1,toLocaleString:!1,toString:!1,TypeError:!1,Uint16Array:!1,Uint32Array:!1,Uint8Array:!1,Uint8ClampedArray:!1,undefined:!1,unescape:!1,URIError:!1,valueOf:!1,WeakMap:!1,WeakSet:!1},es5:{Array:!1,Boolean:!1,constructor:!1,Date:!1,decodeURI:!1,decodeURIComponent:!1,encodeURI:!1,encodeURIComponent:!1,Error:!1,escape:!1,eval:!1,EvalError:!1,Function:!1,hasOwnProperty:!1,Infinity:!1,isFinite:!1,isNaN:!1,isPrototypeOf:!1,JSON:!1,Math:!1,NaN:!1,Number:!1,Object:!1,parseFloat:!1,parseInt:!1,propertyIsEnumerable:!1,RangeError:!1,ReferenceError:!1,RegExp:!1,String:!1,SyntaxError:!1,toLocaleString:!1,toString:!1,TypeError:!1,undefined:!1,unescape:!1,URIError:!1,valueOf:!1},es6:{Array:!1,ArrayBuffer:!1,Boolean:!1,constructor:!1,DataView:!1,Date:!1,decodeURI:!1,decodeURIComponent:!1,encodeURI:!1,encodeURIComponent:!1,Error:!1,escape:!1,eval:!1,EvalError:!1,Float32Array:!1,Float64Array:!1,Function:!1,hasOwnProperty:!1,Infinity:!1,Int16Array:!1,Int32Array:!1,Int8Array:!1,isFinite:!1,isNaN:!1,isPrototypeOf:!1,JSON:!1,Map:!1,Math:!1,NaN:!1,Number:!1,Object:!1,parseFloat:!1,parseInt:!1,Promise:!1,propertyIsEnumerable:!1,Proxy:!1,RangeError:!1,ReferenceError:!1,Reflect:!1,RegExp:!1,Set:!1,String:!1,Symbol:!1,SyntaxError:!1,System:!1,toLocaleString:!1,toString:!1,TypeError:!1,Uint16Array:!1,Uint32Array:!1,Uint8Array:!1,Uint8ClampedArray:!1,undefined:!1,unescape:!1,URIError:!1,valueOf:!1,WeakMap:!1,WeakSet:!1},browser:{addEventListener:!1,alert:!1,AnalyserNode:!1,Animation:!1,AnimationEffectReadOnly:!1,AnimationEffectTiming:!1,AnimationEffectTimingReadOnly:!1,AnimationEvent:!1,AnimationPlaybackEvent:!1,AnimationTimeline:!1,applicationCache:!1,ApplicationCache:!1,ApplicationCacheErrorEvent:!1,atob:!1,Attr:!1,Audio:!1,AudioBuffer:!1,AudioBufferSourceNode:!1,AudioContext:!1,AudioDestinationNode:!1,AudioListener:!1,AudioNode:!1,AudioParam:!1,AudioProcessingEvent:!1,AutocompleteErrorEvent:!1,BarProp:!1,BatteryManager:!1,BeforeUnloadEvent:!1,BiquadFilterNode:!1,Blob:!1,blur:!1,btoa:!1,Cache:!1,caches:!1,CacheStorage:!1,cancelAnimationFrame:!1,CanvasGradient:!1,CanvasPattern:!1,CanvasRenderingContext2D:!1,CDATASection:!1,ChannelMergerNode:!1,ChannelSplitterNode:!1,CharacterData:!1,clearInterval:!1,clearTimeout:!1,clientInformation:!1,ClientRect:!1,ClientRectList:!1,ClipboardEvent:!1,close:!1,closed:!1,CloseEvent:!1,Comment:!1,CompositionEvent:!1,confirm:!1,console:!1,ConvolverNode:!1,Credential:!1,CredentialsContainer:!1,crypto:!1,Crypto:!1,CryptoKey:!1,CSS:!1,CSSAnimation:!1,CSSFontFaceRule:!1,CSSImportRule:!1,CSSKeyframeRule:!1,CSSKeyframesRule:!1,CSSMediaRule:!1,CSSPageRule:!1,CSSRule:!1,CSSRuleList:!1,CSSStyleDeclaration:!1,CSSStyleRule:!1,CSSStyleSheet:!1,CSSSupportsRule:!1,CSSTransition:!1,CSSUnknownRule:!1,CSSViewportRule:!1,customElements:!1,CustomEvent:!1,DataTransfer:!1,DataTransferItem:!1,DataTransferItemList:!1,Debug:!1,defaultStatus:!1,defaultstatus:!1,DelayNode:!1,DeviceMotionEvent:!1,DeviceOrientationEvent:!1,devicePixelRatio:!1,dispatchEvent:!1,document:!1,Document:!1,DocumentFragment:!1,DocumentTimeline:!1,DocumentType:!1,DOMError:!1,DOMException:!1,DOMImplementation:!1,DOMParser:!1,DOMSettableTokenList:!1,DOMStringList:!1,DOMStringMap:!1,DOMTokenList:!1,DragEvent:!1,DynamicsCompressorNode:!1,Element:!1,ElementTimeControl:!1,ErrorEvent:!1,event:!1,Event:!1,EventSource:!1,EventTarget:!1,external:!1,FederatedCredential:!1,fetch:!1,File:!1,FileError:!1,FileList:!1,FileReader:!1,find:!1,focus:!1,FocusEvent:!1,FontFace:!1,FormData:!1,frameElement:!1,frames:!1,GainNode:!1,Gamepad:!1,GamepadButton:!1,GamepadEvent:!1,getComputedStyle:!1,getSelection:!1,HashChangeEvent:!1,Headers:!1,history:!1,History:!1,HTMLAllCollection:!1,HTMLAnchorElement:!1,HTMLAppletElement:!1,HTMLAreaElement:!1,HTMLAudioElement:!1,HTMLBaseElement:!1,HTMLBlockquoteElement:!1,HTMLBodyElement:!1,HTMLBRElement:!1,HTMLButtonElement:!1,HTMLCanvasElement:!1,HTMLCollection:!1,HTMLContentElement:!1,HTMLDataListElement:!1,HTMLDetailsElement:!1,HTMLDialogElement:!1,HTMLDirectoryElement:!1,HTMLDivElement:!1,HTMLDListElement:!1,HTMLDocument:!1,HTMLElement:!1,HTMLEmbedElement:!1,HTMLFieldSetElement:!1,HTMLFontElement:!1,HTMLFormControlsCollection:!1,HTMLFormElement:!1,HTMLFrameElement:!1,HTMLFrameSetElement:!1,HTMLHeadElement:!1,HTMLHeadingElement:!1,HTMLHRElement:!1,HTMLHtmlElement:!1,HTMLIFrameElement:!1,HTMLImageElement:!1,HTMLInputElement:!1,HTMLIsIndexElement:!1,HTMLKeygenElement:!1,HTMLLabelElement:!1,HTMLLayerElement:!1,HTMLLegendElement:!1,HTMLLIElement:!1,HTMLLinkElement:!1,HTMLMapElement:!1,HTMLMarqueeElement:!1,HTMLMediaElement:!1,HTMLMenuElement:!1,HTMLMetaElement:!1,HTMLMeterElement:!1,HTMLModElement:!1,HTMLObjectElement:!1,HTMLOListElement:!1,HTMLOptGroupElement:!1,HTMLOptionElement:!1,HTMLOptionsCollection:!1,HTMLOutputElement:!1,HTMLParagraphElement:!1,HTMLParamElement:!1,HTMLPictureElement:!1,HTMLPreElement:!1,HTMLProgressElement:!1,HTMLQuoteElement:!1,HTMLScriptElement:!1,HTMLSelectElement:!1,HTMLShadowElement:!1,HTMLSourceElement:!1,HTMLSpanElement:!1,HTMLStyleElement:!1,HTMLTableCaptionElement:!1,HTMLTableCellElement:!1,HTMLTableColElement:!1,HTMLTableElement:!1,HTMLTableRowElement:!1,HTMLTableSectionElement:!1,HTMLTemplateElement:!1,HTMLTextAreaElement:!1,HTMLTitleElement:!1,HTMLTrackElement:!1,HTMLUListElement:!1,HTMLUnknownElement:!1,HTMLVideoElement:!1,IDBCursor:!1,IDBCursorWithValue:!1,IDBDatabase:!1,IDBEnvironment:!1,IDBFactory:!1,IDBIndex:!1,IDBKeyRange:!1,IDBObjectStore:!1,IDBOpenDBRequest:!1,IDBRequest:!1,IDBTransaction:!1,IDBVersionChangeEvent:!1,Image:!1,ImageBitmap:!1,ImageData:!1,indexedDB:!1,innerHeight:!1,innerWidth:!1,InputEvent:!1,InputMethodContext:!1,IntersectionObserver:!1,IntersectionObserverEntry:!1,Intl:!1,KeyboardEvent:!1,KeyframeEffect:!1,KeyframeEffectReadOnly:!1,length:!1,localStorage:!1,location:!1,Location:!1,locationbar:!1,matchMedia:!1,MediaElementAudioSourceNode:!1,MediaEncryptedEvent:!1,MediaError:!1,MediaKeyError:!1,MediaKeyEvent:!1,MediaKeyMessageEvent:!1,MediaKeys:!1,MediaKeySession:!1,MediaKeyStatusMap:!1,MediaKeySystemAccess:!1,MediaList:!1,MediaQueryList:!1,MediaQueryListEvent:!1,MediaSource:!1,MediaStream:!1,MediaStreamAudioDestinationNode:!1,MediaStreamAudioSourceNode:!1,MediaStreamEvent:!1,MediaStreamTrack:!1,menubar:!1,MessageChannel:!1,MessageEvent:!1,MessagePort:!1,MIDIAccess:!1,MIDIConnectionEvent:!1,MIDIInput:!1,MIDIInputMap:!1,MIDIMessageEvent:!1,MIDIOutput:!1,MIDIOutputMap:!1,MIDIPort:!1,MimeType:!1,MimeTypeArray:!1,MouseEvent:!1,moveBy:!1,moveTo:!1,MutationEvent:!1,MutationObserver:!1,MutationRecord:!1,name:!1,NamedNodeMap:!1,navigator:!1,Navigator:!1,Node:!1,NodeFilter:!1,NodeIterator:!1,NodeList:!1,Notification:!1,OfflineAudioCompletionEvent:!1,OfflineAudioContext:!1,offscreenBuffering:!1,onbeforeunload:!0,onblur:!0,onerror:!0,onfocus:!0,onload:!0,onresize:!0,onunload:!0,open:!1,openDatabase:!1,opener:!1,opera:!1,Option:!1,OscillatorNode:!1,outerHeight:!1,outerWidth:!1,PageTransitionEvent:!1,pageXOffset:!1,pageYOffset:!1,parent:!1,PasswordCredential:!1,Path2D:!1,performance:!1,Performance:!1,PerformanceEntry:!1,PerformanceMark:!1,PerformanceMeasure:!1,PerformanceNavigation:!1,PerformanceResourceTiming:!1,PerformanceTiming:!1,PeriodicWave:!1,Permissions:!1,PermissionStatus:!1,personalbar:!1,Plugin:!1,PluginArray:!1,PopStateEvent:!1,postMessage:!1,print:!1,ProcessingInstruction:!1,ProgressEvent:!1,PromiseRejectionEvent:!1,prompt:!1,PushManager:!1,PushSubscription:!1,RadioNodeList:!1,Range:!1,ReadableByteStream:!1,ReadableStream:!1,removeEventListener:!1,Request:!1,requestAnimationFrame:!1,requestIdleCallback:!1,resizeBy:!1,resizeTo:!1,Response:!1,RTCIceCandidate:!1,RTCSessionDescription:!1,RTCPeerConnection:!1,screen:!1,Screen:!1,screenLeft:!1,ScreenOrientation:!1,screenTop:!1,screenX:!1,screenY:!1,ScriptProcessorNode:!1,scroll:!1,scrollbars:!1,scrollBy:!1,scrollTo:!1,scrollX:!1,scrollY:!1,SecurityPolicyViolationEvent:!1,Selection:!1,self:!1,ServiceWorker:!1,ServiceWorkerContainer:!1,ServiceWorkerRegistration:!1,sessionStorage:!1,setInterval:!1,setTimeout:!1,ShadowRoot:!1,SharedKeyframeList:!1,SharedWorker:!1,showModalDialog:!1,SiteBoundCredential:!1,speechSynthesis:!1,SpeechSynthesisEvent:!1,SpeechSynthesisUtterance:!1,status:!1,statusbar:!1,stop:!1,Storage:!1,StorageEvent:!1,styleMedia:!1,StyleSheet:!1,StyleSheetList:!1,SubtleCrypto:!1,SVGAElement:!1,SVGAltGlyphDefElement:!1,SVGAltGlyphElement:!1,SVGAltGlyphItemElement:!1,SVGAngle:!1,SVGAnimateColorElement:!1,SVGAnimatedAngle:!1,SVGAnimatedBoolean:!1,SVGAnimatedEnumeration:!1,SVGAnimatedInteger:!1,SVGAnimatedLength:!1,SVGAnimatedLengthList:!1,SVGAnimatedNumber:!1,SVGAnimatedNumberList:!1,SVGAnimatedPathData:!1,SVGAnimatedPoints:!1,SVGAnimatedPreserveAspectRatio:!1,SVGAnimatedRect:!1,SVGAnimatedString:!1,SVGAnimatedTransformList:!1,SVGAnimateElement:!1,SVGAnimateMotionElement:!1,SVGAnimateTransformElement:!1,SVGAnimationElement:!1,SVGCircleElement:!1,SVGClipPathElement:!1,SVGColor:!1,SVGColorProfileElement:!1,SVGColorProfileRule:!1,SVGComponentTransferFunctionElement:!1,SVGCSSRule:!1,SVGCursorElement:!1,SVGDefsElement:!1,SVGDescElement:!1,SVGDiscardElement:!1,SVGDocument:!1,SVGElement:!1,SVGElementInstance:!1,SVGElementInstanceList:!1,SVGEllipseElement:!1,SVGEvent:!1,SVGExternalResourcesRequired:!1,SVGFEBlendElement:!1,SVGFEColorMatrixElement:!1,SVGFEComponentTransferElement:!1,SVGFECompositeElement:!1,SVGFEConvolveMatrixElement:!1,SVGFEDiffuseLightingElement:!1,SVGFEDisplacementMapElement:!1,SVGFEDistantLightElement:!1,SVGFEDropShadowElement:!1,SVGFEFloodElement:!1,SVGFEFuncAElement:!1,SVGFEFuncBElement:!1,SVGFEFuncGElement:!1,SVGFEFuncRElement:!1,SVGFEGaussianBlurElement:!1,SVGFEImageElement:!1,SVGFEMergeElement:!1,SVGFEMergeNodeElement:!1,SVGFEMorphologyElement:!1,SVGFEOffsetElement:!1,SVGFEPointLightElement:!1,SVGFESpecularLightingElement:!1,SVGFESpotLightElement:!1,SVGFETileElement:!1,SVGFETurbulenceElement:!1,SVGFilterElement:!1,SVGFilterPrimitiveStandardAttributes:!1,SVGFitToViewBox:!1,SVGFontElement:!1,SVGFontFaceElement:!1,SVGFontFaceFormatElement:!1,SVGFontFaceNameElement:!1,SVGFontFaceSrcElement:!1,SVGFontFaceUriElement:!1,SVGForeignObjectElement:!1,SVGGElement:!1,SVGGeometryElement:!1,SVGGlyphElement:!1,SVGGlyphRefElement:!1,SVGGradientElement:!1,SVGGraphicsElement:!1,SVGHKernElement:!1,SVGICCColor:!1,SVGImageElement:!1,SVGLangSpace:!1,SVGLength:!1,SVGLengthList:!1,SVGLinearGradientElement:!1,SVGLineElement:!1,SVGLocatable:!1,SVGMarkerElement:!1,SVGMaskElement:!1,SVGMatrix:!1,SVGMetadataElement:!1,SVGMissingGlyphElement:!1,SVGMPathElement:!1,SVGNumber:!1,SVGNumberList:!1,SVGPaint:!1,SVGPathElement:!1,SVGPathSeg:!1,SVGPathSegArcAbs:!1,SVGPathSegArcRel:!1,SVGPathSegClosePath:!1,SVGPathSegCurvetoCubicAbs:!1,SVGPathSegCurvetoCubicRel:!1,SVGPathSegCurvetoCubicSmoothAbs:!1,SVGPathSegCurvetoCubicSmoothRel:!1,SVGPathSegCurvetoQuadraticAbs:!1,SVGPathSegCurvetoQuadraticRel:!1,SVGPathSegCurvetoQuadraticSmoothAbs:!1,SVGPathSegCurvetoQuadraticSmoothRel:!1,SVGPathSegLinetoAbs:!1,SVGPathSegLinetoHorizontalAbs:!1,SVGPathSegLinetoHorizontalRel:!1,SVGPathSegLinetoRel:!1,SVGPathSegLinetoVerticalAbs:!1,SVGPathSegLinetoVerticalRel:!1,SVGPathSegList:!1,SVGPathSegMovetoAbs:!1,SVGPathSegMovetoRel:!1,SVGPatternElement:!1,SVGPoint:!1,SVGPointList:!1,SVGPolygonElement:!1,SVGPolylineElement:!1,SVGPreserveAspectRatio:!1,SVGRadialGradientElement:!1,SVGRect:!1,SVGRectElement:!1,SVGRenderingIntent:!1,SVGScriptElement:!1,SVGSetElement:!1,SVGStopElement:!1,SVGStringList:!1,SVGStylable:!1,SVGStyleElement:!1,SVGSVGElement:!1,SVGSwitchElement:!1,SVGSymbolElement:!1,SVGTests:!1,SVGTextContentElement:!1,SVGTextElement:!1,SVGTextPathElement:!1,SVGTextPositioningElement:!1,SVGTitleElement:!1,SVGTransform:!1,SVGTransformable:!1,SVGTransformList:!1,SVGTRefElement:!1,SVGTSpanElement:!1,SVGUnitTypes:!1,SVGURIReference:!1,SVGUseElement:!1,SVGViewElement:!1,SVGViewSpec:!1,SVGVKernElement:!1,SVGZoomAndPan:!1,SVGZoomEvent:!1,Text:!1,TextDecoder:!1,TextEncoder:!1,TextEvent:!1,TextMetrics:!1,TextTrack:!1,TextTrackCue:!1,TextTrackCueList:!1,TextTrackList:!1,TimeEvent:!1,TimeRanges:!1,toolbar:!1,top:!1,Touch:!1,TouchEvent:!1,TouchList:!1,TrackEvent:!1,TransitionEvent:!1,TreeWalker:!1,UIEvent:!1,URL:!1,URLSearchParams:!1,ValidityState:!1,VTTCue:!1,WaveShaperNode:!1,WebGLActiveInfo:!1,WebGLBuffer:!1,WebGLContextEvent:!1,WebGLFramebuffer:!1,WebGLProgram:!1,WebGLRenderbuffer:!1,WebGLRenderingContext:!1,WebGLShader:!1,WebGLShaderPrecisionFormat:!1,WebGLTexture:!1,WebGLUniformLocation:!1,WebSocket:!1,WheelEvent:!1,window:!1,Window:!1,Worker:!1,XDomainRequest:!1,XMLDocument:!1,XMLHttpRequest:!1,XMLHttpRequestEventTarget:!1,XMLHttpRequestProgressEvent:!1,XMLHttpRequestUpload:!1,XMLSerializer:!1,XPathEvaluator:!1,XPathException:!1,XPathExpression:!1,XPathNamespace:!1,XPathNSResolver:!1,XPathResult:!1,XSLTProcessor:!1},worker:{applicationCache:!1,atob:!1,Blob:!1,BroadcastChannel:!1,btoa:!1,Cache:!1,caches:!1,clearInterval:!1,clearTimeout:!1,close:!0,console:!1,fetch:!1,FileReaderSync:!1,FormData:!1,Headers:!1,IDBCursor:!1,IDBCursorWithValue:!1,IDBDatabase:!1,IDBFactory:!1,IDBIndex:!1,IDBKeyRange:!1,IDBObjectStore:!1,IDBOpenDBRequest:!1,IDBRequest:!1,IDBTransaction:!1,IDBVersionChangeEvent:!1,ImageData:!1,importScripts:!0,indexedDB:!1,location:!1,MessageChannel:!1,MessagePort:!1,name:!1,navigator:!1,Notification:!1,onclose:!0,onconnect:!0,onerror:!0,onlanguagechange:!0,onmessage:!0,onoffline:!0,ononline:!0,onrejectionhandled:!0,onunhandledrejection:!0,performance:!1,Performance:!1,PerformanceEntry:!1,PerformanceMark:!1,PerformanceMeasure:!1,PerformanceNavigation:!1,PerformanceResourceTiming:!1,PerformanceTiming:!1,postMessage:!0,Promise:!1,Request:!1,Response:!1,self:!0,ServiceWorkerRegistration:!1,setInterval:!1,setTimeout:!1,TextDecoder:!1,TextEncoder:!1,URL:!1,URLSearchParams:!1,WebSocket:!1,Worker:!1,XMLHttpRequest:!1},node:{__dirname:!1,__filename:!1,arguments:!1,Buffer:!1,clearImmediate:!1,clearInterval:!1,clearTimeout:!1,console:!1,exports:!0,GLOBAL:!1,global:!1,Intl:!1,module:!1,process:!1,require:!1,root:!1,setImmediate:!1,setInterval:!1,setTimeout:!1},commonjs:{exports:!0,module:!1,require:!1,global:!1},amd:{define:!1,require:!1},mocha:{after:!1,afterEach:!1,before:!1,beforeEach:!1,context:!1,describe:!1,it:!1,mocha:!1,run:!1,setup:!1,specify:!1,suite:!1,suiteSetup:!1,suiteTeardown:!1,teardown:!1,test:!1,xcontext:!1,xdescribe:!1,xit:!1,xspecify:!1},jasmine:{afterAll:!1,afterEach:!1,beforeAll:!1,beforeEach:!1,describe:!1,expect:!1,fail:!1,fdescribe:!1,fit:!1,it:!1,jasmine:!1,pending:!1,runs:!1,spyOn:!1,waits:!1,waitsFor:!1,xdescribe:!1,xit:!1},jest:{afterAll:!1,afterEach:!1,beforeAll:!1,beforeEach:!1,check:!1,describe:!1,expect:!1,gen:!1,it:!1,fit:!1,jest:!1,pit:!1,require:!1,test:!1,xdescribe:!1,xit:!1,xtest:!1},qunit:{asyncTest:!1,deepEqual:!1,equal:!1,expect:!1,module:!1,notDeepEqual:!1,notEqual:!1,notOk:!1,notPropEqual:!1,notStrictEqual:!1,ok:!1,propEqual:!1,QUnit:!1,raises:!1,start:!1,stop:!1,strictEqual:!1,test:!1,throws:!1},phantomjs:{console:!0,exports:!0,phantom:!0,require:!0,WebPage:!0},couch:{emit:!1,exports:!1,getRow:!1,log:!1,module:!1,provides:!1,require:!1,respond:!1,send:!1,start:!1,sum:!1},rhino:{defineClass:!1,deserialize:!1,gc:!1,help:!1,importClass:!1,importPackage:!1,java:!1,load:!1,loadClass:!1,Packages:!1,print:!1,quit:!1,readFile:!1,readUrl:!1,runCommand:!1,seal:!1,serialize:!1,spawn:!1,sync:!1,toint32:!1,version:!1},nashorn:{__DIR__:!1,__FILE__:!1,__LINE__:!1,com:!1,edu:!1,exit:!1,Java:!1,java:!1,javafx:!1,JavaImporter:!1,javax:!1,JSAdapter:!1,load:!1,loadWithNewGlobal:!1,org:!1,Packages:!1,print:!1,quit:!1},wsh:{ActiveXObject:!0,Enumerator:!0,GetObject:!0,ScriptEngine:!0,ScriptEngineBuildVersion:!0,ScriptEngineMajorVersion:!0,ScriptEngineMinorVersion:!0,VBArray:!0,WScript:!0,WSH:!0,XDomainRequest:!0},jquery:{$:!1,jQuery:!1},yui:{Y:!1,YUI:!1,YUI_config:!1},shelljs:{cat:!1,cd:!1,chmod:!1,config:!1,cp:!1,dirs:!1,echo:!1,env:!1,error:!1,exec:!1,exit:!1,find:!1,grep:!1,ls:!1,ln:!1,mkdir:!1,mv:!1,popd:!1,pushd:!1,pwd:!1,rm:!1,sed:!1,set:!1,target:!1,tempdir:!1,test:!1,touch:!1,which:!1},prototypejs:{$:!1,$$:!1,$A:!1,$break:!1,$continue:!1,$F:!1,$H:!1,$R:!1,$w:!1,Abstract:!1,Ajax:!1,Autocompleter:!1,Builder:!1,Class:!1,Control:!1,Draggable:!1,Draggables:!1,Droppables:!1,Effect:!1,Element:!1,Enumerable:!1,Event:!1,Field:!1,Form:!1,Hash:!1,Insertion:!1,ObjectRange:!1,PeriodicalExecuter:!1,Position:!1,Prototype:!1,Scriptaculous:!1,Selector:!1,Sortable:!1,SortableObserver:!1,Sound:!1,Template:!1,Toggle:!1,Try:!1},meteor:{$:!1,_:!1,Accounts:!1,AccountsClient:!1,AccountsServer:!1,AccountsCommon:!1,App:!1,Assets:!1,Blaze:!1,check:!1,Cordova:!1,DDP:!1,DDPServer:!1,DDPRateLimiter:!1,Deps:!1,EJSON:!1,Email:!1,HTTP:!1,Log:!1,Match:!1,Meteor:!1,Mongo:!1,MongoInternals:!1,Npm:!1,Package:!1,Plugin:!1,process:!1,Random:!1,ReactiveDict:!1,ReactiveVar:!1,Router:!1,ServiceConfiguration:!1,Session:!1,share:!1,Spacebars:!1,Template:!1,Tinytest:!1,Tracker:!1,UI:!1,Utils:!1,WebApp:!1,WebAppInternals:!1},mongo:{_isWindows:!1,_rand:!1,BulkWriteResult:!1,cat:!1,cd:!1,connect:!1,db:!1,getHostName:!1,getMemInfo:!1,hostname:!1,ISODate:!1,listFiles:!1,load:!1,ls:!1,md5sumFile:!1,mkdir:!1,Mongo:!1,NumberInt:!1,NumberLong:!1,ObjectId:!1,PlanCache:!1,print:!1,printjson:!1,pwd:!1,quit:!1,removeFile:!1,rs:!1,sh:!1,UUID:!1,version:!1,WriteResult:!1},applescript:{$:!1,Application:!1,Automation:!1,console:!1,delay:!1,Library:!1,ObjC:!1,ObjectSpecifier:!1,Path:!1,Progress:!1,Ref:!1},serviceworker:{caches:!1,Cache:!1,CacheStorage:!1,Client:!1,clients:!1,Clients:!1,ExtendableEvent:!1,ExtendableMessageEvent:!1,FetchEvent:!1,importScripts:!1,registration:!1,self:!1,ServiceWorker:!1,ServiceWorkerContainer:!1,ServiceWorkerGlobalScope:!1,ServiceWorkerMessageEvent:!1,ServiceWorkerRegistration:!1,skipWaiting:!1,WindowClient:!1},atomtest:{advanceClock:!1,fakeClearInterval:!1,fakeClearTimeout:!1,fakeSetInterval:!1,fakeSetTimeout:!1,resetTimeouts:!1,waitsForPromise:!1},embertest:{andThen:!1,click:!1,currentPath:!1,currentRouteName:!1,currentURL:!1,fillIn:!1,find:!1,findWithAssert:!1,keyEvent:!1,pauseTest:!1,triggerEvent:!1,visit:!1},protractor:{$:!1,$$:!1,browser:!1,By:!1,by:!1,DartObject:!1,element:!1,protractor:!1},"shared-node-browser":{clearInterval:!1,clearTimeout:!1,console:!1,setInterval:!1,setTimeout:!1},webextensions:{browser:!1,chrome:!1,opr:!1},greasemonkey:{GM_addStyle:!1,GM_deleteValue:!1,GM_getResourceText:!1,GM_getResourceURL:!1,GM_getValue:!1,GM_info:!1,GM_listValues:!1,GM_log:!1,GM_openInTab:!1,GM_registerMenuCommand:!1,GM_setClipboard:!1,GM_setValue:!1,GM_xmlhttpRequest:!1,unsafeWindow:!1}}},function(e,t){e.exports={75:8490,83:383,107:8490,115:383,181:924,197:8491,383:83,452:453,453:452,455:456,456:455,458:459,459:458,497:498,498:497,837:8126,914:976,917:1013,920:1012,921:8126,922:1008,924:181,928:982,929:1009,931:962,934:981,937:8486,962:931,976:914,977:1012,981:934,982:928,1008:922,1009:929,1012:[920,977],1013:917,7776:7835,7835:7776,8126:[837,921],8486:937,8490:75,8491:197,66560:66600,66561:66601,66562:66602,66563:66603,66564:66604,66565:66605,66566:66606,66567:66607,66568:66608,66569:66609,66570:66610,66571:66611,66572:66612,66573:66613,66574:66614,66575:66615,66576:66616,66577:66617,66578:66618,66579:66619,66580:66620,66581:66621,66582:66622,66583:66623,66584:66624,66585:66625,66586:66626,66587:66627,66588:66628,66589:66629,66590:66630,66591:66631,66592:66632,66593:66633,66594:66634,66595:66635,66596:66636,66597:66637,66598:66638,66599:66639,66600:66560,66601:66561,66602:66562,66603:66563,66604:66564,66605:66565,66606:66566,66607:66567,66608:66568,66609:66569,66610:66570,66611:66571,66612:66572,66613:66573,66614:66574,66615:66575,66616:66576,66617:66577,66618:66578,66619:66579,66620:66580,66621:66581,66622:66582,66623:66583,66624:66584,66625:66585,66626:66586,66627:66587,66628:66588,66629:66589,66630:66590,66631:66591,66632:66592,66633:66593,66634:66594,66635:66595,66636:66596,66637:66597,66638:66598,66639:66599,68736:68800,68737:68801,68738:68802,68739:68803,68740:68804,68741:68805,68742:68806,68743:68807,68744:68808,68745:68809,68746:68810,68747:68811,68748:68812,68749:68813,68750:68814,68751:68815,68752:68816,68753:68817,68754:68818,68755:68819,68756:68820,68757:68821,68758:68822,68759:68823,68760:68824,68761:68825,68762:68826,68763:68827,68764:68828,68765:68829,68766:68830,68767:68831,68768:68832,68769:68833,68770:68834,68771:68835,68772:68836,68773:68837,68774:68838,68775:68839,68776:68840,68777:68841,68778:68842,68779:68843,68780:68844,68781:68845,68782:68846,68783:68847,68784:68848,68785:68849,68786:68850,68800:68736,68801:68737,68802:68738,68803:68739,68804:68740,68805:68741,68806:68742,68807:68743,68808:68744,68809:68745,68810:68746,68811:68747,68812:68748,68813:68749,68814:68750,68815:68751,68816:68752,68817:68753,68818:68754,68819:68755,68820:68756,68821:68757,68822:68758,68823:68759,68824:68760,68825:68761,68826:68762,68827:68763,68828:68764,68829:68765,68830:68766,68831:68767,68832:68768,68833:68769,68834:68770,68835:68771,68836:68772,68837:68773,68838:68774,68839:68775,68840:68776,68841:68777,68842:68778,68843:68779,68844:68780,68845:68781,68846:68782,68847:68783,68848:68784,68849:68785,68850:68786,71840:71872,71841:71873,71842:71874,71843:71875,71844:71876,71845:71877,71846:71878,71847:71879,71848:71880,71849:71881,71850:71882,71851:71883,71852:71884,71853:71885,71854:71886,71855:71887,71856:71888,71857:71889,71858:71890,71859:71891,71860:71892,71861:71893,71862:71894,71863:71895,71864:71896,71865:71897,71866:71898,71867:71899,71868:71900,71869:71901,71870:71902,71871:71903,71872:71840,71873:71841,71874:71842,71875:71843,71876:71844,71877:71845,71878:71846,71879:71847,71880:71848,71881:71849,71882:71850,71883:71851,71884:71852,71885:71853,71886:71854,71887:71855,71888:71856,71889:71857,71890:71858,71891:71859,71892:71860,71893:71861,71894:71862,71895:71863,71896:71864,71897:71865,71898:71866,71899:71867,71900:71868,71901:71869,71902:71870,71903:71871}}]));});
\ No newline at end of file
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.0.js b/devtools/client/inspector/markup/test/lib_jquery_1.0.js
new file mode 100644
index 0000000000..564361282f
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.0.js
@@ -0,0 +1,1814 @@
+/*
+ * jQuery - New Wave Javascript
+ *
+ * Copyright (c) 2006 John Resig (jquery.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt) 
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2006-10-27 23:14:48 -0400 (Fri, 27 Oct 2006) $
+ * $Rev: 509 $
+ */
+
+// Global undefined variable
+window.undefined = window.undefined;
+function jQuery(a,c) {
+
+	// Shortcut for document ready (because $(document).each() is silly)
+	if ( a && a.constructor == Function && jQuery.fn.ready )
+		return jQuery(document).ready(a);
+
+	// Make sure that a selection was provided
+	a = a || jQuery.context || document;
+
+	// Watch for when a jQuery object is passed as the selector
+	if ( a.jquery )
+		return $( jQuery.merge( a, [] ) );
+
+	// Watch for when a jQuery object is passed at the context
+	if ( c && c.jquery )
+		return $( c ).find(a);
+	
+	// If the context is global, return a new object
+	if ( window == this )
+		return new jQuery(a,c);
+
+	// Handle HTML strings
+	var m = /^[^<]*(<.+>)[^>]*$/.exec(a);
+	if ( m ) a = jQuery.clean( [ m[1] ] );
+
+	// Watch for when an array is passed in
+	this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType ?
+		// Assume that it is an array of DOM Elements
+		jQuery.merge( a, [] ) :
+
+		// Find the matching elements and save them for later
+		jQuery.find( a, c ) );
+
+  // See if an extra function was provided
+	var fn = arguments[ arguments.length - 1 ];
+	
+	// If so, execute it in context
+	if ( fn && fn.constructor == Function )
+		this.each(fn);
+}
+
+// Map over the $ in case of overwrite
+if ( $ )
+	jQuery._$ = $;
+
+// Map the jQuery namespace to the '$' one
+var $ = jQuery;
+
+jQuery.fn = jQuery.prototype = {
+	jquery: "$Rev: 509 $",
+
+	size: function() {
+		return this.length;
+	},
+
+	get: function( num ) {
+		// Watch for when an array (of elements) is passed in
+		if ( num && num.constructor == Array ) {
+
+			// Use a tricky hack to make the jQuery object
+			// look and feel like an array
+			this.length = 0;
+			[].push.apply( this, num );
+			
+			return this;
+		} else
+			return num == undefined ?
+
+				// Return a 'clean' array
+				jQuery.map( this, function(a){ return a } ) :
+
+				// Return just the object
+				this[num];
+	},
+	each: function( fn, args ) {
+		return jQuery.each( this, fn, args );
+	},
+
+	index: function( obj ) {
+		var pos = -1;
+		this.each(function(i){
+			if ( this == obj ) pos = i;
+		});
+		return pos;
+	},
+
+	attr: function( key, value, type ) {
+		// Check to see if we're setting style values
+		return key.constructor != String || value != undefined ?
+			this.each(function(){
+				// See if we're setting a hash of styles
+				if ( value == undefined )
+					// Set all the styles
+					for ( var prop in key )
+						jQuery.attr(
+							type ? this.style : this,
+							prop, key[prop]
+						);
+				
+				// See if we're setting a single key/value style
+				else
+					jQuery.attr(
+						type ? this.style : this,
+						key, value
+					);
+			}) :
+			
+			// Look for the case where we're accessing a style value
+			jQuery[ type || "attr" ]( this[0], key );
+	},
+
+	css: function( key, value ) {
+		return this.attr( key, value, "curCSS" );
+	},
+	text: function(e) {
+		e = e || this;
+		var t = "";
+		for ( var j = 0; j < e.length; j++ ) {
+			var r = e[j].childNodes;
+			for ( var i = 0; i < r.length; i++ )
+				t += r[i].nodeType != 1 ?
+					r[i].nodeValue : jQuery.fn.text([ r[i] ]);
+		}
+		return t;
+	},
+	wrap: function() {
+		// The elements to wrap the target around
+		var a = jQuery.clean(arguments);
+		
+		// Wrap each of the matched elements individually
+		return this.each(function(){
+			// Clone the structure that we're using to wrap
+			var b = a[0].cloneNode(true);
+			
+			// Insert it before the element to be wrapped
+			this.parentNode.insertBefore( b, this );
+			
+			// Find he deepest point in the wrap structure
+			while ( b.firstChild )
+				b = b.firstChild;
+			
+			// Move the matched element to within the wrap structure
+			b.appendChild( this );
+		});
+	},
+	append: function() {
+		return this.domManip(arguments, true, 1, function(a){
+			this.appendChild( a );
+		});
+	},
+	prepend: function() {
+		return this.domManip(arguments, true, -1, function(a){
+			this.insertBefore( a, this.firstChild );
+		});
+	},
+	before: function() {
+		return this.domManip(arguments, false, 1, function(a){
+			this.parentNode.insertBefore( a, this );
+		});
+	},
+	after: function() {
+		return this.domManip(arguments, false, -1, function(a){
+			this.parentNode.insertBefore( a, this.nextSibling );
+		});
+	},
+	end: function() {
+		return this.get( this.stack.pop() );
+	},
+	find: function(t) {
+		return this.pushStack( jQuery.map( this, function(a){
+			return jQuery.find(t,a);
+		}), arguments );
+	},
+
+	clone: function(deep) {
+		return this.pushStack( jQuery.map( this, function(a){
+			return a.cloneNode( deep != undefined ? deep : true );
+		}), arguments );
+	},
+
+	filter: function(t) {
+		return this.pushStack(
+			t.constructor == Array &&
+			jQuery.map(this,function(a){
+				for ( var i = 0; i < t.length; i++ )
+					if ( jQuery.filter(t[i],[a]).r.length )
+						return a;
+			}) ||
+
+			t.constructor == Boolean &&
+			( t ? this.get() : [] ) ||
+
+			t.constructor == Function &&
+			jQuery.grep( this, t ) ||
+
+			jQuery.filter(t,this).r, arguments );
+	},
+
+	not: function(t) {
+		return this.pushStack( t.constructor == String ?
+			jQuery.filter(t,this,false).r :
+			jQuery.grep(this,function(a){ return a != t; }), arguments );
+	},
+
+	add: function(t) {
+		return this.pushStack( jQuery.merge( this, t.constructor == String ?
+			jQuery.find(t) : t.constructor == Array ? t : [t] ), arguments );
+	},
+	is: function(expr) {
+		return expr ? jQuery.filter(expr,this).r.length > 0 : this.length > 0;
+	},
+	domManip: function(args, table, dir, fn){
+		var clone = this.size() > 1;
+		var a = jQuery.clean(args);
+		
+		return this.each(function(){
+			var obj = this;
+			
+			if ( table && this.nodeName == "TABLE" && a[0].nodeName != "THEAD" ) {
+				var tbody = this.getElementsByTagName("tbody");
+
+				if ( !tbody.length ) {
+					obj = document.createElement("tbody");
+					this.appendChild( obj );
+				} else
+					obj = tbody[0];
+			}
+
+			for ( var i = ( dir < 0 ? a.length - 1 : 0 );
+				i != ( dir < 0 ? dir : a.length ); i += dir ) {
+					fn.apply( obj, [ clone ? a[i].cloneNode(true) : a[i] ] );
+			}
+		});
+	},
+	pushStack: function(a,args) {
+		var fn = args && args[args.length-1];
+
+		if ( !fn || fn.constructor != Function ) {
+			if ( !this.stack ) this.stack = [];
+			this.stack.push( this.get() );
+			this.get( a );
+		} else {
+			var old = this.get();
+			this.get( a );
+			if ( fn.constructor == Function )
+				return this.each( fn );
+			this.get( old );
+		}
+
+		return this;
+	}
+};
+
+jQuery.extend = jQuery.fn.extend = function(obj,prop) {
+	if ( !prop ) { prop = obj; obj = this; }
+	for ( var i in prop ) obj[i] = prop[i];
+	return obj;
+};
+
+jQuery.extend({
+	init: function(){
+		jQuery.initDone = true;
+		
+		jQuery.each( jQuery.macros.axis, function(i,n){
+			jQuery.fn[ i ] = function(a) {
+				var ret = jQuery.map(this,n);
+				if ( a && a.constructor == String )
+					ret = jQuery.filter(a,ret).r;
+				return this.pushStack( ret, arguments );
+			};
+		});
+		
+		jQuery.each( jQuery.macros.to, function(i,n){
+			jQuery.fn[ i ] = function(){
+				var a = arguments;
+				return this.each(function(){
+					for ( var j = 0; j < a.length; j++ )
+						$(a[j])[n]( this );
+				});
+			};
+		});
+		
+		jQuery.each( jQuery.macros.each, function(i,n){
+			jQuery.fn[ i ] = function() {
+				return this.each( n, arguments );
+			};
+		});
+
+		jQuery.each( jQuery.macros.filter, function(i,n){
+			jQuery.fn[ n ] = function(num,fn) {
+				return this.filter( ":" + n + "(" + num + ")", fn );
+			};
+		});
+		
+		jQuery.each( jQuery.macros.attr, function(i,n){
+			n = n || i;
+			jQuery.fn[ i ] = function(h) {
+				return h == undefined ?
+					this.length ? this[0][n] : null :
+					this.attr( n, h );
+			};
+		});
+	
+		jQuery.each( jQuery.macros.css, function(i,n){
+			jQuery.fn[ n ] = function(h) {
+				return h == undefined ?
+					( this.length ? jQuery.css( this[0], n ) : null ) :
+					this.css( n, h );
+			};
+		});
+	
+	},
+	each: function( obj, fn, args ) {
+		if ( obj.length == undefined )
+			for ( var i in obj )
+				fn.apply( obj[i], args || [i, obj[i]] );
+		else
+			for ( var i = 0; i < obj.length; i++ )
+				fn.apply( obj[i], args || [i, obj[i]] );
+		return obj;
+	},
+	
+	className: {
+		add: function(o,c){
+			if (jQuery.className.has(o,c)) return;
+			o.className += ( o.className ? " " : "" ) + c;
+		},
+		remove: function(o,c){
+			o.className = !c ? "" :
+				o.className.replace(
+					new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "");
+		},
+		has: function(e,a) {
+			if ( e.className != undefined )
+				e = e.className;
+			return new RegExp("(^|\\s)" + a + "(\\s|$)").test(e);
+		}
+	},
+	swap: function(e,o,f) {
+		for ( var i in o ) {
+			e.style["old"+i] = e.style[i];
+			e.style[i] = o[i];
+		}
+		f.apply( e, [] );
+		for ( var i in o )
+			e.style[i] = e.style["old"+i];
+	},
+	
+	css: function(e,p) {
+		if ( p == "height" || p == "width" ) {
+			var old = {}, oHeight, oWidth, d = ["Top","Bottom","Right","Left"];
+	
+			for ( var i in d ) {
+				old["padding" + d[i]] = 0;
+				old["border" + d[i] + "Width"] = 0;
+			}
+	
+			jQuery.swap( e, old, function() {
+				if (jQuery.css(e,"display") != "none") {
+					oHeight = e.offsetHeight;
+					oWidth = e.offsetWidth;
+				} else {
+					e = $(e.cloneNode(true)).css({
+						visibility: "hidden", position: "absolute", display: "block"
+					}).prependTo("body")[0];
+
+					oHeight = e.clientHeight;
+					oWidth = e.clientWidth;
+					
+					e.parentNode.removeChild(e);
+				}
+			});
+	
+			return p == "height" ? oHeight : oWidth;
+		} else if ( p == "opacity" && jQuery.browser.msie )
+			return parseFloat( jQuery.curCSS(e,"filter").replace(/[^0-9.]/,"") ) || 1;
+
+		return jQuery.curCSS( e, p );
+	},
+
+	curCSS: function(elem, prop, force) {
+		var ret;
+	
+		if (!force && elem.style[prop]) {
+
+			ret = elem.style[prop];
+
+		} else if (elem.currentStyle) {
+
+			var newProp = prop.replace(/\-(\w)/g,function(m,c){return c.toUpperCase()}); 
+			ret = elem.currentStyle[prop] || elem.currentStyle[newProp];
+
+		} else if (document.defaultView && document.defaultView.getComputedStyle) {
+
+			prop = prop.replace(/([A-Z])/g,"-$1").toLowerCase();
+			var cur = document.defaultView.getComputedStyle(elem, null);
+
+			if ( cur )
+				ret = cur.getPropertyValue(prop);
+			else if ( prop == 'display' )
+				ret = 'none';
+			else
+				jQuery.swap(elem, { display: 'block' }, function() {
+					ret = document.defaultView.getComputedStyle(this,null).getPropertyValue(prop);
+				});
+
+		}
+		
+		return ret;
+	},
+	
+	clean: function(a) {
+		var r = [];
+		for ( var i = 0; i < a.length; i++ ) {
+			if ( a[i].constructor == String ) {
+
+				var table = "";
+	
+				if ( !a[i].indexOf("<thead") || !a[i].indexOf("<tbody") ) {
+					table = "thead";
+					a[i] = "<table>" + a[i] + "</table>";
+				} else if ( !a[i].indexOf("<tr") ) {
+					table = "tr";
+					a[i] = "<table>" + a[i] + "</table>";
+				} else if ( !a[i].indexOf("<td") || !a[i].indexOf("<th") ) {
+					table = "td";
+					a[i] = "<table><tbody><tr>" + a[i] + "</tr></tbody></table>";
+				}
+	
+				var div = document.createElement("div");
+				div.innerHTML = a[i];
+	
+				if ( table ) {
+					div = div.firstChild;
+					if ( table != "thead" ) div = div.firstChild;
+					if ( table == "td" ) div = div.firstChild;
+				}
+	
+				for ( var j = 0; j < div.childNodes.length; j++ )
+					r.push( div.childNodes[j] );
+				} else if ( a[i].jquery || a[i].length && !a[i].nodeType )
+					for ( var k = 0; k < a[i].length; k++ )
+						r.push( a[i][k] );
+				else if ( a[i] !== null )
+					r.push(	a[i].nodeType ? a[i] : document.createTextNode(a[i].toString()) );
+		}
+		return r;
+	},
+	
+	expr: {
+		"": "m[2]== '*'||a.nodeName.toUpperCase()==m[2].toUpperCase()",
+		"#": "a.getAttribute('id')&&a.getAttribute('id')==m[2]",
+		":": {
+			// Position Checks
+			lt: "i<m[3]-0",
+			gt: "i>m[3]-0",
+			nth: "m[3]-0==i",
+			eq: "m[3]-0==i",
+			first: "i==0",
+			last: "i==r.length-1",
+			even: "i%2==0",
+			odd: "i%2",
+			
+			// Child Checks
+			"first-child": "jQuery.sibling(a,0).cur",
+			"last-child": "jQuery.sibling(a,0).last",
+			"only-child": "jQuery.sibling(a).length==1",
+			
+			// Parent Checks
+			parent: "a.childNodes.length",
+			empty: "!a.childNodes.length",
+			
+			// Text Check
+			contains: "(a.innerText||a.innerHTML).indexOf(m[3])>=0",
+			
+			// Visibility
+			visible: "a.type!='hidden'&&jQuery.css(a,'display')!='none'&&jQuery.css(a,'visibility')!='hidden'",
+			hidden: "a.type=='hidden'||jQuery.css(a,'display')=='none'||jQuery.css(a,'visibility')=='hidden'",
+			
+			// Form elements
+			enabled: "!a.disabled",
+			disabled: "a.disabled",
+			checked: "a.checked",
+			selected: "a.selected"
+		},
+		".": "jQuery.className.has(a,m[2])",
+		"@": {
+			"=": "z==m[4]",
+			"!=": "z!=m[4]",
+			"^=": "!z.indexOf(m[4])",
+			"$=": "z.substr(z.length - m[4].length,m[4].length)==m[4]",
+			"*=": "z.indexOf(m[4])>=0",
+			"": "z"
+		},
+		"[": "jQuery.find(m[2],a).length"
+	},
+	
+	token: [
+		"\\.\\.|/\\.\\.", "a.parentNode",
+		">|/", "jQuery.sibling(a.firstChild)",
+		"\\+", "jQuery.sibling(a).next",
+		"~", function(a){
+			var r = [];
+			var s = jQuery.sibling(a);
+			if ( s.n > 0 )
+				for ( var i = s.n; i < s.length; i++ )
+					r.push( s[i] );
+			return r;
+		}
+	],
+	find: function( t, context ) {
+		// Make sure that the context is a DOM Element
+		if ( context && context.nodeType == undefined )
+			context = null;
+	
+		// Set the correct context (if none is provided)
+		context = context || jQuery.context || document;
+	
+		if ( t.constructor != String ) return [t];
+	
+		if ( !t.indexOf("//") ) {
+			context = context.documentElement;
+			t = t.substr(2,t.length);
+		} else if ( !t.indexOf("/") ) {
+			context = context.documentElement;
+			t = t.substr(1,t.length);
+			// FIX Assume the root element is right :(
+			if ( t.indexOf("/") >= 1 )
+				t = t.substr(t.indexOf("/"),t.length);
+		}
+	
+		var ret = [context];
+		var done = [];
+		var last = null;
+	
+		while ( t.length > 0 && last != t ) {
+			var r = [];
+			last = t;
+	
+			t = jQuery.trim(t).replace( /^\/\//i, "" );
+			
+			var foundToken = false;
+			
+			for ( var i = 0; i < jQuery.token.length; i += 2 ) {
+				var re = new RegExp("^(" + jQuery.token[i] + ")");
+				var m = re.exec(t);
+				
+				if ( m ) {
+					r = ret = jQuery.map( ret, jQuery.token[i+1] );
+					t = jQuery.trim( t.replace( re, "" ) );
+					foundToken = true;
+				}
+			}
+			
+			if ( !foundToken ) {
+				if ( !t.indexOf(",") || !t.indexOf("|") ) {
+					if ( ret[0] == context ) ret.shift();
+					done = jQuery.merge( done, ret );
+					r = ret = [context];
+					t = " " + t.substr(1,t.length);
+				} else {
+					var re2 = /^([#.]?)([a-z0-9\\*_-]*)/i;
+					var m = re2.exec(t);
+		
+					if ( m[1] == "#" ) {
+						// Ummm, should make this work in all XML docs
+						var oid = document.getElementById(m[2]);
+						r = ret = oid ? [oid] : [];
+						t = t.replace( re2, "" );
+					} else {
+						if ( !m[2] || m[1] == "." ) m[2] = "*";
+		
+						for ( var i = 0; i < ret.length; i++ )
+							r = jQuery.merge( r,
+								m[2] == "*" ?
+									jQuery.getAll(ret[i]) :
+									ret[i].getElementsByTagName(m[2])
+							);
+					}
+				}
+			}
+	
+			if ( t ) {
+				var val = jQuery.filter(t,r);
+				ret = r = val.r;
+				t = jQuery.trim(val.t);
+			}
+		}
+	
+		if ( ret && ret[0] == context ) ret.shift();
+		done = jQuery.merge( done, ret );
+	
+		return done;
+	},
+	
+	getAll: function(o,r) {
+		r = r || [];
+		var s = o.childNodes;
+		for ( var i = 0; i < s.length; i++ )
+			if ( s[i].nodeType == 1 ) {
+				r.push( s[i] );
+				jQuery.getAll( s[i], r );
+			}
+		return r;
+	},
+	
+	attr: function(elem, name, value){
+		var fix = {
+			"for": "htmlFor",
+			"class": "className",
+			"float": "cssFloat",
+			innerHTML: "innerHTML",
+			className: "className"
+		};
+
+		if ( fix[name] ) {
+			if ( value != undefined ) elem[fix[name]] = value;
+			return elem[fix[name]];
+		} else if ( elem.getAttribute ) {
+			if ( value != undefined ) elem.setAttribute( name, value );
+			return elem.getAttribute( name, 2 );
+		} else {
+			name = name.replace(/-([a-z])/ig,function(z,b){return b.toUpperCase();});
+			if ( value != undefined ) elem[name] = value;
+			return elem[name];
+		}
+	},
+
+	// The regular expressions that power the parsing engine
+	parse: [
+		// Match: [@value='test'], [@foo]
+		[ "\\[ *(@)S *([!*$^=]*) *Q\\]", 1 ],
+
+		// Match: [div], [div p]
+		[ "(\\[)Q\\]", 0 ],
+
+		// Match: :contains('foo')
+		[ "(:)S\\(Q\\)", 0 ],
+
+		// Match: :even, :last-chlid
+		[ "([:.#]*)S", 0 ]
+	],
+	
+	filter: function(t,r,not) {
+		// Figure out if we're doing regular, or inverse, filtering
+		var g = not !== false ? jQuery.grep :
+			function(a,f) {return jQuery.grep(a,f,true);};
+		
+		while ( t && /^[a-z[({<*:.#]/i.test(t) ) {
+
+			var p = jQuery.parse;
+
+			for ( var i = 0; i < p.length; i++ ) {
+				var re = new RegExp( "^" + p[i][0]
+
+					// Look for a string-like sequence
+					.replace( 'S', "([a-z*_-][a-z0-9_-]*)" )
+
+					// Look for something (optionally) enclosed with quotes
+					.replace( 'Q', " *'?\"?([^'\"]*?)'?\"? *" ), "i" );
+
+				var m = re.exec( t );
+
+				if ( m ) {
+					// Re-organize the match
+					if ( p[i][1] )
+						m = ["", m[1], m[3], m[2], m[4]];
+
+					// Remove what we just matched
+					t = t.replace( re, "" );
+
+					break;
+				}
+			}
+	
+			// :not() is a special case that can be optomized by
+			// keeping it out of the expression list
+			if ( m[1] == ":" && m[2] == "not" )
+				r = jQuery.filter(m[3],r,false).r;
+			
+			// Otherwise, find the expression to execute
+			else {
+				var f = jQuery.expr[m[1]];
+				if ( f.constructor != String )
+					f = jQuery.expr[m[1]][m[2]];
+					
+				// Build a custom macro to enclose it
+				eval("f = function(a,i){" + 
+					( m[1] == "@" ? "z=jQuery.attr(a,m[3]);" : "" ) + 
+					"return " + f + "}");
+				
+				// Execute it against the current filter
+				r = g( r, f );
+			}
+		}
+	
+		// Return an array of filtered elements (r)
+		// and the modified expression string (t)
+		return { r: r, t: t };
+	},
+	trim: function(t){
+		return t.replace(/^\s+|\s+$/g, "");
+	},
+	parents: function( elem ){
+		var matched = [];
+		var cur = elem.parentNode;
+		while ( cur && cur != document ) {
+			matched.push( cur );
+			cur = cur.parentNode;
+		}
+		return matched;
+	},
+	sibling: function(elem, pos, not) {
+		var elems = [];
+
+		var siblings = elem.parentNode.childNodes;
+		for ( var i = 0; i < siblings.length; i++ ) {
+			if ( not === true && siblings[i] == elem ) continue;
+
+			if ( siblings[i].nodeType == 1 )
+				elems.push( siblings[i] );
+			if ( siblings[i] == elem )
+				elems.n = elems.length - 1;
+		}
+
+		return jQuery.extend( elems, {
+			last: elems.n == elems.length - 1,
+			cur: pos == "even" && elems.n % 2 == 0 || pos == "odd" && elems.n % 2 || elems[pos] == elem,
+			prev: elems[elems.n - 1],
+			next: elems[elems.n + 1]
+		});
+	},
+	merge: function(first, second) {
+		var result = [];
+		
+		// Move b over to the new array (this helps to avoid
+		// StaticNodeList instances)
+		for ( var k = 0; k < first.length; k++ )
+			result[k] = first[k];
+	
+		// Now check for duplicates between a and b and only
+		// add the unique items
+		for ( var i = 0; i < second.length; i++ ) {
+			var noCollision = true;
+			
+			// The collision-checking process
+			for ( var j = 0; j < first.length; j++ )
+				if ( second[i] == first[j] )
+					noCollision = false;
+				
+			// If the item is unique, add it
+			if ( noCollision )
+				result.push( second[i] );
+		}
+	
+		return result;
+	},
+	grep: function(elems, fn, inv) {
+		// If a string is passed in for the function, make a function
+		// for it (a handy shortcut)
+		if ( fn.constructor == String )
+			fn = new Function("a","i","return " + fn);
+			
+		var result = [];
+		
+		// Go through the array, only saving the items
+		// that pass the validator function
+		for ( var i = 0; i < elems.length; i++ )
+			if ( !inv && fn(elems[i],i) || inv && !fn(elems[i],i) )
+				result.push( elems[i] );
+		
+		return result;
+	},
+	map: function(elems, fn) {
+		// If a string is passed in for the function, make a function
+		// for it (a handy shortcut)
+		if ( fn.constructor == String )
+			fn = new Function("a","return " + fn);
+		
+		var result = [];
+		
+		// Go through the array, translating each of the items to their
+		// new value (or values).
+		for ( var i = 0; i < elems.length; i++ ) {
+			var val = fn(elems[i],i);
+
+			if ( val !== null && val != undefined ) {
+				if ( val.constructor != Array ) val = [val];
+				result = jQuery.merge( result, val );
+			}
+		}
+
+		return result;
+	},
+	
+	/*
+	 * A number of helper functions used for managing events.
+	 * Many of the ideas behind this code orignated from Dean Edwards' addEvent library.
+	 */
+	event: {
+	
+		// Bind an event to an element
+		// Original by Dean Edwards
+		add: function(element, type, handler) {
+			// For whatever reason, IE has trouble passing the window object
+			// around, causing it to be cloned in the process
+			if ( jQuery.browser.msie && element.setInterval != undefined )
+				element = window;
+		
+			// Make sure that the function being executed has a unique ID
+			if ( !handler.guid )
+				handler.guid = this.guid++;
+				
+			// Init the element's event structure
+			if (!element.events)
+				element.events = {};
+			
+			// Get the current list of functions bound to this event
+			var handlers = element.events[type];
+			
+			// If it hasn't been initialized yet
+			if (!handlers) {
+				// Init the event handler queue
+				handlers = element.events[type] = {};
+				
+				// Remember an existing handler, if it's already there
+				if (element["on" + type])
+					handlers[0] = element["on" + type];
+			}
+
+			// Add the function to the element's handler list
+			handlers[handler.guid] = handler;
+			
+			// And bind the global event handler to the element
+			element["on" + type] = this.handle;
+	
+			// Remember the function in a global list (for triggering)
+			if (!this.global[type])
+				this.global[type] = [];
+			this.global[type].push( element );
+		},
+		
+		guid: 1,
+		global: {},
+		
+		// Detach an event or set of events from an element
+		remove: function(element, type, handler) {
+			if (element.events)
+				if (type && element.events[type])
+					if ( handler )
+						delete element.events[type][handler.guid];
+					else
+						for ( var i in element.events[type] )
+							delete element.events[type][i];
+				else
+					for ( var j in element.events )
+						this.remove( element, j );
+		},
+		
+		trigger: function(type,data,element) {
+			// Touch up the incoming data
+			data = data || [];
+	
+			// Handle a global trigger
+			if ( !element ) {
+				var g = this.global[type];
+				if ( g )
+					for ( var i = 0; i < g.length; i++ )
+						this.trigger( type, data, g[i] );
+	
+			// Handle triggering a single element
+			} else if ( element["on" + type] ) {
+				// Pass along a fake event
+				data.unshift( this.fix({ type: type, target: element }) );
+	
+				// Trigger the event
+				element["on" + type].apply( element, data );
+			}
+		},
+		
+		handle: function(event) {
+			if ( typeof jQuery == "undefined" ) return;
+
+			event = event || jQuery.event.fix( window.event );
+	
+			// If no correct event was found, fail
+			if ( !event ) return;
+		
+			var returnValue = true;
+
+			var c = this.events[event.type];
+		
+			for ( var j in c ) {
+				if ( c[j].apply( this, [event] ) === false ) {
+					event.preventDefault();
+					event.stopPropagation();
+					returnValue = false;
+				}
+			}
+			
+			return returnValue;
+		},
+		
+		fix: function(event) {
+			if ( event ) {
+				event.preventDefault = function() {
+					this.returnValue = false;
+				};
+			
+				event.stopPropagation = function() {
+					this.cancelBubble = true;
+				};
+			}
+			
+			return event;
+		}
+	
+	}
+});
+
+new function() {
+	var b = navigator.userAgent.toLowerCase();
+
+	// Figure out what browser is being used
+	jQuery.browser = {
+		safari: /webkit/.test(b),
+		opera: /opera/.test(b),
+		msie: /msie/.test(b) && !/opera/.test(b),
+		mozilla: /mozilla/.test(b) && !/compatible/.test(b)
+	};
+
+	// Check to see if the W3C box model is being used
+	jQuery.boxModel = !jQuery.browser.msie || document.compatMode == "CSS1Compat";
+};
+
+jQuery.macros = {
+	to: {
+		appendTo: "append",
+		prependTo: "prepend",
+		insertBefore: "before",
+		insertAfter: "after"
+	},
+
+	
+	css: "width,height,top,left,position,float,overflow,color,background".split(","),
+
+	filter: [ "eq", "lt", "gt", "contains" ],
+
+	attr: {
+
+		val: "value",
+
+		html: "innerHTML",
+
+		id: null,
+
+		title: null,
+
+		name: null,
+
+		href: null,
+
+		src: null,
+
+		rel: null
+	},
+	
+	axis: {
+
+		parent: "a.parentNode",
+
+		ancestors: jQuery.parents,
+
+		parents: jQuery.parents,
+
+		next: "jQuery.sibling(a).next",
+
+		prev: "jQuery.sibling(a).prev",
+
+		siblings: jQuery.sibling,
+
+		children: "a.childNodes"
+	},
+
+	each: {
+
+		removeAttr: function( key ) {
+			this.removeAttribute( key );
+		},
+		show: function(){
+			this.style.display = this.oldblock ? this.oldblock : "";
+			if ( jQuery.css(this,"display") == "none" )
+				this.style.display = "block";
+		},
+		hide: function(){
+			this.oldblock = this.oldblock || jQuery.css(this,"display");
+			if ( this.oldblock == "none" )
+				this.oldblock = "block";
+			this.style.display = "none";
+		},
+		toggle: function(){
+			$(this)[ $(this).is(":hidden") ? "show" : "hide" ].apply( $(this), arguments );
+		},
+		addClass: function(c){
+			jQuery.className.add(this,c);
+		},
+		removeClass: function(c){
+			jQuery.className.remove(this,c);
+		},
+		toggleClass: function( c ){
+			jQuery.className[ jQuery.className.has(this,c) ? "remove" : "add" ](this,c);
+		},
+
+		remove: function(a){
+			if ( !a || jQuery.filter( [this], a ).r )
+				this.parentNode.removeChild( this );
+		},
+		empty: function(){
+			while ( this.firstChild )
+				this.removeChild( this.firstChild );
+		},
+		bind: function( type, fn ) {
+			if ( fn.constructor == String )
+				fn = new Function("e", ( !fn.indexOf(".") ? "$(this)" : "return " ) + fn);
+			jQuery.event.add( this, type, fn );
+		},
+
+		unbind: function( type, fn ) {
+			jQuery.event.remove( this, type, fn );
+		},
+		trigger: function( type, data ) {
+			jQuery.event.trigger( type, data, this );
+		}
+	}
+};
+
+jQuery.init();jQuery.fn.extend({
+
+	// We're overriding the old toggle function, so
+	// remember it for later
+	_toggle: jQuery.fn.toggle,
+	toggle: function(a,b) {
+		// If two functions are passed in, we're
+		// toggling on a click
+		return a && b && a.constructor == Function && b.constructor == Function ? this.click(function(e){
+			// Figure out which function to execute
+			this.last = this.last == a ? b : a;
+			
+			// Make sure that clicks stop
+			e.preventDefault();
+			
+			// and execute the function
+			return this.last.apply( this, [e] ) || false;
+		}) :
+		
+		// Otherwise, execute the old toggle function
+		this._toggle.apply( this, arguments );
+	},
+
+	hover: function(f,g) {
+		
+		// A private function for haandling mouse 'hovering'
+		function handleHover(e) {
+			// Check if mouse(over|out) are still within the same parent element
+			var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
+	
+			// Traverse up the tree
+			while ( p && p != this ) p = p.parentNode;
+			
+			// If we actually just moused on to a sub-element, ignore it
+			if ( p == this ) return false;
+			
+			// Execute the right function
+			return (e.type == "mouseover" ? f : g).apply(this, [e]);
+		}
+		
+		// Bind the function to the two event listeners
+		return this.mouseover(handleHover).mouseout(handleHover);
+	},
+	ready: function(f) {
+		// If the DOM is already ready
+		if ( jQuery.isReady )
+			// Execute the function immediately
+			f.apply( document );
+			
+		// Otherwise, remember the function for later
+		else {
+			// Add the function to the wait list
+			jQuery.readyList.push( f );
+		}
+	
+		return this;
+	}
+});
+
+jQuery.extend({
+	/*
+	 * All the code that makes DOM Ready work nicely.
+	 */
+	isReady: false,
+	readyList: [],
+	
+	// Handle when the DOM is ready
+	ready: function() {
+		// Make sure that the DOM is not already loaded
+		if ( !jQuery.isReady ) {
+			// Remember that the DOM is ready
+			jQuery.isReady = true;
+			
+			// If there are functions bound, to execute
+			if ( jQuery.readyList ) {
+				// Execute all of them
+				for ( var i = 0; i < jQuery.readyList.length; i++ )
+					jQuery.readyList[i].apply( document );
+				
+				// Reset the list of functions
+				jQuery.readyList = null;
+			}
+		}
+	}
+});
+
+new function(){
+
+	var e = ("blur,focus,load,resize,scroll,unload,click,dblclick," +
+		"mousedown,mouseup,mousemove,mouseover,mouseout,change,reset,select," + 
+		"submit,keydown,keypress,keyup,error").split(",");
+
+	// Go through all the event names, but make sure that
+	// it is enclosed properly
+	for ( var i = 0; i < e.length; i++ ) new function(){
+			
+		var o = e[i];
+		
+		// Handle event binding
+		jQuery.fn[o] = function(f){
+			return f ? this.bind(o, f) : this.trigger(o);
+		};
+		
+		// Handle event unbinding
+		jQuery.fn["un"+o] = function(f){ return this.unbind(o, f); };
+		
+		// Finally, handle events that only fire once
+		jQuery.fn["one"+o] = function(f){
+			// Attach the event listener
+			return this.each(function(){
+
+				var count = 0;
+
+				// Add the event
+				jQuery.event.add( this, o, function(e){
+					// If this function has already been executed, stop
+					if ( count++ ) return;
+				
+					// And execute the bound function
+					return f.apply(this, [e]);
+				});
+			});
+		};
+			
+	};
+	
+	// If Mozilla is used
+	if ( jQuery.browser.mozilla || jQuery.browser.opera ) {
+		// Use the handy event callback
+		document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
+	
+	// If IE is used, use the excellent hack by Matthias Miller
+	// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
+	} else if ( jQuery.browser.msie ) {
+	
+		// Only works if you document.write() it
+		document.write("<scr" + "ipt id=__ie_init defer=true " + 
+			"src=//:><\/script>");
+	
+		// Use the defer script hack
+		var script = document.getElementById("__ie_init");
+		script.onreadystatechange = function() {
+			if ( this.readyState == "complete" )
+				jQuery.ready();
+		};
+	
+		// Clear from memory
+		script = null;
+	
+	// If Safari  is used
+	} else if ( jQuery.browser.safari ) {
+		// Continually check to see if the document.readyState is valid
+		jQuery.safariTimer = setInterval(function(){
+			// loaded and complete are both valid states
+			if ( document.readyState == "loaded" || 
+				document.readyState == "complete" ) {
+	
+				// If either one are found, remove the timer
+				clearInterval( jQuery.safariTimer );
+				jQuery.safariTimer = null;
+	
+				// and execute any waiting functions
+				jQuery.ready();
+			}
+		}, 10);
+	} 
+
+	// A fallback to window.onload, that will always work
+	jQuery.event.add( window, "load", jQuery.ready );
+	
+};
+jQuery.fn.extend({
+
+	// overwrite the old show method
+	_show: jQuery.fn.show,
+
+	show: function(speed,callback){
+		return speed ? this.animate({
+			height: "show", width: "show", opacity: "show"
+		}, speed, callback) : this._show();
+	},
+	
+	// Overwrite the old hide method
+	_hide: jQuery.fn.hide,
+
+	hide: function(speed,callback){
+		return speed ? this.animate({
+			height: "hide", width: "hide", opacity: "hide"
+		}, speed, callback) : this._hide();
+	},
+
+	slideDown: function(speed,callback){
+		return this.animate({height: "show"}, speed, callback);
+	},
+
+	slideUp: function(speed,callback){
+		return this.animate({height: "hide"}, speed, callback);
+	},
+
+	slideToggle: function(speed,callback){
+		return this.each(function(){
+			var state = $(this).is(":hidden") ? "show" : "hide";
+			$(this).animate({height: state}, speed, callback);
+		});
+	},
+
+	fadeIn: function(speed,callback){
+		return this.animate({opacity: "show"}, speed, callback);
+	},
+
+	fadeOut: function(speed,callback){
+		return this.animate({opacity: "hide"}, speed, callback);
+	},
+
+	fadeTo: function(speed,to,callback){
+		return this.animate({opacity: to}, speed, callback);
+	},
+	animate: function(prop,speed,callback) {
+		return this.queue(function(){
+		
+			this.curAnim = prop;
+			
+			for ( var p in prop ) {
+				var e = new jQuery.fx( this, jQuery.speed(speed,callback), p );
+				if ( prop[p].constructor == Number )
+					e.custom( e.cur(), prop[p] );
+				else
+					e[ prop[p] ]( prop );
+			}
+			
+		});
+	},
+	queue: function(type,fn){
+		if ( !fn ) {
+			fn = type;
+			type = "fx";
+		}
+	
+		return this.each(function(){
+			if ( !this.queue )
+				this.queue = {};
+	
+			if ( !this.queue[type] )
+				this.queue[type] = [];
+	
+			this.queue[type].push( fn );
+		
+			if ( this.queue[type].length == 1 )
+				fn.apply(this);
+		});
+	}
+
+});
+
+jQuery.extend({
+
+	setAuto: function(e,p) {
+		if ( e.notAuto ) return;
+
+		if ( p == "height" && e.scrollHeight != parseInt(jQuery.curCSS(e,p)) ) return;
+		if ( p == "width" && e.scrollWidth != parseInt(jQuery.curCSS(e,p)) ) return;
+
+		// Remember the original height
+		var a = e.style[p];
+
+		// Figure out the size of the height right now
+		var o = jQuery.curCSS(e,p,1);
+
+		if ( p == "height" && e.scrollHeight != o ||
+			p == "width" && e.scrollWidth != o ) return;
+
+		// Set the height to auto
+		e.style[p] = e.currentStyle ? "" : "auto";
+
+		// See what the size of "auto" is
+		var n = jQuery.curCSS(e,p,1);
+
+		// Revert back to the original size
+		if ( o != n && n != "auto" ) {
+			e.style[p] = a;
+			e.notAuto = true;
+		}
+	},
+	
+	speed: function(s,o) {
+		o = o || {};
+		
+		if ( o.constructor == Function )
+			o = { complete: o };
+		
+		var ss = { slow: 600, fast: 200 };
+		o.duration = (s && s.constructor == Number ? s : ss[s]) || 400;
+	
+		// Queueing
+		o.oldComplete = o.complete;
+		o.complete = function(){
+			jQuery.dequeue(this, "fx");
+			if ( o.oldComplete && o.oldComplete.constructor == Function )
+				o.oldComplete.apply( this );
+		};
+	
+		return o;
+	},
+	
+	queue: {},
+	
+	dequeue: function(elem,type){
+		type = type || "fx";
+	
+		if ( elem.queue && elem.queue[type] ) {
+			// Remove self
+			elem.queue[type].shift();
+	
+			// Get next function
+			var f = elem.queue[type][0];
+		
+			if ( f ) f.apply( elem );
+		}
+	},
+
+	/*
+	 * I originally wrote fx() as a clone of moo.fx and in the process
+	 * of making it small in size the code became illegible to sane
+	 * people. You've been warned.
+	 */
+	
+	fx: function( elem, options, prop ){
+	
+		var z = this;
+	
+		// The users options
+		z.o = {
+			duration: options.duration || 400,
+			complete: options.complete,
+			step: options.step
+		};
+	
+		// The element
+		z.el = elem;
+	
+		// The styles
+		var y = z.el.style;
+	
+		// Simple function for setting a style value
+		z.a = function(){
+			if ( options.step )
+				options.step.apply( elem, [ z.now ] );
+
+			if ( prop == "opacity" ) {
+				if (z.now == 1) z.now = 0.9999;
+				if (window.ActiveXObject)
+					y.filter = "alpha(opacity=" + z.now*100 + ")";
+				else
+					y.opacity = z.now;
+
+			// My hate for IE will never die
+			} else if ( parseInt(z.now) )
+				y[prop] = parseInt(z.now) + "px";
+				
+			y.display = "block";
+		};
+	
+		// Figure out the maximum number to run to
+		z.max = function(){
+			return parseFloat( jQuery.css(z.el,prop) );
+		};
+	
+		// Get the current size
+		z.cur = function(){
+			var r = parseFloat( jQuery.curCSS(z.el, prop) );
+			return r && r > -10000 ? r : z.max();
+		};
+	
+		// Start an animation from one number to another
+		z.custom = function(from,to){
+			z.startTime = (new Date()).getTime();
+			z.now = from;
+			z.a();
+	
+			z.timer = setInterval(function(){
+				z.step(from, to);
+			}, 13);
+		};
+	
+		// Simple 'show' function
+		z.show = function( p ){
+			if ( !z.el.orig ) z.el.orig = {};
+
+			// Remember where we started, so that we can go back to it later
+			z.el.orig[prop] = this.cur();
+
+			z.custom( 0, z.el.orig[prop] );
+
+			// Stupid IE, look what you made me do
+			if ( prop != "opacity" )
+				y[prop] = "1px";
+		};
+	
+		// Simple 'hide' function
+		z.hide = function(){
+			if ( !z.el.orig ) z.el.orig = {};
+
+			// Remember where we started, so that we can go back to it later
+			z.el.orig[prop] = this.cur();
+
+			z.o.hide = true;
+
+			// Begin the animation
+			z.custom(z.el.orig[prop], 0);
+		};
+	
+		// IE has trouble with opacity if it does not have layout
+		if ( jQuery.browser.msie && !z.el.currentStyle.hasLayout )
+			y.zoom = "1";
+	
+		// Remember  the overflow of the element
+		if ( !z.el.oldOverlay )
+			z.el.oldOverflow = jQuery.css( z.el, "overflow" );
+	
+		// Make sure that nothing sneaks out
+		y.overflow = "hidden";
+	
+		// Each step of an animation
+		z.step = function(firstNum, lastNum){
+			var t = (new Date()).getTime();
+	
+			if (t > z.o.duration + z.startTime) {
+				// Stop the timer
+				clearInterval(z.timer);
+				z.timer = null;
+
+				z.now = lastNum;
+				z.a();
+
+				z.el.curAnim[ prop ] = true;
+				
+				var done = true;
+				for ( var i in z.el.curAnim )
+					if ( z.el.curAnim[i] !== true )
+						done = false;
+						
+				if ( done ) {
+					// Reset the overflow
+					y.overflow = z.el.oldOverflow;
+				
+					// Hide the element if the "hide" operation was done
+					if ( z.o.hide ) 
+						y.display = 'none';
+					
+					// Reset the property, if the item has been hidden
+					if ( z.o.hide ) {
+						for ( var p in z.el.curAnim ) {
+							y[ p ] = z.el.orig[p] + ( p == "opacity" ? "" : "px" );
+	
+							// set its height and/or width to auto
+							if ( p == 'height' || p == 'width' )
+								jQuery.setAuto( z.el, p );
+						}
+					}
+				}
+
+				// If a callback was provided, execute it
+				if( done && z.o.complete && z.o.complete.constructor == Function )
+					// Execute the complete function
+					z.o.complete.apply( z.el );
+			} else {
+				// Figure out where in the animation we are and set the number
+				var p = (t - this.startTime) / z.o.duration;
+				z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;
+	
+				// Perform the next step of the animation
+				z.a();
+			}
+		};
+	
+	}
+
+});
+// AJAX Plugin
+// Docs Here:
+// http://jquery.com/docs/ajax/
+jQuery.fn.loadIfModified = function( url, params, callback ) {
+	this.load( url, params, callback, 1 );
+};
+
+jQuery.fn.load = function( url, params, callback, ifModified ) {
+	if ( url.constructor == Function )
+		return this.bind("load", url);
+
+	callback = callback || function(){};
+
+	// Default to a GET request
+	var type = "GET";
+
+	// If the second parameter was provided
+	if ( params ) {
+		// If it's a function
+		if ( params.constructor == Function ) {
+			// We assume that it's the callback
+			callback = params;
+			params = null;
+			
+		// Otherwise, build a param string
+		} else {
+			params = jQuery.param( params );
+			type = "POST";
+		}
+	}
+	
+	var self = this;
+	
+	// Request the remote document
+	jQuery.ajax( type, url, params,function(res, status){
+		
+		if ( status == "success" || !ifModified && status == "notmodified" ) {
+			// Inject the HTML into all the matched elements
+			self.html(res.responseText).each( callback, [res.responseText, status] );
+			
+			// Execute all the scripts inside of the newly-injected HTML
+			$("script", self).each(function(){
+				if ( this.src )
+					$.getScript( this.src );
+				else
+					eval.call( window, this.text || this.textContent || this.innerHTML || "" );
+			});
+		} else
+			callback.apply( self, [res.responseText, status] );
+
+	}, ifModified);
+	
+	return this;
+};
+
+// If IE is used, create a wrapper for the XMLHttpRequest object
+if ( jQuery.browser.msie )
+	XMLHttpRequest = function(){
+		return new ActiveXObject(
+			navigator.userAgent.indexOf("MSIE 5") >= 0 ?
+			"Microsoft.XMLHTTP" : "Msxml2.XMLHTTP"
+		);
+	};
+
+// Attach a bunch of functions for handling common AJAX events
+new function(){
+	var e = "ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess".split(',');
+	
+	for ( var i = 0; i < e.length; i++ ) new function(){
+		var o = e[i];
+		jQuery.fn[o] = function(f){
+			return this.bind(o, f);
+		};
+	};
+};
+
+jQuery.extend({
+	get: function( url, data, callback, type, ifModified ) {
+		if ( data.constructor == Function ) {
+			type = callback;
+			callback = data;
+			data = null;
+		}
+		
+		if ( data ) url += "?" + jQuery.param(data);
+		
+		// Build and start the HTTP Request
+		jQuery.ajax( "GET", url, null, function(r, status) {
+			if ( callback ) callback( jQuery.httpData(r,type), status );
+		}, ifModified);
+	},
+
+	getIfModified: function( url, data, callback, type ) {
+		jQuery.get(url, data, callback, type, 1);
+	},
+
+	getScript: function( url, data, callback ) {
+		jQuery.get(url, data, callback, "script");
+	},
+	post: function( url, data, callback, type ) {
+		// Build and start the HTTP Request
+		jQuery.ajax( "POST", url, jQuery.param(data), function(r, status) {
+			if ( callback ) callback( jQuery.httpData(r,type), status );
+		});
+	},
+	
+	// timeout (ms)
+	timeout: 0,
+
+	ajaxTimeout: function(timeout) {
+		jQuery.timeout = timeout;
+	},
+
+	// Last-Modified header cache for next request
+	lastModified: {},
+	ajax: function( type, url, data, ret, ifModified ) {
+		// If only a single argument was passed in,
+		// assume that it is a object of key/value pairs
+		if ( !url ) {
+			ret = type.complete;
+			var success = type.success;
+			var error = type.error;
+			data = type.data;
+			url = type.url;
+			type = type.type;
+		}
+		
+		// Watch for a new set of requests
+		if ( ! jQuery.active++ )
+			jQuery.event.trigger( "ajaxStart" );
+
+		var requestDone = false;
+	
+		// Create the request object
+		var xml = new XMLHttpRequest();
+	
+		// Open the socket
+		xml.open(type || "GET", url, true);
+		
+		// Set the correct header, if data is being sent
+		if ( data )
+			xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+		
+		// Set the If-Modified-Since header, if ifModified mode.
+		if ( ifModified )
+			xml.setRequestHeader("If-Modified-Since",
+				jQuery.lastModified[url] || "Thu, 01 Jan 1970 00:00:00 GMT" );
+		
+		// Set header so calling script knows that it's an XMLHttpRequest
+		xml.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+	
+		// Make sure the browser sends the right content length
+		if ( xml.overrideMimeType )
+			xml.setRequestHeader("Connection", "close");
+		
+		// Wait for a response to come back
+		var onreadystatechange = function(istimeout){
+			// The transfer is complete and the data is available, or the request timed out
+			if ( xml && (xml.readyState == 4 || istimeout == "timeout") ) {
+				requestDone = true;
+
+				var status = jQuery.httpSuccess( xml ) && istimeout != "timeout" ?
+					ifModified && jQuery.httpNotModified( xml, url ) ? "notmodified" : "success" : "error";
+				
+				// Make sure that the request was successful or notmodified
+				if ( status != "error" ) {
+					// Cache Last-Modified header, if ifModified mode.
+					var modRes = xml.getResponseHeader("Last-Modified");
+					if ( ifModified && modRes ) jQuery.lastModified[url] = modRes;
+					
+					// If a local callback was specified, fire it
+					if ( success ) success( xml, status );
+					
+					// Fire the global callback
+					jQuery.event.trigger( "ajaxSuccess" );
+				
+				// Otherwise, the request was not successful
+				} else {
+					// If a local callback was specified, fire it
+					if ( error ) error( xml, status );
+					
+					// Fire the global callback
+					jQuery.event.trigger( "ajaxError" );
+				}
+				
+				// The request was completed
+				jQuery.event.trigger( "ajaxComplete" );
+				
+				// Handle the global AJAX counter
+				if ( ! --jQuery.active )
+					jQuery.event.trigger( "ajaxStop" );
+	
+				// Process result
+				if ( ret ) ret(xml, status);
+				
+				// Stop memory leaks
+				xml.onreadystatechange = function(){};
+				xml = null;
+				
+			}
+		};
+		xml.onreadystatechange = onreadystatechange;
+		
+		// Timeout checker
+		if(jQuery.timeout > 0)
+			setTimeout(function(){
+				// Check to see if the request is still happening
+				if (xml) {
+					// Cancel the request
+					xml.abort();
+
+					if ( !requestDone ) onreadystatechange( "timeout" );
+
+					// Clear from memory
+					xml = null;
+				}
+			}, jQuery.timeout);
+		
+		// Send the data
+		xml.send(data);
+	},
+	
+	// Counter for holding the number of active queries
+	active: 0,
+	
+	// Determines if an XMLHttpRequest was successful or not
+	httpSuccess: function(r) {
+		try {
+			return !r.status && location.protocol == "file:" ||
+				( r.status >= 200 && r.status < 300 ) || r.status == 304 ||
+				jQuery.browser.safari && r.status == undefined;
+		} catch(e){}
+
+		return false;
+	},
+
+	// Determines if an XMLHttpRequest returns NotModified
+	httpNotModified: function(xml, url) {
+		try {
+			var xmlRes = xml.getResponseHeader("Last-Modified");
+
+			// Firefox always returns 200. check Last-Modified date
+			return xml.status == 304 || xmlRes == jQuery.lastModified[url] ||
+				jQuery.browser.safari && xml.status == undefined;
+		} catch(e){}
+
+		return false;
+	},
+	
+	// Get the data out of an XMLHttpRequest.
+	// Return parsed XML if content-type header is "xml" and type is "xml" or omitted,
+	// otherwise return plain text.
+	httpData: function(r,type) {
+		var ct = r.getResponseHeader("content-type");
+		var data = !type && ct && ct.indexOf("xml") >= 0;
+		data = type == "xml" || data ? r.responseXML : r.responseText;
+
+		// If the type is "script", eval it
+		if ( type == "script" ) eval.call( window, data );
+
+		return data;
+	},
+	
+	// Serialize an array of form elements or a set of
+	// key/values into a query string
+	param: function(a) {
+		var s = [];
+		
+		// If an array was passed in, assume that it is an array
+		// of form elements
+		if ( a.constructor == Array ) {
+			// Serialize the form elements
+			for ( var i = 0; i < a.length; i++ )
+				s.push( a[i].name + "=" + encodeURIComponent( a[i].value ) );
+			
+		// Otherwise, assume that it's an object of key/value pairs
+		} else {
+			// Serialize the key/values
+			for ( var j in a )
+				s.push( j + "=" + encodeURIComponent( a[j] ) );
+		}
+		
+		// Return the resulting serialization
+		return s.join("&");
+	}
+
+});
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.1.js b/devtools/client/inspector/markup/test/lib_jquery_1.1.js
new file mode 100644
index 0000000000..981a3bdc1c
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.1.js
@@ -0,0 +1,2172 @@
+/* prevent execution of jQuery if included more than once */
+if(typeof window.jQuery == "undefined") {
+/*
+ * jQuery 1.1 - New Wave Javascript
+ *
+ * Copyright (c) 2007 John Resig (jquery.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2007-01-14 17:37:33 -0500 (Sun, 14 Jan 2007) $
+ * $Rev: 1073 $
+ */
+
+// Global undefined variable
+window.undefined = window.undefined;
+var jQuery = function(a,c) {
+	// If the context is global, return a new object
+	if ( window == this )
+		return new jQuery(a,c);
+
+	// Make sure that a selection was provided
+	a = a || document;
+	
+	// HANDLE: $(function)
+	// Shortcut for document ready
+	// Safari reports typeof on DOM NodeLists as a function
+	if ( jQuery.isFunction(a) && !a.nodeType && a[0] == undefined )
+		return new jQuery(document)[ jQuery.fn.ready ? "ready" : "load" ]( a );
+	
+	// Handle HTML strings
+	if ( typeof a  == "string" ) {
+		var m = /^[^<]*(<.+>)[^>]*$/.exec(a);
+
+		a = m ?
+			// HANDLE: $(html) -> $(array)
+			jQuery.clean( [ m[1] ] ) :
+		
+			// HANDLE: $(expr)
+			jQuery.find( a, c );
+	}
+	
+	return this.setArray(
+		// HANDLE: $(array)
+		a.constructor == Array && a ||
+
+		// HANDLE: $(arraylike)
+		// Watch for when an array-like object is passed as the selector
+		(a.jquery || a.length && a != window && !a.nodeType && a[0] != undefined && a[0].nodeType) && jQuery.makeArray( a ) ||
+
+		// HANDLE: $(*)
+		[ a ] );
+};
+
+// Map over the $ in case of overwrite
+if ( typeof $ != "undefined" )
+	jQuery._$ = $;
+	
+// Map the jQuery namespace to the '$' one
+var $ = jQuery;
+
+jQuery.fn = jQuery.prototype = {
+	jquery: "1.1",
+
+	size: function() {
+		return this.length;
+	},
+	
+	length: 0,
+
+	get: function( num ) {
+		return num == undefined ?
+
+			// Return a 'clean' array
+			jQuery.makeArray( this ) :
+
+			// Return just the object
+			this[num];
+	},
+	pushStack: function( a ) {
+		var ret = jQuery(this);
+		ret.prevObject = this;
+		return ret.setArray( a );
+	},
+	setArray: function( a ) {
+		this.length = 0;
+		[].push.apply( this, a );
+		return this;
+	},
+	each: function( fn, args ) {
+		return jQuery.each( this, fn, args );
+	},
+	index: function( obj ) {
+		var pos = -1;
+		this.each(function(i){
+			if ( this == obj ) pos = i;
+		});
+		return pos;
+	},
+
+	attr: function( key, value, type ) {
+		var obj = key;
+		
+		// Look for the case where we're accessing a style value
+		if ( key.constructor == String )
+			if ( value == undefined )
+				return jQuery[ type || "attr" ]( this[0], key );
+			else {
+				obj = {};
+				obj[ key ] = value;
+			}
+		
+		// Check to see if we're setting style values
+		return this.each(function(){
+			// Set all the styles
+			for ( var prop in obj )
+				jQuery.attr(
+					type ? this.style : this,
+					prop, jQuery.prop(this, obj[prop], type)
+				);
+		});
+	},
+
+	css: function( key, value ) {
+		return this.attr( key, value, "curCSS" );
+	},
+
+	text: function(e) {
+		if ( typeof e == "string" )
+			return this.empty().append( document.createTextNode( e ) );
+
+		var t = "";
+		jQuery.each( e || this, function(){
+			jQuery.each( this.childNodes, function(){
+				if ( this.nodeType != 8 )
+					t += this.nodeType != 1 ?
+						this.nodeValue : jQuery.fn.text([ this ]);
+			});
+		});
+		return t;
+	},
+
+	wrap: function() {
+		// The elements to wrap the target around
+		var a = jQuery.clean(arguments);
+
+		// Wrap each of the matched elements individually
+		return this.each(function(){
+			// Clone the structure that we're using to wrap
+			var b = a[0].cloneNode(true);
+
+			// Insert it before the element to be wrapped
+			this.parentNode.insertBefore( b, this );
+
+			// Find the deepest point in the wrap structure
+			while ( b.firstChild )
+				b = b.firstChild;
+
+			// Move the matched element to within the wrap structure
+			b.appendChild( this );
+		});
+	},
+	append: function() {
+		return this.domManip(arguments, true, 1, function(a){
+			this.appendChild( a );
+		});
+	},
+	prepend: function() {
+		return this.domManip(arguments, true, -1, function(a){
+			this.insertBefore( a, this.firstChild );
+		});
+	},
+	before: function() {
+		return this.domManip(arguments, false, 1, function(a){
+			this.parentNode.insertBefore( a, this );
+		});
+	},
+	after: function() {
+		return this.domManip(arguments, false, -1, function(a){
+			this.parentNode.insertBefore( a, this.nextSibling );
+		});
+	},
+	end: function() {
+		return this.prevObject || jQuery([]);
+	},
+	find: function(t) {
+		return this.pushStack( jQuery.map( this, function(a){
+			return jQuery.find(t,a);
+		}) );
+	},
+	clone: function(deep) {
+		return this.pushStack( jQuery.map( this, function(a){
+			return a.cloneNode( deep != undefined ? deep : true );
+		}) );
+	},
+
+	filter: function(t) {
+		return this.pushStack(
+			jQuery.isFunction( t ) &&
+			jQuery.grep(this, function(el, index){
+				return t.apply(el, [index])
+			}) ||
+
+			jQuery.multiFilter(t,this) );
+	},
+
+	not: function(t) {
+		return this.pushStack(
+			t.constructor == String &&
+			jQuery.multiFilter(t,this,true) ||
+
+			jQuery.grep(this,function(a){
+					if ( t.constructor == Array || t.jquery )
+						return jQuery.inArray( t, a ) < 0;
+					else
+						return a != t;
+			}) );
+	},
+
+	add: function(t) {
+		return this.pushStack( jQuery.merge(
+			this.get(),
+			typeof t == "string" ? jQuery(t).get() : t )
+		);
+	},
+	is: function(expr) {
+		return expr ? jQuery.filter(expr,this).r.length > 0 : false;
+	},
+
+	val: function( val ) {
+		return val == undefined ?
+			( this.length ? this[0].value : null ) :
+			this.attr( "value", val );
+	},
+
+	html: function( val ) {
+		return val == undefined ?
+			( this.length ? this[0].innerHTML : null ) :
+			this.empty().append( val );
+	},
+	domManip: function(args, table, dir, fn){
+		var clone = this.length > 1; 
+		var a = jQuery.clean(args);
+		if ( dir < 0 )
+			a.reverse();
+
+		return this.each(function(){
+			var obj = this;
+
+			if ( table && this.nodeName.toUpperCase() == "TABLE" && a[0].nodeName.toUpperCase() == "TR" )
+				obj = this.getElementsByTagName("tbody")[0] || this.appendChild(document.createElement("tbody"));
+
+			jQuery.each( a, function(){
+				fn.apply( obj, [ clone ? this.cloneNode(true) : this ] );
+			});
+
+		});
+	}
+};
+
+jQuery.extend = jQuery.fn.extend = function() {
+	// copy reference to target object
+	var target = arguments[0],
+		a = 1;
+
+	// extend jQuery itself if only one argument is passed
+	if ( arguments.length == 1 ) {
+		target = this;
+		a = 0;
+	}
+	var prop;
+	while (prop = arguments[a++])
+		// Extend the base object
+		for ( var i in prop ) target[i] = prop[i];
+
+	// Return the modified object
+	return target;
+};
+
+jQuery.extend({
+	noConflict: function() {
+		if ( jQuery._$ )
+			$ = jQuery._$;
+	},
+
+	isFunction: function( fn ) {
+		return fn && typeof fn == "function";
+	},
+	// args is for internal usage only
+	each: function( obj, fn, args ) {
+		if ( obj.length == undefined )
+			for ( var i in obj )
+				fn.apply( obj[i], args || [i, obj[i]] );
+		else
+			for ( var i = 0, ol = obj.length; i < ol; i++ )
+				if ( fn.apply( obj[i], args || [i, obj[i]] ) === false ) break;
+		return obj;
+	},
+	
+	prop: function(elem, value, type){
+			// Handle executable functions
+			if ( jQuery.isFunction( value ) )
+				return value.call( elem );
+
+			// Handle passing in a number to a CSS property
+			if ( value.constructor == Number && type == "curCSS" )
+				return value + "px";
+
+			return value;
+	},
+
+	className: {
+		// internal only, use addClass("class")
+		add: function( elem, c ){
+			jQuery.each( c.split(/\s+/), function(i, cur){
+				if ( !jQuery.className.has( elem.className, cur ) )
+					elem.className += ( elem.className ? " " : "" ) + cur;
+			});
+		},
+
+		// internal only, use removeClass("class")
+		remove: function( elem, c ){
+			elem.className = c ?
+				jQuery.grep( elem.className.split(/\s+/), function(cur){
+					return !jQuery.className.has( c, cur );	
+				}).join(" ") : "";
+		},
+
+		// internal only, use is(".class")
+		has: function( t, c ) {
+			t = t.className || t;
+			return t && new RegExp("(^|\\s)" + c + "(\\s|$)").test( t );
+		}
+	},
+	swap: function(e,o,f) {
+		for ( var i in o ) {
+			e.style["old"+i] = e.style[i];
+			e.style[i] = o[i];
+		}
+		f.apply( e, [] );
+		for ( var i in o )
+			e.style[i] = e.style["old"+i];
+	},
+
+	css: function(e,p) {
+		if ( p == "height" || p == "width" ) {
+			var old = {}, oHeight, oWidth, d = ["Top","Bottom","Right","Left"];
+
+			jQuery.each( d, function(){
+				old["padding" + this] = 0;
+				old["border" + this + "Width"] = 0;
+			});
+
+			jQuery.swap( e, old, function() {
+				if (jQuery.css(e,"display") != "none") {
+					oHeight = e.offsetHeight;
+					oWidth = e.offsetWidth;
+				} else {
+					e = jQuery(e.cloneNode(true))
+						.find(":radio").removeAttr("checked").end()
+						.css({
+							visibility: "hidden", position: "absolute", display: "block", right: "0", left: "0"
+						}).appendTo(e.parentNode)[0];
+
+					var parPos = jQuery.css(e.parentNode,"position");
+					if ( parPos == "" || parPos == "static" )
+						e.parentNode.style.position = "relative";
+
+					oHeight = e.clientHeight;
+					oWidth = e.clientWidth;
+
+					if ( parPos == "" || parPos == "static" )
+						e.parentNode.style.position = "static";
+
+					e.parentNode.removeChild(e);
+				}
+			});
+
+			return p == "height" ? oHeight : oWidth;
+		}
+
+		return jQuery.curCSS( e, p );
+	},
+
+	curCSS: function(elem, prop, force) {
+		var ret;
+		
+		if (prop == "opacity" && jQuery.browser.msie)
+			return jQuery.attr(elem.style, "opacity");
+			
+		if (prop == "float" || prop == "cssFloat")
+		    prop = jQuery.browser.msie ? "styleFloat" : "cssFloat";
+
+		if (!force && elem.style[prop])
+			ret = elem.style[prop];
+
+		else if (document.defaultView && document.defaultView.getComputedStyle) {
+
+			if (prop == "cssFloat" || prop == "styleFloat")
+				prop = "float";
+
+			prop = prop.replace(/([A-Z])/g,"-$1").toLowerCase();
+			var cur = document.defaultView.getComputedStyle(elem, null);
+
+			if ( cur )
+				ret = cur.getPropertyValue(prop);
+			else if ( prop == "display" )
+				ret = "none";
+			else
+				jQuery.swap(elem, { display: "block" }, function() {
+				    var c = document.defaultView.getComputedStyle(this, "");
+				    ret = c && c.getPropertyValue(prop) || "";
+				});
+
+		} else if (elem.currentStyle) {
+
+			var newProp = prop.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});
+			ret = elem.currentStyle[prop] || elem.currentStyle[newProp];
+			
+		}
+
+		return ret;
+	},
+	
+	clean: function(a) {
+		var r = [];
+
+		jQuery.each( a, function(i,arg){
+			if ( !arg ) return;
+
+			if ( arg.constructor == Number )
+				arg = arg.toString();
+			
+			 // Convert html string into DOM nodes
+			if ( typeof arg == "string" ) {
+				// Trim whitespace, otherwise indexOf won't work as expected
+				var s = jQuery.trim(arg), div = document.createElement("div"), tb = [];
+
+				var wrap =
+					 // option or optgroup
+					!s.indexOf("<opt") &&
+					[1, "<select>", "</select>"] ||
+					
+					(!s.indexOf("<thead") || !s.indexOf("<tbody") || !s.indexOf("<tfoot")) &&
+					[1, "<table>", "</table>"] ||
+					
+					!s.indexOf("<tr") &&
+					[2, "<table><tbody>", "</tbody></table>"] ||
+					
+				 	// <thead> matched above
+					(!s.indexOf("<td") || !s.indexOf("<th")) &&
+					[3, "<table><tbody><tr>", "</tr></tbody></table>"] ||
+					
+					[0,"",""];
+
+				// Go to html and back, then peel off extra wrappers
+				div.innerHTML = wrap[1] + s + wrap[2];
+				
+				// Move to the right depth
+				while ( wrap[0]-- )
+					div = div.firstChild;
+				
+				// Remove IE's autoinserted <tbody> from table fragments
+				if ( jQuery.browser.msie ) {
+					
+					// String was a <table>, *may* have spurious <tbody>
+					if ( !s.indexOf("<table") && s.indexOf("<tbody") < 0 ) 
+						tb = div.firstChild && div.firstChild.childNodes;
+						
+					// String was a bare <thead> or <tfoot>
+					else if ( wrap[1] == "<table>" && s.indexOf("<tbody") < 0 )
+						tb = div.childNodes;
+
+					for ( var n = tb.length-1; n >= 0 ; --n )
+						if ( tb[n].nodeName.toUpperCase() == "TBODY" && !tb[n].childNodes.length )
+							tb[n].parentNode.removeChild(tb[n]);
+					
+				}
+				
+				arg = div.childNodes;
+			}
+
+			if ( arg.length === 0 )
+				return;
+			
+			if ( arg[0] == undefined )
+				r.push( arg );
+			else
+				r = jQuery.merge( r, arg );
+
+		});
+
+		return r;
+	},
+	
+	attr: function(elem, name, value){
+		var fix = {
+			"for": "htmlFor",
+			"class": "className",
+			"float": jQuery.browser.msie ? "styleFloat" : "cssFloat",
+			cssFloat: jQuery.browser.msie ? "styleFloat" : "cssFloat",
+			innerHTML: "innerHTML",
+			className: "className",
+			value: "value",
+			disabled: "disabled",
+			checked: "checked",
+			readonly: "readOnly",
+			selected: "selected"
+		};
+		
+		// IE actually uses filters for opacity ... elem is actually elem.style
+		if ( name == "opacity" && jQuery.browser.msie && value != undefined ) {
+			// IE has trouble with opacity if it does not have layout
+			// Force it by setting the zoom level
+			elem.zoom = 1; 
+
+			// Set the alpha filter to set the opacity
+			return elem.filter = elem.filter.replace(/alpha\([^\)]*\)/gi,"") +
+				( value == 1 ? "" : "alpha(opacity=" + value * 100 + ")" );
+
+		} else if ( name == "opacity" && jQuery.browser.msie )
+			return elem.filter ? 
+				parseFloat( elem.filter.match(/alpha\(opacity=(.*)\)/)[1] ) / 100 : 1;
+		
+		// Mozilla doesn't play well with opacity 1
+		if ( name == "opacity" && jQuery.browser.mozilla && value == 1 )
+			value = 0.9999;
+
+		// Certain attributes only work when accessed via the old DOM 0 way
+		if ( fix[name] ) {
+			if ( value != undefined ) elem[fix[name]] = value;
+			return elem[fix[name]];
+
+		} else if ( value == undefined && jQuery.browser.msie && elem.nodeName && elem.nodeName.toUpperCase() == "FORM" && (name == "action" || name == "method") )
+			return elem.getAttributeNode(name).nodeValue;
+
+		// IE elem.getAttribute passes even for style
+		else if ( elem.tagName ) {
+			if ( value != undefined ) elem.setAttribute( name, value );
+			return elem.getAttribute( name );
+
+		} else {
+			name = name.replace(/-([a-z])/ig,function(z,b){return b.toUpperCase();});
+			if ( value != undefined ) elem[name] = value;
+			return elem[name];
+		}
+	},
+	trim: function(t){
+		return t.replace(/^\s+|\s+$/g, "");
+	},
+
+	makeArray: function( a ) {
+		var r = [];
+
+		if ( a.constructor != Array )
+			for ( var i = 0, al = a.length; i < al; i++ )
+				r.push( a[i] );
+		else
+			r = a.slice( 0 );
+
+		return r;
+	},
+
+	inArray: function( b, a ) {
+		for ( var i = 0, al = a.length; i < al; i++ )
+			if ( a[i] == b )
+				return i;
+		return -1;
+	},
+	merge: function(first, second) {
+		var r = [].slice.call( first, 0 );
+
+		// Now check for duplicates between the two arrays
+		// and only add the unique items
+		for ( var i = 0, sl = second.length; i < sl; i++ )
+			// Check for duplicates
+			if ( jQuery.inArray( second[i], r ) == -1 )
+				// The item is unique, add it
+				first.push( second[i] );
+
+		return first;
+	},
+	grep: function(elems, fn, inv) {
+		// If a string is passed in for the function, make a function
+		// for it (a handy shortcut)
+		if ( typeof fn == "string" )
+			fn = new Function("a","i","return " + fn);
+
+		var result = [];
+
+		// Go through the array, only saving the items
+		// that pass the validator function
+		for ( var i = 0, el = elems.length; i < el; i++ )
+			if ( !inv && fn(elems[i],i) || inv && !fn(elems[i],i) )
+				result.push( elems[i] );
+
+		return result;
+	},
+	map: function(elems, fn) {
+		// If a string is passed in for the function, make a function
+		// for it (a handy shortcut)
+		if ( typeof fn == "string" )
+			fn = new Function("a","return " + fn);
+
+		var result = [], r = [];
+
+		// Go through the array, translating each of the items to their
+		// new value (or values).
+		for ( var i = 0, el = elems.length; i < el; i++ ) {
+			var val = fn(elems[i],i);
+
+			if ( val !== null && val != undefined ) {
+				if ( val.constructor != Array ) val = [val];
+				result = result.concat( val );
+			}
+		}
+
+		var r = result.length ? [ result[0] ] : [];
+
+		check: for ( var i = 1, rl = result.length; i < rl; i++ ) {
+			for ( var j = 0; j < i; j++ )
+				if ( result[i] == r[j] )
+					continue check;
+
+			r.push( result[i] );
+		}
+
+		return r;
+	}
+});
+ 
+/*
+ * Whether the W3C compliant box model is being used.
+ *
+ * @property
+ * @name $.boxModel
+ * @type Boolean
+ * @cat JavaScript
+ */
+new function() {
+	var b = navigator.userAgent.toLowerCase();
+
+	// Figure out what browser is being used
+	jQuery.browser = {
+		safari: /webkit/.test(b),
+		opera: /opera/.test(b),
+		msie: /msie/.test(b) && !/opera/.test(b),
+		mozilla: /mozilla/.test(b) && !/(compatible|webkit)/.test(b)
+	};
+
+	// Check to see if the W3C box model is being used
+	jQuery.boxModel = !jQuery.browser.msie || document.compatMode == "CSS1Compat";
+};
+
+jQuery.each({
+	parent: "a.parentNode",
+	parents: "jQuery.parents(a)",
+	next: "jQuery.nth(a,2,'nextSibling')",
+	prev: "jQuery.nth(a,2,'previousSibling')",
+	siblings: "jQuery.sibling(a.parentNode.firstChild,a)",
+	children: "jQuery.sibling(a.firstChild)"
+}, function(i,n){
+	jQuery.fn[ i ] = function(a) {
+		var ret = jQuery.map(this,n);
+		if ( a && typeof a == "string" )
+			ret = jQuery.multiFilter(a,ret);
+		return this.pushStack( ret );
+	};
+});
+
+jQuery.each({
+	appendTo: "append",
+	prependTo: "prepend",
+	insertBefore: "before",
+	insertAfter: "after"
+}, function(i,n){
+	jQuery.fn[ i ] = function(){
+		var a = arguments;
+		return this.each(function(){
+			for ( var j = 0, al = a.length; j < al; j++ )
+				jQuery(a[j])[n]( this );
+		});
+	};
+});
+
+jQuery.each( {
+	removeAttr: function( key ) {
+		jQuery.attr( this, key, "" );
+		this.removeAttribute( key );
+	},
+	addClass: function(c){
+		jQuery.className.add(this,c);
+	},
+	removeClass: function(c){
+		jQuery.className.remove(this,c);
+	},
+	toggleClass: function( c ){
+		jQuery.className[ jQuery.className.has(this,c) ? "remove" : "add" ](this, c);
+	},
+	remove: function(a){
+		if ( !a || jQuery.filter( a, [this] ).r.length )
+			this.parentNode.removeChild( this );
+	},
+	empty: function() {
+		while ( this.firstChild )
+			this.removeChild( this.firstChild );
+	}
+}, function(i,n){
+	jQuery.fn[ i ] = function() {
+		return this.each( n, arguments );
+	};
+});
+
+jQuery.each( [ "eq", "lt", "gt", "contains" ], function(i,n){
+	jQuery.fn[ n ] = function(num,fn) {
+		return this.filter( ":" + n + "(" + num + ")", fn );
+	};
+});
+
+jQuery.each( [ "height", "width" ], function(i,n){
+	jQuery.fn[ n ] = function(h) {
+		return h == undefined ?
+			( this.length ? jQuery.css( this[0], n ) : null ) :
+			this.css( n, h.constructor == String ? h : h + "px" );
+	};
+});
+jQuery.extend({
+	expr: {
+		"": "m[2]=='*'||a.nodeName.toUpperCase()==m[2].toUpperCase()",
+		"#": "a.getAttribute('id')==m[2]",
+		":": {
+			// Position Checks
+			lt: "i<m[3]-0",
+			gt: "i>m[3]-0",
+			nth: "m[3]-0==i",
+			eq: "m[3]-0==i",
+			first: "i==0",
+			last: "i==r.length-1",
+			even: "i%2==0",
+			odd: "i%2",
+
+			// Child Checks
+			"nth-child": "jQuery.nth(a.parentNode.firstChild,m[3],'nextSibling',a)==a",
+			"first-child": "jQuery.nth(a.parentNode.firstChild,1,'nextSibling')==a",
+			"last-child": "jQuery.nth(a.parentNode.lastChild,1,'previousSibling')==a",
+			"only-child": "jQuery.sibling(a.parentNode.firstChild).length==1",
+
+			// Parent Checks
+			parent: "a.firstChild",
+			empty: "!a.firstChild",
+
+			// Text Check
+			contains: "jQuery.fn.text.apply([a]).indexOf(m[3])>=0",
+
+			// Visibility
+			visible: 'a.type!="hidden"&&jQuery.css(a,"display")!="none"&&jQuery.css(a,"visibility")!="hidden"',
+			hidden: 'a.type=="hidden"||jQuery.css(a,"display")=="none"||jQuery.css(a,"visibility")=="hidden"',
+
+			// Form attributes
+			enabled: "!a.disabled",
+			disabled: "a.disabled",
+			checked: "a.checked",
+			selected: "a.selected||jQuery.attr(a,'selected')",
+
+			// Form elements
+			text: "a.type=='text'",
+			radio: "a.type=='radio'",
+			checkbox: "a.type=='checkbox'",
+			file: "a.type=='file'",
+			password: "a.type=='password'",
+			submit: "a.type=='submit'",
+			image: "a.type=='image'",
+			reset: "a.type=='reset'",
+			button: 'a.type=="button"||a.nodeName=="BUTTON"',
+			input: "/input|select|textarea|button/i.test(a.nodeName)"
+		},
+		".": "jQuery.className.has(a,m[2])",
+		"@": {
+			"=": "z==m[4]",
+			"!=": "z!=m[4]",
+			"^=": "z&&!z.indexOf(m[4])",
+			"$=": "z&&z.substr(z.length - m[4].length,m[4].length)==m[4]",
+			"*=": "z&&z.indexOf(m[4])>=0",
+			"": "z",
+			_resort: function(m){
+				return ["", m[1], m[3], m[2], m[5]];
+			},
+			_prefix: "z=a[m[3]]||jQuery.attr(a,m[3]);"
+		},
+		"[": "jQuery.find(m[2],a).length"
+	},
+	
+	// The regular expressions that power the parsing engine
+	parse: [
+		// Match: [@value='test'], [@foo]
+		/^\[ *(@)([a-z0-9_-]*) *([!*$^=]*) *('?"?)(.*?)\4 *\]/i,
+
+		// Match: [div], [div p]
+		/^(\[)\s*(.*?(\[.*?\])?[^[]*?)\s*\]/,
+
+		// Match: :contains('foo')
+		/^(:)([a-z0-9_-]*)\("?'?(.*?(\(.*?\))?[^(]*?)"?'?\)/i,
+
+		// Match: :even, :last-chlid
+		/^([:.#]*)([a-z0-9_*-]*)/i
+	],
+
+	token: [
+		/^(\/?\.\.)/, "a.parentNode",
+		/^(>|\/)/, "jQuery.sibling(a.firstChild)",
+		/^(\+)/, "jQuery.nth(a,2,'nextSibling')",
+		/^(~)/, function(a){
+			var s = jQuery.sibling(a.parentNode.firstChild);
+			return s.slice(0, jQuery.inArray(a,s));
+		}
+	],
+
+	multiFilter: function( expr, elems, not ) {
+		var old, cur = [];
+
+		while ( expr && expr != old ) {
+			old = expr;
+			var f = jQuery.filter( expr, elems, not );
+			expr = f.t.replace(/^\s*,\s*/, "" );
+			cur = not ? elems = f.r : jQuery.merge( cur, f.r );
+		}
+
+		return cur;
+	},
+	find: function( t, context ) {
+		// Quickly handle non-string expressions
+		if ( typeof t != "string" )
+			return [ t ];
+
+		// Make sure that the context is a DOM Element
+		if ( context && !context.nodeType )
+			context = null;
+
+		// Set the correct context (if none is provided)
+		context = context || document;
+
+		// Handle the common XPath // expression
+		if ( !t.indexOf("//") ) {
+			context = context.documentElement;
+			t = t.substr(2,t.length);
+
+		// And the / root expression
+		} else if ( !t.indexOf("/") ) {
+			context = context.documentElement;
+			t = t.substr(1,t.length);
+			if ( t.indexOf("/") >= 1 )
+				t = t.substr(t.indexOf("/"),t.length);
+		}
+
+		// Initialize the search
+		var ret = [context], done = [], last = null;
+
+		// Continue while a selector expression exists, and while
+		// we're no longer looping upon ourselves
+		while ( t && last != t ) {
+			var r = [];
+			last = t;
+
+			t = jQuery.trim(t).replace( /^\/\//i, "" );
+
+			var foundToken = false;
+
+			// An attempt at speeding up child selectors that
+			// point to a specific element tag
+			var re = /^[\/>]\s*([a-z0-9*-]+)/i;
+			var m = re.exec(t);
+
+			if ( m ) {
+				// Perform our own iteration and filter
+				jQuery.each( ret, function(){
+					for ( var c = this.firstChild; c; c = c.nextSibling )
+						if ( c.nodeType == 1 && ( c.nodeName == m[1].toUpperCase() || m[1] == "*" ) )
+							r.push( c );
+				});
+
+				ret = r;
+				t = jQuery.trim( t.replace( re, "" ) );
+				foundToken = true;
+			} else {
+				// Look for pre-defined expression tokens
+				for ( var i = 0; i < jQuery.token.length; i += 2 ) {
+					// Attempt to match each, individual, token in
+					// the specified order
+					var re = jQuery.token[i];
+					var m = re.exec(t);
+
+					// If the token match was found
+					if ( m ) {
+						// Map it against the token's handler
+						r = ret = jQuery.map( ret, jQuery.isFunction( jQuery.token[i+1] ) ?
+							jQuery.token[i+1] :
+							function(a){ return eval(jQuery.token[i+1]); });
+
+						// And remove the token
+						t = jQuery.trim( t.replace( re, "" ) );
+						foundToken = true;
+						break;
+					}
+				}
+			}
+
+			// See if there's still an expression, and that we haven't already
+			// matched a token
+			if ( t && !foundToken ) {
+				// Handle multiple expressions
+				if ( !t.indexOf(",") ) {
+					// Clean the result set
+					if ( ret[0] == context ) ret.shift();
+
+					// Merge the result sets
+					jQuery.merge( done, ret );
+
+					// Reset the context
+					r = ret = [context];
+
+					// Touch up the selector string
+					t = " " + t.substr(1,t.length);
+
+				} else {
+					// Optomize for the case nodeName#idName
+					var re2 = /^([a-z0-9_-]+)(#)([a-z0-9\\*_-]*)/i;
+					var m = re2.exec(t);
+					
+					// Re-organize the results, so that they're consistent
+					if ( m ) {
+					   m = [ 0, m[2], m[3], m[1] ];
+
+					} else {
+						// Otherwise, do a traditional filter check for
+						// ID, class, and element selectors
+						re2 = /^([#.]?)([a-z0-9\\*_-]*)/i;
+						m = re2.exec(t);
+					}
+
+					// Try to do a global search by ID, where we can
+					if ( m[1] == "#" && ret[ret.length-1].getElementById ) {
+						// Optimization for HTML document case
+						var oid = ret[ret.length-1].getElementById(m[2]);
+
+						// Do a quick check for node name (where applicable) so
+						// that div#foo searches will be really fast
+						ret = r = oid && 
+						  (!m[3] || oid.nodeName == m[3].toUpperCase()) ? [oid] : [];
+
+					} else {
+						// Pre-compile a regular expression to handle class searches
+						if ( m[1] == "." )
+							var rec = new RegExp("(^|\\s)" + m[2] + "(\\s|$)");
+
+						// We need to find all descendant elements, it is more
+						// efficient to use getAll() when we are already further down
+						// the tree - we try to recognize that here
+						jQuery.each( ret, function(){
+							// Grab the tag name being searched for
+							var tag = m[1] != "" || m[0] == "" ? "*" : m[2];
+
+							// Handle IE7 being really dumb about <object>s
+							if ( this.nodeName.toUpperCase() == "OBJECT" && tag == "*" )
+								tag = "param";
+
+							jQuery.merge( r,
+								m[1] != "" && ret.length != 1 ?
+									jQuery.getAll( this, [], m[1], m[2], rec ) :
+									this.getElementsByTagName( tag )
+							);
+						});
+
+						// It's faster to filter by class and be done with it
+						if ( m[1] == "." && ret.length == 1 )
+							r = jQuery.grep( r, function(e) {
+								return rec.test(e.className);
+							});
+
+						// Same with ID filtering
+						if ( m[1] == "#" && ret.length == 1 ) {
+							// Remember, then wipe out, the result set
+							var tmp = r;
+							r = [];
+
+							// Then try to find the element with the ID
+							jQuery.each( tmp, function(){
+								if ( this.getAttribute("id") == m[2] ) {
+									r = [ this ];
+									return false;
+								}
+							});
+						}
+
+						ret = r;
+					}
+
+					t = t.replace( re2, "" );
+				}
+
+			}
+
+			// If a selector string still exists
+			if ( t ) {
+				// Attempt to filter it
+				var val = jQuery.filter(t,r);
+				ret = r = val.r;
+				t = jQuery.trim(val.t);
+			}
+		}
+
+		// Remove the root context
+		if ( ret && ret[0] == context ) ret.shift();
+
+		// And combine the results
+		jQuery.merge( done, ret );
+
+		return done;
+	},
+
+	filter: function(t,r,not) {
+		// Look for common filter expressions
+		while ( t && /^[a-z[({<*:.#]/i.test(t) ) {
+
+			var p = jQuery.parse, m;
+
+			jQuery.each( p, function(i,re){
+		
+				// Look for, and replace, string-like sequences
+				// and finally build a regexp out of it
+				m = re.exec( t );
+
+				if ( m ) {
+					// Remove what we just matched
+					t = t.substring( m[0].length );
+
+					// Re-organize the first match
+					if ( jQuery.expr[ m[1] ]._resort )
+						m = jQuery.expr[ m[1] ]._resort( m );
+
+					return false;
+				}
+			});
+
+			// :not() is a special case that can be optimized by
+			// keeping it out of the expression list
+			if ( m[1] == ":" && m[2] == "not" )
+				r = jQuery.filter(m[3], r, true).r;
+
+			// Handle classes as a special case (this will help to
+			// improve the speed, as the regexp will only be compiled once)
+			else if ( m[1] == "." ) {
+
+				var re = new RegExp("(^|\\s)" + m[2] + "(\\s|$)");
+				r = jQuery.grep( r, function(e){
+					return re.test(e.className || "");
+				}, not);
+
+			// Otherwise, find the expression to execute
+			} else {
+				var f = jQuery.expr[m[1]];
+				if ( typeof f != "string" )
+					f = jQuery.expr[m[1]][m[2]];
+
+				// Build a custom macro to enclose it
+				eval("f = function(a,i){" +
+					( jQuery.expr[ m[1] ]._prefix || "" ) +
+					"return " + f + "}");
+
+				// Execute it against the current filter
+				r = jQuery.grep( r, f, not );
+			}
+		}
+
+		// Return an array of filtered elements (r)
+		// and the modified expression string (t)
+		return { r: r, t: t };
+	},
+	
+	getAll: function( o, r, token, name, re ) {
+		for ( var s = o.firstChild; s; s = s.nextSibling )
+			if ( s.nodeType == 1 ) {
+				var add = true;
+
+				if ( token == "." )
+					add = s.className && re.test(s.className);
+				else if ( token == "#" )
+					add = s.getAttribute("id") == name;
+	
+				if ( add )
+					r.push( s );
+
+				if ( token == "#" && r.length ) break;
+
+				if ( s.firstChild )
+					jQuery.getAll( s, r, token, name, re );
+			}
+
+		return r;
+	},
+	parents: function( elem ){
+		var matched = [];
+		var cur = elem.parentNode;
+		while ( cur && cur != document ) {
+			matched.push( cur );
+			cur = cur.parentNode;
+		}
+		return matched;
+	},
+	nth: function(cur,result,dir,elem){
+		result = result || 1;
+		var num = 0;
+		for ( ; cur; cur = cur[dir] ) {
+			if ( cur.nodeType == 1 ) num++;
+			if ( num == result || result == "even" && num % 2 == 0 && num > 1 && cur == elem ||
+				result == "odd" && num % 2 == 1 && cur == elem ) return cur;
+		}
+	},
+	sibling: function( n, elem ) {
+		var r = [];
+
+		for ( ; n; n = n.nextSibling ) {
+			if ( n.nodeType == 1 && (!elem || n != elem) )
+				r.push( n );
+		}
+
+		return r;
+	}
+});
+/*
+ * A number of helper functions used for managing events.
+ * Many of the ideas behind this code orignated from 
+ * Dean Edwards' addEvent library.
+ */
+jQuery.event = {
+
+	// Bind an event to an element
+	// Original by Dean Edwards
+	add: function(element, type, handler, data) {
+		// For whatever reason, IE has trouble passing the window object
+		// around, causing it to be cloned in the process
+		if ( jQuery.browser.msie && element.setInterval != undefined )
+			element = window;
+
+		// if data is passed, bind to handler
+		if( data ) 
+			handler.data = data;
+
+		// Make sure that the function being executed has a unique ID
+		if ( !handler.guid )
+			handler.guid = this.guid++;
+
+		// Init the element's event structure
+		if (!element.events)
+			element.events = {};
+
+		// Get the current list of functions bound to this event
+		var handlers = element.events[type];
+
+		// If it hasn't been initialized yet
+		if (!handlers) {
+			// Init the event handler queue
+			handlers = element.events[type] = {};
+
+			// Remember an existing handler, if it's already there
+			if (element["on" + type])
+				handlers[0] = element["on" + type];
+		}
+
+		// Add the function to the element's handler list
+		handlers[handler.guid] = handler;
+
+		// And bind the global event handler to the element
+		element["on" + type] = this.handle;
+
+		// Remember the function in a global list (for triggering)
+		if (!this.global[type])
+			this.global[type] = [];
+		this.global[type].push( element );
+	},
+
+	guid: 1,
+	global: {},
+
+	// Detach an event or set of events from an element
+	remove: function(element, type, handler) {
+		if (element.events)
+			if ( type && type.type )
+				delete element.events[ type.type ][ type.handler.guid ];
+			else if (type && element.events[type])
+				if ( handler )
+					delete element.events[type][handler.guid];
+				else
+					for ( var i in element.events[type] )
+						delete element.events[type][i];
+			else
+				for ( var j in element.events )
+					this.remove( element, j );
+	},
+
+	trigger: function(type,data,element) {
+		// Clone the incoming data, if any
+		data = jQuery.makeArray(data || []);
+
+		// Handle a global trigger
+		if ( !element ) {
+			var g = this.global[type];
+			if ( g )
+				jQuery.each( g, function(){
+					jQuery.event.trigger( type, data, this );
+				});
+
+		// Handle triggering a single element
+		} else if ( element["on" + type] ) {
+			// Pass along a fake event
+			data.unshift( this.fix({ type: type, target: element }) );
+	
+			// Trigger the event
+			var val = element["on" + type].apply( element, data );
+
+			if ( val !== false && jQuery.isFunction( element[ type ] ) )
+				element[ type ]();
+		}
+	},
+
+	handle: function(event) {
+		if ( typeof jQuery == "undefined" ) return false;
+
+		// Empty object is for triggered events with no data
+		event = jQuery.event.fix( event || window.event || {} ); 
+
+		// returned undefined or false
+		var returnValue;
+
+		var c = this.events[event.type];
+
+		var args = [].slice.call( arguments, 1 );
+		args.unshift( event );
+
+		for ( var j in c ) {
+			// Pass in a reference to the handler function itself
+			// So that we can later remove it
+			args[0].handler = c[j];
+			args[0].data = c[j].data;
+
+			if ( c[j].apply( this, args ) === false ) {
+				event.preventDefault();
+				event.stopPropagation();
+				returnValue = false;
+			}
+		}
+
+		// Clean up added properties in IE to prevent memory leak
+		if (jQuery.browser.msie) event.target = event.preventDefault = event.stopPropagation = event.handler = event.data = null;
+
+		return returnValue;
+	},
+
+	fix: function(event) {
+		// Fix target property, if necessary
+		if ( !event.target && event.srcElement )
+			event.target = event.srcElement;
+
+		// Calculate pageX/Y if missing and clientX/Y available
+		if ( event.pageX == undefined && event.clientX != undefined ) {
+			var e = document.documentElement, b = document.body;
+			event.pageX = event.clientX + (e.scrollLeft || b.scrollLeft);
+			event.pageY = event.clientY + (e.scrollTop || b.scrollTop);
+		}
+				
+		// check if target is a textnode (safari)
+		if (jQuery.browser.safari && event.target.nodeType == 3) {
+			// store a copy of the original event object 
+			// and clone because target is read only
+			var originalEvent = event;
+			event = jQuery.extend({}, originalEvent);
+			
+			// get parentnode from textnode
+			event.target = originalEvent.target.parentNode;
+			
+			// add preventDefault and stopPropagation since 
+			// they will not work on the clone
+			event.preventDefault = function() {
+				return originalEvent.preventDefault();
+			};
+			event.stopPropagation = function() {
+				return originalEvent.stopPropagation();
+			};
+		}
+		
+		// fix preventDefault and stopPropagation
+		if (!event.preventDefault)
+			event.preventDefault = function() {
+				this.returnValue = false;
+			};
+			
+		if (!event.stopPropagation)
+			event.stopPropagation = function() {
+				this.cancelBubble = true;
+			};
+			
+		return event;
+	}
+};
+
+jQuery.fn.extend({
+	bind: function( type, data, fn ) {
+		return this.each(function(){
+			jQuery.event.add( this, type, fn || data, data );
+		});
+	},
+	one: function( type, data, fn ) {
+		return this.each(function(){
+			jQuery.event.add( this, type, function(event) {
+				jQuery(this).unbind(event);
+				return (fn || data).apply( this, arguments);
+			}, data);
+		});
+	},
+	unbind: function( type, fn ) {
+		return this.each(function(){
+			jQuery.event.remove( this, type, fn );
+		});
+	},
+	trigger: function( type, data ) {
+		return this.each(function(){
+			jQuery.event.trigger( type, data, this );
+		});
+	},
+	toggle: function() {
+		// Save reference to arguments for access in closure
+		var a = arguments;
+
+		return this.click(function(e) {
+			// Figure out which function to execute
+			this.lastToggle = this.lastToggle == 0 ? 1 : 0;
+			
+			// Make sure that clicks stop
+			e.preventDefault();
+			
+			// and execute the function
+			return a[this.lastToggle].apply( this, [e] ) || false;
+		});
+	},
+	hover: function(f,g) {
+		
+		// A private function for handling mouse 'hovering'
+		function handleHover(e) {
+			// Check if mouse(over|out) are still within the same parent element
+			var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
+	
+			// Traverse up the tree
+			while ( p && p != this ) try { p = p.parentNode } catch(e) { p = this; };
+			
+			// If we actually just moused on to a sub-element, ignore it
+			if ( p == this ) return false;
+			
+			// Execute the right function
+			return (e.type == "mouseover" ? f : g).apply(this, [e]);
+		}
+		
+		// Bind the function to the two event listeners
+		return this.mouseover(handleHover).mouseout(handleHover);
+	},
+	ready: function(f) {
+		// If the DOM is already ready
+		if ( jQuery.isReady )
+			// Execute the function immediately
+			f.apply( document, [jQuery] );
+			
+		// Otherwise, remember the function for later
+		else {
+			// Add the function to the wait list
+			jQuery.readyList.push( function() { return f.apply(this, [jQuery]) } );
+		}
+	
+		return this;
+	}
+});
+
+jQuery.extend({
+	/*
+	 * All the code that makes DOM Ready work nicely.
+	 */
+	isReady: false,
+	readyList: [],
+	
+	// Handle when the DOM is ready
+	ready: function() {
+		// Make sure that the DOM is not already loaded
+		if ( !jQuery.isReady ) {
+			// Remember that the DOM is ready
+			jQuery.isReady = true;
+			
+			// If there are functions bound, to execute
+			if ( jQuery.readyList ) {
+				// Execute all of them
+				jQuery.each( jQuery.readyList, function(){
+					this.apply( document );
+				});
+				
+				// Reset the list of functions
+				jQuery.readyList = null;
+			}
+			// Remove event lisenter to avoid memory leak
+			if ( jQuery.browser.mozilla || jQuery.browser.opera )
+				document.removeEventListener( "DOMContentLoaded", jQuery.ready, false );
+		}
+	}
+});
+
+new function(){
+
+	jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
+		"mousedown,mouseup,mousemove,mouseover,mouseout,change,select," + 
+		"submit,keydown,keypress,keyup,error").split(","), function(i,o){
+		
+		// Handle event binding
+		jQuery.fn[o] = function(f){
+			return f ? this.bind(o, f) : this.trigger(o);
+		};
+			
+	});
+	
+	// If Mozilla is used
+	if ( jQuery.browser.mozilla || jQuery.browser.opera )
+		// Use the handy event callback
+		document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
+	
+	// If IE is used, use the excellent hack by Matthias Miller
+	// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
+	else if ( jQuery.browser.msie ) {
+	
+		// Only works if you document.write() it
+		document.write("<scr" + "ipt id=__ie_init defer=true " + 
+			"src=//:><\/script>");
+	
+		// Use the defer script hack
+		var script = document.getElementById("__ie_init");
+		
+		// script does not exist if jQuery is loaded dynamically
+		if ( script ) 
+			script.onreadystatechange = function() {
+				if ( this.readyState != "complete" ) return;
+				this.parentNode.removeChild( this );
+				jQuery.ready();
+			};
+	
+		// Clear from memory
+		script = null;
+	
+	// If Safari  is used
+	} else if ( jQuery.browser.safari )
+		// Continually check to see if the document.readyState is valid
+		jQuery.safariTimer = setInterval(function(){
+			// loaded and complete are both valid states
+			if ( document.readyState == "loaded" || 
+				document.readyState == "complete" ) {
+	
+				// If either one are found, remove the timer
+				clearInterval( jQuery.safariTimer );
+				jQuery.safariTimer = null;
+	
+				// and execute any waiting functions
+				jQuery.ready();
+			}
+		}, 10); 
+
+	// A fallback to window.onload, that will always work
+	jQuery.event.add( window, "load", jQuery.ready );
+	
+};
+
+// Clean up after IE to avoid memory leaks
+if (jQuery.browser.msie)
+	jQuery(window).one("unload", function() {
+		var global = jQuery.event.global;
+		for ( var type in global ) {
+			var els = global[type], i = els.length;
+			if ( i && type != 'unload' )
+				do
+					jQuery.event.remove(els[i-1], type);
+				while (--i);
+		}
+	});
+jQuery.fn.extend({
+
+	show: function(speed,callback){
+		var hidden = this.filter(":hidden");
+		return speed ?
+			hidden.animate({
+				height: "show", width: "show", opacity: "show"
+			}, speed, callback) :
+			
+			hidden.each(function(){
+				this.style.display = this.oldblock ? this.oldblock : "";
+				if ( jQuery.css(this,"display") == "none" )
+					this.style.display = "block";
+			});
+	},
+
+	hide: function(speed,callback){
+		var visible = this.filter(":visible");
+		return speed ?
+			visible.animate({
+				height: "hide", width: "hide", opacity: "hide"
+			}, speed, callback) :
+			
+			visible.each(function(){
+				this.oldblock = this.oldblock || jQuery.css(this,"display");
+				if ( this.oldblock == "none" )
+					this.oldblock = "block";
+				this.style.display = "none";
+			});
+	},
+
+	// Save the old toggle function
+	_toggle: jQuery.fn.toggle,
+	toggle: function( fn, fn2 ){
+		var args = arguments;
+		return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ?
+			this._toggle( fn, fn2 ) :
+			this.each(function(){
+				jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]
+					.apply( jQuery(this), args );
+			});
+	},
+	slideDown: function(speed,callback){
+		return this.animate({height: "show"}, speed, callback);
+	},
+	slideUp: function(speed,callback){
+		return this.animate({height: "hide"}, speed, callback);
+	},
+	slideToggle: function(speed, callback){
+		return this.each(function(){
+			var state = jQuery(this).is(":hidden") ? "show" : "hide";
+			jQuery(this).animate({height: state}, speed, callback);
+		});
+	},
+	fadeIn: function(speed, callback){
+		return this.animate({opacity: "show"}, speed, callback);
+	},
+	fadeOut: function(speed, callback){
+		return this.animate({opacity: "hide"}, speed, callback);
+	},
+	fadeTo: function(speed,to,callback){
+		return this.animate({opacity: to}, speed, callback);
+	},
+	animate: function( prop, speed, easing, callback ) {
+		return this.queue(function(){
+		
+			this.curAnim = jQuery.extend({}, prop);
+			var opt = jQuery.speed(speed, easing, callback);
+			
+			for ( var p in prop ) {
+				var e = new jQuery.fx( this, opt, p );
+				if ( prop[p].constructor == Number )
+					e.custom( e.cur(), prop[p] );
+				else
+					e[ prop[p] ]( prop );
+			}
+			
+		});
+	},
+	queue: function(type,fn){
+		if ( !fn ) {
+			fn = type;
+			type = "fx";
+		}
+	
+		return this.each(function(){
+			if ( !this.queue )
+				this.queue = {};
+	
+			if ( !this.queue[type] )
+				this.queue[type] = [];
+	
+			this.queue[type].push( fn );
+		
+			if ( this.queue[type].length == 1 )
+				fn.apply(this);
+		});
+	}
+
+});
+
+jQuery.extend({
+	
+	speed: function(speed, easing, fn) {
+		var opt = speed && speed.constructor == Object ? speed : {
+			complete: fn || !fn && easing || 
+				jQuery.isFunction( speed ) && speed,
+			duration: speed,
+			easing: fn && easing || easing && easing.constructor != Function && easing
+		};
+
+		opt.duration = (opt.duration && opt.duration.constructor == Number ? 
+			opt.duration : 
+			{ slow: 600, fast: 200 }[opt.duration]) || 400;
+	
+		// Queueing
+		opt.old = opt.complete;
+		opt.complete = function(){
+			jQuery.dequeue(this, "fx");
+			if ( jQuery.isFunction( opt.old ) )
+				opt.old.apply( this );
+		};
+	
+		return opt;
+	},
+	
+	easing: {},
+	
+	queue: {},
+	
+	dequeue: function(elem,type){
+		type = type || "fx";
+	
+		if ( elem.queue && elem.queue[type] ) {
+			// Remove self
+			elem.queue[type].shift();
+	
+			// Get next function
+			var f = elem.queue[type][0];
+		
+			if ( f ) f.apply( elem );
+		}
+	},
+
+	/*
+	 * I originally wrote fx() as a clone of moo.fx and in the process
+	 * of making it small in size the code became illegible to sane
+	 * people. You've been warned.
+	 */
+	
+	fx: function( elem, options, prop ){
+
+		var z = this;
+
+		// The styles
+		var y = elem.style;
+		
+		// Store display property
+		var oldDisplay = jQuery.css(elem, "display");
+
+		// Set display property to block for animation
+		y.display = "block";
+
+		// Make sure that nothing sneaks out
+		y.overflow = "hidden";
+
+		// Simple function for setting a style value
+		z.a = function(){
+			if ( options.step )
+				options.step.apply( elem, [ z.now ] );
+
+			if ( prop == "opacity" )
+				jQuery.attr(y, "opacity", z.now); // Let attr handle opacity
+			else if ( parseInt(z.now) ) // My hate for IE will never die
+				y[prop] = parseInt(z.now) + "px";
+		};
+
+		// Figure out the maximum number to run to
+		z.max = function(){
+			return parseFloat( jQuery.css(elem,prop) );
+		};
+
+		// Get the current size
+		z.cur = function(){
+			var r = parseFloat( jQuery.curCSS(elem, prop) );
+			return r && r > -10000 ? r : z.max();
+		};
+
+		// Start an animation from one number to another
+		z.custom = function(from,to){
+			z.startTime = (new Date()).getTime();
+			z.now = from;
+			z.a();
+
+			z.timer = setInterval(function(){
+				z.step(from, to);
+			}, 13);
+		};
+
+		// Simple 'show' function
+		z.show = function(){
+			if ( !elem.orig ) elem.orig = {};
+
+			// Remember where we started, so that we can go back to it later
+			elem.orig[prop] = this.cur();
+
+			options.show = true;
+
+			// Begin the animation
+			z.custom(0, elem.orig[prop]);
+
+			// Stupid IE, look what you made me do
+			if ( prop != "opacity" )
+				y[prop] = "1px";
+		};
+
+		// Simple 'hide' function
+		z.hide = function(){
+			if ( !elem.orig ) elem.orig = {};
+
+			// Remember where we started, so that we can go back to it later
+			elem.orig[prop] = this.cur();
+
+			options.hide = true;
+
+			// Begin the animation
+			z.custom(elem.orig[prop], 0);
+		};
+		
+		//Simple 'toggle' function
+		z.toggle = function() {
+			if ( !elem.orig ) elem.orig = {};
+
+			// Remember where we started, so that we can go back to it later
+			elem.orig[prop] = this.cur();
+
+			if(oldDisplay == "none")  {
+				options.show = true;
+				
+				// Stupid IE, look what you made me do
+				if ( prop != "opacity" )
+					y[prop] = "1px";
+
+				// Begin the animation
+				z.custom(0, elem.orig[prop]);	
+			} else {
+				options.hide = true;
+
+				// Begin the animation
+				z.custom(elem.orig[prop], 0);
+			}		
+		};
+
+		// Each step of an animation
+		z.step = function(firstNum, lastNum){
+			var t = (new Date()).getTime();
+
+			if (t > options.duration + z.startTime) {
+				// Stop the timer
+				clearInterval(z.timer);
+				z.timer = null;
+
+				z.now = lastNum;
+				z.a();
+
+				if (elem.curAnim) elem.curAnim[ prop ] = true;
+
+				var done = true;
+				for ( var i in elem.curAnim )
+					if ( elem.curAnim[i] !== true )
+						done = false;
+
+				if ( done ) {
+					// Reset the overflow
+					y.overflow = "";
+					
+					// Reset the display
+					y.display = oldDisplay;
+					if (jQuery.css(elem, "display") == "none")
+						y.display = "block";
+
+					// Hide the element if the "hide" operation was done
+					if ( options.hide ) 
+						y.display = "none";
+
+					// Reset the properties, if the item has been hidden or shown
+					if ( options.hide || options.show )
+						for ( var p in elem.curAnim )
+							if (p == "opacity")
+								jQuery.attr(y, p, elem.orig[p]);
+							else
+								y[p] = "";
+				}
+
+				// If a callback was provided, execute it
+				if ( done && jQuery.isFunction( options.complete ) )
+					// Execute the complete function
+					options.complete.apply( elem );
+			} else {
+				var n = t - this.startTime;
+				// Figure out where in the animation we are and set the number
+				var p = n / options.duration;
+				
+				// If the easing function exists, then use it 
+				z.now = options.easing && jQuery.easing[options.easing] ?
+					jQuery.easing[options.easing](p, n,  firstNum, (lastNum-firstNum), options.duration) :
+					// else use default linear easing
+					((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;
+
+				// Perform the next step of the animation
+				z.a();
+			}
+		};
+	
+	}
+});
+jQuery.fn.extend({
+	loadIfModified: function( url, params, callback ) {
+		this.load( url, params, callback, 1 );
+	},
+	load: function( url, params, callback, ifModified ) {
+		if ( jQuery.isFunction( url ) )
+			return this.bind("load", url);
+
+		callback = callback || function(){};
+
+		// Default to a GET request
+		var type = "GET";
+
+		// If the second parameter was provided
+		if ( params )
+			// If it's a function
+			if ( jQuery.isFunction( params.constructor ) ) {
+				// We assume that it's the callback
+				callback = params;
+				params = null;
+
+			// Otherwise, build a param string
+			} else {
+				params = jQuery.param( params );
+				type = "POST";
+			}
+
+		var self = this;
+
+		// Request the remote document
+		jQuery.ajax({
+			url: url,
+			type: type,
+			data: params,
+			ifModified: ifModified,
+			complete: function(res, status){
+				if ( status == "success" || !ifModified && status == "notmodified" )
+					// Inject the HTML into all the matched elements
+					self.attr("innerHTML", res.responseText)
+					  // Execute all the scripts inside of the newly-injected HTML
+					  .evalScripts()
+					  // Execute callback
+					  .each( callback, [res.responseText, status, res] );
+				else
+					callback.apply( self, [res.responseText, status, res] );
+			}
+		});
+		return this;
+	},
+	serialize: function() {
+		return jQuery.param( this );
+	},
+	evalScripts: function() {
+		return this.find("script").each(function(){
+			if ( this.src )
+				jQuery.getScript( this.src );
+			else
+				jQuery.globalEval( this.text || this.textContent || this.innerHTML || "" );
+		}).end();
+	}
+
+});
+
+// If IE is used, create a wrapper for the XMLHttpRequest object
+if ( jQuery.browser.msie && typeof XMLHttpRequest == "undefined" )
+	XMLHttpRequest = function(){
+		return new ActiveXObject("Microsoft.XMLHTTP");
+	};
+
+// Attach a bunch of functions for handling common AJAX events
+
+jQuery.each( "ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","), function(i,o){
+	jQuery.fn[o] = function(f){
+		return this.bind(o, f);
+	};
+});
+
+jQuery.extend({
+	get: function( url, data, callback, type, ifModified ) {
+		// shift arguments if data argument was ommited
+		if ( jQuery.isFunction( data ) ) {
+			callback = data;
+			data = null;
+		}
+		
+		return jQuery.ajax({
+			url: url,
+			data: data,
+			success: callback,
+			dataType: type,
+			ifModified: ifModified
+		});
+	},
+	getIfModified: function( url, data, callback, type ) {
+		return jQuery.get(url, data, callback, type, 1);
+	},
+	getScript: function( url, callback ) {
+		return jQuery.get(url, null, callback, "script");
+	},
+	getJSON: function( url, data, callback ) {
+		return jQuery.get(url, data, callback, "json");
+	},
+	post: function( url, data, callback, type ) {
+		return jQuery.ajax({
+			type: "POST",
+			url: url,
+			data: data,
+			success: callback,
+			dataType: type
+		});
+	},
+
+	// timeout (ms)
+	//timeout: 0,
+	ajaxTimeout: function( timeout ) {
+		jQuery.ajaxSettings.timeout = timeout;
+	},
+	ajaxSetup: function( settings ) {
+		jQuery.extend( jQuery.ajaxSettings, settings );
+	},
+
+	ajaxSettings: {
+		global: true,
+		type: "GET",
+		timeout: 0,
+		contentType: "application/x-www-form-urlencoded",
+		processData: true,
+		async: true,
+		data: null
+	},
+	
+	// Last-Modified header cache for next request
+	lastModified: {},
+	ajax: function( s ) {
+		// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
+		s = jQuery.extend({}, jQuery.ajaxSettings, s);
+
+		// if data available
+		if ( s.data ) {
+			// convert data if not already a string
+			if (s.processData && typeof s.data != "string")
+    			s.data = jQuery.param(s.data);
+			// append data to url for get requests
+			if( s.type.toLowerCase() == "get" )
+				// "?" + data or "&" + data (in case there are already params)
+				s.url += ((s.url.indexOf("?") > -1) ? "&" : "?") + s.data;
+		}
+
+		// Watch for a new set of requests
+		if ( s.global && ! jQuery.active++ )
+			jQuery.event.trigger( "ajaxStart" );
+
+		var requestDone = false;
+
+		// Create the request object
+		var xml = new XMLHttpRequest();
+
+		// Open the socket
+		xml.open(s.type, s.url, s.async);
+
+		// Set the correct header, if data is being sent
+		if ( s.data )
+			xml.setRequestHeader("Content-Type", s.contentType);
+
+		// Set the If-Modified-Since header, if ifModified mode.
+		if ( s.ifModified )
+			xml.setRequestHeader("If-Modified-Since",
+				jQuery.lastModified[s.url] || "Thu, 01 Jan 1970 00:00:00 GMT" );
+
+		// Set header so the called script knows that it's an XMLHttpRequest
+		xml.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+
+		// Make sure the browser sends the right content length
+		if ( xml.overrideMimeType )
+			xml.setRequestHeader("Connection", "close");
+			
+		// Allow custom headers/mimetypes
+		if( s.beforeSend )
+			s.beforeSend(xml);
+			
+		if ( s.global )
+		    jQuery.event.trigger("ajaxSend", [xml, s]);
+
+		// Wait for a response to come back
+		var onreadystatechange = function(isTimeout){
+			// The transfer is complete and the data is available, or the request timed out
+			if ( xml && (xml.readyState == 4 || isTimeout == "timeout") ) {
+				requestDone = true;
+				var status;
+				try {
+					status = jQuery.httpSuccess( xml ) && isTimeout != "timeout" ?
+						s.ifModified && jQuery.httpNotModified( xml, s.url ) ? "notmodified" : "success" : "error";
+					// Make sure that the request was successful or notmodified
+					if ( status != "error" ) {
+						// Cache Last-Modified header, if ifModified mode.
+						var modRes;
+						try {
+							modRes = xml.getResponseHeader("Last-Modified");
+						} catch(e) {} // swallow exception thrown by FF if header is not available
+	
+						if ( s.ifModified && modRes )
+							jQuery.lastModified[s.url] = modRes;
+	
+						// process the data (runs the xml through httpData regardless of callback)
+						var data = jQuery.httpData( xml, s.dataType );
+	
+						// If a local callback was specified, fire it and pass it the data
+						if ( s.success )
+							s.success( data, status );
+	
+						// Fire the global callback
+						if( s.global )
+							jQuery.event.trigger( "ajaxSuccess", [xml, s] );
+					} else
+						jQuery.handleError(s, xml, status);
+				} catch(e) {
+					status = "error";
+					jQuery.handleError(s, xml, status, e);
+				}
+
+				// The request was completed
+				if( s.global )
+					jQuery.event.trigger( "ajaxComplete", [xml, s] );
+
+				// Handle the global AJAX counter
+				if ( s.global && ! --jQuery.active )
+					jQuery.event.trigger( "ajaxStop" );
+
+				// Process result
+				if ( s.complete )
+					s.complete(xml, status);
+
+				// Stop memory leaks
+				xml.onreadystatechange = function(){};
+				xml = null;
+			}
+		};
+		xml.onreadystatechange = onreadystatechange;
+
+		// Timeout checker
+		if ( s.timeout > 0 )
+			setTimeout(function(){
+				// Check to see if the request is still happening
+				if ( xml ) {
+					// Cancel the request
+					xml.abort();
+
+					if( !requestDone )
+						onreadystatechange( "timeout" );
+				}
+			}, s.timeout);
+			
+		// save non-leaking reference 
+		var xml2 = xml;
+
+		// Send the data
+		try {
+			xml2.send(s.data);
+		} catch(e) {
+			jQuery.handleError(s, xml, null, e);
+		}
+		
+		// firefox 1.5 doesn't fire statechange for sync requests
+		if ( !s.async )
+			onreadystatechange();
+		
+		// return XMLHttpRequest to allow aborting the request etc.
+		return xml2;
+	},
+
+	handleError: function( s, xml, status, e ) {
+		// If a local callback was specified, fire it
+		if ( s.error ) s.error( xml, status, e );
+
+		// Fire the global callback
+		if ( s.global )
+			jQuery.event.trigger( "ajaxError", [xml, s, e] );
+	},
+
+	// Counter for holding the number of active queries
+	active: 0,
+
+	// Determines if an XMLHttpRequest was successful or not
+	httpSuccess: function( r ) {
+		try {
+			return !r.status && location.protocol == "file:" ||
+				( r.status >= 200 && r.status < 300 ) || r.status == 304 ||
+				jQuery.browser.safari && r.status == undefined;
+		} catch(e){}
+		return false;
+	},
+
+	// Determines if an XMLHttpRequest returns NotModified
+	httpNotModified: function( xml, url ) {
+		try {
+			var xmlRes = xml.getResponseHeader("Last-Modified");
+
+			// Firefox always returns 200. check Last-Modified date
+			return xml.status == 304 || xmlRes == jQuery.lastModified[url] ||
+				jQuery.browser.safari && xml.status == undefined;
+		} catch(e){}
+		return false;
+	},
+
+	/* Get the data out of an XMLHttpRequest.
+	 * Return parsed XML if content-type header is "xml" and type is "xml" or omitted,
+	 * otherwise return plain text.
+	 * (String) data - The type of data that you're expecting back,
+	 * (e.g. "xml", "html", "script")
+	 */
+	httpData: function( r, type ) {
+		var ct = r.getResponseHeader("content-type");
+		var data = !type && ct && ct.indexOf("xml") >= 0;
+		data = type == "xml" || data ? r.responseXML : r.responseText;
+
+		// If the type is "script", eval it in global context
+		if ( type == "script" )
+			jQuery.globalEval( data );
+
+		// Get the JavaScript object, if JSON is used.
+		if ( type == "json" )
+			eval( "data = " + data );
+
+		// evaluate scripts within html
+		if ( type == "html" )
+			jQuery("<div>").html(data).evalScripts();
+
+		return data;
+	},
+
+	// Serialize an array of form elements or a set of
+	// key/values into a query string
+	param: function( a ) {
+		var s = [];
+
+		// If an array was passed in, assume that it is an array
+		// of form elements
+		if ( a.constructor == Array || a.jquery )
+			// Serialize the form elements
+			jQuery.each( a, function(){
+				s.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( this.value ) );
+			});
+
+		// Otherwise, assume that it's an object of key/value pairs
+		else
+			// Serialize the key/values
+			for ( var j in a )
+				// If the value is an array then the key names need to be repeated
+				if ( a[j].constructor == Array )
+					jQuery.each( a[j], function(){
+						s.push( encodeURIComponent(j) + "=" + encodeURIComponent( this ) );
+					});
+				else
+					s.push( encodeURIComponent(j) + "=" + encodeURIComponent( a[j] ) );
+
+		// Return the resulting serialization
+		return s.join("&");
+	},
+	
+	// evalulates a script in global context
+	// not reliable for safari
+	globalEval: function( data ) {
+		if ( window.execScript )
+			window.execScript( data );
+		else if ( jQuery.browser.safari )
+			// safari doesn't provide a synchronous global eval
+			window.setTimeout( data, 0 );
+		else
+			eval.call( window, data );
+	}
+
+});
+}
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.11.1_min.js b/devtools/client/inspector/markup/test/lib_jquery_1.11.1_min.js
new file mode 100644
index 0000000000..ab28a24729
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.11.1_min.js
@@ -0,0 +1,4 @@
+/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
+!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l="1.11.1",m=function(a,b){return new m.fn.init(a,b)},n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,o=/^-ms-/,p=/-([\da-z])/gi,q=function(a,b){return b.toUpperCase()};m.fn=m.prototype={jquery:l,constructor:m,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=m.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return m.each(this,a,b)},map:function(a){return this.pushStack(m.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},m.extend=m.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||m.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(e=arguments[h]))for(d in e)a=g[d],c=e[d],g!==c&&(j&&c&&(m.isPlainObject(c)||(b=m.isArray(c)))?(b?(b=!1,f=a&&m.isArray(a)?a:[]):f=a&&m.isPlainObject(a)?a:{},g[d]=m.extend(j,f,c)):void 0!==c&&(g[d]=c));return g},m.extend({expando:"jQuery"+(l+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===m.type(a)},isArray:Array.isArray||function(a){return"array"===m.type(a)},isWindow:function(a){return null!=a&&a==a.window},isNumeric:function(a){return!m.isArray(a)&&a-parseFloat(a)>=0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},isPlainObject:function(a){var b;if(!a||"object"!==m.type(a)||a.nodeType||m.isWindow(a))return!1;try{if(a.constructor&&!j.call(a,"constructor")&&!j.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}if(k.ownLast)for(b in a)return j.call(a,b);for(b in a);return void 0===b||j.call(a,b)},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(b){b&&m.trim(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(o,"ms-").replace(p,q)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=r(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(n,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(r(Object(a))?m.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){var d;if(b){if(g)return g.call(b,a,c);for(d=b.length,c=c?0>c?Math.max(0,d+c):c:0;d>c;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,b){var c=+b.length,d=0,e=a.length;while(c>d)a[e++]=b[d++];if(c!==c)while(void 0!==b[d])a[e++]=b[d++];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=r(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(f=a[b],b=a,a=f),m.isFunction(a)?(c=d.call(arguments,2),e=function(){return a.apply(b||this,c.concat(d.call(arguments)))},e.guid=a.guid=a.guid||m.guid++,e):void 0},now:function(){return+new Date},support:k}),m.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function r(a){var b=a.length,c=m.type(a);return"function"===c||m.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var s=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+-new Date,v=a.document,w=0,x=0,y=gb(),z=gb(),A=gb(),B=function(a,b){return a===b&&(l=!0),0},C="undefined",D=1<<31,E={}.hasOwnProperty,F=[],G=F.pop,H=F.push,I=F.push,J=F.slice,K=F.indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]===a)return b;return-1},L="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",N="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",O=N.replace("w","w#"),P="\\["+M+"*("+N+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+O+"))|)"+M+"*\\]",Q=":("+N+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+P+")*)|.*)\\)|)",R=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),S=new RegExp("^"+M+"*,"+M+"*"),T=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),V=new RegExp(Q),W=new RegExp("^"+O+"$"),X={ID:new RegExp("^#("+N+")"),CLASS:new RegExp("^\\.("+N+")"),TAG:new RegExp("^("+N.replace("w","w*")+")"),ATTR:new RegExp("^"+P),PSEUDO:new RegExp("^"+Q),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+L+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,$=/^[^{]+\{\s*\[native \w/,_=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ab=/[+~]/,bb=/'|\\/g,cb=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),db=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)};try{I.apply(F=J.call(v.childNodes),v.childNodes),F[v.childNodes.length].nodeType}catch(eb){I={apply:F.length?function(a,b){H.apply(a,J.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fb(a,b,d,e){var f,h,j,k,l,o,r,s,w,x;if((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,d=d||[],!a||"string"!=typeof a)return d;if(1!==(k=b.nodeType)&&9!==k)return[];if(p&&!e){if(f=_.exec(a))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)return d;if(h.id===j)return d.push(h),d}else if(b.ownerDocument&&(h=b.ownerDocument.getElementById(j))&&t(b,h)&&h.id===j)return d.push(h),d}else{if(f[2])return I.apply(d,b.getElementsByTagName(a)),d;if((j=f[3])&&c.getElementsByClassName&&b.getElementsByClassName)return I.apply(d,b.getElementsByClassName(j)),d}if(c.qsa&&(!q||!q.test(a))){if(s=r=u,w=b,x=9===k&&a,1===k&&"object"!==b.nodeName.toLowerCase()){o=g(a),(r=b.getAttribute("id"))?s=r.replace(bb,"\\$&"):b.setAttribute("id",s),s="[id='"+s+"'] ",l=o.length;while(l--)o[l]=s+qb(o[l]);w=ab.test(a)&&ob(b.parentNode)||b,x=o.join(",")}if(x)try{return I.apply(d,w.querySelectorAll(x)),d}catch(y){}finally{r||b.removeAttribute("id")}}}return i(a.replace(R,"$1"),b,d,e)}function gb(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function hb(a){return a[u]=!0,a}function ib(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function jb(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function kb(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||D)-(~a.sourceIndex||D);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function lb(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function mb(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function nb(a){return hb(function(b){return b=+b,hb(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function ob(a){return a&&typeof a.getElementsByTagName!==C&&a}c=fb.support={},f=fb.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fb.setDocument=function(a){var b,e=a?a.ownerDocument||a:v,g=e.defaultView;return e!==n&&9===e.nodeType&&e.documentElement?(n=e,o=e.documentElement,p=!f(e),g&&g!==g.top&&(g.addEventListener?g.addEventListener("unload",function(){m()},!1):g.attachEvent&&g.attachEvent("onunload",function(){m()})),c.attributes=ib(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ib(function(a){return a.appendChild(e.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=$.test(e.getElementsByClassName)&&ib(function(a){return a.innerHTML="<div class='a'></div><div class='a i'></div>",a.firstChild.className="i",2===a.getElementsByClassName("i").length}),c.getById=ib(function(a){return o.appendChild(a).id=u,!e.getElementsByName||!e.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if(typeof b.getElementById!==C&&p){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){var c=typeof a.getAttributeNode!==C&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return typeof b.getElementsByTagName!==C?b.getElementsByTagName(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return typeof b.getElementsByClassName!==C&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=$.test(e.querySelectorAll))&&(ib(function(a){a.innerHTML="<select msallowclip=''><option selected=''></option></select>",a.querySelectorAll("[msallowclip^='']").length&&q.push("[*^$]="+M+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+M+"*(?:value|"+L+")"),a.querySelectorAll(":checked").length||q.push(":checked")}),ib(function(a){var b=e.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+M+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=$.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ib(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",Q)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=$.test(o.compareDocumentPosition),t=b||$.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===e||a.ownerDocument===v&&t(v,a)?-1:b===e||b.ownerDocument===v&&t(v,b)?1:k?K.call(k,a)-K.call(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,f=a.parentNode,g=b.parentNode,h=[a],i=[b];if(!f||!g)return a===e?-1:b===e?1:f?-1:g?1:k?K.call(k,a)-K.call(k,b):0;if(f===g)return kb(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?kb(h[d],i[d]):h[d]===v?-1:i[d]===v?1:0},e):n},fb.matches=function(a,b){return fb(a,null,null,b)},fb.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(U,"='$1']"),!(!c.matchesSelector||!p||r&&r.test(b)||q&&q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fb(b,n,null,[a]).length>0},fb.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fb.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&E.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fb.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fb.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fb.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fb.selectors={cacheLength:50,createPseudo:hb,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(cb,db),a[3]=(a[3]||a[4]||a[5]||"").replace(cb,db),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fb.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fb.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return X.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&V.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(cb,db).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+M+")"+a+"("+M+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||typeof a.getAttribute!==C&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fb.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){k=q[u]||(q[u]={}),j=k[a]||[],n=j[0]===w&&j[1],m=j[0]===w&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if(s&&(j=(b[u]||(b[u]={}))[a])&&j[0]===w)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(s&&((l[u]||(l[u]={}))[a]=[w,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fb.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?hb(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=K.call(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:hb(function(a){var b=[],c=[],d=h(a.replace(R,"$1"));return d[u]?hb(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),!c.pop()}}),has:hb(function(a){return function(b){return fb(a,b).length>0}}),contains:hb(function(a){return function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:hb(function(a){return W.test(a||"")||fb.error("unsupported lang: "+a),a=a.replace(cb,db).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Z.test(a.nodeName)},input:function(a){return Y.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:nb(function(){return[0]}),last:nb(function(a,b){return[b-1]}),eq:nb(function(a,b,c){return[0>c?c+b:c]}),even:nb(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:nb(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:nb(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:nb(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=lb(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=mb(b);function pb(){}pb.prototype=d.filters=d.pseudos,d.setFilters=new pb,g=fb.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){(!c||(e=S.exec(h)))&&(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=T.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(R," ")}),h=h.slice(c.length));for(g in d.filter)!(e=X[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?fb.error(a):z(a,i).slice(0)};function qb(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function rb(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]===w&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function sb(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function tb(a,b,c){for(var d=0,e=b.length;e>d;d++)fb(a,b[d],c);return c}function ub(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function vb(a,b,c,d,e,f){return d&&!d[u]&&(d=vb(d)),e&&!e[u]&&(e=vb(e,f)),hb(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||tb(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ub(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ub(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?K.call(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ub(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):I.apply(g,r)})}function wb(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=rb(function(a){return a===b},h,!0),l=rb(function(a){return K.call(b,a)>-1},h,!0),m=[function(a,c,d){return!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d))}];f>i;i++)if(c=d.relative[a[i].type])m=[rb(sb(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return vb(i>1&&sb(m),i>1&&qb(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(R,"$1"),c,e>i&&wb(a.slice(i,e)),f>e&&wb(a=a.slice(e)),f>e&&qb(a))}m.push(c)}return sb(m)}function xb(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,m,o,p=0,q="0",r=f&&[],s=[],t=j,u=f||e&&d.find.TAG("*",k),v=w+=null==t?1:Math.random()||.1,x=u.length;for(k&&(j=g!==n&&g);q!==x&&null!=(l=u[q]);q++){if(e&&l){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f&&r.push(l))}if(p+=q,c&&q!==p){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=G.call(i));s=ub(s)}I.apply(i,s),k&&!f&&s.length>0&&p+b.length>1&&fb.uniqueSort(i)}return k&&(w=v,j=t),r};return c?hb(f):f}return h=fb.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wb(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xb(e,d)),f.selector=a}return f},i=fb.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(cb,db),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=X.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(cb,db),ab.test(j[0].type)&&ob(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qb(j),!a)return I.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,ab.test(a)&&ob(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ib(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ib(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||jb("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ib(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||jb("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ib(function(a){return null==a.getAttribute("disabled")})||jb(L,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fb}(a);m.find=s,m.expr=s.selectors,m.expr[":"]=m.expr.pseudos,m.unique=s.uniqueSort,m.text=s.getText,m.isXMLDoc=s.isXML,m.contains=s.contains;var t=m.expr.match.needsContext,u=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,v=/^.[^:#\[\.,]*$/;function w(a,b,c){if(m.isFunction(b))return m.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return m.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(v.test(b))return m.filter(b,a,c);b=m.filter(b,a)}return m.grep(a,function(a){return m.inArray(a,b)>=0!==c})}m.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?m.find.matchesSelector(d,a)?[d]:[]:m.find.matches(a,m.grep(b,function(a){return 1===a.nodeType}))},m.fn.extend({find:function(a){var b,c=[],d=this,e=d.length;if("string"!=typeof a)return this.pushStack(m(a).filter(function(){for(b=0;e>b;b++)if(m.contains(d[b],this))return!0}));for(b=0;e>b;b++)m.find(a,d[b],c);return c=this.pushStack(e>1?m.unique(c):c),c.selector=this.selector?this.selector+" "+a:a,c},filter:function(a){return this.pushStack(w(this,a||[],!1))},not:function(a){return this.pushStack(w(this,a||[],!0))},is:function(a){return!!w(this,"string"==typeof a&&t.test(a)?m(a):a||[],!1).length}});var x,y=a.document,z=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,A=m.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a.charAt(0)&&">"===a.charAt(a.length-1)&&a.length>=3?[null,a,null]:z.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||x).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof m?b[0]:b,m.merge(this,m.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:y,!0)),u.test(c[1])&&m.isPlainObject(b))for(c in b)m.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}if(d=y.getElementById(c[2]),d&&d.parentNode){if(d.id!==c[2])return x.find(a);this.length=1,this[0]=d}return this.context=y,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):m.isFunction(a)?"undefined"!=typeof x.ready?x.ready(a):a(m):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),m.makeArray(a,this))};A.prototype=m.fn,x=m(y);var B=/^(?:parents|prev(?:Until|All))/,C={children:!0,contents:!0,next:!0,prev:!0};m.extend({dir:function(a,b,c){var d=[],e=a[b];while(e&&9!==e.nodeType&&(void 0===c||1!==e.nodeType||!m(e).is(c)))1===e.nodeType&&d.push(e),e=e[b];return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),m.fn.extend({has:function(a){var b,c=m(a,this),d=c.length;return this.filter(function(){for(b=0;d>b;b++)if(m.contains(this,c[b]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=t.test(a)||"string"!=typeof a?m(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&m.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?m.unique(f):f)},index:function(a){return a?"string"==typeof a?m.inArray(this[0],m(a)):m.inArray(a.jquery?a[0]:a,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(m.unique(m.merge(this.get(),m(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function D(a,b){do a=a[b];while(a&&1!==a.nodeType);return a}m.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return m.dir(a,"parentNode")},parentsUntil:function(a,b,c){return m.dir(a,"parentNode",c)},next:function(a){return D(a,"nextSibling")},prev:function(a){return D(a,"previousSibling")},nextAll:function(a){return m.dir(a,"nextSibling")},prevAll:function(a){return m.dir(a,"previousSibling")},nextUntil:function(a,b,c){return m.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return m.dir(a,"previousSibling",c)},siblings:function(a){return m.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return m.sibling(a.firstChild)},contents:function(a){return m.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:m.merge([],a.childNodes)}},function(a,b){m.fn[a]=function(c,d){var e=m.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=m.filter(d,e)),this.length>1&&(C[a]||(e=m.unique(e)),B.test(a)&&(e=e.reverse())),this.pushStack(e)}});var E=/\S+/g,F={};function G(a){var b=F[a]={};return m.each(a.match(E)||[],function(a,c){b[c]=!0}),b}m.Callbacks=function(a){a="string"==typeof a?F[a]||G(a):m.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(c=a.memory&&l,d=!0,f=g||0,g=0,e=h.length,b=!0;h&&e>f;f++)if(h[f].apply(l[0],l[1])===!1&&a.stopOnFalse){c=!1;break}b=!1,h&&(i?i.length&&j(i.shift()):c?h=[]:k.disable())},k={add:function(){if(h){var d=h.length;!function f(b){m.each(b,function(b,c){var d=m.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this},remove:function(){return h&&m.each(arguments,function(a,c){var d;while((d=m.inArray(c,h,d))>-1)h.splice(d,1),b&&(e>=d&&e--,f>=d&&f--)}),this},has:function(a){return a?m.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],e=0,this},disable:function(){return h=i=c=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,c||k.disable(),this},locked:function(){return!i},fireWith:function(a,c){return!h||d&&!i||(c=c||[],c=[a,c.slice?c.slice():c],b?i.push(c):j(c)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!d}};return k},m.extend({Deferred:function(a){var b=[["resolve","done",m.Callbacks("once memory"),"resolved"],["reject","fail",m.Callbacks("once memory"),"rejected"],["notify","progress",m.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return m.Deferred(function(c){m.each(b,function(b,f){var g=m.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&m.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?m.extend(a,d):d}},e={};return d.pipe=d.then,m.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&m.isFunction(a.promise)?e:0,g=1===f?a:m.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&m.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var H;m.fn.ready=function(a){return m.ready.promise().done(a),this},m.extend({isReady:!1,readyWait:1,holdReady:function(a){a?m.readyWait++:m.ready(!0)},ready:function(a){if(a===!0?!--m.readyWait:!m.isReady){if(!y.body)return setTimeout(m.ready);m.isReady=!0,a!==!0&&--m.readyWait>0||(H.resolveWith(y,[m]),m.fn.triggerHandler&&(m(y).triggerHandler("ready"),m(y).off("ready")))}}});function I(){y.addEventListener?(y.removeEventListener("DOMContentLoaded",J,!1),a.removeEventListener("load",J,!1)):(y.detachEvent("onreadystatechange",J),a.detachEvent("onload",J))}function J(){(y.addEventListener||"load"===event.type||"complete"===y.readyState)&&(I(),m.ready())}m.ready.promise=function(b){if(!H)if(H=m.Deferred(),"complete"===y.readyState)setTimeout(m.ready);else if(y.addEventListener)y.addEventListener("DOMContentLoaded",J,!1),a.addEventListener("load",J,!1);else{y.attachEvent("onreadystatechange",J),a.attachEvent("onload",J);var c=!1;try{c=null==a.frameElement&&y.documentElement}catch(d){}c&&c.doScroll&&!function e(){if(!m.isReady){try{c.doScroll("left")}catch(a){return setTimeout(e,50)}I(),m.ready()}}()}return H.promise(b)};var K="undefined",L;for(L in m(k))break;k.ownLast="0"!==L,k.inlineBlockNeedsLayout=!1,m(function(){var a,b,c,d;c=y.getElementsByTagName("body")[0],c&&c.style&&(b=y.createElement("div"),d=y.createElement("div"),d.style.cssText="position:absolute;border:0;width:0;height:0;top:0;left:-9999px",c.appendChild(d).appendChild(b),typeof b.style.zoom!==K&&(b.style.cssText="display:inline;margin:0;border:0;padding:1px;width:1px;zoom:1",k.inlineBlockNeedsLayout=a=3===b.offsetWidth,a&&(c.style.zoom=1)),c.removeChild(d))}),function(){var a=y.createElement("div");if(null==k.deleteExpando){k.deleteExpando=!0;try{delete a.test}catch(b){k.deleteExpando=!1}}a=null}(),m.acceptData=function(a){var b=m.noData[(a.nodeName+" ").toLowerCase()],c=+a.nodeType||1;return 1!==c&&9!==c?!1:!b||b!==!0&&a.getAttribute("classid")===b};var M=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,N=/([A-Z])/g;function O(a,b,c){if(void 0===c&&1===a.nodeType){var d="data-"+b.replace(N,"-$1").toLowerCase();if(c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:M.test(c)?m.parseJSON(c):c}catch(e){}m.data(a,b,c)}else c=void 0}return c}function P(a){var b;for(b in a)if(("data"!==b||!m.isEmptyObject(a[b]))&&"toJSON"!==b)return!1;return!0}function Q(a,b,d,e){if(m.acceptData(a)){var f,g,h=m.expando,i=a.nodeType,j=i?m.cache:a,k=i?a[h]:a[h]&&h;
+if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=i?a[h]=c.pop()||m.guid++:h),j[k]||(j[k]=i?{}:{toJSON:m.noop}),("object"==typeof b||"function"==typeof b)&&(e?j[k]=m.extend(j[k],b):j[k].data=m.extend(j[k].data,b)),g=j[k],e||(g.data||(g.data={}),g=g.data),void 0!==d&&(g[m.camelCase(b)]=d),"string"==typeof b?(f=g[b],null==f&&(f=g[m.camelCase(b)])):f=g,f}}function R(a,b,c){if(m.acceptData(a)){var d,e,f=a.nodeType,g=f?m.cache:a,h=f?a[m.expando]:m.expando;if(g[h]){if(b&&(d=c?g[h]:g[h].data)){m.isArray(b)?b=b.concat(m.map(b,m.camelCase)):b in d?b=[b]:(b=m.camelCase(b),b=b in d?[b]:b.split(" ")),e=b.length;while(e--)delete d[b[e]];if(c?!P(d):!m.isEmptyObject(d))return}(c||(delete g[h].data,P(g[h])))&&(f?m.cleanData([a],!0):k.deleteExpando||g!=g.window?delete g[h]:g[h]=null)}}}m.extend({cache:{},noData:{"applet ":!0,"embed ":!0,"object ":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(a){return a=a.nodeType?m.cache[a[m.expando]]:a[m.expando],!!a&&!P(a)},data:function(a,b,c){return Q(a,b,c)},removeData:function(a,b){return R(a,b)},_data:function(a,b,c){return Q(a,b,c,!0)},_removeData:function(a,b){return R(a,b,!0)}}),m.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=m.data(f),1===f.nodeType&&!m._data(f,"parsedAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=m.camelCase(d.slice(5)),O(f,d,e[d])));m._data(f,"parsedAttrs",!0)}return e}return"object"==typeof a?this.each(function(){m.data(this,a)}):arguments.length>1?this.each(function(){m.data(this,a,b)}):f?O(f,a,m.data(f,a)):void 0},removeData:function(a){return this.each(function(){m.removeData(this,a)})}}),m.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=m._data(a,b),c&&(!d||m.isArray(c)?d=m._data(a,b,m.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=m.queue(a,b),d=c.length,e=c.shift(),f=m._queueHooks(a,b),g=function(){m.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return m._data(a,c)||m._data(a,c,{empty:m.Callbacks("once memory").add(function(){m._removeData(a,b+"queue"),m._removeData(a,c)})})}}),m.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?m.queue(this[0],a):void 0===b?this:this.each(function(){var c=m.queue(this,a,b);m._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&m.dequeue(this,a)})},dequeue:function(a){return this.each(function(){m.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=m.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=m._data(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var S=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=["Top","Right","Bottom","Left"],U=function(a,b){return a=b||a,"none"===m.css(a,"display")||!m.contains(a.ownerDocument,a)},V=m.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===m.type(c)){e=!0;for(h in c)m.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,m.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(m(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},W=/^(?:checkbox|radio)$/i;!function(){var a=y.createElement("input"),b=y.createElement("div"),c=y.createDocumentFragment();if(b.innerHTML="  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",k.leadingWhitespace=3===b.firstChild.nodeType,k.tbody=!b.getElementsByTagName("tbody").length,k.htmlSerialize=!!b.getElementsByTagName("link").length,k.html5Clone="<:nav></:nav>"!==y.createElement("nav").cloneNode(!0).outerHTML,a.type="checkbox",a.checked=!0,c.appendChild(a),k.appendChecked=a.checked,b.innerHTML="<textarea>x</textarea>",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue,c.appendChild(b),b.innerHTML="<input type='radio' checked='checked' name='t'/>",k.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,k.noCloneEvent=!0,b.attachEvent&&(b.attachEvent("onclick",function(){k.noCloneEvent=!1}),b.cloneNode(!0).click()),null==k.deleteExpando){k.deleteExpando=!0;try{delete b.test}catch(d){k.deleteExpando=!1}}}(),function(){var b,c,d=y.createElement("div");for(b in{submit:!0,change:!0,focusin:!0})c="on"+b,(k[b+"Bubbles"]=c in a)||(d.setAttribute(c,"t"),k[b+"Bubbles"]=d.attributes[c].expando===!1);d=null}();var X=/^(?:input|select|textarea)$/i,Y=/^key/,Z=/^(?:mouse|pointer|contextmenu)|click/,$=/^(?:focusinfocus|focusoutblur)$/,_=/^([^.]*)(?:\.(.+)|)$/;function ab(){return!0}function bb(){return!1}function cb(){try{return y.activeElement}catch(a){}}m.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,n,o,p,q,r=m._data(a);if(r){c.handler&&(i=c,c=i.handler,e=i.selector),c.guid||(c.guid=m.guid++),(g=r.events)||(g=r.events={}),(k=r.handle)||(k=r.handle=function(a){return typeof m===K||a&&m.event.triggered===a.type?void 0:m.event.dispatch.apply(k.elem,arguments)},k.elem=a),b=(b||"").match(E)||[""],h=b.length;while(h--)f=_.exec(b[h])||[],o=q=f[1],p=(f[2]||"").split(".").sort(),o&&(j=m.event.special[o]||{},o=(e?j.delegateType:j.bindType)||o,j=m.event.special[o]||{},l=m.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&m.expr.match.needsContext.test(e),namespace:p.join(".")},i),(n=g[o])||(n=g[o]=[],n.delegateCount=0,j.setup&&j.setup.call(a,d,p,k)!==!1||(a.addEventListener?a.addEventListener(o,k,!1):a.attachEvent&&a.attachEvent("on"+o,k))),j.add&&(j.add.call(a,l),l.handler.guid||(l.handler.guid=c.guid)),e?n.splice(n.delegateCount++,0,l):n.push(l),m.event.global[o]=!0);a=null}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,n,o,p,q,r=m.hasData(a)&&m._data(a);if(r&&(k=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=_.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=m.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,n=k[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),i=f=n.length;while(f--)g=n[f],!e&&q!==g.origType||c&&c.guid!==g.guid||h&&!h.test(g.namespace)||d&&d!==g.selector&&("**"!==d||!g.selector)||(n.splice(f,1),g.selector&&n.delegateCount--,l.remove&&l.remove.call(a,g));i&&!n.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||m.removeEvent(a,o,r.handle),delete k[o])}else for(o in k)m.event.remove(a,o+b[j],c,d,!0);m.isEmptyObject(k)&&(delete r.handle,m._removeData(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,l,n,o=[d||y],p=j.call(b,"type")?b.type:b,q=j.call(b,"namespace")?b.namespace.split("."):[];if(h=l=d=d||y,3!==d.nodeType&&8!==d.nodeType&&!$.test(p+m.event.triggered)&&(p.indexOf(".")>=0&&(q=p.split("."),p=q.shift(),q.sort()),g=p.indexOf(":")<0&&"on"+p,b=b[m.expando]?b:new m.Event(p,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=q.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:m.makeArray(c,[b]),k=m.event.special[p]||{},e||!k.trigger||k.trigger.apply(d,c)!==!1)){if(!e&&!k.noBubble&&!m.isWindow(d)){for(i=k.delegateType||p,$.test(i+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),l=h;l===(d.ownerDocument||y)&&o.push(l.defaultView||l.parentWindow||a)}n=0;while((h=o[n++])&&!b.isPropagationStopped())b.type=n>1?i:k.bindType||p,f=(m._data(h,"events")||{})[b.type]&&m._data(h,"handle"),f&&f.apply(h,c),f=g&&h[g],f&&f.apply&&m.acceptData(h)&&(b.result=f.apply(h,c),b.result===!1&&b.preventDefault());if(b.type=p,!e&&!b.isDefaultPrevented()&&(!k._default||k._default.apply(o.pop(),c)===!1)&&m.acceptData(d)&&g&&d[p]&&!m.isWindow(d)){l=d[g],l&&(d[g]=null),m.event.triggered=p;try{d[p]()}catch(r){}m.event.triggered=void 0,l&&(d[g]=l)}return b.result}},dispatch:function(a){a=m.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(m._data(this,"events")||{})[a.type]||[],k=m.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=m.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,g=0;while((e=f.handlers[g++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(e.namespace))&&(a.handleObj=e,a.data=e.data,c=((m.event.special[e.origType]||{}).handle||e.handler).apply(f.elem,i),void 0!==c&&(a.result=c)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!=this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(e=[],f=0;h>f;f++)d=b[f],c=d.selector+" ",void 0===e[c]&&(e[c]=d.needsContext?m(c,this).index(i)>=0:m.find(c,this,null,[i]).length),e[c]&&e.push(d);e.length&&g.push({elem:i,handlers:e})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},fix:function(a){if(a[m.expando])return a;var b,c,d,e=a.type,f=a,g=this.fixHooks[e];g||(this.fixHooks[e]=g=Z.test(e)?this.mouseHooks:Y.test(e)?this.keyHooks:{}),d=g.props?this.props.concat(g.props):this.props,a=new m.Event(f),b=d.length;while(b--)c=d[b],a[c]=f[c];return a.target||(a.target=f.srcElement||y),3===a.target.nodeType&&(a.target=a.target.parentNode),a.metaKey=!!a.metaKey,g.filter?g.filter(a,f):a},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,d,e,f=b.button,g=b.fromElement;return null==a.pageX&&null!=b.clientX&&(d=a.target.ownerDocument||y,e=d.documentElement,c=d.body,a.pageX=b.clientX+(e&&e.scrollLeft||c&&c.scrollLeft||0)-(e&&e.clientLeft||c&&c.clientLeft||0),a.pageY=b.clientY+(e&&e.scrollTop||c&&c.scrollTop||0)-(e&&e.clientTop||c&&c.clientTop||0)),!a.relatedTarget&&g&&(a.relatedTarget=g===a.target?b.toElement:g),a.which||void 0===f||(a.which=1&f?1:2&f?3:4&f?2:0),a}},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==cb()&&this.focus)try{return this.focus(),!1}catch(a){}},delegateType:"focusin"},blur:{trigger:function(){return this===cb()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return m.nodeName(this,"input")&&"checkbox"===this.type&&this.click?(this.click(),!1):void 0},_default:function(a){return m.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}},simulate:function(a,b,c,d){var e=m.extend(new m.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?m.event.trigger(e,null,b):m.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},m.removeEvent=y.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){var d="on"+b;a.detachEvent&&(typeof a[d]===K&&(a[d]=null),a.detachEvent(d,c))},m.Event=function(a,b){return this instanceof m.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?ab:bb):this.type=a,b&&m.extend(this,b),this.timeStamp=a&&a.timeStamp||m.now(),void(this[m.expando]=!0)):new m.Event(a,b)},m.Event.prototype={isDefaultPrevented:bb,isPropagationStopped:bb,isImmediatePropagationStopped:bb,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=ab,a&&(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=ab,a&&(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=ab,a&&a.stopImmediatePropagation&&a.stopImmediatePropagation(),this.stopPropagation()}},m.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){m.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return(!e||e!==d&&!m.contains(d,e))&&(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),k.submitBubbles||(m.event.special.submit={setup:function(){return m.nodeName(this,"form")?!1:void m.event.add(this,"click._submit keypress._submit",function(a){var b=a.target,c=m.nodeName(b,"input")||m.nodeName(b,"button")?b.form:void 0;c&&!m._data(c,"submitBubbles")&&(m.event.add(c,"submit._submit",function(a){a._submit_bubble=!0}),m._data(c,"submitBubbles",!0))})},postDispatch:function(a){a._submit_bubble&&(delete a._submit_bubble,this.parentNode&&!a.isTrigger&&m.event.simulate("submit",this.parentNode,a,!0))},teardown:function(){return m.nodeName(this,"form")?!1:void m.event.remove(this,"._submit")}}),k.changeBubbles||(m.event.special.change={setup:function(){return X.test(this.nodeName)?(("checkbox"===this.type||"radio"===this.type)&&(m.event.add(this,"propertychange._change",function(a){"checked"===a.originalEvent.propertyName&&(this._just_changed=!0)}),m.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1),m.event.simulate("change",this,a,!0)})),!1):void m.event.add(this,"beforeactivate._change",function(a){var b=a.target;X.test(b.nodeName)&&!m._data(b,"changeBubbles")&&(m.event.add(b,"change._change",function(a){!this.parentNode||a.isSimulated||a.isTrigger||m.event.simulate("change",this.parentNode,a,!0)}),m._data(b,"changeBubbles",!0))})},handle:function(a){var b=a.target;return this!==b||a.isSimulated||a.isTrigger||"radio"!==b.type&&"checkbox"!==b.type?a.handleObj.handler.apply(this,arguments):void 0},teardown:function(){return m.event.remove(this,"._change"),!X.test(this.nodeName)}}),k.focusinBubbles||m.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){m.event.simulate(b,a.target,m.event.fix(a),!0)};m.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=m._data(d,b);e||d.addEventListener(a,c,!0),m._data(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=m._data(d,b)-1;e?m._data(d,b,e):(d.removeEventListener(a,c,!0),m._removeData(d,b))}}}),m.fn.extend({on:function(a,b,c,d,e){var f,g;if("object"==typeof a){"string"!=typeof b&&(c=c||b,b=void 0);for(f in a)this.on(f,b,c,a[f],e);return this}if(null==c&&null==d?(d=b,c=b=void 0):null==d&&("string"==typeof b?(d=c,c=void 0):(d=c,c=b,b=void 0)),d===!1)d=bb;else if(!d)return this;return 1===e&&(g=d,d=function(a){return m().off(a),g.apply(this,arguments)},d.guid=g.guid||(g.guid=m.guid++)),this.each(function(){m.event.add(this,a,d,c,b)})},one:function(a,b,c,d){return this.on(a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,m(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return(b===!1||"function"==typeof b)&&(c=b,b=void 0),c===!1&&(c=bb),this.each(function(){m.event.remove(this,a,c,b)})},trigger:function(a,b){return this.each(function(){m.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?m.event.trigger(a,b,c,!0):void 0}});function db(a){var b=eb.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}var eb="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",fb=/ jQuery\d+="(?:null|\d+)"/g,gb=new RegExp("<(?:"+eb+")[\\s/>]","i"),hb=/^\s+/,ib=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,jb=/<([\w:]+)/,kb=/<tbody/i,lb=/<|&#?\w+;/,mb=/<(?:script|style|link)/i,nb=/checked\s*(?:[^=]|=\s*.checked.)/i,ob=/^$|\/(?:java|ecma)script/i,pb=/^true\/(.*)/,qb=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,rb={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],area:[1,"<map>","</map>"],param:[1,"<object>","</object>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:k.htmlSerialize?[0,"",""]:[1,"X<div>","</div>"]},sb=db(y),tb=sb.appendChild(y.createElement("div"));rb.optgroup=rb.option,rb.tbody=rb.tfoot=rb.colgroup=rb.caption=rb.thead,rb.th=rb.td;function ub(a,b){var c,d,e=0,f=typeof a.getElementsByTagName!==K?a.getElementsByTagName(b||"*"):typeof a.querySelectorAll!==K?a.querySelectorAll(b||"*"):void 0;if(!f)for(f=[],c=a.childNodes||a;null!=(d=c[e]);e++)!b||m.nodeName(d,b)?f.push(d):m.merge(f,ub(d,b));return void 0===b||b&&m.nodeName(a,b)?m.merge([a],f):f}function vb(a){W.test(a.type)&&(a.defaultChecked=a.checked)}function wb(a,b){return m.nodeName(a,"table")&&m.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function xb(a){return a.type=(null!==m.find.attr(a,"type"))+"/"+a.type,a}function yb(a){var b=pb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function zb(a,b){for(var c,d=0;null!=(c=a[d]);d++)m._data(c,"globalEval",!b||m._data(b[d],"globalEval"))}function Ab(a,b){if(1===b.nodeType&&m.hasData(a)){var c,d,e,f=m._data(a),g=m._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;e>d;d++)m.event.add(b,c,h[c][d])}g.data&&(g.data=m.extend({},g.data))}}function Bb(a,b){var c,d,e;if(1===b.nodeType){if(c=b.nodeName.toLowerCase(),!k.noCloneEvent&&b[m.expando]){e=m._data(b);for(d in e.events)m.removeEvent(b,d,e.handle);b.removeAttribute(m.expando)}"script"===c&&b.text!==a.text?(xb(b).text=a.text,yb(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),k.html5Clone&&a.innerHTML&&!m.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&W.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}}m.extend({clone:function(a,b,c){var d,e,f,g,h,i=m.contains(a.ownerDocument,a);if(k.html5Clone||m.isXMLDoc(a)||!gb.test("<"+a.nodeName+">")?f=a.cloneNode(!0):(tb.innerHTML=a.outerHTML,tb.removeChild(f=tb.firstChild)),!(k.noCloneEvent&&k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||m.isXMLDoc(a)))for(d=ub(f),h=ub(a),g=0;null!=(e=h[g]);++g)d[g]&&Bb(e,d[g]);if(b)if(c)for(h=h||ub(a),d=d||ub(f),g=0;null!=(e=h[g]);g++)Ab(e,d[g]);else Ab(a,f);return d=ub(f,"script"),d.length>0&&zb(d,!i&&ub(a,"script")),d=h=e=null,f},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,l,n=a.length,o=db(b),p=[],q=0;n>q;q++)if(f=a[q],f||0===f)if("object"===m.type(f))m.merge(p,f.nodeType?[f]:f);else if(lb.test(f)){h=h||o.appendChild(b.createElement("div")),i=(jb.exec(f)||["",""])[1].toLowerCase(),l=rb[i]||rb._default,h.innerHTML=l[1]+f.replace(ib,"<$1></$2>")+l[2],e=l[0];while(e--)h=h.lastChild;if(!k.leadingWhitespace&&hb.test(f)&&p.push(b.createTextNode(hb.exec(f)[0])),!k.tbody){f="table"!==i||kb.test(f)?"<table>"!==l[1]||kb.test(f)?0:h:h.firstChild,e=f&&f.childNodes.length;while(e--)m.nodeName(j=f.childNodes[e],"tbody")&&!j.childNodes.length&&f.removeChild(j)}m.merge(p,h.childNodes),h.textContent="";while(h.firstChild)h.removeChild(h.firstChild);h=o.lastChild}else p.push(b.createTextNode(f));h&&o.removeChild(h),k.appendChecked||m.grep(ub(p,"input"),vb),q=0;while(f=p[q++])if((!d||-1===m.inArray(f,d))&&(g=m.contains(f.ownerDocument,f),h=ub(o.appendChild(f),"script"),g&&zb(h),c)){e=0;while(f=h[e++])ob.test(f.type||"")&&c.push(f)}return h=null,o},cleanData:function(a,b){for(var d,e,f,g,h=0,i=m.expando,j=m.cache,l=k.deleteExpando,n=m.event.special;null!=(d=a[h]);h++)if((b||m.acceptData(d))&&(f=d[i],g=f&&j[f])){if(g.events)for(e in g.events)n[e]?m.event.remove(d,e):m.removeEvent(d,e,g.handle);j[f]&&(delete j[f],l?delete d[i]:typeof d.removeAttribute!==K?d.removeAttribute(i):d[i]=null,c.push(f))}}}),m.fn.extend({text:function(a){return V(this,function(a){return void 0===a?m.text(this):this.empty().append((this[0]&&this[0].ownerDocument||y).createTextNode(a))},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=wb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=wb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?m.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||m.cleanData(ub(c)),c.parentNode&&(b&&m.contains(c.ownerDocument,c)&&zb(ub(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++){1===a.nodeType&&m.cleanData(ub(a,!1));while(a.firstChild)a.removeChild(a.firstChild);a.options&&m.nodeName(a,"select")&&(a.options.length=0)}return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return m.clone(this,a,b)})},html:function(a){return V(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(fb,""):void 0;if(!("string"!=typeof a||mb.test(a)||!k.htmlSerialize&&gb.test(a)||!k.leadingWhitespace&&hb.test(a)||rb[(jb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(ib,"<$1></$2>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(m.cleanData(ub(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,m.cleanData(ub(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,n=this,o=l-1,p=a[0],q=m.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&nb.test(p))return this.each(function(c){var d=n.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(i=m.buildFragment(a,this[0].ownerDocument,!1,this),c=i.firstChild,1===i.childNodes.length&&(i=c),c)){for(g=m.map(ub(i,"script"),xb),f=g.length;l>j;j++)d=i,j!==o&&(d=m.clone(d,!0,!0),f&&m.merge(g,ub(d,"script"))),b.call(this[j],d,j);if(f)for(h=g[g.length-1].ownerDocument,m.map(g,yb),j=0;f>j;j++)d=g[j],ob.test(d.type||"")&&!m._data(d,"globalEval")&&m.contains(h,d)&&(d.src?m._evalUrl&&m._evalUrl(d.src):m.globalEval((d.text||d.textContent||d.innerHTML||"").replace(qb,"")));i=c=null}return this}}),m.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){m.fn[a]=function(a){for(var c,d=0,e=[],g=m(a),h=g.length-1;h>=d;d++)c=d===h?this:this.clone(!0),m(g[d])[b](c),f.apply(e,c.get());return this.pushStack(e)}});var Cb,Db={};function Eb(b,c){var d,e=m(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:m.css(e[0],"display");return e.detach(),f}function Fb(a){var b=y,c=Db[a];return c||(c=Eb(a,b),"none"!==c&&c||(Cb=(Cb||m("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=(Cb[0].contentWindow||Cb[0].contentDocument).document,b.write(),b.close(),c=Eb(a,b),Cb.detach()),Db[a]=c),c}!function(){var a;k.shrinkWrapBlocks=function(){if(null!=a)return a;a=!1;var b,c,d;return c=y.getElementsByTagName("body")[0],c&&c.style?(b=y.createElement("div"),d=y.createElement("div"),d.style.cssText="position:absolute;border:0;width:0;height:0;top:0;left:-9999px",c.appendChild(d).appendChild(b),typeof b.style.zoom!==K&&(b.style.cssText="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:1px;width:1px;zoom:1",b.appendChild(y.createElement("div")).style.width="5px",a=3!==b.offsetWidth),c.removeChild(d),a):void 0}}();var Gb=/^margin/,Hb=new RegExp("^("+S+")(?!px)[a-z%]+$","i"),Ib,Jb,Kb=/^(top|right|bottom|left)$/;a.getComputedStyle?(Ib=function(a){return a.ownerDocument.defaultView.getComputedStyle(a,null)},Jb=function(a,b,c){var d,e,f,g,h=a.style;return c=c||Ib(a),g=c?c.getPropertyValue(b)||c[b]:void 0,c&&(""!==g||m.contains(a.ownerDocument,a)||(g=m.style(a,b)),Hb.test(g)&&Gb.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0===g?g:g+""}):y.documentElement.currentStyle&&(Ib=function(a){return a.currentStyle},Jb=function(a,b,c){var d,e,f,g,h=a.style;return c=c||Ib(a),g=c?c[b]:void 0,null==g&&h&&h[b]&&(g=h[b]),Hb.test(g)&&!Kb.test(b)&&(d=h.left,e=a.runtimeStyle,f=e&&e.left,f&&(e.left=a.currentStyle.left),h.left="fontSize"===b?"1em":g,g=h.pixelLeft+"px",h.left=d,f&&(e.left=f)),void 0===g?g:g+""||"auto"});function Lb(a,b){return{get:function(){var c=a();if(null!=c)return c?void delete this.get:(this.get=b).apply(this,arguments)}}}!function(){var b,c,d,e,f,g,h;if(b=y.createElement("div"),b.innerHTML="  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",d=b.getElementsByTagName("a")[0],c=d&&d.style){c.cssText="float:left;opacity:.5",k.opacity="0.5"===c.opacity,k.cssFloat=!!c.cssFloat,b.style.backgroundClip="content-box",b.cloneNode(!0).style.backgroundClip="",k.clearCloneStyle="content-box"===b.style.backgroundClip,k.boxSizing=""===c.boxSizing||""===c.MozBoxSizing||""===c.WebkitBoxSizing,m.extend(k,{reliableHiddenOffsets:function(){return null==g&&i(),g},boxSizingReliable:function(){return null==f&&i(),f},pixelPosition:function(){return null==e&&i(),e},reliableMarginRight:function(){return null==h&&i(),h}});function i(){var b,c,d,i;c=y.getElementsByTagName("body")[0],c&&c.style&&(b=y.createElement("div"),d=y.createElement("div"),d.style.cssText="position:absolute;border:0;width:0;height:0;top:0;left:-9999px",c.appendChild(d).appendChild(b),b.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;margin-top:1%;top:1%;border:1px;padding:1px;width:4px;position:absolute",e=f=!1,h=!0,a.getComputedStyle&&(e="1%"!==(a.getComputedStyle(b,null)||{}).top,f="4px"===(a.getComputedStyle(b,null)||{width:"4px"}).width,i=b.appendChild(y.createElement("div")),i.style.cssText=b.style.cssText="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:0",i.style.marginRight=i.style.width="0",b.style.width="1px",h=!parseFloat((a.getComputedStyle(i,null)||{}).marginRight)),b.innerHTML="<table><tr><td></td><td>t</td></tr></table>",i=b.getElementsByTagName("td"),i[0].style.cssText="margin:0;border:0;padding:0;display:none",g=0===i[0].offsetHeight,g&&(i[0].style.display="",i[1].style.display="none",g=0===i[0].offsetHeight),c.removeChild(d))}}}(),m.swap=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};var Mb=/alpha\([^)]*\)/i,Nb=/opacity\s*=\s*([^)]*)/,Ob=/^(none|table(?!-c[ea]).+)/,Pb=new RegExp("^("+S+")(.*)$","i"),Qb=new RegExp("^([+-])=("+S+")","i"),Rb={position:"absolute",visibility:"hidden",display:"block"},Sb={letterSpacing:"0",fontWeight:"400"},Tb=["Webkit","O","Moz","ms"];function Ub(a,b){if(b in a)return b;var c=b.charAt(0).toUpperCase()+b.slice(1),d=b,e=Tb.length;while(e--)if(b=Tb[e]+c,b in a)return b;return d}function Vb(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=m._data(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&U(d)&&(f[g]=m._data(d,"olddisplay",Fb(d.nodeName)))):(e=U(d),(c&&"none"!==c||!e)&&m._data(d,"olddisplay",e?c:m.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}function Wb(a,b,c){var d=Pb.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function Xb(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=m.css(a,c+T[f],!0,e)),d?("content"===c&&(g-=m.css(a,"padding"+T[f],!0,e)),"margin"!==c&&(g-=m.css(a,"border"+T[f]+"Width",!0,e))):(g+=m.css(a,"padding"+T[f],!0,e),"padding"!==c&&(g+=m.css(a,"border"+T[f]+"Width",!0,e)));return g}function Yb(a,b,c){var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=Ib(a),g=k.boxSizing&&"border-box"===m.css(a,"boxSizing",!1,f);if(0>=e||null==e){if(e=Jb(a,b,f),(0>e||null==e)&&(e=a.style[b]),Hb.test(e))return e;d=g&&(k.boxSizingReliable()||e===a.style[b]),e=parseFloat(e)||0}return e+Xb(a,b,c||(g?"border":"content"),d,f)+"px"}m.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Jb(a,"opacity");return""===c?"1":c}}}},cssNumber:{columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":k.cssFloat?"cssFloat":"styleFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=m.camelCase(b),i=a.style;if(b=m.cssProps[h]||(m.cssProps[h]=Ub(i,h)),g=m.cssHooks[b]||m.cssHooks[h],void 0===c)return g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b];if(f=typeof c,"string"===f&&(e=Qb.exec(c))&&(c=(e[1]+1)*e[2]+parseFloat(m.css(a,b)),f="number"),null!=c&&c===c&&("number"!==f||m.cssNumber[h]||(c+="px"),k.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),!(g&&"set"in g&&void 0===(c=g.set(a,c,d)))))try{i[b]=c}catch(j){}}},css:function(a,b,c,d){var e,f,g,h=m.camelCase(b);return b=m.cssProps[h]||(m.cssProps[h]=Ub(a.style,h)),g=m.cssHooks[b]||m.cssHooks[h],g&&"get"in g&&(f=g.get(a,!0,c)),void 0===f&&(f=Jb(a,b,d)),"normal"===f&&b in Sb&&(f=Sb[b]),""===c||c?(e=parseFloat(f),c===!0||m.isNumeric(e)?e||0:f):f}}),m.each(["height","width"],function(a,b){m.cssHooks[b]={get:function(a,c,d){return c?Ob.test(m.css(a,"display"))&&0===a.offsetWidth?m.swap(a,Rb,function(){return Yb(a,b,d)}):Yb(a,b,d):void 0},set:function(a,c,d){var e=d&&Ib(a);return Wb(a,c,d?Xb(a,b,d,k.boxSizing&&"border-box"===m.css(a,"boxSizing",!1,e),e):0)}}}),k.opacity||(m.cssHooks.opacity={get:function(a,b){return Nb.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=m.isNumeric(b)?"alpha(opacity="+100*b+")":"",f=d&&d.filter||c.filter||"";c.zoom=1,(b>=1||""===b)&&""===m.trim(f.replace(Mb,""))&&c.removeAttribute&&(c.removeAttribute("filter"),""===b||d&&!d.filter)||(c.filter=Mb.test(f)?f.replace(Mb,e):f+" "+e)}}),m.cssHooks.marginRight=Lb(k.reliableMarginRight,function(a,b){return b?m.swap(a,{display:"inline-block"},Jb,[a,"marginRight"]):void 0}),m.each({margin:"",padding:"",border:"Width"},function(a,b){m.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+T[d]+b]=f[d]||f[d-2]||f[0];return e}},Gb.test(a)||(m.cssHooks[a+b].set=Wb)}),m.fn.extend({css:function(a,b){return V(this,function(a,b,c){var d,e,f={},g=0;if(m.isArray(b)){for(d=Ib(a),e=b.length;e>g;g++)f[b[g]]=m.css(a,b[g],!1,d);return f}return void 0!==c?m.style(a,b,c):m.css(a,b)},a,b,arguments.length>1)},show:function(){return Vb(this,!0)},hide:function(){return Vb(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){U(this)?m(this).show():m(this).hide()})}});function Zb(a,b,c,d,e){return new Zb.prototype.init(a,b,c,d,e)}m.Tween=Zb,Zb.prototype={constructor:Zb,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||"swing",this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(m.cssNumber[c]?"":"px")
+},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(this):Zb.propHooks._default.get(this)},run:function(a){var b,c=Zb.propHooks[this.prop];return this.pos=b=this.options.duration?m.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Zb.propHooks._default.set(this),this}},Zb.prototype.init.prototype=Zb.prototype,Zb.propHooks={_default:{get:function(a){var b;return null==a.elem[a.prop]||a.elem.style&&null!=a.elem.style[a.prop]?(b=m.css(a.elem,a.prop,""),b&&"auto"!==b?b:0):a.elem[a.prop]},set:function(a){m.fx.step[a.prop]?m.fx.step[a.prop](a):a.elem.style&&(null!=a.elem.style[m.cssProps[a.prop]]||m.cssHooks[a.prop])?m.style(a.elem,a.prop,a.now+a.unit):a.elem[a.prop]=a.now}}},Zb.propHooks.scrollTop=Zb.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},m.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2}},m.fx=Zb.prototype.init,m.fx.step={};var $b,_b,ac=/^(?:toggle|show|hide)$/,bc=new RegExp("^(?:([+-])=|)("+S+")([a-z%]*)$","i"),cc=/queueHooks$/,dc=[ic],ec={"*":[function(a,b){var c=this.createTween(a,b),d=c.cur(),e=bc.exec(b),f=e&&e[3]||(m.cssNumber[a]?"":"px"),g=(m.cssNumber[a]||"px"!==f&&+d)&&bc.exec(m.css(c.elem,a)),h=1,i=20;if(g&&g[3]!==f){f=f||g[3],e=e||[],g=+d||1;do h=h||".5",g/=h,m.style(c.elem,a,g+f);while(h!==(h=c.cur()/d)&&1!==h&&--i)}return e&&(g=c.start=+g||+d||0,c.unit=f,c.end=e[1]?g+(e[1]+1)*e[2]:+e[2]),c}]};function fc(){return setTimeout(function(){$b=void 0}),$b=m.now()}function gc(a,b){var c,d={height:a},e=0;for(b=b?1:0;4>e;e+=2-b)c=T[e],d["margin"+c]=d["padding"+c]=a;return b&&(d.opacity=d.width=a),d}function hc(a,b,c){for(var d,e=(ec[b]||[]).concat(ec["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function ic(a,b,c){var d,e,f,g,h,i,j,l,n=this,o={},p=a.style,q=a.nodeType&&U(a),r=m._data(a,"fxshow");c.queue||(h=m._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,n.always(function(){n.always(function(){h.unqueued--,m.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[p.overflow,p.overflowX,p.overflowY],j=m.css(a,"display"),l="none"===j?m._data(a,"olddisplay")||Fb(a.nodeName):j,"inline"===l&&"none"===m.css(a,"float")&&(k.inlineBlockNeedsLayout&&"inline"!==Fb(a.nodeName)?p.zoom=1:p.display="inline-block")),c.overflow&&(p.overflow="hidden",k.shrinkWrapBlocks()||n.always(function(){p.overflow=c.overflow[0],p.overflowX=c.overflow[1],p.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],ac.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(q?"hide":"show")){if("show"!==e||!r||void 0===r[d])continue;q=!0}o[d]=r&&r[d]||m.style(a,d)}else j=void 0;if(m.isEmptyObject(o))"inline"===("none"===j?Fb(a.nodeName):j)&&(p.display=j);else{r?"hidden"in r&&(q=r.hidden):r=m._data(a,"fxshow",{}),f&&(r.hidden=!q),q?m(a).show():n.done(function(){m(a).hide()}),n.done(function(){var b;m._removeData(a,"fxshow");for(b in o)m.style(a,b,o[b])});for(d in o)g=hc(q?r[d]:0,d,n),d in r||(r[d]=g.start,q&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function jc(a,b){var c,d,e,f,g;for(c in a)if(d=m.camelCase(c),e=b[d],f=a[c],m.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=m.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function kc(a,b,c){var d,e,f=0,g=dc.length,h=m.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=$b||fc(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:m.extend({},b),opts:m.extend(!0,{specialEasing:{}},c),originalProperties:b,originalOptions:c,startTime:$b||fc(),duration:c.duration,tweens:[],createTween:function(b,c){var d=m.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?h.resolveWith(a,[j,b]):h.rejectWith(a,[j,b]),this}}),k=j.props;for(jc(k,j.opts.specialEasing);g>f;f++)if(d=dc[f].call(j,a,k,j.opts))return d;return m.map(k,hc,j),m.isFunction(j.opts.start)&&j.opts.start.call(a,j),m.fx.timer(m.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}m.Animation=m.extend(kc,{tweener:function(a,b){m.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");for(var c,d=0,e=a.length;e>d;d++)c=a[d],ec[c]=ec[c]||[],ec[c].unshift(b)},prefilter:function(a,b){b?dc.unshift(a):dc.push(a)}}),m.speed=function(a,b,c){var d=a&&"object"==typeof a?m.extend({},a):{complete:c||!c&&b||m.isFunction(a)&&a,duration:a,easing:c&&b||b&&!m.isFunction(b)&&b};return d.duration=m.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in m.fx.speeds?m.fx.speeds[d.duration]:m.fx.speeds._default,(null==d.queue||d.queue===!0)&&(d.queue="fx"),d.old=d.complete,d.complete=function(){m.isFunction(d.old)&&d.old.call(this),d.queue&&m.dequeue(this,d.queue)},d},m.fn.extend({fadeTo:function(a,b,c,d){return this.filter(U).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=m.isEmptyObject(a),f=m.speed(b,c,d),g=function(){var b=kc(this,m.extend({},a),f);(e||m._data(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=m.timers,g=m._data(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&cc.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));(b||!c)&&m.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=m._data(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=m.timers,g=d?d.length:0;for(c.finish=!0,m.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),m.each(["toggle","show","hide"],function(a,b){var c=m.fn[b];m.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(gc(b,!0),a,d,e)}}),m.each({slideDown:gc("show"),slideUp:gc("hide"),slideToggle:gc("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){m.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),m.timers=[],m.fx.tick=function(){var a,b=m.timers,c=0;for($b=m.now();c<b.length;c++)a=b[c],a()||b[c]!==a||b.splice(c--,1);b.length||m.fx.stop(),$b=void 0},m.fx.timer=function(a){m.timers.push(a),a()?m.fx.start():m.timers.pop()},m.fx.interval=13,m.fx.start=function(){_b||(_b=setInterval(m.fx.tick,m.fx.interval))},m.fx.stop=function(){clearInterval(_b),_b=null},m.fx.speeds={slow:600,fast:200,_default:400},m.fn.delay=function(a,b){return a=m.fx?m.fx.speeds[a]||a:a,b=b||"fx",this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},function(){var a,b,c,d,e;b=y.createElement("div"),b.setAttribute("className","t"),b.innerHTML="  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",d=b.getElementsByTagName("a")[0],c=y.createElement("select"),e=c.appendChild(y.createElement("option")),a=b.getElementsByTagName("input")[0],d.style.cssText="top:1px",k.getSetAttribute="t"!==b.className,k.style=/top/.test(d.getAttribute("style")),k.hrefNormalized="/a"===d.getAttribute("href"),k.checkOn=!!a.value,k.optSelected=e.selected,k.enctype=!!y.createElement("form").enctype,c.disabled=!0,k.optDisabled=!e.disabled,a=y.createElement("input"),a.setAttribute("value",""),k.input=""===a.getAttribute("value"),a.value="t",a.setAttribute("type","radio"),k.radioValue="t"===a.value}();var lc=/\r/g;m.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=m.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,m(this).val()):a,null==e?e="":"number"==typeof e?e+="":m.isArray(e)&&(e=m.map(e,function(a){return null==a?"":a+""})),b=m.valHooks[this.type]||m.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=m.valHooks[e.type]||m.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(lc,""):null==c?"":c)}}}),m.extend({valHooks:{option:{get:function(a){var b=m.find.attr(a,"value");return null!=b?b:m.trim(m.text(a))}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],!(!c.selected&&i!==e||(k.optDisabled?c.disabled:null!==c.getAttribute("disabled"))||c.parentNode.disabled&&m.nodeName(c.parentNode,"optgroup"))){if(b=m(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=m.makeArray(b),g=e.length;while(g--)if(d=e[g],m.inArray(m.valHooks.option.get(d),f)>=0)try{d.selected=c=!0}catch(h){d.scrollHeight}else d.selected=!1;return c||(a.selectedIndex=-1),e}}}}),m.each(["radio","checkbox"],function(){m.valHooks[this]={set:function(a,b){return m.isArray(b)?a.checked=m.inArray(m(a).val(),b)>=0:void 0}},k.checkOn||(m.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var mc,nc,oc=m.expr.attrHandle,pc=/^(?:checked|selected)$/i,qc=k.getSetAttribute,rc=k.input;m.fn.extend({attr:function(a,b){return V(this,m.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){m.removeAttr(this,a)})}}),m.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(a&&3!==f&&8!==f&&2!==f)return typeof a.getAttribute===K?m.prop(a,b,c):(1===f&&m.isXMLDoc(a)||(b=b.toLowerCase(),d=m.attrHooks[b]||(m.expr.match.bool.test(b)?nc:mc)),void 0===c?d&&"get"in d&&null!==(e=d.get(a,b))?e:(e=m.find.attr(a,b),null==e?void 0:e):null!==c?d&&"set"in d&&void 0!==(e=d.set(a,c,b))?e:(a.setAttribute(b,c+""),c):void m.removeAttr(a,b))},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(E);if(f&&1===a.nodeType)while(c=f[e++])d=m.propFix[c]||c,m.expr.match.bool.test(c)?rc&&qc||!pc.test(c)?a[d]=!1:a[m.camelCase("default-"+c)]=a[d]=!1:m.attr(a,c,""),a.removeAttribute(qc?c:d)},attrHooks:{type:{set:function(a,b){if(!k.radioValue&&"radio"===b&&m.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}}}),nc={set:function(a,b,c){return b===!1?m.removeAttr(a,c):rc&&qc||!pc.test(c)?a.setAttribute(!qc&&m.propFix[c]||c,c):a[m.camelCase("default-"+c)]=a[c]=!0,c}},m.each(m.expr.match.bool.source.match(/\w+/g),function(a,b){var c=oc[b]||m.find.attr;oc[b]=rc&&qc||!pc.test(b)?function(a,b,d){var e,f;return d||(f=oc[b],oc[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,oc[b]=f),e}:function(a,b,c){return c?void 0:a[m.camelCase("default-"+b)]?b.toLowerCase():null}}),rc&&qc||(m.attrHooks.value={set:function(a,b,c){return m.nodeName(a,"input")?void(a.defaultValue=b):mc&&mc.set(a,b,c)}}),qc||(mc={set:function(a,b,c){var d=a.getAttributeNode(c);return d||a.setAttributeNode(d=a.ownerDocument.createAttribute(c)),d.value=b+="","value"===c||b===a.getAttribute(c)?b:void 0}},oc.id=oc.name=oc.coords=function(a,b,c){var d;return c?void 0:(d=a.getAttributeNode(b))&&""!==d.value?d.value:null},m.valHooks.button={get:function(a,b){var c=a.getAttributeNode(b);return c&&c.specified?c.value:void 0},set:mc.set},m.attrHooks.contenteditable={set:function(a,b,c){mc.set(a,""===b?!1:b,c)}},m.each(["width","height"],function(a,b){m.attrHooks[b]={set:function(a,c){return""===c?(a.setAttribute(b,"auto"),c):void 0}}})),k.style||(m.attrHooks.style={get:function(a){return a.style.cssText||void 0},set:function(a,b){return a.style.cssText=b+""}});var sc=/^(?:input|select|textarea|button|object)$/i,tc=/^(?:a|area)$/i;m.fn.extend({prop:function(a,b){return V(this,m.prop,a,b,arguments.length>1)},removeProp:function(a){return a=m.propFix[a]||a,this.each(function(){try{this[a]=void 0,delete this[a]}catch(b){}})}}),m.extend({propFix:{"for":"htmlFor","class":"className"},prop:function(a,b,c){var d,e,f,g=a.nodeType;if(a&&3!==g&&8!==g&&2!==g)return f=1!==g||!m.isXMLDoc(a),f&&(b=m.propFix[b]||b,e=m.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=m.find.attr(a,"tabindex");return b?parseInt(b,10):sc.test(a.nodeName)||tc.test(a.nodeName)&&a.href?0:-1}}}}),k.hrefNormalized||m.each(["href","src"],function(a,b){m.propHooks[b]={get:function(a){return a.getAttribute(b,4)}}}),k.optSelected||(m.propHooks.selected={get:function(a){var b=a.parentNode;return b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex),null}}),m.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){m.propFix[this.toLowerCase()]=this}),k.enctype||(m.propFix.enctype="encoding");var uc=/[\t\r\n\f]/g;m.fn.extend({addClass:function(a){var b,c,d,e,f,g,h=0,i=this.length,j="string"==typeof a&&a;if(m.isFunction(a))return this.each(function(b){m(this).addClass(a.call(this,b,this.className))});if(j)for(b=(a||"").match(E)||[];i>h;h++)if(c=this[h],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(uc," "):" ")){f=0;while(e=b[f++])d.indexOf(" "+e+" ")<0&&(d+=e+" ");g=m.trim(d),c.className!==g&&(c.className=g)}return this},removeClass:function(a){var b,c,d,e,f,g,h=0,i=this.length,j=0===arguments.length||"string"==typeof a&&a;if(m.isFunction(a))return this.each(function(b){m(this).removeClass(a.call(this,b,this.className))});if(j)for(b=(a||"").match(E)||[];i>h;h++)if(c=this[h],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(uc," "):"")){f=0;while(e=b[f++])while(d.indexOf(" "+e+" ")>=0)d=d.replace(" "+e+" "," ");g=a?m.trim(d):"",c.className!==g&&(c.className=g)}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):this.each(m.isFunction(a)?function(c){m(this).toggleClass(a.call(this,c,this.className,b),b)}:function(){if("string"===c){var b,d=0,e=m(this),f=a.match(E)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(c===K||"boolean"===c)&&(this.className&&m._data(this,"__className__",this.className),this.className=this.className||a===!1?"":m._data(this,"__className__")||"")})},hasClass:function(a){for(var b=" "+a+" ",c=0,d=this.length;d>c;c++)if(1===this[c].nodeType&&(" "+this[c].className+" ").replace(uc," ").indexOf(b)>=0)return!0;return!1}}),m.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){m.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),m.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}});var vc=m.now(),wc=/\?/,xc=/(,)|(\[|{)|(}|])|"(?:[^"\\\r\n]|\\["\\\/bfnrt]|\\u[\da-fA-F]{4})*"\s*:?|true|false|null|-?(?!0\d)\d+(?:\.\d+|)(?:[eE][+-]?\d+|)/g;m.parseJSON=function(b){if(a.JSON&&a.JSON.parse)return a.JSON.parse(b+"");var c,d=null,e=m.trim(b+"");return e&&!m.trim(e.replace(xc,function(a,b,e,f){return c&&b&&(d=0),0===d?a:(c=e||b,d+=!f-!e,"")}))?Function("return "+e)():m.error("Invalid JSON: "+b)},m.parseXML=function(b){var c,d;if(!b||"string"!=typeof b)return null;try{a.DOMParser?(d=new DOMParser,c=d.parseFromString(b,"text/xml")):(c=new ActiveXObject("Microsoft.XMLDOM"),c.async="false",c.loadXML(b))}catch(e){c=void 0}return c&&c.documentElement&&!c.getElementsByTagName("parsererror").length||m.error("Invalid XML: "+b),c};var yc,zc,Ac=/#.*$/,Bc=/([?&])_=[^&]*/,Cc=/^(.*?):[ \t]*([^\r\n]*)\r?$/gm,Dc=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Ec=/^(?:GET|HEAD)$/,Fc=/^\/\//,Gc=/^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/,Hc={},Ic={},Jc="*/".concat("*");try{zc=location.href}catch(Kc){zc=y.createElement("a"),zc.href="",zc=zc.href}yc=Gc.exec(zc.toLowerCase())||[];function Lc(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(E)||[];if(m.isFunction(c))while(d=f[e++])"+"===d.charAt(0)?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function Mc(a,b,c,d){var e={},f=a===Ic;function g(h){var i;return e[h]=!0,m.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function Nc(a,b){var c,d,e=m.ajaxSettings.flatOptions||{};for(d in b)void 0!==b[d]&&((e[d]?a:c||(c={}))[d]=b[d]);return c&&m.extend(!0,a,c),a}function Oc(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===e&&(e=a.mimeType||b.getResponseHeader("Content-Type"));if(e)for(g in h)if(h[g]&&h[g].test(e)){i.unshift(g);break}if(i[0]in c)f=i[0];else{for(g in c){if(!i[0]||a.converters[g+" "+i[0]]){f=g;break}d||(d=g)}f=f||d}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function Pc(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}m.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:zc,type:"GET",isLocal:Dc.test(yc[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Jc,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":m.parseJSON,"text xml":m.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?Nc(Nc(a,m.ajaxSettings),b):Nc(m.ajaxSettings,a)},ajaxPrefilter:Lc(Hc),ajaxTransport:Lc(Ic),ajax:function(a,b){"object"==typeof a&&(b=a,a=void 0),b=b||{};var c,d,e,f,g,h,i,j,k=m.ajaxSetup({},b),l=k.context||k,n=k.context&&(l.nodeType||l.jquery)?m(l):m.event,o=m.Deferred(),p=m.Callbacks("once memory"),q=k.statusCode||{},r={},s={},t=0,u="canceled",v={readyState:0,getResponseHeader:function(a){var b;if(2===t){if(!j){j={};while(b=Cc.exec(f))j[b[1].toLowerCase()]=b[2]}b=j[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===t?f:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this},overrideMimeType:function(a){return t||(k.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this},abort:function(a){var b=a||u;return i&&i.abort(b),x(0,b),this}};if(o.promise(v).complete=p.add,v.success=v.done,v.error=v.fail,k.url=((a||k.url||zc)+"").replace(Ac,"").replace(Fc,yc[1]+"//"),k.type=b.method||b.type||k.method||k.type,k.dataTypes=m.trim(k.dataType||"*").toLowerCase().match(E)||[""],null==k.crossDomain&&(c=Gc.exec(k.url.toLowerCase()),k.crossDomain=!(!c||c[1]===yc[1]&&c[2]===yc[2]&&(c[3]||("http:"===c[1]?"80":"443"))===(yc[3]||("http:"===yc[1]?"80":"443")))),k.data&&k.processData&&"string"!=typeof k.data&&(k.data=m.param(k.data,k.traditional)),Mc(Hc,k,b,v),2===t)return v;h=k.global,h&&0===m.active++&&m.event.trigger("ajaxStart"),k.type=k.type.toUpperCase(),k.hasContent=!Ec.test(k.type),e=k.url,k.hasContent||(k.data&&(e=k.url+=(wc.test(e)?"&":"?")+k.data,delete k.data),k.cache===!1&&(k.url=Bc.test(e)?e.replace(Bc,"$1_="+vc++):e+(wc.test(e)?"&":"?")+"_="+vc++)),k.ifModified&&(m.lastModified[e]&&v.setRequestHeader("If-Modified-Since",m.lastModified[e]),m.etag[e]&&v.setRequestHeader("If-None-Match",m.etag[e])),(k.data&&k.hasContent&&k.contentType!==!1||b.contentType)&&v.setRequestHeader("Content-Type",k.contentType),v.setRequestHeader("Accept",k.dataTypes[0]&&k.accepts[k.dataTypes[0]]?k.accepts[k.dataTypes[0]]+("*"!==k.dataTypes[0]?", "+Jc+"; q=0.01":""):k.accepts["*"]);for(d in k.headers)v.setRequestHeader(d,k.headers[d]);if(k.beforeSend&&(k.beforeSend.call(l,v,k)===!1||2===t))return v.abort();u="abort";for(d in{success:1,error:1,complete:1})v[d](k[d]);if(i=Mc(Ic,k,b,v)){v.readyState=1,h&&n.trigger("ajaxSend",[v,k]),k.async&&k.timeout>0&&(g=setTimeout(function(){v.abort("timeout")},k.timeout));try{t=1,i.send(r,x)}catch(w){if(!(2>t))throw w;x(-1,w)}}else x(-1,"No Transport");function x(a,b,c,d){var j,r,s,u,w,x=b;2!==t&&(t=2,g&&clearTimeout(g),i=void 0,f=d||"",v.readyState=a>0?4:0,j=a>=200&&300>a||304===a,c&&(u=Oc(k,v,c)),u=Pc(k,u,v,j),j?(k.ifModified&&(w=v.getResponseHeader("Last-Modified"),w&&(m.lastModified[e]=w),w=v.getResponseHeader("etag"),w&&(m.etag[e]=w)),204===a||"HEAD"===k.type?x="nocontent":304===a?x="notmodified":(x=u.state,r=u.data,s=u.error,j=!s)):(s=x,(a||!x)&&(x="error",0>a&&(a=0))),v.status=a,v.statusText=(b||x)+"",j?o.resolveWith(l,[r,x,v]):o.rejectWith(l,[v,x,s]),v.statusCode(q),q=void 0,h&&n.trigger(j?"ajaxSuccess":"ajaxError",[v,k,j?r:s]),p.fireWith(l,[v,x]),h&&(n.trigger("ajaxComplete",[v,k]),--m.active||m.event.trigger("ajaxStop")))}return v},getJSON:function(a,b,c){return m.get(a,b,c,"json")},getScript:function(a,b){return m.get(a,void 0,b,"script")}}),m.each(["get","post"],function(a,b){m[b]=function(a,c,d,e){return m.isFunction(c)&&(e=e||d,d=c,c=void 0),m.ajax({url:a,type:b,dataType:e,data:c,success:d})}}),m.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){m.fn[b]=function(a){return this.on(b,a)}}),m._evalUrl=function(a){return m.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},m.fn.extend({wrapAll:function(a){if(m.isFunction(a))return this.each(function(b){m(this).wrapAll(a.call(this,b))});if(this[0]){var b=m(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&1===a.firstChild.nodeType)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){return this.each(m.isFunction(a)?function(b){m(this).wrapInner(a.call(this,b))}:function(){var b=m(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=m.isFunction(a);return this.each(function(c){m(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){m.nodeName(this,"body")||m(this).replaceWith(this.childNodes)}).end()}}),m.expr.filters.hidden=function(a){return a.offsetWidth<=0&&a.offsetHeight<=0||!k.reliableHiddenOffsets()&&"none"===(a.style&&a.style.display||m.css(a,"display"))},m.expr.filters.visible=function(a){return!m.expr.filters.hidden(a)};var Qc=/%20/g,Rc=/\[\]$/,Sc=/\r?\n/g,Tc=/^(?:submit|button|image|reset|file)$/i,Uc=/^(?:input|select|textarea|keygen)/i;function Vc(a,b,c,d){var e;if(m.isArray(b))m.each(b,function(b,e){c||Rc.test(a)?d(a,e):Vc(a+"["+("object"==typeof e?b:"")+"]",e,c,d)});else if(c||"object"!==m.type(b))d(a,b);else for(e in b)Vc(a+"["+e+"]",b[e],c,d)}m.param=function(a,b){var c,d=[],e=function(a,b){b=m.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=m.ajaxSettings&&m.ajaxSettings.traditional),m.isArray(a)||a.jquery&&!m.isPlainObject(a))m.each(a,function(){e(this.name,this.value)});else for(c in a)Vc(c,a[c],b,e);return d.join("&").replace(Qc,"+")},m.fn.extend({serialize:function(){return m.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=m.prop(this,"elements");return a?m.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!m(this).is(":disabled")&&Uc.test(this.nodeName)&&!Tc.test(a)&&(this.checked||!W.test(a))}).map(function(a,b){var c=m(this).val();return null==c?null:m.isArray(c)?m.map(c,function(a){return{name:b.name,value:a.replace(Sc,"\r\n")}}):{name:b.name,value:c.replace(Sc,"\r\n")}}).get()}}),m.ajaxSettings.xhr=void 0!==a.ActiveXObject?function(){return!this.isLocal&&/^(get|post|head|put|delete|options)$/i.test(this.type)&&Zc()||$c()}:Zc;var Wc=0,Xc={},Yc=m.ajaxSettings.xhr();a.ActiveXObject&&m(a).on("unload",function(){for(var a in Xc)Xc[a](void 0,!0)}),k.cors=!!Yc&&"withCredentials"in Yc,Yc=k.ajax=!!Yc,Yc&&m.ajaxTransport(function(a){if(!a.crossDomain||k.cors){var b;return{send:function(c,d){var e,f=a.xhr(),g=++Wc;if(f.open(a.type,a.url,a.async,a.username,a.password),a.xhrFields)for(e in a.xhrFields)f[e]=a.xhrFields[e];a.mimeType&&f.overrideMimeType&&f.overrideMimeType(a.mimeType),a.crossDomain||c["X-Requested-With"]||(c["X-Requested-With"]="XMLHttpRequest");for(e in c)void 0!==c[e]&&f.setRequestHeader(e,c[e]+"");f.send(a.hasContent&&a.data||null),b=function(c,e){var h,i,j;if(b&&(e||4===f.readyState))if(delete Xc[g],b=void 0,f.onreadystatechange=m.noop,e)4!==f.readyState&&f.abort();else{j={},h=f.status,"string"==typeof f.responseText&&(j.text=f.responseText);try{i=f.statusText}catch(k){i=""}h||!a.isLocal||a.crossDomain?1223===h&&(h=204):h=j.text?200:404}j&&d(h,i,j,f.getAllResponseHeaders())},a.async?4===f.readyState?setTimeout(b):f.onreadystatechange=Xc[g]=b:b()},abort:function(){b&&b(void 0,!0)}}}});function Zc(){try{return new a.XMLHttpRequest}catch(b){}}function $c(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}m.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(a){return m.globalEval(a),a}}}),m.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),m.ajaxTransport("script",function(a){if(a.crossDomain){var b,c=y.head||m("head")[0]||y.documentElement;return{send:function(d,e){b=y.createElement("script"),b.async=!0,a.scriptCharset&&(b.charset=a.scriptCharset),b.src=a.url,b.onload=b.onreadystatechange=function(a,c){(c||!b.readyState||/loaded|complete/.test(b.readyState))&&(b.onload=b.onreadystatechange=null,b.parentNode&&b.parentNode.removeChild(b),b=null,c||e(200,"success"))},c.insertBefore(b,c.firstChild)},abort:function(){b&&b.onload(void 0,!0)}}}});var _c=[],ad=/(=)\?(?=&|$)|\?\?/;m.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=_c.pop()||m.expando+"_"+vc++;return this[a]=!0,a}}),m.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(ad.test(b.url)?"url":"string"==typeof b.data&&!(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&ad.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=m.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(ad,"$1"+e):b.jsonp!==!1&&(b.url+=(wc.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||m.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,_c.push(e)),g&&m.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),m.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||y;var d=u.exec(a),e=!c&&[];return d?[b.createElement(d[1])]:(d=m.buildFragment([a],b,e),e&&e.length&&m(e).remove(),m.merge([],d.childNodes))};var bd=m.fn.load;m.fn.load=function(a,b,c){if("string"!=typeof a&&bd)return bd.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>=0&&(d=m.trim(a.slice(h,a.length)),a=a.slice(0,h)),m.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(f="POST"),g.length>0&&m.ajax({url:a,type:f,dataType:"html",data:b}).done(function(a){e=arguments,g.html(d?m("<div>").append(m.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},m.expr.filters.animated=function(a){return m.grep(m.timers,function(b){return a===b.elem}).length};var cd=a.document.documentElement;function dd(a){return m.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}m.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=m.css(a,"position"),l=m(a),n={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=m.css(a,"top"),i=m.css(a,"left"),j=("absolute"===k||"fixed"===k)&&m.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),m.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(n.top=b.top-h.top+g),null!=b.left&&(n.left=b.left-h.left+e),"using"in b?b.using.call(a,n):l.css(n)}},m.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){m.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,m.contains(b,e)?(typeof e.getBoundingClientRect!==K&&(d=e.getBoundingClientRect()),c=dd(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===m.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),m.nodeName(a[0],"html")||(c=a.offset()),c.top+=m.css(a[0],"borderTopWidth",!0),c.left+=m.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-m.css(d,"marginTop",!0),left:b.left-c.left-m.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||cd;while(a&&!m.nodeName(a,"html")&&"static"===m.css(a,"position"))a=a.offsetParent;return a||cd})}}),m.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);m.fn[a]=function(d){return V(this,function(a,d,e){var f=dd(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?m(f).scrollLeft():e,c?e:m(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),m.each(["top","left"],function(a,b){m.cssHooks[b]=Lb(k.pixelPosition,function(a,c){return c?(c=Jb(a,b),Hb.test(c)?m(a).position()[b]+"px":c):void 0})}),m.each({Height:"height",Width:"width"},function(a,b){m.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){m.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return V(this,function(b,c,d){var e;return m.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?m.css(b,c,g):m.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),m.fn.size=function(){return this.length},m.fn.andSelf=m.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return m});var ed=a.jQuery,fd=a.$;return m.noConflict=function(b){return a.$===m&&(a.$=fd),b&&a.jQuery===m&&(a.jQuery=ed),m},typeof b===K&&(a.jQuery=a.$=m),m});
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.2_min.js b/devtools/client/inspector/markup/test/lib_jquery_1.2_min.js
new file mode 100644
index 0000000000..f10d4943f1
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.2_min.js
@@ -0,0 +1,32 @@
+/*
+ * jQuery 1.2 - New Wave Javascript
+ *
+ * Copyright (c) 2007 John Resig (jquery.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2007-09-10 15:45:49 -0400 (Mon, 10 Sep 2007) $
+ * $Rev: 3219 $
+ */
+(function(){if(typeof jQuery!="undefined")var _jQuery=jQuery;var jQuery=window.jQuery=function(a,c){if(window==this||!this.init)return new jQuery(a,c);return this.init(a,c);};if(typeof $!="undefined")var _$=$;window.$=jQuery;var quickExpr=/^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;jQuery.fn=jQuery.prototype={init:function(a,c){a=a||document;if(typeof a=="string"){var m=quickExpr.exec(a);if(m&&(m[1]||!c)){if(m[1])a=jQuery.clean([m[1]],c);else{var tmp=document.getElementById(m[3]);if(tmp)if(tmp.id!=m[3])return jQuery().find(a);else{this[0]=tmp;this.length=1;return this;}else
+a=[];}}else
+return new jQuery(c).find(a);}else if(jQuery.isFunction(a))return new jQuery(document)[jQuery.fn.ready?"ready":"load"](a);return this.setArray(a.constructor==Array&&a||(a.jquery||a.length&&a!=window&&!a.nodeType&&a[0]!=undefined&&a[0].nodeType)&&jQuery.makeArray(a)||[a]);},jquery:"1.2",size:function(){return this.length;},length:0,get:function(num){return num==undefined?jQuery.makeArray(this):this[num];},pushStack:function(a){var ret=jQuery(a);ret.prevObject=this;return ret;},setArray:function(a){this.length=0;Array.prototype.push.apply(this,a);return this;},each:function(fn,args){return jQuery.each(this,fn,args);},index:function(obj){var pos=-1;this.each(function(i){if(this==obj)pos=i;});return pos;},attr:function(key,value,type){var obj=key;if(key.constructor==String)if(value==undefined)return this.length&&jQuery[type||"attr"](this[0],key)||undefined;else{obj={};obj[key]=value;}return this.each(function(index){for(var prop in obj)jQuery.attr(type?this.style:this,prop,jQuery.prop(this,obj[prop],type,index,prop));});},css:function(key,value){return this.attr(key,value,"curCSS");},text:function(e){if(typeof e!="object"&&e!=null)return this.empty().append(document.createTextNode(e));var t="";jQuery.each(e||this,function(){jQuery.each(this.childNodes,function(){if(this.nodeType!=8)t+=this.nodeType!=1?this.nodeValue:jQuery.fn.text([this]);});});return t;},wrapAll:function(html){if(this[0])jQuery(html,this[0].ownerDocument).clone().insertBefore(this[0]).map(function(){var elem=this;while(elem.firstChild)elem=elem.firstChild;return elem;}).append(this);return this;},wrapInner:function(html){return this.each(function(){jQuery(this).contents().wrapAll(html);});},wrap:function(html){return this.each(function(){jQuery(this).wrapAll(html);});},append:function(){return this.domManip(arguments,true,1,function(a){this.appendChild(a);});},prepend:function(){return this.domManip(arguments,true,-1,function(a){this.insertBefore(a,this.firstChild);});},before:function(){return this.domManip(arguments,false,1,function(a){this.parentNode.insertBefore(a,this);});},after:function(){return this.domManip(arguments,false,-1,function(a){this.parentNode.insertBefore(a,this.nextSibling);});},end:function(){return this.prevObject||jQuery([]);},find:function(t){var data=jQuery.map(this,function(a){return jQuery.find(t,a);});return this.pushStack(/[^+>] [^+>]/.test(t)||t.indexOf("..")>-1?jQuery.unique(data):data);},clone:function(events){var ret=this.map(function(){return this.outerHTML?jQuery(this.outerHTML)[0]:this.cloneNode(true);});if(events===true){var clone=ret.find("*").andSelf();this.find("*").andSelf().each(function(i){var events=jQuery.data(this,"events");for(var type in events)for(var handler in events[type])jQuery.event.add(clone[i],type,events[type][handler],events[type][handler].data);});}return ret;},filter:function(t){return this.pushStack(jQuery.isFunction(t)&&jQuery.grep(this,function(el,index){return t.apply(el,[index]);})||jQuery.multiFilter(t,this));},not:function(t){return this.pushStack(t.constructor==String&&jQuery.multiFilter(t,this,true)||jQuery.grep(this,function(a){return(t.constructor==Array||t.jquery)?jQuery.inArray(a,t)<0:a!=t;}));},add:function(t){return this.pushStack(jQuery.merge(this.get(),t.constructor==String?jQuery(t).get():t.length!=undefined&&(!t.nodeName||t.nodeName=="FORM")?t:[t]));},is:function(expr){return expr?jQuery.multiFilter(expr,this).length>0:false;},hasClass:function(expr){return this.is("."+expr);},val:function(val){if(val==undefined){if(this.length){var elem=this[0];if(jQuery.nodeName(elem,"select")){var index=elem.selectedIndex,a=[],options=elem.options,one=elem.type=="select-one";if(index<0)return null;for(var i=one?index:0,max=one?index+1:options.length;i<max;i++){var option=options[i];if(option.selected){var val=jQuery.browser.msie&&!option.attributes["value"].specified?option.text:option.value;if(one)return val;a.push(val);}}return a;}else
+return this[0].value.replace(/\r/g,"");}}else
+return this.each(function(){if(val.constructor==Array&&/radio|checkbox/.test(this.type))this.checked=(jQuery.inArray(this.value,val)>=0||jQuery.inArray(this.name,val)>=0);else if(jQuery.nodeName(this,"select")){var tmp=val.constructor==Array?val:[val];jQuery("option",this).each(function(){this.selected=(jQuery.inArray(this.value,tmp)>=0||jQuery.inArray(this.text,tmp)>=0);});if(!tmp.length)this.selectedIndex=-1;}else
+this.value=val;});},html:function(val){return val==undefined?(this.length?this[0].innerHTML:null):this.empty().append(val);},replaceWith:function(val){return this.after(val).remove();},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments));},map:function(fn){return this.pushStack(jQuery.map(this,function(elem,i){return fn.call(elem,i,elem);}));},andSelf:function(){return this.add(this.prevObject);},domManip:function(args,table,dir,fn){var clone=this.length>1,a;return this.each(function(){if(!a){a=jQuery.clean(args,this.ownerDocument);if(dir<0)a.reverse();}var obj=this;if(table&&jQuery.nodeName(this,"table")&&jQuery.nodeName(a[0],"tr"))obj=this.getElementsByTagName("tbody")[0]||this.appendChild(document.createElement("tbody"));jQuery.each(a,function(){if(jQuery.nodeName(this,"script")){if(this.src)jQuery.ajax({url:this.src,async:false,dataType:"script"});else
+jQuery.globalEval(this.text||this.textContent||this.innerHTML||"");}else
+fn.apply(obj,[clone?this.cloneNode(true):this]);});});}};jQuery.extend=jQuery.fn.extend=function(){var target=arguments[0]||{},a=1,al=arguments.length,deep=false;if(target.constructor==Boolean){deep=target;target=arguments[1]||{};}if(al==1){target=this;a=0;}var prop;for(;a<al;a++)if((prop=arguments[a])!=null)for(var i in prop){if(target==prop[i])continue;if(deep&&typeof prop[i]=='object'&&target[i])jQuery.extend(target[i],prop[i]);else if(prop[i]!=undefined)target[i]=prop[i];}return target;};var expando="jQuery"+(new Date()).getTime(),uuid=0,win={};jQuery.extend({noConflict:function(deep){window.$=_$;if(deep)window.jQuery=_jQuery;return jQuery;},isFunction:function(fn){return!!fn&&typeof fn!="string"&&!fn.nodeName&&fn.constructor!=Array&&/function/i.test(fn+"");},isXMLDoc:function(elem){return elem.documentElement&&!elem.body||elem.tagName&&elem.ownerDocument&&!elem.ownerDocument.body;},globalEval:function(data){data=jQuery.trim(data);if(data){if(window.execScript)window.execScript(data);else if(jQuery.browser.safari)window.setTimeout(data,0);else
+eval.call(window,data);}},nodeName:function(elem,name){return elem.nodeName&&elem.nodeName.toUpperCase()==name.toUpperCase();},cache:{},data:function(elem,name,data){elem=elem==window?win:elem;var id=elem[expando];if(!id)id=elem[expando]=++uuid;if(name&&!jQuery.cache[id])jQuery.cache[id]={};if(data!=undefined)jQuery.cache[id][name]=data;return name?jQuery.cache[id][name]:id;},removeData:function(elem,name){elem=elem==window?win:elem;var id=elem[expando];if(name){if(jQuery.cache[id]){delete jQuery.cache[id][name];name="";for(name in jQuery.cache[id])break;if(!name)jQuery.removeData(elem);}}else{try{delete elem[expando];}catch(e){if(elem.removeAttribute)elem.removeAttribute(expando);}delete jQuery.cache[id];}},each:function(obj,fn,args){if(args){if(obj.length==undefined)for(var i in obj)fn.apply(obj[i],args);else
+for(var i=0,ol=obj.length;i<ol;i++)if(fn.apply(obj[i],args)===false)break;}else{if(obj.length==undefined)for(var i in obj)fn.call(obj[i],i,obj[i]);else
+for(var i=0,ol=obj.length,val=obj[0];i<ol&&fn.call(val,i,val)!==false;val=obj[++i]){}}return obj;},prop:function(elem,value,type,index,prop){if(jQuery.isFunction(value))value=value.call(elem,[index]);var exclude=/z-?index|font-?weight|opacity|zoom|line-?height/i;return value&&value.constructor==Number&&type=="curCSS"&&!exclude.test(prop)?value+"px":value;},className:{add:function(elem,c){jQuery.each((c||"").split(/\s+/),function(i,cur){if(!jQuery.className.has(elem.className,cur))elem.className+=(elem.className?" ":"")+cur;});},remove:function(elem,c){elem.className=c!=undefined?jQuery.grep(elem.className.split(/\s+/),function(cur){return!jQuery.className.has(c,cur);}).join(" "):"";},has:function(t,c){return jQuery.inArray(c,(t.className||t).toString().split(/\s+/))>-1;}},swap:function(e,o,f){for(var i in o){e.style["old"+i]=e.style[i];e.style[i]=o[i];}f.apply(e,[]);for(var i in o)e.style[i]=e.style["old"+i];},css:function(e,p){if(p=="height"||p=="width"){var old={},oHeight,oWidth,d=["Top","Bottom","Right","Left"];jQuery.each(d,function(){old["padding"+this]=0;old["border"+this+"Width"]=0;});jQuery.swap(e,old,function(){if(jQuery(e).is(':visible')){oHeight=e.offsetHeight;oWidth=e.offsetWidth;}else{e=jQuery(e.cloneNode(true)).find(":radio").removeAttr("checked").end().css({visibility:"hidden",position:"absolute",display:"block",right:"0",left:"0"}).appendTo(e.parentNode)[0];var parPos=jQuery.css(e.parentNode,"position")||"static";if(parPos=="static")e.parentNode.style.position="relative";oHeight=e.clientHeight;oWidth=e.clientWidth;if(parPos=="static")e.parentNode.style.position="static";e.parentNode.removeChild(e);}});return p=="height"?oHeight:oWidth;}return jQuery.curCSS(e,p);},curCSS:function(elem,prop,force){var ret,stack=[],swap=[];function color(a){if(!jQuery.browser.safari)return false;var ret=document.defaultView.getComputedStyle(a,null);return!ret||ret.getPropertyValue("color")=="";}if(prop=="opacity"&&jQuery.browser.msie){ret=jQuery.attr(elem.style,"opacity");return ret==""?"1":ret;}if(prop.match(/float/i))prop=styleFloat;if(!force&&elem.style[prop])ret=elem.style[prop];else if(document.defaultView&&document.defaultView.getComputedStyle){if(prop.match(/float/i))prop="float";prop=prop.replace(/([A-Z])/g,"-$1").toLowerCase();var cur=document.defaultView.getComputedStyle(elem,null);if(cur&&!color(elem))ret=cur.getPropertyValue(prop);else{for(var a=elem;a&&color(a);a=a.parentNode)stack.unshift(a);for(a=0;a<stack.length;a++)if(color(stack[a])){swap[a]=stack[a].style.display;stack[a].style.display="block";}ret=prop=="display"&&swap[stack.length-1]!=null?"none":document.defaultView.getComputedStyle(elem,null).getPropertyValue(prop)||"";for(a=0;a<swap.length;a++)if(swap[a]!=null)stack[a].style.display=swap[a];}if(prop=="opacity"&&ret=="")ret="1";}else if(elem.currentStyle){var newProp=prop.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});ret=elem.currentStyle[prop]||elem.currentStyle[newProp];if(!/^\d+(px)?$/i.test(ret)&&/^\d/.test(ret)){var style=elem.style.left;var runtimeStyle=elem.runtimeStyle.left;elem.runtimeStyle.left=elem.currentStyle.left;elem.style.left=ret||0;ret=elem.style.pixelLeft+"px";elem.style.left=style;elem.runtimeStyle.left=runtimeStyle;}}return ret;},clean:function(a,doc){var r=[];doc=doc||document;jQuery.each(a,function(i,arg){if(!arg)return;if(arg.constructor==Number)arg=arg.toString();if(typeof arg=="string"){arg=arg.replace(/(<(\w+)[^>]*?)\/>/g,function(m,all,tag){return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area)$/i)?m:all+"></"+tag+">";});var s=jQuery.trim(arg).toLowerCase(),div=doc.createElement("div"),tb=[];var wrap=!s.indexOf("<opt")&&[1,"<select>","</select>"]||!s.indexOf("<leg")&&[1,"<fieldset>","</fieldset>"]||s.match(/^<(thead|tbody|tfoot|colg|cap)/)&&[1,"<table>","</table>"]||!s.indexOf("<tr")&&[2,"<table><tbody>","</tbody></table>"]||(!s.indexOf("<td")||!s.indexOf("<th"))&&[3,"<table><tbody><tr>","</tr></tbody></table>"]||!s.indexOf("<col")&&[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"]||jQuery.browser.msie&&[1,"div<div>","</div>"]||[0,"",""];div.innerHTML=wrap[1]+arg+wrap[2];while(wrap[0]--)div=div.lastChild;if(jQuery.browser.msie){if(!s.indexOf("<table")&&s.indexOf("<tbody")<0)tb=div.firstChild&&div.firstChild.childNodes;else if(wrap[1]=="<table>"&&s.indexOf("<tbody")<0)tb=div.childNodes;for(var n=tb.length-1;n>=0;--n)if(jQuery.nodeName(tb[n],"tbody")&&!tb[n].childNodes.length)tb[n].parentNode.removeChild(tb[n]);if(/^\s/.test(arg))div.insertBefore(doc.createTextNode(arg.match(/^\s*/)[0]),div.firstChild);}arg=jQuery.makeArray(div.childNodes);}if(0===arg.length&&(!jQuery.nodeName(arg,"form")&&!jQuery.nodeName(arg,"select")))return;if(arg[0]==undefined||jQuery.nodeName(arg,"form")||arg.options)r.push(arg);else
+r=jQuery.merge(r,arg);});return r;},attr:function(elem,name,value){var fix=jQuery.isXMLDoc(elem)?{}:jQuery.props;if(name=="selected"&&jQuery.browser.safari)elem.parentNode.selectedIndex;if(fix[name]){if(value!=undefined)elem[fix[name]]=value;return elem[fix[name]];}else if(jQuery.browser.msie&&name=="style")return jQuery.attr(elem.style,"cssText",value);else if(value==undefined&&jQuery.browser.msie&&jQuery.nodeName(elem,"form")&&(name=="action"||name=="method"))return elem.getAttributeNode(name).nodeValue;else if(elem.tagName){if(value!=undefined){if(name=="type"&&jQuery.nodeName(elem,"input")&&elem.parentNode)throw"type property can't be changed";elem.setAttribute(name,value);}if(jQuery.browser.msie&&/href|src/.test(name)&&!jQuery.isXMLDoc(elem))return elem.getAttribute(name,2);return elem.getAttribute(name);}else{if(name=="opacity"&&jQuery.browser.msie){if(value!=undefined){elem.zoom=1;elem.filter=(elem.filter||"").replace(/alpha\([^)]*\)/,"")+(parseFloat(value).toString()=="NaN"?"":"alpha(opacity="+value*100+")");}return elem.filter?(parseFloat(elem.filter.match(/opacity=([^)]*)/)[1])/100).toString():"";}name=name.replace(/-([a-z])/ig,function(z,b){return b.toUpperCase();});if(value!=undefined)elem[name]=value;return elem[name];}},trim:function(t){return(t||"").replace(/^\s+|\s+$/g,"");},makeArray:function(a){var r=[];if(typeof a!="array")for(var i=0,al=a.length;i<al;i++)r.push(a[i]);else
+r=a.slice(0);return r;},inArray:function(b,a){for(var i=0,al=a.length;i<al;i++)if(a[i]==b)return i;return-1;},merge:function(first,second){if(jQuery.browser.msie){for(var i=0;second[i];i++)if(second[i].nodeType!=8)first.push(second[i]);}else
+for(var i=0;second[i];i++)first.push(second[i]);return first;},unique:function(first){var r=[],done={};try{for(var i=0,fl=first.length;i<fl;i++){var id=jQuery.data(first[i]);if(!done[id]){done[id]=true;r.push(first[i]);}}}catch(e){r=first;}return r;},grep:function(elems,fn,inv){if(typeof fn=="string")fn=eval("false||function(a,i){return "+fn+"}");var result=[];for(var i=0,el=elems.length;i<el;i++)if(!inv&&fn(elems[i],i)||inv&&!fn(elems[i],i))result.push(elems[i]);return result;},map:function(elems,fn){if(typeof fn=="string")fn=eval("false||function(a){return "+fn+"}");var result=[];for(var i=0,el=elems.length;i<el;i++){var val=fn(elems[i],i);if(val!==null&&val!=undefined){if(val.constructor!=Array)val=[val];result=result.concat(val);}}return result;}});var userAgent=navigator.userAgent.toLowerCase();jQuery.browser={version:(userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[])[1],safari:/webkit/.test(userAgent),opera:/opera/.test(userAgent),msie:/msie/.test(userAgent)&&!/opera/.test(userAgent),mozilla:/mozilla/.test(userAgent)&&!/(compatible|webkit)/.test(userAgent)};var styleFloat=jQuery.browser.msie?"styleFloat":"cssFloat";jQuery.extend({boxModel:!jQuery.browser.msie||document.compatMode=="CSS1Compat",styleFloat:jQuery.browser.msie?"styleFloat":"cssFloat",props:{"for":"htmlFor","class":"className","float":styleFloat,cssFloat:styleFloat,styleFloat:styleFloat,innerHTML:"innerHTML",className:"className",value:"value",disabled:"disabled",checked:"checked",readonly:"readOnly",selected:"selected",maxlength:"maxLength"}});jQuery.each({parent:"a.parentNode",parents:"jQuery.dir(a,'parentNode')",next:"jQuery.nth(a,2,'nextSibling')",prev:"jQuery.nth(a,2,'previousSibling')",nextAll:"jQuery.dir(a,'nextSibling')",prevAll:"jQuery.dir(a,'previousSibling')",siblings:"jQuery.sibling(a.parentNode.firstChild,a)",children:"jQuery.sibling(a.firstChild)",contents:"jQuery.nodeName(a,'iframe')?a.contentDocument||a.contentWindow.document:jQuery.makeArray(a.childNodes)"},function(i,n){jQuery.fn[i]=function(a){var ret=jQuery.map(this,n);if(a&&typeof a=="string")ret=jQuery.multiFilter(a,ret);return this.pushStack(jQuery.unique(ret));};});jQuery.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(i,n){jQuery.fn[i]=function(){var a=arguments;return this.each(function(){for(var j=0,al=a.length;j<al;j++)jQuery(a[j])[n](this);});};});jQuery.each({removeAttr:function(key){jQuery.attr(this,key,"");this.removeAttribute(key);},addClass:function(c){jQuery.className.add(this,c);},removeClass:function(c){jQuery.className.remove(this,c);},toggleClass:function(c){jQuery.className[jQuery.className.has(this,c)?"remove":"add"](this,c);},remove:function(a){if(!a||jQuery.filter(a,[this]).r.length){jQuery.removeData(this);this.parentNode.removeChild(this);}},empty:function(){jQuery("*",this).each(function(){jQuery.removeData(this);});while(this.firstChild)this.removeChild(this.firstChild);}},function(i,n){jQuery.fn[i]=function(){return this.each(n,arguments);};});jQuery.each(["Height","Width"],function(i,name){var n=name.toLowerCase();jQuery.fn[n]=function(h){return this[0]==window?jQuery.browser.safari&&self["inner"+name]||jQuery.boxModel&&Math.max(document.documentElement["client"+name],document.body["client"+name])||document.body["client"+name]:this[0]==document?Math.max(document.body["scroll"+name],document.body["offset"+name]):h==undefined?(this.length?jQuery.css(this[0],n):null):this.css(n,h.constructor==String?h:h+"px");};});var chars=jQuery.browser.safari&&parseInt(jQuery.browser.version)<417?"(?:[\\w*_-]|\\\\.)":"(?:[\\w\u0128-\uFFFF*_-]|\\\\.)",quickChild=new RegExp("^>\\s*("+chars+"+)"),quickID=new RegExp("^("+chars+"+)(#)("+chars+"+)"),quickClass=new RegExp("^([#.]?)("+chars+"*)");jQuery.extend({expr:{"":"m[2]=='*'||jQuery.nodeName(a,m[2])","#":"a.getAttribute('id')==m[2]",":":{lt:"i<m[3]-0",gt:"i>m[3]-0",nth:"m[3]-0==i",eq:"m[3]-0==i",first:"i==0",last:"i==r.length-1",even:"i%2==0",odd:"i%2","first-child":"a.parentNode.getElementsByTagName('*')[0]==a","last-child":"jQuery.nth(a.parentNode.lastChild,1,'previousSibling')==a","only-child":"!jQuery.nth(a.parentNode.lastChild,2,'previousSibling')",parent:"a.firstChild",empty:"!a.firstChild",contains:"(a.textContent||a.innerText||'').indexOf(m[3])>=0",visible:'"hidden"!=a.type&&jQuery.css(a,"display")!="none"&&jQuery.css(a,"visibility")!="hidden"',hidden:'"hidden"==a.type||jQuery.css(a,"display")=="none"||jQuery.css(a,"visibility")=="hidden"',enabled:"!a.disabled",disabled:"a.disabled",checked:"a.checked",selected:"a.selected||jQuery.attr(a,'selected')",text:"'text'==a.type",radio:"'radio'==a.type",checkbox:"'checkbox'==a.type",file:"'file'==a.type",password:"'password'==a.type",submit:"'submit'==a.type",image:"'image'==a.type",reset:"'reset'==a.type",button:'"button"==a.type||jQuery.nodeName(a,"button")',input:"/input|select|textarea|button/i.test(a.nodeName)",has:"jQuery.find(m[3],a).length",header:"/h\\d/i.test(a.nodeName)",animated:"jQuery.grep(jQuery.timers,function(fn){return a==fn.elem;}).length"}},parse:[/^(\[) *@?([\w-]+) *([!*$^~=]*) *('?"?)(.*?)\4 *\]/,/^(:)([\w-]+)\("?'?(.*?(\(.*?\))?[^(]*?)"?'?\)/,new RegExp("^([:.#]*)("+chars+"+)")],multiFilter:function(expr,elems,not){var old,cur=[];while(expr&&expr!=old){old=expr;var f=jQuery.filter(expr,elems,not);expr=f.t.replace(/^\s*,\s*/,"");cur=not?elems=f.r:jQuery.merge(cur,f.r);}return cur;},find:function(t,context){if(typeof t!="string")return[t];if(context&&!context.nodeType)context=null;context=context||document;var ret=[context],done=[],last;while(t&&last!=t){var r=[];last=t;t=jQuery.trim(t);var foundToken=false;var re=quickChild;var m=re.exec(t);if(m){var nodeName=m[1].toUpperCase();for(var i=0;ret[i];i++)for(var c=ret[i].firstChild;c;c=c.nextSibling)if(c.nodeType==1&&(nodeName=="*"||c.nodeName.toUpperCase()==nodeName.toUpperCase()))r.push(c);ret=r;t=t.replace(re,"");if(t.indexOf(" ")==0)continue;foundToken=true;}else{re=/^([>+~])\s*(\w*)/i;if((m=re.exec(t))!=null){r=[];var nodeName=m[2],merge={};m=m[1];for(var j=0,rl=ret.length;j<rl;j++){var n=m=="~"||m=="+"?ret[j].nextSibling:ret[j].firstChild;for(;n;n=n.nextSibling)if(n.nodeType==1){var id=jQuery.data(n);if(m=="~"&&merge[id])break;if(!nodeName||n.nodeName.toUpperCase()==nodeName.toUpperCase()){if(m=="~")merge[id]=true;r.push(n);}if(m=="+")break;}}ret=r;t=jQuery.trim(t.replace(re,""));foundToken=true;}}if(t&&!foundToken){if(!t.indexOf(",")){if(context==ret[0])ret.shift();done=jQuery.merge(done,ret);r=ret=[context];t=" "+t.substr(1,t.length);}else{var re2=quickID;var m=re2.exec(t);if(m){m=[0,m[2],m[3],m[1]];}else{re2=quickClass;m=re2.exec(t);}m[2]=m[2].replace(/\\/g,"");var elem=ret[ret.length-1];if(m[1]=="#"&&elem&&elem.getElementById&&!jQuery.isXMLDoc(elem)){var oid=elem.getElementById(m[2]);if((jQuery.browser.msie||jQuery.browser.opera)&&oid&&typeof oid.id=="string"&&oid.id!=m[2])oid=jQuery('[@id="'+m[2]+'"]',elem)[0];ret=r=oid&&(!m[3]||jQuery.nodeName(oid,m[3]))?[oid]:[];}else{for(var i=0;ret[i];i++){var tag=m[1]=="#"&&m[3]?m[3]:m[1]!=""||m[0]==""?"*":m[2];if(tag=="*"&&ret[i].nodeName.toLowerCase()=="object")tag="param";r=jQuery.merge(r,ret[i].getElementsByTagName(tag));}if(m[1]==".")r=jQuery.classFilter(r,m[2]);if(m[1]=="#"){var tmp=[];for(var i=0;r[i];i++)if(r[i].getAttribute("id")==m[2]){tmp=[r[i]];break;}r=tmp;}ret=r;}t=t.replace(re2,"");}}if(t){var val=jQuery.filter(t,r);ret=r=val.r;t=jQuery.trim(val.t);}}if(t)ret=[];if(ret&&context==ret[0])ret.shift();done=jQuery.merge(done,ret);return done;},classFilter:function(r,m,not){m=" "+m+" ";var tmp=[];for(var i=0;r[i];i++){var pass=(" "+r[i].className+" ").indexOf(m)>=0;if(!not&&pass||not&&!pass)tmp.push(r[i]);}return tmp;},filter:function(t,r,not){var last;while(t&&t!=last){last=t;var p=jQuery.parse,m;for(var i=0;p[i];i++){m=p[i].exec(t);if(m){t=t.substring(m[0].length);m[2]=m[2].replace(/\\/g,"");break;}}if(!m)break;if(m[1]==":"&&m[2]=="not")r=jQuery.filter(m[3],r,true).r;else if(m[1]==".")r=jQuery.classFilter(r,m[2],not);else if(m[1]=="["){var tmp=[],type=m[3];for(var i=0,rl=r.length;i<rl;i++){var a=r[i],z=a[jQuery.props[m[2]]||m[2]];if(z==null||/href|src|selected/.test(m[2]))z=jQuery.attr(a,m[2])||'';if((type==""&&!!z||type=="="&&z==m[5]||type=="!="&&z!=m[5]||type=="^="&&z&&!z.indexOf(m[5])||type=="$="&&z.substr(z.length-m[5].length)==m[5]||(type=="*="||type=="~=")&&z.indexOf(m[5])>=0)^not)tmp.push(a);}r=tmp;}else if(m[1]==":"&&m[2]=="nth-child"){var merge={},tmp=[],test=/(\d*)n\+?(\d*)/.exec(m[3]=="even"&&"2n"||m[3]=="odd"&&"2n+1"||!/\D/.test(m[3])&&"n+"+m[3]||m[3]),first=(test[1]||1)-0,last=test[2]-0;for(var i=0,rl=r.length;i<rl;i++){var node=r[i],parentNode=node.parentNode,id=jQuery.data(parentNode);if(!merge[id]){var c=1;for(var n=parentNode.firstChild;n;n=n.nextSibling)if(n.nodeType==1)n.nodeIndex=c++;merge[id]=true;}var add=false;if(first==1){if(last==0||node.nodeIndex==last)add=true;}else if((node.nodeIndex+last)%first==0)add=true;if(add^not)tmp.push(node);}r=tmp;}else{var f=jQuery.expr[m[1]];if(typeof f!="string")f=jQuery.expr[m[1]][m[2]];f=eval("false||function(a,i){return "+f+"}");r=jQuery.grep(r,f,not);}}return{r:r,t:t};},dir:function(elem,dir){var matched=[];var cur=elem[dir];while(cur&&cur!=document){if(cur.nodeType==1)matched.push(cur);cur=cur[dir];}return matched;},nth:function(cur,result,dir,elem){result=result||1;var num=0;for(;cur;cur=cur[dir])if(cur.nodeType==1&&++num==result)break;return cur;},sibling:function(n,elem){var r=[];for(;n;n=n.nextSibling){if(n.nodeType==1&&(!elem||n!=elem))r.push(n);}return r;}});jQuery.event={add:function(element,type,handler,data){if(jQuery.browser.msie&&element.setInterval!=undefined)element=window;if(!handler.guid)handler.guid=this.guid++;if(data!=undefined){var fn=handler;handler=function(){return fn.apply(this,arguments);};handler.data=data;handler.guid=fn.guid;}var parts=type.split(".");type=parts[0];handler.type=parts[1];var events=jQuery.data(element,"events")||jQuery.data(element,"events",{});var handle=jQuery.data(element,"handle",function(){var val;if(typeof jQuery=="undefined"||jQuery.event.triggered)return val;val=jQuery.event.handle.apply(element,arguments);return val;});var handlers=events[type];if(!handlers){handlers=events[type]={};if(element.addEventListener)element.addEventListener(type,handle,false);else
+element.attachEvent("on"+type,handle);}handlers[handler.guid]=handler;this.global[type]=true;},guid:1,global:{},remove:function(element,type,handler){var events=jQuery.data(element,"events"),ret,index;if(typeof type=="string"){var parts=type.split(".");type=parts[0];}if(events){if(type&&type.type){handler=type.handler;type=type.type;}if(!type){for(type in events)this.remove(element,type);}else if(events[type]){if(handler)delete events[type][handler.guid];else
+for(handler in events[type])if(!parts[1]||events[type][handler].type==parts[1])delete events[type][handler];for(ret in events[type])break;if(!ret){if(element.removeEventListener)element.removeEventListener(type,jQuery.data(element,"handle"),false);else
+element.detachEvent("on"+type,jQuery.data(element,"handle"));ret=null;delete events[type];}}for(ret in events)break;if(!ret){jQuery.removeData(element,"events");jQuery.removeData(element,"handle");}}},trigger:function(type,data,element,donative,extra){data=jQuery.makeArray(data||[]);if(!element){if(this.global[type])jQuery("*").add([window,document]).trigger(type,data);}else{var val,ret,fn=jQuery.isFunction(element[type]||null),evt=!data[0]||!data[0].preventDefault;if(evt)data.unshift(this.fix({type:type,target:element}));if(jQuery.isFunction(jQuery.data(element,"handle")))val=jQuery.data(element,"handle").apply(element,data);if(!fn&&element["on"+type]&&element["on"+type].apply(element,data)===false)val=false;if(evt)data.shift();if(extra&&extra.apply(element,data)===false)val=false;if(fn&&donative!==false&&val!==false&&!(jQuery.nodeName(element,'a')&&type=="click")){this.triggered=true;element[type]();}this.triggered=false;}return val;},handle:function(event){var val;event=jQuery.event.fix(event||window.event||{});var parts=event.type.split(".");event.type=parts[0];var c=jQuery.data(this,"events")&&jQuery.data(this,"events")[event.type],args=Array.prototype.slice.call(arguments,1);args.unshift(event);for(var j in c){args[0].handler=c[j];args[0].data=c[j].data;if(!parts[1]||c[j].type==parts[1]){var tmp=c[j].apply(this,args);if(val!==false)val=tmp;if(tmp===false){event.preventDefault();event.stopPropagation();}}}if(jQuery.browser.msie)event.target=event.preventDefault=event.stopPropagation=event.handler=event.data=null;return val;},fix:function(event){var originalEvent=event;event=jQuery.extend({},originalEvent);event.preventDefault=function(){if(originalEvent.preventDefault)originalEvent.preventDefault();originalEvent.returnValue=false;};event.stopPropagation=function(){if(originalEvent.stopPropagation)originalEvent.stopPropagation();originalEvent.cancelBubble=true;};if(!event.target&&event.srcElement)event.target=event.srcElement;if(jQuery.browser.safari&&event.target.nodeType==3)event.target=originalEvent.target.parentNode;if(!event.relatedTarget&&event.fromElement)event.relatedTarget=event.fromElement==event.target?event.toElement:event.fromElement;if(event.pageX==null&&event.clientX!=null){var e=document.documentElement,b=document.body;event.pageX=event.clientX+(e&&e.scrollLeft||b.scrollLeft||0);event.pageY=event.clientY+(e&&e.scrollTop||b.scrollTop||0);}if(!event.which&&(event.charCode||event.keyCode))event.which=event.charCode||event.keyCode;if(!event.metaKey&&event.ctrlKey)event.metaKey=event.ctrlKey;if(!event.which&&event.button)event.which=(event.button&1?1:(event.button&2?3:(event.button&4?2:0)));return event;}};jQuery.fn.extend({bind:function(type,data,fn){return type=="unload"?this.one(type,data,fn):this.each(function(){jQuery.event.add(this,type,fn||data,fn&&data);});},one:function(type,data,fn){return this.each(function(){jQuery.event.add(this,type,function(event){jQuery(this).unbind(event);return(fn||data).apply(this,arguments);},fn&&data);});},unbind:function(type,fn){return this.each(function(){jQuery.event.remove(this,type,fn);});},trigger:function(type,data,fn){return this.each(function(){jQuery.event.trigger(type,data,this,true,fn);});},triggerHandler:function(type,data,fn){if(this[0])return jQuery.event.trigger(type,data,this[0],false,fn);},toggle:function(){var a=arguments;return this.click(function(e){this.lastToggle=0==this.lastToggle?1:0;e.preventDefault();return a[this.lastToggle].apply(this,[e])||false;});},hover:function(f,g){function handleHover(e){var p=e.relatedTarget;while(p&&p!=this)try{p=p.parentNode;}catch(e){p=this;};if(p==this)return false;return(e.type=="mouseover"?f:g).apply(this,[e]);}return this.mouseover(handleHover).mouseout(handleHover);},ready:function(f){bindReady();if(jQuery.isReady)f.apply(document,[jQuery]);else
+jQuery.readyList.push(function(){return f.apply(this,[jQuery]);});return this;}});jQuery.extend({isReady:false,readyList:[],ready:function(){if(!jQuery.isReady){jQuery.isReady=true;if(jQuery.readyList){jQuery.each(jQuery.readyList,function(){this.apply(document);});jQuery.readyList=null;}if(jQuery.browser.mozilla||jQuery.browser.opera)document.removeEventListener("DOMContentLoaded",jQuery.ready,false);if(!window.frames.length)jQuery(window).load(function(){jQuery("#__ie_init").remove();});}}});jQuery.each(("blur,focus,load,resize,scroll,unload,click,dblclick,"+"mousedown,mouseup,mousemove,mouseover,mouseout,change,select,"+"submit,keydown,keypress,keyup,error").split(","),function(i,o){jQuery.fn[o]=function(f){return f?this.bind(o,f):this.trigger(o);};});var readyBound=false;function bindReady(){if(readyBound)return;readyBound=true;if(jQuery.browser.mozilla||jQuery.browser.opera)document.addEventListener("DOMContentLoaded",jQuery.ready,false);else if(jQuery.browser.msie){document.write("<scr"+"ipt id=__ie_init defer=true "+"src=//:><\/script>");var script=document.getElementById("__ie_init");if(script)script.onreadystatechange=function(){if(this.readyState!="complete")return;jQuery.ready();};script=null;}else if(jQuery.browser.safari)jQuery.safariTimer=setInterval(function(){if(document.readyState=="loaded"||document.readyState=="complete"){clearInterval(jQuery.safariTimer);jQuery.safariTimer=null;jQuery.ready();}},10);jQuery.event.add(window,"load",jQuery.ready);}jQuery.fn.extend({load:function(url,params,callback){if(jQuery.isFunction(url))return this.bind("load",url);var off=url.indexOf(" ");if(off>=0){var selector=url.slice(off,url.length);url=url.slice(0,off);}callback=callback||function(){};var type="GET";if(params)if(jQuery.isFunction(params)){callback=params;params=null;}else{params=jQuery.param(params);type="POST";}var self=this;jQuery.ajax({url:url,type:type,data:params,complete:function(res,status){if(status=="success"||status=="notmodified")self.html(selector?jQuery("<div/>").append(res.responseText.replace(/<script(.|\s)*?\/script>/g,"")).find(selector):res.responseText);setTimeout(function(){self.each(callback,[res.responseText,status,res]);},13);}});return this;},serialize:function(){return jQuery.param(this.serializeArray());},serializeArray:function(){return this.map(function(){return jQuery.nodeName(this,"form")?jQuery.makeArray(this.elements):this;}).filter(function(){return this.name&&!this.disabled&&(this.checked||/select|textarea/i.test(this.nodeName)||/text|hidden|password/i.test(this.type));}).map(function(i,elem){var val=jQuery(this).val();return val==null?null:val.constructor==Array?jQuery.map(val,function(i,val){return{name:elem.name,value:val};}):{name:elem.name,value:val};}).get();}});jQuery.each("ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","),function(i,o){jQuery.fn[o]=function(f){return this.bind(o,f);};});var jsc=(new Date).getTime();jQuery.extend({get:function(url,data,callback,type){if(jQuery.isFunction(data)){callback=data;data=null;}return jQuery.ajax({type:"GET",url:url,data:data,success:callback,dataType:type});},getScript:function(url,callback){return jQuery.get(url,null,callback,"script");},getJSON:function(url,data,callback){return jQuery.get(url,data,callback,"json");},post:function(url,data,callback,type){if(jQuery.isFunction(data)){callback=data;data={};}return jQuery.ajax({type:"POST",url:url,data:data,success:callback,dataType:type});},ajaxSetup:function(settings){jQuery.extend(jQuery.ajaxSettings,settings);},ajaxSettings:{global:true,type:"GET",timeout:0,contentType:"application/x-www-form-urlencoded",processData:true,async:true,data:null},lastModified:{},ajax:function(s){var jsonp,jsre=/=(\?|%3F)/g,status,data;s=jQuery.extend(true,s,jQuery.extend(true,{},jQuery.ajaxSettings,s));if(s.data&&s.processData&&typeof s.data!="string")s.data=jQuery.param(s.data);var q=s.url.indexOf("?");if(q>-1){s.data=(s.data?s.data+"&":"")+s.url.slice(q+1);s.url=s.url.slice(0,q);}if(s.dataType=="jsonp"){if(!s.data||!s.data.match(jsre))s.data=(s.data?s.data+"&":"")+(s.jsonp||"callback")+"=?";s.dataType="json";}if(s.dataType=="json"&&s.data&&s.data.match(jsre)){jsonp="jsonp"+jsc++;s.data=s.data.replace(jsre,"="+jsonp);s.dataType="script";window[jsonp]=function(tmp){data=tmp;success();window[jsonp]=undefined;try{delete window[jsonp];}catch(e){}};}if(s.dataType=="script"&&s.cache==null)s.cache=false;if(s.cache===false&&s.type.toLowerCase()=="get")s.data=(s.data?s.data+"&":"")+"_="+(new Date()).getTime();if(s.data&&s.type.toLowerCase()=="get"){s.url+="?"+s.data;s.data=null;}if(s.global&&!jQuery.active++)jQuery.event.trigger("ajaxStart");if(!s.url.indexOf("http")&&s.dataType=="script"){var head=document.getElementsByTagName("head")[0];var script=document.createElement("script");script.src=s.url;if(!jsonp&&(s.success||s.complete)){var done=false;script.onload=script.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){done=true;success();complete();head.removeChild(script);}};}head.appendChild(script);return;}var requestDone=false;var xml=window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();xml.open(s.type,s.url,s.async);if(s.data)xml.setRequestHeader("Content-Type",s.contentType);if(s.ifModified)xml.setRequestHeader("If-Modified-Since",jQuery.lastModified[s.url]||"Thu, 01 Jan 1970 00:00:00 GMT");xml.setRequestHeader("X-Requested-With","XMLHttpRequest");if(s.beforeSend)s.beforeSend(xml);if(s.global)jQuery.event.trigger("ajaxSend",[xml,s]);var onreadystatechange=function(isTimeout){if(!requestDone&&xml&&(xml.readyState==4||isTimeout=="timeout")){requestDone=true;if(ival){clearInterval(ival);ival=null;}status=isTimeout=="timeout"&&"timeout"||!jQuery.httpSuccess(xml)&&"error"||s.ifModified&&jQuery.httpNotModified(xml,s.url)&&"notmodified"||"success";if(status=="success"){try{data=jQuery.httpData(xml,s.dataType);}catch(e){status="parsererror";}}if(status=="success"){var modRes;try{modRes=xml.getResponseHeader("Last-Modified");}catch(e){}if(s.ifModified&&modRes)jQuery.lastModified[s.url]=modRes;if(!jsonp)success();}else
+jQuery.handleError(s,xml,status);complete();if(s.async)xml=null;}};if(s.async){var ival=setInterval(onreadystatechange,13);if(s.timeout>0)setTimeout(function(){if(xml){xml.abort();if(!requestDone)onreadystatechange("timeout");}},s.timeout);}try{xml.send(s.data);}catch(e){jQuery.handleError(s,xml,null,e);}if(!s.async)onreadystatechange();return xml;function success(){if(s.success)s.success(data,status);if(s.global)jQuery.event.trigger("ajaxSuccess",[xml,s]);}function complete(){if(s.complete)s.complete(xml,status);if(s.global)jQuery.event.trigger("ajaxComplete",[xml,s]);if(s.global&&!--jQuery.active)jQuery.event.trigger("ajaxStop");}},handleError:function(s,xml,status,e){if(s.error)s.error(xml,status,e);if(s.global)jQuery.event.trigger("ajaxError",[xml,s,e]);},active:0,httpSuccess:function(r){try{return!r.status&&location.protocol=="file:"||(r.status>=200&&r.status<300)||r.status==304||jQuery.browser.safari&&r.status==undefined;}catch(e){}return false;},httpNotModified:function(xml,url){try{var xmlRes=xml.getResponseHeader("Last-Modified");return xml.status==304||xmlRes==jQuery.lastModified[url]||jQuery.browser.safari&&xml.status==undefined;}catch(e){}return false;},httpData:function(r,type){var ct=r.getResponseHeader("content-type");var xml=type=="xml"||!type&&ct&&ct.indexOf("xml")>=0;var data=xml?r.responseXML:r.responseText;if(xml&&data.documentElement.tagName=="parsererror")throw"parsererror";if(type=="script")jQuery.globalEval(data);if(type=="json")data=eval("("+data+")");return data;},param:function(a){var s=[];if(a.constructor==Array||a.jquery)jQuery.each(a,function(){s.push(encodeURIComponent(this.name)+"="+encodeURIComponent(this.value));});else
+for(var j in a)if(a[j]&&a[j].constructor==Array)jQuery.each(a[j],function(){s.push(encodeURIComponent(j)+"="+encodeURIComponent(this));});else
+s.push(encodeURIComponent(j)+"="+encodeURIComponent(a[j]));return s.join("&").replace(/%20/g,"+");}});jQuery.fn.extend({show:function(speed,callback){return speed?this.animate({height:"show",width:"show",opacity:"show"},speed,callback):this.filter(":hidden").each(function(){this.style.display=this.oldblock?this.oldblock:"";if(jQuery.css(this,"display")=="none")this.style.display="block";}).end();},hide:function(speed,callback){return speed?this.animate({height:"hide",width:"hide",opacity:"hide"},speed,callback):this.filter(":visible").each(function(){this.oldblock=this.oldblock||jQuery.css(this,"display");if(this.oldblock=="none")this.oldblock="block";this.style.display="none";}).end();},_toggle:jQuery.fn.toggle,toggle:function(fn,fn2){return jQuery.isFunction(fn)&&jQuery.isFunction(fn2)?this._toggle(fn,fn2):fn?this.animate({height:"toggle",width:"toggle",opacity:"toggle"},fn,fn2):this.each(function(){jQuery(this)[jQuery(this).is(":hidden")?"show":"hide"]();});},slideDown:function(speed,callback){return this.animate({height:"show"},speed,callback);},slideUp:function(speed,callback){return this.animate({height:"hide"},speed,callback);},slideToggle:function(speed,callback){return this.animate({height:"toggle"},speed,callback);},fadeIn:function(speed,callback){return this.animate({opacity:"show"},speed,callback);},fadeOut:function(speed,callback){return this.animate({opacity:"hide"},speed,callback);},fadeTo:function(speed,to,callback){return this.animate({opacity:to},speed,callback);},animate:function(prop,speed,easing,callback){var opt=jQuery.speed(speed,easing,callback);return this[opt.queue===false?"each":"queue"](function(){opt=jQuery.extend({},opt);var hidden=jQuery(this).is(":hidden"),self=this;for(var p in prop){if(prop[p]=="hide"&&hidden||prop[p]=="show"&&!hidden)return jQuery.isFunction(opt.complete)&&opt.complete.apply(this);if(p=="height"||p=="width"){opt.display=jQuery.css(this,"display");opt.overflow=this.style.overflow;}}if(opt.overflow!=null)this.style.overflow="hidden";opt.curAnim=jQuery.extend({},prop);jQuery.each(prop,function(name,val){var e=new jQuery.fx(self,opt,name);if(/toggle|show|hide/.test(val))e[val=="toggle"?hidden?"show":"hide":val](prop);else{var parts=val.toString().match(/^([+-]?)([\d.]+)(.*)$/),start=e.cur(true)||0;if(parts){end=parseFloat(parts[2]),unit=parts[3]||"px";if(unit!="px"){self.style[name]=end+unit;start=(end/e.cur(true))*start;self.style[name]=start+unit;}if(parts[1])end=((parts[1]=="-"?-1:1)*end)+start;e.custom(start,end,unit);}else
+e.custom(start,val,"");}});return true;});},queue:function(type,fn){if(!fn){fn=type;type="fx";}if(!arguments.length)return queue(this[0],type);return this.each(function(){if(fn.constructor==Array)queue(this,type,fn);else{queue(this,type).push(fn);if(queue(this,type).length==1)fn.apply(this);}});},stop:function(){var timers=jQuery.timers;return this.each(function(){for(var i=0;i<timers.length;i++)if(timers[i].elem==this)timers.splice(i--,1);}).dequeue();}});var queue=function(elem,type,array){if(!elem)return;var q=jQuery.data(elem,type+"queue");if(!q||array)q=jQuery.data(elem,type+"queue",array?jQuery.makeArray(array):[]);return q;};jQuery.fn.dequeue=function(type){type=type||"fx";return this.each(function(){var q=queue(this,type);q.shift();if(q.length)q[0].apply(this);});};jQuery.extend({speed:function(speed,easing,fn){var opt=speed&&speed.constructor==Object?speed:{complete:fn||!fn&&easing||jQuery.isFunction(speed)&&speed,duration:speed,easing:fn&&easing||easing&&easing.constructor!=Function&&easing};opt.duration=(opt.duration&&opt.duration.constructor==Number?opt.duration:{slow:600,fast:200}[opt.duration])||400;opt.old=opt.complete;opt.complete=function(){jQuery(this).dequeue();if(jQuery.isFunction(opt.old))opt.old.apply(this);};return opt;},easing:{linear:function(p,n,firstNum,diff){return firstNum+diff*p;},swing:function(p,n,firstNum,diff){return((-Math.cos(p*Math.PI)/2)+0.5)*diff+firstNum;}},timers:[],fx:function(elem,options,prop){this.options=options;this.elem=elem;this.prop=prop;if(!options.orig)options.orig={};}});jQuery.fx.prototype={update:function(){if(this.options.step)this.options.step.apply(this.elem,[this.now,this]);(jQuery.fx.step[this.prop]||jQuery.fx.step._default)(this);if(this.prop=="height"||this.prop=="width")this.elem.style.display="block";},cur:function(force){if(this.elem[this.prop]!=null&&this.elem.style[this.prop]==null)return this.elem[this.prop];var r=parseFloat(jQuery.curCSS(this.elem,this.prop,force));return r&&r>-10000?r:parseFloat(jQuery.css(this.elem,this.prop))||0;},custom:function(from,to,unit){this.startTime=(new Date()).getTime();this.start=from;this.end=to;this.unit=unit||this.unit||"px";this.now=this.start;this.pos=this.state=0;this.update();var self=this;function t(){return self.step();}t.elem=this.elem;jQuery.timers.push(t);if(jQuery.timers.length==1){var timer=setInterval(function(){var timers=jQuery.timers;for(var i=0;i<timers.length;i++)if(!timers[i]())timers.splice(i--,1);if(!timers.length)clearInterval(timer);},13);}},show:function(){this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);this.options.show=true;this.custom(0,this.cur());if(this.prop=="width"||this.prop=="height")this.elem.style[this.prop]="1px";jQuery(this.elem).show();},hide:function(){this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);this.options.hide=true;this.custom(this.cur(),0);},step:function(){var t=(new Date()).getTime();if(t>this.options.duration+this.startTime){this.now=this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;var done=true;for(var i in this.options.curAnim)if(this.options.curAnim[i]!==true)done=false;if(done){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;this.elem.style.display=this.options.display;if(jQuery.css(this.elem,"display")=="none")this.elem.style.display="block";}if(this.options.hide)this.elem.style.display="none";if(this.options.hide||this.options.show)for(var p in this.options.curAnim)jQuery.attr(this.elem.style,p,this.options.orig[p]);}if(done&&jQuery.isFunction(this.options.complete))this.options.complete.apply(this.elem);return false;}else{var n=t-this.startTime;this.state=n/this.options.duration;this.pos=jQuery.easing[this.options.easing||(jQuery.easing.swing?"swing":"linear")](this.state,n,0,1,this.options.duration);this.now=this.start+((this.end-this.start)*this.pos);this.update();}return true;}};jQuery.fx.step={scrollLeft:function(fx){fx.elem.scrollLeft=fx.now;},scrollTop:function(fx){fx.elem.scrollTop=fx.now;},opacity:function(fx){jQuery.attr(fx.elem.style,"opacity",fx.now);},_default:function(fx){fx.elem.style[fx.prop]=fx.now+fx.unit;}};jQuery.fn.offset=function(){var left=0,top=0,elem=this[0],results;if(elem)with(jQuery.browser){var absolute=jQuery.css(elem,"position")=="absolute",parent=elem.parentNode,offsetParent=elem.offsetParent,doc=elem.ownerDocument,safari2=safari&&!absolute&&parseInt(version)<522;if(elem.getBoundingClientRect){box=elem.getBoundingClientRect();add(box.left+Math.max(doc.documentElement.scrollLeft,doc.body.scrollLeft),box.top+Math.max(doc.documentElement.scrollTop,doc.body.scrollTop));if(msie){var border=jQuery("html").css("borderWidth");border=(border=="medium"||jQuery.boxModel&&parseInt(version)>=7)&&2||border;add(-border,-border);}}else{add(elem.offsetLeft,elem.offsetTop);while(offsetParent){add(offsetParent.offsetLeft,offsetParent.offsetTop);if(mozilla&&/^t[d|h]$/i.test(parent.tagName)||!safari2)border(offsetParent);if(safari2&&!absolute&&jQuery.css(offsetParent,"position")=="absolute")absolute=true;offsetParent=offsetParent.offsetParent;}while(parent.tagName&&/^body|html$/i.test(parent.tagName)){if(/^inline|table-row.*$/i.test(jQuery.css(parent,"display")))add(-parent.scrollLeft,-parent.scrollTop);if(mozilla&&jQuery.css(parent,"overflow")!="visible")border(parent);parent=parent.parentNode;}if(safari&&absolute)add(-doc.body.offsetLeft,-doc.body.offsetTop);}results={top:top,left:left};}return results;function border(elem){add(jQuery.css(elem,"borderLeftWidth"),jQuery.css(elem,"borderTopWidth"));}function add(l,t){left+=parseInt(l)||0;top+=parseInt(t)||0;}};})();
\ No newline at end of file
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.3_min.js b/devtools/client/inspector/markup/test/lib_jquery_1.3_min.js
new file mode 100644
index 0000000000..378f94376d
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.3_min.js
@@ -0,0 +1,19 @@
+/*
+ * jQuery JavaScript Library v1.3
+ * http://jquery.com/
+ *
+ * Copyright (c) 2009 John Resig
+ * Dual licensed under the MIT and GPL licenses.
+ * http://docs.jquery.com/License
+ *
+ * Date: 2009-01-13 12:50:31 -0500 (Tue, 13 Jan 2009)
+ * Revision: 6104
+ */
+(function(){var l=this,g,x=l.jQuery,o=l.$,n=l.jQuery=l.$=function(D,E){return new n.fn.init(D,E)},C=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;n.fn=n.prototype={init:function(D,G){D=D||document;if(D.nodeType){this[0]=D;this.length=1;this.context=D;return this}if(typeof D==="string"){var F=C.exec(D);if(F&&(F[1]||!G)){if(F[1]){D=n.clean([F[1]],G)}else{var H=document.getElementById(F[3]);if(H){if(H.id!=F[3]){return n().find(D)}var E=n(H);E.context=document;E.selector=D;return E}D=[]}}else{return n(G).find(D)}}else{if(n.isFunction(D)){return n(document).ready(D)}}if(D.selector&&D.context){this.selector=D.selector;this.context=D.context}return this.setArray(n.makeArray(D))},selector:"",jquery:"1.3",size:function(){return this.length},get:function(D){return D===g?n.makeArray(this):this[D]},pushStack:function(E,G,D){var F=n(E);F.prevObject=this;F.context=this.context;if(G==="find"){F.selector=this.selector+(this.selector?" ":"")+D}else{if(G){F.selector=this.selector+"."+G+"("+D+")"}}return F},setArray:function(D){this.length=0;Array.prototype.push.apply(this,D);return this},each:function(E,D){return n.each(this,E,D)},index:function(D){return n.inArray(D&&D.jquery?D[0]:D,this)},attr:function(E,G,F){var D=E;if(typeof E==="string"){if(G===g){return this[0]&&n[F||"attr"](this[0],E)}else{D={};D[E]=G}}return this.each(function(H){for(E in D){n.attr(F?this.style:this,E,n.prop(this,D[E],F,H,E))}})},css:function(D,E){if((D=="width"||D=="height")&&parseFloat(E)<0){E=g}return this.attr(D,E,"curCSS")},text:function(E){if(typeof E!=="object"&&E!=null){return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(E))}var D="";n.each(E||this,function(){n.each(this.childNodes,function(){if(this.nodeType!=8){D+=this.nodeType!=1?this.nodeValue:n.fn.text([this])}})});return D},wrapAll:function(D){if(this[0]){var E=n(D,this[0].ownerDocument).clone();if(this[0].parentNode){E.insertBefore(this[0])}E.map(function(){var F=this;while(F.firstChild){F=F.firstChild}return F}).append(this)}return this},wrapInner:function(D){return this.each(function(){n(this).contents().wrapAll(D)})},wrap:function(D){return this.each(function(){n(this).wrapAll(D)})},append:function(){return this.domManip(arguments,true,function(D){if(this.nodeType==1){this.appendChild(D)}})},prepend:function(){return this.domManip(arguments,true,function(D){if(this.nodeType==1){this.insertBefore(D,this.firstChild)}})},before:function(){return this.domManip(arguments,false,function(D){this.parentNode.insertBefore(D,this)})},after:function(){return this.domManip(arguments,false,function(D){this.parentNode.insertBefore(D,this.nextSibling)})},end:function(){return this.prevObject||n([])},push:[].push,find:function(D){if(this.length===1&&!/,/.test(D)){var F=this.pushStack([],"find",D);F.length=0;n.find(D,this[0],F);return F}else{var E=n.map(this,function(G){return n.find(D,G)});return this.pushStack(/[^+>] [^+>]/.test(D)?n.unique(E):E,"find",D)}},clone:function(E){var D=this.map(function(){if(!n.support.noCloneEvent&&!n.isXMLDoc(this)){var H=this.cloneNode(true),G=document.createElement("div");G.appendChild(H);return n.clean([G.innerHTML])[0]}else{return this.cloneNode(true)}});var F=D.find("*").andSelf().each(function(){if(this[h]!==g){this[h]=null}});if(E===true){this.find("*").andSelf().each(function(H){if(this.nodeType==3){return}var G=n.data(this,"events");for(var J in G){for(var I in G[J]){n.event.add(F[H],J,G[J][I],G[J][I].data)}}})}return D},filter:function(D){return this.pushStack(n.isFunction(D)&&n.grep(this,function(F,E){return D.call(F,E)})||n.multiFilter(D,n.grep(this,function(E){return E.nodeType===1})),"filter",D)},closest:function(D){var E=n.expr.match.POS.test(D)?n(D):null;return this.map(function(){var F=this;while(F&&F.ownerDocument){if(E?E.index(F)>-1:n(F).is(D)){return F}F=F.parentNode}})},not:function(D){if(typeof D==="string"){if(f.test(D)){return this.pushStack(n.multiFilter(D,this,true),"not",D)}else{D=n.multiFilter(D,this)}}var E=D.length&&D[D.length-1]!==g&&!D.nodeType;return this.filter(function(){return E?n.inArray(this,D)<0:this!=D})},add:function(D){return this.pushStack(n.unique(n.merge(this.get(),typeof D==="string"?n(D):n.makeArray(D))))},is:function(D){return !!D&&n.multiFilter(D,this).length>0},hasClass:function(D){return !!D&&this.is("."+D)},val:function(J){if(J===g){var D=this[0];if(D){if(n.nodeName(D,"option")){return(D.attributes.value||{}).specified?D.value:D.text}if(n.nodeName(D,"select")){var H=D.selectedIndex,K=[],L=D.options,G=D.type=="select-one";if(H<0){return null}for(var E=G?H:0,I=G?H+1:L.length;E<I;E++){var F=L[E];if(F.selected){J=n(F).val();if(G){return J}K.push(J)}}return K}return(D.value||"").replace(/\r/g,"")}return g}if(typeof J==="number"){J+=""}return this.each(function(){if(this.nodeType!=1){return}if(n.isArray(J)&&/radio|checkbox/.test(this.type)){this.checked=(n.inArray(this.value,J)>=0||n.inArray(this.name,J)>=0)}else{if(n.nodeName(this,"select")){var M=n.makeArray(J);n("option",this).each(function(){this.selected=(n.inArray(this.value,M)>=0||n.inArray(this.text,M)>=0)});if(!M.length){this.selectedIndex=-1}}else{this.value=J}}})},html:function(D){return D===g?(this[0]?this[0].innerHTML:null):this.empty().append(D)},replaceWith:function(D){return this.after(D).remove()},eq:function(D){return this.slice(D,+D+1)},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments),"slice",Array.prototype.slice.call(arguments).join(","))},map:function(D){return this.pushStack(n.map(this,function(F,E){return D.call(F,E,F)}))},andSelf:function(){return this.add(this.prevObject)},domManip:function(J,M,L){if(this[0]){var I=(this[0].ownerDocument||this[0]).createDocumentFragment(),F=n.clean(J,(this[0].ownerDocument||this[0]),I),H=I.firstChild,D=this.length>1?I.cloneNode(true):I;if(H){for(var G=0,E=this.length;G<E;G++){L.call(K(this[G],H),G>0?D.cloneNode(true):I)}}if(F){n.each(F,y)}}return this;function K(N,O){return M&&n.nodeName(N,"table")&&n.nodeName(O,"tr")?(N.getElementsByTagName("tbody")[0]||N.appendChild(N.ownerDocument.createElement("tbody"))):N}}};n.fn.init.prototype=n.fn;function y(D,E){if(E.src){n.ajax({url:E.src,async:false,dataType:"script"})}else{n.globalEval(E.text||E.textContent||E.innerHTML||"")}if(E.parentNode){E.parentNode.removeChild(E)}}function e(){return +new Date}n.extend=n.fn.extend=function(){var I=arguments[0]||{},G=1,H=arguments.length,D=false,F;if(typeof I==="boolean"){D=I;I=arguments[1]||{};G=2}if(typeof I!=="object"&&!n.isFunction(I)){I={}}if(H==G){I=this;--G}for(;G<H;G++){if((F=arguments[G])!=null){for(var E in F){var J=I[E],K=F[E];if(I===K){continue}if(D&&K&&typeof K==="object"&&!K.nodeType){I[E]=n.extend(D,J||(K.length!=null?[]:{}),K)}else{if(K!==g){I[E]=K}}}}}return I};var b=/z-?index|font-?weight|opacity|zoom|line-?height/i,p=document.defaultView||{},r=Object.prototype.toString;n.extend({noConflict:function(D){l.$=o;if(D){l.jQuery=x}return n},isFunction:function(D){return r.call(D)==="[object Function]"},isArray:function(D){return r.call(D)==="[object Array]"},isXMLDoc:function(D){return D.documentElement&&!D.body||D.tagName&&D.ownerDocument&&!D.ownerDocument.body},globalEval:function(F){F=n.trim(F);if(F){var E=document.getElementsByTagName("head")[0]||document.documentElement,D=document.createElement("script");D.type="text/javascript";if(n.support.scriptEval){D.appendChild(document.createTextNode(F))}else{D.text=F}E.insertBefore(D,E.firstChild);E.removeChild(D)}},nodeName:function(E,D){return E.nodeName&&E.nodeName.toUpperCase()==D.toUpperCase()},each:function(F,J,E){var D,G=0,H=F.length;if(E){if(H===g){for(D in F){if(J.apply(F[D],E)===false){break}}}else{for(;G<H;){if(J.apply(F[G++],E)===false){break}}}}else{if(H===g){for(D in F){if(J.call(F[D],D,F[D])===false){break}}}else{for(var I=F[0];G<H&&J.call(I,G,I)!==false;I=F[++G]){}}}return F},prop:function(G,H,F,E,D){if(n.isFunction(H)){H=H.call(G,E)}return typeof H==="number"&&F=="curCSS"&&!b.test(D)?H+"px":H},className:{add:function(D,E){n.each((E||"").split(/\s+/),function(F,G){if(D.nodeType==1&&!n.className.has(D.className,G)){D.className+=(D.className?" ":"")+G}})},remove:function(D,E){if(D.nodeType==1){D.className=E!==g?n.grep(D.className.split(/\s+/),function(F){return !n.className.has(E,F)}).join(" "):""}},has:function(E,D){return n.inArray(D,(E.className||E).toString().split(/\s+/))>-1}},swap:function(G,F,H){var D={};for(var E in F){D[E]=G.style[E];G.style[E]=F[E]}H.call(G);for(var E in F){G.style[E]=D[E]}},css:function(F,D,H){if(D=="width"||D=="height"){var J,E={position:"absolute",visibility:"hidden",display:"block"},I=D=="width"?["Left","Right"]:["Top","Bottom"];function G(){J=D=="width"?F.offsetWidth:F.offsetHeight;var L=0,K=0;n.each(I,function(){L+=parseFloat(n.curCSS(F,"padding"+this,true))||0;K+=parseFloat(n.curCSS(F,"border"+this+"Width",true))||0});J-=Math.round(L+K)}if(n(F).is(":visible")){G()}else{n.swap(F,E,G)}return Math.max(0,J)}return n.curCSS(F,D,H)},curCSS:function(H,E,F){var K,D=H.style;if(E=="opacity"&&!n.support.opacity){K=n.attr(D,"opacity");return K==""?"1":K}if(E.match(/float/i)){E=v}if(!F&&D&&D[E]){K=D[E]}else{if(p.getComputedStyle){if(E.match(/float/i)){E="float"}E=E.replace(/([A-Z])/g,"-$1").toLowerCase();var L=p.getComputedStyle(H,null);if(L){K=L.getPropertyValue(E)}if(E=="opacity"&&K==""){K="1"}}else{if(H.currentStyle){var I=E.replace(/\-(\w)/g,function(M,N){return N.toUpperCase()});K=H.currentStyle[E]||H.currentStyle[I];if(!/^\d+(px)?$/i.test(K)&&/^\d/.test(K)){var G=D.left,J=H.runtimeStyle.left;H.runtimeStyle.left=H.currentStyle.left;D.left=K||0;K=D.pixelLeft+"px";D.left=G;H.runtimeStyle.left=J}}}}return K},clean:function(E,J,H){J=J||document;if(typeof J.createElement==="undefined"){J=J.ownerDocument||J[0]&&J[0].ownerDocument||document}if(!H&&E.length===1&&typeof E[0]==="string"){var G=/^<(\w+)\s*\/?>$/.exec(E[0]);if(G){return[J.createElement(G[1])]}}var F=[],D=[],K=J.createElement("div");n.each(E,function(O,Q){if(typeof Q==="number"){Q+=""}if(!Q){return}if(typeof Q==="string"){Q=Q.replace(/(<(\w+)[^>]*?)\/>/g,function(S,T,R){return R.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?S:T+"></"+R+">"});var N=n.trim(Q).toLowerCase();var P=!N.indexOf("<opt")&&[1,"<select multiple='multiple'>","</select>"]||!N.indexOf("<leg")&&[1,"<fieldset>","</fieldset>"]||N.match(/^<(thead|tbody|tfoot|colg|cap)/)&&[1,"<table>","</table>"]||!N.indexOf("<tr")&&[2,"<table><tbody>","</tbody></table>"]||(!N.indexOf("<td")||!N.indexOf("<th"))&&[3,"<table><tbody><tr>","</tr></tbody></table>"]||!N.indexOf("<col")&&[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"]||!n.support.htmlSerialize&&[1,"div<div>","</div>"]||[0,"",""];K.innerHTML=P[1]+Q+P[2];while(P[0]--){K=K.lastChild}if(!n.support.tbody){var M=!N.indexOf("<table")&&N.indexOf("<tbody")<0?K.firstChild&&K.firstChild.childNodes:P[1]=="<table>"&&N.indexOf("<tbody")<0?K.childNodes:[];for(var L=M.length-1;L>=0;--L){if(n.nodeName(M[L],"tbody")&&!M[L].childNodes.length){M[L].parentNode.removeChild(M[L])}}}if(!n.support.leadingWhitespace&&/^\s/.test(Q)){K.insertBefore(J.createTextNode(Q.match(/^\s*/)[0]),K.firstChild)}Q=n.makeArray(K.childNodes)}if(Q.nodeType){F.push(Q)}else{F=n.merge(F,Q)}});if(H){for(var I=0;F[I];I++){if(n.nodeName(F[I],"script")&&(!F[I].type||F[I].type.toLowerCase()==="text/javascript")){D.push(F[I].parentNode?F[I].parentNode.removeChild(F[I]):F[I])}else{if(F[I].nodeType===1){F.splice.apply(F,[I+1,0].concat(n.makeArray(F[I].getElementsByTagName("script"))))}H.appendChild(F[I])}}return D}return F},attr:function(I,F,J){if(!I||I.nodeType==3||I.nodeType==8){return g}var G=!n.isXMLDoc(I),K=J!==g;F=G&&n.props[F]||F;if(I.tagName){var E=/href|src|style/.test(F);if(F=="selected"&&I.parentNode){I.parentNode.selectedIndex}if(F in I&&G&&!E){if(K){if(F=="type"&&n.nodeName(I,"input")&&I.parentNode){throw"type property can't be changed"}I[F]=J}if(n.nodeName(I,"form")&&I.getAttributeNode(F)){return I.getAttributeNode(F).nodeValue}if(F=="tabIndex"){var H=I.getAttributeNode("tabIndex");return H&&H.specified?H.value:I.nodeName.match(/^(a|area|button|input|object|select|textarea)$/i)?0:g}return I[F]}if(!n.support.style&&G&&F=="style"){return n.attr(I.style,"cssText",J)}if(K){I.setAttribute(F,""+J)}var D=!n.support.hrefNormalized&&G&&E?I.getAttribute(F,2):I.getAttribute(F);return D===null?g:D}if(!n.support.opacity&&F=="opacity"){if(K){I.zoom=1;I.filter=(I.filter||"").replace(/alpha\([^)]*\)/,"")+(parseInt(J)+""=="NaN"?"":"alpha(opacity="+J*100+")")}return I.filter&&I.filter.indexOf("opacity=")>=0?(parseFloat(I.filter.match(/opacity=([^)]*)/)[1])/100)+"":""}F=F.replace(/-([a-z])/ig,function(L,M){return M.toUpperCase()});if(K){I[F]=J}return I[F]},trim:function(D){return(D||"").replace(/^\s+|\s+$/g,"")},makeArray:function(F){var D=[];if(F!=null){var E=F.length;if(E==null||typeof F==="string"||n.isFunction(F)||F.setInterval){D[0]=F}else{while(E){D[--E]=F[E]}}}return D},inArray:function(F,G){for(var D=0,E=G.length;D<E;D++){if(G[D]===F){return D}}return -1},merge:function(G,D){var E=0,F,H=G.length;if(!n.support.getAll){while((F=D[E++])!=null){if(F.nodeType!=8){G[H++]=F}}}else{while((F=D[E++])!=null){G[H++]=F}}return G},unique:function(J){var E=[],D={};try{for(var F=0,G=J.length;F<G;F++){var I=n.data(J[F]);if(!D[I]){D[I]=true;E.push(J[F])}}}catch(H){E=J}return E},grep:function(E,I,D){var F=[];for(var G=0,H=E.length;G<H;G++){if(!D!=!I(E[G],G)){F.push(E[G])}}return F},map:function(D,I){var E=[];for(var F=0,G=D.length;F<G;F++){var H=I(D[F],F);if(H!=null){E[E.length]=H}}return E.concat.apply([],E)}});var B=navigator.userAgent.toLowerCase();n.browser={version:(B.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[0,"0"])[1],safari:/webkit/.test(B),opera:/opera/.test(B),msie:/msie/.test(B)&&!/opera/.test(B),mozilla:/mozilla/.test(B)&&!/(compatible|webkit)/.test(B)};n.each({parent:function(D){return D.parentNode},parents:function(D){return n.dir(D,"parentNode")},next:function(D){return n.nth(D,2,"nextSibling")},prev:function(D){return n.nth(D,2,"previousSibling")},nextAll:function(D){return n.dir(D,"nextSibling")},prevAll:function(D){return n.dir(D,"previousSibling")},siblings:function(D){return n.sibling(D.parentNode.firstChild,D)},children:function(D){return n.sibling(D.firstChild)},contents:function(D){return n.nodeName(D,"iframe")?D.contentDocument||D.contentWindow.document:n.makeArray(D.childNodes)}},function(D,E){n.fn[D]=function(F){var G=n.map(this,E);if(F&&typeof F=="string"){G=n.multiFilter(F,G)}return this.pushStack(n.unique(G),D,F)}});n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(D,E){n.fn[D]=function(){var F=arguments;return this.each(function(){for(var G=0,H=F.length;G<H;G++){n(F[G])[E](this)}})}});n.each({removeAttr:function(D){n.attr(this,D,"");if(this.nodeType==1){this.removeAttribute(D)}},addClass:function(D){n.className.add(this,D)},removeClass:function(D){n.className.remove(this,D)},toggleClass:function(E,D){if(typeof D!=="boolean"){D=!n.className.has(this,E)}n.className[D?"add":"remove"](this,E)},remove:function(D){if(!D||n.filter(D,[this]).length){n("*",this).add([this]).each(function(){n.event.remove(this);n.removeData(this)});if(this.parentNode){this.parentNode.removeChild(this)}}},empty:function(){n(">*",this).remove();while(this.firstChild){this.removeChild(this.firstChild)}}},function(D,E){n.fn[D]=function(){return this.each(E,arguments)}});function j(D,E){return D[0]&&parseInt(n.curCSS(D[0],E,true),10)||0}var h="jQuery"+e(),u=0,z={};n.extend({cache:{},data:function(E,D,F){E=E==l?z:E;var G=E[h];if(!G){G=E[h]=++u}if(D&&!n.cache[G]){n.cache[G]={}}if(F!==g){n.cache[G][D]=F}return D?n.cache[G][D]:G},removeData:function(E,D){E=E==l?z:E;var G=E[h];if(D){if(n.cache[G]){delete n.cache[G][D];D="";for(D in n.cache[G]){break}if(!D){n.removeData(E)}}}else{try{delete E[h]}catch(F){if(E.removeAttribute){E.removeAttribute(h)}}delete n.cache[G]}},queue:function(E,D,G){if(E){D=(D||"fx")+"queue";var F=n.data(E,D);if(!F||n.isArray(G)){F=n.data(E,D,n.makeArray(G))}else{if(G){F.push(G)}}}return F},dequeue:function(G,F){var D=n.queue(G,F),E=D.shift();if(!F||F==="fx"){E=D[0]}if(E!==g){E.call(G)}}});n.fn.extend({data:function(D,F){var G=D.split(".");G[1]=G[1]?"."+G[1]:"";if(F===g){var E=this.triggerHandler("getData"+G[1]+"!",[G[0]]);if(E===g&&this.length){E=n.data(this[0],D)}return E===g&&G[1]?this.data(G[0]):E}else{return this.trigger("setData"+G[1]+"!",[G[0],F]).each(function(){n.data(this,D,F)})}},removeData:function(D){return this.each(function(){n.removeData(this,D)})},queue:function(D,E){if(typeof D!=="string"){E=D;D="fx"}if(E===g){return n.queue(this[0],D)}return this.each(function(){var F=n.queue(this,D,E);if(D=="fx"&&F.length==1){F[0].call(this)}})},dequeue:function(D){return this.each(function(){n.dequeue(this,D)})}});
+/*
+ * Sizzle CSS Selector Engine - v0.9.1
+ *  Copyright 2009, The Dojo Foundation
+ *  Released under the MIT, BSD, and GPL Licenses.
+ *  More information: http://sizzlejs.com/
+ */
+(function(){var N=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|[^[\]]+)+\]|\\.|[^ >+~,(\[]+)+|[>+~])(\s*,\s*)?/g,I=0,F=Object.prototype.toString;var E=function(ae,S,aa,V){aa=aa||[];S=S||document;if(S.nodeType!==1&&S.nodeType!==9){return[]}if(!ae||typeof ae!=="string"){return aa}var ab=[],ac,Y,ah,ag,Z,R,Q=true;N.lastIndex=0;while((ac=N.exec(ae))!==null){ab.push(ac[1]);if(ac[2]){R=RegExp.rightContext;break}}if(ab.length>1&&G.match.POS.exec(ae)){if(ab.length===2&&G.relative[ab[0]]){var U="",X;while((X=G.match.POS.exec(ae))){U+=X[0];ae=ae.replace(G.match.POS,"")}Y=E.filter(U,E(/\s$/.test(ae)?ae+"*":ae,S))}else{Y=G.relative[ab[0]]?[S]:E(ab.shift(),S);while(ab.length){var P=[];ae=ab.shift();if(G.relative[ae]){ae+=ab.shift()}for(var af=0,ad=Y.length;af<ad;af++){E(ae,Y[af],P)}Y=P}}}else{var ai=V?{expr:ab.pop(),set:D(V)}:E.find(ab.pop(),ab.length===1&&S.parentNode?S.parentNode:S);Y=E.filter(ai.expr,ai.set);if(ab.length>0){ah=D(Y)}else{Q=false}while(ab.length){var T=ab.pop(),W=T;if(!G.relative[T]){T=""}else{W=ab.pop()}if(W==null){W=S}G.relative[T](ah,W,M(S))}}if(!ah){ah=Y}if(!ah){throw"Syntax error, unrecognized expression: "+(T||ae)}if(F.call(ah)==="[object Array]"){if(!Q){aa.push.apply(aa,ah)}else{if(S.nodeType===1){for(var af=0;ah[af]!=null;af++){if(ah[af]&&(ah[af]===true||ah[af].nodeType===1&&H(S,ah[af]))){aa.push(Y[af])}}}else{for(var af=0;ah[af]!=null;af++){if(ah[af]&&ah[af].nodeType===1){aa.push(Y[af])}}}}}else{D(ah,aa)}if(R){E(R,S,aa,V)}return aa};E.matches=function(P,Q){return E(P,null,null,Q)};E.find=function(V,S){var W,Q;if(!V){return[]}for(var R=0,P=G.order.length;R<P;R++){var T=G.order[R],Q;if((Q=G.match[T].exec(V))){var U=RegExp.leftContext;if(U.substr(U.length-1)!=="\\"){Q[1]=(Q[1]||"").replace(/\\/g,"");W=G.find[T](Q,S);if(W!=null){V=V.replace(G.match[T],"");break}}}}if(!W){W=S.getElementsByTagName("*")}return{set:W,expr:V}};E.filter=function(S,ac,ad,T){var Q=S,Y=[],ah=ac,V,ab;while(S&&ac.length){for(var U in G.filter){if((V=G.match[U].exec(S))!=null){var Z=G.filter[U],R=null,X=0,aa,ag;ab=false;if(ah==Y){Y=[]}if(G.preFilter[U]){V=G.preFilter[U](V,ah,ad,Y,T);if(!V){ab=aa=true}else{if(V===true){continue}else{if(V[0]===true){R=[];var W=null,af;for(var ae=0;(af=ah[ae])!==g;ae++){if(af&&W!==af){R.push(af);W=af}}}}}}if(V){for(var ae=0;(ag=ah[ae])!==g;ae++){if(ag){if(R&&ag!=R[X]){X++}aa=Z(ag,V,X,R);var P=T^!!aa;if(ad&&aa!=null){if(P){ab=true}else{ah[ae]=false}}else{if(P){Y.push(ag);ab=true}}}}}if(aa!==g){if(!ad){ah=Y}S=S.replace(G.match[U],"");if(!ab){return[]}break}}}S=S.replace(/\s*,\s*/,"");if(S==Q){if(ab==null){throw"Syntax error, unrecognized expression: "+S}else{break}}Q=S}return ah};var G=E.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:\((['"]*)((?:\([^\)]+\)|[^\2\(\)]*)+)\2\))?/},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(P){return P.getAttribute("href")}},relative:{"+":function(T,Q){for(var R=0,P=T.length;R<P;R++){var S=T[R];if(S){var U=S.previousSibling;while(U&&U.nodeType!==1){U=U.previousSibling}T[R]=typeof Q==="string"?U||false:U===Q}}if(typeof Q==="string"){E.filter(Q,T,true)}},">":function(U,Q,V){if(typeof Q==="string"&&!/\W/.test(Q)){Q=V?Q:Q.toUpperCase();for(var R=0,P=U.length;R<P;R++){var T=U[R];if(T){var S=T.parentNode;U[R]=S.nodeName===Q?S:false}}}else{for(var R=0,P=U.length;R<P;R++){var T=U[R];if(T){U[R]=typeof Q==="string"?T.parentNode:T.parentNode===Q}}if(typeof Q==="string"){E.filter(Q,U,true)}}},"":function(S,Q,U){var R="done"+(I++),P=O;if(!Q.match(/\W/)){var T=Q=U?Q:Q.toUpperCase();P=L}P("parentNode",Q,R,S,T,U)},"~":function(S,Q,U){var R="done"+(I++),P=O;if(typeof Q==="string"&&!Q.match(/\W/)){var T=Q=U?Q:Q.toUpperCase();P=L}P("previousSibling",Q,R,S,T,U)}},find:{ID:function(Q,R){if(R.getElementById){var P=R.getElementById(Q[1]);return P?[P]:[]}},NAME:function(P,Q){return Q.getElementsByName?Q.getElementsByName(P[1]):null},TAG:function(P,Q){return Q.getElementsByTagName(P[1])}},preFilter:{CLASS:function(S,Q,R,P,U){S=" "+S[1].replace(/\\/g,"")+" ";for(var T=0;Q[T];T++){if(U^(" "+Q[T].className+" ").indexOf(S)>=0){if(!R){P.push(Q[T])}}else{if(R){Q[T]=false}}}return false},ID:function(P){return P[1].replace(/\\/g,"")},TAG:function(Q,P){for(var R=0;!P[R];R++){}return M(P[R])?Q[1]:Q[1].toUpperCase()},CHILD:function(P){if(P[1]=="nth"){var Q=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(P[2]=="even"&&"2n"||P[2]=="odd"&&"2n+1"||!/\D/.test(P[2])&&"0n+"+P[2]||P[2]);P[2]=(Q[1]+(Q[2]||1))-0;P[3]=Q[3]-0}P[0]="done"+(I++);return P},ATTR:function(Q){var P=Q[1];if(G.attrMap[P]){Q[1]=G.attrMap[P]}if(Q[2]==="~="){Q[4]=" "+Q[4]+" "}return Q},PSEUDO:function(T,Q,R,P,U){if(T[1]==="not"){if(T[3].match(N).length>1){T[3]=E(T[3],null,null,Q)}else{var S=E.filter(T[3],Q,R,true^U);if(!R){P.push.apply(P,S)}return false}}else{if(G.match.POS.test(T[0])){return true}}return T},POS:function(P){P.unshift(true);return P}},filters:{enabled:function(P){return P.disabled===false&&P.type!=="hidden"},disabled:function(P){return P.disabled===true},checked:function(P){return P.checked===true},selected:function(P){P.parentNode.selectedIndex;return P.selected===true},parent:function(P){return !!P.firstChild},empty:function(P){return !P.firstChild},has:function(R,Q,P){return !!E(P[3],R).length},header:function(P){return/h\d/i.test(P.nodeName)},text:function(P){return"text"===P.type},radio:function(P){return"radio"===P.type},checkbox:function(P){return"checkbox"===P.type},file:function(P){return"file"===P.type},password:function(P){return"password"===P.type},submit:function(P){return"submit"===P.type},image:function(P){return"image"===P.type},reset:function(P){return"reset"===P.type},button:function(P){return"button"===P.type||P.nodeName.toUpperCase()==="BUTTON"},input:function(P){return/input|select|textarea|button/i.test(P.nodeName)}},setFilters:{first:function(Q,P){return P===0},last:function(R,Q,P,S){return Q===S.length-1},even:function(Q,P){return P%2===0},odd:function(Q,P){return P%2===1},lt:function(R,Q,P){return Q<P[3]-0},gt:function(R,Q,P){return Q>P[3]-0},nth:function(R,Q,P){return P[3]-0==Q},eq:function(R,Q,P){return P[3]-0==Q}},filter:{CHILD:function(P,S){var V=S[1],W=P.parentNode;var U="child"+W.childNodes.length;if(W&&(!W[U]||!P.nodeIndex)){var T=1;for(var Q=W.firstChild;Q;Q=Q.nextSibling){if(Q.nodeType==1){Q.nodeIndex=T++}}W[U]=T-1}if(V=="first"){return P.nodeIndex==1}else{if(V=="last"){return P.nodeIndex==W[U]}else{if(V=="only"){return W[U]==1}else{if(V=="nth"){var Y=false,R=S[2],X=S[3];if(R==1&&X==0){return true}if(R==0){if(P.nodeIndex==X){Y=true}}else{if((P.nodeIndex-X)%R==0&&(P.nodeIndex-X)/R>=0){Y=true}}return Y}}}}},PSEUDO:function(V,R,S,W){var Q=R[1],T=G.filters[Q];if(T){return T(V,S,R,W)}else{if(Q==="contains"){return(V.textContent||V.innerText||"").indexOf(R[3])>=0}else{if(Q==="not"){var U=R[3];for(var S=0,P=U.length;S<P;S++){if(U[S]===V){return false}}return true}}}},ID:function(Q,P){return Q.nodeType===1&&Q.getAttribute("id")===P},TAG:function(Q,P){return(P==="*"&&Q.nodeType===1)||Q.nodeName===P},CLASS:function(Q,P){return P.test(Q.className)},ATTR:function(T,R){var P=G.attrHandle[R[1]]?G.attrHandle[R[1]](T):T[R[1]]||T.getAttribute(R[1]),U=P+"",S=R[2],Q=R[4];return P==null?false:S==="="?U===Q:S==="*="?U.indexOf(Q)>=0:S==="~="?(" "+U+" ").indexOf(Q)>=0:!R[4]?P:S==="!="?U!=Q:S==="^="?U.indexOf(Q)===0:S==="$="?U.substr(U.length-Q.length)===Q:S==="|="?U===Q||U.substr(0,Q.length+1)===Q+"-":false},POS:function(T,Q,R,U){var P=Q[2],S=G.setFilters[P];if(S){return S(T,R,Q,U)}}}};for(var K in G.match){G.match[K]=RegExp(G.match[K].source+/(?![^\[]*\])(?![^\(]*\))/.source)}var D=function(Q,P){Q=Array.prototype.slice.call(Q);if(P){P.push.apply(P,Q);return P}return Q};try{Array.prototype.slice.call(document.documentElement.childNodes)}catch(J){D=function(T,S){var Q=S||[];if(F.call(T)==="[object Array]"){Array.prototype.push.apply(Q,T)}else{if(typeof T.length==="number"){for(var R=0,P=T.length;R<P;R++){Q.push(T[R])}}else{for(var R=0;T[R];R++){Q.push(T[R])}}}return Q}}(function(){var Q=document.createElement("form"),R="script"+(new Date).getTime();Q.innerHTML="<input name='"+R+"'/>";var P=document.documentElement;P.insertBefore(Q,P.firstChild);if(!!document.getElementById(R)){G.find.ID=function(T,U){if(U.getElementById){var S=U.getElementById(T[1]);return S?S.id===T[1]||S.getAttributeNode&&S.getAttributeNode("id").nodeValue===T[1]?[S]:g:[]}};G.filter.ID=function(U,S){var T=U.getAttributeNode&&U.getAttributeNode("id");return U.nodeType===1&&T&&T.nodeValue===S}}P.removeChild(Q)})();(function(){var P=document.createElement("div");P.appendChild(document.createComment(""));if(P.getElementsByTagName("*").length>0){G.find.TAG=function(Q,U){var T=U.getElementsByTagName(Q[1]);if(Q[1]==="*"){var S=[];for(var R=0;T[R];R++){if(T[R].nodeType===1){S.push(T[R])}}T=S}return T}}P.innerHTML="<a href='#'></a>";if(P.firstChild.getAttribute("href")!=="#"){G.attrHandle.href=function(Q){return Q.getAttribute("href",2)}}})();if(document.querySelectorAll){(function(){var P=E;E=function(T,S,Q,R){S=S||document;if(!R&&S.nodeType===9){try{return D(S.querySelectorAll(T),Q)}catch(U){}}return P(T,S,Q,R)};E.find=P.find;E.filter=P.filter;E.selectors=P.selectors;E.matches=P.matches})()}if(document.documentElement.getElementsByClassName){G.order.splice(1,0,"CLASS");G.find.CLASS=function(P,Q){return Q.getElementsByClassName(P[1])}}function L(Q,W,V,Z,X,Y){for(var T=0,R=Z.length;T<R;T++){var P=Z[T];if(P){P=P[Q];var U=false;while(P&&P.nodeType){var S=P[V];if(S){U=Z[S];break}if(P.nodeType===1&&!Y){P[V]=T}if(P.nodeName===W){U=P;break}P=P[Q]}Z[T]=U}}}function O(Q,V,U,Y,W,X){for(var S=0,R=Y.length;S<R;S++){var P=Y[S];if(P){P=P[Q];var T=false;while(P&&P.nodeType){if(P[U]){T=Y[P[U]];break}if(P.nodeType===1){if(!X){P[U]=S}if(typeof V!=="string"){if(P===V){T=true;break}}else{if(E.filter(V,[P]).length>0){T=P;break}}}P=P[Q]}Y[S]=T}}}var H=document.compareDocumentPosition?function(Q,P){return Q.compareDocumentPosition(P)&16}:function(Q,P){return Q!==P&&(Q.contains?Q.contains(P):true)};var M=function(P){return P.documentElement&&!P.body||P.tagName&&P.ownerDocument&&!P.ownerDocument.body};n.find=E;n.filter=E.filter;n.expr=E.selectors;n.expr[":"]=n.expr.filters;E.selectors.filters.hidden=function(P){return"hidden"===P.type||n.css(P,"display")==="none"||n.css(P,"visibility")==="hidden"};E.selectors.filters.visible=function(P){return"hidden"!==P.type&&n.css(P,"display")!=="none"&&n.css(P,"visibility")!=="hidden"};E.selectors.filters.animated=function(P){return n.grep(n.timers,function(Q){return P===Q.elem}).length};n.multiFilter=function(R,P,Q){if(Q){R=":not("+R+")"}return E.matches(R,P)};n.dir=function(R,Q){var P=[],S=R[Q];while(S&&S!=document){if(S.nodeType==1){P.push(S)}S=S[Q]}return P};n.nth=function(T,P,R,S){P=P||1;var Q=0;for(;T;T=T[R]){if(T.nodeType==1&&++Q==P){break}}return T};n.sibling=function(R,Q){var P=[];for(;R;R=R.nextSibling){if(R.nodeType==1&&R!=Q){P.push(R)}}return P};return;l.Sizzle=E})();n.event={add:function(H,E,G,J){if(H.nodeType==3||H.nodeType==8){return}if(H.setInterval&&H!=l){H=l}if(!G.guid){G.guid=this.guid++}if(J!==g){var F=G;G=this.proxy(F);G.data=J}var D=n.data(H,"events")||n.data(H,"events",{}),I=n.data(H,"handle")||n.data(H,"handle",function(){return typeof n!=="undefined"&&!n.event.triggered?n.event.handle.apply(arguments.callee.elem,arguments):g});I.elem=H;n.each(E.split(/\s+/),function(L,M){var N=M.split(".");M=N.shift();G.type=N.slice().sort().join(".");var K=D[M];if(n.event.specialAll[M]){n.event.specialAll[M].setup.call(H,J,N)}if(!K){K=D[M]={};if(!n.event.special[M]||n.event.special[M].setup.call(H,J,N)===false){if(H.addEventListener){H.addEventListener(M,I,false)}else{if(H.attachEvent){H.attachEvent("on"+M,I)}}}}K[G.guid]=G;n.event.global[M]=true});H=null},guid:1,global:{},remove:function(J,G,I){if(J.nodeType==3||J.nodeType==8){return}var F=n.data(J,"events"),E,D;if(F){if(G===g||(typeof G==="string"&&G.charAt(0)==".")){for(var H in F){this.remove(J,H+(G||""))}}else{if(G.type){I=G.handler;G=G.type}n.each(G.split(/\s+/),function(L,N){var P=N.split(".");N=P.shift();var M=RegExp("(^|\\.)"+P.slice().sort().join(".*\\.")+"(\\.|$)");if(F[N]){if(I){delete F[N][I.guid]}else{for(var O in F[N]){if(M.test(F[N][O].type)){delete F[N][O]}}}if(n.event.specialAll[N]){n.event.specialAll[N].teardown.call(J,P)}for(E in F[N]){break}if(!E){if(!n.event.special[N]||n.event.special[N].teardown.call(J,P)===false){if(J.removeEventListener){J.removeEventListener(N,n.data(J,"handle"),false)}else{if(J.detachEvent){J.detachEvent("on"+N,n.data(J,"handle"))}}}E=null;delete F[N]}}})}for(E in F){break}if(!E){var K=n.data(J,"handle");if(K){K.elem=null}n.removeData(J,"events");n.removeData(J,"handle")}}},trigger:function(H,J,G,D){var F=H.type||H;if(!D){H=typeof H==="object"?H[h]?H:n.extend(n.Event(F),H):n.Event(F);if(F.indexOf("!")>=0){H.type=F=F.slice(0,-1);H.exclusive=true}if(!G){H.stopPropagation();if(this.global[F]){n.each(n.cache,function(){if(this.events&&this.events[F]){n.event.trigger(H,J,this.handle.elem)}})}}if(!G||G.nodeType==3||G.nodeType==8){return g}H.result=g;H.target=G;J=n.makeArray(J);J.unshift(H)}H.currentTarget=G;var I=n.data(G,"handle");if(I){I.apply(G,J)}if((!G[F]||(n.nodeName(G,"a")&&F=="click"))&&G["on"+F]&&G["on"+F].apply(G,J)===false){H.result=false}if(!D&&G[F]&&!H.isDefaultPrevented()&&!(n.nodeName(G,"a")&&F=="click")){this.triggered=true;try{G[F]()}catch(K){}}this.triggered=false;if(!H.isPropagationStopped()){var E=G.parentNode||G.ownerDocument;if(E){n.event.trigger(H,J,E,true)}}},handle:function(J){var I,D;J=arguments[0]=n.event.fix(J||l.event);var K=J.type.split(".");J.type=K.shift();I=!K.length&&!J.exclusive;var H=RegExp("(^|\\.)"+K.slice().sort().join(".*\\.")+"(\\.|$)");D=(n.data(this,"events")||{})[J.type];for(var F in D){var G=D[F];if(I||H.test(G.type)){J.handler=G;J.data=G.data;var E=G.apply(this,arguments);if(E!==g){J.result=E;if(E===false){J.preventDefault();J.stopPropagation()}}if(J.isImmediatePropagationStopped()){break}}}},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(G){if(G[h]){return G}var E=G;G=n.Event(E);for(var F=this.props.length,I;F;){I=this.props[--F];G[I]=E[I]}if(!G.target){G.target=G.srcElement||document}if(G.target.nodeType==3){G.target=G.target.parentNode}if(!G.relatedTarget&&G.fromElement){G.relatedTarget=G.fromElement==G.target?G.toElement:G.fromElement}if(G.pageX==null&&G.clientX!=null){var H=document.documentElement,D=document.body;G.pageX=G.clientX+(H&&H.scrollLeft||D&&D.scrollLeft||0)-(H.clientLeft||0);G.pageY=G.clientY+(H&&H.scrollTop||D&&D.scrollTop||0)-(H.clientTop||0)}if(!G.which&&((G.charCode||G.charCode===0)?G.charCode:G.keyCode)){G.which=G.charCode||G.keyCode}if(!G.metaKey&&G.ctrlKey){G.metaKey=G.ctrlKey}if(!G.which&&G.button){G.which=(G.button&1?1:(G.button&2?3:(G.button&4?2:0)))}return G},proxy:function(E,D){D=D||function(){return E.apply(this,arguments)};D.guid=E.guid=E.guid||D.guid||this.guid++;return D},special:{ready:{setup:A,teardown:function(){}}},specialAll:{live:{setup:function(D,E){n.event.add(this,E[0],c)},teardown:function(F){if(F.length){var D=0,E=RegExp("(^|\\.)"+F[0]+"(\\.|$)");n.each((n.data(this,"events").live||{}),function(){if(E.test(this.type)){D++}});if(D<1){n.event.remove(this,F[0],c)}}}}}};n.Event=function(D){if(!this.preventDefault){return new n.Event(D)}if(D&&D.type){this.originalEvent=D;this.type=D.type;this.timeStamp=D.timeStamp}else{this.type=D}if(!this.timeStamp){this.timeStamp=e()}this[h]=true};function k(){return false}function t(){return true}n.Event.prototype={preventDefault:function(){this.isDefaultPrevented=t;var D=this.originalEvent;if(!D){return}if(D.preventDefault){D.preventDefault()}D.returnValue=false},stopPropagation:function(){this.isPropagationStopped=t;var D=this.originalEvent;if(!D){return}if(D.stopPropagation){D.stopPropagation()}D.cancelBubble=true},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=t;this.stopPropagation()},isDefaultPrevented:k,isPropagationStopped:k,isImmediatePropagationStopped:k};var a=function(E){var D=E.relatedTarget;while(D&&D!=this){try{D=D.parentNode}catch(F){D=this}}if(D!=this){E.type=E.data;n.event.handle.apply(this,arguments)}};n.each({mouseover:"mouseenter",mouseout:"mouseleave"},function(E,D){n.event.special[D]={setup:function(){n.event.add(this,E,a,D)},teardown:function(){n.event.remove(this,E,a)}}});n.fn.extend({bind:function(E,F,D){return E=="unload"?this.one(E,F,D):this.each(function(){n.event.add(this,E,D||F,D&&F)})},one:function(F,G,E){var D=n.event.proxy(E||G,function(H){n(this).unbind(H,D);return(E||G).apply(this,arguments)});return this.each(function(){n.event.add(this,F,D,E&&G)})},unbind:function(E,D){return this.each(function(){n.event.remove(this,E,D)})},trigger:function(D,E){return this.each(function(){n.event.trigger(D,E,this)})},triggerHandler:function(D,F){if(this[0]){var E=n.Event(D);E.preventDefault();E.stopPropagation();n.event.trigger(E,F,this[0]);return E.result}},toggle:function(F){var D=arguments,E=1;while(E<D.length){n.event.proxy(F,D[E++])}return this.click(n.event.proxy(F,function(G){this.lastToggle=(this.lastToggle||0)%E;G.preventDefault();return D[this.lastToggle++].apply(this,arguments)||false}))},hover:function(D,E){return this.mouseenter(D).mouseleave(E)},ready:function(D){A();if(n.isReady){D.call(document,n)}else{n.readyList.push(D)}return this},live:function(F,E){var D=n.event.proxy(E);D.guid+=this.selector+F;n(document).bind(i(F,this.selector),this.selector,D);return this},die:function(E,D){n(document).unbind(i(E,this.selector),D?{guid:D.guid+this.selector+E}:null);return this}});function c(G){var D=RegExp("(^|\\.)"+G.type+"(\\.|$)"),F=true,E=[];n.each(n.data(this,"events").live||[],function(H,I){if(D.test(I.type)){var J=n(G.target).closest(I.data)[0];if(J){E.push({elem:J,fn:I})}}});n.each(E,function(){if(!G.isImmediatePropagationStopped()&&this.fn.call(this.elem,G,this.fn.data)===false){F=false}});return F}function i(E,D){return["live",E,D.replace(/\./g,"`").replace(/ /g,"|")].join(".")}n.extend({isReady:false,readyList:[],ready:function(){if(!n.isReady){n.isReady=true;if(n.readyList){n.each(n.readyList,function(){this.call(document,n)});n.readyList=null}n(document).triggerHandler("ready")}}});var w=false;function A(){if(w){return}w=true;if(document.addEventListener){document.addEventListener("DOMContentLoaded",function(){document.removeEventListener("DOMContentLoaded",arguments.callee,false);n.ready()},false)}else{if(document.attachEvent){document.attachEvent("onreadystatechange",function(){if(document.readyState==="complete"){document.detachEvent("onreadystatechange",arguments.callee);n.ready()}});if(document.documentElement.doScroll&&!l.frameElement){(function(){if(n.isReady){return}try{document.documentElement.doScroll("left")}catch(D){setTimeout(arguments.callee,0);return}n.ready()})()}}}n.event.add(l,"load",n.ready)}n.each(("blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error").split(","),function(E,D){n.fn[D]=function(F){return F?this.bind(D,F):this.trigger(D)}});n(l).bind("unload",function(){for(var D in n.cache){if(D!=1&&n.cache[D].handle){n.event.remove(n.cache[D].handle.elem)}}});(function(){n.support={};var E=document.documentElement,F=document.createElement("script"),J=document.createElement("div"),I="script"+(new Date).getTime();J.style.display="none";J.innerHTML='   <link/><table></table><a href="/a" style="color:red;float:left;opacity:.5;">a</a><select><option>text</option></select><object><param/></object>';var G=J.getElementsByTagName("*"),D=J.getElementsByTagName("a")[0];if(!G||!G.length||!D){return}n.support={leadingWhitespace:J.firstChild.nodeType==3,tbody:!J.getElementsByTagName("tbody").length,objectAll:!!J.getElementsByTagName("object")[0].getElementsByTagName("*").length,htmlSerialize:!!J.getElementsByTagName("link").length,style:/red/.test(D.getAttribute("style")),hrefNormalized:D.getAttribute("href")==="/a",opacity:D.style.opacity==="0.5",cssFloat:!!D.style.cssFloat,scriptEval:false,noCloneEvent:true,boxModel:null};F.type="text/javascript";try{F.appendChild(document.createTextNode("window."+I+"=1;"))}catch(H){}E.insertBefore(F,E.firstChild);if(l[I]){n.support.scriptEval=true;delete l[I]}E.removeChild(F);if(J.attachEvent&&J.fireEvent){J.attachEvent("onclick",function(){n.support.noCloneEvent=false;J.detachEvent("onclick",arguments.callee)});J.cloneNode(true).fireEvent("onclick")}n(function(){var K=document.createElement("div");K.style.width="1px";K.style.paddingLeft="1px";document.body.appendChild(K);n.boxModel=n.support.boxModel=K.offsetWidth===2;document.body.removeChild(K)})})();var v=n.support.cssFloat?"cssFloat":"styleFloat";n.props={"for":"htmlFor","class":"className","float":v,cssFloat:v,styleFloat:v,readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",tabindex:"tabIndex"};n.fn.extend({_load:n.fn.load,load:function(F,I,J){if(typeof F!=="string"){return this._load(F)}var H=F.indexOf(" ");if(H>=0){var D=F.slice(H,F.length);F=F.slice(0,H)}var G="GET";if(I){if(n.isFunction(I)){J=I;I=null}else{if(typeof I==="object"){I=n.param(I);G="POST"}}}var E=this;n.ajax({url:F,type:G,dataType:"html",data:I,complete:function(L,K){if(K=="success"||K=="notmodified"){E.html(D?n("<div/>").append(L.responseText.replace(/<script(.|\s)*?\/script>/g,"")).find(D):L.responseText)}if(J){E.each(J,[L.responseText,K,L])}}});return this},serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?n.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||/select|textarea/i.test(this.nodeName)||/text|hidden|password/i.test(this.type))}).map(function(D,E){var F=n(this).val();return F==null?null:n.isArray(F)?n.map(F,function(H,G){return{name:E.name,value:H}}):{name:E.name,value:F}}).get()}});n.each("ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","),function(D,E){n.fn[E]=function(F){return this.bind(E,F)}});var q=e();n.extend({get:function(D,F,G,E){if(n.isFunction(F)){G=F;F=null}return n.ajax({type:"GET",url:D,data:F,success:G,dataType:E})},getScript:function(D,E){return n.get(D,null,E,"script")},getJSON:function(D,E,F){return n.get(D,E,F,"json")},post:function(D,F,G,E){if(n.isFunction(F)){G=F;F={}}return n.ajax({type:"POST",url:D,data:F,success:G,dataType:E})},ajaxSetup:function(D){n.extend(n.ajaxSettings,D)},ajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:function(){return l.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest()},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",text:"text/plain",_default:"*/*"}},lastModified:{},ajax:function(L){L=n.extend(true,L,n.extend(true,{},n.ajaxSettings,L));var V,E=/=\?(&|$)/g,Q,U,F=L.type.toUpperCase();if(L.data&&L.processData&&typeof L.data!=="string"){L.data=n.param(L.data)}if(L.dataType=="jsonp"){if(F=="GET"){if(!L.url.match(E)){L.url+=(L.url.match(/\?/)?"&":"?")+(L.jsonp||"callback")+"=?"}}else{if(!L.data||!L.data.match(E)){L.data=(L.data?L.data+"&":"")+(L.jsonp||"callback")+"=?"}}L.dataType="json"}if(L.dataType=="json"&&(L.data&&L.data.match(E)||L.url.match(E))){V="jsonp"+q++;if(L.data){L.data=(L.data+"").replace(E,"="+V+"$1")}L.url=L.url.replace(E,"="+V+"$1");L.dataType="script";l[V]=function(W){U=W;H();K();l[V]=g;try{delete l[V]}catch(X){}if(G){G.removeChild(S)}}}if(L.dataType=="script"&&L.cache==null){L.cache=false}if(L.cache===false&&F=="GET"){var D=e();var T=L.url.replace(/(\?|&)_=.*?(&|$)/,"$1_="+D+"$2");L.url=T+((T==L.url)?(L.url.match(/\?/)?"&":"?")+"_="+D:"")}if(L.data&&F=="GET"){L.url+=(L.url.match(/\?/)?"&":"?")+L.data;L.data=null}if(L.global&&!n.active++){n.event.trigger("ajaxStart")}var P=/^(\w+:)?\/\/([^\/?#]+)/.exec(L.url);if(L.dataType=="script"&&F=="GET"&&P&&(P[1]&&P[1]!=location.protocol||P[2]!=location.host)){var G=document.getElementsByTagName("head")[0];var S=document.createElement("script");S.src=L.url;if(L.scriptCharset){S.charset=L.scriptCharset}if(!V){var N=false;S.onload=S.onreadystatechange=function(){if(!N&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){N=true;H();K();G.removeChild(S)}}}G.appendChild(S);return g}var J=false;var I=L.xhr();if(L.username){I.open(F,L.url,L.async,L.username,L.password)}else{I.open(F,L.url,L.async)}try{if(L.data){I.setRequestHeader("Content-Type",L.contentType)}if(L.ifModified){I.setRequestHeader("If-Modified-Since",n.lastModified[L.url]||"Thu, 01 Jan 1970 00:00:00 GMT")}I.setRequestHeader("X-Requested-With","XMLHttpRequest");I.setRequestHeader("Accept",L.dataType&&L.accepts[L.dataType]?L.accepts[L.dataType]+", */*":L.accepts._default)}catch(R){}if(L.beforeSend&&L.beforeSend(I,L)===false){if(L.global&&!--n.active){n.event.trigger("ajaxStop")}I.abort();return false}if(L.global){n.event.trigger("ajaxSend",[I,L])}var M=function(W){if(I.readyState==0){if(O){clearInterval(O);O=null;if(L.global&&!--n.active){n.event.trigger("ajaxStop")}}}else{if(!J&&I&&(I.readyState==4||W=="timeout")){J=true;if(O){clearInterval(O);O=null}Q=W=="timeout"?"timeout":!n.httpSuccess(I)?"error":L.ifModified&&n.httpNotModified(I,L.url)?"notmodified":"success";if(Q=="success"){try{U=n.httpData(I,L.dataType,L)}catch(Y){Q="parsererror"}}if(Q=="success"){var X;try{X=I.getResponseHeader("Last-Modified")}catch(Y){}if(L.ifModified&&X){n.lastModified[L.url]=X}if(!V){H()}}else{n.handleError(L,I,Q)}K();if(L.async){I=null}}}};if(L.async){var O=setInterval(M,13);if(L.timeout>0){setTimeout(function(){if(I){if(!J){M("timeout")}if(I){I.abort()}}},L.timeout)}}try{I.send(L.data)}catch(R){n.handleError(L,I,null,R)}if(!L.async){M()}function H(){if(L.success){L.success(U,Q)}if(L.global){n.event.trigger("ajaxSuccess",[I,L])}}function K(){if(L.complete){L.complete(I,Q)}if(L.global){n.event.trigger("ajaxComplete",[I,L])}if(L.global&&!--n.active){n.event.trigger("ajaxStop")}}return I},handleError:function(E,G,D,F){if(E.error){E.error(G,D,F)}if(E.global){n.event.trigger("ajaxError",[G,E,F])}},active:0,httpSuccess:function(E){try{return !E.status&&location.protocol=="file:"||(E.status>=200&&E.status<300)||E.status==304||E.status==1223}catch(D){}return false},httpNotModified:function(F,D){try{var G=F.getResponseHeader("Last-Modified");return F.status==304||G==n.lastModified[D]}catch(E){}return false},httpData:function(I,G,F){var E=I.getResponseHeader("content-type"),D=G=="xml"||!G&&E&&E.indexOf("xml")>=0,H=D?I.responseXML:I.responseText;if(D&&H.documentElement.tagName=="parsererror"){throw"parsererror"}if(F&&F.dataFilter){H=F.dataFilter(H,G)}if(typeof H==="string"){if(G=="script"){n.globalEval(H)}if(G=="json"){H=l["eval"]("("+H+")")}}return H},param:function(D){var F=[];function G(H,I){F[F.length]=encodeURIComponent(H)+"="+encodeURIComponent(I)}if(n.isArray(D)||D.jquery){n.each(D,function(){G(this.name,this.value)})}else{for(var E in D){if(n.isArray(D[E])){n.each(D[E],function(){G(E,this)})}else{G(E,n.isFunction(D[E])?D[E]():D[E])}}}return F.join("&").replace(/%20/g,"+")}});var m={},d=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];function s(E,D){var F={};n.each(d.concat.apply([],d.slice(0,D)),function(){F[this]=E});return F}n.fn.extend({show:function(I,K){if(I){return this.animate(s("show",3),I,K)}else{for(var G=0,E=this.length;G<E;G++){var D=n.data(this[G],"olddisplay");this[G].style.display=D||"";if(n.css(this[G],"display")==="none"){var F=this[G].tagName,J;if(m[F]){J=m[F]}else{var H=n("<"+F+" />").appendTo("body");J=H.css("display");if(J==="none"){J="block"}H.remove();m[F]=J}this[G].style.display=n.data(this[G],"olddisplay",J)}}return this}},hide:function(G,H){if(G){return this.animate(s("hide",3),G,H)}else{for(var F=0,E=this.length;F<E;F++){var D=n.data(this[F],"olddisplay");if(!D&&D!=="none"){n.data(this[F],"olddisplay",n.css(this[F],"display"))}this[F].style.display="none"}return this}},_toggle:n.fn.toggle,toggle:function(F,E){var D=typeof F==="boolean";return n.isFunction(F)&&n.isFunction(E)?this._toggle.apply(this,arguments):F==null||D?this.each(function(){var G=D?F:n(this).is(":hidden");n(this)[G?"show":"hide"]()}):this.animate(s("toggle",3),F,E)},fadeTo:function(D,F,E){return this.animate({opacity:F},D,E)},animate:function(H,E,G,F){var D=n.speed(E,G,F);return this[D.queue===false?"each":"queue"](function(){var J=n.extend({},D),L,K=this.nodeType==1&&n(this).is(":hidden"),I=this;for(L in H){if(H[L]=="hide"&&K||H[L]=="show"&&!K){return J.complete.call(this)}if((L=="height"||L=="width")&&this.style){J.display=n.css(this,"display");J.overflow=this.style.overflow}}if(J.overflow!=null){this.style.overflow="hidden"}J.curAnim=n.extend({},H);n.each(H,function(N,R){var Q=new n.fx(I,J,N);if(/toggle|show|hide/.test(R)){Q[R=="toggle"?K?"show":"hide":R](H)}else{var P=R.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),S=Q.cur(true)||0;if(P){var M=parseFloat(P[2]),O=P[3]||"px";if(O!="px"){I.style[N]=(M||1)+O;S=((M||1)/Q.cur(true))*S;I.style[N]=S+O}if(P[1]){M=((P[1]=="-="?-1:1)*M)+S}Q.custom(S,M,O)}else{Q.custom(S,R,"")}}});return true})},stop:function(E,D){var F=n.timers;if(E){this.queue([])}this.each(function(){for(var G=F.length-1;G>=0;G--){if(F[G].elem==this){if(D){F[G](true)}F.splice(G,1)}}});if(!D){this.dequeue()}return this}});n.each({slideDown:s("show",1),slideUp:s("hide",1),slideToggle:s("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(D,E){n.fn[D]=function(F,G){return this.animate(E,F,G)}});n.extend({speed:function(F,G,E){var D=typeof F==="object"?F:{complete:E||!E&&G||n.isFunction(F)&&F,duration:F,easing:E&&G||G&&!n.isFunction(G)&&G};D.duration=n.fx.off?0:typeof D.duration==="number"?D.duration:n.fx.speeds[D.duration]||n.fx.speeds._default;D.old=D.complete;D.complete=function(){if(D.queue!==false){n(this).dequeue()}if(n.isFunction(D.old)){D.old.call(this)}};return D},easing:{linear:function(F,G,D,E){return D+E*F},swing:function(F,G,D,E){return((-Math.cos(F*Math.PI)/2)+0.5)*E+D}},timers:[],timerId:null,fx:function(E,D,F){this.options=D;this.elem=E;this.prop=F;if(!D.orig){D.orig={}}}});n.fx.prototype={update:function(){if(this.options.step){this.options.step.call(this.elem,this.now,this)}(n.fx.step[this.prop]||n.fx.step._default)(this);if((this.prop=="height"||this.prop=="width")&&this.elem.style){this.elem.style.display="block"}},cur:function(E){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null)){return this.elem[this.prop]}var D=parseFloat(n.css(this.elem,this.prop,E));return D&&D>-10000?D:parseFloat(n.curCSS(this.elem,this.prop))||0},custom:function(H,G,F){this.startTime=e();this.start=H;this.end=G;this.unit=F||this.unit||"px";this.now=this.start;this.pos=this.state=0;var D=this;function E(I){return D.step(I)}E.elem=this.elem;n.timers.push(E);if(E()&&n.timerId==null){n.timerId=setInterval(function(){var J=n.timers;for(var I=0;I<J.length;I++){if(!J[I]()){J.splice(I--,1)}}if(!J.length){clearInterval(n.timerId);n.timerId=null}},13)}},show:function(){this.options.orig[this.prop]=n.attr(this.elem.style,this.prop);this.options.show=true;this.custom(this.prop=="width"||this.prop=="height"?1:0,this.cur());n(this.elem).show()},hide:function(){this.options.orig[this.prop]=n.attr(this.elem.style,this.prop);this.options.hide=true;this.custom(this.cur(),0)},step:function(G){var F=e();if(G||F>=this.options.duration+this.startTime){this.now=this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;var D=true;for(var E in this.options.curAnim){if(this.options.curAnim[E]!==true){D=false}}if(D){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;this.elem.style.display=this.options.display;if(n.css(this.elem,"display")=="none"){this.elem.style.display="block"}}if(this.options.hide){n(this.elem).hide()}if(this.options.hide||this.options.show){for(var H in this.options.curAnim){n.attr(this.elem.style,H,this.options.orig[H])}}}if(D){this.options.complete.call(this.elem)}return false}else{var I=F-this.startTime;this.state=I/this.options.duration;this.pos=n.easing[this.options.easing||(n.easing.swing?"swing":"linear")](this.state,I,0,1,this.options.duration);this.now=this.start+((this.end-this.start)*this.pos);this.update()}return true}};n.extend(n.fx,{speeds:{slow:600,fast:200,_default:400},step:{opacity:function(D){n.attr(D.elem.style,"opacity",D.now)},_default:function(D){if(D.elem.style&&D.elem.style[D.prop]!=null){D.elem.style[D.prop]=D.now+D.unit}else{D.elem[D.prop]=D.now}}}});if(document.documentElement.getBoundingClientRect){n.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return n.offset.bodyOffset(this[0])}var F=this[0].getBoundingClientRect(),I=this[0].ownerDocument,E=I.body,D=I.documentElement,K=D.clientTop||E.clientTop||0,J=D.clientLeft||E.clientLeft||0,H=F.top+(self.pageYOffset||n.boxModel&&D.scrollTop||E.scrollTop)-K,G=F.left+(self.pageXOffset||n.boxModel&&D.scrollLeft||E.scrollLeft)-J;return{top:H,left:G}}}else{n.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return n.offset.bodyOffset(this[0])}n.offset.initialized||n.offset.initialize();var I=this[0],F=I.offsetParent,E=I,N=I.ownerDocument,L,G=N.documentElement,J=N.body,K=N.defaultView,D=K.getComputedStyle(I,null),M=I.offsetTop,H=I.offsetLeft;while((I=I.parentNode)&&I!==J&&I!==G){L=K.getComputedStyle(I,null);M-=I.scrollTop,H-=I.scrollLeft;if(I===F){M+=I.offsetTop,H+=I.offsetLeft;if(n.offset.doesNotAddBorder&&!(n.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(I.tagName))){M+=parseInt(L.borderTopWidth,10)||0,H+=parseInt(L.borderLeftWidth,10)||0}E=F,F=I.offsetParent}if(n.offset.subtractsBorderForOverflowNotVisible&&L.overflow!=="visible"){M+=parseInt(L.borderTopWidth,10)||0,H+=parseInt(L.borderLeftWidth,10)||0}D=L}if(D.position==="relative"||D.position==="static"){M+=J.offsetTop,H+=J.offsetLeft}if(D.position==="fixed"){M+=Math.max(G.scrollTop,J.scrollTop),H+=Math.max(G.scrollLeft,J.scrollLeft)}return{top:M,left:H}}}n.offset={initialize:function(){if(this.initialized){return}var K=document.body,E=document.createElement("div"),G,F,M,H,L,D,I=K.style.marginTop,J='<div style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;"><div></div></div><table style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;"cellpadding="0"cellspacing="0"><tr><td></td></tr></table>';L={position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"};for(D in L){E.style[D]=L[D]}E.innerHTML=J;K.insertBefore(E,K.firstChild);G=E.firstChild,F=G.firstChild,H=G.nextSibling.firstChild.firstChild;this.doesNotAddBorder=(F.offsetTop!==5);this.doesAddBorderForTableAndCells=(H.offsetTop===5);G.style.overflow="hidden",G.style.position="relative";this.subtractsBorderForOverflowNotVisible=(F.offsetTop===-5);K.style.marginTop="1px";this.doesNotIncludeMarginInBodyOffset=(K.offsetTop===0);K.style.marginTop=I;K.removeChild(E);this.initialized=true},bodyOffset:function(D){n.offset.initialized||n.offset.initialize();var F=D.offsetTop,E=D.offsetLeft;if(n.offset.doesNotIncludeMarginInBodyOffset){F+=parseInt(n.curCSS(D,"marginTop",true),10)||0,E+=parseInt(n.curCSS(D,"marginLeft",true),10)||0}return{top:F,left:E}}};n.fn.extend({position:function(){var H=0,G=0,E;if(this[0]){var F=this.offsetParent(),I=this.offset(),D=/^body|html$/i.test(F[0].tagName)?{top:0,left:0}:F.offset();I.top-=j(this,"marginTop");I.left-=j(this,"marginLeft");D.top+=j(F,"borderTopWidth");D.left+=j(F,"borderLeftWidth");E={top:I.top-D.top,left:I.left-D.left}}return E},offsetParent:function(){var D=this[0].offsetParent||document.body;while(D&&(!/^body|html$/i.test(D.tagName)&&n.css(D,"position")=="static")){D=D.offsetParent}return n(D)}});n.each(["Left","Top"],function(E,D){var F="scroll"+D;n.fn[F]=function(G){if(!this[0]){return null}return G!==g?this.each(function(){this==l||this==document?l.scrollTo(!E?G:n(l).scrollLeft(),E?G:n(l).scrollTop()):this[F]=G}):this[0]==l||this[0]==document?self[E?"pageYOffset":"pageXOffset"]||n.boxModel&&document.documentElement[F]||document.body[F]:this[0][F]}});n.each(["Height","Width"],function(G,E){var D=G?"Left":"Top",F=G?"Right":"Bottom";n.fn["inner"+E]=function(){return this[E.toLowerCase()]()+j(this,"padding"+D)+j(this,"padding"+F)};n.fn["outer"+E]=function(I){return this["inner"+E]()+j(this,"border"+D+"Width")+j(this,"border"+F+"Width")+(I?j(this,"margin"+D)+j(this,"margin"+F):0)};var H=E.toLowerCase();n.fn[H]=function(I){return this[0]==l?document.compatMode=="CSS1Compat"&&document.documentElement["client"+E]||document.body["client"+E]:this[0]==document?Math.max(document.documentElement["client"+E],document.body["scroll"+E],document.documentElement["scroll"+E],document.body["offset"+E],document.documentElement["offset"+E]):I===g?(this.length?n.css(this[0],H):null):this.css(H,typeof I==="string"?I:I+"px")}})})();
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.4_min.js b/devtools/client/inspector/markup/test/lib_jquery_1.4_min.js
new file mode 100644
index 0000000000..5c70e4c5f3
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.4_min.js
@@ -0,0 +1,151 @@
+/*!
+ * jQuery JavaScript Library v1.4
+ * http://jquery.com/
+ *
+ * Copyright 2010, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://docs.jquery.com/License
+ *
+ * Includes Sizzle.js
+ * http://sizzlejs.com/
+ * Copyright 2010, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ *
+ * Date: Wed Jan 13 15:23:05 2010 -0500
+ */
+(function(A,w){function oa(){if(!c.isReady){try{s.documentElement.doScroll("left")}catch(a){setTimeout(oa,1);return}c.ready()}}function La(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function $(a,b,d,f,e,i){var j=a.length;if(typeof b==="object"){for(var o in b)$(a,o,b[o],f,e,d);return a}if(d!==w){f=!i&&f&&c.isFunction(d);for(o=0;o<j;o++)e(a[o],b,f?d.call(a[o],o,e(a[o],b)):d,i);return a}return j?
+e(a[0],b):null}function K(){return(new Date).getTime()}function aa(){return false}function ba(){return true}function pa(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function qa(a){var b=true,d=[],f=[],e=arguments,i,j,o,p,n,t=c.extend({},c.data(this,"events").live);for(p in t){j=t[p];if(j.live===a.type||j.altLive&&c.inArray(a.type,j.altLive)>-1){i=j.data;i.beforeFilter&&i.beforeFilter[a.type]&&!i.beforeFilter[a.type](a)||f.push(j.selector)}else delete t[p]}i=c(a.target).closest(f,a.currentTarget);
+n=0;for(l=i.length;n<l;n++)for(p in t){j=t[p];o=i[n].elem;f=null;if(i[n].selector===j.selector){if(j.live==="mouseenter"||j.live==="mouseleave")f=c(a.relatedTarget).closest(j.selector)[0];if(!f||f!==o)d.push({elem:o,fn:j})}}n=0;for(l=d.length;n<l;n++){i=d[n];a.currentTarget=i.elem;a.data=i.fn.data;if(i.fn.apply(i.elem,e)===false){b=false;break}}return b}function ra(a,b){return["live",a,b.replace(/\./g,"`").replace(/ /g,"&")].join(".")}function sa(a){return!a||!a.parentNode||a.parentNode.nodeType===
+11}function ta(a,b){var d=0;b.each(function(){if(this.nodeName===(a[d]&&a[d].nodeName)){var f=c.data(a[d++]),e=c.data(this,f);if(f=f&&f.events){delete e.handle;e.events={};for(var i in f)for(var j in f[i])c.event.add(this,i,f[i][j],f[i][j].data)}}})}function ua(a,b,d){var f,e,i;if(a.length===1&&typeof a[0]==="string"&&a[0].length<512&&a[0].indexOf("<option")<0){e=true;if(i=c.fragments[a[0]])if(i!==1)f=i}if(!f){b=b&&b[0]?b[0].ownerDocument||b[0]:s;f=b.createDocumentFragment();c.clean(a,b,f,d)}if(e)c.fragments[a[0]]=
+i?f:1;return{fragment:f,cacheable:e}}function T(a){for(var b=0,d,f;(d=a[b])!=null;b++)if(!c.noData[d.nodeName.toLowerCase()]&&(f=d[H]))delete c.cache[f]}function L(a,b){var d={};c.each(va.concat.apply([],va.slice(0,b)),function(){d[this]=a});return d}function wa(a){return"scrollTo"in a&&a.document?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var c=function(a,b){return new c.fn.init(a,b)},Ma=A.jQuery,Na=A.$,s=A.document,U,Oa=/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/,Pa=/^.[^:#\[\.,]*$/,Qa=/\S/,
+Ra=/^(\s|\u00A0)+|(\s|\u00A0)+$/g,Sa=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,P=navigator.userAgent,xa=false,Q=[],M,ca=Object.prototype.toString,da=Object.prototype.hasOwnProperty,ea=Array.prototype.push,R=Array.prototype.slice,V=Array.prototype.indexOf;c.fn=c.prototype={init:function(a,b){var d,f;if(!a)return this;if(a.nodeType){this.context=this[0]=a;this.length=1;return this}if(typeof a==="string")if((d=Oa.exec(a))&&(d[1]||!b))if(d[1]){f=b?b.ownerDocument||b:s;if(a=Sa.exec(a))if(c.isPlainObject(b)){a=[s.createElement(a[1])];
+c.fn.attr.call(a,b,true)}else a=[f.createElement(a[1])];else{a=ua([d[1]],[f]);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodes}}else{if(b=s.getElementById(d[2])){if(b.id!==d[2])return U.find(a);this.length=1;this[0]=b}this.context=s;this.selector=a;return this}else if(!b&&/^\w+$/.test(a)){this.selector=a;this.context=s;a=s.getElementsByTagName(a)}else return!b||b.jquery?(b||U).find(a):c(b).find(a);else if(c.isFunction(a))return U.ready(a);if(a.selector!==w){this.selector=a.selector;
+this.context=a.context}return c.isArray(a)?this.setArray(a):c.makeArray(a,this)},selector:"",jquery:"1.4",length:0,size:function(){return this.length},toArray:function(){return R.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this.slice(a)[0]:this[a]},pushStack:function(a,b,d){a=c(a||null);a.prevObject=this;a.context=this.context;if(b==="find")a.selector=this.selector+(this.selector?" ":"")+d;else if(b)a.selector=this.selector+"."+b+"("+d+")";return a},setArray:function(a){this.length=
+0;ea.apply(this,a);return this},each:function(a,b){return c.each(this,a,b)},ready:function(a){c.bindReady();if(c.isReady)a.call(s,c);else Q&&Q.push(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(R.apply(this,arguments),"slice",R.call(arguments).join(","))},map:function(a){return this.pushStack(c.map(this,function(b,d){return a.call(b,d,b)}))},end:function(){return this.prevObject||
+c(null)},push:ea,sort:[].sort,splice:[].splice};c.fn.init.prototype=c.fn;c.extend=c.fn.extend=function(){var a=arguments[0]||{},b=1,d=arguments.length,f=false,e,i,j,o;if(typeof a==="boolean"){f=a;a=arguments[1]||{};b=2}if(typeof a!=="object"&&!c.isFunction(a))a={};if(d===b){a=this;--b}for(;b<d;b++)if((e=arguments[b])!=null)for(i in e){j=a[i];o=e[i];if(a!==o)if(f&&o&&(c.isPlainObject(o)||c.isArray(o))){j=j&&(c.isPlainObject(j)||c.isArray(j))?j:c.isArray(o)?[]:{};a[i]=c.extend(f,j,o)}else if(o!==w)a[i]=
+o}return a};c.extend({noConflict:function(a){A.$=Na;if(a)A.jQuery=Ma;return c},isReady:false,ready:function(){if(!c.isReady){if(!s.body)return setTimeout(c.ready,13);c.isReady=true;if(Q){for(var a,b=0;a=Q[b++];)a.call(s,c);Q=null}c.fn.triggerHandler&&c(s).triggerHandler("ready")}},bindReady:function(){if(!xa){xa=true;if(s.readyState==="complete")return c.ready();if(s.addEventListener){s.addEventListener("DOMContentLoaded",M,false);A.addEventListener("load",c.ready,false)}else if(s.attachEvent){s.attachEvent("onreadystatechange",
+M);A.attachEvent("onload",c.ready);var a=false;try{a=A.frameElement==null}catch(b){}s.documentElement.doScroll&&a&&oa()}}},isFunction:function(a){return ca.call(a)==="[object Function]"},isArray:function(a){return ca.call(a)==="[object Array]"},isPlainObject:function(a){if(!a||ca.call(a)!=="[object Object]"||a.nodeType||a.setInterval)return false;if(a.constructor&&!da.call(a,"constructor")&&!da.call(a.constructor.prototype,"isPrototypeOf"))return false;var b;for(b in a);return b===w||da.call(a,b)},
+isEmptyObject:function(a){for(var b in a)return false;return true},noop:function(){},globalEval:function(a){if(a&&Qa.test(a)){var b=s.getElementsByTagName("head")[0]||s.documentElement,d=s.createElement("script");d.type="text/javascript";if(c.support.scriptEval)d.appendChild(s.createTextNode(a));else d.text=a;b.insertBefore(d,b.firstChild);b.removeChild(d)}},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){var f,e=0,i=a.length,j=i===w||c.isFunction(a);
+if(d)if(j)for(f in a){if(b.apply(a[f],d)===false)break}else for(;e<i;){if(b.apply(a[e++],d)===false)break}else if(j)for(f in a){if(b.call(a[f],f,a[f])===false)break}else for(d=a[0];e<i&&b.call(d,e,d)!==false;d=a[++e]);return a},trim:function(a){return(a||"").replace(Ra,"")},makeArray:function(a,b){b=b||[];if(a!=null)a.length==null||typeof a==="string"||c.isFunction(a)||typeof a!=="function"&&a.setInterval?ea.call(b,a):c.merge(b,a);return b},inArray:function(a,b){if(b.indexOf)return b.indexOf(a);for(var d=
+0,f=b.length;d<f;d++)if(b[d]===a)return d;return-1},merge:function(a,b){var d=a.length,f=0;if(typeof b.length==="number")for(var e=b.length;f<e;f++)a[d++]=b[f];else for(;b[f]!==w;)a[d++]=b[f++];a.length=d;return a},grep:function(a,b,d){for(var f=[],e=0,i=a.length;e<i;e++)!d!==!b(a[e],e)&&f.push(a[e]);return f},map:function(a,b,d){for(var f=[],e,i=0,j=a.length;i<j;i++){e=b(a[i],i,d);if(e!=null)f[f.length]=e}return f.concat.apply([],f)},guid:1,proxy:function(a,b,d){if(arguments.length===2)if(typeof b===
+"string"){d=a;a=d[b];b=w}else if(b&&!c.isFunction(b)){d=b;b=w}if(!b&&a)b=function(){return a.apply(d||this,arguments)};if(a)b.guid=a.guid=a.guid||b.guid||c.guid++;return b},uaMatch:function(a){var b={browser:""};a=a.toLowerCase();if(/webkit/.test(a))b={browser:"webkit",version:/webkit[\/ ]([\w.]+)/};else if(/opera/.test(a))b={browser:"opera",version:/version/.test(a)?/version[\/ ]([\w.]+)/:/opera[\/ ]([\w.]+)/};else if(/msie/.test(a))b={browser:"msie",version:/msie ([\w.]+)/};else if(/mozilla/.test(a)&&
+!/compatible/.test(a))b={browser:"mozilla",version:/rv:([\w.]+)/};b.version=(b.version&&b.version.exec(a)||[0,"0"])[1];return b},browser:{}});P=c.uaMatch(P);if(P.browser){c.browser[P.browser]=true;c.browser.version=P.version}if(c.browser.webkit)c.browser.safari=true;if(V)c.inArray=function(a,b){return V.call(b,a)};U=c(s);if(s.addEventListener)M=function(){s.removeEventListener("DOMContentLoaded",M,false);c.ready()};else if(s.attachEvent)M=function(){if(s.readyState==="complete"){s.detachEvent("onreadystatechange",
+M);c.ready()}};if(V)c.inArray=function(a,b){return V.call(b,a)};(function(){c.support={};var a=s.documentElement,b=s.createElement("script"),d=s.createElement("div"),f="script"+K();d.style.display="none";d.innerHTML="   <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";var e=d.getElementsByTagName("*"),i=d.getElementsByTagName("a")[0];if(!(!e||!e.length||!i)){c.support={leadingWhitespace:d.firstChild.nodeType===3,tbody:!d.getElementsByTagName("tbody").length,
+htmlSerialize:!!d.getElementsByTagName("link").length,style:/red/.test(i.getAttribute("style")),hrefNormalized:i.getAttribute("href")==="/a",opacity:/^0.55$/.test(i.style.opacity),cssFloat:!!i.style.cssFloat,checkOn:d.getElementsByTagName("input")[0].value==="on",optSelected:s.createElement("select").appendChild(s.createElement("option")).selected,scriptEval:false,noCloneEvent:true,boxModel:null};b.type="text/javascript";try{b.appendChild(s.createTextNode("window."+f+"=1;"))}catch(j){}a.insertBefore(b,
+a.firstChild);if(A[f]){c.support.scriptEval=true;delete A[f]}a.removeChild(b);if(d.attachEvent&&d.fireEvent){d.attachEvent("onclick",function o(){c.support.noCloneEvent=false;d.detachEvent("onclick",o)});d.cloneNode(true).fireEvent("onclick")}c(function(){var o=s.createElement("div");o.style.width=o.style.paddingLeft="1px";s.body.appendChild(o);c.boxModel=c.support.boxModel=o.offsetWidth===2;s.body.removeChild(o).style.display="none"});a=function(o){var p=s.createElement("div");o="on"+o;var n=o in
+p;if(!n){p.setAttribute(o,"return;");n=typeof p[o]==="function"}return n};c.support.submitBubbles=a("submit");c.support.changeBubbles=a("change");a=b=d=e=i=null}})();c.props={"for":"htmlFor","class":"className",readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",colspan:"colSpan",tabindex:"tabIndex",usemap:"useMap",frameborder:"frameBorder"};var H="jQuery"+K(),Ta=0,ya={},Ua={};c.extend({cache:{},expando:H,noData:{embed:true,object:true,applet:true},data:function(a,
+b,d){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?ya:a;var f=a[H],e=c.cache;if(!b&&!f)return null;f||(f=++Ta);if(typeof b==="object"){a[H]=f;e=e[f]=c.extend(true,{},b)}else e=e[f]?e[f]:typeof d==="undefined"?Ua:(e[f]={});if(d!==w){a[H]=f;e[b]=d}return typeof b==="string"?e[b]:e}},removeData:function(a,b){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?ya:a;var d=a[H],f=c.cache,e=f[d];if(b){if(e){delete e[b];c.isEmptyObject(e)&&c.removeData(a)}}else{try{delete a[H]}catch(i){a.removeAttribute&&
+a.removeAttribute(H)}delete f[d]}}}});c.fn.extend({data:function(a,b){if(typeof a==="undefined"&&this.length)return c.data(this[0]);else if(typeof a==="object")return this.each(function(){c.data(this,a)});var d=a.split(".");d[1]=d[1]?"."+d[1]:"";if(b===w){var f=this.triggerHandler("getData"+d[1]+"!",[d[0]]);if(f===w&&this.length)f=c.data(this[0],a);return f===w&&d[1]?this.data(d[0]):f}else return this.trigger("setData"+d[1]+"!",[d[0],b]).each(function(){c.data(this,a,b)})},removeData:function(a){return this.each(function(){c.removeData(this,
+a)})}});c.extend({queue:function(a,b,d){if(a){b=(b||"fx")+"queue";var f=c.data(a,b);if(!d)return f||[];if(!f||c.isArray(d))f=c.data(a,b,c.makeArray(d));else f.push(d);return f}},dequeue:function(a,b){b=b||"fx";var d=c.queue(a,b),f=d.shift();if(f==="inprogress")f=d.shift();if(f){b==="fx"&&d.unshift("inprogress");f.call(a,function(){c.dequeue(a,b)})}}});c.fn.extend({queue:function(a,b){if(typeof a!=="string"){b=a;a="fx"}if(b===w)return c.queue(this[0],a);return this.each(function(){var d=c.queue(this,
+a,b);a==="fx"&&d[0]!=="inprogress"&&c.dequeue(this,a)})},dequeue:function(a){return this.each(function(){c.dequeue(this,a)})},delay:function(a,b){a=c.fx?c.fx.speeds[a]||a:a;b=b||"fx";return this.queue(b,function(){var d=this;setTimeout(function(){c.dequeue(d,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])}});var za=/[\n\t]/g,fa=/\s+/,Va=/\r/g,Wa=/href|src|style/,Xa=/(button|input)/i,Ya=/(button|input|object|select|textarea)/i,Za=/^(a|area)$/i,Aa=/radio|checkbox/;c.fn.extend({attr:function(a,
+b){return $(this,a,b,true,c.attr)},removeAttr:function(a){return this.each(function(){c.attr(this,a,"");this.nodeType===1&&this.removeAttribute(a)})},addClass:function(a){if(c.isFunction(a))return this.each(function(p){var n=c(this);n.addClass(a.call(this,p,n.attr("class")))});if(a&&typeof a==="string")for(var b=(a||"").split(fa),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1)if(e.className)for(var i=" "+e.className+" ",j=0,o=b.length;j<o;j++){if(i.indexOf(" "+b[j]+" ")<0)e.className+=
+" "+b[j]}else e.className=a}return this},removeClass:function(a){if(c.isFunction(a))return this.each(function(p){var n=c(this);n.removeClass(a.call(this,p,n.attr("class")))});if(a&&typeof a==="string"||a===w)for(var b=(a||"").split(fa),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1&&e.className)if(a){for(var i=(" "+e.className+" ").replace(za," "),j=0,o=b.length;j<o;j++)i=i.replace(" "+b[j]+" "," ");e.className=i.substring(1,i.length-1)}else e.className=""}return this},toggleClass:function(a,
+b){var d=typeof a,f=typeof b==="boolean";if(c.isFunction(a))return this.each(function(e){var i=c(this);i.toggleClass(a.call(this,e,i.attr("class"),b),b)});return this.each(function(){if(d==="string")for(var e,i=0,j=c(this),o=b,p=a.split(fa);e=p[i++];){o=f?o:!j.hasClass(e);j[o?"addClass":"removeClass"](e)}else if(d==="undefined"||d==="boolean"){this.className&&c.data(this,"__className__",this.className);this.className=this.className||a===false?"":c.data(this,"__className__")||""}})},hasClass:function(a){a=
+" "+a+" ";for(var b=0,d=this.length;b<d;b++)if((" "+this[b].className+" ").replace(za," ").indexOf(a)>-1)return true;return false},val:function(a){if(a===w){var b=this[0];if(b){if(c.nodeName(b,"option"))return(b.attributes.value||{}).specified?b.value:b.text;if(c.nodeName(b,"select")){var d=b.selectedIndex,f=[],e=b.options;b=b.type==="select-one";if(d<0)return null;var i=b?d:0;for(d=b?d+1:e.length;i<d;i++){var j=e[i];if(j.selected){a=c(j).val();if(b)return a;f.push(a)}}return f}if(Aa.test(b.type)&&
+!c.support.checkOn)return b.getAttribute("value")===null?"on":b.value;return(b.value||"").replace(Va,"")}return w}var o=c.isFunction(a);return this.each(function(p){var n=c(this),t=a;if(this.nodeType===1){if(o)t=a.call(this,p,n.val());if(typeof t==="number")t+="";if(c.isArray(t)&&Aa.test(this.type))this.checked=c.inArray(n.val(),t)>=0;else if(c.nodeName(this,"select")){var z=c.makeArray(t);c("option",this).each(function(){this.selected=c.inArray(c(this).val(),z)>=0});if(!z.length)this.selectedIndex=
+-1}else this.value=t}})}});c.extend({attrFn:{val:true,css:true,html:true,text:true,data:true,width:true,height:true,offset:true},attr:function(a,b,d,f){if(!a||a.nodeType===3||a.nodeType===8)return w;if(f&&b in c.attrFn)return c(a)[b](d);f=a.nodeType!==1||!c.isXMLDoc(a);var e=d!==w;b=f&&c.props[b]||b;if(a.nodeType===1){var i=Wa.test(b);if(b in a&&f&&!i){if(e){if(b==="type"&&Xa.test(a.nodeName)&&a.parentNode)throw"type property can't be changed";a[b]=d}if(c.nodeName(a,"form")&&a.getAttributeNode(b))return a.getAttributeNode(b).nodeValue;
+if(b==="tabIndex")return(b=a.getAttributeNode("tabIndex"))&&b.specified?b.value:Ya.test(a.nodeName)||Za.test(a.nodeName)&&a.href?0:w;return a[b]}if(!c.support.style&&f&&b==="style"){if(e)a.style.cssText=""+d;return a.style.cssText}e&&a.setAttribute(b,""+d);a=!c.support.hrefNormalized&&f&&i?a.getAttribute(b,2):a.getAttribute(b);return a===null?w:a}return c.style(a,b,d)}});var $a=function(a){return a.replace(/[^\w\s\.\|`]/g,function(b){return"\\"+b})};c.event={add:function(a,b,d,f){if(!(a.nodeType===
+3||a.nodeType===8)){if(a.setInterval&&a!==A&&!a.frameElement)a=A;if(!d.guid)d.guid=c.guid++;if(f!==w){d=c.proxy(d);d.data=f}var e=c.data(a,"events")||c.data(a,"events",{}),i=c.data(a,"handle"),j;if(!i){j=function(){return typeof c!=="undefined"&&!c.event.triggered?c.event.handle.apply(j.elem,arguments):w};i=c.data(a,"handle",j)}if(i){i.elem=a;b=b.split(/\s+/);for(var o,p=0;o=b[p++];){var n=o.split(".");o=n.shift();d.type=n.slice(0).sort().join(".");var t=e[o],z=this.special[o]||{};if(!t){t=e[o]={};
+if(!z.setup||z.setup.call(a,f,n,d)===false)if(a.addEventListener)a.addEventListener(o,i,false);else a.attachEvent&&a.attachEvent("on"+o,i)}if(z.add)if((n=z.add.call(a,d,f,n,t))&&c.isFunction(n)){n.guid=n.guid||d.guid;d=n}t[d.guid]=d;this.global[o]=true}a=null}}},global:{},remove:function(a,b,d){if(!(a.nodeType===3||a.nodeType===8)){var f=c.data(a,"events"),e,i,j;if(f){if(b===w||typeof b==="string"&&b.charAt(0)===".")for(i in f)this.remove(a,i+(b||""));else{if(b.type){d=b.handler;b=b.type}b=b.split(/\s+/);
+for(var o=0;i=b[o++];){var p=i.split(".");i=p.shift();var n=!p.length,t=c.map(p.slice(0).sort(),$a);t=new RegExp("(^|\\.)"+t.join("\\.(?:.*\\.)?")+"(\\.|$)");var z=this.special[i]||{};if(f[i]){if(d){j=f[i][d.guid];delete f[i][d.guid]}else for(var B in f[i])if(n||t.test(f[i][B].type))delete f[i][B];z.remove&&z.remove.call(a,p,j);for(e in f[i])break;if(!e){if(!z.teardown||z.teardown.call(a,p)===false)if(a.removeEventListener)a.removeEventListener(i,c.data(a,"handle"),false);else a.detachEvent&&a.detachEvent("on"+
+i,c.data(a,"handle"));e=null;delete f[i]}}}}for(e in f)break;if(!e){if(B=c.data(a,"handle"))B.elem=null;c.removeData(a,"events");c.removeData(a,"handle")}}}},trigger:function(a,b,d,f){var e=a.type||a;if(!f){a=typeof a==="object"?a[H]?a:c.extend(c.Event(e),a):c.Event(e);if(e.indexOf("!")>=0){a.type=e=e.slice(0,-1);a.exclusive=true}if(!d){a.stopPropagation();this.global[e]&&c.each(c.cache,function(){this.events&&this.events[e]&&c.event.trigger(a,b,this.handle.elem)})}if(!d||d.nodeType===3||d.nodeType===
+8)return w;a.result=w;a.target=d;b=c.makeArray(b);b.unshift(a)}a.currentTarget=d;var i=c.data(d,"handle");i&&i.apply(d,b);var j,o;try{if(!(d&&d.nodeName&&c.noData[d.nodeName.toLowerCase()])){j=d[e];o=d["on"+e]}}catch(p){}i=c.nodeName(d,"a")&&e==="click";if(!f&&j&&!a.isDefaultPrevented()&&!i){this.triggered=true;try{d[e]()}catch(n){}}else if(o&&d["on"+e].apply(d,b)===false)a.result=false;this.triggered=false;if(!a.isPropagationStopped())(d=d.parentNode||d.ownerDocument)&&c.event.trigger(a,b,d,true)},
+handle:function(a){var b,d;a=arguments[0]=c.event.fix(a||A.event);a.currentTarget=this;d=a.type.split(".");a.type=d.shift();b=!d.length&&!a.exclusive;var f=new RegExp("(^|\\.)"+d.slice(0).sort().join("\\.(?:.*\\.)?")+"(\\.|$)");d=(c.data(this,"events")||{})[a.type];for(var e in d){var i=d[e];if(b||f.test(i.type)){a.handler=i;a.data=i.data;i=i.apply(this,arguments);if(i!==w){a.result=i;if(i===false){a.preventDefault();a.stopPropagation()}}if(a.isImmediatePropagationStopped())break}}return a.result},
+props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(a){if(a[H])return a;var b=a;a=c.Event(b);for(var d=this.props.length,f;d;){f=this.props[--d];a[f]=b[f]}if(!a.target)a.target=a.srcElement||
+s;if(a.target.nodeType===3)a.target=a.target.parentNode;if(!a.relatedTarget&&a.fromElement)a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement;if(a.pageX==null&&a.clientX!=null){b=s.documentElement;d=s.body;a.pageX=a.clientX+(b&&b.scrollLeft||d&&d.scrollLeft||0)-(b&&b.clientLeft||d&&d.clientLeft||0);a.pageY=a.clientY+(b&&b.scrollTop||d&&d.scrollTop||0)-(b&&b.clientTop||d&&d.clientTop||0)}if(!a.which&&(a.charCode||a.charCode===0?a.charCode:a.keyCode))a.which=a.charCode||a.keyCode;if(!a.metaKey&&
+a.ctrlKey)a.metaKey=a.ctrlKey;if(!a.which&&a.button!==w)a.which=a.button&1?1:a.button&2?3:a.button&4?2:0;return a},guid:1E8,proxy:c.proxy,special:{ready:{setup:c.bindReady,teardown:c.noop},live:{add:function(a,b){c.extend(a,b||{});a.guid+=b.selector+b.live;c.event.add(this,b.live,qa,b)},remove:function(a){if(a.length){var b=0,d=new RegExp("(^|\\.)"+a[0]+"(\\.|$)");c.each(c.data(this,"events").live||{},function(){d.test(this.type)&&b++});b<1&&c.event.remove(this,a[0],qa)}},special:{}},beforeunload:{setup:function(a,
+b,d){if(this.setInterval)this.onbeforeunload=d;return false},teardown:function(a,b){if(this.onbeforeunload===b)this.onbeforeunload=null}}}};c.Event=function(a){if(!this.preventDefault)return new c.Event(a);if(a&&a.type){this.originalEvent=a;this.type=a.type}else this.type=a;this.timeStamp=K();this[H]=true};c.Event.prototype={preventDefault:function(){this.isDefaultPrevented=ba;var a=this.originalEvent;if(a){a.preventDefault&&a.preventDefault();a.returnValue=false}},stopPropagation:function(){this.isPropagationStopped=
+ba;var a=this.originalEvent;if(a){a.stopPropagation&&a.stopPropagation();a.cancelBubble=true}},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=ba;this.stopPropagation()},isDefaultPrevented:aa,isPropagationStopped:aa,isImmediatePropagationStopped:aa};var Ba=function(a){for(var b=a.relatedTarget;b&&b!==this;)try{b=b.parentNode}catch(d){break}if(b!==this){a.type=a.data;c.event.handle.apply(this,arguments)}},Ca=function(a){a.type=a.data;c.event.handle.apply(this,arguments)};c.each({mouseenter:"mouseover",
+mouseleave:"mouseout"},function(a,b){c.event.special[a]={setup:function(d){c.event.add(this,b,d&&d.selector?Ca:Ba,a)},teardown:function(d){c.event.remove(this,b,d&&d.selector?Ca:Ba)}}});if(!c.support.submitBubbles)c.event.special.submit={setup:function(a,b,d){if(this.nodeName.toLowerCase()!=="form"){c.event.add(this,"click.specialSubmit."+d.guid,function(f){var e=f.target,i=e.type;if((i==="submit"||i==="image")&&c(e).closest("form").length)return pa("submit",this,arguments)});c.event.add(this,"keypress.specialSubmit."+
+d.guid,function(f){var e=f.target,i=e.type;if((i==="text"||i==="password")&&c(e).closest("form").length&&f.keyCode===13)return pa("submit",this,arguments)})}else return false},remove:function(a,b){c.event.remove(this,"click.specialSubmit"+(b?"."+b.guid:""));c.event.remove(this,"keypress.specialSubmit"+(b?"."+b.guid:""))}};if(!c.support.changeBubbles){var ga=/textarea|input|select/i;function Da(a){var b=a.type,d=a.value;if(b==="radio"||b==="checkbox")d=a.checked;else if(b==="select-multiple")d=a.selectedIndex>
+-1?c.map(a.options,function(f){return f.selected}).join("-"):"";else if(a.nodeName.toLowerCase()==="select")d=a.selectedIndex;return d}function ha(a,b){var d=a.target,f,e;if(!(!ga.test(d.nodeName)||d.readOnly)){f=c.data(d,"_change_data");e=Da(d);if(e!==f){if(a.type!=="focusout"||d.type!=="radio")c.data(d,"_change_data",e);if(d.type!=="select"&&(f!=null||e)){a.type="change";return c.event.trigger(a,b,this)}}}}c.event.special.change={filters:{focusout:ha,click:function(a){var b=a.target,d=b.type;if(d===
+"radio"||d==="checkbox"||b.nodeName.toLowerCase()==="select")return ha.call(this,a)},keydown:function(a){var b=a.target,d=b.type;if(a.keyCode===13&&b.nodeName.toLowerCase()!=="textarea"||a.keyCode===32&&(d==="checkbox"||d==="radio")||d==="select-multiple")return ha.call(this,a)},beforeactivate:function(a){a=a.target;a.nodeName.toLowerCase()==="input"&&a.type==="radio"&&c.data(a,"_change_data",Da(a))}},setup:function(a,b,d){for(var f in W)c.event.add(this,f+".specialChange."+d.guid,W[f]);return ga.test(this.nodeName)},
+remove:function(a,b){for(var d in W)c.event.remove(this,d+".specialChange"+(b?"."+b.guid:""),W[d]);return ga.test(this.nodeName)}};var W=c.event.special.change.filters}s.addEventListener&&c.each({focus:"focusin",blur:"focusout"},function(a,b){function d(f){f=c.event.fix(f);f.type=b;return c.event.handle.call(this,f)}c.event.special[b]={setup:function(){this.addEventListener(a,d,true)},teardown:function(){this.removeEventListener(a,d,true)}}});c.each(["bind","one"],function(a,b){c.fn[b]=function(d,
+f,e){if(typeof d==="object"){for(var i in d)this[b](i,f,d[i],e);return this}if(c.isFunction(f)){thisObject=e;e=f;f=w}var j=b==="one"?c.proxy(e,function(o){c(this).unbind(o,j);return e.apply(this,arguments)}):e;return d==="unload"&&b!=="one"?this.one(d,f,e,thisObject):this.each(function(){c.event.add(this,d,j,f)})}});c.fn.extend({unbind:function(a,b){if(typeof a==="object"&&!a.preventDefault){for(var d in a)this.unbind(d,a[d]);return this}return this.each(function(){c.event.remove(this,a,b)})},trigger:function(a,
+b){return this.each(function(){c.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0]){a=c.Event(a);a.preventDefault();a.stopPropagation();c.event.trigger(a,b,this[0]);return a.result}},toggle:function(a){for(var b=arguments,d=1;d<b.length;)c.proxy(a,b[d++]);return this.click(c.proxy(a,function(f){var e=(c.data(this,"lastToggle"+a.guid)||0)%d;c.data(this,"lastToggle"+a.guid,e+1);f.preventDefault();return b[e].apply(this,arguments)||false}))},hover:function(a,b){return this.mouseenter(a).mouseleave(b||
+a)},live:function(a,b,d){if(c.isFunction(b)){d=b;b=w}c(this.context).bind(ra(a,this.selector),{data:b,selector:this.selector,live:a},d);return this},die:function(a,b){c(this.context).unbind(ra(a,this.selector),b?{guid:b.guid+this.selector+a}:null);return this}});c.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),function(a,b){c.fn[b]=function(d){return d?
+this.bind(b,d):this.trigger(b)};if(c.attrFn)c.attrFn[b]=true});A.attachEvent&&!A.addEventListener&&A.attachEvent("onunload",function(){for(var a in c.cache)if(c.cache[a].handle)try{c.event.remove(c.cache[a].handle.elem)}catch(b){}});(function(){function a(g){for(var h="",k,m=0;g[m];m++){k=g[m];if(k.nodeType===3||k.nodeType===4)h+=k.nodeValue;else if(k.nodeType!==8)h+=a(k.childNodes)}return h}function b(g,h,k,m,r,q){r=0;for(var v=m.length;r<v;r++){var u=m[r];if(u){u=u[g];for(var y=false;u;){if(u.sizcache===
+k){y=m[u.sizset];break}if(u.nodeType===1&&!q){u.sizcache=k;u.sizset=r}if(u.nodeName.toLowerCase()===h){y=u;break}u=u[g]}m[r]=y}}}function d(g,h,k,m,r,q){r=0;for(var v=m.length;r<v;r++){var u=m[r];if(u){u=u[g];for(var y=false;u;){if(u.sizcache===k){y=m[u.sizset];break}if(u.nodeType===1){if(!q){u.sizcache=k;u.sizset=r}if(typeof h!=="string"){if(u===h){y=true;break}}else if(p.filter(h,[u]).length>0){y=u;break}}u=u[g]}m[r]=y}}}var f=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,
+e=0,i=Object.prototype.toString,j=false,o=true;[0,0].sort(function(){o=false;return 0});var p=function(g,h,k,m){k=k||[];var r=h=h||s;if(h.nodeType!==1&&h.nodeType!==9)return[];if(!g||typeof g!=="string")return k;for(var q=[],v,u,y,S,I=true,N=x(h),J=g;(f.exec(""),v=f.exec(J))!==null;){J=v[3];q.push(v[1]);if(v[2]){S=v[3];break}}if(q.length>1&&t.exec(g))if(q.length===2&&n.relative[q[0]])u=ia(q[0]+q[1],h);else for(u=n.relative[q[0]]?[h]:p(q.shift(),h);q.length;){g=q.shift();if(n.relative[g])g+=q.shift();
+u=ia(g,u)}else{if(!m&&q.length>1&&h.nodeType===9&&!N&&n.match.ID.test(q[0])&&!n.match.ID.test(q[q.length-1])){v=p.find(q.shift(),h,N);h=v.expr?p.filter(v.expr,v.set)[0]:v.set[0]}if(h){v=m?{expr:q.pop(),set:B(m)}:p.find(q.pop(),q.length===1&&(q[0]==="~"||q[0]==="+")&&h.parentNode?h.parentNode:h,N);u=v.expr?p.filter(v.expr,v.set):v.set;if(q.length>0)y=B(u);else I=false;for(;q.length;){var E=q.pop();v=E;if(n.relative[E])v=q.pop();else E="";if(v==null)v=h;n.relative[E](y,v,N)}}else y=[]}y||(y=u);if(!y)throw"Syntax error, unrecognized expression: "+
+(E||g);if(i.call(y)==="[object Array]")if(I)if(h&&h.nodeType===1)for(g=0;y[g]!=null;g++){if(y[g]&&(y[g]===true||y[g].nodeType===1&&F(h,y[g])))k.push(u[g])}else for(g=0;y[g]!=null;g++)y[g]&&y[g].nodeType===1&&k.push(u[g]);else k.push.apply(k,y);else B(y,k);if(S){p(S,r,k,m);p.uniqueSort(k)}return k};p.uniqueSort=function(g){if(D){j=o;g.sort(D);if(j)for(var h=1;h<g.length;h++)g[h]===g[h-1]&&g.splice(h--,1)}return g};p.matches=function(g,h){return p(g,null,null,h)};p.find=function(g,h,k){var m,r;if(!g)return[];
+for(var q=0,v=n.order.length;q<v;q++){var u=n.order[q];if(r=n.leftMatch[u].exec(g)){var y=r[1];r.splice(1,1);if(y.substr(y.length-1)!=="\\"){r[1]=(r[1]||"").replace(/\\/g,"");m=n.find[u](r,h,k);if(m!=null){g=g.replace(n.match[u],"");break}}}}m||(m=h.getElementsByTagName("*"));return{set:m,expr:g}};p.filter=function(g,h,k,m){for(var r=g,q=[],v=h,u,y,S=h&&h[0]&&x(h[0]);g&&h.length;){for(var I in n.filter)if((u=n.leftMatch[I].exec(g))!=null&&u[2]){var N=n.filter[I],J,E;E=u[1];y=false;u.splice(1,1);if(E.substr(E.length-
+1)!=="\\"){if(v===q)q=[];if(n.preFilter[I])if(u=n.preFilter[I](u,v,k,q,m,S)){if(u===true)continue}else y=J=true;if(u)for(var X=0;(E=v[X])!=null;X++)if(E){J=N(E,u,X,v);var Ea=m^!!J;if(k&&J!=null)if(Ea)y=true;else v[X]=false;else if(Ea){q.push(E);y=true}}if(J!==w){k||(v=q);g=g.replace(n.match[I],"");if(!y)return[];break}}}if(g===r)if(y==null)throw"Syntax error, unrecognized expression: "+g;else break;r=g}return v};var n=p.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF-]|\\.)+)/,
+CLASS:/\.((?:[\w\u00c0-\uFFFF-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(g){return g.getAttribute("href")}},
+relative:{"+":function(g,h){var k=typeof h==="string",m=k&&!/\W/.test(h);k=k&&!m;if(m)h=h.toLowerCase();m=0;for(var r=g.length,q;m<r;m++)if(q=g[m]){for(;(q=q.previousSibling)&&q.nodeType!==1;);g[m]=k||q&&q.nodeName.toLowerCase()===h?q||false:q===h}k&&p.filter(h,g,true)},">":function(g,h){var k=typeof h==="string";if(k&&!/\W/.test(h)){h=h.toLowerCase();for(var m=0,r=g.length;m<r;m++){var q=g[m];if(q){k=q.parentNode;g[m]=k.nodeName.toLowerCase()===h?k:false}}}else{m=0;for(r=g.length;m<r;m++)if(q=g[m])g[m]=
+k?q.parentNode:q.parentNode===h;k&&p.filter(h,g,true)}},"":function(g,h,k){var m=e++,r=d;if(typeof h==="string"&&!/\W/.test(h)){var q=h=h.toLowerCase();r=b}r("parentNode",h,m,g,q,k)},"~":function(g,h,k){var m=e++,r=d;if(typeof h==="string"&&!/\W/.test(h)){var q=h=h.toLowerCase();r=b}r("previousSibling",h,m,g,q,k)}},find:{ID:function(g,h,k){if(typeof h.getElementById!=="undefined"&&!k)return(g=h.getElementById(g[1]))?[g]:[]},NAME:function(g,h){if(typeof h.getElementsByName!=="undefined"){var k=[];
+h=h.getElementsByName(g[1]);for(var m=0,r=h.length;m<r;m++)h[m].getAttribute("name")===g[1]&&k.push(h[m]);return k.length===0?null:k}},TAG:function(g,h){return h.getElementsByTagName(g[1])}},preFilter:{CLASS:function(g,h,k,m,r,q){g=" "+g[1].replace(/\\/g,"")+" ";if(q)return g;q=0;for(var v;(v=h[q])!=null;q++)if(v)if(r^(v.className&&(" "+v.className+" ").replace(/[\t\n]/g," ").indexOf(g)>=0))k||m.push(v);else if(k)h[q]=false;return false},ID:function(g){return g[1].replace(/\\/g,"")},TAG:function(g){return g[1].toLowerCase()},
+CHILD:function(g){if(g[1]==="nth"){var h=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(g[2]==="even"&&"2n"||g[2]==="odd"&&"2n+1"||!/\D/.test(g[2])&&"0n+"+g[2]||g[2]);g[2]=h[1]+(h[2]||1)-0;g[3]=h[3]-0}g[0]=e++;return g},ATTR:function(g,h,k,m,r,q){h=g[1].replace(/\\/g,"");if(!q&&n.attrMap[h])g[1]=n.attrMap[h];if(g[2]==="~=")g[4]=" "+g[4]+" ";return g},PSEUDO:function(g,h,k,m,r){if(g[1]==="not")if((f.exec(g[3])||"").length>1||/^\w/.test(g[3]))g[3]=p(g[3],null,null,h);else{g=p.filter(g[3],h,k,true^r);k||m.push.apply(m,
+g);return false}else if(n.match.POS.test(g[0])||n.match.CHILD.test(g[0]))return true;return g},POS:function(g){g.unshift(true);return g}},filters:{enabled:function(g){return g.disabled===false&&g.type!=="hidden"},disabled:function(g){return g.disabled===true},checked:function(g){return g.checked===true},selected:function(g){return g.selected===true},parent:function(g){return!!g.firstChild},empty:function(g){return!g.firstChild},has:function(g,h,k){return!!p(k[3],g).length},header:function(g){return/h\d/i.test(g.nodeName)},
+text:function(g){return"text"===g.type},radio:function(g){return"radio"===g.type},checkbox:function(g){return"checkbox"===g.type},file:function(g){return"file"===g.type},password:function(g){return"password"===g.type},submit:function(g){return"submit"===g.type},image:function(g){return"image"===g.type},reset:function(g){return"reset"===g.type},button:function(g){return"button"===g.type||g.nodeName.toLowerCase()==="button"},input:function(g){return/input|select|textarea|button/i.test(g.nodeName)}},
+setFilters:{first:function(g,h){return h===0},last:function(g,h,k,m){return h===m.length-1},even:function(g,h){return h%2===0},odd:function(g,h){return h%2===1},lt:function(g,h,k){return h<k[3]-0},gt:function(g,h,k){return h>k[3]-0},nth:function(g,h,k){return k[3]-0===h},eq:function(g,h,k){return k[3]-0===h}},filter:{PSEUDO:function(g,h,k,m){var r=h[1],q=n.filters[r];if(q)return q(g,k,h,m);else if(r==="contains")return(g.textContent||g.innerText||a([g])||"").indexOf(h[3])>=0;else if(r==="not"){h=
+h[3];k=0;for(m=h.length;k<m;k++)if(h[k]===g)return false;return true}else throw"Syntax error, unrecognized expression: "+r;},CHILD:function(g,h){var k=h[1],m=g;switch(k){case "only":case "first":for(;m=m.previousSibling;)if(m.nodeType===1)return false;if(k==="first")return true;m=g;case "last":for(;m=m.nextSibling;)if(m.nodeType===1)return false;return true;case "nth":k=h[2];var r=h[3];if(k===1&&r===0)return true;h=h[0];var q=g.parentNode;if(q&&(q.sizcache!==h||!g.nodeIndex)){var v=0;for(m=q.firstChild;m;m=
+m.nextSibling)if(m.nodeType===1)m.nodeIndex=++v;q.sizcache=h}g=g.nodeIndex-r;return k===0?g===0:g%k===0&&g/k>=0}},ID:function(g,h){return g.nodeType===1&&g.getAttribute("id")===h},TAG:function(g,h){return h==="*"&&g.nodeType===1||g.nodeName.toLowerCase()===h},CLASS:function(g,h){return(" "+(g.className||g.getAttribute("class"))+" ").indexOf(h)>-1},ATTR:function(g,h){var k=h[1];g=n.attrHandle[k]?n.attrHandle[k](g):g[k]!=null?g[k]:g.getAttribute(k);k=g+"";var m=h[2];h=h[4];return g==null?m==="!=":m===
+"="?k===h:m==="*="?k.indexOf(h)>=0:m==="~="?(" "+k+" ").indexOf(h)>=0:!h?k&&g!==false:m==="!="?k!==h:m==="^="?k.indexOf(h)===0:m==="$="?k.substr(k.length-h.length)===h:m==="|="?k===h||k.substr(0,h.length+1)===h+"-":false},POS:function(g,h,k,m){var r=n.setFilters[h[2]];if(r)return r(g,k,h,m)}}},t=n.match.POS;for(var z in n.match){n.match[z]=new RegExp(n.match[z].source+/(?![^\[]*\])(?![^\(]*\))/.source);n.leftMatch[z]=new RegExp(/(^(?:.|\r|\n)*?)/.source+n.match[z].source.replace(/\\(\d+)/g,function(g,
+h){return"\\"+(h-0+1)}))}var B=function(g,h){g=Array.prototype.slice.call(g,0);if(h){h.push.apply(h,g);return h}return g};try{Array.prototype.slice.call(s.documentElement.childNodes,0)}catch(C){B=function(g,h){h=h||[];if(i.call(g)==="[object Array]")Array.prototype.push.apply(h,g);else if(typeof g.length==="number")for(var k=0,m=g.length;k<m;k++)h.push(g[k]);else for(k=0;g[k];k++)h.push(g[k]);return h}}var D;if(s.documentElement.compareDocumentPosition)D=function(g,h){if(!g.compareDocumentPosition||
+!h.compareDocumentPosition){if(g==h)j=true;return g.compareDocumentPosition?-1:1}g=g.compareDocumentPosition(h)&4?-1:g===h?0:1;if(g===0)j=true;return g};else if("sourceIndex"in s.documentElement)D=function(g,h){if(!g.sourceIndex||!h.sourceIndex){if(g==h)j=true;return g.sourceIndex?-1:1}g=g.sourceIndex-h.sourceIndex;if(g===0)j=true;return g};else if(s.createRange)D=function(g,h){if(!g.ownerDocument||!h.ownerDocument){if(g==h)j=true;return g.ownerDocument?-1:1}var k=g.ownerDocument.createRange(),m=
+h.ownerDocument.createRange();k.setStart(g,0);k.setEnd(g,0);m.setStart(h,0);m.setEnd(h,0);g=k.compareBoundaryPoints(Range.START_TO_END,m);if(g===0)j=true;return g};(function(){var g=s.createElement("div"),h="script"+(new Date).getTime();g.innerHTML="<a name='"+h+"'/>";var k=s.documentElement;k.insertBefore(g,k.firstChild);if(s.getElementById(h)){n.find.ID=function(m,r,q){if(typeof r.getElementById!=="undefined"&&!q)return(r=r.getElementById(m[1]))?r.id===m[1]||typeof r.getAttributeNode!=="undefined"&&
+r.getAttributeNode("id").nodeValue===m[1]?[r]:w:[]};n.filter.ID=function(m,r){var q=typeof m.getAttributeNode!=="undefined"&&m.getAttributeNode("id");return m.nodeType===1&&q&&q.nodeValue===r}}k.removeChild(g);k=g=null})();(function(){var g=s.createElement("div");g.appendChild(s.createComment(""));if(g.getElementsByTagName("*").length>0)n.find.TAG=function(h,k){k=k.getElementsByTagName(h[1]);if(h[1]==="*"){h=[];for(var m=0;k[m];m++)k[m].nodeType===1&&h.push(k[m]);k=h}return k};g.innerHTML="<a href='#'></a>";
+if(g.firstChild&&typeof g.firstChild.getAttribute!=="undefined"&&g.firstChild.getAttribute("href")!=="#")n.attrHandle.href=function(h){return h.getAttribute("href",2)};g=null})();s.querySelectorAll&&function(){var g=p,h=s.createElement("div");h.innerHTML="<p class='TEST'></p>";if(!(h.querySelectorAll&&h.querySelectorAll(".TEST").length===0)){p=function(m,r,q,v){r=r||s;if(!v&&r.nodeType===9&&!x(r))try{return B(r.querySelectorAll(m),q)}catch(u){}return g(m,r,q,v)};for(var k in g)p[k]=g[k];h=null}}();
+(function(){var g=s.createElement("div");g.innerHTML="<div class='test e'></div><div class='test'></div>";if(!(!g.getElementsByClassName||g.getElementsByClassName("e").length===0)){g.lastChild.className="e";if(g.getElementsByClassName("e").length!==1){n.order.splice(1,0,"CLASS");n.find.CLASS=function(h,k,m){if(typeof k.getElementsByClassName!=="undefined"&&!m)return k.getElementsByClassName(h[1])};g=null}}})();var F=s.compareDocumentPosition?function(g,h){return g.compareDocumentPosition(h)&16}:function(g,
+h){return g!==h&&(g.contains?g.contains(h):true)},x=function(g){return(g=(g?g.ownerDocument||g:0).documentElement)?g.nodeName!=="HTML":false},ia=function(g,h){var k=[],m="",r;for(h=h.nodeType?[h]:h;r=n.match.PSEUDO.exec(g);){m+=r[0];g=g.replace(n.match.PSEUDO,"")}g=n.relative[g]?g+"*":g;r=0;for(var q=h.length;r<q;r++)p(g,h[r],k);return p.filter(m,k)};c.find=p;c.expr=p.selectors;c.expr[":"]=c.expr.filters;c.unique=p.uniqueSort;c.getText=a;c.isXMLDoc=x;c.contains=F})();var ab=/Until$/,bb=/^(?:parents|prevUntil|prevAll)/,
+cb=/,/;R=Array.prototype.slice;var Fa=function(a,b,d){if(c.isFunction(b))return c.grep(a,function(e,i){return!!b.call(e,i,e)===d});else if(b.nodeType)return c.grep(a,function(e){return e===b===d});else if(typeof b==="string"){var f=c.grep(a,function(e){return e.nodeType===1});if(Pa.test(b))return c.filter(b,f,!d);else b=c.filter(b,a)}return c.grep(a,function(e){return c.inArray(e,b)>=0===d})};c.fn.extend({find:function(a){for(var b=this.pushStack("","find",a),d=0,f=0,e=this.length;f<e;f++){d=b.length;
+c.find(a,this[f],b);if(f>0)for(var i=d;i<b.length;i++)for(var j=0;j<d;j++)if(b[j]===b[i]){b.splice(i--,1);break}}return b},has:function(a){var b=c(a);return this.filter(function(){for(var d=0,f=b.length;d<f;d++)if(c.contains(this,b[d]))return true})},not:function(a){return this.pushStack(Fa(this,a,false),"not",a)},filter:function(a){return this.pushStack(Fa(this,a,true),"filter",a)},is:function(a){return!!a&&c.filter(a,this).length>0},closest:function(a,b){if(c.isArray(a)){var d=[],f=this[0],e,i=
+{},j;if(f&&a.length){e=0;for(var o=a.length;e<o;e++){j=a[e];i[j]||(i[j]=c.expr.match.POS.test(j)?c(j,b||this.context):j)}for(;f&&f.ownerDocument&&f!==b;){for(j in i){e=i[j];if(e.jquery?e.index(f)>-1:c(f).is(e)){d.push({selector:j,elem:f});delete i[j]}}f=f.parentNode}}return d}var p=c.expr.match.POS.test(a)?c(a,b||this.context):null;return this.map(function(n,t){for(;t&&t.ownerDocument&&t!==b;){if(p?p.index(t)>-1:c(t).is(a))return t;t=t.parentNode}return null})},index:function(a){if(!a||typeof a===
+"string")return c.inArray(this[0],a?c(a):this.parent().children());return c.inArray(a.jquery?a[0]:a,this)},add:function(a,b){a=typeof a==="string"?c(a,b||this.context):c.makeArray(a);b=c.merge(this.get(),a);return this.pushStack(sa(a[0])||sa(b[0])?b:c.unique(b))},andSelf:function(){return this.add(this.prevObject)}});c.each({parent:function(a){return(a=a.parentNode)&&a.nodeType!==11?a:null},parents:function(a){return c.dir(a,"parentNode")},parentsUntil:function(a,b,d){return c.dir(a,"parentNode",
+d)},next:function(a){return c.nth(a,2,"nextSibling")},prev:function(a){return c.nth(a,2,"previousSibling")},nextAll:function(a){return c.dir(a,"nextSibling")},prevAll:function(a){return c.dir(a,"previousSibling")},nextUntil:function(a,b,d){return c.dir(a,"nextSibling",d)},prevUntil:function(a,b,d){return c.dir(a,"previousSibling",d)},siblings:function(a){return c.sibling(a.parentNode.firstChild,a)},children:function(a){return c.sibling(a.firstChild)},contents:function(a){return c.nodeName(a,"iframe")?
+a.contentDocument||a.contentWindow.document:c.makeArray(a.childNodes)}},function(a,b){c.fn[a]=function(d,f){var e=c.map(this,b,d);ab.test(a)||(f=d);if(f&&typeof f==="string")e=c.filter(f,e);e=this.length>1?c.unique(e):e;if((this.length>1||cb.test(f))&&bb.test(a))e=e.reverse();return this.pushStack(e,a,R.call(arguments).join(","))}});c.extend({filter:function(a,b,d){if(d)a=":not("+a+")";return c.find.matches(a,b)},dir:function(a,b,d){var f=[];for(a=a[b];a&&a.nodeType!==9&&(d===w||!c(a).is(d));){a.nodeType===
+1&&f.push(a);a=a[b]}return f},nth:function(a,b,d){b=b||1;for(var f=0;a;a=a[d])if(a.nodeType===1&&++f===b)break;return a},sibling:function(a,b){for(var d=[];a;a=a.nextSibling)a.nodeType===1&&a!==b&&d.push(a);return d}});var Ga=/ jQuery\d+="(?:\d+|null)"/g,Y=/^\s+/,db=/(<([\w:]+)[^>]*?)\/>/g,eb=/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i,Ha=/<([\w:]+)/,fb=/<tbody/i,gb=/<|&\w+;/,hb=function(a,b,d){return eb.test(d)?a:b+"></"+d+">"},G={option:[1,"<select multiple='multiple'>","</select>"],
+legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};G.optgroup=G.option;G.tbody=G.tfoot=G.colgroup=G.caption=G.thead;G.th=G.td;if(!c.support.htmlSerialize)G._default=[1,"div<div>","</div>"];c.fn.extend({text:function(a){if(c.isFunction(a))return this.each(function(b){var d=c(this);
+return d.text(a.call(this,b,d.text()))});if(typeof a!=="object"&&a!==w)return this.empty().append((this[0]&&this[0].ownerDocument||s).createTextNode(a));return c.getText(this)},wrapAll:function(a){if(c.isFunction(a))return this.each(function(d){c(this).wrapAll(a.call(this,d))});if(this[0]){var b=c(a,this[0].ownerDocument).eq(0).clone(true);this[0].parentNode&&b.insertBefore(this[0]);b.map(function(){for(var d=this;d.firstChild&&d.firstChild.nodeType===1;)d=d.firstChild;return d}).append(this)}return this},
+wrapInner:function(a){return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&
+this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,this)});else if(arguments.length){var a=c(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,this.nextSibling)});else if(arguments.length){var a=this.pushStack(this,
+"after",arguments);a.push.apply(a,c(arguments[0]).toArray());return a}},clone:function(a){var b=this.map(function(){if(!c.support.noCloneEvent&&!c.isXMLDoc(this)){var d=this.outerHTML,f=this.ownerDocument;if(!d){d=f.createElement("div");d.appendChild(this.cloneNode(true));d=d.innerHTML}return c.clean([d.replace(Ga,"").replace(Y,"")],f)[0]}else return this.cloneNode(true)});if(a===true){ta(this,b);ta(this.find("*"),b.find("*"))}return b},html:function(a){if(a===w)return this[0]&&this[0].nodeType===
+1?this[0].innerHTML.replace(Ga,""):null;else if(typeof a==="string"&&!/<script/i.test(a)&&(c.support.leadingWhitespace||!Y.test(a))&&!G[(Ha.exec(a)||["",""])[1].toLowerCase()])try{for(var b=0,d=this.length;b<d;b++)if(this[b].nodeType===1){T(this[b].getElementsByTagName("*"));this[b].innerHTML=a}}catch(f){this.empty().append(a)}else c.isFunction(a)?this.each(function(e){var i=c(this),j=i.html();i.empty().append(function(){return a.call(this,e,j)})}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&
+this[0].parentNode){c.isFunction(a)||(a=c(a).detach());return this.each(function(){var b=this.nextSibling,d=this.parentNode;c(this).remove();b?c(b).before(a):c(d).append(a)})}else return this.pushStack(c(c.isFunction(a)?a():a),"replaceWith",a)},detach:function(a){return this.remove(a,true)},domManip:function(a,b,d){function f(t){return c.nodeName(t,"table")?t.getElementsByTagName("tbody")[0]||t.appendChild(t.ownerDocument.createElement("tbody")):t}var e,i,j=a[0],o=[];if(c.isFunction(j))return this.each(function(t){var z=
+c(this);a[0]=j.call(this,t,b?z.html():w);return z.domManip(a,b,d)});if(this[0]){e=a[0]&&a[0].parentNode&&a[0].parentNode.nodeType===11?{fragment:a[0].parentNode}:ua(a,this,o);if(i=e.fragment.firstChild){b=b&&c.nodeName(i,"tr");for(var p=0,n=this.length;p<n;p++)d.call(b?f(this[p],i):this[p],e.cacheable||this.length>1||p>0?e.fragment.cloneNode(true):e.fragment)}o&&c.each(o,La)}return this}});c.fragments={};c.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},
+function(a,b){c.fn[a]=function(d){var f=[];d=c(d);for(var e=0,i=d.length;e<i;e++){var j=(e>0?this.clone(true):this).get();c.fn[b].apply(c(d[e]),j);f=f.concat(j)}return this.pushStack(f,a,d.selector)}});c.each({remove:function(a,b){if(!a||c.filter(a,[this]).length){if(!b&&this.nodeType===1){T(this.getElementsByTagName("*"));T([this])}this.parentNode&&this.parentNode.removeChild(this)}},empty:function(){for(this.nodeType===1&&T(this.getElementsByTagName("*"));this.firstChild;)this.removeChild(this.firstChild)}},
+function(a,b){c.fn[a]=function(){return this.each(b,arguments)}});c.extend({clean:function(a,b,d,f){b=b||s;if(typeof b.createElement==="undefined")b=b.ownerDocument||b[0]&&b[0].ownerDocument||s;var e=[];c.each(a,function(i,j){if(typeof j==="number")j+="";if(j){if(typeof j==="string"&&!gb.test(j))j=b.createTextNode(j);else if(typeof j==="string"){j=j.replace(db,hb);var o=(Ha.exec(j)||["",""])[1].toLowerCase(),p=G[o]||G._default,n=p[0];i=b.createElement("div");for(i.innerHTML=p[1]+j+p[2];n--;)i=i.lastChild;
+if(!c.support.tbody){n=fb.test(j);o=o==="table"&&!n?i.firstChild&&i.firstChild.childNodes:p[1]==="<table>"&&!n?i.childNodes:[];for(p=o.length-1;p>=0;--p)c.nodeName(o[p],"tbody")&&!o[p].childNodes.length&&o[p].parentNode.removeChild(o[p])}!c.support.leadingWhitespace&&Y.test(j)&&i.insertBefore(b.createTextNode(Y.exec(j)[0]),i.firstChild);j=c.makeArray(i.childNodes)}if(j.nodeType)e.push(j);else e=c.merge(e,j)}});if(d)for(a=0;e[a];a++)if(f&&c.nodeName(e[a],"script")&&(!e[a].type||e[a].type.toLowerCase()===
+"text/javascript"))f.push(e[a].parentNode?e[a].parentNode.removeChild(e[a]):e[a]);else{e[a].nodeType===1&&e.splice.apply(e,[a+1,0].concat(c.makeArray(e[a].getElementsByTagName("script"))));d.appendChild(e[a])}return e}});var ib=/z-?index|font-?weight|opacity|zoom|line-?height/i,Ia=/alpha\([^)]*\)/,Ja=/opacity=([^)]*)/,ja=/float/i,ka=/-([a-z])/ig,jb=/([A-Z])/g,kb=/^-?\d+(?:px)?$/i,lb=/^-?\d/,mb={position:"absolute",visibility:"hidden",display:"block"},nb=["Left","Right"],ob=["Top","Bottom"],pb=s.defaultView&&
+s.defaultView.getComputedStyle,Ka=c.support.cssFloat?"cssFloat":"styleFloat",la=function(a,b){return b.toUpperCase()};c.fn.css=function(a,b){return $(this,a,b,true,function(d,f,e){if(e===w)return c.curCSS(d,f);if(typeof e==="number"&&!ib.test(f))e+="px";c.style(d,f,e)})};c.extend({style:function(a,b,d){if(!a||a.nodeType===3||a.nodeType===8)return w;if((b==="width"||b==="height")&&parseFloat(d)<0)d=w;var f=a.style||a,e=d!==w;if(!c.support.opacity&&b==="opacity"){if(e){f.zoom=1;b=parseInt(d,10)+""===
+"NaN"?"":"alpha(opacity="+d*100+")";a=f.filter||c.curCSS(a,"filter")||"";f.filter=Ia.test(a)?a.replace(Ia,b):b}return f.filter&&f.filter.indexOf("opacity=")>=0?parseFloat(Ja.exec(f.filter)[1])/100+"":""}if(ja.test(b))b=Ka;b=b.replace(ka,la);if(e)f[b]=d;return f[b]},css:function(a,b,d,f){if(b==="width"||b==="height"){var e,i=b==="width"?nb:ob;function j(){e=b==="width"?a.offsetWidth:a.offsetHeight;f!=="border"&&c.each(i,function(){f||(e-=parseFloat(c.curCSS(a,"padding"+this,true))||0);if(f==="margin")e+=
+parseFloat(c.curCSS(a,"margin"+this,true))||0;else e-=parseFloat(c.curCSS(a,"border"+this+"Width",true))||0})}a.offsetWidth!==0?j():c.swap(a,mb,j);return Math.max(0,Math.round(e))}return c.curCSS(a,b,d)},curCSS:function(a,b,d){var f,e=a.style;if(!c.support.opacity&&b==="opacity"&&a.currentStyle){f=Ja.test(a.currentStyle.filter||"")?parseFloat(RegExp.$1)/100+"":"";return f===""?"1":f}if(ja.test(b))b=Ka;if(!d&&e&&e[b])f=e[b];else if(pb){if(ja.test(b))b="float";b=b.replace(jb,"-$1").toLowerCase();e=
+a.ownerDocument.defaultView;if(!e)return null;if(a=e.getComputedStyle(a,null))f=a.getPropertyValue(b);if(b==="opacity"&&f==="")f="1"}else if(a.currentStyle){d=b.replace(ka,la);f=a.currentStyle[b]||a.currentStyle[d];if(!kb.test(f)&&lb.test(f)){b=e.left;var i=a.runtimeStyle.left;a.runtimeStyle.left=a.currentStyle.left;e.left=d==="fontSize"?"1em":f||0;f=e.pixelLeft+"px";e.left=b;a.runtimeStyle.left=i}}return f},swap:function(a,b,d){var f={};for(var e in b){f[e]=a.style[e];a.style[e]=b[e]}d.call(a);for(e in b)a.style[e]=
+f[e]}});if(c.expr&&c.expr.filters){c.expr.filters.hidden=function(a){var b=a.offsetWidth,d=a.offsetHeight,f=a.nodeName.toLowerCase()==="tr";return b===0&&d===0&&!f?true:b>0&&d>0&&!f?false:c.curCSS(a,"display")==="none"};c.expr.filters.visible=function(a){return!c.expr.filters.hidden(a)}}var qb=K(),rb=/<script(.|\s)*?\/script>/gi,sb=/select|textarea/i,tb=/color|date|datetime|email|hidden|month|number|password|range|search|tel|text|time|url|week/i,O=/=\?(&|$)/,ma=/\?/,ub=/(\?|&)_=.*?(&|$)/,vb=/^(\w+:)?\/\/([^\/?#]+)/,
+wb=/%20/g;c.fn.extend({_load:c.fn.load,load:function(a,b,d){if(typeof a!=="string")return this._load(a);else if(!this.length)return this;var f=a.indexOf(" ");if(f>=0){var e=a.slice(f,a.length);a=a.slice(0,f)}f="GET";if(b)if(c.isFunction(b)){d=b;b=null}else if(typeof b==="object"){b=c.param(b,c.ajaxSettings.traditional);f="POST"}c.ajax({url:a,type:f,dataType:"html",data:b,context:this,complete:function(i,j){if(j==="success"||j==="notmodified")this.html(e?c("<div />").append(i.responseText.replace(rb,
+"")).find(e):i.responseText);d&&this.each(d,[i.responseText,j,i])}});return this},serialize:function(){return c.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?c.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||sb.test(this.nodeName)||tb.test(this.type))}).map(function(a,b){a=c(this).val();return a==null?null:c.isArray(a)?c.map(a,function(d){return{name:b.name,value:d}}):{name:b.name,value:a}}).get()}});
+c.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){c.fn[b]=function(d){return this.bind(b,d)}});c.extend({get:function(a,b,d,f){if(c.isFunction(b)){f=f||d;d=b;b=null}return c.ajax({type:"GET",url:a,data:b,success:d,dataType:f})},getScript:function(a,b){return c.get(a,null,b,"script")},getJSON:function(a,b,d){return c.get(a,b,d,"json")},post:function(a,b,d,f){if(c.isFunction(b)){f=f||d;d=b;b={}}return c.ajax({type:"POST",url:a,data:b,success:d,dataType:f})},
+ajaxSetup:function(a){c.extend(c.ajaxSettings,a)},ajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:A.XMLHttpRequest&&(A.location.protocol!=="file:"||!A.ActiveXObject)?function(){return new A.XMLHttpRequest}:function(){try{return new A.ActiveXObject("Microsoft.XMLHTTP")}catch(a){}},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",
+text:"text/plain",_default:"*/*"}},lastModified:{},etag:{},ajax:function(a){function b(){e.success&&e.success.call(p,o,j,x);e.global&&f("ajaxSuccess",[x,e])}function d(){e.complete&&e.complete.call(p,x,j);e.global&&f("ajaxComplete",[x,e]);e.global&&!--c.active&&c.event.trigger("ajaxStop")}function f(r,q){(e.context?c(e.context):c.event).trigger(r,q)}var e=c.extend(true,{},c.ajaxSettings,a),i,j,o,p=e.context||e,n=e.type.toUpperCase();if(e.data&&e.processData&&typeof e.data!=="string")e.data=c.param(e.data,
+e.traditional);if(e.dataType==="jsonp"){if(n==="GET")O.test(e.url)||(e.url+=(ma.test(e.url)?"&":"?")+(e.jsonp||"callback")+"=?");else if(!e.data||!O.test(e.data))e.data=(e.data?e.data+"&":"")+(e.jsonp||"callback")+"=?";e.dataType="json"}if(e.dataType==="json"&&(e.data&&O.test(e.data)||O.test(e.url))){i=e.jsonpCallback||"jsonp"+qb++;if(e.data)e.data=(e.data+"").replace(O,"="+i+"$1");e.url=e.url.replace(O,"="+i+"$1");e.dataType="script";A[i]=A[i]||function(r){o=r;b();d();A[i]=w;try{delete A[i]}catch(q){}B&&
+B.removeChild(C)}}if(e.dataType==="script"&&e.cache===null)e.cache=false;if(e.cache===false&&n==="GET"){var t=K(),z=e.url.replace(ub,"$1_="+t+"$2");e.url=z+(z===e.url?(ma.test(e.url)?"&":"?")+"_="+t:"")}if(e.data&&n==="GET")e.url+=(ma.test(e.url)?"&":"?")+e.data;e.global&&!c.active++&&c.event.trigger("ajaxStart");t=(t=vb.exec(e.url))&&(t[1]&&t[1]!==location.protocol||t[2]!==location.host);if(e.dataType==="script"&&n==="GET"&&t){var B=s.getElementsByTagName("head")[0]||s.documentElement,C=s.createElement("script");
+C.src=e.url;if(e.scriptCharset)C.charset=e.scriptCharset;if(!i){var D=false;C.onload=C.onreadystatechange=function(){if(!D&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){D=true;b();d();C.onload=C.onreadystatechange=null;B&&C.parentNode&&B.removeChild(C)}}}B.insertBefore(C,B.firstChild);return w}var F=false,x=e.xhr();if(x){e.username?x.open(n,e.url,e.async,e.username,e.password):x.open(n,e.url,e.async);try{if(e.data||a&&a.contentType)x.setRequestHeader("Content-Type",
+e.contentType);if(e.ifModified){c.lastModified[e.url]&&x.setRequestHeader("If-Modified-Since",c.lastModified[e.url]);c.etag[e.url]&&x.setRequestHeader("If-None-Match",c.etag[e.url])}t||x.setRequestHeader("X-Requested-With","XMLHttpRequest");x.setRequestHeader("Accept",e.dataType&&e.accepts[e.dataType]?e.accepts[e.dataType]+", */*":e.accepts._default)}catch(ia){}if(e.beforeSend&&e.beforeSend.call(p,x,e)===false){e.global&&!--c.active&&c.event.trigger("ajaxStop");x.abort();return false}e.global&&f("ajaxSend",
+[x,e]);var g=x.onreadystatechange=function(r){if(!x||x.readyState===0){F||d();F=true;if(x)x.onreadystatechange=c.noop}else if(!F&&x&&(x.readyState===4||r==="timeout")){F=true;x.onreadystatechange=c.noop;j=r==="timeout"?"timeout":!c.httpSuccess(x)?"error":e.ifModified&&c.httpNotModified(x,e.url)?"notmodified":"success";if(j==="success")try{o=c.httpData(x,e.dataType,e)}catch(q){j="parsererror"}if(j==="success"||j==="notmodified")i||b();else c.handleError(e,x,j);d();r==="timeout"&&x.abort();if(e.async)x=
+null}};try{var h=x.abort;x.abort=function(){if(x){h.call(x);if(x)x.readyState=0}g()}}catch(k){}e.async&&e.timeout>0&&setTimeout(function(){x&&!F&&g("timeout")},e.timeout);try{x.send(n==="POST"||n==="PUT"||n==="DELETE"?e.data:null)}catch(m){c.handleError(e,x,null,m);d()}e.async||g();return x}},handleError:function(a,b,d,f){if(a.error)a.error.call(a.context||A,b,d,f);if(a.global)(a.context?c(a.context):c.event).trigger("ajaxError",[b,a,f])},active:0,httpSuccess:function(a){try{return!a.status&&location.protocol===
+"file:"||a.status>=200&&a.status<300||a.status===304||a.status===1223||a.status===0}catch(b){}return false},httpNotModified:function(a,b){var d=a.getResponseHeader("Last-Modified"),f=a.getResponseHeader("Etag");if(d)c.lastModified[b]=d;if(f)c.etag[b]=f;return a.status===304||a.status===0},httpData:function(a,b,d){var f=a.getResponseHeader("content-type")||"",e=b==="xml"||!b&&f.indexOf("xml")>=0;a=e?a.responseXML:a.responseText;if(e&&a.documentElement.nodeName==="parsererror")throw"parsererror";if(d&&
+d.dataFilter)a=d.dataFilter(a,b);if(typeof a==="string")if(b==="json"||!b&&f.indexOf("json")>=0)if(/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))a=A.JSON&&A.JSON.parse?A.JSON.parse(a):(new Function("return "+a))();else throw"Invalid JSON: "+a;else if(b==="script"||!b&&f.indexOf("javascript")>=0)c.globalEval(a);return a},param:function(a,b){function d(e,i){i=
+c.isFunction(i)?i():i;f[f.length]=encodeURIComponent(e)+"="+encodeURIComponent(i)}var f=[];if(b===w)b=c.ajaxSettings.traditional;c.isArray(a)||a.jquery?c.each(a,function(){d(this.name,this.value)}):c.each(a,function e(i,j){if(c.isArray(j))c.each(j,function(o,p){b?d(i,p):e(i+"["+(typeof p==="object"||c.isArray(p)?o:"")+"]",p)});else!b&&j!=null&&typeof j==="object"?c.each(j,function(o,p){e(i+"["+o+"]",p)}):d(i,j)});return f.join("&").replace(wb,"+")}});var na={},xb=/toggle|show|hide/,yb=/^([+-]=)?([\d+-.]+)(.*)$/,
+Z,va=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];c.fn.extend({show:function(a,b){if(a!=null)return this.animate(L("show",3),a,b);else{a=0;for(b=this.length;a<b;a++){var d=c.data(this[a],"olddisplay");this[a].style.display=d||"";if(c.css(this[a],"display")==="none"){d=this[a].nodeName;var f;if(na[d])f=na[d];else{var e=c("<"+d+" />").appendTo("body");f=e.css("display");if(f==="none")f="block";e.remove();
+na[d]=f}c.data(this[a],"olddisplay",f)}}a=0;for(b=this.length;a<b;a++)this[a].style.display=c.data(this[a],"olddisplay")||"";return this}},hide:function(a,b){if(a!=null)return this.animate(L("hide",3),a,b);else{a=0;for(b=this.length;a<b;a++){var d=c.data(this[a],"olddisplay");!d&&d!=="none"&&c.data(this[a],"olddisplay",c.css(this[a],"display"))}a=0;for(b=this.length;a<b;a++)this[a].style.display="none";return this}},_toggle:c.fn.toggle,toggle:function(a,b){var d=typeof a==="boolean";if(c.isFunction(a)&&
+c.isFunction(b))this._toggle.apply(this,arguments);else a==null||d?this.each(function(){var f=d?a:c(this).is(":hidden");c(this)[f?"show":"hide"]()}):this.animate(L("toggle",3),a,b);return this},fadeTo:function(a,b,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,d)},animate:function(a,b,d,f){var e=c.speed(b,d,f);if(c.isEmptyObject(a))return this.each(e.complete);return this[e.queue===false?"each":"queue"](function(){var i=c.extend({},e),j,o=this.nodeType===1&&c(this).is(":hidden"),
+p=this;for(j in a){var n=j.replace(ka,la);if(j!==n){a[n]=a[j];delete a[j];j=n}if(a[j]==="hide"&&o||a[j]==="show"&&!o)return i.complete.call(this);if((j==="height"||j==="width")&&this.style){i.display=c.css(this,"display");i.overflow=this.style.overflow}if(c.isArray(a[j])){(i.specialEasing=i.specialEasing||{})[j]=a[j][1];a[j]=a[j][0]}}if(i.overflow!=null)this.style.overflow="hidden";i.curAnim=c.extend({},a);c.each(a,function(t,z){var B=new c.fx(p,i,t);if(xb.test(z))B[z==="toggle"?o?"show":"hide":z](a);
+else{var C=yb.exec(z),D=B.cur(true)||0;if(C){z=parseFloat(C[2]);var F=C[3]||"px";if(F!=="px"){p.style[t]=(z||1)+F;D=(z||1)/B.cur(true)*D;p.style[t]=D+F}if(C[1])z=(C[1]==="-="?-1:1)*z+D;B.custom(D,z,F)}else B.custom(D,z,"")}});return true})},stop:function(a,b){var d=c.timers;a&&this.queue([]);this.each(function(){for(var f=d.length-1;f>=0;f--)if(d[f].elem===this){b&&d[f](true);d.splice(f,1)}});b||this.dequeue();return this}});c.each({slideDown:L("show",1),slideUp:L("hide",1),slideToggle:L("toggle",
+1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(a,b){c.fn[a]=function(d,f){return this.animate(b,d,f)}});c.extend({speed:function(a,b,d){var f=a&&typeof a==="object"?a:{complete:d||!d&&b||c.isFunction(a)&&a,duration:a,easing:d&&b||b&&!c.isFunction(b)&&b};f.duration=c.fx.off?0:typeof f.duration==="number"?f.duration:c.fx.speeds[f.duration]||c.fx.speeds._default;f.old=f.complete;f.complete=function(){f.queue!==false&&c(this).dequeue();c.isFunction(f.old)&&f.old.call(this)};return f},easing:{linear:function(a,
+b,d,f){return d+f*a},swing:function(a,b,d,f){return(-Math.cos(a*Math.PI)/2+0.5)*f+d}},timers:[],fx:function(a,b,d){this.options=b;this.elem=a;this.prop=d;if(!b.orig)b.orig={}}});c.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this);(c.fx.step[this.prop]||c.fx.step._default)(this);if((this.prop==="height"||this.prop==="width")&&this.elem.style)this.elem.style.display="block"},cur:function(a){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==
+null))return this.elem[this.prop];return(a=parseFloat(c.css(this.elem,this.prop,a)))&&a>-10000?a:parseFloat(c.curCSS(this.elem,this.prop))||0},custom:function(a,b,d){function f(i){return e.step(i)}this.startTime=K();this.start=a;this.end=b;this.unit=d||this.unit||"px";this.now=this.start;this.pos=this.state=0;var e=this;f.elem=this.elem;if(f()&&c.timers.push(f)&&!Z)Z=setInterval(c.fx.tick,13)},show:function(){this.options.orig[this.prop]=c.style(this.elem,this.prop);this.options.show=true;this.custom(this.prop===
+"width"||this.prop==="height"?1:0,this.cur());c(this.elem).show()},hide:function(){this.options.orig[this.prop]=c.style(this.elem,this.prop);this.options.hide=true;this.custom(this.cur(),0)},step:function(a){var b=K(),d=true;if(a||b>=this.options.duration+this.startTime){this.now=this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;for(var f in this.options.curAnim)if(this.options.curAnim[f]!==true)d=false;if(d){if(this.options.display!=null){this.elem.style.overflow=
+this.options.overflow;a=c.data(this.elem,"olddisplay");this.elem.style.display=a?a:this.options.display;if(c.css(this.elem,"display")==="none")this.elem.style.display="block"}this.options.hide&&c(this.elem).hide();if(this.options.hide||this.options.show)for(var e in this.options.curAnim)c.style(this.elem,e,this.options.orig[e]);this.options.complete.call(this.elem)}return false}else{e=b-this.startTime;this.state=e/this.options.duration;a=this.options.easing||(c.easing.swing?"swing":"linear");this.pos=
+c.easing[this.options.specialEasing&&this.options.specialEasing[this.prop]||a](this.state,e,0,1,this.options.duration);this.now=this.start+(this.end-this.start)*this.pos;this.update()}return true}};c.extend(c.fx,{tick:function(){for(var a=c.timers,b=0;b<a.length;b++)a[b]()||a.splice(b--,1);a.length||c.fx.stop()},stop:function(){clearInterval(Z);Z=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){c.style(a.elem,"opacity",a.now)},_default:function(a){if(a.elem.style&&a.elem.style[a.prop]!=
+null)a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit;else a.elem[a.prop]=a.now}}});if(c.expr&&c.expr.filters)c.expr.filters.animated=function(a){return c.grep(c.timers,function(b){return a===b.elem}).length};c.fn.offset="getBoundingClientRect"in s.documentElement?function(a){var b=this[0];if(!b||!b.ownerDocument)return null;if(a)return this.each(function(e){c.offset.setOffset(this,a,e)});if(b===b.ownerDocument.body)return c.offset.bodyOffset(b);var d=b.getBoundingClientRect(),
+f=b.ownerDocument;b=f.body;f=f.documentElement;return{top:d.top+(self.pageYOffset||c.support.boxModel&&f.scrollTop||b.scrollTop)-(f.clientTop||b.clientTop||0),left:d.left+(self.pageXOffset||c.support.boxModel&&f.scrollLeft||b.scrollLeft)-(f.clientLeft||b.clientLeft||0)}}:function(a){var b=this[0];if(!b||!b.ownerDocument)return null;if(a)return this.each(function(t){c.offset.setOffset(this,a,t)});if(b===b.ownerDocument.body)return c.offset.bodyOffset(b);c.offset.initialize();var d=b.offsetParent,f=
+b,e=b.ownerDocument,i,j=e.documentElement,o=e.body;f=(e=e.defaultView)?e.getComputedStyle(b,null):b.currentStyle;for(var p=b.offsetTop,n=b.offsetLeft;(b=b.parentNode)&&b!==o&&b!==j;){if(c.offset.supportsFixedPosition&&f.position==="fixed")break;i=e?e.getComputedStyle(b,null):b.currentStyle;p-=b.scrollTop;n-=b.scrollLeft;if(b===d){p+=b.offsetTop;n+=b.offsetLeft;if(c.offset.doesNotAddBorder&&!(c.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(b.nodeName))){p+=parseFloat(i.borderTopWidth)||
+0;n+=parseFloat(i.borderLeftWidth)||0}f=d;d=b.offsetParent}if(c.offset.subtractsBorderForOverflowNotVisible&&i.overflow!=="visible"){p+=parseFloat(i.borderTopWidth)||0;n+=parseFloat(i.borderLeftWidth)||0}f=i}if(f.position==="relative"||f.position==="static"){p+=o.offsetTop;n+=o.offsetLeft}if(c.offset.supportsFixedPosition&&f.position==="fixed"){p+=Math.max(j.scrollTop,o.scrollTop);n+=Math.max(j.scrollLeft,o.scrollLeft)}return{top:p,left:n}};c.offset={initialize:function(){var a=s.body,b=s.createElement("div"),
+d,f,e,i=parseFloat(c.curCSS(a,"marginTop",true))||0;c.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"});b.innerHTML="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";a.insertBefore(b,a.firstChild);
+d=b.firstChild;f=d.firstChild;e=d.nextSibling.firstChild.firstChild;this.doesNotAddBorder=f.offsetTop!==5;this.doesAddBorderForTableAndCells=e.offsetTop===5;f.style.position="fixed";f.style.top="20px";this.supportsFixedPosition=f.offsetTop===20||f.offsetTop===15;f.style.position=f.style.top="";d.style.overflow="hidden";d.style.position="relative";this.subtractsBorderForOverflowNotVisible=f.offsetTop===-5;this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i;a.removeChild(b);c.offset.initialize=c.noop},
+bodyOffset:function(a){var b=a.offsetTop,d=a.offsetLeft;c.offset.initialize();if(c.offset.doesNotIncludeMarginInBodyOffset){b+=parseFloat(c.curCSS(a,"marginTop",true))||0;d+=parseFloat(c.curCSS(a,"marginLeft",true))||0}return{top:b,left:d}},setOffset:function(a,b,d){if(/static/.test(c.curCSS(a,"position")))a.style.position="relative";var f=c(a),e=f.offset(),i=parseInt(c.curCSS(a,"top",true),10)||0,j=parseInt(c.curCSS(a,"left",true),10)||0;if(c.isFunction(b))b=b.call(a,d,e);d={top:b.top-e.top+i,left:b.left-
+e.left+j};"using"in b?b.using.call(a,d):f.css(d)}};c.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),d=this.offset(),f=/^body|html$/i.test(b[0].nodeName)?{top:0,left:0}:b.offset();d.top-=parseFloat(c.curCSS(a,"marginTop",true))||0;d.left-=parseFloat(c.curCSS(a,"marginLeft",true))||0;f.top+=parseFloat(c.curCSS(b[0],"borderTopWidth",true))||0;f.left+=parseFloat(c.curCSS(b[0],"borderLeftWidth",true))||0;return{top:d.top-f.top,left:d.left-f.left}},offsetParent:function(){return this.map(function(){for(var a=
+this.offsetParent||s.body;a&&!/^body|html$/i.test(a.nodeName)&&c.css(a,"position")==="static";)a=a.offsetParent;return a})}});c.each(["Left","Top"],function(a,b){var d="scroll"+b;c.fn[d]=function(f){var e=this[0],i;if(!e)return null;if(f!==w)return this.each(function(){if(i=wa(this))i.scrollTo(!a?f:c(i).scrollLeft(),a?f:c(i).scrollTop());else this[d]=f});else return(i=wa(e))?"pageXOffset"in i?i[a?"pageYOffset":"pageXOffset"]:c.support.boxModel&&i.document.documentElement[d]||i.document.body[d]:e[d]}});
+c.each(["Height","Width"],function(a,b){var d=b.toLowerCase();c.fn["inner"+b]=function(){return this[0]?c.css(this[0],d,false,"padding"):null};c.fn["outer"+b]=function(f){return this[0]?c.css(this[0],d,false,f?"margin":"border"):null};c.fn[d]=function(f){var e=this[0];if(!e)return f==null?null:this;return"scrollTo"in e&&e.document?e.document.compatMode==="CSS1Compat"&&e.document.documentElement["client"+b]||e.document.body["client"+b]:e.nodeType===9?Math.max(e.documentElement["client"+b],e.body["scroll"+
+b],e.documentElement["scroll"+b],e.body["offset"+b],e.documentElement["offset"+b]):f===w?c.css(e,d):this.css(d,typeof f==="string"?f:f+"px")}});A.jQuery=A.$=c})(window);
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.6_min.js b/devtools/client/inspector/markup/test/lib_jquery_1.6_min.js
new file mode 100644
index 0000000000..c72011dfa0
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.6_min.js
@@ -0,0 +1,16 @@
+/*!
+ * jQuery JavaScript Library v1.6
+ * http://jquery.com/
+ *
+ * Copyright 2011, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * Includes Sizzle.js
+ * http://sizzlejs.com/
+ * Copyright 2011, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ *
+ * Date: Mon May 2 13:50:00 2011 -0400
+ */
+(function(a,b){function cw(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function ct(a){if(!ch[a]){var b=f("<"+a+">").appendTo("body"),d=b.css("display");b.remove();if(d==="none"||d===""){ci||(ci=c.createElement("iframe"),ci.frameBorder=ci.width=ci.height=0),c.body.appendChild(ci);if(!cj||!ci.createElement)cj=(ci.contentWindow||ci.contentDocument).document,cj.write("<!doctype><html><body></body></html>");b=cj.createElement(a),cj.body.appendChild(b),d=f.css(b,"display"),c.body.removeChild(ci)}ch[a]=d}return ch[a]}function cs(a,b){var c={};f.each(cn.concat.apply([],cn.slice(0,b)),function(){c[this]=a});return c}function cr(){co=b}function cq(){setTimeout(cr,0);return co=f.now()}function cg(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function cf(){try{return new a.XMLHttpRequest}catch(b){}}function b_(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function b$(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function bZ(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bD.test(a)?d(a,e):bZ(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)bZ(a+"["+e+"]",b[e],c,d);else d(a,b)}function bY(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bS,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=bY(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=bY(a,c,d,e,"*",g));return l}function bX(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bO),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bB(a,b,c){var d=b==="width"?bv:bw,e=b==="width"?a.offsetWidth:a.offsetHeight;if(c==="border")return e;f.each(d,function(){c||(e-=parseFloat(f.css(a,"padding"+this))||0),c==="margin"?e+=parseFloat(f.css(a,"margin"+this))||0:e-=parseFloat(f.css(a,"border"+this+"Width"))||0});return e}function bl(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval(b.text||b.textContent||b.innerHTML||""),b.parentNode&&b.parentNode.removeChild(b)}function bk(a){f.nodeName(a,"input")?bj(a):a.getElementsByTagName&&f.grep(a.getElementsByTagName("input"),bj)}function bj(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bi(a){return"getElementsByTagName"in a?a.getElementsByTagName("*"):"querySelectorAll"in a?a.querySelectorAll("*"):[]}function bh(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bg(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c=f.expando,d=f.data(a),e=f.data(b,d);if(d=d[c]){var g=d.events;e=e[c]=f.extend({},d);if(g){delete e.handle,e.events={};for(var h in g)for(var i=0,j=g[h].length;i<j;i++)f.event.add(b,h+(g[h][i].namespace?".":"")+g[h][i].namespace,g[h][i],g[h][i].data)}}}}function bf(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function W(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(R.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function V(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function N(a,b){return(a&&a!=="*"?a+".":"")+b.replace(z,"`").replace(A,"&")}function M(a){var b,c,d,e,g,h,i,j,k,l,m,n,o,p=[],q=[],r=f._data(this,"events");if(!(a.liveFired===this||!r||!r.live||a.target.disabled||a.button&&a.type==="click")){a.namespace&&(n=new RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)")),a.liveFired=this;var s=r.live.slice(0);for(i=0;i<s.length;i++)g=s[i],g.origType.replace(x,"")===a.type?q.push(g.selector):s.splice(i--,1);e=f(a.target).closest(q,a.currentTarget);for(j=0,k=e.length;j<k;j++){m=e[j];for(i=0;i<s.length;i++){g=s[i];if(m.selector===g.selector&&(!n||n.test(g.namespace))&&!m.elem.disabled){h=m.elem,d=null;if(g.preType==="mouseenter"||g.preType==="mouseleave")a.type=g.preType,d=f(a.relatedTarget).closest(g.selector)[0],d&&f.contains(h,d)&&(d=h);(!d||d!==h)&&p.push({elem:h,handleObj:g,level:m.level})}}}for(j=0,k=p.length;j<k;j++){e=p[j];if(c&&e.level>c)break;a.currentTarget=e.elem,a.data=e.handleObj.data,a.handleObj=e.handleObj,o=e.handleObj.origHandler.apply(e.elem,arguments);if(o===!1||a.isPropagationStopped()){c=e.level,o===!1&&(b=!1);if(a.isImmediatePropagationStopped())break}}return b}}function K(a,c,d){var e=f.extend({},d[0]);e.type=a,e.originalEvent={},e.liveFired=b,f.event.handle.call(c,e),e.isDefaultPrevented()&&d[0].preventDefault()}function E(){return!0}function D(){return!1}function m(a,c,d){var e=c+"defer",g=c+"queue",h=c+"mark",i=f.data(a,e,b,!0);i&&(d==="queue"||!f.data(a,g,b,!0))&&(d==="mark"||!f.data(a,h,b,!0))&&setTimeout(function(){!f.data(a,g,b,!0)&&!f.data(a,h,b,!0)&&(f.removeData(a,e,!0),i.resolve())},0)}function l(a){for(var b in a)if(b!=="toJSON")return!1;return!0}function k(a,c,d){if(d===b&&a.nodeType===1){name="data-"+c.replace(j,"$1-$2").toLowerCase(),d=a.getAttribute(name);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNaN(d)?i.test(d)?f.parseJSON(d):d:parseFloat(d)}catch(e){}f.data(a,c,d)}else d=b}return d}var c=a.document,d=a.navigator,e=a.location,f=function(){function H(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(H,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/\d/,n=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,o=/^[\],:{}\s]*$/,p=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,q=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,r=/(?:^|:|,)(?:\s*\[)+/g,s=/(webkit)[ \/]([\w.]+)/,t=/(opera)(?:.*version)?[ \/]([\w.]+)/,u=/(msie) ([\w.]+)/,v=/(mozilla)(?:.*? rv:([\w.]+))?/,w=d.userAgent,x,y,z,A=Object.prototype.toString,B=Object.prototype.hasOwnProperty,C=Array.prototype.push,D=Array.prototype.slice,E=String.prototype.trim,F=Array.prototype.indexOf,G={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)==="<"&&a.charAt(a.length-1)===">"&&a.length>=3?g=[null,a,null]:g=i.exec(a);if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=n.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.6",length:0,size:function(){return this.length},toArray:function(){return D.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?C.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),y.done(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(D.apply(this,arguments),"slice",D.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:C,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;y.resolveWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").unbind("ready")}},bindReady:function(){if(!y){y=e._Deferred();if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",z,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",z),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&H()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNaN:function(a){return a==null||!m.test(a)||isNaN(a)},type:function(a){return a==null?String(a):G[A.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;if(a.constructor&&!B.call(a,"constructor")&&!B.call(a.constructor.prototype,"isPrototypeOf"))return!1;var c;for(c in a);return c===b||B.call(a,c)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw a},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(o.test(b.replace(p,"@").replace(q,"]").replace(r,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(b,c,d){a.DOMParser?(d=new DOMParser,c=d.parseFromString(b,"text/xml")):(c=new ActiveXObject("Microsoft.XMLDOM"),c.async="false",c.loadXML(b)),d=c.documentElement,(!d||!d.nodeName||d.nodeName==="parsererror")&&e.error("Invalid XML: "+b);return c},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:E?function(a){return a==null?"":E.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?C.call(c,a):e.merge(c,a)}return c},inArray:function(a,b){if(F)return F.call(b,a);for(var c=0,d=b.length;c<d;c++)if(b[c]===a)return c;return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=D.call(arguments,2),g=function(){return a.apply(c,f.concat(D.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=s.exec(a)||t.exec(a)||u.exec(a)||a.indexOf("compatible")<0&&v.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(c,d){d&&d instanceof e&&!(d instanceof a)&&(d=a(d));return e.fn.init.call(this,c,d,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){G["[object "+b+"]"]=b.toLowerCase()}),x=e.uaMatch(w),x.browser&&(e.browser[x.browser]=!0,e.browser.version=x.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?z=function(){c.removeEventListener("DOMContentLoaded",z,!1),e.ready()}:c.attachEvent&&(z=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",z),e.ready())});return e}(),g="done fail isResolved isRejected promise then always pipe".split(" "),h=[].slice;f.extend({_Deferred:function(){var a=[],b,c,d,e={done:function(){if(!d){var c=arguments,g,h,i,j,k;b&&(k=b,b=0);for(g=0,h=c.length;g<h;g++)i=c[g],j=f.type(i),j==="array"?e.done.apply(e,i):j==="function"&&a.push(i);k&&e.resolveWith(k[0],k[1])}return this},resolveWith:function(e,f){if(!d&&!b&&!c){f=f||[],c=1;try{while(a[0])a.shift().apply(e,f)}finally{b=[e,f],c=0}}return this},resolve:function(){e.resolveWith(this,arguments);return this},isResolved:function(){return!!c||!!b},cancel:function(){d=1,a=[];return this}};return e},Deferred:function(a){var b=f._Deferred(),c=f._Deferred(),d;f.extend(b,{then:function(a,c){b.done(a).fail(c);return this},always:function(){return b.done.apply(b,arguments).fail.apply(this,arguments)},fail:c.done,rejectWith:c.resolveWith,reject:c.resolve,isRejected:c.isResolved,pipe:function(a,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[c,"reject"]},function(a,c){var e=c[0],g=c[1],h;f.isFunction(e)?b[a](function(){h=e.apply(this,arguments),f.isFunction(h.promise)?h.promise().then(d.resolve,d.reject):d[g](h)}):b[a](d[g])})}).promise()},promise:function(a){if(a==null){if(d)return d;d=a={}}var c=g.length;while(c--)a[g[c]]=b[g[c]];return a}}),b.done(c.cancel).fail(b.cancel),delete b.cancel,a&&a.call(b,b);return b},when:function(a){function i(a){return function(c){b[a]=arguments.length>1?h.call(arguments,0):c,--e||g.resolveWith(g,h.call(b,0))}}var b=arguments,c=0,d=b.length,e=d,g=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred();if(d>1){for(;c<d;c++)b[c]&&f.isFunction(b[c].promise)?b[c].promise().then(i(c),g.reject):--e;e||g.resolveWith(g,b)}else g!==a&&g.resolveWith(g,d?[a]:[]);return g.promise()}}),f.support=function(){var a=c.createElement("div"),b,d,e,f,g,h,i,j,k,l,m,n,o,p,q;a.setAttribute("className","t"),a.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",b=a.getElementsByTagName("*"),d=a.getElementsByTagName("a")[0];if(!b||!b.length||!d)return{};e=c.createElement("select"),f=e.appendChild(c.createElement("option")),g=a.getElementsByTagName("input")[0],i={leadingWhitespace:a.firstChild.nodeType===3,tbody:!a.getElementsByTagName("tbody").length,htmlSerialize:!!a.getElementsByTagName("link").length,style:/top/.test(d.getAttribute("style")),hrefNormalized:d.getAttribute("href")==="/a",opacity:/^0.55$/.test(d.style.opacity),cssFloat:!!d.style.cssFloat,checkOn:g.value==="on",optSelected:f.selected,getSetAttribute:a.className!=="t",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},g.checked=!0,i.noCloneChecked=g.cloneNode(!0).checked,e.disabled=!0,i.optDisabled=!f.disabled;try{delete a.test}catch(r){i.deleteExpando=!1}!a.addEventListener&&a.attachEvent&&a.fireEvent&&(a.attachEvent("onclick",function click(){i.noCloneEvent=!1,a.detachEvent("onclick",click)}),a.cloneNode(!0).fireEvent("onclick")),g=c.createElement("input"),g.value="t",g.setAttribute("type","radio"),i.radioValue=g.value==="t",g.setAttribute("checked","checked"),a.appendChild(g),j=c.createDocumentFragment(),j.appendChild(a.firstChild),i.checkClone=j.cloneNode(!0).cloneNode(!0).lastChild.checked,a.innerHTML="",a.style.width=a.style.paddingLeft="1px",k=c.createElement("body"),l={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"};for(p in l)k.style[p]=l[p];k.appendChild(a),c.documentElement.appendChild(k),i.appendChecked=g.checked,i.boxModel=a.offsetWidth===2,"zoom"in a.style&&(a.style.display="inline",a.style.zoom=1,i.inlineBlockNeedsLayout=a.offsetWidth===2,a.style.display="",a.innerHTML="<div style='width:4px;'></div>",i.shrinkWrapBlocks=a.offsetWidth!==2),a.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",m=a.getElementsByTagName("td"),q=m[0].offsetHeight===0,m[0].style.display="",m[1].style.display="none",i.reliableHiddenOffsets=q&&m[0].offsetHeight===0,a.innerHTML="",c.defaultView&&c.defaultView.getComputedStyle&&(h=c.createElement("div"),h.style.width="0",h.style.marginRight="0",a.appendChild(h),i.reliableMarginRight=(parseInt(c.defaultView.getComputedStyle(h,null).marginRight,10)||0)===0),k.innerHTML="",c.documentElement.removeChild(k);if(a.attachEvent)for(p in{submit:1,change:1,focusin:1})o="on"+p,q=o in a,q||(a.setAttribute(o,"return;"),q=typeof a[o]=="function"),i[p+"Bubbles"]=q;return i}(),f.boxModel=f.support.boxModel;var i=/^(?:\{.*\}|\[.*\])$/,j=/([a-z])([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!l(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g=f.expando,h=typeof c=="string",i,j=a.nodeType,k=j?f.cache:a,l=j?a[f.expando]:a[f.expando]&&f.expando;if((!l||e&&l&&!k[l][g])&&h&&d===b)return;l||(j?a[f.expando]=l=++f.uuid:l=f.expando),k[l]||(k[l]={},j||(k[l].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?k[l][g]=f.extend(k[l][g],c):k[l]=f.extend(k[l],c);i=k[l],e&&(i[g]||(i[g]={}),i=i[g]),d!==b&&(i[c]=d);if(c==="events"&&!i[c])return i[g]&&i[g].events;return h?i[c]:i}},removeData:function(b,c,d){if(!!f.acceptData(b)){var e=f.expando,g=b.nodeType,h=g?f.cache:b,i=g?b[f.expando]:f.expando;if(!h[i])return;if(c){var j=d?h[i][e]:h[i];if(j){delete j[c];if(!l(j))return}}if(d){delete h[i][e];if(!l(h[i]))return}var k=h[i][e];f.support.deleteExpando||h!=a?delete h[i]:h[i]=null,k?(h[i]={},g||(h[i].toJSON=f.noop),h[i][e]=k):g&&(f.support.deleteExpando?delete b[f.expando]:b.removeAttribute?b.removeAttribute(f.expando):b[f.expando]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d=null;if(typeof a=="undefined"){if(this.length){d=f.data(this[0]);if(this[0].nodeType===1){var e=this[0].attributes,g;for(var h=0,i=e.length;h<i;h++)g=e[h].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),k(this[0],g,d[g]))}}return d}if(typeof a=="object")return this.each(function(){f.data(this,a)});var j=a.split(".");j[1]=j[1]?"."+j[1]:"";if(c===b){d=this.triggerHandler("getData"+j[1]+"!",[j[0]]),d===b&&this.length&&(d=f.data(this[0],a),d=k(this[0],a,d));return d===b&&j[1]?this.data(j[0]):d}return this.each(function(){var b=f(this),d=[j[0],c];b.triggerHandler("setData"+j[1]+"!",d),f.data(this,a,c),b.triggerHandler("changeData"+j[1]+"!",d)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,c){a&&(c=(c||"fx")+"mark",f.data(a,c,(f.data(a,c,b,!0)||0)+1,!0))},_unmark:function(a,c,d){a!==!0&&(d=c,c=a,a=!1);if(c){d=d||"fx";var e=d+"mark",g=a?0:(f.data(c,e,b,!0)||1)-1;g?f.data(c,e,g,!0):(f.removeData(c,e,!0),m(c,d,"mark"))}},queue:function(a,c,d){if(a){c=(c||"fx")+"queue";var e=f.data(a,c,b,!0);d&&(!e||f.isArray(d)?e=f.data(a,c,f.makeArray(d),!0):e.push(d));return e||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e;d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),d.call(a,function(){f.dequeue(a,b)})),c.length||(f.removeData(a,b+"queue",!0),m(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(){var c=this;setTimeout(function(){f.dequeue(c,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function l(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark";while(g--)if(tmp=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f._Deferred(),!0))h++,tmp.done(l);l();return d.promise()}});var n=/[\n\t\r]/g,o=/\s+/,p=/\r/g,q=/^(?:button|input)$/i,r=/^(?:button|input|object|select|textarea)$/i,s=/^a(?:rea)?$/i,t=/^(?:data-|aria-)/,u=/\:/,v;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.addClass(a.call(this,b,c.attr("class")||""))});if(a&&typeof a=="string"){var b=(a||"").split(o);for(var c=0,d=this.length;c<d;c++){var e=this[c];if(e.nodeType===1)if(!e.className)e.className=a;else{var g=" "+e.className+" ",h=e.className;for(var i=0,j=b.length;i<j;i++)g.indexOf(" "+b[i]+" ")<0&&(h+=" "+b[i]);e.className=f.trim(h)}}}return this},removeClass:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.removeClass(a.call(this,b,c.attr("class")))});if(a&&typeof a=="string"||a===b){var c=(a||"").split(o);for(var d=0,e=this.length;d<e;d++){var g=this[d];if(g.nodeType===1&&g.className)if(a){var h=(" "+g.className+" ").replace(n," ");for(var i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){var d=f(this);d.toggleClass(a.call(this,c,d.attr("class"),b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(o);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ";for(var c=0,d=this.length;c<d;c++)if((" "+this[c].className+" ").replace(n," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e=this[0];if(!arguments.length){if(e){c=f.valHooks[e.nodeName.toLowerCase()]||f.valHooks[e.type];if(c&&"get"in c&&(d=c.get(e,"value"))!==b)return d;return(e.value||"").replace(p,"")}return b}var g=f.isFunction(a);return this.each(function(d){var e=f(this),h;if(this.nodeType===1){g?h=a.call(this,d,e.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||"set"in c&&c.set(this,h,"value")===b)this.value=h}})}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b=a.selectedIndex,c=[],d=a.options,e=a.type==="select-one";if(b<0)return null;for(var g=e?b:0,h=e?b+1:d.length;g<h;g++){var i=d[g];if(i.selected&&(f.support.optDisabled?!i.disabled:i.getAttribute("disabled")===null)&&(!i.parentNode.disabled||!f.nodeName(i.parentNode,"optgroup"))){value=f(i).val();if(e)return value;c.push(value)}}if(e&&!c.length&&d.length)return f(d[b]).val();return c},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attrFix:{tabindex:"tabIndex",readonly:"readOnly"},attr:function(a,c,d,e){var g=a.nodeType;if(!a||g===3||g===8||g===2)return b;if(e&&c in f.attrFn)return f(a)[c](d);var h,i,j=g!==1||!f.isXMLDoc(a);c=j&&f.attrFix[c]||c,i=f.attrHooks[c]||(v&&(f.nodeName(a,"form")||u.test(c))?v:b);if(d!==b){if(d===null||d===!1&&!t.test(c)){f.removeAttr(a,c);return b}if(i&&"set"in i&&j&&(h=i.set(a,d,c))!==b)return h;d===!0&&!t.test(c)&&(d=c),a.setAttribute(c,""+d);return d}if(i&&"get"in i&&j)return i.get(a,c);h=a.getAttribute(c);return h===null?b:h},removeAttr:function(a,b){a.nodeType===1&&(b=f.attrFix[b]||b,f.support.getSetAttribute?a.removeAttribute(b):(f.attr(a,b,""),a.removeAttributeNode(a.getAttributeNode(b))))},attrHooks:{type:{set:function(a,b){if(q.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.getAttribute("value");a.setAttribute("type",b),c&&(a.value=c);return b}}},tabIndex:{get:function(a){var c=a.getAttributeNode("tabIndex");return c&&c.specified?parseInt(c.value,10):r.test(a.nodeName)||s.test(a.nodeName)&&a.href?0:b}}},propFix:{},prop:function(a,c,d){var e=a.nodeType;if(!a||e===3||e===8||e===2)return b;var g,h,i=e!==1||!f.isXMLDoc(a);c=i&&f.propFix[c]||c,h=f.propHooks[c];return d!==b?h&&"set"in h&&(g=h.set(a,d,c))!==b?g:a[c]=d:h&&"get"in h&&(g=h.get(a,c))!==b?g:a[c]},propHooks:{}}),f.support.getSetAttribute||(f.attrFix=f.extend(f.attrFix,{"for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder"}),v=f.attrHooks.name=f.attrHooks.value=f.valHooks.button={get:function(a,c){var d;if(c==="value"&&!f.nodeName(a,"button"))return a.getAttribute(c);d=a.getAttributeNode(c);return d&&d.specified?d.nodeValue:b},set:function(a,b,c){var d=a.getAttributeNode(c);if(d){d.nodeValue=b;return b}}},f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})})),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}})),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var w=Object.prototype.hasOwnProperty,x=/\.(.*)$/,y=/^(?:textarea|input|select)$/i,z=/\./g,A=/ /g,B=/[^\w\s.|`]/g,C=function(a){return a.replace(B,"\\$&")};f.event={add:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){if(d===!1)d=D;else if(!d)return;var g,h;d.handler&&(g=d,d=g.handler),d.guid||(d.guid=f.guid++);var i=f._data(a);if(!i)return;var j=i.events,k=i.handle;j||(i.events=j={}),k||(i.handle=k=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.handle.apply(k.elem,arguments):b}),k.elem=a,c=c.split(" ");var l,m=0,n;while(l=c[m++]){h=g?f.extend({},g):{handler:d,data:e},l.indexOf(".")>-1?(n=l.split("."),l=n.shift(),h.namespace=n.slice(0).sort().join(".")):(n=[],h.namespace=""),h.type=l,h.guid||(h.guid=d.guid);var o=j[l],p=f.event.special[l]||{};if(!o){o=j[l]=[];if(!p.setup||p.setup.call(a,e,n,k)===!1)a.addEventListener?a.addEventListener(l,k,!1):a.attachEvent&&a.attachEvent("on"+l,k)}p.add&&(p.add.call(a,h),h.handler.guid||(h.handler.guid=d.guid)),o.push(h),f.event.global[l]=!0}a=null}},global:{},remove:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){d===!1&&(d=D);var g,h,i,j,k=0,l,m,n,o,p,q,r,s=f.hasData(a)&&f._data(a),t=s&&s.events;if(!s||!t)return;c&&c.type&&(d=c.handler,c=c.type);if(!c||typeof c=="string"&&c.charAt(0)==="."){c=c||"";for(h in t)f.event.remove(a,h+c);return}c=c.split(" ");while(h=c[k++]){r=h,q=null,l=h.indexOf(".")<0,m=[],l||(m=h.split("."),h=m.shift(),n=new RegExp("(^|\\.)"+f.map(m.slice(0).sort(),C).join("\\.(?:.*\\.)?")+"(\\.|$)")),p=t[h];if(!p)continue;if(!d){for(j=0;j<p.length;j++){q=p[j];if(l||n.test(q.namespace))f.event.remove(a,r,q.handler,j),p.splice(j--,1)}continue}o=f.event.special[h]||{};for(j=e||0;j<p.length;j++){q=p[j];if(d.guid===q.guid){if(l||n.test(q.namespace))e==null&&p.splice(j--,1),o.remove&&o.remove.call(a,q);if(e!=null)break}}if(p.length===0||e!=null&&p.length===1)(!o.teardown||o.teardown.call(a,m)===!1)&&f.removeEvent(a,h,s.handle),g=null,delete t[h]}if(f.isEmptyObject(t)){var u=s.handle;u&&(u.elem=null),delete s.events,delete s.handle,f.isEmptyObject(s)&&f.removeData(a,b,!0)}}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){var h=c.type||c,i=[],j;h.indexOf("!")>=0&&(h=h.slice(0,-1),j=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if(!!e&&!f.event.customEvent[h]||!!f.event.global[h]){c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.exclusive=j,c.namespace=i.join("."),c.namespace_re=new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)");if(g||!e)c.preventDefault(),c.stopPropagation();if(!e){f.each(f.cache,function(){var a=f.expando,b=this[a];b&&b.events&&b.events[h]&&f.event.trigger(c,d,b.handle.elem)});return}if(e.nodeType===3||e.nodeType===8)return;c.result=b,c.target=e,d=d?f.makeArray(d):[],d.unshift(c);var k=e,l=h.indexOf(":")<0?"on"+h:"";do{var m=f._data(k,"handle");c.currentTarget=k,m&&m.apply(k,d),l&&f.acceptData(k)&&k[l]&&k[l].apply(k,d)===!1&&(c.result=!1,c.preventDefault()),k=k.parentNode||k.ownerDocument||k===c.target.ownerDocument&&a}while(k&&!c.isPropagationStopped());if(!c.isDefaultPrevented()){var n,o=f.event.special[h]||{};if((!o._default||o._default.call(e.ownerDocument,c)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)){try{l&&e[h]&&(n=e[l],n&&(e[l]=null),f.event.triggered=h,e[h]())}catch(p){}n&&(e[l]=n),f.event.triggered=b}}return c.result}},handle:function(c){c=f.event.fix(c||a.event);var d=((f._data(this,"events")||{})[c.type]||[]).slice(0),e=!c.exclusive&&!c.namespace,g=Array.prototype.slice.call(arguments,0);g[0]=c,c.currentTarget=this;for(var h=0,i=d.length;h<i;h++){var j=d[h];if(e||c.namespace_re.test(j.namespace)){c.handler=j.handler,c.data=j.data,c.handleObj=j;var k=j.handler.apply(this,g);k!==b&&(c.result=k,k===!1&&(c.preventDefault(),c.stopPropagation()));if(c.isImmediatePropagationStopped())break}}return c.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(a){if(a[f.expando])return a;var d=a;a=f.Event(d);for(var e=this.props.length,g;e;)g=this.props[--e],a[g]=d[g];a.target||(a.target=a.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),!a.relatedTarget&&a.fromElement&&(a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement);if(a.pageX==null&&a.clientX!=null){var h=a.target.ownerDocument||c,i=h.documentElement,j=h.body;a.pageX=a.clientX+(i&&i.scrollLeft||j&&j.scrollLeft||0)-(i&&i.clientLeft||j&&j.clientLeft||0),a.pageY=a.clientY+(i&&i.scrollTop||j&&j.scrollTop||0)-(i&&i.clientTop||j&&j.clientTop||0)}a.which==null&&(a.charCode!=null||a.keyCode!=null)&&(a.which=a.charCode!=null?a.charCode:a.keyCode),!a.metaKey&&a.ctrlKey&&(a.metaKey=a.ctrlKey),!a.which&&a.button!==b&&(a.which=a.button&1?1:a.button&2?3:a.button&4?2:0);return a},guid:1e8,proxy:f.proxy,special:{ready:{setup:f.bindReady,teardown:f.noop},live:{add:function(a){f.event.add(this,N(a.origType,a.selector),f.extend({},a,{handler:M,guid:a.handler.guid}))},remove:function(a){f.event.remove(this,N(a.origType,a.selector),a)}},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}}},f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!this.preventDefault)return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?E:D):this.type=a,b&&f.extend(this,b),this.timeStamp=f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=E;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=E;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=E,this.stopPropagation()},isDefaultPrevented:D,isPropagationStopped:D,isImmediatePropagationStopped:D};var F=function(a){var b=a.relatedTarget;try{if(b&&b!==c&&!b.parentNode)return;while(b&&b!==this)b=b.parentNode;b!==this&&(a.type=a.data,f.event.handle.apply(this,arguments))}catch(d){}},G=function(a){a.type=a.data,f.event.handle.apply(this,arguments)};f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={setup:function(c){f.event.add(this,b,c&&c.selector?G:F,a)},teardown:function(a){f.event.remove(this,b,a&&a.selector?G:F)}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(a,b){if(!f.nodeName(this,"form"))f.event.add(this,"click.specialSubmit",function(a){var b=a.target,c=b.type;(c==="submit"||c==="image")&&f(b).closest("form").length&&K("submit",this,arguments)}),f.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,c=b.type;(c==="text"||c==="password")&&f(b).closest("form").length&&a.keyCode===13&&K("submit",this,arguments)});else return!1},teardown:function(a){f.event.remove(this,".specialSubmit")}});if(!f.support.changeBubbles){var H,I=function(a){var b=a.type,c=a.value;b==="radio"||b==="checkbox"?c=a.checked:b==="select-multiple"?c=a.selectedIndex>-1?f.map(a.options,function(a){return a.selected}).join("-"):"":f.nodeName(a,"select")&&(c=a.selectedIndex);return c},J=function J(a){var c=a.target,d,e;if(!!y.test(c.nodeName)&&!c.readOnly){d=f._data(c,"_change_data"),e=I(c),(a.type!=="focusout"||c.type!=="radio")&&f._data(c,"_change_data",e);if(d===b||e===d)return;if(d!=null||e)a.type="change",a.liveFired=b,f.event.trigger(a,arguments[1],c)}};f.event.special.change={filters:{focusout:J,beforedeactivate:J,click:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(c==="radio"||c==="checkbox"||f.nodeName(b,"select"))&&J.call(this,a)},keydown:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(a.keyCode===13&&!f.nodeName(b,"textarea")||a.keyCode===32&&(c==="checkbox"||c==="radio")||c==="select-multiple")&&J.call(this,a)},beforeactivate:function(a){var b=a.target;f._data(b,"_change_data",I(b))}},setup:function(a,b){if(this.type==="file")return!1;for(var c in H)f.event.add(this,c+".specialChange",H[c]);return y.test(this.nodeName)},teardown:function(a){f.event.remove(this,".specialChange");return y.test(this.nodeName)}},H=f.event.special.change.filters,H.focus=H.beforeactivate}f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){function e(a){var c=f.event.fix(a);c.type=b,c.originalEvent={},f.event.trigger(c,null,c.target),c.isDefaultPrevented()&&a.preventDefault()}var d=0;f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.each(["bind","one"],function(a,c){f.fn[c]=function(a,d,e){var g;if(typeof a=="object"){for(var h in a)this[c](h,d,a[h],e);return this}if(arguments.length===2||d===!1)e=d,d=b;c==="one"?(g=function(a){f(this).unbind(a,g);return e.apply(this,arguments)},g.guid=e.guid||f.guid++):g=e;if(a==="unload"&&c!=="one")this.one(a,d,e);else for(var i=0,j=this.length;i<j;i++)f.event.add(this[i],a,g,d);return this}}),f.fn.extend({unbind:function(a,b){if(typeof a=="object"&&!a.preventDefault)for(var c in a)this.unbind(c,a[c]);else for(var d=0,e=this.length;d<e;d++)f.event.remove(this[d],a,b);return this},delegate:function(a,b,c,d){return this.live(b,c,d,a)},undelegate:function(a,b,c){return arguments.length===0?this.unbind("live"):this.die(b,null,c,a)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f.data(this,"lastToggle"+a.guid)||0)%d;f.data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var L={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};f.each(["live","die"],function(a,c){f.fn[c]=function(a,d,e,g){var h,i=0,j,k,l,m=g||this.selector,n=g?this:f(this.context);if(typeof a=="object"&&!a.preventDefault){for(var o in a)n[c](o,d,a[o],m);return this}if(c==="die"&&!a&&g&&g.charAt(0)==="."){n.unbind(g);return this}if(d===!1||f.isFunction(d))e=d||D,d=b;a=(a||"").split(" ");while((h=a[i++])!=null){j=x.exec(h),k="",j&&(k=j[0],h=h.replace(x,""));if(h==="hover"){a.push("mouseenter"+k,"mouseleave"+k);continue}l=h,L[h]?(a.push(L[h]+k),h=h+k):h=(L[h]||h)+k;if(c==="live")for(var p=0,q=n.length;p<q;p++)f.event.add(n[p],"live."+N(h,m),{data:d,selector:m,handler:e,origType:h,origHandler:e,preType:l});else n.unbind("live."+N(h,m),e)}return this}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0)}),function(){function u(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}if(i.nodeType===1){f||(i.sizcache=c,i.sizset=g);if(typeof b!="string"){if(i===b){j=!0;break}}else if(k.filter(b,[i]).length>0){j=i;break}}i=i[a]}d[g]=j}}}function t(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}i.nodeType===1&&!f&&(i.sizcache=c,i.sizset=g);if(i.nodeName.toLowerCase()===b){j=i;break}i=i[a]}d[g]=j}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d=0,e=Object.prototype.toString,g=!1,h=!0,i=/\\/g,j=/\W/;[0,0].sort(function(){h=!1;return 0});var k=function(b,d,f,g){f=f||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return f;var i,j,n,o,q,r,s,t,u=!0,w=k.isXML(d),x=[],y=b;do{a.exec(""),i=a.exec(y);if(i){y=i[3],x.push(i[1]);if(i[2]){o=i[3];break}}}while(i);if(x.length>1&&m.exec(b))if(x.length===2&&l.relative[x[0]])j=v(x[0]+x[1],d);else{j=l.relative[x[0]]?[d]:k(x.shift(),d);while(x.length)b=x.shift(),l.relative[b]&&(b+=x.shift()),j=v(b,j)}else{!g&&x.length>1&&d.nodeType===9&&!w&&l.match.ID.test(x[0])&&!l.match.ID.test(x[x.length-1])&&(q=k.find(x.shift(),d,w),d=q.expr?k.filter(q.expr,q.set)[0]:q.set[0]);if(d){q=g?{expr:x.pop(),set:p(g)}:k.find(x.pop(),x.length===1&&(x[0]==="~"||x[0]==="+")&&d.parentNode?d.parentNode:d,w),j=q.expr?k.filter(q.expr,q.set):q.set,x.length>0?n=p(j):u=!1;while(x.length)r=x.pop(),s=r,l.relative[r]?s=x.pop():r="",s==null&&(s=d),l.relative[r](n,s,w)}else n=x=[]}n||(n=j),n||k.error(r||b);if(e.call(n)==="[object Array]")if(!u)f.push.apply(f,n);else if(d&&d.nodeType===1)for(t=0;n[t]!=null;t++)n[t]&&(n[t]===!0||n[t].nodeType===1&&k.contains(d,n[t]))&&f.push(j[t]);else for(t=0;n[t]!=null;t++)n[t]&&n[t].nodeType===1&&f.push(j[t]);else p(n,f);o&&(k(o,h,f,g),k.uniqueSort(f));return f};k.uniqueSort=function(a){if(r){g=h,a.sort(r);if(g)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},k.matches=function(a,b){return k(a,null,null,b)},k.matchesSelector=function(a,b){return k(b,null,null,[a]).length>0},k.find=function(a,b,c){var d;if(!a)return[];for(var e=0,f=l.order.length;e<f;e++){var g,h=l.order[e];if(g=l.leftMatch[h].exec(a)){var j=g[1];g.splice(1,1);if(j.substr(j.length-1)!=="\\"){g[1]=(g[1]||"").replace(i,""),d=l.find[h](g,b,c);if(d!=null){a=a.replace(l.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},k.filter=function(a,c,d,e){var f,g,h=a,i=[],j=c,m=c&&c[0]&&k.isXML(c[0]);while(a&&c.length){for(var n in l.filter)if((f=l.leftMatch[n].exec(a))!=null&&f[2]){var o,p,q=l.filter[n],r=f[1];g=!1,f.splice(1,1);if(r.substr(r.length-1)==="\\")continue;j===i&&(i=[]);if(l.preFilter[n]){f=l.preFilter[n](f,j,d,i,e,m);if(!f)g=o=!0;else if(f===!0)continue}if(f)for(var s=0;(p=j[s])!=null;s++)if(p){o=q(p,f,s,j);var t=e^!!o;d&&o!=null?t?g=!0:j[s]=!1:t&&(i.push(p),g=!0)}if(o!==b){d||(j=i),a=a.replace(l.match[n],"");if(!g)return[];break}}if(a===h)if(g==null)k.error(a);else break;h=a}return j},k.error=function(a){throw"Syntax error, unrecognized expression: "+a};var l=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!j.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&k.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!j.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&k.filter(b,a,!0)}},"":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("parentNode",b,f,a,e,c)},"~":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("previousSibling",b,f,a,e,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(i,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(i,"")},TAG:function(a,b){return a[1].replace(i,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||k.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&k.error(a[0]);a[0]=d++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(i,"");!f&&l.attrMap[g]&&(a[1]=l.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(i,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=k(b[3],null,null,c);else{var g=k.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(l.match.POS.test(b[0])||l.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!k(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){return a.nodeName.toLowerCase()==="input"&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=l.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||k.getText([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}k.error(e)},CHILD:function(a,b){var c=b[1],d=a;switch(c){case"only":case"first":while(d=d.previousSibling)if(d.nodeType===1)return!1;if(c==="first")return!0;d=a;case"last":while(d=d.nextSibling)if(d.nodeType===1)return!1;return!0;case"nth":var e=b[2],f=b[3];if(e===1&&f===0)return!0;var g=b[0],h=a.parentNode;if(h&&(h.sizcache!==g||!a.nodeIndex)){var i=0;for(d=h.firstChild;d;d=d.nextSibling)d.nodeType===1&&(d.nodeIndex=++i);h.sizcache=g}var j=a.nodeIndex-f;return e===0?j===0:j%e===0&&j/e>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=l.attrHandle[c]?l.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=l.setFilters[e];if(f)return f(a,c,b,d)}}},m=l.match.POS,n=function(a,b){return"\\"+(b-0+1)};for(var o in l.match)l.match[o]=new RegExp(l.match[o].source+/(?![^\[]*\])(?![^\(]*\))/.source),l.leftMatch[o]=new RegExp(/(^(?:.|\r|\n)*?)/.source+l.match[o].source.replace(/\\(\d+)/g,n));var p=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(q){p=function(a,b){var c=0,d=b||[];if(e.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var f=a.length;c<f;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var r,s;c.documentElement.compareDocumentPosition?r=function(a,b){if(a===b){g=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(r=function(a,b){var c,d,e=[],f=[],h=a.parentNode,i=b.parentNode,j=h;if(a===b){g=!0;return 0}if(h===i)return s(a,b);if(!h)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return s(e[k],f[k]);return k===c?s(a,f[k],-1):s(e[k],b,1)},s=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),k.getText=function(a){var b="",c;for(var d=0;a[d];d++)c=a[d],c.nodeType===3||c.nodeType===4?b+=c.nodeValue:c.nodeType!==8&&(b+=k.getText(c.childNodes));return b},function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(l.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},l.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(l.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(l.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=k,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){k=function(b,e,f,g){e=e||c;if(!g&&!k.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return p(e.getElementsByTagName(b),f);if(h[2]&&l.find.CLASS&&e.getElementsByClassName)return p(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return p([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return p([],f);if(i.id===h[3])return p([i],f)}try{return p(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var m=e,n=e.getAttribute("id"),o=n||d,q=e.parentNode,r=/^\s*[+~]/.test(b);n?o=o.replace(/'/g,"\\$&"):e.setAttribute("id",o),r&&q&&(e=e.parentNode);try{if(!r||q)return p(e.querySelectorAll("[id='"+o+"'] "+b),f)}catch(s){}finally{n||m.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)k[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}k.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!k.isXML(a))try{if(e||!l.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return k(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;l.order.splice(1,0,"CLASS"),l.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?k.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?k.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:k.contains=function(){return!1},k.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var v=function(a,b){var c,d=[],e="",f=b.nodeType?[b]:b;while(c=l.match.PSEUDO.exec(a))e+=c[0],a=a.replace(l.match.PSEUDO,"");a=l.relative[a]?a+"*":a;for(var g=0,h=f.length;g<h;g++)k(a,f[g],d);return k.filter(e,d)};f.find=k,f.expr=k.selectors,f.expr[":"]=f.expr.filters,f.unique=k.uniqueSort,f.text=k.getText,f.isXMLDoc=k.isXML,f.contains=k.contains}();var O=/Until$/,P=/^(?:parents|prevUntil|prevAll)/,Q=/,/,R=/^.[^:#\[\.,]*$/,S=Array.prototype.slice,T=f.expr.match.POS,U={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(W(this,a,!1),"not",a)},filter:function(a){return this.pushStack(W(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h,i,j={},k=1;if(g&&a.length){for(d=0,e=a.length;d<e;d++)i=a[d],j[i]||(j[i]=T.test(i)?f(i,b||this.context):i);while(g&&g.ownerDocument&&g!==b){for(i in j)h=j[i],(h.jquery?h.index(g)>-1:f(g).is(h))&&c.push({selector:i,elem:g,level:k});g=g.parentNode,k++}}return c}var l=T.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(l?l.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a||typeof a=="string")return f.inArray(this[0],a?f(a):this.parent().children());return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(V(c[0])||V(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=S.call(arguments);O.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!U[a]?f.unique(e):e,(this.length>1||Q.test(d))&&P.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var X=/ jQuery\d+="(?:\d+|null)"/g,Y=/^\s+/,Z=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,$=/<([\w:]+)/,_=/<tbody/i,ba=/<|&#?\w+;/,bb=/<(?:script|object|embed|option|style)/i,bc=/checked\s*(?:[^=]|=\s*.checked.)/i,bd=/\/(java|ecma)script/i,be={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};be.optgroup=be.option,be.tbody=be.tfoot=be.colgroup=be.caption=be.thead,be.th=be.td,f.support.htmlSerialize||(be._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(X,""):null;if(typeof a=="string"&&!bb.test(a)&&(f.support.leadingWhitespace||!Y.test(a))&&!be[($.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Z,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bc.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bf(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bl)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i=b&&b[0]?b[0].ownerDocument||b[0]:c;a.length===1&&typeof a[0]=="string"&&a[0].length<512&&i===c&&a[0].charAt(0)==="<"&&!bb.test(a[0])&&(f.support.checkClone||!bc.test(a[0]))&&(g=!0,h=f.fragments[a[0]],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[a[0]]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bh(a,d),e=bi(a),g=bi(d);for(h=0;e[h];++h)bh(e[h],g[h])}if(b){bg(a,d);if(c){e=bi(a),g=bi(d);for(h=0;e[h];++h)bg(e[h],g[h])}}return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[];for(var i=0,j;(j=a[i])!=null;i++){typeof j=="number"&&(j+="");if(!j)continue;if(typeof j=="string")if(!ba.test(j))j=b.createTextNode(j);else{j=j.replace(Z,"<$1></$2>");var k=($.exec(j)||["",""])[1].toLowerCase(),l=be[k]||be._default,m=l[0],n=b.createElement("div");n.innerHTML=l[1]+j+l[2];while(m--)n=n.lastChild;if(!f.support.tbody){var o=_.test(j),p=k==="table"&&!o?n.firstChild&&n.firstChild.childNodes:l[1]==="<table>"&&!o?n.childNodes:[];for(var q=p.length-1;q>=0;--q)f.nodeName(p[q],"tbody")&&!p[q].childNodes.length&&p[q].parentNode.removeChild(p[q])}!f.support.leadingWhitespace&&Y.test(j)&&n.insertBefore(b.createTextNode(Y.exec(j)[0]),n.firstChild),j=n.childNodes}var r;if(!f.support.appendChecked)if(j[0]&&typeof (r=j.length)=="number")for(i=0;i<r;i++)bk(j[i]);else bk(j);j.nodeType?h.push(j):h=f.merge(h,j)}if(d){g=function(a){return!a.type||bd.test(a.type)};for(i=0;h[i];i++)if(e&&f.nodeName(h[i],"script")&&(!h[i].type||h[i].type.toLowerCase()==="text/javascript"))e.push(h[i].parentNode?h[i].parentNode.removeChild(h[i]):h[i]);else{if(h[i].nodeType===1){var s=f.grep(h[i].getElementsByTagName("script"),g);h.splice.apply(h,[i+1,0].concat(s))}d.appendChild(h[i])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.expando,g=f.event.special,h=f.support.deleteExpando;for(var i=0,j;(j=a[i])!=null;i++){if(j.nodeName&&f.noData[j.nodeName.toLowerCase()])continue;c=j[f.expando];if(c){b=d[c]&&d[c][e];if(b&&b.events){for(var k in b.events)g[k]?f.event.remove(j,k):f.removeEvent(j,k,b.handle);b.handle&&(b.handle.elem=null)}h?delete j[f.expando]:j.removeAttribute&&j.removeAttribute(f.expando),delete d[c]}}}});var bm=/alpha\([^)]*\)/i,bn=/opacity=([^)]*)/,bo=/-([a-z])/ig,bp=/([A-Z]|^ms)/g,bq=/^-?\d+(?:px)?$/i,br=/^-?\d/,bs=/^[+\-]=/,bt=/[^+\-\.\de]+/g,bu={position:"absolute",visibility:"hidden",display:"block"},bv=["Left","Right"],bw=["Top","Bottom"],bx,by,bz,bA=function(a,b){return b.toUpperCase()};f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bx(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{zIndex:!0,fontWeight:!0,opacity:!0,zoom:!0,lineHeight:!0,widows:!0,orphans:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d;if(h==="number"&&isNaN(d)||d==null)return;h==="string"&&bs.test(d)&&(d=+d.replace(bt,"")+parseFloat(f.css(a,c))),h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bx)return bx(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]},camelCase:function(a){return a.replace(bo,bA)}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){a.offsetWidth!==0?e=bB(a,b,d):f.swap(a,bu,function(){e=bB(a,b,d)});if(e<=0){e=bx(a,b,b),e==="0px"&&bz&&(e=bz(a,b,b));if(e!=null)return e===""||e==="auto"?"0px":e}if(e<0||e==null){e=a.style[b];return e===""||e==="auto"?"0px":e}return typeof e=="string"?e:e+"px"}},set:function(a,b){if(!bq.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bn.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle;c.zoom=1;var e=f.isNaN(b)?"":"alpha(opacity="+b*100+")",g=d&&d.filter||c.filter||"";c.filter=bm.test(g)?g.replace(bm,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bx(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(by=function(a,c){var d,e,g;c=c.replace(bp,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bz=function(a,b){var c,d=a.currentStyle&&a.currentStyle[b],e=a.runtimeStyle&&a.runtimeStyle[b],f=a.style;!bq.test(d)&&br.test(d)&&(c=f.left,e&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":d||0,d=f.pixelLeft+"px",f.left=c,e&&(a.runtimeStyle.left=e));return d===""?"auto":d}),bx=by||bz,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bC=/%20/g,bD=/\[\]$/,bE=/\r?\n/g,bF=/#.*$/,bG=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bH=/^(?:color|date|datetime|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bI=/^(?:about|app|app\-storage|.+\-extension|file|widget):$/,bJ=/^(?:GET|HEAD)$/,bK=/^\/\//,bL=/\?/,bM=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bN=/^(?:select|textarea)/i,bO=/\s+/,bP=/([?&])_=[^&]*/,bQ=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bR=f.fn.load,bS={},bT={},bU,bV;try{bU=e.href}catch(bW){bU=c.createElement("a"),bU.href="",bU=bU.href}bV=bQ.exec(bU.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bR)return bR.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bM,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bN.test(this.nodeName)||bH.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bE,"\r\n")}}):{name:b.name,value:c.replace(bE,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?f.extend(!0,a,f.ajaxSettings,b):(b=a,a=f.extend(!0,f.ajaxSettings,b));for(var c in{context:1,url:1})c in b?a[c]=b[c]:c in f.ajaxSettings&&(a[c]=f.ajaxSettings[c]);return a},ajaxSettings:{url:bU,isLocal:bI.test(bV[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":"*/*"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML}},ajaxPrefilter:bX(bS),ajaxTransport:bX(bT),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a?4:0;var o,r,u,w=l?b$(d,v,l):b,x,y;if(a>=200&&a<300||a===304){if(d.ifModified){if(x=v.getResponseHeader("Last-Modified"))f.lastModified[k]=x;if(y=v.getResponseHeader("Etag"))f.etag[k]=y}if(a===304)c="notmodified",o=!0;else try{r=b_(d,w),c="success",o=!0}catch(z){c="parsererror",u=z}}else{u=c;if(!c||a)c="error",a<0&&(a=0)}v.status=a,v.statusText=c,o?h.resolveWith(e,[r,c,v]):h.rejectWith(e,[v,c,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.resolveWith(e,[v,c]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f._Deferred(),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.done,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bF,"").replace(bK,bV[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bO),d.crossDomain==null&&(r=bQ.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bV[1]&&r[2]==bV[2]&&(r[3]||(r[1]==="http:"?80:443))==(bV[3]||(bV[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bY(bS,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bJ.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bL.test(d.url)?"&":"?")+d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bP,"$1_="+x);d.url=y+(y===d.url?(bL.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", */*; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bY(bT,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){status<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)bZ(g,a[g],c,e);return d.join("&").replace(bC,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var ca=f.now(),cb=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+ca++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(cb.test(b.url)||e&&cb.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(cb,l),b.url===j&&(e&&(k=k.replace(cb,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cc=a.ActiveXObject?function(){for(var a in ce)ce[a](0,1)}:!1,cd=0,ce;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&cf()||cg()}:cf,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cc&&delete ce[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cd,cc&&(ce||(ce={},f(a).unload(cc)),ce[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ch={},ci,cj,ck=/^(?:toggle|show|hide)$/,cl=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cm,cn=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],co,cp=a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cs("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",ct(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cs("hide",3),a,b,c);for(var d=0,e=this.length;d<e;d++)if(this[d].style){var g=f.css(this[d],"display");g!=="none"&&!f._data(this[d],"olddisplay")&&f._data(this[d],"olddisplay",g)}for(d=0;d<e;d++)this[d].style&&(this[d].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cs("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);return this[e.queue===!1?"each":"queue"](function(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g];if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(f.support.inlineBlockNeedsLayout?(j=ct(this.nodeName),j==="inline"?this.style.display="inline-block":(this.style.display="inline",this.style.zoom=1)):this.style.display="inline-block")),b.animatedProperties[g]=f.isArray(h)?h[1]:b.specialEasing&&b.specialEasing[g]||b.easing||"swing"}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)k=new f.fx(this,b,i),h=a[i],ck.test(h)?k[h==="toggle"?d?"show":"hide":h]():(l=cl.exec(h),m=k.cur(),l?(n=parseFloat(l[2]),o=l[3]||(f.cssNumber[g]?"":"px"),o!=="px"&&(f.style(this,i,(n||1)+o),m=(n||1)/k.cur()*m,f.style(this,i,m+o)),l[1]&&(n=(l[1]==="-="?-1:1)*n+m),k.custom(m,n,o)):k.custom(m,h,""));return!0})},stop:function(a,b){a&&this.queue([]),this.each(function(){var a=f.timers,c=a.length;b||f._unmark(!0,this);while(c--)a[c].elem===this&&(b&&a[c](!0),a.splice(c,1))}),b||this.dequeue();return this}}),f.each({slideDown:cs("show",1),slideUp:cs("hide",1),slideToggle:cs("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default,d.old=d.complete,d.complete=function(a){d.queue!==!1?f.dequeue(this):a!==!1&&f._unmark(this),f.isFunction(d.old)&&d.old.call(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,b,c){function h(a){return d.step(a)}var d=this,e=f.fx,g;this.startTime=co||cq(),this.start=a,this.end=b,this.unit=c||this.unit||(f.cssNumber[this.prop]?"":"px"),this.now=this.start,this.pos=this.state=0,h.elem=this.elem,h()&&f.timers.push(h)&&!cm&&(cp?(cm=1,g=function(){cm&&(cp(g),e.tick())},cp(g)):cm=setInterval(e.tick,e.interval))},show:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.show=!0,this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b=co||cq(),c=!0,d=this.elem,e=this.options,g,h;if(a||b>=e.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),e.animatedProperties[this.prop]=!0;for(g in e.animatedProperties)e.animatedProperties[g]!==!0&&(c=!1);if(c){e.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){d.style["overflow"+b]=e.overflow[a]}),e.hide&&f(d).hide();if(e.hide||e.show)for(var i in e.animatedProperties)f.style(d,i,e.orig[i]);e.complete.call(d)}return!1}e.duration==Infinity?this.now=b:(h=b-this.startTime,this.state=h/e.duration,this.pos=f.easing[e.animatedProperties[this.prop]](this.state,h,0,1,e.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a=f.timers,b=a.length;while(b--)a[b]()||a.splice(b,1);a.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cm),cm=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit:a.elem[a.prop]=a.now}}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cu=/^t(?:able|d|h)$/i,cv=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cw(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);f.offset.initialize();var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.offset.supportsFixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.offset.doesNotAddBorder&&(!f.offset.doesAddBorderForTableAndCells||!cu.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.offset.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.offset.supportsFixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={initialize:function(){var a=c.body,b=c.createElement("div"),d,e,g,h,i=parseFloat(f.css(a,"marginTop"))||0,j="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";f.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"}),b.innerHTML=j,a.insertBefore(b,a.firstChild),d=b.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,this.doesNotAddBorder=e.offsetTop!==5,this.doesAddBorderForTableAndCells=h.offsetTop===5,e.style.position="fixed",e.style.top="20px",this.supportsFixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",this.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i,a.removeChild(b),f.offset.initialize=f.noop},bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.offset.initialize(),f.offset.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cv.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cv.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cw(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cw(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){return this[0]?parseFloat(f.css(this[0],d,"padding")):null},f.fn["outer"+c]=function(a){return this[0]?parseFloat(f.css(this[0],d,a?"margin":"border")):null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c];return e.document.compatMode==="CSS1Compat"&&g||e.document.body["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var h=f.css(e,d),i=parseFloat(h);return f.isNaN(i)?h:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
\ No newline at end of file
diff --git a/devtools/client/inspector/markup/test/lib_jquery_1.7_min.js b/devtools/client/inspector/markup/test/lib_jquery_1.7_min.js
new file mode 100644
index 0000000000..3ca5e0f5de
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_1.7_min.js
@@ -0,0 +1,4 @@
+/*! jQuery v1.7 jquery.com | jquery.org/license */
+(function(a,b){function cA(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cx(a){if(!cm[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cn||(cn=c.createElement("iframe"),cn.frameBorder=cn.width=cn.height=0),b.appendChild(cn);if(!co||!cn.createElement)co=(cn.contentWindow||cn.contentDocument).document,co.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),co.close();d=co.createElement(a),co.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cn)}cm[a]=e}return cm[a]}function cw(a,b){var c={};f.each(cs.concat.apply([],cs.slice(0,b)),function(){c[this]=a});return c}function cv(){ct=b}function cu(){setTimeout(cv,0);return ct=f.now()}function cl(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ck(){try{return new a.XMLHttpRequest}catch(b){}}function ce(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cd(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function cc(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bG.test(a)?d(a,e):cc(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)cc(a+"["+e+"]",b[e],c,d);else d(a,b)}function cb(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function ca(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bV,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=ca(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=ca(a,c,d,e,"*",g));return l}function b_(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bR),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bE(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bz:bA;if(d>0){c!=="border"&&f.each(e,function(){c||(d-=parseFloat(f.css(a,"padding"+this))||0),c==="margin"?d+=parseFloat(f.css(a,c+this))||0:d-=parseFloat(f.css(a,"border"+this+"Width"))||0});return d+"px"}d=bB(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0,c&&f.each(e,function(){d+=parseFloat(f.css(a,"padding"+this))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+this+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+this))||0)});return d+"px"}function br(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bi,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bq(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bp(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bp)}function bp(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bo(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bn(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bm(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bl(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function X(a){var b=Y.split(" "),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function W(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(R.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function V(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function N(){return!0}function M(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function K(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(K,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/\d/,n=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,o=/^[\],:{}\s]*$/,p=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,q=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,r=/(?:^|:|,)(?:\s*\[)+/g,s=/(webkit)[ \/]([\w.]+)/,t=/(opera)(?:.*version)?[ \/]([\w.]+)/,u=/(msie) ([\w.]+)/,v=/(mozilla)(?:.*? rv:([\w.]+))?/,w=/-([a-z]|[0-9])/ig,x=/^-ms-/,y=function(a,b){return(b+"").toUpperCase()},z=d.userAgent,A,B,C,D=Object.prototype.toString,E=Object.prototype.hasOwnProperty,F=Array.prototype.push,G=Array.prototype.slice,H=String.prototype.trim,I=Array.prototype.indexOf,J={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=n.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7",length:0,size:function(){return this.length},toArray:function(){return G.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?F.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),B.add(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(G.apply(this,arguments),"slice",G.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:F,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;B.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").unbind("ready")}},bindReady:function(){if(!B){B=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",C,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",C),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&K()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return a!=null&&m.test(a)&&!isNaN(a)},type:function(a){return a==null?String(a):J[D.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!E.call(a,"constructor")&&!E.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||E.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw a},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(o.test(b.replace(p,"@").replace(q,"]").replace(r,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(x,"ms-").replace(w,y)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:H?function(a){return a==null?"":H.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?F.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(I)return I.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=G.call(arguments,2),g=function(){return a.apply(c,f.concat(G.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=s.exec(a)||t.exec(a)||u.exec(a)||a.indexOf("compatible")<0&&v.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){J["[object "+b+"]"]=b.toLowerCase()}),A=e.uaMatch(z),A.browser&&(e.browser[A.browser]=!0,e.browser.version=A.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?C=function(){c.removeEventListener("DOMContentLoaded",C,!1),e.ready()}:c.attachEvent&&(C=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",C),e.ready())}),typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return e});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){return i.done.apply(i,arguments).fail.apply(i,arguments)},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var a=c.createElement("div"),b=c.documentElement,d,e,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u;a.setAttribute("className","t"),a.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/><nav></nav>",d=a.getElementsByTagName("*"),e=a.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=a.getElementsByTagName("input")[0],k={leadingWhitespace:a.firstChild.nodeType===3,tbody:!a.getElementsByTagName("tbody").length,htmlSerialize:!!a.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,unknownElems:!!a.getElementsByTagName("nav").length,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:a.className!=="t",enctype:!!c.createElement("form").enctype,submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,k.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,k.optDisabled=!h.disabled;try{delete a.test}catch(v){k.deleteExpando=!1}!a.addEventListener&&a.attachEvent&&a.fireEvent&&(a.attachEvent("onclick",function(){k.noCloneEvent=!1}),a.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),k.radioValue=i.value==="t",i.setAttribute("checked","checked"),a.appendChild(i),l=c.createDocumentFragment(),l.appendChild(a.lastChild),k.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,a.innerHTML="",a.style.width=a.style.paddingLeft="1px",m=c.getElementsByTagName("body")[0],o=c.createElement(m?"div":"body"),p={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"},m&&f.extend(p,{position:"absolute",left:"-999px",top:"-999px"});for(t in p)o.style[t]=p[t];o.appendChild(a),n=m||b,n.insertBefore(o,n.firstChild),k.appendChecked=i.checked,k.boxModel=a.offsetWidth===2,"zoom"in a.style&&(a.style.display="inline",a.style.zoom=1,k.inlineBlockNeedsLayout=a.offsetWidth===2,a.style.display="",a.innerHTML="<div style='width:4px;'></div>",k.shrinkWrapBlocks=a.offsetWidth!==2),a.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",q=a.getElementsByTagName("td"),u=q[0].offsetHeight===0,q[0].style.display="",q[1].style.display="none",k.reliableHiddenOffsets=u&&q[0].offsetHeight===0,a.innerHTML="",c.defaultView&&c.defaultView.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",a.appendChild(j),k.reliableMarginRight=(parseInt((c.defaultView.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(a.attachEvent)for(t in{submit:1,change:1,focusin:1})s="on"+t,u=s in a,u||(a.setAttribute(s,"return;"),u=typeof a[s]=="function"),k[t+"Bubbles"]=u;f(function(){var a,b,d,e,g,h,i=1,j="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",l="visibility:hidden;border:0;",n="style='"+j+"border:5px solid #000;padding:0;'",p="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>";m=c.getElementsByTagName("body")[0];!m||(a=c.createElement("div"),a.style.cssText=l+"width:0;height:0;position:static;top:0;margin-top:"+i+"px",m.insertBefore(a,m.firstChild),o=c.createElement("div"),o.style.cssText=j+l,o.innerHTML=p,a.appendChild(o),b=o.firstChild,d=b.firstChild,g=b.nextSibling.firstChild.firstChild,h={doesNotAddBorder:d.offsetTop!==5,doesAddBorderForTableAndCells:g.offsetTop===5},d.style.position="fixed",d.style.top="20px",h.fixedPosition=d.offsetTop===20||d.offsetTop===15,d.style.position=d.style.top="",b.style.overflow="hidden",b.style.position="relative",h.subtractsBorderForOverflowNotVisible=d.offsetTop===-5,h.doesNotIncludeMarginInBodyOffset=m.offsetTop!==i,m.removeChild(a),o=a=null,f.extend(k,h))}),o.innerHTML="",n.removeChild(o),o=l=g=h=m=j=a=i=null;return k}(),f.boxModel=f.support.boxModel;var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[f.expando]:a[f.expando]&&f.expando,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[f.expando]=n=++f.uuid:n=f.expando),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[f.expando]:f.expando;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)?b=b:b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" "));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[f.expando]:a.removeAttribute?a.removeAttribute(f.expando):a[f.expando]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];if(!arguments.length){if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}return b}e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!a||j===3||j===8||j===2)return b;if(e&&c in f.attrFn)return f(a)[c](d);if(!("getAttribute"in a))return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return b}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g},removeAttr:function(a,b){var c,d,e,g,h=0;if(a.nodeType===1){d=(b||"").split(p),g=d.length;for(;h<g;h++)e=d[h].toLowerCase(),c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1)}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!a||i===3||i===8||i===2)return b;h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/\.(.*)$/,A=/^(?:textarea|input|select)$/i,B=/\./g,C=/ /g,D=/[^\w\s.|`]/g,E=/^([^\.]*)?(?:\.(.+))?$/,F=/\bhover(\.\S+)?/,G=/^key/,H=/^(?:mouse|contextmenu)|click/,I=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,J=function(a){var b=I.exec(a);b&&
+(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},K=function(a,b){return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||a.id===b[2])&&(!b[3]||b[3].test(a.className))},L=function(a){return f.event.special.hover?a:a.replace(F,"mouseenter$1 mouseleave$1")};f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=L(c).split(" ");for(k=0;k<c.length;k++){l=E.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,namespace:n.join(".")},p),g&&(o.quick=J(g),!o.quick&&f.expr.match.POS.test(g)&&(o.isPositional=!0)),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d){var e=f.hasData(a)&&f._data(a),g,h,i,j,k,l,m,n,o,p,q;if(!!e&&!!(m=e.events)){b=L(b||"").split(" ");for(g=0;g<b.length;g++){h=E.exec(b[g])||[],i=h[1],j=h[2];if(!i){j=j?"."+j:"";for(l in m)f.event.remove(a,l+j,c,d);return}n=f.event.special[i]||{},i=(d?n.delegateType:n.bindType)||i,p=m[i]||[],k=p.length,j=j?new RegExp("(^|\\.)"+j.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;if(c||j||d||n.remove)for(l=0;l<p.length;l++){q=p[l];if(!c||c.guid===q.guid)if(!j||j.test(q.namespace))if(!d||d===q.selector||d==="**"&&q.selector)p.splice(l--,1),q.selector&&p.delegateCount--,n.remove&&n.remove.call(a,q)}else p.length=0;p.length===0&&k!==p.length&&((!n.teardown||n.teardown.call(a,j)===!1)&&f.removeEvent(a,i,e.handle),delete m[i])}f.isEmptyObject(m)&&(o=e.handle,o&&(o.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"",(g||!e)&&c.preventDefault();if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,n=null;for(m=e.parentNode;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length;l++){m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d);if(c.isPropagationStopped())break}c.type=h,c.isDefaultPrevented()||(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=(f.event.special[c.type]||{}).handle,j=[],k,l,m,n,o,p,q,r,s,t,u;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click"))for(m=c.target;m!=this;m=m.parentNode||this){o={},q=[];for(k=0;k<e;k++)r=d[k],s=r.selector,t=o[s],r.isPositional?t=(t||(o[s]=f(s))).index(m)>=0:t===b&&(t=o[s]=r.quick?K(m,r.quick):f(m).is(s)),t&&q.push(r);q.length&&j.push({elem:m,matches:q})}d.length>e&&j.push({elem:this,matches:d.slice(e)});for(k=0;k<j.length&&!c.isPropagationStopped();k++){p=j[k],c.currentTarget=p.elem;for(l=0;l<p.matches.length&&!c.isImmediatePropagationStopped();l++){r=p.matches[l];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=(i||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement wheelDelta".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},focus:{delegateType:"focusin",noBubble:!0},blur:{delegateType:"focusout",noBubble:!0},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?N:M):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=N;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=N;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=N,this.stopPropagation()},isDefaultPrevented:M,isPropagationStopped:M,isImmediatePropagationStopped:M},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]=f.event.special[b]={delegateType:b,bindType:b,handle:function(a){var b=this,c=a.relatedTarget,d=a.handleObj,e=d.selector,g,h;if(!c||d.origType===a.type||c!==b&&!f.contains(b,c))g=a.type,a.type=d.origType,h=d.handler.apply(this,arguments),a.type=g;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(A.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;A.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return A.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=M;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=M);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),G.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),H.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw"Syntax error, unrecognized expression: "+a};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var O=/Until$/,P=/^(?:parents|prevUntil|prevAll)/,Q=/,/,R=/^.[^:#\[\.,]*$/,S=Array.prototype.slice,T=f.expr.match.POS,U={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(W(this,a,!1),"not",a)},filter:function(a){return this.pushStack(W(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?T.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=T.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(V(c[0])||V(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=S.call(arguments);O.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!U[a]?f.unique(e):e,(this.length>1||Q.test(d))&&P.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var Y="abbr article aside audio canvas datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",Z=/ jQuery\d+="(?:\d+|null)"/g,$=/^\s+/,_=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,ba=/<([\w:]+)/,bb=/<tbody/i,bc=/<|&#?\w+;/,bd=/<(?:script|style)/i,be=/<(?:script|object|embed|option|style)/i,bf=new RegExp("<(?:"+Y.replace(" ","|")+")","i"),bg=/checked\s*(?:[^=]|=\s*.checked.)/i,bh=/\/(java|ecma)script/i,bi=/^\s*<!(?:\[CDATA\[|\-\-)/,bj={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bk=X(c);bj.optgroup=bj.option,bj.tbody=bj.tfoot=bj.colgroup=bj.caption=bj.thead,bj.th=bj.td,f.support.htmlSerialize||(bj._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after"
+,arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(Z,""):null;if(typeof a=="string"&&!bd.test(a)&&(f.support.leadingWhitespace||!$.test(a))&&!bj[(ba.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(_,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bg.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bl(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,br)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!be.test(j)&&(f.support.checkClone||!bg.test(j))&&!f.support.unknownElems&&bf.test(j)&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bn(a,d),e=bo(a),g=bo(d);for(h=0;e[h];++h)g[h]&&bn(e[h],g[h])}if(b){bm(a,d);if(c){e=bo(a),g=bo(d);for(h=0;e[h];++h)bm(e[h],g[h])}}e=g=null;return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!bc.test(k))k=b.createTextNode(k);else{k=k.replace(_,"<$1></$2>");var l=(ba.exec(k)||["",""])[1].toLowerCase(),m=bj[l]||bj._default,n=m[0],o=b.createElement("div");b===c?bk.appendChild(o):X(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=bb.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&$.test(k)&&o.insertBefore(b.createTextNode($.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bq(k[i]);else bq(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||bh.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bs=/alpha\([^)]*\)/i,bt=/opacity=([^)]*)/,bu=/([A-Z]|^ms)/g,bv=/^-?\d+(?:px)?$/i,bw=/^-?\d/,bx=/^([\-+])=([\-+.\de]+)/,by={position:"absolute",visibility:"hidden",display:"block"},bz=["Left","Right"],bA=["Top","Bottom"],bB,bC,bD;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bB(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bx.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bB)return bB(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bE(a,b,d);f.swap(a,by,function(){e=bE(a,b,d)});return e}},set:function(a,b){if(!bv.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bt.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bs,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bs.test(g)?g.replace(bs,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bB(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bC=function(a,c){var d,e,g;c=c.replace(bu,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bD=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bv.test(f)&&bw.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bB=bC||bD,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bF=/%20/g,bG=/\[\]$/,bH=/\r?\n/g,bI=/#.*$/,bJ=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bK=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bL=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bM=/^(?:GET|HEAD)$/,bN=/^\/\//,bO=/\?/,bP=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bQ=/^(?:select|textarea)/i,bR=/\s+/,bS=/([?&])_=[^&]*/,bT=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bU=f.fn.load,bV={},bW={},bX,bY,bZ=["*/"]+["*"];try{bX=e.href}catch(b$){bX=c.createElement("a"),bX.href="",bX=bX.href}bY=bT.exec(bX.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bU)return bU.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bP,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bQ.test(this.nodeName)||bK.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bH,"\r\n")}}):{name:b.name,value:c.replace(bH,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?cb(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),cb(a,b);return a},ajaxSettings:{url:bX,isLocal:bL.test(bY[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bZ},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:b_(bV),ajaxTransport:b_(bW),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cd(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=ce(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bJ.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bI,"").replace(bN,bY[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bR),d.crossDomain==null&&(r=bT.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bY[1]&&r[2]==bY[2]&&(r[3]||(r[1]==="http:"?80:443))==(bY[3]||(bY[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),ca(bV,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bM.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bO.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bS,"$1_="+x);d.url=y+(y===d.url?(bO.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bZ+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=ca(bW,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){s<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)cc(g,a[g],c,e);return d.join("&").replace(bF,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cf=f.now(),cg=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cf++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(cg.test(b.url)||e&&cg.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(cg,l),b.url===j&&(e&&(k=k.replace(cg,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var ch=a.ActiveXObject?function(){for(var a in cj)cj[a](0,1)}:!1,ci=0,cj;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ck()||cl()}:ck,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,ch&&delete cj[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++ci,ch&&(cj||(cj={},f(a).unload(ch)),cj[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cm={},cn,co,cp=/^(?:toggle|show|hide)$/,cq=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cr,cs=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],ct;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cw("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cx(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cw("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cw("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cx(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cp.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=cq.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cw("show",1),slideUp:cw("hide",1),slideToggle:cw("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=ct||cu(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cr&&(cr=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=ct||cu(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cr),cr=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now))}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cy=/^t(?:able|d|h)$/i,cz=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cA(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cy.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cz.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cz.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cA(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cA(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
\ No newline at end of file
diff --git a/devtools/client/inspector/markup/test/lib_jquery_2.1.1_min.js b/devtools/client/inspector/markup/test/lib_jquery_2.1.1_min.js
new file mode 100644
index 0000000000..e5ace116b6
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_jquery_2.1.1_min.js
@@ -0,0 +1,4 @@
+/*! jQuery v2.1.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
+!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.1",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return n.each(this,a,b)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){return!n.isArray(a)&&a-parseFloat(a)>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!j.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=l.createElement("script"),b.text=a,l.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:g.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=s(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(e=d.call(arguments,2),f=function(){return a.apply(b||this,e.concat(d.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:k}),n.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+-new Date,v=a.document,w=0,x=0,y=gb(),z=gb(),A=gb(),B=function(a,b){return a===b&&(l=!0),0},C="undefined",D=1<<31,E={}.hasOwnProperty,F=[],G=F.pop,H=F.push,I=F.push,J=F.slice,K=F.indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]===a)return b;return-1},L="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",N="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",O=N.replace("w","w#"),P="\\["+M+"*("+N+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+O+"))|)"+M+"*\\]",Q=":("+N+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+P+")*)|.*)\\)|)",R=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),S=new RegExp("^"+M+"*,"+M+"*"),T=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),V=new RegExp(Q),W=new RegExp("^"+O+"$"),X={ID:new RegExp("^#("+N+")"),CLASS:new RegExp("^\\.("+N+")"),TAG:new RegExp("^("+N.replace("w","w*")+")"),ATTR:new RegExp("^"+P),PSEUDO:new RegExp("^"+Q),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+L+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,$=/^[^{]+\{\s*\[native \w/,_=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ab=/[+~]/,bb=/'|\\/g,cb=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),db=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)};try{I.apply(F=J.call(v.childNodes),v.childNodes),F[v.childNodes.length].nodeType}catch(eb){I={apply:F.length?function(a,b){H.apply(a,J.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fb(a,b,d,e){var f,h,j,k,l,o,r,s,w,x;if((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,d=d||[],!a||"string"!=typeof a)return d;if(1!==(k=b.nodeType)&&9!==k)return[];if(p&&!e){if(f=_.exec(a))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)return d;if(h.id===j)return d.push(h),d}else if(b.ownerDocument&&(h=b.ownerDocument.getElementById(j))&&t(b,h)&&h.id===j)return d.push(h),d}else{if(f[2])return I.apply(d,b.getElementsByTagName(a)),d;if((j=f[3])&&c.getElementsByClassName&&b.getElementsByClassName)return I.apply(d,b.getElementsByClassName(j)),d}if(c.qsa&&(!q||!q.test(a))){if(s=r=u,w=b,x=9===k&&a,1===k&&"object"!==b.nodeName.toLowerCase()){o=g(a),(r=b.getAttribute("id"))?s=r.replace(bb,"\\$&"):b.setAttribute("id",s),s="[id='"+s+"'] ",l=o.length;while(l--)o[l]=s+qb(o[l]);w=ab.test(a)&&ob(b.parentNode)||b,x=o.join(",")}if(x)try{return I.apply(d,w.querySelectorAll(x)),d}catch(y){}finally{r||b.removeAttribute("id")}}}return i(a.replace(R,"$1"),b,d,e)}function gb(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function hb(a){return a[u]=!0,a}function ib(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function jb(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function kb(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||D)-(~a.sourceIndex||D);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function lb(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function mb(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function nb(a){return hb(function(b){return b=+b,hb(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function ob(a){return a&&typeof a.getElementsByTagName!==C&&a}c=fb.support={},f=fb.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fb.setDocument=function(a){var b,e=a?a.ownerDocument||a:v,g=e.defaultView;return e!==n&&9===e.nodeType&&e.documentElement?(n=e,o=e.documentElement,p=!f(e),g&&g!==g.top&&(g.addEventListener?g.addEventListener("unload",function(){m()},!1):g.attachEvent&&g.attachEvent("onunload",function(){m()})),c.attributes=ib(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ib(function(a){return a.appendChild(e.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=$.test(e.getElementsByClassName)&&ib(function(a){return a.innerHTML="<div class='a'></div><div class='a i'></div>",a.firstChild.className="i",2===a.getElementsByClassName("i").length}),c.getById=ib(function(a){return o.appendChild(a).id=u,!e.getElementsByName||!e.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if(typeof b.getElementById!==C&&p){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){var c=typeof a.getAttributeNode!==C&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return typeof b.getElementsByTagName!==C?b.getElementsByTagName(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return typeof b.getElementsByClassName!==C&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=$.test(e.querySelectorAll))&&(ib(function(a){a.innerHTML="<select msallowclip=''><option selected=''></option></select>",a.querySelectorAll("[msallowclip^='']").length&&q.push("[*^$]="+M+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+M+"*(?:value|"+L+")"),a.querySelectorAll(":checked").length||q.push(":checked")}),ib(function(a){var b=e.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+M+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=$.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ib(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",Q)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=$.test(o.compareDocumentPosition),t=b||$.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===e||a.ownerDocument===v&&t(v,a)?-1:b===e||b.ownerDocument===v&&t(v,b)?1:k?K.call(k,a)-K.call(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,f=a.parentNode,g=b.parentNode,h=[a],i=[b];if(!f||!g)return a===e?-1:b===e?1:f?-1:g?1:k?K.call(k,a)-K.call(k,b):0;if(f===g)return kb(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?kb(h[d],i[d]):h[d]===v?-1:i[d]===v?1:0},e):n},fb.matches=function(a,b){return fb(a,null,null,b)},fb.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(U,"='$1']"),!(!c.matchesSelector||!p||r&&r.test(b)||q&&q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fb(b,n,null,[a]).length>0},fb.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fb.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&E.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fb.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fb.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fb.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fb.selectors={cacheLength:50,createPseudo:hb,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(cb,db),a[3]=(a[3]||a[4]||a[5]||"").replace(cb,db),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fb.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fb.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return X.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&V.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(cb,db).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+M+")"+a+"("+M+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||typeof a.getAttribute!==C&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fb.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){k=q[u]||(q[u]={}),j=k[a]||[],n=j[0]===w&&j[1],m=j[0]===w&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if(s&&(j=(b[u]||(b[u]={}))[a])&&j[0]===w)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(s&&((l[u]||(l[u]={}))[a]=[w,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fb.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?hb(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=K.call(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:hb(function(a){var b=[],c=[],d=h(a.replace(R,"$1"));return d[u]?hb(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),!c.pop()}}),has:hb(function(a){return function(b){return fb(a,b).length>0}}),contains:hb(function(a){return function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:hb(function(a){return W.test(a||"")||fb.error("unsupported lang: "+a),a=a.replace(cb,db).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Z.test(a.nodeName)},input:function(a){return Y.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:nb(function(){return[0]}),last:nb(function(a,b){return[b-1]}),eq:nb(function(a,b,c){return[0>c?c+b:c]}),even:nb(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:nb(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:nb(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:nb(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=lb(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=mb(b);function pb(){}pb.prototype=d.filters=d.pseudos,d.setFilters=new pb,g=fb.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){(!c||(e=S.exec(h)))&&(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=T.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(R," ")}),h=h.slice(c.length));for(g in d.filter)!(e=X[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?fb.error(a):z(a,i).slice(0)};function qb(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function rb(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]===w&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function sb(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function tb(a,b,c){for(var d=0,e=b.length;e>d;d++)fb(a,b[d],c);return c}function ub(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function vb(a,b,c,d,e,f){return d&&!d[u]&&(d=vb(d)),e&&!e[u]&&(e=vb(e,f)),hb(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||tb(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ub(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ub(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?K.call(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ub(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):I.apply(g,r)})}function wb(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=rb(function(a){return a===b},h,!0),l=rb(function(a){return K.call(b,a)>-1},h,!0),m=[function(a,c,d){return!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d))}];f>i;i++)if(c=d.relative[a[i].type])m=[rb(sb(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return vb(i>1&&sb(m),i>1&&qb(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(R,"$1"),c,e>i&&wb(a.slice(i,e)),f>e&&wb(a=a.slice(e)),f>e&&qb(a))}m.push(c)}return sb(m)}function xb(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,m,o,p=0,q="0",r=f&&[],s=[],t=j,u=f||e&&d.find.TAG("*",k),v=w+=null==t?1:Math.random()||.1,x=u.length;for(k&&(j=g!==n&&g);q!==x&&null!=(l=u[q]);q++){if(e&&l){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f&&r.push(l))}if(p+=q,c&&q!==p){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=G.call(i));s=ub(s)}I.apply(i,s),k&&!f&&s.length>0&&p+b.length>1&&fb.uniqueSort(i)}return k&&(w=v,j=t),r};return c?hb(f):f}return h=fb.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wb(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xb(e,d)),f.selector=a}return f},i=fb.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(cb,db),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=X.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(cb,db),ab.test(j[0].type)&&ob(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qb(j),!a)return I.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,ab.test(a)&&ob(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ib(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ib(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||jb("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ib(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||jb("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ib(function(a){return null==a.getAttribute("disabled")})||jb(L,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fb}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=n.expr.match.needsContext,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^.[^:#\[\.,]*$/;function x(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(w.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return g.call(b,a)>=0!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(x(this,a||[],!1))},not:function(a){return this.pushStack(x(this,a||[],!0))},is:function(a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}});var y,z=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,A=n.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:z.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:l,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}return d=l.getElementById(c[2]),d&&d.parentNode&&(this.length=1,this[0]=d),this.context=l,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};A.prototype=n.fn,y=n(l);var B=/^(?:parents|prev(?:Until|All))/,C={children:!0,contents:!0,next:!0,prev:!0};n.extend({dir:function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=u.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.unique(f):f)},index:function(a){return a?"string"==typeof a?g.call(n(a),this[0]):g.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.unique(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function D(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return n.dir(a,"parentNode")},parentsUntil:function(a,b,c){return n.dir(a,"parentNode",c)},next:function(a){return D(a,"nextSibling")},prev:function(a){return D(a,"previousSibling")},nextAll:function(a){return n.dir(a,"nextSibling")},prevAll:function(a){return n.dir(a,"previousSibling")},nextUntil:function(a,b,c){return n.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return n.dir(a,"previousSibling",c)},siblings:function(a){return n.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return n.sibling(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(C[a]||n.unique(e),B.test(a)&&e.reverse()),this.pushStack(e)}});var E=/\S+/g,F={};function G(a){var b=F[a]={};return n.each(a.match(E)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?F[a]||G(a):n.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(b=a.memory&&l,c=!0,g=e||0,e=0,f=h.length,d=!0;h&&f>g;g++)if(h[g].apply(l[0],l[1])===!1&&a.stopOnFalse){b=!1;break}d=!1,h&&(i?i.length&&j(i.shift()):b?h=[]:k.disable())},k={add:function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this},remove:function(){return h&&n.each(arguments,function(a,b){var c;while((c=n.inArray(b,h,c))>-1)h.splice(c,1),d&&(f>=c&&f--,g>=c&&g--)}),this},has:function(a){return a?n.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],f=0,this},disable:function(){return h=i=b=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,b||k.disable(),this},locked:function(){return!i},fireWith:function(a,b){return!h||c&&!i||(b=b||[],b=[a,b.slice?b.slice():b],d?i.push(b):j(b)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!c}};return k},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&n.isFunction(a.promise)?e:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var H;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(H.resolveWith(l,[n]),n.fn.triggerHandler&&(n(l).triggerHandler("ready"),n(l).off("ready"))))}});function I(){l.removeEventListener("DOMContentLoaded",I,!1),a.removeEventListener("load",I,!1),n.ready()}n.ready.promise=function(b){return H||(H=n.Deferred(),"complete"===l.readyState?setTimeout(n.ready):(l.addEventListener("DOMContentLoaded",I,!1),a.addEventListener("load",I,!1))),H.promise(b)},n.ready.promise();var J=n.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)n.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f};n.acceptData=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function K(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=n.expando+Math.random()}K.uid=1,K.accepts=n.acceptData,K.prototype={key:function(a){if(!K.accepts(a))return 0;var b={},c=a[this.expando];if(!c){c=K.uid++;try{b[this.expando]={value:c},Object.defineProperties(a,b)}catch(d){b[this.expando]=c,n.extend(a,b)}}return this.cache[c]||(this.cache[c]={}),c},set:function(a,b,c){var d,e=this.key(a),f=this.cache[e];if("string"==typeof b)f[b]=c;else if(n.isEmptyObject(f))n.extend(this.cache[e],b);else for(d in b)f[d]=b[d];return f},get:function(a,b){var c=this.cache[this.key(a)];return void 0===b?c:c[b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=this.key(a),g=this.cache[f];if(void 0===b)this.cache[f]={};else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in g?d=[b,e]:(d=e,d=d in g?[d]:d.match(E)||[])),c=d.length;while(c--)delete g[d[c]]}},hasData:function(a){return!n.isEmptyObject(this.cache[a[this.expando]]||{})},discard:function(a){a[this.expando]&&delete this.cache[a[this.expando]]}};var L=new K,M=new K,N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(O,"-$1").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}M.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return M.hasData(a)||L.hasData(a)},data:function(a,b,c){return M.access(a,b,c)},removeData:function(a,b){M.remove(a,b)
+},_data:function(a,b,c){return L.access(a,b,c)},_removeData:function(a,b){L.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=M.get(f),1===f.nodeType&&!L.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));L.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){M.set(this,a)}):J(this,function(b){var c,d=n.camelCase(a);if(f&&void 0===b){if(c=M.get(f,a),void 0!==c)return c;if(c=M.get(f,d),void 0!==c)return c;if(c=P(f,d,void 0),void 0!==c)return c}else this.each(function(){var c=M.get(this,d);M.set(this,d,b),-1!==a.indexOf("-")&&void 0!==c&&M.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){M.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=L.get(a,b),c&&(!d||n.isArray(c)?d=L.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return L.get(a,c)||L.access(a,c,{empty:n.Callbacks("once memory").add(function(){L.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?n.queue(this[0],a):void 0===b?this:this.each(function(){var c=n.queue(this,a,b);n._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&n.dequeue(this,a)})},dequeue:function(a){return this.each(function(){n.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=n.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=L.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var Q=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,R=["Top","Right","Bottom","Left"],S=function(a,b){return a=b||a,"none"===n.css(a,"display")||!n.contains(a.ownerDocument,a)},T=/^(?:checkbox|radio)$/i;!function(){var a=l.createDocumentFragment(),b=a.appendChild(l.createElement("div")),c=l.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),k.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var U="undefined";k.focusinBubbles="onfocusin"in a;var V=/^key/,W=/^(?:mouse|pointer|contextmenu)|click/,X=/^(?:focusinfocus|focusoutblur)$/,Y=/^([^.]*)(?:\.(.+)|)$/;function Z(){return!0}function $(){return!1}function _(){try{return l.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(E)||[""],j=b.length;while(j--)h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g,!1)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.hasData(a)&&L.get(a);if(r&&(i=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&(delete r.handle,L.remove(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,m,o,p=[d||l],q=j.call(b,"type")?b.type:b,r=j.call(b,"namespace")?b.namespace.split("."):[];if(g=h=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf(".")>=0&&(r=q.split("."),q=r.shift(),r.sort()),k=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=r.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},e||!o.trigger||o.trigger.apply(d,c)!==!1)){if(!e&&!o.noBubble&&!n.isWindow(d)){for(i=o.delegateType||q,X.test(i+q)||(g=g.parentNode);g;g=g.parentNode)p.push(g),h=g;h===(d.ownerDocument||l)&&p.push(h.defaultView||h.parentWindow||a)}f=0;while((g=p[f++])&&!b.isPropagationStopped())b.type=f>1?i:o.bindType||q,m=(L.get(g,"events")||{})[b.type]&&L.get(g,"handle"),m&&m.apply(g,c),m=k&&g[k],m&&m.apply&&n.acceptData(g)&&(b.result=m.apply(g,c),b.result===!1&&b.preventDefault());return b.type=q,e||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!n.acceptData(d)||k&&n.isFunction(d[q])&&!n.isWindow(d)&&(h=d[k],h&&(d[k]=null),n.event.triggered=q,d[q](),n.event.triggered=void 0,h&&(d[k]=h)),b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(L.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(g.namespace))&&(a.handleObj=g,a.data=g.data,e=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(a.result=e)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>=0:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,d,e,f=b.button;return null==a.pageX&&null!=b.clientX&&(c=a.target.ownerDocument||l,d=c.documentElement,e=c.body,a.pageX=b.clientX+(d&&d.scrollLeft||e&&e.scrollLeft||0)-(d&&d.clientLeft||e&&e.clientLeft||0),a.pageY=b.clientY+(d&&d.scrollTop||e&&e.scrollTop||0)-(d&&d.clientTop||e&&e.clientTop||0)),a.which||void 0===f||(a.which=1&f?1:2&f?3:4&f?2:0),a}},fix:function(a){if(a[n.expando])return a;var b,c,d,e=a.type,f=a,g=this.fixHooks[e];g||(this.fixHooks[e]=g=W.test(e)?this.mouseHooks:V.test(e)?this.keyHooks:{}),d=g.props?this.props.concat(g.props):this.props,a=new n.Event(f),b=d.length;while(b--)c=d[b],a[c]=f[c];return a.target||(a.target=l),3===a.target.nodeType&&(a.target=a.target.parentNode),g.filter?g.filter(a,f):a},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==_()&&this.focus?(this.focus(),!1):void 0},delegateType:"focusin"},blur:{trigger:function(){return this===_()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&n.nodeName(this,"input")?(this.click(),!1):void 0},_default:function(a){return n.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}},simulate:function(a,b,c,d){var e=n.extend(new n.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?n.event.trigger(e,null,b):n.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},n.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)},n.Event=function(a,b){return this instanceof n.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?Z:$):this.type=a,b&&n.extend(this,b),this.timeStamp=a&&a.timeStamp||n.now(),void(this[n.expando]=!0)):new n.Event(a,b)},n.Event.prototype={isDefaultPrevented:$,isPropagationStopped:$,isImmediatePropagationStopped:$,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=Z,a&&a.preventDefault&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=Z,a&&a.stopPropagation&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=Z,a&&a.stopImmediatePropagation&&a.stopImmediatePropagation(),this.stopPropagation()}},n.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){n.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return(!e||e!==d&&!n.contains(d,e))&&(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),k.focusinBubbles||n.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){n.event.simulate(b,a.target,n.event.fix(a),!0)};n.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=L.access(d,b);e||d.addEventListener(a,c,!0),L.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=L.access(d,b)-1;e?L.access(d,b,e):(d.removeEventListener(a,c,!0),L.remove(d,b))}}}),n.fn.extend({on:function(a,b,c,d,e){var f,g;if("object"==typeof a){"string"!=typeof b&&(c=c||b,b=void 0);for(g in a)this.on(g,b,c,a[g],e);return this}if(null==c&&null==d?(d=b,c=b=void 0):null==d&&("string"==typeof b?(d=c,c=void 0):(d=c,c=b,b=void 0)),d===!1)d=$;else if(!d)return this;return 1===e&&(f=d,d=function(a){return n().off(a),f.apply(this,arguments)},d.guid=f.guid||(f.guid=n.guid++)),this.each(function(){n.event.add(this,a,d,c,b)})},one:function(a,b,c,d){return this.on(a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,n(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return(b===!1||"function"==typeof b)&&(c=b,b=void 0),c===!1&&(c=$),this.each(function(){n.event.remove(this,a,c,b)})},trigger:function(a,b){return this.each(function(){n.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?n.event.trigger(a,b,c,!0):void 0}});var ab=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bb=/<([\w:]+)/,cb=/<|&#?\w+;/,db=/<(?:script|style|link)/i,eb=/checked\s*(?:[^=]|=\s*.checked.)/i,fb=/^$|\/(?:java|ecma)script/i,gb=/^true\/(.*)/,hb=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,ib={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};ib.optgroup=ib.option,ib.tbody=ib.tfoot=ib.colgroup=ib.caption=ib.thead,ib.th=ib.td;function jb(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function kb(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function lb(a){var b=gb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function mb(a,b){for(var c=0,d=a.length;d>c;c++)L.set(a[c],"globalEval",!b||L.get(b[c],"globalEval"))}function nb(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(L.hasData(a)&&(f=L.access(a),g=L.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}M.hasData(a)&&(h=M.access(a),i=n.extend({},h),M.set(b,i))}}function ob(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function pb(a,b){var c=b.nodeName.toLowerCase();"input"===c&&T.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}n.extend({clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=ob(h),f=ob(a),d=0,e=f.length;e>d;d++)pb(f[d],g[d]);if(b)if(c)for(f=f||ob(a),g=g||ob(h),d=0,e=f.length;e>d;d++)nb(f[d],g[d]);else nb(a,h);return g=ob(h,"script"),g.length>0&&mb(g,!i&&ob(a,"script")),h},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k=b.createDocumentFragment(),l=[],m=0,o=a.length;o>m;m++)if(e=a[m],e||0===e)if("object"===n.type(e))n.merge(l,e.nodeType?[e]:e);else if(cb.test(e)){f=f||k.appendChild(b.createElement("div")),g=(bb.exec(e)||["",""])[1].toLowerCase(),h=ib[g]||ib._default,f.innerHTML=h[1]+e.replace(ab,"<$1></$2>")+h[2],j=h[0];while(j--)f=f.lastChild;n.merge(l,f.childNodes),f=k.firstChild,f.textContent=""}else l.push(b.createTextNode(e));k.textContent="",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocument,e),f=ob(k.appendChild(e),"script"),i&&mb(f),c)){j=0;while(e=f[j++])fb.test(e.type||"")&&c.push(e)}return k},cleanData:function(a){for(var b,c,d,e,f=n.event.special,g=0;void 0!==(c=a[g]);g++){if(n.acceptData(c)&&(e=c[L.expando],e&&(b=L.cache[e]))){if(b.events)for(d in b.events)f[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);L.cache[e]&&delete L.cache[e]}delete M.cache[c[M.expando]]}}}),n.fn.extend({text:function(a){return J(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(ob(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&mb(ob(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(ob(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return J(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!db.test(a)&&!ib[(bb.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(ab,"<$1></$2>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ob(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(ob(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,m=this,o=l-1,p=a[0],q=n.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&eb.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(c=n.buildFragment(a,this[0].ownerDocument,!1,this),d=c.firstChild,1===c.childNodes.length&&(c=d),d)){for(f=n.map(ob(c,"script"),kb),g=f.length;l>j;j++)h=c,j!==o&&(h=n.clone(h,!0,!0),g&&n.merge(f,ob(h,"script"))),b.call(this[j],h,j);if(g)for(i=f[f.length-1].ownerDocument,n.map(f,lb),j=0;g>j;j++)h=f[j],fb.test(h.type||"")&&!L.access(h,"globalEval")&&n.contains(i,h)&&(h.src?n._evalUrl&&n._evalUrl(h.src):n.globalEval(h.textContent.replace(hb,"")))}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),g=e.length-1,h=0;g>=h;h++)c=h===g?this:this.clone(!0),n(e[h])[b](c),f.apply(d,c.get());return this.pushStack(d)}});var qb,rb={};function sb(b,c){var d,e=n(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:n.css(e[0],"display");return e.detach(),f}function tb(a){var b=l,c=rb[a];return c||(c=sb(a,b),"none"!==c&&c||(qb=(qb||n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=qb[0].contentDocument,b.write(),b.close(),c=sb(a,b),qb.detach()),rb[a]=c),c}var ub=/^margin/,vb=new RegExp("^("+Q+")(?!px)[a-z%]+$","i"),wb=function(a){return a.ownerDocument.defaultView.getComputedStyle(a,null)};function xb(a,b,c){var d,e,f,g,h=a.style;return c=c||wb(a),c&&(g=c.getPropertyValue(b)||c[b]),c&&(""!==g||n.contains(a.ownerDocument,a)||(g=n.style(a,b)),vb.test(g)&&ub.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function yb(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}!function(){var b,c,d=l.documentElement,e=l.createElement("div"),f=l.createElement("div");if(f.style){f.style.backgroundClip="content-box",f.cloneNode(!0).style.backgroundClip="",k.clearCloneStyle="content-box"===f.style.backgroundClip,e.style.cssText="border:0;width:0;height:0;top:0;left:-9999px;margin-top:1px;position:absolute",e.appendChild(f);function g(){f.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;margin-top:1%;top:1%;border:1px;padding:1px;width:4px;position:absolute",f.innerHTML="",d.appendChild(e);var g=a.getComputedStyle(f,null);b="1%"!==g.top,c="4px"===g.width,d.removeChild(e)}a.getComputedStyle&&n.extend(k,{pixelPosition:function(){return g(),b},boxSizingReliable:function(){return null==c&&g(),c},reliableMarginRight:function(){var b,c=f.appendChild(l.createElement("div"));return c.style.cssText=f.style.cssText="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:0",c.style.marginRight=c.style.width="0",f.style.width="1px",d.appendChild(e),b=!parseFloat(a.getComputedStyle(c,null).marginRight),d.removeChild(e),b}})}}(),n.swap=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};var zb=/^(none|table(?!-c[ea]).+)/,Ab=new RegExp("^("+Q+")(.*)$","i"),Bb=new RegExp("^([+-])=("+Q+")","i"),Cb={position:"absolute",visibility:"hidden",display:"block"},Db={letterSpacing:"0",fontWeight:"400"},Eb=["Webkit","O","Moz","ms"];function Fb(a,b){if(b in a)return b;var c=b[0].toUpperCase()+b.slice(1),d=b,e=Eb.length;while(e--)if(b=Eb[e]+c,b in a)return b;return d}function Gb(a,b,c){var d=Ab.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function Hb(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=n.css(a,c+R[f],!0,e)),d?("content"===c&&(g-=n.css(a,"padding"+R[f],!0,e)),"margin"!==c&&(g-=n.css(a,"border"+R[f]+"Width",!0,e))):(g+=n.css(a,"padding"+R[f],!0,e),"padding"!==c&&(g+=n.css(a,"border"+R[f]+"Width",!0,e)));return g}function Ib(a,b,c){var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=wb(a),g="border-box"===n.css(a,"boxSizing",!1,f);if(0>=e||null==e){if(e=xb(a,b,f),(0>e||null==e)&&(e=a.style[b]),vb.test(e))return e;d=g&&(k.boxSizingReliable()||e===a.style[b]),e=parseFloat(e)||0}return e+Hb(a,b,c||(g?"border":"content"),d,f)+"px"}function Jb(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=L.get(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&S(d)&&(f[g]=L.access(d,"olddisplay",tb(d.nodeName)))):(e=S(d),"none"===c&&e||L.set(d,"olddisplay",e?c:n.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}n.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=xb(a,"opacity");return""===c?"1":c}}}},cssNumber:{columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=n.camelCase(b),i=a.style;return b=n.cssProps[h]||(n.cssProps[h]=Fb(i,h)),g=n.cssHooks[b]||n.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=Bb.exec(c))&&(c=(e[1]+1)*e[2]+parseFloat(n.css(a,b)),f="number"),null!=c&&c===c&&("number"!==f||n.cssNumber[h]||(c+="px"),k.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=n.camelCase(b);return b=n.cssProps[h]||(n.cssProps[h]=Fb(a.style,h)),g=n.cssHooks[b]||n.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=xb(a,b,d)),"normal"===e&&b in Db&&(e=Db[b]),""===c||c?(f=parseFloat(e),c===!0||n.isNumeric(f)?f||0:e):e}}),n.each(["height","width"],function(a,b){n.cssHooks[b]={get:function(a,c,d){return c?zb.test(n.css(a,"display"))&&0===a.offsetWidth?n.swap(a,Cb,function(){return Ib(a,b,d)}):Ib(a,b,d):void 0},set:function(a,c,d){var e=d&&wb(a);return Gb(a,c,d?Hb(a,b,d,"border-box"===n.css(a,"boxSizing",!1,e),e):0)}}}),n.cssHooks.marginRight=yb(k.reliableMarginRight,function(a,b){return b?n.swap(a,{display:"inline-block"},xb,[a,"marginRight"]):void 0}),n.each({margin:"",padding:"",border:"Width"},function(a,b){n.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+R[d]+b]=f[d]||f[d-2]||f[0];return e}},ub.test(a)||(n.cssHooks[a+b].set=Gb)}),n.fn.extend({css:function(a,b){return J(this,function(a,b,c){var d,e,f={},g=0;if(n.isArray(b)){for(d=wb(a),e=b.length;e>g;g++)f[b[g]]=n.css(a,b[g],!1,d);return f}return void 0!==c?n.style(a,b,c):n.css(a,b)},a,b,arguments.length>1)},show:function(){return Jb(this,!0)},hide:function(){return Jb(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){S(this)?n(this).show():n(this).hide()})}});function Kb(a,b,c,d,e){return new Kb.prototype.init(a,b,c,d,e)}n.Tween=Kb,Kb.prototype={constructor:Kb,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||"swing",this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(n.cssNumber[c]?"":"px")},cur:function(){var a=Kb.propHooks[this.prop];return a&&a.get?a.get(this):Kb.propHooks._default.get(this)},run:function(a){var b,c=Kb.propHooks[this.prop];return this.pos=b=this.options.duration?n.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Kb.propHooks._default.set(this),this}},Kb.prototype.init.prototype=Kb.prototype,Kb.propHooks={_default:{get:function(a){var b;return null==a.elem[a.prop]||a.elem.style&&null!=a.elem.style[a.prop]?(b=n.css(a.elem,a.prop,""),b&&"auto"!==b?b:0):a.elem[a.prop]},set:function(a){n.fx.step[a.prop]?n.fx.step[a.prop](a):a.elem.style&&(null!=a.elem.style[n.cssProps[a.prop]]||n.cssHooks[a.prop])?n.style(a.elem,a.prop,a.now+a.unit):a.elem[a.prop]=a.now}}},Kb.propHooks.scrollTop=Kb.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},n.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2}},n.fx=Kb.prototype.init,n.fx.step={};var Lb,Mb,Nb=/^(?:toggle|show|hide)$/,Ob=new RegExp("^(?:([+-])=|)("+Q+")([a-z%]*)$","i"),Pb=/queueHooks$/,Qb=[Vb],Rb={"*":[function(a,b){var c=this.createTween(a,b),d=c.cur(),e=Ob.exec(b),f=e&&e[3]||(n.cssNumber[a]?"":"px"),g=(n.cssNumber[a]||"px"!==f&&+d)&&Ob.exec(n.css(c.elem,a)),h=1,i=20;if(g&&g[3]!==f){f=f||g[3],e=e||[],g=+d||1;do h=h||".5",g/=h,n.style(c.elem,a,g+f);while(h!==(h=c.cur()/d)&&1!==h&&--i)}return e&&(g=c.start=+g||+d||0,c.unit=f,c.end=e[1]?g+(e[1]+1)*e[2]:+e[2]),c}]};function Sb(){return setTimeout(function(){Lb=void 0}),Lb=n.now()}function Tb(a,b){var c,d=0,e={height:a};for(b=b?1:0;4>d;d+=2-b)c=R[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function Ub(a,b,c){for(var d,e=(Rb[b]||[]).concat(Rb["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function Vb(a,b,c){var d,e,f,g,h,i,j,k,l=this,m={},o=a.style,p=a.nodeType&&S(a),q=L.get(a,"fxshow");c.queue||(h=n._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,l.always(function(){l.always(function(){h.unqueued--,n.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=n.css(a,"display"),k="none"===j?L.get(a,"olddisplay")||tb(a.nodeName):j,"inline"===k&&"none"===n.css(a,"float")&&(o.display="inline-block")),c.overflow&&(o.overflow="hidden",l.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],Nb.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}m[d]=q&&q[d]||n.style(a,d)}else j=void 0;if(n.isEmptyObject(m))"inline"===("none"===j?tb(a.nodeName):j)&&(o.display=j);else{q?"hidden"in q&&(p=q.hidden):q=L.access(a,"fxshow",{}),f&&(q.hidden=!p),p?n(a).show():l.done(function(){n(a).hide()}),l.done(function(){var b;L.remove(a,"fxshow");for(b in m)n.style(a,b,m[b])});for(d in m)g=Ub(p?q[d]:0,d,l),d in q||(q[d]=g.start,p&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function Wb(a,b){var c,d,e,f,g;for(c in a)if(d=n.camelCase(c),e=b[d],f=a[c],n.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=n.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function Xb(a,b,c){var d,e,f=0,g=Qb.length,h=n.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=Lb||Sb(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:n.extend({},b),opts:n.extend(!0,{specialEasing:{}},c),originalProperties:b,originalOptions:c,startTime:Lb||Sb(),duration:c.duration,tweens:[],createTween:function(b,c){var d=n.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?h.resolveWith(a,[j,b]):h.rejectWith(a,[j,b]),this}}),k=j.props;for(Wb(k,j.opts.specialEasing);g>f;f++)if(d=Qb[f].call(j,a,k,j.opts))return d;return n.map(k,Ub,j),n.isFunction(j.opts.start)&&j.opts.start.call(a,j),n.fx.timer(n.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}n.Animation=n.extend(Xb,{tweener:function(a,b){n.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");for(var c,d=0,e=a.length;e>d;d++)c=a[d],Rb[c]=Rb[c]||[],Rb[c].unshift(b)},prefilter:function(a,b){b?Qb.unshift(a):Qb.push(a)}}),n.speed=function(a,b,c){var d=a&&"object"==typeof a?n.extend({},a):{complete:c||!c&&b||n.isFunction(a)&&a,duration:a,easing:c&&b||b&&!n.isFunction(b)&&b};return d.duration=n.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in n.fx.speeds?n.fx.speeds[d.duration]:n.fx.speeds._default,(null==d.queue||d.queue===!0)&&(d.queue="fx"),d.old=d.complete,d.complete=function(){n.isFunction(d.old)&&d.old.call(this),d.queue&&n.dequeue(this,d.queue)},d},n.fn.extend({fadeTo:function(a,b,c,d){return this.filter(S).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=n.isEmptyObject(a),f=n.speed(b,c,d),g=function(){var b=Xb(this,n.extend({},a),f);(e||L.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=n.timers,g=L.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&Pb.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));(b||!c)&&n.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=L.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=n.timers,g=d?d.length:0;for(c.finish=!0,n.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),n.each(["toggle","show","hide"],function(a,b){var c=n.fn[b];n.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(Tb(b,!0),a,d,e)}}),n.each({slideDown:Tb("show"),slideUp:Tb("hide"),slideToggle:Tb("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){n.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),n.timers=[],n.fx.tick=function(){var a,b=0,c=n.timers;for(Lb=n.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||n.fx.stop(),Lb=void 0},n.fx.timer=function(a){n.timers.push(a),a()?n.fx.start():n.timers.pop()},n.fx.interval=13,n.fx.start=function(){Mb||(Mb=setInterval(n.fx.tick,n.fx.interval))},n.fx.stop=function(){clearInterval(Mb),Mb=null},n.fx.speeds={slow:600,fast:200,_default:400},n.fn.delay=function(a,b){return a=n.fx?n.fx.speeds[a]||a:a,b=b||"fx",this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},function(){var a=l.createElement("input"),b=l.createElement("select"),c=b.appendChild(l.createElement("option"));a.type="checkbox",k.checkOn=""!==a.value,k.optSelected=c.selected,b.disabled=!0,k.optDisabled=!c.disabled,a=l.createElement("input"),a.value="t",a.type="radio",k.radioValue="t"===a.value}();var Yb,Zb,$b=n.expr.attrHandle;n.fn.extend({attr:function(a,b){return J(this,n.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){n.removeAttr(this,a)})}}),n.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(a&&3!==f&&8!==f&&2!==f)return typeof a.getAttribute===U?n.prop(a,b,c):(1===f&&n.isXMLDoc(a)||(b=b.toLowerCase(),d=n.attrHooks[b]||(n.expr.match.bool.test(b)?Zb:Yb)),void 0===c?d&&"get"in d&&null!==(e=d.get(a,b))?e:(e=n.find.attr(a,b),null==e?void 0:e):null!==c?d&&"set"in d&&void 0!==(e=d.set(a,c,b))?e:(a.setAttribute(b,c+""),c):void n.removeAttr(a,b))
+},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(E);if(f&&1===a.nodeType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)&&(a[d]=!1),a.removeAttribute(c)},attrHooks:{type:{set:function(a,b){if(!k.radioValue&&"radio"===b&&n.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}}}),Zb={set:function(a,b,c){return b===!1?n.removeAttr(a,c):a.setAttribute(c,c),c}},n.each(n.expr.match.bool.source.match(/\w+/g),function(a,b){var c=$b[b]||n.find.attr;$b[b]=function(a,b,d){var e,f;return d||(f=$b[b],$b[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,$b[b]=f),e}});var _b=/^(?:input|select|textarea|button)$/i;n.fn.extend({prop:function(a,b){return J(this,n.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[n.propFix[a]||a]})}}),n.extend({propFix:{"for":"htmlFor","class":"className"},prop:function(a,b,c){var d,e,f,g=a.nodeType;if(a&&3!==g&&8!==g&&2!==g)return f=1!==g||!n.isXMLDoc(a),f&&(b=n.propFix[b]||b,e=n.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){return a.hasAttribute("tabindex")||_b.test(a.nodeName)||a.href?a.tabIndex:-1}}}}),k.optSelected||(n.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null}}),n.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){n.propFix[this.toLowerCase()]=this});var ac=/[\t\r\n\f]/g;n.fn.extend({addClass:function(a){var b,c,d,e,f,g,h="string"==typeof a&&a,i=0,j=this.length;if(n.isFunction(a))return this.each(function(b){n(this).addClass(a.call(this,b,this.className))});if(h)for(b=(a||"").match(E)||[];j>i;i++)if(c=this[i],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(ac," "):" ")){f=0;while(e=b[f++])d.indexOf(" "+e+" ")<0&&(d+=e+" ");g=n.trim(d),c.className!==g&&(c.className=g)}return this},removeClass:function(a){var b,c,d,e,f,g,h=0===arguments.length||"string"==typeof a&&a,i=0,j=this.length;if(n.isFunction(a))return this.each(function(b){n(this).removeClass(a.call(this,b,this.className))});if(h)for(b=(a||"").match(E)||[];j>i;i++)if(c=this[i],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(ac," "):"")){f=0;while(e=b[f++])while(d.indexOf(" "+e+" ")>=0)d=d.replace(" "+e+" "," ");g=a?n.trim(d):"",c.className!==g&&(c.className=g)}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):this.each(n.isFunction(a)?function(c){n(this).toggleClass(a.call(this,c,this.className,b),b)}:function(){if("string"===c){var b,d=0,e=n(this),f=a.match(E)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(c===U||"boolean"===c)&&(this.className&&L.set(this,"__className__",this.className),this.className=this.className||a===!1?"":L.get(this,"__className__")||"")})},hasClass:function(a){for(var b=" "+a+" ",c=0,d=this.length;d>c;c++)if(1===this[c].nodeType&&(" "+this[c].className+" ").replace(ac," ").indexOf(b)>=0)return!0;return!1}});var bc=/\r/g;n.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(bc,""):null==c?"":c)}}}),n.extend({valHooks:{option:{get:function(a){var b=n.find.attr(a,"value");return null!=b?b:n.trim(n.text(a))}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],!(!c.selected&&i!==e||(k.optDisabled?c.disabled:null!==c.getAttribute("disabled"))||c.parentNode.disabled&&n.nodeName(c.parentNode,"optgroup"))){if(b=n(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=n.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=n.inArray(d.value,f)>=0)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),n.each(["radio","checkbox"],function(){n.valHooks[this]={set:function(a,b){return n.isArray(b)?a.checked=n.inArray(n(a).val(),b)>=0:void 0}},k.checkOn||(n.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})}),n.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){n.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),n.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}});var cc=n.now(),dc=/\?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(a){var b,c;if(!a||"string"!=typeof a)return null;try{c=new DOMParser,b=c.parseFromString(a,"text/xml")}catch(d){b=void 0}return(!b||b.getElementsByTagName("parsererror").length)&&n.error("Invalid XML: "+a),b};var ec,fc,gc=/#.*$/,hc=/([?&])_=[^&]*/,ic=/^(.*?):[ \t]*([^\r\n]*)$/gm,jc=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,kc=/^(?:GET|HEAD)$/,lc=/^\/\//,mc=/^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/,nc={},oc={},pc="*/".concat("*");try{fc=location.href}catch(qc){fc=l.createElement("a"),fc.href="",fc=fc.href}ec=mc.exec(fc.toLowerCase())||[];function rc(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(E)||[];if(n.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function sc(a,b,c,d){var e={},f=a===oc;function g(h){var i;return e[h]=!0,n.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function tc(a,b){var c,d,e=n.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&n.extend(!0,a,d),a}function uc(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function vc(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}n.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:fc,type:"GET",isLocal:jc.test(ec[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":pc,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":n.parseJSON,"text xml":n.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?tc(tc(a,n.ajaxSettings),b):tc(n.ajaxSettings,a)},ajaxPrefilter:rc(nc),ajaxTransport:rc(oc),ajax:function(a,b){"object"==typeof a&&(b=a,a=void 0),b=b||{};var c,d,e,f,g,h,i,j,k=n.ajaxSetup({},b),l=k.context||k,m=k.context&&(l.nodeType||l.jquery)?n(l):n.event,o=n.Deferred(),p=n.Callbacks("once memory"),q=k.statusCode||{},r={},s={},t=0,u="canceled",v={readyState:0,getResponseHeader:function(a){var b;if(2===t){if(!f){f={};while(b=ic.exec(e))f[b[1].toLowerCase()]=b[2]}b=f[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===t?e:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this},overrideMimeType:function(a){return t||(k.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this},abort:function(a){var b=a||u;return c&&c.abort(b),x(0,b),this}};if(o.promise(v).complete=p.add,v.success=v.done,v.error=v.fail,k.url=((a||k.url||fc)+"").replace(gc,"").replace(lc,ec[1]+"//"),k.type=b.method||b.type||k.method||k.type,k.dataTypes=n.trim(k.dataType||"*").toLowerCase().match(E)||[""],null==k.crossDomain&&(h=mc.exec(k.url.toLowerCase()),k.crossDomain=!(!h||h[1]===ec[1]&&h[2]===ec[2]&&(h[3]||("http:"===h[1]?"80":"443"))===(ec[3]||("http:"===ec[1]?"80":"443")))),k.data&&k.processData&&"string"!=typeof k.data&&(k.data=n.param(k.data,k.traditional)),sc(nc,k,b,v),2===t)return v;i=k.global,i&&0===n.active++&&n.event.trigger("ajaxStart"),k.type=k.type.toUpperCase(),k.hasContent=!kc.test(k.type),d=k.url,k.hasContent||(k.data&&(d=k.url+=(dc.test(d)?"&":"?")+k.data,delete k.data),k.cache===!1&&(k.url=hc.test(d)?d.replace(hc,"$1_="+cc++):d+(dc.test(d)?"&":"?")+"_="+cc++)),k.ifModified&&(n.lastModified[d]&&v.setRequestHeader("If-Modified-Since",n.lastModified[d]),n.etag[d]&&v.setRequestHeader("If-None-Match",n.etag[d])),(k.data&&k.hasContent&&k.contentType!==!1||b.contentType)&&v.setRequestHeader("Content-Type",k.contentType),v.setRequestHeader("Accept",k.dataTypes[0]&&k.accepts[k.dataTypes[0]]?k.accepts[k.dataTypes[0]]+("*"!==k.dataTypes[0]?", "+pc+"; q=0.01":""):k.accepts["*"]);for(j in k.headers)v.setRequestHeader(j,k.headers[j]);if(k.beforeSend&&(k.beforeSend.call(l,v,k)===!1||2===t))return v.abort();u="abort";for(j in{success:1,error:1,complete:1})v[j](k[j]);if(c=sc(oc,k,b,v)){v.readyState=1,i&&m.trigger("ajaxSend",[v,k]),k.async&&k.timeout>0&&(g=setTimeout(function(){v.abort("timeout")},k.timeout));try{t=1,c.send(r,x)}catch(w){if(!(2>t))throw w;x(-1,w)}}else x(-1,"No Transport");function x(a,b,f,h){var j,r,s,u,w,x=b;2!==t&&(t=2,g&&clearTimeout(g),c=void 0,e=h||"",v.readyState=a>0?4:0,j=a>=200&&300>a||304===a,f&&(u=uc(k,v,f)),u=vc(k,u,v,j),j?(k.ifModified&&(w=v.getResponseHeader("Last-Modified"),w&&(n.lastModified[d]=w),w=v.getResponseHeader("etag"),w&&(n.etag[d]=w)),204===a||"HEAD"===k.type?x="nocontent":304===a?x="notmodified":(x=u.state,r=u.data,s=u.error,j=!s)):(s=x,(a||!x)&&(x="error",0>a&&(a=0))),v.status=a,v.statusText=(b||x)+"",j?o.resolveWith(l,[r,x,v]):o.rejectWith(l,[v,x,s]),v.statusCode(q),q=void 0,i&&m.trigger(j?"ajaxSuccess":"ajaxError",[v,k,j?r:s]),p.fireWith(l,[v,x]),i&&(m.trigger("ajaxComplete",[v,k]),--n.active||n.event.trigger("ajaxStop")))}return v},getJSON:function(a,b,c){return n.get(a,b,c,"json")},getScript:function(a,b){return n.get(a,void 0,b,"script")}}),n.each(["get","post"],function(a,b){n[b]=function(a,c,d,e){return n.isFunction(c)&&(e=e||d,d=c,c=void 0),n.ajax({url:a,type:b,dataType:e,data:c,success:d})}}),n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){n.fn[b]=function(a){return this.on(b,a)}}),n._evalUrl=function(a){return n.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},n.fn.extend({wrapAll:function(a){var b;return n.isFunction(a)?this.each(function(b){n(this).wrapAll(a.call(this,b))}):(this[0]&&(b=n(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this)},wrapInner:function(a){return this.each(n.isFunction(a)?function(b){n(this).wrapInner(a.call(this,b))}:function(){var b=n(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=n.isFunction(a);return this.each(function(c){n(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){n.nodeName(this,"body")||n(this).replaceWith(this.childNodes)}).end()}}),n.expr.filters.hidden=function(a){return a.offsetWidth<=0&&a.offsetHeight<=0},n.expr.filters.visible=function(a){return!n.expr.filters.hidden(a)};var wc=/%20/g,xc=/\[\]$/,yc=/\r?\n/g,zc=/^(?:submit|button|image|reset|file)$/i,Ac=/^(?:input|select|textarea|keygen)/i;function Bc(a,b,c,d){var e;if(n.isArray(b))n.each(b,function(b,e){c||xc.test(a)?d(a,e):Bc(a+"["+("object"==typeof e?b:"")+"]",e,c,d)});else if(c||"object"!==n.type(b))d(a,b);else for(e in b)Bc(a+"["+e+"]",b[e],c,d)}n.param=function(a,b){var c,d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=n.ajaxSettings&&n.ajaxSettings.traditional),n.isArray(a)||a.jquery&&!n.isPlainObject(a))n.each(a,function(){e(this.name,this.value)});else for(c in a)Bc(c,a[c],b,e);return d.join("&").replace(wc,"+")},n.fn.extend({serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=n.prop(this,"elements");return a?n.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!n(this).is(":disabled")&&Ac.test(this.nodeName)&&!zc.test(a)&&(this.checked||!T.test(a))}).map(function(a,b){var c=n(this).val();return null==c?null:n.isArray(c)?n.map(c,function(a){return{name:b.name,value:a.replace(yc,"\r\n")}}):{name:b.name,value:c.replace(yc,"\r\n")}}).get()}}),n.ajaxSettings.xhr=function(){try{return new XMLHttpRequest}catch(a){}};var Cc=0,Dc={},Ec={0:200,1223:204},Fc=n.ajaxSettings.xhr();a.ActiveXObject&&n(a).on("unload",function(){for(var a in Dc)Dc[a]()}),k.cors=!!Fc&&"withCredentials"in Fc,k.ajax=Fc=!!Fc,n.ajaxTransport(function(a){var b;return k.cors||Fc&&!a.crossDomain?{send:function(c,d){var e,f=a.xhr(),g=++Cc;if(f.open(a.type,a.url,a.async,a.username,a.password),a.xhrFields)for(e in a.xhrFields)f[e]=a.xhrFields[e];a.mimeType&&f.overrideMimeType&&f.overrideMimeType(a.mimeType),a.crossDomain||c["X-Requested-With"]||(c["X-Requested-With"]="XMLHttpRequest");for(e in c)f.setRequestHeader(e,c[e]);b=function(a){return function(){b&&(delete Dc[g],b=f.onload=f.onerror=null,"abort"===a?f.abort():"error"===a?d(f.status,f.statusText):d(Ec[f.status]||f.status,f.statusText,"string"==typeof f.responseText?{text:f.responseText}:void 0,f.getAllResponseHeaders()))}},f.onload=b(),f.onerror=b("error"),b=Dc[g]=b("abort");try{f.send(a.hasContent&&a.data||null)}catch(h){if(b)throw h}},abort:function(){b&&b()}}:void 0}),n.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(a){return n.globalEval(a),a}}}),n.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),n.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(d,e){b=n("<script>").prop({async:!0,charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&e("error"===a.type?404:200,a.type)}),l.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Gc=[],Hc=/(=)\?(?=&|$)|\?\?/;n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Gc.pop()||n.expando+"_"+cc++;return this[a]=!0,a}}),n.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Hc.test(b.url)?"url":"string"==typeof b.data&&!(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Hc.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=n.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Hc,"$1"+e):b.jsonp!==!1&&(b.url+=(dc.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||n.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Gc.push(e)),g&&n.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),n.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||l;var d=v.exec(a),e=!c&&[];return d?[b.createElement(d[1])]:(d=n.buildFragment([a],b,e),e&&e.length&&n(e).remove(),n.merge([],d.childNodes))};var Ic=n.fn.load;n.fn.load=function(a,b,c){if("string"!=typeof a&&Ic)return Ic.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>=0&&(d=n.trim(a.slice(h)),a=a.slice(0,h)),n.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&n.ajax({url:a,type:e,dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?n("<div>").append(n.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,f||[a.responseText,b,a])}),this},n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};var Jc=a.document.documentElement;function Kc(a){return n.isWindow(a)?a:9===a.nodeType&&a.defaultView}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d=this[0],e={top:0,left:0},f=d&&d.ownerDocument;if(f)return b=f.documentElement,n.contains(b,d)?(typeof d.getBoundingClientRect!==U&&(e=d.getBoundingClientRect()),c=Kc(f),{top:e.top+c.pageYOffset-b.clientTop,left:e.left+c.pageXOffset-b.clientLeft}):e},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===n.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(d=a.offset()),d.top+=n.css(a[0],"borderTopWidth",!0),d.left+=n.css(a[0],"borderLeftWidth",!0)),{top:b.top-d.top-n.css(c,"marginTop",!0),left:b.left-d.left-n.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||Jc;while(a&&!n.nodeName(a,"html")&&"static"===n.css(a,"position"))a=a.offsetParent;return a||Jc})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(b,c){var d="pageYOffset"===c;n.fn[b]=function(e){return J(this,function(b,e,f){var g=Kc(b);return void 0===f?g?g[c]:b[e]:void(g?g.scrollTo(d?a.pageXOffset:f,d?f:a.pageYOffset):b[e]=f)},b,e,arguments.length,null)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=yb(k.pixelPosition,function(a,c){return c?(c=xb(a,b),vb.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return J(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.size=function(){return this.length},n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var Lc=a.jQuery,Mc=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=Mc),b&&a.jQuery===n&&(a.jQuery=Lc),n},typeof b===U&&(a.jQuery=a.$=n),n});
diff --git a/devtools/client/inspector/markup/test/lib_react_16.2.0_min.js b/devtools/client/inspector/markup/test/lib_react_16.2.0_min.js
new file mode 100644
index 0000000000..9c934d7d1a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_react_16.2.0_min.js
@@ -0,0 +1,21 @@
+/** @license React v16.2.0
+ * react.production.min.js
+ *
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';(function(q,k){"object"===typeof exports&&"undefined"!==typeof module?module.exports=k():"function"===typeof define&&define.amd?define(k):q.React=k()})(this,function(){function q(a){for(var b=arguments.length-1,c="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+a,d=0;d<b;d++)c+="\x26args[]\x3d"+encodeURIComponent(arguments[d+1]);b=Error(c+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");
+b.name="Invariant Violation";b.framesToPop=1;throw b;}function k(a){return function(){return a}}function p(a,b,c){this.props=a;this.context=b;this.refs=w;this.updater=c||x}function y(a,b,c){this.props=a;this.context=b;this.refs=w;this.updater=c||x}function z(){}function A(a,b,c){this.props=a;this.context=b;this.refs=w;this.updater=c||x}function G(a,b,c){var d,f={},l=null,e=null;if(null!=b)for(d in void 0!==b.ref&&(e=b.ref),void 0!==b.key&&(l=""+b.key),b)H.call(b,d)&&!I.hasOwnProperty(d)&&(f[d]=b[d]);
+var g=arguments.length-2;if(1===g)f.children=c;else if(1<g){for(var h=Array(g),n=0;n<g;n++)h[n]=arguments[n+2];f.children=h}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===f[d]&&(f[d]=g[d]);return{$$typeof:r,type:a,key:l,ref:e,props:f,_owner:B.current}}function C(a){return"object"===typeof a&&null!==a&&a.$$typeof===r}function O(a){var b={"\x3d":"\x3d0",":":"\x3d2"};return"$"+(""+a).replace(/[=:]/g,function(a){return b[a]})}function J(a,b,c,d){if(u.length){var f=u.pop();f.result=a;f.keyPrefix=
+b;f.func=c;f.context=d;f.count=0;return f}return{result:a,keyPrefix:b,func:c,context:d,count:0}}function K(a){a.result=null;a.keyPrefix=null;a.func=null;a.context=null;a.count=0;10>u.length&&u.push(a)}function t(a,b,c,d){var f=typeof a;if("undefined"===f||"boolean"===f)a=null;var l=!1;if(null===a)l=!0;else switch(f){case "string":case "number":l=!0;break;case "object":switch(a.$$typeof){case r:case P:case Q:case R:l=!0}}if(l)return c(d,a,""===b?"."+D(a,0):b),1;l=0;b=""===b?".":b+":";if(Array.isArray(a))for(var e=
+0;e<a.length;e++){f=a[e];var g=b+D(f,e);l+=t(f,g,c,d)}else if(null===a||"undefined"===typeof a?g=null:(g=L&&a[L]||a["@@iterator"],g="function"===typeof g?g:null),"function"===typeof g)for(a=g.call(a),e=0;!(f=a.next()).done;)f=f.value,g=b+D(f,e++),l+=t(f,g,c,d);else"object"===f&&(c=""+a,q("31","[object Object]"===c?"object with keys {"+Object.keys(a).join(", ")+"}":c,""));return l}function D(a,b){return"object"===typeof a&&null!==a&&null!=a.key?O(a.key):b.toString(36)}function S(a,b,c){a.func.call(a.context,
+b,a.count++)}function T(a,b,c){var d=a.result,f=a.keyPrefix;a=a.func.call(a.context,b,a.count++);Array.isArray(a)?E(a,d,c,F.thatReturnsArgument):null!=a&&(C(a)&&(b=f+(!a.key||b&&b.key===a.key?"":(""+a.key).replace(M,"$\x26/")+"/")+c,a={$$typeof:r,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}),d.push(a))}function E(a,b,c,d,f){var e="";null!=c&&(e=(""+c).replace(M,"$\x26/")+"/");b=J(b,e,d,f);null==a||t(a,"",T,b);K(b)}var N=Object.getOwnPropertySymbols,U=Object.prototype.hasOwnProperty,
+V=Object.prototype.propertyIsEnumerable,v=function(){try{if(!Object.assign)return!1;var a=new String("abc");a[5]="de";if("5"===Object.getOwnPropertyNames(a)[0])return!1;var b={};for(a=0;10>a;a++)b["_"+String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(b).map(function(a){return b[a]}).join(""))return!1;var c={};"abcdefghijklmnopqrst".split("").forEach(function(a){c[a]=a});return"abcdefghijklmnopqrst"!==Object.keys(Object.assign({},c)).join("")?!1:!0}catch(d){return!1}}()?Object.assign:
+function(a,b){if(null===a||void 0===a)throw new TypeError("Object.assign cannot be called with null or undefined");var c=Object(a);for(var d,f=1;f<arguments.length;f++){var e=Object(arguments[f]);for(var h in e)U.call(e,h)&&(c[h]=e[h]);if(N){d=N(e);for(var g=0;g<d.length;g++)V.call(e,d[g])&&(c[d[g]]=e[d[g]])}}return c},h="function"===typeof Symbol&&Symbol["for"],r=h?Symbol["for"]("react.element"):60103,P=h?Symbol["for"]("react.call"):60104,Q=h?Symbol["for"]("react.return"):60105,R=h?Symbol["for"]("react.portal"):
+60106;h=h?Symbol["for"]("react.fragment"):60107;var L="function"===typeof Symbol&&Symbol.iterator,w={},e=function(){};e.thatReturns=k;e.thatReturnsFalse=k(!1);e.thatReturnsTrue=k(!0);e.thatReturnsNull=k(null);e.thatReturnsThis=function(){return this};e.thatReturnsArgument=function(a){return a};var F=e,x={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,d){},enqueueSetState:function(a,b,c,d){}};p.prototype.isReactComponent={};p.prototype.setState=
+function(a,b){"object"!==typeof a&&"function"!==typeof a&&null!=a?q("85"):void 0;this.updater.enqueueSetState(this,a,b,"setState")};p.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};z.prototype=p.prototype;e=y.prototype=new z;e.constructor=y;v(e,p.prototype);e.isPureReactComponent=!0;e=A.prototype=new z;e.constructor=A;v(e,p.prototype);e.unstable_isAsyncReactComponent=!0;e.render=function(){return this.props.children};var B={current:null},H=Object.prototype.hasOwnProperty,
+I={key:!0,ref:!0,__self:!0,__source:!0},M=/\/+/g,u=[];h={Children:{map:function(a,b,c){if(null==a)return a;var d=[];E(a,d,null,b,c);return d},forEach:function(a,b,c){if(null==a)return a;b=J(null,null,b,c);null==a||t(a,"",S,b);K(b)},count:function(a,b){return null==a?0:t(a,"",F.thatReturnsNull,null)},toArray:function(a){var b=[];E(a,b,null,F.thatReturnsArgument);return b},only:function(a){C(a)?void 0:q("143");return a}},Component:p,PureComponent:y,unstable_AsyncComponent:A,Fragment:h,createElement:G,
+cloneElement:function(a,b,c){var d=v({},a.props),e=a.key,h=a.ref,k=a._owner;if(null!=b){void 0!==b.ref&&(h=b.ref,k=B.current);void 0!==b.key&&(e=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(m in b)H.call(b,m)&&!I.hasOwnProperty(m)&&(d[m]=void 0===b[m]&&void 0!==g?g[m]:b[m])}var m=arguments.length-2;if(1===m)d.children=c;else if(1<m){g=Array(m);for(var n=0;n<m;n++)g[n]=arguments[n+2];d.children=g}return{$$typeof:r,type:a.type,key:e,ref:h,props:d,_owner:k}},createFactory:function(a){var b=
+G.bind(null,a);b.type=a;return b},isValidElement:C,version:"16.2.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:B,assign:v}};h=(e=Object.freeze({default:h}))&&h||e;return h["default"]?h["default"]:h});
diff --git a/devtools/client/inspector/markup/test/lib_react_dom_15.3.1_min.js b/devtools/client/inspector/markup/test/lib_react_dom_15.3.1_min.js
new file mode 100644
index 0000000000..ff23244cf7
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_react_dom_15.3.1_min.js
@@ -0,0 +1,12 @@
+/**
+ * ReactDOM v15.3.1
+ *
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e(require("react"));else if("function"==typeof define&&define.amd)define(["react"],e);else{var f;f="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,f.ReactDOM=e(f.React)}}(function(e){return e.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED});
diff --git a/devtools/client/inspector/markup/test/lib_react_dom_15.4.1.js b/devtools/client/inspector/markup/test/lib_react_dom_15.4.1.js
new file mode 100644
index 0000000000..2ca11e5d06
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_react_dom_15.4.1.js
@@ -0,0 +1,18239 @@
+/**
+ * ReactDOM v15.4.1
+ */
+
+;(function(f) {
+ // CommonJS
+ if (typeof exports === "object" && typeof module !== "undefined") {
+   module.exports = f(require('react'));
+
+ // RequireJS
+ } else if (typeof define === "function" && define.amd) {
+   define(['react'], f);
+
+ // <script>
+ } else {
+   var g;
+   if (typeof window !== "undefined") {
+     g = window;
+   } else if (typeof global !== "undefined") {
+     g = global;
+   } else if (typeof self !== "undefined") {
+     g = self;
+   } else {
+     // works providing we're not in "use strict";
+     // needed for Java 8 Nashorn
+     // see https://github.com/facebook/react/issues/3037
+     g = this;
+   }
+   g.ReactDOM = f(g.React);
+ }
+})(function(React) {
+ return (function(f){return f()})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw (f.code="MODULE_NOT_FOUND", f)}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ARIADOMPropertyConfig = {
+ Properties: {
+   // Global States and Properties
+   'aria-current': 0, // state
+   'aria-details': 0,
+   'aria-disabled': 0, // state
+   'aria-hidden': 0, // state
+   'aria-invalid': 0, // state
+   'aria-keyshortcuts': 0,
+   'aria-label': 0,
+   'aria-roledescription': 0,
+   // Widget Attributes
+   'aria-autocomplete': 0,
+   'aria-checked': 0,
+   'aria-expanded': 0,
+   'aria-haspopup': 0,
+   'aria-level': 0,
+   'aria-modal': 0,
+   'aria-multiline': 0,
+   'aria-multiselectable': 0,
+   'aria-orientation': 0,
+   'aria-placeholder': 0,
+   'aria-pressed': 0,
+   'aria-readonly': 0,
+   'aria-required': 0,
+   'aria-selected': 0,
+   'aria-sort': 0,
+   'aria-valuemax': 0,
+   'aria-valuemin': 0,
+   'aria-valuenow': 0,
+   'aria-valuetext': 0,
+   // Live Region Attributes
+   'aria-atomic': 0,
+   'aria-busy': 0,
+   'aria-live': 0,
+   'aria-relevant': 0,
+   // Drag-and-Drop Attributes
+   'aria-dropeffect': 0,
+   'aria-grabbed': 0,
+   // Relationship Attributes
+   'aria-activedescendant': 0,
+   'aria-colcount': 0,
+   'aria-colindex': 0,
+   'aria-colspan': 0,
+   'aria-controls': 0,
+   'aria-describedby': 0,
+   'aria-errormessage': 0,
+   'aria-flowto': 0,
+   'aria-labelledby': 0,
+   'aria-owns': 0,
+   'aria-posinset': 0,
+   'aria-rowcount': 0,
+   'aria-rowindex': 0,
+   'aria-rowspan': 0,
+   'aria-setsize': 0
+ },
+ DOMAttributeNames: {},
+ DOMPropertyNames: {}
+};
+
+module.exports = ARIADOMPropertyConfig;
+},{}],2:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactDOMComponentTree = _dereq_(34);
+
+var focusNode = _dereq_(144);
+
+var AutoFocusUtils = {
+ focusDOMComponent: function () {
+   focusNode(ReactDOMComponentTree.getNodeFromInstance(this));
+ }
+};
+
+module.exports = AutoFocusUtils;
+},{"144":144,"34":34}],3:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var EventPropagators = _dereq_(20);
+var ExecutionEnvironment = _dereq_(136);
+var FallbackCompositionState = _dereq_(21);
+var SyntheticCompositionEvent = _dereq_(89);
+var SyntheticInputEvent = _dereq_(93);
+
+var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
+var START_KEYCODE = 229;
+
+var canUseCompositionEvent = ExecutionEnvironment.canUseDOM && 'CompositionEvent' in window;
+
+var documentMode = null;
+if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) {
+ documentMode = document.documentMode;
+}
+
+// Webkit offers a very useful `textInput` event that can be used to
+// directly represent `beforeInput`. The IE `textinput` event is not as
+// useful, so we don't use it.
+var canUseTextInputEvent = ExecutionEnvironment.canUseDOM && 'TextEvent' in window && !documentMode && !isPresto();
+
+// In IE9+, we have access to composition events, but the data supplied
+// by the native compositionend event may be incorrect. Japanese ideographic
+// spaces, for instance (\u3000) are not recorded correctly.
+var useFallbackCompositionData = ExecutionEnvironment.canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
+
+/**
+* Opera <= 12 includes TextEvent in window, but does not fire
+* text input events. Rely on keypress instead.
+*/
+function isPresto() {
+ var opera = window.opera;
+ return typeof opera === 'object' && typeof opera.version === 'function' && parseInt(opera.version(), 10) <= 12;
+}
+
+var SPACEBAR_CODE = 32;
+var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
+
+// Events and their corresponding property names.
+var eventTypes = {
+ beforeInput: {
+   phasedRegistrationNames: {
+     bubbled: 'onBeforeInput',
+     captured: 'onBeforeInputCapture'
+   },
+   dependencies: ['topCompositionEnd', 'topKeyPress', 'topTextInput', 'topPaste']
+ },
+ compositionEnd: {
+   phasedRegistrationNames: {
+     bubbled: 'onCompositionEnd',
+     captured: 'onCompositionEndCapture'
+   },
+   dependencies: ['topBlur', 'topCompositionEnd', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown']
+ },
+ compositionStart: {
+   phasedRegistrationNames: {
+     bubbled: 'onCompositionStart',
+     captured: 'onCompositionStartCapture'
+   },
+   dependencies: ['topBlur', 'topCompositionStart', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown']
+ },
+ compositionUpdate: {
+   phasedRegistrationNames: {
+     bubbled: 'onCompositionUpdate',
+     captured: 'onCompositionUpdateCapture'
+   },
+   dependencies: ['topBlur', 'topCompositionUpdate', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown']
+ }
+};
+
+// Track whether we've ever handled a keypress on the space key.
+var hasSpaceKeypress = false;
+
+/**
+* Return whether a native keypress event is assumed to be a command.
+* This is required because Firefox fires `keypress` events for key commands
+* (cut, copy, select-all, etc.) even though no character is inserted.
+*/
+function isKeypressCommand(nativeEvent) {
+ return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
+ // ctrlKey && altKey is equivalent to AltGr, and is not a command.
+ !(nativeEvent.ctrlKey && nativeEvent.altKey);
+}
+
+/**
+* Translate native top level events into event types.
+*
+* @param {string} topLevelType
+* @return {object}
+*/
+function getCompositionEventType(topLevelType) {
+ switch (topLevelType) {
+   case 'topCompositionStart':
+     return eventTypes.compositionStart;
+   case 'topCompositionEnd':
+     return eventTypes.compositionEnd;
+   case 'topCompositionUpdate':
+     return eventTypes.compositionUpdate;
+ }
+}
+
+/**
+* Does our fallback best-guess model think this event signifies that
+* composition has begun?
+*
+* @param {string} topLevelType
+* @param {object} nativeEvent
+* @return {boolean}
+*/
+function isFallbackCompositionStart(topLevelType, nativeEvent) {
+ return topLevelType === 'topKeyDown' && nativeEvent.keyCode === START_KEYCODE;
+}
+
+/**
+* Does our fallback mode think that this event is the end of composition?
+*
+* @param {string} topLevelType
+* @param {object} nativeEvent
+* @return {boolean}
+*/
+function isFallbackCompositionEnd(topLevelType, nativeEvent) {
+ switch (topLevelType) {
+   case 'topKeyUp':
+     // Command keys insert or clear IME input.
+     return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
+   case 'topKeyDown':
+     // Expect IME keyCode on each keydown. If we get any other
+     // code we must have exited earlier.
+     return nativeEvent.keyCode !== START_KEYCODE;
+   case 'topKeyPress':
+   case 'topMouseDown':
+   case 'topBlur':
+     // Events are not possible without cancelling IME.
+     return true;
+   default:
+     return false;
+ }
+}
+
+/**
+* Google Input Tools provides composition data via a CustomEvent,
+* with the `data` property populated in the `detail` object. If this
+* is available on the event object, use it. If not, this is a plain
+* composition event and we have nothing special to extract.
+*
+* @param {object} nativeEvent
+* @return {?string}
+*/
+function getDataFromCustomEvent(nativeEvent) {
+ var detail = nativeEvent.detail;
+ if (typeof detail === 'object' && 'data' in detail) {
+   return detail.data;
+ }
+ return null;
+}
+
+// Track the current IME composition fallback object, if any.
+var currentComposition = null;
+
+/**
+* @return {?object} A SyntheticCompositionEvent.
+*/
+function extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+ var eventType;
+ var fallbackData;
+
+ if (canUseCompositionEvent) {
+   eventType = getCompositionEventType(topLevelType);
+ } else if (!currentComposition) {
+   if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
+     eventType = eventTypes.compositionStart;
+   }
+ } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
+   eventType = eventTypes.compositionEnd;
+ }
+
+ if (!eventType) {
+   return null;
+ }
+
+ if (useFallbackCompositionData) {
+   // The current composition is stored statically and must not be
+   // overwritten while composition continues.
+   if (!currentComposition && eventType === eventTypes.compositionStart) {
+     currentComposition = FallbackCompositionState.getPooled(nativeEventTarget);
+   } else if (eventType === eventTypes.compositionEnd) {
+     if (currentComposition) {
+       fallbackData = currentComposition.getData();
+     }
+   }
+ }
+
+ var event = SyntheticCompositionEvent.getPooled(eventType, targetInst, nativeEvent, nativeEventTarget);
+
+ if (fallbackData) {
+   // Inject data generated from fallback path into the synthetic event.
+   // This matches the property of native CompositionEventInterface.
+   event.data = fallbackData;
+ } else {
+   var customData = getDataFromCustomEvent(nativeEvent);
+   if (customData !== null) {
+     event.data = customData;
+   }
+ }
+
+ EventPropagators.accumulateTwoPhaseDispatches(event);
+ return event;
+}
+
+/**
+* @param {string} topLevelType Record from `EventConstants`.
+* @param {object} nativeEvent Native browser event.
+* @return {?string} The string corresponding to this `beforeInput` event.
+*/
+function getNativeBeforeInputChars(topLevelType, nativeEvent) {
+ switch (topLevelType) {
+   case 'topCompositionEnd':
+     return getDataFromCustomEvent(nativeEvent);
+   case 'topKeyPress':
+     /**
+      * If native `textInput` events are available, our goal is to make
+      * use of them. However, there is a special case: the spacebar key.
+      * In Webkit, preventing default on a spacebar `textInput` event
+      * cancels character insertion, but it *also* causes the browser
+      * to fall back to its default spacebar behavior of scrolling the
+      * page.
+      *
+      * Tracking at:
+      * https://code.google.com/p/chromium/issues/detail?id=355103
+      *
+      * To avoid this issue, use the keypress event as if no `textInput`
+      * event is available.
+      */
+     var which = nativeEvent.which;
+     if (which !== SPACEBAR_CODE) {
+       return null;
+     }
+
+     hasSpaceKeypress = true;
+     return SPACEBAR_CHAR;
+
+   case 'topTextInput':
+     // Record the characters to be added to the DOM.
+     var chars = nativeEvent.data;
+
+     // If it's a spacebar character, assume that we have already handled
+     // it at the keypress level and bail immediately. Android Chrome
+     // doesn't give us keycodes, so we need to blacklist it.
+     if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
+       return null;
+     }
+
+     return chars;
+
+   default:
+     // For other native event types, do nothing.
+     return null;
+ }
+}
+
+/**
+* For browsers that do not provide the `textInput` event, extract the
+* appropriate string to use for SyntheticInputEvent.
+*
+* @param {string} topLevelType Record from `EventConstants`.
+* @param {object} nativeEvent Native browser event.
+* @return {?string} The fallback string for this `beforeInput` event.
+*/
+function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
+ // If we are currently composing (IME) and using a fallback to do so,
+ // try to extract the composed characters from the fallback object.
+ // If composition event is available, we extract a string only at
+ // compositionevent, otherwise extract it at fallback events.
+ if (currentComposition) {
+   if (topLevelType === 'topCompositionEnd' || !canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent)) {
+     var chars = currentComposition.getData();
+     FallbackCompositionState.release(currentComposition);
+     currentComposition = null;
+     return chars;
+   }
+   return null;
+ }
+
+ switch (topLevelType) {
+   case 'topPaste':
+     // If a paste event occurs after a keypress, throw out the input
+     // chars. Paste events should not lead to BeforeInput events.
+     return null;
+   case 'topKeyPress':
+     /**
+      * As of v27, Firefox may fire keypress events even when no character
+      * will be inserted. A few possibilities:
+      *
+      * - `which` is `0`. Arrow keys, Esc key, etc.
+      *
+      * - `which` is the pressed key code, but no char is available.
+      *   Ex: 'AltGr + d` in Polish. There is no modified character for
+      *   this key combination and no character is inserted into the
+      *   document, but FF fires the keypress for char code `100` anyway.
+      *   No `input` event will occur.
+      *
+      * - `which` is the pressed key code, but a command combination is
+      *   being used. Ex: `Cmd+C`. No character is inserted, and no
+      *   `input` event will occur.
+      */
+     if (nativeEvent.which && !isKeypressCommand(nativeEvent)) {
+       return String.fromCharCode(nativeEvent.which);
+     }
+     return null;
+   case 'topCompositionEnd':
+     return useFallbackCompositionData ? null : nativeEvent.data;
+   default:
+     return null;
+ }
+}
+
+/**
+* Extract a SyntheticInputEvent for `beforeInput`, based on either native
+* `textInput` or fallback behavior.
+*
+* @return {?object} A SyntheticInputEvent.
+*/
+function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+ var chars;
+
+ if (canUseTextInputEvent) {
+   chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
+ } else {
+   chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
+ }
+
+ // If no characters are being inserted, no BeforeInput event should
+ // be fired.
+ if (!chars) {
+   return null;
+ }
+
+ var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, targetInst, nativeEvent, nativeEventTarget);
+
+ event.data = chars;
+ EventPropagators.accumulateTwoPhaseDispatches(event);
+ return event;
+}
+
+/**
+* Create an `onBeforeInput` event to match
+* http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
+*
+* This event plugin is based on the native `textInput` event
+* available in Chrome, Safari, Opera, and IE. This event fires after
+* `onKeyPress` and `onCompositionEnd`, but before `onInput`.
+*
+* `beforeInput` is spec'd but not implemented in any browsers, and
+* the `input` event does not provide any useful information about what has
+* actually been added, contrary to the spec. Thus, `textInput` is the best
+* available event to identify the characters that have actually been inserted
+* into the target node.
+*
+* This plugin is also responsible for emitting `composition` events, thus
+* allowing us to share composition fallback code for both `beforeInput` and
+* `composition` event types.
+*/
+var BeforeInputEventPlugin = {
+
+ eventTypes: eventTypes,
+
+ extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+   return [extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget), extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget)];
+ }
+};
+
+module.exports = BeforeInputEventPlugin;
+},{"136":136,"20":20,"21":21,"89":89,"93":93}],4:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* CSS properties which accept numbers but are not in units of "px".
+*/
+
+var isUnitlessNumber = {
+ animationIterationCount: true,
+ borderImageOutset: true,
+ borderImageSlice: true,
+ borderImageWidth: true,
+ boxFlex: true,
+ boxFlexGroup: true,
+ boxOrdinalGroup: true,
+ columnCount: true,
+ flex: true,
+ flexGrow: true,
+ flexPositive: true,
+ flexShrink: true,
+ flexNegative: true,
+ flexOrder: true,
+ gridRow: true,
+ gridColumn: true,
+ fontWeight: true,
+ lineClamp: true,
+ lineHeight: true,
+ opacity: true,
+ order: true,
+ orphans: true,
+ tabSize: true,
+ widows: true,
+ zIndex: true,
+ zoom: true,
+
+ // SVG-related properties
+ fillOpacity: true,
+ floodOpacity: true,
+ stopOpacity: true,
+ strokeDasharray: true,
+ strokeDashoffset: true,
+ strokeMiterlimit: true,
+ strokeOpacity: true,
+ strokeWidth: true
+};
+
+/**
+* @param {string} prefix vendor-specific prefix, eg: Webkit
+* @param {string} key style name, eg: transitionDuration
+* @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+* WebkitTransitionDuration
+*/
+function prefixKey(prefix, key) {
+ return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+
+/**
+* Support style names that may come passed in prefixed by adding permutations
+* of vendor prefixes.
+*/
+var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+
+// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+Object.keys(isUnitlessNumber).forEach(function (prop) {
+ prefixes.forEach(function (prefix) {
+   isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+ });
+});
+
+/**
+* Most style properties can be unset by doing .style[prop] = '' but IE8
+* doesn't like doing that with shorthand properties so for the properties that
+* IE8 breaks on, which are listed here, we instead unset each of the
+* individual properties. See http://bugs.jquery.com/ticket/12385.
+* The 4-value 'clock' properties like margin, padding, border-width seem to
+* behave without any problems. Curiously, list-style works too without any
+* special prodding.
+*/
+var shorthandPropertyExpansions = {
+ background: {
+   backgroundAttachment: true,
+   backgroundColor: true,
+   backgroundImage: true,
+   backgroundPositionX: true,
+   backgroundPositionY: true,
+   backgroundRepeat: true
+ },
+ backgroundPosition: {
+   backgroundPositionX: true,
+   backgroundPositionY: true
+ },
+ border: {
+   borderWidth: true,
+   borderStyle: true,
+   borderColor: true
+ },
+ borderBottom: {
+   borderBottomWidth: true,
+   borderBottomStyle: true,
+   borderBottomColor: true
+ },
+ borderLeft: {
+   borderLeftWidth: true,
+   borderLeftStyle: true,
+   borderLeftColor: true
+ },
+ borderRight: {
+   borderRightWidth: true,
+   borderRightStyle: true,
+   borderRightColor: true
+ },
+ borderTop: {
+   borderTopWidth: true,
+   borderTopStyle: true,
+   borderTopColor: true
+ },
+ font: {
+   fontStyle: true,
+   fontVariant: true,
+   fontWeight: true,
+   fontSize: true,
+   lineHeight: true,
+   fontFamily: true
+ },
+ outline: {
+   outlineWidth: true,
+   outlineStyle: true,
+   outlineColor: true
+ }
+};
+
+var CSSProperty = {
+ isUnitlessNumber: isUnitlessNumber,
+ shorthandPropertyExpansions: shorthandPropertyExpansions
+};
+
+module.exports = CSSProperty;
+},{}],5:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var CSSProperty = _dereq_(4);
+var ExecutionEnvironment = _dereq_(136);
+var ReactInstrumentation = _dereq_(64);
+
+var camelizeStyleName = _dereq_(138);
+var dangerousStyleValue = _dereq_(106);
+var hyphenateStyleName = _dereq_(149);
+var memoizeStringOnly = _dereq_(153);
+var warning = _dereq_(157);
+
+var processStyleName = memoizeStringOnly(function (styleName) {
+ return hyphenateStyleName(styleName);
+});
+
+var hasShorthandPropertyBug = false;
+var styleFloatAccessor = 'cssFloat';
+if (ExecutionEnvironment.canUseDOM) {
+ var tempStyle = document.createElement('div').style;
+ try {
+   // IE8 throws "Invalid argument." if resetting shorthand style properties.
+   tempStyle.font = '';
+ } catch (e) {
+   hasShorthandPropertyBug = true;
+ }
+ // IE8 only supports accessing cssFloat (standard) as styleFloat
+ if (document.documentElement.style.cssFloat === undefined) {
+   styleFloatAccessor = 'styleFloat';
+ }
+}
+
+if ("development" !== 'production') {
+ // 'msTransform' is correct, but the other prefixes should be capitalized
+ var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
+
+ // style values shouldn't contain a semicolon
+ var badStyleValueWithSemicolonPattern = /;\s*$/;
+
+ var warnedStyleNames = {};
+ var warnedStyleValues = {};
+ var warnedForNaNValue = false;
+
+ var warnHyphenatedStyleName = function (name, owner) {
+   if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+     return;
+   }
+
+   warnedStyleNames[name] = true;
+   "development" !== 'production' ? warning(false, 'Unsupported style property %s. Did you mean %s?%s', name, camelizeStyleName(name), checkRenderMessage(owner)) : void 0;
+ };
+
+ var warnBadVendoredStyleName = function (name, owner) {
+   if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+     return;
+   }
+
+   warnedStyleNames[name] = true;
+   "development" !== 'production' ? warning(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?%s', name, name.charAt(0).toUpperCase() + name.slice(1), checkRenderMessage(owner)) : void 0;
+ };
+
+ var warnStyleValueWithSemicolon = function (name, value, owner) {
+   if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
+     return;
+   }
+
+   warnedStyleValues[value] = true;
+   "development" !== 'production' ? warning(false, 'Style property values shouldn\'t contain a semicolon.%s ' + 'Try "%s: %s" instead.', checkRenderMessage(owner), name, value.replace(badStyleValueWithSemicolonPattern, '')) : void 0;
+ };
+
+ var warnStyleValueIsNaN = function (name, value, owner) {
+   if (warnedForNaNValue) {
+     return;
+   }
+
+   warnedForNaNValue = true;
+   "development" !== 'production' ? warning(false, '`NaN` is an invalid value for the `%s` css style property.%s', name, checkRenderMessage(owner)) : void 0;
+ };
+
+ var checkRenderMessage = function (owner) {
+   if (owner) {
+     var name = owner.getName();
+     if (name) {
+       return ' Check the render method of `' + name + '`.';
+     }
+   }
+   return '';
+ };
+
+ /**
+  * @param {string} name
+  * @param {*} value
+  * @param {ReactDOMComponent} component
+  */
+ var warnValidStyle = function (name, value, component) {
+   var owner;
+   if (component) {
+     owner = component._currentElement._owner;
+   }
+   if (name.indexOf('-') > -1) {
+     warnHyphenatedStyleName(name, owner);
+   } else if (badVendoredStyleNamePattern.test(name)) {
+     warnBadVendoredStyleName(name, owner);
+   } else if (badStyleValueWithSemicolonPattern.test(value)) {
+     warnStyleValueWithSemicolon(name, value, owner);
+   }
+
+   if (typeof value === 'number' && isNaN(value)) {
+     warnStyleValueIsNaN(name, value, owner);
+   }
+ };
+}
+
+/**
+* Operations for dealing with CSS properties.
+*/
+var CSSPropertyOperations = {
+
+ /**
+  * Serializes a mapping of style properties for use as inline styles:
+  *
+  *   > createMarkupForStyles({width: '200px', height: 0})
+  *   "width:200px;height:0;"
+  *
+  * Undefined values are ignored so that declarative programming is easier.
+  * The result should be HTML-escaped before insertion into the DOM.
+  *
+  * @param {object} styles
+  * @param {ReactDOMComponent} component
+  * @return {?string}
+  */
+ createMarkupForStyles: function (styles, component) {
+   var serialized = '';
+   for (var styleName in styles) {
+     if (!styles.hasOwnProperty(styleName)) {
+       continue;
+     }
+     var styleValue = styles[styleName];
+     if ("development" !== 'production') {
+       warnValidStyle(styleName, styleValue, component);
+     }
+     if (styleValue != null) {
+       serialized += processStyleName(styleName) + ':';
+       serialized += dangerousStyleValue(styleName, styleValue, component) + ';';
+     }
+   }
+   return serialized || null;
+ },
+
+ /**
+  * Sets the value for multiple styles on a node.  If a value is specified as
+  * '' (empty string), the corresponding style property will be unset.
+  *
+  * @param {DOMElement} node
+  * @param {object} styles
+  * @param {ReactDOMComponent} component
+  */
+ setValueForStyles: function (node, styles, component) {
+   if ("development" !== 'production') {
+     ReactInstrumentation.debugTool.onHostOperation({
+       instanceID: component._debugID,
+       type: 'update styles',
+       payload: styles
+     });
+   }
+
+   var style = node.style;
+   for (var styleName in styles) {
+     if (!styles.hasOwnProperty(styleName)) {
+       continue;
+     }
+     if ("development" !== 'production') {
+       warnValidStyle(styleName, styles[styleName], component);
+     }
+     var styleValue = dangerousStyleValue(styleName, styles[styleName], component);
+     if (styleName === 'float' || styleName === 'cssFloat') {
+       styleName = styleFloatAccessor;
+     }
+     if (styleValue) {
+       style[styleName] = styleValue;
+     } else {
+       var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName];
+       if (expansion) {
+         // Shorthand property that IE8 won't like unsetting, so unset each
+         // component to placate it
+         for (var individualStyleName in expansion) {
+           style[individualStyleName] = '';
+         }
+       } else {
+         style[styleName] = '';
+       }
+     }
+   }
+ }
+
+};
+
+module.exports = CSSPropertyOperations;
+},{"106":106,"136":136,"138":138,"149":149,"153":153,"157":157,"4":4,"64":64}],6:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var PooledClass = _dereq_(25);
+
+var invariant = _dereq_(150);
+
+/**
+* A specialized pseudo-event module to help keep track of components waiting to
+* be notified when their DOM representations are available for use.
+*
+* This implements `PooledClass`, so you should never need to instantiate this.
+* Instead, use `CallbackQueue.getPooled()`.
+*
+* @class ReactMountReady
+* @implements PooledClass
+* @internal
+*/
+
+var CallbackQueue = function () {
+ function CallbackQueue(arg) {
+   _classCallCheck(this, CallbackQueue);
+
+   this._callbacks = null;
+   this._contexts = null;
+   this._arg = arg;
+ }
+
+ /**
+  * Enqueues a callback to be invoked when `notifyAll` is invoked.
+  *
+  * @param {function} callback Invoked when `notifyAll` is invoked.
+  * @param {?object} context Context to call `callback` with.
+  * @internal
+  */
+
+
+ CallbackQueue.prototype.enqueue = function enqueue(callback, context) {
+   this._callbacks = this._callbacks || [];
+   this._callbacks.push(callback);
+   this._contexts = this._contexts || [];
+   this._contexts.push(context);
+ };
+
+ /**
+  * Invokes all enqueued callbacks and clears the queue. This is invoked after
+  * the DOM representation of a component has been created or updated.
+  *
+  * @internal
+  */
+
+
+ CallbackQueue.prototype.notifyAll = function notifyAll() {
+   var callbacks = this._callbacks;
+   var contexts = this._contexts;
+   var arg = this._arg;
+   if (callbacks && contexts) {
+     !(callbacks.length === contexts.length) ? "development" !== 'production' ? invariant(false, 'Mismatched list of contexts in callback queue') : _prodInvariant('24') : void 0;
+     this._callbacks = null;
+     this._contexts = null;
+     for (var i = 0; i < callbacks.length; i++) {
+       callbacks[i].call(contexts[i], arg);
+     }
+     callbacks.length = 0;
+     contexts.length = 0;
+   }
+ };
+
+ CallbackQueue.prototype.checkpoint = function checkpoint() {
+   return this._callbacks ? this._callbacks.length : 0;
+ };
+
+ CallbackQueue.prototype.rollback = function rollback(len) {
+   if (this._callbacks && this._contexts) {
+     this._callbacks.length = len;
+     this._contexts.length = len;
+   }
+ };
+
+ /**
+  * Resets the internal queue.
+  *
+  * @internal
+  */
+
+
+ CallbackQueue.prototype.reset = function reset() {
+   this._callbacks = null;
+   this._contexts = null;
+ };
+
+ /**
+  * `PooledClass` looks for this.
+  */
+
+
+ CallbackQueue.prototype.destructor = function destructor() {
+   this.reset();
+ };
+
+ return CallbackQueue;
+}();
+
+module.exports = PooledClass.addPoolingTo(CallbackQueue);
+},{"125":125,"150":150,"25":25}],7:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var EventPluginHub = _dereq_(17);
+var EventPropagators = _dereq_(20);
+var ExecutionEnvironment = _dereq_(136);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactUpdates = _dereq_(82);
+var SyntheticEvent = _dereq_(91);
+
+var getEventTarget = _dereq_(114);
+var isEventSupported = _dereq_(122);
+var isTextInputElement = _dereq_(123);
+
+var eventTypes = {
+ change: {
+   phasedRegistrationNames: {
+     bubbled: 'onChange',
+     captured: 'onChangeCapture'
+   },
+   dependencies: ['topBlur', 'topChange', 'topClick', 'topFocus', 'topInput', 'topKeyDown', 'topKeyUp', 'topSelectionChange']
+ }
+};
+
+/**
+* For IE shims
+*/
+var activeElement = null;
+var activeElementInst = null;
+var activeElementValue = null;
+var activeElementValueProp = null;
+
+/**
+* SECTION: handle `change` event
+*/
+function shouldUseChangeEvent(elem) {
+ var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
+ return nodeName === 'select' || nodeName === 'input' && elem.type === 'file';
+}
+
+var doesChangeEventBubble = false;
+if (ExecutionEnvironment.canUseDOM) {
+ // See `handleChange` comment below
+ doesChangeEventBubble = isEventSupported('change') && (!document.documentMode || document.documentMode > 8);
+}
+
+function manualDispatchChangeEvent(nativeEvent) {
+ var event = SyntheticEvent.getPooled(eventTypes.change, activeElementInst, nativeEvent, getEventTarget(nativeEvent));
+ EventPropagators.accumulateTwoPhaseDispatches(event);
+
+ // If change and propertychange bubbled, we'd just bind to it like all the
+ // other events and have it go through ReactBrowserEventEmitter. Since it
+ // doesn't, we manually listen for the events and so we have to enqueue and
+ // process the abstract event manually.
+ //
+ // Batching is necessary here in order to ensure that all event handlers run
+ // before the next rerender (including event handlers attached to ancestor
+ // elements instead of directly on the input). Without this, controlled
+ // components don't work properly in conjunction with event bubbling because
+ // the component is rerendered and the value reverted before all the event
+ // handlers can run. See https://github.com/facebook/react/issues/708.
+ ReactUpdates.batchedUpdates(runEventInBatch, event);
+}
+
+function runEventInBatch(event) {
+ EventPluginHub.enqueueEvents(event);
+ EventPluginHub.processEventQueue(false);
+}
+
+function startWatchingForChangeEventIE8(target, targetInst) {
+ activeElement = target;
+ activeElementInst = targetInst;
+ activeElement.attachEvent('onchange', manualDispatchChangeEvent);
+}
+
+function stopWatchingForChangeEventIE8() {
+ if (!activeElement) {
+   return;
+ }
+ activeElement.detachEvent('onchange', manualDispatchChangeEvent);
+ activeElement = null;
+ activeElementInst = null;
+}
+
+function getTargetInstForChangeEvent(topLevelType, targetInst) {
+ if (topLevelType === 'topChange') {
+   return targetInst;
+ }
+}
+function handleEventsForChangeEventIE8(topLevelType, target, targetInst) {
+ if (topLevelType === 'topFocus') {
+   // stopWatching() should be a noop here but we call it just in case we
+   // missed a blur event somehow.
+   stopWatchingForChangeEventIE8();
+   startWatchingForChangeEventIE8(target, targetInst);
+ } else if (topLevelType === 'topBlur') {
+   stopWatchingForChangeEventIE8();
+ }
+}
+
+/**
+* SECTION: handle `input` event
+*/
+var isInputEventSupported = false;
+if (ExecutionEnvironment.canUseDOM) {
+ // IE9 claims to support the input event but fails to trigger it when
+ // deleting text, so we ignore its input events.
+ // IE10+ fire input events to often, such when a placeholder
+ // changes or when an input with a placeholder is focused.
+ isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 11);
+}
+
+/**
+* (For IE <=11) Replacement getter/setter for the `value` property that gets
+* set on the active element.
+*/
+var newValueProp = {
+ get: function () {
+   return activeElementValueProp.get.call(this);
+ },
+ set: function (val) {
+   // Cast to a string so we can do equality checks.
+   activeElementValue = '' + val;
+   activeElementValueProp.set.call(this, val);
+ }
+};
+
+/**
+* (For IE <=11) Starts tracking propertychange events on the passed-in element
+* and override the value property so that we can distinguish user events from
+* value changes in JS.
+*/
+function startWatchingForValueChange(target, targetInst) {
+ activeElement = target;
+ activeElementInst = targetInst;
+ activeElementValue = target.value;
+ activeElementValueProp = Object.getOwnPropertyDescriptor(target.constructor.prototype, 'value');
+
+ // Not guarded in a canDefineProperty check: IE8 supports defineProperty only
+ // on DOM elements
+ Object.defineProperty(activeElement, 'value', newValueProp);
+ if (activeElement.attachEvent) {
+   activeElement.attachEvent('onpropertychange', handlePropertyChange);
+ } else {
+   activeElement.addEventListener('propertychange', handlePropertyChange, false);
+ }
+}
+
+/**
+* (For IE <=11) Removes the event listeners from the currently-tracked element,
+* if any exists.
+*/
+function stopWatchingForValueChange() {
+ if (!activeElement) {
+   return;
+ }
+
+ // delete restores the original property definition
+ delete activeElement.value;
+
+ if (activeElement.detachEvent) {
+   activeElement.detachEvent('onpropertychange', handlePropertyChange);
+ } else {
+   activeElement.removeEventListener('propertychange', handlePropertyChange, false);
+ }
+
+ activeElement = null;
+ activeElementInst = null;
+ activeElementValue = null;
+ activeElementValueProp = null;
+}
+
+/**
+* (For IE <=11) Handles a propertychange event, sending a `change` event if
+* the value of the active element has changed.
+*/
+function handlePropertyChange(nativeEvent) {
+ if (nativeEvent.propertyName !== 'value') {
+   return;
+ }
+ var value = nativeEvent.srcElement.value;
+ if (value === activeElementValue) {
+   return;
+ }
+ activeElementValue = value;
+
+ manualDispatchChangeEvent(nativeEvent);
+}
+
+/**
+* If a `change` event should be fired, returns the target's ID.
+*/
+function getTargetInstForInputEvent(topLevelType, targetInst) {
+ if (topLevelType === 'topInput') {
+   // In modern browsers (i.e., not IE8 or IE9), the input event is exactly
+   // what we want so fall through here and trigger an abstract event
+   return targetInst;
+ }
+}
+
+function handleEventsForInputEventIE(topLevelType, target, targetInst) {
+ if (topLevelType === 'topFocus') {
+   // In IE8, we can capture almost all .value changes by adding a
+   // propertychange handler and looking for events with propertyName
+   // equal to 'value'
+   // In IE9-11, propertychange fires for most input events but is buggy and
+   // doesn't fire when text is deleted, but conveniently, selectionchange
+   // appears to fire in all of the remaining cases so we catch those and
+   // forward the event if the value has changed
+   // In either case, we don't want to call the event handler if the value
+   // is changed from JS so we redefine a setter for `.value` that updates
+   // our activeElementValue variable, allowing us to ignore those changes
+   //
+   // stopWatching() should be a noop here but we call it just in case we
+   // missed a blur event somehow.
+   stopWatchingForValueChange();
+   startWatchingForValueChange(target, targetInst);
+ } else if (topLevelType === 'topBlur') {
+   stopWatchingForValueChange();
+ }
+}
+
+// For IE8 and IE9.
+function getTargetInstForInputEventIE(topLevelType, targetInst) {
+ if (topLevelType === 'topSelectionChange' || topLevelType === 'topKeyUp' || topLevelType === 'topKeyDown') {
+   // On the selectionchange event, the target is just document which isn't
+   // helpful for us so just check activeElement instead.
+   //
+   // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
+   // propertychange on the first input event after setting `value` from a
+   // script and fires only keydown, keypress, keyup. Catching keyup usually
+   // gets it and catching keydown lets us fire an event for the first
+   // keystroke if user does a key repeat (it'll be a little delayed: right
+   // before the second keystroke). Other input methods (e.g., paste) seem to
+   // fire selectionchange normally.
+   if (activeElement && activeElement.value !== activeElementValue) {
+     activeElementValue = activeElement.value;
+     return activeElementInst;
+   }
+ }
+}
+
+/**
+* SECTION: handle `click` event
+*/
+function shouldUseClickEvent(elem) {
+ // Use the `click` event to detect changes to checkbox and radio inputs.
+ // This approach works across all browsers, whereas `change` does not fire
+ // until `blur` in IE8.
+ return elem.nodeName && elem.nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio');
+}
+
+function getTargetInstForClickEvent(topLevelType, targetInst) {
+ if (topLevelType === 'topClick') {
+   return targetInst;
+ }
+}
+
+/**
+* This plugin creates an `onChange` event that normalizes change events
+* across form elements. This event fires at a time when it's possible to
+* change the element's value without seeing a flicker.
+*
+* Supported elements are:
+* - input (see `isTextInputElement`)
+* - textarea
+* - select
+*/
+var ChangeEventPlugin = {
+
+ eventTypes: eventTypes,
+
+ extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+   var targetNode = targetInst ? ReactDOMComponentTree.getNodeFromInstance(targetInst) : window;
+
+   var getTargetInstFunc, handleEventFunc;
+   if (shouldUseChangeEvent(targetNode)) {
+     if (doesChangeEventBubble) {
+       getTargetInstFunc = getTargetInstForChangeEvent;
+     } else {
+       handleEventFunc = handleEventsForChangeEventIE8;
+     }
+   } else if (isTextInputElement(targetNode)) {
+     if (isInputEventSupported) {
+       getTargetInstFunc = getTargetInstForInputEvent;
+     } else {
+       getTargetInstFunc = getTargetInstForInputEventIE;
+       handleEventFunc = handleEventsForInputEventIE;
+     }
+   } else if (shouldUseClickEvent(targetNode)) {
+     getTargetInstFunc = getTargetInstForClickEvent;
+   }
+
+   if (getTargetInstFunc) {
+     var inst = getTargetInstFunc(topLevelType, targetInst);
+     if (inst) {
+       var event = SyntheticEvent.getPooled(eventTypes.change, inst, nativeEvent, nativeEventTarget);
+       event.type = 'change';
+       EventPropagators.accumulateTwoPhaseDispatches(event);
+       return event;
+     }
+   }
+
+   if (handleEventFunc) {
+     handleEventFunc(topLevelType, targetNode, targetInst);
+   }
+ }
+
+};
+
+module.exports = ChangeEventPlugin;
+},{"114":114,"122":122,"123":123,"136":136,"17":17,"20":20,"34":34,"82":82,"91":91}],8:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMLazyTree = _dereq_(9);
+var Danger = _dereq_(13);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactInstrumentation = _dereq_(64);
+
+var createMicrosoftUnsafeLocalFunction = _dereq_(105);
+var setInnerHTML = _dereq_(127);
+var setTextContent = _dereq_(128);
+
+function getNodeAfter(parentNode, node) {
+ // Special case for text components, which return [open, close] comments
+ // from getHostNode.
+ if (Array.isArray(node)) {
+   node = node[1];
+ }
+ return node ? node.nextSibling : parentNode.firstChild;
+}
+
+/**
+* Inserts `childNode` as a child of `parentNode` at the `index`.
+*
+* @param {DOMElement} parentNode Parent node in which to insert.
+* @param {DOMElement} childNode Child node to insert.
+* @param {number} index Index at which to insert the child.
+* @internal
+*/
+var insertChildAt = createMicrosoftUnsafeLocalFunction(function (parentNode, childNode, referenceNode) {
+ // We rely exclusively on `insertBefore(node, null)` instead of also using
+ // `appendChild(node)`. (Using `undefined` is not allowed by all browsers so
+ // we are careful to use `null`.)
+ parentNode.insertBefore(childNode, referenceNode);
+});
+
+function insertLazyTreeChildAt(parentNode, childTree, referenceNode) {
+ DOMLazyTree.insertTreeBefore(parentNode, childTree, referenceNode);
+}
+
+function moveChild(parentNode, childNode, referenceNode) {
+ if (Array.isArray(childNode)) {
+   moveDelimitedText(parentNode, childNode[0], childNode[1], referenceNode);
+ } else {
+   insertChildAt(parentNode, childNode, referenceNode);
+ }
+}
+
+function removeChild(parentNode, childNode) {
+ if (Array.isArray(childNode)) {
+   var closingComment = childNode[1];
+   childNode = childNode[0];
+   removeDelimitedText(parentNode, childNode, closingComment);
+   parentNode.removeChild(closingComment);
+ }
+ parentNode.removeChild(childNode);
+}
+
+function moveDelimitedText(parentNode, openingComment, closingComment, referenceNode) {
+ var node = openingComment;
+ while (true) {
+   var nextNode = node.nextSibling;
+   insertChildAt(parentNode, node, referenceNode);
+   if (node === closingComment) {
+     break;
+   }
+   node = nextNode;
+ }
+}
+
+function removeDelimitedText(parentNode, startNode, closingComment) {
+ while (true) {
+   var node = startNode.nextSibling;
+   if (node === closingComment) {
+     // The closing comment is removed by ReactMultiChild.
+     break;
+   } else {
+     parentNode.removeChild(node);
+   }
+ }
+}
+
+function replaceDelimitedText(openingComment, closingComment, stringText) {
+ var parentNode = openingComment.parentNode;
+ var nodeAfterComment = openingComment.nextSibling;
+ if (nodeAfterComment === closingComment) {
+   // There are no text nodes between the opening and closing comments; insert
+   // a new one if stringText isn't empty.
+   if (stringText) {
+     insertChildAt(parentNode, document.createTextNode(stringText), nodeAfterComment);
+   }
+ } else {
+   if (stringText) {
+     // Set the text content of the first node after the opening comment, and
+     // remove all following nodes up until the closing comment.
+     setTextContent(nodeAfterComment, stringText);
+     removeDelimitedText(parentNode, nodeAfterComment, closingComment);
+   } else {
+     removeDelimitedText(parentNode, openingComment, closingComment);
+   }
+ }
+
+ if ("development" !== 'production') {
+   ReactInstrumentation.debugTool.onHostOperation({
+     instanceID: ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID,
+     type: 'replace text',
+     payload: stringText
+   });
+ }
+}
+
+var dangerouslyReplaceNodeWithMarkup = Danger.dangerouslyReplaceNodeWithMarkup;
+if ("development" !== 'production') {
+ dangerouslyReplaceNodeWithMarkup = function (oldChild, markup, prevInstance) {
+   Danger.dangerouslyReplaceNodeWithMarkup(oldChild, markup);
+   if (prevInstance._debugID !== 0) {
+     ReactInstrumentation.debugTool.onHostOperation({
+       instanceID: prevInstance._debugID,
+       type: 'replace with',
+       payload: markup.toString()
+     });
+   } else {
+     var nextInstance = ReactDOMComponentTree.getInstanceFromNode(markup.node);
+     if (nextInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onHostOperation({
+         instanceID: nextInstance._debugID,
+         type: 'mount',
+         payload: markup.toString()
+       });
+     }
+   }
+ };
+}
+
+/**
+* Operations for updating with DOM children.
+*/
+var DOMChildrenOperations = {
+
+ dangerouslyReplaceNodeWithMarkup: dangerouslyReplaceNodeWithMarkup,
+
+ replaceDelimitedText: replaceDelimitedText,
+
+ /**
+  * Updates a component's children by processing a series of updates. The
+  * update configurations are each expected to have a `parentNode` property.
+  *
+  * @param {array<object>} updates List of update configurations.
+  * @internal
+  */
+ processUpdates: function (parentNode, updates) {
+   if ("development" !== 'production') {
+     var parentNodeDebugID = ReactDOMComponentTree.getInstanceFromNode(parentNode)._debugID;
+   }
+
+   for (var k = 0; k < updates.length; k++) {
+     var update = updates[k];
+     switch (update.type) {
+       case 'INSERT_MARKUP':
+         insertLazyTreeChildAt(parentNode, update.content, getNodeAfter(parentNode, update.afterNode));
+         if ("development" !== 'production') {
+           ReactInstrumentation.debugTool.onHostOperation({
+             instanceID: parentNodeDebugID,
+             type: 'insert child',
+             payload: { toIndex: update.toIndex, content: update.content.toString() }
+           });
+         }
+         break;
+       case 'MOVE_EXISTING':
+         moveChild(parentNode, update.fromNode, getNodeAfter(parentNode, update.afterNode));
+         if ("development" !== 'production') {
+           ReactInstrumentation.debugTool.onHostOperation({
+             instanceID: parentNodeDebugID,
+             type: 'move child',
+             payload: { fromIndex: update.fromIndex, toIndex: update.toIndex }
+           });
+         }
+         break;
+       case 'SET_MARKUP':
+         setInnerHTML(parentNode, update.content);
+         if ("development" !== 'production') {
+           ReactInstrumentation.debugTool.onHostOperation({
+             instanceID: parentNodeDebugID,
+             type: 'replace children',
+             payload: update.content.toString()
+           });
+         }
+         break;
+       case 'TEXT_CONTENT':
+         setTextContent(parentNode, update.content);
+         if ("development" !== 'production') {
+           ReactInstrumentation.debugTool.onHostOperation({
+             instanceID: parentNodeDebugID,
+             type: 'replace text',
+             payload: update.content.toString()
+           });
+         }
+         break;
+       case 'REMOVE_NODE':
+         removeChild(parentNode, update.fromNode);
+         if ("development" !== 'production') {
+           ReactInstrumentation.debugTool.onHostOperation({
+             instanceID: parentNodeDebugID,
+             type: 'remove child',
+             payload: { fromIndex: update.fromIndex }
+           });
+         }
+         break;
+     }
+   }
+ }
+
+};
+
+module.exports = DOMChildrenOperations;
+},{"105":105,"127":127,"128":128,"13":13,"34":34,"64":64,"9":9}],9:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMNamespaces = _dereq_(10);
+var setInnerHTML = _dereq_(127);
+
+var createMicrosoftUnsafeLocalFunction = _dereq_(105);
+var setTextContent = _dereq_(128);
+
+var ELEMENT_NODE_TYPE = 1;
+var DOCUMENT_FRAGMENT_NODE_TYPE = 11;
+
+/**
+* In IE (8-11) and Edge, appending nodes with no children is dramatically
+* faster than appending a full subtree, so we essentially queue up the
+* .appendChild calls here and apply them so each node is added to its parent
+* before any children are added.
+*
+* In other browsers, doing so is slower or neutral compared to the other order
+* (in Firefox, twice as slow) so we only do this inversion in IE.
+*
+* See https://github.com/spicyj/innerhtml-vs-createelement-vs-clonenode.
+*/
+var enableLazy = typeof document !== 'undefined' && typeof document.documentMode === 'number' || typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string' && /\bEdge\/\d/.test(navigator.userAgent);
+
+function insertTreeChildren(tree) {
+ if (!enableLazy) {
+   return;
+ }
+ var node = tree.node;
+ var children = tree.children;
+ if (children.length) {
+   for (var i = 0; i < children.length; i++) {
+     insertTreeBefore(node, children[i], null);
+   }
+ } else if (tree.html != null) {
+   setInnerHTML(node, tree.html);
+ } else if (tree.text != null) {
+   setTextContent(node, tree.text);
+ }
+}
+
+var insertTreeBefore = createMicrosoftUnsafeLocalFunction(function (parentNode, tree, referenceNode) {
+ // DocumentFragments aren't actually part of the DOM after insertion so
+ // appending children won't update the DOM. We need to ensure the fragment
+ // is properly populated first, breaking out of our lazy approach for just
+ // this level. Also, some <object> plugins (like Flash Player) will read
+ // <param> nodes immediately upon insertion into the DOM, so <object>
+ // must also be populated prior to insertion into the DOM.
+ if (tree.node.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE || tree.node.nodeType === ELEMENT_NODE_TYPE && tree.node.nodeName.toLowerCase() === 'object' && (tree.node.namespaceURI == null || tree.node.namespaceURI === DOMNamespaces.html)) {
+   insertTreeChildren(tree);
+   parentNode.insertBefore(tree.node, referenceNode);
+ } else {
+   parentNode.insertBefore(tree.node, referenceNode);
+   insertTreeChildren(tree);
+ }
+});
+
+function replaceChildWithTree(oldNode, newTree) {
+ oldNode.parentNode.replaceChild(newTree.node, oldNode);
+ insertTreeChildren(newTree);
+}
+
+function queueChild(parentTree, childTree) {
+ if (enableLazy) {
+   parentTree.children.push(childTree);
+ } else {
+   parentTree.node.appendChild(childTree.node);
+ }
+}
+
+function queueHTML(tree, html) {
+ if (enableLazy) {
+   tree.html = html;
+ } else {
+   setInnerHTML(tree.node, html);
+ }
+}
+
+function queueText(tree, text) {
+ if (enableLazy) {
+   tree.text = text;
+ } else {
+   setTextContent(tree.node, text);
+ }
+}
+
+function toString() {
+ return this.node.nodeName;
+}
+
+function DOMLazyTree(node) {
+ return {
+   node: node,
+   children: [],
+   html: null,
+   text: null,
+   toString: toString
+ };
+}
+
+DOMLazyTree.insertTreeBefore = insertTreeBefore;
+DOMLazyTree.replaceChildWithTree = replaceChildWithTree;
+DOMLazyTree.queueChild = queueChild;
+DOMLazyTree.queueHTML = queueHTML;
+DOMLazyTree.queueText = queueText;
+
+module.exports = DOMLazyTree;
+},{"10":10,"105":105,"127":127,"128":128}],10:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMNamespaces = {
+ html: 'http://www.w3.org/1999/xhtml',
+ mathml: 'http://www.w3.org/1998/Math/MathML',
+ svg: 'http://www.w3.org/2000/svg'
+};
+
+module.exports = DOMNamespaces;
+},{}],11:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+function checkMask(value, bitmask) {
+ return (value & bitmask) === bitmask;
+}
+
+var DOMPropertyInjection = {
+ /**
+  * Mapping from normalized, camelcased property names to a configuration that
+  * specifies how the associated DOM property should be accessed or rendered.
+  */
+ MUST_USE_PROPERTY: 0x1,
+ HAS_BOOLEAN_VALUE: 0x4,
+ HAS_NUMERIC_VALUE: 0x8,
+ HAS_POSITIVE_NUMERIC_VALUE: 0x10 | 0x8,
+ HAS_OVERLOADED_BOOLEAN_VALUE: 0x20,
+
+ /**
+  * Inject some specialized knowledge about the DOM. This takes a config object
+  * with the following properties:
+  *
+  * isCustomAttribute: function that given an attribute name will return true
+  * if it can be inserted into the DOM verbatim. Useful for data-* or aria-*
+  * attributes where it's impossible to enumerate all of the possible
+  * attribute names,
+  *
+  * Properties: object mapping DOM property name to one of the
+  * DOMPropertyInjection constants or null. If your attribute isn't in here,
+  * it won't get written to the DOM.
+  *
+  * DOMAttributeNames: object mapping React attribute name to the DOM
+  * attribute name. Attribute names not specified use the **lowercase**
+  * normalized name.
+  *
+  * DOMAttributeNamespaces: object mapping React attribute name to the DOM
+  * attribute namespace URL. (Attribute names not specified use no namespace.)
+  *
+  * DOMPropertyNames: similar to DOMAttributeNames but for DOM properties.
+  * Property names not specified use the normalized name.
+  *
+  * DOMMutationMethods: Properties that require special mutation methods. If
+  * `value` is undefined, the mutation method should unset the property.
+  *
+  * @param {object} domPropertyConfig the config as described above.
+  */
+ injectDOMPropertyConfig: function (domPropertyConfig) {
+   var Injection = DOMPropertyInjection;
+   var Properties = domPropertyConfig.Properties || {};
+   var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {};
+   var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
+   var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {};
+   var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {};
+
+   if (domPropertyConfig.isCustomAttribute) {
+     DOMProperty._isCustomAttributeFunctions.push(domPropertyConfig.isCustomAttribute);
+   }
+
+   for (var propName in Properties) {
+     !!DOMProperty.properties.hasOwnProperty(propName) ? "development" !== 'production' ? invariant(false, 'injectDOMPropertyConfig(...): You\'re trying to inject DOM property \'%s\' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.', propName) : _prodInvariant('48', propName) : void 0;
+
+     var lowerCased = propName.toLowerCase();
+     var propConfig = Properties[propName];
+
+     var propertyInfo = {
+       attributeName: lowerCased,
+       attributeNamespace: null,
+       propertyName: propName,
+       mutationMethod: null,
+
+       mustUseProperty: checkMask(propConfig, Injection.MUST_USE_PROPERTY),
+       hasBooleanValue: checkMask(propConfig, Injection.HAS_BOOLEAN_VALUE),
+       hasNumericValue: checkMask(propConfig, Injection.HAS_NUMERIC_VALUE),
+       hasPositiveNumericValue: checkMask(propConfig, Injection.HAS_POSITIVE_NUMERIC_VALUE),
+       hasOverloadedBooleanValue: checkMask(propConfig, Injection.HAS_OVERLOADED_BOOLEAN_VALUE)
+     };
+     !(propertyInfo.hasBooleanValue + propertyInfo.hasNumericValue + propertyInfo.hasOverloadedBooleanValue <= 1) ? "development" !== 'production' ? invariant(false, 'DOMProperty: Value can be one of boolean, overloaded boolean, or numeric value, but not a combination: %s', propName) : _prodInvariant('50', propName) : void 0;
+
+     if ("development" !== 'production') {
+       DOMProperty.getPossibleStandardName[lowerCased] = propName;
+     }
+
+     if (DOMAttributeNames.hasOwnProperty(propName)) {
+       var attributeName = DOMAttributeNames[propName];
+       propertyInfo.attributeName = attributeName;
+       if ("development" !== 'production') {
+         DOMProperty.getPossibleStandardName[attributeName] = propName;
+       }
+     }
+
+     if (DOMAttributeNamespaces.hasOwnProperty(propName)) {
+       propertyInfo.attributeNamespace = DOMAttributeNamespaces[propName];
+     }
+
+     if (DOMPropertyNames.hasOwnProperty(propName)) {
+       propertyInfo.propertyName = DOMPropertyNames[propName];
+     }
+
+     if (DOMMutationMethods.hasOwnProperty(propName)) {
+       propertyInfo.mutationMethod = DOMMutationMethods[propName];
+     }
+
+     DOMProperty.properties[propName] = propertyInfo;
+   }
+ }
+};
+
+/* eslint-disable max-len */
+var ATTRIBUTE_NAME_START_CHAR = ':A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD';
+/* eslint-enable max-len */
+
+/**
+* DOMProperty exports lookup objects that can be used like functions:
+*
+*   > DOMProperty.isValid['id']
+*   true
+*   > DOMProperty.isValid['foobar']
+*   undefined
+*
+* Although this may be confusing, it performs better in general.
+*
+* @see http://jsperf.com/key-exists
+* @see http://jsperf.com/key-missing
+*/
+var DOMProperty = {
+
+ ID_ATTRIBUTE_NAME: 'data-reactid',
+ ROOT_ATTRIBUTE_NAME: 'data-reactroot',
+
+ ATTRIBUTE_NAME_START_CHAR: ATTRIBUTE_NAME_START_CHAR,
+ ATTRIBUTE_NAME_CHAR: ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040',
+
+ /**
+  * Map from property "standard name" to an object with info about how to set
+  * the property in the DOM. Each object contains:
+  *
+  * attributeName:
+  *   Used when rendering markup or with `*Attribute()`.
+  * attributeNamespace
+  * propertyName:
+  *   Used on DOM node instances. (This includes properties that mutate due to
+  *   external factors.)
+  * mutationMethod:
+  *   If non-null, used instead of the property or `setAttribute()` after
+  *   initial render.
+  * mustUseProperty:
+  *   Whether the property must be accessed and mutated as an object property.
+  * hasBooleanValue:
+  *   Whether the property should be removed when set to a falsey value.
+  * hasNumericValue:
+  *   Whether the property must be numeric or parse as a numeric and should be
+  *   removed when set to a falsey value.
+  * hasPositiveNumericValue:
+  *   Whether the property must be positive numeric or parse as a positive
+  *   numeric and should be removed when set to a falsey value.
+  * hasOverloadedBooleanValue:
+  *   Whether the property can be used as a flag as well as with a value.
+  *   Removed when strictly equal to false; present without a value when
+  *   strictly equal to true; present with a value otherwise.
+  */
+ properties: {},
+
+ /**
+  * Mapping from lowercase property names to the properly cased version, used
+  * to warn in the case of missing properties. Available only in __DEV__.
+  *
+  * autofocus is predefined, because adding it to the property whitelist
+  * causes unintended side effects.
+  *
+  * @type {Object}
+  */
+ getPossibleStandardName: "development" !== 'production' ? { autofocus: 'autoFocus' } : null,
+
+ /**
+  * All of the isCustomAttribute() functions that have been injected.
+  */
+ _isCustomAttributeFunctions: [],
+
+ /**
+  * Checks whether a property name is a custom attribute.
+  * @method
+  */
+ isCustomAttribute: function (attributeName) {
+   for (var i = 0; i < DOMProperty._isCustomAttributeFunctions.length; i++) {
+     var isCustomAttributeFn = DOMProperty._isCustomAttributeFunctions[i];
+     if (isCustomAttributeFn(attributeName)) {
+       return true;
+     }
+   }
+   return false;
+ },
+
+ injection: DOMPropertyInjection
+};
+
+module.exports = DOMProperty;
+},{"125":125,"150":150}],12:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMProperty = _dereq_(11);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactInstrumentation = _dereq_(64);
+
+var quoteAttributeValueForBrowser = _dereq_(124);
+var warning = _dereq_(157);
+
+var VALID_ATTRIBUTE_NAME_REGEX = new RegExp('^[' + DOMProperty.ATTRIBUTE_NAME_START_CHAR + '][' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$');
+var illegalAttributeNameCache = {};
+var validatedAttributeNameCache = {};
+
+function isAttributeNameSafe(attributeName) {
+ if (validatedAttributeNameCache.hasOwnProperty(attributeName)) {
+   return true;
+ }
+ if (illegalAttributeNameCache.hasOwnProperty(attributeName)) {
+   return false;
+ }
+ if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {
+   validatedAttributeNameCache[attributeName] = true;
+   return true;
+ }
+ illegalAttributeNameCache[attributeName] = true;
+ "development" !== 'production' ? warning(false, 'Invalid attribute name: `%s`', attributeName) : void 0;
+ return false;
+}
+
+function shouldIgnoreValue(propertyInfo, value) {
+ return value == null || propertyInfo.hasBooleanValue && !value || propertyInfo.hasNumericValue && isNaN(value) || propertyInfo.hasPositiveNumericValue && value < 1 || propertyInfo.hasOverloadedBooleanValue && value === false;
+}
+
+/**
+* Operations for dealing with DOM properties.
+*/
+var DOMPropertyOperations = {
+
+ /**
+  * Creates markup for the ID property.
+  *
+  * @param {string} id Unescaped ID.
+  * @return {string} Markup string.
+  */
+ createMarkupForID: function (id) {
+   return DOMProperty.ID_ATTRIBUTE_NAME + '=' + quoteAttributeValueForBrowser(id);
+ },
+
+ setAttributeForID: function (node, id) {
+   node.setAttribute(DOMProperty.ID_ATTRIBUTE_NAME, id);
+ },
+
+ createMarkupForRoot: function () {
+   return DOMProperty.ROOT_ATTRIBUTE_NAME + '=""';
+ },
+
+ setAttributeForRoot: function (node) {
+   node.setAttribute(DOMProperty.ROOT_ATTRIBUTE_NAME, '');
+ },
+
+ /**
+  * Creates markup for a property.
+  *
+  * @param {string} name
+  * @param {*} value
+  * @return {?string} Markup string, or null if the property was invalid.
+  */
+ createMarkupForProperty: function (name, value) {
+   var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null;
+   if (propertyInfo) {
+     if (shouldIgnoreValue(propertyInfo, value)) {
+       return '';
+     }
+     var attributeName = propertyInfo.attributeName;
+     if (propertyInfo.hasBooleanValue || propertyInfo.hasOverloadedBooleanValue && value === true) {
+       return attributeName + '=""';
+     }
+     return attributeName + '=' + quoteAttributeValueForBrowser(value);
+   } else if (DOMProperty.isCustomAttribute(name)) {
+     if (value == null) {
+       return '';
+     }
+     return name + '=' + quoteAttributeValueForBrowser(value);
+   }
+   return null;
+ },
+
+ /**
+  * Creates markup for a custom property.
+  *
+  * @param {string} name
+  * @param {*} value
+  * @return {string} Markup string, or empty string if the property was invalid.
+  */
+ createMarkupForCustomAttribute: function (name, value) {
+   if (!isAttributeNameSafe(name) || value == null) {
+     return '';
+   }
+   return name + '=' + quoteAttributeValueForBrowser(value);
+ },
+
+ /**
+  * Sets the value for a property on a node.
+  *
+  * @param {DOMElement} node
+  * @param {string} name
+  * @param {*} value
+  */
+ setValueForProperty: function (node, name, value) {
+   var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null;
+   if (propertyInfo) {
+     var mutationMethod = propertyInfo.mutationMethod;
+     if (mutationMethod) {
+       mutationMethod(node, value);
+     } else if (shouldIgnoreValue(propertyInfo, value)) {
+       this.deleteValueForProperty(node, name);
+       return;
+     } else if (propertyInfo.mustUseProperty) {
+       // Contrary to `setAttribute`, object properties are properly
+       // `toString`ed by IE8/9.
+       node[propertyInfo.propertyName] = value;
+     } else {
+       var attributeName = propertyInfo.attributeName;
+       var namespace = propertyInfo.attributeNamespace;
+       // `setAttribute` with objects becomes only `[object]` in IE8/9,
+       // ('' + value) makes it output the correct toString()-value.
+       if (namespace) {
+         node.setAttributeNS(namespace, attributeName, '' + value);
+       } else if (propertyInfo.hasBooleanValue || propertyInfo.hasOverloadedBooleanValue && value === true) {
+         node.setAttribute(attributeName, '');
+       } else {
+         node.setAttribute(attributeName, '' + value);
+       }
+     }
+   } else if (DOMProperty.isCustomAttribute(name)) {
+     DOMPropertyOperations.setValueForAttribute(node, name, value);
+     return;
+   }
+
+   if ("development" !== 'production') {
+     var payload = {};
+     payload[name] = value;
+     ReactInstrumentation.debugTool.onHostOperation({
+       instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
+       type: 'update attribute',
+       payload: payload
+     });
+   }
+ },
+
+ setValueForAttribute: function (node, name, value) {
+   if (!isAttributeNameSafe(name)) {
+     return;
+   }
+   if (value == null) {
+     node.removeAttribute(name);
+   } else {
+     node.setAttribute(name, '' + value);
+   }
+
+   if ("development" !== 'production') {
+     var payload = {};
+     payload[name] = value;
+     ReactInstrumentation.debugTool.onHostOperation({
+       instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
+       type: 'update attribute',
+       payload: payload
+     });
+   }
+ },
+
+ /**
+  * Deletes an attributes from a node.
+  *
+  * @param {DOMElement} node
+  * @param {string} name
+  */
+ deleteValueForAttribute: function (node, name) {
+   node.removeAttribute(name);
+   if ("development" !== 'production') {
+     ReactInstrumentation.debugTool.onHostOperation({
+       instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
+       type: 'remove attribute',
+       payload: name
+     });
+   }
+ },
+
+ /**
+  * Deletes the value for a property on a node.
+  *
+  * @param {DOMElement} node
+  * @param {string} name
+  */
+ deleteValueForProperty: function (node, name) {
+   var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null;
+   if (propertyInfo) {
+     var mutationMethod = propertyInfo.mutationMethod;
+     if (mutationMethod) {
+       mutationMethod(node, undefined);
+     } else if (propertyInfo.mustUseProperty) {
+       var propName = propertyInfo.propertyName;
+       if (propertyInfo.hasBooleanValue) {
+         node[propName] = false;
+       } else {
+         node[propName] = '';
+       }
+     } else {
+       node.removeAttribute(propertyInfo.attributeName);
+     }
+   } else if (DOMProperty.isCustomAttribute(name)) {
+     node.removeAttribute(name);
+   }
+
+   if ("development" !== 'production') {
+     ReactInstrumentation.debugTool.onHostOperation({
+       instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
+       type: 'remove attribute',
+       payload: name
+     });
+   }
+ }
+
+};
+
+module.exports = DOMPropertyOperations;
+},{"11":11,"124":124,"157":157,"34":34,"64":64}],13:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var DOMLazyTree = _dereq_(9);
+var ExecutionEnvironment = _dereq_(136);
+
+var createNodesFromMarkup = _dereq_(141);
+var emptyFunction = _dereq_(142);
+var invariant = _dereq_(150);
+
+var Danger = {
+
+ /**
+  * Replaces a node with a string of markup at its current position within its
+  * parent. The markup must render into a single root node.
+  *
+  * @param {DOMElement} oldChild Child node to replace.
+  * @param {string} markup Markup to render in place of the child node.
+  * @internal
+  */
+ dangerouslyReplaceNodeWithMarkup: function (oldChild, markup) {
+   !ExecutionEnvironment.canUseDOM ? "development" !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.') : _prodInvariant('56') : void 0;
+   !markup ? "development" !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Missing markup.') : _prodInvariant('57') : void 0;
+   !(oldChild.nodeName !== 'HTML') ? "development" !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the <html> node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString().') : _prodInvariant('58') : void 0;
+
+   if (typeof markup === 'string') {
+     var newChild = createNodesFromMarkup(markup, emptyFunction)[0];
+     oldChild.parentNode.replaceChild(newChild, oldChild);
+   } else {
+     DOMLazyTree.replaceChildWithTree(oldChild, markup);
+   }
+ }
+
+};
+
+module.exports = Danger;
+},{"125":125,"136":136,"141":141,"142":142,"150":150,"9":9}],14:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Module that is injectable into `EventPluginHub`, that specifies a
+* deterministic ordering of `EventPlugin`s. A convenient way to reason about
+* plugins, without having to package every one of them. This is better than
+* having plugins be ordered in the same order that they are injected because
+* that ordering would be influenced by the packaging order.
+* `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that
+* preventing default on events is convenient in `SimpleEventPlugin` handlers.
+*/
+
+var DefaultEventPluginOrder = ['ResponderEventPlugin', 'SimpleEventPlugin', 'TapEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', 'SelectEventPlugin', 'BeforeInputEventPlugin'];
+
+module.exports = DefaultEventPluginOrder;
+},{}],15:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var EventPropagators = _dereq_(20);
+var ReactDOMComponentTree = _dereq_(34);
+var SyntheticMouseEvent = _dereq_(95);
+
+var eventTypes = {
+ mouseEnter: {
+   registrationName: 'onMouseEnter',
+   dependencies: ['topMouseOut', 'topMouseOver']
+ },
+ mouseLeave: {
+   registrationName: 'onMouseLeave',
+   dependencies: ['topMouseOut', 'topMouseOver']
+ }
+};
+
+var EnterLeaveEventPlugin = {
+
+ eventTypes: eventTypes,
+
+ /**
+  * For almost every interaction we care about, there will be both a top-level
+  * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
+  * we do not extract duplicate events. However, moving the mouse into the
+  * browser from outside will not fire a `mouseout` event. In this case, we use
+  * the `mouseover` top-level event.
+  */
+ extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+   if (topLevelType === 'topMouseOver' && (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
+     return null;
+   }
+   if (topLevelType !== 'topMouseOut' && topLevelType !== 'topMouseOver') {
+     // Must not be a mouse in or mouse out - ignoring.
+     return null;
+   }
+
+   var win;
+   if (nativeEventTarget.window === nativeEventTarget) {
+     // `nativeEventTarget` is probably a window object.
+     win = nativeEventTarget;
+   } else {
+     // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
+     var doc = nativeEventTarget.ownerDocument;
+     if (doc) {
+       win = doc.defaultView || doc.parentWindow;
+     } else {
+       win = window;
+     }
+   }
+
+   var from;
+   var to;
+   if (topLevelType === 'topMouseOut') {
+     from = targetInst;
+     var related = nativeEvent.relatedTarget || nativeEvent.toElement;
+     to = related ? ReactDOMComponentTree.getClosestInstanceFromNode(related) : null;
+   } else {
+     // Moving to a node from outside the window.
+     from = null;
+     to = targetInst;
+   }
+
+   if (from === to) {
+     // Nothing pertains to our managed components.
+     return null;
+   }
+
+   var fromNode = from == null ? win : ReactDOMComponentTree.getNodeFromInstance(from);
+   var toNode = to == null ? win : ReactDOMComponentTree.getNodeFromInstance(to);
+
+   var leave = SyntheticMouseEvent.getPooled(eventTypes.mouseLeave, from, nativeEvent, nativeEventTarget);
+   leave.type = 'mouseleave';
+   leave.target = fromNode;
+   leave.relatedTarget = toNode;
+
+   var enter = SyntheticMouseEvent.getPooled(eventTypes.mouseEnter, to, nativeEvent, nativeEventTarget);
+   enter.type = 'mouseenter';
+   enter.target = toNode;
+   enter.relatedTarget = fromNode;
+
+   EventPropagators.accumulateEnterLeaveDispatches(leave, enter, from, to);
+
+   return [leave, enter];
+ }
+
+};
+
+module.exports = EnterLeaveEventPlugin;
+},{"20":20,"34":34,"95":95}],16:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Types of raw signals from the browser caught at the top level.
+*/
+var topLevelTypes = {
+ topAbort: null,
+ topAnimationEnd: null,
+ topAnimationIteration: null,
+ topAnimationStart: null,
+ topBlur: null,
+ topCanPlay: null,
+ topCanPlayThrough: null,
+ topChange: null,
+ topClick: null,
+ topCompositionEnd: null,
+ topCompositionStart: null,
+ topCompositionUpdate: null,
+ topContextMenu: null,
+ topCopy: null,
+ topCut: null,
+ topDoubleClick: null,
+ topDrag: null,
+ topDragEnd: null,
+ topDragEnter: null,
+ topDragExit: null,
+ topDragLeave: null,
+ topDragOver: null,
+ topDragStart: null,
+ topDrop: null,
+ topDurationChange: null,
+ topEmptied: null,
+ topEncrypted: null,
+ topEnded: null,
+ topError: null,
+ topFocus: null,
+ topInput: null,
+ topInvalid: null,
+ topKeyDown: null,
+ topKeyPress: null,
+ topKeyUp: null,
+ topLoad: null,
+ topLoadedData: null,
+ topLoadedMetadata: null,
+ topLoadStart: null,
+ topMouseDown: null,
+ topMouseMove: null,
+ topMouseOut: null,
+ topMouseOver: null,
+ topMouseUp: null,
+ topPaste: null,
+ topPause: null,
+ topPlay: null,
+ topPlaying: null,
+ topProgress: null,
+ topRateChange: null,
+ topReset: null,
+ topScroll: null,
+ topSeeked: null,
+ topSeeking: null,
+ topSelectionChange: null,
+ topStalled: null,
+ topSubmit: null,
+ topSuspend: null,
+ topTextInput: null,
+ topTimeUpdate: null,
+ topTouchCancel: null,
+ topTouchEnd: null,
+ topTouchMove: null,
+ topTouchStart: null,
+ topTransitionEnd: null,
+ topVolumeChange: null,
+ topWaiting: null,
+ topWheel: null
+};
+
+var EventConstants = {
+ topLevelTypes: topLevelTypes
+};
+
+module.exports = EventConstants;
+},{}],17:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var EventPluginRegistry = _dereq_(18);
+var EventPluginUtils = _dereq_(19);
+var ReactErrorUtils = _dereq_(55);
+
+var accumulateInto = _dereq_(102);
+var forEachAccumulated = _dereq_(110);
+var invariant = _dereq_(150);
+
+/**
+* Internal store for event listeners
+*/
+var listenerBank = {};
+
+/**
+* Internal queue of events that have accumulated their dispatches and are
+* waiting to have their dispatches executed.
+*/
+var eventQueue = null;
+
+/**
+* Dispatches an event and releases it back into the pool, unless persistent.
+*
+* @param {?object} event Synthetic event to be dispatched.
+* @param {boolean} simulated If the event is simulated (changes exn behavior)
+* @private
+*/
+var executeDispatchesAndRelease = function (event, simulated) {
+ if (event) {
+   EventPluginUtils.executeDispatchesInOrder(event, simulated);
+
+   if (!event.isPersistent()) {
+     event.constructor.release(event);
+   }
+ }
+};
+var executeDispatchesAndReleaseSimulated = function (e) {
+ return executeDispatchesAndRelease(e, true);
+};
+var executeDispatchesAndReleaseTopLevel = function (e) {
+ return executeDispatchesAndRelease(e, false);
+};
+
+var getDictionaryKey = function (inst) {
+ // Prevents V8 performance issue:
+ // https://github.com/facebook/react/pull/7232
+ return '.' + inst._rootNodeID;
+};
+
+function isInteractive(tag) {
+ return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';
+}
+
+function shouldPreventMouseEvent(name, type, props) {
+ switch (name) {
+   case 'onClick':
+   case 'onClickCapture':
+   case 'onDoubleClick':
+   case 'onDoubleClickCapture':
+   case 'onMouseDown':
+   case 'onMouseDownCapture':
+   case 'onMouseMove':
+   case 'onMouseMoveCapture':
+   case 'onMouseUp':
+   case 'onMouseUpCapture':
+     return !!(props.disabled && isInteractive(type));
+   default:
+     return false;
+ }
+}
+
+/**
+* This is a unified interface for event plugins to be installed and configured.
+*
+* Event plugins can implement the following properties:
+*
+*   `extractEvents` {function(string, DOMEventTarget, string, object): *}
+*     Required. When a top-level event is fired, this method is expected to
+*     extract synthetic events that will in turn be queued and dispatched.
+*
+*   `eventTypes` {object}
+*     Optional, plugins that fire events must publish a mapping of registration
+*     names that are used to register listeners. Values of this mapping must
+*     be objects that contain `registrationName` or `phasedRegistrationNames`.
+*
+*   `executeDispatch` {function(object, function, string)}
+*     Optional, allows plugins to override how an event gets dispatched. By
+*     default, the listener is simply invoked.
+*
+* Each plugin that is injected into `EventsPluginHub` is immediately operable.
+*
+* @public
+*/
+var EventPluginHub = {
+
+ /**
+  * Methods for injecting dependencies.
+  */
+ injection: {
+
+   /**
+    * @param {array} InjectedEventPluginOrder
+    * @public
+    */
+   injectEventPluginOrder: EventPluginRegistry.injectEventPluginOrder,
+
+   /**
+    * @param {object} injectedNamesToPlugins Map from names to plugin modules.
+    */
+   injectEventPluginsByName: EventPluginRegistry.injectEventPluginsByName
+
+ },
+
+ /**
+  * Stores `listener` at `listenerBank[registrationName][key]`. Is idempotent.
+  *
+  * @param {object} inst The instance, which is the source of events.
+  * @param {string} registrationName Name of listener (e.g. `onClick`).
+  * @param {function} listener The callback to store.
+  */
+ putListener: function (inst, registrationName, listener) {
+   !(typeof listener === 'function') ? "development" !== 'production' ? invariant(false, 'Expected %s listener to be a function, instead got type %s', registrationName, typeof listener) : _prodInvariant('94', registrationName, typeof listener) : void 0;
+
+   var key = getDictionaryKey(inst);
+   var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});
+   bankForRegistrationName[key] = listener;
+
+   var PluginModule = EventPluginRegistry.registrationNameModules[registrationName];
+   if (PluginModule && PluginModule.didPutListener) {
+     PluginModule.didPutListener(inst, registrationName, listener);
+   }
+ },
+
+ /**
+  * @param {object} inst The instance, which is the source of events.
+  * @param {string} registrationName Name of listener (e.g. `onClick`).
+  * @return {?function} The stored callback.
+  */
+ getListener: function (inst, registrationName) {
+   // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
+   // live here; needs to be moved to a better place soon
+   var bankForRegistrationName = listenerBank[registrationName];
+   if (shouldPreventMouseEvent(registrationName, inst._currentElement.type, inst._currentElement.props)) {
+     return null;
+   }
+   var key = getDictionaryKey(inst);
+   return bankForRegistrationName && bankForRegistrationName[key];
+ },
+
+ /**
+  * Deletes a listener from the registration bank.
+  *
+  * @param {object} inst The instance, which is the source of events.
+  * @param {string} registrationName Name of listener (e.g. `onClick`).
+  */
+ deleteListener: function (inst, registrationName) {
+   var PluginModule = EventPluginRegistry.registrationNameModules[registrationName];
+   if (PluginModule && PluginModule.willDeleteListener) {
+     PluginModule.willDeleteListener(inst, registrationName);
+   }
+
+   var bankForRegistrationName = listenerBank[registrationName];
+   // TODO: This should never be null -- when is it?
+   if (bankForRegistrationName) {
+     var key = getDictionaryKey(inst);
+     delete bankForRegistrationName[key];
+   }
+ },
+
+ /**
+  * Deletes all listeners for the DOM element with the supplied ID.
+  *
+  * @param {object} inst The instance, which is the source of events.
+  */
+ deleteAllListeners: function (inst) {
+   var key = getDictionaryKey(inst);
+   for (var registrationName in listenerBank) {
+     if (!listenerBank.hasOwnProperty(registrationName)) {
+       continue;
+     }
+
+     if (!listenerBank[registrationName][key]) {
+       continue;
+     }
+
+     var PluginModule = EventPluginRegistry.registrationNameModules[registrationName];
+     if (PluginModule && PluginModule.willDeleteListener) {
+       PluginModule.willDeleteListener(inst, registrationName);
+     }
+
+     delete listenerBank[registrationName][key];
+   }
+ },
+
+ /**
+  * Allows registered plugins an opportunity to extract events from top-level
+  * native browser events.
+  *
+  * @return {*} An accumulation of synthetic events.
+  * @internal
+  */
+ extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+   var events;
+   var plugins = EventPluginRegistry.plugins;
+   for (var i = 0; i < plugins.length; i++) {
+     // Not every plugin in the ordering may be loaded at runtime.
+     var possiblePlugin = plugins[i];
+     if (possiblePlugin) {
+       var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
+       if (extractedEvents) {
+         events = accumulateInto(events, extractedEvents);
+       }
+     }
+   }
+   return events;
+ },
+
+ /**
+  * Enqueues a synthetic event that should be dispatched when
+  * `processEventQueue` is invoked.
+  *
+  * @param {*} events An accumulation of synthetic events.
+  * @internal
+  */
+ enqueueEvents: function (events) {
+   if (events) {
+     eventQueue = accumulateInto(eventQueue, events);
+   }
+ },
+
+ /**
+  * Dispatches all synthetic events on the event queue.
+  *
+  * @internal
+  */
+ processEventQueue: function (simulated) {
+   // Set `eventQueue` to null before processing it so that we can tell if more
+   // events get enqueued while processing.
+   var processingEventQueue = eventQueue;
+   eventQueue = null;
+   if (simulated) {
+     forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseSimulated);
+   } else {
+     forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
+   }
+   !!eventQueue ? "development" !== 'production' ? invariant(false, 'processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.') : _prodInvariant('95') : void 0;
+   // This would be a good time to rethrow if any of the event handlers threw.
+   ReactErrorUtils.rethrowCaughtError();
+ },
+
+ /**
+  * These are needed for tests only. Do not use!
+  */
+ __purge: function () {
+   listenerBank = {};
+ },
+
+ __getListenerBank: function () {
+   return listenerBank;
+ }
+
+};
+
+module.exports = EventPluginHub;
+},{"102":102,"110":110,"125":125,"150":150,"18":18,"19":19,"55":55}],18:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+/**
+* Injectable ordering of event plugins.
+*/
+var eventPluginOrder = null;
+
+/**
+* Injectable mapping from names to event plugin modules.
+*/
+var namesToPlugins = {};
+
+/**
+* Recomputes the plugin list using the injected plugins and plugin ordering.
+*
+* @private
+*/
+function recomputePluginOrdering() {
+ if (!eventPluginOrder) {
+   // Wait until an `eventPluginOrder` is injected.
+   return;
+ }
+ for (var pluginName in namesToPlugins) {
+   var pluginModule = namesToPlugins[pluginName];
+   var pluginIndex = eventPluginOrder.indexOf(pluginName);
+   !(pluginIndex > -1) ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.', pluginName) : _prodInvariant('96', pluginName) : void 0;
+   if (EventPluginRegistry.plugins[pluginIndex]) {
+     continue;
+   }
+   !pluginModule.extractEvents ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.', pluginName) : _prodInvariant('97', pluginName) : void 0;
+   EventPluginRegistry.plugins[pluginIndex] = pluginModule;
+   var publishedEvents = pluginModule.eventTypes;
+   for (var eventName in publishedEvents) {
+     !publishEventForPlugin(publishedEvents[eventName], pluginModule, eventName) ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.', eventName, pluginName) : _prodInvariant('98', eventName, pluginName) : void 0;
+   }
+ }
+}
+
+/**
+* Publishes an event so that it can be dispatched by the supplied plugin.
+*
+* @param {object} dispatchConfig Dispatch configuration for the event.
+* @param {object} PluginModule Plugin publishing the event.
+* @return {boolean} True if the event was successfully published.
+* @private
+*/
+function publishEventForPlugin(dispatchConfig, pluginModule, eventName) {
+ !!EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName) ? "development" !== 'production' ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.', eventName) : _prodInvariant('99', eventName) : void 0;
+ EventPluginRegistry.eventNameDispatchConfigs[eventName] = dispatchConfig;
+
+ var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
+ if (phasedRegistrationNames) {
+   for (var phaseName in phasedRegistrationNames) {
+     if (phasedRegistrationNames.hasOwnProperty(phaseName)) {
+       var phasedRegistrationName = phasedRegistrationNames[phaseName];
+       publishRegistrationName(phasedRegistrationName, pluginModule, eventName);
+     }
+   }
+   return true;
+ } else if (dispatchConfig.registrationName) {
+   publishRegistrationName(dispatchConfig.registrationName, pluginModule, eventName);
+   return true;
+ }
+ return false;
+}
+
+/**
+* Publishes a registration name that is used to identify dispatched events and
+* can be used with `EventPluginHub.putListener` to register listeners.
+*
+* @param {string} registrationName Registration name to add.
+* @param {object} PluginModule Plugin publishing the event.
+* @private
+*/
+function publishRegistrationName(registrationName, pluginModule, eventName) {
+ !!EventPluginRegistry.registrationNameModules[registrationName] ? "development" !== 'production' ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.', registrationName) : _prodInvariant('100', registrationName) : void 0;
+ EventPluginRegistry.registrationNameModules[registrationName] = pluginModule;
+ EventPluginRegistry.registrationNameDependencies[registrationName] = pluginModule.eventTypes[eventName].dependencies;
+
+ if ("development" !== 'production') {
+   var lowerCasedName = registrationName.toLowerCase();
+   EventPluginRegistry.possibleRegistrationNames[lowerCasedName] = registrationName;
+
+   if (registrationName === 'onDoubleClick') {
+     EventPluginRegistry.possibleRegistrationNames.ondblclick = registrationName;
+   }
+ }
+}
+
+/**
+* Registers plugins so that they can extract and dispatch events.
+*
+* @see {EventPluginHub}
+*/
+var EventPluginRegistry = {
+
+ /**
+  * Ordered list of injected plugins.
+  */
+ plugins: [],
+
+ /**
+  * Mapping from event name to dispatch config
+  */
+ eventNameDispatchConfigs: {},
+
+ /**
+  * Mapping from registration name to plugin module
+  */
+ registrationNameModules: {},
+
+ /**
+  * Mapping from registration name to event name
+  */
+ registrationNameDependencies: {},
+
+ /**
+  * Mapping from lowercase registration names to the properly cased version,
+  * used to warn in the case of missing event handlers. Available
+  * only in __DEV__.
+  * @type {Object}
+  */
+ possibleRegistrationNames: "development" !== 'production' ? {} : null,
+ // Trust the developer to only use possibleRegistrationNames in __DEV__
+
+ /**
+  * Injects an ordering of plugins (by plugin name). This allows the ordering
+  * to be decoupled from injection of the actual plugins so that ordering is
+  * always deterministic regardless of packaging, on-the-fly injection, etc.
+  *
+  * @param {array} InjectedEventPluginOrder
+  * @internal
+  * @see {EventPluginHub.injection.injectEventPluginOrder}
+  */
+ injectEventPluginOrder: function (injectedEventPluginOrder) {
+   !!eventPluginOrder ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.') : _prodInvariant('101') : void 0;
+   // Clone the ordering so it cannot be dynamically mutated.
+   eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
+   recomputePluginOrdering();
+ },
+
+ /**
+  * Injects plugins to be used by `EventPluginHub`. The plugin names must be
+  * in the ordering injected by `injectEventPluginOrder`.
+  *
+  * Plugins can be injected as part of page initialization or on-the-fly.
+  *
+  * @param {object} injectedNamesToPlugins Map from names to plugin modules.
+  * @internal
+  * @see {EventPluginHub.injection.injectEventPluginsByName}
+  */
+ injectEventPluginsByName: function (injectedNamesToPlugins) {
+   var isOrderingDirty = false;
+   for (var pluginName in injectedNamesToPlugins) {
+     if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
+       continue;
+     }
+     var pluginModule = injectedNamesToPlugins[pluginName];
+     if (!namesToPlugins.hasOwnProperty(pluginName) || namesToPlugins[pluginName] !== pluginModule) {
+       !!namesToPlugins[pluginName] ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.', pluginName) : _prodInvariant('102', pluginName) : void 0;
+       namesToPlugins[pluginName] = pluginModule;
+       isOrderingDirty = true;
+     }
+   }
+   if (isOrderingDirty) {
+     recomputePluginOrdering();
+   }
+ },
+
+ /**
+  * Looks up the plugin for the supplied event.
+  *
+  * @param {object} event A synthetic event.
+  * @return {?object} The plugin that created the supplied event.
+  * @internal
+  */
+ getPluginModuleForEvent: function (event) {
+   var dispatchConfig = event.dispatchConfig;
+   if (dispatchConfig.registrationName) {
+     return EventPluginRegistry.registrationNameModules[dispatchConfig.registrationName] || null;
+   }
+   if (dispatchConfig.phasedRegistrationNames !== undefined) {
+     // pulling phasedRegistrationNames out of dispatchConfig helps Flow see
+     // that it is not undefined.
+     var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
+
+     for (var phase in phasedRegistrationNames) {
+       if (!phasedRegistrationNames.hasOwnProperty(phase)) {
+         continue;
+       }
+       var pluginModule = EventPluginRegistry.registrationNameModules[phasedRegistrationNames[phase]];
+       if (pluginModule) {
+         return pluginModule;
+       }
+     }
+   }
+   return null;
+ },
+
+ /**
+  * Exposed for unit testing.
+  * @private
+  */
+ _resetEventPlugins: function () {
+   eventPluginOrder = null;
+   for (var pluginName in namesToPlugins) {
+     if (namesToPlugins.hasOwnProperty(pluginName)) {
+       delete namesToPlugins[pluginName];
+     }
+   }
+   EventPluginRegistry.plugins.length = 0;
+
+   var eventNameDispatchConfigs = EventPluginRegistry.eventNameDispatchConfigs;
+   for (var eventName in eventNameDispatchConfigs) {
+     if (eventNameDispatchConfigs.hasOwnProperty(eventName)) {
+       delete eventNameDispatchConfigs[eventName];
+     }
+   }
+
+   var registrationNameModules = EventPluginRegistry.registrationNameModules;
+   for (var registrationName in registrationNameModules) {
+     if (registrationNameModules.hasOwnProperty(registrationName)) {
+       delete registrationNameModules[registrationName];
+     }
+   }
+
+   if ("development" !== 'production') {
+     var possibleRegistrationNames = EventPluginRegistry.possibleRegistrationNames;
+     for (var lowerCasedName in possibleRegistrationNames) {
+       if (possibleRegistrationNames.hasOwnProperty(lowerCasedName)) {
+         delete possibleRegistrationNames[lowerCasedName];
+       }
+     }
+   }
+ }
+
+};
+
+module.exports = EventPluginRegistry;
+},{"125":125,"150":150}],19:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var ReactErrorUtils = _dereq_(55);
+
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+/**
+* Injected dependencies:
+*/
+
+/**
+* - `ComponentTree`: [required] Module that can convert between React instances
+*   and actual node references.
+*/
+var ComponentTree;
+var TreeTraversal;
+var injection = {
+ injectComponentTree: function (Injected) {
+   ComponentTree = Injected;
+   if ("development" !== 'production') {
+     "development" !== 'production' ? warning(Injected && Injected.getNodeFromInstance && Injected.getInstanceFromNode, 'EventPluginUtils.injection.injectComponentTree(...): Injected ' + 'module is missing getNodeFromInstance or getInstanceFromNode.') : void 0;
+   }
+ },
+ injectTreeTraversal: function (Injected) {
+   TreeTraversal = Injected;
+   if ("development" !== 'production') {
+     "development" !== 'production' ? warning(Injected && Injected.isAncestor && Injected.getLowestCommonAncestor, 'EventPluginUtils.injection.injectTreeTraversal(...): Injected ' + 'module is missing isAncestor or getLowestCommonAncestor.') : void 0;
+   }
+ }
+};
+
+function isEndish(topLevelType) {
+ return topLevelType === 'topMouseUp' || topLevelType === 'topTouchEnd' || topLevelType === 'topTouchCancel';
+}
+
+function isMoveish(topLevelType) {
+ return topLevelType === 'topMouseMove' || topLevelType === 'topTouchMove';
+}
+function isStartish(topLevelType) {
+ return topLevelType === 'topMouseDown' || topLevelType === 'topTouchStart';
+}
+
+var validateEventDispatches;
+if ("development" !== 'production') {
+ validateEventDispatches = function (event) {
+   var dispatchListeners = event._dispatchListeners;
+   var dispatchInstances = event._dispatchInstances;
+
+   var listenersIsArr = Array.isArray(dispatchListeners);
+   var listenersLen = listenersIsArr ? dispatchListeners.length : dispatchListeners ? 1 : 0;
+
+   var instancesIsArr = Array.isArray(dispatchInstances);
+   var instancesLen = instancesIsArr ? dispatchInstances.length : dispatchInstances ? 1 : 0;
+
+   "development" !== 'production' ? warning(instancesIsArr === listenersIsArr && instancesLen === listenersLen, 'EventPluginUtils: Invalid `event`.') : void 0;
+ };
+}
+
+/**
+* Dispatch the event to the listener.
+* @param {SyntheticEvent} event SyntheticEvent to handle
+* @param {boolean} simulated If the event is simulated (changes exn behavior)
+* @param {function} listener Application-level callback
+* @param {*} inst Internal component instance
+*/
+function executeDispatch(event, simulated, listener, inst) {
+ var type = event.type || 'unknown-event';
+ event.currentTarget = EventPluginUtils.getNodeFromInstance(inst);
+ if (simulated) {
+   ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event);
+ } else {
+   ReactErrorUtils.invokeGuardedCallback(type, listener, event);
+ }
+ event.currentTarget = null;
+}
+
+/**
+* Standard/simple iteration through an event's collected dispatches.
+*/
+function executeDispatchesInOrder(event, simulated) {
+ var dispatchListeners = event._dispatchListeners;
+ var dispatchInstances = event._dispatchInstances;
+ if ("development" !== 'production') {
+   validateEventDispatches(event);
+ }
+ if (Array.isArray(dispatchListeners)) {
+   for (var i = 0; i < dispatchListeners.length; i++) {
+     if (event.isPropagationStopped()) {
+       break;
+     }
+     // Listeners and Instances are two parallel arrays that are always in sync.
+     executeDispatch(event, simulated, dispatchListeners[i], dispatchInstances[i]);
+   }
+ } else if (dispatchListeners) {
+   executeDispatch(event, simulated, dispatchListeners, dispatchInstances);
+ }
+ event._dispatchListeners = null;
+ event._dispatchInstances = null;
+}
+
+/**
+* Standard/simple iteration through an event's collected dispatches, but stops
+* at the first dispatch execution returning true, and returns that id.
+*
+* @return {?string} id of the first dispatch execution who's listener returns
+* true, or null if no listener returned true.
+*/
+function executeDispatchesInOrderStopAtTrueImpl(event) {
+ var dispatchListeners = event._dispatchListeners;
+ var dispatchInstances = event._dispatchInstances;
+ if ("development" !== 'production') {
+   validateEventDispatches(event);
+ }
+ if (Array.isArray(dispatchListeners)) {
+   for (var i = 0; i < dispatchListeners.length; i++) {
+     if (event.isPropagationStopped()) {
+       break;
+     }
+     // Listeners and Instances are two parallel arrays that are always in sync.
+     if (dispatchListeners[i](event, dispatchInstances[i])) {
+       return dispatchInstances[i];
+     }
+   }
+ } else if (dispatchListeners) {
+   if (dispatchListeners(event, dispatchInstances)) {
+     return dispatchInstances;
+   }
+ }
+ return null;
+}
+
+/**
+* @see executeDispatchesInOrderStopAtTrueImpl
+*/
+function executeDispatchesInOrderStopAtTrue(event) {
+ var ret = executeDispatchesInOrderStopAtTrueImpl(event);
+ event._dispatchInstances = null;
+ event._dispatchListeners = null;
+ return ret;
+}
+
+/**
+* Execution of a "direct" dispatch - there must be at most one dispatch
+* accumulated on the event or it is considered an error. It doesn't really make
+* sense for an event with multiple dispatches (bubbled) to keep track of the
+* return values at each dispatch execution, but it does tend to make sense when
+* dealing with "direct" dispatches.
+*
+* @return {*} The return value of executing the single dispatch.
+*/
+function executeDirectDispatch(event) {
+ if ("development" !== 'production') {
+   validateEventDispatches(event);
+ }
+ var dispatchListener = event._dispatchListeners;
+ var dispatchInstance = event._dispatchInstances;
+ !!Array.isArray(dispatchListener) ? "development" !== 'production' ? invariant(false, 'executeDirectDispatch(...): Invalid `event`.') : _prodInvariant('103') : void 0;
+ event.currentTarget = dispatchListener ? EventPluginUtils.getNodeFromInstance(dispatchInstance) : null;
+ var res = dispatchListener ? dispatchListener(event) : null;
+ event.currentTarget = null;
+ event._dispatchListeners = null;
+ event._dispatchInstances = null;
+ return res;
+}
+
+/**
+* @param {SyntheticEvent} event
+* @return {boolean} True iff number of dispatches accumulated is greater than 0.
+*/
+function hasDispatches(event) {
+ return !!event._dispatchListeners;
+}
+
+/**
+* General utilities that are useful in creating custom Event Plugins.
+*/
+var EventPluginUtils = {
+ isEndish: isEndish,
+ isMoveish: isMoveish,
+ isStartish: isStartish,
+
+ executeDirectDispatch: executeDirectDispatch,
+ executeDispatchesInOrder: executeDispatchesInOrder,
+ executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue,
+ hasDispatches: hasDispatches,
+
+ getInstanceFromNode: function (node) {
+   return ComponentTree.getInstanceFromNode(node);
+ },
+ getNodeFromInstance: function (node) {
+   return ComponentTree.getNodeFromInstance(node);
+ },
+ isAncestor: function (a, b) {
+   return TreeTraversal.isAncestor(a, b);
+ },
+ getLowestCommonAncestor: function (a, b) {
+   return TreeTraversal.getLowestCommonAncestor(a, b);
+ },
+ getParentInstance: function (inst) {
+   return TreeTraversal.getParentInstance(inst);
+ },
+ traverseTwoPhase: function (target, fn, arg) {
+   return TreeTraversal.traverseTwoPhase(target, fn, arg);
+ },
+ traverseEnterLeave: function (from, to, fn, argFrom, argTo) {
+   return TreeTraversal.traverseEnterLeave(from, to, fn, argFrom, argTo);
+ },
+
+ injection: injection
+};
+
+module.exports = EventPluginUtils;
+},{"125":125,"150":150,"157":157,"55":55}],20:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var EventPluginHub = _dereq_(17);
+var EventPluginUtils = _dereq_(19);
+
+var accumulateInto = _dereq_(102);
+var forEachAccumulated = _dereq_(110);
+var warning = _dereq_(157);
+
+var getListener = EventPluginHub.getListener;
+
+/**
+* Some event types have a notion of different registration names for different
+* "phases" of propagation. This finds listeners by a given phase.
+*/
+function listenerAtPhase(inst, event, propagationPhase) {
+ var registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase];
+ return getListener(inst, registrationName);
+}
+
+/**
+* Tags a `SyntheticEvent` with dispatched listeners. Creating this function
+* here, allows us to not have to bind or create functions for each event.
+* Mutating the event's members allows us to not have to create a wrapping
+* "dispatch" object that pairs the event with the listener.
+*/
+function accumulateDirectionalDispatches(inst, phase, event) {
+ if ("development" !== 'production') {
+   "development" !== 'production' ? warning(inst, 'Dispatching inst must not be null') : void 0;
+ }
+ var listener = listenerAtPhase(inst, event, phase);
+ if (listener) {
+   event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
+   event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+ }
+}
+
+/**
+* Collect dispatches (must be entirely collected before dispatching - see unit
+* tests). Lazily allocate the array to conserve memory.  We must loop through
+* each event and perform the traversal for each one. We cannot perform a
+* single traversal for the entire collection of events because each event may
+* have a different target.
+*/
+function accumulateTwoPhaseDispatchesSingle(event) {
+ if (event && event.dispatchConfig.phasedRegistrationNames) {
+   EventPluginUtils.traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
+ }
+}
+
+/**
+* Same as `accumulateTwoPhaseDispatchesSingle`, but skips over the targetID.
+*/
+function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {
+ if (event && event.dispatchConfig.phasedRegistrationNames) {
+   var targetInst = event._targetInst;
+   var parentInst = targetInst ? EventPluginUtils.getParentInstance(targetInst) : null;
+   EventPluginUtils.traverseTwoPhase(parentInst, accumulateDirectionalDispatches, event);
+ }
+}
+
+/**
+* Accumulates without regard to direction, does not look for phased
+* registration names. Same as `accumulateDirectDispatchesSingle` but without
+* requiring that the `dispatchMarker` be the same as the dispatched ID.
+*/
+function accumulateDispatches(inst, ignoredDirection, event) {
+ if (event && event.dispatchConfig.registrationName) {
+   var registrationName = event.dispatchConfig.registrationName;
+   var listener = getListener(inst, registrationName);
+   if (listener) {
+     event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
+     event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+   }
+ }
+}
+
+/**
+* Accumulates dispatches on an `SyntheticEvent`, but only for the
+* `dispatchMarker`.
+* @param {SyntheticEvent} event
+*/
+function accumulateDirectDispatchesSingle(event) {
+ if (event && event.dispatchConfig.registrationName) {
+   accumulateDispatches(event._targetInst, null, event);
+ }
+}
+
+function accumulateTwoPhaseDispatches(events) {
+ forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
+}
+
+function accumulateTwoPhaseDispatchesSkipTarget(events) {
+ forEachAccumulated(events, accumulateTwoPhaseDispatchesSingleSkipTarget);
+}
+
+function accumulateEnterLeaveDispatches(leave, enter, from, to) {
+ EventPluginUtils.traverseEnterLeave(from, to, accumulateDispatches, leave, enter);
+}
+
+function accumulateDirectDispatches(events) {
+ forEachAccumulated(events, accumulateDirectDispatchesSingle);
+}
+
+/**
+* A small set of propagation patterns, each of which will accept a small amount
+* of information, and generate a set of "dispatch ready event objects" - which
+* are sets of events that have already been annotated with a set of dispatched
+* listener functions/ids. The API is designed this way to discourage these
+* propagation strategies from actually executing the dispatches, since we
+* always want to collect the entire set of dispatches before executing event a
+* single one.
+*
+* @constructor EventPropagators
+*/
+var EventPropagators = {
+ accumulateTwoPhaseDispatches: accumulateTwoPhaseDispatches,
+ accumulateTwoPhaseDispatchesSkipTarget: accumulateTwoPhaseDispatchesSkipTarget,
+ accumulateDirectDispatches: accumulateDirectDispatches,
+ accumulateEnterLeaveDispatches: accumulateEnterLeaveDispatches
+};
+
+module.exports = EventPropagators;
+},{"102":102,"110":110,"157":157,"17":17,"19":19}],21:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var PooledClass = _dereq_(25);
+
+var getTextContentAccessor = _dereq_(119);
+
+/**
+* This helper class stores information about text content of a target node,
+* allowing comparison of content before and after a given event.
+*
+* Identify the node where selection currently begins, then observe
+* both its text content and its current position in the DOM. Since the
+* browser may natively replace the target node during composition, we can
+* use its position to find its replacement.
+*
+* @param {DOMEventTarget} root
+*/
+function FallbackCompositionState(root) {
+ this._root = root;
+ this._startText = this.getText();
+ this._fallbackText = null;
+}
+
+_assign(FallbackCompositionState.prototype, {
+ destructor: function () {
+   this._root = null;
+   this._startText = null;
+   this._fallbackText = null;
+ },
+
+ /**
+  * Get current text of input.
+  *
+  * @return {string}
+  */
+ getText: function () {
+   if ('value' in this._root) {
+     return this._root.value;
+   }
+   return this._root[getTextContentAccessor()];
+ },
+
+ /**
+  * Determine the differing substring between the initially stored
+  * text content and the current content.
+  *
+  * @return {string}
+  */
+ getData: function () {
+   if (this._fallbackText) {
+     return this._fallbackText;
+   }
+
+   var start;
+   var startValue = this._startText;
+   var startLength = startValue.length;
+   var end;
+   var endValue = this.getText();
+   var endLength = endValue.length;
+
+   for (start = 0; start < startLength; start++) {
+     if (startValue[start] !== endValue[start]) {
+       break;
+     }
+   }
+
+   var minEnd = startLength - start;
+   for (end = 1; end <= minEnd; end++) {
+     if (startValue[startLength - end] !== endValue[endLength - end]) {
+       break;
+     }
+   }
+
+   var sliceTail = end > 1 ? 1 - end : undefined;
+   this._fallbackText = endValue.slice(start, sliceTail);
+   return this._fallbackText;
+ }
+});
+
+PooledClass.addPoolingTo(FallbackCompositionState);
+
+module.exports = FallbackCompositionState;
+},{"119":119,"158":158,"25":25}],22:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMProperty = _dereq_(11);
+
+var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
+var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE;
+var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE;
+var HAS_POSITIVE_NUMERIC_VALUE = DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE;
+var HAS_OVERLOADED_BOOLEAN_VALUE = DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
+
+var HTMLDOMPropertyConfig = {
+ isCustomAttribute: RegExp.prototype.test.bind(new RegExp('^(data|aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$')),
+ Properties: {
+   /**
+    * Standard Properties
+    */
+   accept: 0,
+   acceptCharset: 0,
+   accessKey: 0,
+   action: 0,
+   allowFullScreen: HAS_BOOLEAN_VALUE,
+   allowTransparency: 0,
+   alt: 0,
+   // specifies target context for links with `preload` type
+   as: 0,
+   async: HAS_BOOLEAN_VALUE,
+   autoComplete: 0,
+   // autoFocus is polyfilled/normalized by AutoFocusUtils
+   // autoFocus: HAS_BOOLEAN_VALUE,
+   autoPlay: HAS_BOOLEAN_VALUE,
+   capture: HAS_BOOLEAN_VALUE,
+   cellPadding: 0,
+   cellSpacing: 0,
+   charSet: 0,
+   challenge: 0,
+   checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
+   cite: 0,
+   classID: 0,
+   className: 0,
+   cols: HAS_POSITIVE_NUMERIC_VALUE,
+   colSpan: 0,
+   content: 0,
+   contentEditable: 0,
+   contextMenu: 0,
+   controls: HAS_BOOLEAN_VALUE,
+   coords: 0,
+   crossOrigin: 0,
+   data: 0, // For `<object />` acts as `src`.
+   dateTime: 0,
+   'default': HAS_BOOLEAN_VALUE,
+   defer: HAS_BOOLEAN_VALUE,
+   dir: 0,
+   disabled: HAS_BOOLEAN_VALUE,
+   download: HAS_OVERLOADED_BOOLEAN_VALUE,
+   draggable: 0,
+   encType: 0,
+   form: 0,
+   formAction: 0,
+   formEncType: 0,
+   formMethod: 0,
+   formNoValidate: HAS_BOOLEAN_VALUE,
+   formTarget: 0,
+   frameBorder: 0,
+   headers: 0,
+   height: 0,
+   hidden: HAS_BOOLEAN_VALUE,
+   high: 0,
+   href: 0,
+   hrefLang: 0,
+   htmlFor: 0,
+   httpEquiv: 0,
+   icon: 0,
+   id: 0,
+   inputMode: 0,
+   integrity: 0,
+   is: 0,
+   keyParams: 0,
+   keyType: 0,
+   kind: 0,
+   label: 0,
+   lang: 0,
+   list: 0,
+   loop: HAS_BOOLEAN_VALUE,
+   low: 0,
+   manifest: 0,
+   marginHeight: 0,
+   marginWidth: 0,
+   max: 0,
+   maxLength: 0,
+   media: 0,
+   mediaGroup: 0,
+   method: 0,
+   min: 0,
+   minLength: 0,
+   // Caution; `option.selected` is not updated if `select.multiple` is
+   // disabled with `removeAttribute`.
+   multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
+   muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
+   name: 0,
+   nonce: 0,
+   noValidate: HAS_BOOLEAN_VALUE,
+   open: HAS_BOOLEAN_VALUE,
+   optimum: 0,
+   pattern: 0,
+   placeholder: 0,
+   playsInline: HAS_BOOLEAN_VALUE,
+   poster: 0,
+   preload: 0,
+   profile: 0,
+   radioGroup: 0,
+   readOnly: HAS_BOOLEAN_VALUE,
+   referrerPolicy: 0,
+   rel: 0,
+   required: HAS_BOOLEAN_VALUE,
+   reversed: HAS_BOOLEAN_VALUE,
+   role: 0,
+   rows: HAS_POSITIVE_NUMERIC_VALUE,
+   rowSpan: HAS_NUMERIC_VALUE,
+   sandbox: 0,
+   scope: 0,
+   scoped: HAS_BOOLEAN_VALUE,
+   scrolling: 0,
+   seamless: HAS_BOOLEAN_VALUE,
+   selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
+   shape: 0,
+   size: HAS_POSITIVE_NUMERIC_VALUE,
+   sizes: 0,
+   span: HAS_POSITIVE_NUMERIC_VALUE,
+   spellCheck: 0,
+   src: 0,
+   srcDoc: 0,
+   srcLang: 0,
+   srcSet: 0,
+   start: HAS_NUMERIC_VALUE,
+   step: 0,
+   style: 0,
+   summary: 0,
+   tabIndex: 0,
+   target: 0,
+   title: 0,
+   // Setting .type throws on non-<input> tags
+   type: 0,
+   useMap: 0,
+   value: 0,
+   width: 0,
+   wmode: 0,
+   wrap: 0,
+
+   /**
+    * RDFa Properties
+    */
+   about: 0,
+   datatype: 0,
+   inlist: 0,
+   prefix: 0,
+   // property is also supported for OpenGraph in meta tags.
+   property: 0,
+   resource: 0,
+   'typeof': 0,
+   vocab: 0,
+
+   /**
+    * Non-standard Properties
+    */
+   // autoCapitalize and autoCorrect are supported in Mobile Safari for
+   // keyboard hints.
+   autoCapitalize: 0,
+   autoCorrect: 0,
+   // autoSave allows WebKit/Blink to persist values of input fields on page reloads
+   autoSave: 0,
+   // color is for Safari mask-icon link
+   color: 0,
+   // itemProp, itemScope, itemType are for
+   // Microdata support. See http://schema.org/docs/gs.html
+   itemProp: 0,
+   itemScope: HAS_BOOLEAN_VALUE,
+   itemType: 0,
+   // itemID and itemRef are for Microdata support as well but
+   // only specified in the WHATWG spec document. See
+   // https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api
+   itemID: 0,
+   itemRef: 0,
+   // results show looking glass icon and recent searches on input
+   // search fields in WebKit/Blink
+   results: 0,
+   // IE-only attribute that specifies security restrictions on an iframe
+   // as an alternative to the sandbox attribute on IE<10
+   security: 0,
+   // IE-only attribute that controls focus behavior
+   unselectable: 0
+ },
+ DOMAttributeNames: {
+   acceptCharset: 'accept-charset',
+   className: 'class',
+   htmlFor: 'for',
+   httpEquiv: 'http-equiv'
+ },
+ DOMPropertyNames: {}
+};
+
+module.exports = HTMLDOMPropertyConfig;
+},{"11":11}],23:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+/**
+* Escape and wrap key so it is safe to use as a reactid
+*
+* @param {string} key to be escaped.
+* @return {string} the escaped key.
+*/
+
+function escape(key) {
+ var escapeRegex = /[=:]/g;
+ var escaperLookup = {
+   '=': '=0',
+   ':': '=2'
+ };
+ var escapedString = ('' + key).replace(escapeRegex, function (match) {
+   return escaperLookup[match];
+ });
+
+ return '$' + escapedString;
+}
+
+/**
+* Unescape and unwrap key for human-readable display
+*
+* @param {string} key to unescape.
+* @return {string} the unescaped key.
+*/
+function unescape(key) {
+ var unescapeRegex = /(=0|=2)/g;
+ var unescaperLookup = {
+   '=0': '=',
+   '=2': ':'
+ };
+ var keySubstring = key[0] === '.' && key[1] === '$' ? key.substring(2) : key.substring(1);
+
+ return ('' + keySubstring).replace(unescapeRegex, function (match) {
+   return unescaperLookup[match];
+ });
+}
+
+var KeyEscapeUtils = {
+ escape: escape,
+ unescape: unescape
+};
+
+module.exports = KeyEscapeUtils;
+},{}],24:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var React = _dereq_(134);
+var ReactPropTypesSecret = _dereq_(73);
+
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+var hasReadOnlyValue = {
+ 'button': true,
+ 'checkbox': true,
+ 'image': true,
+ 'hidden': true,
+ 'radio': true,
+ 'reset': true,
+ 'submit': true
+};
+
+function _assertSingleLink(inputProps) {
+ !(inputProps.checkedLink == null || inputProps.valueLink == null) ? "development" !== 'production' ? invariant(false, 'Cannot provide a checkedLink and a valueLink. If you want to use checkedLink, you probably don\'t want to use valueLink and vice versa.') : _prodInvariant('87') : void 0;
+}
+function _assertValueLink(inputProps) {
+ _assertSingleLink(inputProps);
+ !(inputProps.value == null && inputProps.onChange == null) ? "development" !== 'production' ? invariant(false, 'Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don\'t want to use valueLink.') : _prodInvariant('88') : void 0;
+}
+
+function _assertCheckedLink(inputProps) {
+ _assertSingleLink(inputProps);
+ !(inputProps.checked == null && inputProps.onChange == null) ? "development" !== 'production' ? invariant(false, 'Cannot provide a checkedLink and a checked property or onChange event. If you want to use checked or onChange, you probably don\'t want to use checkedLink') : _prodInvariant('89') : void 0;
+}
+
+var propTypes = {
+ value: function (props, propName, componentName) {
+   if (!props[propName] || hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled) {
+     return null;
+   }
+   return new Error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
+ },
+ checked: function (props, propName, componentName) {
+   if (!props[propName] || props.onChange || props.readOnly || props.disabled) {
+     return null;
+   }
+   return new Error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
+ },
+ onChange: React.PropTypes.func
+};
+
+var loggedTypeFailures = {};
+function getDeclarationErrorAddendum(owner) {
+ if (owner) {
+   var name = owner.getName();
+   if (name) {
+     return ' Check the render method of `' + name + '`.';
+   }
+ }
+ return '';
+}
+
+/**
+* Provide a linked `value` attribute for controlled forms. You should not use
+* this outside of the ReactDOM controlled form components.
+*/
+var LinkedValueUtils = {
+ checkPropTypes: function (tagName, props, owner) {
+   for (var propName in propTypes) {
+     if (propTypes.hasOwnProperty(propName)) {
+       var error = propTypes[propName](props, propName, tagName, 'prop', null, ReactPropTypesSecret);
+     }
+     if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+       // Only monitor this failure once because there tends to be a lot of the
+       // same error.
+       loggedTypeFailures[error.message] = true;
+
+       var addendum = getDeclarationErrorAddendum(owner);
+       "development" !== 'production' ? warning(false, 'Failed form propType: %s%s', error.message, addendum) : void 0;
+     }
+   }
+ },
+
+ /**
+  * @param {object} inputProps Props for form component
+  * @return {*} current value of the input either from value prop or link.
+  */
+ getValue: function (inputProps) {
+   if (inputProps.valueLink) {
+     _assertValueLink(inputProps);
+     return inputProps.valueLink.value;
+   }
+   return inputProps.value;
+ },
+
+ /**
+  * @param {object} inputProps Props for form component
+  * @return {*} current checked status of the input either from checked prop
+  *             or link.
+  */
+ getChecked: function (inputProps) {
+   if (inputProps.checkedLink) {
+     _assertCheckedLink(inputProps);
+     return inputProps.checkedLink.value;
+   }
+   return inputProps.checked;
+ },
+
+ /**
+  * @param {object} inputProps Props for form component
+  * @param {SyntheticEvent} event change event to handle
+  */
+ executeOnChange: function (inputProps, event) {
+   if (inputProps.valueLink) {
+     _assertValueLink(inputProps);
+     return inputProps.valueLink.requestChange(event.target.value);
+   } else if (inputProps.checkedLink) {
+     _assertCheckedLink(inputProps);
+     return inputProps.checkedLink.requestChange(event.target.checked);
+   } else if (inputProps.onChange) {
+     return inputProps.onChange.call(undefined, event);
+   }
+ }
+};
+
+module.exports = LinkedValueUtils;
+},{"125":125,"134":134,"150":150,"157":157,"73":73}],25:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+/**
+* Static poolers. Several custom versions for each potential number of
+* arguments. A completely generic pooler is easy to implement, but would
+* require accessing the `arguments` object. In each of these, `this` refers to
+* the Class itself, not an instance. If any others are needed, simply add them
+* here, or in their own files.
+*/
+var oneArgumentPooler = function (copyFieldsFrom) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, copyFieldsFrom);
+   return instance;
+ } else {
+   return new Klass(copyFieldsFrom);
+ }
+};
+
+var twoArgumentPooler = function (a1, a2) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2);
+   return instance;
+ } else {
+   return new Klass(a1, a2);
+ }
+};
+
+var threeArgumentPooler = function (a1, a2, a3) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2, a3);
+   return instance;
+ } else {
+   return new Klass(a1, a2, a3);
+ }
+};
+
+var fourArgumentPooler = function (a1, a2, a3, a4) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2, a3, a4);
+   return instance;
+ } else {
+   return new Klass(a1, a2, a3, a4);
+ }
+};
+
+var fiveArgumentPooler = function (a1, a2, a3, a4, a5) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2, a3, a4, a5);
+   return instance;
+ } else {
+   return new Klass(a1, a2, a3, a4, a5);
+ }
+};
+
+var standardReleaser = function (instance) {
+ var Klass = this;
+ !(instance instanceof Klass) ? "development" !== 'production' ? invariant(false, 'Trying to release an instance into a pool of a different type.') : _prodInvariant('25') : void 0;
+ instance.destructor();
+ if (Klass.instancePool.length < Klass.poolSize) {
+   Klass.instancePool.push(instance);
+ }
+};
+
+var DEFAULT_POOL_SIZE = 10;
+var DEFAULT_POOLER = oneArgumentPooler;
+
+/**
+* Augments `CopyConstructor` to be a poolable class, augmenting only the class
+* itself (statically) not adding any prototypical fields. Any CopyConstructor
+* you give this may have a `poolSize` property, and will look for a
+* prototypical `destructor` on instances.
+*
+* @param {Function} CopyConstructor Constructor that can be used to reset.
+* @param {Function} pooler Customizable pooler.
+*/
+var addPoolingTo = function (CopyConstructor, pooler) {
+ // Casting as any so that flow ignores the actual implementation and trusts
+ // it to match the type we declared
+ var NewKlass = CopyConstructor;
+ NewKlass.instancePool = [];
+ NewKlass.getPooled = pooler || DEFAULT_POOLER;
+ if (!NewKlass.poolSize) {
+   NewKlass.poolSize = DEFAULT_POOL_SIZE;
+ }
+ NewKlass.release = standardReleaser;
+ return NewKlass;
+};
+
+var PooledClass = {
+ addPoolingTo: addPoolingTo,
+ oneArgumentPooler: oneArgumentPooler,
+ twoArgumentPooler: twoArgumentPooler,
+ threeArgumentPooler: threeArgumentPooler,
+ fourArgumentPooler: fourArgumentPooler,
+ fiveArgumentPooler: fiveArgumentPooler
+};
+
+module.exports = PooledClass;
+},{"125":125,"150":150}],26:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var EventPluginRegistry = _dereq_(18);
+var ReactEventEmitterMixin = _dereq_(56);
+var ViewportMetrics = _dereq_(101);
+
+var getVendorPrefixedEventName = _dereq_(120);
+var isEventSupported = _dereq_(122);
+
+/**
+* Summary of `ReactBrowserEventEmitter` event handling:
+*
+*  - Top-level delegation is used to trap most native browser events. This
+*    may only occur in the main thread and is the responsibility of
+*    ReactEventListener, which is injected and can therefore support pluggable
+*    event sources. This is the only work that occurs in the main thread.
+*
+*  - We normalize and de-duplicate events to account for browser quirks. This
+*    may be done in the worker thread.
+*
+*  - Forward these native events (with the associated top-level type used to
+*    trap it) to `EventPluginHub`, which in turn will ask plugins if they want
+*    to extract any synthetic events.
+*
+*  - The `EventPluginHub` will then process each event by annotating them with
+*    "dispatches", a sequence of listeners and IDs that care about that event.
+*
+*  - The `EventPluginHub` then dispatches the events.
+*
+* Overview of React and the event system:
+*
+* +------------+    .
+* |    DOM     |    .
+* +------------+    .
+*       |           .
+*       v           .
+* +------------+    .
+* | ReactEvent |    .
+* |  Listener  |    .
+* +------------+    .                         +-----------+
+*       |           .               +--------+|SimpleEvent|
+*       |           .               |         |Plugin     |
+* +-----|------+    .               v         +-----------+
+* |     |      |    .    +--------------+                    +------------+
+* |     +-----------.--->|EventPluginHub|                    |    Event   |
+* |            |    .    |              |     +-----------+  | Propagators|
+* | ReactEvent |    .    |              |     |TapEvent   |  |------------|
+* |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
+* |            |    .    |              |     +-----------+  |  utilities |
+* |     +-----------.--->|              |                    +------------+
+* |     |      |    .    +--------------+
+* +-----|------+    .                ^        +-----------+
+*       |           .                |        |Enter/Leave|
+*       +           .                +-------+|Plugin     |
+* +-------------+   .                         +-----------+
+* | application |   .
+* |-------------|   .
+* |             |   .
+* |             |   .
+* +-------------+   .
+*                   .
+*    React Core     .  General Purpose Event Plugin System
+*/
+
+var hasEventPageXY;
+var alreadyListeningTo = {};
+var isMonitoringScrollValue = false;
+var reactTopListenersCounter = 0;
+
+// For events like 'submit' which don't consistently bubble (which we trap at a
+// lower node than `document`), binding at `document` would cause duplicate
+// events so we don't include them here
+var topEventMapping = {
+ topAbort: 'abort',
+ topAnimationEnd: getVendorPrefixedEventName('animationend') || 'animationend',
+ topAnimationIteration: getVendorPrefixedEventName('animationiteration') || 'animationiteration',
+ topAnimationStart: getVendorPrefixedEventName('animationstart') || 'animationstart',
+ topBlur: 'blur',
+ topCanPlay: 'canplay',
+ topCanPlayThrough: 'canplaythrough',
+ topChange: 'change',
+ topClick: 'click',
+ topCompositionEnd: 'compositionend',
+ topCompositionStart: 'compositionstart',
+ topCompositionUpdate: 'compositionupdate',
+ topContextMenu: 'contextmenu',
+ topCopy: 'copy',
+ topCut: 'cut',
+ topDoubleClick: 'dblclick',
+ topDrag: 'drag',
+ topDragEnd: 'dragend',
+ topDragEnter: 'dragenter',
+ topDragExit: 'dragexit',
+ topDragLeave: 'dragleave',
+ topDragOver: 'dragover',
+ topDragStart: 'dragstart',
+ topDrop: 'drop',
+ topDurationChange: 'durationchange',
+ topEmptied: 'emptied',
+ topEncrypted: 'encrypted',
+ topEnded: 'ended',
+ topError: 'error',
+ topFocus: 'focus',
+ topInput: 'input',
+ topKeyDown: 'keydown',
+ topKeyPress: 'keypress',
+ topKeyUp: 'keyup',
+ topLoadedData: 'loadeddata',
+ topLoadedMetadata: 'loadedmetadata',
+ topLoadStart: 'loadstart',
+ topMouseDown: 'mousedown',
+ topMouseMove: 'mousemove',
+ topMouseOut: 'mouseout',
+ topMouseOver: 'mouseover',
+ topMouseUp: 'mouseup',
+ topPaste: 'paste',
+ topPause: 'pause',
+ topPlay: 'play',
+ topPlaying: 'playing',
+ topProgress: 'progress',
+ topRateChange: 'ratechange',
+ topScroll: 'scroll',
+ topSeeked: 'seeked',
+ topSeeking: 'seeking',
+ topSelectionChange: 'selectionchange',
+ topStalled: 'stalled',
+ topSuspend: 'suspend',
+ topTextInput: 'textInput',
+ topTimeUpdate: 'timeupdate',
+ topTouchCancel: 'touchcancel',
+ topTouchEnd: 'touchend',
+ topTouchMove: 'touchmove',
+ topTouchStart: 'touchstart',
+ topTransitionEnd: getVendorPrefixedEventName('transitionend') || 'transitionend',
+ topVolumeChange: 'volumechange',
+ topWaiting: 'waiting',
+ topWheel: 'wheel'
+};
+
+/**
+* To ensure no conflicts with other potential React instances on the page
+*/
+var topListenersIDKey = '_reactListenersID' + String(Math.random()).slice(2);
+
+function getListeningForDocument(mountAt) {
+ // In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty`
+ // directly.
+ if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) {
+   mountAt[topListenersIDKey] = reactTopListenersCounter++;
+   alreadyListeningTo[mountAt[topListenersIDKey]] = {};
+ }
+ return alreadyListeningTo[mountAt[topListenersIDKey]];
+}
+
+/**
+* `ReactBrowserEventEmitter` is used to attach top-level event listeners. For
+* example:
+*
+*   EventPluginHub.putListener('myID', 'onClick', myFunction);
+*
+* This would allocate a "registration" of `('onClick', myFunction)` on 'myID'.
+*
+* @internal
+*/
+var ReactBrowserEventEmitter = _assign({}, ReactEventEmitterMixin, {
+
+ /**
+  * Injectable event backend
+  */
+ ReactEventListener: null,
+
+ injection: {
+   /**
+    * @param {object} ReactEventListener
+    */
+   injectReactEventListener: function (ReactEventListener) {
+     ReactEventListener.setHandleTopLevel(ReactBrowserEventEmitter.handleTopLevel);
+     ReactBrowserEventEmitter.ReactEventListener = ReactEventListener;
+   }
+ },
+
+ /**
+  * Sets whether or not any created callbacks should be enabled.
+  *
+  * @param {boolean} enabled True if callbacks should be enabled.
+  */
+ setEnabled: function (enabled) {
+   if (ReactBrowserEventEmitter.ReactEventListener) {
+     ReactBrowserEventEmitter.ReactEventListener.setEnabled(enabled);
+   }
+ },
+
+ /**
+  * @return {boolean} True if callbacks are enabled.
+  */
+ isEnabled: function () {
+   return !!(ReactBrowserEventEmitter.ReactEventListener && ReactBrowserEventEmitter.ReactEventListener.isEnabled());
+ },
+
+ /**
+  * We listen for bubbled touch events on the document object.
+  *
+  * Firefox v8.01 (and possibly others) exhibited strange behavior when
+  * mounting `onmousemove` events at some node that was not the document
+  * element. The symptoms were that if your mouse is not moving over something
+  * contained within that mount point (for example on the background) the
+  * top-level listeners for `onmousemove` won't be called. However, if you
+  * register the `mousemove` on the document object, then it will of course
+  * catch all `mousemove`s. This along with iOS quirks, justifies restricting
+  * top-level listeners to the document object only, at least for these
+  * movement types of events and possibly all events.
+  *
+  * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+  *
+  * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
+  * they bubble to document.
+  *
+  * @param {string} registrationName Name of listener (e.g. `onClick`).
+  * @param {object} contentDocumentHandle Document which owns the container
+  */
+ listenTo: function (registrationName, contentDocumentHandle) {
+   var mountAt = contentDocumentHandle;
+   var isListening = getListeningForDocument(mountAt);
+   var dependencies = EventPluginRegistry.registrationNameDependencies[registrationName];
+
+   for (var i = 0; i < dependencies.length; i++) {
+     var dependency = dependencies[i];
+     if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
+       if (dependency === 'topWheel') {
+         if (isEventSupported('wheel')) {
+           ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topWheel', 'wheel', mountAt);
+         } else if (isEventSupported('mousewheel')) {
+           ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topWheel', 'mousewheel', mountAt);
+         } else {
+           // Firefox needs to capture a different mouse scroll event.
+           // @see http://www.quirksmode.org/dom/events/tests/scroll.html
+           ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topWheel', 'DOMMouseScroll', mountAt);
+         }
+       } else if (dependency === 'topScroll') {
+
+         if (isEventSupported('scroll', true)) {
+           ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent('topScroll', 'scroll', mountAt);
+         } else {
+           ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topScroll', 'scroll', ReactBrowserEventEmitter.ReactEventListener.WINDOW_HANDLE);
+         }
+       } else if (dependency === 'topFocus' || dependency === 'topBlur') {
+
+         if (isEventSupported('focus', true)) {
+           ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent('topFocus', 'focus', mountAt);
+           ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent('topBlur', 'blur', mountAt);
+         } else if (isEventSupported('focusin')) {
+           // IE has `focusin` and `focusout` events which bubble.
+           // @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
+           ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topFocus', 'focusin', mountAt);
+           ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topBlur', 'focusout', mountAt);
+         }
+
+         // to make sure blur and focus event listeners are only attached once
+         isListening.topBlur = true;
+         isListening.topFocus = true;
+       } else if (topEventMapping.hasOwnProperty(dependency)) {
+         ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(dependency, topEventMapping[dependency], mountAt);
+       }
+
+       isListening[dependency] = true;
+     }
+   }
+ },
+
+ trapBubbledEvent: function (topLevelType, handlerBaseName, handle) {
+   return ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelType, handlerBaseName, handle);
+ },
+
+ trapCapturedEvent: function (topLevelType, handlerBaseName, handle) {
+   return ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(topLevelType, handlerBaseName, handle);
+ },
+
+ /**
+  * Protect against document.createEvent() returning null
+  * Some popup blocker extensions appear to do this:
+  * https://github.com/facebook/react/issues/6887
+  */
+ supportsEventPageXY: function () {
+   if (!document.createEvent) {
+     return false;
+   }
+   var ev = document.createEvent('MouseEvent');
+   return ev != null && 'pageX' in ev;
+ },
+
+ /**
+  * Listens to window scroll and resize events. We cache scroll values so that
+  * application code can access them without triggering reflows.
+  *
+  * ViewportMetrics is only used by SyntheticMouse/TouchEvent and only when
+  * pageX/pageY isn't supported (legacy browsers).
+  *
+  * NOTE: Scroll events do not bubble.
+  *
+  * @see http://www.quirksmode.org/dom/events/scroll.html
+  */
+ ensureScrollValueMonitoring: function () {
+   if (hasEventPageXY === undefined) {
+     hasEventPageXY = ReactBrowserEventEmitter.supportsEventPageXY();
+   }
+   if (!hasEventPageXY && !isMonitoringScrollValue) {
+     var refresh = ViewportMetrics.refreshScrollValues;
+     ReactBrowserEventEmitter.ReactEventListener.monitorScrollValue(refresh);
+     isMonitoringScrollValue = true;
+   }
+ }
+
+});
+
+module.exports = ReactBrowserEventEmitter;
+},{"101":101,"120":120,"122":122,"158":158,"18":18,"56":56}],27:[function(_dereq_,module,exports){
+(function (process){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactReconciler = _dereq_(75);
+
+var instantiateReactComponent = _dereq_(121);
+var KeyEscapeUtils = _dereq_(23);
+var shouldUpdateReactComponent = _dereq_(129);
+var traverseAllChildren = _dereq_(130);
+var warning = _dereq_(157);
+
+var ReactComponentTreeHook;
+
+if (typeof process !== 'undefined' && process.env && "development" === 'test') {
+ // Temporary hack.
+ // Inline requires don't work well with Jest:
+ // https://github.com/facebook/react/issues/7240
+ // Remove the inline requires when we don't need them anymore:
+ // https://github.com/facebook/react/pull/7178
+ ReactComponentTreeHook = _dereq_(132);
+}
+
+function instantiateChild(childInstances, child, name, selfDebugID) {
+ // We found a component instance.
+ var keyUnique = childInstances[name] === undefined;
+ if ("development" !== 'production') {
+   if (!ReactComponentTreeHook) {
+     ReactComponentTreeHook = _dereq_(132);
+   }
+   if (!keyUnique) {
+     "development" !== 'production' ? warning(false, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.%s', KeyEscapeUtils.unescape(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID)) : void 0;
+   }
+ }
+ if (child != null && keyUnique) {
+   childInstances[name] = instantiateReactComponent(child, true);
+ }
+}
+
+/**
+* ReactChildReconciler provides helpers for initializing or updating a set of
+* children. Its output is suitable for passing it onto ReactMultiChild which
+* does diffed reordering and insertion.
+*/
+var ReactChildReconciler = {
+ /**
+  * Generates a "mount image" for each of the supplied children. In the case
+  * of `ReactDOMComponent`, a mount image is a string of markup.
+  *
+  * @param {?object} nestedChildNodes Nested child maps.
+  * @return {?object} A set of child instances.
+  * @internal
+  */
+ instantiateChildren: function (nestedChildNodes, transaction, context, selfDebugID // 0 in production and for roots
+ ) {
+   if (nestedChildNodes == null) {
+     return null;
+   }
+   var childInstances = {};
+
+   if ("development" !== 'production') {
+     traverseAllChildren(nestedChildNodes, function (childInsts, child, name) {
+       return instantiateChild(childInsts, child, name, selfDebugID);
+     }, childInstances);
+   } else {
+     traverseAllChildren(nestedChildNodes, instantiateChild, childInstances);
+   }
+   return childInstances;
+ },
+
+ /**
+  * Updates the rendered children and returns a new set of children.
+  *
+  * @param {?object} prevChildren Previously initialized set of children.
+  * @param {?object} nextChildren Flat child element maps.
+  * @param {ReactReconcileTransaction} transaction
+  * @param {object} context
+  * @return {?object} A new set of child instances.
+  * @internal
+  */
+ updateChildren: function (prevChildren, nextChildren, mountImages, removedNodes, transaction, hostParent, hostContainerInfo, context, selfDebugID // 0 in production and for roots
+ ) {
+   // We currently don't have a way to track moves here but if we use iterators
+   // instead of for..in we can zip the iterators and check if an item has
+   // moved.
+   // TODO: If nothing has changed, return the prevChildren object so that we
+   // can quickly bailout if nothing has changed.
+   if (!nextChildren && !prevChildren) {
+     return;
+   }
+   var name;
+   var prevChild;
+   for (name in nextChildren) {
+     if (!nextChildren.hasOwnProperty(name)) {
+       continue;
+     }
+     prevChild = prevChildren && prevChildren[name];
+     var prevElement = prevChild && prevChild._currentElement;
+     var nextElement = nextChildren[name];
+     if (prevChild != null && shouldUpdateReactComponent(prevElement, nextElement)) {
+       ReactReconciler.receiveComponent(prevChild, nextElement, transaction, context);
+       nextChildren[name] = prevChild;
+     } else {
+       if (prevChild) {
+         removedNodes[name] = ReactReconciler.getHostNode(prevChild);
+         ReactReconciler.unmountComponent(prevChild, false);
+       }
+       // The child must be instantiated before it's mounted.
+       var nextChildInstance = instantiateReactComponent(nextElement, true);
+       nextChildren[name] = nextChildInstance;
+       // Creating mount image now ensures refs are resolved in right order
+       // (see https://github.com/facebook/react/pull/7101 for explanation).
+       var nextChildMountImage = ReactReconciler.mountComponent(nextChildInstance, transaction, hostParent, hostContainerInfo, context, selfDebugID);
+       mountImages.push(nextChildMountImage);
+     }
+   }
+   // Unmount children that are no longer present.
+   for (name in prevChildren) {
+     if (prevChildren.hasOwnProperty(name) && !(nextChildren && nextChildren.hasOwnProperty(name))) {
+       prevChild = prevChildren[name];
+       removedNodes[name] = ReactReconciler.getHostNode(prevChild);
+       ReactReconciler.unmountComponent(prevChild, false);
+     }
+   }
+ },
+
+ /**
+  * Unmounts all rendered children. This should be used to clean up children
+  * when this component is unmounted.
+  *
+  * @param {?object} renderedChildren Previously initialized set of children.
+  * @internal
+  */
+ unmountChildren: function (renderedChildren, safely) {
+   for (var name in renderedChildren) {
+     if (renderedChildren.hasOwnProperty(name)) {
+       var renderedChild = renderedChildren[name];
+       ReactReconciler.unmountComponent(renderedChild, safely);
+     }
+   }
+ }
+
+};
+
+module.exports = ReactChildReconciler;
+}).call(this,undefined)
+},{"121":121,"129":129,"130":130,"132":132,"157":157,"23":23,"75":75}],28:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMChildrenOperations = _dereq_(8);
+var ReactDOMIDOperations = _dereq_(38);
+
+/**
+* Abstracts away all functionality of the reconciler that requires knowledge of
+* the browser context. TODO: These callers should be refactored to avoid the
+* need for this injection.
+*/
+var ReactComponentBrowserEnvironment = {
+
+ processChildrenUpdates: ReactDOMIDOperations.dangerouslyProcessChildrenUpdates,
+
+ replaceNodeWithMarkup: DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup
+
+};
+
+module.exports = ReactComponentBrowserEnvironment;
+},{"38":38,"8":8}],29:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+var injected = false;
+
+var ReactComponentEnvironment = {
+
+ /**
+  * Optionally injectable hook for swapping out mount images in the middle of
+  * the tree.
+  */
+ replaceNodeWithMarkup: null,
+
+ /**
+  * Optionally injectable hook for processing a queue of child updates. Will
+  * later move into MultiChildComponents.
+  */
+ processChildrenUpdates: null,
+
+ injection: {
+   injectEnvironment: function (environment) {
+     !!injected ? "development" !== 'production' ? invariant(false, 'ReactCompositeComponent: injectEnvironment() can only be called once.') : _prodInvariant('104') : void 0;
+     ReactComponentEnvironment.replaceNodeWithMarkup = environment.replaceNodeWithMarkup;
+     ReactComponentEnvironment.processChildrenUpdates = environment.processChildrenUpdates;
+     injected = true;
+   }
+ }
+
+};
+
+module.exports = ReactComponentEnvironment;
+},{"125":125,"150":150}],30:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var React = _dereq_(134);
+var ReactComponentEnvironment = _dereq_(29);
+var ReactCurrentOwner = _dereq_(133);
+var ReactErrorUtils = _dereq_(55);
+var ReactInstanceMap = _dereq_(63);
+var ReactInstrumentation = _dereq_(64);
+var ReactNodeTypes = _dereq_(69);
+var ReactReconciler = _dereq_(75);
+
+if ("development" !== 'production') {
+ var checkReactTypeSpec = _dereq_(104);
+}
+
+var emptyObject = _dereq_(143);
+var invariant = _dereq_(150);
+var shallowEqual = _dereq_(156);
+var shouldUpdateReactComponent = _dereq_(129);
+var warning = _dereq_(157);
+
+var CompositeTypes = {
+ ImpureClass: 0,
+ PureClass: 1,
+ StatelessFunctional: 2
+};
+
+function StatelessComponent(Component) {}
+StatelessComponent.prototype.render = function () {
+ var Component = ReactInstanceMap.get(this)._currentElement.type;
+ var element = Component(this.props, this.context, this.updater);
+ warnIfInvalidElement(Component, element);
+ return element;
+};
+
+function warnIfInvalidElement(Component, element) {
+ if ("development" !== 'production') {
+   "development" !== 'production' ? warning(element === null || element === false || React.isValidElement(element), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component') : void 0;
+   "development" !== 'production' ? warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component') : void 0;
+ }
+}
+
+function shouldConstruct(Component) {
+ return !!(Component.prototype && Component.prototype.isReactComponent);
+}
+
+function isPureComponent(Component) {
+ return !!(Component.prototype && Component.prototype.isPureReactComponent);
+}
+
+// Separated into a function to contain deoptimizations caused by try/finally.
+function measureLifeCyclePerf(fn, debugID, timerType) {
+ if (debugID === 0) {
+   // Top-level wrappers (see ReactMount) and empty components (see
+   // ReactDOMEmptyComponent) are invisible to hooks and devtools.
+   // Both are implementation details that should go away in the future.
+   return fn();
+ }
+
+ ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);
+ try {
+   return fn();
+ } finally {
+   ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);
+ }
+}
+
+/**
+* ------------------ The Life-Cycle of a Composite Component ------------------
+*
+* - constructor: Initialization of state. The instance is now retained.
+*   - componentWillMount
+*   - render
+*   - [children's constructors]
+*     - [children's componentWillMount and render]
+*     - [children's componentDidMount]
+*     - componentDidMount
+*
+*       Update Phases:
+*       - componentWillReceiveProps (only called if parent updated)
+*       - shouldComponentUpdate
+*         - componentWillUpdate
+*           - render
+*           - [children's constructors or receive props phases]
+*         - componentDidUpdate
+*
+*     - componentWillUnmount
+*     - [children's componentWillUnmount]
+*   - [children destroyed]
+* - (destroyed): The instance is now blank, released by React and ready for GC.
+*
+* -----------------------------------------------------------------------------
+*/
+
+/**
+* An incrementing ID assigned to each component when it is mounted. This is
+* used to enforce the order in which `ReactUpdates` updates dirty components.
+*
+* @private
+*/
+var nextMountID = 1;
+
+/**
+* @lends {ReactCompositeComponent.prototype}
+*/
+var ReactCompositeComponent = {
+
+ /**
+  * Base constructor for all composite component.
+  *
+  * @param {ReactElement} element
+  * @final
+  * @internal
+  */
+ construct: function (element) {
+   this._currentElement = element;
+   this._rootNodeID = 0;
+   this._compositeType = null;
+   this._instance = null;
+   this._hostParent = null;
+   this._hostContainerInfo = null;
+
+   // See ReactUpdateQueue
+   this._updateBatchNumber = null;
+   this._pendingElement = null;
+   this._pendingStateQueue = null;
+   this._pendingReplaceState = false;
+   this._pendingForceUpdate = false;
+
+   this._renderedNodeType = null;
+   this._renderedComponent = null;
+   this._context = null;
+   this._mountOrder = 0;
+   this._topLevelWrapper = null;
+
+   // See ReactUpdates and ReactUpdateQueue.
+   this._pendingCallbacks = null;
+
+   // ComponentWillUnmount shall only be called once
+   this._calledComponentWillUnmount = false;
+
+   if ("development" !== 'production') {
+     this._warnedAboutRefsInRender = false;
+   }
+ },
+
+ /**
+  * Initializes the component, renders markup, and registers event listeners.
+  *
+  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+  * @param {?object} hostParent
+  * @param {?object} hostContainerInfo
+  * @param {?object} context
+  * @return {?string} Rendered markup to be inserted into the DOM.
+  * @final
+  * @internal
+  */
+ mountComponent: function (transaction, hostParent, hostContainerInfo, context) {
+   var _this = this;
+
+   this._context = context;
+   this._mountOrder = nextMountID++;
+   this._hostParent = hostParent;
+   this._hostContainerInfo = hostContainerInfo;
+
+   var publicProps = this._currentElement.props;
+   var publicContext = this._processContext(context);
+
+   var Component = this._currentElement.type;
+
+   var updateQueue = transaction.getUpdateQueue();
+
+   // Initialize the public class
+   var doConstruct = shouldConstruct(Component);
+   var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);
+   var renderedElement;
+
+   // Support functional components
+   if (!doConstruct && (inst == null || inst.render == null)) {
+     renderedElement = inst;
+     warnIfInvalidElement(Component, renderedElement);
+     !(inst === null || inst === false || React.isValidElement(inst)) ? "development" !== 'production' ? invariant(false, '%s(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component') : _prodInvariant('105', Component.displayName || Component.name || 'Component') : void 0;
+     inst = new StatelessComponent(Component);
+     this._compositeType = CompositeTypes.StatelessFunctional;
+   } else {
+     if (isPureComponent(Component)) {
+       this._compositeType = CompositeTypes.PureClass;
+     } else {
+       this._compositeType = CompositeTypes.ImpureClass;
+     }
+   }
+
+   if ("development" !== 'production') {
+     // This will throw later in _renderValidatedComponent, but add an early
+     // warning now to help debugging
+     if (inst.render == null) {
+       "development" !== 'production' ? warning(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', Component.displayName || Component.name || 'Component') : void 0;
+     }
+
+     var propsMutated = inst.props !== publicProps;
+     var componentName = Component.displayName || Component.name || 'Component';
+
+     "development" !== 'production' ? warning(inst.props === undefined || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + 'up the same props that your component\'s constructor was passed.', componentName, componentName) : void 0;
+   }
+
+   // These should be set up in the constructor, but as a convenience for
+   // simpler class abstractions, we set them up after the fact.
+   inst.props = publicProps;
+   inst.context = publicContext;
+   inst.refs = emptyObject;
+   inst.updater = updateQueue;
+
+   this._instance = inst;
+
+   // Store a reference from the instance back to the internal representation
+   ReactInstanceMap.set(inst, this);
+
+   if ("development" !== 'production') {
+     // Since plain JS classes are defined without any special initialization
+     // logic, we can not catch common errors early. Therefore, we have to
+     // catch them here, at initialization time, instead.
+     "development" !== 'production' ? warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component') : void 0;
+     "development" !== 'production' ? warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component') : void 0;
+     "development" !== 'production' ? warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component') : void 0;
+     "development" !== 'production' ? warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component') : void 0;
+     "development" !== 'production' ? warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component') : void 0;
+     "development" !== 'production' ? warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component') : void 0;
+     "development" !== 'production' ? warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component') : void 0;
+   }
+
+   var initialState = inst.state;
+   if (initialState === undefined) {
+     inst.state = initialState = null;
+   }
+   !(typeof initialState === 'object' && !Array.isArray(initialState)) ? "development" !== 'production' ? invariant(false, '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent') : _prodInvariant('106', this.getName() || 'ReactCompositeComponent') : void 0;
+
+   this._pendingStateQueue = null;
+   this._pendingReplaceState = false;
+   this._pendingForceUpdate = false;
+
+   var markup;
+   if (inst.unstable_handleError) {
+     markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
+   } else {
+     markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
+   }
+
+   if (inst.componentDidMount) {
+     if ("development" !== 'production') {
+       transaction.getReactMountReady().enqueue(function () {
+         measureLifeCyclePerf(function () {
+           return inst.componentDidMount();
+         }, _this._debugID, 'componentDidMount');
+       });
+     } else {
+       transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
+     }
+   }
+
+   return markup;
+ },
+
+ _constructComponent: function (doConstruct, publicProps, publicContext, updateQueue) {
+   if ("development" !== 'production') {
+     ReactCurrentOwner.current = this;
+     try {
+       return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);
+     } finally {
+       ReactCurrentOwner.current = null;
+     }
+   } else {
+     return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);
+   }
+ },
+
+ _constructComponentWithoutOwner: function (doConstruct, publicProps, publicContext, updateQueue) {
+   var Component = this._currentElement.type;
+
+   if (doConstruct) {
+     if ("development" !== 'production') {
+       return measureLifeCyclePerf(function () {
+         return new Component(publicProps, publicContext, updateQueue);
+       }, this._debugID, 'ctor');
+     } else {
+       return new Component(publicProps, publicContext, updateQueue);
+     }
+   }
+
+   // This can still be an instance in case of factory components
+   // but we'll count this as time spent rendering as the more common case.
+   if ("development" !== 'production') {
+     return measureLifeCyclePerf(function () {
+       return Component(publicProps, publicContext, updateQueue);
+     }, this._debugID, 'render');
+   } else {
+     return Component(publicProps, publicContext, updateQueue);
+   }
+ },
+
+ performInitialMountWithErrorHandling: function (renderedElement, hostParent, hostContainerInfo, transaction, context) {
+   var markup;
+   var checkpoint = transaction.checkpoint();
+   try {
+     markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
+   } catch (e) {
+     // Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint
+     transaction.rollback(checkpoint);
+     this._instance.unstable_handleError(e);
+     if (this._pendingStateQueue) {
+       this._instance.state = this._processPendingState(this._instance.props, this._instance.context);
+     }
+     checkpoint = transaction.checkpoint();
+
+     this._renderedComponent.unmountComponent(true);
+     transaction.rollback(checkpoint);
+
+     // Try again - we've informed the component about the error, so they can render an error message this time.
+     // If this throws again, the error will bubble up (and can be caught by a higher error boundary).
+     markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
+   }
+   return markup;
+ },
+
+ performInitialMount: function (renderedElement, hostParent, hostContainerInfo, transaction, context) {
+   var inst = this._instance;
+
+   var debugID = 0;
+   if ("development" !== 'production') {
+     debugID = this._debugID;
+   }
+
+   if (inst.componentWillMount) {
+     if ("development" !== 'production') {
+       measureLifeCyclePerf(function () {
+         return inst.componentWillMount();
+       }, debugID, 'componentWillMount');
+     } else {
+       inst.componentWillMount();
+     }
+     // When mounting, calls to `setState` by `componentWillMount` will set
+     // `this._pendingStateQueue` without triggering a re-render.
+     if (this._pendingStateQueue) {
+       inst.state = this._processPendingState(inst.props, inst.context);
+     }
+   }
+
+   // If not a stateless component, we now render
+   if (renderedElement === undefined) {
+     renderedElement = this._renderValidatedComponent();
+   }
+
+   var nodeType = ReactNodeTypes.getType(renderedElement);
+   this._renderedNodeType = nodeType;
+   var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */
+   );
+   this._renderedComponent = child;
+
+   var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
+
+   if ("development" !== 'production') {
+     if (debugID !== 0) {
+       var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];
+       ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);
+     }
+   }
+
+   return markup;
+ },
+
+ getHostNode: function () {
+   return ReactReconciler.getHostNode(this._renderedComponent);
+ },
+
+ /**
+  * Releases any resources allocated by `mountComponent`.
+  *
+  * @final
+  * @internal
+  */
+ unmountComponent: function (safely) {
+   if (!this._renderedComponent) {
+     return;
+   }
+
+   var inst = this._instance;
+
+   if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {
+     inst._calledComponentWillUnmount = true;
+
+     if (safely) {
+       var name = this.getName() + '.componentWillUnmount()';
+       ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst));
+     } else {
+       if ("development" !== 'production') {
+         measureLifeCyclePerf(function () {
+           return inst.componentWillUnmount();
+         }, this._debugID, 'componentWillUnmount');
+       } else {
+         inst.componentWillUnmount();
+       }
+     }
+   }
+
+   if (this._renderedComponent) {
+     ReactReconciler.unmountComponent(this._renderedComponent, safely);
+     this._renderedNodeType = null;
+     this._renderedComponent = null;
+     this._instance = null;
+   }
+
+   // Reset pending fields
+   // Even if this component is scheduled for another update in ReactUpdates,
+   // it would still be ignored because these fields are reset.
+   this._pendingStateQueue = null;
+   this._pendingReplaceState = false;
+   this._pendingForceUpdate = false;
+   this._pendingCallbacks = null;
+   this._pendingElement = null;
+
+   // These fields do not really need to be reset since this object is no
+   // longer accessible.
+   this._context = null;
+   this._rootNodeID = 0;
+   this._topLevelWrapper = null;
+
+   // Delete the reference from the instance to this internal representation
+   // which allow the internals to be properly cleaned up even if the user
+   // leaks a reference to the public instance.
+   ReactInstanceMap.remove(inst);
+
+   // Some existing components rely on inst.props even after they've been
+   // destroyed (in event handlers).
+   // TODO: inst.props = null;
+   // TODO: inst.state = null;
+   // TODO: inst.context = null;
+ },
+
+ /**
+  * Filters the context object to only contain keys specified in
+  * `contextTypes`
+  *
+  * @param {object} context
+  * @return {?object}
+  * @private
+  */
+ _maskContext: function (context) {
+   var Component = this._currentElement.type;
+   var contextTypes = Component.contextTypes;
+   if (!contextTypes) {
+     return emptyObject;
+   }
+   var maskedContext = {};
+   for (var contextName in contextTypes) {
+     maskedContext[contextName] = context[contextName];
+   }
+   return maskedContext;
+ },
+
+ /**
+  * Filters the context object to only contain keys specified in
+  * `contextTypes`, and asserts that they are valid.
+  *
+  * @param {object} context
+  * @return {?object}
+  * @private
+  */
+ _processContext: function (context) {
+   var maskedContext = this._maskContext(context);
+   if ("development" !== 'production') {
+     var Component = this._currentElement.type;
+     if (Component.contextTypes) {
+       this._checkContextTypes(Component.contextTypes, maskedContext, 'context');
+     }
+   }
+   return maskedContext;
+ },
+
+ /**
+  * @param {object} currentContext
+  * @return {object}
+  * @private
+  */
+ _processChildContext: function (currentContext) {
+   var Component = this._currentElement.type;
+   var inst = this._instance;
+   var childContext;
+
+   if (inst.getChildContext) {
+     if ("development" !== 'production') {
+       ReactInstrumentation.debugTool.onBeginProcessingChildContext();
+       try {
+         childContext = inst.getChildContext();
+       } finally {
+         ReactInstrumentation.debugTool.onEndProcessingChildContext();
+       }
+     } else {
+       childContext = inst.getChildContext();
+     }
+   }
+
+   if (childContext) {
+     !(typeof Component.childContextTypes === 'object') ? "development" !== 'production' ? invariant(false, '%s.getChildContext(): childContextTypes must be defined in order to use getChildContext().', this.getName() || 'ReactCompositeComponent') : _prodInvariant('107', this.getName() || 'ReactCompositeComponent') : void 0;
+     if ("development" !== 'production') {
+       this._checkContextTypes(Component.childContextTypes, childContext, 'childContext');
+     }
+     for (var name in childContext) {
+       !(name in Component.childContextTypes) ? "development" !== 'production' ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name) : _prodInvariant('108', this.getName() || 'ReactCompositeComponent', name) : void 0;
+     }
+     return _assign({}, currentContext, childContext);
+   }
+   return currentContext;
+ },
+
+ /**
+  * Assert that the context types are valid
+  *
+  * @param {object} typeSpecs Map of context field to a ReactPropType
+  * @param {object} values Runtime values that need to be type-checked
+  * @param {string} location e.g. "prop", "context", "child context"
+  * @private
+  */
+ _checkContextTypes: function (typeSpecs, values, location) {
+   if ("development" !== 'production') {
+     checkReactTypeSpec(typeSpecs, values, location, this.getName(), null, this._debugID);
+   }
+ },
+
+ receiveComponent: function (nextElement, transaction, nextContext) {
+   var prevElement = this._currentElement;
+   var prevContext = this._context;
+
+   this._pendingElement = null;
+
+   this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext);
+ },
+
+ /**
+  * If any of `_pendingElement`, `_pendingStateQueue`, or `_pendingForceUpdate`
+  * is set, update the component.
+  *
+  * @param {ReactReconcileTransaction} transaction
+  * @internal
+  */
+ performUpdateIfNecessary: function (transaction) {
+   if (this._pendingElement != null) {
+     ReactReconciler.receiveComponent(this, this._pendingElement, transaction, this._context);
+   } else if (this._pendingStateQueue !== null || this._pendingForceUpdate) {
+     this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context);
+   } else {
+     this._updateBatchNumber = null;
+   }
+ },
+
+ /**
+  * Perform an update to a mounted component. The componentWillReceiveProps and
+  * shouldComponentUpdate methods are called, then (assuming the update isn't
+  * skipped) the remaining update lifecycle methods are called and the DOM
+  * representation is updated.
+  *
+  * By default, this implements React's rendering and reconciliation algorithm.
+  * Sophisticated clients may wish to override this.
+  *
+  * @param {ReactReconcileTransaction} transaction
+  * @param {ReactElement} prevParentElement
+  * @param {ReactElement} nextParentElement
+  * @internal
+  * @overridable
+  */
+ updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {
+   var inst = this._instance;
+   !(inst != null) ? "development" !== 'production' ? invariant(false, 'Attempted to update component `%s` that has already been unmounted (or failed to mount).', this.getName() || 'ReactCompositeComponent') : _prodInvariant('136', this.getName() || 'ReactCompositeComponent') : void 0;
+
+   var willReceive = false;
+   var nextContext;
+
+   // Determine if the context has changed or not
+   if (this._context === nextUnmaskedContext) {
+     nextContext = inst.context;
+   } else {
+     nextContext = this._processContext(nextUnmaskedContext);
+     willReceive = true;
+   }
+
+   var prevProps = prevParentElement.props;
+   var nextProps = nextParentElement.props;
+
+   // Not a simple state update but a props update
+   if (prevParentElement !== nextParentElement) {
+     willReceive = true;
+   }
+
+   // An update here will schedule an update but immediately set
+   // _pendingStateQueue which will ensure that any state updates gets
+   // immediately reconciled instead of waiting for the next batch.
+   if (willReceive && inst.componentWillReceiveProps) {
+     if ("development" !== 'production') {
+       measureLifeCyclePerf(function () {
+         return inst.componentWillReceiveProps(nextProps, nextContext);
+       }, this._debugID, 'componentWillReceiveProps');
+     } else {
+       inst.componentWillReceiveProps(nextProps, nextContext);
+     }
+   }
+
+   var nextState = this._processPendingState(nextProps, nextContext);
+   var shouldUpdate = true;
+
+   if (!this._pendingForceUpdate) {
+     if (inst.shouldComponentUpdate) {
+       if ("development" !== 'production') {
+         shouldUpdate = measureLifeCyclePerf(function () {
+           return inst.shouldComponentUpdate(nextProps, nextState, nextContext);
+         }, this._debugID, 'shouldComponentUpdate');
+       } else {
+         shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
+       }
+     } else {
+       if (this._compositeType === CompositeTypes.PureClass) {
+         shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);
+       }
+     }
+   }
+
+   if ("development" !== 'production') {
+     "development" !== 'production' ? warning(shouldUpdate !== undefined, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent') : void 0;
+   }
+
+   this._updateBatchNumber = null;
+   if (shouldUpdate) {
+     this._pendingForceUpdate = false;
+     // Will set `this.props`, `this.state` and `this.context`.
+     this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);
+   } else {
+     // If it's determined that a component should not update, we still want
+     // to set props and state but we shortcut the rest of the update.
+     this._currentElement = nextParentElement;
+     this._context = nextUnmaskedContext;
+     inst.props = nextProps;
+     inst.state = nextState;
+     inst.context = nextContext;
+   }
+ },
+
+ _processPendingState: function (props, context) {
+   var inst = this._instance;
+   var queue = this._pendingStateQueue;
+   var replace = this._pendingReplaceState;
+   this._pendingReplaceState = false;
+   this._pendingStateQueue = null;
+
+   if (!queue) {
+     return inst.state;
+   }
+
+   if (replace && queue.length === 1) {
+     return queue[0];
+   }
+
+   var nextState = _assign({}, replace ? queue[0] : inst.state);
+   for (var i = replace ? 1 : 0; i < queue.length; i++) {
+     var partial = queue[i];
+     _assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);
+   }
+
+   return nextState;
+ },
+
+ /**
+  * Merges new props and state, notifies delegate methods of update and
+  * performs update.
+  *
+  * @param {ReactElement} nextElement Next element
+  * @param {object} nextProps Next public object to set as properties.
+  * @param {?object} nextState Next object to set as state.
+  * @param {?object} nextContext Next public object to set as context.
+  * @param {ReactReconcileTransaction} transaction
+  * @param {?object} unmaskedContext
+  * @private
+  */
+ _performComponentUpdate: function (nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) {
+   var _this2 = this;
+
+   var inst = this._instance;
+
+   var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);
+   var prevProps;
+   var prevState;
+   var prevContext;
+   if (hasComponentDidUpdate) {
+     prevProps = inst.props;
+     prevState = inst.state;
+     prevContext = inst.context;
+   }
+
+   if (inst.componentWillUpdate) {
+     if ("development" !== 'production') {
+       measureLifeCyclePerf(function () {
+         return inst.componentWillUpdate(nextProps, nextState, nextContext);
+       }, this._debugID, 'componentWillUpdate');
+     } else {
+       inst.componentWillUpdate(nextProps, nextState, nextContext);
+     }
+   }
+
+   this._currentElement = nextElement;
+   this._context = unmaskedContext;
+   inst.props = nextProps;
+   inst.state = nextState;
+   inst.context = nextContext;
+
+   this._updateRenderedComponent(transaction, unmaskedContext);
+
+   if (hasComponentDidUpdate) {
+     if ("development" !== 'production') {
+       transaction.getReactMountReady().enqueue(function () {
+         measureLifeCyclePerf(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), _this2._debugID, 'componentDidUpdate');
+       });
+     } else {
+       transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst);
+     }
+   }
+ },
+
+ /**
+  * Call the component's `render` method and update the DOM accordingly.
+  *
+  * @param {ReactReconcileTransaction} transaction
+  * @internal
+  */
+ _updateRenderedComponent: function (transaction, context) {
+   var prevComponentInstance = this._renderedComponent;
+   var prevRenderedElement = prevComponentInstance._currentElement;
+   var nextRenderedElement = this._renderValidatedComponent();
+
+   var debugID = 0;
+   if ("development" !== 'production') {
+     debugID = this._debugID;
+   }
+
+   if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
+     ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context));
+   } else {
+     var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);
+     ReactReconciler.unmountComponent(prevComponentInstance, false);
+
+     var nodeType = ReactNodeTypes.getType(nextRenderedElement);
+     this._renderedNodeType = nodeType;
+     var child = this._instantiateReactComponent(nextRenderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */
+     );
+     this._renderedComponent = child;
+
+     var nextMarkup = ReactReconciler.mountComponent(child, transaction, this._hostParent, this._hostContainerInfo, this._processChildContext(context), debugID);
+
+     if ("development" !== 'production') {
+       if (debugID !== 0) {
+         var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];
+         ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);
+       }
+     }
+
+     this._replaceNodeWithMarkup(oldHostNode, nextMarkup, prevComponentInstance);
+   }
+ },
+
+ /**
+  * Overridden in shallow rendering.
+  *
+  * @protected
+  */
+ _replaceNodeWithMarkup: function (oldHostNode, nextMarkup, prevInstance) {
+   ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance);
+ },
+
+ /**
+  * @protected
+  */
+ _renderValidatedComponentWithoutOwnerOrContext: function () {
+   var inst = this._instance;
+   var renderedElement;
+
+   if ("development" !== 'production') {
+     renderedElement = measureLifeCyclePerf(function () {
+       return inst.render();
+     }, this._debugID, 'render');
+   } else {
+     renderedElement = inst.render();
+   }
+
+   if ("development" !== 'production') {
+     // We allow auto-mocks to proceed as if they're returning null.
+     if (renderedElement === undefined && inst.render._isMockFunction) {
+       // This is probably bad practice. Consider warning here and
+       // deprecating this convenience.
+       renderedElement = null;
+     }
+   }
+
+   return renderedElement;
+ },
+
+ /**
+  * @private
+  */
+ _renderValidatedComponent: function () {
+   var renderedElement;
+   if ("development" !== 'production' || this._compositeType !== CompositeTypes.StatelessFunctional) {
+     ReactCurrentOwner.current = this;
+     try {
+       renderedElement = this._renderValidatedComponentWithoutOwnerOrContext();
+     } finally {
+       ReactCurrentOwner.current = null;
+     }
+   } else {
+     renderedElement = this._renderValidatedComponentWithoutOwnerOrContext();
+   }
+   !(
+   // TODO: An `isValidNode` function would probably be more appropriate
+   renderedElement === null || renderedElement === false || React.isValidElement(renderedElement)) ? "development" !== 'production' ? invariant(false, '%s.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.', this.getName() || 'ReactCompositeComponent') : _prodInvariant('109', this.getName() || 'ReactCompositeComponent') : void 0;
+
+   return renderedElement;
+ },
+
+ /**
+  * Lazily allocates the refs object and stores `component` as `ref`.
+  *
+  * @param {string} ref Reference name.
+  * @param {component} component Component to store as `ref`.
+  * @final
+  * @private
+  */
+ attachRef: function (ref, component) {
+   var inst = this.getPublicInstance();
+   !(inst != null) ? "development" !== 'production' ? invariant(false, 'Stateless function components cannot have refs.') : _prodInvariant('110') : void 0;
+   var publicComponentInstance = component.getPublicInstance();
+   if ("development" !== 'production') {
+     var componentName = component && component.getName ? component.getName() : 'a component';
+     "development" !== 'production' ? warning(publicComponentInstance != null || component._compositeType !== CompositeTypes.StatelessFunctional, 'Stateless function components cannot be given refs ' + '(See ref "%s" in %s created by %s). ' + 'Attempts to access this ref will fail.', ref, componentName, this.getName()) : void 0;
+   }
+   var refs = inst.refs === emptyObject ? inst.refs = {} : inst.refs;
+   refs[ref] = publicComponentInstance;
+ },
+
+ /**
+  * Detaches a reference name.
+  *
+  * @param {string} ref Name to dereference.
+  * @final
+  * @private
+  */
+ detachRef: function (ref) {
+   var refs = this.getPublicInstance().refs;
+   delete refs[ref];
+ },
+
+ /**
+  * Get a text description of the component that can be used to identify it
+  * in error messages.
+  * @return {string} The name or null.
+  * @internal
+  */
+ getName: function () {
+   var type = this._currentElement.type;
+   var constructor = this._instance && this._instance.constructor;
+   return type.displayName || constructor && constructor.displayName || type.name || constructor && constructor.name || null;
+ },
+
+ /**
+  * Get the publicly accessible representation of this component - i.e. what
+  * is exposed by refs and returned by render. Can be null for stateless
+  * components.
+  *
+  * @return {ReactComponent} the public component instance.
+  * @internal
+  */
+ getPublicInstance: function () {
+   var inst = this._instance;
+   if (this._compositeType === CompositeTypes.StatelessFunctional) {
+     return null;
+   }
+   return inst;
+ },
+
+ // Stub
+ _instantiateReactComponent: null
+
+};
+
+module.exports = ReactCompositeComponent;
+},{"104":104,"125":125,"129":129,"133":133,"134":134,"143":143,"150":150,"156":156,"157":157,"158":158,"29":29,"55":55,"63":63,"64":64,"69":69,"75":75}],31:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/
+
+'use strict';
+
+var ReactDOMComponentTree = _dereq_(34);
+var ReactDefaultInjection = _dereq_(52);
+var ReactMount = _dereq_(67);
+var ReactReconciler = _dereq_(75);
+var ReactUpdates = _dereq_(82);
+var ReactVersion = _dereq_(83);
+
+var findDOMNode = _dereq_(108);
+var getHostComponentFromComposite = _dereq_(115);
+var renderSubtreeIntoContainer = _dereq_(126);
+var warning = _dereq_(157);
+
+ReactDefaultInjection.inject();
+
+var ReactDOM = {
+ findDOMNode: findDOMNode,
+ render: ReactMount.render,
+ unmountComponentAtNode: ReactMount.unmountComponentAtNode,
+ version: ReactVersion,
+
+ /* eslint-disable camelcase */
+ unstable_batchedUpdates: ReactUpdates.batchedUpdates,
+ unstable_renderSubtreeIntoContainer: renderSubtreeIntoContainer
+};
+
+// Inject the runtime into a devtools global hook regardless of browser.
+// Allows for debugging when the hook is injected on the page.
+if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {
+ __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
+   ComponentTree: {
+     getClosestInstanceFromNode: ReactDOMComponentTree.getClosestInstanceFromNode,
+     getNodeFromInstance: function (inst) {
+       // inst is an internal instance (but could be a composite)
+       if (inst._renderedComponent) {
+         inst = getHostComponentFromComposite(inst);
+       }
+       if (inst) {
+         return ReactDOMComponentTree.getNodeFromInstance(inst);
+       } else {
+         return null;
+       }
+     }
+   },
+   Mount: ReactMount,
+   Reconciler: ReactReconciler
+ });
+}
+
+if ("development" !== 'production') {
+ var ExecutionEnvironment = _dereq_(136);
+ if (ExecutionEnvironment.canUseDOM && window.top === window.self) {
+
+   // First check if devtools is not installed
+   if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
+     // If we're in Chrome or Firefox, provide a download link if not installed.
+     if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) {
+       // Firefox does not have the issue with devtools loaded over file://
+       var showFileUrlMessage = window.location.protocol.indexOf('http') === -1 && navigator.userAgent.indexOf('Firefox') === -1;
+       console.debug('Download the React DevTools ' + (showFileUrlMessage ? 'and use an HTTP server (instead of a file: URL) ' : '') + 'for a better development experience: ' + 'https://fb.me/react-devtools');
+     }
+   }
+
+   var testFunc = function testFn() {};
+   "development" !== 'production' ? warning((testFunc.name || testFunc.toString()).indexOf('testFn') !== -1, 'It looks like you\'re using a minified copy of the development build ' + 'of React. When deploying React apps to production, make sure to use ' + 'the production build which skips development warnings and is faster. ' + 'See https://fb.me/react-minification for more details.') : void 0;
+
+   // If we're in IE8, check to see if we are in compatibility mode and provide
+   // information on preventing compatibility mode
+   var ieCompatibilityMode = document.documentMode && document.documentMode < 8;
+
+   "development" !== 'production' ? warning(!ieCompatibilityMode, 'Internet Explorer is running in compatibility mode; please add the ' + 'following tag to your HTML to prevent this from happening: ' + '<meta http-equiv="X-UA-Compatible" content="IE=edge" />') : void 0;
+
+   var expectedFeatures = [
+   // shims
+   Array.isArray, Array.prototype.every, Array.prototype.forEach, Array.prototype.indexOf, Array.prototype.map, Date.now, Function.prototype.bind, Object.keys, String.prototype.trim];
+
+   for (var i = 0; i < expectedFeatures.length; i++) {
+     if (!expectedFeatures[i]) {
+       "development" !== 'production' ? warning(false, 'One or more ES5 shims expected by React are not available: ' + 'https://fb.me/react-warning-polyfills') : void 0;
+       break;
+     }
+   }
+ }
+}
+
+if ("development" !== 'production') {
+ var ReactInstrumentation = _dereq_(64);
+ var ReactDOMUnknownPropertyHook = _dereq_(49);
+ var ReactDOMNullInputValuePropHook = _dereq_(41);
+ var ReactDOMInvalidARIAHook = _dereq_(40);
+
+ ReactInstrumentation.debugTool.addHook(ReactDOMUnknownPropertyHook);
+ ReactInstrumentation.debugTool.addHook(ReactDOMNullInputValuePropHook);
+ ReactInstrumentation.debugTool.addHook(ReactDOMInvalidARIAHook);
+}
+
+module.exports = ReactDOM;
+},{"108":108,"115":115,"126":126,"136":136,"157":157,"34":34,"40":40,"41":41,"49":49,"52":52,"64":64,"67":67,"75":75,"82":82,"83":83}],32:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* global hasOwnProperty:true */
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var AutoFocusUtils = _dereq_(2);
+var CSSPropertyOperations = _dereq_(5);
+var DOMLazyTree = _dereq_(9);
+var DOMNamespaces = _dereq_(10);
+var DOMProperty = _dereq_(11);
+var DOMPropertyOperations = _dereq_(12);
+var EventPluginHub = _dereq_(17);
+var EventPluginRegistry = _dereq_(18);
+var ReactBrowserEventEmitter = _dereq_(26);
+var ReactDOMComponentFlags = _dereq_(33);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactDOMInput = _dereq_(39);
+var ReactDOMOption = _dereq_(42);
+var ReactDOMSelect = _dereq_(43);
+var ReactDOMTextarea = _dereq_(46);
+var ReactInstrumentation = _dereq_(64);
+var ReactMultiChild = _dereq_(68);
+var ReactServerRenderingTransaction = _dereq_(77);
+
+var emptyFunction = _dereq_(142);
+var escapeTextContentForBrowser = _dereq_(107);
+var invariant = _dereq_(150);
+var isEventSupported = _dereq_(122);
+var shallowEqual = _dereq_(156);
+var validateDOMNesting = _dereq_(131);
+var warning = _dereq_(157);
+
+var Flags = ReactDOMComponentFlags;
+var deleteListener = EventPluginHub.deleteListener;
+var getNode = ReactDOMComponentTree.getNodeFromInstance;
+var listenTo = ReactBrowserEventEmitter.listenTo;
+var registrationNameModules = EventPluginRegistry.registrationNameModules;
+
+// For quickly matching children type, to test if can be treated as content.
+var CONTENT_TYPES = { 'string': true, 'number': true };
+
+var STYLE = 'style';
+var HTML = '__html';
+var RESERVED_PROPS = {
+ children: null,
+ dangerouslySetInnerHTML: null,
+ suppressContentEditableWarning: null
+};
+
+// Node type for document fragments (Node.DOCUMENT_FRAGMENT_NODE).
+var DOC_FRAGMENT_TYPE = 11;
+
+function getDeclarationErrorAddendum(internalInstance) {
+ if (internalInstance) {
+   var owner = internalInstance._currentElement._owner || null;
+   if (owner) {
+     var name = owner.getName();
+     if (name) {
+       return ' This DOM node was rendered by `' + name + '`.';
+     }
+   }
+ }
+ return '';
+}
+
+function friendlyStringify(obj) {
+ if (typeof obj === 'object') {
+   if (Array.isArray(obj)) {
+     return '[' + obj.map(friendlyStringify).join(', ') + ']';
+   } else {
+     var pairs = [];
+     for (var key in obj) {
+       if (Object.prototype.hasOwnProperty.call(obj, key)) {
+         var keyEscaped = /^[a-z$_][\w$_]*$/i.test(key) ? key : JSON.stringify(key);
+         pairs.push(keyEscaped + ': ' + friendlyStringify(obj[key]));
+       }
+     }
+     return '{' + pairs.join(', ') + '}';
+   }
+ } else if (typeof obj === 'string') {
+   return JSON.stringify(obj);
+ } else if (typeof obj === 'function') {
+   return '[function object]';
+ }
+ // Differs from JSON.stringify in that undefined because undefined and that
+ // inf and nan don't become null
+ return String(obj);
+}
+
+var styleMutationWarning = {};
+
+function checkAndWarnForMutatedStyle(style1, style2, component) {
+ if (style1 == null || style2 == null) {
+   return;
+ }
+ if (shallowEqual(style1, style2)) {
+   return;
+ }
+
+ var componentName = component._tag;
+ var owner = component._currentElement._owner;
+ var ownerName;
+ if (owner) {
+   ownerName = owner.getName();
+ }
+
+ var hash = ownerName + '|' + componentName;
+
+ if (styleMutationWarning.hasOwnProperty(hash)) {
+   return;
+ }
+
+ styleMutationWarning[hash] = true;
+
+ "development" !== 'production' ? warning(false, '`%s` was passed a style object that has previously been mutated. ' + 'Mutating `style` is deprecated. Consider cloning it beforehand. Check ' + 'the `render` %s. Previous style: %s. Mutated style: %s.', componentName, owner ? 'of `' + ownerName + '`' : 'using <' + componentName + '>', friendlyStringify(style1), friendlyStringify(style2)) : void 0;
+}
+
+/**
+* @param {object} component
+* @param {?object} props
+*/
+function assertValidProps(component, props) {
+ if (!props) {
+   return;
+ }
+ // Note the use of `==` which checks for null or undefined.
+ if (voidElementTags[component._tag]) {
+   !(props.children == null && props.dangerouslySetInnerHTML == null) ? "development" !== 'production' ? invariant(false, '%s is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.%s', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : _prodInvariant('137', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : void 0;
+ }
+ if (props.dangerouslySetInnerHTML != null) {
+   !(props.children == null) ? "development" !== 'production' ? invariant(false, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.') : _prodInvariant('60') : void 0;
+   !(typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML) ? "development" !== 'production' ? invariant(false, '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.') : _prodInvariant('61') : void 0;
+ }
+ if ("development" !== 'production') {
+   "development" !== 'production' ? warning(props.innerHTML == null, 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.') : void 0;
+   "development" !== 'production' ? warning(props.suppressContentEditableWarning || !props.contentEditable || props.children == null, 'A component is `contentEditable` and contains `children` managed by ' + 'React. It is now your responsibility to guarantee that none of ' + 'those nodes are unexpectedly modified or duplicated. This is ' + 'probably not intentional.') : void 0;
+   "development" !== 'production' ? warning(props.onFocusIn == null && props.onFocusOut == null, 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + 'are not needed/supported by React.') : void 0;
+ }
+ !(props.style == null || typeof props.style === 'object') ? "development" !== 'production' ? invariant(false, 'The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + \'em\'}} when using JSX.%s', getDeclarationErrorAddendum(component)) : _prodInvariant('62', getDeclarationErrorAddendum(component)) : void 0;
+}
+
+function enqueuePutListener(inst, registrationName, listener, transaction) {
+ if (transaction instanceof ReactServerRenderingTransaction) {
+   return;
+ }
+ if ("development" !== 'production') {
+   // IE8 has no API for event capturing and the `onScroll` event doesn't
+   // bubble.
+   "development" !== 'production' ? warning(registrationName !== 'onScroll' || isEventSupported('scroll', true), 'This browser doesn\'t support the `onScroll` event') : void 0;
+ }
+ var containerInfo = inst._hostContainerInfo;
+ var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
+ var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
+ listenTo(registrationName, doc);
+ transaction.getReactMountReady().enqueue(putListener, {
+   inst: inst,
+   registrationName: registrationName,
+   listener: listener
+ });
+}
+
+function putListener() {
+ var listenerToPut = this;
+ EventPluginHub.putListener(listenerToPut.inst, listenerToPut.registrationName, listenerToPut.listener);
+}
+
+function inputPostMount() {
+ var inst = this;
+ ReactDOMInput.postMountWrapper(inst);
+}
+
+function textareaPostMount() {
+ var inst = this;
+ ReactDOMTextarea.postMountWrapper(inst);
+}
+
+function optionPostMount() {
+ var inst = this;
+ ReactDOMOption.postMountWrapper(inst);
+}
+
+var setAndValidateContentChildDev = emptyFunction;
+if ("development" !== 'production') {
+ setAndValidateContentChildDev = function (content) {
+   var hasExistingContent = this._contentDebugID != null;
+   var debugID = this._debugID;
+   // This ID represents the inlined child that has no backing instance:
+   var contentDebugID = -debugID;
+
+   if (content == null) {
+     if (hasExistingContent) {
+       ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
+     }
+     this._contentDebugID = null;
+     return;
+   }
+
+   validateDOMNesting(null, String(content), this, this._ancestorInfo);
+   this._contentDebugID = contentDebugID;
+   if (hasExistingContent) {
+     ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content);
+     ReactInstrumentation.debugTool.onUpdateComponent(contentDebugID);
+   } else {
+     ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID, content, debugID);
+     ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
+     ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
+   }
+ };
+}
+
+// There are so many media events, it makes sense to just
+// maintain a list rather than create a `trapBubbledEvent` for each
+var mediaEvents = {
+ topAbort: 'abort',
+ topCanPlay: 'canplay',
+ topCanPlayThrough: 'canplaythrough',
+ topDurationChange: 'durationchange',
+ topEmptied: 'emptied',
+ topEncrypted: 'encrypted',
+ topEnded: 'ended',
+ topError: 'error',
+ topLoadedData: 'loadeddata',
+ topLoadedMetadata: 'loadedmetadata',
+ topLoadStart: 'loadstart',
+ topPause: 'pause',
+ topPlay: 'play',
+ topPlaying: 'playing',
+ topProgress: 'progress',
+ topRateChange: 'ratechange',
+ topSeeked: 'seeked',
+ topSeeking: 'seeking',
+ topStalled: 'stalled',
+ topSuspend: 'suspend',
+ topTimeUpdate: 'timeupdate',
+ topVolumeChange: 'volumechange',
+ topWaiting: 'waiting'
+};
+
+function trapBubbledEventsLocal() {
+ var inst = this;
+ // If a component renders to null or if another component fatals and causes
+ // the state of the tree to be corrupted, `node` here can be null.
+ !inst._rootNodeID ? "development" !== 'production' ? invariant(false, 'Must be mounted to trap events') : _prodInvariant('63') : void 0;
+ var node = getNode(inst);
+ !node ? "development" !== 'production' ? invariant(false, 'trapBubbledEvent(...): Requires node to be rendered.') : _prodInvariant('64') : void 0;
+
+ switch (inst._tag) {
+   case 'iframe':
+   case 'object':
+     inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', node)];
+     break;
+   case 'video':
+   case 'audio':
+
+     inst._wrapperState.listeners = [];
+     // Create listener for each media event
+     for (var event in mediaEvents) {
+       if (mediaEvents.hasOwnProperty(event)) {
+         inst._wrapperState.listeners.push(ReactBrowserEventEmitter.trapBubbledEvent(event, mediaEvents[event], node));
+       }
+     }
+     break;
+   case 'source':
+     inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topError', 'error', node)];
+     break;
+   case 'img':
+     inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topError', 'error', node), ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', node)];
+     break;
+   case 'form':
+     inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topReset', 'reset', node), ReactBrowserEventEmitter.trapBubbledEvent('topSubmit', 'submit', node)];
+     break;
+   case 'input':
+   case 'select':
+   case 'textarea':
+     inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topInvalid', 'invalid', node)];
+     break;
+ }
+}
+
+function postUpdateSelectWrapper() {
+ ReactDOMSelect.postUpdateWrapper(this);
+}
+
+// For HTML, certain tags should omit their close tag. We keep a whitelist for
+// those special-case tags.
+
+var omittedCloseTags = {
+ 'area': true,
+ 'base': true,
+ 'br': true,
+ 'col': true,
+ 'embed': true,
+ 'hr': true,
+ 'img': true,
+ 'input': true,
+ 'keygen': true,
+ 'link': true,
+ 'meta': true,
+ 'param': true,
+ 'source': true,
+ 'track': true,
+ 'wbr': true
+};
+
+var newlineEatingTags = {
+ 'listing': true,
+ 'pre': true,
+ 'textarea': true
+};
+
+// For HTML, certain tags cannot have children. This has the same purpose as
+// `omittedCloseTags` except that `menuitem` should still have its closing tag.
+
+var voidElementTags = _assign({
+ 'menuitem': true
+}, omittedCloseTags);
+
+// We accept any tag to be rendered but since this gets injected into arbitrary
+// HTML, we want to make sure that it's a safe tag.
+// http://www.w3.org/TR/REC-xml/#NT-Name
+
+var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
+var validatedTagCache = {};
+var hasOwnProperty = {}.hasOwnProperty;
+
+function validateDangerousTag(tag) {
+ if (!hasOwnProperty.call(validatedTagCache, tag)) {
+   !VALID_TAG_REGEX.test(tag) ? "development" !== 'production' ? invariant(false, 'Invalid tag: %s', tag) : _prodInvariant('65', tag) : void 0;
+   validatedTagCache[tag] = true;
+ }
+}
+
+function isCustomComponent(tagName, props) {
+ return tagName.indexOf('-') >= 0 || props.is != null;
+}
+
+var globalIdCounter = 1;
+
+/**
+* Creates a new React class that is idempotent and capable of containing other
+* React components. It accepts event listeners and DOM properties that are
+* valid according to `DOMProperty`.
+*
+*  - Event listeners: `onClick`, `onMouseDown`, etc.
+*  - DOM properties: `className`, `name`, `title`, etc.
+*
+* The `style` property functions differently from the DOM API. It accepts an
+* object mapping of style properties to values.
+*
+* @constructor ReactDOMComponent
+* @extends ReactMultiChild
+*/
+function ReactDOMComponent(element) {
+ var tag = element.type;
+ validateDangerousTag(tag);
+ this._currentElement = element;
+ this._tag = tag.toLowerCase();
+ this._namespaceURI = null;
+ this._renderedChildren = null;
+ this._previousStyle = null;
+ this._previousStyleCopy = null;
+ this._hostNode = null;
+ this._hostParent = null;
+ this._rootNodeID = 0;
+ this._domID = 0;
+ this._hostContainerInfo = null;
+ this._wrapperState = null;
+ this._topLevelWrapper = null;
+ this._flags = 0;
+ if ("development" !== 'production') {
+   this._ancestorInfo = null;
+   setAndValidateContentChildDev.call(this, null);
+ }
+}
+
+ReactDOMComponent.displayName = 'ReactDOMComponent';
+
+ReactDOMComponent.Mixin = {
+
+ /**
+  * Generates root tag markup then recurses. This method has side effects and
+  * is not idempotent.
+  *
+  * @internal
+  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+  * @param {?ReactDOMComponent} the parent component instance
+  * @param {?object} info about the host container
+  * @param {object} context
+  * @return {string} The computed markup.
+  */
+ mountComponent: function (transaction, hostParent, hostContainerInfo, context) {
+   this._rootNodeID = globalIdCounter++;
+   this._domID = hostContainerInfo._idCounter++;
+   this._hostParent = hostParent;
+   this._hostContainerInfo = hostContainerInfo;
+
+   var props = this._currentElement.props;
+
+   switch (this._tag) {
+     case 'audio':
+     case 'form':
+     case 'iframe':
+     case 'img':
+     case 'link':
+     case 'object':
+     case 'source':
+     case 'video':
+       this._wrapperState = {
+         listeners: null
+       };
+       transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+       break;
+     case 'input':
+       ReactDOMInput.mountWrapper(this, props, hostParent);
+       props = ReactDOMInput.getHostProps(this, props);
+       transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+       break;
+     case 'option':
+       ReactDOMOption.mountWrapper(this, props, hostParent);
+       props = ReactDOMOption.getHostProps(this, props);
+       break;
+     case 'select':
+       ReactDOMSelect.mountWrapper(this, props, hostParent);
+       props = ReactDOMSelect.getHostProps(this, props);
+       transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+       break;
+     case 'textarea':
+       ReactDOMTextarea.mountWrapper(this, props, hostParent);
+       props = ReactDOMTextarea.getHostProps(this, props);
+       transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+       break;
+   }
+
+   assertValidProps(this, props);
+
+   // We create tags in the namespace of their parent container, except HTML
+   // tags get no namespace.
+   var namespaceURI;
+   var parentTag;
+   if (hostParent != null) {
+     namespaceURI = hostParent._namespaceURI;
+     parentTag = hostParent._tag;
+   } else if (hostContainerInfo._tag) {
+     namespaceURI = hostContainerInfo._namespaceURI;
+     parentTag = hostContainerInfo._tag;
+   }
+   if (namespaceURI == null || namespaceURI === DOMNamespaces.svg && parentTag === 'foreignobject') {
+     namespaceURI = DOMNamespaces.html;
+   }
+   if (namespaceURI === DOMNamespaces.html) {
+     if (this._tag === 'svg') {
+       namespaceURI = DOMNamespaces.svg;
+     } else if (this._tag === 'math') {
+       namespaceURI = DOMNamespaces.mathml;
+     }
+   }
+   this._namespaceURI = namespaceURI;
+
+   if ("development" !== 'production') {
+     var parentInfo;
+     if (hostParent != null) {
+       parentInfo = hostParent._ancestorInfo;
+     } else if (hostContainerInfo._tag) {
+       parentInfo = hostContainerInfo._ancestorInfo;
+     }
+     if (parentInfo) {
+       // parentInfo should always be present except for the top-level
+       // component when server rendering
+       validateDOMNesting(this._tag, null, this, parentInfo);
+     }
+     this._ancestorInfo = validateDOMNesting.updatedAncestorInfo(parentInfo, this._tag, this);
+   }
+
+   var mountImage;
+   if (transaction.useCreateElement) {
+     var ownerDocument = hostContainerInfo._ownerDocument;
+     var el;
+     if (namespaceURI === DOMNamespaces.html) {
+       if (this._tag === 'script') {
+         // Create the script via .innerHTML so its "parser-inserted" flag is
+         // set to true and it does not execute
+         var div = ownerDocument.createElement('div');
+         var type = this._currentElement.type;
+         div.innerHTML = '<' + type + '></' + type + '>';
+         el = div.removeChild(div.firstChild);
+       } else if (props.is) {
+         el = ownerDocument.createElement(this._currentElement.type, props.is);
+       } else {
+         // Separate else branch instead of using `props.is || undefined` above becuase of a Firefox bug.
+         // See discussion in https://github.com/facebook/react/pull/6896
+         // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
+         el = ownerDocument.createElement(this._currentElement.type);
+       }
+     } else {
+       el = ownerDocument.createElementNS(namespaceURI, this._currentElement.type);
+     }
+     ReactDOMComponentTree.precacheNode(this, el);
+     this._flags |= Flags.hasCachedChildNodes;
+     if (!this._hostParent) {
+       DOMPropertyOperations.setAttributeForRoot(el);
+     }
+     this._updateDOMProperties(null, props, transaction);
+     var lazyTree = DOMLazyTree(el);
+     this._createInitialChildren(transaction, props, context, lazyTree);
+     mountImage = lazyTree;
+   } else {
+     var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);
+     var tagContent = this._createContentMarkup(transaction, props, context);
+     if (!tagContent && omittedCloseTags[this._tag]) {
+       mountImage = tagOpen + '/>';
+     } else {
+       mountImage = tagOpen + '>' + tagContent + '</' + this._currentElement.type + '>';
+     }
+   }
+
+   switch (this._tag) {
+     case 'input':
+       transaction.getReactMountReady().enqueue(inputPostMount, this);
+       if (props.autoFocus) {
+         transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this);
+       }
+       break;
+     case 'textarea':
+       transaction.getReactMountReady().enqueue(textareaPostMount, this);
+       if (props.autoFocus) {
+         transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this);
+       }
+       break;
+     case 'select':
+       if (props.autoFocus) {
+         transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this);
+       }
+       break;
+     case 'button':
+       if (props.autoFocus) {
+         transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this);
+       }
+       break;
+     case 'option':
+       transaction.getReactMountReady().enqueue(optionPostMount, this);
+       break;
+   }
+
+   return mountImage;
+ },
+
+ /**
+  * Creates markup for the open tag and all attributes.
+  *
+  * This method has side effects because events get registered.
+  *
+  * Iterating over object properties is faster than iterating over arrays.
+  * @see http://jsperf.com/obj-vs-arr-iteration
+  *
+  * @private
+  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+  * @param {object} props
+  * @return {string} Markup of opening tag.
+  */
+ _createOpenTagMarkupAndPutListeners: function (transaction, props) {
+   var ret = '<' + this._currentElement.type;
+
+   for (var propKey in props) {
+     if (!props.hasOwnProperty(propKey)) {
+       continue;
+     }
+     var propValue = props[propKey];
+     if (propValue == null) {
+       continue;
+     }
+     if (registrationNameModules.hasOwnProperty(propKey)) {
+       if (propValue) {
+         enqueuePutListener(this, propKey, propValue, transaction);
+       }
+     } else {
+       if (propKey === STYLE) {
+         if (propValue) {
+           if ("development" !== 'production') {
+             // See `_updateDOMProperties`. style block
+             this._previousStyle = propValue;
+           }
+           propValue = this._previousStyleCopy = _assign({}, props.style);
+         }
+         propValue = CSSPropertyOperations.createMarkupForStyles(propValue, this);
+       }
+       var markup = null;
+       if (this._tag != null && isCustomComponent(this._tag, props)) {
+         if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
+           markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
+         }
+       } else {
+         markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
+       }
+       if (markup) {
+         ret += ' ' + markup;
+       }
+     }
+   }
+
+   // For static pages, no need to put React ID and checksum. Saves lots of
+   // bytes.
+   if (transaction.renderToStaticMarkup) {
+     return ret;
+   }
+
+   if (!this._hostParent) {
+     ret += ' ' + DOMPropertyOperations.createMarkupForRoot();
+   }
+   ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID);
+   return ret;
+ },
+
+ /**
+  * Creates markup for the content between the tags.
+  *
+  * @private
+  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+  * @param {object} props
+  * @param {object} context
+  * @return {string} Content markup.
+  */
+ _createContentMarkup: function (transaction, props, context) {
+   var ret = '';
+
+   // Intentional use of != to avoid catching zero/false.
+   var innerHTML = props.dangerouslySetInnerHTML;
+   if (innerHTML != null) {
+     if (innerHTML.__html != null) {
+       ret = innerHTML.__html;
+     }
+   } else {
+     var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null;
+     var childrenToUse = contentToUse != null ? null : props.children;
+     if (contentToUse != null) {
+       // TODO: Validate that text is allowed as a child of this node
+       ret = escapeTextContentForBrowser(contentToUse);
+       if ("development" !== 'production') {
+         setAndValidateContentChildDev.call(this, contentToUse);
+       }
+     } else if (childrenToUse != null) {
+       var mountImages = this.mountChildren(childrenToUse, transaction, context);
+       ret = mountImages.join('');
+     }
+   }
+   if (newlineEatingTags[this._tag] && ret.charAt(0) === '\n') {
+     // text/html ignores the first character in these tags if it's a newline
+     // Prefer to break application/xml over text/html (for now) by adding
+     // a newline specifically to get eaten by the parser. (Alternately for
+     // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first
+     // \r is normalized out by HTMLTextAreaElement#value.)
+     // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
+     // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
+     // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
+     // See: Parsing of "textarea" "listing" and "pre" elements
+     //  from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
+     return '\n' + ret;
+   } else {
+     return ret;
+   }
+ },
+
+ _createInitialChildren: function (transaction, props, context, lazyTree) {
+   // Intentional use of != to avoid catching zero/false.
+   var innerHTML = props.dangerouslySetInnerHTML;
+   if (innerHTML != null) {
+     if (innerHTML.__html != null) {
+       DOMLazyTree.queueHTML(lazyTree, innerHTML.__html);
+     }
+   } else {
+     var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null;
+     var childrenToUse = contentToUse != null ? null : props.children;
+     if (contentToUse != null) {
+       // TODO: Validate that text is allowed as a child of this node
+       if ("development" !== 'production') {
+         setAndValidateContentChildDev.call(this, contentToUse);
+       }
+       DOMLazyTree.queueText(lazyTree, contentToUse);
+     } else if (childrenToUse != null) {
+       var mountImages = this.mountChildren(childrenToUse, transaction, context);
+       for (var i = 0; i < mountImages.length; i++) {
+         DOMLazyTree.queueChild(lazyTree, mountImages[i]);
+       }
+     }
+   }
+ },
+
+ /**
+  * Receives a next element and updates the component.
+  *
+  * @internal
+  * @param {ReactElement} nextElement
+  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+  * @param {object} context
+  */
+ receiveComponent: function (nextElement, transaction, context) {
+   var prevElement = this._currentElement;
+   this._currentElement = nextElement;
+   this.updateComponent(transaction, prevElement, nextElement, context);
+ },
+
+ /**
+  * Updates a DOM component after it has already been allocated and
+  * attached to the DOM. Reconciles the root DOM node, then recurses.
+  *
+  * @param {ReactReconcileTransaction} transaction
+  * @param {ReactElement} prevElement
+  * @param {ReactElement} nextElement
+  * @internal
+  * @overridable
+  */
+ updateComponent: function (transaction, prevElement, nextElement, context) {
+   var lastProps = prevElement.props;
+   var nextProps = this._currentElement.props;
+
+   switch (this._tag) {
+     case 'input':
+       lastProps = ReactDOMInput.getHostProps(this, lastProps);
+       nextProps = ReactDOMInput.getHostProps(this, nextProps);
+       break;
+     case 'option':
+       lastProps = ReactDOMOption.getHostProps(this, lastProps);
+       nextProps = ReactDOMOption.getHostProps(this, nextProps);
+       break;
+     case 'select':
+       lastProps = ReactDOMSelect.getHostProps(this, lastProps);
+       nextProps = ReactDOMSelect.getHostProps(this, nextProps);
+       break;
+     case 'textarea':
+       lastProps = ReactDOMTextarea.getHostProps(this, lastProps);
+       nextProps = ReactDOMTextarea.getHostProps(this, nextProps);
+       break;
+   }
+
+   assertValidProps(this, nextProps);
+   this._updateDOMProperties(lastProps, nextProps, transaction);
+   this._updateDOMChildren(lastProps, nextProps, transaction, context);
+
+   switch (this._tag) {
+     case 'input':
+       // Update the wrapper around inputs *after* updating props. This has to
+       // happen after `_updateDOMProperties`. Otherwise HTML5 input validations
+       // raise warnings and prevent the new value from being assigned.
+       ReactDOMInput.updateWrapper(this);
+       break;
+     case 'textarea':
+       ReactDOMTextarea.updateWrapper(this);
+       break;
+     case 'select':
+       // <select> value update needs to occur after <option> children
+       // reconciliation
+       transaction.getReactMountReady().enqueue(postUpdateSelectWrapper, this);
+       break;
+   }
+ },
+
+ /**
+  * Reconciles the properties by detecting differences in property values and
+  * updating the DOM as necessary. This function is probably the single most
+  * critical path for performance optimization.
+  *
+  * TODO: Benchmark whether checking for changed values in memory actually
+  *       improves performance (especially statically positioned elements).
+  * TODO: Benchmark the effects of putting this at the top since 99% of props
+  *       do not change for a given reconciliation.
+  * TODO: Benchmark areas that can be improved with caching.
+  *
+  * @private
+  * @param {object} lastProps
+  * @param {object} nextProps
+  * @param {?DOMElement} node
+  */
+ _updateDOMProperties: function (lastProps, nextProps, transaction) {
+   var propKey;
+   var styleName;
+   var styleUpdates;
+   for (propKey in lastProps) {
+     if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null) {
+       continue;
+     }
+     if (propKey === STYLE) {
+       var lastStyle = this._previousStyleCopy;
+       for (styleName in lastStyle) {
+         if (lastStyle.hasOwnProperty(styleName)) {
+           styleUpdates = styleUpdates || {};
+           styleUpdates[styleName] = '';
+         }
+       }
+       this._previousStyleCopy = null;
+     } else if (registrationNameModules.hasOwnProperty(propKey)) {
+       if (lastProps[propKey]) {
+         // Only call deleteListener if there was a listener previously or
+         // else willDeleteListener gets called when there wasn't actually a
+         // listener (e.g., onClick={null})
+         deleteListener(this, propKey);
+       }
+     } else if (isCustomComponent(this._tag, lastProps)) {
+       if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
+         DOMPropertyOperations.deleteValueForAttribute(getNode(this), propKey);
+       }
+     } else if (DOMProperty.properties[propKey] || DOMProperty.isCustomAttribute(propKey)) {
+       DOMPropertyOperations.deleteValueForProperty(getNode(this), propKey);
+     }
+   }
+   for (propKey in nextProps) {
+     var nextProp = nextProps[propKey];
+     var lastProp = propKey === STYLE ? this._previousStyleCopy : lastProps != null ? lastProps[propKey] : undefined;
+     if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
+       continue;
+     }
+     if (propKey === STYLE) {
+       if (nextProp) {
+         if ("development" !== 'production') {
+           checkAndWarnForMutatedStyle(this._previousStyleCopy, this._previousStyle, this);
+           this._previousStyle = nextProp;
+         }
+         nextProp = this._previousStyleCopy = _assign({}, nextProp);
+       } else {
+         this._previousStyleCopy = null;
+       }
+       if (lastProp) {
+         // Unset styles on `lastProp` but not on `nextProp`.
+         for (styleName in lastProp) {
+           if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) {
+             styleUpdates = styleUpdates || {};
+             styleUpdates[styleName] = '';
+           }
+         }
+         // Update styles that changed since `lastProp`.
+         for (styleName in nextProp) {
+           if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) {
+             styleUpdates = styleUpdates || {};
+             styleUpdates[styleName] = nextProp[styleName];
+           }
+         }
+       } else {
+         // Relies on `updateStylesByID` not mutating `styleUpdates`.
+         styleUpdates = nextProp;
+       }
+     } else if (registrationNameModules.hasOwnProperty(propKey)) {
+       if (nextProp) {
+         enqueuePutListener(this, propKey, nextProp, transaction);
+       } else if (lastProp) {
+         deleteListener(this, propKey);
+       }
+     } else if (isCustomComponent(this._tag, nextProps)) {
+       if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
+         DOMPropertyOperations.setValueForAttribute(getNode(this), propKey, nextProp);
+       }
+     } else if (DOMProperty.properties[propKey] || DOMProperty.isCustomAttribute(propKey)) {
+       var node = getNode(this);
+       // If we're updating to null or undefined, we should remove the property
+       // from the DOM node instead of inadvertently setting to a string. This
+       // brings us in line with the same behavior we have on initial render.
+       if (nextProp != null) {
+         DOMPropertyOperations.setValueForProperty(node, propKey, nextProp);
+       } else {
+         DOMPropertyOperations.deleteValueForProperty(node, propKey);
+       }
+     }
+   }
+   if (styleUpdates) {
+     CSSPropertyOperations.setValueForStyles(getNode(this), styleUpdates, this);
+   }
+ },
+
+ /**
+  * Reconciles the children with the various properties that affect the
+  * children content.
+  *
+  * @param {object} lastProps
+  * @param {object} nextProps
+  * @param {ReactReconcileTransaction} transaction
+  * @param {object} context
+  */
+ _updateDOMChildren: function (lastProps, nextProps, transaction, context) {
+   var lastContent = CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null;
+   var nextContent = CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null;
+
+   var lastHtml = lastProps.dangerouslySetInnerHTML && lastProps.dangerouslySetInnerHTML.__html;
+   var nextHtml = nextProps.dangerouslySetInnerHTML && nextProps.dangerouslySetInnerHTML.__html;
+
+   // Note the use of `!=` which checks for null or undefined.
+   var lastChildren = lastContent != null ? null : lastProps.children;
+   var nextChildren = nextContent != null ? null : nextProps.children;
+
+   // If we're switching from children to content/html or vice versa, remove
+   // the old content
+   var lastHasContentOrHtml = lastContent != null || lastHtml != null;
+   var nextHasContentOrHtml = nextContent != null || nextHtml != null;
+   if (lastChildren != null && nextChildren == null) {
+     this.updateChildren(null, transaction, context);
+   } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
+     this.updateTextContent('');
+     if ("development" !== 'production') {
+       ReactInstrumentation.debugTool.onSetChildren(this._debugID, []);
+     }
+   }
+
+   if (nextContent != null) {
+     if (lastContent !== nextContent) {
+       this.updateTextContent('' + nextContent);
+       if ("development" !== 'production') {
+         setAndValidateContentChildDev.call(this, nextContent);
+       }
+     }
+   } else if (nextHtml != null) {
+     if (lastHtml !== nextHtml) {
+       this.updateMarkup('' + nextHtml);
+     }
+     if ("development" !== 'production') {
+       ReactInstrumentation.debugTool.onSetChildren(this._debugID, []);
+     }
+   } else if (nextChildren != null) {
+     if ("development" !== 'production') {
+       setAndValidateContentChildDev.call(this, null);
+     }
+
+     this.updateChildren(nextChildren, transaction, context);
+   }
+ },
+
+ getHostNode: function () {
+   return getNode(this);
+ },
+
+ /**
+  * Destroys all event registrations for this instance. Does not remove from
+  * the DOM. That must be done by the parent.
+  *
+  * @internal
+  */
+ unmountComponent: function (safely) {
+   switch (this._tag) {
+     case 'audio':
+     case 'form':
+     case 'iframe':
+     case 'img':
+     case 'link':
+     case 'object':
+     case 'source':
+     case 'video':
+       var listeners = this._wrapperState.listeners;
+       if (listeners) {
+         for (var i = 0; i < listeners.length; i++) {
+           listeners[i].remove();
+         }
+       }
+       break;
+     case 'html':
+     case 'head':
+     case 'body':
+       /**
+        * Components like <html> <head> and <body> can't be removed or added
+        * easily in a cross-browser way, however it's valuable to be able to
+        * take advantage of React's reconciliation for styling and <title>
+        * management. So we just document it and throw in dangerous cases.
+        */
+       !false ? "development" !== 'production' ? invariant(false, '<%s> tried to unmount. Because of cross-browser quirks it is impossible to unmount some top-level components (eg <html>, <head>, and <body>) reliably and efficiently. To fix this, have a single top-level component that never unmounts render these elements.', this._tag) : _prodInvariant('66', this._tag) : void 0;
+       break;
+   }
+
+   this.unmountChildren(safely);
+   ReactDOMComponentTree.uncacheNode(this);
+   EventPluginHub.deleteAllListeners(this);
+   this._rootNodeID = 0;
+   this._domID = 0;
+   this._wrapperState = null;
+
+   if ("development" !== 'production') {
+     setAndValidateContentChildDev.call(this, null);
+   }
+ },
+
+ getPublicInstance: function () {
+   return getNode(this);
+ }
+
+};
+
+_assign(ReactDOMComponent.prototype, ReactDOMComponent.Mixin, ReactMultiChild.Mixin);
+
+module.exports = ReactDOMComponent;
+},{"10":10,"107":107,"11":11,"12":12,"122":122,"125":125,"131":131,"142":142,"150":150,"156":156,"157":157,"158":158,"17":17,"18":18,"2":2,"26":26,"33":33,"34":34,"39":39,"42":42,"43":43,"46":46,"5":5,"64":64,"68":68,"77":77,"9":9}],33:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactDOMComponentFlags = {
+ hasCachedChildNodes: 1 << 0
+};
+
+module.exports = ReactDOMComponentFlags;
+},{}],34:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var DOMProperty = _dereq_(11);
+var ReactDOMComponentFlags = _dereq_(33);
+
+var invariant = _dereq_(150);
+
+var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
+var Flags = ReactDOMComponentFlags;
+
+var internalInstanceKey = '__reactInternalInstance$' + Math.random().toString(36).slice(2);
+
+/**
+* Drill down (through composites and empty components) until we get a host or
+* host text component.
+*
+* This is pretty polymorphic but unavoidable with the current structure we have
+* for `_renderedChildren`.
+*/
+function getRenderedHostOrTextFromComponent(component) {
+ var rendered;
+ while (rendered = component._renderedComponent) {
+   component = rendered;
+ }
+ return component;
+}
+
+/**
+* Populate `_hostNode` on the rendered host/text component with the given
+* DOM node. The passed `inst` can be a composite.
+*/
+function precacheNode(inst, node) {
+ var hostInst = getRenderedHostOrTextFromComponent(inst);
+ hostInst._hostNode = node;
+ node[internalInstanceKey] = hostInst;
+}
+
+function uncacheNode(inst) {
+ var node = inst._hostNode;
+ if (node) {
+   delete node[internalInstanceKey];
+   inst._hostNode = null;
+ }
+}
+
+/**
+* Populate `_hostNode` on each child of `inst`, assuming that the children
+* match up with the DOM (element) children of `node`.
+*
+* We cache entire levels at once to avoid an n^2 problem where we access the
+* children of a node sequentially and have to walk from the start to our target
+* node every time.
+*
+* Since we update `_renderedChildren` and the actual DOM at (slightly)
+* different times, we could race here and see a newer `_renderedChildren` than
+* the DOM nodes we see. To avoid this, ReactMultiChild calls
+* `prepareToManageChildren` before we change `_renderedChildren`, at which
+* time the container's child nodes are always cached (until it unmounts).
+*/
+function precacheChildNodes(inst, node) {
+ if (inst._flags & Flags.hasCachedChildNodes) {
+   return;
+ }
+ var children = inst._renderedChildren;
+ var childNode = node.firstChild;
+ outer: for (var name in children) {
+   if (!children.hasOwnProperty(name)) {
+     continue;
+   }
+   var childInst = children[name];
+   var childID = getRenderedHostOrTextFromComponent(childInst)._domID;
+   if (childID === 0) {
+     // We're currently unmounting this child in ReactMultiChild; skip it.
+     continue;
+   }
+   // We assume the child nodes are in the same order as the child instances.
+   for (; childNode !== null; childNode = childNode.nextSibling) {
+     if (childNode.nodeType === 1 && childNode.getAttribute(ATTR_NAME) === String(childID) || childNode.nodeType === 8 && childNode.nodeValue === ' react-text: ' + childID + ' ' || childNode.nodeType === 8 && childNode.nodeValue === ' react-empty: ' + childID + ' ') {
+       precacheNode(childInst, childNode);
+       continue outer;
+     }
+   }
+   // We reached the end of the DOM children without finding an ID match.
+   !false ? "development" !== 'production' ? invariant(false, 'Unable to find element with ID %s.', childID) : _prodInvariant('32', childID) : void 0;
+ }
+ inst._flags |= Flags.hasCachedChildNodes;
+}
+
+/**
+* Given a DOM node, return the closest ReactDOMComponent or
+* ReactDOMTextComponent instance ancestor.
+*/
+function getClosestInstanceFromNode(node) {
+ if (node[internalInstanceKey]) {
+   return node[internalInstanceKey];
+ }
+
+ // Walk up the tree until we find an ancestor whose instance we have cached.
+ var parents = [];
+ while (!node[internalInstanceKey]) {
+   parents.push(node);
+   if (node.parentNode) {
+     node = node.parentNode;
+   } else {
+     // Top of the tree. This node must not be part of a React tree (or is
+     // unmounted, potentially).
+     return null;
+   }
+ }
+
+ var closest;
+ var inst;
+ for (; node && (inst = node[internalInstanceKey]); node = parents.pop()) {
+   closest = inst;
+   if (parents.length) {
+     precacheChildNodes(inst, node);
+   }
+ }
+
+ return closest;
+}
+
+/**
+* Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent
+* instance, or null if the node was not rendered by this React.
+*/
+function getInstanceFromNode(node) {
+ var inst = getClosestInstanceFromNode(node);
+ if (inst != null && inst._hostNode === node) {
+   return inst;
+ } else {
+   return null;
+ }
+}
+
+/**
+* Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding
+* DOM node.
+*/
+function getNodeFromInstance(inst) {
+ // Without this first invariant, passing a non-DOM-component triggers the next
+ // invariant for a missing parent, which is super confusing.
+ !(inst._hostNode !== undefined) ? "development" !== 'production' ? invariant(false, 'getNodeFromInstance: Invalid argument.') : _prodInvariant('33') : void 0;
+
+ if (inst._hostNode) {
+   return inst._hostNode;
+ }
+
+ // Walk up the tree until we find an ancestor whose DOM node we have cached.
+ var parents = [];
+ while (!inst._hostNode) {
+   parents.push(inst);
+   !inst._hostParent ? "development" !== 'production' ? invariant(false, 'React DOM tree root should always have a node reference.') : _prodInvariant('34') : void 0;
+   inst = inst._hostParent;
+ }
+
+ // Now parents contains each ancestor that does *not* have a cached native
+ // node, and `inst` is the deepest ancestor that does.
+ for (; parents.length; inst = parents.pop()) {
+   precacheChildNodes(inst, inst._hostNode);
+ }
+
+ return inst._hostNode;
+}
+
+var ReactDOMComponentTree = {
+ getClosestInstanceFromNode: getClosestInstanceFromNode,
+ getInstanceFromNode: getInstanceFromNode,
+ getNodeFromInstance: getNodeFromInstance,
+ precacheChildNodes: precacheChildNodes,
+ precacheNode: precacheNode,
+ uncacheNode: uncacheNode
+};
+
+module.exports = ReactDOMComponentTree;
+},{"11":11,"125":125,"150":150,"33":33}],35:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var validateDOMNesting = _dereq_(131);
+
+var DOC_NODE_TYPE = 9;
+
+function ReactDOMContainerInfo(topLevelWrapper, node) {
+ var info = {
+   _topLevelWrapper: topLevelWrapper,
+   _idCounter: 1,
+   _ownerDocument: node ? node.nodeType === DOC_NODE_TYPE ? node : node.ownerDocument : null,
+   _node: node,
+   _tag: node ? node.nodeName.toLowerCase() : null,
+   _namespaceURI: node ? node.namespaceURI : null
+ };
+ if ("development" !== 'production') {
+   info._ancestorInfo = node ? validateDOMNesting.updatedAncestorInfo(null, info._tag, null) : null;
+ }
+ return info;
+}
+
+module.exports = ReactDOMContainerInfo;
+},{"131":131}],36:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var DOMLazyTree = _dereq_(9);
+var ReactDOMComponentTree = _dereq_(34);
+
+var ReactDOMEmptyComponent = function (instantiate) {
+ // ReactCompositeComponent uses this:
+ this._currentElement = null;
+ // ReactDOMComponentTree uses these:
+ this._hostNode = null;
+ this._hostParent = null;
+ this._hostContainerInfo = null;
+ this._domID = 0;
+};
+_assign(ReactDOMEmptyComponent.prototype, {
+ mountComponent: function (transaction, hostParent, hostContainerInfo, context) {
+   var domID = hostContainerInfo._idCounter++;
+   this._domID = domID;
+   this._hostParent = hostParent;
+   this._hostContainerInfo = hostContainerInfo;
+
+   var nodeValue = ' react-empty: ' + this._domID + ' ';
+   if (transaction.useCreateElement) {
+     var ownerDocument = hostContainerInfo._ownerDocument;
+     var node = ownerDocument.createComment(nodeValue);
+     ReactDOMComponentTree.precacheNode(this, node);
+     return DOMLazyTree(node);
+   } else {
+     if (transaction.renderToStaticMarkup) {
+       // Normally we'd insert a comment node, but since this is a situation
+       // where React won't take over (static pages), we can simply return
+       // nothing.
+       return '';
+     }
+     return '<!--' + nodeValue + '-->';
+   }
+ },
+ receiveComponent: function () {},
+ getHostNode: function () {
+   return ReactDOMComponentTree.getNodeFromInstance(this);
+ },
+ unmountComponent: function () {
+   ReactDOMComponentTree.uncacheNode(this);
+ }
+});
+
+module.exports = ReactDOMEmptyComponent;
+},{"158":158,"34":34,"9":9}],37:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactDOMFeatureFlags = {
+ useCreateElement: true,
+ useFiber: false
+};
+
+module.exports = ReactDOMFeatureFlags;
+},{}],38:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMChildrenOperations = _dereq_(8);
+var ReactDOMComponentTree = _dereq_(34);
+
+/**
+* Operations used to process updates to DOM nodes.
+*/
+var ReactDOMIDOperations = {
+
+ /**
+  * Updates a component's children by processing a series of updates.
+  *
+  * @param {array<object>} updates List of update configurations.
+  * @internal
+  */
+ dangerouslyProcessChildrenUpdates: function (parentInst, updates) {
+   var node = ReactDOMComponentTree.getNodeFromInstance(parentInst);
+   DOMChildrenOperations.processUpdates(node, updates);
+ }
+};
+
+module.exports = ReactDOMIDOperations;
+},{"34":34,"8":8}],39:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var DOMPropertyOperations = _dereq_(12);
+var LinkedValueUtils = _dereq_(24);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactUpdates = _dereq_(82);
+
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+var didWarnValueLink = false;
+var didWarnCheckedLink = false;
+var didWarnValueDefaultValue = false;
+var didWarnCheckedDefaultChecked = false;
+var didWarnControlledToUncontrolled = false;
+var didWarnUncontrolledToControlled = false;
+
+function forceUpdateIfMounted() {
+ if (this._rootNodeID) {
+   // DOM component is still mounted; update
+   ReactDOMInput.updateWrapper(this);
+ }
+}
+
+function isControlled(props) {
+ var usesChecked = props.type === 'checkbox' || props.type === 'radio';
+ return usesChecked ? props.checked != null : props.value != null;
+}
+
+/**
+* Implements an <input> host component that allows setting these optional
+* props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
+*
+* If `checked` or `value` are not supplied (or null/undefined), user actions
+* that affect the checked state or value will trigger updates to the element.
+*
+* If they are supplied (and not null/undefined), the rendered element will not
+* trigger updates to the element. Instead, the props must change in order for
+* the rendered element to be updated.
+*
+* The rendered element will be initialized as unchecked (or `defaultChecked`)
+* with an empty value (or `defaultValue`).
+*
+* @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
+*/
+var ReactDOMInput = {
+ getHostProps: function (inst, props) {
+   var value = LinkedValueUtils.getValue(props);
+   var checked = LinkedValueUtils.getChecked(props);
+
+   var hostProps = _assign({
+     // Make sure we set .type before any other properties (setting .value
+     // before .type means .value is lost in IE11 and below)
+     type: undefined,
+     // Make sure we set .step before .value (setting .value before .step
+     // means .value is rounded on mount, based upon step precision)
+     step: undefined,
+     // Make sure we set .min & .max before .value (to ensure proper order
+     // in corner cases such as min or max deriving from value, e.g. Issue #7170)
+     min: undefined,
+     max: undefined
+   }, props, {
+     defaultChecked: undefined,
+     defaultValue: undefined,
+     value: value != null ? value : inst._wrapperState.initialValue,
+     checked: checked != null ? checked : inst._wrapperState.initialChecked,
+     onChange: inst._wrapperState.onChange
+   });
+
+   return hostProps;
+ },
+
+ mountWrapper: function (inst, props) {
+   if ("development" !== 'production') {
+     LinkedValueUtils.checkPropTypes('input', props, inst._currentElement._owner);
+
+     var owner = inst._currentElement._owner;
+
+     if (props.valueLink !== undefined && !didWarnValueLink) {
+       "development" !== 'production' ? warning(false, '`valueLink` prop on `input` is deprecated; set `value` and `onChange` instead.') : void 0;
+       didWarnValueLink = true;
+     }
+     if (props.checkedLink !== undefined && !didWarnCheckedLink) {
+       "development" !== 'production' ? warning(false, '`checkedLink` prop on `input` is deprecated; set `value` and `onChange` instead.') : void 0;
+       didWarnCheckedLink = true;
+     }
+     if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnCheckedDefaultChecked) {
+       "development" !== 'production' ? warning(false, '%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0;
+       didWarnCheckedDefaultChecked = true;
+     }
+     if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) {
+       "development" !== 'production' ? warning(false, '%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0;
+       didWarnValueDefaultValue = true;
+     }
+   }
+
+   var defaultValue = props.defaultValue;
+   inst._wrapperState = {
+     initialChecked: props.checked != null ? props.checked : props.defaultChecked,
+     initialValue: props.value != null ? props.value : defaultValue,
+     listeners: null,
+     onChange: _handleChange.bind(inst)
+   };
+
+   if ("development" !== 'production') {
+     inst._wrapperState.controlled = isControlled(props);
+   }
+ },
+
+ updateWrapper: function (inst) {
+   var props = inst._currentElement.props;
+
+   if ("development" !== 'production') {
+     var controlled = isControlled(props);
+     var owner = inst._currentElement._owner;
+
+     if (!inst._wrapperState.controlled && controlled && !didWarnUncontrolledToControlled) {
+       "development" !== 'production' ? warning(false, '%s is changing an uncontrolled input of type %s to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0;
+       didWarnUncontrolledToControlled = true;
+     }
+     if (inst._wrapperState.controlled && !controlled && !didWarnControlledToUncontrolled) {
+       "development" !== 'production' ? warning(false, '%s is changing a controlled input of type %s to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0;
+       didWarnControlledToUncontrolled = true;
+     }
+   }
+
+   // TODO: Shouldn't this be getChecked(props)?
+   var checked = props.checked;
+   if (checked != null) {
+     DOMPropertyOperations.setValueForProperty(ReactDOMComponentTree.getNodeFromInstance(inst), 'checked', checked || false);
+   }
+
+   var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+   var value = LinkedValueUtils.getValue(props);
+   if (value != null) {
+
+     // Cast `value` to a string to ensure the value is set correctly. While
+     // browsers typically do this as necessary, jsdom doesn't.
+     var newValue = '' + value;
+
+     // To avoid side effects (such as losing text selection), only set value if changed
+     if (newValue !== node.value) {
+       node.value = newValue;
+     }
+   } else {
+     if (props.value == null && props.defaultValue != null) {
+       node.defaultValue = '' + props.defaultValue;
+     }
+     if (props.checked == null && props.defaultChecked != null) {
+       node.defaultChecked = !!props.defaultChecked;
+     }
+   }
+ },
+
+ postMountWrapper: function (inst) {
+   var props = inst._currentElement.props;
+
+   // This is in postMount because we need access to the DOM node, which is not
+   // available until after the component has mounted.
+   var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+
+   // Detach value from defaultValue. We won't do anything if we're working on
+   // submit or reset inputs as those values & defaultValues are linked. They
+   // are not resetable nodes so this operation doesn't matter and actually
+   // removes browser-default values (eg "Submit Query") when no value is
+   // provided.
+
+   switch (props.type) {
+     case 'submit':
+     case 'reset':
+       break;
+     case 'color':
+     case 'date':
+     case 'datetime':
+     case 'datetime-local':
+     case 'month':
+     case 'time':
+     case 'week':
+       // This fixes the no-show issue on iOS Safari and Android Chrome:
+       // https://github.com/facebook/react/issues/7233
+       node.value = '';
+       node.value = node.defaultValue;
+       break;
+     default:
+       node.value = node.value;
+       break;
+   }
+
+   // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug
+   // this is needed to work around a chrome bug where setting defaultChecked
+   // will sometimes influence the value of checked (even after detachment).
+   // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416
+   // We need to temporarily unset name to avoid disrupting radio button groups.
+   var name = node.name;
+   if (name !== '') {
+     node.name = '';
+   }
+   node.defaultChecked = !node.defaultChecked;
+   node.defaultChecked = !node.defaultChecked;
+   if (name !== '') {
+     node.name = name;
+   }
+ }
+};
+
+function _handleChange(event) {
+ var props = this._currentElement.props;
+
+ var returnValue = LinkedValueUtils.executeOnChange(props, event);
+
+ // Here we use asap to wait until all updates have propagated, which
+ // is important when using controlled components within layers:
+ // https://github.com/facebook/react/issues/1698
+ ReactUpdates.asap(forceUpdateIfMounted, this);
+
+ var name = props.name;
+ if (props.type === 'radio' && name != null) {
+   var rootNode = ReactDOMComponentTree.getNodeFromInstance(this);
+   var queryRoot = rootNode;
+
+   while (queryRoot.parentNode) {
+     queryRoot = queryRoot.parentNode;
+   }
+
+   // If `rootNode.form` was non-null, then we could try `form.elements`,
+   // but that sometimes behaves strangely in IE8. We could also try using
+   // `form.getElementsByName`, but that will only return direct children
+   // and won't include inputs that use the HTML5 `form=` attribute. Since
+   // the input might not even be in a form, let's just use the global
+   // `querySelectorAll` to ensure we don't miss anything.
+   var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]');
+
+   for (var i = 0; i < group.length; i++) {
+     var otherNode = group[i];
+     if (otherNode === rootNode || otherNode.form !== rootNode.form) {
+       continue;
+     }
+     // This will throw if radio buttons rendered by different copies of React
+     // and the same name are rendered into the same form (same as #1939).
+     // That's probably okay; we don't support it just as we don't support
+     // mixing React radio buttons with non-React ones.
+     var otherInstance = ReactDOMComponentTree.getInstanceFromNode(otherNode);
+     !otherInstance ? "development" !== 'production' ? invariant(false, 'ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.') : _prodInvariant('90') : void 0;
+     // If this is a controlled radio button group, forcing the input that
+     // was previously checked to update will cause it to be come re-checked
+     // as appropriate.
+     ReactUpdates.asap(forceUpdateIfMounted, otherInstance);
+   }
+ }
+
+ return returnValue;
+}
+
+module.exports = ReactDOMInput;
+},{"12":12,"125":125,"150":150,"157":157,"158":158,"24":24,"34":34,"82":82}],40:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMProperty = _dereq_(11);
+var ReactComponentTreeHook = _dereq_(132);
+
+var warning = _dereq_(157);
+
+var warnedProperties = {};
+var rARIA = new RegExp('^(aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$');
+
+function validateProperty(tagName, name, debugID) {
+ if (warnedProperties.hasOwnProperty(name) && warnedProperties[name]) {
+   return true;
+ }
+
+ if (rARIA.test(name)) {
+   var lowerCasedName = name.toLowerCase();
+   var standardName = DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? DOMProperty.getPossibleStandardName[lowerCasedName] : null;
+
+   // If this is an aria-* attribute, but is not listed in the known DOM
+   // DOM properties, then it is an invalid aria-* attribute.
+   if (standardName == null) {
+     warnedProperties[name] = true;
+     return false;
+   }
+   // aria-* attributes should be lowercase; suggest the lowercase version.
+   if (name !== standardName) {
+     "development" !== 'production' ? warning(false, 'Unknown ARIA attribute %s. Did you mean %s?%s', name, standardName, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+     warnedProperties[name] = true;
+     return true;
+   }
+ }
+
+ return true;
+}
+
+function warnInvalidARIAProps(debugID, element) {
+ var invalidProps = [];
+
+ for (var key in element.props) {
+   var isValid = validateProperty(element.type, key, debugID);
+   if (!isValid) {
+     invalidProps.push(key);
+   }
+ }
+
+ var unknownPropString = invalidProps.map(function (prop) {
+   return '`' + prop + '`';
+ }).join(', ');
+
+ if (invalidProps.length === 1) {
+   "development" !== 'production' ? warning(false, 'Invalid aria prop %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop%s', unknownPropString, element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+ } else if (invalidProps.length > 1) {
+   "development" !== 'production' ? warning(false, 'Invalid aria props %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop%s', unknownPropString, element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+ }
+}
+
+function handleElement(debugID, element) {
+ if (element == null || typeof element.type !== 'string') {
+   return;
+ }
+ if (element.type.indexOf('-') >= 0 || element.props.is) {
+   return;
+ }
+
+ warnInvalidARIAProps(debugID, element);
+}
+
+var ReactDOMInvalidARIAHook = {
+ onBeforeMountComponent: function (debugID, element) {
+   if ("development" !== 'production') {
+     handleElement(debugID, element);
+   }
+ },
+ onBeforeUpdateComponent: function (debugID, element) {
+   if ("development" !== 'production') {
+     handleElement(debugID, element);
+   }
+ }
+};
+
+module.exports = ReactDOMInvalidARIAHook;
+},{"11":11,"132":132,"157":157}],41:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactComponentTreeHook = _dereq_(132);
+
+var warning = _dereq_(157);
+
+var didWarnValueNull = false;
+
+function handleElement(debugID, element) {
+ if (element == null) {
+   return;
+ }
+ if (element.type !== 'input' && element.type !== 'textarea' && element.type !== 'select') {
+   return;
+ }
+ if (element.props != null && element.props.value === null && !didWarnValueNull) {
+   "development" !== 'production' ? warning(false, '`value` prop on `%s` should not be null. ' + 'Consider using the empty string to clear the component or `undefined` ' + 'for uncontrolled components.%s', element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+
+   didWarnValueNull = true;
+ }
+}
+
+var ReactDOMNullInputValuePropHook = {
+ onBeforeMountComponent: function (debugID, element) {
+   handleElement(debugID, element);
+ },
+ onBeforeUpdateComponent: function (debugID, element) {
+   handleElement(debugID, element);
+ }
+};
+
+module.exports = ReactDOMNullInputValuePropHook;
+},{"132":132,"157":157}],42:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var React = _dereq_(134);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactDOMSelect = _dereq_(43);
+
+var warning = _dereq_(157);
+var didWarnInvalidOptionChildren = false;
+
+function flattenChildren(children) {
+ var content = '';
+
+ // Flatten children and warn if they aren't strings or numbers;
+ // invalid types are ignored.
+ React.Children.forEach(children, function (child) {
+   if (child == null) {
+     return;
+   }
+   if (typeof child === 'string' || typeof child === 'number') {
+     content += child;
+   } else if (!didWarnInvalidOptionChildren) {
+     didWarnInvalidOptionChildren = true;
+     "development" !== 'production' ? warning(false, 'Only strings and numbers are supported as <option> children.') : void 0;
+   }
+ });
+
+ return content;
+}
+
+/**
+* Implements an <option> host component that warns when `selected` is set.
+*/
+var ReactDOMOption = {
+ mountWrapper: function (inst, props, hostParent) {
+   // TODO (yungsters): Remove support for `selected` in <option>.
+   if ("development" !== 'production') {
+     "development" !== 'production' ? warning(props.selected == null, 'Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.') : void 0;
+   }
+
+   // Look up whether this option is 'selected'
+   var selectValue = null;
+   if (hostParent != null) {
+     var selectParent = hostParent;
+
+     if (selectParent._tag === 'optgroup') {
+       selectParent = selectParent._hostParent;
+     }
+
+     if (selectParent != null && selectParent._tag === 'select') {
+       selectValue = ReactDOMSelect.getSelectValueContext(selectParent);
+     }
+   }
+
+   // If the value is null (e.g., no specified value or after initial mount)
+   // or missing (e.g., for <datalist>), we don't change props.selected
+   var selected = null;
+   if (selectValue != null) {
+     var value;
+     if (props.value != null) {
+       value = props.value + '';
+     } else {
+       value = flattenChildren(props.children);
+     }
+     selected = false;
+     if (Array.isArray(selectValue)) {
+       // multiple
+       for (var i = 0; i < selectValue.length; i++) {
+         if ('' + selectValue[i] === value) {
+           selected = true;
+           break;
+         }
+       }
+     } else {
+       selected = '' + selectValue === value;
+     }
+   }
+
+   inst._wrapperState = { selected: selected };
+ },
+
+ postMountWrapper: function (inst) {
+   // value="" should make a value attribute (#6219)
+   var props = inst._currentElement.props;
+   if (props.value != null) {
+     var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+     node.setAttribute('value', props.value);
+   }
+ },
+
+ getHostProps: function (inst, props) {
+   var hostProps = _assign({ selected: undefined, children: undefined }, props);
+
+   // Read state only from initial mount because <select> updates value
+   // manually; we need the initial state only for server rendering
+   if (inst._wrapperState.selected != null) {
+     hostProps.selected = inst._wrapperState.selected;
+   }
+
+   var content = flattenChildren(props.children);
+
+   if (content) {
+     hostProps.children = content;
+   }
+
+   return hostProps;
+ }
+
+};
+
+module.exports = ReactDOMOption;
+},{"134":134,"157":157,"158":158,"34":34,"43":43}],43:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var LinkedValueUtils = _dereq_(24);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactUpdates = _dereq_(82);
+
+var warning = _dereq_(157);
+
+var didWarnValueLink = false;
+var didWarnValueDefaultValue = false;
+
+function updateOptionsIfPendingUpdateAndMounted() {
+ if (this._rootNodeID && this._wrapperState.pendingUpdate) {
+   this._wrapperState.pendingUpdate = false;
+
+   var props = this._currentElement.props;
+   var value = LinkedValueUtils.getValue(props);
+
+   if (value != null) {
+     updateOptions(this, Boolean(props.multiple), value);
+   }
+ }
+}
+
+function getDeclarationErrorAddendum(owner) {
+ if (owner) {
+   var name = owner.getName();
+   if (name) {
+     return ' Check the render method of `' + name + '`.';
+   }
+ }
+ return '';
+}
+
+var valuePropNames = ['value', 'defaultValue'];
+
+/**
+* Validation function for `value` and `defaultValue`.
+* @private
+*/
+function checkSelectPropTypes(inst, props) {
+ var owner = inst._currentElement._owner;
+ LinkedValueUtils.checkPropTypes('select', props, owner);
+
+ if (props.valueLink !== undefined && !didWarnValueLink) {
+   "development" !== 'production' ? warning(false, '`valueLink` prop on `select` is deprecated; set `value` and `onChange` instead.') : void 0;
+   didWarnValueLink = true;
+ }
+
+ for (var i = 0; i < valuePropNames.length; i++) {
+   var propName = valuePropNames[i];
+   if (props[propName] == null) {
+     continue;
+   }
+   var isArray = Array.isArray(props[propName]);
+   if (props.multiple && !isArray) {
+     "development" !== 'production' ? warning(false, 'The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.%s', propName, getDeclarationErrorAddendum(owner)) : void 0;
+   } else if (!props.multiple && isArray) {
+     "development" !== 'production' ? warning(false, 'The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.%s', propName, getDeclarationErrorAddendum(owner)) : void 0;
+   }
+ }
+}
+
+/**
+* @param {ReactDOMComponent} inst
+* @param {boolean} multiple
+* @param {*} propValue A stringable (with `multiple`, a list of stringables).
+* @private
+*/
+function updateOptions(inst, multiple, propValue) {
+ var selectedValue, i;
+ var options = ReactDOMComponentTree.getNodeFromInstance(inst).options;
+
+ if (multiple) {
+   selectedValue = {};
+   for (i = 0; i < propValue.length; i++) {
+     selectedValue['' + propValue[i]] = true;
+   }
+   for (i = 0; i < options.length; i++) {
+     var selected = selectedValue.hasOwnProperty(options[i].value);
+     if (options[i].selected !== selected) {
+       options[i].selected = selected;
+     }
+   }
+ } else {
+   // Do not set `select.value` as exact behavior isn't consistent across all
+   // browsers for all cases.
+   selectedValue = '' + propValue;
+   for (i = 0; i < options.length; i++) {
+     if (options[i].value === selectedValue) {
+       options[i].selected = true;
+       return;
+     }
+   }
+   if (options.length) {
+     options[0].selected = true;
+   }
+ }
+}
+
+/**
+* Implements a <select> host component that allows optionally setting the
+* props `value` and `defaultValue`. If `multiple` is false, the prop must be a
+* stringable. If `multiple` is true, the prop must be an array of stringables.
+*
+* If `value` is not supplied (or null/undefined), user actions that change the
+* selected option will trigger updates to the rendered options.
+*
+* If it is supplied (and not null/undefined), the rendered options will not
+* update in response to user actions. Instead, the `value` prop must change in
+* order for the rendered options to update.
+*
+* If `defaultValue` is provided, any options with the supplied values will be
+* selected.
+*/
+var ReactDOMSelect = {
+ getHostProps: function (inst, props) {
+   return _assign({}, props, {
+     onChange: inst._wrapperState.onChange,
+     value: undefined
+   });
+ },
+
+ mountWrapper: function (inst, props) {
+   if ("development" !== 'production') {
+     checkSelectPropTypes(inst, props);
+   }
+
+   var value = LinkedValueUtils.getValue(props);
+   inst._wrapperState = {
+     pendingUpdate: false,
+     initialValue: value != null ? value : props.defaultValue,
+     listeners: null,
+     onChange: _handleChange.bind(inst),
+     wasMultiple: Boolean(props.multiple)
+   };
+
+   if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) {
+     "development" !== 'production' ? warning(false, 'Select elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled select ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components') : void 0;
+     didWarnValueDefaultValue = true;
+   }
+ },
+
+ getSelectValueContext: function (inst) {
+   // ReactDOMOption looks at this initial value so the initial generated
+   // markup has correct `selected` attributes
+   return inst._wrapperState.initialValue;
+ },
+
+ postUpdateWrapper: function (inst) {
+   var props = inst._currentElement.props;
+
+   // After the initial mount, we control selected-ness manually so don't pass
+   // this value down
+   inst._wrapperState.initialValue = undefined;
+
+   var wasMultiple = inst._wrapperState.wasMultiple;
+   inst._wrapperState.wasMultiple = Boolean(props.multiple);
+
+   var value = LinkedValueUtils.getValue(props);
+   if (value != null) {
+     inst._wrapperState.pendingUpdate = false;
+     updateOptions(inst, Boolean(props.multiple), value);
+   } else if (wasMultiple !== Boolean(props.multiple)) {
+     // For simplicity, reapply `defaultValue` if `multiple` is toggled.
+     if (props.defaultValue != null) {
+       updateOptions(inst, Boolean(props.multiple), props.defaultValue);
+     } else {
+       // Revert the select back to its default unselected state.
+       updateOptions(inst, Boolean(props.multiple), props.multiple ? [] : '');
+     }
+   }
+ }
+};
+
+function _handleChange(event) {
+ var props = this._currentElement.props;
+ var returnValue = LinkedValueUtils.executeOnChange(props, event);
+
+ if (this._rootNodeID) {
+   this._wrapperState.pendingUpdate = true;
+ }
+ ReactUpdates.asap(updateOptionsIfPendingUpdateAndMounted, this);
+ return returnValue;
+}
+
+module.exports = ReactDOMSelect;
+},{"157":157,"158":158,"24":24,"34":34,"82":82}],44:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(136);
+
+var getNodeForCharacterOffset = _dereq_(118);
+var getTextContentAccessor = _dereq_(119);
+
+/**
+* While `isCollapsed` is available on the Selection object and `collapsed`
+* is available on the Range object, IE11 sometimes gets them wrong.
+* If the anchor/focus nodes and offsets are the same, the range is collapsed.
+*/
+function isCollapsed(anchorNode, anchorOffset, focusNode, focusOffset) {
+ return anchorNode === focusNode && anchorOffset === focusOffset;
+}
+
+/**
+* Get the appropriate anchor and focus node/offset pairs for IE.
+*
+* The catch here is that IE's selection API doesn't provide information
+* about whether the selection is forward or backward, so we have to
+* behave as though it's always forward.
+*
+* IE text differs from modern selection in that it behaves as though
+* block elements end with a new line. This means character offsets will
+* differ between the two APIs.
+*
+* @param {DOMElement} node
+* @return {object}
+*/
+function getIEOffsets(node) {
+ var selection = document.selection;
+ var selectedRange = selection.createRange();
+ var selectedLength = selectedRange.text.length;
+
+ // Duplicate selection so we can move range without breaking user selection.
+ var fromStart = selectedRange.duplicate();
+ fromStart.moveToElementText(node);
+ fromStart.setEndPoint('EndToStart', selectedRange);
+
+ var startOffset = fromStart.text.length;
+ var endOffset = startOffset + selectedLength;
+
+ return {
+   start: startOffset,
+   end: endOffset
+ };
+}
+
+/**
+* @param {DOMElement} node
+* @return {?object}
+*/
+function getModernOffsets(node) {
+ var selection = window.getSelection && window.getSelection();
+
+ if (!selection || selection.rangeCount === 0) {
+   return null;
+ }
+
+ var anchorNode = selection.anchorNode;
+ var anchorOffset = selection.anchorOffset;
+ var focusNode = selection.focusNode;
+ var focusOffset = selection.focusOffset;
+
+ var currentRange = selection.getRangeAt(0);
+
+ // In Firefox, range.startContainer and range.endContainer can be "anonymous
+ // divs", e.g. the up/down buttons on an <input type="number">. Anonymous
+ // divs do not seem to expose properties, triggering a "Permission denied
+ // error" if any of its properties are accessed. The only seemingly possible
+ // way to avoid erroring is to access a property that typically works for
+ // non-anonymous divs and catch any error that may otherwise arise. See
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=208427
+ try {
+   /* eslint-disable no-unused-expressions */
+   currentRange.startContainer.nodeType;
+   currentRange.endContainer.nodeType;
+   /* eslint-enable no-unused-expressions */
+ } catch (e) {
+   return null;
+ }
+
+ // If the node and offset values are the same, the selection is collapsed.
+ // `Selection.isCollapsed` is available natively, but IE sometimes gets
+ // this value wrong.
+ var isSelectionCollapsed = isCollapsed(selection.anchorNode, selection.anchorOffset, selection.focusNode, selection.focusOffset);
+
+ var rangeLength = isSelectionCollapsed ? 0 : currentRange.toString().length;
+
+ var tempRange = currentRange.cloneRange();
+ tempRange.selectNodeContents(node);
+ tempRange.setEnd(currentRange.startContainer, currentRange.startOffset);
+
+ var isTempRangeCollapsed = isCollapsed(tempRange.startContainer, tempRange.startOffset, tempRange.endContainer, tempRange.endOffset);
+
+ var start = isTempRangeCollapsed ? 0 : tempRange.toString().length;
+ var end = start + rangeLength;
+
+ // Detect whether the selection is backward.
+ var detectionRange = document.createRange();
+ detectionRange.setStart(anchorNode, anchorOffset);
+ detectionRange.setEnd(focusNode, focusOffset);
+ var isBackward = detectionRange.collapsed;
+
+ return {
+   start: isBackward ? end : start,
+   end: isBackward ? start : end
+ };
+}
+
+/**
+* @param {DOMElement|DOMTextNode} node
+* @param {object} offsets
+*/
+function setIEOffsets(node, offsets) {
+ var range = document.selection.createRange().duplicate();
+ var start, end;
+
+ if (offsets.end === undefined) {
+   start = offsets.start;
+   end = start;
+ } else if (offsets.start > offsets.end) {
+   start = offsets.end;
+   end = offsets.start;
+ } else {
+   start = offsets.start;
+   end = offsets.end;
+ }
+
+ range.moveToElementText(node);
+ range.moveStart('character', start);
+ range.setEndPoint('EndToStart', range);
+ range.moveEnd('character', end - start);
+ range.select();
+}
+
+/**
+* In modern non-IE browsers, we can support both forward and backward
+* selections.
+*
+* Note: IE10+ supports the Selection object, but it does not support
+* the `extend` method, which means that even in modern IE, it's not possible
+* to programmatically create a backward selection. Thus, for all IE
+* versions, we use the old IE API to create our selections.
+*
+* @param {DOMElement|DOMTextNode} node
+* @param {object} offsets
+*/
+function setModernOffsets(node, offsets) {
+ if (!window.getSelection) {
+   return;
+ }
+
+ var selection = window.getSelection();
+ var length = node[getTextContentAccessor()].length;
+ var start = Math.min(offsets.start, length);
+ var end = offsets.end === undefined ? start : Math.min(offsets.end, length);
+
+ // IE 11 uses modern selection, but doesn't support the extend method.
+ // Flip backward selections, so we can set with a single range.
+ if (!selection.extend && start > end) {
+   var temp = end;
+   end = start;
+   start = temp;
+ }
+
+ var startMarker = getNodeForCharacterOffset(node, start);
+ var endMarker = getNodeForCharacterOffset(node, end);
+
+ if (startMarker && endMarker) {
+   var range = document.createRange();
+   range.setStart(startMarker.node, startMarker.offset);
+   selection.removeAllRanges();
+
+   if (start > end) {
+     selection.addRange(range);
+     selection.extend(endMarker.node, endMarker.offset);
+   } else {
+     range.setEnd(endMarker.node, endMarker.offset);
+     selection.addRange(range);
+   }
+ }
+}
+
+var useIEOffsets = ExecutionEnvironment.canUseDOM && 'selection' in document && !('getSelection' in window);
+
+var ReactDOMSelection = {
+ /**
+  * @param {DOMElement} node
+  */
+ getOffsets: useIEOffsets ? getIEOffsets : getModernOffsets,
+
+ /**
+  * @param {DOMElement|DOMTextNode} node
+  * @param {object} offsets
+  */
+ setOffsets: useIEOffsets ? setIEOffsets : setModernOffsets
+};
+
+module.exports = ReactDOMSelection;
+},{"118":118,"119":119,"136":136}],45:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var DOMChildrenOperations = _dereq_(8);
+var DOMLazyTree = _dereq_(9);
+var ReactDOMComponentTree = _dereq_(34);
+
+var escapeTextContentForBrowser = _dereq_(107);
+var invariant = _dereq_(150);
+var validateDOMNesting = _dereq_(131);
+
+/**
+* Text nodes violate a couple assumptions that React makes about components:
+*
+*  - When mounting text into the DOM, adjacent text nodes are merged.
+*  - Text nodes cannot be assigned a React root ID.
+*
+* This component is used to wrap strings between comment nodes so that they
+* can undergo the same reconciliation that is applied to elements.
+*
+* TODO: Investigate representing React components in the DOM with text nodes.
+*
+* @class ReactDOMTextComponent
+* @extends ReactComponent
+* @internal
+*/
+var ReactDOMTextComponent = function (text) {
+ // TODO: This is really a ReactText (ReactNode), not a ReactElement
+ this._currentElement = text;
+ this._stringText = '' + text;
+ // ReactDOMComponentTree uses these:
+ this._hostNode = null;
+ this._hostParent = null;
+
+ // Properties
+ this._domID = 0;
+ this._mountIndex = 0;
+ this._closingComment = null;
+ this._commentNodes = null;
+};
+
+_assign(ReactDOMTextComponent.prototype, {
+
+ /**
+  * Creates the markup for this text node. This node is not intended to have
+  * any features besides containing text content.
+  *
+  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+  * @return {string} Markup for this text node.
+  * @internal
+  */
+ mountComponent: function (transaction, hostParent, hostContainerInfo, context) {
+   if ("development" !== 'production') {
+     var parentInfo;
+     if (hostParent != null) {
+       parentInfo = hostParent._ancestorInfo;
+     } else if (hostContainerInfo != null) {
+       parentInfo = hostContainerInfo._ancestorInfo;
+     }
+     if (parentInfo) {
+       // parentInfo should always be present except for the top-level
+       // component when server rendering
+       validateDOMNesting(null, this._stringText, this, parentInfo);
+     }
+   }
+
+   var domID = hostContainerInfo._idCounter++;
+   var openingValue = ' react-text: ' + domID + ' ';
+   var closingValue = ' /react-text ';
+   this._domID = domID;
+   this._hostParent = hostParent;
+   if (transaction.useCreateElement) {
+     var ownerDocument = hostContainerInfo._ownerDocument;
+     var openingComment = ownerDocument.createComment(openingValue);
+     var closingComment = ownerDocument.createComment(closingValue);
+     var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());
+     DOMLazyTree.queueChild(lazyTree, DOMLazyTree(openingComment));
+     if (this._stringText) {
+       DOMLazyTree.queueChild(lazyTree, DOMLazyTree(ownerDocument.createTextNode(this._stringText)));
+     }
+     DOMLazyTree.queueChild(lazyTree, DOMLazyTree(closingComment));
+     ReactDOMComponentTree.precacheNode(this, openingComment);
+     this._closingComment = closingComment;
+     return lazyTree;
+   } else {
+     var escapedText = escapeTextContentForBrowser(this._stringText);
+
+     if (transaction.renderToStaticMarkup) {
+       // Normally we'd wrap this between comment nodes for the reasons stated
+       // above, but since this is a situation where React won't take over
+       // (static pages), we can simply return the text as it is.
+       return escapedText;
+     }
+
+     return '<!--' + openingValue + '-->' + escapedText + '<!--' + closingValue + '-->';
+   }
+ },
+
+ /**
+  * Updates this component by updating the text content.
+  *
+  * @param {ReactText} nextText The next text content
+  * @param {ReactReconcileTransaction} transaction
+  * @internal
+  */
+ receiveComponent: function (nextText, transaction) {
+   if (nextText !== this._currentElement) {
+     this._currentElement = nextText;
+     var nextStringText = '' + nextText;
+     if (nextStringText !== this._stringText) {
+       // TODO: Save this as pending props and use performUpdateIfNecessary
+       // and/or updateComponent to do the actual update for consistency with
+       // other component types?
+       this._stringText = nextStringText;
+       var commentNodes = this.getHostNode();
+       DOMChildrenOperations.replaceDelimitedText(commentNodes[0], commentNodes[1], nextStringText);
+     }
+   }
+ },
+
+ getHostNode: function () {
+   var hostNode = this._commentNodes;
+   if (hostNode) {
+     return hostNode;
+   }
+   if (!this._closingComment) {
+     var openingComment = ReactDOMComponentTree.getNodeFromInstance(this);
+     var node = openingComment.nextSibling;
+     while (true) {
+       !(node != null) ? "development" !== 'production' ? invariant(false, 'Missing closing comment for text component %s', this._domID) : _prodInvariant('67', this._domID) : void 0;
+       if (node.nodeType === 8 && node.nodeValue === ' /react-text ') {
+         this._closingComment = node;
+         break;
+       }
+       node = node.nextSibling;
+     }
+   }
+   hostNode = [this._hostNode, this._closingComment];
+   this._commentNodes = hostNode;
+   return hostNode;
+ },
+
+ unmountComponent: function () {
+   this._closingComment = null;
+   this._commentNodes = null;
+   ReactDOMComponentTree.uncacheNode(this);
+ }
+
+});
+
+module.exports = ReactDOMTextComponent;
+},{"107":107,"125":125,"131":131,"150":150,"158":158,"34":34,"8":8,"9":9}],46:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var LinkedValueUtils = _dereq_(24);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactUpdates = _dereq_(82);
+
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+var didWarnValueLink = false;
+var didWarnValDefaultVal = false;
+
+function forceUpdateIfMounted() {
+ if (this._rootNodeID) {
+   // DOM component is still mounted; update
+   ReactDOMTextarea.updateWrapper(this);
+ }
+}
+
+/**
+* Implements a <textarea> host component that allows setting `value`, and
+* `defaultValue`. This differs from the traditional DOM API because value is
+* usually set as PCDATA children.
+*
+* If `value` is not supplied (or null/undefined), user actions that affect the
+* value will trigger updates to the element.
+*
+* If `value` is supplied (and not null/undefined), the rendered element will
+* not trigger updates to the element. Instead, the `value` prop must change in
+* order for the rendered element to be updated.
+*
+* The rendered element will be initialized with an empty value, the prop
+* `defaultValue` if specified, or the children content (deprecated).
+*/
+var ReactDOMTextarea = {
+ getHostProps: function (inst, props) {
+   !(props.dangerouslySetInnerHTML == null) ? "development" !== 'production' ? invariant(false, '`dangerouslySetInnerHTML` does not make sense on <textarea>.') : _prodInvariant('91') : void 0;
+
+   // Always set children to the same thing. In IE9, the selection range will
+   // get reset if `textContent` is mutated.  We could add a check in setTextContent
+   // to only set the value if/when the value differs from the node value (which would
+   // completely solve this IE9 bug), but Sebastian+Ben seemed to like this solution.
+   // The value can be a boolean or object so that's why it's forced to be a string.
+   var hostProps = _assign({}, props, {
+     value: undefined,
+     defaultValue: undefined,
+     children: '' + inst._wrapperState.initialValue,
+     onChange: inst._wrapperState.onChange
+   });
+
+   return hostProps;
+ },
+
+ mountWrapper: function (inst, props) {
+   if ("development" !== 'production') {
+     LinkedValueUtils.checkPropTypes('textarea', props, inst._currentElement._owner);
+     if (props.valueLink !== undefined && !didWarnValueLink) {
+       "development" !== 'production' ? warning(false, '`valueLink` prop on `textarea` is deprecated; set `value` and `onChange` instead.') : void 0;
+       didWarnValueLink = true;
+     }
+     if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValDefaultVal) {
+       "development" !== 'production' ? warning(false, 'Textarea elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled textarea ' + 'and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components') : void 0;
+       didWarnValDefaultVal = true;
+     }
+   }
+
+   var value = LinkedValueUtils.getValue(props);
+   var initialValue = value;
+
+   // Only bother fetching default value if we're going to use it
+   if (value == null) {
+     var defaultValue = props.defaultValue;
+     // TODO (yungsters): Remove support for children content in <textarea>.
+     var children = props.children;
+     if (children != null) {
+       if ("development" !== 'production') {
+         "development" !== 'production' ? warning(false, 'Use the `defaultValue` or `value` props instead of setting ' + 'children on <textarea>.') : void 0;
+       }
+       !(defaultValue == null) ? "development" !== 'production' ? invariant(false, 'If you supply `defaultValue` on a <textarea>, do not pass children.') : _prodInvariant('92') : void 0;
+       if (Array.isArray(children)) {
+         !(children.length <= 1) ? "development" !== 'production' ? invariant(false, '<textarea> can only have at most one child.') : _prodInvariant('93') : void 0;
+         children = children[0];
+       }
+
+       defaultValue = '' + children;
+     }
+     if (defaultValue == null) {
+       defaultValue = '';
+     }
+     initialValue = defaultValue;
+   }
+
+   inst._wrapperState = {
+     initialValue: '' + initialValue,
+     listeners: null,
+     onChange: _handleChange.bind(inst)
+   };
+ },
+
+ updateWrapper: function (inst) {
+   var props = inst._currentElement.props;
+
+   var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+   var value = LinkedValueUtils.getValue(props);
+   if (value != null) {
+     // Cast `value` to a string to ensure the value is set correctly. While
+     // browsers typically do this as necessary, jsdom doesn't.
+     var newValue = '' + value;
+
+     // To avoid side effects (such as losing text selection), only set value if changed
+     if (newValue !== node.value) {
+       node.value = newValue;
+     }
+     if (props.defaultValue == null) {
+       node.defaultValue = newValue;
+     }
+   }
+   if (props.defaultValue != null) {
+     node.defaultValue = props.defaultValue;
+   }
+ },
+
+ postMountWrapper: function (inst) {
+   // This is in postMount because we need access to the DOM node, which is not
+   // available until after the component has mounted.
+   var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+
+   // Warning: node.value may be the empty string at this point (IE11) if placeholder is set.
+   node.value = node.textContent; // Detach value from defaultValue
+ }
+};
+
+function _handleChange(event) {
+ var props = this._currentElement.props;
+ var returnValue = LinkedValueUtils.executeOnChange(props, event);
+ ReactUpdates.asap(forceUpdateIfMounted, this);
+ return returnValue;
+}
+
+module.exports = ReactDOMTextarea;
+},{"125":125,"150":150,"157":157,"158":158,"24":24,"34":34,"82":82}],47:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+/**
+* Return the lowest common ancestor of A and B, or null if they are in
+* different trees.
+*/
+function getLowestCommonAncestor(instA, instB) {
+ !('_hostNode' in instA) ? "development" !== 'production' ? invariant(false, 'getNodeFromInstance: Invalid argument.') : _prodInvariant('33') : void 0;
+ !('_hostNode' in instB) ? "development" !== 'production' ? invariant(false, 'getNodeFromInstance: Invalid argument.') : _prodInvariant('33') : void 0;
+
+ var depthA = 0;
+ for (var tempA = instA; tempA; tempA = tempA._hostParent) {
+   depthA++;
+ }
+ var depthB = 0;
+ for (var tempB = instB; tempB; tempB = tempB._hostParent) {
+   depthB++;
+ }
+
+ // If A is deeper, crawl up.
+ while (depthA - depthB > 0) {
+   instA = instA._hostParent;
+   depthA--;
+ }
+
+ // If B is deeper, crawl up.
+ while (depthB - depthA > 0) {
+   instB = instB._hostParent;
+   depthB--;
+ }
+
+ // Walk in lockstep until we find a match.
+ var depth = depthA;
+ while (depth--) {
+   if (instA === instB) {
+     return instA;
+   }
+   instA = instA._hostParent;
+   instB = instB._hostParent;
+ }
+ return null;
+}
+
+/**
+* Return if A is an ancestor of B.
+*/
+function isAncestor(instA, instB) {
+ !('_hostNode' in instA) ? "development" !== 'production' ? invariant(false, 'isAncestor: Invalid argument.') : _prodInvariant('35') : void 0;
+ !('_hostNode' in instB) ? "development" !== 'production' ? invariant(false, 'isAncestor: Invalid argument.') : _prodInvariant('35') : void 0;
+
+ while (instB) {
+   if (instB === instA) {
+     return true;
+   }
+   instB = instB._hostParent;
+ }
+ return false;
+}
+
+/**
+* Return the parent instance of the passed-in instance.
+*/
+function getParentInstance(inst) {
+ !('_hostNode' in inst) ? "development" !== 'production' ? invariant(false, 'getParentInstance: Invalid argument.') : _prodInvariant('36') : void 0;
+
+ return inst._hostParent;
+}
+
+/**
+* Simulates the traversal of a two-phase, capture/bubble event dispatch.
+*/
+function traverseTwoPhase(inst, fn, arg) {
+ var path = [];
+ while (inst) {
+   path.push(inst);
+   inst = inst._hostParent;
+ }
+ var i;
+ for (i = path.length; i-- > 0;) {
+   fn(path[i], 'captured', arg);
+ }
+ for (i = 0; i < path.length; i++) {
+   fn(path[i], 'bubbled', arg);
+ }
+}
+
+/**
+* Traverses the ID hierarchy and invokes the supplied `cb` on any IDs that
+* should would receive a `mouseEnter` or `mouseLeave` event.
+*
+* Does not invoke the callback on the nearest common ancestor because nothing
+* "entered" or "left" that element.
+*/
+function traverseEnterLeave(from, to, fn, argFrom, argTo) {
+ var common = from && to ? getLowestCommonAncestor(from, to) : null;
+ var pathFrom = [];
+ while (from && from !== common) {
+   pathFrom.push(from);
+   from = from._hostParent;
+ }
+ var pathTo = [];
+ while (to && to !== common) {
+   pathTo.push(to);
+   to = to._hostParent;
+ }
+ var i;
+ for (i = 0; i < pathFrom.length; i++) {
+   fn(pathFrom[i], 'bubbled', argFrom);
+ }
+ for (i = pathTo.length; i-- > 0;) {
+   fn(pathTo[i], 'captured', argTo);
+ }
+}
+
+module.exports = {
+ isAncestor: isAncestor,
+ getLowestCommonAncestor: getLowestCommonAncestor,
+ getParentInstance: getParentInstance,
+ traverseTwoPhase: traverseTwoPhase,
+ traverseEnterLeave: traverseEnterLeave
+};
+},{"125":125,"150":150}],48:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var ReactDOM = _dereq_(31);
+
+var ReactDOMUMDEntry = _assign({
+ __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
+   ReactInstanceMap: _dereq_(63)
+ }
+}, ReactDOM);
+
+if ("development" !== 'production') {
+ _assign(ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, {
+   // ReactPerf and ReactTestUtils currently only work with the DOM renderer
+   // so we expose them from here, but only in DEV mode.
+   ReactPerf: _dereq_(71),
+   ReactTestUtils: _dereq_(80)
+ });
+}
+
+module.exports = ReactDOMUMDEntry;
+},{"158":158,"31":31,"63":63,"71":71,"80":80}],49:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMProperty = _dereq_(11);
+var EventPluginRegistry = _dereq_(18);
+var ReactComponentTreeHook = _dereq_(132);
+
+var warning = _dereq_(157);
+
+if ("development" !== 'production') {
+ var reactProps = {
+   children: true,
+   dangerouslySetInnerHTML: true,
+   key: true,
+   ref: true,
+
+   autoFocus: true,
+   defaultValue: true,
+   valueLink: true,
+   defaultChecked: true,
+   checkedLink: true,
+   innerHTML: true,
+   suppressContentEditableWarning: true,
+   onFocusIn: true,
+   onFocusOut: true
+ };
+ var warnedProperties = {};
+
+ var validateProperty = function (tagName, name, debugID) {
+   if (DOMProperty.properties.hasOwnProperty(name) || DOMProperty.isCustomAttribute(name)) {
+     return true;
+   }
+   if (reactProps.hasOwnProperty(name) && reactProps[name] || warnedProperties.hasOwnProperty(name) && warnedProperties[name]) {
+     return true;
+   }
+   if (EventPluginRegistry.registrationNameModules.hasOwnProperty(name)) {
+     return true;
+   }
+   warnedProperties[name] = true;
+   var lowerCasedName = name.toLowerCase();
+
+   // data-* attributes should be lowercase; suggest the lowercase version
+   var standardName = DOMProperty.isCustomAttribute(lowerCasedName) ? lowerCasedName : DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? DOMProperty.getPossibleStandardName[lowerCasedName] : null;
+
+   var registrationName = EventPluginRegistry.possibleRegistrationNames.hasOwnProperty(lowerCasedName) ? EventPluginRegistry.possibleRegistrationNames[lowerCasedName] : null;
+
+   if (standardName != null) {
+     "development" !== 'production' ? warning(false, 'Unknown DOM property %s. Did you mean %s?%s', name, standardName, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+     return true;
+   } else if (registrationName != null) {
+     "development" !== 'production' ? warning(false, 'Unknown event handler property %s. Did you mean `%s`?%s', name, registrationName, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+     return true;
+   } else {
+     // We were unable to guess which prop the user intended.
+     // It is likely that the user was just blindly spreading/forwarding props
+     // Components should be careful to only render valid props/attributes.
+     // Warning will be invoked in warnUnknownProperties to allow grouping.
+     return false;
+   }
+ };
+}
+
+var warnUnknownProperties = function (debugID, element) {
+ var unknownProps = [];
+ for (var key in element.props) {
+   var isValid = validateProperty(element.type, key, debugID);
+   if (!isValid) {
+     unknownProps.push(key);
+   }
+ }
+
+ var unknownPropString = unknownProps.map(function (prop) {
+   return '`' + prop + '`';
+ }).join(', ');
+
+ if (unknownProps.length === 1) {
+   "development" !== 'production' ? warning(false, 'Unknown prop %s on <%s> tag. Remove this prop from the element. ' + 'For details, see https://fb.me/react-unknown-prop%s', unknownPropString, element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+ } else if (unknownProps.length > 1) {
+   "development" !== 'production' ? warning(false, 'Unknown props %s on <%s> tag. Remove these props from the element. ' + 'For details, see https://fb.me/react-unknown-prop%s', unknownPropString, element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0;
+ }
+};
+
+function handleElement(debugID, element) {
+ if (element == null || typeof element.type !== 'string') {
+   return;
+ }
+ if (element.type.indexOf('-') >= 0 || element.props.is) {
+   return;
+ }
+ warnUnknownProperties(debugID, element);
+}
+
+var ReactDOMUnknownPropertyHook = {
+ onBeforeMountComponent: function (debugID, element) {
+   handleElement(debugID, element);
+ },
+ onBeforeUpdateComponent: function (debugID, element) {
+   handleElement(debugID, element);
+ }
+};
+
+module.exports = ReactDOMUnknownPropertyHook;
+},{"11":11,"132":132,"157":157,"18":18}],50:[function(_dereq_,module,exports){
+/**
+* Copyright 2016-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var ReactInvalidSetStateWarningHook = _dereq_(65);
+var ReactHostOperationHistoryHook = _dereq_(60);
+var ReactComponentTreeHook = _dereq_(132);
+var ExecutionEnvironment = _dereq_(136);
+
+var performanceNow = _dereq_(155);
+var warning = _dereq_(157);
+
+var hooks = [];
+var didHookThrowForEvent = {};
+
+function callHook(event, fn, context, arg1, arg2, arg3, arg4, arg5) {
+ try {
+   fn.call(context, arg1, arg2, arg3, arg4, arg5);
+ } catch (e) {
+   "development" !== 'production' ? warning(didHookThrowForEvent[event], 'Exception thrown by hook while handling %s: %s', event, e + '\n' + e.stack) : void 0;
+   didHookThrowForEvent[event] = true;
+ }
+}
+
+function emitEvent(event, arg1, arg2, arg3, arg4, arg5) {
+ for (var i = 0; i < hooks.length; i++) {
+   var hook = hooks[i];
+   var fn = hook[event];
+   if (fn) {
+     callHook(event, fn, hook, arg1, arg2, arg3, arg4, arg5);
+   }
+ }
+}
+
+var isProfiling = false;
+var flushHistory = [];
+var lifeCycleTimerStack = [];
+var currentFlushNesting = 0;
+var currentFlushMeasurements = [];
+var currentFlushStartTime = 0;
+var currentTimerDebugID = null;
+var currentTimerStartTime = 0;
+var currentTimerNestedFlushDuration = 0;
+var currentTimerType = null;
+
+var lifeCycleTimerHasWarned = false;
+
+function clearHistory() {
+ ReactComponentTreeHook.purgeUnmountedComponents();
+ ReactHostOperationHistoryHook.clearHistory();
+}
+
+function getTreeSnapshot(registeredIDs) {
+ return registeredIDs.reduce(function (tree, id) {
+   var ownerID = ReactComponentTreeHook.getOwnerID(id);
+   var parentID = ReactComponentTreeHook.getParentID(id);
+   tree[id] = {
+     displayName: ReactComponentTreeHook.getDisplayName(id),
+     text: ReactComponentTreeHook.getText(id),
+     updateCount: ReactComponentTreeHook.getUpdateCount(id),
+     childIDs: ReactComponentTreeHook.getChildIDs(id),
+     // Text nodes don't have owners but this is close enough.
+     ownerID: ownerID || parentID && ReactComponentTreeHook.getOwnerID(parentID) || 0,
+     parentID: parentID
+   };
+   return tree;
+ }, {});
+}
+
+function resetMeasurements() {
+ var previousStartTime = currentFlushStartTime;
+ var previousMeasurements = currentFlushMeasurements;
+ var previousOperations = ReactHostOperationHistoryHook.getHistory();
+
+ if (currentFlushNesting === 0) {
+   currentFlushStartTime = 0;
+   currentFlushMeasurements = [];
+   clearHistory();
+   return;
+ }
+
+ if (previousMeasurements.length || previousOperations.length) {
+   var registeredIDs = ReactComponentTreeHook.getRegisteredIDs();
+   flushHistory.push({
+     duration: performanceNow() - previousStartTime,
+     measurements: previousMeasurements || [],
+     operations: previousOperations || [],
+     treeSnapshot: getTreeSnapshot(registeredIDs)
+   });
+ }
+
+ clearHistory();
+ currentFlushStartTime = performanceNow();
+ currentFlushMeasurements = [];
+}
+
+function checkDebugID(debugID) {
+ var allowRoot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+ if (allowRoot && debugID === 0) {
+   return;
+ }
+ if (!debugID) {
+   "development" !== 'production' ? warning(false, 'ReactDebugTool: debugID may not be empty.') : void 0;
+ }
+}
+
+function beginLifeCycleTimer(debugID, timerType) {
+ if (currentFlushNesting === 0) {
+   return;
+ }
+ if (currentTimerType && !lifeCycleTimerHasWarned) {
+   "development" !== 'production' ? warning(false, 'There is an internal error in the React performance measurement code. ' + 'Did not expect %s timer to start while %s timer is still in ' + 'progress for %s instance.', timerType, currentTimerType || 'no', debugID === currentTimerDebugID ? 'the same' : 'another') : void 0;
+   lifeCycleTimerHasWarned = true;
+ }
+ currentTimerStartTime = performanceNow();
+ currentTimerNestedFlushDuration = 0;
+ currentTimerDebugID = debugID;
+ currentTimerType = timerType;
+}
+
+function endLifeCycleTimer(debugID, timerType) {
+ if (currentFlushNesting === 0) {
+   return;
+ }
+ if (currentTimerType !== timerType && !lifeCycleTimerHasWarned) {
+   "development" !== 'production' ? warning(false, 'There is an internal error in the React performance measurement code. ' + 'We did not expect %s timer to stop while %s timer is still in ' + 'progress for %s instance. Please report this as a bug in React.', timerType, currentTimerType || 'no', debugID === currentTimerDebugID ? 'the same' : 'another') : void 0;
+   lifeCycleTimerHasWarned = true;
+ }
+ if (isProfiling) {
+   currentFlushMeasurements.push({
+     timerType: timerType,
+     instanceID: debugID,
+     duration: performanceNow() - currentTimerStartTime - currentTimerNestedFlushDuration
+   });
+ }
+ currentTimerStartTime = 0;
+ currentTimerNestedFlushDuration = 0;
+ currentTimerDebugID = null;
+ currentTimerType = null;
+}
+
+function pauseCurrentLifeCycleTimer() {
+ var currentTimer = {
+   startTime: currentTimerStartTime,
+   nestedFlushStartTime: performanceNow(),
+   debugID: currentTimerDebugID,
+   timerType: currentTimerType
+ };
+ lifeCycleTimerStack.push(currentTimer);
+ currentTimerStartTime = 0;
+ currentTimerNestedFlushDuration = 0;
+ currentTimerDebugID = null;
+ currentTimerType = null;
+}
+
+function resumeCurrentLifeCycleTimer() {
+ var _lifeCycleTimerStack$ = lifeCycleTimerStack.pop(),
+     startTime = _lifeCycleTimerStack$.startTime,
+     nestedFlushStartTime = _lifeCycleTimerStack$.nestedFlushStartTime,
+     debugID = _lifeCycleTimerStack$.debugID,
+     timerType = _lifeCycleTimerStack$.timerType;
+
+ var nestedFlushDuration = performanceNow() - nestedFlushStartTime;
+ currentTimerStartTime = startTime;
+ currentTimerNestedFlushDuration += nestedFlushDuration;
+ currentTimerDebugID = debugID;
+ currentTimerType = timerType;
+}
+
+var lastMarkTimeStamp = 0;
+var canUsePerformanceMeasure =
+// $FlowFixMe https://github.com/facebook/flow/issues/2345
+typeof performance !== 'undefined' && typeof performance.mark === 'function' && typeof performance.clearMarks === 'function' && typeof performance.measure === 'function' && typeof performance.clearMeasures === 'function';
+
+function shouldMark(debugID) {
+ if (!isProfiling || !canUsePerformanceMeasure) {
+   return false;
+ }
+ var element = ReactComponentTreeHook.getElement(debugID);
+ if (element == null || typeof element !== 'object') {
+   return false;
+ }
+ var isHostElement = typeof element.type === 'string';
+ if (isHostElement) {
+   return false;
+ }
+ return true;
+}
+
+function markBegin(debugID, markType) {
+ if (!shouldMark(debugID)) {
+   return;
+ }
+
+ var markName = debugID + '::' + markType;
+ lastMarkTimeStamp = performanceNow();
+ performance.mark(markName);
+}
+
+function markEnd(debugID, markType) {
+ if (!shouldMark(debugID)) {
+   return;
+ }
+
+ var markName = debugID + '::' + markType;
+ var displayName = ReactComponentTreeHook.getDisplayName(debugID) || 'Unknown';
+
+ // Chrome has an issue of dropping markers recorded too fast:
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=640652
+ // To work around this, we will not report very small measurements.
+ // I determined the magic number by tweaking it back and forth.
+ // 0.05ms was enough to prevent the issue, but I set it to 0.1ms to be safe.
+ // When the bug is fixed, we can `measure()` unconditionally if we want to.
+ var timeStamp = performanceNow();
+ if (timeStamp - lastMarkTimeStamp > 0.1) {
+   var measurementName = displayName + ' [' + markType + ']';
+   performance.measure(measurementName, markName);
+ }
+
+ performance.clearMarks(markName);
+ performance.clearMeasures(measurementName);
+}
+
+var ReactDebugTool = {
+ addHook: function (hook) {
+   hooks.push(hook);
+ },
+ removeHook: function (hook) {
+   for (var i = 0; i < hooks.length; i++) {
+     if (hooks[i] === hook) {
+       hooks.splice(i, 1);
+       i--;
+     }
+   }
+ },
+ isProfiling: function () {
+   return isProfiling;
+ },
+ beginProfiling: function () {
+   if (isProfiling) {
+     return;
+   }
+
+   isProfiling = true;
+   flushHistory.length = 0;
+   resetMeasurements();
+   ReactDebugTool.addHook(ReactHostOperationHistoryHook);
+ },
+ endProfiling: function () {
+   if (!isProfiling) {
+     return;
+   }
+
+   isProfiling = false;
+   resetMeasurements();
+   ReactDebugTool.removeHook(ReactHostOperationHistoryHook);
+ },
+ getFlushHistory: function () {
+   return flushHistory;
+ },
+ onBeginFlush: function () {
+   currentFlushNesting++;
+   resetMeasurements();
+   pauseCurrentLifeCycleTimer();
+   emitEvent('onBeginFlush');
+ },
+ onEndFlush: function () {
+   resetMeasurements();
+   currentFlushNesting--;
+   resumeCurrentLifeCycleTimer();
+   emitEvent('onEndFlush');
+ },
+ onBeginLifeCycleTimer: function (debugID, timerType) {
+   checkDebugID(debugID);
+   emitEvent('onBeginLifeCycleTimer', debugID, timerType);
+   markBegin(debugID, timerType);
+   beginLifeCycleTimer(debugID, timerType);
+ },
+ onEndLifeCycleTimer: function (debugID, timerType) {
+   checkDebugID(debugID);
+   endLifeCycleTimer(debugID, timerType);
+   markEnd(debugID, timerType);
+   emitEvent('onEndLifeCycleTimer', debugID, timerType);
+ },
+ onBeginProcessingChildContext: function () {
+   emitEvent('onBeginProcessingChildContext');
+ },
+ onEndProcessingChildContext: function () {
+   emitEvent('onEndProcessingChildContext');
+ },
+ onHostOperation: function (operation) {
+   checkDebugID(operation.instanceID);
+   emitEvent('onHostOperation', operation);
+ },
+ onSetState: function () {
+   emitEvent('onSetState');
+ },
+ onSetChildren: function (debugID, childDebugIDs) {
+   checkDebugID(debugID);
+   childDebugIDs.forEach(checkDebugID);
+   emitEvent('onSetChildren', debugID, childDebugIDs);
+ },
+ onBeforeMountComponent: function (debugID, element, parentDebugID) {
+   checkDebugID(debugID);
+   checkDebugID(parentDebugID, true);
+   emitEvent('onBeforeMountComponent', debugID, element, parentDebugID);
+   markBegin(debugID, 'mount');
+ },
+ onMountComponent: function (debugID) {
+   checkDebugID(debugID);
+   markEnd(debugID, 'mount');
+   emitEvent('onMountComponent', debugID);
+ },
+ onBeforeUpdateComponent: function (debugID, element) {
+   checkDebugID(debugID);
+   emitEvent('onBeforeUpdateComponent', debugID, element);
+   markBegin(debugID, 'update');
+ },
+ onUpdateComponent: function (debugID) {
+   checkDebugID(debugID);
+   markEnd(debugID, 'update');
+   emitEvent('onUpdateComponent', debugID);
+ },
+ onBeforeUnmountComponent: function (debugID) {
+   checkDebugID(debugID);
+   emitEvent('onBeforeUnmountComponent', debugID);
+   markBegin(debugID, 'unmount');
+ },
+ onUnmountComponent: function (debugID) {
+   checkDebugID(debugID);
+   markEnd(debugID, 'unmount');
+   emitEvent('onUnmountComponent', debugID);
+ },
+ onTestEvent: function () {
+   emitEvent('onTestEvent');
+ }
+};
+
+// TODO remove these when RN/www gets updated
+ReactDebugTool.addDevtool = ReactDebugTool.addHook;
+ReactDebugTool.removeDevtool = ReactDebugTool.removeHook;
+
+ReactDebugTool.addHook(ReactInvalidSetStateWarningHook);
+ReactDebugTool.addHook(ReactComponentTreeHook);
+var url = ExecutionEnvironment.canUseDOM && window.location.href || '';
+if (/[?&]react_perf\b/.test(url)) {
+ ReactDebugTool.beginProfiling();
+}
+
+module.exports = ReactDebugTool;
+},{"132":132,"136":136,"155":155,"157":157,"60":60,"65":65}],51:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var ReactUpdates = _dereq_(82);
+var Transaction = _dereq_(100);
+
+var emptyFunction = _dereq_(142);
+
+var RESET_BATCHED_UPDATES = {
+ initialize: emptyFunction,
+ close: function () {
+   ReactDefaultBatchingStrategy.isBatchingUpdates = false;
+ }
+};
+
+var FLUSH_BATCHED_UPDATES = {
+ initialize: emptyFunction,
+ close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates)
+};
+
+var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];
+
+function ReactDefaultBatchingStrategyTransaction() {
+ this.reinitializeTransaction();
+}
+
+_assign(ReactDefaultBatchingStrategyTransaction.prototype, Transaction, {
+ getTransactionWrappers: function () {
+   return TRANSACTION_WRAPPERS;
+ }
+});
+
+var transaction = new ReactDefaultBatchingStrategyTransaction();
+
+var ReactDefaultBatchingStrategy = {
+ isBatchingUpdates: false,
+
+ /**
+  * Call the provided function in a context within which calls to `setState`
+  * and friends are batched such that components aren't updated unnecessarily.
+  */
+ batchedUpdates: function (callback, a, b, c, d, e) {
+   var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
+
+   ReactDefaultBatchingStrategy.isBatchingUpdates = true;
+
+   // The code is written this way to avoid extra allocations
+   if (alreadyBatchingUpdates) {
+     return callback(a, b, c, d, e);
+   } else {
+     return transaction.perform(callback, null, a, b, c, d, e);
+   }
+ }
+};
+
+module.exports = ReactDefaultBatchingStrategy;
+},{"100":100,"142":142,"158":158,"82":82}],52:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ARIADOMPropertyConfig = _dereq_(1);
+var BeforeInputEventPlugin = _dereq_(3);
+var ChangeEventPlugin = _dereq_(7);
+var DefaultEventPluginOrder = _dereq_(14);
+var EnterLeaveEventPlugin = _dereq_(15);
+var HTMLDOMPropertyConfig = _dereq_(22);
+var ReactComponentBrowserEnvironment = _dereq_(28);
+var ReactDOMComponent = _dereq_(32);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactDOMEmptyComponent = _dereq_(36);
+var ReactDOMTreeTraversal = _dereq_(47);
+var ReactDOMTextComponent = _dereq_(45);
+var ReactDefaultBatchingStrategy = _dereq_(51);
+var ReactEventListener = _dereq_(57);
+var ReactInjection = _dereq_(61);
+var ReactReconcileTransaction = _dereq_(74);
+var SVGDOMPropertyConfig = _dereq_(84);
+var SelectEventPlugin = _dereq_(85);
+var SimpleEventPlugin = _dereq_(86);
+
+var alreadyInjected = false;
+
+function inject() {
+ if (alreadyInjected) {
+   // TODO: This is currently true because these injections are shared between
+   // the client and the server package. They should be built independently
+   // and not share any injection state. Then this problem will be solved.
+   return;
+ }
+ alreadyInjected = true;
+
+ ReactInjection.EventEmitter.injectReactEventListener(ReactEventListener);
+
+ /**
+  * Inject modules for resolving DOM hierarchy and plugin ordering.
+  */
+ ReactInjection.EventPluginHub.injectEventPluginOrder(DefaultEventPluginOrder);
+ ReactInjection.EventPluginUtils.injectComponentTree(ReactDOMComponentTree);
+ ReactInjection.EventPluginUtils.injectTreeTraversal(ReactDOMTreeTraversal);
+
+ /**
+  * Some important event plugins included by default (without having to require
+  * them).
+  */
+ ReactInjection.EventPluginHub.injectEventPluginsByName({
+   SimpleEventPlugin: SimpleEventPlugin,
+   EnterLeaveEventPlugin: EnterLeaveEventPlugin,
+   ChangeEventPlugin: ChangeEventPlugin,
+   SelectEventPlugin: SelectEventPlugin,
+   BeforeInputEventPlugin: BeforeInputEventPlugin
+ });
+
+ ReactInjection.HostComponent.injectGenericComponentClass(ReactDOMComponent);
+
+ ReactInjection.HostComponent.injectTextComponentClass(ReactDOMTextComponent);
+
+ ReactInjection.DOMProperty.injectDOMPropertyConfig(ARIADOMPropertyConfig);
+ ReactInjection.DOMProperty.injectDOMPropertyConfig(HTMLDOMPropertyConfig);
+ ReactInjection.DOMProperty.injectDOMPropertyConfig(SVGDOMPropertyConfig);
+
+ ReactInjection.EmptyComponent.injectEmptyComponentFactory(function (instantiate) {
+   return new ReactDOMEmptyComponent(instantiate);
+ });
+
+ ReactInjection.Updates.injectReconcileTransaction(ReactReconcileTransaction);
+ ReactInjection.Updates.injectBatchingStrategy(ReactDefaultBatchingStrategy);
+
+ ReactInjection.Component.injectEnvironment(ReactComponentBrowserEnvironment);
+}
+
+module.exports = {
+ inject: inject
+};
+},{"1":1,"14":14,"15":15,"22":22,"28":28,"3":3,"32":32,"34":34,"36":36,"45":45,"47":47,"51":51,"57":57,"61":61,"7":7,"74":74,"84":84,"85":85,"86":86}],53:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+// The Symbol used to tag the ReactElement type. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+
+var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;
+
+module.exports = REACT_ELEMENT_TYPE;
+},{}],54:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var emptyComponentFactory;
+
+var ReactEmptyComponentInjection = {
+ injectEmptyComponentFactory: function (factory) {
+   emptyComponentFactory = factory;
+ }
+};
+
+var ReactEmptyComponent = {
+ create: function (instantiate) {
+   return emptyComponentFactory(instantiate);
+ }
+};
+
+ReactEmptyComponent.injection = ReactEmptyComponentInjection;
+
+module.exports = ReactEmptyComponent;
+},{}],55:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var caughtError = null;
+
+/**
+* Call a function while guarding against errors that happens within it.
+*
+* @param {String} name of the guard to use for logging or debugging
+* @param {Function} func The function to invoke
+* @param {*} a First argument
+* @param {*} b Second argument
+*/
+function invokeGuardedCallback(name, func, a) {
+ try {
+   func(a);
+ } catch (x) {
+   if (caughtError === null) {
+     caughtError = x;
+   }
+ }
+}
+
+var ReactErrorUtils = {
+ invokeGuardedCallback: invokeGuardedCallback,
+
+ /**
+  * Invoked by ReactTestUtils.Simulate so that any errors thrown by the event
+  * handler are sure to be rethrown by rethrowCaughtError.
+  */
+ invokeGuardedCallbackWithCatch: invokeGuardedCallback,
+
+ /**
+  * During execution of guarded functions we will capture the first error which
+  * we will rethrow to be handled by the top level error handler.
+  */
+ rethrowCaughtError: function () {
+   if (caughtError) {
+     var error = caughtError;
+     caughtError = null;
+     throw error;
+   }
+ }
+};
+
+if ("development" !== 'production') {
+ /**
+  * To help development we can get better devtools integration by simulating a
+  * real browser event.
+  */
+ if (typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof document !== 'undefined' && typeof document.createEvent === 'function') {
+   var fakeNode = document.createElement('react');
+   ReactErrorUtils.invokeGuardedCallback = function (name, func, a) {
+     var boundFunc = func.bind(null, a);
+     var evtType = 'react-' + name;
+     fakeNode.addEventListener(evtType, boundFunc, false);
+     var evt = document.createEvent('Event');
+     // $FlowFixMe https://github.com/facebook/flow/issues/2336
+     evt.initEvent(evtType, false, false);
+     fakeNode.dispatchEvent(evt);
+     fakeNode.removeEventListener(evtType, boundFunc, false);
+   };
+ }
+}
+
+module.exports = ReactErrorUtils;
+},{}],56:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var EventPluginHub = _dereq_(17);
+
+function runEventQueueInBatch(events) {
+ EventPluginHub.enqueueEvents(events);
+ EventPluginHub.processEventQueue(false);
+}
+
+var ReactEventEmitterMixin = {
+
+ /**
+  * Streams a fired top-level event to `EventPluginHub` where plugins have the
+  * opportunity to create `ReactEvent`s to be dispatched.
+  */
+ handleTopLevel: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+   var events = EventPluginHub.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
+   runEventQueueInBatch(events);
+ }
+};
+
+module.exports = ReactEventEmitterMixin;
+},{"17":17}],57:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var EventListener = _dereq_(135);
+var ExecutionEnvironment = _dereq_(136);
+var PooledClass = _dereq_(25);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactUpdates = _dereq_(82);
+
+var getEventTarget = _dereq_(114);
+var getUnboundedScrollPosition = _dereq_(147);
+
+/**
+* Find the deepest React component completely containing the root of the
+* passed-in instance (for use when entire React trees are nested within each
+* other). If React trees are not nested, returns null.
+*/
+function findParent(inst) {
+ // TODO: It may be a good idea to cache this to prevent unnecessary DOM
+ // traversal, but caching is difficult to do correctly without using a
+ // mutation observer to listen for all DOM changes.
+ while (inst._hostParent) {
+   inst = inst._hostParent;
+ }
+ var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
+ var container = rootNode.parentNode;
+ return ReactDOMComponentTree.getClosestInstanceFromNode(container);
+}
+
+// Used to store ancestor hierarchy in top level callback
+function TopLevelCallbackBookKeeping(topLevelType, nativeEvent) {
+ this.topLevelType = topLevelType;
+ this.nativeEvent = nativeEvent;
+ this.ancestors = [];
+}
+_assign(TopLevelCallbackBookKeeping.prototype, {
+ destructor: function () {
+   this.topLevelType = null;
+   this.nativeEvent = null;
+   this.ancestors.length = 0;
+ }
+});
+PooledClass.addPoolingTo(TopLevelCallbackBookKeeping, PooledClass.twoArgumentPooler);
+
+function handleTopLevelImpl(bookKeeping) {
+ var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);
+ var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(nativeEventTarget);
+
+ // Loop through the hierarchy, in case there's any nested components.
+ // It's important that we build the array of ancestors before calling any
+ // event handlers, because event handlers can modify the DOM, leading to
+ // inconsistencies with ReactMount's node cache. See #1105.
+ var ancestor = targetInst;
+ do {
+   bookKeeping.ancestors.push(ancestor);
+   ancestor = ancestor && findParent(ancestor);
+ } while (ancestor);
+
+ for (var i = 0; i < bookKeeping.ancestors.length; i++) {
+   targetInst = bookKeeping.ancestors[i];
+   ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
+ }
+}
+
+function scrollValueMonitor(cb) {
+ var scrollPosition = getUnboundedScrollPosition(window);
+ cb(scrollPosition);
+}
+
+var ReactEventListener = {
+ _enabled: true,
+ _handleTopLevel: null,
+
+ WINDOW_HANDLE: ExecutionEnvironment.canUseDOM ? window : null,
+
+ setHandleTopLevel: function (handleTopLevel) {
+   ReactEventListener._handleTopLevel = handleTopLevel;
+ },
+
+ setEnabled: function (enabled) {
+   ReactEventListener._enabled = !!enabled;
+ },
+
+ isEnabled: function () {
+   return ReactEventListener._enabled;
+ },
+
+ /**
+  * Traps top-level events by using event bubbling.
+  *
+  * @param {string} topLevelType Record from `EventConstants`.
+  * @param {string} handlerBaseName Event name (e.g. "click").
+  * @param {object} element Element on which to attach listener.
+  * @return {?object} An object with a remove function which will forcefully
+  *                  remove the listener.
+  * @internal
+  */
+ trapBubbledEvent: function (topLevelType, handlerBaseName, element) {
+   if (!element) {
+     return null;
+   }
+   return EventListener.listen(element, handlerBaseName, ReactEventListener.dispatchEvent.bind(null, topLevelType));
+ },
+
+ /**
+  * Traps a top-level event by using event capturing.
+  *
+  * @param {string} topLevelType Record from `EventConstants`.
+  * @param {string} handlerBaseName Event name (e.g. "click").
+  * @param {object} element Element on which to attach listener.
+  * @return {?object} An object with a remove function which will forcefully
+  *                  remove the listener.
+  * @internal
+  */
+ trapCapturedEvent: function (topLevelType, handlerBaseName, element) {
+   if (!element) {
+     return null;
+   }
+   return EventListener.capture(element, handlerBaseName, ReactEventListener.dispatchEvent.bind(null, topLevelType));
+ },
+
+ monitorScrollValue: function (refresh) {
+   var callback = scrollValueMonitor.bind(null, refresh);
+   EventListener.listen(window, 'scroll', callback);
+ },
+
+ dispatchEvent: function (topLevelType, nativeEvent) {
+   if (!ReactEventListener._enabled) {
+     return;
+   }
+
+   var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);
+   try {
+     // Event queue being processed in the same cycle allows
+     // `preventDefault`.
+     ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
+   } finally {
+     TopLevelCallbackBookKeeping.release(bookKeeping);
+   }
+ }
+};
+
+module.exports = ReactEventListener;
+},{"114":114,"135":135,"136":136,"147":147,"158":158,"25":25,"34":34,"82":82}],58:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var ReactFeatureFlags = {
+ // When true, call console.time() before and .timeEnd() after each top-level
+ // render (both initial renders and updates). Useful when looking at prod-mode
+ // timeline profiles in Chrome, for example.
+ logTopLevelRenders: false
+};
+
+module.exports = ReactFeatureFlags;
+},{}],59:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var invariant = _dereq_(150);
+
+var genericComponentClass = null;
+// This registry keeps track of wrapper classes around host tags.
+var tagToComponentClass = {};
+var textComponentClass = null;
+
+var ReactHostComponentInjection = {
+ // This accepts a class that receives the tag string. This is a catch all
+ // that can render any kind of tag.
+ injectGenericComponentClass: function (componentClass) {
+   genericComponentClass = componentClass;
+ },
+ // This accepts a text component class that takes the text string to be
+ // rendered as props.
+ injectTextComponentClass: function (componentClass) {
+   textComponentClass = componentClass;
+ },
+ // This accepts a keyed object with classes as values. Each key represents a
+ // tag. That particular tag will use this class instead of the generic one.
+ injectComponentClasses: function (componentClasses) {
+   _assign(tagToComponentClass, componentClasses);
+ }
+};
+
+/**
+* Get a host internal component class for a specific tag.
+*
+* @param {ReactElement} element The element to create.
+* @return {function} The internal class constructor function.
+*/
+function createInternalComponent(element) {
+ !genericComponentClass ? "development" !== 'production' ? invariant(false, 'There is no registered component for the tag %s', element.type) : _prodInvariant('111', element.type) : void 0;
+ return new genericComponentClass(element);
+}
+
+/**
+* @param {ReactText} text
+* @return {ReactComponent}
+*/
+function createInstanceForText(text) {
+ return new textComponentClass(text);
+}
+
+/**
+* @param {ReactComponent} component
+* @return {boolean}
+*/
+function isTextComponent(component) {
+ return component instanceof textComponentClass;
+}
+
+var ReactHostComponent = {
+ createInternalComponent: createInternalComponent,
+ createInstanceForText: createInstanceForText,
+ isTextComponent: isTextComponent,
+ injection: ReactHostComponentInjection
+};
+
+module.exports = ReactHostComponent;
+},{"125":125,"150":150,"158":158}],60:[function(_dereq_,module,exports){
+/**
+* Copyright 2016-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var history = [];
+
+var ReactHostOperationHistoryHook = {
+ onHostOperation: function (operation) {
+   history.push(operation);
+ },
+ clearHistory: function () {
+   if (ReactHostOperationHistoryHook._preventClearing) {
+     // Should only be used for tests.
+     return;
+   }
+
+   history = [];
+ },
+ getHistory: function () {
+   return history;
+ }
+};
+
+module.exports = ReactHostOperationHistoryHook;
+},{}],61:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var DOMProperty = _dereq_(11);
+var EventPluginHub = _dereq_(17);
+var EventPluginUtils = _dereq_(19);
+var ReactComponentEnvironment = _dereq_(29);
+var ReactEmptyComponent = _dereq_(54);
+var ReactBrowserEventEmitter = _dereq_(26);
+var ReactHostComponent = _dereq_(59);
+var ReactUpdates = _dereq_(82);
+
+var ReactInjection = {
+ Component: ReactComponentEnvironment.injection,
+ DOMProperty: DOMProperty.injection,
+ EmptyComponent: ReactEmptyComponent.injection,
+ EventPluginHub: EventPluginHub.injection,
+ EventPluginUtils: EventPluginUtils.injection,
+ EventEmitter: ReactBrowserEventEmitter.injection,
+ HostComponent: ReactHostComponent.injection,
+ Updates: ReactUpdates.injection
+};
+
+module.exports = ReactInjection;
+},{"11":11,"17":17,"19":19,"26":26,"29":29,"54":54,"59":59,"82":82}],62:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactDOMSelection = _dereq_(44);
+
+var containsNode = _dereq_(139);
+var focusNode = _dereq_(144);
+var getActiveElement = _dereq_(145);
+
+function isInDocument(node) {
+ return containsNode(document.documentElement, node);
+}
+
+/**
+* @ReactInputSelection: React input selection module. Based on Selection.js,
+* but modified to be suitable for react and has a couple of bug fixes (doesn't
+* assume buttons have range selections allowed).
+* Input selection module for React.
+*/
+var ReactInputSelection = {
+
+ hasSelectionCapabilities: function (elem) {
+   var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
+   return nodeName && (nodeName === 'input' && elem.type === 'text' || nodeName === 'textarea' || elem.contentEditable === 'true');
+ },
+
+ getSelectionInformation: function () {
+   var focusedElem = getActiveElement();
+   return {
+     focusedElem: focusedElem,
+     selectionRange: ReactInputSelection.hasSelectionCapabilities(focusedElem) ? ReactInputSelection.getSelection(focusedElem) : null
+   };
+ },
+
+ /**
+  * @restoreSelection: If any selection information was potentially lost,
+  * restore it. This is useful when performing operations that could remove dom
+  * nodes and place them back in, resulting in focus being lost.
+  */
+ restoreSelection: function (priorSelectionInformation) {
+   var curFocusedElem = getActiveElement();
+   var priorFocusedElem = priorSelectionInformation.focusedElem;
+   var priorSelectionRange = priorSelectionInformation.selectionRange;
+   if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
+     if (ReactInputSelection.hasSelectionCapabilities(priorFocusedElem)) {
+       ReactInputSelection.setSelection(priorFocusedElem, priorSelectionRange);
+     }
+     focusNode(priorFocusedElem);
+   }
+ },
+
+ /**
+  * @getSelection: Gets the selection bounds of a focused textarea, input or
+  * contentEditable node.
+  * -@input: Look up selection bounds of this input
+  * -@return {start: selectionStart, end: selectionEnd}
+  */
+ getSelection: function (input) {
+   var selection;
+
+   if ('selectionStart' in input) {
+     // Modern browser with input or textarea.
+     selection = {
+       start: input.selectionStart,
+       end: input.selectionEnd
+     };
+   } else if (document.selection && input.nodeName && input.nodeName.toLowerCase() === 'input') {
+     // IE8 input.
+     var range = document.selection.createRange();
+     // There can only be one selection per document in IE, so it must
+     // be in our element.
+     if (range.parentElement() === input) {
+       selection = {
+         start: -range.moveStart('character', -input.value.length),
+         end: -range.moveEnd('character', -input.value.length)
+       };
+     }
+   } else {
+     // Content editable or old IE textarea.
+     selection = ReactDOMSelection.getOffsets(input);
+   }
+
+   return selection || { start: 0, end: 0 };
+ },
+
+ /**
+  * @setSelection: Sets the selection bounds of a textarea or input and focuses
+  * the input.
+  * -@input     Set selection bounds of this input or textarea
+  * -@offsets   Object of same form that is returned from get*
+  */
+ setSelection: function (input, offsets) {
+   var start = offsets.start;
+   var end = offsets.end;
+   if (end === undefined) {
+     end = start;
+   }
+
+   if ('selectionStart' in input) {
+     input.selectionStart = start;
+     input.selectionEnd = Math.min(end, input.value.length);
+   } else if (document.selection && input.nodeName && input.nodeName.toLowerCase() === 'input') {
+     var range = input.createTextRange();
+     range.collapse(true);
+     range.moveStart('character', start);
+     range.moveEnd('character', end - start);
+     range.select();
+   } else {
+     ReactDOMSelection.setOffsets(input, offsets);
+   }
+ }
+};
+
+module.exports = ReactInputSelection;
+},{"139":139,"144":144,"145":145,"44":44}],63:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* `ReactInstanceMap` maintains a mapping from a public facing stateful
+* instance (key) and the internal representation (value). This allows public
+* methods to accept the user facing instance as an argument and map them back
+* to internal methods.
+*/
+
+// TODO: Replace this with ES6: var ReactInstanceMap = new Map();
+
+var ReactInstanceMap = {
+
+ /**
+  * This API should be called `delete` but we'd have to make sure to always
+  * transform these to strings for IE support. When this transform is fully
+  * supported we can rename it.
+  */
+ remove: function (key) {
+   key._reactInternalInstance = undefined;
+ },
+
+ get: function (key) {
+   return key._reactInternalInstance;
+ },
+
+ has: function (key) {
+   return key._reactInternalInstance !== undefined;
+ },
+
+ set: function (key, value) {
+   key._reactInternalInstance = value;
+ }
+
+};
+
+module.exports = ReactInstanceMap;
+},{}],64:[function(_dereq_,module,exports){
+/**
+* Copyright 2016-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+// Trust the developer to only use ReactInstrumentation with a __DEV__ check
+
+var debugTool = null;
+
+if ("development" !== 'production') {
+ var ReactDebugTool = _dereq_(50);
+ debugTool = ReactDebugTool;
+}
+
+module.exports = { debugTool: debugTool };
+},{"50":50}],65:[function(_dereq_,module,exports){
+/**
+* Copyright 2016-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var warning = _dereq_(157);
+
+if ("development" !== 'production') {
+ var processingChildContext = false;
+
+ var warnInvalidSetState = function () {
+   "development" !== 'production' ? warning(!processingChildContext, 'setState(...): Cannot call setState() inside getChildContext()') : void 0;
+ };
+}
+
+var ReactInvalidSetStateWarningHook = {
+ onBeginProcessingChildContext: function () {
+   processingChildContext = true;
+ },
+ onEndProcessingChildContext: function () {
+   processingChildContext = false;
+ },
+ onSetState: function () {
+   warnInvalidSetState();
+ }
+};
+
+module.exports = ReactInvalidSetStateWarningHook;
+},{"157":157}],66:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var adler32 = _dereq_(103);
+
+var TAG_END = /\/?>/;
+var COMMENT_START = /^<\!\-\-/;
+
+var ReactMarkupChecksum = {
+ CHECKSUM_ATTR_NAME: 'data-react-checksum',
+
+ /**
+  * @param {string} markup Markup string
+  * @return {string} Markup string with checksum attribute attached
+  */
+ addChecksumToMarkup: function (markup) {
+   var checksum = adler32(markup);
+
+   // Add checksum (handle both parent tags, comments and self-closing tags)
+   if (COMMENT_START.test(markup)) {
+     return markup;
+   } else {
+     return markup.replace(TAG_END, ' ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="' + checksum + '"$&');
+   }
+ },
+
+ /**
+  * @param {string} markup to use
+  * @param {DOMElement} element root React element
+  * @returns {boolean} whether or not the markup is the same
+  */
+ canReuseMarkup: function (markup, element) {
+   var existingChecksum = element.getAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
+   existingChecksum = existingChecksum && parseInt(existingChecksum, 10);
+   var markupChecksum = adler32(markup);
+   return markupChecksum === existingChecksum;
+ }
+};
+
+module.exports = ReactMarkupChecksum;
+},{"103":103}],67:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var DOMLazyTree = _dereq_(9);
+var DOMProperty = _dereq_(11);
+var React = _dereq_(134);
+var ReactBrowserEventEmitter = _dereq_(26);
+var ReactCurrentOwner = _dereq_(133);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactDOMContainerInfo = _dereq_(35);
+var ReactDOMFeatureFlags = _dereq_(37);
+var ReactFeatureFlags = _dereq_(58);
+var ReactInstanceMap = _dereq_(63);
+var ReactInstrumentation = _dereq_(64);
+var ReactMarkupChecksum = _dereq_(66);
+var ReactReconciler = _dereq_(75);
+var ReactUpdateQueue = _dereq_(81);
+var ReactUpdates = _dereq_(82);
+
+var emptyObject = _dereq_(143);
+var instantiateReactComponent = _dereq_(121);
+var invariant = _dereq_(150);
+var setInnerHTML = _dereq_(127);
+var shouldUpdateReactComponent = _dereq_(129);
+var warning = _dereq_(157);
+
+var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
+var ROOT_ATTR_NAME = DOMProperty.ROOT_ATTRIBUTE_NAME;
+
+var ELEMENT_NODE_TYPE = 1;
+var DOC_NODE_TYPE = 9;
+var DOCUMENT_FRAGMENT_NODE_TYPE = 11;
+
+var instancesByReactRootID = {};
+
+/**
+* Finds the index of the first character
+* that's not common between the two given strings.
+*
+* @return {number} the index of the character where the strings diverge
+*/
+function firstDifferenceIndex(string1, string2) {
+ var minLen = Math.min(string1.length, string2.length);
+ for (var i = 0; i < minLen; i++) {
+   if (string1.charAt(i) !== string2.charAt(i)) {
+     return i;
+   }
+ }
+ return string1.length === string2.length ? -1 : minLen;
+}
+
+/**
+* @param {DOMElement|DOMDocument} container DOM element that may contain
+* a React component
+* @return {?*} DOM element that may have the reactRoot ID, or null.
+*/
+function getReactRootElementInContainer(container) {
+ if (!container) {
+   return null;
+ }
+
+ if (container.nodeType === DOC_NODE_TYPE) {
+   return container.documentElement;
+ } else {
+   return container.firstChild;
+ }
+}
+
+function internalGetID(node) {
+ // If node is something like a window, document, or text node, none of
+ // which support attributes or a .getAttribute method, gracefully return
+ // the empty string, as if the attribute were missing.
+ return node.getAttribute && node.getAttribute(ATTR_NAME) || '';
+}
+
+/**
+* Mounts this component and inserts it into the DOM.
+*
+* @param {ReactComponent} componentInstance The instance to mount.
+* @param {DOMElement} container DOM element to mount into.
+* @param {ReactReconcileTransaction} transaction
+* @param {boolean} shouldReuseMarkup If true, do not insert markup
+*/
+function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReuseMarkup, context) {
+ var markerName;
+ if (ReactFeatureFlags.logTopLevelRenders) {
+   var wrappedElement = wrapperInstance._currentElement.props.child;
+   var type = wrappedElement.type;
+   markerName = 'React mount: ' + (typeof type === 'string' ? type : type.displayName || type.name);
+   console.time(markerName);
+ }
+
+ var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context, 0 /* parentDebugID */
+ );
+
+ if (markerName) {
+   console.timeEnd(markerName);
+ }
+
+ wrapperInstance._renderedComponent._topLevelWrapper = wrapperInstance;
+ ReactMount._mountImageIntoNode(markup, container, wrapperInstance, shouldReuseMarkup, transaction);
+}
+
+/**
+* Batched mount.
+*
+* @param {ReactComponent} componentInstance The instance to mount.
+* @param {DOMElement} container DOM element to mount into.
+* @param {boolean} shouldReuseMarkup If true, do not insert markup
+*/
+function batchedMountComponentIntoNode(componentInstance, container, shouldReuseMarkup, context) {
+ var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
+ /* useCreateElement */
+ !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
+ transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
+ ReactUpdates.ReactReconcileTransaction.release(transaction);
+}
+
+/**
+* Unmounts a component and removes it from the DOM.
+*
+* @param {ReactComponent} instance React component instance.
+* @param {DOMElement} container DOM element to unmount from.
+* @final
+* @internal
+* @see {ReactMount.unmountComponentAtNode}
+*/
+function unmountComponentFromNode(instance, container, safely) {
+ if ("development" !== 'production') {
+   ReactInstrumentation.debugTool.onBeginFlush();
+ }
+ ReactReconciler.unmountComponent(instance, safely);
+ if ("development" !== 'production') {
+   ReactInstrumentation.debugTool.onEndFlush();
+ }
+
+ if (container.nodeType === DOC_NODE_TYPE) {
+   container = container.documentElement;
+ }
+
+ // http://jsperf.com/emptying-a-node
+ while (container.lastChild) {
+   container.removeChild(container.lastChild);
+ }
+}
+
+/**
+* True if the supplied DOM node has a direct React-rendered child that is
+* not a React root element. Useful for warning in `render`,
+* `unmountComponentAtNode`, etc.
+*
+* @param {?DOMElement} node The candidate DOM node.
+* @return {boolean} True if the DOM element contains a direct child that was
+* rendered by React but is not a root element.
+* @internal
+*/
+function hasNonRootReactChild(container) {
+ var rootEl = getReactRootElementInContainer(container);
+ if (rootEl) {
+   var inst = ReactDOMComponentTree.getInstanceFromNode(rootEl);
+   return !!(inst && inst._hostParent);
+ }
+}
+
+/**
+* True if the supplied DOM node is a React DOM element and
+* it has been rendered by another copy of React.
+*
+* @param {?DOMElement} node The candidate DOM node.
+* @return {boolean} True if the DOM has been rendered by another copy of React
+* @internal
+*/
+function nodeIsRenderedByOtherInstance(container) {
+ var rootEl = getReactRootElementInContainer(container);
+ return !!(rootEl && isReactNode(rootEl) && !ReactDOMComponentTree.getInstanceFromNode(rootEl));
+}
+
+/**
+* True if the supplied DOM node is a valid node element.
+*
+* @param {?DOMElement} node The candidate DOM node.
+* @return {boolean} True if the DOM is a valid DOM node.
+* @internal
+*/
+function isValidContainer(node) {
+ return !!(node && (node.nodeType === ELEMENT_NODE_TYPE || node.nodeType === DOC_NODE_TYPE || node.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE));
+}
+
+/**
+* True if the supplied DOM node is a valid React node element.
+*
+* @param {?DOMElement} node The candidate DOM node.
+* @return {boolean} True if the DOM is a valid React DOM node.
+* @internal
+*/
+function isReactNode(node) {
+ return isValidContainer(node) && (node.hasAttribute(ROOT_ATTR_NAME) || node.hasAttribute(ATTR_NAME));
+}
+
+function getHostRootInstanceInContainer(container) {
+ var rootEl = getReactRootElementInContainer(container);
+ var prevHostInstance = rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl);
+ return prevHostInstance && !prevHostInstance._hostParent ? prevHostInstance : null;
+}
+
+function getTopLevelWrapperInContainer(container) {
+ var root = getHostRootInstanceInContainer(container);
+ return root ? root._hostContainerInfo._topLevelWrapper : null;
+}
+
+/**
+* Temporary (?) hack so that we can store all top-level pending updates on
+* composites instead of having to worry about different types of components
+* here.
+*/
+var topLevelRootCounter = 1;
+var TopLevelWrapper = function () {
+ this.rootID = topLevelRootCounter++;
+};
+TopLevelWrapper.prototype.isReactComponent = {};
+if ("development" !== 'production') {
+ TopLevelWrapper.displayName = 'TopLevelWrapper';
+}
+TopLevelWrapper.prototype.render = function () {
+ return this.props.child;
+};
+TopLevelWrapper.isReactTopLevelWrapper = true;
+
+/**
+* Mounting is the process of initializing a React component by creating its
+* representative DOM elements and inserting them into a supplied `container`.
+* Any prior content inside `container` is destroyed in the process.
+*
+*   ReactMount.render(
+*     component,
+*     document.getElementById('container')
+*   );
+*
+*   <div id="container">                   <-- Supplied `container`.
+*     <div data-reactid=".3">              <-- Rendered reactRoot of React
+*       // ...                                 component.
+*     </div>
+*   </div>
+*
+* Inside of `container`, the first element rendered is the "reactRoot".
+*/
+var ReactMount = {
+
+ TopLevelWrapper: TopLevelWrapper,
+
+ /**
+  * Used by devtools. The keys are not important.
+  */
+ _instancesByReactRootID: instancesByReactRootID,
+
+ /**
+  * This is a hook provided to support rendering React components while
+  * ensuring that the apparent scroll position of its `container` does not
+  * change.
+  *
+  * @param {DOMElement} container The `container` being rendered into.
+  * @param {function} renderCallback This must be called once to do the render.
+  */
+ scrollMonitor: function (container, renderCallback) {
+   renderCallback();
+ },
+
+ /**
+  * Take a component that's already mounted into the DOM and replace its props
+  * @param {ReactComponent} prevComponent component instance already in the DOM
+  * @param {ReactElement} nextElement component instance to render
+  * @param {DOMElement} container container to render into
+  * @param {?function} callback function triggered on completion
+  */
+ _updateRootComponent: function (prevComponent, nextElement, nextContext, container, callback) {
+   ReactMount.scrollMonitor(container, function () {
+     ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement, nextContext);
+     if (callback) {
+       ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);
+     }
+   });
+
+   return prevComponent;
+ },
+
+ /**
+  * Render a new component into the DOM. Hooked by hooks!
+  *
+  * @param {ReactElement} nextElement element to render
+  * @param {DOMElement} container container to render into
+  * @param {boolean} shouldReuseMarkup if we should skip the markup insertion
+  * @return {ReactComponent} nextComponent
+  */
+ _renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) {
+   // Various parts of our code (such as ReactCompositeComponent's
+   // _renderValidatedComponent) assume that calls to render aren't nested;
+   // verify that that's the case.
+   "development" !== 'production' ? warning(ReactCurrentOwner.current == null, '_renderNewRootComponent(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from ' + 'render is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent') : void 0;
+
+   !isValidContainer(container) ? "development" !== 'production' ? invariant(false, '_registerComponent(...): Target container is not a DOM element.') : _prodInvariant('37') : void 0;
+
+   ReactBrowserEventEmitter.ensureScrollValueMonitoring();
+   var componentInstance = instantiateReactComponent(nextElement, false);
+
+   // The initial render is synchronous but any updates that happen during
+   // rendering, in componentWillMount or componentDidMount, will be batched
+   // according to the current batching strategy.
+
+   ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
+
+   var wrapperID = componentInstance._instance.rootID;
+   instancesByReactRootID[wrapperID] = componentInstance;
+
+   return componentInstance;
+ },
+
+ /**
+  * Renders a React component into the DOM in the supplied `container`.
+  *
+  * If the React component was previously rendered into `container`, this will
+  * perform an update on it and only mutate the DOM as necessary to reflect the
+  * latest React component.
+  *
+  * @param {ReactComponent} parentComponent The conceptual parent of this render tree.
+  * @param {ReactElement} nextElement Component element to render.
+  * @param {DOMElement} container DOM element to render into.
+  * @param {?function} callback function triggered on completion
+  * @return {ReactComponent} Component instance rendered in `container`.
+  */
+ renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
+   !(parentComponent != null && ReactInstanceMap.has(parentComponent)) ? "development" !== 'production' ? invariant(false, 'parentComponent must be a valid React Component') : _prodInvariant('38') : void 0;
+   return ReactMount._renderSubtreeIntoContainer(parentComponent, nextElement, container, callback);
+ },
+
+ _renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
+   ReactUpdateQueue.validateCallback(callback, 'ReactDOM.render');
+   !React.isValidElement(nextElement) ? "development" !== 'production' ? invariant(false, 'ReactDOM.render(): Invalid component element.%s', typeof nextElement === 'string' ? ' Instead of passing a string like \'div\', pass ' + 'React.createElement(\'div\') or <div />.' : typeof nextElement === 'function' ? ' Instead of passing a class like Foo, pass ' + 'React.createElement(Foo) or <Foo />.' :
+   // Check if it quacks like an element
+   nextElement != null && nextElement.props !== undefined ? ' This may be caused by unintentionally loading two independent ' + 'copies of React.' : '') : _prodInvariant('39', typeof nextElement === 'string' ? ' Instead of passing a string like \'div\', pass ' + 'React.createElement(\'div\') or <div />.' : typeof nextElement === 'function' ? ' Instead of passing a class like Foo, pass ' + 'React.createElement(Foo) or <Foo />.' : nextElement != null && nextElement.props !== undefined ? ' This may be caused by unintentionally loading two independent ' + 'copies of React.' : '') : void 0;
+
+   "development" !== 'production' ? warning(!container || !container.tagName || container.tagName.toUpperCase() !== 'BODY', 'render(): Rendering components directly into document.body is ' + 'discouraged, since its children are often manipulated by third-party ' + 'scripts and browser extensions. This may lead to subtle ' + 'reconciliation issues. Try rendering into a container element created ' + 'for your app.') : void 0;
+
+   var nextWrappedElement = React.createElement(TopLevelWrapper, { child: nextElement });
+
+   var nextContext;
+   if (parentComponent) {
+     var parentInst = ReactInstanceMap.get(parentComponent);
+     nextContext = parentInst._processChildContext(parentInst._context);
+   } else {
+     nextContext = emptyObject;
+   }
+
+   var prevComponent = getTopLevelWrapperInContainer(container);
+
+   if (prevComponent) {
+     var prevWrappedElement = prevComponent._currentElement;
+     var prevElement = prevWrappedElement.props.child;
+     if (shouldUpdateReactComponent(prevElement, nextElement)) {
+       var publicInst = prevComponent._renderedComponent.getPublicInstance();
+       var updatedCallback = callback && function () {
+         callback.call(publicInst);
+       };
+       ReactMount._updateRootComponent(prevComponent, nextWrappedElement, nextContext, container, updatedCallback);
+       return publicInst;
+     } else {
+       ReactMount.unmountComponentAtNode(container);
+     }
+   }
+
+   var reactRootElement = getReactRootElementInContainer(container);
+   var containerHasReactMarkup = reactRootElement && !!internalGetID(reactRootElement);
+   var containerHasNonRootReactChild = hasNonRootReactChild(container);
+
+   if ("development" !== 'production') {
+     "development" !== 'production' ? warning(!containerHasNonRootReactChild, 'render(...): Replacing React-rendered children with a new root ' + 'component. If you intended to update the children of this node, ' + 'you should instead have the existing children update their state ' + 'and render the new components instead of calling ReactDOM.render.') : void 0;
+
+     if (!containerHasReactMarkup || reactRootElement.nextSibling) {
+       var rootElementSibling = reactRootElement;
+       while (rootElementSibling) {
+         if (internalGetID(rootElementSibling)) {
+           "development" !== 'production' ? warning(false, 'render(): Target node has markup rendered by React, but there ' + 'are unrelated nodes as well. This is most commonly caused by ' + 'white-space inserted around server-rendered markup.') : void 0;
+           break;
+         }
+         rootElementSibling = rootElementSibling.nextSibling;
+       }
+     }
+   }
+
+   var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
+   var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
+   if (callback) {
+     callback.call(component);
+   }
+   return component;
+ },
+
+ /**
+  * Renders a React component into the DOM in the supplied `container`.
+  * See https://facebook.github.io/react/docs/top-level-api.html#reactdom.render
+  *
+  * If the React component was previously rendered into `container`, this will
+  * perform an update on it and only mutate the DOM as necessary to reflect the
+  * latest React component.
+  *
+  * @param {ReactElement} nextElement Component element to render.
+  * @param {DOMElement} container DOM element to render into.
+  * @param {?function} callback function triggered on completion
+  * @return {ReactComponent} Component instance rendered in `container`.
+  */
+ render: function (nextElement, container, callback) {
+   return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
+ },
+
+ /**
+  * Unmounts and destroys the React component rendered in the `container`.
+  * See https://facebook.github.io/react/docs/top-level-api.html#reactdom.unmountcomponentatnode
+  *
+  * @param {DOMElement} container DOM element containing a React component.
+  * @return {boolean} True if a component was found in and unmounted from
+  *                   `container`
+  */
+ unmountComponentAtNode: function (container) {
+   // Various parts of our code (such as ReactCompositeComponent's
+   // _renderValidatedComponent) assume that calls to render aren't nested;
+   // verify that that's the case. (Strictly speaking, unmounting won't cause a
+   // render but we still don't expect to be in a render call here.)
+   "development" !== 'production' ? warning(ReactCurrentOwner.current == null, 'unmountComponentAtNode(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from render ' + 'is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent') : void 0;
+
+   !isValidContainer(container) ? "development" !== 'production' ? invariant(false, 'unmountComponentAtNode(...): Target container is not a DOM element.') : _prodInvariant('40') : void 0;
+
+   if ("development" !== 'production') {
+     "development" !== 'production' ? warning(!nodeIsRenderedByOtherInstance(container), 'unmountComponentAtNode(): The node you\'re attempting to unmount ' + 'was rendered by another copy of React.') : void 0;
+   }
+
+   var prevComponent = getTopLevelWrapperInContainer(container);
+   if (!prevComponent) {
+     // Check if the node being unmounted was rendered by React, but isn't a
+     // root node.
+     var containerHasNonRootReactChild = hasNonRootReactChild(container);
+
+     // Check if the container itself is a React root node.
+     var isContainerReactRoot = container.nodeType === 1 && container.hasAttribute(ROOT_ATTR_NAME);
+
+     if ("development" !== 'production') {
+       "development" !== 'production' ? warning(!containerHasNonRootReactChild, 'unmountComponentAtNode(): The node you\'re attempting to unmount ' + 'was rendered by React and is not a top-level container. %s', isContainerReactRoot ? 'You may have accidentally passed in a React root node instead ' + 'of its container.' : 'Instead, have the parent component update its state and ' + 'rerender in order to remove this component.') : void 0;
+     }
+
+     return false;
+   }
+   delete instancesByReactRootID[prevComponent._instance.rootID];
+   ReactUpdates.batchedUpdates(unmountComponentFromNode, prevComponent, container, false);
+   return true;
+ },
+
+ _mountImageIntoNode: function (markup, container, instance, shouldReuseMarkup, transaction) {
+   !isValidContainer(container) ? "development" !== 'production' ? invariant(false, 'mountComponentIntoNode(...): Target container is not valid.') : _prodInvariant('41') : void 0;
+
+   if (shouldReuseMarkup) {
+     var rootElement = getReactRootElementInContainer(container);
+     if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
+       ReactDOMComponentTree.precacheNode(instance, rootElement);
+       return;
+     } else {
+       var checksum = rootElement.getAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
+       rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
+
+       var rootMarkup = rootElement.outerHTML;
+       rootElement.setAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME, checksum);
+
+       var normalizedMarkup = markup;
+       if ("development" !== 'production') {
+         // because rootMarkup is retrieved from the DOM, various normalizations
+         // will have occurred which will not be present in `markup`. Here,
+         // insert markup into a <div> or <iframe> depending on the container
+         // type to perform the same normalizations before comparing.
+         var normalizer;
+         if (container.nodeType === ELEMENT_NODE_TYPE) {
+           normalizer = document.createElement('div');
+           normalizer.innerHTML = markup;
+           normalizedMarkup = normalizer.innerHTML;
+         } else {
+           normalizer = document.createElement('iframe');
+           document.body.appendChild(normalizer);
+           normalizer.contentDocument.write(markup);
+           normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
+           document.body.removeChild(normalizer);
+         }
+       }
+
+       var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);
+       var difference = ' (client) ' + normalizedMarkup.substring(diffIndex - 20, diffIndex + 20) + '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
+
+       !(container.nodeType !== DOC_NODE_TYPE) ? "development" !== 'production' ? invariant(false, 'You\'re trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s', difference) : _prodInvariant('42', difference) : void 0;
+
+       if ("development" !== 'production') {
+         "development" !== 'production' ? warning(false, 'React attempted to reuse markup in a container but the ' + 'checksum was invalid. This generally means that you are ' + 'using server rendering and the markup generated on the ' + 'server was not what the client was expecting. React injected ' + 'new markup to compensate which works but you have lost many ' + 'of the benefits of server rendering. Instead, figure out ' + 'why the markup being generated is different on the client ' + 'or server:\n%s', difference) : void 0;
+       }
+     }
+   }
+
+   !(container.nodeType !== DOC_NODE_TYPE) ? "development" !== 'production' ? invariant(false, 'You\'re trying to render a component to the document but you didn\'t use server rendering. We can\'t do this without using server rendering due to cross-browser quirks. See ReactDOMServer.renderToString() for server rendering.') : _prodInvariant('43') : void 0;
+
+   if (transaction.useCreateElement) {
+     while (container.lastChild) {
+       container.removeChild(container.lastChild);
+     }
+     DOMLazyTree.insertTreeBefore(container, markup, null);
+   } else {
+     setInnerHTML(container, markup);
+     ReactDOMComponentTree.precacheNode(instance, container.firstChild);
+   }
+
+   if ("development" !== 'production') {
+     var hostNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
+     if (hostNode._debugID !== 0) {
+       ReactInstrumentation.debugTool.onHostOperation({
+         instanceID: hostNode._debugID,
+         type: 'mount',
+         payload: markup.toString()
+       });
+     }
+   }
+ }
+};
+
+module.exports = ReactMount;
+},{"11":11,"121":121,"125":125,"127":127,"129":129,"133":133,"134":134,"143":143,"150":150,"157":157,"26":26,"34":34,"35":35,"37":37,"58":58,"63":63,"64":64,"66":66,"75":75,"81":81,"82":82,"9":9}],68:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var ReactComponentEnvironment = _dereq_(29);
+var ReactInstanceMap = _dereq_(63);
+var ReactInstrumentation = _dereq_(64);
+
+var ReactCurrentOwner = _dereq_(133);
+var ReactReconciler = _dereq_(75);
+var ReactChildReconciler = _dereq_(27);
+
+var emptyFunction = _dereq_(142);
+var flattenChildren = _dereq_(109);
+var invariant = _dereq_(150);
+
+/**
+* Make an update for markup to be rendered and inserted at a supplied index.
+*
+* @param {string} markup Markup that renders into an element.
+* @param {number} toIndex Destination index.
+* @private
+*/
+function makeInsertMarkup(markup, afterNode, toIndex) {
+ // NOTE: Null values reduce hidden classes.
+ return {
+   type: 'INSERT_MARKUP',
+   content: markup,
+   fromIndex: null,
+   fromNode: null,
+   toIndex: toIndex,
+   afterNode: afterNode
+ };
+}
+
+/**
+* Make an update for moving an existing element to another index.
+*
+* @param {number} fromIndex Source index of the existing element.
+* @param {number} toIndex Destination index of the element.
+* @private
+*/
+function makeMove(child, afterNode, toIndex) {
+ // NOTE: Null values reduce hidden classes.
+ return {
+   type: 'MOVE_EXISTING',
+   content: null,
+   fromIndex: child._mountIndex,
+   fromNode: ReactReconciler.getHostNode(child),
+   toIndex: toIndex,
+   afterNode: afterNode
+ };
+}
+
+/**
+* Make an update for removing an element at an index.
+*
+* @param {number} fromIndex Index of the element to remove.
+* @private
+*/
+function makeRemove(child, node) {
+ // NOTE: Null values reduce hidden classes.
+ return {
+   type: 'REMOVE_NODE',
+   content: null,
+   fromIndex: child._mountIndex,
+   fromNode: node,
+   toIndex: null,
+   afterNode: null
+ };
+}
+
+/**
+* Make an update for setting the markup of a node.
+*
+* @param {string} markup Markup that renders into an element.
+* @private
+*/
+function makeSetMarkup(markup) {
+ // NOTE: Null values reduce hidden classes.
+ return {
+   type: 'SET_MARKUP',
+   content: markup,
+   fromIndex: null,
+   fromNode: null,
+   toIndex: null,
+   afterNode: null
+ };
+}
+
+/**
+* Make an update for setting the text content.
+*
+* @param {string} textContent Text content to set.
+* @private
+*/
+function makeTextContent(textContent) {
+ // NOTE: Null values reduce hidden classes.
+ return {
+   type: 'TEXT_CONTENT',
+   content: textContent,
+   fromIndex: null,
+   fromNode: null,
+   toIndex: null,
+   afterNode: null
+ };
+}
+
+/**
+* Push an update, if any, onto the queue. Creates a new queue if none is
+* passed and always returns the queue. Mutative.
+*/
+function enqueue(queue, update) {
+ if (update) {
+   queue = queue || [];
+   queue.push(update);
+ }
+ return queue;
+}
+
+/**
+* Processes any enqueued updates.
+*
+* @private
+*/
+function processQueue(inst, updateQueue) {
+ ReactComponentEnvironment.processChildrenUpdates(inst, updateQueue);
+}
+
+var setChildrenForInstrumentation = emptyFunction;
+if ("development" !== 'production') {
+ var getDebugID = function (inst) {
+   if (!inst._debugID) {
+     // Check for ART-like instances. TODO: This is silly/gross.
+     var internal;
+     if (internal = ReactInstanceMap.get(inst)) {
+       inst = internal;
+     }
+   }
+   return inst._debugID;
+ };
+ setChildrenForInstrumentation = function (children) {
+   var debugID = getDebugID(this);
+   // TODO: React Native empty components are also multichild.
+   // This means they still get into this method but don't have _debugID.
+   if (debugID !== 0) {
+     ReactInstrumentation.debugTool.onSetChildren(debugID, children ? Object.keys(children).map(function (key) {
+       return children[key]._debugID;
+     }) : []);
+   }
+ };
+}
+
+/**
+* ReactMultiChild are capable of reconciling multiple children.
+*
+* @class ReactMultiChild
+* @internal
+*/
+var ReactMultiChild = {
+
+ /**
+  * Provides common functionality for components that must reconcile multiple
+  * children. This is used by `ReactDOMComponent` to mount, update, and
+  * unmount child components.
+  *
+  * @lends {ReactMultiChild.prototype}
+  */
+ Mixin: {
+
+   _reconcilerInstantiateChildren: function (nestedChildren, transaction, context) {
+     if ("development" !== 'production') {
+       var selfDebugID = getDebugID(this);
+       if (this._currentElement) {
+         try {
+           ReactCurrentOwner.current = this._currentElement._owner;
+           return ReactChildReconciler.instantiateChildren(nestedChildren, transaction, context, selfDebugID);
+         } finally {
+           ReactCurrentOwner.current = null;
+         }
+       }
+     }
+     return ReactChildReconciler.instantiateChildren(nestedChildren, transaction, context);
+   },
+
+   _reconcilerUpdateChildren: function (prevChildren, nextNestedChildrenElements, mountImages, removedNodes, transaction, context) {
+     var nextChildren;
+     var selfDebugID = 0;
+     if ("development" !== 'production') {
+       selfDebugID = getDebugID(this);
+       if (this._currentElement) {
+         try {
+           ReactCurrentOwner.current = this._currentElement._owner;
+           nextChildren = flattenChildren(nextNestedChildrenElements, selfDebugID);
+         } finally {
+           ReactCurrentOwner.current = null;
+         }
+         ReactChildReconciler.updateChildren(prevChildren, nextChildren, mountImages, removedNodes, transaction, this, this._hostContainerInfo, context, selfDebugID);
+         return nextChildren;
+       }
+     }
+     nextChildren = flattenChildren(nextNestedChildrenElements, selfDebugID);
+     ReactChildReconciler.updateChildren(prevChildren, nextChildren, mountImages, removedNodes, transaction, this, this._hostContainerInfo, context, selfDebugID);
+     return nextChildren;
+   },
+
+   /**
+    * Generates a "mount image" for each of the supplied children. In the case
+    * of `ReactDOMComponent`, a mount image is a string of markup.
+    *
+    * @param {?object} nestedChildren Nested child maps.
+    * @return {array} An array of mounted representations.
+    * @internal
+    */
+   mountChildren: function (nestedChildren, transaction, context) {
+     var children = this._reconcilerInstantiateChildren(nestedChildren, transaction, context);
+     this._renderedChildren = children;
+
+     var mountImages = [];
+     var index = 0;
+     for (var name in children) {
+       if (children.hasOwnProperty(name)) {
+         var child = children[name];
+         var selfDebugID = 0;
+         if ("development" !== 'production') {
+           selfDebugID = getDebugID(this);
+         }
+         var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
+         child._mountIndex = index++;
+         mountImages.push(mountImage);
+       }
+     }
+
+     if ("development" !== 'production') {
+       setChildrenForInstrumentation.call(this, children);
+     }
+
+     return mountImages;
+   },
+
+   /**
+    * Replaces any rendered children with a text content string.
+    *
+    * @param {string} nextContent String of content.
+    * @internal
+    */
+   updateTextContent: function (nextContent) {
+     var prevChildren = this._renderedChildren;
+     // Remove any rendered children.
+     ReactChildReconciler.unmountChildren(prevChildren, false);
+     for (var name in prevChildren) {
+       if (prevChildren.hasOwnProperty(name)) {
+         !false ? "development" !== 'production' ? invariant(false, 'updateTextContent called on non-empty component.') : _prodInvariant('118') : void 0;
+       }
+     }
+     // Set new text content.
+     var updates = [makeTextContent(nextContent)];
+     processQueue(this, updates);
+   },
+
+   /**
+    * Replaces any rendered children with a markup string.
+    *
+    * @param {string} nextMarkup String of markup.
+    * @internal
+    */
+   updateMarkup: function (nextMarkup) {
+     var prevChildren = this._renderedChildren;
+     // Remove any rendered children.
+     ReactChildReconciler.unmountChildren(prevChildren, false);
+     for (var name in prevChildren) {
+       if (prevChildren.hasOwnProperty(name)) {
+         !false ? "development" !== 'production' ? invariant(false, 'updateTextContent called on non-empty component.') : _prodInvariant('118') : void 0;
+       }
+     }
+     var updates = [makeSetMarkup(nextMarkup)];
+     processQueue(this, updates);
+   },
+
+   /**
+    * Updates the rendered children with new children.
+    *
+    * @param {?object} nextNestedChildrenElements Nested child element maps.
+    * @param {ReactReconcileTransaction} transaction
+    * @internal
+    */
+   updateChildren: function (nextNestedChildrenElements, transaction, context) {
+     // Hook used by React ART
+     this._updateChildren(nextNestedChildrenElements, transaction, context);
+   },
+
+   /**
+    * @param {?object} nextNestedChildrenElements Nested child element maps.
+    * @param {ReactReconcileTransaction} transaction
+    * @final
+    * @protected
+    */
+   _updateChildren: function (nextNestedChildrenElements, transaction, context) {
+     var prevChildren = this._renderedChildren;
+     var removedNodes = {};
+     var mountImages = [];
+     var nextChildren = this._reconcilerUpdateChildren(prevChildren, nextNestedChildrenElements, mountImages, removedNodes, transaction, context);
+     if (!nextChildren && !prevChildren) {
+       return;
+     }
+     var updates = null;
+     var name;
+     // `nextIndex` will increment for each child in `nextChildren`, but
+     // `lastIndex` will be the last index visited in `prevChildren`.
+     var nextIndex = 0;
+     var lastIndex = 0;
+     // `nextMountIndex` will increment for each newly mounted child.
+     var nextMountIndex = 0;
+     var lastPlacedNode = null;
+     for (name in nextChildren) {
+       if (!nextChildren.hasOwnProperty(name)) {
+         continue;
+       }
+       var prevChild = prevChildren && prevChildren[name];
+       var nextChild = nextChildren[name];
+       if (prevChild === nextChild) {
+         updates = enqueue(updates, this.moveChild(prevChild, lastPlacedNode, nextIndex, lastIndex));
+         lastIndex = Math.max(prevChild._mountIndex, lastIndex);
+         prevChild._mountIndex = nextIndex;
+       } else {
+         if (prevChild) {
+           // Update `lastIndex` before `_mountIndex` gets unset by unmounting.
+           lastIndex = Math.max(prevChild._mountIndex, lastIndex);
+           // The `removedNodes` loop below will actually remove the child.
+         }
+         // The child must be instantiated before it's mounted.
+         updates = enqueue(updates, this._mountChildAtIndex(nextChild, mountImages[nextMountIndex], lastPlacedNode, nextIndex, transaction, context));
+         nextMountIndex++;
+       }
+       nextIndex++;
+       lastPlacedNode = ReactReconciler.getHostNode(nextChild);
+     }
+     // Remove children that are no longer present.
+     for (name in removedNodes) {
+       if (removedNodes.hasOwnProperty(name)) {
+         updates = enqueue(updates, this._unmountChild(prevChildren[name], removedNodes[name]));
+       }
+     }
+     if (updates) {
+       processQueue(this, updates);
+     }
+     this._renderedChildren = nextChildren;
+
+     if ("development" !== 'production') {
+       setChildrenForInstrumentation.call(this, nextChildren);
+     }
+   },
+
+   /**
+    * Unmounts all rendered children. This should be used to clean up children
+    * when this component is unmounted. It does not actually perform any
+    * backend operations.
+    *
+    * @internal
+    */
+   unmountChildren: function (safely) {
+     var renderedChildren = this._renderedChildren;
+     ReactChildReconciler.unmountChildren(renderedChildren, safely);
+     this._renderedChildren = null;
+   },
+
+   /**
+    * Moves a child component to the supplied index.
+    *
+    * @param {ReactComponent} child Component to move.
+    * @param {number} toIndex Destination index of the element.
+    * @param {number} lastIndex Last index visited of the siblings of `child`.
+    * @protected
+    */
+   moveChild: function (child, afterNode, toIndex, lastIndex) {
+     // If the index of `child` is less than `lastIndex`, then it needs to
+     // be moved. Otherwise, we do not need to move it because a child will be
+     // inserted or moved before `child`.
+     if (child._mountIndex < lastIndex) {
+       return makeMove(child, afterNode, toIndex);
+     }
+   },
+
+   /**
+    * Creates a child component.
+    *
+    * @param {ReactComponent} child Component to create.
+    * @param {string} mountImage Markup to insert.
+    * @protected
+    */
+   createChild: function (child, afterNode, mountImage) {
+     return makeInsertMarkup(mountImage, afterNode, child._mountIndex);
+   },
+
+   /**
+    * Removes a child component.
+    *
+    * @param {ReactComponent} child Child to remove.
+    * @protected
+    */
+   removeChild: function (child, node) {
+     return makeRemove(child, node);
+   },
+
+   /**
+    * Mounts a child with the supplied name.
+    *
+    * NOTE: This is part of `updateChildren` and is here for readability.
+    *
+    * @param {ReactComponent} child Component to mount.
+    * @param {string} name Name of the child.
+    * @param {number} index Index at which to insert the child.
+    * @param {ReactReconcileTransaction} transaction
+    * @private
+    */
+   _mountChildAtIndex: function (child, mountImage, afterNode, index, transaction, context) {
+     child._mountIndex = index;
+     return this.createChild(child, afterNode, mountImage);
+   },
+
+   /**
+    * Unmounts a rendered child.
+    *
+    * NOTE: This is part of `updateChildren` and is here for readability.
+    *
+    * @param {ReactComponent} child Component to unmount.
+    * @private
+    */
+   _unmountChild: function (child, node) {
+     var update = this.removeChild(child, node);
+     child._mountIndex = null;
+     return update;
+   }
+
+ }
+
+};
+
+module.exports = ReactMultiChild;
+},{"109":109,"125":125,"133":133,"142":142,"150":150,"27":27,"29":29,"63":63,"64":64,"75":75}],69:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var React = _dereq_(134);
+
+var invariant = _dereq_(150);
+
+var ReactNodeTypes = {
+ HOST: 0,
+ COMPOSITE: 1,
+ EMPTY: 2,
+
+ getType: function (node) {
+   if (node === null || node === false) {
+     return ReactNodeTypes.EMPTY;
+   } else if (React.isValidElement(node)) {
+     if (typeof node.type === 'function') {
+       return ReactNodeTypes.COMPOSITE;
+     } else {
+       return ReactNodeTypes.HOST;
+     }
+   }
+   !false ? "development" !== 'production' ? invariant(false, 'Unexpected node: %s', node) : _prodInvariant('26', node) : void 0;
+ }
+};
+
+module.exports = ReactNodeTypes;
+},{"125":125,"134":134,"150":150}],70:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+/**
+* @param {?object} object
+* @return {boolean} True if `object` is a valid owner.
+* @final
+*/
+function isValidOwner(object) {
+ return !!(object && typeof object.attachRef === 'function' && typeof object.detachRef === 'function');
+}
+
+/**
+* ReactOwners are capable of storing references to owned components.
+*
+* All components are capable of //being// referenced by owner components, but
+* only ReactOwner components are capable of //referencing// owned components.
+* The named reference is known as a "ref".
+*
+* Refs are available when mounted and updated during reconciliation.
+*
+*   var MyComponent = React.createClass({
+*     render: function() {
+*       return (
+*         <div onClick={this.handleClick}>
+*           <CustomComponent ref="custom" />
+*         </div>
+*       );
+*     },
+*     handleClick: function() {
+*       this.refs.custom.handleClick();
+*     },
+*     componentDidMount: function() {
+*       this.refs.custom.initialize();
+*     }
+*   });
+*
+* Refs should rarely be used. When refs are used, they should only be done to
+* control data that is not handled by React's data flow.
+*
+* @class ReactOwner
+*/
+var ReactOwner = {
+ /**
+  * Adds a component by ref to an owner component.
+  *
+  * @param {ReactComponent} component Component to reference.
+  * @param {string} ref Name by which to refer to the component.
+  * @param {ReactOwner} owner Component on which to record the ref.
+  * @final
+  * @internal
+  */
+ addComponentAsRefTo: function (component, ref, owner) {
+   !isValidOwner(owner) ? "development" !== 'production' ? invariant(false, 'addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component\'s `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).') : _prodInvariant('119') : void 0;
+   owner.attachRef(ref, component);
+ },
+
+ /**
+  * Removes a component by ref from an owner component.
+  *
+  * @param {ReactComponent} component Component to dereference.
+  * @param {string} ref Name of the ref to remove.
+  * @param {ReactOwner} owner Component on which the ref is recorded.
+  * @final
+  * @internal
+  */
+ removeComponentAsRefFrom: function (component, ref, owner) {
+   !isValidOwner(owner) ? "development" !== 'production' ? invariant(false, 'removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component\'s `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).') : _prodInvariant('120') : void 0;
+   var ownerPublicInstance = owner.getPublicInstance();
+   // Check that `component`'s owner is still alive and that `component` is still the current ref
+   // because we do not want to detach the ref if another component stole it.
+   if (ownerPublicInstance && ownerPublicInstance.refs[ref] === component.getPublicInstance()) {
+     owner.detachRef(ref);
+   }
+ }
+
+};
+
+module.exports = ReactOwner;
+},{"125":125,"150":150}],71:[function(_dereq_,module,exports){
+/**
+* Copyright 2016-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var _extends = _assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var ReactDebugTool = _dereq_(50);
+var warning = _dereq_(157);
+var alreadyWarned = false;
+
+function roundFloat(val) {
+ var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+
+ var n = Math.pow(10, base);
+ return Math.floor(val * n) / n;
+}
+
+// Flow type definition of console.table is too strict right now, see
+// https://github.com/facebook/flow/pull/2353 for updates
+function consoleTable(table) {
+ console.table(table);
+}
+
+function warnInProduction() {
+ if (alreadyWarned) {
+   return;
+ }
+ alreadyWarned = true;
+ if (typeof console !== 'undefined') {
+   console.error('ReactPerf is not supported in the production builds of React. ' + 'To collect measurements, please use the development build of React instead.');
+ }
+}
+
+function getLastMeasurements() {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return [];
+ }
+
+ return ReactDebugTool.getFlushHistory();
+}
+
+function getExclusive() {
+ var flushHistory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getLastMeasurements();
+
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return [];
+ }
+
+ var aggregatedStats = {};
+ var affectedIDs = {};
+
+ function updateAggregatedStats(treeSnapshot, instanceID, timerType, applyUpdate) {
+   var displayName = treeSnapshot[instanceID].displayName;
+
+   var key = displayName;
+   var stats = aggregatedStats[key];
+   if (!stats) {
+     affectedIDs[key] = {};
+     stats = aggregatedStats[key] = {
+       key: key,
+       instanceCount: 0,
+       counts: {},
+       durations: {},
+       totalDuration: 0
+     };
+   }
+   if (!stats.durations[timerType]) {
+     stats.durations[timerType] = 0;
+   }
+   if (!stats.counts[timerType]) {
+     stats.counts[timerType] = 0;
+   }
+   affectedIDs[key][instanceID] = true;
+   applyUpdate(stats);
+ }
+
+ flushHistory.forEach(function (flush) {
+   var measurements = flush.measurements,
+       treeSnapshot = flush.treeSnapshot;
+
+   measurements.forEach(function (measurement) {
+     var duration = measurement.duration,
+         instanceID = measurement.instanceID,
+         timerType = measurement.timerType;
+
+     updateAggregatedStats(treeSnapshot, instanceID, timerType, function (stats) {
+       stats.totalDuration += duration;
+       stats.durations[timerType] += duration;
+       stats.counts[timerType]++;
+     });
+   });
+ });
+
+ return Object.keys(aggregatedStats).map(function (key) {
+   return _extends({}, aggregatedStats[key], {
+     instanceCount: Object.keys(affectedIDs[key]).length
+   });
+ }).sort(function (a, b) {
+   return b.totalDuration - a.totalDuration;
+ });
+}
+
+function getInclusive() {
+ var flushHistory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getLastMeasurements();
+
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return [];
+ }
+
+ var aggregatedStats = {};
+ var affectedIDs = {};
+
+ function updateAggregatedStats(treeSnapshot, instanceID, applyUpdate) {
+   var _treeSnapshot$instanc = treeSnapshot[instanceID],
+       displayName = _treeSnapshot$instanc.displayName,
+       ownerID = _treeSnapshot$instanc.ownerID;
+
+   var owner = treeSnapshot[ownerID];
+   var key = (owner ? owner.displayName + ' > ' : '') + displayName;
+   var stats = aggregatedStats[key];
+   if (!stats) {
+     affectedIDs[key] = {};
+     stats = aggregatedStats[key] = {
+       key: key,
+       instanceCount: 0,
+       inclusiveRenderDuration: 0,
+       renderCount: 0
+     };
+   }
+   affectedIDs[key][instanceID] = true;
+   applyUpdate(stats);
+ }
+
+ var isCompositeByID = {};
+ flushHistory.forEach(function (flush) {
+   var measurements = flush.measurements;
+
+   measurements.forEach(function (measurement) {
+     var instanceID = measurement.instanceID,
+         timerType = measurement.timerType;
+
+     if (timerType !== 'render') {
+       return;
+     }
+     isCompositeByID[instanceID] = true;
+   });
+ });
+
+ flushHistory.forEach(function (flush) {
+   var measurements = flush.measurements,
+       treeSnapshot = flush.treeSnapshot;
+
+   measurements.forEach(function (measurement) {
+     var duration = measurement.duration,
+         instanceID = measurement.instanceID,
+         timerType = measurement.timerType;
+
+     if (timerType !== 'render') {
+       return;
+     }
+     updateAggregatedStats(treeSnapshot, instanceID, function (stats) {
+       stats.renderCount++;
+     });
+     var nextParentID = instanceID;
+     while (nextParentID) {
+       // As we traverse parents, only count inclusive time towards composites.
+       // We know something is a composite if its render() was called.
+       if (isCompositeByID[nextParentID]) {
+         updateAggregatedStats(treeSnapshot, nextParentID, function (stats) {
+           stats.inclusiveRenderDuration += duration;
+         });
+       }
+       nextParentID = treeSnapshot[nextParentID].parentID;
+     }
+   });
+ });
+
+ return Object.keys(aggregatedStats).map(function (key) {
+   return _extends({}, aggregatedStats[key], {
+     instanceCount: Object.keys(affectedIDs[key]).length
+   });
+ }).sort(function (a, b) {
+   return b.inclusiveRenderDuration - a.inclusiveRenderDuration;
+ });
+}
+
+function getWasted() {
+ var flushHistory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getLastMeasurements();
+
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return [];
+ }
+
+ var aggregatedStats = {};
+ var affectedIDs = {};
+
+ function updateAggregatedStats(treeSnapshot, instanceID, applyUpdate) {
+   var _treeSnapshot$instanc2 = treeSnapshot[instanceID],
+       displayName = _treeSnapshot$instanc2.displayName,
+       ownerID = _treeSnapshot$instanc2.ownerID;
+
+   var owner = treeSnapshot[ownerID];
+   var key = (owner ? owner.displayName + ' > ' : '') + displayName;
+   var stats = aggregatedStats[key];
+   if (!stats) {
+     affectedIDs[key] = {};
+     stats = aggregatedStats[key] = {
+       key: key,
+       instanceCount: 0,
+       inclusiveRenderDuration: 0,
+       renderCount: 0
+     };
+   }
+   affectedIDs[key][instanceID] = true;
+   applyUpdate(stats);
+ }
+
+ flushHistory.forEach(function (flush) {
+   var measurements = flush.measurements,
+       treeSnapshot = flush.treeSnapshot,
+       operations = flush.operations;
+
+   var isDefinitelyNotWastedByID = {};
+
+   // Find host components associated with an operation in this batch.
+   // Mark all components in their parent tree as definitely not wasted.
+   operations.forEach(function (operation) {
+     var instanceID = operation.instanceID;
+
+     var nextParentID = instanceID;
+     while (nextParentID) {
+       isDefinitelyNotWastedByID[nextParentID] = true;
+       nextParentID = treeSnapshot[nextParentID].parentID;
+     }
+   });
+
+   // Find composite components that rendered in this batch.
+   // These are potential candidates for being wasted renders.
+   var renderedCompositeIDs = {};
+   measurements.forEach(function (measurement) {
+     var instanceID = measurement.instanceID,
+         timerType = measurement.timerType;
+
+     if (timerType !== 'render') {
+       return;
+     }
+     renderedCompositeIDs[instanceID] = true;
+   });
+
+   measurements.forEach(function (measurement) {
+     var duration = measurement.duration,
+         instanceID = measurement.instanceID,
+         timerType = measurement.timerType;
+
+     if (timerType !== 'render') {
+       return;
+     }
+
+     // If there was a DOM update below this component, or it has just been
+     // mounted, its render() is not considered wasted.
+     var updateCount = treeSnapshot[instanceID].updateCount;
+
+     if (isDefinitelyNotWastedByID[instanceID] || updateCount === 0) {
+       return;
+     }
+
+     // We consider this render() wasted.
+     updateAggregatedStats(treeSnapshot, instanceID, function (stats) {
+       stats.renderCount++;
+     });
+
+     var nextParentID = instanceID;
+     while (nextParentID) {
+       // Any parents rendered during this batch are considered wasted
+       // unless we previously marked them as dirty.
+       var isWasted = renderedCompositeIDs[nextParentID] && !isDefinitelyNotWastedByID[nextParentID];
+       if (isWasted) {
+         updateAggregatedStats(treeSnapshot, nextParentID, function (stats) {
+           stats.inclusiveRenderDuration += duration;
+         });
+       }
+       nextParentID = treeSnapshot[nextParentID].parentID;
+     }
+   });
+ });
+
+ return Object.keys(aggregatedStats).map(function (key) {
+   return _extends({}, aggregatedStats[key], {
+     instanceCount: Object.keys(affectedIDs[key]).length
+   });
+ }).sort(function (a, b) {
+   return b.inclusiveRenderDuration - a.inclusiveRenderDuration;
+ });
+}
+
+function getOperations() {
+ var flushHistory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getLastMeasurements();
+
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return [];
+ }
+
+ var stats = [];
+ flushHistory.forEach(function (flush, flushIndex) {
+   var operations = flush.operations,
+       treeSnapshot = flush.treeSnapshot;
+
+   operations.forEach(function (operation) {
+     var instanceID = operation.instanceID,
+         type = operation.type,
+         payload = operation.payload;
+     var _treeSnapshot$instanc3 = treeSnapshot[instanceID],
+         displayName = _treeSnapshot$instanc3.displayName,
+         ownerID = _treeSnapshot$instanc3.ownerID;
+
+     var owner = treeSnapshot[ownerID];
+     var key = (owner ? owner.displayName + ' > ' : '') + displayName;
+
+     stats.push({
+       flushIndex: flushIndex,
+       instanceID: instanceID,
+       key: key,
+       type: type,
+       ownerID: ownerID,
+       payload: payload
+     });
+   });
+ });
+ return stats;
+}
+
+function printExclusive(flushHistory) {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return;
+ }
+
+ var stats = getExclusive(flushHistory);
+ var table = stats.map(function (item) {
+   var key = item.key,
+       instanceCount = item.instanceCount,
+       totalDuration = item.totalDuration;
+
+   var renderCount = item.counts.render || 0;
+   var renderDuration = item.durations.render || 0;
+   return {
+     'Component': key,
+     'Total time (ms)': roundFloat(totalDuration),
+     'Instance count': instanceCount,
+     'Total render time (ms)': roundFloat(renderDuration),
+     'Average render time (ms)': renderCount ? roundFloat(renderDuration / renderCount) : undefined,
+     'Render count': renderCount,
+     'Total lifecycle time (ms)': roundFloat(totalDuration - renderDuration)
+   };
+ });
+ consoleTable(table);
+}
+
+function printInclusive(flushHistory) {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return;
+ }
+
+ var stats = getInclusive(flushHistory);
+ var table = stats.map(function (item) {
+   var key = item.key,
+       instanceCount = item.instanceCount,
+       inclusiveRenderDuration = item.inclusiveRenderDuration,
+       renderCount = item.renderCount;
+
+   return {
+     'Owner > Component': key,
+     'Inclusive render time (ms)': roundFloat(inclusiveRenderDuration),
+     'Instance count': instanceCount,
+     'Render count': renderCount
+   };
+ });
+ consoleTable(table);
+}
+
+function printWasted(flushHistory) {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return;
+ }
+
+ var stats = getWasted(flushHistory);
+ var table = stats.map(function (item) {
+   var key = item.key,
+       instanceCount = item.instanceCount,
+       inclusiveRenderDuration = item.inclusiveRenderDuration,
+       renderCount = item.renderCount;
+
+   return {
+     'Owner > Component': key,
+     'Inclusive wasted time (ms)': roundFloat(inclusiveRenderDuration),
+     'Instance count': instanceCount,
+     'Render count': renderCount
+   };
+ });
+ consoleTable(table);
+}
+
+function printOperations(flushHistory) {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return;
+ }
+
+ var stats = getOperations(flushHistory);
+ var table = stats.map(function (stat) {
+   return {
+     'Owner > Node': stat.key,
+     'Operation': stat.type,
+     'Payload': typeof stat.payload === 'object' ? JSON.stringify(stat.payload) : stat.payload,
+     'Flush index': stat.flushIndex,
+     'Owner Component ID': stat.ownerID,
+     'DOM Component ID': stat.instanceID
+   };
+ });
+ consoleTable(table);
+}
+
+var warnedAboutPrintDOM = false;
+function printDOM(measurements) {
+ "development" !== 'production' ? warning(warnedAboutPrintDOM, '`ReactPerf.printDOM(...)` is deprecated. Use ' + '`ReactPerf.printOperations(...)` instead.') : void 0;
+ warnedAboutPrintDOM = true;
+ return printOperations(measurements);
+}
+
+var warnedAboutGetMeasurementsSummaryMap = false;
+function getMeasurementsSummaryMap(measurements) {
+ "development" !== 'production' ? warning(warnedAboutGetMeasurementsSummaryMap, '`ReactPerf.getMeasurementsSummaryMap(...)` is deprecated. Use ' + '`ReactPerf.getWasted(...)` instead.') : void 0;
+ warnedAboutGetMeasurementsSummaryMap = true;
+ return getWasted(measurements);
+}
+
+function start() {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return;
+ }
+
+ ReactDebugTool.beginProfiling();
+}
+
+function stop() {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return;
+ }
+
+ ReactDebugTool.endProfiling();
+}
+
+function isRunning() {
+ if (!("development" !== 'production')) {
+   warnInProduction();
+   return false;
+ }
+
+ return ReactDebugTool.isProfiling();
+}
+
+var ReactPerfAnalysis = {
+ getLastMeasurements: getLastMeasurements,
+ getExclusive: getExclusive,
+ getInclusive: getInclusive,
+ getWasted: getWasted,
+ getOperations: getOperations,
+ printExclusive: printExclusive,
+ printInclusive: printInclusive,
+ printWasted: printWasted,
+ printOperations: printOperations,
+ start: start,
+ stop: stop,
+ isRunning: isRunning,
+ // Deprecated:
+ printDOM: printDOM,
+ getMeasurementsSummaryMap: getMeasurementsSummaryMap
+};
+
+module.exports = ReactPerfAnalysis;
+},{"157":157,"158":158,"50":50}],72:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var ReactPropTypeLocationNames = {};
+
+if ("development" !== 'production') {
+ ReactPropTypeLocationNames = {
+   prop: 'prop',
+   context: 'context',
+   childContext: 'child context'
+ };
+}
+
+module.exports = ReactPropTypeLocationNames;
+},{}],73:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+module.exports = ReactPropTypesSecret;
+},{}],74:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var CallbackQueue = _dereq_(6);
+var PooledClass = _dereq_(25);
+var ReactBrowserEventEmitter = _dereq_(26);
+var ReactInputSelection = _dereq_(62);
+var ReactInstrumentation = _dereq_(64);
+var Transaction = _dereq_(100);
+var ReactUpdateQueue = _dereq_(81);
+
+/**
+* Ensures that, when possible, the selection range (currently selected text
+* input) is not disturbed by performing the transaction.
+*/
+var SELECTION_RESTORATION = {
+ /**
+  * @return {Selection} Selection information.
+  */
+ initialize: ReactInputSelection.getSelectionInformation,
+ /**
+  * @param {Selection} sel Selection information returned from `initialize`.
+  */
+ close: ReactInputSelection.restoreSelection
+};
+
+/**
+* Suppresses events (blur/focus) that could be inadvertently dispatched due to
+* high level DOM manipulations (like temporarily removing a text input from the
+* DOM).
+*/
+var EVENT_SUPPRESSION = {
+ /**
+  * @return {boolean} The enabled status of `ReactBrowserEventEmitter` before
+  * the reconciliation.
+  */
+ initialize: function () {
+   var currentlyEnabled = ReactBrowserEventEmitter.isEnabled();
+   ReactBrowserEventEmitter.setEnabled(false);
+   return currentlyEnabled;
+ },
+
+ /**
+  * @param {boolean} previouslyEnabled Enabled status of
+  *   `ReactBrowserEventEmitter` before the reconciliation occurred. `close`
+  *   restores the previous value.
+  */
+ close: function (previouslyEnabled) {
+   ReactBrowserEventEmitter.setEnabled(previouslyEnabled);
+ }
+};
+
+/**
+* Provides a queue for collecting `componentDidMount` and
+* `componentDidUpdate` callbacks during the transaction.
+*/
+var ON_DOM_READY_QUEUEING = {
+ /**
+  * Initializes the internal `onDOMReady` queue.
+  */
+ initialize: function () {
+   this.reactMountReady.reset();
+ },
+
+ /**
+  * After DOM is flushed, invoke all registered `onDOMReady` callbacks.
+  */
+ close: function () {
+   this.reactMountReady.notifyAll();
+ }
+};
+
+/**
+* Executed within the scope of the `Transaction` instance. Consider these as
+* being member methods, but with an implied ordering while being isolated from
+* each other.
+*/
+var TRANSACTION_WRAPPERS = [SELECTION_RESTORATION, EVENT_SUPPRESSION, ON_DOM_READY_QUEUEING];
+
+if ("development" !== 'production') {
+ TRANSACTION_WRAPPERS.push({
+   initialize: ReactInstrumentation.debugTool.onBeginFlush,
+   close: ReactInstrumentation.debugTool.onEndFlush
+ });
+}
+
+/**
+* Currently:
+* - The order that these are listed in the transaction is critical:
+* - Suppresses events.
+* - Restores selection range.
+*
+* Future:
+* - Restore document/overflow scroll positions that were unintentionally
+*   modified via DOM insertions above the top viewport boundary.
+* - Implement/integrate with customized constraint based layout system and keep
+*   track of which dimensions must be remeasured.
+*
+* @class ReactReconcileTransaction
+*/
+function ReactReconcileTransaction(useCreateElement) {
+ this.reinitializeTransaction();
+ // Only server-side rendering really needs this option (see
+ // `ReactServerRendering`), but server-side uses
+ // `ReactServerRenderingTransaction` instead. This option is here so that it's
+ // accessible and defaults to false when `ReactDOMComponent` and
+ // `ReactDOMTextComponent` checks it in `mountComponent`.`
+ this.renderToStaticMarkup = false;
+ this.reactMountReady = CallbackQueue.getPooled(null);
+ this.useCreateElement = useCreateElement;
+}
+
+var Mixin = {
+ /**
+  * @see Transaction
+  * @abstract
+  * @final
+  * @return {array<object>} List of operation wrap procedures.
+  *   TODO: convert to array<TransactionWrapper>
+  */
+ getTransactionWrappers: function () {
+   return TRANSACTION_WRAPPERS;
+ },
+
+ /**
+  * @return {object} The queue to collect `onDOMReady` callbacks with.
+  */
+ getReactMountReady: function () {
+   return this.reactMountReady;
+ },
+
+ /**
+  * @return {object} The queue to collect React async events.
+  */
+ getUpdateQueue: function () {
+   return ReactUpdateQueue;
+ },
+
+ /**
+  * Save current transaction state -- if the return value from this method is
+  * passed to `rollback`, the transaction will be reset to that state.
+  */
+ checkpoint: function () {
+   // reactMountReady is the our only stateful wrapper
+   return this.reactMountReady.checkpoint();
+ },
+
+ rollback: function (checkpoint) {
+   this.reactMountReady.rollback(checkpoint);
+ },
+
+ /**
+  * `PooledClass` looks for this, and will invoke this before allowing this
+  * instance to be reused.
+  */
+ destructor: function () {
+   CallbackQueue.release(this.reactMountReady);
+   this.reactMountReady = null;
+ }
+};
+
+_assign(ReactReconcileTransaction.prototype, Transaction, Mixin);
+
+PooledClass.addPoolingTo(ReactReconcileTransaction);
+
+module.exports = ReactReconcileTransaction;
+},{"100":100,"158":158,"25":25,"26":26,"6":6,"62":62,"64":64,"81":81}],75:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactRef = _dereq_(76);
+var ReactInstrumentation = _dereq_(64);
+
+var warning = _dereq_(157);
+
+/**
+* Helper to call ReactRef.attachRefs with this composite component, split out
+* to avoid allocations in the transaction mount-ready queue.
+*/
+function attachRefs() {
+ ReactRef.attachRefs(this, this._currentElement);
+}
+
+var ReactReconciler = {
+
+ /**
+  * Initializes the component, renders markup, and registers event listeners.
+  *
+  * @param {ReactComponent} internalInstance
+  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+  * @param {?object} the containing host component instance
+  * @param {?object} info about the host container
+  * @return {?string} Rendered markup to be inserted into the DOM.
+  * @final
+  * @internal
+  */
+ mountComponent: function (internalInstance, transaction, hostParent, hostContainerInfo, context, parentDebugID // 0 in production and for roots
+ ) {
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
+     }
+   }
+   var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
+   if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
+     transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
+   }
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onMountComponent(internalInstance._debugID);
+     }
+   }
+   return markup;
+ },
+
+ /**
+  * Returns a value that can be passed to
+  * ReactComponentEnvironment.replaceNodeWithMarkup.
+  */
+ getHostNode: function (internalInstance) {
+   return internalInstance.getHostNode();
+ },
+
+ /**
+  * Releases any resources allocated by `mountComponent`.
+  *
+  * @final
+  * @internal
+  */
+ unmountComponent: function (internalInstance, safely) {
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onBeforeUnmountComponent(internalInstance._debugID);
+     }
+   }
+   ReactRef.detachRefs(internalInstance, internalInstance._currentElement);
+   internalInstance.unmountComponent(safely);
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onUnmountComponent(internalInstance._debugID);
+     }
+   }
+ },
+
+ /**
+  * Update a component using a new element.
+  *
+  * @param {ReactComponent} internalInstance
+  * @param {ReactElement} nextElement
+  * @param {ReactReconcileTransaction} transaction
+  * @param {object} context
+  * @internal
+  */
+ receiveComponent: function (internalInstance, nextElement, transaction, context) {
+   var prevElement = internalInstance._currentElement;
+
+   if (nextElement === prevElement && context === internalInstance._context) {
+     // Since elements are immutable after the owner is rendered,
+     // we can do a cheap identity compare here to determine if this is a
+     // superfluous reconcile. It's possible for state to be mutable but such
+     // change should trigger an update of the owner which would recreate
+     // the element. We explicitly check for the existence of an owner since
+     // it's possible for an element created outside a composite to be
+     // deeply mutated and reused.
+
+     // TODO: Bailing out early is just a perf optimization right?
+     // TODO: Removing the return statement should affect correctness?
+     return;
+   }
+
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onBeforeUpdateComponent(internalInstance._debugID, nextElement);
+     }
+   }
+
+   var refsChanged = ReactRef.shouldUpdateRefs(prevElement, nextElement);
+
+   if (refsChanged) {
+     ReactRef.detachRefs(internalInstance, prevElement);
+   }
+
+   internalInstance.receiveComponent(nextElement, transaction, context);
+
+   if (refsChanged && internalInstance._currentElement && internalInstance._currentElement.ref != null) {
+     transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
+   }
+
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onUpdateComponent(internalInstance._debugID);
+     }
+   }
+ },
+
+ /**
+  * Flush any dirty changes in a component.
+  *
+  * @param {ReactComponent} internalInstance
+  * @param {ReactReconcileTransaction} transaction
+  * @internal
+  */
+ performUpdateIfNecessary: function (internalInstance, transaction, updateBatchNumber) {
+   if (internalInstance._updateBatchNumber !== updateBatchNumber) {
+     // The component's enqueued batch number should always be the current
+     // batch or the following one.
+     "development" !== 'production' ? warning(internalInstance._updateBatchNumber == null || internalInstance._updateBatchNumber === updateBatchNumber + 1, 'performUpdateIfNecessary: Unexpected batch number (current %s, ' + 'pending %s)', updateBatchNumber, internalInstance._updateBatchNumber) : void 0;
+     return;
+   }
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onBeforeUpdateComponent(internalInstance._debugID, internalInstance._currentElement);
+     }
+   }
+   internalInstance.performUpdateIfNecessary(transaction);
+   if ("development" !== 'production') {
+     if (internalInstance._debugID !== 0) {
+       ReactInstrumentation.debugTool.onUpdateComponent(internalInstance._debugID);
+     }
+   }
+ }
+
+};
+
+module.exports = ReactReconciler;
+},{"157":157,"64":64,"76":76}],76:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var ReactOwner = _dereq_(70);
+
+var ReactRef = {};
+
+function attachRef(ref, component, owner) {
+ if (typeof ref === 'function') {
+   ref(component.getPublicInstance());
+ } else {
+   // Legacy ref
+   ReactOwner.addComponentAsRefTo(component, ref, owner);
+ }
+}
+
+function detachRef(ref, component, owner) {
+ if (typeof ref === 'function') {
+   ref(null);
+ } else {
+   // Legacy ref
+   ReactOwner.removeComponentAsRefFrom(component, ref, owner);
+ }
+}
+
+ReactRef.attachRefs = function (instance, element) {
+ if (element === null || typeof element !== 'object') {
+   return;
+ }
+ var ref = element.ref;
+ if (ref != null) {
+   attachRef(ref, instance, element._owner);
+ }
+};
+
+ReactRef.shouldUpdateRefs = function (prevElement, nextElement) {
+ // If either the owner or a `ref` has changed, make sure the newest owner
+ // has stored a reference to `this`, and the previous owner (if different)
+ // has forgotten the reference to `this`. We use the element instead
+ // of the public this.props because the post processing cannot determine
+ // a ref. The ref conceptually lives on the element.
+
+ // TODO: Should this even be possible? The owner cannot change because
+ // it's forbidden by shouldUpdateReactComponent. The ref can change
+ // if you swap the keys of but not the refs. Reconsider where this check
+ // is made. It probably belongs where the key checking and
+ // instantiateReactComponent is done.
+
+ var prevRef = null;
+ var prevOwner = null;
+ if (prevElement !== null && typeof prevElement === 'object') {
+   prevRef = prevElement.ref;
+   prevOwner = prevElement._owner;
+ }
+
+ var nextRef = null;
+ var nextOwner = null;
+ if (nextElement !== null && typeof nextElement === 'object') {
+   nextRef = nextElement.ref;
+   nextOwner = nextElement._owner;
+ }
+
+ return prevRef !== nextRef ||
+ // If owner changes but we have an unchanged function ref, don't update refs
+ typeof nextRef === 'string' && nextOwner !== prevOwner;
+};
+
+ReactRef.detachRefs = function (instance, element) {
+ if (element === null || typeof element !== 'object') {
+   return;
+ }
+ var ref = element.ref;
+ if (ref != null) {
+   detachRef(ref, instance, element._owner);
+ }
+};
+
+module.exports = ReactRef;
+},{"70":70}],77:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var PooledClass = _dereq_(25);
+var Transaction = _dereq_(100);
+var ReactInstrumentation = _dereq_(64);
+var ReactServerUpdateQueue = _dereq_(78);
+
+/**
+* Executed within the scope of the `Transaction` instance. Consider these as
+* being member methods, but with an implied ordering while being isolated from
+* each other.
+*/
+var TRANSACTION_WRAPPERS = [];
+
+if ("development" !== 'production') {
+ TRANSACTION_WRAPPERS.push({
+   initialize: ReactInstrumentation.debugTool.onBeginFlush,
+   close: ReactInstrumentation.debugTool.onEndFlush
+ });
+}
+
+var noopCallbackQueue = {
+ enqueue: function () {}
+};
+
+/**
+* @class ReactServerRenderingTransaction
+* @param {boolean} renderToStaticMarkup
+*/
+function ReactServerRenderingTransaction(renderToStaticMarkup) {
+ this.reinitializeTransaction();
+ this.renderToStaticMarkup = renderToStaticMarkup;
+ this.useCreateElement = false;
+ this.updateQueue = new ReactServerUpdateQueue(this);
+}
+
+var Mixin = {
+ /**
+  * @see Transaction
+  * @abstract
+  * @final
+  * @return {array} Empty list of operation wrap procedures.
+  */
+ getTransactionWrappers: function () {
+   return TRANSACTION_WRAPPERS;
+ },
+
+ /**
+  * @return {object} The queue to collect `onDOMReady` callbacks with.
+  */
+ getReactMountReady: function () {
+   return noopCallbackQueue;
+ },
+
+ /**
+  * @return {object} The queue to collect React async events.
+  */
+ getUpdateQueue: function () {
+   return this.updateQueue;
+ },
+
+ /**
+  * `PooledClass` looks for this, and will invoke this before allowing this
+  * instance to be reused.
+  */
+ destructor: function () {},
+
+ checkpoint: function () {},
+
+ rollback: function () {}
+};
+
+_assign(ReactServerRenderingTransaction.prototype, Transaction, Mixin);
+
+PooledClass.addPoolingTo(ReactServerRenderingTransaction);
+
+module.exports = ReactServerRenderingTransaction;
+},{"100":100,"158":158,"25":25,"64":64,"78":78}],78:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var ReactUpdateQueue = _dereq_(81);
+
+var warning = _dereq_(157);
+
+function warnNoop(publicInstance, callerName) {
+ if ("development" !== 'production') {
+   var constructor = publicInstance.constructor;
+   "development" !== 'production' ? warning(false, '%s(...): Can only update a mounting component. ' + 'This usually means you called %s() outside componentWillMount() on the server. ' + 'This is a no-op. Please check the code for the %s component.', callerName, callerName, constructor && (constructor.displayName || constructor.name) || 'ReactClass') : void 0;
+ }
+}
+
+/**
+* This is the update queue used for server rendering.
+* It delegates to ReactUpdateQueue while server rendering is in progress and
+* switches to ReactNoopUpdateQueue after the transaction has completed.
+* @class ReactServerUpdateQueue
+* @param {Transaction} transaction
+*/
+
+var ReactServerUpdateQueue = function () {
+ function ReactServerUpdateQueue(transaction) {
+   _classCallCheck(this, ReactServerUpdateQueue);
+
+   this.transaction = transaction;
+ }
+
+ /**
+  * Checks whether or not this composite component is mounted.
+  * @param {ReactClass} publicInstance The instance we want to test.
+  * @return {boolean} True if mounted, false otherwise.
+  * @protected
+  * @final
+  */
+
+
+ ReactServerUpdateQueue.prototype.isMounted = function isMounted(publicInstance) {
+   return false;
+ };
+
+ /**
+  * Enqueue a callback that will be executed after all the pending updates
+  * have processed.
+  *
+  * @param {ReactClass} publicInstance The instance to use as `this` context.
+  * @param {?function} callback Called after state is updated.
+  * @internal
+  */
+
+
+ ReactServerUpdateQueue.prototype.enqueueCallback = function enqueueCallback(publicInstance, callback, callerName) {
+   if (this.transaction.isInTransaction()) {
+     ReactUpdateQueue.enqueueCallback(publicInstance, callback, callerName);
+   }
+ };
+
+ /**
+  * Forces an update. This should only be invoked when it is known with
+  * certainty that we are **not** in a DOM transaction.
+  *
+  * You may want to call this when you know that some deeper aspect of the
+  * component's state has changed but `setState` was not called.
+  *
+  * This will not invoke `shouldComponentUpdate`, but it will invoke
+  * `componentWillUpdate` and `componentDidUpdate`.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @internal
+  */
+
+
+ ReactServerUpdateQueue.prototype.enqueueForceUpdate = function enqueueForceUpdate(publicInstance) {
+   if (this.transaction.isInTransaction()) {
+     ReactUpdateQueue.enqueueForceUpdate(publicInstance);
+   } else {
+     warnNoop(publicInstance, 'forceUpdate');
+   }
+ };
+
+ /**
+  * Replaces all of the state. Always use this or `setState` to mutate state.
+  * You should treat `this.state` as immutable.
+  *
+  * There is no guarantee that `this.state` will be immediately updated, so
+  * accessing `this.state` after calling this method may return the old value.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @param {object|function} completeState Next state.
+  * @internal
+  */
+
+
+ ReactServerUpdateQueue.prototype.enqueueReplaceState = function enqueueReplaceState(publicInstance, completeState) {
+   if (this.transaction.isInTransaction()) {
+     ReactUpdateQueue.enqueueReplaceState(publicInstance, completeState);
+   } else {
+     warnNoop(publicInstance, 'replaceState');
+   }
+ };
+
+ /**
+  * Sets a subset of the state. This only exists because _pendingState is
+  * internal. This provides a merging strategy that is not available to deep
+  * properties which is confusing. TODO: Expose pendingState or don't use it
+  * during the merge.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @param {object|function} partialState Next partial state to be merged with state.
+  * @internal
+  */
+
+
+ ReactServerUpdateQueue.prototype.enqueueSetState = function enqueueSetState(publicInstance, partialState) {
+   if (this.transaction.isInTransaction()) {
+     ReactUpdateQueue.enqueueSetState(publicInstance, partialState);
+   } else {
+     warnNoop(publicInstance, 'setState');
+   }
+ };
+
+ return ReactServerUpdateQueue;
+}();
+
+module.exports = ReactServerUpdateQueue;
+},{"157":157,"81":81}],79:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var React = _dereq_(134);
+var ReactDefaultInjection = _dereq_(52);
+var ReactCompositeComponent = _dereq_(30);
+var ReactReconciler = _dereq_(75);
+var ReactUpdates = _dereq_(82);
+
+var emptyObject = _dereq_(143);
+var getNextDebugID = _dereq_(117);
+var invariant = _dereq_(150);
+
+var NoopInternalComponent = function () {
+ function NoopInternalComponent(element) {
+   _classCallCheck(this, NoopInternalComponent);
+
+   this._renderedOutput = element;
+   this._currentElement = element;
+
+   if ("development" !== 'production') {
+     this._debugID = getNextDebugID();
+   }
+ }
+
+ NoopInternalComponent.prototype.mountComponent = function mountComponent() {};
+
+ NoopInternalComponent.prototype.receiveComponent = function receiveComponent(element) {
+   this._renderedOutput = element;
+   this._currentElement = element;
+ };
+
+ NoopInternalComponent.prototype.unmountComponent = function unmountComponent() {};
+
+ NoopInternalComponent.prototype.getHostNode = function getHostNode() {
+   return undefined;
+ };
+
+ NoopInternalComponent.prototype.getPublicInstance = function getPublicInstance() {
+   return null;
+ };
+
+ return NoopInternalComponent;
+}();
+
+var ShallowComponentWrapper = function (element) {
+ // TODO: Consolidate with instantiateReactComponent
+ if ("development" !== 'production') {
+   this._debugID = getNextDebugID();
+ }
+
+ this.construct(element);
+};
+_assign(ShallowComponentWrapper.prototype, ReactCompositeComponent, {
+ _constructComponent: ReactCompositeComponent._constructComponentWithoutOwner,
+ _instantiateReactComponent: function (element) {
+   return new NoopInternalComponent(element);
+ },
+ _replaceNodeWithMarkup: function () {},
+ _renderValidatedComponent: ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext
+});
+
+function _batchedRender(renderer, element, context) {
+ var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(true);
+ renderer._render(element, transaction, context);
+ ReactUpdates.ReactReconcileTransaction.release(transaction);
+}
+
+var ReactShallowRenderer = function () {
+ function ReactShallowRenderer() {
+   _classCallCheck(this, ReactShallowRenderer);
+
+   this._instance = null;
+ }
+
+ ReactShallowRenderer.prototype.getMountedInstance = function getMountedInstance() {
+   return this._instance ? this._instance._instance : null;
+ };
+
+ ReactShallowRenderer.prototype.render = function render(element, context) {
+   // Ensure we've done the default injections. This might not be true in the
+   // case of a simple test that only requires React and the TestUtils in
+   // conjunction with an inline-requires transform.
+   ReactDefaultInjection.inject();
+
+   !React.isValidElement(element) ? "development" !== 'production' ? invariant(false, 'ReactShallowRenderer render(): Invalid component element.%s', typeof element === 'function' ? ' Instead of passing a component class, make sure to instantiate ' + 'it by passing it to React.createElement.' : '') : _prodInvariant('12', typeof element === 'function' ? ' Instead of passing a component class, make sure to instantiate ' + 'it by passing it to React.createElement.' : '') : void 0;
+   !(typeof element.type !== 'string') ? "development" !== 'production' ? invariant(false, 'ReactShallowRenderer render(): Shallow rendering works only with custom components, not primitives (%s). Instead of calling `.render(el)` and inspecting the rendered output, look at `el.props` directly instead.', element.type) : _prodInvariant('13', element.type) : void 0;
+
+   if (!context) {
+     context = emptyObject;
+   }
+   ReactUpdates.batchedUpdates(_batchedRender, this, element, context);
+
+   return this.getRenderOutput();
+ };
+
+ ReactShallowRenderer.prototype.getRenderOutput = function getRenderOutput() {
+   return this._instance && this._instance._renderedComponent && this._instance._renderedComponent._renderedOutput || null;
+ };
+
+ ReactShallowRenderer.prototype.unmount = function unmount() {
+   if (this._instance) {
+     ReactReconciler.unmountComponent(this._instance, false);
+   }
+ };
+
+ ReactShallowRenderer.prototype._render = function _render(element, transaction, context) {
+   if (this._instance) {
+     ReactReconciler.receiveComponent(this._instance, element, transaction, context);
+   } else {
+     var instance = new ShallowComponentWrapper(element);
+     ReactReconciler.mountComponent(instance, transaction, null, null, context, 0);
+     this._instance = instance;
+   }
+ };
+
+ return ReactShallowRenderer;
+}();
+
+module.exports = ReactShallowRenderer;
+},{"117":117,"125":125,"134":134,"143":143,"150":150,"158":158,"30":30,"52":52,"75":75,"82":82}],80:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var EventConstants = _dereq_(16);
+var EventPluginHub = _dereq_(17);
+var EventPluginRegistry = _dereq_(18);
+var EventPropagators = _dereq_(20);
+var React = _dereq_(134);
+var ReactDOM = _dereq_(31);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactBrowserEventEmitter = _dereq_(26);
+var ReactInstanceMap = _dereq_(63);
+var ReactUpdates = _dereq_(82);
+var SyntheticEvent = _dereq_(91);
+var ReactShallowRenderer = _dereq_(79);
+
+var findDOMNode = _dereq_(108);
+var invariant = _dereq_(150);
+
+var topLevelTypes = EventConstants.topLevelTypes;
+
+function Event(suffix) {}
+
+/**
+* @class ReactTestUtils
+*/
+
+function findAllInRenderedTreeInternal(inst, test) {
+ if (!inst || !inst.getPublicInstance) {
+   return [];
+ }
+ var publicInst = inst.getPublicInstance();
+ var ret = test(publicInst) ? [publicInst] : [];
+ var currentElement = inst._currentElement;
+ if (ReactTestUtils.isDOMComponent(publicInst)) {
+   var renderedChildren = inst._renderedChildren;
+   var key;
+   for (key in renderedChildren) {
+     if (!renderedChildren.hasOwnProperty(key)) {
+       continue;
+     }
+     ret = ret.concat(findAllInRenderedTreeInternal(renderedChildren[key], test));
+   }
+ } else if (React.isValidElement(currentElement) && typeof currentElement.type === 'function') {
+   ret = ret.concat(findAllInRenderedTreeInternal(inst._renderedComponent, test));
+ }
+ return ret;
+}
+
+/**
+* Utilities for making it easy to test React components.
+*
+* See https://facebook.github.io/react/docs/test-utils.html
+*
+* Todo: Support the entire DOM.scry query syntax. For now, these simple
+* utilities will suffice for testing purposes.
+* @lends ReactTestUtils
+*/
+var ReactTestUtils = {
+ renderIntoDocument: function (element) {
+   var div = document.createElement('div');
+   // None of our tests actually require attaching the container to the
+   // DOM, and doing so creates a mess that we rely on test isolation to
+   // clean up, so we're going to stop honoring the name of this method
+   // (and probably rename it eventually) if no problems arise.
+   // document.documentElement.appendChild(div);
+   return ReactDOM.render(element, div);
+ },
+
+ isElement: function (element) {
+   return React.isValidElement(element);
+ },
+
+ isElementOfType: function (inst, convenienceConstructor) {
+   return React.isValidElement(inst) && inst.type === convenienceConstructor;
+ },
+
+ isDOMComponent: function (inst) {
+   return !!(inst && inst.nodeType === 1 && inst.tagName);
+ },
+
+ isDOMComponentElement: function (inst) {
+   return !!(inst && React.isValidElement(inst) && !!inst.tagName);
+ },
+
+ isCompositeComponent: function (inst) {
+   if (ReactTestUtils.isDOMComponent(inst)) {
+     // Accessing inst.setState warns; just return false as that'll be what
+     // this returns when we have DOM nodes as refs directly
+     return false;
+   }
+   return inst != null && typeof inst.render === 'function' && typeof inst.setState === 'function';
+ },
+
+ isCompositeComponentWithType: function (inst, type) {
+   if (!ReactTestUtils.isCompositeComponent(inst)) {
+     return false;
+   }
+   var internalInstance = ReactInstanceMap.get(inst);
+   var constructor = internalInstance._currentElement.type;
+
+   return constructor === type;
+ },
+
+ isCompositeComponentElement: function (inst) {
+   if (!React.isValidElement(inst)) {
+     return false;
+   }
+   // We check the prototype of the type that will get mounted, not the
+   // instance itself. This is a future proof way of duck typing.
+   var prototype = inst.type.prototype;
+   return typeof prototype.render === 'function' && typeof prototype.setState === 'function';
+ },
+
+ isCompositeComponentElementWithType: function (inst, type) {
+   var internalInstance = ReactInstanceMap.get(inst);
+   var constructor = internalInstance._currentElement.type;
+
+   return !!(ReactTestUtils.isCompositeComponentElement(inst) && constructor === type);
+ },
+
+ getRenderedChildOfCompositeComponent: function (inst) {
+   if (!ReactTestUtils.isCompositeComponent(inst)) {
+     return null;
+   }
+   var internalInstance = ReactInstanceMap.get(inst);
+   return internalInstance._renderedComponent.getPublicInstance();
+ },
+
+ findAllInRenderedTree: function (inst, test) {
+   if (!inst) {
+     return [];
+   }
+   !ReactTestUtils.isCompositeComponent(inst) ? "development" !== 'production' ? invariant(false, 'findAllInRenderedTree(...): instance must be a composite component') : _prodInvariant('10') : void 0;
+   return findAllInRenderedTreeInternal(ReactInstanceMap.get(inst), test);
+ },
+
+ /**
+  * Finds all instance of components in the rendered tree that are DOM
+  * components with the class name matching `className`.
+  * @return {array} an array of all the matches.
+  */
+ scryRenderedDOMComponentsWithClass: function (root, classNames) {
+   return ReactTestUtils.findAllInRenderedTree(root, function (inst) {
+     if (ReactTestUtils.isDOMComponent(inst)) {
+       var className = inst.className;
+       if (typeof className !== 'string') {
+         // SVG, probably.
+         className = inst.getAttribute('class') || '';
+       }
+       var classList = className.split(/\s+/);
+
+       if (!Array.isArray(classNames)) {
+         !(classNames !== undefined) ? "development" !== 'production' ? invariant(false, 'TestUtils.scryRenderedDOMComponentsWithClass expects a className as a second argument.') : _prodInvariant('11') : void 0;
+         classNames = classNames.split(/\s+/);
+       }
+       return classNames.every(function (name) {
+         return classList.indexOf(name) !== -1;
+       });
+     }
+     return false;
+   });
+ },
+
+ /**
+  * Like scryRenderedDOMComponentsWithClass but expects there to be one result,
+  * and returns that one result, or throws exception if there is any other
+  * number of matches besides one.
+  * @return {!ReactDOMComponent} The one match.
+  */
+ findRenderedDOMComponentWithClass: function (root, className) {
+   var all = ReactTestUtils.scryRenderedDOMComponentsWithClass(root, className);
+   if (all.length !== 1) {
+     throw new Error('Did not find exactly one match (found: ' + all.length + ') ' + 'for class:' + className);
+   }
+   return all[0];
+ },
+
+ /**
+  * Finds all instance of components in the rendered tree that are DOM
+  * components with the tag name matching `tagName`.
+  * @return {array} an array of all the matches.
+  */
+ scryRenderedDOMComponentsWithTag: function (root, tagName) {
+   return ReactTestUtils.findAllInRenderedTree(root, function (inst) {
+     return ReactTestUtils.isDOMComponent(inst) && inst.tagName.toUpperCase() === tagName.toUpperCase();
+   });
+ },
+
+ /**
+  * Like scryRenderedDOMComponentsWithTag but expects there to be one result,
+  * and returns that one result, or throws exception if there is any other
+  * number of matches besides one.
+  * @return {!ReactDOMComponent} The one match.
+  */
+ findRenderedDOMComponentWithTag: function (root, tagName) {
+   var all = ReactTestUtils.scryRenderedDOMComponentsWithTag(root, tagName);
+   if (all.length !== 1) {
+     throw new Error('Did not find exactly one match (found: ' + all.length + ') ' + 'for tag:' + tagName);
+   }
+   return all[0];
+ },
+
+ /**
+  * Finds all instances of components with type equal to `componentType`.
+  * @return {array} an array of all the matches.
+  */
+ scryRenderedComponentsWithType: function (root, componentType) {
+   return ReactTestUtils.findAllInRenderedTree(root, function (inst) {
+     return ReactTestUtils.isCompositeComponentWithType(inst, componentType);
+   });
+ },
+
+ /**
+  * Same as `scryRenderedComponentsWithType` but expects there to be one result
+  * and returns that one result, or throws exception if there is any other
+  * number of matches besides one.
+  * @return {!ReactComponent} The one match.
+  */
+ findRenderedComponentWithType: function (root, componentType) {
+   var all = ReactTestUtils.scryRenderedComponentsWithType(root, componentType);
+   if (all.length !== 1) {
+     throw new Error('Did not find exactly one match (found: ' + all.length + ') ' + 'for componentType:' + componentType);
+   }
+   return all[0];
+ },
+
+ /**
+  * Pass a mocked component module to this method to augment it with
+  * useful methods that allow it to be used as a dummy React component.
+  * Instead of rendering as usual, the component will become a simple
+  * <div> containing any provided children.
+  *
+  * @param {object} module the mock function object exported from a
+  *                        module that defines the component to be mocked
+  * @param {?string} mockTagName optional dummy root tag name to return
+  *                              from render method (overrides
+  *                              module.mockTagName if provided)
+  * @return {object} the ReactTestUtils object (for chaining)
+  */
+ mockComponent: function (module, mockTagName) {
+   mockTagName = mockTagName || module.mockTagName || 'div';
+
+   module.prototype.render.mockImplementation(function () {
+     return React.createElement(mockTagName, null, this.props.children);
+   });
+
+   return this;
+ },
+
+ /**
+  * Simulates a top level event being dispatched from a raw event that occurred
+  * on an `Element` node.
+  * @param {Object} topLevelType A type from `EventConstants.topLevelTypes`
+  * @param {!Element} node The dom to simulate an event occurring on.
+  * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
+  */
+ simulateNativeEventOnNode: function (topLevelType, node, fakeNativeEvent) {
+   fakeNativeEvent.target = node;
+   ReactBrowserEventEmitter.ReactEventListener.dispatchEvent(topLevelType, fakeNativeEvent);
+ },
+
+ /**
+  * Simulates a top level event being dispatched from a raw event that occurred
+  * on the `ReactDOMComponent` `comp`.
+  * @param {Object} topLevelType A type from `EventConstants.topLevelTypes`.
+  * @param {!ReactDOMComponent} comp
+  * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
+  */
+ simulateNativeEventOnDOMComponent: function (topLevelType, comp, fakeNativeEvent) {
+   ReactTestUtils.simulateNativeEventOnNode(topLevelType, findDOMNode(comp), fakeNativeEvent);
+ },
+
+ nativeTouchData: function (x, y) {
+   return {
+     touches: [{ pageX: x, pageY: y }]
+   };
+ },
+
+ createRenderer: function () {
+   return new ReactShallowRenderer();
+ },
+
+ Simulate: null,
+ SimulateNative: {}
+};
+
+/**
+* Exports:
+*
+* - `ReactTestUtils.Simulate.click(Element/ReactDOMComponent)`
+* - `ReactTestUtils.Simulate.mouseMove(Element/ReactDOMComponent)`
+* - `ReactTestUtils.Simulate.change(Element/ReactDOMComponent)`
+* - ... (All keys from event plugin `eventTypes` objects)
+*/
+function makeSimulator(eventType) {
+ return function (domComponentOrNode, eventData) {
+   var node;
+   !!React.isValidElement(domComponentOrNode) ? "development" !== 'production' ? invariant(false, 'TestUtils.Simulate expects a component instance and not a ReactElement.TestUtils.Simulate will not work if you are using shallow rendering.') : _prodInvariant('14') : void 0;
+   if (ReactTestUtils.isDOMComponent(domComponentOrNode)) {
+     node = findDOMNode(domComponentOrNode);
+   } else if (domComponentOrNode.tagName) {
+     node = domComponentOrNode;
+   }
+
+   var dispatchConfig = EventPluginRegistry.eventNameDispatchConfigs[eventType];
+
+   var fakeNativeEvent = new Event();
+   fakeNativeEvent.target = node;
+   fakeNativeEvent.type = eventType.toLowerCase();
+
+   // We don't use SyntheticEvent.getPooled in order to not have to worry about
+   // properly destroying any properties assigned from `eventData` upon release
+   var event = new SyntheticEvent(dispatchConfig, ReactDOMComponentTree.getInstanceFromNode(node), fakeNativeEvent, node);
+   // Since we aren't using pooling, always persist the event. This will make
+   // sure it's marked and won't warn when setting additional properties.
+   event.persist();
+   _assign(event, eventData);
+
+   if (dispatchConfig.phasedRegistrationNames) {
+     EventPropagators.accumulateTwoPhaseDispatches(event);
+   } else {
+     EventPropagators.accumulateDirectDispatches(event);
+   }
+
+   ReactUpdates.batchedUpdates(function () {
+     EventPluginHub.enqueueEvents(event);
+     EventPluginHub.processEventQueue(true);
+   });
+ };
+}
+
+function buildSimulators() {
+ ReactTestUtils.Simulate = {};
+
+ var eventType;
+ for (eventType in EventPluginRegistry.eventNameDispatchConfigs) {
+   /**
+    * @param {!Element|ReactDOMComponent} domComponentOrNode
+    * @param {?object} eventData Fake event data to use in SyntheticEvent.
+    */
+   ReactTestUtils.Simulate[eventType] = makeSimulator(eventType);
+ }
+}
+
+// Rebuild ReactTestUtils.Simulate whenever event plugins are injected
+var oldInjectEventPluginOrder = EventPluginHub.injection.injectEventPluginOrder;
+EventPluginHub.injection.injectEventPluginOrder = function () {
+ oldInjectEventPluginOrder.apply(this, arguments);
+ buildSimulators();
+};
+var oldInjectEventPlugins = EventPluginHub.injection.injectEventPluginsByName;
+EventPluginHub.injection.injectEventPluginsByName = function () {
+ oldInjectEventPlugins.apply(this, arguments);
+ buildSimulators();
+};
+
+buildSimulators();
+
+/**
+* Exports:
+*
+* - `ReactTestUtils.SimulateNative.click(Element/ReactDOMComponent)`
+* - `ReactTestUtils.SimulateNative.mouseMove(Element/ReactDOMComponent)`
+* - `ReactTestUtils.SimulateNative.mouseIn/ReactDOMComponent)`
+* - `ReactTestUtils.SimulateNative.mouseOut(Element/ReactDOMComponent)`
+* - ... (All keys from `EventConstants.topLevelTypes`)
+*
+* Note: Top level event types are a subset of the entire set of handler types
+* (which include a broader set of "synthetic" events). For example, onDragDone
+* is a synthetic event. Except when testing an event plugin or React's event
+* handling code specifically, you probably want to use ReactTestUtils.Simulate
+* to dispatch synthetic events.
+*/
+
+function makeNativeSimulator(eventType) {
+ return function (domComponentOrNode, nativeEventData) {
+   var fakeNativeEvent = new Event(eventType);
+   _assign(fakeNativeEvent, nativeEventData);
+   if (ReactTestUtils.isDOMComponent(domComponentOrNode)) {
+     ReactTestUtils.simulateNativeEventOnDOMComponent(eventType, domComponentOrNode, fakeNativeEvent);
+   } else if (domComponentOrNode.tagName) {
+     // Will allow on actual dom nodes.
+     ReactTestUtils.simulateNativeEventOnNode(eventType, domComponentOrNode, fakeNativeEvent);
+   }
+ };
+}
+
+Object.keys(topLevelTypes).forEach(function (eventType) {
+ // Event type is stored as 'topClick' - we transform that to 'click'
+ var convenienceName = eventType.indexOf('top') === 0 ? eventType.charAt(3).toLowerCase() + eventType.substr(4) : eventType;
+ /**
+  * @param {!Element|ReactDOMComponent} domComponentOrNode
+  * @param {?Event} nativeEventData Fake native event to use in SyntheticEvent.
+  */
+ ReactTestUtils.SimulateNative[convenienceName] = makeNativeSimulator(eventType);
+});
+
+module.exports = ReactTestUtils;
+},{"108":108,"125":125,"134":134,"150":150,"158":158,"16":16,"17":17,"18":18,"20":20,"26":26,"31":31,"34":34,"63":63,"79":79,"82":82,"91":91}],81:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var ReactCurrentOwner = _dereq_(133);
+var ReactInstanceMap = _dereq_(63);
+var ReactInstrumentation = _dereq_(64);
+var ReactUpdates = _dereq_(82);
+
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+function enqueueUpdate(internalInstance) {
+ ReactUpdates.enqueueUpdate(internalInstance);
+}
+
+function formatUnexpectedArgument(arg) {
+ var type = typeof arg;
+ if (type !== 'object') {
+   return type;
+ }
+ var displayName = arg.constructor && arg.constructor.name || type;
+ var keys = Object.keys(arg);
+ if (keys.length > 0 && keys.length < 20) {
+   return displayName + ' (keys: ' + keys.join(', ') + ')';
+ }
+ return displayName;
+}
+
+function getInternalInstanceReadyForUpdate(publicInstance, callerName) {
+ var internalInstance = ReactInstanceMap.get(publicInstance);
+ if (!internalInstance) {
+   if ("development" !== 'production') {
+     var ctor = publicInstance.constructor;
+     // Only warn when we have a callerName. Otherwise we should be silent.
+     // We're probably calling from enqueueCallback. We don't want to warn
+     // there because we already warned for the corresponding lifecycle method.
+     "development" !== 'production' ? warning(!callerName, '%s(...): Can only update a mounted or mounting component. ' + 'This usually means you called %s() on an unmounted component. ' + 'This is a no-op. Please check the code for the %s component.', callerName, callerName, ctor && (ctor.displayName || ctor.name) || 'ReactClass') : void 0;
+   }
+   return null;
+ }
+
+ if ("development" !== 'production') {
+   "development" !== 'production' ? warning(ReactCurrentOwner.current == null, '%s(...): Cannot update during an existing state transition (such as ' + 'within `render` or another component\'s constructor). Render methods ' + 'should be a pure function of props and state; constructor ' + 'side-effects are an anti-pattern, but can be moved to ' + '`componentWillMount`.', callerName) : void 0;
+ }
+
+ return internalInstance;
+}
+
+/**
+* ReactUpdateQueue allows for state updates to be scheduled into a later
+* reconciliation step.
+*/
+var ReactUpdateQueue = {
+
+ /**
+  * Checks whether or not this composite component is mounted.
+  * @param {ReactClass} publicInstance The instance we want to test.
+  * @return {boolean} True if mounted, false otherwise.
+  * @protected
+  * @final
+  */
+ isMounted: function (publicInstance) {
+   if ("development" !== 'production') {
+     var owner = ReactCurrentOwner.current;
+     if (owner !== null) {
+       "development" !== 'production' ? warning(owner._warnedAboutRefsInRender, '%s is accessing isMounted inside its render() function. ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', owner.getName() || 'A component') : void 0;
+       owner._warnedAboutRefsInRender = true;
+     }
+   }
+   var internalInstance = ReactInstanceMap.get(publicInstance);
+   if (internalInstance) {
+     // During componentWillMount and render this will still be null but after
+     // that will always render to something. At least for now. So we can use
+     // this hack.
+     return !!internalInstance._renderedComponent;
+   } else {
+     return false;
+   }
+ },
+
+ /**
+  * Enqueue a callback that will be executed after all the pending updates
+  * have processed.
+  *
+  * @param {ReactClass} publicInstance The instance to use as `this` context.
+  * @param {?function} callback Called after state is updated.
+  * @param {string} callerName Name of the calling function in the public API.
+  * @internal
+  */
+ enqueueCallback: function (publicInstance, callback, callerName) {
+   ReactUpdateQueue.validateCallback(callback, callerName);
+   var internalInstance = getInternalInstanceReadyForUpdate(publicInstance);
+
+   // Previously we would throw an error if we didn't have an internal
+   // instance. Since we want to make it a no-op instead, we mirror the same
+   // behavior we have in other enqueue* methods.
+   // We also need to ignore callbacks in componentWillMount. See
+   // enqueueUpdates.
+   if (!internalInstance) {
+     return null;
+   }
+
+   if (internalInstance._pendingCallbacks) {
+     internalInstance._pendingCallbacks.push(callback);
+   } else {
+     internalInstance._pendingCallbacks = [callback];
+   }
+   // TODO: The callback here is ignored when setState is called from
+   // componentWillMount. Either fix it or disallow doing so completely in
+   // favor of getInitialState. Alternatively, we can disallow
+   // componentWillMount during server-side rendering.
+   enqueueUpdate(internalInstance);
+ },
+
+ enqueueCallbackInternal: function (internalInstance, callback) {
+   if (internalInstance._pendingCallbacks) {
+     internalInstance._pendingCallbacks.push(callback);
+   } else {
+     internalInstance._pendingCallbacks = [callback];
+   }
+   enqueueUpdate(internalInstance);
+ },
+
+ /**
+  * Forces an update. This should only be invoked when it is known with
+  * certainty that we are **not** in a DOM transaction.
+  *
+  * You may want to call this when you know that some deeper aspect of the
+  * component's state has changed but `setState` was not called.
+  *
+  * This will not invoke `shouldComponentUpdate`, but it will invoke
+  * `componentWillUpdate` and `componentDidUpdate`.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @internal
+  */
+ enqueueForceUpdate: function (publicInstance) {
+   var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'forceUpdate');
+
+   if (!internalInstance) {
+     return;
+   }
+
+   internalInstance._pendingForceUpdate = true;
+
+   enqueueUpdate(internalInstance);
+ },
+
+ /**
+  * Replaces all of the state. Always use this or `setState` to mutate state.
+  * You should treat `this.state` as immutable.
+  *
+  * There is no guarantee that `this.state` will be immediately updated, so
+  * accessing `this.state` after calling this method may return the old value.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @param {object} completeState Next state.
+  * @internal
+  */
+ enqueueReplaceState: function (publicInstance, completeState) {
+   var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'replaceState');
+
+   if (!internalInstance) {
+     return;
+   }
+
+   internalInstance._pendingStateQueue = [completeState];
+   internalInstance._pendingReplaceState = true;
+
+   enqueueUpdate(internalInstance);
+ },
+
+ /**
+  * Sets a subset of the state. This only exists because _pendingState is
+  * internal. This provides a merging strategy that is not available to deep
+  * properties which is confusing. TODO: Expose pendingState or don't use it
+  * during the merge.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @param {object} partialState Next partial state to be merged with state.
+  * @internal
+  */
+ enqueueSetState: function (publicInstance, partialState) {
+   if ("development" !== 'production') {
+     ReactInstrumentation.debugTool.onSetState();
+     "development" !== 'production' ? warning(partialState != null, 'setState(...): You passed an undefined or null state object; ' + 'instead, use forceUpdate().') : void 0;
+   }
+
+   var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState');
+
+   if (!internalInstance) {
+     return;
+   }
+
+   var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []);
+   queue.push(partialState);
+
+   enqueueUpdate(internalInstance);
+ },
+
+ enqueueElementInternal: function (internalInstance, nextElement, nextContext) {
+   internalInstance._pendingElement = nextElement;
+   // TODO: introduce _pendingContext instead of setting it directly.
+   internalInstance._context = nextContext;
+   enqueueUpdate(internalInstance);
+ },
+
+ validateCallback: function (callback, callerName) {
+   !(!callback || typeof callback === 'function') ? "development" !== 'production' ? invariant(false, '%s(...): Expected the last optional `callback` argument to be a function. Instead received: %s.', callerName, formatUnexpectedArgument(callback)) : _prodInvariant('122', callerName, formatUnexpectedArgument(callback)) : void 0;
+ }
+
+};
+
+module.exports = ReactUpdateQueue;
+},{"125":125,"133":133,"150":150,"157":157,"63":63,"64":64,"82":82}],82:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var CallbackQueue = _dereq_(6);
+var PooledClass = _dereq_(25);
+var ReactFeatureFlags = _dereq_(58);
+var ReactReconciler = _dereq_(75);
+var Transaction = _dereq_(100);
+
+var invariant = _dereq_(150);
+
+var dirtyComponents = [];
+var updateBatchNumber = 0;
+var asapCallbackQueue = CallbackQueue.getPooled();
+var asapEnqueued = false;
+
+var batchingStrategy = null;
+
+function ensureInjected() {
+ !(ReactUpdates.ReactReconcileTransaction && batchingStrategy) ? "development" !== 'production' ? invariant(false, 'ReactUpdates: must inject a reconcile transaction class and batching strategy') : _prodInvariant('123') : void 0;
+}
+
+var NESTED_UPDATES = {
+ initialize: function () {
+   this.dirtyComponentsLength = dirtyComponents.length;
+ },
+ close: function () {
+   if (this.dirtyComponentsLength !== dirtyComponents.length) {
+     // Additional updates were enqueued by componentDidUpdate handlers or
+     // similar; before our own UPDATE_QUEUEING wrapper closes, we want to run
+     // these new updates so that if A's componentDidUpdate calls setState on
+     // B, B will update before the callback A's updater provided when calling
+     // setState.
+     dirtyComponents.splice(0, this.dirtyComponentsLength);
+     flushBatchedUpdates();
+   } else {
+     dirtyComponents.length = 0;
+   }
+ }
+};
+
+var UPDATE_QUEUEING = {
+ initialize: function () {
+   this.callbackQueue.reset();
+ },
+ close: function () {
+   this.callbackQueue.notifyAll();
+ }
+};
+
+var TRANSACTION_WRAPPERS = [NESTED_UPDATES, UPDATE_QUEUEING];
+
+function ReactUpdatesFlushTransaction() {
+ this.reinitializeTransaction();
+ this.dirtyComponentsLength = null;
+ this.callbackQueue = CallbackQueue.getPooled();
+ this.reconcileTransaction = ReactUpdates.ReactReconcileTransaction.getPooled(
+ /* useCreateElement */true);
+}
+
+_assign(ReactUpdatesFlushTransaction.prototype, Transaction, {
+ getTransactionWrappers: function () {
+   return TRANSACTION_WRAPPERS;
+ },
+
+ destructor: function () {
+   this.dirtyComponentsLength = null;
+   CallbackQueue.release(this.callbackQueue);
+   this.callbackQueue = null;
+   ReactUpdates.ReactReconcileTransaction.release(this.reconcileTransaction);
+   this.reconcileTransaction = null;
+ },
+
+ perform: function (method, scope, a) {
+   // Essentially calls `this.reconcileTransaction.perform(method, scope, a)`
+   // with this transaction's wrappers around it.
+   return Transaction.perform.call(this, this.reconcileTransaction.perform, this.reconcileTransaction, method, scope, a);
+ }
+});
+
+PooledClass.addPoolingTo(ReactUpdatesFlushTransaction);
+
+function batchedUpdates(callback, a, b, c, d, e) {
+ ensureInjected();
+ return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);
+}
+
+/**
+* Array comparator for ReactComponents by mount ordering.
+*
+* @param {ReactComponent} c1 first component you're comparing
+* @param {ReactComponent} c2 second component you're comparing
+* @return {number} Return value usable by Array.prototype.sort().
+*/
+function mountOrderComparator(c1, c2) {
+ return c1._mountOrder - c2._mountOrder;
+}
+
+function runBatchedUpdates(transaction) {
+ var len = transaction.dirtyComponentsLength;
+ !(len === dirtyComponents.length) ? "development" !== 'production' ? invariant(false, 'Expected flush transaction\'s stored dirty-components length (%s) to match dirty-components array length (%s).', len, dirtyComponents.length) : _prodInvariant('124', len, dirtyComponents.length) : void 0;
+
+ // Since reconciling a component higher in the owner hierarchy usually (not
+ // always -- see shouldComponentUpdate()) will reconcile children, reconcile
+ // them before their children by sorting the array.
+ dirtyComponents.sort(mountOrderComparator);
+
+ // Any updates enqueued while reconciling must be performed after this entire
+ // batch. Otherwise, if dirtyComponents is [A, B] where A has children B and
+ // C, B could update twice in a single batch if C's render enqueues an update
+ // to B (since B would have already updated, we should skip it, and the only
+ // way we can know to do so is by checking the batch counter).
+ updateBatchNumber++;
+
+ for (var i = 0; i < len; i++) {
+   // If a component is unmounted before pending changes apply, it will still
+   // be here, but we assume that it has cleared its _pendingCallbacks and
+   // that performUpdateIfNecessary is a noop.
+   var component = dirtyComponents[i];
+
+   // If performUpdateIfNecessary happens to enqueue any new updates, we
+   // shouldn't execute the callbacks until the next render happens, so
+   // stash the callbacks first
+   var callbacks = component._pendingCallbacks;
+   component._pendingCallbacks = null;
+
+   var markerName;
+   if (ReactFeatureFlags.logTopLevelRenders) {
+     var namedComponent = component;
+     // Duck type TopLevelWrapper. This is probably always true.
+     if (component._currentElement.type.isReactTopLevelWrapper) {
+       namedComponent = component._renderedComponent;
+     }
+     markerName = 'React update: ' + namedComponent.getName();
+     console.time(markerName);
+   }
+
+   ReactReconciler.performUpdateIfNecessary(component, transaction.reconcileTransaction, updateBatchNumber);
+
+   if (markerName) {
+     console.timeEnd(markerName);
+   }
+
+   if (callbacks) {
+     for (var j = 0; j < callbacks.length; j++) {
+       transaction.callbackQueue.enqueue(callbacks[j], component.getPublicInstance());
+     }
+   }
+ }
+}
+
+var flushBatchedUpdates = function () {
+ // ReactUpdatesFlushTransaction's wrappers will clear the dirtyComponents
+ // array and perform any updates enqueued by mount-ready handlers (i.e.,
+ // componentDidUpdate) but we need to check here too in order to catch
+ // updates enqueued by setState callbacks and asap calls.
+ while (dirtyComponents.length || asapEnqueued) {
+   if (dirtyComponents.length) {
+     var transaction = ReactUpdatesFlushTransaction.getPooled();
+     transaction.perform(runBatchedUpdates, null, transaction);
+     ReactUpdatesFlushTransaction.release(transaction);
+   }
+
+   if (asapEnqueued) {
+     asapEnqueued = false;
+     var queue = asapCallbackQueue;
+     asapCallbackQueue = CallbackQueue.getPooled();
+     queue.notifyAll();
+     CallbackQueue.release(queue);
+   }
+ }
+};
+
+/**
+* Mark a component as needing a rerender, adding an optional callback to a
+* list of functions which will be executed once the rerender occurs.
+*/
+function enqueueUpdate(component) {
+ ensureInjected();
+
+ // Various parts of our code (such as ReactCompositeComponent's
+ // _renderValidatedComponent) assume that calls to render aren't nested;
+ // verify that that's the case. (This is called by each top-level update
+ // function, like setState, forceUpdate, etc.; creation and
+ // destruction of top-level components is guarded in ReactMount.)
+
+ if (!batchingStrategy.isBatchingUpdates) {
+   batchingStrategy.batchedUpdates(enqueueUpdate, component);
+   return;
+ }
+
+ dirtyComponents.push(component);
+ if (component._updateBatchNumber == null) {
+   component._updateBatchNumber = updateBatchNumber + 1;
+ }
+}
+
+/**
+* Enqueue a callback to be run at the end of the current batching cycle. Throws
+* if no updates are currently being performed.
+*/
+function asap(callback, context) {
+ !batchingStrategy.isBatchingUpdates ? "development" !== 'production' ? invariant(false, 'ReactUpdates.asap: Can\'t enqueue an asap callback in a context whereupdates are not being batched.') : _prodInvariant('125') : void 0;
+ asapCallbackQueue.enqueue(callback, context);
+ asapEnqueued = true;
+}
+
+var ReactUpdatesInjection = {
+ injectReconcileTransaction: function (ReconcileTransaction) {
+   !ReconcileTransaction ? "development" !== 'production' ? invariant(false, 'ReactUpdates: must provide a reconcile transaction class') : _prodInvariant('126') : void 0;
+   ReactUpdates.ReactReconcileTransaction = ReconcileTransaction;
+ },
+
+ injectBatchingStrategy: function (_batchingStrategy) {
+   !_batchingStrategy ? "development" !== 'production' ? invariant(false, 'ReactUpdates: must provide a batching strategy') : _prodInvariant('127') : void 0;
+   !(typeof _batchingStrategy.batchedUpdates === 'function') ? "development" !== 'production' ? invariant(false, 'ReactUpdates: must provide a batchedUpdates() function') : _prodInvariant('128') : void 0;
+   !(typeof _batchingStrategy.isBatchingUpdates === 'boolean') ? "development" !== 'production' ? invariant(false, 'ReactUpdates: must provide an isBatchingUpdates boolean attribute') : _prodInvariant('129') : void 0;
+   batchingStrategy = _batchingStrategy;
+ }
+};
+
+var ReactUpdates = {
+ /**
+  * React references `ReactReconcileTransaction` using this property in order
+  * to allow dependency injection.
+  *
+  * @internal
+  */
+ ReactReconcileTransaction: null,
+
+ batchedUpdates: batchedUpdates,
+ enqueueUpdate: enqueueUpdate,
+ flushBatchedUpdates: flushBatchedUpdates,
+ injection: ReactUpdatesInjection,
+ asap: asap
+};
+
+module.exports = ReactUpdates;
+},{"100":100,"125":125,"150":150,"158":158,"25":25,"58":58,"6":6,"75":75}],83:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+module.exports = '15.4.1';
+},{}],84:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var NS = {
+ xlink: 'http://www.w3.org/1999/xlink',
+ xml: 'http://www.w3.org/XML/1998/namespace'
+};
+
+// We use attributes for everything SVG so let's avoid some duplication and run
+// code instead.
+// The following are all specified in the HTML config already so we exclude here.
+// - class (as className)
+// - color
+// - height
+// - id
+// - lang
+// - max
+// - media
+// - method
+// - min
+// - name
+// - style
+// - target
+// - type
+// - width
+var ATTRS = {
+ accentHeight: 'accent-height',
+ accumulate: 0,
+ additive: 0,
+ alignmentBaseline: 'alignment-baseline',
+ allowReorder: 'allowReorder',
+ alphabetic: 0,
+ amplitude: 0,
+ arabicForm: 'arabic-form',
+ ascent: 0,
+ attributeName: 'attributeName',
+ attributeType: 'attributeType',
+ autoReverse: 'autoReverse',
+ azimuth: 0,
+ baseFrequency: 'baseFrequency',
+ baseProfile: 'baseProfile',
+ baselineShift: 'baseline-shift',
+ bbox: 0,
+ begin: 0,
+ bias: 0,
+ by: 0,
+ calcMode: 'calcMode',
+ capHeight: 'cap-height',
+ clip: 0,
+ clipPath: 'clip-path',
+ clipRule: 'clip-rule',
+ clipPathUnits: 'clipPathUnits',
+ colorInterpolation: 'color-interpolation',
+ colorInterpolationFilters: 'color-interpolation-filters',
+ colorProfile: 'color-profile',
+ colorRendering: 'color-rendering',
+ contentScriptType: 'contentScriptType',
+ contentStyleType: 'contentStyleType',
+ cursor: 0,
+ cx: 0,
+ cy: 0,
+ d: 0,
+ decelerate: 0,
+ descent: 0,
+ diffuseConstant: 'diffuseConstant',
+ direction: 0,
+ display: 0,
+ divisor: 0,
+ dominantBaseline: 'dominant-baseline',
+ dur: 0,
+ dx: 0,
+ dy: 0,
+ edgeMode: 'edgeMode',
+ elevation: 0,
+ enableBackground: 'enable-background',
+ end: 0,
+ exponent: 0,
+ externalResourcesRequired: 'externalResourcesRequired',
+ fill: 0,
+ fillOpacity: 'fill-opacity',
+ fillRule: 'fill-rule',
+ filter: 0,
+ filterRes: 'filterRes',
+ filterUnits: 'filterUnits',
+ floodColor: 'flood-color',
+ floodOpacity: 'flood-opacity',
+ focusable: 0,
+ fontFamily: 'font-family',
+ fontSize: 'font-size',
+ fontSizeAdjust: 'font-size-adjust',
+ fontStretch: 'font-stretch',
+ fontStyle: 'font-style',
+ fontVariant: 'font-variant',
+ fontWeight: 'font-weight',
+ format: 0,
+ from: 0,
+ fx: 0,
+ fy: 0,
+ g1: 0,
+ g2: 0,
+ glyphName: 'glyph-name',
+ glyphOrientationHorizontal: 'glyph-orientation-horizontal',
+ glyphOrientationVertical: 'glyph-orientation-vertical',
+ glyphRef: 'glyphRef',
+ gradientTransform: 'gradientTransform',
+ gradientUnits: 'gradientUnits',
+ hanging: 0,
+ horizAdvX: 'horiz-adv-x',
+ horizOriginX: 'horiz-origin-x',
+ ideographic: 0,
+ imageRendering: 'image-rendering',
+ 'in': 0,
+ in2: 0,
+ intercept: 0,
+ k: 0,
+ k1: 0,
+ k2: 0,
+ k3: 0,
+ k4: 0,
+ kernelMatrix: 'kernelMatrix',
+ kernelUnitLength: 'kernelUnitLength',
+ kerning: 0,
+ keyPoints: 'keyPoints',
+ keySplines: 'keySplines',
+ keyTimes: 'keyTimes',
+ lengthAdjust: 'lengthAdjust',
+ letterSpacing: 'letter-spacing',
+ lightingColor: 'lighting-color',
+ limitingConeAngle: 'limitingConeAngle',
+ local: 0,
+ markerEnd: 'marker-end',
+ markerMid: 'marker-mid',
+ markerStart: 'marker-start',
+ markerHeight: 'markerHeight',
+ markerUnits: 'markerUnits',
+ markerWidth: 'markerWidth',
+ mask: 0,
+ maskContentUnits: 'maskContentUnits',
+ maskUnits: 'maskUnits',
+ mathematical: 0,
+ mode: 0,
+ numOctaves: 'numOctaves',
+ offset: 0,
+ opacity: 0,
+ operator: 0,
+ order: 0,
+ orient: 0,
+ orientation: 0,
+ origin: 0,
+ overflow: 0,
+ overlinePosition: 'overline-position',
+ overlineThickness: 'overline-thickness',
+ paintOrder: 'paint-order',
+ panose1: 'panose-1',
+ pathLength: 'pathLength',
+ patternContentUnits: 'patternContentUnits',
+ patternTransform: 'patternTransform',
+ patternUnits: 'patternUnits',
+ pointerEvents: 'pointer-events',
+ points: 0,
+ pointsAtX: 'pointsAtX',
+ pointsAtY: 'pointsAtY',
+ pointsAtZ: 'pointsAtZ',
+ preserveAlpha: 'preserveAlpha',
+ preserveAspectRatio: 'preserveAspectRatio',
+ primitiveUnits: 'primitiveUnits',
+ r: 0,
+ radius: 0,
+ refX: 'refX',
+ refY: 'refY',
+ renderingIntent: 'rendering-intent',
+ repeatCount: 'repeatCount',
+ repeatDur: 'repeatDur',
+ requiredExtensions: 'requiredExtensions',
+ requiredFeatures: 'requiredFeatures',
+ restart: 0,
+ result: 0,
+ rotate: 0,
+ rx: 0,
+ ry: 0,
+ scale: 0,
+ seed: 0,
+ shapeRendering: 'shape-rendering',
+ slope: 0,
+ spacing: 0,
+ specularConstant: 'specularConstant',
+ specularExponent: 'specularExponent',
+ speed: 0,
+ spreadMethod: 'spreadMethod',
+ startOffset: 'startOffset',
+ stdDeviation: 'stdDeviation',
+ stemh: 0,
+ stemv: 0,
+ stitchTiles: 'stitchTiles',
+ stopColor: 'stop-color',
+ stopOpacity: 'stop-opacity',
+ strikethroughPosition: 'strikethrough-position',
+ strikethroughThickness: 'strikethrough-thickness',
+ string: 0,
+ stroke: 0,
+ strokeDasharray: 'stroke-dasharray',
+ strokeDashoffset: 'stroke-dashoffset',
+ strokeLinecap: 'stroke-linecap',
+ strokeLinejoin: 'stroke-linejoin',
+ strokeMiterlimit: 'stroke-miterlimit',
+ strokeOpacity: 'stroke-opacity',
+ strokeWidth: 'stroke-width',
+ surfaceScale: 'surfaceScale',
+ systemLanguage: 'systemLanguage',
+ tableValues: 'tableValues',
+ targetX: 'targetX',
+ targetY: 'targetY',
+ textAnchor: 'text-anchor',
+ textDecoration: 'text-decoration',
+ textRendering: 'text-rendering',
+ textLength: 'textLength',
+ to: 0,
+ transform: 0,
+ u1: 0,
+ u2: 0,
+ underlinePosition: 'underline-position',
+ underlineThickness: 'underline-thickness',
+ unicode: 0,
+ unicodeBidi: 'unicode-bidi',
+ unicodeRange: 'unicode-range',
+ unitsPerEm: 'units-per-em',
+ vAlphabetic: 'v-alphabetic',
+ vHanging: 'v-hanging',
+ vIdeographic: 'v-ideographic',
+ vMathematical: 'v-mathematical',
+ values: 0,
+ vectorEffect: 'vector-effect',
+ version: 0,
+ vertAdvY: 'vert-adv-y',
+ vertOriginX: 'vert-origin-x',
+ vertOriginY: 'vert-origin-y',
+ viewBox: 'viewBox',
+ viewTarget: 'viewTarget',
+ visibility: 0,
+ widths: 0,
+ wordSpacing: 'word-spacing',
+ writingMode: 'writing-mode',
+ x: 0,
+ xHeight: 'x-height',
+ x1: 0,
+ x2: 0,
+ xChannelSelector: 'xChannelSelector',
+ xlinkActuate: 'xlink:actuate',
+ xlinkArcrole: 'xlink:arcrole',
+ xlinkHref: 'xlink:href',
+ xlinkRole: 'xlink:role',
+ xlinkShow: 'xlink:show',
+ xlinkTitle: 'xlink:title',
+ xlinkType: 'xlink:type',
+ xmlBase: 'xml:base',
+ xmlns: 0,
+ xmlnsXlink: 'xmlns:xlink',
+ xmlLang: 'xml:lang',
+ xmlSpace: 'xml:space',
+ y: 0,
+ y1: 0,
+ y2: 0,
+ yChannelSelector: 'yChannelSelector',
+ z: 0,
+ zoomAndPan: 'zoomAndPan'
+};
+
+var SVGDOMPropertyConfig = {
+ Properties: {},
+ DOMAttributeNamespaces: {
+   xlinkActuate: NS.xlink,
+   xlinkArcrole: NS.xlink,
+   xlinkHref: NS.xlink,
+   xlinkRole: NS.xlink,
+   xlinkShow: NS.xlink,
+   xlinkTitle: NS.xlink,
+   xlinkType: NS.xlink,
+   xmlBase: NS.xml,
+   xmlLang: NS.xml,
+   xmlSpace: NS.xml
+ },
+ DOMAttributeNames: {}
+};
+
+Object.keys(ATTRS).forEach(function (key) {
+ SVGDOMPropertyConfig.Properties[key] = 0;
+ if (ATTRS[key]) {
+   SVGDOMPropertyConfig.DOMAttributeNames[key] = ATTRS[key];
+ }
+});
+
+module.exports = SVGDOMPropertyConfig;
+},{}],85:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var EventPropagators = _dereq_(20);
+var ExecutionEnvironment = _dereq_(136);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactInputSelection = _dereq_(62);
+var SyntheticEvent = _dereq_(91);
+
+var getActiveElement = _dereq_(145);
+var isTextInputElement = _dereq_(123);
+var shallowEqual = _dereq_(156);
+
+var skipSelectionChangeEvent = ExecutionEnvironment.canUseDOM && 'documentMode' in document && document.documentMode <= 11;
+
+var eventTypes = {
+ select: {
+   phasedRegistrationNames: {
+     bubbled: 'onSelect',
+     captured: 'onSelectCapture'
+   },
+   dependencies: ['topBlur', 'topContextMenu', 'topFocus', 'topKeyDown', 'topKeyUp', 'topMouseDown', 'topMouseUp', 'topSelectionChange']
+ }
+};
+
+var activeElement = null;
+var activeElementInst = null;
+var lastSelection = null;
+var mouseDown = false;
+
+// Track whether a listener exists for this plugin. If none exist, we do
+// not extract events. See #3639.
+var hasListener = false;
+
+/**
+* Get an object which is a unique representation of the current selection.
+*
+* The return value will not be consistent across nodes or browsers, but
+* two identical selections on the same node will return identical objects.
+*
+* @param {DOMElement} node
+* @return {object}
+*/
+function getSelection(node) {
+ if ('selectionStart' in node && ReactInputSelection.hasSelectionCapabilities(node)) {
+   return {
+     start: node.selectionStart,
+     end: node.selectionEnd
+   };
+ } else if (window.getSelection) {
+   var selection = window.getSelection();
+   return {
+     anchorNode: selection.anchorNode,
+     anchorOffset: selection.anchorOffset,
+     focusNode: selection.focusNode,
+     focusOffset: selection.focusOffset
+   };
+ } else if (document.selection) {
+   var range = document.selection.createRange();
+   return {
+     parentElement: range.parentElement(),
+     text: range.text,
+     top: range.boundingTop,
+     left: range.boundingLeft
+   };
+ }
+}
+
+/**
+* Poll selection to see whether it's changed.
+*
+* @param {object} nativeEvent
+* @return {?SyntheticEvent}
+*/
+function constructSelectEvent(nativeEvent, nativeEventTarget) {
+ // Ensure we have the right element, and that the user is not dragging a
+ // selection (this matches native `select` event behavior). In HTML5, select
+ // fires only on input and textarea thus if there's no focused element we
+ // won't dispatch.
+ if (mouseDown || activeElement == null || activeElement !== getActiveElement()) {
+   return null;
+ }
+
+ // Only fire when selection has actually changed.
+ var currentSelection = getSelection(activeElement);
+ if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
+   lastSelection = currentSelection;
+
+   var syntheticEvent = SyntheticEvent.getPooled(eventTypes.select, activeElementInst, nativeEvent, nativeEventTarget);
+
+   syntheticEvent.type = 'select';
+   syntheticEvent.target = activeElement;
+
+   EventPropagators.accumulateTwoPhaseDispatches(syntheticEvent);
+
+   return syntheticEvent;
+ }
+
+ return null;
+}
+
+/**
+* This plugin creates an `onSelect` event that normalizes select events
+* across form elements.
+*
+* Supported elements are:
+* - input (see `isTextInputElement`)
+* - textarea
+* - contentEditable
+*
+* This differs from native browser implementations in the following ways:
+* - Fires on contentEditable fields as well as inputs.
+* - Fires for collapsed selection.
+* - Fires after user input.
+*/
+var SelectEventPlugin = {
+
+ eventTypes: eventTypes,
+
+ extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+   if (!hasListener) {
+     return null;
+   }
+
+   var targetNode = targetInst ? ReactDOMComponentTree.getNodeFromInstance(targetInst) : window;
+
+   switch (topLevelType) {
+     // Track the input node that has focus.
+     case 'topFocus':
+       if (isTextInputElement(targetNode) || targetNode.contentEditable === 'true') {
+         activeElement = targetNode;
+         activeElementInst = targetInst;
+         lastSelection = null;
+       }
+       break;
+     case 'topBlur':
+       activeElement = null;
+       activeElementInst = null;
+       lastSelection = null;
+       break;
+
+     // Don't fire the event while the user is dragging. This matches the
+     // semantics of the native select event.
+     case 'topMouseDown':
+       mouseDown = true;
+       break;
+     case 'topContextMenu':
+     case 'topMouseUp':
+       mouseDown = false;
+       return constructSelectEvent(nativeEvent, nativeEventTarget);
+
+     // Chrome and IE fire non-standard event when selection is changed (and
+     // sometimes when it hasn't). IE's event fires out of order with respect
+     // to key and input events on deletion, so we discard it.
+     //
+     // Firefox doesn't support selectionchange, so check selection status
+     // after each key entry. The selection changes after keydown and before
+     // keyup, but we check on keydown as well in the case of holding down a
+     // key, when multiple keydown events are fired but only one keyup is.
+     // This is also our approach for IE handling, for the reason above.
+     case 'topSelectionChange':
+       if (skipSelectionChangeEvent) {
+         break;
+       }
+     // falls through
+     case 'topKeyDown':
+     case 'topKeyUp':
+       return constructSelectEvent(nativeEvent, nativeEventTarget);
+   }
+
+   return null;
+ },
+
+ didPutListener: function (inst, registrationName, listener) {
+   if (registrationName === 'onSelect') {
+     hasListener = true;
+   }
+ }
+};
+
+module.exports = SelectEventPlugin;
+},{"123":123,"136":136,"145":145,"156":156,"20":20,"34":34,"62":62,"91":91}],86:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var EventListener = _dereq_(135);
+var EventPropagators = _dereq_(20);
+var ReactDOMComponentTree = _dereq_(34);
+var SyntheticAnimationEvent = _dereq_(87);
+var SyntheticClipboardEvent = _dereq_(88);
+var SyntheticEvent = _dereq_(91);
+var SyntheticFocusEvent = _dereq_(92);
+var SyntheticKeyboardEvent = _dereq_(94);
+var SyntheticMouseEvent = _dereq_(95);
+var SyntheticDragEvent = _dereq_(90);
+var SyntheticTouchEvent = _dereq_(96);
+var SyntheticTransitionEvent = _dereq_(97);
+var SyntheticUIEvent = _dereq_(98);
+var SyntheticWheelEvent = _dereq_(99);
+
+var emptyFunction = _dereq_(142);
+var getEventCharCode = _dereq_(111);
+var invariant = _dereq_(150);
+
+/**
+* Turns
+* ['abort', ...]
+* into
+* eventTypes = {
+*   'abort': {
+*     phasedRegistrationNames: {
+*       bubbled: 'onAbort',
+*       captured: 'onAbortCapture',
+*     },
+*     dependencies: ['topAbort'],
+*   },
+*   ...
+* };
+* topLevelEventsToDispatchConfig = {
+*   'topAbort': { sameConfig }
+* };
+*/
+var eventTypes = {};
+var topLevelEventsToDispatchConfig = {};
+['abort', 'animationEnd', 'animationIteration', 'animationStart', 'blur', 'canPlay', 'canPlayThrough', 'click', 'contextMenu', 'copy', 'cut', 'doubleClick', 'drag', 'dragEnd', 'dragEnter', 'dragExit', 'dragLeave', 'dragOver', 'dragStart', 'drop', 'durationChange', 'emptied', 'encrypted', 'ended', 'error', 'focus', 'input', 'invalid', 'keyDown', 'keyPress', 'keyUp', 'load', 'loadedData', 'loadedMetadata', 'loadStart', 'mouseDown', 'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'paste', 'pause', 'play', 'playing', 'progress', 'rateChange', 'reset', 'scroll', 'seeked', 'seeking', 'stalled', 'submit', 'suspend', 'timeUpdate', 'touchCancel', 'touchEnd', 'touchMove', 'touchStart', 'transitionEnd', 'volumeChange', 'waiting', 'wheel'].forEach(function (event) {
+ var capitalizedEvent = event[0].toUpperCase() + event.slice(1);
+ var onEvent = 'on' + capitalizedEvent;
+ var topEvent = 'top' + capitalizedEvent;
+
+ var type = {
+   phasedRegistrationNames: {
+     bubbled: onEvent,
+     captured: onEvent + 'Capture'
+   },
+   dependencies: [topEvent]
+ };
+ eventTypes[event] = type;
+ topLevelEventsToDispatchConfig[topEvent] = type;
+});
+
+var onClickListeners = {};
+
+function getDictionaryKey(inst) {
+ // Prevents V8 performance issue:
+ // https://github.com/facebook/react/pull/7232
+ return '.' + inst._rootNodeID;
+}
+
+function isInteractive(tag) {
+ return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';
+}
+
+var SimpleEventPlugin = {
+
+ eventTypes: eventTypes,
+
+ extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+   var dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];
+   if (!dispatchConfig) {
+     return null;
+   }
+   var EventConstructor;
+   switch (topLevelType) {
+     case 'topAbort':
+     case 'topCanPlay':
+     case 'topCanPlayThrough':
+     case 'topDurationChange':
+     case 'topEmptied':
+     case 'topEncrypted':
+     case 'topEnded':
+     case 'topError':
+     case 'topInput':
+     case 'topInvalid':
+     case 'topLoad':
+     case 'topLoadedData':
+     case 'topLoadedMetadata':
+     case 'topLoadStart':
+     case 'topPause':
+     case 'topPlay':
+     case 'topPlaying':
+     case 'topProgress':
+     case 'topRateChange':
+     case 'topReset':
+     case 'topSeeked':
+     case 'topSeeking':
+     case 'topStalled':
+     case 'topSubmit':
+     case 'topSuspend':
+     case 'topTimeUpdate':
+     case 'topVolumeChange':
+     case 'topWaiting':
+       // HTML Events
+       // @see http://www.w3.org/TR/html5/index.html#events-0
+       EventConstructor = SyntheticEvent;
+       break;
+     case 'topKeyPress':
+       // Firefox creates a keypress event for function keys too. This removes
+       // the unwanted keypress events. Enter is however both printable and
+       // non-printable. One would expect Tab to be as well (but it isn't).
+       if (getEventCharCode(nativeEvent) === 0) {
+         return null;
+       }
+     /* falls through */
+     case 'topKeyDown':
+     case 'topKeyUp':
+       EventConstructor = SyntheticKeyboardEvent;
+       break;
+     case 'topBlur':
+     case 'topFocus':
+       EventConstructor = SyntheticFocusEvent;
+       break;
+     case 'topClick':
+       // Firefox creates a click event on right mouse clicks. This removes the
+       // unwanted click events.
+       if (nativeEvent.button === 2) {
+         return null;
+       }
+     /* falls through */
+     case 'topDoubleClick':
+     case 'topMouseDown':
+     case 'topMouseMove':
+     case 'topMouseUp':
+     // TODO: Disabled elements should not respond to mouse events
+     /* falls through */
+     case 'topMouseOut':
+     case 'topMouseOver':
+     case 'topContextMenu':
+       EventConstructor = SyntheticMouseEvent;
+       break;
+     case 'topDrag':
+     case 'topDragEnd':
+     case 'topDragEnter':
+     case 'topDragExit':
+     case 'topDragLeave':
+     case 'topDragOver':
+     case 'topDragStart':
+     case 'topDrop':
+       EventConstructor = SyntheticDragEvent;
+       break;
+     case 'topTouchCancel':
+     case 'topTouchEnd':
+     case 'topTouchMove':
+     case 'topTouchStart':
+       EventConstructor = SyntheticTouchEvent;
+       break;
+     case 'topAnimationEnd':
+     case 'topAnimationIteration':
+     case 'topAnimationStart':
+       EventConstructor = SyntheticAnimationEvent;
+       break;
+     case 'topTransitionEnd':
+       EventConstructor = SyntheticTransitionEvent;
+       break;
+     case 'topScroll':
+       EventConstructor = SyntheticUIEvent;
+       break;
+     case 'topWheel':
+       EventConstructor = SyntheticWheelEvent;
+       break;
+     case 'topCopy':
+     case 'topCut':
+     case 'topPaste':
+       EventConstructor = SyntheticClipboardEvent;
+       break;
+   }
+   !EventConstructor ? "development" !== 'production' ? invariant(false, 'SimpleEventPlugin: Unhandled event type, `%s`.', topLevelType) : _prodInvariant('86', topLevelType) : void 0;
+   var event = EventConstructor.getPooled(dispatchConfig, targetInst, nativeEvent, nativeEventTarget);
+   EventPropagators.accumulateTwoPhaseDispatches(event);
+   return event;
+ },
+
+ didPutListener: function (inst, registrationName, listener) {
+   // Mobile Safari does not fire properly bubble click events on
+   // non-interactive elements, which means delegated click listeners do not
+   // fire. The workaround for this bug involves attaching an empty click
+   // listener on the target node.
+   // http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+   if (registrationName === 'onClick' && !isInteractive(inst._tag)) {
+     var key = getDictionaryKey(inst);
+     var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+     if (!onClickListeners[key]) {
+       onClickListeners[key] = EventListener.listen(node, 'click', emptyFunction);
+     }
+   }
+ },
+
+ willDeleteListener: function (inst, registrationName) {
+   if (registrationName === 'onClick' && !isInteractive(inst._tag)) {
+     var key = getDictionaryKey(inst);
+     onClickListeners[key].remove();
+     delete onClickListeners[key];
+   }
+ }
+
+};
+
+module.exports = SimpleEventPlugin;
+},{"111":111,"125":125,"135":135,"142":142,"150":150,"20":20,"34":34,"87":87,"88":88,"90":90,"91":91,"92":92,"94":94,"95":95,"96":96,"97":97,"98":98,"99":99}],87:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticEvent = _dereq_(91);
+
+/**
+* @interface Event
+* @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
+* @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
+*/
+var AnimationEventInterface = {
+ animationName: null,
+ elapsedTime: null,
+ pseudoElement: null
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticEvent}
+*/
+function SyntheticAnimationEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticEvent.augmentClass(SyntheticAnimationEvent, AnimationEventInterface);
+
+module.exports = SyntheticAnimationEvent;
+},{"91":91}],88:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticEvent = _dereq_(91);
+
+/**
+* @interface Event
+* @see http://www.w3.org/TR/clipboard-apis/
+*/
+var ClipboardEventInterface = {
+ clipboardData: function (event) {
+   return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
+ }
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticClipboardEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticEvent.augmentClass(SyntheticClipboardEvent, ClipboardEventInterface);
+
+module.exports = SyntheticClipboardEvent;
+},{"91":91}],89:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticEvent = _dereq_(91);
+
+/**
+* @interface Event
+* @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
+*/
+var CompositionEventInterface = {
+ data: null
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticCompositionEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticEvent.augmentClass(SyntheticCompositionEvent, CompositionEventInterface);
+
+module.exports = SyntheticCompositionEvent;
+},{"91":91}],90:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticMouseEvent = _dereq_(95);
+
+/**
+* @interface DragEvent
+* @see http://www.w3.org/TR/DOM-Level-3-Events/
+*/
+var DragEventInterface = {
+ dataTransfer: null
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticDragEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticMouseEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticMouseEvent.augmentClass(SyntheticDragEvent, DragEventInterface);
+
+module.exports = SyntheticDragEvent;
+},{"95":95}],91:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var PooledClass = _dereq_(25);
+
+var emptyFunction = _dereq_(142);
+var warning = _dereq_(157);
+
+var didWarnForAddedNewProperty = false;
+var isProxySupported = typeof Proxy === 'function';
+
+var shouldBeReleasedProperties = ['dispatchConfig', '_targetInst', 'nativeEvent', 'isDefaultPrevented', 'isPropagationStopped', '_dispatchListeners', '_dispatchInstances'];
+
+/**
+* @interface Event
+* @see http://www.w3.org/TR/DOM-Level-3-Events/
+*/
+var EventInterface = {
+ type: null,
+ target: null,
+ // currentTarget is set when dispatching; no use in copying it here
+ currentTarget: emptyFunction.thatReturnsNull,
+ eventPhase: null,
+ bubbles: null,
+ cancelable: null,
+ timeStamp: function (event) {
+   return event.timeStamp || Date.now();
+ },
+ defaultPrevented: null,
+ isTrusted: null
+};
+
+/**
+* Synthetic events are dispatched by event plugins, typically in response to a
+* top-level event delegation handler.
+*
+* These systems should generally use pooling to reduce the frequency of garbage
+* collection. The system should check `isPersistent` to determine whether the
+* event should be released into the pool after being dispatched. Users that
+* need a persisted event should invoke `persist`.
+*
+* Synthetic events (and subclasses) implement the DOM Level 3 Events API by
+* normalizing browser quirks. Subclasses do not necessarily have to implement a
+* DOM interface; custom application-specific events can also subclass this.
+*
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {*} targetInst Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @param {DOMEventTarget} nativeEventTarget Target node.
+*/
+function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {
+ if ("development" !== 'production') {
+   // these have a getter/setter for warnings
+   delete this.nativeEvent;
+   delete this.preventDefault;
+   delete this.stopPropagation;
+ }
+
+ this.dispatchConfig = dispatchConfig;
+ this._targetInst = targetInst;
+ this.nativeEvent = nativeEvent;
+
+ var Interface = this.constructor.Interface;
+ for (var propName in Interface) {
+   if (!Interface.hasOwnProperty(propName)) {
+     continue;
+   }
+   if ("development" !== 'production') {
+     delete this[propName]; // this has a getter/setter for warnings
+   }
+   var normalize = Interface[propName];
+   if (normalize) {
+     this[propName] = normalize(nativeEvent);
+   } else {
+     if (propName === 'target') {
+       this.target = nativeEventTarget;
+     } else {
+       this[propName] = nativeEvent[propName];
+     }
+   }
+ }
+
+ var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;
+ if (defaultPrevented) {
+   this.isDefaultPrevented = emptyFunction.thatReturnsTrue;
+ } else {
+   this.isDefaultPrevented = emptyFunction.thatReturnsFalse;
+ }
+ this.isPropagationStopped = emptyFunction.thatReturnsFalse;
+ return this;
+}
+
+_assign(SyntheticEvent.prototype, {
+
+ preventDefault: function () {
+   this.defaultPrevented = true;
+   var event = this.nativeEvent;
+   if (!event) {
+     return;
+   }
+
+   if (event.preventDefault) {
+     event.preventDefault();
+   } else if (typeof event.returnValue !== 'unknown') {
+     // eslint-disable-line valid-typeof
+     event.returnValue = false;
+   }
+   this.isDefaultPrevented = emptyFunction.thatReturnsTrue;
+ },
+
+ stopPropagation: function () {
+   var event = this.nativeEvent;
+   if (!event) {
+     return;
+   }
+
+   if (event.stopPropagation) {
+     event.stopPropagation();
+   } else if (typeof event.cancelBubble !== 'unknown') {
+     // eslint-disable-line valid-typeof
+     // The ChangeEventPlugin registers a "propertychange" event for
+     // IE. This event does not support bubbling or cancelling, and
+     // any references to cancelBubble throw "Member not found".  A
+     // typeof check of "unknown" circumvents this issue (and is also
+     // IE specific).
+     event.cancelBubble = true;
+   }
+
+   this.isPropagationStopped = emptyFunction.thatReturnsTrue;
+ },
+
+ /**
+  * We release all dispatched `SyntheticEvent`s after each event loop, adding
+  * them back into the pool. This allows a way to hold onto a reference that
+  * won't be added back into the pool.
+  */
+ persist: function () {
+   this.isPersistent = emptyFunction.thatReturnsTrue;
+ },
+
+ /**
+  * Checks if this event should be released back into the pool.
+  *
+  * @return {boolean} True if this should not be released, false otherwise.
+  */
+ isPersistent: emptyFunction.thatReturnsFalse,
+
+ /**
+  * `PooledClass` looks for `destructor` on each instance it releases.
+  */
+ destructor: function () {
+   var Interface = this.constructor.Interface;
+   for (var propName in Interface) {
+     if ("development" !== 'production') {
+       Object.defineProperty(this, propName, getPooledWarningPropertyDefinition(propName, Interface[propName]));
+     } else {
+       this[propName] = null;
+     }
+   }
+   for (var i = 0; i < shouldBeReleasedProperties.length; i++) {
+     this[shouldBeReleasedProperties[i]] = null;
+   }
+   if ("development" !== 'production') {
+     Object.defineProperty(this, 'nativeEvent', getPooledWarningPropertyDefinition('nativeEvent', null));
+     Object.defineProperty(this, 'preventDefault', getPooledWarningPropertyDefinition('preventDefault', emptyFunction));
+     Object.defineProperty(this, 'stopPropagation', getPooledWarningPropertyDefinition('stopPropagation', emptyFunction));
+   }
+ }
+
+});
+
+SyntheticEvent.Interface = EventInterface;
+
+if ("development" !== 'production') {
+ if (isProxySupported) {
+   /*eslint-disable no-func-assign */
+   SyntheticEvent = new Proxy(SyntheticEvent, {
+     construct: function (target, args) {
+       return this.apply(target, Object.create(target.prototype), args);
+     },
+     apply: function (constructor, that, args) {
+       return new Proxy(constructor.apply(that, args), {
+         set: function (target, prop, value) {
+           if (prop !== 'isPersistent' && !target.constructor.Interface.hasOwnProperty(prop) && shouldBeReleasedProperties.indexOf(prop) === -1) {
+             "development" !== 'production' ? warning(didWarnForAddedNewProperty || target.isPersistent(), 'This synthetic event is reused for performance reasons. If you\'re ' + 'seeing this, you\'re adding a new property in the synthetic event object. ' + 'The property is never released. See ' + 'https://fb.me/react-event-pooling for more information.') : void 0;
+             didWarnForAddedNewProperty = true;
+           }
+           target[prop] = value;
+           return true;
+         }
+       });
+     }
+   });
+   /*eslint-enable no-func-assign */
+ }
+}
+/**
+* Helper to reduce boilerplate when creating subclasses.
+*
+* @param {function} Class
+* @param {?object} Interface
+*/
+SyntheticEvent.augmentClass = function (Class, Interface) {
+ var Super = this;
+
+ var E = function () {};
+ E.prototype = Super.prototype;
+ var prototype = new E();
+
+ _assign(prototype, Class.prototype);
+ Class.prototype = prototype;
+ Class.prototype.constructor = Class;
+
+ Class.Interface = _assign({}, Super.Interface, Interface);
+ Class.augmentClass = Super.augmentClass;
+
+ PooledClass.addPoolingTo(Class, PooledClass.fourArgumentPooler);
+};
+
+PooledClass.addPoolingTo(SyntheticEvent, PooledClass.fourArgumentPooler);
+
+module.exports = SyntheticEvent;
+
+/**
+ * Helper to nullify syntheticEvent instance properties when destructing
+ *
+ * @param {object} SyntheticEvent
+ * @param {String} propName
+ * @return {object} defineProperty object
+ */
+function getPooledWarningPropertyDefinition(propName, getVal) {
+ var isFunction = typeof getVal === 'function';
+ return {
+   configurable: true,
+   set: set,
+   get: get
+ };
+
+ function set(val) {
+   var action = isFunction ? 'setting the method' : 'setting the property';
+   warn(action, 'This is effectively a no-op');
+   return val;
+ }
+
+ function get() {
+   var action = isFunction ? 'accessing the method' : 'accessing the property';
+   var result = isFunction ? 'This is a no-op function' : 'This is set to null';
+   warn(action, result);
+   return getVal;
+ }
+
+ function warn(action, result) {
+   var warningCondition = false;
+   "development" !== 'production' ? warning(warningCondition, 'This synthetic event is reused for performance reasons. If you\'re seeing this, ' + 'you\'re %s `%s` on a released/nullified synthetic event. %s. ' + 'If you must keep the original synthetic event around, use event.persist(). ' + 'See https://fb.me/react-event-pooling for more information.', action, propName, result) : void 0;
+ }
+}
+},{"142":142,"157":157,"158":158,"25":25}],92:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticUIEvent = _dereq_(98);
+
+/**
+* @interface FocusEvent
+* @see http://www.w3.org/TR/DOM-Level-3-Events/
+*/
+var FocusEventInterface = {
+ relatedTarget: null
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticFocusEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticUIEvent.augmentClass(SyntheticFocusEvent, FocusEventInterface);
+
+module.exports = SyntheticFocusEvent;
+},{"98":98}],93:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticEvent = _dereq_(91);
+
+/**
+* @interface Event
+* @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
+*      /#events-inputevents
+*/
+var InputEventInterface = {
+ data: null
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticInputEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticEvent.augmentClass(SyntheticInputEvent, InputEventInterface);
+
+module.exports = SyntheticInputEvent;
+},{"91":91}],94:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticUIEvent = _dereq_(98);
+
+var getEventCharCode = _dereq_(111);
+var getEventKey = _dereq_(112);
+var getEventModifierState = _dereq_(113);
+
+/**
+* @interface KeyboardEvent
+* @see http://www.w3.org/TR/DOM-Level-3-Events/
+*/
+var KeyboardEventInterface = {
+ key: getEventKey,
+ location: null,
+ ctrlKey: null,
+ shiftKey: null,
+ altKey: null,
+ metaKey: null,
+ repeat: null,
+ locale: null,
+ getModifierState: getEventModifierState,
+ // Legacy Interface
+ charCode: function (event) {
+   // `charCode` is the result of a KeyPress event and represents the value of
+   // the actual printable character.
+
+   // KeyPress is deprecated, but its replacement is not yet final and not
+   // implemented in any major browser. Only KeyPress has charCode.
+   if (event.type === 'keypress') {
+     return getEventCharCode(event);
+   }
+   return 0;
+ },
+ keyCode: function (event) {
+   // `keyCode` is the result of a KeyDown/Up event and represents the value of
+   // physical keyboard key.
+
+   // The actual meaning of the value depends on the users' keyboard layout
+   // which cannot be detected. Assuming that it is a US keyboard layout
+   // provides a surprisingly accurate mapping for US and European users.
+   // Due to this, it is left to the user to implement at this time.
+   if (event.type === 'keydown' || event.type === 'keyup') {
+     return event.keyCode;
+   }
+   return 0;
+ },
+ which: function (event) {
+   // `which` is an alias for either `keyCode` or `charCode` depending on the
+   // type of the event.
+   if (event.type === 'keypress') {
+     return getEventCharCode(event);
+   }
+   if (event.type === 'keydown' || event.type === 'keyup') {
+     return event.keyCode;
+   }
+   return 0;
+ }
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticKeyboardEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticUIEvent.augmentClass(SyntheticKeyboardEvent, KeyboardEventInterface);
+
+module.exports = SyntheticKeyboardEvent;
+},{"111":111,"112":112,"113":113,"98":98}],95:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticUIEvent = _dereq_(98);
+var ViewportMetrics = _dereq_(101);
+
+var getEventModifierState = _dereq_(113);
+
+/**
+* @interface MouseEvent
+* @see http://www.w3.org/TR/DOM-Level-3-Events/
+*/
+var MouseEventInterface = {
+ screenX: null,
+ screenY: null,
+ clientX: null,
+ clientY: null,
+ ctrlKey: null,
+ shiftKey: null,
+ altKey: null,
+ metaKey: null,
+ getModifierState: getEventModifierState,
+ button: function (event) {
+   // Webkit, Firefox, IE9+
+   // which:  1 2 3
+   // button: 0 1 2 (standard)
+   var button = event.button;
+   if ('which' in event) {
+     return button;
+   }
+   // IE<9
+   // which:  undefined
+   // button: 0 0 0
+   // button: 1 4 2 (onmouseup)
+   return button === 2 ? 2 : button === 4 ? 1 : 0;
+ },
+ buttons: null,
+ relatedTarget: function (event) {
+   return event.relatedTarget || (event.fromElement === event.srcElement ? event.toElement : event.fromElement);
+ },
+ // "Proprietary" Interface.
+ pageX: function (event) {
+   return 'pageX' in event ? event.pageX : event.clientX + ViewportMetrics.currentScrollLeft;
+ },
+ pageY: function (event) {
+   return 'pageY' in event ? event.pageY : event.clientY + ViewportMetrics.currentScrollTop;
+ }
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticMouseEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticUIEvent.augmentClass(SyntheticMouseEvent, MouseEventInterface);
+
+module.exports = SyntheticMouseEvent;
+},{"101":101,"113":113,"98":98}],96:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticUIEvent = _dereq_(98);
+
+var getEventModifierState = _dereq_(113);
+
+/**
+* @interface TouchEvent
+* @see http://www.w3.org/TR/touch-events/
+*/
+var TouchEventInterface = {
+ touches: null,
+ targetTouches: null,
+ changedTouches: null,
+ altKey: null,
+ metaKey: null,
+ ctrlKey: null,
+ shiftKey: null,
+ getModifierState: getEventModifierState
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticUIEvent}
+*/
+function SyntheticTouchEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticUIEvent.augmentClass(SyntheticTouchEvent, TouchEventInterface);
+
+module.exports = SyntheticTouchEvent;
+},{"113":113,"98":98}],97:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticEvent = _dereq_(91);
+
+/**
+* @interface Event
+* @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
+* @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
+*/
+var TransitionEventInterface = {
+ propertyName: null,
+ elapsedTime: null,
+ pseudoElement: null
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticEvent}
+*/
+function SyntheticTransitionEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticEvent.augmentClass(SyntheticTransitionEvent, TransitionEventInterface);
+
+module.exports = SyntheticTransitionEvent;
+},{"91":91}],98:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticEvent = _dereq_(91);
+
+var getEventTarget = _dereq_(114);
+
+/**
+* @interface UIEvent
+* @see http://www.w3.org/TR/DOM-Level-3-Events/
+*/
+var UIEventInterface = {
+ view: function (event) {
+   if (event.view) {
+     return event.view;
+   }
+
+   var target = getEventTarget(event);
+   if (target.window === target) {
+     // target is a window object
+     return target;
+   }
+
+   var doc = target.ownerDocument;
+   // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
+   if (doc) {
+     return doc.defaultView || doc.parentWindow;
+   } else {
+     return window;
+   }
+ },
+ detail: function (event) {
+   return event.detail || 0;
+ }
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticEvent}
+*/
+function SyntheticUIEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticEvent.augmentClass(SyntheticUIEvent, UIEventInterface);
+
+module.exports = SyntheticUIEvent;
+},{"114":114,"91":91}],99:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var SyntheticMouseEvent = _dereq_(95);
+
+/**
+* @interface WheelEvent
+* @see http://www.w3.org/TR/DOM-Level-3-Events/
+*/
+var WheelEventInterface = {
+ deltaX: function (event) {
+   return 'deltaX' in event ? event.deltaX :
+   // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
+   'wheelDeltaX' in event ? -event.wheelDeltaX : 0;
+ },
+ deltaY: function (event) {
+   return 'deltaY' in event ? event.deltaY :
+   // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
+   'wheelDeltaY' in event ? -event.wheelDeltaY :
+   // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
+   'wheelDelta' in event ? -event.wheelDelta : 0;
+ },
+ deltaZ: null,
+
+ // Browsers without "deltaMode" is reporting in raw wheel delta where one
+ // notch on the scroll is always +/- 120, roughly equivalent to pixels.
+ // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
+ // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
+ deltaMode: null
+};
+
+/**
+* @param {object} dispatchConfig Configuration used to dispatch this event.
+* @param {string} dispatchMarker Marker identifying the event target.
+* @param {object} nativeEvent Native browser event.
+* @extends {SyntheticMouseEvent}
+*/
+function SyntheticWheelEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
+ return SyntheticMouseEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
+}
+
+SyntheticMouseEvent.augmentClass(SyntheticWheelEvent, WheelEventInterface);
+
+module.exports = SyntheticWheelEvent;
+},{"95":95}],100:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+var OBSERVED_ERROR = {};
+
+/**
+* `Transaction` creates a black box that is able to wrap any method such that
+* certain invariants are maintained before and after the method is invoked
+* (Even if an exception is thrown while invoking the wrapped method). Whoever
+* instantiates a transaction can provide enforcers of the invariants at
+* creation time. The `Transaction` class itself will supply one additional
+* automatic invariant for you - the invariant that any transaction instance
+* should not be run while it is already being run. You would typically create a
+* single instance of a `Transaction` for reuse multiple times, that potentially
+* is used to wrap several different methods. Wrappers are extremely simple -
+* they only require implementing two methods.
+*
+* <pre>
+*                       wrappers (injected at creation time)
+*                                      +        +
+*                                      |        |
+*                    +-----------------|--------|--------------+
+*                    |                 v        |              |
+*                    |      +---------------+   |              |
+*                    |   +--|    wrapper1   |---|----+         |
+*                    |   |  +---------------+   v    |         |
+*                    |   |          +-------------+  |         |
+*                    |   |     +----|   wrapper2  |--------+   |
+*                    |   |     |    +-------------+  |     |   |
+*                    |   |     |                     |     |   |
+*                    |   v     v                     v     v   | wrapper
+*                    | +---+ +---+   +---------+   +---+ +---+ | invariants
+* perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
+* +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
+*                    | |   | |   |   |         |   |   | |   | |
+*                    | |   | |   |   |         |   |   | |   | |
+*                    | |   | |   |   |         |   |   | |   | |
+*                    | +---+ +---+   +---------+   +---+ +---+ |
+*                    |  initialize                    close    |
+*                    +-----------------------------------------+
+* </pre>
+*
+* Use cases:
+* - Preserving the input selection ranges before/after reconciliation.
+*   Restoring selection even in the event of an unexpected error.
+* - Deactivating events while rearranging the DOM, preventing blurs/focuses,
+*   while guaranteeing that afterwards, the event system is reactivated.
+* - Flushing a queue of collected DOM mutations to the main UI thread after a
+*   reconciliation takes place in a worker thread.
+* - Invoking any collected `componentDidUpdate` callbacks after rendering new
+*   content.
+* - (Future use case): Wrapping particular flushes of the `ReactWorker` queue
+*   to preserve the `scrollTop` (an automatic scroll aware DOM).
+* - (Future use case): Layout calculations before and after DOM updates.
+*
+* Transactional plugin API:
+* - A module that has an `initialize` method that returns any precomputation.
+* - and a `close` method that accepts the precomputation. `close` is invoked
+*   when the wrapped process is completed, or has failed.
+*
+* @param {Array<TransactionalWrapper>} transactionWrapper Wrapper modules
+* that implement `initialize` and `close`.
+* @return {Transaction} Single transaction for reuse in thread.
+*
+* @class Transaction
+*/
+var TransactionImpl = {
+ /**
+  * Sets up this instance so that it is prepared for collecting metrics. Does
+  * so such that this setup method may be used on an instance that is already
+  * initialized, in a way that does not consume additional memory upon reuse.
+  * That can be useful if you decide to make your subclass of this mixin a
+  * "PooledClass".
+  */
+ reinitializeTransaction: function () {
+   this.transactionWrappers = this.getTransactionWrappers();
+   if (this.wrapperInitData) {
+     this.wrapperInitData.length = 0;
+   } else {
+     this.wrapperInitData = [];
+   }
+   this._isInTransaction = false;
+ },
+
+ _isInTransaction: false,
+
+ /**
+  * @abstract
+  * @return {Array<TransactionWrapper>} Array of transaction wrappers.
+  */
+ getTransactionWrappers: null,
+
+ isInTransaction: function () {
+   return !!this._isInTransaction;
+ },
+
+ /**
+  * Executes the function within a safety window. Use this for the top level
+  * methods that result in large amounts of computation/mutations that would
+  * need to be safety checked. The optional arguments helps prevent the need
+  * to bind in many cases.
+  *
+  * @param {function} method Member of scope to call.
+  * @param {Object} scope Scope to invoke from.
+  * @param {Object?=} a Argument to pass to the method.
+  * @param {Object?=} b Argument to pass to the method.
+  * @param {Object?=} c Argument to pass to the method.
+  * @param {Object?=} d Argument to pass to the method.
+  * @param {Object?=} e Argument to pass to the method.
+  * @param {Object?=} f Argument to pass to the method.
+  *
+  * @return {*} Return value from `method`.
+  */
+ perform: function (method, scope, a, b, c, d, e, f) {
+   !!this.isInTransaction() ? "development" !== 'production' ? invariant(false, 'Transaction.perform(...): Cannot initialize a transaction when there is already an outstanding transaction.') : _prodInvariant('27') : void 0;
+   var errorThrown;
+   var ret;
+   try {
+     this._isInTransaction = true;
+     // Catching errors makes debugging more difficult, so we start with
+     // errorThrown set to true before setting it to false after calling
+     // close -- if it's still set to true in the finally block, it means
+     // one of these calls threw.
+     errorThrown = true;
+     this.initializeAll(0);
+     ret = method.call(scope, a, b, c, d, e, f);
+     errorThrown = false;
+   } finally {
+     try {
+       if (errorThrown) {
+         // If `method` throws, prefer to show that stack trace over any thrown
+         // by invoking `closeAll`.
+         try {
+           this.closeAll(0);
+         } catch (err) {}
+       } else {
+         // Since `method` didn't throw, we don't want to silence the exception
+         // here.
+         this.closeAll(0);
+       }
+     } finally {
+       this._isInTransaction = false;
+     }
+   }
+   return ret;
+ },
+
+ initializeAll: function (startIndex) {
+   var transactionWrappers = this.transactionWrappers;
+   for (var i = startIndex; i < transactionWrappers.length; i++) {
+     var wrapper = transactionWrappers[i];
+     try {
+       // Catching errors makes debugging more difficult, so we start with the
+       // OBSERVED_ERROR state before overwriting it with the real return value
+       // of initialize -- if it's still set to OBSERVED_ERROR in the finally
+       // block, it means wrapper.initialize threw.
+       this.wrapperInitData[i] = OBSERVED_ERROR;
+       this.wrapperInitData[i] = wrapper.initialize ? wrapper.initialize.call(this) : null;
+     } finally {
+       if (this.wrapperInitData[i] === OBSERVED_ERROR) {
+         // The initializer for wrapper i threw an error; initialize the
+         // remaining wrappers but silence any exceptions from them to ensure
+         // that the first error is the one to bubble up.
+         try {
+           this.initializeAll(i + 1);
+         } catch (err) {}
+       }
+     }
+   }
+ },
+
+ /**
+  * Invokes each of `this.transactionWrappers.close[i]` functions, passing into
+  * them the respective return values of `this.transactionWrappers.init[i]`
+  * (`close`rs that correspond to initializers that failed will not be
+  * invoked).
+  */
+ closeAll: function (startIndex) {
+   !this.isInTransaction() ? "development" !== 'production' ? invariant(false, 'Transaction.closeAll(): Cannot close transaction when none are open.') : _prodInvariant('28') : void 0;
+   var transactionWrappers = this.transactionWrappers;
+   for (var i = startIndex; i < transactionWrappers.length; i++) {
+     var wrapper = transactionWrappers[i];
+     var initData = this.wrapperInitData[i];
+     var errorThrown;
+     try {
+       // Catching errors makes debugging more difficult, so we start with
+       // errorThrown set to true before setting it to false after calling
+       // close -- if it's still set to true in the finally block, it means
+       // wrapper.close threw.
+       errorThrown = true;
+       if (initData !== OBSERVED_ERROR && wrapper.close) {
+         wrapper.close.call(this, initData);
+       }
+       errorThrown = false;
+     } finally {
+       if (errorThrown) {
+         // The closer for wrapper i threw an error; close the remaining
+         // wrappers but silence any exceptions from them to ensure that the
+         // first error is the one to bubble up.
+         try {
+           this.closeAll(i + 1);
+         } catch (e) {}
+       }
+     }
+   }
+   this.wrapperInitData.length = 0;
+ }
+};
+
+module.exports = TransactionImpl;
+},{"125":125,"150":150}],101:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ViewportMetrics = {
+
+ currentScrollLeft: 0,
+
+ currentScrollTop: 0,
+
+ refreshScrollValues: function (scrollPosition) {
+   ViewportMetrics.currentScrollLeft = scrollPosition.x;
+   ViewportMetrics.currentScrollTop = scrollPosition.y;
+ }
+
+};
+
+module.exports = ViewportMetrics;
+},{}],102:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var invariant = _dereq_(150);
+
+/**
+* Accumulates items that must not be null or undefined into the first one. This
+* is used to conserve memory by avoiding array allocations, and thus sacrifices
+* API cleanness. Since `current` can be null before being passed in and not
+* null after this function, make sure to assign it back to `current`:
+*
+* `a = accumulateInto(a, b);`
+*
+* This API should be sparingly used. Try `accumulate` for something cleaner.
+*
+* @return {*|array<*>} An accumulation of items.
+*/
+
+function accumulateInto(current, next) {
+ !(next != null) ? "development" !== 'production' ? invariant(false, 'accumulateInto(...): Accumulated items must not be null or undefined.') : _prodInvariant('30') : void 0;
+
+ if (current == null) {
+   return next;
+ }
+
+ // Both are not empty. Warning: Never call x.concat(y) when you are not
+ // certain that x is an Array (x could be a string with concat method).
+ if (Array.isArray(current)) {
+   if (Array.isArray(next)) {
+     current.push.apply(current, next);
+     return current;
+   }
+   current.push(next);
+   return current;
+ }
+
+ if (Array.isArray(next)) {
+   // A bit too dangerous to mutate `next`.
+   return [current].concat(next);
+ }
+
+ return [current, next];
+}
+
+module.exports = accumulateInto;
+},{"125":125,"150":150}],103:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var MOD = 65521;
+
+// adler32 is not cryptographically strong, and is only used to sanity check that
+// markup generated on the server matches the markup generated on the client.
+// This implementation (a modified version of the SheetJS version) has been optimized
+// for our use case, at the expense of conforming to the adler32 specification
+// for non-ascii inputs.
+function adler32(data) {
+ var a = 1;
+ var b = 0;
+ var i = 0;
+ var l = data.length;
+ var m = l & ~0x3;
+ while (i < m) {
+   var n = Math.min(i + 4096, m);
+   for (; i < n; i += 4) {
+     b += (a += data.charCodeAt(i)) + (a += data.charCodeAt(i + 1)) + (a += data.charCodeAt(i + 2)) + (a += data.charCodeAt(i + 3));
+   }
+   a %= MOD;
+   b %= MOD;
+ }
+ for (; i < l; i++) {
+   b += a += data.charCodeAt(i);
+ }
+ a %= MOD;
+ b %= MOD;
+ return a | b << 16;
+}
+
+module.exports = adler32;
+},{}],104:[function(_dereq_,module,exports){
+(function (process){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var ReactPropTypeLocationNames = _dereq_(72);
+var ReactPropTypesSecret = _dereq_(73);
+
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+var ReactComponentTreeHook;
+
+if (typeof process !== 'undefined' && process.env && "development" === 'test') {
+ // Temporary hack.
+ // Inline requires don't work well with Jest:
+ // https://github.com/facebook/react/issues/7240
+ // Remove the inline requires when we don't need them anymore:
+ // https://github.com/facebook/react/pull/7178
+ ReactComponentTreeHook = _dereq_(132);
+}
+
+var loggedTypeFailures = {};
+
+/**
+* Assert that the values match with the type specs.
+* Error messages are memorized and will only be shown once.
+*
+* @param {object} typeSpecs Map of name to a ReactPropType
+* @param {object} values Runtime values that need to be type-checked
+* @param {string} location e.g. "prop", "context", "child context"
+* @param {string} componentName Name of the component for error messages.
+* @param {?object} element The React element that is being type-checked
+* @param {?number} debugID The React component instance that is being type-checked
+* @private
+*/
+function checkReactTypeSpec(typeSpecs, values, location, componentName, element, debugID) {
+ for (var typeSpecName in typeSpecs) {
+   if (typeSpecs.hasOwnProperty(typeSpecName)) {
+     var error;
+     // Prop type validation may throw. In case they do, we don't want to
+     // fail the render phase where it didn't fail before. So we log it.
+     // After these have been cleaned up, we'll let them throw.
+     try {
+       // This is intentionally an invariant that gets caught. It's the same
+       // behavior as without this statement except with a better message.
+       !(typeof typeSpecs[typeSpecName] === 'function') ? "development" !== 'production' ? invariant(false, '%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.', componentName || 'React class', ReactPropTypeLocationNames[location], typeSpecName) : _prodInvariant('84', componentName || 'React class', ReactPropTypeLocationNames[location], typeSpecName) : void 0;
+       error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
+     } catch (ex) {
+       error = ex;
+     }
+     "development" !== 'production' ? warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', ReactPropTypeLocationNames[location], typeSpecName, typeof error) : void 0;
+     if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+       // Only monitor this failure once because there tends to be a lot of the
+       // same error.
+       loggedTypeFailures[error.message] = true;
+
+       var componentStackInfo = '';
+
+       if ("development" !== 'production') {
+         if (!ReactComponentTreeHook) {
+           ReactComponentTreeHook = _dereq_(132);
+         }
+         if (debugID !== null) {
+           componentStackInfo = ReactComponentTreeHook.getStackAddendumByID(debugID);
+         } else if (element !== null) {
+           componentStackInfo = ReactComponentTreeHook.getCurrentStackAddendum(element);
+         }
+       }
+
+       "development" !== 'production' ? warning(false, 'Failed %s type: %s%s', location, error.message, componentStackInfo) : void 0;
+     }
+   }
+ }
+}
+
+module.exports = checkReactTypeSpec;
+}).call(this,undefined)
+},{"125":125,"132":132,"150":150,"157":157,"72":72,"73":73}],105:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* globals MSApp */
+
+'use strict';
+
+/**
+* Create a function which has 'unsafe' privileges (required by windows8 apps)
+*/
+
+var createMicrosoftUnsafeLocalFunction = function (func) {
+ if (typeof MSApp !== 'undefined' && MSApp.execUnsafeLocalFunction) {
+   return function (arg0, arg1, arg2, arg3) {
+     MSApp.execUnsafeLocalFunction(function () {
+       return func(arg0, arg1, arg2, arg3);
+     });
+   };
+ } else {
+   return func;
+ }
+};
+
+module.exports = createMicrosoftUnsafeLocalFunction;
+},{}],106:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var CSSProperty = _dereq_(4);
+var warning = _dereq_(157);
+
+var isUnitlessNumber = CSSProperty.isUnitlessNumber;
+var styleWarnings = {};
+
+/**
+* Convert a value into the proper css writable value. The style name `name`
+* should be logical (no hyphens), as specified
+* in `CSSProperty.isUnitlessNumber`.
+*
+* @param {string} name CSS property name such as `topMargin`.
+* @param {*} value CSS property value such as `10px`.
+* @param {ReactDOMComponent} component
+* @return {string} Normalized style value with dimensions applied.
+*/
+function dangerousStyleValue(name, value, component) {
+ // Note that we've removed escapeTextForBrowser() calls here since the
+ // whole string will be escaped when the attribute is injected into
+ // the markup. If you provide unsafe user data here they can inject
+ // arbitrary CSS which may be problematic (I couldn't repro this):
+ // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
+ // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
+ // This is not an XSS hole but instead a potential CSS injection issue
+ // which has lead to a greater discussion about how we're going to
+ // trust URLs moving forward. See #2115901
+
+ var isEmpty = value == null || typeof value === 'boolean' || value === '';
+ if (isEmpty) {
+   return '';
+ }
+
+ var isNonNumeric = isNaN(value);
+ if (isNonNumeric || value === 0 || isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) {
+   return '' + value; // cast to string
+ }
+
+ if (typeof value === 'string') {
+   if ("development" !== 'production') {
+     // Allow '0' to pass through without warning. 0 is already special and
+     // doesn't require units, so we don't need to warn about it.
+     if (component && value !== '0') {
+       var owner = component._currentElement._owner;
+       var ownerName = owner ? owner.getName() : null;
+       if (ownerName && !styleWarnings[ownerName]) {
+         styleWarnings[ownerName] = {};
+       }
+       var warned = false;
+       if (ownerName) {
+         var warnings = styleWarnings[ownerName];
+         warned = warnings[name];
+         if (!warned) {
+           warnings[name] = true;
+         }
+       }
+       if (!warned) {
+         "development" !== 'production' ? warning(false, 'a `%s` tag (owner: `%s`) was passed a numeric string value ' + 'for CSS property `%s` (value: `%s`) which will be treated ' + 'as a unitless number in a future version of React.', component._currentElement.type, ownerName || 'unknown', name, value) : void 0;
+       }
+     }
+   }
+   value = value.trim();
+ }
+ return value + 'px';
+}
+
+module.exports = dangerousStyleValue;
+},{"157":157,"4":4}],107:[function(_dereq_,module,exports){
+/**
+* Copyright 2016-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* Based on the escape-html library, which is used under the MIT License below:
+*
+* Copyright (c) 2012-2013 TJ Holowaychuk
+* Copyright (c) 2015 Andreas Lubbe
+* Copyright (c) 2015 Tiancheng "Timothy" Gu
+*
+* Permission is hereby granted, free of charge, to any person obtaining
+* a copy of this software and associated documentation files (the
+* 'Software'), to deal in the Software without restriction, including
+* without limitation the rights to use, copy, modify, merge, publish,
+* distribute, sublicense, and/or sell copies of the Software, and to
+* permit persons to whom the Software is furnished to do so, subject to
+* the following conditions:
+*
+* The above copyright notice and this permission notice shall be
+* included in all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*
+*/
+
+'use strict';
+
+// code copied and modified from escape-html
+/**
+* Module variables.
+* @private
+*/
+
+var matchHtmlRegExp = /["'&<>]/;
+
+/**
+* Escape special characters in the given string of html.
+*
+* @param  {string} string The string to escape for inserting into HTML
+* @return {string}
+* @public
+*/
+
+function escapeHtml(string) {
+ var str = '' + string;
+ var match = matchHtmlRegExp.exec(str);
+
+ if (!match) {
+   return str;
+ }
+
+ var escape;
+ var html = '';
+ var index = 0;
+ var lastIndex = 0;
+
+ for (index = match.index; index < str.length; index++) {
+   switch (str.charCodeAt(index)) {
+     case 34:
+       // "
+       escape = '&quot;';
+       break;
+     case 38:
+       // &
+       escape = '&amp;';
+       break;
+     case 39:
+       // '
+       escape = '&#x27;'; // modified from escape-html; used to be '&#39'
+       break;
+     case 60:
+       // <
+       escape = '&lt;';
+       break;
+     case 62:
+       // >
+       escape = '&gt;';
+       break;
+     default:
+       continue;
+   }
+
+   if (lastIndex !== index) {
+     html += str.substring(lastIndex, index);
+   }
+
+   lastIndex = index + 1;
+   html += escape;
+ }
+
+ return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
+}
+// end code copied and modified from escape-html
+
+
+/**
+* Escapes text to prevent scripting attacks.
+*
+* @param {*} text Text value to escape.
+* @return {string} An escaped string.
+*/
+function escapeTextContentForBrowser(text) {
+ if (typeof text === 'boolean' || typeof text === 'number') {
+   // this shortcircuit helps perf for types that we know will never have
+   // special characters, especially given that this function is used often
+   // for numeric dom ids.
+   return '' + text;
+ }
+ return escapeHtml(text);
+}
+
+module.exports = escapeTextContentForBrowser;
+},{}],108:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var ReactCurrentOwner = _dereq_(133);
+var ReactDOMComponentTree = _dereq_(34);
+var ReactInstanceMap = _dereq_(63);
+
+var getHostComponentFromComposite = _dereq_(115);
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+/**
+* Returns the DOM node rendered by this element.
+*
+* See https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode
+*
+* @param {ReactComponent|DOMElement} componentOrElement
+* @return {?DOMElement} The root node of this element.
+*/
+function findDOMNode(componentOrElement) {
+ if ("development" !== 'production') {
+   var owner = ReactCurrentOwner.current;
+   if (owner !== null) {
+     "development" !== 'production' ? warning(owner._warnedAboutRefsInRender, '%s is accessing findDOMNode inside its render(). ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', owner.getName() || 'A component') : void 0;
+     owner._warnedAboutRefsInRender = true;
+   }
+ }
+ if (componentOrElement == null) {
+   return null;
+ }
+ if (componentOrElement.nodeType === 1) {
+   return componentOrElement;
+ }
+
+ var inst = ReactInstanceMap.get(componentOrElement);
+ if (inst) {
+   inst = getHostComponentFromComposite(inst);
+   return inst ? ReactDOMComponentTree.getNodeFromInstance(inst) : null;
+ }
+
+ if (typeof componentOrElement.render === 'function') {
+   !false ? "development" !== 'production' ? invariant(false, 'findDOMNode was called on an unmounted component.') : _prodInvariant('44') : void 0;
+ } else {
+   !false ? "development" !== 'production' ? invariant(false, 'Element appears to be neither ReactComponent nor DOMNode (keys: %s)', Object.keys(componentOrElement)) : _prodInvariant('45', Object.keys(componentOrElement)) : void 0;
+ }
+}
+
+module.exports = findDOMNode;
+},{"115":115,"125":125,"133":133,"150":150,"157":157,"34":34,"63":63}],109:[function(_dereq_,module,exports){
+(function (process){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var KeyEscapeUtils = _dereq_(23);
+var traverseAllChildren = _dereq_(130);
+var warning = _dereq_(157);
+
+var ReactComponentTreeHook;
+
+if (typeof process !== 'undefined' && process.env && "development" === 'test') {
+ // Temporary hack.
+ // Inline requires don't work well with Jest:
+ // https://github.com/facebook/react/issues/7240
+ // Remove the inline requires when we don't need them anymore:
+ // https://github.com/facebook/react/pull/7178
+ ReactComponentTreeHook = _dereq_(132);
+}
+
+/**
+* @param {function} traverseContext Context passed through traversal.
+* @param {?ReactComponent} child React child component.
+* @param {!string} name String name of key path to child.
+* @param {number=} selfDebugID Optional debugID of the current internal instance.
+*/
+function flattenSingleChildIntoContext(traverseContext, child, name, selfDebugID) {
+ // We found a component instance.
+ if (traverseContext && typeof traverseContext === 'object') {
+   var result = traverseContext;
+   var keyUnique = result[name] === undefined;
+   if ("development" !== 'production') {
+     if (!ReactComponentTreeHook) {
+       ReactComponentTreeHook = _dereq_(132);
+     }
+     if (!keyUnique) {
+       "development" !== 'production' ? warning(false, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.%s', KeyEscapeUtils.unescape(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID)) : void 0;
+     }
+   }
+   if (keyUnique && child != null) {
+     result[name] = child;
+   }
+ }
+}
+
+/**
+* Flattens children that are typically specified as `props.children`. Any null
+* children will not be included in the resulting object.
+* @return {!object} flattened children keyed by name.
+*/
+function flattenChildren(children, selfDebugID) {
+ if (children == null) {
+   return children;
+ }
+ var result = {};
+
+ if ("development" !== 'production') {
+   traverseAllChildren(children, function (traverseContext, child, name) {
+     return flattenSingleChildIntoContext(traverseContext, child, name, selfDebugID);
+   }, result);
+ } else {
+   traverseAllChildren(children, flattenSingleChildIntoContext, result);
+ }
+ return result;
+}
+
+module.exports = flattenChildren;
+}).call(this,undefined)
+},{"130":130,"132":132,"157":157,"23":23}],110:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+/**
+* @param {array} arr an "accumulation" of items which is either an Array or
+* a single item. Useful when paired with the `accumulate` module. This is a
+* simple utility that allows us to reason about a collection of items, but
+* handling the case when there is exactly one item (and we do not need to
+* allocate an array).
+*/
+
+function forEachAccumulated(arr, cb, scope) {
+ if (Array.isArray(arr)) {
+   arr.forEach(cb, scope);
+ } else if (arr) {
+   cb.call(scope, arr);
+ }
+}
+
+module.exports = forEachAccumulated;
+},{}],111:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* `charCode` represents the actual "character code" and is safe to use with
+* `String.fromCharCode`. As such, only keys that correspond to printable
+* characters produce a valid `charCode`, the only exception to this is Enter.
+* The Tab-key is considered non-printable and does not have a `charCode`,
+* presumably because it does not produce a tab-character in browsers.
+*
+* @param {object} nativeEvent Native browser event.
+* @return {number} Normalized `charCode` property.
+*/
+
+function getEventCharCode(nativeEvent) {
+ var charCode;
+ var keyCode = nativeEvent.keyCode;
+
+ if ('charCode' in nativeEvent) {
+   charCode = nativeEvent.charCode;
+
+   // FF does not set `charCode` for the Enter-key, check against `keyCode`.
+   if (charCode === 0 && keyCode === 13) {
+     charCode = 13;
+   }
+ } else {
+   // IE8 does not implement `charCode`, but `keyCode` has the correct value.
+   charCode = keyCode;
+ }
+
+ // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
+ // Must not discard the (non-)printable Enter-key.
+ if (charCode >= 32 || charCode === 13) {
+   return charCode;
+ }
+
+ return 0;
+}
+
+module.exports = getEventCharCode;
+},{}],112:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var getEventCharCode = _dereq_(111);
+
+/**
+* Normalization of deprecated HTML5 `key` values
+* @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
+*/
+var normalizeKey = {
+ 'Esc': 'Escape',
+ 'Spacebar': ' ',
+ 'Left': 'ArrowLeft',
+ 'Up': 'ArrowUp',
+ 'Right': 'ArrowRight',
+ 'Down': 'ArrowDown',
+ 'Del': 'Delete',
+ 'Win': 'OS',
+ 'Menu': 'ContextMenu',
+ 'Apps': 'ContextMenu',
+ 'Scroll': 'ScrollLock',
+ 'MozPrintableKey': 'Unidentified'
+};
+
+/**
+* Translation from legacy `keyCode` to HTML5 `key`
+* Only special keys supported, all others depend on keyboard layout or browser
+* @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
+*/
+var translateToKey = {
+ 8: 'Backspace',
+ 9: 'Tab',
+ 12: 'Clear',
+ 13: 'Enter',
+ 16: 'Shift',
+ 17: 'Control',
+ 18: 'Alt',
+ 19: 'Pause',
+ 20: 'CapsLock',
+ 27: 'Escape',
+ 32: ' ',
+ 33: 'PageUp',
+ 34: 'PageDown',
+ 35: 'End',
+ 36: 'Home',
+ 37: 'ArrowLeft',
+ 38: 'ArrowUp',
+ 39: 'ArrowRight',
+ 40: 'ArrowDown',
+ 45: 'Insert',
+ 46: 'Delete',
+ 112: 'F1', 113: 'F2', 114: 'F3', 115: 'F4', 116: 'F5', 117: 'F6',
+ 118: 'F7', 119: 'F8', 120: 'F9', 121: 'F10', 122: 'F11', 123: 'F12',
+ 144: 'NumLock',
+ 145: 'ScrollLock',
+ 224: 'Meta'
+};
+
+/**
+* @param {object} nativeEvent Native browser event.
+* @return {string} Normalized `key` property.
+*/
+function getEventKey(nativeEvent) {
+ if (nativeEvent.key) {
+   // Normalize inconsistent values reported by browsers due to
+   // implementations of a working draft specification.
+
+   // FireFox implements `key` but returns `MozPrintableKey` for all
+   // printable characters (normalized to `Unidentified`), ignore it.
+   var key = normalizeKey[nativeEvent.key] || nativeEvent.key;
+   if (key !== 'Unidentified') {
+     return key;
+   }
+ }
+
+ // Browser does not implement `key`, polyfill as much of it as we can.
+ if (nativeEvent.type === 'keypress') {
+   var charCode = getEventCharCode(nativeEvent);
+
+   // The enter-key is technically both printable and non-printable and can
+   // thus be captured by `keypress`, no other non-printable key should.
+   return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
+ }
+ if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
+   // While user keyboard layout determines the actual meaning of each
+   // `keyCode` value, almost all function keys have a universal value.
+   return translateToKey[nativeEvent.keyCode] || 'Unidentified';
+ }
+ return '';
+}
+
+module.exports = getEventKey;
+},{"111":111}],113:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Translation from modifier key to the associated property in the event.
+* @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
+*/
+
+var modifierKeyToProp = {
+ 'Alt': 'altKey',
+ 'Control': 'ctrlKey',
+ 'Meta': 'metaKey',
+ 'Shift': 'shiftKey'
+};
+
+// IE8 does not implement getModifierState so we simply map it to the only
+// modifier keys exposed by the event itself, does not support Lock-keys.
+// Currently, all major browsers except Chrome seems to support Lock-keys.
+function modifierStateGetter(keyArg) {
+ var syntheticEvent = this;
+ var nativeEvent = syntheticEvent.nativeEvent;
+ if (nativeEvent.getModifierState) {
+   return nativeEvent.getModifierState(keyArg);
+ }
+ var keyProp = modifierKeyToProp[keyArg];
+ return keyProp ? !!nativeEvent[keyProp] : false;
+}
+
+function getEventModifierState(nativeEvent) {
+ return modifierStateGetter;
+}
+
+module.exports = getEventModifierState;
+},{}],114:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Gets the target node from a native browser event by accounting for
+* inconsistencies in browser DOM APIs.
+*
+* @param {object} nativeEvent Native browser event.
+* @return {DOMEventTarget} Target node.
+*/
+
+function getEventTarget(nativeEvent) {
+ var target = nativeEvent.target || nativeEvent.srcElement || window;
+
+ // Normalize SVG <use> element events #4963
+ if (target.correspondingUseElement) {
+   target = target.correspondingUseElement;
+ }
+
+ // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
+ // @see http://www.quirksmode.org/js/events_properties.html
+ return target.nodeType === 3 ? target.parentNode : target;
+}
+
+module.exports = getEventTarget;
+},{}],115:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactNodeTypes = _dereq_(69);
+
+function getHostComponentFromComposite(inst) {
+ var type;
+
+ while ((type = inst._renderedNodeType) === ReactNodeTypes.COMPOSITE) {
+   inst = inst._renderedComponent;
+ }
+
+ if (type === ReactNodeTypes.HOST) {
+   return inst._renderedComponent;
+ } else if (type === ReactNodeTypes.EMPTY) {
+   return null;
+ }
+}
+
+module.exports = getHostComponentFromComposite;
+},{"69":69}],116:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+/* global Symbol */
+
+var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+/**
+* Returns the iterator method function contained on the iterable object.
+*
+* Be sure to invoke the function with the iterable as context:
+*
+*     var iteratorFn = getIteratorFn(myIterable);
+*     if (iteratorFn) {
+*       var iterator = iteratorFn.call(myIterable);
+*       ...
+*     }
+*
+* @param {?object} maybeIterable
+* @return {?function}
+*/
+function getIteratorFn(maybeIterable) {
+ var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+ if (typeof iteratorFn === 'function') {
+   return iteratorFn;
+ }
+}
+
+module.exports = getIteratorFn;
+},{}],117:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var nextDebugID = 1;
+
+function getNextDebugID() {
+ return nextDebugID++;
+}
+
+module.exports = getNextDebugID;
+},{}],118:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Given any node return the first leaf node without children.
+*
+* @param {DOMElement|DOMTextNode} node
+* @return {DOMElement|DOMTextNode}
+*/
+
+function getLeafNode(node) {
+ while (node && node.firstChild) {
+   node = node.firstChild;
+ }
+ return node;
+}
+
+/**
+* Get the next sibling within a container. This will walk up the
+* DOM if a node's siblings have been exhausted.
+*
+* @param {DOMElement|DOMTextNode} node
+* @return {?DOMElement|DOMTextNode}
+*/
+function getSiblingNode(node) {
+ while (node) {
+   if (node.nextSibling) {
+     return node.nextSibling;
+   }
+   node = node.parentNode;
+ }
+}
+
+/**
+* Get object describing the nodes which contain characters at offset.
+*
+* @param {DOMElement|DOMTextNode} root
+* @param {number} offset
+* @return {?object}
+*/
+function getNodeForCharacterOffset(root, offset) {
+ var node = getLeafNode(root);
+ var nodeStart = 0;
+ var nodeEnd = 0;
+
+ while (node) {
+   if (node.nodeType === 3) {
+     nodeEnd = nodeStart + node.textContent.length;
+
+     if (nodeStart <= offset && nodeEnd >= offset) {
+       return {
+         node: node,
+         offset: offset - nodeStart
+       };
+     }
+
+     nodeStart = nodeEnd;
+   }
+
+   node = getLeafNode(getSiblingNode(node));
+ }
+}
+
+module.exports = getNodeForCharacterOffset;
+},{}],119:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(136);
+
+var contentKey = null;
+
+/**
+* Gets the key used to access text content on a DOM node.
+*
+* @return {?string} Key used to access text content.
+* @internal
+*/
+function getTextContentAccessor() {
+ if (!contentKey && ExecutionEnvironment.canUseDOM) {
+   // Prefer textContent to innerText because many browsers support both but
+   // SVG <text> elements don't support innerText even when <div> does.
+   contentKey = 'textContent' in document.documentElement ? 'textContent' : 'innerText';
+ }
+ return contentKey;
+}
+
+module.exports = getTextContentAccessor;
+},{"136":136}],120:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(136);
+
+/**
+* Generate a mapping of standard vendor prefixes using the defined style property and event name.
+*
+* @param {string} styleProp
+* @param {string} eventName
+* @returns {object}
+*/
+function makePrefixMap(styleProp, eventName) {
+ var prefixes = {};
+
+ prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
+ prefixes['Webkit' + styleProp] = 'webkit' + eventName;
+ prefixes['Moz' + styleProp] = 'moz' + eventName;
+ prefixes['ms' + styleProp] = 'MS' + eventName;
+ prefixes['O' + styleProp] = 'o' + eventName.toLowerCase();
+
+ return prefixes;
+}
+
+/**
+* A list of event names to a configurable list of vendor prefixes.
+*/
+var vendorPrefixes = {
+ animationend: makePrefixMap('Animation', 'AnimationEnd'),
+ animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
+ animationstart: makePrefixMap('Animation', 'AnimationStart'),
+ transitionend: makePrefixMap('Transition', 'TransitionEnd')
+};
+
+/**
+* Event names that have already been detected and prefixed (if applicable).
+*/
+var prefixedEventNames = {};
+
+/**
+* Element to check for prefixes on.
+*/
+var style = {};
+
+/**
+* Bootstrap if a DOM exists.
+*/
+if (ExecutionEnvironment.canUseDOM) {
+ style = document.createElement('div').style;
+
+ // On some platforms, in particular some releases of Android 4.x,
+ // the un-prefixed "animation" and "transition" properties are defined on the
+ // style object but the events that fire will still be prefixed, so we need
+ // to check if the un-prefixed events are usable, and if not remove them from the map.
+ if (!('AnimationEvent' in window)) {
+   delete vendorPrefixes.animationend.animation;
+   delete vendorPrefixes.animationiteration.animation;
+   delete vendorPrefixes.animationstart.animation;
+ }
+
+ // Same as above
+ if (!('TransitionEvent' in window)) {
+   delete vendorPrefixes.transitionend.transition;
+ }
+}
+
+/**
+* Attempts to determine the correct vendor prefixed event name.
+*
+* @param {string} eventName
+* @returns {string}
+*/
+function getVendorPrefixedEventName(eventName) {
+ if (prefixedEventNames[eventName]) {
+   return prefixedEventNames[eventName];
+ } else if (!vendorPrefixes[eventName]) {
+   return eventName;
+ }
+
+ var prefixMap = vendorPrefixes[eventName];
+
+ for (var styleProp in prefixMap) {
+   if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
+     return prefixedEventNames[eventName] = prefixMap[styleProp];
+   }
+ }
+
+ return '';
+}
+
+module.exports = getVendorPrefixedEventName;
+},{"136":136}],121:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125),
+   _assign = _dereq_(158);
+
+var ReactCompositeComponent = _dereq_(30);
+var ReactEmptyComponent = _dereq_(54);
+var ReactHostComponent = _dereq_(59);
+
+var getNextDebugID = _dereq_(117);
+var invariant = _dereq_(150);
+var warning = _dereq_(157);
+
+// To avoid a cyclic dependency, we create the final class in this module
+var ReactCompositeComponentWrapper = function (element) {
+ this.construct(element);
+};
+_assign(ReactCompositeComponentWrapper.prototype, ReactCompositeComponent, {
+ _instantiateReactComponent: instantiateReactComponent
+});
+
+function getDeclarationErrorAddendum(owner) {
+ if (owner) {
+   var name = owner.getName();
+   if (name) {
+     return ' Check the render method of `' + name + '`.';
+   }
+ }
+ return '';
+}
+
+/**
+* Check if the type reference is a known internal type. I.e. not a user
+* provided composite type.
+*
+* @param {function} type
+* @return {boolean} Returns true if this is a valid internal type.
+*/
+function isInternalComponentType(type) {
+ return typeof type === 'function' && typeof type.prototype !== 'undefined' && typeof type.prototype.mountComponent === 'function' && typeof type.prototype.receiveComponent === 'function';
+}
+
+/**
+* Given a ReactNode, create an instance that will actually be mounted.
+*
+* @param {ReactNode} node
+* @param {boolean} shouldHaveDebugID
+* @return {object} A new instance of the element's constructor.
+* @protected
+*/
+function instantiateReactComponent(node, shouldHaveDebugID) {
+ var instance;
+
+ if (node === null || node === false) {
+   instance = ReactEmptyComponent.create(instantiateReactComponent);
+ } else if (typeof node === 'object') {
+   var element = node;
+   !(element && (typeof element.type === 'function' || typeof element.type === 'string')) ? "development" !== 'production' ? invariant(false, 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s', element.type == null ? element.type : typeof element.type, getDeclarationErrorAddendum(element._owner)) : _prodInvariant('130', element.type == null ? element.type : typeof element.type, getDeclarationErrorAddendum(element._owner)) : void 0;
+
+   // Special case string values
+   if (typeof element.type === 'string') {
+     instance = ReactHostComponent.createInternalComponent(element);
+   } else if (isInternalComponentType(element.type)) {
+     // This is temporarily available for custom components that are not string
+     // representations. I.e. ART. Once those are updated to use the string
+     // representation, we can drop this code path.
+     instance = new element.type(element);
+
+     // We renamed this. Allow the old name for compat. :(
+     if (!instance.getHostNode) {
+       instance.getHostNode = instance.getNativeNode;
+     }
+   } else {
+     instance = new ReactCompositeComponentWrapper(element);
+   }
+ } else if (typeof node === 'string' || typeof node === 'number') {
+   instance = ReactHostComponent.createInstanceForText(node);
+ } else {
+   !false ? "development" !== 'production' ? invariant(false, 'Encountered invalid React node of type %s', typeof node) : _prodInvariant('131', typeof node) : void 0;
+ }
+
+ if ("development" !== 'production') {
+   "development" !== 'production' ? warning(typeof instance.mountComponent === 'function' && typeof instance.receiveComponent === 'function' && typeof instance.getHostNode === 'function' && typeof instance.unmountComponent === 'function', 'Only React Components can be mounted.') : void 0;
+ }
+
+ // These two fields are used by the DOM and ART diffing algorithms
+ // respectively. Instead of using expandos on components, we should be
+ // storing the state needed by the diffing algorithms elsewhere.
+ instance._mountIndex = 0;
+ instance._mountImage = null;
+
+ if ("development" !== 'production') {
+   instance._debugID = shouldHaveDebugID ? getNextDebugID() : 0;
+ }
+
+ // Internal instances should fully constructed at this point, so they should
+ // not get any new fields added to them at this point.
+ if ("development" !== 'production') {
+   if (Object.preventExtensions) {
+     Object.preventExtensions(instance);
+   }
+ }
+
+ return instance;
+}
+
+module.exports = instantiateReactComponent;
+},{"117":117,"125":125,"150":150,"157":157,"158":158,"30":30,"54":54,"59":59}],122:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(136);
+
+var useHasFeature;
+if (ExecutionEnvironment.canUseDOM) {
+ useHasFeature = document.implementation && document.implementation.hasFeature &&
+ // always returns true in newer browsers as per the standard.
+ // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
+ document.implementation.hasFeature('', '') !== true;
+}
+
+/**
+* Checks if an event is supported in the current execution environment.
+*
+* NOTE: This will not work correctly for non-generic events such as `change`,
+* `reset`, `load`, `error`, and `select`.
+*
+* Borrows from Modernizr.
+*
+* @param {string} eventNameSuffix Event name, e.g. "click".
+* @param {?boolean} capture Check if the capture phase is supported.
+* @return {boolean} True if the event is supported.
+* @internal
+* @license Modernizr 3.0.0pre (Custom Build) | MIT
+*/
+function isEventSupported(eventNameSuffix, capture) {
+ if (!ExecutionEnvironment.canUseDOM || capture && !('addEventListener' in document)) {
+   return false;
+ }
+
+ var eventName = 'on' + eventNameSuffix;
+ var isSupported = eventName in document;
+
+ if (!isSupported) {
+   var element = document.createElement('div');
+   element.setAttribute(eventName, 'return;');
+   isSupported = typeof element[eventName] === 'function';
+ }
+
+ if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
+   // This is the only way to test support for the `wheel` event in IE9+.
+   isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
+ }
+
+ return isSupported;
+}
+
+module.exports = isEventSupported;
+},{"136":136}],123:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+/**
+* @see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
+*/
+
+var supportedInputTypes = {
+ 'color': true,
+ 'date': true,
+ 'datetime': true,
+ 'datetime-local': true,
+ 'email': true,
+ 'month': true,
+ 'number': true,
+ 'password': true,
+ 'range': true,
+ 'search': true,
+ 'tel': true,
+ 'text': true,
+ 'time': true,
+ 'url': true,
+ 'week': true
+};
+
+function isTextInputElement(elem) {
+ var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
+
+ if (nodeName === 'input') {
+   return !!supportedInputTypes[elem.type];
+ }
+
+ if (nodeName === 'textarea') {
+   return true;
+ }
+
+ return false;
+}
+
+module.exports = isTextInputElement;
+},{}],124:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var escapeTextContentForBrowser = _dereq_(107);
+
+/**
+* Escapes attribute value to prevent scripting attacks.
+*
+* @param {*} value Value to escape.
+* @return {string} An escaped string.
+*/
+function quoteAttributeValueForBrowser(value) {
+ return '"' + escapeTextContentForBrowser(value) + '"';
+}
+
+module.exports = quoteAttributeValueForBrowser;
+},{"107":107}],125:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+'use strict';
+
+/**
+* WARNING: DO NOT manually require this module.
+* This is a replacement for `invariant(...)` used by the error code system
+* and will _only_ be required by the corresponding babel pass.
+* It always throws.
+*/
+
+function reactProdInvariant(code) {
+ var argCount = arguments.length - 1;
+
+ var message = 'Minified React error #' + code + '; visit ' + 'http://facebook.github.io/react/docs/error-decoder.html?invariant=' + code;
+
+ for (var argIdx = 0; argIdx < argCount; argIdx++) {
+   message += '&args[]=' + encodeURIComponent(arguments[argIdx + 1]);
+ }
+
+ message += ' for the full message or use the non-minified dev environment' + ' for full errors and additional helpful warnings.';
+
+ var error = new Error(message);
+ error.name = 'Invariant Violation';
+ error.framesToPop = 1; // we don't care about reactProdInvariant's own frame
+
+ throw error;
+}
+
+module.exports = reactProdInvariant;
+},{}],126:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactMount = _dereq_(67);
+
+module.exports = ReactMount.renderSubtreeIntoContainer;
+},{"67":67}],127:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(136);
+var DOMNamespaces = _dereq_(10);
+
+var WHITESPACE_TEST = /^[ \r\n\t\f]/;
+var NONVISIBLE_TEST = /<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/;
+
+var createMicrosoftUnsafeLocalFunction = _dereq_(105);
+
+// SVG temp container for IE lacking innerHTML
+var reusableSVGContainer;
+
+/**
+* Set the innerHTML property of a node, ensuring that whitespace is preserved
+* even in IE8.
+*
+* @param {DOMElement} node
+* @param {string} html
+* @internal
+*/
+var setInnerHTML = createMicrosoftUnsafeLocalFunction(function (node, html) {
+ // IE does not have innerHTML for SVG nodes, so instead we inject the
+ // new markup in a temp node and then move the child nodes across into
+ // the target node
+ if (node.namespaceURI === DOMNamespaces.svg && !('innerHTML' in node)) {
+   reusableSVGContainer = reusableSVGContainer || document.createElement('div');
+   reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';
+   var svgNode = reusableSVGContainer.firstChild;
+   while (svgNode.firstChild) {
+     node.appendChild(svgNode.firstChild);
+   }
+ } else {
+   node.innerHTML = html;
+ }
+});
+
+if (ExecutionEnvironment.canUseDOM) {
+ // IE8: When updating a just created node with innerHTML only leading
+ // whitespace is removed. When updating an existing node with innerHTML
+ // whitespace in root TextNodes is also collapsed.
+ // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
+
+ // Feature detection; only IE8 is known to behave improperly like this.
+ var testElement = document.createElement('div');
+ testElement.innerHTML = ' ';
+ if (testElement.innerHTML === '') {
+   setInnerHTML = function (node, html) {
+     // Magic theory: IE8 supposedly differentiates between added and updated
+     // nodes when processing innerHTML, innerHTML on updated nodes suffers
+     // from worse whitespace behavior. Re-adding a node like this triggers
+     // the initial and more favorable whitespace behavior.
+     // TODO: What to do on a detached node?
+     if (node.parentNode) {
+       node.parentNode.replaceChild(node, node);
+     }
+
+     // We also implement a workaround for non-visible tags disappearing into
+     // thin air on IE8, this only happens if there is no visible text
+     // in-front of the non-visible tags. Piggyback on the whitespace fix
+     // and simply check if any non-visible tags appear in the source.
+     if (WHITESPACE_TEST.test(html) || html[0] === '<' && NONVISIBLE_TEST.test(html)) {
+       // Recover leading whitespace by temporarily prepending any character.
+       // \uFEFF has the potential advantage of being zero-width/invisible.
+       // UglifyJS drops U+FEFF chars when parsing, so use String.fromCharCode
+       // in hopes that this is preserved even if "\uFEFF" is transformed to
+       // the actual Unicode character (by Babel, for example).
+       // https://github.com/mishoo/UglifyJS2/blob/v2.4.20/lib/parse.js#L216
+       node.innerHTML = String.fromCharCode(0xFEFF) + html;
+
+       // deleteData leaves an empty `TextNode` which offsets the index of all
+       // children. Definitely want to avoid this.
+       var textNode = node.firstChild;
+       if (textNode.data.length === 1) {
+         node.removeChild(textNode);
+       } else {
+         textNode.deleteData(0, 1);
+       }
+     } else {
+       node.innerHTML = html;
+     }
+   };
+ }
+ testElement = null;
+}
+
+module.exports = setInnerHTML;
+},{"10":10,"105":105,"136":136}],128:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(136);
+var escapeTextContentForBrowser = _dereq_(107);
+var setInnerHTML = _dereq_(127);
+
+/**
+* Set the textContent property of a node, ensuring that whitespace is preserved
+* even in IE8. innerText is a poor substitute for textContent and, among many
+* issues, inserts <br> instead of the literal newline chars. innerHTML behaves
+* as it should.
+*
+* @param {DOMElement} node
+* @param {string} text
+* @internal
+*/
+var setTextContent = function (node, text) {
+ if (text) {
+   var firstChild = node.firstChild;
+
+   if (firstChild && firstChild === node.lastChild && firstChild.nodeType === 3) {
+     firstChild.nodeValue = text;
+     return;
+   }
+ }
+ node.textContent = text;
+};
+
+if (ExecutionEnvironment.canUseDOM) {
+ if (!('textContent' in document.documentElement)) {
+   setTextContent = function (node, text) {
+     if (node.nodeType === 3) {
+       node.nodeValue = text;
+       return;
+     }
+     setInnerHTML(node, escapeTextContentForBrowser(text));
+   };
+ }
+}
+
+module.exports = setTextContent;
+},{"107":107,"127":127,"136":136}],129:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Given a `prevElement` and `nextElement`, determines if the existing
+* instance should be updated as opposed to being destroyed or replaced by a new
+* instance. Both arguments are elements. This ensures that this logic can
+* operate on stateless trees without any backing instance.
+*
+* @param {?object} prevElement
+* @param {?object} nextElement
+* @return {boolean} True if the existing instance should be updated.
+* @protected
+*/
+
+function shouldUpdateReactComponent(prevElement, nextElement) {
+ var prevEmpty = prevElement === null || prevElement === false;
+ var nextEmpty = nextElement === null || nextElement === false;
+ if (prevEmpty || nextEmpty) {
+   return prevEmpty === nextEmpty;
+ }
+
+ var prevType = typeof prevElement;
+ var nextType = typeof nextElement;
+ if (prevType === 'string' || prevType === 'number') {
+   return nextType === 'string' || nextType === 'number';
+ } else {
+   return nextType === 'object' && prevElement.type === nextElement.type && prevElement.key === nextElement.key;
+ }
+}
+
+module.exports = shouldUpdateReactComponent;
+},{}],130:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(125);
+
+var ReactCurrentOwner = _dereq_(133);
+var REACT_ELEMENT_TYPE = _dereq_(53);
+
+var getIteratorFn = _dereq_(116);
+var invariant = _dereq_(150);
+var KeyEscapeUtils = _dereq_(23);
+var warning = _dereq_(157);
+
+var SEPARATOR = '.';
+var SUBSEPARATOR = ':';
+
+/**
+* This is inlined from ReactElement since this file is shared between
+* isomorphic and renderers. We could extract this to a
+*
+*/
+
+/**
+* TODO: Test that a single child and an array with one item have the same key
+* pattern.
+*/
+
+var didWarnAboutMaps = false;
+
+/**
+* Generate a key string that identifies a component within a set.
+*
+* @param {*} component A component that could contain a manual key.
+* @param {number} index Index that is used if a manual key is not provided.
+* @return {string}
+*/
+function getComponentKey(component, index) {
+ // Do some typechecking here since we call this blindly. We want to ensure
+ // that we don't block potential future ES APIs.
+ if (component && typeof component === 'object' && component.key != null) {
+   // Explicit key
+   return KeyEscapeUtils.escape(component.key);
+ }
+ // Implicit key determined by the index in the set
+ return index.toString(36);
+}
+
+/**
+* @param {?*} children Children tree container.
+* @param {!string} nameSoFar Name of the key path so far.
+* @param {!function} callback Callback to invoke with each child found.
+* @param {?*} traverseContext Used to pass information throughout the traversal
+* process.
+* @return {!number} The number of children in this subtree.
+*/
+function traverseAllChildrenImpl(children, nameSoFar, callback, traverseContext) {
+ var type = typeof children;
+
+ if (type === 'undefined' || type === 'boolean') {
+   // All of the above are perceived as null.
+   children = null;
+ }
+
+ if (children === null || type === 'string' || type === 'number' ||
+ // The following is inlined from ReactElement. This means we can optimize
+ // some checks. React Fiber also inlines this logic for similar purposes.
+ type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE) {
+   callback(traverseContext, children,
+   // If it's the only child, treat the name as if it was wrapped in an array
+   // so that it's consistent if the number of children grows.
+   nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar);
+   return 1;
+ }
+
+ var child;
+ var nextName;
+ var subtreeCount = 0; // Count of children found in the current subtree.
+ var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
+
+ if (Array.isArray(children)) {
+   for (var i = 0; i < children.length; i++) {
+     child = children[i];
+     nextName = nextNamePrefix + getComponentKey(child, i);
+     subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
+   }
+ } else {
+   var iteratorFn = getIteratorFn(children);
+   if (iteratorFn) {
+     var iterator = iteratorFn.call(children);
+     var step;
+     if (iteratorFn !== children.entries) {
+       var ii = 0;
+       while (!(step = iterator.next()).done) {
+         child = step.value;
+         nextName = nextNamePrefix + getComponentKey(child, ii++);
+         subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
+       }
+     } else {
+       if ("development" !== 'production') {
+         var mapsAsChildrenAddendum = '';
+         if (ReactCurrentOwner.current) {
+           var mapsAsChildrenOwnerName = ReactCurrentOwner.current.getName();
+           if (mapsAsChildrenOwnerName) {
+             mapsAsChildrenAddendum = ' Check the render method of `' + mapsAsChildrenOwnerName + '`.';
+           }
+         }
+         "development" !== 'production' ? warning(didWarnAboutMaps, 'Using Maps as children is not yet fully supported. It is an ' + 'experimental feature that might be removed. Convert it to a ' + 'sequence / iterable of keyed ReactElements instead.%s', mapsAsChildrenAddendum) : void 0;
+         didWarnAboutMaps = true;
+       }
+       // Iterator will provide entry [k,v] tuples rather than values.
+       while (!(step = iterator.next()).done) {
+         var entry = step.value;
+         if (entry) {
+           child = entry[1];
+           nextName = nextNamePrefix + KeyEscapeUtils.escape(entry[0]) + SUBSEPARATOR + getComponentKey(child, 0);
+           subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
+         }
+       }
+     }
+   } else if (type === 'object') {
+     var addendum = '';
+     if ("development" !== 'production') {
+       addendum = ' If you meant to render a collection of children, use an array ' + 'instead or wrap the object using createFragment(object) from the ' + 'React add-ons.';
+       if (children._isReactElement) {
+         addendum = ' It looks like you\'re using an element created by a different ' + 'version of React. Make sure to use only one copy of React.';
+       }
+       if (ReactCurrentOwner.current) {
+         var name = ReactCurrentOwner.current.getName();
+         if (name) {
+           addendum += ' Check the render method of `' + name + '`.';
+         }
+       }
+     }
+     var childrenString = String(children);
+     !false ? "development" !== 'production' ? invariant(false, 'Objects are not valid as a React child (found: %s).%s', childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString, addendum) : _prodInvariant('31', childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString, addendum) : void 0;
+   }
+ }
+
+ return subtreeCount;
+}
+
+/**
+* Traverses children that are typically specified as `props.children`, but
+* might also be specified through attributes:
+*
+* - `traverseAllChildren(this.props.children, ...)`
+* - `traverseAllChildren(this.props.leftPanelChildren, ...)`
+*
+* The `traverseContext` is an optional argument that is passed through the
+* entire traversal. It can be used to store accumulations or anything else that
+* the callback might find relevant.
+*
+* @param {?*} children Children tree object.
+* @param {!function} callback To invoke upon traversing each child.
+* @param {?*} traverseContext Context for traversal.
+* @return {!number} The number of children in this subtree.
+*/
+function traverseAllChildren(children, callback, traverseContext) {
+ if (children == null) {
+   return 0;
+ }
+
+ return traverseAllChildrenImpl(children, '', callback, traverseContext);
+}
+
+module.exports = traverseAllChildren;
+},{"116":116,"125":125,"133":133,"150":150,"157":157,"23":23,"53":53}],131:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(158);
+
+var emptyFunction = _dereq_(142);
+var warning = _dereq_(157);
+
+var validateDOMNesting = emptyFunction;
+
+if ("development" !== 'production') {
+ // This validation code was written based on the HTML5 parsing spec:
+ // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
+ //
+ // Note: this does not catch all invalid nesting, nor does it try to (as it's
+ // not clear what practical benefit doing so provides); instead, we warn only
+ // for cases where the parser will give a parse tree differing from what React
+ // intended. For example, <b><div></div></b> is invalid but we don't warn
+ // because it still parses correctly; we do warn for other cases like nested
+ // <p> tags where the beginning of the second element implicitly closes the
+ // first, causing a confusing mess.
+
+ // https://html.spec.whatwg.org/multipage/syntax.html#special
+ var specialTags = ['address', 'applet', 'area', 'article', 'aside', 'base', 'basefont', 'bgsound', 'blockquote', 'body', 'br', 'button', 'caption', 'center', 'col', 'colgroup', 'dd', 'details', 'dir', 'div', 'dl', 'dt', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'iframe', 'img', 'input', 'isindex', 'li', 'link', 'listing', 'main', 'marquee', 'menu', 'menuitem', 'meta', 'nav', 'noembed', 'noframes', 'noscript', 'object', 'ol', 'p', 'param', 'plaintext', 'pre', 'script', 'section', 'select', 'source', 'style', 'summary', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'title', 'tr', 'track', 'ul', 'wbr', 'xmp'];
+
+ // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
+ var inScopeTags = ['applet', 'caption', 'html', 'table', 'td', 'th', 'marquee', 'object', 'template',
+
+ // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point
+ // TODO: Distinguish by namespace here -- for <title>, including it here
+ // errs on the side of fewer warnings
+ 'foreignObject', 'desc', 'title'];
+
+ // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope
+ var buttonScopeTags = inScopeTags.concat(['button']);
+
+ // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags
+ var impliedEndTags = ['dd', 'dt', 'li', 'option', 'optgroup', 'p', 'rp', 'rt'];
+
+ var emptyAncestorInfo = {
+   current: null,
+
+   formTag: null,
+   aTagInScope: null,
+   buttonTagInScope: null,
+   nobrTagInScope: null,
+   pTagInButtonScope: null,
+
+   listItemTagAutoclosing: null,
+   dlItemTagAutoclosing: null
+ };
+
+ var updatedAncestorInfo = function (oldInfo, tag, instance) {
+   var ancestorInfo = _assign({}, oldInfo || emptyAncestorInfo);
+   var info = { tag: tag, instance: instance };
+
+   if (inScopeTags.indexOf(tag) !== -1) {
+     ancestorInfo.aTagInScope = null;
+     ancestorInfo.buttonTagInScope = null;
+     ancestorInfo.nobrTagInScope = null;
+   }
+   if (buttonScopeTags.indexOf(tag) !== -1) {
+     ancestorInfo.pTagInButtonScope = null;
+   }
+
+   // See rules for 'li', 'dd', 'dt' start tags in
+   // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
+   if (specialTags.indexOf(tag) !== -1 && tag !== 'address' && tag !== 'div' && tag !== 'p') {
+     ancestorInfo.listItemTagAutoclosing = null;
+     ancestorInfo.dlItemTagAutoclosing = null;
+   }
+
+   ancestorInfo.current = info;
+
+   if (tag === 'form') {
+     ancestorInfo.formTag = info;
+   }
+   if (tag === 'a') {
+     ancestorInfo.aTagInScope = info;
+   }
+   if (tag === 'button') {
+     ancestorInfo.buttonTagInScope = info;
+   }
+   if (tag === 'nobr') {
+     ancestorInfo.nobrTagInScope = info;
+   }
+   if (tag === 'p') {
+     ancestorInfo.pTagInButtonScope = info;
+   }
+   if (tag === 'li') {
+     ancestorInfo.listItemTagAutoclosing = info;
+   }
+   if (tag === 'dd' || tag === 'dt') {
+     ancestorInfo.dlItemTagAutoclosing = info;
+   }
+
+   return ancestorInfo;
+ };
+
+ /**
+  * Returns whether
+  */
+ var isTagValidWithParent = function (tag, parentTag) {
+   // First, let's check if we're in an unusual parsing mode...
+   switch (parentTag) {
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
+     case 'select':
+       return tag === 'option' || tag === 'optgroup' || tag === '#text';
+     case 'optgroup':
+       return tag === 'option' || tag === '#text';
+     // Strictly speaking, seeing an <option> doesn't mean we're in a <select>
+     // but
+     case 'option':
+       return tag === '#text';
+
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
+     // No special behavior since these rules fall back to "in body" mode for
+     // all except special table nodes which cause bad parsing behavior anyway.
+
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr
+     case 'tr':
+       return tag === 'th' || tag === 'td' || tag === 'style' || tag === 'script' || tag === 'template';
+
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody
+     case 'tbody':
+     case 'thead':
+     case 'tfoot':
+       return tag === 'tr' || tag === 'style' || tag === 'script' || tag === 'template';
+
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup
+     case 'colgroup':
+       return tag === 'col' || tag === 'template';
+
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable
+     case 'table':
+       return tag === 'caption' || tag === 'colgroup' || tag === 'tbody' || tag === 'tfoot' || tag === 'thead' || tag === 'style' || tag === 'script' || tag === 'template';
+
+     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead
+     case 'head':
+       return tag === 'base' || tag === 'basefont' || tag === 'bgsound' || tag === 'link' || tag === 'meta' || tag === 'title' || tag === 'noscript' || tag === 'noframes' || tag === 'style' || tag === 'script' || tag === 'template';
+
+     // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
+     case 'html':
+       return tag === 'head' || tag === 'body';
+     case '#document':
+       return tag === 'html';
+   }
+
+   // Probably in the "in body" parsing mode, so we outlaw only tag combos
+   // where the parsing rules cause implicit opens or closes to be added.
+   // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
+   switch (tag) {
+     case 'h1':
+     case 'h2':
+     case 'h3':
+     case 'h4':
+     case 'h5':
+     case 'h6':
+       return parentTag !== 'h1' && parentTag !== 'h2' && parentTag !== 'h3' && parentTag !== 'h4' && parentTag !== 'h5' && parentTag !== 'h6';
+
+     case 'rp':
+     case 'rt':
+       return impliedEndTags.indexOf(parentTag) === -1;
+
+     case 'body':
+     case 'caption':
+     case 'col':
+     case 'colgroup':
+     case 'frame':
+     case 'head':
+     case 'html':
+     case 'tbody':
+     case 'td':
+     case 'tfoot':
+     case 'th':
+     case 'thead':
+     case 'tr':
+       // These tags are only valid with a few parents that have special child
+       // parsing rules -- if we're down here, then none of those matched and
+       // so we allow it only if we don't know what the parent is, as all other
+       // cases are invalid.
+       return parentTag == null;
+   }
+
+   return true;
+ };
+
+ /**
+  * Returns whether
+  */
+ var findInvalidAncestorForTag = function (tag, ancestorInfo) {
+   switch (tag) {
+     case 'address':
+     case 'article':
+     case 'aside':
+     case 'blockquote':
+     case 'center':
+     case 'details':
+     case 'dialog':
+     case 'dir':
+     case 'div':
+     case 'dl':
+     case 'fieldset':
+     case 'figcaption':
+     case 'figure':
+     case 'footer':
+     case 'header':
+     case 'hgroup':
+     case 'main':
+     case 'menu':
+     case 'nav':
+     case 'ol':
+     case 'p':
+     case 'section':
+     case 'summary':
+     case 'ul':
+
+     case 'pre':
+     case 'listing':
+
+     case 'table':
+
+     case 'hr':
+
+     case 'xmp':
+
+     case 'h1':
+     case 'h2':
+     case 'h3':
+     case 'h4':
+     case 'h5':
+     case 'h6':
+       return ancestorInfo.pTagInButtonScope;
+
+     case 'form':
+       return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope;
+
+     case 'li':
+       return ancestorInfo.listItemTagAutoclosing;
+
+     case 'dd':
+     case 'dt':
+       return ancestorInfo.dlItemTagAutoclosing;
+
+     case 'button':
+       return ancestorInfo.buttonTagInScope;
+
+     case 'a':
+       // Spec says something about storing a list of markers, but it sounds
+       // equivalent to this check.
+       return ancestorInfo.aTagInScope;
+
+     case 'nobr':
+       return ancestorInfo.nobrTagInScope;
+   }
+
+   return null;
+ };
+
+ /**
+  * Given a ReactCompositeComponent instance, return a list of its recursive
+  * owners, starting at the root and ending with the instance itself.
+  */
+ var findOwnerStack = function (instance) {
+   if (!instance) {
+     return [];
+   }
+
+   var stack = [];
+   do {
+     stack.push(instance);
+   } while (instance = instance._currentElement._owner);
+   stack.reverse();
+   return stack;
+ };
+
+ var didWarn = {};
+
+ validateDOMNesting = function (childTag, childText, childInstance, ancestorInfo) {
+   ancestorInfo = ancestorInfo || emptyAncestorInfo;
+   var parentInfo = ancestorInfo.current;
+   var parentTag = parentInfo && parentInfo.tag;
+
+   if (childText != null) {
+     "development" !== 'production' ? warning(childTag == null, 'validateDOMNesting: when childText is passed, childTag should be null') : void 0;
+     childTag = '#text';
+   }
+
+   var invalidParent = isTagValidWithParent(childTag, parentTag) ? null : parentInfo;
+   var invalidAncestor = invalidParent ? null : findInvalidAncestorForTag(childTag, ancestorInfo);
+   var problematic = invalidParent || invalidAncestor;
+
+   if (problematic) {
+     var ancestorTag = problematic.tag;
+     var ancestorInstance = problematic.instance;
+
+     var childOwner = childInstance && childInstance._currentElement._owner;
+     var ancestorOwner = ancestorInstance && ancestorInstance._currentElement._owner;
+
+     var childOwners = findOwnerStack(childOwner);
+     var ancestorOwners = findOwnerStack(ancestorOwner);
+
+     var minStackLen = Math.min(childOwners.length, ancestorOwners.length);
+     var i;
+
+     var deepestCommon = -1;
+     for (i = 0; i < minStackLen; i++) {
+       if (childOwners[i] === ancestorOwners[i]) {
+         deepestCommon = i;
+       } else {
+         break;
+       }
+     }
+
+     var UNKNOWN = '(unknown)';
+     var childOwnerNames = childOwners.slice(deepestCommon + 1).map(function (inst) {
+       return inst.getName() || UNKNOWN;
+     });
+     var ancestorOwnerNames = ancestorOwners.slice(deepestCommon + 1).map(function (inst) {
+       return inst.getName() || UNKNOWN;
+     });
+     var ownerInfo = [].concat(
+     // If the parent and child instances have a common owner ancestor, start
+     // with that -- otherwise we just start with the parent's owners.
+     deepestCommon !== -1 ? childOwners[deepestCommon].getName() || UNKNOWN : [], ancestorOwnerNames, ancestorTag,
+     // If we're warning about an invalid (non-parent) ancestry, add '...'
+     invalidAncestor ? ['...'] : [], childOwnerNames, childTag).join(' > ');
+
+     var warnKey = !!invalidParent + '|' + childTag + '|' + ancestorTag + '|' + ownerInfo;
+     if (didWarn[warnKey]) {
+       return;
+     }
+     didWarn[warnKey] = true;
+
+     var tagDisplayName = childTag;
+     var whitespaceInfo = '';
+     if (childTag === '#text') {
+       if (/\S/.test(childText)) {
+         tagDisplayName = 'Text nodes';
+       } else {
+         tagDisplayName = 'Whitespace text nodes';
+         whitespaceInfo = ' Make sure you don\'t have any extra whitespace between tags on ' + 'each line of your source code.';
+       }
+     } else {
+       tagDisplayName = '<' + childTag + '>';
+     }
+
+     if (invalidParent) {
+       var info = '';
+       if (ancestorTag === 'table' && childTag === 'tr') {
+         info += ' Add a <tbody> to your code to match the DOM tree generated by ' + 'the browser.';
+       }
+       "development" !== 'production' ? warning(false, 'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s ' + 'See %s.%s', tagDisplayName, ancestorTag, whitespaceInfo, ownerInfo, info) : void 0;
+     } else {
+       "development" !== 'production' ? warning(false, 'validateDOMNesting(...): %s cannot appear as a descendant of ' + '<%s>. See %s.', tagDisplayName, ancestorTag, ownerInfo) : void 0;
+     }
+   }
+ };
+
+ validateDOMNesting.updatedAncestorInfo = updatedAncestorInfo;
+
+ // For testing
+ validateDOMNesting.isTagValidInContext = function (tag, ancestorInfo) {
+   ancestorInfo = ancestorInfo || emptyAncestorInfo;
+   var parentInfo = ancestorInfo.current;
+   var parentTag = parentInfo && parentInfo.tag;
+   return isTagValidWithParent(tag, parentTag) && !findInvalidAncestorForTag(tag, ancestorInfo);
+ };
+}
+
+module.exports = validateDOMNesting;
+},{"142":142,"157":157,"158":158}],132:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* globals React */
+
+'use strict';
+
+var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+module.exports = ReactInternals.ReactComponentTreeHook;
+},{}],133:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* globals React */
+
+'use strict';
+
+var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+module.exports = ReactInternals.ReactCurrentOwner;
+},{}],134:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* globals React */
+
+'use strict';
+
+module.exports = React;
+},{}],135:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*
+* @typechecks
+*/
+
+var emptyFunction = _dereq_(142);
+
+/**
+* Upstream version of event listener. Does not take into account specific
+* nature of platform.
+*/
+var EventListener = {
+ /**
+  * Listen to DOM events during the bubble phase.
+  *
+  * @param {DOMEventTarget} target DOM element to register listener on.
+  * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
+  * @param {function} callback Callback function.
+  * @return {object} Object with a `remove` method.
+  */
+ listen: function listen(target, eventType, callback) {
+   if (target.addEventListener) {
+     target.addEventListener(eventType, callback, false);
+     return {
+       remove: function remove() {
+         target.removeEventListener(eventType, callback, false);
+       }
+     };
+   } else if (target.attachEvent) {
+     target.attachEvent('on' + eventType, callback);
+     return {
+       remove: function remove() {
+         target.detachEvent('on' + eventType, callback);
+       }
+     };
+   }
+ },
+
+ /**
+  * Listen to DOM events during the capture phase.
+  *
+  * @param {DOMEventTarget} target DOM element to register listener on.
+  * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
+  * @param {function} callback Callback function.
+  * @return {object} Object with a `remove` method.
+  */
+ capture: function capture(target, eventType, callback) {
+   if (target.addEventListener) {
+     target.addEventListener(eventType, callback, true);
+     return {
+       remove: function remove() {
+         target.removeEventListener(eventType, callback, true);
+       }
+     };
+   } else {
+     if ("development" !== 'production') {
+       console.error('Attempted to listen to events during the capture phase on a ' + 'browser that does not support the capture phase. Your application ' + 'will not receive some events.');
+     }
+     return {
+       remove: emptyFunction
+     };
+   }
+ },
+
+ registerDefault: function registerDefault() {}
+};
+
+module.exports = EventListener;
+},{"142":142}],136:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+/**
+* Simple, lightweight module assisting with the detection and context of
+* Worker. Helps avoid circular dependencies and allows code to reason about
+* whether or not they are in a Worker, even if they never include the main
+* `ReactWorker` dependency.
+*/
+var ExecutionEnvironment = {
+
+ canUseDOM: canUseDOM,
+
+ canUseWorkers: typeof Worker !== 'undefined',
+
+ canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
+
+ canUseViewport: canUseDOM && !!window.screen,
+
+ isInWorker: !canUseDOM // For now, this is true - might change in the future.
+
+};
+
+module.exports = ExecutionEnvironment;
+},{}],137:[function(_dereq_,module,exports){
+"use strict";
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+var _hyphenPattern = /-(.)/g;
+
+/**
+* Camelcases a hyphenated string, for example:
+*
+*   > camelize('background-color')
+*   < "backgroundColor"
+*
+* @param {string} string
+* @return {string}
+*/
+function camelize(string) {
+ return string.replace(_hyphenPattern, function (_, character) {
+   return character.toUpperCase();
+ });
+}
+
+module.exports = camelize;
+},{}],138:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+'use strict';
+
+var camelize = _dereq_(137);
+
+var msPattern = /^-ms-/;
+
+/**
+* Camelcases a hyphenated CSS property name, for example:
+*
+*   > camelizeStyleName('background-color')
+*   < "backgroundColor"
+*   > camelizeStyleName('-moz-transition')
+*   < "MozTransition"
+*   > camelizeStyleName('-ms-transition')
+*   < "msTransition"
+*
+* As Andi Smith suggests
+* (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
+* is converted to lowercase `ms`.
+*
+* @param {string} string
+* @return {string}
+*/
+function camelizeStyleName(string) {
+ return camelize(string.replace(msPattern, 'ms-'));
+}
+
+module.exports = camelizeStyleName;
+},{"137":137}],139:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+var isTextNode = _dereq_(152);
+
+/*eslint-disable no-bitwise */
+
+/**
+* Checks if a given DOM node contains or is another DOM node.
+*/
+function containsNode(outerNode, innerNode) {
+ if (!outerNode || !innerNode) {
+   return false;
+ } else if (outerNode === innerNode) {
+   return true;
+ } else if (isTextNode(outerNode)) {
+   return false;
+ } else if (isTextNode(innerNode)) {
+   return containsNode(outerNode, innerNode.parentNode);
+ } else if ('contains' in outerNode) {
+   return outerNode.contains(innerNode);
+ } else if (outerNode.compareDocumentPosition) {
+   return !!(outerNode.compareDocumentPosition(innerNode) & 16);
+ } else {
+   return false;
+ }
+}
+
+module.exports = containsNode;
+},{"152":152}],140:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+var invariant = _dereq_(150);
+
+/**
+* Convert array-like objects to arrays.
+*
+* This API assumes the caller knows the contents of the data type. For less
+* well defined inputs use createArrayFromMixed.
+*
+* @param {object|function|filelist} obj
+* @return {array}
+*/
+function toArray(obj) {
+ var length = obj.length;
+
+ // Some browsers builtin objects can report typeof 'function' (e.g. NodeList
+ // in old versions of Safari).
+ !(!Array.isArray(obj) && (typeof obj === 'object' || typeof obj === 'function')) ? "development" !== 'production' ? invariant(false, 'toArray: Array-like object expected') : invariant(false) : void 0;
+
+ !(typeof length === 'number') ? "development" !== 'production' ? invariant(false, 'toArray: Object needs a length property') : invariant(false) : void 0;
+
+ !(length === 0 || length - 1 in obj) ? "development" !== 'production' ? invariant(false, 'toArray: Object should have keys for indices') : invariant(false) : void 0;
+
+ !(typeof obj.callee !== 'function') ? "development" !== 'production' ? invariant(false, 'toArray: Object can\'t be `arguments`. Use rest params ' + '(function(...args) {}) or Array.from() instead.') : invariant(false) : void 0;
+
+ // Old IE doesn't give collections access to hasOwnProperty. Assume inputs
+ // without method will throw during the slice call and skip straight to the
+ // fallback.
+ if (obj.hasOwnProperty) {
+   try {
+     return Array.prototype.slice.call(obj);
+   } catch (e) {
+     // IE < 9 does not support Array#slice on collections objects
+   }
+ }
+
+ // Fall back to copying key by key. This assumes all keys have a value,
+ // so will not preserve sparsely populated inputs.
+ var ret = Array(length);
+ for (var ii = 0; ii < length; ii++) {
+   ret[ii] = obj[ii];
+ }
+ return ret;
+}
+
+/**
+* Perform a heuristic test to determine if an object is "array-like".
+*
+*   A monk asked Joshu, a Zen master, "Has a dog Buddha nature?"
+*   Joshu replied: "Mu."
+*
+* This function determines if its argument has "array nature": it returns
+* true if the argument is an actual array, an `arguments' object, or an
+* HTMLCollection (e.g. node.childNodes or node.getElementsByTagName()).
+*
+* It will return false for other array-like objects like Filelist.
+*
+* @param {*} obj
+* @return {boolean}
+*/
+function hasArrayNature(obj) {
+ return (
+   // not null/false
+   !!obj && (
+   // arrays are objects, NodeLists are functions in Safari
+   typeof obj == 'object' || typeof obj == 'function') &&
+   // quacks like an array
+   'length' in obj &&
+   // not window
+   !('setInterval' in obj) &&
+   // no DOM node should be considered an array-like
+   // a 'select' element has 'length' and 'item' properties on IE8
+   typeof obj.nodeType != 'number' && (
+   // a real array
+   Array.isArray(obj) ||
+   // arguments
+   'callee' in obj ||
+   // HTMLCollection/NodeList
+   'item' in obj)
+ );
+}
+
+/**
+* Ensure that the argument is an array by wrapping it in an array if it is not.
+* Creates a copy of the argument if it is already an array.
+*
+* This is mostly useful idiomatically:
+*
+*   var createArrayFromMixed = require('createArrayFromMixed');
+*
+*   function takesOneOrMoreThings(things) {
+*     things = createArrayFromMixed(things);
+*     ...
+*   }
+*
+* This allows you to treat `things' as an array, but accept scalars in the API.
+*
+* If you need to convert an array-like object, like `arguments`, into an array
+* use toArray instead.
+*
+* @param {*} obj
+* @return {array}
+*/
+function createArrayFromMixed(obj) {
+ if (!hasArrayNature(obj)) {
+   return [obj];
+ } else if (Array.isArray(obj)) {
+   return obj.slice();
+ } else {
+   return toArray(obj);
+ }
+}
+
+module.exports = createArrayFromMixed;
+},{"150":150}],141:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+/*eslint-disable fb-www/unsafe-html*/
+
+var ExecutionEnvironment = _dereq_(136);
+
+var createArrayFromMixed = _dereq_(140);
+var getMarkupWrap = _dereq_(146);
+var invariant = _dereq_(150);
+
+/**
+* Dummy container used to render all markup.
+*/
+var dummyNode = ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
+
+/**
+* Pattern used by `getNodeName`.
+*/
+var nodeNamePattern = /^\s*<(\w+)/;
+
+/**
+* Extracts the `nodeName` of the first element in a string of markup.
+*
+* @param {string} markup String of markup.
+* @return {?string} Node name of the supplied markup.
+*/
+function getNodeName(markup) {
+ var nodeNameMatch = markup.match(nodeNamePattern);
+ return nodeNameMatch && nodeNameMatch[1].toLowerCase();
+}
+
+/**
+* Creates an array containing the nodes rendered from the supplied markup. The
+* optionally supplied `handleScript` function will be invoked once for each
+* <script> element that is rendered. If no `handleScript` function is supplied,
+* an exception is thrown if any <script> elements are rendered.
+*
+* @param {string} markup A string of valid HTML markup.
+* @param {?function} handleScript Invoked once for each rendered <script>.
+* @return {array<DOMElement|DOMTextNode>} An array of rendered nodes.
+*/
+function createNodesFromMarkup(markup, handleScript) {
+ var node = dummyNode;
+ !!!dummyNode ? "development" !== 'production' ? invariant(false, 'createNodesFromMarkup dummy not initialized') : invariant(false) : void 0;
+ var nodeName = getNodeName(markup);
+
+ var wrap = nodeName && getMarkupWrap(nodeName);
+ if (wrap) {
+   node.innerHTML = wrap[1] + markup + wrap[2];
+
+   var wrapDepth = wrap[0];
+   while (wrapDepth--) {
+     node = node.lastChild;
+   }
+ } else {
+   node.innerHTML = markup;
+ }
+
+ var scripts = node.getElementsByTagName('script');
+ if (scripts.length) {
+   !handleScript ? "development" !== 'production' ? invariant(false, 'createNodesFromMarkup(...): Unexpected <script> element rendered.') : invariant(false) : void 0;
+   createArrayFromMixed(scripts).forEach(handleScript);
+ }
+
+ var nodes = Array.from(node.childNodes);
+ while (node.lastChild) {
+   node.removeChild(node.lastChild);
+ }
+ return nodes;
+}
+
+module.exports = createNodesFromMarkup;
+},{"136":136,"140":140,"146":146,"150":150}],142:[function(_dereq_,module,exports){
+"use strict";
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+function makeEmptyFunction(arg) {
+ return function () {
+   return arg;
+ };
+}
+
+/**
+* This function accepts and discards inputs; it has no side effects. This is
+* primarily useful idiomatically for overridable function endpoints which
+* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
+*/
+var emptyFunction = function emptyFunction() {};
+
+emptyFunction.thatReturns = makeEmptyFunction;
+emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
+emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
+emptyFunction.thatReturnsNull = makeEmptyFunction(null);
+emptyFunction.thatReturnsThis = function () {
+ return this;
+};
+emptyFunction.thatReturnsArgument = function (arg) {
+ return arg;
+};
+
+module.exports = emptyFunction;
+},{}],143:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var emptyObject = {};
+
+if ("development" !== 'production') {
+ Object.freeze(emptyObject);
+}
+
+module.exports = emptyObject;
+},{}],144:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* @param {DOMElement} node input/textarea to focus
+*/
+
+function focusNode(node) {
+ // IE8 can throw "Can't move focus to the control because it is invisible,
+ // not enabled, or of a type that does not accept the focus." for all kinds of
+ // reasons that are too expensive and fragile to test.
+ try {
+   node.focus();
+ } catch (e) {}
+}
+
+module.exports = focusNode;
+},{}],145:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+/* eslint-disable fb-www/typeof-undefined */
+
+/**
+* Same as document.activeElement but wraps in a try-catch block. In IE it is
+* not safe to call document.activeElement if there is nothing focused.
+*
+* The activeElement will be null only if the document or document body is not
+* yet defined.
+*/
+function getActiveElement() /*?DOMElement*/{
+ if (typeof document === 'undefined') {
+   return null;
+ }
+ try {
+   return document.activeElement || document.body;
+ } catch (e) {
+   return document.body;
+ }
+}
+
+module.exports = getActiveElement;
+},{}],146:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/*eslint-disable fb-www/unsafe-html */
+
+var ExecutionEnvironment = _dereq_(136);
+
+var invariant = _dereq_(150);
+
+/**
+* Dummy container used to detect which wraps are necessary.
+*/
+var dummyNode = ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
+
+/**
+* Some browsers cannot use `innerHTML` to render certain elements standalone,
+* so we wrap them, render the wrapped nodes, then extract the desired node.
+*
+* In IE8, certain elements cannot render alone, so wrap all elements ('*').
+*/
+
+var shouldWrap = {};
+
+var selectWrap = [1, '<select multiple="true">', '</select>'];
+var tableWrap = [1, '<table>', '</table>'];
+var trWrap = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+
+var svgWrap = [1, '<svg xmlns="http://www.w3.org/2000/svg">', '</svg>'];
+
+var markupWrap = {
+ '*': [1, '?<div>', '</div>'],
+
+ 'area': [1, '<map>', '</map>'],
+ 'col': [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+ 'legend': [1, '<fieldset>', '</fieldset>'],
+ 'param': [1, '<object>', '</object>'],
+ 'tr': [2, '<table><tbody>', '</tbody></table>'],
+
+ 'optgroup': selectWrap,
+ 'option': selectWrap,
+
+ 'caption': tableWrap,
+ 'colgroup': tableWrap,
+ 'tbody': tableWrap,
+ 'tfoot': tableWrap,
+ 'thead': tableWrap,
+
+ 'td': trWrap,
+ 'th': trWrap
+};
+
+// Initialize the SVG elements since we know they'll always need to be wrapped
+// consistently. If they are created inside a <div> they will be initialized in
+// the wrong namespace (and will not display).
+var svgElements = ['circle', 'clipPath', 'defs', 'ellipse', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'text', 'tspan'];
+svgElements.forEach(function (nodeName) {
+ markupWrap[nodeName] = svgWrap;
+ shouldWrap[nodeName] = true;
+});
+
+/**
+* Gets the markup wrap configuration for the supplied `nodeName`.
+*
+* NOTE: This lazily detects which wraps are necessary for the current browser.
+*
+* @param {string} nodeName Lowercase `nodeName`.
+* @return {?array} Markup wrap configuration, if applicable.
+*/
+function getMarkupWrap(nodeName) {
+ !!!dummyNode ? "development" !== 'production' ? invariant(false, 'Markup wrapping node not initialized') : invariant(false) : void 0;
+ if (!markupWrap.hasOwnProperty(nodeName)) {
+   nodeName = '*';
+ }
+ if (!shouldWrap.hasOwnProperty(nodeName)) {
+   if (nodeName === '*') {
+     dummyNode.innerHTML = '<link />';
+   } else {
+     dummyNode.innerHTML = '<' + nodeName + '></' + nodeName + '>';
+   }
+   shouldWrap[nodeName] = !dummyNode.firstChild;
+ }
+ return shouldWrap[nodeName] ? markupWrap[nodeName] : null;
+}
+
+module.exports = getMarkupWrap;
+},{"136":136,"150":150}],147:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+'use strict';
+
+/**
+* Gets the scroll position of the supplied element or window.
+*
+* The return values are unbounded, unlike `getScrollPosition`. This means they
+* may be negative or exceed the element boundaries (which is possible using
+* inertial scrolling).
+*
+* @param {DOMWindow|DOMElement} scrollable
+* @return {object} Map with `x` and `y` keys.
+*/
+
+function getUnboundedScrollPosition(scrollable) {
+ if (scrollable === window) {
+   return {
+     x: window.pageXOffset || document.documentElement.scrollLeft,
+     y: window.pageYOffset || document.documentElement.scrollTop
+   };
+ }
+ return {
+   x: scrollable.scrollLeft,
+   y: scrollable.scrollTop
+ };
+}
+
+module.exports = getUnboundedScrollPosition;
+},{}],148:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+var _uppercasePattern = /([A-Z])/g;
+
+/**
+* Hyphenates a camelcased string, for example:
+*
+*   > hyphenate('backgroundColor')
+*   < "background-color"
+*
+* For CSS style names, use `hyphenateStyleName` instead which works properly
+* with all vendor prefixes, including `ms`.
+*
+* @param {string} string
+* @return {string}
+*/
+function hyphenate(string) {
+ return string.replace(_uppercasePattern, '-$1').toLowerCase();
+}
+
+module.exports = hyphenate;
+},{}],149:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+'use strict';
+
+var hyphenate = _dereq_(148);
+
+var msPattern = /^ms-/;
+
+/**
+* Hyphenates a camelcased CSS property name, for example:
+*
+*   > hyphenateStyleName('backgroundColor')
+*   < "background-color"
+*   > hyphenateStyleName('MozTransition')
+*   < "-moz-transition"
+*   > hyphenateStyleName('msTransition')
+*   < "-ms-transition"
+*
+* As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+* is converted to `-ms-`.
+*
+* @param {string} string
+* @return {string}
+*/
+function hyphenateStyleName(string) {
+ return hyphenate(string).replace(msPattern, '-ms-');
+}
+
+module.exports = hyphenateStyleName;
+},{"148":148}],150:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Use invariant() to assert state which your program assumes to be true.
+*
+* Provide sprintf-style format (only %s is supported) and arguments
+* to provide information about what broke and what you were
+* expecting.
+*
+* The invariant message will be stripped in production, but the invariant
+* will remain to ensure logic does not differ in production.
+*/
+
+function invariant(condition, format, a, b, c, d, e, f) {
+ if ("development" !== 'production') {
+   if (format === undefined) {
+     throw new Error('invariant requires an error message argument');
+   }
+ }
+
+ if (!condition) {
+   var error;
+   if (format === undefined) {
+     error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+   } else {
+     var args = [a, b, c, d, e, f];
+     var argIndex = 0;
+     error = new Error(format.replace(/%s/g, function () {
+       return args[argIndex++];
+     }));
+     error.name = 'Invariant Violation';
+   }
+
+   error.framesToPop = 1; // we don't care about invariant's own frame
+   throw error;
+ }
+}
+
+module.exports = invariant;
+},{}],151:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+/**
+* @param {*} object The object to check.
+* @return {boolean} Whether or not the object is a DOM node.
+*/
+function isNode(object) {
+ return !!(object && (typeof Node === 'function' ? object instanceof Node : typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string'));
+}
+
+module.exports = isNode;
+},{}],152:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+var isNode = _dereq_(151);
+
+/**
+* @param {*} object The object to check.
+* @return {boolean} Whether or not the object is a DOM text node.
+*/
+function isTextNode(object) {
+ return isNode(object) && object.nodeType == 3;
+}
+
+module.exports = isTextNode;
+},{"151":151}],153:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+* @typechecks static-only
+*/
+
+'use strict';
+
+/**
+* Memoizes the return value of a function that accepts one string argument.
+*/
+
+function memoizeStringOnly(callback) {
+ var cache = {};
+ return function (string) {
+   if (!cache.hasOwnProperty(string)) {
+     cache[string] = callback.call(this, string);
+   }
+   return cache[string];
+ };
+}
+
+module.exports = memoizeStringOnly;
+},{}],154:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(136);
+
+var performance;
+
+if (ExecutionEnvironment.canUseDOM) {
+ performance = window.performance || window.msPerformance || window.webkitPerformance;
+}
+
+module.exports = performance || {};
+},{"136":136}],155:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+var performance = _dereq_(154);
+
+var performanceNow;
+
+/**
+* Detect if we can use `window.performance.now()` and gracefully fallback to
+* `Date.now()` if it doesn't exist. We need to support Firefox < 15 for now
+* because of Facebook's testing infrastructure.
+*/
+if (performance.now) {
+ performanceNow = function performanceNow() {
+   return performance.now();
+ };
+} else {
+ performanceNow = function performanceNow() {
+   return Date.now();
+ };
+}
+
+module.exports = performanceNow;
+},{"154":154}],156:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*
+*/
+
+/*eslint-disable no-self-compare */
+
+'use strict';
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+* inlined Object.is polyfill to avoid requiring consumers ship their own
+* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+*/
+function is(x, y) {
+ // SameValue algorithm
+ if (x === y) {
+   // Steps 1-5, 7-10
+   // Steps 6.b-6.e: +0 != -0
+   // Added the nonzero y check to make Flow happy, but it is redundant
+   return x !== 0 || y !== 0 || 1 / x === 1 / y;
+ } else {
+   // Step 6.a: NaN == NaN
+   return x !== x && y !== y;
+ }
+}
+
+/**
+* Performs equality by iterating through keys on an object and returning false
+* when any key has values which are not strictly equal between the arguments.
+* Returns true when the values of all keys are strictly equal.
+*/
+function shallowEqual(objA, objB) {
+ if (is(objA, objB)) {
+   return true;
+ }
+
+ if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+   return false;
+ }
+
+ var keysA = Object.keys(objA);
+ var keysB = Object.keys(objB);
+
+ if (keysA.length !== keysB.length) {
+   return false;
+ }
+
+ // Test for A's keys different from B.
+ for (var i = 0; i < keysA.length; i++) {
+   if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+     return false;
+   }
+ }
+
+ return true;
+}
+
+module.exports = shallowEqual;
+},{}],157:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-2015, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var emptyFunction = _dereq_(142);
+
+/**
+* Similar to invariant but only logs a warning if the condition is not met.
+* This can be used to log issues in development environments in critical
+* paths. Removing the logging code for production environments will keep the
+* same logic and follow the same code paths.
+*/
+
+var warning = emptyFunction;
+
+if ("development" !== 'production') {
+ (function () {
+   var printWarning = function printWarning(format) {
+     for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+       args[_key - 1] = arguments[_key];
+     }
+
+     var argIndex = 0;
+     var message = 'Warning: ' + format.replace(/%s/g, function () {
+       return args[argIndex++];
+     });
+     if (typeof console !== 'undefined') {
+       console.error(message);
+     }
+     try {
+       // --- Welcome to debugging React ---
+       // This error was thrown as a convenience so that you can use this stack
+       // to find the callsite that caused this warning to fire.
+       throw new Error(message);
+     } catch (x) {}
+   };
+
+   warning = function warning(condition, format) {
+     if (format === undefined) {
+       throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
+     }
+
+     if (format.indexOf('Failed Composite propType: ') === 0) {
+       return; // Ignore CompositeComponent proptype check.
+     }
+
+     if (!condition) {
+       for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+         args[_key2 - 2] = arguments[_key2];
+       }
+
+       printWarning.apply(undefined, [format].concat(args));
+     }
+   };
+ })();
+}
+
+module.exports = warning;
+},{"142":142}],158:[function(_dereq_,module,exports){
+'use strict';
+/* eslint-disable no-unused-vars */
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+ if (val === null || val === undefined) {
+   throw new TypeError('Object.assign cannot be called with null or undefined');
+ }
+
+ return Object(val);
+}
+
+function shouldUseNative() {
+ try {
+   if (!Object.assign) {
+     return false;
+   }
+
+   // Detect buggy property enumeration order in older V8 versions.
+
+   // https://bugs.chromium.org/p/v8/issues/detail?id=4118
+   var test1 = new String('abc');  // eslint-disable-line
+   test1[5] = 'de';
+   if (Object.getOwnPropertyNames(test1)[0] === '5') {
+     return false;
+   }
+
+   // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+   var test2 = {};
+   for (var i = 0; i < 10; i++) {
+     test2['_' + String.fromCharCode(i)] = i;
+   }
+   var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+     return test2[n];
+   });
+   if (order2.join('') !== '0123456789') {
+     return false;
+   }
+
+   // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+   var test3 = {};
+   'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+     test3[letter] = letter;
+   });
+   if (Object.keys(Object.assign({}, test3)).join('') !==
+       'abcdefghijklmnopqrst') {
+     return false;
+   }
+
+   return true;
+ } catch (e) {
+   // We don't expect any of the above to throw, but better to be safe.
+   return false;
+ }
+}
+
+module.exports = shouldUseNative() ? Object.assign : function (target, source) {
+ var from;
+ var to = toObject(target);
+ var symbols;
+
+ for (var s = 1; s < arguments.length; s++) {
+   from = Object(arguments[s]);
+
+   for (var key in from) {
+     if (hasOwnProperty.call(from, key)) {
+       to[key] = from[key];
+     }
+   }
+
+   if (Object.getOwnPropertySymbols) {
+     symbols = Object.getOwnPropertySymbols(from);
+     for (var i = 0; i < symbols.length; i++) {
+       if (propIsEnumerable.call(from, symbols[i])) {
+         to[symbols[i]] = from[symbols[i]];
+       }
+     }
+   }
+ }
+
+ return to;
+};
+
+},{}]},{},[48])(48);
+});
+});
diff --git a/devtools/client/inspector/markup/test/lib_react_dom_16.2.0_min.js b/devtools/client/inspector/markup/test/lib_react_dom_16.2.0_min.js
new file mode 100644
index 0000000000..11fba1d71a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_react_dom_16.2.0_min.js
@@ -0,0 +1,193 @@
+/** @license React v16.2.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ Modernizr 3.0.0pre (Custom Build) | MIT
+*/
+'use strict';(function(na,l){"object"===typeof exports&&"undefined"!==typeof module?module.exports=l(require("react")):"function"===typeof define&&define.amd?define(["react"],l):na.ReactDOM=l(na.React)})(this,function(na){function l(a){for(var b=arguments.length-1,c="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+a,d=0;d<b;d++)c+="\x26args[]\x3d"+encodeURIComponent(arguments[d+1]);b=Error(c+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");
+b.name="Invariant Violation";b.framesToPop=1;throw b;}function va(a,b){return(a&b)===b}function Xc(a,b){if(Yc.hasOwnProperty(a)||2<a.length&&("o"===a[0]||"O"===a[0])&&("n"===a[1]||"N"===a[1]))return!1;if(null===b)return!0;switch(typeof b){case "boolean":return Yc.hasOwnProperty(a)?a=!0:(b=Ub(a))?a=b.hasBooleanValue||b.hasStringBooleanValue||b.hasOverloadedBooleanValue:(a=a.toLowerCase().slice(0,5),a="data-"===a||"aria-"===a),a;case "undefined":case "number":case "string":case "object":return!0;default:return!1}}
+function Ub(a){return ib.hasOwnProperty(a)?ib[a]:null}function Zc(){if(jb)for(var a in ba){var b=ba[a],c=jb.indexOf(a);-1<c?void 0:l("96",a);if(!oa[c]){b.extractEvents?void 0:l("97",a);oa[c]=b;c=b.eventTypes;for(var d in c){var e=void 0;var f=c[d],g=b,h=d;Vb.hasOwnProperty(h)?l("99",h):void 0;Vb[h]=f;var k=f.phasedRegistrationNames;if(k){for(e in k)k.hasOwnProperty(e)&&$c(k[e],g,h);e=!0}else f.registrationName?($c(f.registrationName,g,h),e=!0):e=!1;e?void 0:l("98",d,a)}}}}function $c(a,b,c){ca[a]?
+l("100",a):void 0;ca[a]=b;kb[a]=b.eventTypes[c].dependencies}function ad(a){jb?l("101"):void 0;jb=Array.prototype.slice.call(a);Zc()}function bd(a){var b=!1,c;for(c in a)if(a.hasOwnProperty(c)){var d=a[c];ba.hasOwnProperty(c)&&ba[c]===d||(ba[c]?l("102",c):void 0,ba[c]=d,b=!0)}b&&Zc()}function lb(a){return function(){return a}}function cd(a,b,c,d){b=a.type||"unknown-event";a.currentTarget=dd(d);y.invokeGuardedCallbackAndCatchFirstError(b,c,void 0,a);a.currentTarget=null}function wa(a,b){null==b?l("30"):
+void 0;if(null==a)return b;if(Array.isArray(a)){if(Array.isArray(b))return a.push.apply(a,b),a;a.push(b);return a}return Array.isArray(b)?[a].concat(b):[a,b]}function da(a,b,c){Array.isArray(a)?a.forEach(b,c):a&&b.call(c,a)}function Wb(a,b){var c=a.stateNode;if(!c)return null;var d=Xb(c);if(!d)return null;c=d[b];a:switch(b){case "onClick":case "onClickCapture":case "onDoubleClick":case "onDoubleClickCapture":case "onMouseDown":case "onMouseDownCapture":case "onMouseMove":case "onMouseMoveCapture":case "onMouseUp":case "onMouseUpCapture":(d=
+!d.disabled)||(a=a.type,d=!("button"===a||"input"===a||"select"===a||"textarea"===a));a=!d;break a;default:a=!1}if(a)return null;c&&"function"!==typeof c?l("231",b,typeof c):void 0;return c}function ed(a,b,c,d){for(var e,f=0;f<oa.length;f++){var g=oa[f];g&&(g=g.extractEvents(a,b,c,d))&&(e=wa(e,g))}return e}function Yb(a){a&&(pa=wa(pa,a))}function Zb(a){var b=pa;pa=null;b&&(a?da(b,$e):da(b,af),pa?l("95"):void 0,y.rethrowCaughtError())}function W(a){if(a[O])return a[O];for(var b=[];!a[O];)if(b.push(a),
+a.parentNode)a=a.parentNode;else return null;var c=void 0,d=a[O];if(5===d.tag||6===d.tag)return d;for(;a&&(d=a[O]);a=b.pop())c=d;return c}function xa(a){if(5===a.tag||6===a.tag)return a.stateNode;l("33")}function fd(a){return a[ea]||null}function T(a){do a=a["return"];while(a&&5!==a.tag);return a?a:null}function gd(a,b,c){for(var d=[];a;)d.push(a),a=T(a);for(a=d.length;0<a--;)b(d[a],"captured",c);for(a=0;a<d.length;a++)b(d[a],"bubbled",c)}function hd(a,b,c){if(b=Wb(a,c.dispatchConfig.phasedRegistrationNames[b]))c._dispatchListeners=
+wa(c._dispatchListeners,b),c._dispatchInstances=wa(c._dispatchInstances,a)}function bf(a){a&&a.dispatchConfig.phasedRegistrationNames&&gd(a._targetInst,hd,a)}function cf(a){if(a&&a.dispatchConfig.phasedRegistrationNames){var b=a._targetInst;b=b?T(b):null;gd(b,hd,a)}}function $b(a,b,c){a&&c&&c.dispatchConfig.registrationName&&(b=Wb(a,c.dispatchConfig.registrationName))&&(c._dispatchListeners=wa(c._dispatchListeners,b),c._dispatchInstances=wa(c._dispatchInstances,a))}function df(a){a&&a.dispatchConfig.registrationName&&
+$b(a._targetInst,null,a)}function ya(a){da(a,bf)}function id(a,b,c,d){if(c&&d)a:{var e=c;for(var f=d,g=0,h=e;h;h=T(h))g++;h=0;for(var k=f;k;k=T(k))h++;for(;0<g-h;)e=T(e),g--;for(;0<h-g;)f=T(f),h--;for(;g--;){if(e===f||e===f.alternate)break a;e=T(e);f=T(f)}e=null}else e=null;f=e;for(e=[];c&&c!==f;){g=c.alternate;if(null!==g&&g===f)break;e.push(c);c=T(c)}for(c=[];d&&d!==f;){g=d.alternate;if(null!==g&&g===f)break;c.push(d);d=T(d)}for(d=0;d<e.length;d++)$b(e[d],"bubbled",a);for(a=c.length;0<a--;)$b(c[a],
+"captured",b)}function jd(){!ac&&P.canUseDOM&&(ac="textContent"in document.documentElement?"textContent":"innerText");return ac}function kd(){if(H._fallbackText)return H._fallbackText;var a,b=H._startText,c=b.length,d,e=ld(),f=e.length;for(a=0;a<c&&b[a]===e[a];a++);var g=c-a;for(d=1;d<=g&&b[c-d]===e[f-d];d++);H._fallbackText=e.slice(a,1<d?1-d:void 0);return H._fallbackText}function ld(){return"value"in H._root?H._root.value:H._root[jd()]}function n(a,b,c,d){this.dispatchConfig=a;this._targetInst=
+b;this.nativeEvent=c;a=this.constructor.Interface;for(var e in a)a.hasOwnProperty(e)&&((b=a[e])?this[e]=b(c):"target"===e?this.target=d:this[e]=c[e]);this.isDefaultPrevented=(null!=c.defaultPrevented?c.defaultPrevented:!1===c.returnValue)?G.thatReturnsTrue:G.thatReturnsFalse;this.isPropagationStopped=G.thatReturnsFalse;return this}function ef(a,b,c,d){if(this.eventPool.length){var e=this.eventPool.pop();this.call(e,a,b,c,d);return e}return new this(a,b,c,d)}function ff(a){a instanceof this?void 0:
+l("223");a.destructor();10>this.eventPool.length&&this.eventPool.push(a)}function md(a){a.eventPool=[];a.getPooled=ef;a.release=ff}function nd(a,b,c,d){return n.call(this,a,b,c,d)}function od(a,b,c,d){return n.call(this,a,b,c,d)}function gf(){var a=window.opera;return"object"===typeof a&&"function"===typeof a.version&&12>=parseInt(a.version(),10)}function pd(a,b){switch(a){case "topKeyUp":return-1!==hf.indexOf(b.keyCode);case "topKeyDown":return 229!==b.keyCode;case "topKeyPress":case "topMouseDown":case "topBlur":return!0;
+default:return!1}}function qd(a){a=a.detail;return"object"===typeof a&&"data"in a?a.data:null}function jf(a,b){switch(a){case "topCompositionEnd":return qd(b);case "topKeyPress":if(32!==b.which)return null;rd=!0;return sd;case "topTextInput":return a=b.data,a===sd&&rd?null:a;default:return null}}function kf(a,b){if(za)return"topCompositionEnd"===a||!bc&&pd(a,b)?(a=kd(),H._root=null,H._startText=null,H._fallbackText=null,za=!1,a):null;switch(a){case "topPaste":return null;case "topKeyPress":if(!(b.ctrlKey||
+b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1<b.char.length)return b.char;if(b.which)return String.fromCharCode(b.which)}return null;case "topCompositionEnd":return td?null:b.data;default:return null}}function ud(a){if(a=vd(a)){mb&&"function"===typeof mb.restoreControlledState?void 0:l("194");var b=Xb(a.stateNode);mb.restoreControlledState(a.stateNode,a.type,b)}}function wd(a){Ga?fa?fa.push(a):fa=[a]:Ga=a}function xd(){if(Ga){var a=Ga,b=fa;fa=Ga=null;ud(a);if(b)for(a=0;a<b.length;a++)ud(b[a])}}
+function cc(a,b){if(dc)return ec(a,b);dc=!0;try{return ec(a,b)}finally{dc=!1,xd()}}function yd(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return"input"===b?!!lf[a.type]:"textarea"===b?!0:!1}function fc(a){a=a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}function gc(a,b){if(!P.canUseDOM||b&&!("addEventListener"in document))return!1;b="on"+a;var c=b in document;c||(c=document.createElement("div"),c.setAttribute(b,"return;"),
+c="function"===typeof c[b]);!c&&zd&&"wheel"===a&&(c=document.implementation.hasFeature("Events.wheel","3.0"));return c}function Ad(a){var b=a.type;return(a=a.nodeName)&&"input"===a.toLowerCase()&&("checkbox"===b||"radio"===b)}function mf(a){var b=Ad(a)?"checked":"value",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=""+a[b];if(!a.hasOwnProperty(b)&&"function"===typeof c.get&&"function"===typeof c.set)return Object.defineProperty(a,b,{enumerable:c.enumerable,configurable:!0,get:function(){return c.get.call(this)},
+set:function(a){d=""+a;c.set.call(this,a)}}),{getValue:function(){return d},setValue:function(a){d=""+a},stopTracking:function(){a._valueTracker=null;delete a[b]}}}function nb(a){a._valueTracker||(a._valueTracker=mf(a))}function Bd(a){if(!a)return!1;var b=a._valueTracker;if(!b)return!0;var c=b.getValue();var d="";a&&(d=Ad(a)?a.checked?"true":"false":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function Cd(a,b,c){a=n.getPooled(Dd.change,a,b,c);a.type="change";wd(c);ya(a);return a}function nf(a){Yb(a);
+Zb(!1)}function ob(a){var b=xa(a);if(Bd(b))return a}function of(a,b){if("topChange"===a)return b}function Ed(){Ha&&(Ha.detachEvent("onpropertychange",Fd),Oa=Ha=null)}function Fd(a){"value"===a.propertyName&&ob(Oa)&&(a=Cd(Oa,a,fc(a)),cc(nf,a))}function pf(a,b,c){"topFocus"===a?(Ed(),Ha=b,Oa=c,Ha.attachEvent("onpropertychange",Fd)):"topBlur"===a&&Ed()}function qf(a,b){if("topSelectionChange"===a||"topKeyUp"===a||"topKeyDown"===a)return ob(Oa)}function rf(a,b){if("topClick"===a)return ob(b)}function sf(a,
+b){if("topInput"===a||"topChange"===a)return ob(b)}function Aa(a,b,c,d){return n.call(this,a,b,c,d)}function tf(a){var b=this.nativeEvent;return b.getModifierState?b.getModifierState(a):(a=uf[a])?!!b[a]:!1}function hc(a){return tf}function qa(a,b,c,d){return n.call(this,a,b,c,d)}function Pa(a){a=a.type;return"string"===typeof a?a:"function"===typeof a?a.displayName||a.name:null}function Qa(a){var b=a;if(a.alternate)for(;b["return"];)b=b["return"];else{if(0!==(b.effectTag&2))return 1;for(;b["return"];)if(b=
+b["return"],0!==(b.effectTag&2))return 1}return 3===b.tag?2:3}function vf(a){return(a=a._reactInternalFiber)?2===Qa(a):!1}function Gd(a){2!==Qa(a)?l("188"):void 0}function Hd(a){var b=a.alternate;if(!b)return b=Qa(a),3===b?l("188"):void 0,1===b?null:a;for(var c=a,d=b;;){var e=c["return"],f=e?e.alternate:null;if(!e||!f)break;if(e.child===f.child){for(var g=e.child;g;){if(g===c)return Gd(e),a;if(g===d)return Gd(e),b;g=g.sibling}l("188")}if(c["return"]!==d["return"])c=e,d=f;else{g=!1;for(var h=e.child;h;){if(h===
+c){g=!0;c=e;d=f;break}if(h===d){g=!0;d=e;c=f;break}h=h.sibling}if(!g){for(h=f.child;h;){if(h===c){g=!0;c=f;d=e;break}if(h===d){g=!0;d=f;c=e;break}h=h.sibling}g?void 0:l("189")}}c.alternate!==d?l("190"):void 0}3!==c.tag?l("188"):void 0;return c.stateNode.current===c?a:b}function wf(a){a=Hd(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child)b.child["return"]=b,b=b.child;else{if(b===a)break;for(;!b.sibling;){if(!b["return"]||b["return"]===a)return null;b=b["return"]}b.sibling["return"]=
+b["return"];b=b.sibling}}return null}function xf(a){a=Hd(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child&&4!==b.tag)b.child["return"]=b,b=b.child;else{if(b===a)break;for(;!b.sibling;){if(!b["return"]||b["return"]===a)return null;b=b["return"]}b.sibling["return"]=b["return"];b=b.sibling}}return null}function yf(a){var b=a.targetInst;do{if(!b){a.ancestors.push(b);break}var c;for(c=b;c["return"];)c=c["return"];c=3!==c.tag?null:c.stateNode.containerInfo;if(!c)break;a.ancestors.push(b);
+b=W(c)}while(b);for(c=0;c<a.ancestors.length;c++)b=a.ancestors[c],pb(a.topLevelType,b,a.nativeEvent,fc(a.nativeEvent))}function ic(a){Ra=!!a}function r(a,b,c){return c?Id.listen(c,b,jc.bind(null,a)):null}function ha(a,b,c){return c?Id.capture(c,b,jc.bind(null,a)):null}function jc(a,b){if(Ra){var c=fc(b);c=W(c);null===c||"number"!==typeof c.tag||2===Qa(c)||(c=null);if(qb.length){var d=qb.pop();d.topLevelType=a;d.nativeEvent=b;d.targetInst=c;a=d}else a={topLevelType:a,nativeEvent:b,targetInst:c,ancestors:[]};
+try{cc(yf,a)}finally{a.topLevelType=null,a.nativeEvent=null,a.targetInst=null,a.ancestors.length=0,10>qb.length&&qb.push(a)}}}function rb(a,b){var c={};c[a.toLowerCase()]=b.toLowerCase();c["Webkit"+a]="webkit"+b;c["Moz"+a]="moz"+b;c["ms"+a]="MS"+b;c["O"+a]="o"+b.toLowerCase();return c}function sb(a){if(kc[a])return kc[a];if(!U[a])return a;var b=U[a],c;for(c in b)if(b.hasOwnProperty(c)&&c in Jd)return kc[a]=b[c];return""}function Kd(a){Object.prototype.hasOwnProperty.call(a,tb)||(a[tb]=zf++,Ld[a[tb]]=
+{});return Ld[a[tb]]}function Md(a,b){return a===b?0!==a||0!==b||1/a===1/b:a!==a&&b!==b}function Nd(a,b){return a&&b?a===b?!0:Od(a)?!1:Od(b)?Nd(a,b.parentNode):"contains"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1}function Pd(a){for(;a&&a.firstChild;)a=a.firstChild;return a}function Qd(a,b){var c=Pd(a);a=0;for(var d;c;){if(3===c.nodeType){d=a+c.textContent.length;if(a<=b&&d>=b)return{node:c,offset:b-a};a=d}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=
+c.parentNode}c=void 0}c=Pd(c)}}function lc(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&("input"===b&&"text"===a.type||"textarea"===b||"true"===a.contentEditable)}function Rd(a,b){if(mc||null==X||X!==nc())return null;var c=X;"selectionStart"in c&&lc(c)?c={start:c.selectionStart,end:c.selectionEnd}:window.getSelection?(c=window.getSelection(),c={anchorNode:c.anchorNode,anchorOffset:c.anchorOffset,focusNode:c.focusNode,focusOffset:c.focusOffset}):c=void 0;return Sa&&oc(Sa,c)?null:(Sa=
+c,a=n.getPooled(Sd.select,pc,a,b),a.type="select",a.target=X,ya(a),a)}function Td(a,b,c,d){return n.call(this,a,b,c,d)}function Ud(a,b,c,d){return n.call(this,a,b,c,d)}function Vd(a,b,c,d){return n.call(this,a,b,c,d)}function ub(a){var b=a.keyCode;"charCode"in a?(a=a.charCode,0===a&&13===b&&(a=13)):a=b;return 32<=a||13===a?a:0}function Wd(a,b,c,d){return n.call(this,a,b,c,d)}function Xd(a,b,c,d){return n.call(this,a,b,c,d)}function Yd(a,b,c,d){return n.call(this,a,b,c,d)}function Zd(a,b,c,d){return n.call(this,
+a,b,c,d)}function $d(a,b,c,d){return n.call(this,a,b,c,d)}function I(a,b){0>ra||(a.current=vb[ra],vb[ra]=null,ra--)}function M(a,b,c){ra++;vb[ra]=a.current;a.current=b}function Ta(a){return Ua(a)?wb:ia.current}function Va(a,b){var c=a.type.contextTypes;if(!c)return ja;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=
+e);return e}function Ua(a){return 2===a.tag&&null!=a.type.childContextTypes}function ae(a){Ua(a)&&(I(J,a),I(ia,a))}function be(a,b,c){null!=ia.cursor?l("168"):void 0;M(ia,b,a);M(J,c,a)}function ce(a,b){var c=a.stateNode,d=a.type.childContextTypes;if("function"!==typeof c.getChildContext)return b;c=c.getChildContext();for(var e in c)e in d?void 0:l("108",Pa(a)||"Unknown",e);return C({},b,c)}function xb(a){if(!Ua(a))return!1;var b=a.stateNode;b=b&&b.__reactInternalMemoizedMergedChildContext||ja;wb=
+ia.current;M(ia,b,a);M(J,J.current,a);return!0}function de(a,b){var c=a.stateNode;c?void 0:l("169");if(b){var d=ce(a,wb);c.__reactInternalMemoizedMergedChildContext=d;I(J,a);I(ia,a);M(ia,d,a)}else I(J,a);M(J,b,a)}function Q(a,b,c){this.tag=a;this.key=b;this.stateNode=this.type=null;this.sibling=this.child=this["return"]=null;this.index=0;this.memoizedState=this.updateQueue=this.memoizedProps=this.pendingProps=this.ref=null;this.internalContextTag=c;this.effectTag=0;this.lastEffect=this.firstEffect=
+this.nextEffect=null;this.expirationTime=0;this.alternate=null}function yb(a,b,c){var d=a.alternate;null===d?(d=new Q(a.tag,a.key,a.internalContextTag),d.type=a.type,d.stateNode=a.stateNode,d.alternate=a,a.alternate=d):(d.effectTag=0,d.nextEffect=null,d.firstEffect=null,d.lastEffect=null);d.expirationTime=c;d.pendingProps=b;d.child=a.child;d.memoizedProps=a.memoizedProps;d.memoizedState=a.memoizedState;d.updateQueue=a.updateQueue;d.sibling=a.sibling;d.index=a.index;d.ref=a.ref;return d}function qc(a,
+b,c){var d=void 0,e=a.type,f=a.key;"function"===typeof e?(d=e.prototype&&e.prototype.isReactComponent?new Q(2,f,b):new Q(0,f,b),d.type=e,d.pendingProps=a.props):"string"===typeof e?(d=new Q(5,f,b),d.type=e,d.pendingProps=a.props):"object"===typeof e&&null!==e&&"number"===typeof e.tag?(d=e,d.pendingProps=a.props):l("130",null==e?e:typeof e,"");d.expirationTime=c;return d}function zb(a,b,c,d){b=new Q(10,d,b);b.pendingProps=a;b.expirationTime=c;return b}function rc(a,b,c){b=new Q(6,null,b);b.pendingProps=
+a;b.expirationTime=c;return b}function sc(a,b,c){b=new Q(7,a.key,b);b.type=a.handler;b.pendingProps=a;b.expirationTime=c;return b}function tc(a,b,c){a=new Q(9,null,b);a.expirationTime=c;return a}function uc(a,b,c){b=new Q(4,a.key,b);b.pendingProps=a.children||[];b.expirationTime=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}function ee(a){return function(b){try{return a(b)}catch(c){}}}function Af(a){if("undefined"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;
+var b=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(b.isDisabled||!b.supportsFiber)return!0;try{var c=b.inject(a);vc=ee(function(a){return b.onCommitFiberRoot(c,a)});wc=ee(function(a){return b.onCommitFiberUnmount(c,a)})}catch(d){}return!0}function fe(a){"function"===typeof vc&&vc(a)}function ge(a){"function"===typeof wc&&wc(a)}function he(a){return{baseState:a,expirationTime:0,first:null,last:null,callbackList:null,hasForceUpdate:!1,isInitialized:!1}}function Ab(a,b){null===a.last?a.first=a.last=b:(a.last.next=
+b,a.last=b);if(0===a.expirationTime||a.expirationTime>b.expirationTime)a.expirationTime=b.expirationTime}function Bb(a,b){var c=a.alternate,d=a.updateQueue;null===d&&(d=a.updateQueue=he(null));null!==c?(a=c.updateQueue,null===a&&(a=c.updateQueue=he(null))):a=null;a=a!==d?a:null;null===a?Ab(d,b):null===d.last||null===a.last?(Ab(d,b),Ab(a,b)):(Ab(d,b),a.last=b)}function ie(a,b,c,d){a=a.partialState;return"function"===typeof a?a.call(b,c,d):a}function xc(a,b,c,d,e,f){null!==a&&a.updateQueue===c&&(c=
+b.updateQueue={baseState:c.baseState,expirationTime:c.expirationTime,first:c.first,last:c.last,isInitialized:c.isInitialized,callbackList:null,hasForceUpdate:!1});c.expirationTime=0;c.isInitialized?a=c.baseState:(a=c.baseState=b.memoizedState,c.isInitialized=!0);for(var g=!0,h=c.first,k=!1;null!==h;){var l=h.expirationTime;if(l>f){var D=c.expirationTime;if(0===D||D>l)c.expirationTime=l;k||(k=!0,c.baseState=a)}else{k||(c.first=h.next,null===c.first&&(c.last=null));if(h.isReplace)a=ie(h,d,a,e),g=!0;
+else if(l=ie(h,d,a,e))a=g?C({},a,l):C(a,l),g=!1;h.isForced&&(c.hasForceUpdate=!0);null!==h.callback&&(l=c.callbackList,null===l&&(l=c.callbackList=[]),l.push(h))}h=h.next}null!==c.callbackList?b.effectTag|=32:null!==c.first||c.hasForceUpdate||(b.updateQueue=null);k||(c.baseState=a);return a}function je(a,b){var c=a.callbackList;if(null!==c)for(a.callbackList=null,a=0;a<c.length;a++){var d=c[a],e=d.callback;d.callback=null;"function"!==typeof e?l("191",e):void 0;e.call(b)}}function Wa(a){if(null===
+a||"undefined"===typeof a)return null;a=ke&&a[ke]||a["@@iterator"];return"function"===typeof a?a:null}function Xa(a,b){var c=b.ref;if(null!==c&&"function"!==typeof c){if(b._owner){b=b._owner;var d=void 0;b&&(2!==b.tag?l("110"):void 0,d=b.stateNode);d?void 0:l("147",c);var e=""+c;if(null!==a&&null!==a.ref&&a.ref._stringRef===e)return a.ref;a=function(a){var b=d.refs===ja?d.refs={}:d.refs;null===a?delete b[e]:b[e]=a};a._stringRef=e;return a}"string"!==typeof c?l("148"):void 0;b._owner?void 0:l("149",
+c)}return c}function Cb(a,b){"textarea"!==a.type&&l("31","[object Object]"===Object.prototype.toString.call(b)?"object with keys {"+Object.keys(b).join(", ")+"}":b,"")}function le(a){function b(b,c){if(a){var d=b.lastEffect;null!==d?(d.nextEffect=c,b.lastEffect=c):b.firstEffect=b.lastEffect=c;c.nextEffect=null;c.effectTag=8}}function c(c,d){if(!a)return null;for(;null!==d;)b(c,d),d=d.sibling;return null}function d(a,b){for(a=new Map;null!==b;)null!==b.key?a.set(b.key,b):a.set(b.index,b),b=b.sibling;
+return a}function e(a,b,c){a=yb(a,b,c);a.index=0;a.sibling=null;return a}function f(b,c,d){b.index=d;if(!a)return c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.effectTag=2,c):d;b.effectTag=2;return c}function g(b){a&&null===b.alternate&&(b.effectTag=2);return b}function h(a,b,c,d){if(null===b||6!==b.tag)return b=rc(c,a.internalContextTag,d),b["return"]=a,b;b=e(b,c,d);b["return"]=a;return b}function k(a,b,c,d){if(null!==b&&b.type===c.type)return d=e(b,c.props,d),d.ref=Xa(b,c),d["return"]=a,d;
+d=qc(c,a.internalContextTag,d);d.ref=Xa(b,c);d["return"]=a;return d}function m(a,b,c,d){if(null===b||7!==b.tag)return b=sc(c,a.internalContextTag,d),b["return"]=a,b;b=e(b,c,d);b["return"]=a;return b}function D(a,b,c,d){if(null===b||9!==b.tag)return b=tc(c,a.internalContextTag,d),b.type=c.value,b["return"]=a,b;b=e(b,null,d);b.type=c.value;b["return"]=a;return b}function A(a,b,c,d){if(null===b||4!==b.tag||b.stateNode.containerInfo!==c.containerInfo||b.stateNode.implementation!==c.implementation)return b=
+uc(c,a.internalContextTag,d),b["return"]=a,b;b=e(b,c.children||[],d);b["return"]=a;return b}function v(a,b,c,d,g){if(null===b||10!==b.tag)return b=zb(c,a.internalContextTag,d,g),b["return"]=a,b;b=e(b,c,d);b["return"]=a;return b}function K(a,b,c){if("string"===typeof b||"number"===typeof b)return b=rc(""+b,a.internalContextTag,c),b["return"]=a,b;if("object"===typeof b&&null!==b){switch(b.$$typeof){case Db:if(b.type===sa)return b=zb(b.props.children,a.internalContextTag,c,b.key),b["return"]=a,b;c=qc(b,
+a.internalContextTag,c);c.ref=Xa(null,b);c["return"]=a;return c;case Eb:return b=sc(b,a.internalContextTag,c),b["return"]=a,b;case Fb:return c=tc(b,a.internalContextTag,c),c.type=b.value,c["return"]=a,c;case Ya:return b=uc(b,a.internalContextTag,c),b["return"]=a,b}if(Gb(b)||Wa(b))return b=zb(b,a.internalContextTag,c,null),b["return"]=a,b;Cb(a,b)}return null}function L(a,b,c,d){var e=null!==b?b.key:null;if("string"===typeof c||"number"===typeof c)return null!==e?null:h(a,b,""+c,d);if("object"===typeof c&&
+null!==c){switch(c.$$typeof){case Db:return c.key===e?c.type===sa?v(a,b,c.props.children,d,e):k(a,b,c,d):null;case Eb:return c.key===e?m(a,b,c,d):null;case Fb:return null===e?D(a,b,c,d):null;case Ya:return c.key===e?A(a,b,c,d):null}if(Gb(c)||Wa(c))return null!==e?null:v(a,b,c,d,null);Cb(a,c)}return null}function R(a,b,c,d,e){if("string"===typeof d||"number"===typeof d)return a=a.get(c)||null,h(b,a,""+d,e);if("object"===typeof d&&null!==d){switch(d.$$typeof){case Db:return a=a.get(null===d.key?c:d.key)||
+null,d.type===sa?v(b,a,d.props.children,e,d.key):k(b,a,d,e);case Eb:return a=a.get(null===d.key?c:d.key)||null,m(b,a,d,e);case Fb:return a=a.get(c)||null,D(b,a,d,e);case Ya:return a=a.get(null===d.key?c:d.key)||null,A(b,a,d,e)}if(Gb(d)||Wa(d))return a=a.get(c)||null,v(b,a,d,e,null);Cb(b,d)}return null}function n(e,g,h,z){for(var t=null,q=null,p=g,x=g=0,k=null;null!==p&&x<h.length;x++){p.index>x?(k=p,p=null):k=p.sibling;var l=L(e,p,h[x],z);if(null===l){null===p&&(p=k);break}a&&p&&null===l.alternate&&
+b(e,p);g=f(l,g,x);null===q?t=l:q.sibling=l;q=l;p=k}if(x===h.length)return c(e,p),t;if(null===p){for(;x<h.length;x++)if(p=K(e,h[x],z))g=f(p,g,x),null===q?t=p:q.sibling=p,q=p;return t}for(p=d(e,p);x<h.length;x++)if(k=R(p,e,x,h[x],z)){if(a&&null!==k.alternate)p["delete"](null===k.key?x:k.key);g=f(k,g,x);null===q?t=k:q.sibling=k;q=k}a&&p.forEach(function(a){return b(e,a)});return t}function r(e,g,h,z){var t=Wa(h);"function"!==typeof t?l("150"):void 0;h=t.call(h);null==h?l("151"):void 0;for(var q=t=null,
+p=g,x=g=0,k=null,m=h.next();null!==p&&!m.done;x++,m=h.next()){p.index>x?(k=p,p=null):k=p.sibling;var La=L(e,p,m.value,z);if(null===La){p||(p=k);break}a&&p&&null===La.alternate&&b(e,p);g=f(La,g,x);null===q?t=La:q.sibling=La;q=La;p=k}if(m.done)return c(e,p),t;if(null===p){for(;!m.done;x++,m=h.next())m=K(e,m.value,z),null!==m&&(g=f(m,g,x),null===q?t=m:q.sibling=m,q=m);return t}for(p=d(e,p);!m.done;x++,m=h.next())if(m=R(p,e,x,m.value,z),null!==m){if(a&&null!==m.alternate)p["delete"](null===m.key?x:m.key);
+g=f(m,g,x);null===q?t=m:q.sibling=m;q=m}a&&p.forEach(function(a){return b(e,a)});return t}return function(a,d,f,h){"object"===typeof f&&null!==f&&f.type===sa&&null===f.key&&(f=f.props.children);var k="object"===typeof f&&null!==f;if(k)switch(f.$$typeof){case Db:a:{var q=f.key;for(k=d;null!==k;){if(k.key===q)if(10===k.tag?f.type===sa:k.type===f.type){c(a,k.sibling);d=e(k,f.type===sa?f.props.children:f.props,h);d.ref=Xa(k,f);d["return"]=a;a=d;break a}else{c(a,k);break}else b(a,k);k=k.sibling}f.type===
+sa?(d=zb(f.props.children,a.internalContextTag,h,f.key),d["return"]=a,a=d):(h=qc(f,a.internalContextTag,h),h.ref=Xa(d,f),h["return"]=a,a=h)}return g(a);case Eb:a:{for(k=f.key;null!==d;){if(d.key===k)if(7===d.tag){c(a,d.sibling);d=e(d,f,h);d["return"]=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=sc(f,a.internalContextTag,h);d["return"]=a;a=d}return g(a);case Fb:a:{if(null!==d)if(9===d.tag){c(a,d.sibling);d=e(d,null,h);d.type=f.value;d["return"]=a;a=d;break a}else c(a,d);d=tc(f,a.internalContextTag,
+h);d.type=f.value;d["return"]=a;a=d}return g(a);case Ya:a:{for(k=f.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[],h);d["return"]=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=uc(f,a.internalContextTag,h);d["return"]=a;a=d}return g(a)}if("string"===typeof f||"number"===typeof f)return f=""+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f,h)):(c(a,d),d=rc(f,a.internalContextTag,
+h)),d["return"]=a,a=d,g(a);if(Gb(f))return n(a,d,f,h);if(Wa(f))return r(a,d,f,h);k&&Cb(a,f);if("undefined"===typeof f)switch(a.tag){case 2:case 1:h=a.type,l("152",h.displayName||h.name||"Component")}return c(a,d)}}function Bf(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:Ya,key:null==d?null:""+d,children:a,containerInfo:b,implementation:c}}function Cf(a){if(me.hasOwnProperty(a))return!0;if(ne.hasOwnProperty(a))return!1;if(Df.test(a))return me[a]=!0;ne[a]=
+!0;return!1}function zc(a,b,c){var d=Ub(b);if(d&&Xc(b,c)){var e=d.mutationMethod;e?e(a,c):null==c||d.hasBooleanValue&&!c||d.hasNumericValue&&isNaN(c)||d.hasPositiveNumericValue&&1>c||d.hasOverloadedBooleanValue&&!1===c?oe(a,b):d.mustUseProperty?a[d.propertyName]=c:(b=d.attributeName,(e=d.attributeNamespace)?a.setAttributeNS(e,b,""+c):d.hasBooleanValue||d.hasOverloadedBooleanValue&&!0===c?a.setAttribute(b,""):a.setAttribute(b,""+c))}else Ac(a,b,Xc(b,c)?c:null)}function Ac(a,b,c){Cf(b)&&(null==c?a.removeAttribute(b):
+a.setAttribute(b,""+c))}function oe(a,b){var c=Ub(b);c?(b=c.mutationMethod)?b(a,void 0):c.mustUseProperty?a[c.propertyName]=c.hasBooleanValue?!1:"":a.removeAttribute(c.attributeName):a.removeAttribute(b)}function Bc(a,b){var c=b.value,d=b.checked;return C({type:void 0,step:void 0,min:void 0,max:void 0},b,{defaultChecked:void 0,defaultValue:void 0,value:null!=c?c:a._wrapperState.initialValue,checked:null!=d?d:a._wrapperState.initialChecked})}function pe(a,b){var c=b.defaultValue;a._wrapperState={initialChecked:null!=
+b.checked?b.checked:b.defaultChecked,initialValue:null!=b.value?b.value:c,controlled:"checkbox"===b.type||"radio"===b.type?null!=b.checked:null!=b.value}}function qe(a,b){b=b.checked;null!=b&&zc(a,"checked",b)}function Cc(a,b){qe(a,b);var c=b.value;if(null!=c)if(0===c&&""===a.value)a.value="0";else if("number"===b.type){if(b=parseFloat(a.value)||0,c!=b||c==b&&a.value!=c)a.value=""+c}else a.value!==""+c&&(a.value=""+c);else null==b.value&&null!=b.defaultValue&&a.defaultValue!==""+b.defaultValue&&(a.defaultValue=
+""+b.defaultValue),null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked)}function re(a,b){switch(b.type){case "submit":case "reset":break;case "color":case "date":case "datetime":case "datetime-local":case "month":case "time":case "week":a.value="";a.value=a.defaultValue;break;default:a.value=a.value}b=a.name;""!==b&&(a.name="");a.defaultChecked=!a.defaultChecked;a.defaultChecked=!a.defaultChecked;""!==b&&(a.name=b)}function Ef(a){var b="";na.Children.forEach(a,function(a){null==
+a||"string"!==typeof a&&"number"!==typeof a||(b+=a)});return b}function Dc(a,b){a=C({children:void 0},b);if(b=Ef(b.children))a.children=b;return a}function ka(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e<c.length;e++)b["$"+c[e]]=!0;for(c=0;c<a.length;c++)e=b.hasOwnProperty("$"+a[c].value),a[c].selected!==e&&(a[c].selected=e),e&&d&&(a[c].defaultSelected=!0)}else{c=""+c;b=null;for(e=0;e<a.length;e++){if(a[e].value===c){a[e].selected=!0;d&&(a[e].defaultSelected=!0);return}null!==b||a[e].disabled||(b=
+a[e])}null!==b&&(b.selected=!0)}}function se(a,b){var c=b.value;a._wrapperState={initialValue:null!=c?c:b.defaultValue,wasMultiple:!!b.multiple}}function Ec(a,b){null!=b.dangerouslySetInnerHTML?l("91"):void 0;return C({},b,{value:void 0,defaultValue:void 0,children:""+a._wrapperState.initialValue})}function te(a,b){var c=b.value;null==c&&(c=b.defaultValue,b=b.children,null!=b&&(null!=c?l("92"):void 0,Array.isArray(b)&&(1>=b.length?void 0:l("93"),b=b[0]),c=""+b),null==c&&(c=""));a._wrapperState={initialValue:""+
+c}}function ue(a,b){var c=b.value;null!=c&&(c=""+c,c!==a.value&&(a.value=c),null==b.defaultValue&&(a.defaultValue=c));null!=b.defaultValue&&(a.defaultValue=b.defaultValue)}function ve(a){switch(a){case "svg":return"http://www.w3.org/2000/svg";case "math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function Fc(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?ve(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":
+a}function we(a,b,c){a=a.style;for(var d in b)if(b.hasOwnProperty(d)){c=0===d.indexOf("--");var e=d;var f=b[d];e=null==f||"boolean"===typeof f||""===f?"":c||"number"!==typeof f||0===f||Za.hasOwnProperty(e)&&Za[e]?(""+f).trim():f+"px";"float"===d&&(d="cssFloat");c?a.setProperty(d,e):a[d]=e}}function Gc(a,b,c){b&&(Ff[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML?l("137",a,c()):void 0),null!=b.dangerouslySetInnerHTML&&(null!=b.children?l("60"):void 0,"object"===typeof b.dangerouslySetInnerHTML&&
+"__html"in b.dangerouslySetInnerHTML?void 0:l("61")),null!=b.style&&"object"!==typeof b.style?l("62",c()):void 0)}function Hc(a,b){if(-1===a.indexOf("-"))return"string"===typeof b.is;switch(a){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":return!1;default:return!0}}function Y(a,b){a=9===a.nodeType||11===a.nodeType?a:a.ownerDocument;var c=Kd(a);b=kb[b];for(var d=0;d<b.length;d++){var e=
+b[d];c.hasOwnProperty(e)&&c[e]||("topScroll"===e?ha("topScroll","scroll",a):"topFocus"===e||"topBlur"===e?(ha("topFocus","focus",a),ha("topBlur","blur",a),c.topBlur=!0,c.topFocus=!0):"topCancel"===e?(gc("cancel",!0)&&ha("topCancel","cancel",a),c.topCancel=!0):"topClose"===e?(gc("close",!0)&&ha("topClose","close",a),c.topClose=!0):xe.hasOwnProperty(e)&&r(e,xe[e],a),c[e]=!0)}}function ye(a,b,c,d){c=9===c.nodeType?c:c.ownerDocument;"http://www.w3.org/1999/xhtml"===d&&(d=ve(a));"http://www.w3.org/1999/xhtml"===
+d?"script"===a?(a=c.createElement("div"),a.innerHTML="\x3cscript\x3e\x3c/script\x3e",a=a.removeChild(a.firstChild)):a="string"===typeof b.is?c.createElement(a,{is:b.is}):c.createElement(a):a=c.createElementNS(d,a);return a}function ze(a,b){return(9===b.nodeType?b:b.ownerDocument).createTextNode(a)}function Ae(a,b,c,d){var e=Hc(b,c);switch(b){case "iframe":case "object":r("topLoad","load",a);var f=c;break;case "video":case "audio":for(f in Z)Z.hasOwnProperty(f)&&r(f,Z[f],a);f=c;break;case "source":r("topError",
+"error",a);f=c;break;case "img":case "image":r("topError","error",a);r("topLoad","load",a);f=c;break;case "form":r("topReset","reset",a);r("topSubmit","submit",a);f=c;break;case "details":r("topToggle","toggle",a);f=c;break;case "input":pe(a,c);f=Bc(a,c);r("topInvalid","invalid",a);Y(d,"onChange");break;case "option":f=Dc(a,c);break;case "select":se(a,c);f=C({},c,{value:void 0});r("topInvalid","invalid",a);Y(d,"onChange");break;case "textarea":te(a,c);f=Ec(a,c);r("topInvalid","invalid",a);Y(d,"onChange");
+break;default:f=c}Gc(b,f,$a);var g=f,h;for(h in g)if(g.hasOwnProperty(h)){var k=g[h];"style"===h?we(a,k,$a):"dangerouslySetInnerHTML"===h?(k=k?k.__html:void 0,null!=k&&Be(a,k)):"children"===h?"string"===typeof k?("textarea"!==b||""!==k)&&Ic(a,k):"number"===typeof k&&Ic(a,""+k):"suppressContentEditableWarning"!==h&&"suppressHydrationWarning"!==h&&"autoFocus"!==h&&(ca.hasOwnProperty(h)?null!=k&&Y(d,h):e?Ac(a,h,k):null!=k&&zc(a,h,k))}switch(b){case "input":nb(a);re(a,c);break;case "textarea":nb(a);c=
+a.textContent;c===a._wrapperState.initialValue&&(a.value=c);break;case "option":null!=c.value&&a.setAttribute("value",c.value);break;case "select":a.multiple=!!c.multiple;b=c.value;null!=b?ka(a,!!c.multiple,b,!1):null!=c.defaultValue&&ka(a,!!c.multiple,c.defaultValue,!0);break;default:"function"===typeof f.onClick&&(a.onclick=G)}}function Ce(a,b,c,d,e){var f=null;switch(b){case "input":c=Bc(a,c);d=Bc(a,d);f=[];break;case "option":c=Dc(a,c);d=Dc(a,d);f=[];break;case "select":c=C({},c,{value:void 0});
+d=C({},d,{value:void 0});f=[];break;case "textarea":c=Ec(a,c);d=Ec(a,d);f=[];break;default:"function"!==typeof c.onClick&&"function"===typeof d.onClick&&(a.onclick=G)}Gc(b,d,$a);var g,h;a=null;for(g in c)if(!d.hasOwnProperty(g)&&c.hasOwnProperty(g)&&null!=c[g])if("style"===g)for(h in (b=c[g], b))b.hasOwnProperty(h)&&(a||(a={}),a[h]="");else"dangerouslySetInnerHTML"!==g&&"children"!==g&&"suppressContentEditableWarning"!==g&&"suppressHydrationWarning"!==g&&"autoFocus"!==g&&(ca.hasOwnProperty(g)?f||(f=
+[]):(f=f||[]).push(g,null));for(g in d){var k=d[g];b=null!=c?c[g]:void 0;if(d.hasOwnProperty(g)&&k!==b&&(null!=k||null!=b))if("style"===g)if(b){for(h in b)!b.hasOwnProperty(h)||k&&k.hasOwnProperty(h)||(a||(a={}),a[h]="");for(h in k)k.hasOwnProperty(h)&&b[h]!==k[h]&&(a||(a={}),a[h]=k[h])}else a||(f||(f=[]),f.push(g,a)),a=k;else"dangerouslySetInnerHTML"===g?(k=k?k.__html:void 0,b=b?b.__html:void 0,null!=k&&b!==k&&(f=f||[]).push(g,""+k)):"children"===g?b===k||"string"!==typeof k&&"number"!==typeof k||
+(f=f||[]).push(g,""+k):"suppressContentEditableWarning"!==g&&"suppressHydrationWarning"!==g&&(ca.hasOwnProperty(g)?(null!=k&&Y(e,g),f||b===k||(f=[])):(f=f||[]).push(g,k))}a&&(f=f||[]).push("style",a);return f}function De(a,b,c,d,e){"input"===c&&"radio"===e.type&&null!=e.name&&qe(a,e);Hc(c,d);d=Hc(c,e);for(var f=0;f<b.length;f+=2){var g=b[f],h=b[f+1];"style"===g?we(a,h,$a):"dangerouslySetInnerHTML"===g?Be(a,h):"children"===g?Ic(a,h):d?null!=h?Ac(a,g,h):a.removeAttribute(g):null!=h?zc(a,g,h):oe(a,g)}switch(c){case "input":Cc(a,
+e);break;case "textarea":ue(a,e);break;case "select":a._wrapperState.initialValue=void 0,b=a._wrapperState.wasMultiple,a._wrapperState.wasMultiple=!!e.multiple,c=e.value,null!=c?ka(a,!!e.multiple,c,!1):b!==!!e.multiple&&(null!=e.defaultValue?ka(a,!!e.multiple,e.defaultValue,!0):ka(a,!!e.multiple,e.multiple?[]:"",!1))}}function Ee(a,b,c,d,e){switch(b){case "iframe":case "object":r("topLoad","load",a);break;case "video":case "audio":for(var f in Z)Z.hasOwnProperty(f)&&r(f,Z[f],a);break;case "source":r("topError",
+"error",a);break;case "img":case "image":r("topError","error",a);r("topLoad","load",a);break;case "form":r("topReset","reset",a);r("topSubmit","submit",a);break;case "details":r("topToggle","toggle",a);break;case "input":pe(a,c);r("topInvalid","invalid",a);Y(e,"onChange");break;case "select":se(a,c);r("topInvalid","invalid",a);Y(e,"onChange");break;case "textarea":te(a,c),r("topInvalid","invalid",a),Y(e,"onChange")}Gc(b,c,$a);d=null;for(var g in c)c.hasOwnProperty(g)&&(f=c[g],"children"===g?"string"===
+typeof f?a.textContent!==f&&(d=["children",f]):"number"===typeof f&&a.textContent!==""+f&&(d=["children",""+f]):ca.hasOwnProperty(g)&&null!=f&&Y(e,g));switch(b){case "input":nb(a);re(a,c);break;case "textarea":nb(a);b=a.textContent;b===a._wrapperState.initialValue&&(a.value=b);break;case "select":case "option":break;default:"function"===typeof c.onClick&&(a.onclick=G)}return d}function Fe(a,b){return a.nodeValue!==b}function Jc(a){return!(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!==
+a.nodeType||" react-mount-point-unstable "!==a.nodeValue))}function Gf(a){a=a?9===a.nodeType?a.documentElement:a.firstChild:null;return!(!a||1!==a.nodeType||!a.hasAttribute("data-reactroot"))}function Hb(a,b,c,d,e){Jc(c)?void 0:l("200");var f=c._reactRootContainer;if(f)E.updateContainer(b,f,a,e);else{d=d||Gf(c);if(!d)for(f=void 0;f=c.lastChild;)c.removeChild(f);var g=E.createContainer(c,d);f=c._reactRootContainer=g;E.unbatchedUpdates(function(){E.updateContainer(b,g,a,e)})}return E.getPublicRootInstance(f)}
+function Ge(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;Jc(b)?void 0:l("200");return Bf(a,b,null,c)}function He(a,b){this._reactRootContainer=E.createContainer(a,b)}na?void 0:l("227");var Yc={children:!0,dangerouslySetInnerHTML:!0,defaultValue:!0,defaultChecked:!0,innerHTML:!0,suppressContentEditableWarning:!0,suppressHydrationWarning:!0,style:!0},Ie={MUST_USE_PROPERTY:1,HAS_BOOLEAN_VALUE:4,HAS_NUMERIC_VALUE:8,HAS_POSITIVE_NUMERIC_VALUE:24,HAS_OVERLOADED_BOOLEAN_VALUE:32,
+HAS_STRING_BOOLEAN_VALUE:64,injectDOMPropertyConfig:function(a){var b=Ie,c=a.Properties||{},d=a.DOMAttributeNamespaces||{},e=a.DOMAttributeNames||{};a=a.DOMMutationMethods||{};for(var f in c){ib.hasOwnProperty(f)?l("48",f):void 0;var g=f.toLowerCase(),h=c[f];g={attributeName:g,attributeNamespace:null,propertyName:f,mutationMethod:null,mustUseProperty:va(h,b.MUST_USE_PROPERTY),hasBooleanValue:va(h,b.HAS_BOOLEAN_VALUE),hasNumericValue:va(h,b.HAS_NUMERIC_VALUE),hasPositiveNumericValue:va(h,b.HAS_POSITIVE_NUMERIC_VALUE),
+hasOverloadedBooleanValue:va(h,b.HAS_OVERLOADED_BOOLEAN_VALUE),hasStringBooleanValue:va(h,b.HAS_STRING_BOOLEAN_VALUE)};1>=g.hasBooleanValue+g.hasNumericValue+g.hasOverloadedBooleanValue?void 0:l("50",f);e.hasOwnProperty(f)&&(g.attributeName=e[f]);d.hasOwnProperty(f)&&(g.attributeNamespace=d[f]);a.hasOwnProperty(f)&&(g.mutationMethod=a[f]);ib[f]=g}}},ib={},aa=Ie,Ib=aa.MUST_USE_PROPERTY,w=aa.HAS_BOOLEAN_VALUE,Je=aa.HAS_NUMERIC_VALUE,Jb=aa.HAS_POSITIVE_NUMERIC_VALUE,Ke=aa.HAS_OVERLOADED_BOOLEAN_VALUE,
+Kb=aa.HAS_STRING_BOOLEAN_VALUE,Hf={Properties:{allowFullScreen:w,async:w,autoFocus:w,autoPlay:w,capture:Ke,checked:Ib|w,cols:Jb,contentEditable:Kb,controls:w,"default":w,defer:w,disabled:w,download:Ke,draggable:Kb,formNoValidate:w,hidden:w,loop:w,multiple:Ib|w,muted:Ib|w,noValidate:w,open:w,playsInline:w,readOnly:w,required:w,reversed:w,rows:Jb,rowSpan:Je,scoped:w,seamless:w,selected:Ib|w,size:Jb,start:Je,span:Jb,spellCheck:Kb,style:0,tabIndex:0,itemScope:w,acceptCharset:0,className:0,htmlFor:0,httpEquiv:0,
+value:Kb},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMMutationMethods:{value:function(a,b){if(null==b)return a.removeAttribute("value");"number"!==a.type||!1===a.hasAttribute("value")?a.setAttribute("value",""+b):a.validity&&!a.validity.badInput&&a.ownerDocument.activeElement!==a&&a.setAttribute("value",""+b)}}},Kc=aa.HAS_STRING_BOOLEAN_VALUE,Lc={Properties:{autoReverse:Kc,externalResourcesRequired:Kc,preserveAlpha:Kc},DOMAttributeNames:{autoReverse:"autoReverse",
+externalResourcesRequired:"externalResourcesRequired",preserveAlpha:"preserveAlpha"},DOMAttributeNamespaces:{xlinkActuate:"http://www.w3.org/1999/xlink",xlinkArcrole:"http://www.w3.org/1999/xlink",xlinkHref:"http://www.w3.org/1999/xlink",xlinkRole:"http://www.w3.org/1999/xlink",xlinkShow:"http://www.w3.org/1999/xlink",xlinkTitle:"http://www.w3.org/1999/xlink",xlinkType:"http://www.w3.org/1999/xlink",xmlBase:"http://www.w3.org/XML/1998/namespace",xmlLang:"http://www.w3.org/XML/1998/namespace",xmlSpace:"http://www.w3.org/XML/1998/namespace"}},
+If=/[\-\:]([a-z])/g,Jf=function(a){return a[1].toUpperCase()};"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode x-height xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xmlns:xlink xml:lang xml:space".split(" ").forEach(function(a){var b=
+a.replace(If,Jf);Lc.Properties[b]=0;Lc.DOMAttributeNames[b]=a});aa.injectDOMPropertyConfig(Hf);aa.injectDOMPropertyConfig(Lc);var y={_caughtError:null,_hasCaughtError:!1,_rethrowError:null,_hasRethrowError:!1,injection:{injectErrorUtils:function(a){"function"!==typeof a.invokeGuardedCallback?l("197"):void 0;Le=a.invokeGuardedCallback}},invokeGuardedCallback:function(a,b,c,d,e,f,g,h,k){Le.apply(y,arguments)},invokeGuardedCallbackAndCatchFirstError:function(a,b,c,d,e,f,g,h,k){y.invokeGuardedCallback.apply(this,
+arguments);if(y.hasCaughtError()){var l=y.clearCaughtError();y._hasRethrowError||(y._hasRethrowError=!0,y._rethrowError=l)}},rethrowCaughtError:function(){return Kf.apply(y,arguments)},hasCaughtError:function(){return y._hasCaughtError},clearCaughtError:function(){if(y._hasCaughtError){var a=y._caughtError;y._caughtError=null;y._hasCaughtError=!1;return a}l("198")}},Le=function(a,b,c,d,e,f,g,h,k){y._hasCaughtError=!1;y._caughtError=null;var l=Array.prototype.slice.call(arguments,3);try{b.apply(c,
+l)}catch(D){y._caughtError=D,y._hasCaughtError=!0}},Kf=function(){if(y._hasRethrowError){var a=y._rethrowError;y._rethrowError=null;y._hasRethrowError=!1;throw a;}},jb=null,ba={},oa=[],Vb={},ca={},kb={},Lf=Object.freeze({plugins:oa,eventNameDispatchConfigs:Vb,registrationNameModules:ca,registrationNameDependencies:kb,possibleRegistrationNames:null,injectEventPluginOrder:ad,injectEventPluginsByName:bd}),ta=function(){};ta.thatReturns=lb;ta.thatReturnsFalse=lb(!1);ta.thatReturnsTrue=lb(!0);ta.thatReturnsNull=
+lb(null);ta.thatReturnsThis=function(){return this};ta.thatReturnsArgument=function(a){return a};var G=ta,Xb=null,vd=null,dd=null,pa=null,Me=function(a,b){if(a){var c=a._dispatchListeners,d=a._dispatchInstances;if(Array.isArray(c))for(var e=0;e<c.length&&!a.isPropagationStopped();e++)cd(a,b,c[e],d[e]);else c&&cd(a,b,c,d);a._dispatchListeners=null;a._dispatchInstances=null;a.isPersistent()||a.constructor.release(a)}},$e=function(a){return Me(a,!0)},af=function(a){return Me(a,!1)},Mc={injectEventPluginOrder:ad,
+injectEventPluginsByName:bd},Mf=Object.freeze({injection:Mc,getListener:Wb,extractEvents:ed,enqueueEvents:Yb,processEventQueue:Zb}),Ne=Math.random().toString(36).slice(2),O="__reactInternalInstance$"+Ne,ea="__reactEventHandlers$"+Ne,Oe=Object.freeze({precacheFiberNode:function(a,b){b[O]=a},getClosestInstanceFromNode:W,getInstanceFromNode:function(a){a=a[O];return!a||5!==a.tag&&6!==a.tag?null:a},getNodeFromInstance:xa,getFiberCurrentPropsFromNode:fd,updateFiberProps:function(a,b){a[ea]=b}}),Nf=Object.freeze({accumulateTwoPhaseDispatches:ya,
+accumulateTwoPhaseDispatchesSkipTarget:function(a){da(a,cf)},accumulateEnterLeaveDispatches:id,accumulateDirectDispatches:function(a){da(a,df)}}),Lb=!("undefined"===typeof window||!window.document||!window.document.createElement),P={canUseDOM:Lb,canUseWorkers:"undefined"!==typeof Worker,canUseEventListeners:Lb&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:Lb&&!!window.screen,isInWorker:!Lb},ac=null,H={_root:null,_startText:null,_fallbackText:null},C=na.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.assign,
+Pe="dispatchConfig _targetInst nativeEvent isDefaultPrevented isPropagationStopped _dispatchListeners _dispatchInstances".split(" "),Of={type:null,target:null,currentTarget:G.thatReturnsNull,eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(a){return a.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null};C(n.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():"unknown"!==typeof a.returnValue&&(a.returnValue=
+!1),this.isDefaultPrevented=G.thatReturnsTrue)},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():"unknown"!==typeof a.cancelBubble&&(a.cancelBubble=!0),this.isPropagationStopped=G.thatReturnsTrue)},persist:function(){this.isPersistent=G.thatReturnsTrue},isPersistent:G.thatReturnsFalse,destructor:function(){var a=this.constructor.Interface,b;for(b in a)this[b]=null;for(a=0;a<Pe.length;a++)this[Pe[a]]=null}});n.Interface=Of;n.augmentClass=function(a,b){var c=
+function(){};c.prototype=this.prototype;c=new c;C(c,a.prototype);a.prototype=c;a.prototype.constructor=a;a.Interface=C({},this.Interface,b);a.augmentClass=this.augmentClass;md(a)};md(n);n.augmentClass(nd,{data:null});n.augmentClass(od,{data:null});var hf=[9,13,27,32],bc=P.canUseDOM&&"CompositionEvent"in window,ab=null;P.canUseDOM&&"documentMode"in document&&(ab=document.documentMode);var Pf=P.canUseDOM&&"TextEvent"in window&&!ab&&!gf(),td=P.canUseDOM&&(!bc||ab&&8<ab&&11>=ab),sd=String.fromCharCode(32),
+V={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"topBlur topCompositionEnd topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"topBlur topCompositionStart topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},
+compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"topBlur topCompositionUpdate topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")}},rd=!1,za=!1,Qf={eventTypes:V,extractEvents:function(a,b,c,d){var e;if(bc)b:{switch(a){case "topCompositionStart":var f=V.compositionStart;break b;case "topCompositionEnd":f=V.compositionEnd;break b;case "topCompositionUpdate":f=V.compositionUpdate;break b}f=void 0}else za?pd(a,c)&&(f=V.compositionEnd):
+"topKeyDown"===a&&229===c.keyCode&&(f=V.compositionStart);f?(td&&(za||f!==V.compositionStart?f===V.compositionEnd&&za&&(e=kd()):(H._root=d,H._startText=ld(),za=!0)),f=nd.getPooled(f,b,c,d),e?f.data=e:(e=qd(c),null!==e&&(f.data=e)),ya(f),e=f):e=null;(a=Pf?jf(a,c):kf(a,c))?(b=od.getPooled(V.beforeInput,b,c,d),b.data=a,ya(b)):b=null;return[e,b]}},mb=null,Ga=null,fa=null,Qe={injectFiberControlledHostComponent:function(a){mb=a}},Rf=Object.freeze({injection:Qe,enqueueStateRestore:wd,restoreStateIfNeeded:xd}),
+ec=function(a,b){return a(b)},dc=!1,lf={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},zd;P.canUseDOM&&(zd=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""));var Dd={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"topBlur topChange topClick topFocus topInput topKeyDown topKeyUp topSelectionChange".split(" ")}},
+Ha=null,Oa=null,Nc=!1;P.canUseDOM&&(Nc=gc("input")&&(!document.documentMode||9<document.documentMode));var Sf={eventTypes:Dd,_isInputEventSupported:Nc,extractEvents:function(a,b,c,d){var e=b?xa(b):window,f=e.nodeName&&e.nodeName.toLowerCase();if("select"===f||"input"===f&&"file"===e.type)var g=of;else if(yd(e))if(Nc)g=sf;else{g=qf;var h=pf}else f=e.nodeName,!f||"input"!==f.toLowerCase()||"checkbox"!==e.type&&"radio"!==e.type||(g=rf);if(g&&(g=g(a,b)))return Cd(g,c,d);h&&h(a,e,b);"topBlur"===a&&null!=
+b&&(a=b._wrapperState||e._wrapperState)&&a.controlled&&"number"===e.type&&(a=""+e.value,e.getAttribute("value")!==a&&e.setAttribute("value",a))}};n.augmentClass(Aa,{view:null,detail:null});var uf={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};Aa.augmentClass(qa,{screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:hc,button:null,buttons:null,relatedTarget:function(a){return a.relatedTarget||
+(a.fromElement===a.srcElement?a.toElement:a.fromElement)}});var Oc={mouseEnter:{registrationName:"onMouseEnter",dependencies:["topMouseOut","topMouseOver"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["topMouseOut","topMouseOver"]}},Tf={eventTypes:Oc,extractEvents:function(a,b,c,d){if("topMouseOver"===a&&(c.relatedTarget||c.fromElement)||"topMouseOut"!==a&&"topMouseOver"!==a)return null;var e=d.window===d?d:(e=d.ownerDocument)?e.defaultView||e.parentWindow:window;"topMouseOut"===a?(a=
+b,b=(b=c.relatedTarget||c.toElement)?W(b):null):a=null;if(a===b)return null;var f=null==a?e:xa(a);e=null==b?e:xa(b);var g=qa.getPooled(Oc.mouseLeave,a,c,d);g.type="mouseleave";g.target=f;g.relatedTarget=e;c=qa.getPooled(Oc.mouseEnter,b,c,d);c.type="mouseenter";c.target=e;c.relatedTarget=f;id(g,c,a,b);return[g,c]}},bb=na.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Id={listen:function(a,b,c){if(a.addEventListener)return a.addEventListener(b,c,!1),{remove:function(){a.removeEventListener(b,
+c,!1)}};if(a.attachEvent)return a.attachEvent("on"+b,c),{remove:function(){a.detachEvent("on"+b,c)}}},capture:function(a,b,c){return a.addEventListener?(a.addEventListener(b,c,!0),{remove:function(){a.removeEventListener(b,c,!0)}}):{remove:G}},registerDefault:function(){}},qb=[],Ra=!0,pb=void 0,Uf=Object.freeze({get _enabled(){return Ra},get _handleTopLevel(){return pb},setHandleTopLevel:function(a){pb=a},setEnabled:ic,isEnabled:function(){return Ra},trapBubbledEvent:r,trapCapturedEvent:ha,dispatchEvent:jc}),
+U={animationend:rb("Animation","AnimationEnd"),animationiteration:rb("Animation","AnimationIteration"),animationstart:rb("Animation","AnimationStart"),transitionend:rb("Transition","TransitionEnd")},kc={},Jd={};P.canUseDOM&&(Jd=document.createElement("div").style,"AnimationEvent"in window||(delete U.animationend.animation,delete U.animationiteration.animation,delete U.animationstart.animation),"TransitionEvent"in window||delete U.transitionend.transition);var xe={topAbort:"abort",topAnimationEnd:sb("animationend")||
+"animationend",topAnimationIteration:sb("animationiteration")||"animationiteration",topAnimationStart:sb("animationstart")||"animationstart",topBlur:"blur",topCancel:"cancel",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topClose:"close",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",
+topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoad:"load",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",
+topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topToggle:"toggle",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:sb("transitionend")||
+"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},Ld={},zf=0,tb="_reactListenersID"+(""+Math.random()).slice(2),nc=function(a){a=a||("undefined"!==typeof document?document:void 0);if("undefined"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}},Vf=Object.prototype.hasOwnProperty,oc=function(a,b){if(Md(a,b))return!0;if("object"!==typeof a||null===a||"object"!==typeof b||null===b)return!1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==
+d.length)return!1;for(d=0;d<c.length;d++)if(!Vf.call(b,c[d])||!Md(a[c[d]],b[c[d]]))return!1;return!0},Od=function(a){var b=(a?a.ownerDocument||a:document).defaultView||window;return!!(a&&("function"===typeof b.Node?a instanceof b.Node:"object"===typeof a&&"number"===typeof a.nodeType&&"string"===typeof a.nodeName))&&3==a.nodeType},Wf=P.canUseDOM&&"documentMode"in document&&11>=document.documentMode,Sd={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"topBlur topContextMenu topFocus topKeyDown topKeyUp topMouseDown topMouseUp topSelectionChange".split(" ")}},
+X=null,pc=null,Sa=null,mc=!1,Xf={eventTypes:Sd,extractEvents:function(a,b,c,d){var e=d.window===d?d.document:9===d.nodeType?d:d.ownerDocument,f;if(!(f=!e)){a:{e=Kd(e);f=kb.onSelect;for(var g=0;g<f.length;g++){var h=f[g];if(!e.hasOwnProperty(h)||!e[h]){e=!1;break a}}e=!0}f=!e}if(f)return null;e=b?xa(b):window;switch(a){case "topFocus":if(yd(e)||"true"===e.contentEditable)X=e,pc=b,Sa=null;break;case "topBlur":Sa=pc=X=null;break;case "topMouseDown":mc=!0;break;case "topContextMenu":case "topMouseUp":return mc=
+!1,Rd(c,d);case "topSelectionChange":if(Wf)break;case "topKeyDown":case "topKeyUp":return Rd(c,d)}return null}};n.augmentClass(Td,{animationName:null,elapsedTime:null,pseudoElement:null});n.augmentClass(Ud,{clipboardData:function(a){return"clipboardData"in a?a.clipboardData:window.clipboardData}});Aa.augmentClass(Vd,{relatedTarget:null});var Yf={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",
+MozPrintableKey:"Unidentified"},Zf={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"};Aa.augmentClass(Wd,{key:function(a){if(a.key){var b=Yf[a.key]||
+a.key;if("Unidentified"!==b)return b}return"keypress"===a.type?(a=ub(a),13===a?"Enter":String.fromCharCode(a)):"keydown"===a.type||"keyup"===a.type?Zf[a.keyCode]||"Unidentified":""},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:hc,charCode:function(a){return"keypress"===a.type?ub(a):0},keyCode:function(a){return"keydown"===a.type||"keyup"===a.type?a.keyCode:0},which:function(a){return"keypress"===a.type?ub(a):"keydown"===a.type||"keyup"===
+a.type?a.keyCode:0}});qa.augmentClass(Xd,{dataTransfer:null});Aa.augmentClass(Yd,{touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:hc});n.augmentClass(Zd,{propertyName:null,elapsedTime:null,pseudoElement:null});qa.augmentClass($d,{deltaX:function(a){return"deltaX"in a?a.deltaX:"wheelDeltaX"in a?-a.wheelDeltaX:0},deltaY:function(a){return"deltaY"in a?a.deltaY:"wheelDeltaY"in a?-a.wheelDeltaY:"wheelDelta"in a?-a.wheelDelta:0},deltaZ:null,
+deltaMode:null});var Re={},Se={};"abort animationEnd animationIteration animationStart blur cancel canPlay canPlayThrough click close contextMenu copy cut doubleClick drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error focus input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing progress rateChange reset scroll seeked seeking stalled submit suspend timeUpdate toggle touchCancel touchEnd touchMove touchStart transitionEnd volumeChange waiting wheel".split(" ").forEach(function(a){var b=
+a[0].toUpperCase()+a.slice(1),c="on"+b;b="top"+b;c={phasedRegistrationNames:{bubbled:c,captured:c+"Capture"},dependencies:[b]};Re[a]=c;Se[b]=c});var $f={eventTypes:Re,extractEvents:function(a,b,c,d){var e=Se[a];if(!e)return null;switch(a){case "topKeyPress":if(0===ub(c))return null;case "topKeyDown":case "topKeyUp":a=Wd;break;case "topBlur":case "topFocus":a=Vd;break;case "topClick":if(2===c.button)return null;case "topDoubleClick":case "topMouseDown":case "topMouseMove":case "topMouseUp":case "topMouseOut":case "topMouseOver":case "topContextMenu":a=
+qa;break;case "topDrag":case "topDragEnd":case "topDragEnter":case "topDragExit":case "topDragLeave":case "topDragOver":case "topDragStart":case "topDrop":a=Xd;break;case "topTouchCancel":case "topTouchEnd":case "topTouchMove":case "topTouchStart":a=Yd;break;case "topAnimationEnd":case "topAnimationIteration":case "topAnimationStart":a=Td;break;case "topTransitionEnd":a=Zd;break;case "topScroll":a=Aa;break;case "topWheel":a=$d;break;case "topCopy":case "topCut":case "topPaste":a=Ud;break;default:a=
+n}b=a.getPooled(e,b,c,d);ya(b);return b}};pb=function(a,b,c,d){a=ed(a,b,c,d);Yb(a);Zb(!1)};Mc.injectEventPluginOrder("ResponderEventPlugin SimpleEventPlugin TapEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin".split(" "));(function(a){Xb=a.getFiberCurrentPropsFromNode;vd=a.getInstanceFromNode;dd=a.getNodeFromInstance})(Oe);Mc.injectEventPluginsByName({SimpleEventPlugin:$f,EnterLeaveEventPlugin:Tf,ChangeEventPlugin:Sf,SelectEventPlugin:Xf,BeforeInputEventPlugin:Qf});
+var ja={},vb=[],ra=-1;new Set;var ia={current:ja},J={current:!1},wb=ja,vc=null,wc=null,ag=function(a,b,c,d){function e(a,b){b.updater=f;a.stateNode=b;b._reactInternalFiber=a}var f={isMounted:vf,enqueueSetState:function(c,d,e){c=c._reactInternalFiber;e=void 0===e?null:e;var f=b(c);Bb(c,{expirationTime:f,partialState:d,callback:e,isReplace:!1,isForced:!1,nextCallback:null,next:null});a(c,f)},enqueueReplaceState:function(c,d,e){c=c._reactInternalFiber;e=void 0===e?null:e;var f=b(c);Bb(c,{expirationTime:f,
+partialState:d,callback:e,isReplace:!0,isForced:!1,nextCallback:null,next:null});a(c,f)},enqueueForceUpdate:function(c,d){c=c._reactInternalFiber;d=void 0===d?null:d;var e=b(c);Bb(c,{expirationTime:e,partialState:null,callback:d,isReplace:!1,isForced:!0,nextCallback:null,next:null});a(c,e)}};return{adoptClassInstance:e,constructClassInstance:function(a,b){var c=a.type,d=Ta(a),f=2===a.tag&&null!=a.type.contextTypes,g=f?Va(a,d):ja;b=new c(b,g);e(a,b);f&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=
+d,a.__reactInternalMemoizedMaskedChildContext=g);return b},mountClassInstance:function(a,b){var c=a.alternate,d=a.stateNode,e=d.state||null,h=a.pendingProps;h?void 0:l("158");var g=Ta(a);d.props=h;d.state=a.memoizedState=e;d.refs=ja;d.context=Va(a,g);null!=a.type&&null!=a.type.prototype&&!0===a.type.prototype.unstable_isAsyncReactComponent&&(a.internalContextTag|=1);"function"===typeof d.componentWillMount&&(e=d.state,d.componentWillMount(),e!==d.state&&f.enqueueReplaceState(d,d.state,null),e=a.updateQueue,
+null!==e&&(d.state=xc(c,a,e,d,h,b)));"function"===typeof d.componentDidMount&&(a.effectTag|=4)},updateClassInstance:function(a,b,e){var g=b.stateNode;g.props=b.memoizedProps;g.state=b.memoizedState;var h=b.memoizedProps,k=b.pendingProps;k||(k=h,null==k?l("159"):void 0);var v=g.context,K=Ta(b);K=Va(b,K);"function"!==typeof g.componentWillReceiveProps||h===k&&v===K||(v=g.state,g.componentWillReceiveProps(k,K),g.state!==v&&f.enqueueReplaceState(g,g.state,null));v=b.memoizedState;e=null!==b.updateQueue?
+xc(a,b,b.updateQueue,g,k,e):v;if(!(h!==k||v!==e||J.current||null!==b.updateQueue&&b.updateQueue.hasForceUpdate))return"function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&v===a.memoizedState||(b.effectTag|=4),!1;var L=k;if(null===h||null!==b.updateQueue&&b.updateQueue.hasForceUpdate)L=!0;else{var R=b.stateNode,n=b.type;L="function"===typeof R.shouldComponentUpdate?R.shouldComponentUpdate(L,e,K):n.prototype&&n.prototype.isPureReactComponent?!oc(h,L)||!oc(v,e):!0}L?("function"===typeof g.componentWillUpdate&&
+g.componentWillUpdate(k,e,K),"function"===typeof g.componentDidUpdate&&(b.effectTag|=4)):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&v===a.memoizedState||(b.effectTag|=4),c(b,k),d(b,e));g.props=k;g.state=e;g.context=K;return L}}},cb="function"===typeof Symbol&&Symbol["for"],Db=cb?Symbol["for"]("react.element"):60103,Eb=cb?Symbol["for"]("react.call"):60104,Fb=cb?Symbol["for"]("react.return"):60105,Ya=cb?Symbol["for"]("react.portal"):60106,sa=cb?Symbol["for"]("react.fragment"):60107,
+ke="function"===typeof Symbol&&Symbol.iterator,Gb=Array.isArray,db=le(!0),Mb=le(!1),bg=function(a,b,c,d,e){function f(a,b,c){var d=b.expirationTime;b.child=null===a?Mb(b,null,c,d):db(b,a.child,c,d)}function g(a,b){var c=b.ref;null===c||a&&a.ref===c||(b.effectTag|=128)}function h(a,b,c,d){g(a,b);if(!c)return d&&de(b,!1),m(a,b);c=b.stateNode;bb.current=b;var e=c.render();b.effectTag|=1;f(a,b,e);b.memoizedState=c.state;b.memoizedProps=c.props;d&&de(b,!0);return b.child}function k(a){var b=a.stateNode;
+b.pendingContext?be(a,b.pendingContext,b.pendingContext!==b.context):b.context&&be(a,b.context,!1);R(a,b.containerInfo)}function m(a,b){null!==a&&b.child!==a.child?l("153"):void 0;if(null!==b.child){a=b.child;var c=yb(a,a.pendingProps,a.expirationTime);b.child=c;for(c["return"]=b;null!==a.sibling;)a=a.sibling,c=c.sibling=yb(a,a.pendingProps,a.expirationTime),c["return"]=b;c.sibling=null}return b.child}function D(a,b){switch(b.tag){case 3:k(b);break;case 2:xb(b);break;case 4:R(b,b.stateNode.containerInfo)}return null}
+var A=a.shouldSetTextContent,v=a.useSyncScheduling,n=a.shouldDeprioritizeSubtree,L=b.pushHostContext,R=b.pushHostContainer,r=c.enterHydrationState,w=c.resetHydrationState,y=c.tryToClaimNextHydratableInstance;a=ag(d,e,function(a,b){a.memoizedProps=b},function(a,b){a.memoizedState=b});var x=a.adoptClassInstance,t=a.constructClassInstance,z=a.mountClassInstance,yc=a.updateClassInstance;return{beginWork:function(a,b,c){if(0===b.expirationTime||b.expirationTime>c)return D(a,b);switch(b.tag){case 0:null!==
+a?l("155"):void 0;var d=b.type,e=b.pendingProps,q=Ta(b);q=Va(b,q);d=d(e,q);b.effectTag|=1;"object"===typeof d&&null!==d&&"function"===typeof d.render?(b.tag=2,e=xb(b),x(b,d),z(b,c),b=h(a,b,!0,e)):(b.tag=1,f(a,b,d),b.memoizedProps=e,b=b.child);return b;case 1:a:{e=b.type;c=b.pendingProps;d=b.memoizedProps;if(J.current)null===c&&(c=d);else if(null===c||d===c){b=m(a,b);break a}d=Ta(b);d=Va(b,d);e=e(c,d);b.effectTag|=1;f(a,b,e);b.memoizedProps=c;b=b.child}return b;case 2:return e=xb(b),d=void 0,null===
+a?b.stateNode?l("153"):(t(b,b.pendingProps),z(b,c),d=!0):d=yc(a,b,c),h(a,b,d,e);case 3:return k(b),e=b.updateQueue,null!==e?(d=b.memoizedState,e=xc(a,b,e,null,null,c),d===e?(w(),b=m(a,b)):(d=e.element,q=b.stateNode,(null===a||null===a.child)&&q.hydrate&&r(b)?(b.effectTag|=2,b.child=Mb(b,null,d,c)):(w(),f(a,b,d)),b.memoizedState=e,b=b.child)):(w(),b=m(a,b)),b;case 5:L(b);null===a&&y(b);e=b.type;var p=b.memoizedProps;d=b.pendingProps;null===d&&(d=p,null===d?l("154"):void 0);q=null!==a?a.memoizedProps:
+null;J.current||null!==d&&p!==d?(p=d.children,A(e,d)?p=null:q&&A(e,q)&&(b.effectTag|=16),g(a,b),2147483647!==c&&!v&&n(e,d)?(b.expirationTime=2147483647,b=null):(f(a,b,p),b.memoizedProps=d,b=b.child)):b=m(a,b);return b;case 6:return null===a&&y(b),a=b.pendingProps,null===a&&(a=b.memoizedProps),b.memoizedProps=a,null;case 8:b.tag=7;case 7:e=b.pendingProps;if(J.current)null===e&&(e=a&&a.memoizedProps,null===e?l("154"):void 0);else if(null===e||b.memoizedProps===e)e=b.memoizedProps;d=e.children;b.stateNode=
+null===a?Mb(b,b.stateNode,d,c):db(b,b.stateNode,d,c);b.memoizedProps=e;return b.stateNode;case 9:return null;case 4:a:{R(b,b.stateNode.containerInfo);e=b.pendingProps;if(J.current)null===e&&(e=a&&a.memoizedProps,null==e?l("154"):void 0);else if(null===e||b.memoizedProps===e){b=m(a,b);break a}null===a?b.child=db(b,null,e,c):f(a,b,e);b.memoizedProps=e;b=b.child}return b;case 10:a:{c=b.pendingProps;if(J.current)null===c&&(c=b.memoizedProps);else if(null===c||b.memoizedProps===c){b=m(a,b);break a}f(a,
+b,c);b.memoizedProps=c;b=b.child}return b;default:l("156")}},beginFailedWork:function(a,b,c){switch(b.tag){case 2:xb(b);break;case 3:k(b);break;default:l("157")}b.effectTag|=64;null===a?b.child=null:b.child!==a.child&&(b.child=a.child);if(0===b.expirationTime||b.expirationTime>c)return D(a,b);b.firstEffect=null;b.lastEffect=null;b.child=null===a?Mb(b,null,null,c):db(b,a.child,null,c);2===b.tag&&(a=b.stateNode,b.memoizedProps=a.props,b.memoizedState=a.state);return b.child}}},cg=function(a,b,c){function d(a){a.effectTag|=
+4}var e=a.createInstance,f=a.createTextInstance,g=a.appendInitialChild,h=a.finalizeInitialChildren,k=a.prepareUpdate,m=a.persistence,D=b.getRootHostContainer,A=b.popHostContext,v=b.getHostContext,n=b.popHostContainer,L=c.prepareToHydrateHostInstance,R=c.prepareToHydrateHostTextInstance,r=c.popHydrationState,w=void 0,y=void 0,x=void 0;a.mutation?(w=function(a){},y=function(a,b,c,e,f,g,h){(b.updateQueue=c)&&d(b)},x=function(a,b,c,e){c!==e&&d(b)}):m?l("235"):l("236");return{completeWork:function(a,b,
+c){var t=b.pendingProps;if(null===t)t=b.memoizedProps;else if(2147483647!==b.expirationTime||2147483647===c)b.pendingProps=null;switch(b.tag){case 1:return null;case 2:return ae(b),null;case 3:n(b);I(J,b);I(ia,b);t=b.stateNode;t.pendingContext&&(t.context=t.pendingContext,t.pendingContext=null);if(null===a||null===a.child)r(b),b.effectTag&=-3;w(b);return null;case 5:A(b);c=D();var z=b.type;if(null!==a&&null!=b.stateNode){var m=a.memoizedProps,K=b.stateNode,yc=v();K=k(K,z,m,t,c,yc);y(a,b,K,z,m,t,c);
+a.ref!==b.ref&&(b.effectTag|=128)}else{if(!t)return null===b.stateNode?l("166"):void 0,null;a=v();if(r(b))L(b,c,a)&&d(b);else{a=e(z,t,c,a,b);a:for(m=b.child;null!==m;){if(5===m.tag||6===m.tag)g(a,m.stateNode);else if(4!==m.tag&&null!==m.child){m.child["return"]=m;m=m.child;continue}if(m===b)break;for(;null===m.sibling;){if(null===m["return"]||m["return"]===b)break a;m=m["return"]}m.sibling["return"]=m["return"];m=m.sibling}h(a,z,t,c)&&d(b);b.stateNode=a}null!==b.ref&&(b.effectTag|=128)}return null;
+case 6:if(a&&null!=b.stateNode)x(a,b,a.memoizedProps,t);else{if("string"!==typeof t)return null===b.stateNode?l("166"):void 0,null;a=D();c=v();r(b)?R(b)&&d(b):b.stateNode=f(t,a,c,b)}return null;case 7:(t=b.memoizedProps)?void 0:l("165");b.tag=8;z=[];a:for((m=b.stateNode)&&(m["return"]=b);null!==m;){if(5===m.tag||6===m.tag||4===m.tag)l("247");else if(9===m.tag)z.push(m.type);else if(null!==m.child){m.child["return"]=m;m=m.child;continue}for(;null===m.sibling;){if(null===m["return"]||m["return"]===
+b)break a;m=m["return"]}m.sibling["return"]=m["return"];m=m.sibling}m=t.handler;t=m(t.props,z);b.child=db(b,null!==a?a.child:null,t,c);return b.child;case 8:return b.tag=7,null;case 9:return null;case 10:return null;case 4:return n(b),w(b),null;case 0:l("167");default:l("156")}}}},dg=function(a,b){function c(a){var c=a.ref;if(null!==c)try{c(null)}catch(z){b(a,z)}}function d(a){"function"===typeof ge&&ge(a);switch(a.tag){case 2:c(a);var d=a.stateNode;if("function"===typeof d.componentWillUnmount)try{d.props=
+a.memoizedProps,d.state=a.memoizedState,d.componentWillUnmount()}catch(z){b(a,z)}break;case 5:c(a);break;case 7:e(a.stateNode);break;case 4:k&&g(a)}}function e(a){for(var b=a;;)if(d(b),null===b.child||k&&4===b.tag){if(b===a)break;for(;null===b.sibling;){if(null===b["return"]||b["return"]===a)return;b=b["return"]}b.sibling["return"]=b["return"];b=b.sibling}else b.child["return"]=b,b=b.child}function f(a){return 5===a.tag||3===a.tag||4===a.tag}function g(a){for(var b=a,c=!1,f=void 0,g=void 0;;){if(!c){c=
+b["return"];a:for(;;){null===c?l("160"):void 0;switch(c.tag){case 5:f=c.stateNode;g=!1;break a;case 3:f=c.stateNode.containerInfo;g=!0;break a;case 4:f=c.stateNode.containerInfo;g=!0;break a}c=c["return"]}c=!0}if(5===b.tag||6===b.tag)e(b),g?y(f,b.stateNode):w(f,b.stateNode);else if(4===b.tag?f=b.stateNode.containerInfo:d(b),null!==b.child){b.child["return"]=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b["return"]||b["return"]===a)return;b=b["return"];4===b.tag&&(c=!1)}b.sibling["return"]=
+b["return"];b=b.sibling}}var h=a.getPublicInstance,k=a.mutation;a=a.persistence;k||(a?l("235"):l("236"));var m=k.commitMount,D=k.commitUpdate,A=k.resetTextContent,v=k.commitTextUpdate,n=k.appendChild,L=k.appendChildToContainer,R=k.insertBefore,r=k.insertInContainerBefore,w=k.removeChild,y=k.removeChildFromContainer;return{commitResetTextContent:function(a){A(a.stateNode)},commitPlacement:function(a){a:{for(var b=a["return"];null!==b;){if(f(b)){var c=b;break a}b=b["return"]}l("160");c=void 0}var d=
+b=void 0;switch(c.tag){case 5:b=c.stateNode;d=!1;break;case 3:b=c.stateNode.containerInfo;d=!0;break;case 4:b=c.stateNode.containerInfo;d=!0;break;default:l("161")}c.effectTag&16&&(A(b),c.effectTag&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c["return"]||f(c["return"])){c=null;break a}c=c["return"]}c.sibling["return"]=c["return"];for(c=c.sibling;5!==c.tag&&6!==c.tag;){if(c.effectTag&2)continue b;if(null===c.child||4===c.tag)continue b;else c.child["return"]=c,c=c.child}if(!(c.effectTag&
+2)){c=c.stateNode;break a}}for(var e=a;;){if(5===e.tag||6===e.tag)c?d?r(b,e.stateNode,c):R(b,e.stateNode,c):d?L(b,e.stateNode):n(b,e.stateNode);else if(4!==e.tag&&null!==e.child){e.child["return"]=e;e=e.child;continue}if(e===a)break;for(;null===e.sibling;){if(null===e["return"]||e["return"]===a)return;e=e["return"]}e.sibling["return"]=e["return"];e=e.sibling}},commitDeletion:function(a){g(a);a["return"]=null;a.child=null;a.alternate&&(a.alternate.child=null,a.alternate["return"]=null)},commitWork:function(a,
+b){switch(b.tag){case 2:break;case 5:var c=b.stateNode;if(null!=c){var d=b.memoizedProps;a=null!==a?a.memoizedProps:d;var e=b.type,f=b.updateQueue;b.updateQueue=null;null!==f&&D(c,f,e,a,d,b)}break;case 6:null===b.stateNode?l("162"):void 0;c=b.memoizedProps;v(b.stateNode,null!==a?a.memoizedProps:c,c);break;case 3:break;default:l("163")}},commitLifeCycles:function(a,b){switch(b.tag){case 2:var c=b.stateNode;if(b.effectTag&4)if(null===a)c.props=b.memoizedProps,c.state=b.memoizedState,c.componentDidMount();
+else{var d=a.memoizedProps;a=a.memoizedState;c.props=b.memoizedProps;c.state=b.memoizedState;c.componentDidUpdate(d,a)}b=b.updateQueue;null!==b&&je(b,c);break;case 3:c=b.updateQueue;null!==c&&je(c,null!==b.child?b.child.stateNode:null);break;case 5:c=b.stateNode;null===a&&b.effectTag&4&&m(c,b.type,b.memoizedProps,b);break;case 6:break;case 4:break;default:l("163")}},commitAttachRef:function(a){var b=a.ref;if(null!==b){var c=a.stateNode;switch(a.tag){case 5:b(h(c));break;default:b(c)}}},commitDetachRef:function(a){a=
+a.ref;null!==a&&a(null)}}},la={},eg=function(a){function b(a){a===la?l("174"):void 0;return a}var c=a.getChildHostContext,d=a.getRootHostContext,e={current:la},f={current:la},g={current:la};return{getHostContext:function(){return b(e.current)},getRootHostContainer:function(){return b(g.current)},popHostContainer:function(a){I(e,a);I(f,a);I(g,a)},popHostContext:function(a){f.current===a&&(I(e,a),I(f,a))},pushHostContainer:function(a,b){M(g,b,a);b=d(b);M(f,a,a);M(e,b,a)},pushHostContext:function(a){var d=
+b(g.current),h=b(e.current);d=c(h,a.type,d);h!==d&&(M(f,a,a),M(e,d,a))},resetHostContainer:function(){e.current=la;g.current=la}}},fg=function(a){function b(a,b){var c=new Q(5,null,0);c.type="DELETED";c.stateNode=b;c["return"]=a;c.effectTag=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c}function c(a,b){switch(a.tag){case 5:return b=f(b,a.type,a.pendingProps),null!==b?(a.stateNode=b,!0):!1;case 6:return b=g(b,a.pendingProps),null!==b?(a.stateNode=b,!0):
+!1;default:return!1}}function d(a){for(a=a["return"];null!==a&&5!==a.tag&&3!==a.tag;)a=a["return"];A=a}var e=a.shouldSetTextContent;a=a.hydration;if(!a)return{enterHydrationState:function(){return!1},resetHydrationState:function(){},tryToClaimNextHydratableInstance:function(){},prepareToHydrateHostInstance:function(){l("175")},prepareToHydrateHostTextInstance:function(){l("176")},popHydrationState:function(a){return!1}};var f=a.canHydrateInstance,g=a.canHydrateTextInstance,h=a.getNextHydratableSibling,
+k=a.getFirstHydratableChild,m=a.hydrateInstance,D=a.hydrateTextInstance,A=null,v=null,n=!1;return{enterHydrationState:function(a){v=k(a.stateNode.containerInfo);A=a;return n=!0},resetHydrationState:function(){v=A=null;n=!1},tryToClaimNextHydratableInstance:function(a){if(n){var d=v;if(d){if(!c(a,d)){d=h(d);if(!d||!c(a,d)){a.effectTag|=2;n=!1;A=a;return}b(A,v)}A=a;v=k(d)}else a.effectTag|=2,n=!1,A=a}},prepareToHydrateHostInstance:function(a,b,c){b=m(a.stateNode,a.type,a.memoizedProps,b,c,a);a.updateQueue=
+b;return null!==b?!0:!1},prepareToHydrateHostTextInstance:function(a){return D(a.stateNode,a.memoizedProps,a)},popHydrationState:function(a){if(a!==A)return!1;if(!n)return d(a),n=!0,!1;var c=a.type;if(5!==a.tag||"head"!==c&&"body"!==c&&!e(c,a.memoizedProps))for(c=v;c;)b(a,c),c=h(c);d(a);v=A?h(a.stateNode):null;return!0}}},gg=function(a){function b(a){X=Ba=!0;var b=a.stateNode;b.current===a?l("177"):void 0;b.isReadyForCommit=!1;bb.current=null;if(1<a.effectTag)if(null!==a.lastEffect){a.lastEffect.nextEffect=
+a;var c=a.firstEffect}else c=a;else c=a.firstEffect;za();for(u=c;null!==u;){var d=!1,e=void 0;try{for(;null!==u;){var f=u.effectTag;f&16&&aa(u);if(f&128){var g=u.alternate;null!==g&&va(g)}switch(f&-242){case 2:V(u);u.effectTag&=-3;break;case 6:V(u);u.effectTag&=-3;ca(u.alternate,u);break;case 4:ca(u.alternate,u);break;case 8:ka=!0,na(u),ka=!1}u=u.nextEffect}}catch(Qc){d=!0,e=Qc}d&&(null===u?l("178"):void 0,h(u,e),null!==u&&(u=u.nextEffect))}Aa();b.current=a;for(u=c;null!==u;){c=!1;d=void 0;try{for(;null!==
+u;){var k=u.effectTag;k&36&&sa(u.alternate,u);k&128&&ta(u);if(k&64)switch(e=u,f=void 0,null!==S&&(f=S.get(e),S["delete"](e),null==f&&null!==e.alternate&&(e=e.alternate,f=S.get(e),S["delete"](e))),null==f?l("184"):void 0,e.tag){case 2:e.stateNode.componentDidCatch(f.error,{componentStack:f.componentStack});break;case 3:null===ma&&(ma=f.error);break;default:l("157")}var Ma=u.nextEffect;u.nextEffect=null;u=Ma}}catch(Qc){c=!0,d=Qc}c&&(null===u?l("178"):void 0,h(u,d),null!==u&&(u=u.nextEffect))}Ba=X=!1;
+"function"===typeof fe&&fe(a.stateNode);ua&&(ua.forEach(w),ua=null);null!==ma&&(a=ma,ma=null,G(a));b=b.current.expirationTime;0===b&&(Ia=S=null);return b}function c(a){for(;;){var b=Y(a.alternate,a,F),c=a["return"],d=a.sibling;var e=a;if(2147483647===F||2147483647!==e.expirationTime){if(2!==e.tag&&3!==e.tag)var f=0;else f=e.updateQueue,f=null===f?0:f.expirationTime;for(var g=e.child;null!==g;)0!==g.expirationTime&&(0===f||f>g.expirationTime)&&(f=g.expirationTime),g=g.sibling;e.expirationTime=f}if(null!==
+b)return b;null!==c&&(null===c.firstEffect&&(c.firstEffect=a.firstEffect),null!==a.lastEffect&&(null!==c.lastEffect&&(c.lastEffect.nextEffect=a.firstEffect),c.lastEffect=a.lastEffect),1<a.effectTag&&(null!==c.lastEffect?c.lastEffect.nextEffect=a:c.firstEffect=a,c.lastEffect=a));if(null!==d)return d;if(null!==c)a=c;else{a.stateNode.isReadyForCommit=!0;break}}return null}function d(a){var b=Q(a.alternate,a,F);null===b&&(b=c(a));bb.current=null;return b}function e(a){var b=T(a.alternate,a,F);null===
+b&&(b=c(a));bb.current=null;return b}function f(a){if(null!==S){if(!(0===F||F>a))if(F<=ha)for(;null!==B;)B=k(B)?e(B):d(B);else for(;null!==B&&!z();)B=k(B)?e(B):d(B)}else if(!(0===F||F>a))if(F<=ha)for(;null!==B;)B=d(B);else for(;null!==B&&!z();)B=d(B)}function g(a,b){Ba?l("243"):void 0;Ba=!0;a.isReadyForCommit=!1;if(a!==Ja||b!==F||null===B){for(;-1<ra;)vb[ra]=null,ra--;wb=ja;ia.current=ja;J.current=!1;P();Ja=a;F=b;B=yb(Ja.current,null,b)}var c=!1,d=null;try{f(b)}catch(Pc){c=!0,d=Pc}for(;c;){if(U){ma=
+d;break}var g=B;if(null===g)U=!0;else{var k=h(g,d);null===k?l("183"):void 0;if(!U){try{c=k;d=b;for(k=c;null!==g;){switch(g.tag){case 2:ae(g);break;case 5:O(g);break;case 3:I(g);break;case 4:I(g)}if(g===k||g.alternate===k)break;g=g["return"]}B=e(c);f(d)}catch(Pc){c=!0;d=Pc;continue}break}}}b=ma;U=Ba=!1;ma=null;null!==b&&G(b);return a.isReadyForCommit?a.current.alternate:null}function h(a,b){var c=bb.current=null,d=!1,e=!1,f=null;if(3===a.tag)c=a,m(a)&&(U=!0);else for(var g=a["return"];null!==g&&null===
+c;){2===g.tag?"function"===typeof g.stateNode.componentDidCatch&&(d=!0,f=Pa(g),c=g,e=!0):3===g.tag&&(c=g);if(m(g)){if(ka||null!==ua&&(ua.has(g)||null!==g.alternate&&ua.has(g.alternate)))return null;c=null;e=!1}g=g["return"]}if(null!==c){null===Ia&&(Ia=new Set);Ia.add(c);var h="";g=a;do{a:switch(g.tag){case 0:case 1:case 2:case 5:var k=g._debugOwner,l=g._debugSource;var Ma=Pa(g);var p=null;k&&(p=Pa(k));k=l;Ma="\n    in "+(Ma||"Unknown")+(k?" (at "+k.fileName.replace(/^.*[\\\/]/,"")+":"+k.lineNumber+
+")":p?" (created by "+p+")":"");break a;default:Ma=""}h+=Ma;g=g["return"]}while(g);g=h;a=Pa(a);null===S&&(S=new Map);b={componentName:a,componentStack:g,error:b,errorBoundary:d?c.stateNode:null,errorBoundaryFound:d,errorBoundaryName:f,willRetry:e};S.set(c,b);try{var n=b.error;n&&n.suppressReactErrorLogging||console.error(n)}catch(Rc){Rc&&Rc.suppressReactErrorLogging||console.error(Rc)}X?(null===ua&&(ua=new Set),ua.add(c)):w(c);return c}null===ma&&(ma=b);return null}function k(a){return null!==S&&
+(S.has(a)||null!==a.alternate&&S.has(a.alternate))}function m(a){return null!==Ia&&(Ia.has(a)||null!==a.alternate&&Ia.has(a.alternate))}function n(){return 20*(((y()+100)/20|0)+1)}function A(a){return 0!==Ca?Ca:Ba?X?1:F:!ya||a.internalContextTag&1?n():1}function v(a,b){return r(a,b,!1)}function r(a,b,c){for(;null!==a;){if(0===a.expirationTime||a.expirationTime>b)a.expirationTime=b;null!==a.alternate&&(0===a.alternate.expirationTime||a.alternate.expirationTime>b)&&(a.alternate.expirationTime=b);if(null===
+a["return"])if(3===a.tag){c=a.stateNode;!Ba&&c===Ja&&b<F&&(B=Ja=null,F=0);var d=c,e=b;fa>Ga&&l("185");if(null===d.nextScheduledRoot)d.remainingExpirationTime=e,null===N?(Ka=N=d,d.nextScheduledRoot=d):(N=N.nextScheduledRoot=d,N.nextScheduledRoot=Ka);else{var f=d.remainingExpirationTime;if(0===f||e<f)d.remainingExpirationTime=e}Na||(Da?ea&&(Ea=d,Fa=1,t(Ea,Fa)):1===e?x(1,null):C(e));!Ba&&c===Ja&&b<F&&(B=Ja=null,F=0)}else break;a=a["return"]}}function w(a){r(a,1,!0)}function y(){return ha=((ba()-qa)/
+10|0)+2}function C(a){if(0!==Z){if(a>Z)return;xa(la)}var b=ba()-qa;Z=a;la=wa(H,{timeout:10*(a-2)-b})}function E(){var a=0,b=null;if(null!==N)for(var c=N,d=Ka;null!==d;){var e=d.remainingExpirationTime;if(0===e){null===c||null===N?l("244"):void 0;if(d===d.nextScheduledRoot){Ka=N=d.nextScheduledRoot=null;break}else if(d===Ka)Ka=e=d.nextScheduledRoot,N.nextScheduledRoot=e,d.nextScheduledRoot=null;else if(d===N){N=c;N.nextScheduledRoot=Ka;d.nextScheduledRoot=null;break}else c.nextScheduledRoot=d.nextScheduledRoot,
+d.nextScheduledRoot=null;d=c.nextScheduledRoot}else{if(0===a||e<a)a=e,b=d;if(d===N)break;c=d;d=d.nextScheduledRoot}}c=Ea;null!==c&&c===b?fa++:fa=0;Ea=b;Fa=a}function H(a){x(0,a)}function x(a,b){W=b;for(E();null!==Ea&&0!==Fa&&(0===a||Fa<=a)&&!oa;)t(Ea,Fa),E();null!==W&&(Z=0,la=-1);0!==Fa&&C(Fa);W=null;oa=!1;fa=0;if(da)throw (a=pa, pa=null, da=!1, a);}function t(a,c){Na?l("245"):void 0;Na=!0;if(c<=y()){var d=a.finishedWork;null!==d?(a.finishedWork=null,a.remainingExpirationTime=b(d)):(a.finishedWork=null,
+d=g(a,c),null!==d&&(a.remainingExpirationTime=b(d)))}else d=a.finishedWork,null!==d?(a.finishedWork=null,a.remainingExpirationTime=b(d)):(a.finishedWork=null,d=g(a,c),null!==d&&(z()?a.finishedWork=d:a.remainingExpirationTime=b(d)));Na=!1}function z(){return null===W||W.timeRemaining()>Ha?!1:oa=!0}function G(a){null===Ea?l("246"):void 0;Ea.remainingExpirationTime=0;da||(da=!0,pa=a)}var q=eg(a),p=fg(a),I=q.popHostContainer,O=q.popHostContext,P=q.resetHostContainer,M=bg(a,q,p,v,A),Q=M.beginWork,T=M.beginFailedWork,
+Y=cg(a,q,p).completeWork;q=dg(a,h);var aa=q.commitResetTextContent,V=q.commitPlacement,na=q.commitDeletion,ca=q.commitWork,sa=q.commitLifeCycles,ta=q.commitAttachRef,va=q.commitDetachRef,ba=a.now,wa=a.scheduleDeferredCallback,xa=a.cancelDeferredCallback,ya=a.useSyncScheduling,za=a.prepareForCommit,Aa=a.resetAfterCommit,qa=ba(),ha=2,Ca=0,Ba=!1,B=null,Ja=null,F=0,u=null,S=null,Ia=null,ua=null,ma=null,U=!1,X=!1,ka=!1,Ka=null,N=null,Z=0,la=-1,Na=!1,Ea=null,Fa=0,oa=!1,da=!1,pa=null,W=null,Da=!1,ea=!1,
+Ga=1E3,fa=0,Ha=1;return{computeAsyncExpiration:n,computeExpirationForFiber:A,scheduleWork:v,batchedUpdates:function(a,b){var c=Da;Da=!0;try{return a(b)}finally{(Da=c)||Na||x(1,null)}},unbatchedUpdates:function(a){if(Da&&!ea){ea=!0;try{return a()}finally{ea=!1}}return a()},flushSync:function(a){var b=Da;Da=!0;try{a:{var c=Ca;Ca=1;try{var d=a();break a}finally{Ca=c}d=void 0}return d}finally{Da=b,Na?l("187"):void 0,x(1,null)}},deferredUpdates:function(a){var b=Ca;Ca=n();try{return a()}finally{Ca=b}}}},
+Te=function(a){function b(a){a=wf(a);return null===a?null:a.stateNode}var c=a.getPublicInstance;a=gg(a);var d=a.computeAsyncExpiration,e=a.computeExpirationForFiber,f=a.scheduleWork;return{createContainer:function(a,b){var c=new Q(3,null,0);a={current:c,containerInfo:a,pendingChildren:null,remainingExpirationTime:0,isReadyForCommit:!1,finishedWork:null,context:null,pendingContext:null,hydrate:b,nextScheduledRoot:null};return c.stateNode=a},updateContainer:function(a,b,c,m){var g=b.current;if(c){c=
+c._reactInternalFiber;var h;b:{2===Qa(c)&&2===c.tag?void 0:l("170");for(h=c;3!==h.tag;){if(Ua(h)){h=h.stateNode.__reactInternalMemoizedMergedChildContext;break b}(h=h["return"])?void 0:l("171")}h=h.stateNode.context}c=Ua(c)?ce(c,h):h}else c=ja;null===b.context?b.context=c:b.pendingContext=c;b=m;b=void 0===b?null:b;m=null!=a&&null!=a.type&&null!=a.type.prototype&&!0===a.type.prototype.unstable_isAsyncReactComponent?d():e(g);Bb(g,{expirationTime:m,partialState:{element:a},callback:b,isReplace:!1,isForced:!1,
+nextCallback:null,next:null});f(g,m)},batchedUpdates:a.batchedUpdates,unbatchedUpdates:a.unbatchedUpdates,deferredUpdates:a.deferredUpdates,flushSync:a.flushSync,getPublicRootInstance:function(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return c(a.child.stateNode);default:return a.child.stateNode}},findHostInstance:b,findHostInstanceWithNoPortals:function(a){a=xf(a);return null===a?null:a.stateNode},injectIntoDevTools:function(a){var c=a.findFiberByHostInstance;return Af(C({},
+a,{findHostInstanceByFiber:function(a){return b(a)},findFiberByHostInstance:function(a){return c?c(a):null}}))}}},Ue=Object.freeze({default:Te}),Sc=Ue&&Te||Ue,hg=Sc["default"]?Sc["default"]:Sc,Ve="object"===typeof performance&&"function"===typeof performance.now,Nb=void 0;Nb=Ve?function(){return performance.now()}:function(){return Date.now()};var Ob=void 0,Pb=void 0;if(P.canUseDOM)if("function"!==typeof requestIdleCallback||"function"!==typeof cancelIdleCallback){var Qb=null,Rb=!1,eb=-1,fb=!1,gb=
+0,Sb=33,hb=33;var Tc=Ve?{didTimeout:!1,timeRemaining:function(){var a=gb-performance.now();return 0<a?a:0}}:{didTimeout:!1,timeRemaining:function(){var a=gb-Date.now();return 0<a?a:0}};var We="__reactIdleCallback$"+Math.random().toString(36).slice(2);window.addEventListener("message",function(a){if(a.source===window&&a.data===We){Rb=!1;a=Nb();if(0>=gb-a)if(-1!==eb&&eb<=a)Tc.didTimeout=!0;else{fb||(fb=!0,requestAnimationFrame(Xe));return}else Tc.didTimeout=!1;eb=-1;a=Qb;Qb=null;null!==a&&a(Tc)}},!1);
+var Xe=function(a){fb=!1;var b=a-gb+hb;b<hb&&Sb<hb?(8>b&&(b=8),hb=b<Sb?Sb:b):Sb=b;gb=a+hb;Rb||(Rb=!0,window.postMessage(We,"*"))};Ob=function(a,b){Qb=a;null!=b&&"number"===typeof b.timeout&&(eb=Nb()+b.timeout);fb||(fb=!0,requestAnimationFrame(Xe));return 0};Pb=function(){Qb=null;Rb=!1;eb=-1}}else Ob=window.requestIdleCallback,Pb=window.cancelIdleCallback;else Ob=function(a){return setTimeout(function(){a({timeRemaining:function(){return Infinity}})})},Pb=function(a){clearTimeout(a)};var Df=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,
+ne={},me={},Tb=void 0,Be=function(a){return"undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)})}:a}(function(a,b){if("http://www.w3.org/2000/svg"!==a.namespaceURI||"innerHTML"in a)a.innerHTML=b;else{Tb=Tb||document.createElement("div");Tb.innerHTML="\x3csvg\x3e"+b+"\x3c/svg\x3e";for(b=Tb.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}}),Ic=function(a,b){if(b){var c=
+a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b},Za={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,
+order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ig=["Webkit","ms","Moz","O"];Object.keys(Za).forEach(function(a){ig.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);Za[b]=Za[a]})});var Ff=C({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}),$a=G.thatReturns(""),
+Z={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",
+topWaiting:"waiting"},jg=Object.freeze({createElement:ye,createTextNode:ze,setInitialProperties:Ae,diffProperties:Ce,updateProperties:De,diffHydratedProperties:Ee,diffHydratedText:Fe,warnForUnmatchedText:function(a,b){},warnForDeletedHydratableElement:function(a,b){},warnForDeletedHydratableText:function(a,b){},warnForInsertedHydratedElement:function(a,b,c){},warnForInsertedHydratedText:function(a,b){},restoreControlledState:function(a,b,c){switch(b){case "input":Cc(a,c);b=c.name;if("radio"===c.type&&
+null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll("input[name\x3d"+JSON.stringify(""+b)+'][type\x3d"radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=fd(d);e?void 0:l("90");Bd(d);Cc(d,e)}}}break;case "textarea":ue(a,c);break;case "select":b=c.value,null!=b&&ka(a,!!c.multiple,b,!1)}}});Qe.injectFiberControlledHostComponent(jg);var Uc=null,Vc=null,E=hg({getRootHostContext:function(a){var b=a.nodeType;switch(b){case 9:case 11:a=(a=a.documentElement)?a.namespaceURI:
+Fc(null,"");break;default:b=8===b?a.parentNode:a,a=b.namespaceURI||null,b=b.tagName,a=Fc(a,b)}return a},getChildHostContext:function(a,b){return Fc(a,b)},getPublicInstance:function(a){return a},prepareForCommit:function(){Uc=Ra;var a=nc();if(lc(a)){if("selectionStart"in a)var b={start:a.selectionStart,end:a.selectionEnd};else a:{var c=window.getSelection&&window.getSelection();if(c&&0!==c.rangeCount){b=c.anchorNode;var d=c.anchorOffset,e=c.focusNode;c=c.focusOffset;try{b.nodeType,e.nodeType}catch(K){b=
+null;break a}var f=0,g=-1,h=-1,k=0,l=0,n=a,r=null;b:for(;;){for(var v;;){n!==b||0!==d&&3!==n.nodeType||(g=f+d);n!==e||0!==c&&3!==n.nodeType||(h=f+c);3===n.nodeType&&(f+=n.nodeValue.length);if(null===(v=n.firstChild))break;r=n;n=v}for(;;){if(n===a)break b;r===b&&++k===d&&(g=f);r===e&&++l===c&&(h=f);if(null!==(v=n.nextSibling))break;n=r;r=n.parentNode}n=v}b=-1===g||-1===h?null:{start:g,end:h}}else b=null}b=b||{start:0,end:0}}else b=null;Vc={focusedElem:a,selectionRange:b};ic(!1)},resetAfterCommit:function(){var a=
+Vc,b=nc(),c=a.focusedElem,d=a.selectionRange;if(b!==c&&Nd(document.documentElement,c)){if(lc(c))if(b=d.start,a=d.end,void 0===a&&(a=b),"selectionStart"in c)c.selectionStart=b,c.selectionEnd=Math.min(a,c.value.length);else if(window.getSelection){b=window.getSelection();var e=c[jd()].length;a=Math.min(d.start,e);d=void 0===d.end?a:Math.min(d.end,e);!b.extend&&a>d&&(e=d,d=a,a=e);e=Qd(c,a);var f=Qd(c,d);if(e&&f&&(1!==b.rangeCount||b.anchorNode!==e.node||b.anchorOffset!==e.offset||b.focusNode!==f.node||
+b.focusOffset!==f.offset)){var g=document.createRange();g.setStart(e.node,e.offset);b.removeAllRanges();a>d?(b.addRange(g),b.extend(f.node,f.offset)):(g.setEnd(f.node,f.offset),b.addRange(g))}}b=[];for(a=c;a=a.parentNode;)1===a.nodeType&&b.push({element:a,left:a.scrollLeft,top:a.scrollTop});try{c.focus()}catch(h){}for(c=0;c<b.length;c++)a=b[c],a.element.scrollLeft=a.left,a.element.scrollTop=a.top}Vc=null;ic(Uc);Uc=null},createInstance:function(a,b,c,d,e){a=ye(a,b,c,d);a[O]=e;a[ea]=b;return a},appendInitialChild:function(a,
+b){a.appendChild(b)},finalizeInitialChildren:function(a,b,c,d){Ae(a,b,c,d);a:{switch(b){case "button":case "input":case "select":case "textarea":a=!!c.autoFocus;break a}a=!1}return a},prepareUpdate:function(a,b,c,d,e,f){return Ce(a,b,c,d,e)},shouldSetTextContent:function(a,b){return"textarea"===a||"string"===typeof b.children||"number"===typeof b.children||"object"===typeof b.dangerouslySetInnerHTML&&null!==b.dangerouslySetInnerHTML&&"string"===typeof b.dangerouslySetInnerHTML.__html},shouldDeprioritizeSubtree:function(a,
+b){return!!b.hidden},createTextInstance:function(a,b,c,d){a=ze(a,b);a[O]=d;return a},now:Nb,mutation:{commitMount:function(a,b,c,d){a.focus()},commitUpdate:function(a,b,c,d,e,f){a[ea]=e;De(a,b,c,d,e)},resetTextContent:function(a){a.textContent=""},commitTextUpdate:function(a,b,c){a.nodeValue=c},appendChild:function(a,b){a.appendChild(b)},appendChildToContainer:function(a,b){8===a.nodeType?a.parentNode.insertBefore(b,a):a.appendChild(b)},insertBefore:function(a,b,c){a.insertBefore(b,c)},insertInContainerBefore:function(a,
+b,c){8===a.nodeType?a.parentNode.insertBefore(b,c):a.insertBefore(b,c)},removeChild:function(a,b){a.removeChild(b)},removeChildFromContainer:function(a,b){8===a.nodeType?a.parentNode.removeChild(b):a.removeChild(b)}},hydration:{canHydrateInstance:function(a,b,c){return 1!==a.nodeType||b.toLowerCase()!==a.nodeName.toLowerCase()?null:a},canHydrateTextInstance:function(a,b){return""===b||3!==a.nodeType?null:a},getNextHydratableSibling:function(a){for(a=a.nextSibling;a&&1!==a.nodeType&&3!==a.nodeType;)a=
+a.nextSibling;return a},getFirstHydratableChild:function(a){for(a=a.firstChild;a&&1!==a.nodeType&&3!==a.nodeType;)a=a.nextSibling;return a},hydrateInstance:function(a,b,c,d,e,f){a[O]=f;a[ea]=c;return Ee(a,b,c,e,d)},hydrateTextInstance:function(a,b,c){a[O]=c;return Fe(a,b)},didNotMatchHydratedContainerTextInstance:function(a,b,c){},didNotMatchHydratedTextInstance:function(a,b,c,d,e){},didNotHydrateContainerInstance:function(a,b){},didNotHydrateInstance:function(a,b,c,d){},didNotFindHydratableContainerInstance:function(a,
+b,c){},didNotFindHydratableContainerTextInstance:function(a,b){},didNotFindHydratableInstance:function(a,b,c,d,e){},didNotFindHydratableTextInstance:function(a,b,c,d){}},scheduleDeferredCallback:Ob,cancelDeferredCallback:Pb,useSyncScheduling:!0});ec=E.batchedUpdates;He.prototype.render=function(a,b){E.updateContainer(a,this._reactRootContainer,null,b)};He.prototype.unmount=function(a){E.updateContainer(null,this._reactRootContainer,null,a)};var Ye={createPortal:Ge,findDOMNode:function(a){if(null==
+a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;if(b)return E.findHostInstance(b);"function"===typeof a.render?l("188"):l("213",Object.keys(a))},hydrate:function(a,b,c){return Hb(null,a,b,!0,c)},render:function(a,b,c){return Hb(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,b,c,d){null==a||void 0===a._reactInternalFiber?l("38"):void 0;return Hb(a,b,c,!1,d)},unmountComponentAtNode:function(a){Jc(a)?void 0:l("40");return a._reactRootContainer?(E.unbatchedUpdates(function(){Hb(null,
+null,a,!1,function(){a._reactRootContainer=null})}),!0):!1},unstable_createPortal:Ge,unstable_batchedUpdates:cc,unstable_deferredUpdates:E.deferredUpdates,flushSync:E.flushSync,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{EventPluginHub:Mf,EventPluginRegistry:Lf,EventPropagators:Nf,ReactControlledComponent:Rf,ReactDOMComponentTree:Oe,ReactDOMEventListener:Uf}};E.injectIntoDevTools({findFiberByHostInstance:W,bundleType:0,version:"16.2.0",rendererPackageName:"react-dom"});var Ze=Object.freeze({default:Ye}),
+Wc=Ze&&Ye||Ze;return Wc["default"]?Wc["default"]:Wc});
diff --git a/devtools/client/inspector/markup/test/lib_react_with_addons_15.3.1_min.js b/devtools/client/inspector/markup/test/lib_react_with_addons_15.3.1_min.js
new file mode 100644
index 0000000000..42f1dd5e1b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_react_with_addons_15.3.1_min.js
@@ -0,0 +1,16 @@
+/**
+ * React (with addons) v15.3.1
+ *
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.React=e()}}(function(){return function e(t,n,r){function o(a,s){if(!n[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var c=n[a]={exports:{}};t[a][0].call(c.exports,function(e){var n=t[a][1][e];return o(n?n:e)},c,c.exports,e,t,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(e,t,n){"use strict";var r=e(44),o=e(162),i={focusDOMComponent:function(){o(r.getNodeFromInstance(this))}};t.exports=i},{162:162,44:44}],2:[function(e,t,n){"use strict";function r(){var e=window.opera;return"object"==typeof e&&"function"==typeof e.version&&parseInt(e.version(),10)<=12}function o(e){return(e.ctrlKey||e.altKey||e.metaKey)&&!(e.ctrlKey&&e.altKey)}function i(e){switch(e){case S.topCompositionStart:return k.compositionStart;case S.topCompositionEnd:return k.compositionEnd;case S.topCompositionUpdate:return k.compositionUpdate}}function a(e,t){return e===S.topKeyDown&&t.keyCode===_}function s(e,t){switch(e){case S.topKeyUp:return b.indexOf(t.keyCode)!==-1;case S.topKeyDown:return t.keyCode!==_;case S.topKeyPress:case S.topMouseDown:case S.topBlur:return!0;default:return!1}}function u(e){var t=e.detail;return"object"==typeof t&&"data"in t?t.data:null}function l(e,t,n,r){var o,l;if(E?o=i(e):R?s(e,n)&&(o=k.compositionEnd):a(e,n)&&(o=k.compositionStart),!o)return null;P&&(R||o!==k.compositionStart?o===k.compositionEnd&&R&&(l=R.getData()):R=v.getPooled(r));var c=g.getPooled(o,t,n,r);if(l)c.data=l;else{var p=u(n);null!==p&&(c.data=p)}return h.accumulateTwoPhaseDispatches(c),c}function c(e,t){switch(e){case S.topCompositionEnd:return u(t);case S.topKeyPress:var n=t.which;return n!==N?null:(M=!0,w);case S.topTextInput:var r=t.data;return r===w&&M?null:r;default:return null}}function p(e,t){if(R){if(e===S.topCompositionEnd||s(e,t)){var n=R.getData();return v.release(R),R=null,n}return null}switch(e){case S.topPaste:return null;case S.topKeyPress:return t.which&&!o(t)?String.fromCharCode(t.which):null;case S.topCompositionEnd:return P?null:t.data;default:return null}}function d(e,t,n,r){var o;if(o=x?c(e,n):p(e,n),!o)return null;var i=y.getPooled(k.beforeInput,t,n,r);return i.data=o,h.accumulateTwoPhaseDispatches(i),i}var f=e(16),h=e(20),m=e(154),v=e(21),g=e(106),y=e(110),C=e(172),b=[9,13,27,32],_=229,E=m.canUseDOM&&"CompositionEvent"in window,T=null;m.canUseDOM&&"documentMode"in document&&(T=document.documentMode);var x=m.canUseDOM&&"TextEvent"in window&&!T&&!r(),P=m.canUseDOM&&(!E||T&&T>8&&T<=11),N=32,w=String.fromCharCode(N),S=f.topLevelTypes,k={beforeInput:{phasedRegistrationNames:{bubbled:C({onBeforeInput:null}),captured:C({onBeforeInputCapture:null})},dependencies:[S.topCompositionEnd,S.topKeyPress,S.topTextInput,S.topPaste]},compositionEnd:{phasedRegistrationNames:{bubbled:C({onCompositionEnd:null}),captured:C({onCompositionEndCapture:null})},dependencies:[S.topBlur,S.topCompositionEnd,S.topKeyDown,S.topKeyPress,S.topKeyUp,S.topMouseDown]},compositionStart:{phasedRegistrationNames:{bubbled:C({onCompositionStart:null}),captured:C({onCompositionStartCapture:null})},dependencies:[S.topBlur,S.topCompositionStart,S.topKeyDown,S.topKeyPress,S.topKeyUp,S.topMouseDown]},compositionUpdate:{phasedRegistrationNames:{bubbled:C({onCompositionUpdate:null}),captured:C({onCompositionUpdateCapture:null})},dependencies:[S.topBlur,S.topCompositionUpdate,S.topKeyDown,S.topKeyPress,S.topKeyUp,S.topMouseDown]}},M=!1,R=null,A={eventTypes:k,extractEvents:function(e,t,n,r){return[l(e,t,n,r),d(e,t,n,r)]}};t.exports=A},{106:106,110:110,154:154,16:16,172:172,20:20,21:21}],3:[function(e,t,n){"use strict";function r(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}var o={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},i=["Webkit","ms","Moz","O"];Object.keys(o).forEach(function(e){i.forEach(function(t){o[r(t,e)]=o[e]})});var a={background:{backgroundAttachment:!0,backgroundColor:!0,backgroundImage:!0,backgroundPositionX:!0,backgroundPositionY:!0,backgroundRepeat:!0},backgroundPosition:{backgroundPositionX:!0,backgroundPositionY:!0},border:{borderWidth:!0,borderStyle:!0,borderColor:!0},borderBottom:{borderBottomWidth:!0,borderBottomStyle:!0,borderBottomColor:!0},borderLeft:{borderLeftWidth:!0,borderLeftStyle:!0,borderLeftColor:!0},borderRight:{borderRightWidth:!0,borderRightStyle:!0,borderRightColor:!0},borderTop:{borderTopWidth:!0,borderTopStyle:!0,borderTopColor:!0},font:{fontStyle:!0,fontVariant:!0,fontWeight:!0,fontSize:!0,lineHeight:!0,fontFamily:!0},outline:{outlineWidth:!0,outlineStyle:!0,outlineColor:!0}},s={isUnitlessNumber:o,shorthandPropertyExpansions:a};t.exports=s},{}],4:[function(e,t,n){"use strict";var r=e(3),o=e(154),i=(e(71),e(156),e(124)),a=e(167),s=e(173),u=(e(175),s(function(e){return a(e)})),l=!1,c="cssFloat";if(o.canUseDOM){var p=document.createElement("div").style;try{p.font=""}catch(e){l=!0}void 0===document.documentElement.style.cssFloat&&(c="styleFloat")}var d={createMarkupForStyles:function(e,t){var n="";for(var r in e)if(e.hasOwnProperty(r)){var o=e[r];null!=o&&(n+=u(r)+":",n+=i(r,o,t)+";")}return n||null},setValueForStyles:function(e,t,n){var o=e.style;for(var a in t)if(t.hasOwnProperty(a)){var s=i(a,t[a],n);if("float"!==a&&"cssFloat"!==a||(a=c),s)o[a]=s;else{var u=l&&r.shorthandPropertyExpansions[a];if(u)for(var p in u)o[p]="";else o[a]=""}}}};t.exports=d},{124:124,154:154,156:156,167:167,173:173,175:175,3:3,71:71}],5:[function(e,t,n){"use strict";function r(){this._callbacks=null,this._contexts=null}var o=e(143),i=e(176),a=e(26);e(168);i(r.prototype,{enqueue:function(e,t){this._callbacks=this._callbacks||[],this._contexts=this._contexts||[],this._callbacks.push(e),this._contexts.push(t)},notifyAll:function(){var e=this._callbacks,t=this._contexts;if(e){e.length!==t.length?o("24"):void 0,this._callbacks=null,this._contexts=null;for(var n=0;n<e.length;n++)e[n].call(t[n]);e.length=0,t.length=0}},checkpoint:function(){return this._callbacks?this._callbacks.length:0},rollback:function(e){this._callbacks&&(this._callbacks.length=e,this._contexts.length=e)},reset:function(){this._callbacks=null,this._contexts=null},destructor:function(){this.reset()}}),a.addPoolingTo(r),t.exports=r},{143:143,168:168,176:176,26:26}],6:[function(e,t,n){"use strict";function r(e){var t=e.nodeName&&e.nodeName.toLowerCase();return"select"===t||"input"===t&&"file"===e.type}function o(e){var t=x.getPooled(M.change,A,e,P(e));b.accumulateTwoPhaseDispatches(t),T.batchedUpdates(i,t)}function i(e){C.enqueueEvents(e),C.processEventQueue(!1)}function a(e,t){R=e,A=t,R.attachEvent("onchange",o)}function s(){R&&(R.detachEvent("onchange",o),R=null,A=null)}function u(e,t){if(e===k.topChange)return t}function l(e,t,n){e===k.topFocus?(s(),a(t,n)):e===k.topBlur&&s()}function c(e,t){R=e,A=t,O=e.value,D=Object.getOwnPropertyDescriptor(e.constructor.prototype,"value"),Object.defineProperty(R,"value",U),R.attachEvent?R.attachEvent("onpropertychange",d):R.addEventListener("propertychange",d,!1)}function p(){R&&(delete R.value,R.detachEvent?R.detachEvent("onpropertychange",d):R.removeEventListener("propertychange",d,!1),R=null,A=null,O=null,D=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==O&&(O=t,o(e))}}function f(e,t){if(e===k.topInput)return t}function h(e,t,n){e===k.topFocus?(p(),c(t,n)):e===k.topBlur&&p()}function m(e,t){if((e===k.topSelectionChange||e===k.topKeyUp||e===k.topKeyDown)&&R&&R.value!==O)return O=R.value,A}function v(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function g(e,t){if(e===k.topClick)return t}var y=e(16),C=e(17),b=e(20),_=e(154),E=e(44),T=e(97),x=e(108),P=e(132),N=e(139),w=e(140),S=e(172),k=y.topLevelTypes,M={change:{phasedRegistrationNames:{bubbled:S({onChange:null}),captured:S({onChangeCapture:null})},dependencies:[k.topBlur,k.topChange,k.topClick,k.topFocus,k.topInput,k.topKeyDown,k.topKeyUp,k.topSelectionChange]}},R=null,A=null,O=null,D=null,I=!1;_.canUseDOM&&(I=N("change")&&(!("documentMode"in document)||document.documentMode>8));var L=!1;_.canUseDOM&&(L=N("input")&&(!("documentMode"in document)||document.documentMode>11));var U={get:function(){return D.get.call(this)},set:function(e){O=""+e,D.set.call(this,e)}},F={eventTypes:M,extractEvents:function(e,t,n,o){var i,a,s=t?E.getNodeFromInstance(t):window;if(r(s)?I?i=u:a=l:w(s)?L?i=f:(i=m,a=h):v(s)&&(i=g),i){var c=i(e,t);if(c){var p=x.getPooled(M.change,c,n,o);return p.type="change",b.accumulateTwoPhaseDispatches(p),p}}a&&a(e,s,t)}};t.exports=F},{108:108,132:132,139:139,140:140,154:154,16:16,17:17,172:172,20:20,44:44,97:97}],7:[function(e,t,n){"use strict";function r(e,t){return Array.isArray(t)&&(t=t[1]),t?t.nextSibling:e.firstChild}function o(e,t,n){c.insertTreeBefore(e,t,n)}function i(e,t,n){Array.isArray(t)?s(e,t[0],t[1],n):v(e,t,n)}function a(e,t){if(Array.isArray(t)){var n=t[1];t=t[0],u(e,t,n),e.removeChild(n)}e.removeChild(t)}function s(e,t,n,r){for(var o=t;;){var i=o.nextSibling;if(v(e,o,r),o===n)break;o=i}}function u(e,t,n){for(;;){var r=t.nextSibling;if(r===n)break;e.removeChild(r)}}function l(e,t,n){var r=e.parentNode,o=e.nextSibling;o===t?n&&v(r,document.createTextNode(n),o):n?(m(o,n),u(r,o,t)):u(r,e,t)}var c=e(8),p=e(12),d=e(76),f=(e(44),e(71),e(123)),h=e(145),m=e(146),v=f(function(e,t,n){e.insertBefore(t,n)}),g=p.dangerouslyReplaceNodeWithMarkup,y={dangerouslyReplaceNodeWithMarkup:g,replaceDelimitedText:l,processUpdates:function(e,t){for(var n=0;n<t.length;n++){var s=t[n];switch(s.type){case d.INSERT_MARKUP:o(e,s.content,r(e,s.afterNode));break;case d.MOVE_EXISTING:i(e,s.fromNode,r(e,s.afterNode));break;case d.SET_MARKUP:h(e,s.content);break;case d.TEXT_CONTENT:m(e,s.content);break;case d.REMOVE_NODE:a(e,s.fromNode)}}}};t.exports=y},{12:12,123:123,145:145,146:146,44:44,71:71,76:76,8:8}],8:[function(e,t,n){"use strict";function r(e){if(v){var t=e.node,n=e.children;if(n.length)for(var r=0;r<n.length;r++)g(t,n[r],null);else null!=e.html?p(t,e.html):null!=e.text&&f(t,e.text)}}function o(e,t){e.parentNode.replaceChild(t.node,e),r(t)}function i(e,t){v?e.children.push(t):e.node.appendChild(t.node)}function a(e,t){v?e.html=t:p(e.node,t)}function s(e,t){v?e.text=t:f(e.node,t)}function u(){return this.node.nodeName}function l(e){return{node:e,children:[],html:null,text:null,toString:u}}var c=e(9),p=e(145),d=e(123),f=e(146),h=1,m=11,v="undefined"!=typeof document&&"number"==typeof document.documentMode||"undefined"!=typeof navigator&&"string"==typeof navigator.userAgent&&/\bEdge\/\d/.test(navigator.userAgent),g=d(function(e,t,n){t.node.nodeType===m||t.node.nodeType===h&&"object"===t.node.nodeName.toLowerCase()&&(null==t.node.namespaceURI||t.node.namespaceURI===c.html)?(r(t),e.insertBefore(t.node,n)):(e.insertBefore(t.node,n),r(t))});l.insertTreeBefore=g,l.replaceChildWithTree=o,l.queueChild=i,l.queueHTML=a,l.queueText=s,t.exports=l},{123:123,145:145,146:146,9:9}],9:[function(e,t,n){"use strict";var r={html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg"};t.exports=r},{}],10:[function(e,t,n){"use strict";function r(e,t){return(e&t)===t}var o=e(143),i=(e(168),{MUST_USE_PROPERTY:1,HAS_BOOLEAN_VALUE:4,HAS_NUMERIC_VALUE:8,HAS_POSITIVE_NUMERIC_VALUE:24,HAS_OVERLOADED_BOOLEAN_VALUE:32,injectDOMPropertyConfig:function(e){var t=i,n=e.Properties||{},a=e.DOMAttributeNamespaces||{},u=e.DOMAttributeNames||{},l=e.DOMPropertyNames||{},c=e.DOMMutationMethods||{};e.isCustomAttribute&&s._isCustomAttributeFunctions.push(e.isCustomAttribute);for(var p in n){s.properties.hasOwnProperty(p)?o("48",p):void 0;var d=p.toLowerCase(),f=n[p],h={attributeName:d,attributeNamespace:null,propertyName:p,mutationMethod:null,mustUseProperty:r(f,t.MUST_USE_PROPERTY),hasBooleanValue:r(f,t.HAS_BOOLEAN_VALUE),hasNumericValue:r(f,t.HAS_NUMERIC_VALUE),hasPositiveNumericValue:r(f,t.HAS_POSITIVE_NUMERIC_VALUE),hasOverloadedBooleanValue:r(f,t.HAS_OVERLOADED_BOOLEAN_VALUE)};if(h.hasBooleanValue+h.hasNumericValue+h.hasOverloadedBooleanValue<=1?void 0:o("50",p),u.hasOwnProperty(p)){var m=u[p];h.attributeName=m}a.hasOwnProperty(p)&&(h.attributeNamespace=a[p]),l.hasOwnProperty(p)&&(h.propertyName=l[p]),c.hasOwnProperty(p)&&(h.mutationMethod=c[p]),s.properties[p]=h}}}),a=":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD",s={ID_ATTRIBUTE_NAME:"data-reactid",ROOT_ATTRIBUTE_NAME:"data-reactroot",ATTRIBUTE_NAME_START_CHAR:a,ATTRIBUTE_NAME_CHAR:a+"\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040",properties:{},getPossibleStandardName:null,_isCustomAttributeFunctions:[],isCustomAttribute:function(e){for(var t=0;t<s._isCustomAttributeFunctions.length;t++){var n=s._isCustomAttributeFunctions[t];if(n(e))return!0}return!1},injection:i};t.exports=s},{143:143,168:168}],11:[function(e,t,n){"use strict";function r(e){return!!l.hasOwnProperty(e)||!u.hasOwnProperty(e)&&(s.test(e)?(l[e]=!0,!0):(u[e]=!0,!1))}function o(e,t){return null==t||e.hasBooleanValue&&!t||e.hasNumericValue&&isNaN(t)||e.hasPositiveNumericValue&&t<1||e.hasOverloadedBooleanValue&&t===!1}var i=e(10),a=(e(44),e(71),e(142)),s=(e(175),new RegExp("^["+i.ATTRIBUTE_NAME_START_CHAR+"]["+i.ATTRIBUTE_NAME_CHAR+"]*$")),u={},l={},c={createMarkupForID:function(e){return i.ID_ATTRIBUTE_NAME+"="+a(e)},setAttributeForID:function(e,t){e.setAttribute(i.ID_ATTRIBUTE_NAME,t)},createMarkupForRoot:function(){return i.ROOT_ATTRIBUTE_NAME+'=""'},setAttributeForRoot:function(e){e.setAttribute(i.ROOT_ATTRIBUTE_NAME,"")},createMarkupForProperty:function(e,t){var n=i.properties.hasOwnProperty(e)?i.properties[e]:null;if(n){if(o(n,t))return"";var r=n.attributeName;return n.hasBooleanValue||n.hasOverloadedBooleanValue&&t===!0?r+'=""':r+"="+a(t)}return i.isCustomAttribute(e)?null==t?"":e+"="+a(t):null},createMarkupForCustomAttribute:function(e,t){return r(e)&&null!=t?e+"="+a(t):""},setValueForProperty:function(e,t,n){var r=i.properties.hasOwnProperty(t)?i.properties[t]:null;if(r){var a=r.mutationMethod;if(a)a(e,n);else{if(o(r,n))return void this.deleteValueForProperty(e,t);if(r.mustUseProperty)e[r.propertyName]=n;else{var s=r.attributeName,u=r.attributeNamespace;u?e.setAttributeNS(u,s,""+n):r.hasBooleanValue||r.hasOverloadedBooleanValue&&n===!0?e.setAttribute(s,""):e.setAttribute(s,""+n)}}}else if(i.isCustomAttribute(t))return void c.setValueForAttribute(e,t,n)},setValueForAttribute:function(e,t,n){r(t)&&(null==n?e.removeAttribute(t):e.setAttribute(t,""+n))},deleteValueForAttribute:function(e,t){e.removeAttribute(t)},deleteValueForProperty:function(e,t){var n=i.properties.hasOwnProperty(t)?i.properties[t]:null;if(n){var r=n.mutationMethod;if(r)r(e,void 0);else if(n.mustUseProperty){var o=n.propertyName;n.hasBooleanValue?e[o]=!1:e[o]=""}else e.removeAttribute(n.attributeName)}else i.isCustomAttribute(t)&&e.removeAttribute(t)}};t.exports=c},{10:10,142:142,175:175,44:44,71:71}],12:[function(e,t,n){"use strict";var r=e(143),o=e(8),i=e(154),a=e(159),s=e(160),u=(e(168),{dangerouslyReplaceNodeWithMarkup:function(e,t){if(i.canUseDOM?void 0:r("56"),t?void 0:r("57"),"HTML"===e.nodeName?r("58"):void 0,"string"==typeof t){var n=a(t,s)[0];e.parentNode.replaceChild(n,e)}else o.replaceChildWithTree(e,t)}});t.exports=u},{143:143,154:154,159:159,160:160,168:168,8:8}],13:[function(e,t,n){"use strict";var r=e(172),o=[r({ResponderEventPlugin:null}),r({SimpleEventPlugin:null}),r({TapEventPlugin:null}),r({EnterLeaveEventPlugin:null}),r({ChangeEventPlugin:null}),r({SelectEventPlugin:null}),r({BeforeInputEventPlugin:null})];t.exports=o},{172:172}],14:[function(e,t,n){"use strict";var r={onClick:!0,onDoubleClick:!0,onMouseDown:!0,onMouseMove:!0,onMouseUp:!0,onClickCapture:!0,onDoubleClickCapture:!0,onMouseDownCapture:!0,onMouseMoveCapture:!0,onMouseUpCapture:!0},o={getHostProps:function(e,t){if(!t.disabled)return t;var n={};for(var o in t)!r[o]&&t.hasOwnProperty(o)&&(n[o]=t[o]);return n}};t.exports=o},{}],15:[function(e,t,n){"use strict";var r=e(16),o=e(20),i=e(44),a=e(112),s=e(172),u=r.topLevelTypes,l={mouseEnter:{registrationName:s({onMouseEnter:null}),dependencies:[u.topMouseOut,u.topMouseOver]},mouseLeave:{registrationName:s({onMouseLeave:null}),dependencies:[u.topMouseOut,u.topMouseOver]}},c={eventTypes:l,extractEvents:function(e,t,n,r){if(e===u.topMouseOver&&(n.relatedTarget||n.fromElement))return null;if(e!==u.topMouseOut&&e!==u.topMouseOver)return null;var s;if(r.window===r)s=r;else{var c=r.ownerDocument;s=c?c.defaultView||c.parentWindow:window}var p,d;if(e===u.topMouseOut){p=t;var f=n.relatedTarget||n.toElement;d=f?i.getClosestInstanceFromNode(f):null}else p=null,d=t;if(p===d)return null;var h=null==p?s:i.getNodeFromInstance(p),m=null==d?s:i.getNodeFromInstance(d),v=a.getPooled(l.mouseLeave,p,n,r);v.type="mouseleave",v.target=h,v.relatedTarget=m;var g=a.getPooled(l.mouseEnter,d,n,r);return g.type="mouseenter",g.target=m,g.relatedTarget=h,o.accumulateEnterLeaveDispatches(v,g,p,d),[v,g]}};t.exports=c},{112:112,16:16,172:172,20:20,44:44}],16:[function(e,t,n){"use strict";var r=e(171),o=r({bubbled:null,captured:null}),i=r({topAbort:null,topAnimationEnd:null,topAnimationIteration:null,topAnimationStart:null,topBlur:null,topCanPlay:null,topCanPlayThrough:null,topChange:null,topClick:null,topCompositionEnd:null,topCompositionStart:null,topCompositionUpdate:null,topContextMenu:null,topCopy:null,topCut:null,topDoubleClick:null,topDrag:null,topDragEnd:null,topDragEnter:null,topDragExit:null,topDragLeave:null,topDragOver:null,topDragStart:null,topDrop:null,topDurationChange:null,topEmptied:null,topEncrypted:null,topEnded:null,topError:null,topFocus:null,topInput:null,topInvalid:null,topKeyDown:null,topKeyPress:null,topKeyUp:null,topLoad:null,topLoadedData:null,topLoadedMetadata:null,topLoadStart:null,topMouseDown:null,topMouseMove:null,topMouseOut:null,topMouseOver:null,topMouseUp:null,topPaste:null,topPause:null,topPlay:null,topPlaying:null,topProgress:null,topRateChange:null,topReset:null,topScroll:null,topSeeked:null,topSeeking:null,topSelectionChange:null,topStalled:null,topSubmit:null,topSuspend:null,topTextInput:null,topTimeUpdate:null,topTouchCancel:null,topTouchEnd:null,topTouchMove:null,topTouchStart:null,topTransitionEnd:null,topVolumeChange:null,topWaiting:null,topWheel:null}),a={topLevelTypes:i,PropagationPhases:o};t.exports=a},{171:171}],17:[function(e,t,n){"use strict";var r=e(143),o=e(18),i=e(19),a=e(62),s=e(119),u=e(128),l=(e(168),{}),c=null,p=function(e,t){e&&(i.executeDispatchesInOrder(e,t),e.isPersistent()||e.constructor.release(e))},d=function(e){return p(e,!0)},f=function(e){return p(e,!1)},h=function(e){return"."+e._rootNodeID},m={injection:{injectEventPluginOrder:o.injectEventPluginOrder,injectEventPluginsByName:o.injectEventPluginsByName},putListener:function(e,t,n){"function"!=typeof n?r("94",t,typeof n):void 0;var i=h(e),a=l[t]||(l[t]={});a[i]=n;var s=o.registrationNameModules[t];s&&s.didPutListener&&s.didPutListener(e,t,n)},getListener:function(e,t){var n=l[t],r=h(e);return n&&n[r]},deleteListener:function(e,t){var n=o.registrationNameModules[t];n&&n.willDeleteListener&&n.willDeleteListener(e,t);var r=l[t];if(r){var i=h(e);delete r[i]}},deleteAllListeners:function(e){var t=h(e);for(var n in l)if(l.hasOwnProperty(n)&&l[n][t]){var r=o.registrationNameModules[n];r&&r.willDeleteListener&&r.willDeleteListener(e,n),delete l[n][t]}},extractEvents:function(e,t,n,r){for(var i,a=o.plugins,u=0;u<a.length;u++){var l=a[u];if(l){var c=l.extractEvents(e,t,n,r);c&&(i=s(i,c))}}return i},enqueueEvents:function(e){e&&(c=s(c,e))},processEventQueue:function(e){var t=c;c=null,e?u(t,d):u(t,f),c?r("95"):void 0,a.rethrowCaughtError()},__purge:function(){l={}},__getListenerBank:function(){return l}};t.exports=m},{119:119,128:128,143:143,168:168,18:18,19:19,62:62}],18:[function(e,t,n){"use strict";function r(){if(s)for(var e in u){var t=u[e],n=s.indexOf(e);if(n>-1?void 0:a("96",e),!l.plugins[n]){t.extractEvents?void 0:a("97",e),l.plugins[n]=t;var r=t.eventTypes;for(var i in r)o(r[i],t,i)?void 0:a("98",i,e)}}}function o(e,t,n){l.eventNameDispatchConfigs.hasOwnProperty(n)?a("99",n):void 0,l.eventNameDispatchConfigs[n]=e;var r=e.phasedRegistrationNames;if(r){for(var o in r)if(r.hasOwnProperty(o)){var s=r[o];i(s,t,n)}return!0}return!!e.registrationName&&(i(e.registrationName,t,n),!0)}function i(e,t,n){l.registrationNameModules[e]?a("100",e):void 0,l.registrationNameModules[e]=t,l.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var a=e(143),s=(e(168),null),u={},l={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){s?a("101"):void 0,s=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var n in e)if(e.hasOwnProperty(n)){var o=e[n];u.hasOwnProperty(n)&&u[n]===o||(u[n]?a("102",n):void 0,u[n]=o,t=!0)}t&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return l.registrationNameModules[t.registrationName]||null;for(var n in t.phasedRegistrationNames)if(t.phasedRegistrationNames.hasOwnProperty(n)){var r=l.registrationNameModules[t.phasedRegistrationNames[n]];if(r)return r}return null},_resetEventPlugins:function(){s=null;for(var e in u)u.hasOwnProperty(e)&&delete u[e];l.plugins.length=0;var t=l.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=l.registrationNameModules;for(var o in r)r.hasOwnProperty(o)&&delete r[o]}};t.exports=l},{143:143,168:168}],19:[function(e,t,n){"use strict";function r(e){return e===y.topMouseUp||e===y.topTouchEnd||e===y.topTouchCancel}function o(e){return e===y.topMouseMove||e===y.topTouchMove}function i(e){return e===y.topMouseDown||e===y.topTouchStart}function a(e,t,n,r){var o=e.type||"unknown-event";e.currentTarget=C.getNodeFromInstance(r),t?v.invokeGuardedCallbackWithCatch(o,n,e):v.invokeGuardedCallback(o,n,e),e.currentTarget=null}function s(e,t){var n=e._dispatchListeners,r=e._dispatchInstances;if(Array.isArray(n))for(var o=0;o<n.length&&!e.isPropagationStopped();o++)a(e,t,n[o],r[o]);else n&&a(e,t,n,r);e._dispatchListeners=null,e._dispatchInstances=null}function u(e){var t=e._dispatchListeners,n=e._dispatchInstances;if(Array.isArray(t)){for(var r=0;r<t.length&&!e.isPropagationStopped();r++)if(t[r](e,n[r]))return n[r]}else if(t&&t(e,n))return n;return null}function l(e){var t=u(e);return e._dispatchInstances=null,e._dispatchListeners=null,t}function c(e){var t=e._dispatchListeners,n=e._dispatchInstances;Array.isArray(t)?h("103"):void 0,e.currentTarget=t?C.getNodeFromInstance(n):null;var r=t?t(e):null;return e.currentTarget=null,e._dispatchListeners=null,e._dispatchInstances=null,r}function p(e){return!!e._dispatchListeners}var d,f,h=e(143),m=e(16),v=e(62),g=(e(168),e(175),{injectComponentTree:function(e){d=e},injectTreeTraversal:function(e){f=e}}),y=m.topLevelTypes,C={isEndish:r,isMoveish:o,isStartish:i,executeDirectDispatch:c,executeDispatchesInOrder:s,executeDispatchesInOrderStopAtTrue:l,hasDispatches:p,getInstanceFromNode:function(e){return d.getInstanceFromNode(e)},getNodeFromInstance:function(e){return d.getNodeFromInstance(e)},isAncestor:function(e,t){return f.isAncestor(e,t)},getLowestCommonAncestor:function(e,t){return f.getLowestCommonAncestor(e,t)},getParentInstance:function(e){return f.getParentInstance(e)},traverseTwoPhase:function(e,t,n){return f.traverseTwoPhase(e,t,n)},traverseEnterLeave:function(e,t,n,r,o){return f.traverseEnterLeave(e,t,n,r,o)},injection:g};t.exports=C},{143:143,16:16,168:168,175:175,62:62}],20:[function(e,t,n){"use strict";function r(e,t,n){var r=t.dispatchConfig.phasedRegistrationNames[n];return C(e,r)}function o(e,t,n){var o=t?y.bubbled:y.captured,i=r(e,n,o);i&&(n._dispatchListeners=v(n._dispatchListeners,i),n._dispatchInstances=v(n._dispatchInstances,e))}function i(e){e&&e.dispatchConfig.phasedRegistrationNames&&m.traverseTwoPhase(e._targetInst,o,e)}function a(e){if(e&&e.dispatchConfig.phasedRegistrationNames){var t=e._targetInst,n=t?m.getParentInstance(t):null;m.traverseTwoPhase(n,o,e)}}function s(e,t,n){if(n&&n.dispatchConfig.registrationName){var r=n.dispatchConfig.registrationName,o=C(e,r);o&&(n._dispatchListeners=v(n._dispatchListeners,o),n._dispatchInstances=v(n._dispatchInstances,e))}}function u(e){e&&e.dispatchConfig.registrationName&&s(e._targetInst,null,e)}function l(e){g(e,i)}function c(e){g(e,a)}function p(e,t,n,r){m.traverseEnterLeave(n,r,s,e,t)}function d(e){g(e,u)}var f=e(16),h=e(17),m=e(19),v=e(119),g=e(128),y=(e(175),f.PropagationPhases),C=h.getListener,b={accumulateTwoPhaseDispatches:l,accumulateTwoPhaseDispatchesSkipTarget:c,accumulateDirectDispatches:d,accumulateEnterLeaveDispatches:p};t.exports=b},{119:119,128:128,16:16,17:17,175:175,19:19}],21:[function(e,t,n){"use strict";function r(e){this._root=e,this._startText=this.getText(),this._fallbackText=null}var o=e(176),i=e(26),a=e(136);o(r.prototype,{destructor:function(){this._root=null,this._startText=null,this._fallbackText=null},getText:function(){return"value"in this._root?this._root.value:this._root[a()]},getData:function(){if(this._fallbackText)return this._fallbackText;var e,t,n=this._startText,r=n.length,o=this.getText(),i=o.length;for(e=0;e<r&&n[e]===o[e];e++);var a=r-e;for(t=1;t<=a&&n[r-t]===o[i-t];t++);var s=t>1?1-t:void 0;return this._fallbackText=o.slice(e,s),this._fallbackText}}),i.addPoolingTo(r),t.exports=r},{136:136,176:176,26:26}],22:[function(e,t,n){"use strict";var r=e(10),o=r.injection.MUST_USE_PROPERTY,i=r.injection.HAS_BOOLEAN_VALUE,a=r.injection.HAS_NUMERIC_VALUE,s=r.injection.HAS_POSITIVE_NUMERIC_VALUE,u=r.injection.HAS_OVERLOADED_BOOLEAN_VALUE,l={isCustomAttribute:RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+r.ATTRIBUTE_NAME_CHAR+"]*$")),Properties:{accept:0,acceptCharset:0,accessKey:0,action:0,allowFullScreen:i,allowTransparency:0,alt:0,async:i,autoComplete:0,autoPlay:i,capture:i,cellPadding:0,cellSpacing:0,charSet:0,challenge:0,checked:o|i,cite:0,classID:0,className:0,cols:s,colSpan:0,content:0,contentEditable:0,contextMenu:0,controls:i,coords:0,crossOrigin:0,data:0,dateTime:0,default:i,defer:i,dir:0,disabled:i,download:u,draggable:0,encType:0,form:0,formAction:0,formEncType:0,formMethod:0,formNoValidate:i,formTarget:0,frameBorder:0,headers:0,height:0,hidden:i,high:0,href:0,hrefLang:0,htmlFor:0,httpEquiv:0,icon:0,id:0,inputMode:0,integrity:0,is:0,keyParams:0,keyType:0,kind:0,label:0,lang:0,list:0,loop:i,low:0,manifest:0,marginHeight:0,marginWidth:0,max:0,maxLength:0,media:0,mediaGroup:0,method:0,min:0,minLength:0,multiple:o|i,muted:o|i,name:0,nonce:0,noValidate:i,open:i,optimum:0,pattern:0,placeholder:0,poster:0,preload:0,profile:0,radioGroup:0,readOnly:i,referrerPolicy:0,rel:0,required:i,reversed:i,role:0,rows:s,rowSpan:a,sandbox:0,scope:0,scoped:i,scrolling:0,seamless:i,selected:o|i,shape:0,size:s,sizes:0,span:s,spellCheck:0,src:0,srcDoc:0,srcLang:0,srcSet:0,start:a,step:0,style:0,summary:0,tabIndex:0,target:0,title:0,type:0,useMap:0,value:0,width:0,wmode:0,wrap:0,about:0,datatype:0,inlist:0,prefix:0,property:0,resource:0,typeof:0,vocab:0,autoCapitalize:0,autoCorrect:0,autoSave:0,color:0,itemProp:0,itemScope:i,itemType:0,itemID:0,itemRef:0,results:0,security:0,unselectable:0},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{}};t.exports=l},{10:10}],23:[function(e,t,n){"use strict";function r(e){var t=/[=:]/g,n={"=":"=0",":":"=2"},r=(""+e).replace(t,function(e){return n[e]});return"$"+r}function o(e){var t=/(=0|=2)/g,n={"=0":"=","=2":":"},r="."===e[0]&&"$"===e[1]?e.substring(2):e.substring(1);return(""+r).replace(t,function(e){return n[e]})}var i={escape:r,unescape:o};t.exports=i},{}],24:[function(e,t,n){"use strict";var r=e(72),o=e(92),i={linkState:function(e){return new r(this.state[e],o.createStateKeySetter(this,e))}};t.exports=i},{72:72,92:92}],25:[function(e,t,n){"use strict";function r(e){null!=e.checkedLink&&null!=e.valueLink?s("87"):void 0}function o(e){r(e),null!=e.value||null!=e.onChange?s("88"):void 0}function i(e){r(e),null!=e.checked||null!=e.onChange?s("89"):void 0}function a(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}var s=e(143),u=e(82),l=e(81),c=e(83),p=(e(168),e(175),{button:!0,checkbox:!0,image:!0,hidden:!0,radio:!0,reset:!0,submit:!0}),d={value:function(e,t,n){return!e[t]||p[e.type]||e.onChange||e.readOnly||e.disabled?null:new Error("You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.")},checked:function(e,t,n){return!e[t]||e.onChange||e.readOnly||e.disabled?null:new Error("You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.")},onChange:u.func},f={},h={checkPropTypes:function(e,t,n){for(var r in d){if(d.hasOwnProperty(r))var o=d[r](t,r,e,l.prop,null,c);o instanceof Error&&!(o.message in f)&&(f[o.message]=!0,a(n))}},getValue:function(e){return e.valueLink?(o(e),e.valueLink.value):e.value},getChecked:function(e){return e.checkedLink?(i(e),e.checkedLink.value):e.checked},executeOnChange:function(e,t){return e.valueLink?(o(e),e.valueLink.requestChange(t.target.value)):e.checkedLink?(i(e),e.checkedLink.requestChange(t.target.checked)):e.onChange?e.onChange.call(void 0,t):void 0}};t.exports=h},{143:143,168:168,175:175,81:81,82:82,83:83}],26:[function(e,t,n){"use strict";var r=e(143),o=(e(168),function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)}),i=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},a=function(e,t,n){var r=this;if(r.instancePool.length){var o=r.instancePool.pop();return r.call(o,e,t,n),o}return new r(e,t,n)},s=function(e,t,n,r){var o=this;if(o.instancePool.length){var i=o.instancePool.pop();return o.call(i,e,t,n,r),i}return new o(e,t,n,r)},u=function(e,t,n,r,o){var i=this;if(i.instancePool.length){var a=i.instancePool.pop();return i.call(a,e,t,n,r,o),a}return new i(e,t,n,r,o)},l=function(e){var t=this;e instanceof t?void 0:r("25"),e.destructor(),t.instancePool.length<t.poolSize&&t.instancePool.push(e)},c=10,p=o,d=function(e,t){var n=e;return n.instancePool=[],n.getPooled=t||p,n.poolSize||(n.poolSize=c),n.release=l,n},f={addPoolingTo:d,oneArgumentPooler:o,twoArgumentPooler:i,threeArgumentPooler:a,fourArgumentPooler:s,fiveArgumentPooler:u};t.exports=f},{143:143,168:168}],27:[function(e,t,n){"use strict";var r=e(176),o=e(32),i=e(34),a=e(84),s=e(33),u=e(47),l=e(60),c=e(82),p=e(98),d=e(141),f=(e(175),l.createElement),h=l.createFactory,m=l.cloneElement,v=r,g={Children:{map:o.map,forEach:o.forEach,count:o.count,toArray:o.toArray,only:d},Component:i,PureComponent:a,createElement:f,cloneElement:m,isValidElement:l.isValidElement,PropTypes:c,createClass:s.createClass,createFactory:h,createMixin:function(e){return e},DOM:u,version:p,__spread:v};t.exports=g},{141:141,175:175,176:176,32:32,33:33,34:34,47:47,
+60:60,82:82,84:84,98:98}],28:[function(e,t,n){"use strict";function r(e){return Object.prototype.hasOwnProperty.call(e,v)||(e[v]=h++,d[e[v]]={}),d[e[v]]}var o,i=e(176),a=e(16),s=e(18),u=e(63),l=e(118),c=e(137),p=e(139),d={},f=!1,h=0,m={topAbort:"abort",topAnimationEnd:c("animationend")||"animationend",topAnimationIteration:c("animationiteration")||"animationiteration",topAnimationStart:c("animationstart")||"animationstart",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:c("transitionend")||"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},v="_reactListenersID"+String(Math.random()).slice(2),g=i({},u,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(g.handleTopLevel),g.ReactEventListener=e}},setEnabled:function(e){g.ReactEventListener&&g.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!g.ReactEventListener||!g.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,o=r(n),i=s.registrationNameDependencies[e],u=a.topLevelTypes,l=0;l<i.length;l++){var c=i[l];o.hasOwnProperty(c)&&o[c]||(c===u.topWheel?p("wheel")?g.ReactEventListener.trapBubbledEvent(u.topWheel,"wheel",n):p("mousewheel")?g.ReactEventListener.trapBubbledEvent(u.topWheel,"mousewheel",n):g.ReactEventListener.trapBubbledEvent(u.topWheel,"DOMMouseScroll",n):c===u.topScroll?p("scroll",!0)?g.ReactEventListener.trapCapturedEvent(u.topScroll,"scroll",n):g.ReactEventListener.trapBubbledEvent(u.topScroll,"scroll",g.ReactEventListener.WINDOW_HANDLE):c===u.topFocus||c===u.topBlur?(p("focus",!0)?(g.ReactEventListener.trapCapturedEvent(u.topFocus,"focus",n),g.ReactEventListener.trapCapturedEvent(u.topBlur,"blur",n)):p("focusin")&&(g.ReactEventListener.trapBubbledEvent(u.topFocus,"focusin",n),g.ReactEventListener.trapBubbledEvent(u.topBlur,"focusout",n)),o[u.topBlur]=!0,o[u.topFocus]=!0):m.hasOwnProperty(c)&&g.ReactEventListener.trapBubbledEvent(c,m[c],n),o[c]=!0)}},trapBubbledEvent:function(e,t,n){return g.ReactEventListener.trapBubbledEvent(e,t,n)},trapCapturedEvent:function(e,t,n){return g.ReactEventListener.trapCapturedEvent(e,t,n)},ensureScrollValueMonitoring:function(){if(void 0===o&&(o=document.createEvent&&"pageX"in document.createEvent("MouseEvent")),!o&&!f){var e=l.refreshScrollValues;g.ReactEventListener.monitorScrollValue(e),f=!0}}});t.exports=g},{118:118,137:137,139:139,16:16,176:176,18:18,63:63}],29:[function(e,t,n){"use strict";function r(e){var t="transition"+e+"Timeout",n="transition"+e;return function(e){if(e[n]){if(null==e[t])return new Error(t+" wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See https://fb.me/react-animation-transition-group-timeout for more information.");if("number"!=typeof e[t])return new Error(t+" must be a number (in milliseconds)")}}}var o=e(176),i=e(27),a=e(95),s=e(30),u=i.createClass({displayName:"ReactCSSTransitionGroup",propTypes:{transitionName:s.propTypes.name,transitionAppear:i.PropTypes.bool,transitionEnter:i.PropTypes.bool,transitionLeave:i.PropTypes.bool,transitionAppearTimeout:r("Appear"),transitionEnterTimeout:r("Enter"),transitionLeaveTimeout:r("Leave")},getDefaultProps:function(){return{transitionAppear:!1,transitionEnter:!0,transitionLeave:!0}},_wrapChild:function(e){return i.createElement(s,{name:this.props.transitionName,appear:this.props.transitionAppear,enter:this.props.transitionEnter,leave:this.props.transitionLeave,appearTimeout:this.props.transitionAppearTimeout,enterTimeout:this.props.transitionEnterTimeout,leaveTimeout:this.props.transitionLeaveTimeout},e)},render:function(){return i.createElement(a,o({},this.props,{childFactory:this._wrapChild}))}});t.exports=u},{176:176,27:27,30:30,95:95}],30:[function(e,t,n){"use strict";var r=e(27),o=e(40),i=e(152),a=e(94),s=e(141),u=17,l=r.createClass({displayName:"ReactCSSTransitionGroupChild",propTypes:{name:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.shape({enter:r.PropTypes.string,leave:r.PropTypes.string,active:r.PropTypes.string}),r.PropTypes.shape({enter:r.PropTypes.string,enterActive:r.PropTypes.string,leave:r.PropTypes.string,leaveActive:r.PropTypes.string,appear:r.PropTypes.string,appearActive:r.PropTypes.string})]).isRequired,appear:r.PropTypes.bool,enter:r.PropTypes.bool,leave:r.PropTypes.bool,appearTimeout:r.PropTypes.number,enterTimeout:r.PropTypes.number,leaveTimeout:r.PropTypes.number},transition:function(e,t,n){var r=o.findDOMNode(this);if(!r)return void(t&&t());var s=this.props.name[e]||this.props.name+"-"+e,u=this.props.name[e+"Active"]||s+"-active",l=null,c=function(e){e&&e.target!==r||(clearTimeout(l),i.removeClass(r,s),i.removeClass(r,u),a.removeEndEventListener(r,c),t&&t())};i.addClass(r,s),this.queueClassAndNode(u,r),n?(l=setTimeout(c,n),this.transitionTimeouts.push(l)):a.addEndEventListener(r,c)},queueClassAndNode:function(e,t){this.classNameAndNodeQueue.push({className:e,node:t}),this.timeout||(this.timeout=setTimeout(this.flushClassNameAndNodeQueue,u))},flushClassNameAndNodeQueue:function(){this.isMounted()&&this.classNameAndNodeQueue.forEach(function(e){i.addClass(e.node,e.className)}),this.classNameAndNodeQueue.length=0,this.timeout=null},componentWillMount:function(){this.classNameAndNodeQueue=[],this.transitionTimeouts=[]},componentWillUnmount:function(){this.timeout&&clearTimeout(this.timeout),this.transitionTimeouts.forEach(function(e){clearTimeout(e)}),this.classNameAndNodeQueue.length=0},componentWillAppear:function(e){this.props.appear?this.transition("appear",e,this.props.appearTimeout):e()},componentWillEnter:function(e){this.props.enter?this.transition("enter",e,this.props.enterTimeout):e()},componentWillLeave:function(e){this.props.leave?this.transition("leave",e,this.props.leaveTimeout):e()},render:function(){return s(this.props.children)}});t.exports=l},{141:141,152:152,27:27,40:40,94:94}],31:[function(e,t,n){(function(n){"use strict";function r(e,t,n,r){var o=void 0===e[n];null!=t&&o&&(e[n]=i(t,!0))}var o=e(86),i=e(138),a=(e(23),e(148)),s=e(149);e(175);"undefined"!=typeof n&&n.env,1;var u={instantiateChildren:function(e,t,n,o){if(null==e)return null;var i={};return s(e,r,i),i},updateChildren:function(e,t,n,r,s,u,l,c,p){if(t||e){var d,f;for(d in t)if(t.hasOwnProperty(d)){f=e&&e[d];var h=f&&f._currentElement,m=t[d];if(null!=f&&a(h,m))o.receiveComponent(f,m,s,c),t[d]=f;else{f&&(r[d]=o.getHostNode(f),o.unmountComponent(f,!1));var v=i(m,!0);t[d]=v;var g=o.mountComponent(v,s,u,l,c,p);n.push(g)}}for(d in e)!e.hasOwnProperty(d)||t&&t.hasOwnProperty(d)||(f=e[d],r[d]=o.getHostNode(f),o.unmountComponent(f,!1))}},unmountChildren:function(e,t){for(var n in e)if(e.hasOwnProperty(n)){var r=e[n];o.unmountComponent(r,t)}}};t.exports=u}).call(this,void 0)},{138:138,148:148,149:149,175:175,23:23,86:86}],32:[function(e,t,n){"use strict";function r(e){return(""+e).replace(b,"$&/")}function o(e,t){this.func=e,this.context=t,this.count=0}function i(e,t,n){var r=e.func,o=e.context;r.call(o,t,e.count++)}function a(e,t,n){if(null==e)return e;var r=o.getPooled(t,n);g(e,i,r),o.release(r)}function s(e,t,n,r){this.result=e,this.keyPrefix=t,this.func=n,this.context=r,this.count=0}function u(e,t,n){var o=e.result,i=e.keyPrefix,a=e.func,s=e.context,u=a.call(s,t,e.count++);Array.isArray(u)?l(u,o,n,v.thatReturnsArgument):null!=u&&(m.isValidElement(u)&&(u=m.cloneAndReplaceKey(u,i+(!u.key||t&&t.key===u.key?"":r(u.key)+"/")+n)),o.push(u))}function l(e,t,n,o,i){var a="";null!=n&&(a=r(n)+"/");var l=s.getPooled(t,a,o,i);g(e,u,l),s.release(l)}function c(e,t,n){if(null==e)return e;var r=[];return l(e,r,null,t,n),r}function p(e,t,n){return null}function d(e,t){return g(e,p,null)}function f(e){var t=[];return l(e,t,null,v.thatReturnsArgument),t}var h=e(26),m=e(60),v=e(160),g=e(149),y=h.twoArgumentPooler,C=h.fourArgumentPooler,b=/\/+/g;o.prototype.destructor=function(){this.func=null,this.context=null,this.count=0},h.addPoolingTo(o,y),s.prototype.destructor=function(){this.result=null,this.keyPrefix=null,this.func=null,this.context=null,this.count=0},h.addPoolingTo(s,C);var _={forEach:a,map:c,mapIntoWithKeyPrefixInternal:l,count:d,toArray:f};t.exports=_},{149:149,160:160,26:26,60:60}],33:[function(e,t,n){"use strict";function r(e,t){var n=E.hasOwnProperty(t)?E[t]:null;x.hasOwnProperty(t)&&(n!==b.OVERRIDE_BASE?p("73",t):void 0),e&&(n!==b.DEFINE_MANY&&n!==b.DEFINE_MANY_MERGED?p("74",t):void 0)}function o(e,t){if(t){"function"==typeof t?p("75"):void 0,h.isValidElement(t)?p("76"):void 0;var n=e.prototype,o=n.__reactAutoBindPairs;t.hasOwnProperty(C)&&T.mixins(e,t.mixins);for(var i in t)if(t.hasOwnProperty(i)&&i!==C){var a=t[i],l=n.hasOwnProperty(i);if(r(l,i),T.hasOwnProperty(i))T[i](e,a);else{var c=E.hasOwnProperty(i),d="function"==typeof a,f=d&&!c&&!l&&t.autobind!==!1;if(f)o.push(i,a),n[i]=a;else if(l){var m=E[i];!c||m!==b.DEFINE_MANY_MERGED&&m!==b.DEFINE_MANY?p("77",m,i):void 0,m===b.DEFINE_MANY_MERGED?n[i]=s(n[i],a):m===b.DEFINE_MANY&&(n[i]=u(n[i],a))}else n[i]=a}}}}function i(e,t){if(t)for(var n in t){var r=t[n];if(t.hasOwnProperty(n)){var o=n in T;o?p("78",n):void 0;var i=n in e;i?p("79",n):void 0,e[n]=r}}}function a(e,t){e&&t&&"object"==typeof e&&"object"==typeof t?void 0:p("80");for(var n in t)t.hasOwnProperty(n)&&(void 0!==e[n]?p("81",n):void 0,e[n]=t[n]);return e}function s(e,t){return function(){var n=e.apply(this,arguments),r=t.apply(this,arguments);if(null==n)return r;if(null==r)return n;var o={};return a(o,n),a(o,r),o}}function u(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}function l(e,t){var n=t.bind(e);return n}function c(e){for(var t=e.__reactAutoBindPairs,n=0;n<t.length;n+=2){var r=t[n],o=t[n+1];e[r]=l(e,o)}}var p=e(143),d=e(176),f=e(34),h=e(60),m=(e(81),e(80),e(78)),v=e(161),g=(e(168),e(171)),y=e(172),C=(e(175),y({mixins:null})),b=g({DEFINE_ONCE:null,DEFINE_MANY:null,OVERRIDE_BASE:null,DEFINE_MANY_MERGED:null}),_=[],E={mixins:b.DEFINE_MANY,statics:b.DEFINE_MANY,propTypes:b.DEFINE_MANY,contextTypes:b.DEFINE_MANY,childContextTypes:b.DEFINE_MANY,getDefaultProps:b.DEFINE_MANY_MERGED,getInitialState:b.DEFINE_MANY_MERGED,getChildContext:b.DEFINE_MANY_MERGED,render:b.DEFINE_ONCE,componentWillMount:b.DEFINE_MANY,componentDidMount:b.DEFINE_MANY,componentWillReceiveProps:b.DEFINE_MANY,shouldComponentUpdate:b.DEFINE_ONCE,componentWillUpdate:b.DEFINE_MANY,componentDidUpdate:b.DEFINE_MANY,componentWillUnmount:b.DEFINE_MANY,updateComponent:b.OVERRIDE_BASE},T={displayName:function(e,t){e.displayName=t},mixins:function(e,t){if(t)for(var n=0;n<t.length;n++)o(e,t[n])},childContextTypes:function(e,t){e.childContextTypes=d({},e.childContextTypes,t)},contextTypes:function(e,t){e.contextTypes=d({},e.contextTypes,t)},getDefaultProps:function(e,t){e.getDefaultProps?e.getDefaultProps=s(e.getDefaultProps,t):e.getDefaultProps=t},propTypes:function(e,t){e.propTypes=d({},e.propTypes,t)},statics:function(e,t){i(e,t)},autobind:function(){}},x={replaceState:function(e,t){this.updater.enqueueReplaceState(this,e),t&&this.updater.enqueueCallback(this,t,"replaceState")},isMounted:function(){return this.updater.isMounted(this)}},P=function(){};d(P.prototype,f.prototype,x);var N={createClass:function(e){var t=function(e,n,r){this.__reactAutoBindPairs.length&&c(this),this.props=e,this.context=n,this.refs=v,this.updater=r||m,this.state=null;var o=this.getInitialState?this.getInitialState():null;"object"!=typeof o||Array.isArray(o)?p("82",t.displayName||"ReactCompositeComponent"):void 0,this.state=o};t.prototype=new P,t.prototype.constructor=t,t.prototype.__reactAutoBindPairs=[],_.forEach(o.bind(null,t)),o(t,e),t.getDefaultProps&&(t.defaultProps=t.getDefaultProps()),t.prototype.render?void 0:p("83");for(var n in E)t.prototype[n]||(t.prototype[n]=null);return t},injection:{injectMixin:function(e){_.push(e)}}};t.exports=N},{143:143,161:161,168:168,171:171,172:172,175:175,176:176,34:34,60:60,78:78,80:80,81:81}],34:[function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=a,this.updater=n||i}var o=e(143),i=e(78),a=(e(121),e(161));e(168),e(175);r.prototype.isReactComponent={},r.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e?o("85"):void 0,this.updater.enqueueSetState(this,e),t&&this.updater.enqueueCallback(this,t,"setState")},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this),e&&this.updater.enqueueCallback(this,e,"forceUpdate")};t.exports=r},{121:121,143:143,161:161,168:168,175:175,78:78}],35:[function(e,t,n){"use strict";var r=e(7),o=e(49),i={processChildrenUpdates:o.dangerouslyProcessChildrenUpdates,replaceNodeWithMarkup:r.dangerouslyReplaceNodeWithMarkup};t.exports=i},{49:49,7:7}],36:[function(e,t,n){"use strict";var r=e(143),o=(e(168),!1),i={replaceNodeWithMarkup:null,processChildrenUpdates:null,injection:{injectEnvironment:function(e){o?r("104"):void 0,i.replaceNodeWithMarkup=e.replaceNodeWithMarkup,i.processChildrenUpdates=e.processChildrenUpdates,o=!0}}};t.exports=i},{143:143,168:168}],37:[function(e,t,n){"use strict";var r=e(147),o={shouldComponentUpdate:function(e,t){return r(this,e,t)}};t.exports=o},{147:147}],38:[function(e,t,n){"use strict";function r(e){}function o(e,t){}function i(e){return!(!e.prototype||!e.prototype.isReactComponent)}function a(e){return!(!e.prototype||!e.prototype.isPureReactComponent)}var s=e(143),u=e(176),l=e(36),c=e(39),p=e(60),d=e(62),f=e(70),h=(e(71),e(77)),m=(e(81),e(86)),v=e(122),g=e(161),y=(e(168),e(174)),C=e(148),b=(e(175),{ImpureClass:0,PureClass:1,StatelessFunctional:2});r.prototype.render=function(){var e=f.get(this)._currentElement.type,t=e(this.props,this.context,this.updater);return o(e,t),t};var _=1,E={construct:function(e){this._currentElement=e,this._rootNodeID=0,this._compositeType=null,this._instance=null,this._hostParent=null,this._hostContainerInfo=null,this._updateBatchNumber=null,this._pendingElement=null,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._renderedNodeType=null,this._renderedComponent=null,this._context=null,this._mountOrder=0,this._topLevelWrapper=null,this._pendingCallbacks=null,this._calledComponentWillUnmount=!1},mountComponent:function(e,t,n,u){this._context=u,this._mountOrder=_++,this._hostParent=t,this._hostContainerInfo=n;var l,c=this._currentElement.props,d=this._processContext(u),h=this._currentElement.type,m=e.getUpdateQueue(),v=i(h),y=this._constructComponent(v,c,d,m);v||null!=y&&null!=y.render?a(h)?this._compositeType=b.PureClass:this._compositeType=b.ImpureClass:(l=y,o(h,l),null===y||y===!1||p.isValidElement(y)?void 0:s("105",h.displayName||h.name||"Component"),y=new r(h),this._compositeType=b.StatelessFunctional),y.props=c,y.context=d,y.refs=g,y.updater=m,this._instance=y,f.set(y,this);var C=y.state;void 0===C&&(y.state=C=null),"object"!=typeof C||Array.isArray(C)?s("106",this.getName()||"ReactCompositeComponent"):void 0,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1;var E;return E=y.unstable_handleError?this.performInitialMountWithErrorHandling(l,t,n,e,u):this.performInitialMount(l,t,n,e,u),y.componentDidMount&&e.getReactMountReady().enqueue(y.componentDidMount,y),E},_constructComponent:function(e,t,n,r){return this._constructComponentWithoutOwner(e,t,n,r)},_constructComponentWithoutOwner:function(e,t,n,r){var o,i=this._currentElement.type;return o=e?new i(t,n,r):i(t,n,r)},performInitialMountWithErrorHandling:function(e,t,n,r,o){var i,a=r.checkpoint();try{i=this.performInitialMount(e,t,n,r,o)}catch(s){r.rollback(a),this._instance.unstable_handleError(s),this._pendingStateQueue&&(this._instance.state=this._processPendingState(this._instance.props,this._instance.context)),a=r.checkpoint(),this._renderedComponent.unmountComponent(!0),r.rollback(a),i=this.performInitialMount(e,t,n,r,o)}return i},performInitialMount:function(e,t,n,r,o){var i=this._instance;i.componentWillMount&&(i.componentWillMount(),this._pendingStateQueue&&(i.state=this._processPendingState(i.props,i.context))),void 0===e&&(e=this._renderValidatedComponent());var a=h.getType(e);this._renderedNodeType=a;var s=this._instantiateReactComponent(e,a!==h.EMPTY);this._renderedComponent=s;var u=0,l=m.mountComponent(s,r,t,n,this._processChildContext(o),u);return l},getHostNode:function(){return m.getHostNode(this._renderedComponent)},unmountComponent:function(e){if(this._renderedComponent){var t=this._instance;if(t.componentWillUnmount&&!t._calledComponentWillUnmount)if(t._calledComponentWillUnmount=!0,e){var n=this.getName()+".componentWillUnmount()";d.invokeGuardedCallback(n,t.componentWillUnmount.bind(t))}else t.componentWillUnmount();this._renderedComponent&&(m.unmountComponent(this._renderedComponent,e),this._renderedNodeType=null,this._renderedComponent=null,this._instance=null),this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._pendingCallbacks=null,this._pendingElement=null,this._context=null,this._rootNodeID=0,this._topLevelWrapper=null,f.remove(t)}},_maskContext:function(e){var t=this._currentElement.type,n=t.contextTypes;if(!n)return g;var r={};for(var o in n)r[o]=e[o];return r},_processContext:function(e){var t=this._maskContext(e);return t},_processChildContext:function(e){var t=this._currentElement.type,n=this._instance,r=n.getChildContext&&n.getChildContext();if(r){"object"!=typeof t.childContextTypes?s("107",this.getName()||"ReactCompositeComponent"):void 0;for(var o in r)o in t.childContextTypes?void 0:s("108",this.getName()||"ReactCompositeComponent",o);return u({},e,r)}return e},_checkContextTypes:function(e,t,n){v(e,t,n,this.getName(),null,this._debugID)},receiveComponent:function(e,t,n){var r=this._currentElement,o=this._context;this._pendingElement=null,this.updateComponent(t,r,e,o,n)},performUpdateIfNecessary:function(e){null!=this._pendingElement?m.receiveComponent(this,this._pendingElement,e,this._context):null!==this._pendingStateQueue||this._pendingForceUpdate?this.updateComponent(e,this._currentElement,this._currentElement,this._context,this._context):this._updateBatchNumber=null},updateComponent:function(e,t,n,r,o){var i=this._instance;null==i?s("136",this.getName()||"ReactCompositeComponent"):void 0;var a,u=!1;this._context===o?a=i.context:(a=this._processContext(o),u=!0);var l=t.props,c=n.props;t!==n&&(u=!0),u&&i.componentWillReceiveProps&&i.componentWillReceiveProps(c,a);var p=this._processPendingState(c,a),d=!0;this._pendingForceUpdate||(i.shouldComponentUpdate?d=i.shouldComponentUpdate(c,p,a):this._compositeType===b.PureClass&&(d=!y(l,c)||!y(i.state,p))),this._updateBatchNumber=null,d?(this._pendingForceUpdate=!1,this._performComponentUpdate(n,c,p,a,e,o)):(this._currentElement=n,this._context=o,i.props=c,i.state=p,i.context=a)},_processPendingState:function(e,t){var n=this._instance,r=this._pendingStateQueue,o=this._pendingReplaceState;if(this._pendingReplaceState=!1,this._pendingStateQueue=null,!r)return n.state;if(o&&1===r.length)return r[0];for(var i=u({},o?r[0]:n.state),a=o?1:0;a<r.length;a++){var s=r[a];u(i,"function"==typeof s?s.call(n,i,e,t):s)}return i},_performComponentUpdate:function(e,t,n,r,o,i){var a,s,u,l=this._instance,c=Boolean(l.componentDidUpdate);c&&(a=l.props,s=l.state,u=l.context),l.componentWillUpdate&&l.componentWillUpdate(t,n,r),this._currentElement=e,this._context=i,l.props=t,l.state=n,l.context=r,this._updateRenderedComponent(o,i),c&&o.getReactMountReady().enqueue(l.componentDidUpdate.bind(l,a,s,u),l)},_updateRenderedComponent:function(e,t){var n=this._renderedComponent,r=n._currentElement,o=this._renderValidatedComponent();if(C(r,o))m.receiveComponent(n,o,e,this._processChildContext(t));else{var i=m.getHostNode(n);m.unmountComponent(n,!1);var a=h.getType(o);this._renderedNodeType=a;var s=this._instantiateReactComponent(o,a!==h.EMPTY);this._renderedComponent=s;var u=0,l=m.mountComponent(s,e,this._hostParent,this._hostContainerInfo,this._processChildContext(t),u);this._replaceNodeWithMarkup(i,l,n)}},_replaceNodeWithMarkup:function(e,t,n){l.replaceNodeWithMarkup(e,t,n)},_renderValidatedComponentWithoutOwnerOrContext:function(){var e=this._instance,t=e.render();return t},_renderValidatedComponent:function(){var e;if(this._compositeType!==b.StatelessFunctional){c.current=this;try{e=this._renderValidatedComponentWithoutOwnerOrContext()}finally{c.current=null}}else e=this._renderValidatedComponentWithoutOwnerOrContext();return null===e||e===!1||p.isValidElement(e)?void 0:s("109",this.getName()||"ReactCompositeComponent"),e},attachRef:function(e,t){var n=this.getPublicInstance();null==n?s("110"):void 0;var r=t.getPublicInstance(),o=n.refs===g?n.refs={}:n.refs;o[e]=r},detachRef:function(e){var t=this.getPublicInstance().refs;delete t[e]},getName:function(){var e=this._currentElement.type,t=this._instance&&this._instance.constructor;return e.displayName||t&&t.displayName||e.name||t&&t.name||null},getPublicInstance:function(){var e=this._instance;return this._compositeType===b.StatelessFunctional?null:e},_instantiateReactComponent:null},T={Mixin:E};t.exports=T},{122:122,143:143,148:148,161:161,168:168,174:174,175:175,176:176,36:36,39:39,60:60,62:62,70:70,71:71,77:77,81:81,86:86}],39:[function(e,t,n){"use strict";var r={current:null};t.exports=r},{}],40:[function(e,t,n){"use strict";var r=e(44),o=e(59),i=e(74),a=e(86),s=e(97),u=e(98),l=e(126),c=e(133),p=e(144);e(175);o.inject();var d={findDOMNode:l,render:i.render,unmountComponentAtNode:i.unmountComponentAtNode,version:u,unstable_batchedUpdates:s.batchedUpdates,unstable_renderSubtreeIntoContainer:p};"undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject&&__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({ComponentTree:{getClosestInstanceFromNode:r.getClosestInstanceFromNode,getNodeFromInstance:function(e){return e._renderedComponent&&(e=c(e)),e?r.getNodeFromInstance(e):null}},Mount:i,Reconciler:a});t.exports=d},{126:126,133:133,144:144,175:175,44:44,59:59,74:74,86:86,97:97,98:98}],41:[function(e,t,n){"use strict";var r=e(14),o={getHostProps:r.getHostProps};t.exports=o},{14:14}],42:[function(e,t,n){"use strict";function r(e){if(e){var t=e._currentElement._owner||null;if(t){var n=t.getName();if(n)return" This DOM node was rendered by `"+n+"`."}}return""}function o(e,t){t&&($[e._tag]&&(null!=t.children||null!=t.dangerouslySetInnerHTML?m("137",e._tag,e._currentElement._owner?" Check the render method of "+e._currentElement._owner.getName()+".":""):void 0),null!=t.dangerouslySetInnerHTML&&(null!=t.children?m("60"):void 0,"object"==typeof t.dangerouslySetInnerHTML&&K in t.dangerouslySetInnerHTML?void 0:m("61")),null!=t.style&&"object"!=typeof t.style?m("62",r(e)):void 0)}function i(e,t,n,r){if(!(r instanceof I)){var o=e._hostContainerInfo,i=o._node&&o._node.nodeType===z,s=i?o._node:o._ownerDocument;B(t,s),r.getReactMountReady().enqueue(a,{inst:e,registrationName:t,listener:n})}}function a(){var e=this;x.putListener(e.inst,e.registrationName,e.listener)}function s(){var e=this;M.postMountWrapper(e)}function u(){var e=this;O.postMountWrapper(e)}function l(){var e=this;R.postMountWrapper(e)}function c(){var e=this;e._rootNodeID?void 0:m("63");var t=j(e);switch(t?void 0:m("64"),e._tag){case"iframe":case"object":e._wrapperState.listeners=[N.trapBubbledEvent(T.topLevelTypes.topLoad,"load",t)];break;case"video":case"audio":e._wrapperState.listeners=[];for(var n in G)G.hasOwnProperty(n)&&e._wrapperState.listeners.push(N.trapBubbledEvent(T.topLevelTypes[n],G[n],t));break;case"source":e._wrapperState.listeners=[N.trapBubbledEvent(T.topLevelTypes.topError,"error",t)];break;case"img":e._wrapperState.listeners=[N.trapBubbledEvent(T.topLevelTypes.topError,"error",t),N.trapBubbledEvent(T.topLevelTypes.topLoad,"load",t)];break;case"form":e._wrapperState.listeners=[N.trapBubbledEvent(T.topLevelTypes.topReset,"reset",t),N.trapBubbledEvent(T.topLevelTypes.topSubmit,"submit",t)];break;case"input":case"select":case"textarea":e._wrapperState.listeners=[N.trapBubbledEvent(T.topLevelTypes.topInvalid,"invalid",t)]}}function p(){A.postUpdateWrapper(this)}function d(e){ee.call(J,e)||(Z.test(e)?void 0:m("65",e),J[e]=!0)}function f(e,t){return e.indexOf("-")>=0||null!=t.is}function h(e){var t=e.type;d(t),this._currentElement=e,this._tag=t.toLowerCase(),this._namespaceURI=null,this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._hostNode=null,this._hostParent=null,this._rootNodeID=0,this._domID=0,this._hostContainerInfo=null,this._wrapperState=null,this._topLevelWrapper=null,this._flags=0}var m=e(143),v=e(176),g=e(1),y=e(4),C=e(8),b=e(9),_=e(10),E=e(11),T=e(16),x=e(17),P=e(18),N=e(28),w=e(41),S=e(43),k=e(44),M=e(50),R=e(51),A=e(52),O=e(56),D=(e(71),e(75)),I=e(90),L=(e(160),e(125)),U=(e(168),e(139),e(172)),F=(e(174),e(151),e(175),S),V=x.deleteListener,j=k.getNodeFromInstance,B=N.listenTo,W=P.registrationNameModules,H={string:!0,number:!0},q=U({style:null}),K=U({__html:null}),Y={children:null,dangerouslySetInnerHTML:null,suppressContentEditableWarning:null},z=11,G={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},Q={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},X={listing:!0,pre:!0,textarea:!0},$=v({menuitem:!0},Q),Z=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,J={},ee={}.hasOwnProperty,te=1;h.displayName="ReactDOMComponent",h.Mixin={mountComponent:function(e,t,n,r){this._rootNodeID=te++,this._domID=n._idCounter++,this._hostParent=t,this._hostContainerInfo=n;var i=this._currentElement.props;switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":this._wrapperState={listeners:null},e.getReactMountReady().enqueue(c,this);break;case"button":i=w.getHostProps(this,i,t);break;case"input":M.mountWrapper(this,i,t),i=M.getHostProps(this,i),e.getReactMountReady().enqueue(c,this);break;case"option":R.mountWrapper(this,i,t),i=R.getHostProps(this,i);break;case"select":A.mountWrapper(this,i,t),i=A.getHostProps(this,i),e.getReactMountReady().enqueue(c,this);break;case"textarea":O.mountWrapper(this,i,t),i=O.getHostProps(this,i),e.getReactMountReady().enqueue(c,this)}o(this,i);var a,p;null!=t?(a=t._namespaceURI,p=t._tag):n._tag&&(a=n._namespaceURI,p=n._tag),(null==a||a===b.svg&&"foreignobject"===p)&&(a=b.html),a===b.html&&("svg"===this._tag?a=b.svg:"math"===this._tag&&(a=b.mathml)),this._namespaceURI=a;var d;if(e.useCreateElement){var f,h=n._ownerDocument;if(a===b.html)if("script"===this._tag){var m=h.createElement("div"),v=this._currentElement.type;m.innerHTML="<"+v+"></"+v+">",f=m.removeChild(m.firstChild)}else f=i.is?h.createElement(this._currentElement.type,i.is):h.createElement(this._currentElement.type);else f=h.createElementNS(a,this._currentElement.type);k.precacheNode(this,f),this._flags|=F.hasCachedChildNodes,this._hostParent||E.setAttributeForRoot(f),this._updateDOMProperties(null,i,e);var y=C(f);this._createInitialChildren(e,i,r,y),d=y}else{var _=this._createOpenTagMarkupAndPutListeners(e,i),T=this._createContentMarkup(e,i,r);d=!T&&Q[this._tag]?_+"/>":_+">"+T+"</"+this._currentElement.type+">"}switch(this._tag){case"input":e.getReactMountReady().enqueue(s,this),i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"textarea":e.getReactMountReady().enqueue(u,this),i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"select":i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"button":i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"option":e.getReactMountReady().enqueue(l,this)}return d},_createOpenTagMarkupAndPutListeners:function(e,t){var n="<"+this._currentElement.type;for(var r in t)if(t.hasOwnProperty(r)){var o=t[r];if(null!=o)if(W.hasOwnProperty(r))o&&i(this,r,o,e);else{r===q&&(o&&(o=this._previousStyleCopy=v({},t.style)),o=y.createMarkupForStyles(o,this));var a=null;null!=this._tag&&f(this._tag,t)?Y.hasOwnProperty(r)||(a=E.createMarkupForCustomAttribute(r,o)):a=E.createMarkupForProperty(r,o),a&&(n+=" "+a)}}return e.renderToStaticMarkup?n:(this._hostParent||(n+=" "+E.createMarkupForRoot()),n+=" "+E.createMarkupForID(this._domID))},_createContentMarkup:function(e,t,n){var r="",o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&(r=o.__html);else{var i=H[typeof t.children]?t.children:null,a=null!=i?null:t.children;if(null!=i)r=L(i);else if(null!=a){var s=this.mountChildren(a,e,n);r=s.join("")}}return X[this._tag]&&"\n"===r.charAt(0)?"\n"+r:r},_createInitialChildren:function(e,t,n,r){var o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&C.queueHTML(r,o.__html);else{var i=H[typeof t.children]?t.children:null,a=null!=i?null:t.children;if(null!=i)C.queueText(r,i);else if(null!=a)for(var s=this.mountChildren(a,e,n),u=0;u<s.length;u++)C.queueChild(r,s[u])}},receiveComponent:function(e,t,n){var r=this._currentElement;this._currentElement=e,this.updateComponent(t,r,e,n)},updateComponent:function(e,t,n,r){var i=t.props,a=this._currentElement.props;switch(this._tag){case"button":i=w.getHostProps(this,i),a=w.getHostProps(this,a);break;case"input":i=M.getHostProps(this,i),a=M.getHostProps(this,a);break;case"option":i=R.getHostProps(this,i),a=R.getHostProps(this,a);break;case"select":i=A.getHostProps(this,i),a=A.getHostProps(this,a);break;case"textarea":i=O.getHostProps(this,i),a=O.getHostProps(this,a)}switch(o(this,a),this._updateDOMProperties(i,a,e),this._updateDOMChildren(i,a,e,r),this._tag){case"input":M.updateWrapper(this);break;case"textarea":O.updateWrapper(this);break;case"select":e.getReactMountReady().enqueue(p,this)}},_updateDOMProperties:function(e,t,n){var r,o,a;for(r in e)if(!t.hasOwnProperty(r)&&e.hasOwnProperty(r)&&null!=e[r])if(r===q){var s=this._previousStyleCopy;for(o in s)s.hasOwnProperty(o)&&(a=a||{},a[o]="");this._previousStyleCopy=null}else W.hasOwnProperty(r)?e[r]&&V(this,r):f(this._tag,e)?Y.hasOwnProperty(r)||E.deleteValueForAttribute(j(this),r):(_.properties[r]||_.isCustomAttribute(r))&&E.deleteValueForProperty(j(this),r);for(r in t){var u=t[r],l=r===q?this._previousStyleCopy:null!=e?e[r]:void 0;if(t.hasOwnProperty(r)&&u!==l&&(null!=u||null!=l))if(r===q)if(u?u=this._previousStyleCopy=v({},u):this._previousStyleCopy=null,l){for(o in l)!l.hasOwnProperty(o)||u&&u.hasOwnProperty(o)||(a=a||{},
+a[o]="");for(o in u)u.hasOwnProperty(o)&&l[o]!==u[o]&&(a=a||{},a[o]=u[o])}else a=u;else if(W.hasOwnProperty(r))u?i(this,r,u,n):l&&V(this,r);else if(f(this._tag,t))Y.hasOwnProperty(r)||E.setValueForAttribute(j(this),r,u);else if(_.properties[r]||_.isCustomAttribute(r)){var c=j(this);null!=u?E.setValueForProperty(c,r,u):E.deleteValueForProperty(c,r)}}a&&y.setValueForStyles(j(this),a,this)},_updateDOMChildren:function(e,t,n,r){var o=H[typeof e.children]?e.children:null,i=H[typeof t.children]?t.children:null,a=e.dangerouslySetInnerHTML&&e.dangerouslySetInnerHTML.__html,s=t.dangerouslySetInnerHTML&&t.dangerouslySetInnerHTML.__html,u=null!=o?null:e.children,l=null!=i?null:t.children,c=null!=o||null!=a,p=null!=i||null!=s;null!=u&&null==l?this.updateChildren(null,n,r):c&&!p&&this.updateTextContent(""),null!=i?o!==i&&this.updateTextContent(""+i):null!=s?a!==s&&this.updateMarkup(""+s):null!=l&&this.updateChildren(l,n,r)},getHostNode:function(){return j(this)},unmountComponent:function(e){switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":var t=this._wrapperState.listeners;if(t)for(var n=0;n<t.length;n++)t[n].remove();break;case"html":case"head":case"body":m("66",this._tag)}this.unmountChildren(e),k.uncacheNode(this),x.deleteAllListeners(this),this._rootNodeID=0,this._domID=0,this._wrapperState=null},getPublicInstance:function(){return j(this)}},v(h.prototype,h.Mixin,D.Mixin),t.exports=h},{1:1,10:10,11:11,125:125,139:139,143:143,151:151,16:16,160:160,168:168,17:17,172:172,174:174,175:175,176:176,18:18,28:28,4:4,41:41,43:43,44:44,50:50,51:51,52:52,56:56,71:71,75:75,8:8,9:9,90:90}],43:[function(e,t,n){"use strict";var r={hasCachedChildNodes:1};t.exports=r},{}],44:[function(e,t,n){"use strict";function r(e){for(var t;t=e._renderedComponent;)e=t;return e}function o(e,t){var n=r(e);n._hostNode=t,t[m]=n}function i(e){var t=e._hostNode;t&&(delete t[m],e._hostNode=null)}function a(e,t){if(!(e._flags&h.hasCachedChildNodes)){var n=e._renderedChildren,i=t.firstChild;e:for(var a in n)if(n.hasOwnProperty(a)){var s=n[a],u=r(s)._domID;if(0!==u){for(;null!==i;i=i.nextSibling)if(1===i.nodeType&&i.getAttribute(f)===String(u)||8===i.nodeType&&i.nodeValue===" react-text: "+u+" "||8===i.nodeType&&i.nodeValue===" react-empty: "+u+" "){o(s,i);continue e}c("32",u)}}e._flags|=h.hasCachedChildNodes}}function s(e){if(e[m])return e[m];for(var t=[];!e[m];){if(t.push(e),!e.parentNode)return null;e=e.parentNode}for(var n,r;e&&(r=e[m]);e=t.pop())n=r,t.length&&a(r,e);return n}function u(e){var t=s(e);return null!=t&&t._hostNode===e?t:null}function l(e){if(void 0===e._hostNode?c("33"):void 0,e._hostNode)return e._hostNode;for(var t=[];!e._hostNode;)t.push(e),e._hostParent?void 0:c("34"),e=e._hostParent;for(;t.length;e=t.pop())a(e,e._hostNode);return e._hostNode}var c=e(143),p=e(10),d=e(43),f=(e(168),p.ID_ATTRIBUTE_NAME),h=d,m="__reactInternalInstance$"+Math.random().toString(36).slice(2),v={getClosestInstanceFromNode:s,getInstanceFromNode:u,getNodeFromInstance:l,precacheChildNodes:a,precacheNode:o,uncacheNode:i};t.exports=v},{10:10,143:143,168:168,43:43}],45:[function(e,t,n){"use strict";function r(e,t){var n={_topLevelWrapper:e,_idCounter:1,_ownerDocument:t?t.nodeType===o?t:t.ownerDocument:null,_node:t,_tag:t?t.nodeName.toLowerCase():null,_namespaceURI:t?t.namespaceURI:null};return n}var o=(e(151),9);t.exports=r},{151:151}],46:[function(e,t,n){"use strict";var r=e(176),o=e(8),i=e(44),a=function(e){this._currentElement=null,this._hostNode=null,this._hostParent=null,this._hostContainerInfo=null,this._domID=0};r(a.prototype,{mountComponent:function(e,t,n,r){var a=n._idCounter++;this._domID=a,this._hostParent=t,this._hostContainerInfo=n;var s=" react-empty: "+this._domID+" ";if(e.useCreateElement){var u=n._ownerDocument,l=u.createComment(s);return i.precacheNode(this,l),o(l)}return e.renderToStaticMarkup?"":"<!--"+s+"-->"},receiveComponent:function(){},getHostNode:function(){return i.getNodeFromInstance(this)},unmountComponent:function(){i.uncacheNode(this)}}),t.exports=a},{176:176,44:44,8:8}],47:[function(e,t,n){"use strict";var r=e(60),o=r.createFactory,i={a:o("a"),abbr:o("abbr"),address:o("address"),area:o("area"),article:o("article"),aside:o("aside"),audio:o("audio"),b:o("b"),base:o("base"),bdi:o("bdi"),bdo:o("bdo"),big:o("big"),blockquote:o("blockquote"),body:o("body"),br:o("br"),button:o("button"),canvas:o("canvas"),caption:o("caption"),cite:o("cite"),code:o("code"),col:o("col"),colgroup:o("colgroup"),data:o("data"),datalist:o("datalist"),dd:o("dd"),del:o("del"),details:o("details"),dfn:o("dfn"),dialog:o("dialog"),div:o("div"),dl:o("dl"),dt:o("dt"),em:o("em"),embed:o("embed"),fieldset:o("fieldset"),figcaption:o("figcaption"),figure:o("figure"),footer:o("footer"),form:o("form"),h1:o("h1"),h2:o("h2"),h3:o("h3"),h4:o("h4"),h5:o("h5"),h6:o("h6"),head:o("head"),header:o("header"),hgroup:o("hgroup"),hr:o("hr"),html:o("html"),i:o("i"),iframe:o("iframe"),img:o("img"),input:o("input"),ins:o("ins"),kbd:o("kbd"),keygen:o("keygen"),label:o("label"),legend:o("legend"),li:o("li"),link:o("link"),main:o("main"),map:o("map"),mark:o("mark"),menu:o("menu"),menuitem:o("menuitem"),meta:o("meta"),meter:o("meter"),nav:o("nav"),noscript:o("noscript"),object:o("object"),ol:o("ol"),optgroup:o("optgroup"),option:o("option"),output:o("output"),p:o("p"),param:o("param"),picture:o("picture"),pre:o("pre"),progress:o("progress"),q:o("q"),rp:o("rp"),rt:o("rt"),ruby:o("ruby"),s:o("s"),samp:o("samp"),script:o("script"),section:o("section"),select:o("select"),small:o("small"),source:o("source"),span:o("span"),strong:o("strong"),style:o("style"),sub:o("sub"),summary:o("summary"),sup:o("sup"),table:o("table"),tbody:o("tbody"),td:o("td"),textarea:o("textarea"),tfoot:o("tfoot"),th:o("th"),thead:o("thead"),time:o("time"),title:o("title"),tr:o("tr"),track:o("track"),u:o("u"),ul:o("ul"),var:o("var"),video:o("video"),wbr:o("wbr"),circle:o("circle"),clipPath:o("clipPath"),defs:o("defs"),ellipse:o("ellipse"),g:o("g"),image:o("image"),line:o("line"),linearGradient:o("linearGradient"),mask:o("mask"),path:o("path"),pattern:o("pattern"),polygon:o("polygon"),polyline:o("polyline"),radialGradient:o("radialGradient"),rect:o("rect"),stop:o("stop"),svg:o("svg"),text:o("text"),tspan:o("tspan")};t.exports=i},{60:60}],48:[function(e,t,n){"use strict";var r={useCreateElement:!0};t.exports=r},{}],49:[function(e,t,n){"use strict";var r=e(7),o=e(44),i={dangerouslyProcessChildrenUpdates:function(e,t){var n=o.getNodeFromInstance(e);r.processUpdates(n,t)}};t.exports=i},{44:44,7:7}],50:[function(e,t,n){"use strict";function r(){this._rootNodeID&&d.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=l.executeOnChange(t,e);p.asap(r,this);var o=t.name;if("radio"===t.type&&null!=o){for(var a=c.getNodeFromInstance(this),s=a;s.parentNode;)s=s.parentNode;for(var u=s.querySelectorAll("input[name="+JSON.stringify(""+o)+'][type="radio"]'),d=0;d<u.length;d++){var f=u[d];if(f!==a&&f.form===a.form){var h=c.getInstanceFromNode(f);h?void 0:i("90"),p.asap(r,h)}}}return n}var i=e(143),a=e(176),s=e(14),u=e(11),l=e(25),c=e(44),p=e(97),d=(e(168),e(175),{getHostProps:function(e,t){var n=l.getValue(t),r=l.getChecked(t),o=a({type:void 0,step:void 0,min:void 0,max:void 0},s.getHostProps(e,t),{defaultChecked:void 0,defaultValue:void 0,value:null!=n?n:e._wrapperState.initialValue,checked:null!=r?r:e._wrapperState.initialChecked,onChange:e._wrapperState.onChange});return o},mountWrapper:function(e,t){var n=t.defaultValue;e._wrapperState={initialChecked:null!=t.checked?t.checked:t.defaultChecked,initialValue:null!=t.value?t.value:n,listeners:null,onChange:o.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=t.checked;null!=n&&u.setValueForProperty(c.getNodeFromInstance(e),"checked",n||!1);var r=c.getNodeFromInstance(e),o=l.getValue(t);if(null!=o){var i=""+o;i!==r.value&&(r.value=i)}else null==t.value&&null!=t.defaultValue&&(r.defaultValue=""+t.defaultValue),null==t.checked&&null!=t.defaultChecked&&(r.defaultChecked=!!t.defaultChecked)},postMountWrapper:function(e){var t=e._currentElement.props,n=c.getNodeFromInstance(e);switch(t.type){case"submit":case"reset":break;case"color":case"date":case"datetime":case"datetime-local":case"month":case"time":case"week":n.value="",n.value=n.defaultValue;break;default:n.value=n.value}var r=n.name;""!==r&&(n.name=""),n.defaultChecked=!n.defaultChecked,n.defaultChecked=!n.defaultChecked,""!==r&&(n.name=r)}});t.exports=d},{11:11,14:14,143:143,168:168,175:175,176:176,25:25,44:44,97:97}],51:[function(e,t,n){"use strict";function r(e){var t="";return i.forEach(e,function(e){null!=e&&("string"==typeof e||"number"==typeof e?t+=e:u||(u=!0))}),t}var o=e(176),i=e(32),a=e(44),s=e(52),u=(e(175),!1),l={mountWrapper:function(e,t,n){var o=null;if(null!=n){var i=n;"optgroup"===i._tag&&(i=i._hostParent),null!=i&&"select"===i._tag&&(o=s.getSelectValueContext(i))}var a=null;if(null!=o){var u;if(u=null!=t.value?t.value+"":r(t.children),a=!1,Array.isArray(o)){for(var l=0;l<o.length;l++)if(""+o[l]===u){a=!0;break}}else a=""+o===u}e._wrapperState={selected:a}},postMountWrapper:function(e){var t=e._currentElement.props;if(null!=t.value){var n=a.getNodeFromInstance(e);n.setAttribute("value",t.value)}},getHostProps:function(e,t){var n=o({selected:void 0,children:void 0},t);null!=e._wrapperState.selected&&(n.selected=e._wrapperState.selected);var i=r(t.children);return i&&(n.children=i),n}};t.exports=l},{175:175,176:176,32:32,44:44,52:52}],52:[function(e,t,n){"use strict";function r(){if(this._rootNodeID&&this._wrapperState.pendingUpdate){this._wrapperState.pendingUpdate=!1;var e=this._currentElement.props,t=u.getValue(e);null!=t&&o(this,Boolean(e.multiple),t)}}function o(e,t,n){var r,o,i=l.getNodeFromInstance(e).options;if(t){for(r={},o=0;o<n.length;o++)r[""+n[o]]=!0;for(o=0;o<i.length;o++){var a=r.hasOwnProperty(i[o].value);i[o].selected!==a&&(i[o].selected=a)}}else{for(r=""+n,o=0;o<i.length;o++)if(i[o].value===r)return void(i[o].selected=!0);i.length&&(i[0].selected=!0)}}function i(e){var t=this._currentElement.props,n=u.executeOnChange(t,e);return this._rootNodeID&&(this._wrapperState.pendingUpdate=!0),c.asap(r,this),n}var a=e(176),s=e(14),u=e(25),l=e(44),c=e(97),p=(e(175),!1),d={getHostProps:function(e,t){return a({},s.getHostProps(e,t),{onChange:e._wrapperState.onChange,value:void 0})},mountWrapper:function(e,t){var n=u.getValue(t);e._wrapperState={pendingUpdate:!1,initialValue:null!=n?n:t.defaultValue,listeners:null,onChange:i.bind(e),wasMultiple:Boolean(t.multiple)},void 0===t.value||void 0===t.defaultValue||p||(p=!0)},getSelectValueContext:function(e){return e._wrapperState.initialValue},postUpdateWrapper:function(e){var t=e._currentElement.props;e._wrapperState.initialValue=void 0;var n=e._wrapperState.wasMultiple;e._wrapperState.wasMultiple=Boolean(t.multiple);var r=u.getValue(t);null!=r?(e._wrapperState.pendingUpdate=!1,o(e,Boolean(t.multiple),r)):n!==Boolean(t.multiple)&&(null!=t.defaultValue?o(e,Boolean(t.multiple),t.defaultValue):o(e,Boolean(t.multiple),t.multiple?[]:""))}};t.exports=d},{14:14,175:175,176:176,25:25,44:44,97:97}],53:[function(e,t,n){"use strict";function r(e,t,n,r){return e===n&&t===r}function o(e){var t=document.selection,n=t.createRange(),r=n.text.length,o=n.duplicate();o.moveToElementText(e),o.setEndPoint("EndToStart",n);var i=o.text.length,a=i+r;return{start:i,end:a}}function i(e){var t=window.getSelection&&window.getSelection();if(!t||0===t.rangeCount)return null;var n=t.anchorNode,o=t.anchorOffset,i=t.focusNode,a=t.focusOffset,s=t.getRangeAt(0);try{s.startContainer.nodeType,s.endContainer.nodeType}catch(e){return null}var u=r(t.anchorNode,t.anchorOffset,t.focusNode,t.focusOffset),l=u?0:s.toString().length,c=s.cloneRange();c.selectNodeContents(e),c.setEnd(s.startContainer,s.startOffset);var p=r(c.startContainer,c.startOffset,c.endContainer,c.endOffset),d=p?0:c.toString().length,f=d+l,h=document.createRange();h.setStart(n,o),h.setEnd(i,a);var m=h.collapsed;return{start:m?f:d,end:m?d:f}}function a(e,t){var n,r,o=document.selection.createRange().duplicate();void 0===t.end?(n=t.start,r=n):t.start>t.end?(n=t.end,r=t.start):(n=t.start,r=t.end),o.moveToElementText(e),o.moveStart("character",n),o.setEndPoint("EndToStart",o),o.moveEnd("character",r-n),o.select()}function s(e,t){if(window.getSelection){var n=window.getSelection(),r=e[c()].length,o=Math.min(t.start,r),i=void 0===t.end?o:Math.min(t.end,r);if(!n.extend&&o>i){var a=i;i=o,o=a}var s=l(e,o),u=l(e,i);if(s&&u){var p=document.createRange();p.setStart(s.node,s.offset),n.removeAllRanges(),o>i?(n.addRange(p),n.extend(u.node,u.offset)):(p.setEnd(u.node,u.offset),n.addRange(p))}}}var u=e(154),l=e(135),c=e(136),p=u.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:p?o:i,setOffsets:p?a:s};t.exports=d},{135:135,136:136,154:154}],54:[function(e,t,n){"use strict";var r=e(59),o=e(89),i=e(98);r.inject();var a={renderToString:o.renderToString,renderToStaticMarkup:o.renderToStaticMarkup,version:i};t.exports=a},{59:59,89:89,98:98}],55:[function(e,t,n){"use strict";var r=e(143),o=e(176),i=e(7),a=e(8),s=e(44),u=e(125),l=(e(168),e(151),function(e){this._currentElement=e,this._stringText=""+e,this._hostNode=null,this._hostParent=null,this._domID=0,this._mountIndex=0,this._closingComment=null,this._commentNodes=null});o(l.prototype,{mountComponent:function(e,t,n,r){var o=n._idCounter++,i=" react-text: "+o+" ",l=" /react-text ";if(this._domID=o,this._hostParent=t,e.useCreateElement){var c=n._ownerDocument,p=c.createComment(i),d=c.createComment(l),f=a(c.createDocumentFragment());return a.queueChild(f,a(p)),this._stringText&&a.queueChild(f,a(c.createTextNode(this._stringText))),a.queueChild(f,a(d)),s.precacheNode(this,p),this._closingComment=d,f}var h=u(this._stringText);return e.renderToStaticMarkup?h:"<!--"+i+"-->"+h+"<!--"+l+"-->"},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var r=this.getHostNode();i.replaceDelimitedText(r[0],r[1],n)}}},getHostNode:function(){var e=this._commentNodes;if(e)return e;if(!this._closingComment)for(var t=s.getNodeFromInstance(this),n=t.nextSibling;;){if(null==n?r("67",this._domID):void 0,8===n.nodeType&&" /react-text "===n.nodeValue){this._closingComment=n;break}n=n.nextSibling}return e=[this._hostNode,this._closingComment],this._commentNodes=e,e},unmountComponent:function(){this._closingComment=null,this._commentNodes=null,s.uncacheNode(this)}}),t.exports=l},{125:125,143:143,151:151,168:168,176:176,44:44,7:7,8:8}],56:[function(e,t,n){"use strict";function r(){this._rootNodeID&&p.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=u.executeOnChange(t,e);return c.asap(r,this),n}var i=e(143),a=e(176),s=e(14),u=e(25),l=e(44),c=e(97),p=(e(168),e(175),{getHostProps:function(e,t){null!=t.dangerouslySetInnerHTML?i("91"):void 0;var n=a({},s.getHostProps(e,t),{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue,onChange:e._wrapperState.onChange});return n},mountWrapper:function(e,t){var n=u.getValue(t),r=n;if(null==n){var a=t.defaultValue,s=t.children;null!=s&&(null!=a?i("92"):void 0,Array.isArray(s)&&(s.length<=1?void 0:i("93"),s=s[0]),a=""+s),null==a&&(a=""),r=a}e._wrapperState={initialValue:""+r,listeners:null,onChange:o.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=l.getNodeFromInstance(e),r=u.getValue(t);if(null!=r){var o=""+r;o!==n.value&&(n.value=o),null==t.defaultValue&&(n.defaultValue=o)}null!=t.defaultValue&&(n.defaultValue=t.defaultValue)},postMountWrapper:function(e){var t=l.getNodeFromInstance(e);t.value=t.textContent}});t.exports=p},{14:14,143:143,168:168,175:175,176:176,25:25,44:44,97:97}],57:[function(e,t,n){"use strict";function r(e,t){"_hostNode"in e?void 0:u("33"),"_hostNode"in t?void 0:u("33");for(var n=0,r=e;r;r=r._hostParent)n++;for(var o=0,i=t;i;i=i._hostParent)o++;for(;n-o>0;)e=e._hostParent,n--;for(;o-n>0;)t=t._hostParent,o--;for(var a=n;a--;){if(e===t)return e;e=e._hostParent,t=t._hostParent}return null}function o(e,t){"_hostNode"in e?void 0:u("35"),"_hostNode"in t?void 0:u("35");for(;t;){if(t===e)return!0;t=t._hostParent}return!1}function i(e){return"_hostNode"in e?void 0:u("36"),e._hostParent}function a(e,t,n){for(var r=[];e;)r.push(e),e=e._hostParent;var o;for(o=r.length;o-- >0;)t(r[o],!1,n);for(o=0;o<r.length;o++)t(r[o],!0,n)}function s(e,t,n,o,i){for(var a=e&&t?r(e,t):null,s=[];e&&e!==a;)s.push(e),e=e._hostParent;for(var u=[];t&&t!==a;)u.push(t),t=t._hostParent;var l;for(l=0;l<s.length;l++)n(s[l],!0,o);for(l=u.length;l-- >0;)n(u[l],!1,i)}var u=e(143);e(168);t.exports={isAncestor:o,getLowestCommonAncestor:r,getParentInstance:i,traverseTwoPhase:a,traverseEnterLeave:s}},{143:143,168:168}],58:[function(e,t,n){"use strict";function r(){this.reinitializeTransaction()}var o=e(176),i=e(97),a=e(117),s=e(160),u={initialize:s,close:function(){d.isBatchingUpdates=!1}},l={initialize:s,close:i.flushBatchedUpdates.bind(i)},c=[l,u];o(r.prototype,a.Mixin,{getTransactionWrappers:function(){return c}});var p=new r,d={isBatchingUpdates:!1,batchedUpdates:function(e,t,n,r,o,i){var a=d.isBatchingUpdates;d.isBatchingUpdates=!0,a?e(t,n,r,o,i):p.perform(e,null,t,n,r,o,i)}};t.exports=d},{117:117,160:160,176:176,97:97}],59:[function(e,t,n){"use strict";function r(){E||(E=!0,g.EventEmitter.injectReactEventListener(v),g.EventPluginHub.injectEventPluginOrder(a),g.EventPluginUtils.injectComponentTree(p),g.EventPluginUtils.injectTreeTraversal(f),g.EventPluginHub.injectEventPluginsByName({SimpleEventPlugin:_,EnterLeaveEventPlugin:s,ChangeEventPlugin:i,SelectEventPlugin:b,BeforeInputEventPlugin:o}),g.HostComponent.injectGenericComponentClass(c),g.HostComponent.injectTextComponentClass(h),g.DOMProperty.injectDOMPropertyConfig(u),g.DOMProperty.injectDOMPropertyConfig(C),g.EmptyComponent.injectEmptyComponentFactory(function(e){return new d(e)}),g.Updates.injectReconcileTransaction(y),g.Updates.injectBatchingStrategy(m),g.Component.injectEnvironment(l))}var o=e(2),i=e(6),a=e(13),s=e(15),u=e(22),l=e(35),c=e(42),p=e(44),d=e(46),f=e(57),h=e(55),m=e(58),v=e(64),g=e(68),y=e(85),C=e(101),b=e(102),_=e(103),E=!1;t.exports={inject:r}},{101:101,102:102,103:103,13:13,15:15,2:2,22:22,35:35,42:42,44:44,46:46,55:55,57:57,58:58,6:6,64:64,68:68,85:85}],60:[function(e,t,n){"use strict";function r(e){return void 0!==e.ref}function o(e){return void 0!==e.key}var i=e(176),a=e(39),s=(e(175),e(121),Object.prototype.hasOwnProperty),u="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,l={key:!0,ref:!0,__self:!0,__source:!0},c=function(e,t,n,r,o,i,a){var s={$$typeof:u,type:e,key:t,ref:n,props:a,_owner:i};return s};c.createElement=function(e,t,n){var i,u={},p=null,d=null,f=null,h=null;if(null!=t){r(t)&&(d=t.ref),o(t)&&(p=""+t.key),f=void 0===t.__self?null:t.__self,h=void 0===t.__source?null:t.__source;for(i in t)s.call(t,i)&&!l.hasOwnProperty(i)&&(u[i]=t[i])}var m=arguments.length-2;if(1===m)u.children=n;else if(m>1){for(var v=Array(m),g=0;g<m;g++)v[g]=arguments[g+2];u.children=v}if(e&&e.defaultProps){var y=e.defaultProps;for(i in y)void 0===u[i]&&(u[i]=y[i])}return c(e,p,d,f,h,a.current,u)},c.createFactory=function(e){var t=c.createElement.bind(null,e);return t.type=e,t},c.cloneAndReplaceKey=function(e,t){var n=c(e.type,t,e.ref,e._self,e._source,e._owner,e.props);return n},c.cloneElement=function(e,t,n){var u,p=i({},e.props),d=e.key,f=e.ref,h=e._self,m=e._source,v=e._owner;if(null!=t){r(t)&&(f=t.ref,v=a.current),o(t)&&(d=""+t.key);var g;e.type&&e.type.defaultProps&&(g=e.type.defaultProps);for(u in t)s.call(t,u)&&!l.hasOwnProperty(u)&&(void 0===t[u]&&void 0!==g?p[u]=g[u]:p[u]=t[u])}var y=arguments.length-2;if(1===y)p.children=n;else if(y>1){for(var C=Array(y),b=0;b<y;b++)C[b]=arguments[b+2];p.children=C}return c(e.type,d,f,h,m,v,p)},c.isValidElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===u},c.REACT_ELEMENT_TYPE=u,t.exports=c},{121:121,175:175,176:176,39:39}],61:[function(e,t,n){"use strict";var r,o={injectEmptyComponentFactory:function(e){r=e}},i={create:function(e){return r(e)}};i.injection=o,t.exports=i},{}],62:[function(e,t,n){"use strict";function r(e,t,n,r){try{return t(n,r)}catch(e){return void(null===o&&(o=e))}}var o=null,i={invokeGuardedCallback:r,invokeGuardedCallbackWithCatch:r,rethrowCaughtError:function(){if(o){var e=o;throw o=null,e}}};t.exports=i},{}],63:[function(e,t,n){"use strict";function r(e){o.enqueueEvents(e),o.processEventQueue(!1)}var o=e(17),i={handleTopLevel:function(e,t,n,i){var a=o.extractEvents(e,t,n,i);r(a)}};t.exports=i},{17:17}],64:[function(e,t,n){"use strict";function r(e){for(;e._hostParent;)e=e._hostParent;var t=p.getNodeFromInstance(e),n=t.parentNode;return p.getClosestInstanceFromNode(n)}function o(e,t){this.topLevelType=e,this.nativeEvent=t,this.ancestors=[]}function i(e){var t=f(e.nativeEvent),n=p.getClosestInstanceFromNode(t),o=n;do e.ancestors.push(o),o=o&&r(o);while(o);for(var i=0;i<e.ancestors.length;i++)n=e.ancestors[i],m._handleTopLevel(e.topLevelType,n,e.nativeEvent,f(e.nativeEvent))}function a(e){var t=h(window);e(t)}var s=e(176),u=e(153),l=e(154),c=e(26),p=e(44),d=e(97),f=e(132),h=e(165);s(o.prototype,{destructor:function(){this.topLevelType=null,this.nativeEvent=null,this.ancestors.length=0}}),c.addPoolingTo(o,c.twoArgumentPooler);var m={_enabled:!0,_handleTopLevel:null,WINDOW_HANDLE:l.canUseDOM?window:null,setHandleTopLevel:function(e){m._handleTopLevel=e},setEnabled:function(e){m._enabled=!!e},isEnabled:function(){return m._enabled},trapBubbledEvent:function(e,t,n){var r=n;return r?u.listen(r,t,m.dispatchEvent.bind(null,e)):null},trapCapturedEvent:function(e,t,n){var r=n;return r?u.capture(r,t,m.dispatchEvent.bind(null,e)):null},monitorScrollValue:function(e){var t=a.bind(null,e);u.listen(window,"scroll",t)},dispatchEvent:function(e,t){if(m._enabled){var n=o.getPooled(e,t);try{d.batchedUpdates(i,n)}finally{o.release(n)}}}};t.exports=m},{132:132,153:153,154:154,165:165,176:176,26:26,44:44,97:97}],65:[function(e,t,n){"use strict";var r={logTopLevelRenders:!1};t.exports=r},{}],66:[function(e,t,n){"use strict";var r=e(143),o=e(32),i=e(60),a=e(160),s=(e(168),e(175),{create:function(e){if("object"!=typeof e||!e||Array.isArray(e))return e;if(i.isValidElement(e))return e;1===e.nodeType?r("0"):void 0;var t=[];for(var n in e)o.mapIntoWithKeyPrefixInternal(e[n],t,n,a.thatReturnsArgument);return t}});t.exports=s},{143:143,160:160,168:168,175:175,32:32,60:60}],67:[function(e,t,n){"use strict";function r(e){return u?void 0:a("111",e.type),new u(e)}function o(e){return new c(e)}function i(e){return e instanceof c}var a=e(143),s=e(176),u=(e(168),null),l={},c=null,p={injectGenericComponentClass:function(e){u=e},injectTextComponentClass:function(e){c=e},injectComponentClasses:function(e){s(l,e)}},d={createInternalComponent:r,createInstanceForText:o,isTextComponent:i,injection:p};t.exports=d},{143:143,168:168,176:176}],68:[function(e,t,n){"use strict";var r=e(10),o=e(17),i=e(19),a=e(36),s=e(33),u=e(61),l=e(28),c=e(67),p=e(97),d={Component:a.injection,Class:s.injection,DOMProperty:r.injection,EmptyComponent:u.injection,EventPluginHub:o.injection,EventPluginUtils:i.injection,EventEmitter:l.injection,HostComponent:c.injection,Updates:p.injection};t.exports=d},{10:10,17:17,19:19,28:28,33:33,36:36,61:61,67:67,97:97}],69:[function(e,t,n){"use strict";function r(e){return i(document.documentElement,e)}var o=e(53),i=e(157),a=e(162),s=e(163),u={hasSelectionCapabilities:function(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&"text"===e.type||"textarea"===t||"true"===e.contentEditable)},getSelectionInformation:function(){var e=s();return{focusedElem:e,selectionRange:u.hasSelectionCapabilities(e)?u.getSelection(e):null}},restoreSelection:function(e){var t=s(),n=e.focusedElem,o=e.selectionRange;t!==n&&r(n)&&(u.hasSelectionCapabilities(n)&&u.setSelection(n,o),a(n))},getSelection:function(e){var t;if("selectionStart"in e)t={start:e.selectionStart,end:e.selectionEnd};else if(document.selection&&e.nodeName&&"input"===e.nodeName.toLowerCase()){var n=document.selection.createRange();n.parentElement()===e&&(t={start:-n.moveStart("character",-e.value.length),end:-n.moveEnd("character",-e.value.length)})}else t=o.getOffsets(e);return t||{start:0,end:0}},setSelection:function(e,t){var n=t.start,r=t.end;if(void 0===r&&(r=n),"selectionStart"in e)e.selectionStart=n,e.selectionEnd=Math.min(r,e.value.length);else if(document.selection&&e.nodeName&&"input"===e.nodeName.toLowerCase()){var i=e.createTextRange();i.collapse(!0),i.moveStart("character",n),i.moveEnd("character",r-n),i.select()}else o.setOffsets(e,t)}};t.exports=u},{157:157,162:162,163:163,53:53}],70:[function(e,t,n){"use strict";var r={remove:function(e){e._reactInternalInstance=void 0},get:function(e){return e._reactInternalInstance},has:function(e){return void 0!==e._reactInternalInstance},set:function(e,t){e._reactInternalInstance=t}};t.exports=r},{}],71:[function(e,t,n){"use strict";var r=null;t.exports={debugTool:r}},{}],72:[function(e,t,n){"use strict";function r(e,t){this.value=e,this.requestChange=t}function o(e){var t={value:void 0===e?i.PropTypes.any.isRequired:e.isRequired,requestChange:i.PropTypes.func.isRequired};return i.PropTypes.shape(t)}var i=e(27);r.PropTypes={link:o},t.exports=r},{27:27}],73:[function(e,t,n){"use strict";var r=e(120),o=/\/?>/,i=/^<\!\-\-/,a={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return i.test(e)?e:e.replace(o," "+a.CHECKSUM_ATTR_NAME+'="'+t+'"$&')},canReuseMarkup:function(e,t){var n=t.getAttribute(a.CHECKSUM_ATTR_NAME);n=n&&parseInt(n,10);var o=r(e);return o===n}};t.exports=a},{120:120}],74:[function(e,t,n){"use strict";function r(e,t){for(var n=Math.min(e.length,t.length),r=0;r<n;r++)if(e.charAt(r)!==t.charAt(r))return r;return e.length===t.length?-1:n}function o(e){return e?e.nodeType===D?e.documentElement:e.firstChild:null}function i(e){return e.getAttribute&&e.getAttribute(R)||""}function a(e,t,n,r,o){var i;if(_.logTopLevelRenders){var a=e._currentElement.props,s=a.type;i="React mount: "+("string"==typeof s?s:s.displayName||s.name),console.time(i)}var u=x.mountComponent(e,n,null,y(e,t),o,0);i&&console.timeEnd(i),e._renderedComponent._topLevelWrapper=e,V._mountImageIntoNode(u,t,e,r,n)}function s(e,t,n,r){var o=N.ReactReconcileTransaction.getPooled(!n&&C.useCreateElement);o.perform(a,null,e,t,o,n,r),N.ReactReconcileTransaction.release(o)}function u(e,t,n){for(x.unmountComponent(e,n),t.nodeType===D&&(t=t.documentElement);t.lastChild;)t.removeChild(t.lastChild)}function l(e){var t=o(e);if(t){var n=g.getInstanceFromNode(t);return!(!n||!n._hostParent)}}function c(e){return!(!e||e.nodeType!==O&&e.nodeType!==D&&e.nodeType!==I)}function p(e){var t=o(e),n=t&&g.getInstanceFromNode(t);return n&&!n._hostParent?n:null}function d(e){var t=p(e);return t?t._hostContainerInfo._topLevelWrapper:null}var f=e(143),h=e(8),m=e(10),v=e(28),g=(e(39),e(44)),y=e(45),C=e(48),b=e(60),_=e(65),E=e(70),T=(e(71),e(73)),x=e(86),P=e(96),N=e(97),w=e(161),S=e(138),k=(e(168),e(145)),M=e(148),R=(e(175),m.ID_ATTRIBUTE_NAME),A=m.ROOT_ATTRIBUTE_NAME,O=1,D=9,I=11,L={},U=1,F=function(){this.rootID=U++};F.prototype.isReactComponent={},F.prototype.render=function(){return this.props};var V={TopLevelWrapper:F,_instancesByReactRootID:L,scrollMonitor:function(e,t){t()},_updateRootComponent:function(e,t,n,r,o){return V.scrollMonitor(r,function(){P.enqueueElementInternal(e,t,n),o&&P.enqueueCallbackInternal(e,o)}),e},_renderNewRootComponent:function(e,t,n,r){c(t)?void 0:f("37"),v.ensureScrollValueMonitoring();var o=S(e,!1);N.batchedUpdates(s,o,t,n,r);var i=o._instance.rootID;return L[i]=o,o},renderSubtreeIntoContainer:function(e,t,n,r){return null!=e&&E.has(e)?void 0:f("38"),V._renderSubtreeIntoContainer(e,t,n,r)},_renderSubtreeIntoContainer:function(e,t,n,r){P.validateCallback(r,"ReactDOM.render"),b.isValidElement(t)?void 0:f("39","string"==typeof t?" Instead of passing a string like 'div', pass React.createElement('div') or <div />.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or <Foo />.":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var a,s=b(F,null,null,null,null,null,t);if(e){var u=E.get(e);a=u._processChildContext(u._context)}else a=w;var c=d(n);if(c){var p=c._currentElement,h=p.props;if(M(h,t)){var m=c._renderedComponent.getPublicInstance(),v=r&&function(){r.call(m)};return V._updateRootComponent(c,s,a,n,v),m}V.unmountComponentAtNode(n)}var g=o(n),y=g&&!!i(g),C=l(n),_=y&&!c&&!C,T=V._renderNewRootComponent(s,n,_,a)._renderedComponent.getPublicInstance();return r&&r.call(T),T},render:function(e,t,n){return V._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){c(e)?void 0:f("40");var t=d(e);return t?(delete L[t._instance.rootID],N.batchedUpdates(u,t,e,!1),!0):(l(e),1===e.nodeType&&e.hasAttribute(A),!1)},_mountImageIntoNode:function(e,t,n,i,a){if(c(t)?void 0:f("41"),i){var s=o(t);if(T.canReuseMarkup(e,s))return void g.precacheNode(n,s);var u=s.getAttribute(T.CHECKSUM_ATTR_NAME);s.removeAttribute(T.CHECKSUM_ATTR_NAME);var l=s.outerHTML;s.setAttribute(T.CHECKSUM_ATTR_NAME,u);var p=e,d=r(p,l),m=" (client) "+p.substring(d-20,d+20)+"\n (server) "+l.substring(d-20,d+20);t.nodeType===D?f("42",m):void 0}if(t.nodeType===D?f("43"):void 0,a.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);h.insertTreeBefore(t,e,null)}else k(t,e),g.precacheNode(n,t.firstChild)}};t.exports=V},{10:10,138:138,143:143,145:145,148:148,161:161,168:168,175:175,28:28,39:39,44:44,45:45,48:48,60:60,65:65,70:70,71:71,73:73,8:8,86:86,96:96,97:97}],75:[function(e,t,n){"use strict";function r(e,t,n){return{type:d.INSERT_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:n,afterNode:t}}function o(e,t,n){return{type:d.MOVE_EXISTING,content:null,fromIndex:e._mountIndex,fromNode:f.getHostNode(e),toIndex:n,afterNode:t}}function i(e,t){return{type:d.REMOVE_NODE,content:null,fromIndex:e._mountIndex,fromNode:t,toIndex:null,afterNode:null}}function a(e){return{type:d.SET_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function s(e){return{type:d.TEXT_CONTENT,content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function u(e,t){return t&&(e=e||[],e.push(t)),e}function l(e,t){p.processChildrenUpdates(e,t)}var c=e(143),p=e(36),d=(e(70),e(71),e(76)),f=(e(39),e(86)),h=e(31),m=(e(160),e(127)),v=(e(168),{Mixin:{_reconcilerInstantiateChildren:function(e,t,n){return h.instantiateChildren(e,t,n)},_reconcilerUpdateChildren:function(e,t,n,r,o,i){var a,s=0;return a=m(t,s),h.updateChildren(e,a,n,r,o,this,this._hostContainerInfo,i,s),a},mountChildren:function(e,t,n){var r=this._reconcilerInstantiateChildren(e,t,n);this._renderedChildren=r;var o=[],i=0;for(var a in r)if(r.hasOwnProperty(a)){var s=r[a],u=0,l=f.mountComponent(s,t,this,this._hostContainerInfo,n,u);s._mountIndex=i++,o.push(l)}return o},updateTextContent:function(e){var t=this._renderedChildren;h.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[s(e)];l(this,r)},updateMarkup:function(e){var t=this._renderedChildren;h.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[a(e)];l(this,r)},updateChildren:function(e,t,n){this._updateChildren(e,t,n)},_updateChildren:function(e,t,n){var r=this._renderedChildren,o={},i=[],a=this._reconcilerUpdateChildren(r,e,i,o,t,n);if(a||r){var s,c=null,p=0,d=0,h=0,m=null;for(s in a)if(a.hasOwnProperty(s)){var v=r&&r[s],g=a[s];v===g?(c=u(c,this.moveChild(v,m,p,d)),d=Math.max(v._mountIndex,d),v._mountIndex=p):(v&&(d=Math.max(v._mountIndex,d)),c=u(c,this._mountChildAtIndex(g,i[h],m,p,t,n)),h++),p++,m=f.getHostNode(g)}for(s in o)o.hasOwnProperty(s)&&(c=u(c,this._unmountChild(r[s],o[s])));c&&l(this,c),this._renderedChildren=a}},unmountChildren:function(e){var t=this._renderedChildren;h.unmountChildren(t,e),this._renderedChildren=null},moveChild:function(e,t,n,r){
+if(e._mountIndex<r)return o(e,t,n)},createChild:function(e,t,n){return r(n,t,e._mountIndex)},removeChild:function(e,t){return i(e,t)},_mountChildAtIndex:function(e,t,n,r,o,i){return e._mountIndex=r,this.createChild(e,n,t)},_unmountChild:function(e,t){var n=this.removeChild(e,t);return e._mountIndex=null,n}}});t.exports=v},{127:127,143:143,160:160,168:168,31:31,36:36,39:39,70:70,71:71,76:76,86:86}],76:[function(e,t,n){"use strict";var r=e(171),o=r({INSERT_MARKUP:null,MOVE_EXISTING:null,REMOVE_NODE:null,SET_MARKUP:null,TEXT_CONTENT:null});t.exports=o},{171:171}],77:[function(e,t,n){"use strict";var r=e(143),o=e(60),i=(e(168),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?i.EMPTY:o.isValidElement(e)?"function"==typeof e.type?i.COMPOSITE:i.HOST:void r("26",e)}});t.exports=i},{143:143,168:168,60:60}],78:[function(e,t,n){"use strict";function r(e,t){}var o=(e(175),{isMounted:function(e){return!1},enqueueCallback:function(e,t){},enqueueForceUpdate:function(e){r(e,"forceUpdate")},enqueueReplaceState:function(e,t){r(e,"replaceState")},enqueueSetState:function(e,t){r(e,"setState")}});t.exports=o},{175:175}],79:[function(e,t,n){"use strict";var r=e(143),o=(e(168),{isValidOwner:function(e){return!(!e||"function"!=typeof e.attachRef||"function"!=typeof e.detachRef)},addComponentAsRefTo:function(e,t,n){o.isValidOwner(n)?void 0:r("119"),n.attachRef(t,e)},removeComponentAsRefFrom:function(e,t,n){o.isValidOwner(n)?void 0:r("120");var i=n.getPublicInstance();i&&i.refs[t]===e.getPublicInstance()&&n.detachRef(t)}});t.exports=o},{143:143,168:168}],80:[function(e,t,n){"use strict";var r={};t.exports=r},{}],81:[function(e,t,n){"use strict";var r=e(171),o=r({prop:null,context:null,childContext:null});t.exports=o},{171:171}],82:[function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function o(e){this.message=e,this.stack=""}function i(e){function t(t,n,r,i,a,s,u){if(i=i||N,s=s||r,null==n[r]){var l=E[a];return t?new o("Required "+l+" `"+s+"` was not specified in "+("`"+i+"`.")):null}return e(n,r,i,a,s)}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function a(e){function t(t,n,r,i,a,s){var u=t[n],l=y(u);if(l!==e){var c=E[i],p=C(u);return new o("Invalid "+c+" `"+a+"` of type "+("`"+p+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return i(t)}function s(){return i(x.thatReturns(null))}function u(e){function t(t,n,r,i,a){if("function"!=typeof e)return new o("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var s=t[n];if(!Array.isArray(s)){var u=E[i],l=y(s);return new o("Invalid "+u+" `"+a+"` of type "+("`"+l+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<s.length;c++){var p=e(s,c,r,i,a+"["+c+"]",T);if(p instanceof Error)return p}return null}return i(t)}function l(){function e(e,t,n,r,i){var a=e[t];if(!_.isValidElement(a)){var s=E[r],u=y(a);return new o("Invalid "+s+" `"+i+"` of type "+("`"+u+"` supplied to `"+n+"`, expected a single ReactElement."))}return null}return i(e)}function c(e){function t(t,n,r,i,a){if(!(t[n]instanceof e)){var s=E[i],u=e.name||N,l=b(t[n]);return new o("Invalid "+s+" `"+a+"` of type "+("`"+l+"` supplied to `"+r+"`, expected ")+("instance of `"+u+"`."))}return null}return i(t)}function p(e){function t(t,n,i,a,s){for(var u=t[n],l=0;l<e.length;l++)if(r(u,e[l]))return null;var c=E[a],p=JSON.stringify(e);return new o("Invalid "+c+" `"+s+"` of value `"+u+"` "+("supplied to `"+i+"`, expected one of "+p+"."))}return Array.isArray(e)?i(t):x.thatReturnsNull}function d(e){function t(t,n,r,i,a){if("function"!=typeof e)return new o("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var s=t[n],u=y(s);if("object"!==u){var l=E[i];return new o("Invalid "+l+" `"+a+"` of type "+("`"+u+"` supplied to `"+r+"`, expected an object."))}for(var c in s)if(s.hasOwnProperty(c)){var p=e(s,c,r,i,a+"."+c,T);if(p instanceof Error)return p}return null}return i(t)}function f(e){function t(t,n,r,i,a){for(var s=0;s<e.length;s++){var u=e[s];if(null==u(t,n,r,i,a,T))return null}var l=E[i];return new o("Invalid "+l+" `"+a+"` supplied to "+("`"+r+"`."))}return Array.isArray(e)?i(t):x.thatReturnsNull}function h(){function e(e,t,n,r,i){if(!v(e[t])){var a=E[r];return new o("Invalid "+a+" `"+i+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return null}return i(e)}function m(e){function t(t,n,r,i,a){var s=t[n],u=y(s);if("object"!==u){var l=E[i];return new o("Invalid "+l+" `"+a+"` of type `"+u+"` "+("supplied to `"+r+"`, expected `object`."))}for(var c in e){var p=e[c];if(p){var d=p(s,c,r,i,a+"."+c,T);if(d)return d}}return null}return i(t)}function v(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(v);if(null===e||_.isValidElement(e))return!0;var t=P(e);if(!t)return!1;var n,r=t.call(e);if(t!==e.entries){for(;!(n=r.next()).done;)if(!v(n.value))return!1}else for(;!(n=r.next()).done;){var o=n.value;if(o&&!v(o[1]))return!1}return!0;default:return!1}}function g(e,t){return"symbol"===e||"Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol}function y(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":g(t,e)?"symbol":t}function C(e){var t=y(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function b(e){return e.constructor&&e.constructor.name?e.constructor.name:N}var _=e(60),E=e(80),T=e(83),x=e(160),P=e(134),N=(e(175),"<<anonymous>>"),w={array:a("array"),bool:a("boolean"),func:a("function"),number:a("number"),object:a("object"),string:a("string"),symbol:a("symbol"),any:s(),arrayOf:u,element:l(),instanceOf:c,node:h(),objectOf:d,oneOf:p,oneOfType:f,shape:m};o.prototype=Error.prototype,t.exports=w},{134:134,160:160,175:175,60:60,80:80,83:83}],83:[function(e,t,n){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";t.exports=r},{}],84:[function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=u,this.updater=n||s}function o(){}var i=e(176),a=e(34),s=e(78),u=e(161);o.prototype=a.prototype,r.prototype=new o,r.prototype.constructor=r,i(r.prototype,a.prototype),r.prototype.isPureReactComponent=!0,t.exports=r},{161:161,176:176,34:34,78:78}],85:[function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=!1,this.reactMountReady=i.getPooled(null),this.useCreateElement=e}var o=e(176),i=e(5),a=e(26),s=e(28),u=e(69),l=(e(71),e(117)),c=e(96),p={initialize:u.getSelectionInformation,close:u.restoreSelection},d={initialize:function(){var e=s.isEnabled();return s.setEnabled(!1),e},close:function(e){s.setEnabled(e)}},f={initialize:function(){this.reactMountReady.reset()},close:function(){this.reactMountReady.notifyAll()}},h=[p,d,f],m={getTransactionWrappers:function(){return h},getReactMountReady:function(){return this.reactMountReady},getUpdateQueue:function(){return c},checkpoint:function(){return this.reactMountReady.checkpoint()},rollback:function(e){this.reactMountReady.rollback(e)},destructor:function(){i.release(this.reactMountReady),this.reactMountReady=null}};o(r.prototype,l.Mixin,m),a.addPoolingTo(r),t.exports=r},{117:117,176:176,26:26,28:28,5:5,69:69,71:71,96:96}],86:[function(e,t,n){"use strict";function r(){o.attachRefs(this,this._currentElement)}var o=e(87),i=(e(71),e(175),{mountComponent:function(e,t,n,o,i,a){var s=e.mountComponent(t,n,o,i,a);return e._currentElement&&null!=e._currentElement.ref&&t.getReactMountReady().enqueue(r,e),s},getHostNode:function(e){return e.getHostNode()},unmountComponent:function(e,t){o.detachRefs(e,e._currentElement),e.unmountComponent(t)},receiveComponent:function(e,t,n,i){var a=e._currentElement;if(t!==a||i!==e._context){var s=o.shouldUpdateRefs(a,t);s&&o.detachRefs(e,a),e.receiveComponent(t,n,i),s&&e._currentElement&&null!=e._currentElement.ref&&n.getReactMountReady().enqueue(r,e)}},performUpdateIfNecessary:function(e,t,n){e._updateBatchNumber===n&&e.performUpdateIfNecessary(t)}});t.exports=i},{175:175,71:71,87:87}],87:[function(e,t,n){"use strict";function r(e,t,n){"function"==typeof e?e(t.getPublicInstance()):i.addComponentAsRefTo(t,e,n)}function o(e,t,n){"function"==typeof e?e(null):i.removeComponentAsRefFrom(t,e,n)}var i=e(79),a={};a.attachRefs=function(e,t){if(null!==t&&t!==!1){var n=t.ref;null!=n&&r(n,e,t._owner)}},a.shouldUpdateRefs=function(e,t){var n=null===e||e===!1,r=null===t||t===!1;return n||r||t.ref!==e.ref||"string"==typeof t.ref&&t._owner!==e._owner},a.detachRefs=function(e,t){if(null!==t&&t!==!1){var n=t.ref;null!=n&&o(n,e,t._owner)}},t.exports=a},{79:79}],88:[function(e,t,n){"use strict";var r={isBatchingUpdates:!1,batchedUpdates:function(e){}};t.exports=r},{}],89:[function(e,t,n){"use strict";function r(e,t){var n;try{return h.injection.injectBatchingStrategy(d),n=f.getPooled(t),g++,n.perform(function(){var r=v(e,!0),o=p.mountComponent(r,n,null,s(),m,0);return t||(o=c.addChecksumToMarkup(o)),o},null)}finally{g--,f.release(n),g||h.injection.injectBatchingStrategy(u)}}function o(e){return l.isValidElement(e)?void 0:a("46"),r(e,!1)}function i(e){return l.isValidElement(e)?void 0:a("47"),r(e,!0)}var a=e(143),s=e(45),u=e(58),l=e(60),c=(e(71),e(73)),p=e(86),d=e(88),f=e(90),h=e(97),m=e(161),v=e(138),g=(e(168),0);t.exports={renderToString:o,renderToStaticMarkup:i}},{138:138,143:143,161:161,168:168,45:45,58:58,60:60,71:71,73:73,86:86,88:88,90:90,97:97}],90:[function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=e,this.useCreateElement=!1,this.updateQueue=new s(this)}var o=e(176),i=e(26),a=e(117),s=(e(71),e(91)),u=[],l={enqueue:function(){}},c={getTransactionWrappers:function(){return u},getReactMountReady:function(){return l},getUpdateQueue:function(){return this.updateQueue},destructor:function(){},checkpoint:function(){},rollback:function(){}};o(r.prototype,a.Mixin,c),i.addPoolingTo(r),t.exports=r},{117:117,176:176,26:26,71:71,91:91}],91:[function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){}var i=e(96),a=(e(117),e(175),function(){function e(t){r(this,e),this.transaction=t}return e.prototype.isMounted=function(e){return!1},e.prototype.enqueueCallback=function(e,t,n){this.transaction.isInTransaction()&&i.enqueueCallback(e,t,n)},e.prototype.enqueueForceUpdate=function(e){this.transaction.isInTransaction()?i.enqueueForceUpdate(e):o(e,"forceUpdate")},e.prototype.enqueueReplaceState=function(e,t){this.transaction.isInTransaction()?i.enqueueReplaceState(e,t):o(e,"replaceState")},e.prototype.enqueueSetState=function(e,t){this.transaction.isInTransaction()?i.enqueueSetState(e,t):o(e,"setState")},e}());t.exports=a},{117:117,175:175,96:96}],92:[function(e,t,n){"use strict";function r(e,t){var n={};return function(r){n[t]=r,e.setState(n)}}var o={createStateSetter:function(e,t){return function(n,r,o,i,a,s){var u=t.call(e,n,r,o,i,a,s);u&&e.setState(u)}},createStateKeySetter:function(e,t){var n=e.__keySetters||(e.__keySetters={});return n[t]||(n[t]=r(e,t))}};o.Mixin={createStateSetter:function(e){return o.createStateSetter(this,e)},createStateKeySetter:function(e){return o.createStateKeySetter(this,e)}},t.exports=o},{}],93:[function(e,t,n){"use strict";var r=e(127),o={getChildMapping:function(e,t){return e?r(e):e},mergeChildMappings:function(e,t){function n(n){return t.hasOwnProperty(n)?t[n]:e[n]}e=e||{},t=t||{};var r={},o=[];for(var i in e)t.hasOwnProperty(i)?o.length&&(r[i]=o,o=[]):o.push(i);var a,s={};for(var u in t){if(r.hasOwnProperty(u))for(a=0;a<r[u].length;a++){var l=r[u][a];s[r[u][a]]=n(l)}s[u]=n(u)}for(a=0;a<o.length;a++)s[o[a]]=n(o[a]);return s}};t.exports=o},{127:127}],94:[function(e,t,n){"use strict";function r(){var e=s("animationend"),t=s("transitionend");e&&u.push(e),t&&u.push(t)}function o(e,t,n){e.addEventListener(t,n,!1)}function i(e,t,n){e.removeEventListener(t,n,!1)}var a=e(154),s=e(137),u=[];a.canUseDOM&&r();var l={addEndEventListener:function(e,t){return 0===u.length?void window.setTimeout(t,0):void u.forEach(function(n){o(e,n,t)})},removeEndEventListener:function(e,t){0!==u.length&&u.forEach(function(n){i(e,n,t)})}};t.exports=l},{137:137,154:154}],95:[function(e,t,n){"use strict";var r=e(176),o=e(27),i=(e(70),e(93)),a=e(160),s=o.createClass({displayName:"ReactTransitionGroup",propTypes:{component:o.PropTypes.any,childFactory:o.PropTypes.func},getDefaultProps:function(){return{component:"span",childFactory:a.thatReturnsArgument}},getInitialState:function(){return{children:i.getChildMapping(this.props.children)}},componentWillMount:function(){this.currentlyTransitioningKeys={},this.keysToEnter=[],this.keysToLeave=[]},componentDidMount:function(){var e=this.state.children;for(var t in e)e[t]&&this.performAppear(t)},componentWillReceiveProps:function(e){var t;t=i.getChildMapping(e.children);var n=this.state.children;this.setState({children:i.mergeChildMappings(n,t)});var r;for(r in t){var o=n&&n.hasOwnProperty(r);!t[r]||o||this.currentlyTransitioningKeys[r]||this.keysToEnter.push(r)}for(r in n){var a=t&&t.hasOwnProperty(r);!n[r]||a||this.currentlyTransitioningKeys[r]||this.keysToLeave.push(r)}},componentDidUpdate:function(){var e=this.keysToEnter;this.keysToEnter=[],e.forEach(this.performEnter);var t=this.keysToLeave;this.keysToLeave=[],t.forEach(this.performLeave)},performAppear:function(e){this.currentlyTransitioningKeys[e]=!0;var t=this.refs[e];t.componentWillAppear?t.componentWillAppear(this._handleDoneAppearing.bind(this,e)):this._handleDoneAppearing(e)},_handleDoneAppearing:function(e){var t=this.refs[e];t.componentDidAppear&&t.componentDidAppear(),delete this.currentlyTransitioningKeys[e];var n;n=i.getChildMapping(this.props.children),n&&n.hasOwnProperty(e)||this.performLeave(e)},performEnter:function(e){this.currentlyTransitioningKeys[e]=!0;var t=this.refs[e];t.componentWillEnter?t.componentWillEnter(this._handleDoneEntering.bind(this,e)):this._handleDoneEntering(e)},_handleDoneEntering:function(e){var t=this.refs[e];t.componentDidEnter&&t.componentDidEnter(),delete this.currentlyTransitioningKeys[e];var n;n=i.getChildMapping(this.props.children),n&&n.hasOwnProperty(e)||this.performLeave(e)},performLeave:function(e){this.currentlyTransitioningKeys[e]=!0;var t=this.refs[e];t.componentWillLeave?t.componentWillLeave(this._handleDoneLeaving.bind(this,e)):this._handleDoneLeaving(e)},_handleDoneLeaving:function(e){var t=this.refs[e];t.componentDidLeave&&t.componentDidLeave(),delete this.currentlyTransitioningKeys[e];var n;n=i.getChildMapping(this.props.children),n&&n.hasOwnProperty(e)?this.performEnter(e):this.setState(function(t){var n=r({},t.children);return delete n[e],{children:n}})},render:function(){var e=[];for(var t in this.state.children){var n=this.state.children[t];n&&e.push(o.cloneElement(this.props.childFactory(n),{ref:t,key:t}))}var i=r({},this.props);return delete i.transitionLeave,delete i.transitionName,delete i.transitionAppear,delete i.transitionEnter,delete i.childFactory,delete i.transitionLeaveTimeout,delete i.transitionEnterTimeout,delete i.transitionAppearTimeout,delete i.component,o.createElement(this.props.component,i,e)}});t.exports=s},{160:160,176:176,27:27,70:70,93:93}],96:[function(e,t,n){"use strict";function r(e){u.enqueueUpdate(e)}function o(e){var t=typeof e;if("object"!==t)return t;var n=e.constructor&&e.constructor.name||t,r=Object.keys(e);return r.length>0&&r.length<20?n+" (keys: "+r.join(", ")+")":n}function i(e,t){var n=s.get(e);return n?n:null}var a=e(143),s=(e(39),e(70)),u=(e(71),e(97)),l=(e(168),e(175),{isMounted:function(e){var t=s.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){l.validateCallback(t,n);var o=i(e);return o?(o._pendingCallbacks?o._pendingCallbacks.push(t):o._pendingCallbacks=[t],void r(o)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=i(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=i(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=i(e,"setState");if(n){var o=n._pendingStateQueue||(n._pendingStateQueue=[]);o.push(t),r(n)}},enqueueElementInternal:function(e,t,n){e._pendingElement=t,e._context=n,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?a("122",t,o(e)):void 0}});t.exports=l},{143:143,168:168,175:175,39:39,70:70,71:71,97:97}],97:[function(e,t,n){"use strict";function r(){w.ReactReconcileTransaction&&_?void 0:c("123")}function o(){this.reinitializeTransaction(),this.dirtyComponentsLength=null,this.callbackQueue=d.getPooled(),this.reconcileTransaction=w.ReactReconcileTransaction.getPooled(!0)}function i(e,t,n,o,i,a){r(),_.batchedUpdates(e,t,n,o,i,a)}function a(e,t){return e._mountOrder-t._mountOrder}function s(e){var t=e.dirtyComponentsLength;t!==g.length?c("124",t,g.length):void 0,g.sort(a),y++;for(var n=0;n<t;n++){var r=g[n],o=r._pendingCallbacks;r._pendingCallbacks=null;var i;if(h.logTopLevelRenders){var s=r;r._currentElement.props===r._renderedComponent._currentElement&&(s=r._renderedComponent),i="React update: "+s.getName(),console.time(i)}if(m.performUpdateIfNecessary(r,e.reconcileTransaction,y),i&&console.timeEnd(i),o)for(var u=0;u<o.length;u++)e.callbackQueue.enqueue(o[u],r.getPublicInstance())}}function u(e){return r(),_.isBatchingUpdates?(g.push(e),void(null==e._updateBatchNumber&&(e._updateBatchNumber=y+1))):void _.batchedUpdates(u,e)}function l(e,t){_.isBatchingUpdates?void 0:c("125"),C.enqueue(e,t),b=!0}var c=e(143),p=e(176),d=e(5),f=e(26),h=e(65),m=e(86),v=e(117),g=(e(168),[]),y=0,C=d.getPooled(),b=!1,_=null,E={initialize:function(){this.dirtyComponentsLength=g.length},close:function(){this.dirtyComponentsLength!==g.length?(g.splice(0,this.dirtyComponentsLength),P()):g.length=0}},T={initialize:function(){this.callbackQueue.reset()},close:function(){this.callbackQueue.notifyAll()}},x=[E,T];p(o.prototype,v.Mixin,{getTransactionWrappers:function(){return x},destructor:function(){this.dirtyComponentsLength=null,d.release(this.callbackQueue),this.callbackQueue=null,w.ReactReconcileTransaction.release(this.reconcileTransaction),this.reconcileTransaction=null},perform:function(e,t,n){return v.Mixin.perform.call(this,this.reconcileTransaction.perform,this.reconcileTransaction,e,t,n)}}),f.addPoolingTo(o);var P=function(){for(;g.length||b;){if(g.length){var e=o.getPooled();e.perform(s,null,e),o.release(e)}if(b){b=!1;var t=C;C=d.getPooled(),t.notifyAll(),d.release(t)}}},N={injectReconcileTransaction:function(e){e?void 0:c("126"),w.ReactReconcileTransaction=e},injectBatchingStrategy:function(e){e?void 0:c("127"),"function"!=typeof e.batchedUpdates?c("128"):void 0,"boolean"!=typeof e.isBatchingUpdates?c("129"):void 0,_=e}},w={ReactReconcileTransaction:null,batchedUpdates:i,enqueueUpdate:u,flushBatchedUpdates:P,injection:N,asap:l};t.exports=w},{117:117,143:143,168:168,176:176,26:26,5:5,65:65,86:86}],98:[function(e,t,n){"use strict";t.exports="15.3.1"},{}],99:[function(e,t,n){"use strict";var r=e(24),o=e(27),i=e(37),a=e(29),s=e(66),u=e(95),l=e(147),c=e(150);o.addons={CSSTransitionGroup:a,LinkedStateMixin:r,PureRenderMixin:i,TransitionGroup:u,createFragment:s.create,shallowCompare:l,update:c},t.exports=o},{147:147,150:150,24:24,27:27,29:29,37:37,66:66,95:95}],100:[function(e,t,n){"use strict";var r=e(176),o=e(40),i=e(54),a=e(99),s=r({__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:o,__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:i},a);t.exports=s},{176:176,40:40,54:54,99:99}],101:[function(e,t,n){"use strict";var r={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},o={accentHeight:"accent-height",accumulate:0,additive:0,alignmentBaseline:"alignment-baseline",allowReorder:"allowReorder",alphabetic:0,amplitude:0,arabicForm:"arabic-form",ascent:0,attributeName:"attributeName",attributeType:"attributeType",autoReverse:"autoReverse",azimuth:0,baseFrequency:"baseFrequency",baseProfile:"baseProfile",baselineShift:"baseline-shift",bbox:0,begin:0,bias:0,by:0,calcMode:"calcMode",capHeight:"cap-height",clip:0,clipPath:"clip-path",clipRule:"clip-rule",clipPathUnits:"clipPathUnits",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",contentScriptType:"contentScriptType",contentStyleType:"contentStyleType",cursor:0,cx:0,cy:0,d:0,decelerate:0,descent:0,diffuseConstant:"diffuseConstant",direction:0,display:0,divisor:0,dominantBaseline:"dominant-baseline",dur:0,dx:0,dy:0,edgeMode:"edgeMode",elevation:0,enableBackground:"enable-background",end:0,exponent:0,externalResourcesRequired:"externalResourcesRequired",fill:0,fillOpacity:"fill-opacity",fillRule:"fill-rule",filter:0,filterRes:"filterRes",filterUnits:"filterUnits",floodColor:"flood-color",floodOpacity:"flood-opacity",focusable:0,fontFamily:"font-family",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontVariant:"font-variant",fontWeight:"font-weight",format:0,from:0,fx:0,fy:0,g1:0,g2:0,glyphName:"glyph-name",glyphOrientationHorizontal:"glyph-orientation-horizontal",glyphOrientationVertical:"glyph-orientation-vertical",glyphRef:"glyphRef",gradientTransform:"gradientTransform",gradientUnits:"gradientUnits",hanging:0,horizAdvX:"horiz-adv-x",horizOriginX:"horiz-origin-x",ideographic:0,imageRendering:"image-rendering",in:0,in2:0,intercept:0,k:0,k1:0,k2:0,k3:0,k4:0,kernelMatrix:"kernelMatrix",kernelUnitLength:"kernelUnitLength",kerning:0,keyPoints:"keyPoints",keySplines:"keySplines",keyTimes:"keyTimes",lengthAdjust:"lengthAdjust",letterSpacing:"letter-spacing",lightingColor:"lighting-color",limitingConeAngle:"limitingConeAngle",local:0,markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",markerHeight:"markerHeight",markerUnits:"markerUnits",markerWidth:"markerWidth",mask:0,maskContentUnits:"maskContentUnits",maskUnits:"maskUnits",mathematical:0,mode:0,numOctaves:"numOctaves",offset:0,opacity:0,operator:0,order:0,orient:0,orientation:0,origin:0,overflow:0,overlinePosition:"overline-position",overlineThickness:"overline-thickness",paintOrder:"paint-order",panose1:"panose-1",pathLength:"pathLength",patternContentUnits:"patternContentUnits",patternTransform:"patternTransform",patternUnits:"patternUnits",pointerEvents:"pointer-events",points:0,pointsAtX:"pointsAtX",pointsAtY:"pointsAtY",pointsAtZ:"pointsAtZ",preserveAlpha:"preserveAlpha",preserveAspectRatio:"preserveAspectRatio",primitiveUnits:"primitiveUnits",r:0,radius:0,refX:"refX",refY:"refY",renderingIntent:"rendering-intent",repeatCount:"repeatCount",repeatDur:"repeatDur",requiredExtensions:"requiredExtensions",requiredFeatures:"requiredFeatures",restart:0,result:0,rotate:0,rx:0,ry:0,scale:0,seed:0,shapeRendering:"shape-rendering",slope:0,spacing:0,specularConstant:"specularConstant",specularExponent:"specularExponent",speed:0,spreadMethod:"spreadMethod",startOffset:"startOffset",stdDeviation:"stdDeviation",stemh:0,stemv:0,stitchTiles:"stitchTiles",stopColor:"stop-color",stopOpacity:"stop-opacity",strikethroughPosition:"strikethrough-position",strikethroughThickness:"strikethrough-thickness",string:0,stroke:0,strokeDasharray:"stroke-dasharray",strokeDashoffset:"stroke-dashoffset",strokeLinecap:"stroke-linecap",strokeLinejoin:"stroke-linejoin",strokeMiterlimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",surfaceScale:"surfaceScale",systemLanguage:"systemLanguage",tableValues:"tableValues",targetX:"targetX",targetY:"targetY",textAnchor:"text-anchor",textDecoration:"text-decoration",textRendering:"text-rendering",textLength:"textLength",to:0,transform:0,u1:0,u2:0,underlinePosition:"underline-position",underlineThickness:"underline-thickness",unicode:0,unicodeBidi:"unicode-bidi",unicodeRange:"unicode-range",unitsPerEm:"units-per-em",vAlphabetic:"v-alphabetic",vHanging:"v-hanging",vIdeographic:"v-ideographic",vMathematical:"v-mathematical",values:0,vectorEffect:"vector-effect",version:0,vertAdvY:"vert-adv-y",vertOriginX:"vert-origin-x",vertOriginY:"vert-origin-y",viewBox:"viewBox",viewTarget:"viewTarget",visibility:0,widths:0,wordSpacing:"word-spacing",writingMode:"writing-mode",x:0,xHeight:"x-height",x1:0,x2:0,xChannelSelector:"xChannelSelector",xlinkActuate:"xlink:actuate",xlinkArcrole:"xlink:arcrole",xlinkHref:"xlink:href",xlinkRole:"xlink:role",xlinkShow:"xlink:show",xlinkTitle:"xlink:title",xlinkType:"xlink:type",xmlBase:"xml:base",xmlns:0,xmlnsXlink:"xmlns:xlink",xmlLang:"xml:lang",xmlSpace:"xml:space",y:0,y1:0,y2:0,yChannelSelector:"yChannelSelector",z:0,zoomAndPan:"zoomAndPan"},i={Properties:{},DOMAttributeNamespaces:{xlinkActuate:r.xlink,xlinkArcrole:r.xlink,xlinkHref:r.xlink,xlinkRole:r.xlink,xlinkShow:r.xlink,xlinkTitle:r.xlink,xlinkType:r.xlink,xmlBase:r.xml,xmlLang:r.xml,xmlSpace:r.xml},DOMAttributeNames:{}};Object.keys(o).forEach(function(e){i.Properties[e]=0,o[e]&&(i.DOMAttributeNames[e]=o[e])}),t.exports=i},{}],102:[function(e,t,n){"use strict";function r(e){if("selectionStart"in e&&l.hasSelectionCapabilities(e))return{start:e.selectionStart,end:e.selectionEnd};if(window.getSelection){var t=window.getSelection();return{anchorNode:t.anchorNode,anchorOffset:t.anchorOffset,focusNode:t.focusNode,focusOffset:t.focusOffset}}if(document.selection){var n=document.selection.createRange();return{parentElement:n.parentElement(),text:n.text,top:n.boundingTop,left:n.boundingLeft}}}function o(e,t){if(_||null==y||y!==p())return null;var n=r(y);if(!b||!h(b,n)){b=n;var o=c.getPooled(g.select,C,e,t);return o.type="select",o.target=y,a.accumulateTwoPhaseDispatches(o),o}return null}var i=e(16),a=e(20),s=e(154),u=e(44),l=e(69),c=e(108),p=e(163),d=e(140),f=e(172),h=e(174),m=i.topLevelTypes,v=s.canUseDOM&&"documentMode"in document&&document.documentMode<=11,g={select:{phasedRegistrationNames:{bubbled:f({onSelect:null}),captured:f({onSelectCapture:null})},dependencies:[m.topBlur,m.topContextMenu,m.topFocus,m.topKeyDown,m.topMouseDown,m.topMouseUp,m.topSelectionChange]}},y=null,C=null,b=null,_=!1,E=!1,T=f({onSelect:null}),x={eventTypes:g,extractEvents:function(e,t,n,r){if(!E)return null;var i=t?u.getNodeFromInstance(t):window;switch(e){case m.topFocus:(d(i)||"true"===i.contentEditable)&&(y=i,C=t,b=null);break;case m.topBlur:y=null,C=null,b=null;break;case m.topMouseDown:_=!0;break;case m.topContextMenu:case m.topMouseUp:return _=!1,o(n,r);case m.topSelectionChange:if(v)break;case m.topKeyDown:case m.topKeyUp:return o(n,r)}return null},didPutListener:function(e,t,n){t===T&&(E=!0)}};t.exports=x},{108:108,140:140,154:154,16:16,163:163,172:172,174:174,20:20,44:44,69:69}],103:[function(e,t,n){"use strict";function r(e){return"."+e._rootNodeID}var o=e(143),i=e(16),a=e(153),s=e(20),u=e(44),l=e(104),c=e(105),p=e(108),d=e(109),f=e(111),h=e(112),m=e(107),v=e(113),g=e(114),y=e(115),C=e(116),b=e(160),_=e(129),E=(e(168),e(172)),T=i.topLevelTypes,x={abort:{phasedRegistrationNames:{bubbled:E({onAbort:!0}),captured:E({onAbortCapture:!0})}},animationEnd:{phasedRegistrationNames:{bubbled:E({onAnimationEnd:!0}),captured:E({onAnimationEndCapture:!0})}},animationIteration:{phasedRegistrationNames:{bubbled:E({onAnimationIteration:!0}),captured:E({onAnimationIterationCapture:!0})}},animationStart:{phasedRegistrationNames:{bubbled:E({onAnimationStart:!0}),captured:E({onAnimationStartCapture:!0})}},blur:{phasedRegistrationNames:{bubbled:E({onBlur:!0}),captured:E({onBlurCapture:!0})}},canPlay:{phasedRegistrationNames:{bubbled:E({onCanPlay:!0}),captured:E({onCanPlayCapture:!0})}},canPlayThrough:{phasedRegistrationNames:{bubbled:E({onCanPlayThrough:!0}),captured:E({onCanPlayThroughCapture:!0})}},click:{phasedRegistrationNames:{bubbled:E({onClick:!0}),captured:E({onClickCapture:!0})}},contextMenu:{phasedRegistrationNames:{bubbled:E({onContextMenu:!0}),captured:E({onContextMenuCapture:!0})}},copy:{phasedRegistrationNames:{bubbled:E({onCopy:!0}),captured:E({onCopyCapture:!0})}},cut:{phasedRegistrationNames:{bubbled:E({onCut:!0}),captured:E({onCutCapture:!0})}},doubleClick:{phasedRegistrationNames:{bubbled:E({onDoubleClick:!0}),captured:E({onDoubleClickCapture:!0})}},drag:{phasedRegistrationNames:{bubbled:E({onDrag:!0}),captured:E({onDragCapture:!0})}},dragEnd:{phasedRegistrationNames:{bubbled:E({onDragEnd:!0}),captured:E({onDragEndCapture:!0})}},dragEnter:{phasedRegistrationNames:{bubbled:E({onDragEnter:!0}),captured:E({onDragEnterCapture:!0})}},dragExit:{phasedRegistrationNames:{bubbled:E({onDragExit:!0}),captured:E({onDragExitCapture:!0})}},dragLeave:{phasedRegistrationNames:{bubbled:E({onDragLeave:!0}),captured:E({onDragLeaveCapture:!0})}},dragOver:{phasedRegistrationNames:{bubbled:E({onDragOver:!0}),captured:E({onDragOverCapture:!0})}},dragStart:{phasedRegistrationNames:{bubbled:E({onDragStart:!0}),captured:E({onDragStartCapture:!0})}},drop:{phasedRegistrationNames:{bubbled:E({onDrop:!0}),captured:E({onDropCapture:!0})}},durationChange:{phasedRegistrationNames:{bubbled:E({onDurationChange:!0}),captured:E({onDurationChangeCapture:!0})}},emptied:{phasedRegistrationNames:{bubbled:E({onEmptied:!0}),captured:E({onEmptiedCapture:!0})}},encrypted:{phasedRegistrationNames:{bubbled:E({onEncrypted:!0}),captured:E({onEncryptedCapture:!0})}},ended:{phasedRegistrationNames:{bubbled:E({onEnded:!0}),captured:E({onEndedCapture:!0})}},error:{phasedRegistrationNames:{bubbled:E({onError:!0}),captured:E({onErrorCapture:!0})}},focus:{phasedRegistrationNames:{bubbled:E({onFocus:!0}),captured:E({onFocusCapture:!0})}},input:{phasedRegistrationNames:{bubbled:E({onInput:!0}),captured:E({onInputCapture:!0})}},invalid:{phasedRegistrationNames:{bubbled:E({onInvalid:!0}),captured:E({onInvalidCapture:!0})}},keyDown:{phasedRegistrationNames:{bubbled:E({onKeyDown:!0}),captured:E({onKeyDownCapture:!0})}},keyPress:{phasedRegistrationNames:{bubbled:E({onKeyPress:!0}),captured:E({onKeyPressCapture:!0})}},keyUp:{phasedRegistrationNames:{bubbled:E({onKeyUp:!0}),captured:E({onKeyUpCapture:!0})}},load:{phasedRegistrationNames:{bubbled:E({onLoad:!0}),captured:E({onLoadCapture:!0})}},loadedData:{phasedRegistrationNames:{bubbled:E({onLoadedData:!0}),captured:E({onLoadedDataCapture:!0})}},loadedMetadata:{phasedRegistrationNames:{bubbled:E({onLoadedMetadata:!0}),captured:E({onLoadedMetadataCapture:!0})}},loadStart:{phasedRegistrationNames:{bubbled:E({onLoadStart:!0}),captured:E({onLoadStartCapture:!0})}},mouseDown:{phasedRegistrationNames:{bubbled:E({onMouseDown:!0}),captured:E({onMouseDownCapture:!0})}},mouseMove:{phasedRegistrationNames:{bubbled:E({onMouseMove:!0}),captured:E({onMouseMoveCapture:!0})}},mouseOut:{phasedRegistrationNames:{bubbled:E({onMouseOut:!0}),captured:E({onMouseOutCapture:!0})}},mouseOver:{phasedRegistrationNames:{bubbled:E({onMouseOver:!0}),captured:E({onMouseOverCapture:!0})}},mouseUp:{phasedRegistrationNames:{bubbled:E({onMouseUp:!0}),captured:E({onMouseUpCapture:!0})}},paste:{phasedRegistrationNames:{bubbled:E({onPaste:!0}),captured:E({onPasteCapture:!0})}},pause:{phasedRegistrationNames:{bubbled:E({onPause:!0}),captured:E({onPauseCapture:!0})}},play:{phasedRegistrationNames:{bubbled:E({onPlay:!0}),captured:E({onPlayCapture:!0})}},playing:{phasedRegistrationNames:{bubbled:E({onPlaying:!0}),captured:E({onPlayingCapture:!0})}},progress:{phasedRegistrationNames:{bubbled:E({onProgress:!0}),captured:E({onProgressCapture:!0})}},rateChange:{phasedRegistrationNames:{bubbled:E({onRateChange:!0}),captured:E({onRateChangeCapture:!0})}},reset:{phasedRegistrationNames:{bubbled:E({onReset:!0}),captured:E({onResetCapture:!0})}},scroll:{phasedRegistrationNames:{bubbled:E({onScroll:!0}),captured:E({onScrollCapture:!0})}},seeked:{phasedRegistrationNames:{bubbled:E({onSeeked:!0}),captured:E({onSeekedCapture:!0})}},seeking:{phasedRegistrationNames:{bubbled:E({onSeeking:!0}),captured:E({onSeekingCapture:!0})}},stalled:{phasedRegistrationNames:{bubbled:E({
+onStalled:!0}),captured:E({onStalledCapture:!0})}},submit:{phasedRegistrationNames:{bubbled:E({onSubmit:!0}),captured:E({onSubmitCapture:!0})}},suspend:{phasedRegistrationNames:{bubbled:E({onSuspend:!0}),captured:E({onSuspendCapture:!0})}},timeUpdate:{phasedRegistrationNames:{bubbled:E({onTimeUpdate:!0}),captured:E({onTimeUpdateCapture:!0})}},touchCancel:{phasedRegistrationNames:{bubbled:E({onTouchCancel:!0}),captured:E({onTouchCancelCapture:!0})}},touchEnd:{phasedRegistrationNames:{bubbled:E({onTouchEnd:!0}),captured:E({onTouchEndCapture:!0})}},touchMove:{phasedRegistrationNames:{bubbled:E({onTouchMove:!0}),captured:E({onTouchMoveCapture:!0})}},touchStart:{phasedRegistrationNames:{bubbled:E({onTouchStart:!0}),captured:E({onTouchStartCapture:!0})}},transitionEnd:{phasedRegistrationNames:{bubbled:E({onTransitionEnd:!0}),captured:E({onTransitionEndCapture:!0})}},volumeChange:{phasedRegistrationNames:{bubbled:E({onVolumeChange:!0}),captured:E({onVolumeChangeCapture:!0})}},waiting:{phasedRegistrationNames:{bubbled:E({onWaiting:!0}),captured:E({onWaitingCapture:!0})}},wheel:{phasedRegistrationNames:{bubbled:E({onWheel:!0}),captured:E({onWheelCapture:!0})}}},P={topAbort:x.abort,topAnimationEnd:x.animationEnd,topAnimationIteration:x.animationIteration,topAnimationStart:x.animationStart,topBlur:x.blur,topCanPlay:x.canPlay,topCanPlayThrough:x.canPlayThrough,topClick:x.click,topContextMenu:x.contextMenu,topCopy:x.copy,topCut:x.cut,topDoubleClick:x.doubleClick,topDrag:x.drag,topDragEnd:x.dragEnd,topDragEnter:x.dragEnter,topDragExit:x.dragExit,topDragLeave:x.dragLeave,topDragOver:x.dragOver,topDragStart:x.dragStart,topDrop:x.drop,topDurationChange:x.durationChange,topEmptied:x.emptied,topEncrypted:x.encrypted,topEnded:x.ended,topError:x.error,topFocus:x.focus,topInput:x.input,topInvalid:x.invalid,topKeyDown:x.keyDown,topKeyPress:x.keyPress,topKeyUp:x.keyUp,topLoad:x.load,topLoadedData:x.loadedData,topLoadedMetadata:x.loadedMetadata,topLoadStart:x.loadStart,topMouseDown:x.mouseDown,topMouseMove:x.mouseMove,topMouseOut:x.mouseOut,topMouseOver:x.mouseOver,topMouseUp:x.mouseUp,topPaste:x.paste,topPause:x.pause,topPlay:x.play,topPlaying:x.playing,topProgress:x.progress,topRateChange:x.rateChange,topReset:x.reset,topScroll:x.scroll,topSeeked:x.seeked,topSeeking:x.seeking,topStalled:x.stalled,topSubmit:x.submit,topSuspend:x.suspend,topTimeUpdate:x.timeUpdate,topTouchCancel:x.touchCancel,topTouchEnd:x.touchEnd,topTouchMove:x.touchMove,topTouchStart:x.touchStart,topTransitionEnd:x.transitionEnd,topVolumeChange:x.volumeChange,topWaiting:x.waiting,topWheel:x.wheel};for(var N in P)P[N].dependencies=[N];var w=E({onClick:null}),S={},k={eventTypes:x,extractEvents:function(e,t,n,r){var i=P[e];if(!i)return null;var a;switch(e){case T.topAbort:case T.topCanPlay:case T.topCanPlayThrough:case T.topDurationChange:case T.topEmptied:case T.topEncrypted:case T.topEnded:case T.topError:case T.topInput:case T.topInvalid:case T.topLoad:case T.topLoadedData:case T.topLoadedMetadata:case T.topLoadStart:case T.topPause:case T.topPlay:case T.topPlaying:case T.topProgress:case T.topRateChange:case T.topReset:case T.topSeeked:case T.topSeeking:case T.topStalled:case T.topSubmit:case T.topSuspend:case T.topTimeUpdate:case T.topVolumeChange:case T.topWaiting:a=p;break;case T.topKeyPress:if(0===_(n))return null;case T.topKeyDown:case T.topKeyUp:a=f;break;case T.topBlur:case T.topFocus:a=d;break;case T.topClick:if(2===n.button)return null;case T.topContextMenu:case T.topDoubleClick:case T.topMouseDown:case T.topMouseMove:case T.topMouseOut:case T.topMouseOver:case T.topMouseUp:a=h;break;case T.topDrag:case T.topDragEnd:case T.topDragEnter:case T.topDragExit:case T.topDragLeave:case T.topDragOver:case T.topDragStart:case T.topDrop:a=m;break;case T.topTouchCancel:case T.topTouchEnd:case T.topTouchMove:case T.topTouchStart:a=v;break;case T.topAnimationEnd:case T.topAnimationIteration:case T.topAnimationStart:a=l;break;case T.topTransitionEnd:a=g;break;case T.topScroll:a=y;break;case T.topWheel:a=C;break;case T.topCopy:case T.topCut:case T.topPaste:a=c}a?void 0:o("86",e);var u=a.getPooled(i,t,n,r);return s.accumulateTwoPhaseDispatches(u),u},didPutListener:function(e,t,n){if(t===w){var o=r(e),i=u.getNodeFromInstance(e);S[o]||(S[o]=a.listen(i,"click",b))}},willDeleteListener:function(e,t){if(t===w){var n=r(e);S[n].remove(),delete S[n]}}};t.exports=k},{104:104,105:105,107:107,108:108,109:109,111:111,112:112,113:113,114:114,115:115,116:116,129:129,143:143,153:153,16:16,160:160,168:168,172:172,20:20,44:44}],104:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(108),i={animationName:null,elapsedTime:null,pseudoElement:null};o.augmentClass(r,i),t.exports=r},{108:108}],105:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(108),i={clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}};o.augmentClass(r,i),t.exports=r},{108:108}],106:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(108),i={data:null};o.augmentClass(r,i),t.exports=r},{108:108}],107:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(112),i={dataTransfer:null};o.augmentClass(r,i),t.exports=r},{112:112}],108:[function(e,t,n){"use strict";function r(e,t,n,r){this.dispatchConfig=e,this._targetInst=t,this.nativeEvent=n;var o=this.constructor.Interface;for(var i in o)if(o.hasOwnProperty(i)){var s=o[i];s?this[i]=s(n):"target"===i?this.target=r:this[i]=n[i]}var u=null!=n.defaultPrevented?n.defaultPrevented:n.returnValue===!1;return u?this.isDefaultPrevented=a.thatReturnsTrue:this.isDefaultPrevented=a.thatReturnsFalse,this.isPropagationStopped=a.thatReturnsFalse,this}var o=e(176),i=e(26),a=e(160),s=(e(175),"function"==typeof Proxy,["dispatchConfig","_targetInst","nativeEvent","isDefaultPrevented","isPropagationStopped","_dispatchListeners","_dispatchInstances"]),u={type:null,target:null,currentTarget:a.thatReturnsNull,eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null};o(r.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():e.returnValue=!1,this.isDefaultPrevented=a.thatReturnsTrue)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=a.thatReturnsTrue)},persist:function(){this.isPersistent=a.thatReturnsTrue},isPersistent:a.thatReturnsFalse,destructor:function(){var e=this.constructor.Interface;for(var t in e)this[t]=null;for(var n=0;n<s.length;n++)this[s[n]]=null}}),r.Interface=u,r.augmentClass=function(e,t){var n=this,r=function(){};r.prototype=n.prototype;var a=new r;o(a,e.prototype),e.prototype=a,e.prototype.constructor=e,e.Interface=o({},n.Interface,t),e.augmentClass=n.augmentClass,i.addPoolingTo(e,i.fourArgumentPooler)},i.addPoolingTo(r,i.fourArgumentPooler),t.exports=r},{160:160,175:175,176:176,26:26}],109:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(115),i={relatedTarget:null};o.augmentClass(r,i),t.exports=r},{115:115}],110:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(108),i={data:null};o.augmentClass(r,i),t.exports=r},{108:108}],111:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(115),i=e(129),a=e(130),s=e(131),u={key:a,location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:s,charCode:function(e){return"keypress"===e.type?i(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?i(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}};o.augmentClass(r,u),t.exports=r},{115:115,129:129,130:130,131:131}],112:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(115),i=e(118),a=e(131),s={screenX:null,screenY:null,clientX:null,clientY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:a,button:function(e){var t=e.button;return"which"in e?t:2===t?2:4===t?1:0},buttons:null,relatedTarget:function(e){return e.relatedTarget||(e.fromElement===e.srcElement?e.toElement:e.fromElement)},pageX:function(e){return"pageX"in e?e.pageX:e.clientX+i.currentScrollLeft},pageY:function(e){return"pageY"in e?e.pageY:e.clientY+i.currentScrollTop}};o.augmentClass(r,s),t.exports=r},{115:115,118:118,131:131}],113:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(115),i=e(131),a={touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:i};o.augmentClass(r,a),t.exports=r},{115:115,131:131}],114:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(108),i={propertyName:null,elapsedTime:null,pseudoElement:null};o.augmentClass(r,i),t.exports=r},{108:108}],115:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(108),i=e(132),a={view:function(e){if(e.view)return e.view;var t=i(e);if(t.window===t)return t;var n=t.ownerDocument;return n?n.defaultView||n.parentWindow:window},detail:function(e){return e.detail||0}};o.augmentClass(r,a),t.exports=r},{108:108,132:132}],116:[function(e,t,n){"use strict";function r(e,t,n,r){return o.call(this,e,t,n,r)}var o=e(112),i={deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null};o.augmentClass(r,i),t.exports=r},{112:112}],117:[function(e,t,n){"use strict";var r=e(143),o=(e(168),{reinitializeTransaction:function(){this.transactionWrappers=this.getTransactionWrappers(),this.wrapperInitData?this.wrapperInitData.length=0:this.wrapperInitData=[],this._isInTransaction=!1},_isInTransaction:!1,getTransactionWrappers:null,isInTransaction:function(){return!!this._isInTransaction},perform:function(e,t,n,o,i,a,s,u){this.isInTransaction()?r("27"):void 0;var l,c;try{this._isInTransaction=!0,l=!0,this.initializeAll(0),c=e.call(t,n,o,i,a,s,u),l=!1}finally{try{if(l)try{this.closeAll(0)}catch(e){}else this.closeAll(0)}finally{this._isInTransaction=!1}}return c},initializeAll:function(e){for(var t=this.transactionWrappers,n=e;n<t.length;n++){var r=t[n];try{this.wrapperInitData[n]=i.OBSERVED_ERROR,this.wrapperInitData[n]=r.initialize?r.initialize.call(this):null}finally{if(this.wrapperInitData[n]===i.OBSERVED_ERROR)try{this.initializeAll(n+1)}catch(e){}}}},closeAll:function(e){this.isInTransaction()?void 0:r("28");for(var t=this.transactionWrappers,n=e;n<t.length;n++){var o,a=t[n],s=this.wrapperInitData[n];try{o=!0,s!==i.OBSERVED_ERROR&&a.close&&a.close.call(this,s),o=!1}finally{if(o)try{this.closeAll(n+1)}catch(e){}}}this.wrapperInitData.length=0}}),i={Mixin:o,OBSERVED_ERROR:{}};t.exports=i},{143:143,168:168}],118:[function(e,t,n){"use strict";var r={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){r.currentScrollLeft=e.x,r.currentScrollTop=e.y}};t.exports=r},{}],119:[function(e,t,n){"use strict";function r(e,t){return null==t?o("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var o=e(143);e(168);t.exports=r},{143:143,168:168}],120:[function(e,t,n){"use strict";function r(e){for(var t=1,n=0,r=0,i=e.length,a=i&-4;r<a;){for(var s=Math.min(r+4096,a);r<s;r+=4)n+=(t+=e.charCodeAt(r))+(t+=e.charCodeAt(r+1))+(t+=e.charCodeAt(r+2))+(t+=e.charCodeAt(r+3));t%=o,n%=o}for(;r<i;r++)n+=t+=e.charCodeAt(r);return t%=o,n%=o,t|n<<16}var o=65521;t.exports=r},{}],121:[function(e,t,n){"use strict";var r=!1;t.exports=r},{}],122:[function(e,t,n){(function(n){"use strict";function r(e,t,n,r,u,l){for(var c in e)if(e.hasOwnProperty(c)){var p;try{"function"!=typeof e[c]?o("84",r||"React class",i[n],c):void 0,p=e[c](t,c,r,n,null,a)}catch(e){p=e}p instanceof Error&&!(p.message in s)&&(s[p.message]=!0)}}var o=e(143),i=e(80),a=e(83);e(168),e(175);"undefined"!=typeof n&&n.env,1;var s={};t.exports=r}).call(this,void 0)},{143:143,168:168,175:175,80:80,83:83}],123:[function(e,t,n){"use strict";var r=function(e){return"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,o){MSApp.execUnsafeLocalFunction(function(){return e(t,n,r,o)})}:e};t.exports=r},{}],124:[function(e,t,n){"use strict";function r(e,t,n){var r=null==t||"boolean"==typeof t||""===t;if(r)return"";var o=isNaN(t);return o||0===t||i.hasOwnProperty(e)&&i[e]?""+t:("string"==typeof t&&(t=t.trim()),t+"px")}var o=e(3),i=(e(175),o.isUnitlessNumber);t.exports=r},{175:175,3:3}],125:[function(e,t,n){"use strict";function r(e){var t=""+e,n=i.exec(t);if(!n)return t;var r,o="",a=0,s=0;for(a=n.index;a<t.length;a++){switch(t.charCodeAt(a)){case 34:r="&quot;";break;case 38:r="&amp;";break;case 39:r="&#x27;";break;case 60:r="&lt;";break;case 62:r="&gt;";break;default:continue}s!==a&&(o+=t.substring(s,a)),s=a+1,o+=r}return s!==a?o+t.substring(s,a):o}function o(e){return"boolean"==typeof e||"number"==typeof e?""+e:r(e)}var i=/["'&<>]/;t.exports=o},{}],126:[function(e,t,n){"use strict";function r(e){if(null==e)return null;if(1===e.nodeType)return e;var t=a.get(e);return t?(t=s(t),t?i.getNodeFromInstance(t):null):void("function"==typeof e.render?o("44"):o("45",Object.keys(e)))}var o=e(143),i=(e(39),e(44)),a=e(70),s=e(133);e(168),e(175);t.exports=r},{133:133,143:143,168:168,175:175,39:39,44:44,70:70}],127:[function(e,t,n){(function(n){"use strict";function r(e,t,n,r){if(e&&"object"==typeof e){var o=e,i=void 0===o[n];i&&null!=t&&(o[n]=t)}}function o(e,t){if(null==e)return e;var n={};return i(e,r,n),n}var i=(e(23),e(149));e(175);"undefined"!=typeof n&&n.env,t.exports=o}).call(this,void 0)},{149:149,175:175,23:23}],128:[function(e,t,n){"use strict";function r(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}t.exports=r},{}],129:[function(e,t,n){"use strict";function r(e){var t,n=e.keyCode;return"charCode"in e?(t=e.charCode,0===t&&13===n&&(t=13)):t=n,t>=32||13===t?t:0}t.exports=r},{}],130:[function(e,t,n){"use strict";function r(e){if(e.key){var t=i[e.key]||e.key;if("Unidentified"!==t)return t}if("keypress"===e.type){var n=o(e);return 13===n?"Enter":String.fromCharCode(n)}return"keydown"===e.type||"keyup"===e.type?a[e.keyCode]||"Unidentified":""}var o=e(129),i={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},a={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"};t.exports=r},{129:129}],131:[function(e,t,n){"use strict";function r(e){var t=this,n=t.nativeEvent;if(n.getModifierState)return n.getModifierState(e);var r=i[e];return!!r&&!!n[r]}function o(e){return r}var i={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};t.exports=o},{}],132:[function(e,t,n){"use strict";function r(e){var t=e.target||e.srcElement||window;return t.correspondingUseElement&&(t=t.correspondingUseElement),3===t.nodeType?t.parentNode:t}t.exports=r},{}],133:[function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===o.COMPOSITE;)e=e._renderedComponent;return t===o.HOST?e._renderedComponent:t===o.EMPTY?null:void 0}var o=e(77);t.exports=r},{77:77}],134:[function(e,t,n){"use strict";function r(e){var t=e&&(o&&e[o]||e[i]);if("function"==typeof t)return t}var o="function"==typeof Symbol&&Symbol.iterator,i="@@iterator";t.exports=r},{}],135:[function(e,t,n){"use strict";function r(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function o(e){for(;e;){if(e.nextSibling)return e.nextSibling;e=e.parentNode}}function i(e,t){for(var n=r(e),i=0,a=0;n;){if(3===n.nodeType){if(a=i+n.textContent.length,i<=t&&a>=t)return{node:n,offset:t-i};i=a}n=r(o(n))}}t.exports=i},{}],136:[function(e,t,n){"use strict";function r(){return!i&&o.canUseDOM&&(i="textContent"in document.documentElement?"textContent":"innerText"),i}var o=e(154),i=null;t.exports=r},{154:154}],137:[function(e,t,n){"use strict";function r(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function o(e){if(s[e])return s[e];if(!a[e])return e;var t=a[e];for(var n in t)if(t.hasOwnProperty(n)&&n in u)return s[e]=t[n];return""}var i=e(154),a={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},s={},u={};i.canUseDOM&&(u=document.createElement("div").style,"AnimationEvent"in window||(delete a.animationend.animation,delete a.animationiteration.animation,delete a.animationstart.animation),"TransitionEvent"in window||delete a.transitionend.transition),t.exports=o},{154:154}],138:[function(e,t,n){"use strict";function r(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function o(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function i(e,t){var n;if(null===e||e===!1)n=l.create(i);else if("object"==typeof e){var s=e;!s||"function"!=typeof s.type&&"string"!=typeof s.type?a("130",null==s.type?s.type:typeof s.type,r(s._owner)):void 0,"string"==typeof s.type?n=c.createInternalComponent(s):o(s.type)?(n=new s.type(s),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new p(s)}else"string"==typeof e||"number"==typeof e?n=c.createInstanceForText(e):a("131",typeof e);return n._mountIndex=0,n._mountImage=null,n}var a=e(143),s=e(176),u=e(38),l=e(61),c=e(67),p=(e(168),e(175),function(e){this.construct(e)});s(p.prototype,u.Mixin,{_instantiateReactComponent:i});t.exports=i},{143:143,168:168,175:175,176:176,38:38,61:61,67:67}],139:[function(e,t,n){"use strict";function r(e,t){if(!i.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var a=document.createElement("div");a.setAttribute(n,"return;"),r="function"==typeof a[n]}return!r&&o&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var o,i=e(154);i.canUseDOM&&(o=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),t.exports=r},{154:154}],140:[function(e,t,n){"use strict";function r(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!o[e.type]:"textarea"===t}var o={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};t.exports=r},{}],141:[function(e,t,n){"use strict";function r(e){return i.isValidElement(e)?void 0:o("143"),e}var o=e(143),i=e(60);e(168);t.exports=r},{143:143,168:168,60:60}],142:[function(e,t,n){"use strict";function r(e){return'"'+o(e)+'"'}var o=e(125);t.exports=r},{125:125}],143:[function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r<t;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);n+=" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";var o=new Error(n);throw o.name="Invariant Violation",o.framesToPop=1,o}t.exports=r},{}],144:[function(e,t,n){"use strict";var r=e(74);t.exports=r.renderSubtreeIntoContainer},{74:74}],145:[function(e,t,n){"use strict";var r,o=e(154),i=e(9),a=/^[ \r\n\t\f]/,s=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,u=e(123),l=u(function(e,t){if(e.namespaceURI!==i.svg||"innerHTML"in e)e.innerHTML=t;else{r=r||document.createElement("div"),r.innerHTML="<svg>"+t+"</svg>";for(var n=r.firstChild.childNodes,o=0;o<n.length;o++)e.appendChild(n[o])}});if(o.canUseDOM){var c=document.createElement("div");c.innerHTML=" ",""===c.innerHTML&&(l=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),a.test(t)||"<"===t[0]&&s.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),c=null}t.exports=l},{123:123,154:154,9:9}],146:[function(e,t,n){"use strict";var r=e(154),o=e(125),i=e(145),a=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(a=function(e,t){i(e,o(t))})),t.exports=a},{125:125,145:145,154:154}],147:[function(e,t,n){"use strict";function r(e,t,n){return!o(e.props,t)||!o(e.state,n)}var o=e(174);t.exports=r},{174:174}],148:[function(e,t,n){"use strict";function r(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var o=typeof e,i=typeof t;return"string"===o||"number"===o?"string"===i||"number"===i:"object"===i&&e.type===t.type&&e.key===t.key}t.exports=r},{}],149:[function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?l.escape(e.key):t.toString(36)}function o(e,t,n,i){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||s.isValidElement(e))return n(i,e,""===t?c+r(e,0):t),1;var f,h,m=0,v=""===t?c:t+p;if(Array.isArray(e))for(var g=0;g<e.length;g++)f=e[g],h=v+r(f,g),m+=o(f,h,n,i);else{var y=u(e);if(y){var C,b=y.call(e);if(y!==e.entries)for(var _=0;!(C=b.next()).done;)f=C.value,h=v+r(f,_++),m+=o(f,h,n,i);else for(;!(C=b.next()).done;){var E=C.value;E&&(f=E[1],h=v+l.escape(E[0])+p+r(f,0),m+=o(f,h,n,i))}}else if("object"===d){var T="",x=String(e);a("31","[object Object]"===x?"object with keys {"+Object.keys(e).join(", ")+"}":x,T)}}return m}function i(e,t,n){return null==e?0:o(e,"",t,n)}var a=e(143),s=(e(39),e(60)),u=e(134),l=(e(168),e(23)),c=(e(175),"."),p=":";t.exports=i},{134:134,143:143,168:168,175:175,23:23,39:39,60:60}],150:[function(e,t,n){"use strict";function r(e){return Array.isArray(e)?e.concat():e&&"object"==typeof e?s(new e.constructor,e):e}function o(e,t,n){Array.isArray(e)?void 0:a("1",n,e);var r=t[n];Array.isArray(r)?void 0:a("2",n,r)}function i(e,t){if("object"!=typeof t?a("3",v.join(", "),f):void 0,l.call(t,f))return 1!==Object.keys(t).length?a("4",f):void 0,t[f];var n=r(e);if(l.call(t,h)){var u=t[h];u&&"object"==typeof u?void 0:a("5",h,u),n&&"object"==typeof n?void 0:a("6",h,n),s(n,t[h])}l.call(t,c)&&(o(e,t,c),t[c].forEach(function(e){n.push(e)})),l.call(t,p)&&(o(e,t,p),t[p].forEach(function(e){n.unshift(e)})),l.call(t,d)&&(Array.isArray(e)?void 0:a("7",d,e),Array.isArray(t[d])?void 0:a("8",d,t[d]),t[d].forEach(function(e){Array.isArray(e)?void 0:a("8",d,t[d]),n.splice.apply(n,e)})),l.call(t,m)&&("function"!=typeof t[m]?a("9",m,t[m]):void 0,n=t[m](n));for(var y in t)g.hasOwnProperty(y)&&g[y]||(n[y]=i(e[y],t[y]));return n}var a=e(143),s=e(176),u=e(172),l=(e(168),{}.hasOwnProperty),c=u({$push:null}),p=u({$unshift:null}),d=u({$splice:null}),f=u({$set:null}),h=u({$merge:null}),m=u({$apply:null}),v=[c,p,d,f,h,m],g={};v.forEach(function(e){g[e]=!0}),t.exports=i},{143:143,168:168,172:172,176:176}],151:[function(e,t,n){"use strict";var r=(e(176),e(160)),o=(e(175),r);t.exports=o},{160:160,175:175,176:176}],152:[function(e,t,n){"use strict";function r(e,t){for(var n=e;n.parentNode;)n=n.parentNode;var r=n.querySelectorAll(t);return Array.prototype.indexOf.call(r,e)!==-1}var o=e(168),i={addClass:function(e,t){return/\s/.test(t)?o(!1):void 0,t&&(e.classList?e.classList.add(t):i.hasClass(e,t)||(e.className=e.className+" "+t)),e},removeClass:function(e,t){return/\s/.test(t)?o(!1):void 0,t&&(e.classList?e.classList.remove(t):i.hasClass(e,t)&&(e.className=e.className.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,""))),e},conditionClass:function(e,t,n){return(n?i.addClass:i.removeClass)(e,t)},hasClass:function(e,t){return/\s/.test(t)?o(!1):void 0,e.classList?!!t&&e.classList.contains(t):(" "+e.className+" ").indexOf(" "+t+" ")>-1},matchesSelector:function(e,t){var n=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector||function(t){return r(e,t)};return n.call(e,t)}};t.exports=i},{168:168}],153:[function(e,t,n){"use strict";var r=e(160),o={listen:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!1),{remove:function(){e.removeEventListener(t,n,!1)}}):e.attachEvent?(e.attachEvent("on"+t,n),{remove:function(){e.detachEvent("on"+t,n)}}):void 0},capture:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};t.exports=o},{160:160}],154:[function(e,t,n){"use strict";var r=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:r,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:r&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:r&&!!window.screen,isInWorker:!r};t.exports=o},{}],155:[function(e,t,n){"use strict";function r(e){return e.replace(o,function(e,t){return t.toUpperCase()})}var o=/-(.)/g;t.exports=r},{}],156:[function(e,t,n){"use strict";function r(e){return o(e.replace(i,"ms-"))}var o=e(155),i=/^-ms-/;t.exports=r},{155:155}],157:[function(e,t,n){"use strict";function r(e,t){return!(!e||!t)&&(e===t||!o(e)&&(o(t)?r(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}var o=e(170);t.exports=r},{170:170}],158:[function(e,t,n){"use strict";function r(e){var t=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?a(!1):void 0,"number"!=typeof t?a(!1):void 0,0===t||t-1 in e?void 0:a(!1),"function"==typeof e.callee?a(!1):void 0,e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(e){}for(var n=Array(t),r=0;r<t;r++)n[r]=e[r];return n}function o(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"length"in e&&!("setInterval"in e)&&"number"!=typeof e.nodeType&&(Array.isArray(e)||"callee"in e||"item"in e)}function i(e){return o(e)?Array.isArray(e)?e.slice():r(e):[e]}var a=e(168);t.exports=i},{168:168}],159:[function(e,t,n){"use strict";function r(e){var t=e.match(c);return t&&t[1].toLowerCase()}function o(e,t){var n=l;l?void 0:u(!1);var o=r(e),i=o&&s(o);if(i){n.innerHTML=i[1]+e+i[2];for(var c=i[0];c--;)n=n.lastChild}else n.innerHTML=e;var p=n.getElementsByTagName("script");p.length&&(t?void 0:u(!1),a(p).forEach(t));for(var d=Array.from(n.childNodes);n.lastChild;)n.removeChild(n.lastChild);return d}var i=e(154),a=e(158),s=e(164),u=e(168),l=i.canUseDOM?document.createElement("div"):null,c=/^\s*<(\w+)/;t.exports=o},{154:154,158:158,164:164,168:168}],160:[function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},t.exports=o},{}],161:[function(e,t,n){"use strict";var r={};t.exports=r},{}],162:[function(e,t,n){"use strict";function r(e){try{e.focus()}catch(e){}}t.exports=r},{}],163:[function(e,t,n){"use strict";function r(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}t.exports=r},{}],164:[function(e,t,n){"use strict";function r(e){return a?void 0:i(!1),d.hasOwnProperty(e)||(e="*"),s.hasOwnProperty(e)||("*"===e?a.innerHTML="<link />":a.innerHTML="<"+e+"></"+e+">",s[e]=!a.firstChild),s[e]?d[e]:null}var o=e(154),i=e(168),a=o.canUseDOM?document.createElement("div"):null,s={},u=[1,'<select multiple="true">',"</select>"],l=[1,"<table>","</table>"],c=[3,"<table><tbody><tr>","</tr></tbody></table>"],p=[1,'<svg xmlns="http://www.w3.org/2000/svg">',"</svg>"],d={"*":[1,"?<div>","</div>"],area:[1,"<map>","</map>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],legend:[1,"<fieldset>","</fieldset>"],param:[1,"<object>","</object>"],tr:[2,"<table><tbody>","</tbody></table>"],optgroup:u,option:u,caption:l,colgroup:l,tbody:l,tfoot:l,thead:l,td:c,th:c},f=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];f.forEach(function(e){d[e]=p,s[e]=!0}),t.exports=r},{154:154,168:168}],165:[function(e,t,n){"use strict";function r(e){return e===window?{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}:{x:e.scrollLeft,y:e.scrollTop}}t.exports=r},{}],166:[function(e,t,n){"use strict";function r(e){return e.replace(o,"-$1").toLowerCase()}var o=/([A-Z])/g;t.exports=r},{}],167:[function(e,t,n){"use strict";function r(e){return o(e).replace(i,"-ms-")}var o=e(166),i=/^ms-/;t.exports=r},{166:166}],168:[function(e,t,n){"use strict";function r(e,t,n,r,o,i,a,s){if(!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,o,i,a,s],c=0;u=new Error(t.replace(/%s/g,function(){return l[c++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}t.exports=r},{}],169:[function(e,t,n){"use strict";function r(e){return!(!e||!("function"==typeof Node?e instanceof Node:"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName))}t.exports=r},{}],170:[function(e,t,n){"use strict";function r(e){return o(e)&&3==e.nodeType}var o=e(169);t.exports=r},{169:169}],171:[function(e,t,n){"use strict";var r=e(168),o=function(e){var t,n={};e instanceof Object&&!Array.isArray(e)?void 0:r(!1);for(t in e)e.hasOwnProperty(t)&&(n[t]=t);return n};t.exports=o},{168:168}],172:[function(e,t,n){"use strict";var r=function(e){var t;for(t in e)if(e.hasOwnProperty(t))return t;return null};t.exports=r},{}],173:[function(e,t,n){"use strict";function r(e){var t={};return function(n){return t.hasOwnProperty(n)||(t[n]=e.call(this,n)),t[n]}}t.exports=r},{}],174:[function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function o(e,t){if(r(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),o=Object.keys(t);if(n.length!==o.length)return!1;for(var a=0;a<n.length;a++)if(!i.call(t,n[a])||!r(e[n[a]],t[n[a]]))return!1;return!0}var i=Object.prototype.hasOwnProperty;t.exports=o},{}],175:[function(e,t,n){"use strict";var r=e(160),o=r;t.exports=o},{160:160}],176:[function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function o(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==r.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}var i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;t.exports=o()?Object.assign:function(e,t){for(var n,o,s=r(e),u=1;u<arguments.length;u++){n=Object(arguments[u]);for(var l in n)i.call(n,l)&&(s[l]=n[l]);if(Object.getOwnPropertySymbols){o=Object.getOwnPropertySymbols(n);for(var c=0;c<o.length;c++)a.call(n,o[c])&&(s[o[c]]=n[o[c]])}}return s}},{}]},{},[100])(100)});
diff --git a/devtools/client/inspector/markup/test/lib_react_with_addons_15.4.1.js b/devtools/client/inspector/markup/test/lib_react_with_addons_15.4.1.js
new file mode 100644
index 0000000000..6236f98ae8
--- /dev/null
+++ b/devtools/client/inspector/markup/test/lib_react_with_addons_15.4.1.js
@@ -0,0 +1,5408 @@
+/**
+ * React (with addons) v15.4.1
+ */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.React = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw (f.code="MODULE_NOT_FOUND", f)}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(43);
+
+/**
+* Generate a mapping of standard vendor prefixes using the defined style property and event name.
+*
+* @param {string} styleProp
+* @param {string} eventName
+* @returns {object}
+*/
+function makePrefixMap(styleProp, eventName) {
+ var prefixes = {};
+
+ prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
+ prefixes['Webkit' + styleProp] = 'webkit' + eventName;
+ prefixes['Moz' + styleProp] = 'moz' + eventName;
+ prefixes['ms' + styleProp] = 'MS' + eventName;
+ prefixes['O' + styleProp] = 'o' + eventName.toLowerCase();
+
+ return prefixes;
+}
+
+/**
+* A list of event names to a configurable list of vendor prefixes.
+*/
+var vendorPrefixes = {
+ animationend: makePrefixMap('Animation', 'AnimationEnd'),
+ animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
+ animationstart: makePrefixMap('Animation', 'AnimationStart'),
+ transitionend: makePrefixMap('Transition', 'TransitionEnd')
+};
+
+/**
+* Event names that have already been detected and prefixed (if applicable).
+*/
+var prefixedEventNames = {};
+
+/**
+* Element to check for prefixes on.
+*/
+var style = {};
+
+/**
+* Bootstrap if a DOM exists.
+*/
+if (ExecutionEnvironment.canUseDOM) {
+ style = document.createElement('div').style;
+
+ // On some platforms, in particular some releases of Android 4.x,
+ // the un-prefixed "animation" and "transition" properties are defined on the
+ // style object but the events that fire will still be prefixed, so we need
+ // to check if the un-prefixed events are usable, and if not remove them from the map.
+ if (!('AnimationEvent' in window)) {
+   delete vendorPrefixes.animationend.animation;
+   delete vendorPrefixes.animationiteration.animation;
+   delete vendorPrefixes.animationstart.animation;
+ }
+
+ // Same as above
+ if (!('TransitionEvent' in window)) {
+   delete vendorPrefixes.transitionend.transition;
+ }
+}
+
+/**
+* Attempts to determine the correct vendor prefixed event name.
+*
+* @param {string} eventName
+* @returns {string}
+*/
+function getVendorPrefixedEventName(eventName) {
+ if (prefixedEventNames[eventName]) {
+   return prefixedEventNames[eventName];
+ } else if (!vendorPrefixes[eventName]) {
+   return eventName;
+ }
+
+ var prefixMap = vendorPrefixes[eventName];
+
+ for (var styleProp in prefixMap) {
+   if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
+     return prefixedEventNames[eventName] = prefixMap[styleProp];
+   }
+ }
+
+ return '';
+}
+
+module.exports = getVendorPrefixedEventName;
+},{"43":43}],2:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+/**
+* Escape and wrap key so it is safe to use as a reactid
+*
+* @param {string} key to be escaped.
+* @return {string} the escaped key.
+*/
+
+function escape(key) {
+ var escapeRegex = /[=:]/g;
+ var escaperLookup = {
+   '=': '=0',
+   ':': '=2'
+ };
+ var escapedString = ('' + key).replace(escapeRegex, function (match) {
+   return escaperLookup[match];
+ });
+
+ return '$' + escapedString;
+}
+
+/**
+* Unescape and unwrap key for human-readable display
+*
+* @param {string} key to unescape.
+* @return {string} the unescaped key.
+*/
+function unescape(key) {
+ var unescapeRegex = /(=0|=2)/g;
+ var unescaperLookup = {
+   '=0': '=',
+   '=2': ':'
+ };
+ var keySubstring = key[0] === '.' && key[1] === '$' ? key.substring(2) : key.substring(1);
+
+ return ('' + keySubstring).replace(unescapeRegex, function (match) {
+   return unescaperLookup[match];
+ });
+}
+
+var KeyEscapeUtils = {
+ escape: escape,
+ unescape: unescape
+};
+
+module.exports = KeyEscapeUtils;
+},{}],3:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactLink = _dereq_(20);
+var ReactStateSetters = _dereq_(26);
+
+/**
+* A simple mixin around ReactLink.forState().
+* See https://facebook.github.io/react/docs/two-way-binding-helpers.html
+*/
+var LinkedStateMixin = {
+ /**
+  * Create a ReactLink that's linked to part of this component's state. The
+  * ReactLink will have the current value of this.state[key] and will call
+  * setState() when a change is requested.
+  *
+  * @param {string} key state key to update.
+  * @return {ReactLink} ReactLink instance linking to the state.
+  */
+ linkState: function (key) {
+   return new ReactLink(this.state[key], ReactStateSetters.createStateKeySetter(this, key));
+ }
+};
+
+module.exports = LinkedStateMixin;
+},{"20":20,"26":26}],4:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(38);
+
+var invariant = _dereq_(46);
+
+/**
+* Static poolers. Several custom versions for each potential number of
+* arguments. A completely generic pooler is easy to implement, but would
+* require accessing the `arguments` object. In each of these, `this` refers to
+* the Class itself, not an instance. If any others are needed, simply add them
+* here, or in their own files.
+*/
+var oneArgumentPooler = function (copyFieldsFrom) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, copyFieldsFrom);
+   return instance;
+ } else {
+   return new Klass(copyFieldsFrom);
+ }
+};
+
+var twoArgumentPooler = function (a1, a2) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2);
+   return instance;
+ } else {
+   return new Klass(a1, a2);
+ }
+};
+
+var threeArgumentPooler = function (a1, a2, a3) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2, a3);
+   return instance;
+ } else {
+   return new Klass(a1, a2, a3);
+ }
+};
+
+var fourArgumentPooler = function (a1, a2, a3, a4) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2, a3, a4);
+   return instance;
+ } else {
+   return new Klass(a1, a2, a3, a4);
+ }
+};
+
+var fiveArgumentPooler = function (a1, a2, a3, a4, a5) {
+ var Klass = this;
+ if (Klass.instancePool.length) {
+   var instance = Klass.instancePool.pop();
+   Klass.call(instance, a1, a2, a3, a4, a5);
+   return instance;
+ } else {
+   return new Klass(a1, a2, a3, a4, a5);
+ }
+};
+
+var standardReleaser = function (instance) {
+ var Klass = this;
+ !(instance instanceof Klass) ? "development" !== 'production' ? invariant(false, 'Trying to release an instance into a pool of a different type.') : _prodInvariant('25') : void 0;
+ instance.destructor();
+ if (Klass.instancePool.length < Klass.poolSize) {
+   Klass.instancePool.push(instance);
+ }
+};
+
+var DEFAULT_POOL_SIZE = 10;
+var DEFAULT_POOLER = oneArgumentPooler;
+
+/**
+* Augments `CopyConstructor` to be a poolable class, augmenting only the class
+* itself (statically) not adding any prototypical fields. Any CopyConstructor
+* you give this may have a `poolSize` property, and will look for a
+* prototypical `destructor` on instances.
+*
+* @param {Function} CopyConstructor Constructor that can be used to reset.
+* @param {Function} pooler Customizable pooler.
+*/
+var addPoolingTo = function (CopyConstructor, pooler) {
+ // Casting as any so that flow ignores the actual implementation and trusts
+ // it to match the type we declared
+ var NewKlass = CopyConstructor;
+ NewKlass.instancePool = [];
+ NewKlass.getPooled = pooler || DEFAULT_POOLER;
+ if (!NewKlass.poolSize) {
+   NewKlass.poolSize = DEFAULT_POOL_SIZE;
+ }
+ NewKlass.release = standardReleaser;
+ return NewKlass;
+};
+
+var PooledClass = {
+ addPoolingTo: addPoolingTo,
+ oneArgumentPooler: oneArgumentPooler,
+ twoArgumentPooler: twoArgumentPooler,
+ threeArgumentPooler: threeArgumentPooler,
+ fourArgumentPooler: fourArgumentPooler,
+ fiveArgumentPooler: fiveArgumentPooler
+};
+
+module.exports = PooledClass;
+},{"38":38,"46":46}],5:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(49);
+
+var ReactChildren = _dereq_(9);
+var ReactComponent = _dereq_(11);
+var ReactPureComponent = _dereq_(25);
+var ReactClass = _dereq_(10);
+var ReactDOMFactories = _dereq_(15);
+var ReactElement = _dereq_(16);
+var ReactPropTypes = _dereq_(23);
+var ReactVersion = _dereq_(30);
+
+var onlyChild = _dereq_(37);
+var warning = _dereq_(48);
+
+var createElement = ReactElement.createElement;
+var createFactory = ReactElement.createFactory;
+var cloneElement = ReactElement.cloneElement;
+
+if ("development" !== 'production') {
+ var ReactElementValidator = _dereq_(18);
+ createElement = ReactElementValidator.createElement;
+ createFactory = ReactElementValidator.createFactory;
+ cloneElement = ReactElementValidator.cloneElement;
+}
+
+var __spread = _assign;
+
+if ("development" !== 'production') {
+ var warned = false;
+ __spread = function () {
+   "development" !== 'production' ? warning(warned, 'React.__spread is deprecated and should not be used. Use ' + 'Object.assign directly or another helper function with similar ' + 'semantics. You may be seeing this warning due to your compiler. ' + 'See https://fb.me/react-spread-deprecation for more details.') : void 0;
+   warned = true;
+   return _assign.apply(null, arguments);
+ };
+}
+
+var React = {
+
+ // Modern
+
+ Children: {
+   map: ReactChildren.map,
+   forEach: ReactChildren.forEach,
+   count: ReactChildren.count,
+   toArray: ReactChildren.toArray,
+   only: onlyChild
+ },
+
+ Component: ReactComponent,
+ PureComponent: ReactPureComponent,
+
+ createElement: createElement,
+ cloneElement: cloneElement,
+ isValidElement: ReactElement.isValidElement,
+
+ // Classic
+
+ PropTypes: ReactPropTypes,
+ createClass: ReactClass.createClass,
+ createFactory: createFactory,
+ createMixin: function (mixin) {
+   // Currently a noop. Will be used to validate and trace mixins.
+   return mixin;
+ },
+
+ // This looks DOM specific but these are actually isomorphic helpers
+ // since they are just generating DOM strings.
+ DOM: ReactDOMFactories,
+
+ version: ReactVersion,
+
+ // Deprecated hook for JSX spread, don't use this for anything.
+ __spread: __spread
+};
+
+module.exports = React;
+},{"10":10,"11":11,"15":15,"16":16,"18":18,"23":23,"25":25,"30":30,"37":37,"48":48,"49":49,"9":9}],6:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* globals ReactDOM */
+
+'use strict';
+
+exports.getReactDOM = function () {
+ return ReactDOM;
+};
+
+exports.getReactInstanceMap = function () {
+ return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactInstanceMap;
+};
+
+if ("development" !== 'production') {
+ exports.getReactPerf = function () {
+   return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;
+ };
+
+ exports.getReactTestUtils = function () {
+   return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactTestUtils;
+ };
+}
+},{}],7:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(49);
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var React = _dereq_(5);
+
+var ReactTransitionGroup = _dereq_(29);
+var ReactCSSTransitionGroupChild = _dereq_(8);
+
+function createTransitionTimeoutPropValidator(transitionType) {
+ var timeoutPropName = 'transition' + transitionType + 'Timeout';
+ var enabledPropName = 'transition' + transitionType;
+
+ return function (props) {
+   // If the transition is enabled
+   if (props[enabledPropName]) {
+     // If no timeout duration is provided
+     if (props[timeoutPropName] == null) {
+       return new Error(timeoutPropName + ' wasn\'t supplied to ReactCSSTransitionGroup: ' + 'this can cause unreliable animations and won\'t be supported in ' + 'a future version of React. See ' + 'https://fb.me/react-animation-transition-group-timeout for more ' + 'information.');
+
+       // If the duration isn't a number
+     } else if (typeof props[timeoutPropName] !== 'number') {
+       return new Error(timeoutPropName + ' must be a number (in milliseconds)');
+     }
+   }
+ };
+}
+
+/**
+* An easy way to perform CSS transitions and animations when a React component
+* enters or leaves the DOM.
+* See https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup
+*/
+
+var ReactCSSTransitionGroup = function (_React$Component) {
+ _inherits(ReactCSSTransitionGroup, _React$Component);
+
+ function ReactCSSTransitionGroup() {
+   var _temp, _this, _ret;
+
+   _classCallCheck(this, ReactCSSTransitionGroup);
+
+   for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+     args[_key] = arguments[_key];
+   }
+
+   return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this._wrapChild = function (child) {
+     // We need to provide this childFactory so that
+     // ReactCSSTransitionGroupChild can receive updates to name, enter, and
+     // leave while it is leaving.
+     return React.createElement(ReactCSSTransitionGroupChild, {
+       name: _this.props.transitionName,
+       appear: _this.props.transitionAppear,
+       enter: _this.props.transitionEnter,
+       leave: _this.props.transitionLeave,
+       appearTimeout: _this.props.transitionAppearTimeout,
+       enterTimeout: _this.props.transitionEnterTimeout,
+       leaveTimeout: _this.props.transitionLeaveTimeout
+     }, child);
+   }, _temp), _possibleConstructorReturn(_this, _ret);
+ }
+
+ ReactCSSTransitionGroup.prototype.render = function render() {
+   return React.createElement(ReactTransitionGroup, _assign({}, this.props, { childFactory: this._wrapChild }));
+ };
+
+ return ReactCSSTransitionGroup;
+}(React.Component);
+
+ReactCSSTransitionGroup.displayName = 'ReactCSSTransitionGroup';
+ReactCSSTransitionGroup.propTypes = {
+ transitionName: ReactCSSTransitionGroupChild.propTypes.name,
+
+ transitionAppear: React.PropTypes.bool,
+ transitionEnter: React.PropTypes.bool,
+ transitionLeave: React.PropTypes.bool,
+ transitionAppearTimeout: createTransitionTimeoutPropValidator('Appear'),
+ transitionEnterTimeout: createTransitionTimeoutPropValidator('Enter'),
+ transitionLeaveTimeout: createTransitionTimeoutPropValidator('Leave')
+};
+ReactCSSTransitionGroup.defaultProps = {
+ transitionAppear: false,
+ transitionEnter: true,
+ transitionLeave: true
+};
+
+
+module.exports = ReactCSSTransitionGroup;
+},{"29":29,"49":49,"5":5,"8":8}],8:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var React = _dereq_(5);
+var ReactAddonsDOMDependencies = _dereq_(6);
+
+var CSSCore = _dereq_(42);
+var ReactTransitionEvents = _dereq_(28);
+
+var onlyChild = _dereq_(37);
+
+var TICK = 17;
+
+var ReactCSSTransitionGroupChild = React.createClass({
+ displayName: 'ReactCSSTransitionGroupChild',
+
+ propTypes: {
+   name: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.shape({
+     enter: React.PropTypes.string,
+     leave: React.PropTypes.string,
+     active: React.PropTypes.string
+   }), React.PropTypes.shape({
+     enter: React.PropTypes.string,
+     enterActive: React.PropTypes.string,
+     leave: React.PropTypes.string,
+     leaveActive: React.PropTypes.string,
+     appear: React.PropTypes.string,
+     appearActive: React.PropTypes.string
+   })]).isRequired,
+
+   // Once we require timeouts to be specified, we can remove the
+   // boolean flags (appear etc.) and just accept a number
+   // or a bool for the timeout flags (appearTimeout etc.)
+   appear: React.PropTypes.bool,
+   enter: React.PropTypes.bool,
+   leave: React.PropTypes.bool,
+   appearTimeout: React.PropTypes.number,
+   enterTimeout: React.PropTypes.number,
+   leaveTimeout: React.PropTypes.number
+ },
+
+ transition: function (animationType, finishCallback, userSpecifiedDelay) {
+   var node = ReactAddonsDOMDependencies.getReactDOM().findDOMNode(this);
+
+   if (!node) {
+     if (finishCallback) {
+       finishCallback();
+     }
+     return;
+   }
+
+   var className = this.props.name[animationType] || this.props.name + '-' + animationType;
+   var activeClassName = this.props.name[animationType + 'Active'] || className + '-active';
+   var timeout = null;
+
+   var endListener = function (e) {
+     if (e && e.target !== node) {
+       return;
+     }
+
+     clearTimeout(timeout);
+
+     CSSCore.removeClass(node, className);
+     CSSCore.removeClass(node, activeClassName);
+
+     ReactTransitionEvents.removeEndEventListener(node, endListener);
+
+     // Usually this optional callback is used for informing an owner of
+     // a leave animation and telling it to remove the child.
+     if (finishCallback) {
+       finishCallback();
+     }
+   };
+
+   CSSCore.addClass(node, className);
+
+   // Need to do this to actually trigger a transition.
+   this.queueClassAndNode(activeClassName, node);
+
+   // If the user specified a timeout delay.
+   if (userSpecifiedDelay) {
+     // Clean-up the animation after the specified delay
+     timeout = setTimeout(endListener, userSpecifiedDelay);
+     this.transitionTimeouts.push(timeout);
+   } else {
+     // DEPRECATED: this listener will be removed in a future version of react
+     ReactTransitionEvents.addEndEventListener(node, endListener);
+   }
+ },
+
+ queueClassAndNode: function (className, node) {
+   this.classNameAndNodeQueue.push({
+     className: className,
+     node: node
+   });
+
+   if (!this.timeout) {
+     this.timeout = setTimeout(this.flushClassNameAndNodeQueue, TICK);
+   }
+ },
+
+ flushClassNameAndNodeQueue: function () {
+   if (this.isMounted()) {
+     this.classNameAndNodeQueue.forEach(function (obj) {
+       CSSCore.addClass(obj.node, obj.className);
+     });
+   }
+   this.classNameAndNodeQueue.length = 0;
+   this.timeout = null;
+ },
+
+ componentWillMount: function () {
+   this.classNameAndNodeQueue = [];
+   this.transitionTimeouts = [];
+ },
+
+ componentWillUnmount: function () {
+   if (this.timeout) {
+     clearTimeout(this.timeout);
+   }
+   this.transitionTimeouts.forEach(function (timeout) {
+     clearTimeout(timeout);
+   });
+
+   this.classNameAndNodeQueue.length = 0;
+ },
+
+ componentWillAppear: function (done) {
+   if (this.props.appear) {
+     this.transition('appear', done, this.props.appearTimeout);
+   } else {
+     done();
+   }
+ },
+
+ componentWillEnter: function (done) {
+   if (this.props.enter) {
+     this.transition('enter', done, this.props.enterTimeout);
+   } else {
+     done();
+   }
+ },
+
+ componentWillLeave: function (done) {
+   if (this.props.leave) {
+     this.transition('leave', done, this.props.leaveTimeout);
+   } else {
+     done();
+   }
+ },
+
+ render: function () {
+   return onlyChild(this.props.children);
+ }
+});
+
+module.exports = ReactCSSTransitionGroupChild;
+},{"28":28,"37":37,"42":42,"5":5,"6":6}],9:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var PooledClass = _dereq_(4);
+var ReactElement = _dereq_(16);
+
+var emptyFunction = _dereq_(44);
+var traverseAllChildren = _dereq_(40);
+
+var twoArgumentPooler = PooledClass.twoArgumentPooler;
+var fourArgumentPooler = PooledClass.fourArgumentPooler;
+
+var userProvidedKeyEscapeRegex = /\/+/g;
+function escapeUserProvidedKey(text) {
+ return ('' + text).replace(userProvidedKeyEscapeRegex, '$&/');
+}
+
+/**
+* PooledClass representing the bookkeeping associated with performing a child
+* traversal. Allows avoiding binding callbacks.
+*
+* @constructor ForEachBookKeeping
+* @param {!function} forEachFunction Function to perform traversal with.
+* @param {?*} forEachContext Context to perform context with.
+*/
+function ForEachBookKeeping(forEachFunction, forEachContext) {
+ this.func = forEachFunction;
+ this.context = forEachContext;
+ this.count = 0;
+}
+ForEachBookKeeping.prototype.destructor = function () {
+ this.func = null;
+ this.context = null;
+ this.count = 0;
+};
+PooledClass.addPoolingTo(ForEachBookKeeping, twoArgumentPooler);
+
+function forEachSingleChild(bookKeeping, child, name) {
+ var func = bookKeeping.func,
+     context = bookKeeping.context;
+
+ func.call(context, child, bookKeeping.count++);
+}
+
+/**
+* Iterates through children that are typically specified as `props.children`.
+*
+* See https://facebook.github.io/react/docs/top-level-api.html#react.children.foreach
+*
+* The provided forEachFunc(child, index) will be called for each
+* leaf child.
+*
+* @param {?*} children Children tree container.
+* @param {function(*, int)} forEachFunc
+* @param {*} forEachContext Context for forEachContext.
+*/
+function forEachChildren(children, forEachFunc, forEachContext) {
+ if (children == null) {
+   return children;
+ }
+ var traverseContext = ForEachBookKeeping.getPooled(forEachFunc, forEachContext);
+ traverseAllChildren(children, forEachSingleChild, traverseContext);
+ ForEachBookKeeping.release(traverseContext);
+}
+
+/**
+* PooledClass representing the bookkeeping associated with performing a child
+* mapping. Allows avoiding binding callbacks.
+*
+* @constructor MapBookKeeping
+* @param {!*} mapResult Object containing the ordered map of results.
+* @param {!function} mapFunction Function to perform mapping with.
+* @param {?*} mapContext Context to perform mapping with.
+*/
+function MapBookKeeping(mapResult, keyPrefix, mapFunction, mapContext) {
+ this.result = mapResult;
+ this.keyPrefix = keyPrefix;
+ this.func = mapFunction;
+ this.context = mapContext;
+ this.count = 0;
+}
+MapBookKeeping.prototype.destructor = function () {
+ this.result = null;
+ this.keyPrefix = null;
+ this.func = null;
+ this.context = null;
+ this.count = 0;
+};
+PooledClass.addPoolingTo(MapBookKeeping, fourArgumentPooler);
+
+function mapSingleChildIntoContext(bookKeeping, child, childKey) {
+ var result = bookKeeping.result,
+     keyPrefix = bookKeeping.keyPrefix,
+     func = bookKeeping.func,
+     context = bookKeeping.context;
+
+
+ var mappedChild = func.call(context, child, bookKeeping.count++);
+ if (Array.isArray(mappedChild)) {
+   mapIntoWithKeyPrefixInternal(mappedChild, result, childKey, emptyFunction.thatReturnsArgument);
+ } else if (mappedChild != null) {
+   if (ReactElement.isValidElement(mappedChild)) {
+     mappedChild = ReactElement.cloneAndReplaceKey(mappedChild,
+     // Keep both the (mapped) and old keys if they differ, just as
+     // traverseAllChildren used to do for objects as children
+     keyPrefix + (mappedChild.key && (!child || child.key !== mappedChild.key) ? escapeUserProvidedKey(mappedChild.key) + '/' : '') + childKey);
+   }
+   result.push(mappedChild);
+ }
+}
+
+function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {
+ var escapedPrefix = '';
+ if (prefix != null) {
+   escapedPrefix = escapeUserProvidedKey(prefix) + '/';
+ }
+ var traverseContext = MapBookKeeping.getPooled(array, escapedPrefix, func, context);
+ traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);
+ MapBookKeeping.release(traverseContext);
+}
+
+/**
+* Maps children that are typically specified as `props.children`.
+*
+* See https://facebook.github.io/react/docs/top-level-api.html#react.children.map
+*
+* The provided mapFunction(child, key, index) will be called for each
+* leaf child.
+*
+* @param {?*} children Children tree container.
+* @param {function(*, int)} func The map function.
+* @param {*} context Context for mapFunction.
+* @return {object} Object containing the ordered map of results.
+*/
+function mapChildren(children, func, context) {
+ if (children == null) {
+   return children;
+ }
+ var result = [];
+ mapIntoWithKeyPrefixInternal(children, result, null, func, context);
+ return result;
+}
+
+function forEachSingleChildDummy(traverseContext, child, name) {
+ return null;
+}
+
+/**
+* Count the number of children that are typically specified as
+* `props.children`.
+*
+* See https://facebook.github.io/react/docs/top-level-api.html#react.children.count
+*
+* @param {?*} children Children tree container.
+* @return {number} The number of children.
+*/
+function countChildren(children, context) {
+ return traverseAllChildren(children, forEachSingleChildDummy, null);
+}
+
+/**
+* Flatten a children object (typically specified as `props.children`) and
+* return an array with appropriately re-keyed children.
+*
+* See https://facebook.github.io/react/docs/top-level-api.html#react.children.toarray
+*/
+function toArray(children) {
+ var result = [];
+ mapIntoWithKeyPrefixInternal(children, result, null, emptyFunction.thatReturnsArgument);
+ return result;
+}
+
+var ReactChildren = {
+ forEach: forEachChildren,
+ map: mapChildren,
+ mapIntoWithKeyPrefixInternal: mapIntoWithKeyPrefixInternal,
+ count: countChildren,
+ toArray: toArray
+};
+
+module.exports = ReactChildren;
+},{"16":16,"4":4,"40":40,"44":44}],10:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(38),
+   _assign = _dereq_(49);
+
+var ReactComponent = _dereq_(11);
+var ReactElement = _dereq_(16);
+var ReactPropTypeLocationNames = _dereq_(22);
+var ReactNoopUpdateQueue = _dereq_(21);
+
+var emptyObject = _dereq_(45);
+var invariant = _dereq_(46);
+var warning = _dereq_(48);
+
+var MIXINS_KEY = 'mixins';
+
+// Helper function to allow the creation of anonymous functions which do not
+// have .name set to the name of the variable being assigned to.
+function identity(fn) {
+ return fn;
+}
+
+/**
+* Policies that describe methods in `ReactClassInterface`.
+*/
+
+
+var injectedMixins = [];
+
+/**
+* Composite components are higher-level components that compose other composite
+* or host components.
+*
+* To create a new type of `ReactClass`, pass a specification of
+* your new class to `React.createClass`. The only requirement of your class
+* specification is that you implement a `render` method.
+*
+*   var MyComponent = React.createClass({
+*     render: function() {
+*       return <div>Hello World</div>;
+*     }
+*   });
+*
+* The class specification supports a specific protocol of methods that have
+* special meaning (e.g. `render`). See `ReactClassInterface` for
+* more the comprehensive protocol. Any other properties and methods in the
+* class specification will be available on the prototype.
+*
+* @interface ReactClassInterface
+* @internal
+*/
+var ReactClassInterface = {
+
+ /**
+  * An array of Mixin objects to include when defining your component.
+  *
+  * @type {array}
+  * @optional
+  */
+ mixins: 'DEFINE_MANY',
+
+ /**
+  * An object containing properties and methods that should be defined on
+  * the component's constructor instead of its prototype (static methods).
+  *
+  * @type {object}
+  * @optional
+  */
+ statics: 'DEFINE_MANY',
+
+ /**
+  * Definition of prop types for this component.
+  *
+  * @type {object}
+  * @optional
+  */
+ propTypes: 'DEFINE_MANY',
+
+ /**
+  * Definition of context types for this component.
+  *
+  * @type {object}
+  * @optional
+  */
+ contextTypes: 'DEFINE_MANY',
+
+ /**
+  * Definition of context types this component sets for its children.
+  *
+  * @type {object}
+  * @optional
+  */
+ childContextTypes: 'DEFINE_MANY',
+
+ // ==== Definition methods ====
+
+ /**
+  * Invoked when the component is mounted. Values in the mapping will be set on
+  * `this.props` if that prop is not specified (i.e. using an `in` check).
+  *
+  * This method is invoked before `getInitialState` and therefore cannot rely
+  * on `this.state` or use `this.setState`.
+  *
+  * @return {object}
+  * @optional
+  */
+ getDefaultProps: 'DEFINE_MANY_MERGED',
+
+ /**
+  * Invoked once before the component is mounted. The return value will be used
+  * as the initial value of `this.state`.
+  *
+  *   getInitialState: function() {
+  *     return {
+  *       isOn: false,
+  *       fooBaz: new BazFoo()
+  *     }
+  *   }
+  *
+  * @return {object}
+  * @optional
+  */
+ getInitialState: 'DEFINE_MANY_MERGED',
+
+ /**
+  * @return {object}
+  * @optional
+  */
+ getChildContext: 'DEFINE_MANY_MERGED',
+
+ /**
+  * Uses props from `this.props` and state from `this.state` to render the
+  * structure of the component.
+  *
+  * No guarantees are made about when or how often this method is invoked, so
+  * it must not have side effects.
+  *
+  *   render: function() {
+  *     var name = this.props.name;
+  *     return <div>Hello, {name}!</div>;
+  *   }
+  *
+  * @return {ReactComponent}
+  * @nosideeffects
+  * @required
+  */
+ render: 'DEFINE_ONCE',
+
+ // ==== Delegate methods ====
+
+ /**
+  * Invoked when the component is initially created and about to be mounted.
+  * This may have side effects, but any external subscriptions or data created
+  * by this method must be cleaned up in `componentWillUnmount`.
+  *
+  * @optional
+  */
+ componentWillMount: 'DEFINE_MANY',
+
+ /**
+  * Invoked when the component has been mounted and has a DOM representation.
+  * However, there is no guarantee that the DOM node is in the document.
+  *
+  * Use this as an opportunity to operate on the DOM when the component has
+  * been mounted (initialized and rendered) for the first time.
+  *
+  * @param {DOMElement} rootNode DOM element representing the component.
+  * @optional
+  */
+ componentDidMount: 'DEFINE_MANY',
+
+ /**
+  * Invoked before the component receives new props.
+  *
+  * Use this as an opportunity to react to a prop transition by updating the
+  * state using `this.setState`. Current props are accessed via `this.props`.
+  *
+  *   componentWillReceiveProps: function(nextProps, nextContext) {
+  *     this.setState({
+  *       likesIncreasing: nextProps.likeCount > this.props.likeCount
+  *     });
+  *   }
+  *
+  * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
+  * transition may cause a state change, but the opposite is not true. If you
+  * need it, you are probably looking for `componentWillUpdate`.
+  *
+  * @param {object} nextProps
+  * @optional
+  */
+ componentWillReceiveProps: 'DEFINE_MANY',
+
+ /**
+  * Invoked while deciding if the component should be updated as a result of
+  * receiving new props, state and/or context.
+  *
+  * Use this as an opportunity to `return false` when you're certain that the
+  * transition to the new props/state/context will not require a component
+  * update.
+  *
+  *   shouldComponentUpdate: function(nextProps, nextState, nextContext) {
+  *     return !equal(nextProps, this.props) ||
+  *       !equal(nextState, this.state) ||
+  *       !equal(nextContext, this.context);
+  *   }
+  *
+  * @param {object} nextProps
+  * @param {?object} nextState
+  * @param {?object} nextContext
+  * @return {boolean} True if the component should update.
+  * @optional
+  */
+ shouldComponentUpdate: 'DEFINE_ONCE',
+
+ /**
+  * Invoked when the component is about to update due to a transition from
+  * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
+  * and `nextContext`.
+  *
+  * Use this as an opportunity to perform preparation before an update occurs.
+  *
+  * NOTE: You **cannot** use `this.setState()` in this method.
+  *
+  * @param {object} nextProps
+  * @param {?object} nextState
+  * @param {?object} nextContext
+  * @param {ReactReconcileTransaction} transaction
+  * @optional
+  */
+ componentWillUpdate: 'DEFINE_MANY',
+
+ /**
+  * Invoked when the component's DOM representation has been updated.
+  *
+  * Use this as an opportunity to operate on the DOM when the component has
+  * been updated.
+  *
+  * @param {object} prevProps
+  * @param {?object} prevState
+  * @param {?object} prevContext
+  * @param {DOMElement} rootNode DOM element representing the component.
+  * @optional
+  */
+ componentDidUpdate: 'DEFINE_MANY',
+
+ /**
+  * Invoked when the component is about to be removed from its parent and have
+  * its DOM representation destroyed.
+  *
+  * Use this as an opportunity to deallocate any external resources.
+  *
+  * NOTE: There is no `componentDidUnmount` since your component will have been
+  * destroyed by that point.
+  *
+  * @optional
+  */
+ componentWillUnmount: 'DEFINE_MANY',
+
+ // ==== Advanced methods ====
+
+ /**
+  * Updates the component's currently mounted DOM representation.
+  *
+  * By default, this implements React's rendering and reconciliation algorithm.
+  * Sophisticated clients may wish to override this.
+  *
+  * @param {ReactReconcileTransaction} transaction
+  * @internal
+  * @overridable
+  */
+ updateComponent: 'OVERRIDE_BASE'
+
+};
+
+/**
+* Mapping from class specification keys to special processing functions.
+*
+* Although these are declared like instance properties in the specification
+* when defining classes using `React.createClass`, they are actually static
+* and are accessible on the constructor instead of the prototype. Despite
+* being static, they must be defined outside of the "statics" key under
+* which all other static methods are defined.
+*/
+var RESERVED_SPEC_KEYS = {
+ displayName: function (Constructor, displayName) {
+   Constructor.displayName = displayName;
+ },
+ mixins: function (Constructor, mixins) {
+   if (mixins) {
+     for (var i = 0; i < mixins.length; i++) {
+       mixSpecIntoComponent(Constructor, mixins[i]);
+     }
+   }
+ },
+ childContextTypes: function (Constructor, childContextTypes) {
+   if ("development" !== 'production') {
+     validateTypeDef(Constructor, childContextTypes, 'childContext');
+   }
+   Constructor.childContextTypes = _assign({}, Constructor.childContextTypes, childContextTypes);
+ },
+ contextTypes: function (Constructor, contextTypes) {
+   if ("development" !== 'production') {
+     validateTypeDef(Constructor, contextTypes, 'context');
+   }
+   Constructor.contextTypes = _assign({}, Constructor.contextTypes, contextTypes);
+ },
+ /**
+  * Special case getDefaultProps which should move into statics but requires
+  * automatic merging.
+  */
+ getDefaultProps: function (Constructor, getDefaultProps) {
+   if (Constructor.getDefaultProps) {
+     Constructor.getDefaultProps = createMergedResultFunction(Constructor.getDefaultProps, getDefaultProps);
+   } else {
+     Constructor.getDefaultProps = getDefaultProps;
+   }
+ },
+ propTypes: function (Constructor, propTypes) {
+   if ("development" !== 'production') {
+     validateTypeDef(Constructor, propTypes, 'prop');
+   }
+   Constructor.propTypes = _assign({}, Constructor.propTypes, propTypes);
+ },
+ statics: function (Constructor, statics) {
+   mixStaticSpecIntoComponent(Constructor, statics);
+ },
+ autobind: function () {} };
+
+function validateTypeDef(Constructor, typeDef, location) {
+ for (var propName in typeDef) {
+   if (typeDef.hasOwnProperty(propName)) {
+     // use a warning instead of an invariant so components
+     // don't show up in prod but only in __DEV__
+     "development" !== 'production' ? warning(typeof typeDef[propName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', Constructor.displayName || 'ReactClass', ReactPropTypeLocationNames[location], propName) : void 0;
+   }
+ }
+}
+
+function validateMethodOverride(isAlreadyDefined, name) {
+ var specPolicy = ReactClassInterface.hasOwnProperty(name) ? ReactClassInterface[name] : null;
+
+ // Disallow overriding of base class methods unless explicitly allowed.
+ if (ReactClassMixin.hasOwnProperty(name)) {
+   !(specPolicy === 'OVERRIDE_BASE') ? "development" !== 'production' ? invariant(false, 'ReactClassInterface: You are attempting to override `%s` from your class specification. Ensure that your method names do not overlap with React methods.', name) : _prodInvariant('73', name) : void 0;
+ }
+
+ // Disallow defining methods more than once unless explicitly allowed.
+ if (isAlreadyDefined) {
+   !(specPolicy === 'DEFINE_MANY' || specPolicy === 'DEFINE_MANY_MERGED') ? "development" !== 'production' ? invariant(false, 'ReactClassInterface: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.', name) : _prodInvariant('74', name) : void 0;
+ }
+}
+
+/**
+* Mixin helper which handles policy validation and reserved
+* specification keys when building React classes.
+*/
+function mixSpecIntoComponent(Constructor, spec) {
+ if (!spec) {
+   if ("development" !== 'production') {
+     var typeofSpec = typeof spec;
+     var isMixinValid = typeofSpec === 'object' && spec !== null;
+
+     "development" !== 'production' ? warning(isMixinValid, '%s: You\'re attempting to include a mixin that is either null ' + 'or not an object. Check the mixins included by the component, ' + 'as well as any mixins they include themselves. ' + 'Expected object but got %s.', Constructor.displayName || 'ReactClass', spec === null ? null : typeofSpec) : void 0;
+   }
+
+   return;
+ }
+
+ !(typeof spec !== 'function') ? "development" !== 'production' ? invariant(false, 'ReactClass: You\'re attempting to use a component class or function as a mixin. Instead, just use a regular object.') : _prodInvariant('75') : void 0;
+ !!ReactElement.isValidElement(spec) ? "development" !== 'production' ? invariant(false, 'ReactClass: You\'re attempting to use a component as a mixin. Instead, just use a regular object.') : _prodInvariant('76') : void 0;
+
+ var proto = Constructor.prototype;
+ var autoBindPairs = proto.__reactAutoBindPairs;
+
+ // By handling mixins before any other properties, we ensure the same
+ // chaining order is applied to methods with DEFINE_MANY policy, whether
+ // mixins are listed before or after these methods in the spec.
+ if (spec.hasOwnProperty(MIXINS_KEY)) {
+   RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
+ }
+
+ for (var name in spec) {
+   if (!spec.hasOwnProperty(name)) {
+     continue;
+   }
+
+   if (name === MIXINS_KEY) {
+     // We have already handled mixins in a special case above.
+     continue;
+   }
+
+   var property = spec[name];
+   var isAlreadyDefined = proto.hasOwnProperty(name);
+   validateMethodOverride(isAlreadyDefined, name);
+
+   if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
+     RESERVED_SPEC_KEYS[name](Constructor, property);
+   } else {
+     // Setup methods on prototype:
+     // The following member methods should not be automatically bound:
+     // 1. Expected ReactClass methods (in the "interface").
+     // 2. Overridden methods (that were mixed in).
+     var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);
+     var isFunction = typeof property === 'function';
+     var shouldAutoBind = isFunction && !isReactClassMethod && !isAlreadyDefined && spec.autobind !== false;
+
+     if (shouldAutoBind) {
+       autoBindPairs.push(name, property);
+       proto[name] = property;
+     } else {
+       if (isAlreadyDefined) {
+         var specPolicy = ReactClassInterface[name];
+
+         // These cases should already be caught by validateMethodOverride.
+         !(isReactClassMethod && (specPolicy === 'DEFINE_MANY_MERGED' || specPolicy === 'DEFINE_MANY')) ? "development" !== 'production' ? invariant(false, 'ReactClass: Unexpected spec policy %s for key %s when mixing in component specs.', specPolicy, name) : _prodInvariant('77', specPolicy, name) : void 0;
+
+         // For methods which are defined more than once, call the existing
+         // methods before calling the new property, merging if appropriate.
+         if (specPolicy === 'DEFINE_MANY_MERGED') {
+           proto[name] = createMergedResultFunction(proto[name], property);
+         } else if (specPolicy === 'DEFINE_MANY') {
+           proto[name] = createChainedFunction(proto[name], property);
+         }
+       } else {
+         proto[name] = property;
+         if ("development" !== 'production') {
+           // Add verbose displayName to the function, which helps when looking
+           // at profiling tools.
+           if (typeof property === 'function' && spec.displayName) {
+             proto[name].displayName = spec.displayName + '_' + name;
+           }
+         }
+       }
+     }
+   }
+ }
+}
+
+function mixStaticSpecIntoComponent(Constructor, statics) {
+ if (!statics) {
+   return;
+ }
+ for (var name in statics) {
+   var property = statics[name];
+   if (!statics.hasOwnProperty(name)) {
+     continue;
+   }
+
+   var isReserved = name in RESERVED_SPEC_KEYS;
+   !!isReserved ? "development" !== 'production' ? invariant(false, 'ReactClass: You are attempting to define a reserved property, `%s`, that shouldn\'t be on the "statics" key. Define it as an instance property instead; it will still be accessible on the constructor.', name) : _prodInvariant('78', name) : void 0;
+
+   var isInherited = name in Constructor;
+   !!isInherited ? "development" !== 'production' ? invariant(false, 'ReactClass: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.', name) : _prodInvariant('79', name) : void 0;
+   Constructor[name] = property;
+ }
+}
+
+/**
+* Merge two objects, but throw if both contain the same key.
+*
+* @param {object} one The first object, which is mutated.
+* @param {object} two The second object
+* @return {object} one after it has been mutated to contain everything in two.
+*/
+function mergeIntoWithNoDuplicateKeys(one, two) {
+ !(one && two && typeof one === 'object' && typeof two === 'object') ? "development" !== 'production' ? invariant(false, 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.') : _prodInvariant('80') : void 0;
+
+ for (var key in two) {
+   if (two.hasOwnProperty(key)) {
+     !(one[key] === undefined) ? "development" !== 'production' ? invariant(false, 'mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `%s`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.', key) : _prodInvariant('81', key) : void 0;
+     one[key] = two[key];
+   }
+ }
+ return one;
+}
+
+/**
+* Creates a function that invokes two functions and merges their return values.
+*
+* @param {function} one Function to invoke first.
+* @param {function} two Function to invoke second.
+* @return {function} Function that invokes the two argument functions.
+* @private
+*/
+function createMergedResultFunction(one, two) {
+ return function mergedResult() {
+   var a = one.apply(this, arguments);
+   var b = two.apply(this, arguments);
+   if (a == null) {
+     return b;
+   } else if (b == null) {
+     return a;
+   }
+   var c = {};
+   mergeIntoWithNoDuplicateKeys(c, a);
+   mergeIntoWithNoDuplicateKeys(c, b);
+   return c;
+ };
+}
+
+/**
+* Creates a function that invokes two functions and ignores their return vales.
+*
+* @param {function} one Function to invoke first.
+* @param {function} two Function to invoke second.
+* @return {function} Function that invokes the two argument functions.
+* @private
+*/
+function createChainedFunction(one, two) {
+ return function chainedFunction() {
+   one.apply(this, arguments);
+   two.apply(this, arguments);
+ };
+}
+
+/**
+* Binds a method to the component.
+*
+* @param {object} component Component whose method is going to be bound.
+* @param {function} method Method to be bound.
+* @return {function} The bound method.
+*/
+function bindAutoBindMethod(component, method) {
+ var boundMethod = method.bind(component);
+ if ("development" !== 'production') {
+   boundMethod.__reactBoundContext = component;
+   boundMethod.__reactBoundMethod = method;
+   boundMethod.__reactBoundArguments = null;
+   var componentName = component.constructor.displayName;
+   var _bind = boundMethod.bind;
+   boundMethod.bind = function (newThis) {
+     for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+       args[_key - 1] = arguments[_key];
+     }
+
+     // User is trying to bind() an autobound method; we effectively will
+     // ignore the value of "this" that the user is trying to use, so
+     // let's warn.
+     if (newThis !== component && newThis !== null) {
+       "development" !== 'production' ? warning(false, 'bind(): React component methods may only be bound to the ' + 'component instance. See %s', componentName) : void 0;
+     } else if (!args.length) {
+       "development" !== 'production' ? warning(false, 'bind(): You are binding a component method to the component. ' + 'React does this for you automatically in a high-performance ' + 'way, so you can safely remove this call. See %s', componentName) : void 0;
+       return boundMethod;
+     }
+     var reboundMethod = _bind.apply(boundMethod, arguments);
+     reboundMethod.__reactBoundContext = component;
+     reboundMethod.__reactBoundMethod = method;
+     reboundMethod.__reactBoundArguments = args;
+     return reboundMethod;
+   };
+ }
+ return boundMethod;
+}
+
+/**
+* Binds all auto-bound methods in a component.
+*
+* @param {object} component Component whose method is going to be bound.
+*/
+function bindAutoBindMethods(component) {
+ var pairs = component.__reactAutoBindPairs;
+ for (var i = 0; i < pairs.length; i += 2) {
+   var autoBindKey = pairs[i];
+   var method = pairs[i + 1];
+   component[autoBindKey] = bindAutoBindMethod(component, method);
+ }
+}
+
+/**
+* Add more to the ReactClass base class. These are all legacy features and
+* therefore not already part of the modern ReactComponent.
+*/
+var ReactClassMixin = {
+
+ /**
+  * TODO: This will be deprecated because state should always keep a consistent
+  * type signature and the only use case for this, is to avoid that.
+  */
+ replaceState: function (newState, callback) {
+   this.updater.enqueueReplaceState(this, newState);
+   if (callback) {
+     this.updater.enqueueCallback(this, callback, 'replaceState');
+   }
+ },
+
+ /**
+  * Checks whether or not this composite component is mounted.
+  * @return {boolean} True if mounted, false otherwise.
+  * @protected
+  * @final
+  */
+ isMounted: function () {
+   return this.updater.isMounted(this);
+ }
+};
+
+var ReactClassComponent = function () {};
+_assign(ReactClassComponent.prototype, ReactComponent.prototype, ReactClassMixin);
+
+/**
+* Module for creating composite components.
+*
+* @class ReactClass
+*/
+var ReactClass = {
+
+ /**
+  * Creates a composite component class given a class specification.
+  * See https://facebook.github.io/react/docs/top-level-api.html#react.createclass
+  *
+  * @param {object} spec Class specification (which must define `render`).
+  * @return {function} Component constructor function.
+  * @public
+  */
+ createClass: function (spec) {
+   // To keep our warnings more understandable, we'll use a little hack here to
+   // ensure that Constructor.name !== 'Constructor'. This makes sure we don't
+   // unnecessarily identify a class without displayName as 'Constructor'.
+   var Constructor = identity(function (props, context, updater) {
+     // This constructor gets overridden by mocks. The argument is used
+     // by mocks to assert on what gets mounted.
+
+     if ("development" !== 'production') {
+       "development" !== 'production' ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: https://fb.me/react-legacyfactory') : void 0;
+     }
+
+     // Wire up auto-binding
+     if (this.__reactAutoBindPairs.length) {
+       bindAutoBindMethods(this);
+     }
+
+     this.props = props;
+     this.context = context;
+     this.refs = emptyObject;
+     this.updater = updater || ReactNoopUpdateQueue;
+
+     this.state = null;
+
+     // ReactClasses doesn't have constructors. Instead, they use the
+     // getInitialState and componentWillMount methods for initialization.
+
+     var initialState = this.getInitialState ? this.getInitialState() : null;
+     if ("development" !== 'production') {
+       // We allow auto-mocks to proceed as if they're returning null.
+       if (initialState === undefined && this.getInitialState._isMockFunction) {
+         // This is probably bad practice. Consider warning here and
+         // deprecating this convenience.
+         initialState = null;
+       }
+     }
+     !(typeof initialState === 'object' && !Array.isArray(initialState)) ? "development" !== 'production' ? invariant(false, '%s.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent') : _prodInvariant('82', Constructor.displayName || 'ReactCompositeComponent') : void 0;
+
+     this.state = initialState;
+   });
+   Constructor.prototype = new ReactClassComponent();
+   Constructor.prototype.constructor = Constructor;
+   Constructor.prototype.__reactAutoBindPairs = [];
+
+   injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));
+
+   mixSpecIntoComponent(Constructor, spec);
+
+   // Initialize the defaultProps property after all mixins have been merged.
+   if (Constructor.getDefaultProps) {
+     Constructor.defaultProps = Constructor.getDefaultProps();
+   }
+
+   if ("development" !== 'production') {
+     // This is a tag to indicate that the use of these method names is ok,
+     // since it's used with createClass. If it's not, then it's likely a
+     // mistake so we'll warn you to use the static property, property
+     // initializer or constructor respectively.
+     if (Constructor.getDefaultProps) {
+       Constructor.getDefaultProps.isReactClassApproved = {};
+     }
+     if (Constructor.prototype.getInitialState) {
+       Constructor.prototype.getInitialState.isReactClassApproved = {};
+     }
+   }
+
+   !Constructor.prototype.render ? "development" !== 'production' ? invariant(false, 'createClass(...): Class specification must implement a `render` method.') : _prodInvariant('83') : void 0;
+
+   if ("development" !== 'production') {
+     "development" !== 'production' ? warning(!Constructor.prototype.componentShouldUpdate, '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', spec.displayName || 'A component') : void 0;
+     "development" !== 'production' ? warning(!Constructor.prototype.componentWillRecieveProps, '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', spec.displayName || 'A component') : void 0;
+   }
+
+   // Reduce time spent doing lookups by setting these on the prototype.
+   for (var methodName in ReactClassInterface) {
+     if (!Constructor.prototype[methodName]) {
+       Constructor.prototype[methodName] = null;
+     }
+   }
+
+   return Constructor;
+ },
+
+ injection: {
+   injectMixin: function (mixin) {
+     injectedMixins.push(mixin);
+   }
+ }
+
+};
+
+module.exports = ReactClass;
+},{"11":11,"16":16,"21":21,"22":22,"38":38,"45":45,"46":46,"48":48,"49":49}],11:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(38);
+
+var ReactNoopUpdateQueue = _dereq_(21);
+
+var canDefineProperty = _dereq_(33);
+var emptyObject = _dereq_(45);
+var invariant = _dereq_(46);
+var warning = _dereq_(48);
+
+/**
+* Base class helpers for the updating state of a component.
+*/
+function ReactComponent(props, context, updater) {
+ this.props = props;
+ this.context = context;
+ this.refs = emptyObject;
+ // We initialize the default updater but the real one gets injected by the
+ // renderer.
+ this.updater = updater || ReactNoopUpdateQueue;
+}
+
+ReactComponent.prototype.isReactComponent = {};
+
+/**
+* Sets a subset of the state. Always use this to mutate
+* state. You should treat `this.state` as immutable.
+*
+* There is no guarantee that `this.state` will be immediately updated, so
+* accessing `this.state` after calling this method may return the old value.
+*
+* There is no guarantee that calls to `setState` will run synchronously,
+* as they may eventually be batched together.  You can provide an optional
+* callback that will be executed when the call to setState is actually
+* completed.
+*
+* When a function is provided to setState, it will be called at some point in
+* the future (not synchronously). It will be called with the up to date
+* component arguments (state, props, context). These values can be different
+* from this.* because your function may be called after receiveProps but before
+* shouldComponentUpdate, and this new state, props, and context will not yet be
+* assigned to this.
+*
+* @param {object|function} partialState Next partial state or function to
+*        produce next partial state to be merged with current state.
+* @param {?function} callback Called after state is updated.
+* @final
+* @protected
+*/
+ReactComponent.prototype.setState = function (partialState, callback) {
+ !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? "development" !== 'production' ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : _prodInvariant('85') : void 0;
+ this.updater.enqueueSetState(this, partialState);
+ if (callback) {
+   this.updater.enqueueCallback(this, callback, 'setState');
+ }
+};
+
+/**
+* Forces an update. This should only be invoked when it is known with
+* certainty that we are **not** in a DOM transaction.
+*
+* You may want to call this when you know that some deeper aspect of the
+* component's state has changed but `setState` was not called.
+*
+* This will not invoke `shouldComponentUpdate`, but it will invoke
+* `componentWillUpdate` and `componentDidUpdate`.
+*
+* @param {?function} callback Called after update is complete.
+* @final
+* @protected
+*/
+ReactComponent.prototype.forceUpdate = function (callback) {
+ this.updater.enqueueForceUpdate(this);
+ if (callback) {
+   this.updater.enqueueCallback(this, callback, 'forceUpdate');
+ }
+};
+
+/**
+* Deprecated APIs. These APIs used to exist on classic React classes but since
+* we would like to deprecate them, we're not going to move them over to this
+* modern base class. Instead, we define a getter that warns if it's accessed.
+*/
+if ("development" !== 'production') {
+ var deprecatedAPIs = {
+   isMounted: ['isMounted', 'Instead, make sure to clean up subscriptions and pending requests in ' + 'componentWillUnmount to prevent memory leaks.'],
+   replaceState: ['replaceState', 'Refactor your code to use setState instead (see ' + 'https://github.com/facebook/react/issues/3236).']
+ };
+ var defineDeprecationWarning = function (methodName, info) {
+   if (canDefineProperty) {
+     Object.defineProperty(ReactComponent.prototype, methodName, {
+       get: function () {
+         "development" !== 'production' ? warning(false, '%s(...) is deprecated in plain JavaScript React classes. %s', info[0], info[1]) : void 0;
+         return undefined;
+       }
+     });
+   }
+ };
+ for (var fnName in deprecatedAPIs) {
+   if (deprecatedAPIs.hasOwnProperty(fnName)) {
+     defineDeprecationWarning(fnName, deprecatedAPIs[fnName]);
+   }
+ }
+}
+
+module.exports = ReactComponent;
+},{"21":21,"33":33,"38":38,"45":45,"46":46,"48":48}],12:[function(_dereq_,module,exports){
+/**
+* Copyright 2016-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(38);
+
+var ReactCurrentOwner = _dereq_(14);
+
+var invariant = _dereq_(46);
+var warning = _dereq_(48);
+
+function isNative(fn) {
+ // Based on isNative() from Lodash
+ var funcToString = Function.prototype.toString;
+ var hasOwnProperty = Object.prototype.hasOwnProperty;
+ var reIsNative = RegExp('^' + funcToString
+ // Take an example native function source for comparison
+ .call(hasOwnProperty)
+ // Strip regex characters so we can use it for regex
+ .replace(/[\\^$.*+?()[\]{}|]/g, '\\$&')
+ // Remove hasOwnProperty from the template to make it generic
+ .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
+ try {
+   var source = funcToString.call(fn);
+   return reIsNative.test(source);
+ } catch (err) {
+   return false;
+ }
+}
+
+var canUseCollections =
+// Array.from
+typeof Array.from === 'function' &&
+// Map
+typeof Map === 'function' && isNative(Map) &&
+// Map.prototype.keys
+Map.prototype != null && typeof Map.prototype.keys === 'function' && isNative(Map.prototype.keys) &&
+// Set
+typeof Set === 'function' && isNative(Set) &&
+// Set.prototype.keys
+Set.prototype != null && typeof Set.prototype.keys === 'function' && isNative(Set.prototype.keys);
+
+var setItem;
+var getItem;
+var removeItem;
+var getItemIDs;
+var addRoot;
+var removeRoot;
+var getRootIDs;
+
+if (canUseCollections) {
+ var itemMap = new Map();
+ var rootIDSet = new Set();
+
+ setItem = function (id, item) {
+   itemMap.set(id, item);
+ };
+ getItem = function (id) {
+   return itemMap.get(id);
+ };
+ removeItem = function (id) {
+   itemMap['delete'](id);
+ };
+ getItemIDs = function () {
+   return Array.from(itemMap.keys());
+ };
+
+ addRoot = function (id) {
+   rootIDSet.add(id);
+ };
+ removeRoot = function (id) {
+   rootIDSet['delete'](id);
+ };
+ getRootIDs = function () {
+   return Array.from(rootIDSet.keys());
+ };
+} else {
+ var itemByKey = {};
+ var rootByKey = {};
+
+ // Use non-numeric keys to prevent V8 performance issues:
+ // https://github.com/facebook/react/pull/7232
+ var getKeyFromID = function (id) {
+   return '.' + id;
+ };
+ var getIDFromKey = function (key) {
+   return parseInt(key.substr(1), 10);
+ };
+
+ setItem = function (id, item) {
+   var key = getKeyFromID(id);
+   itemByKey[key] = item;
+ };
+ getItem = function (id) {
+   var key = getKeyFromID(id);
+   return itemByKey[key];
+ };
+ removeItem = function (id) {
+   var key = getKeyFromID(id);
+   delete itemByKey[key];
+ };
+ getItemIDs = function () {
+   return Object.keys(itemByKey).map(getIDFromKey);
+ };
+
+ addRoot = function (id) {
+   var key = getKeyFromID(id);
+   rootByKey[key] = true;
+ };
+ removeRoot = function (id) {
+   var key = getKeyFromID(id);
+   delete rootByKey[key];
+ };
+ getRootIDs = function () {
+   return Object.keys(rootByKey).map(getIDFromKey);
+ };
+}
+
+var unmountedIDs = [];
+
+function purgeDeep(id) {
+ var item = getItem(id);
+ if (item) {
+   var childIDs = item.childIDs;
+
+   removeItem(id);
+   childIDs.forEach(purgeDeep);
+ }
+}
+
+function describeComponentFrame(name, source, ownerName) {
+ return '\n    in ' + (name || 'Unknown') + (source ? ' (at ' + source.fileName.replace(/^.*[\\\/]/, '') + ':' + source.lineNumber + ')' : ownerName ? ' (created by ' + ownerName + ')' : '');
+}
+
+function getDisplayName(element) {
+ if (element == null) {
+   return '#empty';
+ } else if (typeof element === 'string' || typeof element === 'number') {
+   return '#text';
+ } else if (typeof element.type === 'string') {
+   return element.type;
+ } else {
+   return element.type.displayName || element.type.name || 'Unknown';
+ }
+}
+
+function describeID(id) {
+ var name = ReactComponentTreeHook.getDisplayName(id);
+ var element = ReactComponentTreeHook.getElement(id);
+ var ownerID = ReactComponentTreeHook.getOwnerID(id);
+ var ownerName;
+ if (ownerID) {
+   ownerName = ReactComponentTreeHook.getDisplayName(ownerID);
+ }
+ "development" !== 'production' ? warning(element, 'ReactComponentTreeHook: Missing React element for debugID %s when ' + 'building stack', id) : void 0;
+ return describeComponentFrame(name, element && element._source, ownerName);
+}
+
+var ReactComponentTreeHook = {
+ onSetChildren: function (id, nextChildIDs) {
+   var item = getItem(id);
+   !item ? "development" !== 'production' ? invariant(false, 'Item must have been set') : _prodInvariant('144') : void 0;
+   item.childIDs = nextChildIDs;
+
+   for (var i = 0; i < nextChildIDs.length; i++) {
+     var nextChildID = nextChildIDs[i];
+     var nextChild = getItem(nextChildID);
+     !nextChild ? "development" !== 'production' ? invariant(false, 'Expected hook events to fire for the child before its parent includes it in onSetChildren().') : _prodInvariant('140') : void 0;
+     !(nextChild.childIDs != null || typeof nextChild.element !== 'object' || nextChild.element == null) ? "development" !== 'production' ? invariant(false, 'Expected onSetChildren() to fire for a container child before its parent includes it in onSetChildren().') : _prodInvariant('141') : void 0;
+     !nextChild.isMounted ? "development" !== 'production' ? invariant(false, 'Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren().') : _prodInvariant('71') : void 0;
+     if (nextChild.parentID == null) {
+       nextChild.parentID = id;
+       // TODO: This shouldn't be necessary but mounting a new root during in
+       // componentWillMount currently causes not-yet-mounted components to
+       // be purged from our tree data so their parent id is missing.
+     }
+     !(nextChild.parentID === id) ? "development" !== 'production' ? invariant(false, 'Expected onBeforeMountComponent() parent and onSetChildren() to be consistent (%s has parents %s and %s).', nextChildID, nextChild.parentID, id) : _prodInvariant('142', nextChildID, nextChild.parentID, id) : void 0;
+   }
+ },
+ onBeforeMountComponent: function (id, element, parentID) {
+   var item = {
+     element: element,
+     parentID: parentID,
+     text: null,
+     childIDs: [],
+     isMounted: false,
+     updateCount: 0
+   };
+   setItem(id, item);
+ },
+ onBeforeUpdateComponent: function (id, element) {
+   var item = getItem(id);
+   if (!item || !item.isMounted) {
+     // We may end up here as a result of setState() in componentWillUnmount().
+     // In this case, ignore the element.
+     return;
+   }
+   item.element = element;
+ },
+ onMountComponent: function (id) {
+   var item = getItem(id);
+   !item ? "development" !== 'production' ? invariant(false, 'Item must have been set') : _prodInvariant('144') : void 0;
+   item.isMounted = true;
+   var isRoot = item.parentID === 0;
+   if (isRoot) {
+     addRoot(id);
+   }
+ },
+ onUpdateComponent: function (id) {
+   var item = getItem(id);
+   if (!item || !item.isMounted) {
+     // We may end up here as a result of setState() in componentWillUnmount().
+     // In this case, ignore the element.
+     return;
+   }
+   item.updateCount++;
+ },
+ onUnmountComponent: function (id) {
+   var item = getItem(id);
+   if (item) {
+     // We need to check if it exists.
+     // `item` might not exist if it is inside an error boundary, and a sibling
+     // error boundary child threw while mounting. Then this instance never
+     // got a chance to mount, but it still gets an unmounting event during
+     // the error boundary cleanup.
+     item.isMounted = false;
+     var isRoot = item.parentID === 0;
+     if (isRoot) {
+       removeRoot(id);
+     }
+   }
+   unmountedIDs.push(id);
+ },
+ purgeUnmountedComponents: function () {
+   if (ReactComponentTreeHook._preventPurging) {
+     // Should only be used for testing.
+     return;
+   }
+
+   for (var i = 0; i < unmountedIDs.length; i++) {
+     var id = unmountedIDs[i];
+     purgeDeep(id);
+   }
+   unmountedIDs.length = 0;
+ },
+ isMounted: function (id) {
+   var item = getItem(id);
+   return item ? item.isMounted : false;
+ },
+ getCurrentStackAddendum: function (topElement) {
+   var info = '';
+   if (topElement) {
+     var name = getDisplayName(topElement);
+     var owner = topElement._owner;
+     info += describeComponentFrame(name, topElement._source, owner && owner.getName());
+   }
+
+   var currentOwner = ReactCurrentOwner.current;
+   var id = currentOwner && currentOwner._debugID;
+
+   info += ReactComponentTreeHook.getStackAddendumByID(id);
+   return info;
+ },
+ getStackAddendumByID: function (id) {
+   var info = '';
+   while (id) {
+     info += describeID(id);
+     id = ReactComponentTreeHook.getParentID(id);
+   }
+   return info;
+ },
+ getChildIDs: function (id) {
+   var item = getItem(id);
+   return item ? item.childIDs : [];
+ },
+ getDisplayName: function (id) {
+   var element = ReactComponentTreeHook.getElement(id);
+   if (!element) {
+     return null;
+   }
+   return getDisplayName(element);
+ },
+ getElement: function (id) {
+   var item = getItem(id);
+   return item ? item.element : null;
+ },
+ getOwnerID: function (id) {
+   var element = ReactComponentTreeHook.getElement(id);
+   if (!element || !element._owner) {
+     return null;
+   }
+   return element._owner._debugID;
+ },
+ getParentID: function (id) {
+   var item = getItem(id);
+   return item ? item.parentID : null;
+ },
+ getSource: function (id) {
+   var item = getItem(id);
+   var element = item ? item.element : null;
+   var source = element != null ? element._source : null;
+   return source;
+ },
+ getText: function (id) {
+   var element = ReactComponentTreeHook.getElement(id);
+   if (typeof element === 'string') {
+     return element;
+   } else if (typeof element === 'number') {
+     return '' + element;
+   } else {
+     return null;
+   }
+ },
+ getUpdateCount: function (id) {
+   var item = getItem(id);
+   return item ? item.updateCount : 0;
+ },
+
+
+ getRootIDs: getRootIDs,
+ getRegisteredIDs: getItemIDs
+};
+
+module.exports = ReactComponentTreeHook;
+},{"14":14,"38":38,"46":46,"48":48}],13:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var shallowCompare = _dereq_(39);
+
+/**
+* If your React component's render function is "pure", e.g. it will render the
+* same result given the same props and state, provide this mixin for a
+* considerable performance boost.
+*
+* Most React components have pure render functions.
+*
+* Example:
+*
+*   var ReactComponentWithPureRenderMixin =
+*     require('ReactComponentWithPureRenderMixin');
+*   React.createClass({
+*     mixins: [ReactComponentWithPureRenderMixin],
+*
+*     render: function() {
+*       return <div className={this.props.className}>foo</div>;
+*     }
+*   });
+*
+* Note: This only checks shallow equality for props and state. If these contain
+* complex data structures this mixin may have false-negatives for deeper
+* differences. Only mixin to components which have simple props and state, or
+* use `forceUpdate()` when you know deep data structures have changed.
+*
+* See https://facebook.github.io/react/docs/pure-render-mixin.html
+*/
+var ReactComponentWithPureRenderMixin = {
+ shouldComponentUpdate: function (nextProps, nextState) {
+   return shallowCompare(this, nextProps, nextState);
+ }
+};
+
+module.exports = ReactComponentWithPureRenderMixin;
+},{"39":39}],14:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+/**
+* Keeps track of the current owner.
+*
+* The current owner is the component who should own any components that are
+* currently being constructed.
+*/
+var ReactCurrentOwner = {
+
+ /**
+  * @internal
+  * @type {ReactComponent}
+  */
+ current: null
+
+};
+
+module.exports = ReactCurrentOwner;
+},{}],15:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactElement = _dereq_(16);
+
+/**
+* Create a factory that creates HTML tag elements.
+*
+* @private
+*/
+var createDOMFactory = ReactElement.createFactory;
+if ("development" !== 'production') {
+ var ReactElementValidator = _dereq_(18);
+ createDOMFactory = ReactElementValidator.createFactory;
+}
+
+/**
+* Creates a mapping from supported HTML tags to `ReactDOMComponent` classes.
+* This is also accessible via `React.DOM`.
+*
+* @public
+*/
+var ReactDOMFactories = {
+ a: createDOMFactory('a'),
+ abbr: createDOMFactory('abbr'),
+ address: createDOMFactory('address'),
+ area: createDOMFactory('area'),
+ article: createDOMFactory('article'),
+ aside: createDOMFactory('aside'),
+ audio: createDOMFactory('audio'),
+ b: createDOMFactory('b'),
+ base: createDOMFactory('base'),
+ bdi: createDOMFactory('bdi'),
+ bdo: createDOMFactory('bdo'),
+ big: createDOMFactory('big'),
+ blockquote: createDOMFactory('blockquote'),
+ body: createDOMFactory('body'),
+ br: createDOMFactory('br'),
+ button: createDOMFactory('button'),
+ canvas: createDOMFactory('canvas'),
+ caption: createDOMFactory('caption'),
+ cite: createDOMFactory('cite'),
+ code: createDOMFactory('code'),
+ col: createDOMFactory('col'),
+ colgroup: createDOMFactory('colgroup'),
+ data: createDOMFactory('data'),
+ datalist: createDOMFactory('datalist'),
+ dd: createDOMFactory('dd'),
+ del: createDOMFactory('del'),
+ details: createDOMFactory('details'),
+ dfn: createDOMFactory('dfn'),
+ dialog: createDOMFactory('dialog'),
+ div: createDOMFactory('div'),
+ dl: createDOMFactory('dl'),
+ dt: createDOMFactory('dt'),
+ em: createDOMFactory('em'),
+ embed: createDOMFactory('embed'),
+ fieldset: createDOMFactory('fieldset'),
+ figcaption: createDOMFactory('figcaption'),
+ figure: createDOMFactory('figure'),
+ footer: createDOMFactory('footer'),
+ form: createDOMFactory('form'),
+ h1: createDOMFactory('h1'),
+ h2: createDOMFactory('h2'),
+ h3: createDOMFactory('h3'),
+ h4: createDOMFactory('h4'),
+ h5: createDOMFactory('h5'),
+ h6: createDOMFactory('h6'),
+ head: createDOMFactory('head'),
+ header: createDOMFactory('header'),
+ hgroup: createDOMFactory('hgroup'),
+ hr: createDOMFactory('hr'),
+ html: createDOMFactory('html'),
+ i: createDOMFactory('i'),
+ iframe: createDOMFactory('iframe'),
+ img: createDOMFactory('img'),
+ input: createDOMFactory('input'),
+ ins: createDOMFactory('ins'),
+ kbd: createDOMFactory('kbd'),
+ keygen: createDOMFactory('keygen'),
+ label: createDOMFactory('label'),
+ legend: createDOMFactory('legend'),
+ li: createDOMFactory('li'),
+ link: createDOMFactory('link'),
+ main: createDOMFactory('main'),
+ map: createDOMFactory('map'),
+ mark: createDOMFactory('mark'),
+ menu: createDOMFactory('menu'),
+ menuitem: createDOMFactory('menuitem'),
+ meta: createDOMFactory('meta'),
+ meter: createDOMFactory('meter'),
+ nav: createDOMFactory('nav'),
+ noscript: createDOMFactory('noscript'),
+ object: createDOMFactory('object'),
+ ol: createDOMFactory('ol'),
+ optgroup: createDOMFactory('optgroup'),
+ option: createDOMFactory('option'),
+ output: createDOMFactory('output'),
+ p: createDOMFactory('p'),
+ param: createDOMFactory('param'),
+ picture: createDOMFactory('picture'),
+ pre: createDOMFactory('pre'),
+ progress: createDOMFactory('progress'),
+ q: createDOMFactory('q'),
+ rp: createDOMFactory('rp'),
+ rt: createDOMFactory('rt'),
+ ruby: createDOMFactory('ruby'),
+ s: createDOMFactory('s'),
+ samp: createDOMFactory('samp'),
+ script: createDOMFactory('script'),
+ section: createDOMFactory('section'),
+ select: createDOMFactory('select'),
+ small: createDOMFactory('small'),
+ source: createDOMFactory('source'),
+ span: createDOMFactory('span'),
+ strong: createDOMFactory('strong'),
+ style: createDOMFactory('style'),
+ sub: createDOMFactory('sub'),
+ summary: createDOMFactory('summary'),
+ sup: createDOMFactory('sup'),
+ table: createDOMFactory('table'),
+ tbody: createDOMFactory('tbody'),
+ td: createDOMFactory('td'),
+ textarea: createDOMFactory('textarea'),
+ tfoot: createDOMFactory('tfoot'),
+ th: createDOMFactory('th'),
+ thead: createDOMFactory('thead'),
+ time: createDOMFactory('time'),
+ title: createDOMFactory('title'),
+ tr: createDOMFactory('tr'),
+ track: createDOMFactory('track'),
+ u: createDOMFactory('u'),
+ ul: createDOMFactory('ul'),
+ 'var': createDOMFactory('var'),
+ video: createDOMFactory('video'),
+ wbr: createDOMFactory('wbr'),
+
+ // SVG
+ circle: createDOMFactory('circle'),
+ clipPath: createDOMFactory('clipPath'),
+ defs: createDOMFactory('defs'),
+ ellipse: createDOMFactory('ellipse'),
+ g: createDOMFactory('g'),
+ image: createDOMFactory('image'),
+ line: createDOMFactory('line'),
+ linearGradient: createDOMFactory('linearGradient'),
+ mask: createDOMFactory('mask'),
+ path: createDOMFactory('path'),
+ pattern: createDOMFactory('pattern'),
+ polygon: createDOMFactory('polygon'),
+ polyline: createDOMFactory('polyline'),
+ radialGradient: createDOMFactory('radialGradient'),
+ rect: createDOMFactory('rect'),
+ stop: createDOMFactory('stop'),
+ svg: createDOMFactory('svg'),
+ text: createDOMFactory('text'),
+ tspan: createDOMFactory('tspan')
+};
+
+module.exports = ReactDOMFactories;
+},{"16":16,"18":18}],16:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(49);
+
+var ReactCurrentOwner = _dereq_(14);
+
+var warning = _dereq_(48);
+var canDefineProperty = _dereq_(33);
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+var REACT_ELEMENT_TYPE = _dereq_(17);
+
+var RESERVED_PROPS = {
+ key: true,
+ ref: true,
+ __self: true,
+ __source: true
+};
+
+var specialPropKeyWarningShown, specialPropRefWarningShown;
+
+function hasValidRef(config) {
+ if ("development" !== 'production') {
+   if (hasOwnProperty.call(config, 'ref')) {
+     var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+     if (getter && getter.isReactWarning) {
+       return false;
+     }
+   }
+ }
+ return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+ if ("development" !== 'production') {
+   if (hasOwnProperty.call(config, 'key')) {
+     var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+     if (getter && getter.isReactWarning) {
+       return false;
+     }
+   }
+ }
+ return config.key !== undefined;
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+ var warnAboutAccessingKey = function () {
+   if (!specialPropKeyWarningShown) {
+     specialPropKeyWarningShown = true;
+     "development" !== 'production' ? warning(false, '%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://fb.me/react-special-props)', displayName) : void 0;
+   }
+ };
+ warnAboutAccessingKey.isReactWarning = true;
+ Object.defineProperty(props, 'key', {
+   get: warnAboutAccessingKey,
+   configurable: true
+ });
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+ var warnAboutAccessingRef = function () {
+   if (!specialPropRefWarningShown) {
+     specialPropRefWarningShown = true;
+     "development" !== 'production' ? warning(false, '%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://fb.me/react-special-props)', displayName) : void 0;
+   }
+ };
+ warnAboutAccessingRef.isReactWarning = true;
+ Object.defineProperty(props, 'ref', {
+   get: warnAboutAccessingRef,
+   configurable: true
+ });
+}
+
+/**
+* Factory method to create a new React element. This no longer adheres to
+* the class pattern, so do not use new to call it. Also, no instanceof check
+* will work. Instead test $$typeof field against Symbol.for('react.element') to check
+* if something is a React Element.
+*
+* @param {*} type
+* @param {*} key
+* @param {string|object} ref
+* @param {*} self A *temporary* helper to detect places where `this` is
+* different from the `owner` when React.createElement is called, so that we
+* can warn. We want to get rid of owner and replace string `ref`s with arrow
+* functions, and as long as `this` and owner are the same, there will be no
+* change in behavior.
+* @param {*} source An annotation object (added by a transpiler or otherwise)
+* indicating filename, line number, and/or other information.
+* @param {*} owner
+* @param {*} props
+* @internal
+*/
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+ var element = {
+   // This tag allow us to uniquely identify this as a React Element
+   $$typeof: REACT_ELEMENT_TYPE,
+
+   // Built-in properties that belong on the element
+   type: type,
+   key: key,
+   ref: ref,
+   props: props,
+
+   // Record the component responsible for creating this element.
+   _owner: owner
+ };
+
+ if ("development" !== 'production') {
+   // The validation flag is currently mutative. We put it on
+   // an external backing store so that we can freeze the whole object.
+   // This can be replaced with a WeakMap once they are implemented in
+   // commonly used development environments.
+   element._store = {};
+
+   // To make comparing ReactElements easier for testing purposes, we make
+   // the validation flag non-enumerable (where possible, which should
+   // include every environment we run tests in), so the test framework
+   // ignores it.
+   if (canDefineProperty) {
+     Object.defineProperty(element._store, 'validated', {
+       configurable: false,
+       enumerable: false,
+       writable: true,
+       value: false
+     });
+     // self and source are DEV only properties.
+     Object.defineProperty(element, '_self', {
+       configurable: false,
+       enumerable: false,
+       writable: false,
+       value: self
+     });
+     // Two elements created in two different places should be considered
+     // equal for testing purposes and therefore we hide it from enumeration.
+     Object.defineProperty(element, '_source', {
+       configurable: false,
+       enumerable: false,
+       writable: false,
+       value: source
+     });
+   } else {
+     element._store.validated = false;
+     element._self = self;
+     element._source = source;
+   }
+   if (Object.freeze) {
+     Object.freeze(element.props);
+     Object.freeze(element);
+   }
+ }
+
+ return element;
+};
+
+/**
+* Create and return a new ReactElement of the given type.
+* See https://facebook.github.io/react/docs/top-level-api.html#react.createelement
+*/
+ReactElement.createElement = function (type, config, children) {
+ var propName;
+
+ // Reserved names are extracted
+ var props = {};
+
+ var key = null;
+ var ref = null;
+ var self = null;
+ var source = null;
+
+ if (config != null) {
+   if (hasValidRef(config)) {
+     ref = config.ref;
+   }
+   if (hasValidKey(config)) {
+     key = '' + config.key;
+   }
+
+   self = config.__self === undefined ? null : config.__self;
+   source = config.__source === undefined ? null : config.__source;
+   // Remaining properties are added to a new props object
+   for (propName in config) {
+     if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+       props[propName] = config[propName];
+     }
+   }
+ }
+
+ // Children can be more than one argument, and those are transferred onto
+ // the newly allocated props object.
+ var childrenLength = arguments.length - 2;
+ if (childrenLength === 1) {
+   props.children = children;
+ } else if (childrenLength > 1) {
+   var childArray = Array(childrenLength);
+   for (var i = 0; i < childrenLength; i++) {
+     childArray[i] = arguments[i + 2];
+   }
+   if ("development" !== 'production') {
+     if (Object.freeze) {
+       Object.freeze(childArray);
+     }
+   }
+   props.children = childArray;
+ }
+
+ // Resolve default props
+ if (type && type.defaultProps) {
+   var defaultProps = type.defaultProps;
+   for (propName in defaultProps) {
+     if (props[propName] === undefined) {
+       props[propName] = defaultProps[propName];
+     }
+   }
+ }
+ if ("development" !== 'production') {
+   if (key || ref) {
+     if (typeof props.$$typeof === 'undefined' || props.$$typeof !== REACT_ELEMENT_TYPE) {
+       var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+       if (key) {
+         defineKeyPropWarningGetter(props, displayName);
+       }
+       if (ref) {
+         defineRefPropWarningGetter(props, displayName);
+       }
+     }
+   }
+ }
+ return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+};
+
+/**
+* Return a function that produces ReactElements of a given type.
+* See https://facebook.github.io/react/docs/top-level-api.html#react.createfactory
+*/
+ReactElement.createFactory = function (type) {
+ var factory = ReactElement.createElement.bind(null, type);
+ // Expose the type on the factory and the prototype so that it can be
+ // easily accessed on elements. E.g. `<Foo />.type === Foo`.
+ // This should not be named `constructor` since this may not be the function
+ // that created the element, and it may not even be a constructor.
+ // Legacy hook TODO: Warn if this is accessed
+ factory.type = type;
+ return factory;
+};
+
+ReactElement.cloneAndReplaceKey = function (oldElement, newKey) {
+ var newElement = ReactElement(oldElement.type, newKey, oldElement.ref, oldElement._self, oldElement._source, oldElement._owner, oldElement.props);
+
+ return newElement;
+};
+
+/**
+* Clone and return a new ReactElement using element as the starting point.
+* See https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement
+*/
+ReactElement.cloneElement = function (element, config, children) {
+ var propName;
+
+ // Original props are copied
+ var props = _assign({}, element.props);
+
+ // Reserved names are extracted
+ var key = element.key;
+ var ref = element.ref;
+ // Self is preserved since the owner is preserved.
+ var self = element._self;
+ // Source is preserved since cloneElement is unlikely to be targeted by a
+ // transpiler, and the original source is probably a better indicator of the
+ // true owner.
+ var source = element._source;
+
+ // Owner will be preserved, unless ref is overridden
+ var owner = element._owner;
+
+ if (config != null) {
+   if (hasValidRef(config)) {
+     // Silently steal the ref from the parent.
+     ref = config.ref;
+     owner = ReactCurrentOwner.current;
+   }
+   if (hasValidKey(config)) {
+     key = '' + config.key;
+   }
+
+   // Remaining properties override existing props
+   var defaultProps;
+   if (element.type && element.type.defaultProps) {
+     defaultProps = element.type.defaultProps;
+   }
+   for (propName in config) {
+     if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+       if (config[propName] === undefined && defaultProps !== undefined) {
+         // Resolve default props
+         props[propName] = defaultProps[propName];
+       } else {
+         props[propName] = config[propName];
+       }
+     }
+   }
+ }
+
+ // Children can be more than one argument, and those are transferred onto
+ // the newly allocated props object.
+ var childrenLength = arguments.length - 2;
+ if (childrenLength === 1) {
+   props.children = children;
+ } else if (childrenLength > 1) {
+   var childArray = Array(childrenLength);
+   for (var i = 0; i < childrenLength; i++) {
+     childArray[i] = arguments[i + 2];
+   }
+   props.children = childArray;
+ }
+
+ return ReactElement(element.type, key, ref, self, source, owner, props);
+};
+
+/**
+* Verifies the object is a ReactElement.
+* See https://facebook.github.io/react/docs/top-level-api.html#react.isvalidelement
+* @param {?object} object
+* @return {boolean} True if `object` is a valid component.
+* @final
+*/
+ReactElement.isValidElement = function (object) {
+ return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+};
+
+module.exports = ReactElement;
+},{"14":14,"17":17,"33":33,"48":48,"49":49}],17:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+// The Symbol used to tag the ReactElement type. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+
+var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;
+
+module.exports = REACT_ELEMENT_TYPE;
+},{}],18:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/**
+* ReactElementValidator provides a wrapper around a element factory
+* which validates the props passed to the element. This is intended to be
+* used only in DEV and could be replaced by a static type checker for languages
+* that support it.
+*/
+
+'use strict';
+
+var ReactCurrentOwner = _dereq_(14);
+var ReactComponentTreeHook = _dereq_(12);
+var ReactElement = _dereq_(16);
+
+var checkReactTypeSpec = _dereq_(34);
+
+var canDefineProperty = _dereq_(33);
+var getIteratorFn = _dereq_(36);
+var warning = _dereq_(48);
+
+function getDeclarationErrorAddendum() {
+ if (ReactCurrentOwner.current) {
+   var name = ReactCurrentOwner.current.getName();
+   if (name) {
+     return ' Check the render method of `' + name + '`.';
+   }
+ }
+ return '';
+}
+
+/**
+* Warn if there's no key explicitly set on dynamic arrays of children or
+* object keys are not valid. This allows us to keep track of children between
+* updates.
+*/
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+ var info = getDeclarationErrorAddendum();
+
+ if (!info) {
+   var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+   if (parentName) {
+     info = ' Check the top-level render call using <' + parentName + '>.';
+   }
+ }
+ return info;
+}
+
+/**
+* Warn if the element doesn't have an explicit key assigned to it.
+* This element is in an array. The array could grow and shrink or be
+* reordered. All children that haven't already been validated are required to
+* have a "key" property assigned to it. Error statuses are cached so a warning
+* will only be shown once.
+*
+* @internal
+* @param {ReactElement} element Element that requires a key.
+* @param {*} parentType element's parent's type.
+*/
+function validateExplicitKey(element, parentType) {
+ if (!element._store || element._store.validated || element.key != null) {
+   return;
+ }
+ element._store.validated = true;
+
+ var memoizer = ownerHasKeyUseWarning.uniqueKey || (ownerHasKeyUseWarning.uniqueKey = {});
+
+ var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+ if (memoizer[currentComponentErrorInfo]) {
+   return;
+ }
+ memoizer[currentComponentErrorInfo] = true;
+
+ // Usually the current owner is the offender, but if it accepts children as a
+ // property, it may be the creator of the child that's responsible for
+ // assigning it a key.
+ var childOwner = '';
+ if (element && element._owner && element._owner !== ReactCurrentOwner.current) {
+   // Give the component that originally created this child.
+   childOwner = ' It was passed a child from ' + element._owner.getName() + '.';
+ }
+
+ "development" !== 'production' ? warning(false, 'Each child in an array or iterator should have a unique "key" prop.' + '%s%s See https://fb.me/react-warning-keys for more information.%s', currentComponentErrorInfo, childOwner, ReactComponentTreeHook.getCurrentStackAddendum(element)) : void 0;
+}
+
+/**
+* Ensure that every element either is passed in a static location, in an
+* array with an explicit keys property defined, or in an object literal
+* with valid key property.
+*
+* @internal
+* @param {ReactNode} node Statically passed child of any type.
+* @param {*} parentType node's parent's type.
+*/
+function validateChildKeys(node, parentType) {
+ if (typeof node !== 'object') {
+   return;
+ }
+ if (Array.isArray(node)) {
+   for (var i = 0; i < node.length; i++) {
+     var child = node[i];
+     if (ReactElement.isValidElement(child)) {
+       validateExplicitKey(child, parentType);
+     }
+   }
+ } else if (ReactElement.isValidElement(node)) {
+   // This element was passed in a valid location.
+   if (node._store) {
+     node._store.validated = true;
+   }
+ } else if (node) {
+   var iteratorFn = getIteratorFn(node);
+   // Entry iterators provide implicit keys.
+   if (iteratorFn) {
+     if (iteratorFn !== node.entries) {
+       var iterator = iteratorFn.call(node);
+       var step;
+       while (!(step = iterator.next()).done) {
+         if (ReactElement.isValidElement(step.value)) {
+           validateExplicitKey(step.value, parentType);
+         }
+       }
+     }
+   }
+ }
+}
+
+/**
+* Given an element, validate that its props follow the propTypes definition,
+* provided by the type.
+*
+* @param {ReactElement} element
+*/
+function validatePropTypes(element) {
+ var componentClass = element.type;
+ if (typeof componentClass !== 'function') {
+   return;
+ }
+ var name = componentClass.displayName || componentClass.name;
+ if (componentClass.propTypes) {
+   checkReactTypeSpec(componentClass.propTypes, element.props, 'prop', name, element, null);
+ }
+ if (typeof componentClass.getDefaultProps === 'function') {
+   "development" !== 'production' ? warning(componentClass.getDefaultProps.isReactClassApproved, 'getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.') : void 0;
+ }
+}
+
+var ReactElementValidator = {
+
+ createElement: function (type, props, children) {
+   var validType = typeof type === 'string' || typeof type === 'function';
+   // We warn in this case but don't throw. We expect the element creation to
+   // succeed and there will likely be errors in render.
+   if (!validType) {
+     "development" !== 'production' ? warning(false, 'React.createElement: type should not be null, undefined, boolean, or ' + 'number. It should be a string (for DOM elements) or a ReactClass ' + '(for composite components).%s', getDeclarationErrorAddendum()) : void 0;
+   }
+
+   var element = ReactElement.createElement.apply(this, arguments);
+
+   // The result can be nullish if a mock or a custom function is used.
+   // TODO: Drop this when these are no longer allowed as the type argument.
+   if (element == null) {
+     return element;
+   }
+
+   // Skip key warning if the type isn't valid since our key validation logic
+   // doesn't expect a non-string/function type and can throw confusing errors.
+   // We don't want exception behavior to differ between dev and prod.
+   // (Rendering will throw with a helpful message and as soon as the type is
+   // fixed, the key warnings will appear.)
+   if (validType) {
+     for (var i = 2; i < arguments.length; i++) {
+       validateChildKeys(arguments[i], type);
+     }
+   }
+
+   validatePropTypes(element);
+
+   return element;
+ },
+
+ createFactory: function (type) {
+   var validatedFactory = ReactElementValidator.createElement.bind(null, type);
+   // Legacy hook TODO: Warn if this is accessed
+   validatedFactory.type = type;
+
+   if ("development" !== 'production') {
+     if (canDefineProperty) {
+       Object.defineProperty(validatedFactory, 'type', {
+         enumerable: false,
+         get: function () {
+           "development" !== 'production' ? warning(false, 'Factory.type is deprecated. Access the class directly ' + 'before passing it to createFactory.') : void 0;
+           Object.defineProperty(this, 'type', {
+             value: type
+           });
+           return type;
+         }
+       });
+     }
+   }
+
+   return validatedFactory;
+ },
+
+ cloneElement: function (element, props, children) {
+   var newElement = ReactElement.cloneElement.apply(this, arguments);
+   for (var i = 2; i < arguments.length; i++) {
+     validateChildKeys(arguments[i], newElement.type);
+   }
+   validatePropTypes(newElement);
+   return newElement;
+ }
+
+};
+
+module.exports = ReactElementValidator;
+},{"12":12,"14":14,"16":16,"33":33,"34":34,"36":36,"48":48}],19:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(38);
+
+var ReactChildren = _dereq_(9);
+var ReactElement = _dereq_(16);
+
+var emptyFunction = _dereq_(44);
+var invariant = _dereq_(46);
+var warning = _dereq_(48);
+
+/**
+* We used to allow keyed objects to serve as a collection of ReactElements,
+* or nested sets. This allowed us a way to explicitly key a set or fragment of
+* components. This is now being replaced with an opaque data structure.
+* The upgrade path is to call React.addons.createFragment({ key: value }) to
+* create a keyed fragment. The resulting data structure is an array.
+*/
+
+var numericPropertyRegex = /^\d+$/;
+
+var warnedAboutNumeric = false;
+
+var ReactFragment = {
+ /**
+  * Wrap a keyed object in an opaque proxy that warns you if you access any
+  * of its properties.
+  * See https://facebook.github.io/react/docs/create-fragment.html
+  */
+ create: function (object) {
+   if (typeof object !== 'object' || !object || Array.isArray(object)) {
+     "development" !== 'production' ? warning(false, 'React.addons.createFragment only accepts a single object. Got: %s', object) : void 0;
+     return object;
+   }
+   if (ReactElement.isValidElement(object)) {
+     "development" !== 'production' ? warning(false, 'React.addons.createFragment does not accept a ReactElement ' + 'without a wrapper object.') : void 0;
+     return object;
+   }
+
+   !(object.nodeType !== 1) ? "development" !== 'production' ? invariant(false, 'React.addons.createFragment(...): Encountered an invalid child; DOM elements are not valid children of React components.') : _prodInvariant('0') : void 0;
+
+   var result = [];
+
+   for (var key in object) {
+     if ("development" !== 'production') {
+       if (!warnedAboutNumeric && numericPropertyRegex.test(key)) {
+         "development" !== 'production' ? warning(false, 'React.addons.createFragment(...): Child objects should have ' + 'non-numeric keys so ordering is preserved.') : void 0;
+         warnedAboutNumeric = true;
+       }
+     }
+     ReactChildren.mapIntoWithKeyPrefixInternal(object[key], result, key, emptyFunction.thatReturnsArgument);
+   }
+
+   return result;
+ }
+};
+
+module.exports = ReactFragment;
+},{"16":16,"38":38,"44":44,"46":46,"48":48,"9":9}],20:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* ReactLink encapsulates a common pattern in which a component wants to modify
+* a prop received from its parent. ReactLink allows the parent to pass down a
+* value coupled with a callback that, when invoked, expresses an intent to
+* modify that value. For example:
+*
+* React.createClass({
+*   getInitialState: function() {
+*     return {value: ''};
+*   },
+*   render: function() {
+*     var valueLink = new ReactLink(this.state.value, this._handleValueChange);
+*     return <input valueLink={valueLink} />;
+*   },
+*   _handleValueChange: function(newValue) {
+*     this.setState({value: newValue});
+*   }
+* });
+*
+* We have provided some sugary mixins to make the creation and
+* consumption of ReactLink easier; see LinkedValueUtils and LinkedStateMixin.
+*/
+
+var React = _dereq_(5);
+
+/**
+* Deprecated: An an easy way to express two-way binding with React.
+* See https://facebook.github.io/react/docs/two-way-binding-helpers.html
+*
+* @param {*} value current value of the link
+* @param {function} requestChange callback to request a change
+*/
+function ReactLink(value, requestChange) {
+ this.value = value;
+ this.requestChange = requestChange;
+}
+
+/**
+* Creates a PropType that enforces the ReactLink API and optionally checks the
+* type of the value being passed inside the link. Example:
+*
+* MyComponent.propTypes = {
+*   tabIndexLink: ReactLink.PropTypes.link(React.PropTypes.number)
+* }
+*/
+function createLinkTypeChecker(linkType) {
+ var shapes = {
+   value: linkType === undefined ? React.PropTypes.any.isRequired : linkType.isRequired,
+   requestChange: React.PropTypes.func.isRequired
+ };
+ return React.PropTypes.shape(shapes);
+}
+
+ReactLink.PropTypes = {
+ link: createLinkTypeChecker
+};
+
+module.exports = ReactLink;
+},{"5":5}],21:[function(_dereq_,module,exports){
+/**
+* Copyright 2015-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var warning = _dereq_(48);
+
+function warnNoop(publicInstance, callerName) {
+ if ("development" !== 'production') {
+   var constructor = publicInstance.constructor;
+   "development" !== 'production' ? warning(false, '%s(...): Can only update a mounted or mounting component. ' + 'This usually means you called %s() on an unmounted component. ' + 'This is a no-op. Please check the code for the %s component.', callerName, callerName, constructor && (constructor.displayName || constructor.name) || 'ReactClass') : void 0;
+ }
+}
+
+/**
+* This is the abstract API for an update queue.
+*/
+var ReactNoopUpdateQueue = {
+
+ /**
+  * Checks whether or not this composite component is mounted.
+  * @param {ReactClass} publicInstance The instance we want to test.
+  * @return {boolean} True if mounted, false otherwise.
+  * @protected
+  * @final
+  */
+ isMounted: function (publicInstance) {
+   return false;
+ },
+
+ /**
+  * Enqueue a callback that will be executed after all the pending updates
+  * have processed.
+  *
+  * @param {ReactClass} publicInstance The instance to use as `this` context.
+  * @param {?function} callback Called after state is updated.
+  * @internal
+  */
+ enqueueCallback: function (publicInstance, callback) {},
+
+ /**
+  * Forces an update. This should only be invoked when it is known with
+  * certainty that we are **not** in a DOM transaction.
+  *
+  * You may want to call this when you know that some deeper aspect of the
+  * component's state has changed but `setState` was not called.
+  *
+  * This will not invoke `shouldComponentUpdate`, but it will invoke
+  * `componentWillUpdate` and `componentDidUpdate`.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @internal
+  */
+ enqueueForceUpdate: function (publicInstance) {
+   warnNoop(publicInstance, 'forceUpdate');
+ },
+
+ /**
+  * Replaces all of the state. Always use this or `setState` to mutate state.
+  * You should treat `this.state` as immutable.
+  *
+  * There is no guarantee that `this.state` will be immediately updated, so
+  * accessing `this.state` after calling this method may return the old value.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @param {object} completeState Next state.
+  * @internal
+  */
+ enqueueReplaceState: function (publicInstance, completeState) {
+   warnNoop(publicInstance, 'replaceState');
+ },
+
+ /**
+  * Sets a subset of the state. This only exists because _pendingState is
+  * internal. This provides a merging strategy that is not available to deep
+  * properties which is confusing. TODO: Expose pendingState or don't use it
+  * during the merge.
+  *
+  * @param {ReactClass} publicInstance The instance that should rerender.
+  * @param {object} partialState Next partial state to be merged with state.
+  * @internal
+  */
+ enqueueSetState: function (publicInstance, partialState) {
+   warnNoop(publicInstance, 'setState');
+ }
+};
+
+module.exports = ReactNoopUpdateQueue;
+},{"48":48}],22:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var ReactPropTypeLocationNames = {};
+
+if ("development" !== 'production') {
+ ReactPropTypeLocationNames = {
+   prop: 'prop',
+   context: 'context',
+   childContext: 'child context'
+ };
+}
+
+module.exports = ReactPropTypeLocationNames;
+},{}],23:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactElement = _dereq_(16);
+var ReactPropTypeLocationNames = _dereq_(22);
+var ReactPropTypesSecret = _dereq_(24);
+
+var emptyFunction = _dereq_(44);
+var getIteratorFn = _dereq_(36);
+var warning = _dereq_(48);
+
+/**
+* Collection of methods that allow declaration and validation of props that are
+* supplied to React components. Example usage:
+*
+*   var Props = require('ReactPropTypes');
+*   var MyArticle = React.createClass({
+*     propTypes: {
+*       // An optional string prop named "description".
+*       description: Props.string,
+*
+*       // A required enum prop named "category".
+*       category: Props.oneOf(['News','Photos']).isRequired,
+*
+*       // A prop named "dialog" that requires an instance of Dialog.
+*       dialog: Props.instanceOf(Dialog).isRequired
+*     },
+*     render: function() { ... }
+*   });
+*
+* A more formal specification of how these methods are used:
+*
+*   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+*   decl := ReactPropTypes.{type}(.isRequired)?
+*
+* Each and every declaration produces a function with the same signature. This
+* allows the creation of custom validation functions. For example:
+*
+*  var MyLink = React.createClass({
+*    propTypes: {
+*      // An optional string or URI prop named "href".
+*      href: function(props, propName, componentName) {
+*        var propValue = props[propName];
+*        if (propValue != null && typeof propValue !== 'string' &&
+*            !(propValue instanceof URI)) {
+*          return new Error(
+*            'Expected a string or an URI for ' + propName + ' in ' +
+*            componentName
+*          );
+*        }
+*      }
+*    },
+*    render: function() {...}
+*  });
+*
+* @internal
+*/
+
+var ANONYMOUS = '<<anonymous>>';
+
+var ReactPropTypes = {
+ array: createPrimitiveTypeChecker('array'),
+ bool: createPrimitiveTypeChecker('boolean'),
+ func: createPrimitiveTypeChecker('function'),
+ number: createPrimitiveTypeChecker('number'),
+ object: createPrimitiveTypeChecker('object'),
+ string: createPrimitiveTypeChecker('string'),
+ symbol: createPrimitiveTypeChecker('symbol'),
+
+ any: createAnyTypeChecker(),
+ arrayOf: createArrayOfTypeChecker,
+ element: createElementTypeChecker(),
+ instanceOf: createInstanceTypeChecker,
+ node: createNodeChecker(),
+ objectOf: createObjectOfTypeChecker,
+ oneOf: createEnumTypeChecker,
+ oneOfType: createUnionTypeChecker,
+ shape: createShapeTypeChecker
+};
+
+/**
+* inlined Object.is polyfill to avoid requiring consumers ship their own
+* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+*/
+/*eslint-disable no-self-compare*/
+function is(x, y) {
+ // SameValue algorithm
+ if (x === y) {
+   // Steps 1-5, 7-10
+   // Steps 6.b-6.e: +0 != -0
+   return x !== 0 || 1 / x === 1 / y;
+ } else {
+   // Step 6.a: NaN == NaN
+   return x !== x && y !== y;
+ }
+}
+/*eslint-enable no-self-compare*/
+
+/**
+* We use an Error-like object for backward compatibility as people may call
+* PropTypes directly and inspect their output. However we don't use real
+* Errors anymore. We don't inspect their stack anyway, and creating them
+* is prohibitively expensive if they are created too often, such as what
+* happens in oneOfType() for any type before the one that matched.
+*/
+function PropTypeError(message) {
+ this.message = message;
+ this.stack = '';
+}
+// Make `instanceof Error` still work for returned errors.
+PropTypeError.prototype = Error.prototype;
+
+function createChainableTypeChecker(validate) {
+ if ("development" !== 'production') {
+   var manualPropTypeCallCache = {};
+ }
+ function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+   componentName = componentName || ANONYMOUS;
+   propFullName = propFullName || propName;
+   if ("development" !== 'production') {
+     if (secret !== ReactPropTypesSecret && typeof console !== 'undefined') {
+       var cacheKey = componentName + ':' + propName;
+       if (!manualPropTypeCallCache[cacheKey]) {
+         "development" !== 'production' ? warning(false, 'You are manually calling a React.PropTypes validation ' + 'function for the `%s` prop on `%s`. This is deprecated ' + 'and will not work in production with the next major version. ' + 'You may be seeing this warning due to a third-party PropTypes ' + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', propFullName, componentName) : void 0;
+         manualPropTypeCallCache[cacheKey] = true;
+       }
+     }
+   }
+   if (props[propName] == null) {
+     var locationName = ReactPropTypeLocationNames[location];
+     if (isRequired) {
+       if (props[propName] === null) {
+         return new PropTypeError('The ' + locationName + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+       }
+       return new PropTypeError('The ' + locationName + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+     }
+     return null;
+   } else {
+     return validate(props, propName, componentName, location, propFullName);
+   }
+ }
+
+ var chainedCheckType = checkType.bind(null, false);
+ chainedCheckType.isRequired = checkType.bind(null, true);
+
+ return chainedCheckType;
+}
+
+function createPrimitiveTypeChecker(expectedType) {
+ function validate(props, propName, componentName, location, propFullName, secret) {
+   var propValue = props[propName];
+   var propType = getPropType(propValue);
+   if (propType !== expectedType) {
+     var locationName = ReactPropTypeLocationNames[location];
+     // `propValue` being instance of, say, date/regexp, pass the 'object'
+     // check, but we can offer a more precise error message here rather than
+     // 'of type `object`'.
+     var preciseType = getPreciseType(propValue);
+
+     return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+   }
+   return null;
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createAnyTypeChecker() {
+ return createChainableTypeChecker(emptyFunction.thatReturns(null));
+}
+
+function createArrayOfTypeChecker(typeChecker) {
+ function validate(props, propName, componentName, location, propFullName) {
+   if (typeof typeChecker !== 'function') {
+     return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+   }
+   var propValue = props[propName];
+   if (!Array.isArray(propValue)) {
+     var locationName = ReactPropTypeLocationNames[location];
+     var propType = getPropType(propValue);
+     return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+   }
+   for (var i = 0; i < propValue.length; i++) {
+     var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
+     if (error instanceof Error) {
+       return error;
+     }
+   }
+   return null;
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createElementTypeChecker() {
+ function validate(props, propName, componentName, location, propFullName) {
+   var propValue = props[propName];
+   if (!ReactElement.isValidElement(propValue)) {
+     var locationName = ReactPropTypeLocationNames[location];
+     var propType = getPropType(propValue);
+     return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+   }
+   return null;
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createInstanceTypeChecker(expectedClass) {
+ function validate(props, propName, componentName, location, propFullName) {
+   if (!(props[propName] instanceof expectedClass)) {
+     var locationName = ReactPropTypeLocationNames[location];
+     var expectedClassName = expectedClass.name || ANONYMOUS;
+     var actualClassName = getClassName(props[propName]);
+     return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+   }
+   return null;
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createEnumTypeChecker(expectedValues) {
+ if (!Array.isArray(expectedValues)) {
+   "development" !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0;
+   return emptyFunction.thatReturnsNull;
+ }
+
+ function validate(props, propName, componentName, location, propFullName) {
+   var propValue = props[propName];
+   for (var i = 0; i < expectedValues.length; i++) {
+     if (is(propValue, expectedValues[i])) {
+       return null;
+     }
+   }
+
+   var locationName = ReactPropTypeLocationNames[location];
+   var valuesString = JSON.stringify(expectedValues);
+   return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createObjectOfTypeChecker(typeChecker) {
+ function validate(props, propName, componentName, location, propFullName) {
+   if (typeof typeChecker !== 'function') {
+     return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+   }
+   var propValue = props[propName];
+   var propType = getPropType(propValue);
+   if (propType !== 'object') {
+     var locationName = ReactPropTypeLocationNames[location];
+     return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+   }
+   for (var key in propValue) {
+     if (propValue.hasOwnProperty(key)) {
+       var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+       if (error instanceof Error) {
+         return error;
+       }
+     }
+   }
+   return null;
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createUnionTypeChecker(arrayOfTypeCheckers) {
+ if (!Array.isArray(arrayOfTypeCheckers)) {
+   "development" !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
+   return emptyFunction.thatReturnsNull;
+ }
+
+ function validate(props, propName, componentName, location, propFullName) {
+   for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+     var checker = arrayOfTypeCheckers[i];
+     if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
+       return null;
+     }
+   }
+
+   var locationName = ReactPropTypeLocationNames[location];
+   return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createNodeChecker() {
+ function validate(props, propName, componentName, location, propFullName) {
+   if (!isNode(props[propName])) {
+     var locationName = ReactPropTypeLocationNames[location];
+     return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+   }
+   return null;
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function createShapeTypeChecker(shapeTypes) {
+ function validate(props, propName, componentName, location, propFullName) {
+   var propValue = props[propName];
+   var propType = getPropType(propValue);
+   if (propType !== 'object') {
+     var locationName = ReactPropTypeLocationNames[location];
+     return new PropTypeError('Invalid ' + locationName + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+   }
+   for (var key in shapeTypes) {
+     var checker = shapeTypes[key];
+     if (!checker) {
+       continue;
+     }
+     var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+     if (error) {
+       return error;
+     }
+   }
+   return null;
+ }
+ return createChainableTypeChecker(validate);
+}
+
+function isNode(propValue) {
+ switch (typeof propValue) {
+   case 'number':
+   case 'string':
+   case 'undefined':
+     return true;
+   case 'boolean':
+     return !propValue;
+   case 'object':
+     if (Array.isArray(propValue)) {
+       return propValue.every(isNode);
+     }
+     if (propValue === null || ReactElement.isValidElement(propValue)) {
+       return true;
+     }
+
+     var iteratorFn = getIteratorFn(propValue);
+     if (iteratorFn) {
+       var iterator = iteratorFn.call(propValue);
+       var step;
+       if (iteratorFn !== propValue.entries) {
+         while (!(step = iterator.next()).done) {
+           if (!isNode(step.value)) {
+             return false;
+           }
+         }
+       } else {
+         // Iterator will provide entry [k,v] tuples rather than values.
+         while (!(step = iterator.next()).done) {
+           var entry = step.value;
+           if (entry) {
+             if (!isNode(entry[1])) {
+               return false;
+             }
+           }
+         }
+       }
+     } else {
+       return false;
+     }
+
+     return true;
+   default:
+     return false;
+ }
+}
+
+function isSymbol(propType, propValue) {
+ // Native Symbol.
+ if (propType === 'symbol') {
+   return true;
+ }
+
+ // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+ if (propValue['@@toStringTag'] === 'Symbol') {
+   return true;
+ }
+
+ // Fallback for non-spec compliant Symbols which are polyfilled.
+ if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+   return true;
+ }
+
+ return false;
+}
+
+// Equivalent of `typeof` but with special handling for array and regexp.
+function getPropType(propValue) {
+ var propType = typeof propValue;
+ if (Array.isArray(propValue)) {
+   return 'array';
+ }
+ if (propValue instanceof RegExp) {
+   // Old webkits (at least until Android 4.0) return 'function' rather than
+   // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+   // passes PropTypes.object.
+   return 'object';
+ }
+ if (isSymbol(propType, propValue)) {
+   return 'symbol';
+ }
+ return propType;
+}
+
+// This handles more types than `getPropType`. Only used for error messages.
+// See `createPrimitiveTypeChecker`.
+function getPreciseType(propValue) {
+ var propType = getPropType(propValue);
+ if (propType === 'object') {
+   if (propValue instanceof Date) {
+     return 'date';
+   } else if (propValue instanceof RegExp) {
+     return 'regexp';
+   }
+ }
+ return propType;
+}
+
+// Returns class name of the object, if any.
+function getClassName(propValue) {
+ if (!propValue.constructor || !propValue.constructor.name) {
+   return ANONYMOUS;
+ }
+ return propValue.constructor.name;
+}
+
+module.exports = ReactPropTypes;
+},{"16":16,"22":22,"24":24,"36":36,"44":44,"48":48}],24:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+module.exports = ReactPropTypesSecret;
+},{}],25:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(49);
+
+var ReactComponent = _dereq_(11);
+var ReactNoopUpdateQueue = _dereq_(21);
+
+var emptyObject = _dereq_(45);
+
+/**
+* Base class helpers for the updating state of a component.
+*/
+function ReactPureComponent(props, context, updater) {
+ // Duplicated from ReactComponent.
+ this.props = props;
+ this.context = context;
+ this.refs = emptyObject;
+ // We initialize the default updater but the real one gets injected by the
+ // renderer.
+ this.updater = updater || ReactNoopUpdateQueue;
+}
+
+function ComponentDummy() {}
+ComponentDummy.prototype = ReactComponent.prototype;
+ReactPureComponent.prototype = new ComponentDummy();
+ReactPureComponent.prototype.constructor = ReactPureComponent;
+// Avoid an extra prototype jump for these methods.
+_assign(ReactPureComponent.prototype, ReactComponent.prototype);
+ReactPureComponent.prototype.isPureReactComponent = true;
+
+module.exports = ReactPureComponent;
+},{"11":11,"21":21,"45":45,"49":49}],26:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ReactStateSetters = {
+ /**
+  * Returns a function that calls the provided function, and uses the result
+  * of that to set the component's state.
+  *
+  * @param {ReactCompositeComponent} component
+  * @param {function} funcReturningState Returned callback uses this to
+  *                                      determine how to update state.
+  * @return {function} callback that when invoked uses funcReturningState to
+  *                    determined the object literal to setState.
+  */
+ createStateSetter: function (component, funcReturningState) {
+   return function (a, b, c, d, e, f) {
+     var partialState = funcReturningState.call(component, a, b, c, d, e, f);
+     if (partialState) {
+       component.setState(partialState);
+     }
+   };
+ },
+
+ /**
+  * Returns a single-argument callback that can be used to update a single
+  * key in the component's state.
+  *
+  * Note: this is memoized function, which makes it inexpensive to call.
+  *
+  * @param {ReactCompositeComponent} component
+  * @param {string} key The key in the state that you should update.
+  * @return {function} callback of 1 argument which calls setState() with
+  *                    the provided keyName and callback argument.
+  */
+ createStateKeySetter: function (component, key) {
+   // Memoize the setters.
+   var cache = component.__keySetters || (component.__keySetters = {});
+   return cache[key] || (cache[key] = createStateKeySetter(component, key));
+ }
+};
+
+function createStateKeySetter(component, key) {
+ // Partial state is allocated outside of the function closure so it can be
+ // reused with every call, avoiding memory allocation when this function
+ // is called.
+ var partialState = {};
+ return function stateKeySetter(value) {
+   partialState[key] = value;
+   component.setState(partialState);
+ };
+}
+
+ReactStateSetters.Mixin = {
+ /**
+  * Returns a function that calls the provided function, and uses the result
+  * of that to set the component's state.
+  *
+  * For example, these statements are equivalent:
+  *
+  *   this.setState({x: 1});
+  *   this.createStateSetter(function(xValue) {
+  *     return {x: xValue};
+  *   })(1);
+  *
+  * @param {function} funcReturningState Returned callback uses this to
+  *                                      determine how to update state.
+  * @return {function} callback that when invoked uses funcReturningState to
+  *                    determined the object literal to setState.
+  */
+ createStateSetter: function (funcReturningState) {
+   return ReactStateSetters.createStateSetter(this, funcReturningState);
+ },
+
+ /**
+  * Returns a single-argument callback that can be used to update a single
+  * key in the component's state.
+  *
+  * For example, these statements are equivalent:
+  *
+  *   this.setState({x: 1});
+  *   this.createStateKeySetter('x')(1);
+  *
+  * Note: this is memoized function, which makes it inexpensive to call.
+  *
+  * @param {string} key The key in the state that you should update.
+  * @return {function} callback of 1 argument which calls setState() with
+  *                    the provided keyName and callback argument.
+  */
+ createStateKeySetter: function (key) {
+   return ReactStateSetters.createStateKeySetter(this, key);
+ }
+};
+
+module.exports = ReactStateSetters;
+},{}],27:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var flattenChildren = _dereq_(35);
+
+var ReactTransitionChildMapping = {
+ /**
+  * Given `this.props.children`, return an object mapping key to child. Just
+  * simple syntactic sugar around flattenChildren().
+  *
+  * @param {*} children `this.props.children`
+  * @param {number=} selfDebugID Optional debugID of the current internal instance.
+  * @return {object} Mapping of key to child
+  */
+ getChildMapping: function (children, selfDebugID) {
+   if (!children) {
+     return children;
+   }
+
+   if ("development" !== 'production') {
+     return flattenChildren(children, selfDebugID);
+   }
+
+   return flattenChildren(children);
+ },
+
+ /**
+  * When you're adding or removing children some may be added or removed in the
+  * same render pass. We want to show *both* since we want to simultaneously
+  * animate elements in and out. This function takes a previous set of keys
+  * and a new set of keys and merges them with its best guess of the correct
+  * ordering. In the future we may expose some of the utilities in
+  * ReactMultiChild to make this easy, but for now React itself does not
+  * directly have this concept of the union of prevChildren and nextChildren
+  * so we implement it here.
+  *
+  * @param {object} prev prev children as returned from
+  * `ReactTransitionChildMapping.getChildMapping()`.
+  * @param {object} next next children as returned from
+  * `ReactTransitionChildMapping.getChildMapping()`.
+  * @return {object} a key set that contains all keys in `prev` and all keys
+  * in `next` in a reasonable order.
+  */
+ mergeChildMappings: function (prev, next) {
+   prev = prev || {};
+   next = next || {};
+
+   function getValueForKey(key) {
+     if (next.hasOwnProperty(key)) {
+       return next[key];
+     } else {
+       return prev[key];
+     }
+   }
+
+   // For each key of `next`, the list of keys to insert before that key in
+   // the combined list
+   var nextKeysPending = {};
+
+   var pendingKeys = [];
+   for (var prevKey in prev) {
+     if (next.hasOwnProperty(prevKey)) {
+       if (pendingKeys.length) {
+         nextKeysPending[prevKey] = pendingKeys;
+         pendingKeys = [];
+       }
+     } else {
+       pendingKeys.push(prevKey);
+     }
+   }
+
+   var i;
+   var childMapping = {};
+   for (var nextKey in next) {
+     if (nextKeysPending.hasOwnProperty(nextKey)) {
+       for (i = 0; i < nextKeysPending[nextKey].length; i++) {
+         var pendingNextKey = nextKeysPending[nextKey][i];
+         childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
+       }
+     }
+     childMapping[nextKey] = getValueForKey(nextKey);
+   }
+
+   // Finally, add the keys which didn't appear before any key in `next`
+   for (i = 0; i < pendingKeys.length; i++) {
+     childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+   }
+
+   return childMapping;
+ }
+};
+
+module.exports = ReactTransitionChildMapping;
+},{"35":35}],28:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var ExecutionEnvironment = _dereq_(43);
+
+var getVendorPrefixedEventName = _dereq_(1);
+
+var endEvents = [];
+
+function detectEvents() {
+ var animEnd = getVendorPrefixedEventName('animationend');
+ var transEnd = getVendorPrefixedEventName('transitionend');
+
+ if (animEnd) {
+   endEvents.push(animEnd);
+ }
+
+ if (transEnd) {
+   endEvents.push(transEnd);
+ }
+}
+
+if (ExecutionEnvironment.canUseDOM) {
+ detectEvents();
+}
+
+// We use the raw {add|remove}EventListener() call because EventListener
+// does not know how to remove event listeners and we really should
+// clean up. Also, these events are not triggered in older browsers
+// so we should be A-OK here.
+
+function addEventListener(node, eventName, eventListener) {
+ node.addEventListener(eventName, eventListener, false);
+}
+
+function removeEventListener(node, eventName, eventListener) {
+ node.removeEventListener(eventName, eventListener, false);
+}
+
+var ReactTransitionEvents = {
+ addEndEventListener: function (node, eventListener) {
+   if (endEvents.length === 0) {
+     // If CSS transitions are not supported, trigger an "end animation"
+     // event immediately.
+     window.setTimeout(eventListener, 0);
+     return;
+   }
+   endEvents.forEach(function (endEvent) {
+     addEventListener(node, endEvent, eventListener);
+   });
+ },
+
+ removeEndEventListener: function (node, eventListener) {
+   if (endEvents.length === 0) {
+     return;
+   }
+   endEvents.forEach(function (endEvent) {
+     removeEventListener(node, endEvent, eventListener);
+   });
+ }
+};
+
+module.exports = ReactTransitionEvents;
+},{"1":1,"43":43}],29:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(49);
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var React = _dereq_(5);
+var ReactAddonsDOMDependencies = _dereq_(6);
+var ReactTransitionChildMapping = _dereq_(27);
+
+var emptyFunction = _dereq_(44);
+
+/**
+* A basis for animations. When children are declaratively added or removed,
+* special lifecycle hooks are called.
+* See https://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup
+*/
+
+var ReactTransitionGroup = function (_React$Component) {
+ _inherits(ReactTransitionGroup, _React$Component);
+
+ function ReactTransitionGroup() {
+   var _temp, _this, _ret;
+
+   _classCallCheck(this, ReactTransitionGroup);
+
+   for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+     args[_key] = arguments[_key];
+   }
+
+   return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+     // TODO: can we get useful debug information to show at this point?
+     children: ReactTransitionChildMapping.getChildMapping(_this.props.children)
+   }, _this.performAppear = function (key) {
+     _this.currentlyTransitioningKeys[key] = true;
+
+     var component = _this.refs[key];
+
+     if (component.componentWillAppear) {
+       component.componentWillAppear(_this._handleDoneAppearing.bind(_this, key));
+     } else {
+       _this._handleDoneAppearing(key);
+     }
+   }, _this._handleDoneAppearing = function (key) {
+     var component = _this.refs[key];
+     if (component.componentDidAppear) {
+       component.componentDidAppear();
+     }
+
+     delete _this.currentlyTransitioningKeys[key];
+
+     var currentChildMapping;
+     if ("development" !== 'production') {
+       currentChildMapping = ReactTransitionChildMapping.getChildMapping(_this.props.children, ReactAddonsDOMDependencies.getReactInstanceMap().get(_this)._debugID);
+     } else {
+       currentChildMapping = ReactTransitionChildMapping.getChildMapping(_this.props.children);
+     }
+
+     if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
+       // This was removed before it had fully appeared. Remove it.
+       _this.performLeave(key);
+     }
+   }, _this.performEnter = function (key) {
+     _this.currentlyTransitioningKeys[key] = true;
+
+     var component = _this.refs[key];
+
+     if (component.componentWillEnter) {
+       component.componentWillEnter(_this._handleDoneEntering.bind(_this, key));
+     } else {
+       _this._handleDoneEntering(key);
+     }
+   }, _this._handleDoneEntering = function (key) {
+     var component = _this.refs[key];
+     if (component.componentDidEnter) {
+       component.componentDidEnter();
+     }
+
+     delete _this.currentlyTransitioningKeys[key];
+
+     var currentChildMapping;
+     if ("development" !== 'production') {
+       currentChildMapping = ReactTransitionChildMapping.getChildMapping(_this.props.children, ReactAddonsDOMDependencies.getReactInstanceMap().get(_this)._debugID);
+     } else {
+       currentChildMapping = ReactTransitionChildMapping.getChildMapping(_this.props.children);
+     }
+
+     if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
+       // This was removed before it had fully entered. Remove it.
+       _this.performLeave(key);
+     }
+   }, _this.performLeave = function (key) {
+     _this.currentlyTransitioningKeys[key] = true;
+
+     var component = _this.refs[key];
+     if (component.componentWillLeave) {
+       component.componentWillLeave(_this._handleDoneLeaving.bind(_this, key));
+     } else {
+       // Note that this is somewhat dangerous b/c it calls setState()
+       // again, effectively mutating the component before all the work
+       // is done.
+       _this._handleDoneLeaving(key);
+     }
+   }, _this._handleDoneLeaving = function (key) {
+     var component = _this.refs[key];
+
+     if (component.componentDidLeave) {
+       component.componentDidLeave();
+     }
+
+     delete _this.currentlyTransitioningKeys[key];
+
+     var currentChildMapping;
+     if ("development" !== 'production') {
+       currentChildMapping = ReactTransitionChildMapping.getChildMapping(_this.props.children, ReactAddonsDOMDependencies.getReactInstanceMap().get(_this)._debugID);
+     } else {
+       currentChildMapping = ReactTransitionChildMapping.getChildMapping(_this.props.children);
+     }
+
+     if (currentChildMapping && currentChildMapping.hasOwnProperty(key)) {
+       // This entered again before it fully left. Add it again.
+       _this.performEnter(key);
+     } else {
+       _this.setState(function (state) {
+         var newChildren = _assign({}, state.children);
+         delete newChildren[key];
+         return { children: newChildren };
+       });
+     }
+   }, _temp), _possibleConstructorReturn(_this, _ret);
+ }
+
+ ReactTransitionGroup.prototype.componentWillMount = function componentWillMount() {
+   this.currentlyTransitioningKeys = {};
+   this.keysToEnter = [];
+   this.keysToLeave = [];
+ };
+
+ ReactTransitionGroup.prototype.componentDidMount = function componentDidMount() {
+   var initialChildMapping = this.state.children;
+   for (var key in initialChildMapping) {
+     if (initialChildMapping[key]) {
+       this.performAppear(key);
+     }
+   }
+ };
+
+ ReactTransitionGroup.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+   var nextChildMapping;
+   if ("development" !== 'production') {
+     nextChildMapping = ReactTransitionChildMapping.getChildMapping(nextProps.children, ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID);
+   } else {
+     nextChildMapping = ReactTransitionChildMapping.getChildMapping(nextProps.children);
+   }
+   var prevChildMapping = this.state.children;
+
+   this.setState({
+     children: ReactTransitionChildMapping.mergeChildMappings(prevChildMapping, nextChildMapping)
+   });
+
+   var key;
+
+   for (key in nextChildMapping) {
+     var hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key);
+     if (nextChildMapping[key] && !hasPrev && !this.currentlyTransitioningKeys[key]) {
+       this.keysToEnter.push(key);
+     }
+   }
+
+   for (key in prevChildMapping) {
+     var hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(key);
+     if (prevChildMapping[key] && !hasNext && !this.currentlyTransitioningKeys[key]) {
+       this.keysToLeave.push(key);
+     }
+   }
+
+   // If we want to someday check for reordering, we could do it here.
+ };
+
+ ReactTransitionGroup.prototype.componentDidUpdate = function componentDidUpdate() {
+   var keysToEnter = this.keysToEnter;
+   this.keysToEnter = [];
+   keysToEnter.forEach(this.performEnter);
+
+   var keysToLeave = this.keysToLeave;
+   this.keysToLeave = [];
+   keysToLeave.forEach(this.performLeave);
+ };
+
+ ReactTransitionGroup.prototype.render = function render() {
+   // TODO: we could get rid of the need for the wrapper node
+   // by cloning a single child
+   var childrenToRender = [];
+   for (var key in this.state.children) {
+     var child = this.state.children[key];
+     if (child) {
+       // You may need to apply reactive updates to a child as it is leaving.
+       // The normal React way to do it won't work since the child will have
+       // already been removed. In case you need this behavior you can provide
+       // a childFactory function to wrap every child, even the ones that are
+       // leaving.
+       childrenToRender.push(React.cloneElement(this.props.childFactory(child), { ref: key, key: key }));
+     }
+   }
+
+   // Do not forward ReactTransitionGroup props to primitive DOM nodes
+   var props = _assign({}, this.props);
+   delete props.transitionLeave;
+   delete props.transitionName;
+   delete props.transitionAppear;
+   delete props.transitionEnter;
+   delete props.childFactory;
+   delete props.transitionLeaveTimeout;
+   delete props.transitionEnterTimeout;
+   delete props.transitionAppearTimeout;
+   delete props.component;
+
+   return React.createElement(this.props.component, props, childrenToRender);
+ };
+
+ return ReactTransitionGroup;
+}(React.Component);
+
+ReactTransitionGroup.displayName = 'ReactTransitionGroup';
+ReactTransitionGroup.propTypes = {
+ component: React.PropTypes.any,
+ childFactory: React.PropTypes.func
+};
+ReactTransitionGroup.defaultProps = {
+ component: 'span',
+ childFactory: emptyFunction.thatReturnsArgument
+};
+
+
+module.exports = ReactTransitionGroup;
+},{"27":27,"44":44,"49":49,"5":5,"6":6}],30:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+module.exports = '15.4.1';
+},{}],31:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var LinkedStateMixin = _dereq_(3);
+var React = _dereq_(5);
+var ReactAddonsDOMDependencies = _dereq_(6);
+var ReactComponentWithPureRenderMixin = _dereq_(13);
+var ReactCSSTransitionGroup = _dereq_(7);
+var ReactFragment = _dereq_(19);
+var ReactTransitionGroup = _dereq_(29);
+
+var shallowCompare = _dereq_(39);
+var update = _dereq_(41);
+
+React.addons = {
+ CSSTransitionGroup: ReactCSSTransitionGroup,
+ LinkedStateMixin: LinkedStateMixin,
+ PureRenderMixin: ReactComponentWithPureRenderMixin,
+ TransitionGroup: ReactTransitionGroup,
+
+ createFragment: ReactFragment.create,
+ shallowCompare: shallowCompare,
+ update: update
+};
+
+if ("development" !== 'production') {
+ // For the UMD build we get these lazily from the global since they're tied
+ // to the DOM renderer and it hasn't loaded yet.
+ Object.defineProperty(React.addons, 'Perf', {
+   enumerable: true,
+   get: function () {
+     return ReactAddonsDOMDependencies.getReactPerf();
+   }
+ });
+ Object.defineProperty(React.addons, 'TestUtils', {
+   enumerable: true,
+   get: function () {
+     return ReactAddonsDOMDependencies.getReactTestUtils();
+   }
+ });
+}
+
+module.exports = React;
+},{"13":13,"19":19,"29":29,"3":3,"39":39,"41":41,"5":5,"6":6,"7":7}],32:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _assign = _dereq_(49);
+
+var ReactWithAddons = _dereq_(31);
+
+// `version` will be added here by the React module.
+var ReactWithAddonsUMDEntry = _assign({
+ __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
+   ReactCurrentOwner: _dereq_(14)
+ }
+}, ReactWithAddons);
+
+if ("development" !== 'production') {
+ _assign(ReactWithAddonsUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, {
+   // ReactComponentTreeHook should not be included in production.
+   ReactComponentTreeHook: _dereq_(12)
+ });
+}
+
+module.exports = ReactWithAddonsUMDEntry;
+},{"12":12,"14":14,"31":31,"49":49}],33:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var canDefineProperty = false;
+if ("development" !== 'production') {
+ try {
+   // $FlowFixMe https://github.com/facebook/flow/issues/285
+   Object.defineProperty({}, 'x', { get: function () {} });
+   canDefineProperty = true;
+ } catch (x) {
+   // IE will fail on defineProperty
+ }
+}
+
+module.exports = canDefineProperty;
+},{}],34:[function(_dereq_,module,exports){
+(function (process){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(38);
+
+var ReactPropTypeLocationNames = _dereq_(22);
+var ReactPropTypesSecret = _dereq_(24);
+
+var invariant = _dereq_(46);
+var warning = _dereq_(48);
+
+var ReactComponentTreeHook;
+
+if (typeof process !== 'undefined' && process.env && "development" === 'test') {
+ // Temporary hack.
+ // Inline requires don't work well with Jest:
+ // https://github.com/facebook/react/issues/7240
+ // Remove the inline requires when we don't need them anymore:
+ // https://github.com/facebook/react/pull/7178
+ ReactComponentTreeHook = _dereq_(12);
+}
+
+var loggedTypeFailures = {};
+
+/**
+* Assert that the values match with the type specs.
+* Error messages are memorized and will only be shown once.
+*
+* @param {object} typeSpecs Map of name to a ReactPropType
+* @param {object} values Runtime values that need to be type-checked
+* @param {string} location e.g. "prop", "context", "child context"
+* @param {string} componentName Name of the component for error messages.
+* @param {?object} element The React element that is being type-checked
+* @param {?number} debugID The React component instance that is being type-checked
+* @private
+*/
+function checkReactTypeSpec(typeSpecs, values, location, componentName, element, debugID) {
+ for (var typeSpecName in typeSpecs) {
+   if (typeSpecs.hasOwnProperty(typeSpecName)) {
+     var error;
+     // Prop type validation may throw. In case they do, we don't want to
+     // fail the render phase where it didn't fail before. So we log it.
+     // After these have been cleaned up, we'll let them throw.
+     try {
+       // This is intentionally an invariant that gets caught. It's the same
+       // behavior as without this statement except with a better message.
+       !(typeof typeSpecs[typeSpecName] === 'function') ? "development" !== 'production' ? invariant(false, '%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.', componentName || 'React class', ReactPropTypeLocationNames[location], typeSpecName) : _prodInvariant('84', componentName || 'React class', ReactPropTypeLocationNames[location], typeSpecName) : void 0;
+       error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
+     } catch (ex) {
+       error = ex;
+     }
+     "development" !== 'production' ? warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', ReactPropTypeLocationNames[location], typeSpecName, typeof error) : void 0;
+     if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+       // Only monitor this failure once because there tends to be a lot of the
+       // same error.
+       loggedTypeFailures[error.message] = true;
+
+       var componentStackInfo = '';
+
+       if ("development" !== 'production') {
+         if (!ReactComponentTreeHook) {
+           ReactComponentTreeHook = _dereq_(12);
+         }
+         if (debugID !== null) {
+           componentStackInfo = ReactComponentTreeHook.getStackAddendumByID(debugID);
+         } else if (element !== null) {
+           componentStackInfo = ReactComponentTreeHook.getCurrentStackAddendum(element);
+         }
+       }
+
+       "development" !== 'production' ? warning(false, 'Failed %s type: %s%s', location, error.message, componentStackInfo) : void 0;
+     }
+   }
+ }
+}
+
+module.exports = checkReactTypeSpec;
+}).call(this,undefined)
+},{"12":12,"22":22,"24":24,"38":38,"46":46,"48":48}],35:[function(_dereq_,module,exports){
+(function (process){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+var KeyEscapeUtils = _dereq_(2);
+var traverseAllChildren = _dereq_(40);
+var warning = _dereq_(48);
+
+var ReactComponentTreeHook;
+
+if (typeof process !== 'undefined' && process.env && "development" === 'test') {
+ // Temporary hack.
+ // Inline requires don't work well with Jest:
+ // https://github.com/facebook/react/issues/7240
+ // Remove the inline requires when we don't need them anymore:
+ // https://github.com/facebook/react/pull/7178
+ ReactComponentTreeHook = _dereq_(12);
+}
+
+/**
+* @param {function} traverseContext Context passed through traversal.
+* @param {?ReactComponent} child React child component.
+* @param {!string} name String name of key path to child.
+* @param {number=} selfDebugID Optional debugID of the current internal instance.
+*/
+function flattenSingleChildIntoContext(traverseContext, child, name, selfDebugID) {
+ // We found a component instance.
+ if (traverseContext && typeof traverseContext === 'object') {
+   var result = traverseContext;
+   var keyUnique = result[name] === undefined;
+   if ("development" !== 'production') {
+     if (!ReactComponentTreeHook) {
+       ReactComponentTreeHook = _dereq_(12);
+     }
+     if (!keyUnique) {
+       "development" !== 'production' ? warning(false, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.%s', KeyEscapeUtils.unescape(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID)) : void 0;
+     }
+   }
+   if (keyUnique && child != null) {
+     result[name] = child;
+   }
+ }
+}
+
+/**
+* Flattens children that are typically specified as `props.children`. Any null
+* children will not be included in the resulting object.
+* @return {!object} flattened children keyed by name.
+*/
+function flattenChildren(children, selfDebugID) {
+ if (children == null) {
+   return children;
+ }
+ var result = {};
+
+ if ("development" !== 'production') {
+   traverseAllChildren(children, function (traverseContext, child, name) {
+     return flattenSingleChildIntoContext(traverseContext, child, name, selfDebugID);
+   }, result);
+ } else {
+   traverseAllChildren(children, flattenSingleChildIntoContext, result);
+ }
+ return result;
+}
+
+module.exports = flattenChildren;
+}).call(this,undefined)
+},{"12":12,"2":2,"40":40,"48":48}],36:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+'use strict';
+
+/* global Symbol */
+
+var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+/**
+* Returns the iterator method function contained on the iterable object.
+*
+* Be sure to invoke the function with the iterable as context:
+*
+*     var iteratorFn = getIteratorFn(myIterable);
+*     if (iteratorFn) {
+*       var iterator = iteratorFn.call(myIterable);
+*       ...
+*     }
+*
+* @param {?object} maybeIterable
+* @return {?function}
+*/
+function getIteratorFn(maybeIterable) {
+ var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+ if (typeof iteratorFn === 'function') {
+   return iteratorFn;
+ }
+}
+
+module.exports = getIteratorFn;
+},{}],37:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+'use strict';
+
+var _prodInvariant = _dereq_(38);
+
+var ReactElement = _dereq_(16);
+
+var invariant = _dereq_(46);
+
+/**
+* Returns the first child in a collection of children and verifies that there
+* is only one child in the collection.
+*
+* See https://facebook.github.io/react/docs/top-level-api.html#react.children.only
+*
+* The current implementation of this function assumes that a single child gets
+* passed without a wrapper, but the purpose of this helper function is to
+* abstract away the particular structure of children.
+*
+* @param {?object} children Child collection structure.
+* @return {ReactElement} The first and only `ReactElement` contained in the
+* structure.
+*/
+function onlyChild(children) {
+ !ReactElement.isValidElement(children) ? "development" !== 'production' ? invariant(false, 'React.Children.only expected to receive a single React element child.') : _prodInvariant('143') : void 0;
+ return children;
+}
+
+module.exports = onlyChild;
+},{"16":16,"38":38,"46":46}],38:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+'use strict';
+
+/**
+* WARNING: DO NOT manually require this module.
+* This is a replacement for `invariant(...)` used by the error code system
+* and will _only_ be required by the corresponding babel pass.
+* It always throws.
+*/
+
+function reactProdInvariant(code) {
+ var argCount = arguments.length - 1;
+
+ var message = 'Minified React error #' + code + '; visit ' + 'http://facebook.github.io/react/docs/error-decoder.html?invariant=' + code;
+
+ for (var argIdx = 0; argIdx < argCount; argIdx++) {
+   message += '&args[]=' + encodeURIComponent(arguments[argIdx + 1]);
+ }
+
+ message += ' for the full message or use the non-minified dev environment' + ' for full errors and additional helpful warnings.';
+
+ var error = new Error(message);
+ error.name = 'Invariant Violation';
+ error.framesToPop = 1; // we don't care about reactProdInvariant's own frame
+
+ throw error;
+}
+
+module.exports = reactProdInvariant;
+},{}],39:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var shallowEqual = _dereq_(47);
+
+/**
+* Does a shallow comparison for props and state.
+* See ReactComponentWithPureRenderMixin
+* See also https://facebook.github.io/react/docs/shallow-compare.html
+*/
+function shallowCompare(instance, nextProps, nextState) {
+ return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
+}
+
+module.exports = shallowCompare;
+},{"47":47}],40:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var _prodInvariant = _dereq_(38);
+
+var ReactCurrentOwner = _dereq_(14);
+var REACT_ELEMENT_TYPE = _dereq_(17);
+
+var getIteratorFn = _dereq_(36);
+var invariant = _dereq_(46);
+var KeyEscapeUtils = _dereq_(2);
+var warning = _dereq_(48);
+
+var SEPARATOR = '.';
+var SUBSEPARATOR = ':';
+
+/**
+* This is inlined from ReactElement since this file is shared between
+* isomorphic and renderers. We could extract this to a
+*
+*/
+
+/**
+* TODO: Test that a single child and an array with one item have the same key
+* pattern.
+*/
+
+var didWarnAboutMaps = false;
+
+/**
+* Generate a key string that identifies a component within a set.
+*
+* @param {*} component A component that could contain a manual key.
+* @param {number} index Index that is used if a manual key is not provided.
+* @return {string}
+*/
+function getComponentKey(component, index) {
+ // Do some typechecking here since we call this blindly. We want to ensure
+ // that we don't block potential future ES APIs.
+ if (component && typeof component === 'object' && component.key != null) {
+   // Explicit key
+   return KeyEscapeUtils.escape(component.key);
+ }
+ // Implicit key determined by the index in the set
+ return index.toString(36);
+}
+
+/**
+* @param {?*} children Children tree container.
+* @param {!string} nameSoFar Name of the key path so far.
+* @param {!function} callback Callback to invoke with each child found.
+* @param {?*} traverseContext Used to pass information throughout the traversal
+* process.
+* @return {!number} The number of children in this subtree.
+*/
+function traverseAllChildrenImpl(children, nameSoFar, callback, traverseContext) {
+ var type = typeof children;
+
+ if (type === 'undefined' || type === 'boolean') {
+   // All of the above are perceived as null.
+   children = null;
+ }
+
+ if (children === null || type === 'string' || type === 'number' ||
+ // The following is inlined from ReactElement. This means we can optimize
+ // some checks. React Fiber also inlines this logic for similar purposes.
+ type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE) {
+   callback(traverseContext, children,
+   // If it's the only child, treat the name as if it was wrapped in an array
+   // so that it's consistent if the number of children grows.
+   nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar);
+   return 1;
+ }
+
+ var child;
+ var nextName;
+ var subtreeCount = 0; // Count of children found in the current subtree.
+ var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
+
+ if (Array.isArray(children)) {
+   for (var i = 0; i < children.length; i++) {
+     child = children[i];
+     nextName = nextNamePrefix + getComponentKey(child, i);
+     subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
+   }
+ } else {
+   var iteratorFn = getIteratorFn(children);
+   if (iteratorFn) {
+     var iterator = iteratorFn.call(children);
+     var step;
+     if (iteratorFn !== children.entries) {
+       var ii = 0;
+       while (!(step = iterator.next()).done) {
+         child = step.value;
+         nextName = nextNamePrefix + getComponentKey(child, ii++);
+         subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
+       }
+     } else {
+       if ("development" !== 'production') {
+         var mapsAsChildrenAddendum = '';
+         if (ReactCurrentOwner.current) {
+           var mapsAsChildrenOwnerName = ReactCurrentOwner.current.getName();
+           if (mapsAsChildrenOwnerName) {
+             mapsAsChildrenAddendum = ' Check the render method of `' + mapsAsChildrenOwnerName + '`.';
+           }
+         }
+         "development" !== 'production' ? warning(didWarnAboutMaps, 'Using Maps as children is not yet fully supported. It is an ' + 'experimental feature that might be removed. Convert it to a ' + 'sequence / iterable of keyed ReactElements instead.%s', mapsAsChildrenAddendum) : void 0;
+         didWarnAboutMaps = true;
+       }
+       // Iterator will provide entry [k,v] tuples rather than values.
+       while (!(step = iterator.next()).done) {
+         var entry = step.value;
+         if (entry) {
+           child = entry[1];
+           nextName = nextNamePrefix + KeyEscapeUtils.escape(entry[0]) + SUBSEPARATOR + getComponentKey(child, 0);
+           subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
+         }
+       }
+     }
+   } else if (type === 'object') {
+     var addendum = '';
+     if ("development" !== 'production') {
+       addendum = ' If you meant to render a collection of children, use an array ' + 'instead or wrap the object using createFragment(object) from the ' + 'React add-ons.';
+       if (children._isReactElement) {
+         addendum = ' It looks like you\'re using an element created by a different ' + 'version of React. Make sure to use only one copy of React.';
+       }
+       if (ReactCurrentOwner.current) {
+         var name = ReactCurrentOwner.current.getName();
+         if (name) {
+           addendum += ' Check the render method of `' + name + '`.';
+         }
+       }
+     }
+     var childrenString = String(children);
+     !false ? "development" !== 'production' ? invariant(false, 'Objects are not valid as a React child (found: %s).%s', childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString, addendum) : _prodInvariant('31', childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString, addendum) : void 0;
+   }
+ }
+
+ return subtreeCount;
+}
+
+/**
+* Traverses children that are typically specified as `props.children`, but
+* might also be specified through attributes:
+*
+* - `traverseAllChildren(this.props.children, ...)`
+* - `traverseAllChildren(this.props.leftPanelChildren, ...)`
+*
+* The `traverseContext` is an optional argument that is passed through the
+* entire traversal. It can be used to store accumulations or anything else that
+* the callback might find relevant.
+*
+* @param {?*} children Children tree object.
+* @param {!function} callback To invoke upon traversing each child.
+* @param {?*} traverseContext Context for traversal.
+* @return {!number} The number of children in this subtree.
+*/
+function traverseAllChildren(children, callback, traverseContext) {
+ if (children == null) {
+   return 0;
+ }
+
+ return traverseAllChildrenImpl(children, '', callback, traverseContext);
+}
+
+module.exports = traverseAllChildren;
+},{"14":14,"17":17,"2":2,"36":36,"38":38,"46":46,"48":48}],41:[function(_dereq_,module,exports){
+/**
+* Copyright 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+/* global hasOwnProperty:true */
+
+'use strict';
+
+var _prodInvariant = _dereq_(38),
+   _assign = _dereq_(49);
+
+var invariant = _dereq_(46);
+var hasOwnProperty = {}.hasOwnProperty;
+
+function shallowCopy(x) {
+ if (Array.isArray(x)) {
+   return x.concat();
+ } else if (x && typeof x === 'object') {
+   return _assign(new x.constructor(), x);
+ } else {
+   return x;
+ }
+}
+
+var COMMAND_PUSH = '$push';
+var COMMAND_UNSHIFT = '$unshift';
+var COMMAND_SPLICE = '$splice';
+var COMMAND_SET = '$set';
+var COMMAND_MERGE = '$merge';
+var COMMAND_APPLY = '$apply';
+
+var ALL_COMMANDS_LIST = [COMMAND_PUSH, COMMAND_UNSHIFT, COMMAND_SPLICE, COMMAND_SET, COMMAND_MERGE, COMMAND_APPLY];
+
+var ALL_COMMANDS_SET = {};
+
+ALL_COMMANDS_LIST.forEach(function (command) {
+ ALL_COMMANDS_SET[command] = true;
+});
+
+function invariantArrayCase(value, spec, command) {
+ !Array.isArray(value) ? "development" !== 'production' ? invariant(false, 'update(): expected target of %s to be an array; got %s.', command, value) : _prodInvariant('1', command, value) : void 0;
+ var specValue = spec[command];
+ !Array.isArray(specValue) ? "development" !== 'production' ? invariant(false, 'update(): expected spec of %s to be an array; got %s. Did you forget to wrap your parameter in an array?', command, specValue) : _prodInvariant('2', command, specValue) : void 0;
+}
+
+/**
+* Returns a updated shallow copy of an object without mutating the original.
+* See https://facebook.github.io/react/docs/update.html for details.
+*/
+function update(value, spec) {
+ !(typeof spec === 'object') ? "development" !== 'production' ? invariant(false, 'update(): You provided a key path to update() that did not contain one of %s. Did you forget to include {%s: ...}?', ALL_COMMANDS_LIST.join(', '), COMMAND_SET) : _prodInvariant('3', ALL_COMMANDS_LIST.join(', '), COMMAND_SET) : void 0;
+
+ if (hasOwnProperty.call(spec, COMMAND_SET)) {
+   !(Object.keys(spec).length === 1) ? "development" !== 'production' ? invariant(false, 'Cannot have more than one key in an object with %s', COMMAND_SET) : _prodInvariant('4', COMMAND_SET) : void 0;
+
+   return spec[COMMAND_SET];
+ }
+
+ var nextValue = shallowCopy(value);
+
+ if (hasOwnProperty.call(spec, COMMAND_MERGE)) {
+   var mergeObj = spec[COMMAND_MERGE];
+   !(mergeObj && typeof mergeObj === 'object') ? "development" !== 'production' ? invariant(false, 'update(): %s expects a spec of type \'object\'; got %s', COMMAND_MERGE, mergeObj) : _prodInvariant('5', COMMAND_MERGE, mergeObj) : void 0;
+   !(nextValue && typeof nextValue === 'object') ? "development" !== 'production' ? invariant(false, 'update(): %s expects a target of type \'object\'; got %s', COMMAND_MERGE, nextValue) : _prodInvariant('6', COMMAND_MERGE, nextValue) : void 0;
+   _assign(nextValue, spec[COMMAND_MERGE]);
+ }
+
+ if (hasOwnProperty.call(spec, COMMAND_PUSH)) {
+   invariantArrayCase(value, spec, COMMAND_PUSH);
+   spec[COMMAND_PUSH].forEach(function (item) {
+     nextValue.push(item);
+   });
+ }
+
+ if (hasOwnProperty.call(spec, COMMAND_UNSHIFT)) {
+   invariantArrayCase(value, spec, COMMAND_UNSHIFT);
+   spec[COMMAND_UNSHIFT].forEach(function (item) {
+     nextValue.unshift(item);
+   });
+ }
+
+ if (hasOwnProperty.call(spec, COMMAND_SPLICE)) {
+   !Array.isArray(value) ? "development" !== 'production' ? invariant(false, 'Expected %s target to be an array; got %s', COMMAND_SPLICE, value) : _prodInvariant('7', COMMAND_SPLICE, value) : void 0;
+   !Array.isArray(spec[COMMAND_SPLICE]) ? "development" !== 'production' ? invariant(false, 'update(): expected spec of %s to be an array of arrays; got %s. Did you forget to wrap your parameters in an array?', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : _prodInvariant('8', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : void 0;
+   spec[COMMAND_SPLICE].forEach(function (args) {
+     !Array.isArray(args) ? "development" !== 'production' ? invariant(false, 'update(): expected spec of %s to be an array of arrays; got %s. Did you forget to wrap your parameters in an array?', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : _prodInvariant('8', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : void 0;
+     nextValue.splice.apply(nextValue, args);
+   });
+ }
+
+ if (hasOwnProperty.call(spec, COMMAND_APPLY)) {
+   !(typeof spec[COMMAND_APPLY] === 'function') ? "development" !== 'production' ? invariant(false, 'update(): expected spec of %s to be a function; got %s.', COMMAND_APPLY, spec[COMMAND_APPLY]) : _prodInvariant('9', COMMAND_APPLY, spec[COMMAND_APPLY]) : void 0;
+   nextValue = spec[COMMAND_APPLY](nextValue);
+ }
+
+ for (var k in spec) {
+   if (!(ALL_COMMANDS_SET.hasOwnProperty(k) && ALL_COMMANDS_SET[k])) {
+     nextValue[k] = update(value[k], spec[k]);
+   }
+ }
+
+ return nextValue;
+}
+
+module.exports = update;
+},{"38":38,"46":46,"49":49}],42:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*/
+
+var invariant = _dereq_(46);
+
+/**
+* The CSSCore module specifies the API (and implements most of the methods)
+* that should be used when dealing with the display of elements (via their
+* CSS classes and visibility on screen. It is an API focused on mutating the
+* display and not reading it as no logical state should be encoded in the
+* display of elements.
+*/
+
+/* Slow implementation for browsers that don't natively support .matches() */
+function matchesSelector_SLOW(element, selector) {
+ var root = element;
+ while (root.parentNode) {
+   root = root.parentNode;
+ }
+
+ var all = root.querySelectorAll(selector);
+ return Array.prototype.indexOf.call(all, element) !== -1;
+}
+
+var CSSCore = {
+
+ /**
+  * Adds the class passed in to the element if it doesn't already have it.
+  *
+  * @param {DOMElement} element the element to set the class on
+  * @param {string} className the CSS className
+  * @return {DOMElement} the element passed in
+  */
+ addClass: function addClass(element, className) {
+   !!/\s/.test(className) ? "development" !== 'production' ? invariant(false, 'CSSCore.addClass takes only a single class name. "%s" contains ' + 'multiple classes.', className) : invariant(false) : void 0;
+
+   if (className) {
+     if (element.classList) {
+       element.classList.add(className);
+     } else if (!CSSCore.hasClass(element, className)) {
+       element.className = element.className + ' ' + className;
+     }
+   }
+   return element;
+ },
+
+ /**
+  * Removes the class passed in from the element
+  *
+  * @param {DOMElement} element the element to set the class on
+  * @param {string} className the CSS className
+  * @return {DOMElement} the element passed in
+  */
+ removeClass: function removeClass(element, className) {
+   !!/\s/.test(className) ? "development" !== 'production' ? invariant(false, 'CSSCore.removeClass takes only a single class name. "%s" contains ' + 'multiple classes.', className) : invariant(false) : void 0;
+
+   if (className) {
+     if (element.classList) {
+       element.classList.remove(className);
+     } else if (CSSCore.hasClass(element, className)) {
+       element.className = element.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)', 'g'), '$1').replace(/\s+/g, ' ') // multiple spaces to one
+       .replace(/^\s*|\s*$/g, ''); // trim the ends
+     }
+   }
+   return element;
+ },
+
+ /**
+  * Helper to add or remove a class from an element based on a condition.
+  *
+  * @param {DOMElement} element the element to set the class on
+  * @param {string} className the CSS className
+  * @param {*} bool condition to whether to add or remove the class
+  * @return {DOMElement} the element passed in
+  */
+ conditionClass: function conditionClass(element, className, bool) {
+   return (bool ? CSSCore.addClass : CSSCore.removeClass)(element, className);
+ },
+
+ /**
+  * Tests whether the element has the class specified.
+  *
+  * @param {DOMNode|DOMWindow} element the element to check the class on
+  * @param {string} className the CSS className
+  * @return {boolean} true if the element has the class, false if not
+  */
+ hasClass: function hasClass(element, className) {
+   !!/\s/.test(className) ? "development" !== 'production' ? invariant(false, 'CSS.hasClass takes only a single class name.') : invariant(false) : void 0;
+   if (element.classList) {
+     return !!className && element.classList.contains(className);
+   }
+   return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
+ },
+
+ /**
+  * Tests whether the element matches the selector specified
+  *
+  * @param {DOMNode|DOMWindow} element the element that we are querying
+  * @param {string} selector the CSS selector
+  * @return {boolean} true if the element matches the selector, false if not
+  */
+ matchesSelector: function matchesSelector(element, selector) {
+   var matchesImpl = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector || function (s) {
+     return matchesSelector_SLOW(element, s);
+   };
+   return matchesImpl.call(element, selector);
+ }
+
+};
+
+module.exports = CSSCore;
+},{"46":46}],43:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+/**
+* Simple, lightweight module assisting with the detection and context of
+* Worker. Helps avoid circular dependencies and allows code to reason about
+* whether or not they are in a Worker, even if they never include the main
+* `ReactWorker` dependency.
+*/
+var ExecutionEnvironment = {
+
+ canUseDOM: canUseDOM,
+
+ canUseWorkers: typeof Worker !== 'undefined',
+
+ canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
+
+ canUseViewport: canUseDOM && !!window.screen,
+
+ isInWorker: !canUseDOM // For now, this is true - might change in the future.
+
+};
+
+module.exports = ExecutionEnvironment;
+},{}],44:[function(_dereq_,module,exports){
+"use strict";
+
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*
+*/
+
+function makeEmptyFunction(arg) {
+ return function () {
+   return arg;
+ };
+}
+
+/**
+* This function accepts and discards inputs; it has no side effects. This is
+* primarily useful idiomatically for overridable function endpoints which
+* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
+*/
+var emptyFunction = function emptyFunction() {};
+
+emptyFunction.thatReturns = makeEmptyFunction;
+emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
+emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
+emptyFunction.thatReturnsNull = makeEmptyFunction(null);
+emptyFunction.thatReturnsThis = function () {
+ return this;
+};
+emptyFunction.thatReturnsArgument = function (arg) {
+ return arg;
+};
+
+module.exports = emptyFunction;
+},{}],45:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var emptyObject = {};
+
+if ("development" !== 'production') {
+ Object.freeze(emptyObject);
+}
+
+module.exports = emptyObject;
+},{}],46:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+/**
+* Use invariant() to assert state which your program assumes to be true.
+*
+* Provide sprintf-style format (only %s is supported) and arguments
+* to provide information about what broke and what you were
+* expecting.
+*
+* The invariant message will be stripped in production, but the invariant
+* will remain to ensure logic does not differ in production.
+*/
+
+function invariant(condition, format, a, b, c, d, e, f) {
+ if ("development" !== 'production') {
+   if (format === undefined) {
+     throw new Error('invariant requires an error message argument');
+   }
+ }
+
+ if (!condition) {
+   var error;
+   if (format === undefined) {
+     error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+   } else {
+     var args = [a, b, c, d, e, f];
+     var argIndex = 0;
+     error = new Error(format.replace(/%s/g, function () {
+       return args[argIndex++];
+     }));
+     error.name = 'Invariant Violation';
+   }
+
+   error.framesToPop = 1; // we don't care about invariant's own frame
+   throw error;
+ }
+}
+
+module.exports = invariant;
+},{}],47:[function(_dereq_,module,exports){
+/**
+* Copyright (c) 2013-present, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+* @typechecks
+*
+*/
+
+/*eslint-disable no-self-compare */
+
+'use strict';
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+* inlined Object.is polyfill to avoid requiring consumers ship their own
+* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+*/
+function is(x, y) {
+ // SameValue algorithm
+ if (x === y) {
+   // Steps 1-5, 7-10
+   // Steps 6.b-6.e: +0 != -0
+   // Added the nonzero y check to make Flow happy, but it is redundant
+   return x !== 0 || y !== 0 || 1 / x === 1 / y;
+ } else {
+   // Step 6.a: NaN == NaN
+   return x !== x && y !== y;
+ }
+}
+
+/**
+* Performs equality by iterating through keys on an object and returning false
+* when any key has values which are not strictly equal between the arguments.
+* Returns true when the values of all keys are strictly equal.
+*/
+function shallowEqual(objA, objB) {
+ if (is(objA, objB)) {
+   return true;
+ }
+
+ if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+   return false;
+ }
+
+ var keysA = Object.keys(objA);
+ var keysB = Object.keys(objB);
+
+ if (keysA.length !== keysB.length) {
+   return false;
+ }
+
+ // Test for A's keys different from B.
+ for (var i = 0; i < keysA.length; i++) {
+   if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+     return false;
+   }
+ }
+
+ return true;
+}
+
+module.exports = shallowEqual;
+},{}],48:[function(_dereq_,module,exports){
+/**
+* Copyright 2014-2015, Facebook, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree. An additional grant
+* of patent rights can be found in the PATENTS file in the same directory.
+*
+*/
+
+'use strict';
+
+var emptyFunction = _dereq_(44);
+
+/**
+* Similar to invariant but only logs a warning if the condition is not met.
+* This can be used to log issues in development environments in critical
+* paths. Removing the logging code for production environments will keep the
+* same logic and follow the same code paths.
+*/
+
+var warning = emptyFunction;
+
+if ("development" !== 'production') {
+ (function () {
+   var printWarning = function printWarning(format) {
+     for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+       args[_key - 1] = arguments[_key];
+     }
+
+     var argIndex = 0;
+     var message = 'Warning: ' + format.replace(/%s/g, function () {
+       return args[argIndex++];
+     });
+     if (typeof console !== 'undefined') {
+       console.error(message);
+     }
+     try {
+       // --- Welcome to debugging React ---
+       // This error was thrown as a convenience so that you can use this stack
+       // to find the callsite that caused this warning to fire.
+       throw new Error(message);
+     } catch (x) {}
+   };
+
+   warning = function warning(condition, format) {
+     if (format === undefined) {
+       throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
+     }
+
+     if (format.indexOf('Failed Composite propType: ') === 0) {
+       return; // Ignore CompositeComponent proptype check.
+     }
+
+     if (!condition) {
+       for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+         args[_key2 - 2] = arguments[_key2];
+       }
+
+       printWarning.apply(undefined, [format].concat(args));
+     }
+   };
+ })();
+}
+
+module.exports = warning;
+},{"44":44}],49:[function(_dereq_,module,exports){
+'use strict';
+/* eslint-disable no-unused-vars */
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+ if (val === null || val === undefined) {
+   throw new TypeError('Object.assign cannot be called with null or undefined');
+ }
+
+ return Object(val);
+}
+
+function shouldUseNative() {
+ try {
+   if (!Object.assign) {
+     return false;
+   }
+
+   // Detect buggy property enumeration order in older V8 versions.
+
+   // https://bugs.chromium.org/p/v8/issues/detail?id=4118
+   var test1 = new String('abc');  // eslint-disable-line
+   test1[5] = 'de';
+   if (Object.getOwnPropertyNames(test1)[0] === '5') {
+     return false;
+   }
+
+   // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+   var test2 = {};
+   for (var i = 0; i < 10; i++) {
+     test2['_' + String.fromCharCode(i)] = i;
+   }
+   var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+     return test2[n];
+   });
+   if (order2.join('') !== '0123456789') {
+     return false;
+   }
+
+   // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+   var test3 = {};
+   'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+     test3[letter] = letter;
+   });
+   if (Object.keys(Object.assign({}, test3)).join('') !==
+       'abcdefghijklmnopqrst') {
+     return false;
+   }
+
+   return true;
+ } catch (e) {
+   // We don't expect any of the above to throw, but better to be safe.
+   return false;
+ }
+}
+
+module.exports = shouldUseNative() ? Object.assign : function (target, source) {
+ var from;
+ var to = toObject(target);
+ var symbols;
+
+ for (var s = 1; s < arguments.length; s++) {
+   from = Object(arguments[s]);
+
+   for (var key in from) {
+     if (hasOwnProperty.call(from, key)) {
+       to[key] = from[key];
+     }
+   }
+
+   if (Object.getOwnPropertySymbols) {
+     symbols = Object.getOwnPropertySymbols(from);
+     for (var i = 0; i < symbols.length; i++) {
+       if (propIsEnumerable.call(from, symbols[i])) {
+         to[symbols[i]] = from[symbols[i]];
+       }
+     }
+   }
+ }
+
+ return to;
+};
+
+},{}]},{},[32])(32);
+});
diff --git a/devtools/client/inspector/markup/test/react_external_listeners.js b/devtools/client/inspector/markup/test/react_external_listeners.js
new file mode 100644
index 0000000000..6768c902e0
--- /dev/null
+++ b/devtools/client/inspector/markup/test/react_external_listeners.js
@@ -0,0 +1,10 @@
+"use strict";
+
+/* exported externalFunction, externalCapturingFunction */
+function externalFunction() {
+  alert("externalFunction");
+}
+
+function externalCapturingFunction() {
+  alert("externalCapturingFunction");
+}
diff --git a/devtools/client/inspector/markup/test/shadowdom_open_debugger.min.js b/devtools/client/inspector/markup/test/shadowdom_open_debugger.min.js
new file mode 100644
index 0000000000..6796d44f07
--- /dev/null
+++ b/devtools/client/inspector/markup/test/shadowdom_open_debugger.min.js
@@ -0,0 +1 @@
+"use strict";customElements.define("test-component",class extends HTMLElement{constructor(){super();let shadowRoot=this.attachShadow({mode:"open"});shadowRoot.innerHTML="<slot>some default content</slot>"}connectedCallback(){}disconnectedCallback(){}});

diff --git a/devtools/client/inspector/markup/utils.js b/devtools/client/inspector/markup/utils.js
new file mode 100644
index 0000000000..06609676a5
--- /dev/null
+++ b/devtools/client/inspector/markup/utils.js
@@ -0,0 +1,136 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * Apply a 'flashed' background and foreground color to elements. Intended
+ * to be used with flashElementOff as a way of drawing attention to an element.
+ *
+ * @param  {Node} backgroundElt
+ *         The element to set the highlighted background color on.
+ * @param  {Object} options
+ * @param  {Node} options.foregroundElt
+ *         The element to set the matching foreground color on. This will equal
+ *         backgroundElt if not set.
+ * @param  {String} options.backgroundClass
+ *         The background highlight color class to set on the element.
+ */
+function flashElementOn(
+  backgroundElt,
+  { foregroundElt = backgroundElt, backgroundClass = "theme-bg-contrast" } = {}
+) {
+  if (!backgroundElt || !foregroundElt) {
+    return;
+  }
+
+  // Make sure the animation class is not here
+  backgroundElt.classList.remove("flash-out");
+
+  // Change the background
+  backgroundElt.classList.add(backgroundClass);
+
+  foregroundElt.classList.add("theme-fg-contrast");
+  [].forEach.call(
+    foregroundElt.querySelectorAll("[class*=theme-fg-color]"),
+    span => span.classList.add("theme-fg-contrast")
+  );
+}
+
+/**
+ * Remove a 'flashed' background and foreground color to elements.
+ * See flashElementOn.
+ *
+ * @param  {Node} backgroundElt
+ *         The element to remove the highlighted background color on.
+ * @param  {Object} options
+ * @param  {Node} options.foregroundElt
+ *         The element to remove the matching foreground color on. This will equal
+ *         backgroundElt if not set.
+ * @param  {String} options.backgroundClass
+ *         The background highlight color class to remove on the element.
+ */
+function flashElementOff(
+  backgroundElt,
+  { foregroundElt = backgroundElt, backgroundClass = "theme-bg-contrast" } = {}
+) {
+  if (!backgroundElt || !foregroundElt) {
+    return;
+  }
+
+  // Add the animation class to smoothly remove the background
+  backgroundElt.classList.add("flash-out");
+
+  // Remove the background
+  backgroundElt.classList.remove(backgroundClass);
+
+  foregroundElt.classList.remove("theme-fg-contrast");
+  // Make sure the foreground animation class is removed
+  foregroundElt.classList.remove("flash-out");
+  [].forEach.call(
+    foregroundElt.querySelectorAll("[class*=theme-fg-color]"),
+    span => span.classList.remove("theme-fg-contrast")
+  );
+}
+
+/**
+ * Retrieve the available width between a provided element left edge and a container right
+ * edge. This used can be used as a max-width for inplace-editor (autocomplete) widgets
+ * replacing Editor elements of the the markup-view;
+ */
+function getAutocompleteMaxWidth(element, container) {
+  const elementRect = element.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  return containerRect.right - elementRect.left - 2;
+}
+
+/**
+ * Parse attribute names and values from a string.
+ *
+ * @param  {String} attr
+ *         The input string for which names/values are to be parsed.
+ * @param  {HTMLDocument} doc
+ *         A document that can be used to test valid attributes.
+ * @return {Array}
+ *         An array of attribute names and their values.
+ */
+function parseAttributeValues(attr, doc) {
+  attr = attr.trim();
+
+  const parseAndGetNode = str => {
+    return new DOMParser().parseFromString(str, "text/html").body.childNodes[0];
+  };
+
+  // Handle bad user inputs by appending a " or ' if it fails to parse without
+  // them. Also note that a SVG tag is used to make sure the HTML parser
+  // preserves mixed-case attributes
+  const el =
+    parseAndGetNode("<svg " + attr + "></svg>") ||
+    parseAndGetNode("<svg " + attr + '"></svg>') ||
+    parseAndGetNode("<svg " + attr + "'></svg>");
+
+  const div = doc.createElement("div");
+  const attributes = [];
+  for (const { name, value } of el.attributes) {
+    // Try to set on an element in the document, throws exception on bad input.
+    // Prevents InvalidCharacterError - "String contains an invalid character".
+    try {
+      div.setAttribute(name, value);
+      attributes.push({ name, value });
+    } catch (e) {
+      // This may throw exceptions on bad input.
+      // Prevents InvalidCharacterError - "String contains an invalid
+      // character".
+    }
+  }
+
+  return attributes;
+}
+
+module.exports = {
+  flashElementOn,
+  flashElementOff,
+  getAutocompleteMaxWidth,
+  parseAttributeValues,
+};
diff --git a/devtools/client/inspector/markup/utils/l10n.js b/devtools/client/inspector/markup/utils/l10n.js
new file mode 100644
index 0000000000..649eb19f97
--- /dev/null
+++ b/devtools/client/inspector/markup/utils/l10n.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+};
diff --git a/devtools/client/inspector/markup/utils/moz.build b/devtools/client/inspector/markup/utils/moz.build
new file mode 100644
index 0000000000..ddee85b5f7
--- /dev/null
+++ b/devtools/client/inspector/markup/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "l10n.js",
+)
diff --git a/devtools/client/inspector/markup/views/element-container.js b/devtools/client/inspector/markup/views/element-container.js
new file mode 100644
index 0000000000..c47edccef1
--- /dev/null
+++ b/devtools/client/inspector/markup/views/element-container.js
@@ -0,0 +1,260 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const MarkupContainer = require("resource://devtools/client/inspector/markup/views/markup-container.js");
+const ElementEditor = require("resource://devtools/client/inspector/markup/views/element-editor.js");
+const {
+  ELEMENT_NODE,
+} = require("resource://devtools/shared/dom-node-constants.js");
+const { extend } = require("resource://devtools/shared/extend.js");
+
+loader.lazyRequireGetter(
+  this,
+  "EventTooltip",
+  "resource://devtools/client/shared/widgets/tooltip/EventTooltipHelper.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  ["setImageTooltip", "setBrokenImageTooltip"],
+  "resource://devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+
+const PREVIEW_MAX_DIM_PREF = "devtools.inspector.imagePreviewTooltipSize";
+
+/**
+ * An implementation of MarkupContainer for Elements that can contain
+ * child nodes.
+ * Allows editing of tag name, attributes, expanding / collapsing.
+ *
+ * @param  {MarkupView} markupView
+ *         The markup view that owns this container.
+ * @param  {NodeFront} node
+ *         The node to display.
+ */
+function MarkupElementContainer(markupView, node) {
+  MarkupContainer.prototype.initialize.call(
+    this,
+    markupView,
+    node,
+    "elementcontainer"
+  );
+
+  if (node.nodeType === ELEMENT_NODE) {
+    this.editor = new ElementEditor(this, node);
+  } else {
+    throw new Error("Invalid node for MarkupElementContainer");
+  }
+
+  this.tagLine.appendChild(this.editor.elt);
+}
+
+MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
+  onContainerClick(event) {
+    if (!event.target.hasAttribute("data-event")) {
+      return;
+    }
+
+    event.target.setAttribute("aria-pressed", "true");
+    this._buildEventTooltipContent(event.target);
+  },
+
+  async _buildEventTooltipContent(target) {
+    const tooltip = this.markup.eventDetailsTooltip;
+    await tooltip.hide();
+
+    const listenerInfo = await this.node.getEventListenerInfo();
+
+    const toolbox = this.markup.toolbox;
+
+    // Create the EventTooltip which will populate the tooltip content.
+    const eventTooltip = new EventTooltip(
+      tooltip,
+      listenerInfo,
+      toolbox,
+      this.node
+    );
+
+    // Add specific styling to the "event" badge when at least one event is disabled.
+    // The eventTooltip will take care of clearing the event listener when it's destroyed.
+    eventTooltip.on(
+      "event-tooltip-listener-toggled",
+      ({ hasDisabledEventListeners }) => {
+        const className = "has-disabled-events";
+        if (hasDisabledEventListeners) {
+          this.editor._eventBadge.classList.add(className);
+        } else {
+          this.editor._eventBadge.classList.remove(className);
+        }
+      }
+    );
+
+    // Disable the image preview tooltip while we display the event details
+    this.markup._disableImagePreviewTooltip();
+    tooltip.once("hidden", () => {
+      eventTooltip.destroy();
+
+      // Enable the image preview tooltip after closing the event details
+      this.markup._enableImagePreviewTooltip();
+
+      // Allow clicks on the event badge to display the event popup again
+      // (but allow the currently queued click event to run first).
+      this.markup.win.setTimeout(() => {
+        if (this.editor._eventBadge) {
+          this.editor._eventBadge.style.pointerEvents = "auto";
+          this.editor._eventBadge.setAttribute("aria-pressed", "false");
+        }
+      }, 0);
+    });
+
+    // Prevent clicks on the event badge to display the event popup again.
+    if (this.editor._eventBadge) {
+      this.editor._eventBadge.style.pointerEvents = "none";
+    }
+    tooltip.show(target);
+    tooltip.focus();
+  },
+
+  /**
+   * Generates the an image preview for this Element. The element must be an
+   * image or canvas (@see isPreviewable).
+   *
+   * @return {Promise} that is resolved with an object of form
+   *         { data, size: { naturalWidth, naturalHeight, resizeRatio } } where
+   *         - data is the data-uri for the image preview.
+   *         - size contains information about the original image size and if
+   *         the preview has been resized.
+   *
+   * If this element is not previewable or the preview cannot be generated for
+   * some reason, the Promise is rejected.
+   */
+  _getPreview() {
+    if (!this.isPreviewable()) {
+      return Promise.reject("_getPreview called on a non-previewable element.");
+    }
+
+    if (this.tooltipDataPromise) {
+      // A preview request is already pending. Re-use that request.
+      return this.tooltipDataPromise;
+    }
+
+    // Fetch the preview from the server.
+    this.tooltipDataPromise = async function () {
+      const maxDim = Services.prefs.getIntPref(PREVIEW_MAX_DIM_PREF);
+      const preview = await this.node.getImageData(maxDim);
+      const data = await preview.data.string();
+
+      // Clear the pending preview request. We can't reuse the results later as
+      // the preview contents might have changed.
+      this.tooltipDataPromise = null;
+      return { data, size: preview.size };
+    }.bind(this)();
+
+    return this.tooltipDataPromise;
+  },
+
+  /**
+   * Executed by MarkupView._isImagePreviewTarget which is itself called when
+   * the mouse hovers over a target in the markup-view.
+   * Checks if the target is indeed something we want to have an image tooltip
+   * preview over and, if so, inserts content into the tooltip.
+   *
+   * @return {Promise} that resolves when the tooltip content is ready. Resolves
+   * true if the tooltip should be displayed, false otherwise.
+   */
+  async isImagePreviewTarget(target, tooltip) {
+    // Is this Element previewable.
+    if (!this.isPreviewable()) {
+      return false;
+    }
+
+    // If the Element has an src attribute, the tooltip is shown when hovering
+    // over the src url. If not, the tooltip is shown when hovering over the tag
+    // name.
+    const src = this.editor.getAttributeElement("src");
+    const expectedTarget = src ? src.querySelector(".link") : this.editor.tag;
+    if (target !== expectedTarget) {
+      return false;
+    }
+
+    try {
+      const { data, size } = await this._getPreview();
+      // The preview is ready.
+      const options = {
+        naturalWidth: size.naturalWidth,
+        naturalHeight: size.naturalHeight,
+        maxDim: Services.prefs.getIntPref(PREVIEW_MAX_DIM_PREF),
+      };
+
+      setImageTooltip(tooltip, this.markup.doc, data, options);
+    } catch (e) {
+      // Indicate the failure but show the tooltip anyway.
+      setBrokenImageTooltip(tooltip, this.markup.doc);
+    }
+    return true;
+  },
+
+  copyImageDataUri() {
+    // We need to send again a request to gettooltipData even if one was sent
+    // for the tooltip, because we want the full-size image
+    this.node.getImageData().then(data => {
+      data.data.string().then(str => {
+        clipboardHelper.copyString(str);
+      });
+    });
+  },
+
+  setInlineTextChild(inlineTextChild) {
+    this.inlineTextChild = inlineTextChild;
+    this.editor.updateTextEditor();
+  },
+
+  clearInlineTextChild() {
+    this.inlineTextChild = undefined;
+    this.editor.updateTextEditor();
+  },
+
+  /**
+   * Trigger new attribute field for input.
+   */
+  addAttribute() {
+    this.editor.newAttr.editMode();
+  },
+
+  /**
+   * Trigger attribute field for editing.
+   */
+  editAttribute(attrName) {
+    this.editor.attrElements.get(attrName).editMode();
+  },
+
+  /**
+   * Remove attribute from container.
+   * This is an undoable action.
+   */
+  removeAttribute(attrName) {
+    const doMods = this.editor._startModifyingAttributes();
+    const undoMods = this.editor._startModifyingAttributes();
+    this.editor._saveAttribute(attrName, undoMods);
+    doMods.removeAttribute(attrName);
+    this.undo.do(
+      () => {
+        doMods.apply();
+      },
+      () => {
+        undoMods.apply();
+      }
+    );
+  },
+});
+
+module.exports = MarkupElementContainer;
diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js
new file mode 100644
index 0000000000..f538c2f6a9
--- /dev/null
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -0,0 +1,1213 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TextEditor = require("resource://devtools/client/inspector/markup/views/text-editor.js");
+const {
+  truncateString,
+} = require("resource://devtools/shared/inspector/utils.js");
+const {
+  editableField,
+  InplaceEditor,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+const {
+  parseAttribute,
+  ATTRIBUTE_TYPES,
+} = require("resource://devtools/client/shared/node-attribute-parser.js");
+
+loader.lazyRequireGetter(
+  this,
+  [
+    "flashElementOn",
+    "flashElementOff",
+    "getAutocompleteMaxWidth",
+    "parseAttributeValues",
+  ],
+  "resource://devtools/client/inspector/markup/utils.js",
+  true
+);
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+// Page size for pageup/pagedown
+const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
+const COLLAPSE_DATA_URL_LENGTH = 60;
+
+// Contains only void (without end tag) HTML elements
+const HTML_VOID_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "command",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+];
+
+// Contains only valid computed display property types of the node to display in the
+// element markup and their respective title tooltip text.
+const DISPLAY_TYPES = {
+  flex: INSPECTOR_L10N.getStr("markupView.display.flex.tooltiptext2"),
+  "inline-flex": INSPECTOR_L10N.getStr(
+    "markupView.display.inlineFlex.tooltiptext2"
+  ),
+  grid: INSPECTOR_L10N.getStr("markupView.display.grid.tooltiptext2"),
+  "inline-grid": INSPECTOR_L10N.getStr(
+    "markupView.display.inlineGrid.tooltiptext2"
+  ),
+  subgrid: INSPECTOR_L10N.getStr("markupView.display.subgrid.tooltiptiptext"),
+  "flow-root": INSPECTOR_L10N.getStr("markupView.display.flowRoot.tooltiptext"),
+  contents: INSPECTOR_L10N.getStr("markupView.display.contents.tooltiptext2"),
+};
+
+/**
+ * Creates an editor for an Element node.
+ *
+ * @param  {MarkupContainer} container
+ *         The container owning this editor.
+ * @param  {NodeFront} node
+ *         The NodeFront being edited.
+ */
+function ElementEditor(container, node) {
+  this.container = container;
+  this.node = node;
+  this.markup = this.container.markup;
+  this.doc = this.markup.doc;
+  this.inspector = this.markup.inspector;
+  this.highlighters = this.markup.highlighters;
+  this._cssProperties = this.inspector.cssProperties;
+
+  this.isOverflowDebuggingEnabled = Services.prefs.getBoolPref(
+    "devtools.overflow.debugging.enabled"
+  );
+
+  // If this is a scrollable element, this specifies whether or not its overflow causing
+  // elements are highlighted. Otherwise, it is null if the element is not scrollable.
+  this.highlightingOverflowCausingElements = this.node.isScrollable
+    ? false
+    : null;
+
+  this.attrElements = new Map();
+  this.animationTimers = {};
+
+  this.elt = null;
+  this.tag = null;
+  this.closeTag = null;
+  this.attrList = null;
+  this.newAttr = null;
+  this.closeElt = null;
+
+  this.onCustomBadgeClick = this.onCustomBadgeClick.bind(this);
+  this.onDisplayBadgeClick = this.onDisplayBadgeClick.bind(this);
+  this.onScrollableBadgeClick = this.onScrollableBadgeClick.bind(this);
+  this.onExpandBadgeClick = this.onExpandBadgeClick.bind(this);
+  this.onTagEdit = this.onTagEdit.bind(this);
+
+  this.buildMarkup();
+
+  const isVoidElement = HTML_VOID_ELEMENTS.includes(this.node.displayName);
+  if (node.isInHTMLDocument && isVoidElement) {
+    this.elt.classList.add("void-element");
+  }
+
+  this.update();
+  this.initialized = true;
+}
+
+ElementEditor.prototype = {
+  buildMarkup() {
+    this.elt = this.doc.createElement("span");
+    this.elt.classList.add("editor");
+
+    this.renderOpenTag();
+    this.renderEventBadge();
+    this.renderCloseTag();
+
+    // Make the tag name editable (unless this is a remote node or
+    // a document element)
+    if (!this.node.isDocumentElement) {
+      // Make the tag optionally tabbable but not by default.
+      this.tag.setAttribute("tabindex", "-1");
+      editableField({
+        element: this.tag,
+        multiline: true,
+        maxWidth: () => getAutocompleteMaxWidth(this.tag, this.container.elt),
+        trigger: "dblclick",
+        stopOnReturn: true,
+        done: this.onTagEdit,
+        cssProperties: this._cssProperties,
+      });
+    }
+  },
+
+  renderOpenTag() {
+    const open = this.doc.createElement("span");
+    open.classList.add("open");
+    open.appendChild(this.doc.createTextNode("<"));
+    this.elt.appendChild(open);
+
+    this.tag = this.doc.createElement("span");
+    this.tag.classList.add("tag", "theme-fg-color3");
+    this.tag.setAttribute("tabindex", "-1");
+    this.tag.textContent = this.node.displayName;
+    open.appendChild(this.tag);
+
+    this.renderAttributes(open);
+    this.renderNewAttributeEditor(open);
+
+    const closingBracket = this.doc.createElement("span");
+    closingBracket.classList.add("closing-bracket");
+    closingBracket.textContent = ">";
+    open.appendChild(closingBracket);
+  },
+
+  renderAttributes(containerEl) {
+    this.attrList = this.doc.createElement("span");
+    containerEl.appendChild(this.attrList);
+  },
+
+  renderNewAttributeEditor(containerEl) {
+    this.newAttr = this.doc.createElement("span");
+    this.newAttr.classList.add("newattr");
+    this.newAttr.setAttribute("tabindex", "-1");
+    this.newAttr.setAttribute(
+      "aria-label",
+      INSPECTOR_L10N.getStr("markupView.newAttribute.label")
+    );
+    containerEl.appendChild(this.newAttr);
+
+    // Make the new attribute space editable.
+    this.newAttr.editMode = editableField({
+      element: this.newAttr,
+      multiline: true,
+      maxWidth: () => getAutocompleteMaxWidth(this.newAttr, this.container.elt),
+      trigger: "dblclick",
+      stopOnReturn: true,
+      contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
+      popup: this.markup.popup,
+      done: (val, commit) => {
+        if (!commit) {
+          return;
+        }
+
+        const doMods = this._startModifyingAttributes();
+        const undoMods = this._startModifyingAttributes();
+        this._applyAttributes(val, null, doMods, undoMods);
+        this.container.undo.do(
+          () => {
+            doMods.apply();
+          },
+          function () {
+            undoMods.apply();
+          }
+        );
+      },
+      cssProperties: this._cssProperties,
+    });
+  },
+
+  renderEventBadge() {
+    this.expandBadge = this.doc.createElement("span");
+    this.expandBadge.classList.add("markup-expand-badge");
+    this.expandBadge.addEventListener("click", this.onExpandBadgeClick);
+    this.elt.appendChild(this.expandBadge);
+  },
+
+  renderCloseTag() {
+    const close = this.doc.createElement("span");
+    close.classList.add("close");
+    close.appendChild(this.doc.createTextNode("</"));
+    this.elt.appendChild(close);
+
+    this.closeTag = this.doc.createElement("span");
+    this.closeTag.classList.add("tag", "theme-fg-color3");
+    this.closeTag.textContent = this.node.displayName;
+    close.appendChild(this.closeTag);
+
+    close.appendChild(this.doc.createTextNode(">"));
+  },
+
+  get displayBadge() {
+    return this._displayBadge;
+  },
+
+  set selected(value) {
+    if (this.textEditor) {
+      this.textEditor.selected = value;
+    }
+  },
+
+  flashAttribute(attrName) {
+    if (this.animationTimers[attrName]) {
+      clearTimeout(this.animationTimers[attrName]);
+    }
+
+    flashElementOn(this.getAttributeElement(attrName), {
+      backgroundClass: "theme-bg-contrast",
+    });
+
+    this.animationTimers[attrName] = setTimeout(() => {
+      flashElementOff(this.getAttributeElement(attrName), {
+        backgroundClass: "theme-bg-contrast",
+      });
+    }, this.markup.CONTAINER_FLASHING_DURATION);
+  },
+
+  /**
+   * Returns information about node in the editor.
+   *
+   * @param  {DOMNode} node
+   *         The node to get information from.
+   * @return {Object} An object literal with the following information:
+   *         {type: "attribute", name: "rel", value: "index", el: node}
+   */
+  getInfoAtNode(node) {
+    if (!node) {
+      return null;
+    }
+
+    let type = null;
+    let name = null;
+    let value = null;
+
+    // Attribute
+    const attribute = node.closest(".attreditor");
+    if (attribute) {
+      type = "attribute";
+      name = attribute.dataset.attr;
+      value = attribute.dataset.value;
+    }
+
+    return { type, name, value, el: node };
+  },
+
+  /**
+   * Update the state of the editor from the node.
+   */
+  update() {
+    const nodeAttributes = this.node.attributes || [];
+
+    // Keep the data model in sync with attributes on the node.
+    const currentAttributes = new Set(nodeAttributes.map(a => a.name));
+    for (const name of this.attrElements.keys()) {
+      if (!currentAttributes.has(name)) {
+        this.removeAttribute(name);
+      }
+    }
+
+    // Only loop through the current attributes on the node.  Missing
+    // attributes have already been removed at this point.
+    for (const attr of nodeAttributes) {
+      const el = this.attrElements.get(attr.name);
+      const valueChanged = el && el.dataset.value !== attr.value;
+      const isEditing = el && el.querySelector(".editable").inplaceEditor;
+      const canSimplyShowEditor = el && (!valueChanged || isEditing);
+
+      if (canSimplyShowEditor) {
+        // Element already exists and doesn't need to be recreated.
+        // Just show it (it's hidden by default).
+        el.style.removeProperty("display");
+      } else {
+        // Create a new editor, because the value of an existing attribute
+        // has changed.
+        const attribute = this._createAttribute(attr, el);
+        attribute.style.removeProperty("display");
+
+        // Temporarily flash the attribute to highlight the change.
+        // But not if this is the first time the editor instance has
+        // been created.
+        if (this.initialized) {
+          this.flashAttribute(attr.name);
+        }
+      }
+    }
+
+    this.updateEventBadge();
+    this.updateDisplayBadge();
+    this.updateCustomBadge();
+    this.updateScrollableBadge();
+    this.updateContainerBadge();
+    this.updateTextEditor();
+    this.updateUnavailableChildren();
+    this.updateOverflowBadge();
+    this.updateOverflowHighlight();
+  },
+
+  updateEventBadge() {
+    const showEventBadge = this.node.hasEventListeners;
+    if (this._eventBadge && !showEventBadge) {
+      this._eventBadge.remove();
+      this._eventBadge = null;
+    } else if (showEventBadge && !this._eventBadge) {
+      this._createEventBadge();
+    }
+  },
+
+  _createEventBadge() {
+    this._eventBadge = this.doc.createElement("button");
+    this._eventBadge.className = "inspector-badge interactive";
+    this._eventBadge.dataset.event = "true";
+    this._eventBadge.textContent = "event";
+    this._eventBadge.title = INSPECTOR_L10N.getStr(
+      "markupView.event.tooltiptext2"
+    );
+    this._eventBadge.setAttribute("aria-pressed", "false");
+    // Badges order is [event][display][custom], insert event badge before others.
+    this.elt.insertBefore(
+      this._eventBadge,
+      this._displayBadge || this._customBadge
+    );
+    this.markup.emit("badge-added-event");
+  },
+
+  updateScrollableBadge() {
+    if (this.node.isScrollable && !this._scrollableBadge) {
+      this._createScrollableBadge();
+    } else if (this._scrollableBadge && !this.node.isScrollable) {
+      this._scrollableBadge.remove();
+      this._scrollableBadge = null;
+    }
+  },
+
+  _createScrollableBadge() {
+    const isInteractive =
+      this.isOverflowDebuggingEnabled &&
+      // Document elements cannot have interative scrollable badges since retrieval of their
+      // overflow causing elements is not supported.
+      !this.node.isDocumentElement;
+
+    this._scrollableBadge = this.doc.createElement(
+      isInteractive ? "button" : "div"
+    );
+    this._scrollableBadge.className = `inspector-badge scrollable-badge ${
+      isInteractive ? "interactive" : ""
+    }`;
+    this._scrollableBadge.dataset.scrollable = "true";
+    this._scrollableBadge.textContent = INSPECTOR_L10N.getStr(
+      "markupView.scrollableBadge.label"
+    );
+    this._scrollableBadge.title = INSPECTOR_L10N.getStr(
+      isInteractive
+        ? "markupView.scrollableBadge.interactive.tooltip"
+        : "markupView.scrollableBadge.tooltip"
+    );
+
+    if (isInteractive) {
+      this._scrollableBadge.addEventListener(
+        "click",
+        this.onScrollableBadgeClick
+      );
+      this._scrollableBadge.setAttribute("aria-pressed", "false");
+    }
+    this.elt.insertBefore(this._scrollableBadge, this._customBadge);
+  },
+
+  /**
+   * Update the markup display badge.
+   */
+  updateDisplayBadge() {
+    const displayType = this.node.displayType;
+    const showDisplayBadge = displayType in DISPLAY_TYPES;
+
+    if (this._displayBadge && !showDisplayBadge) {
+      this._displayBadge.remove();
+      this._displayBadge = null;
+    } else if (showDisplayBadge) {
+      if (!this._displayBadge) {
+        this._createDisplayBadge();
+      }
+
+      this._updateDisplayBadgeContent();
+    }
+  },
+
+  _createDisplayBadge() {
+    this._displayBadge = this.doc.createElement("button");
+    this._displayBadge.className = "inspector-badge";
+    this._displayBadge.addEventListener("click", this.onDisplayBadgeClick);
+    // Badges order is [event][display][custom], insert display badge before custom.
+    this.elt.insertBefore(this._displayBadge, this._customBadge);
+  },
+
+  _updateDisplayBadgeContent() {
+    const displayType = this.node.displayType;
+    this._displayBadge.textContent = displayType;
+    this._displayBadge.dataset.display = displayType;
+    this._displayBadge.title = DISPLAY_TYPES[displayType];
+
+    const isFlex = displayType === "flex" || displayType === "inline-flex";
+    const isGrid =
+      displayType === "grid" ||
+      displayType === "inline-grid" ||
+      displayType === "subgrid";
+
+    const isInteractive =
+      isFlex ||
+      (isGrid && this.highlighters.canGridHighlighterToggle(this.node));
+
+    this._displayBadge.classList.toggle("interactive", isInteractive);
+
+    // Since the badge is a <button>, if it's not interactive we need to indicate
+    // to screen readers that it shouldn't behave like a button.
+    // It's easier to have the badge being a button and "downgrading" it like this,
+    // than having it as a div and adding interactivity.
+    if (isInteractive) {
+      this._displayBadge.removeAttribute("role");
+      this._displayBadge.setAttribute("aria-pressed", "false");
+    } else {
+      this._displayBadge.setAttribute("role", "presentation");
+      this._displayBadge.removeAttribute("aria-pressed");
+    }
+  },
+
+  updateOverflowBadge() {
+    if (!this.isOverflowDebuggingEnabled) {
+      return;
+    }
+
+    if (this.node.causesOverflow && !this._overflowBadge) {
+      this._createOverflowBadge();
+    } else if (!this.node.causesOverflow && this._overflowBadge) {
+      this._overflowBadge.remove();
+      this._overflowBadge = null;
+    }
+  },
+
+  _createOverflowBadge() {
+    this._overflowBadge = this.doc.createElement("div");
+    this._overflowBadge.className = "inspector-badge overflow-badge";
+    this._overflowBadge.textContent = INSPECTOR_L10N.getStr(
+      "markupView.overflowBadge.label"
+    );
+    this._overflowBadge.title = INSPECTOR_L10N.getStr(
+      "markupView.overflowBadge.tooltip"
+    );
+    this.elt.insertBefore(this._overflowBadge, this._customBadge);
+  },
+
+  /**
+   * Update the markup custom element badge.
+   */
+  updateCustomBadge() {
+    const showCustomBadge = !!this.node.customElementLocation;
+    if (this._customBadge && !showCustomBadge) {
+      this._customBadge.remove();
+      this._customBadge = null;
+    } else if (!this._customBadge && showCustomBadge) {
+      this._createCustomBadge();
+    }
+  },
+
+  _createCustomBadge() {
+    this._customBadge = this.doc.createElement("button");
+    this._customBadge.className = "inspector-badge interactive";
+    this._customBadge.dataset.custom = "true";
+    this._customBadge.textContent = "custom…";
+    this._customBadge.title = INSPECTOR_L10N.getStr(
+      "markupView.custom.tooltiptext"
+    );
+    this._customBadge.addEventListener("click", this.onCustomBadgeClick);
+    // Badges order is [event][display][custom], insert custom badge at the end.
+    this.elt.appendChild(this._customBadge);
+  },
+
+  updateContainerBadge() {
+    const showContainerBadge =
+      this.node.containerType === "inline-size" ||
+      this.node.containerType === "size";
+
+    if (this._containerBadge && !showContainerBadge) {
+      this._containerBadge.remove();
+      this._containerBadge = null;
+    } else if (showContainerBadge && !this._containerBadge) {
+      this._createContainerBadge();
+    }
+  },
+
+  _createContainerBadge() {
+    this._containerBadge = this.doc.createElement("div");
+    this._containerBadge.classList.add("inspector-badge");
+    this._containerBadge.dataset.container = "true";
+    this._containerBadge.title = `container-type: ${this.node.containerType}`;
+
+    this._containerBadge.append(this.doc.createTextNode("container"));
+    // TODO: Move the logic to handle badges position in a dedicated helper (See Bug 1837921).
+    // Ideally badges order should be [event][display][container][custom]
+    this.elt.insertBefore(this._containerBadge, this._customBadge);
+    this.markup.emit("badge-added-event");
+  },
+
+  /**
+   * If node causes overflow, toggle its overflow highlight if its scrollable ancestor's
+   * scrollable badge is active/inactive.
+   */
+  async updateOverflowHighlight() {
+    if (!this.isOverflowDebuggingEnabled) {
+      return;
+    }
+
+    let showOverflowHighlight = false;
+
+    if (this.node.causesOverflow) {
+      try {
+        const scrollableAncestor =
+          await this.node.walkerFront.getScrollableAncestorNode(this.node);
+        const markupContainer = scrollableAncestor
+          ? this.markup.getContainer(scrollableAncestor)
+          : null;
+
+        showOverflowHighlight =
+          !!markupContainer?.editor.highlightingOverflowCausingElements;
+      } catch (e) {
+        // This call might fail if called asynchrously after the toolbox is finished
+        // closing.
+        return;
+      }
+    }
+
+    this.setOverflowHighlight(showOverflowHighlight);
+  },
+
+  /**
+   * Show overflow highlight if showOverflowHighlight is true, otherwise hide it.
+   *
+   * @param {Boolean} showOverflowHighlight
+   */
+  setOverflowHighlight(showOverflowHighlight) {
+    this.container.tagState.classList.toggle(
+      "overflow-causing-highlighted",
+      showOverflowHighlight
+    );
+  },
+
+  /**
+   * Update the inline text editor in case of a single text child node.
+   */
+  updateTextEditor() {
+    const node = this.node.inlineTextChild;
+
+    if (this.textEditor && this.textEditor.node != node) {
+      this.elt.removeChild(this.textEditor.elt);
+      this.textEditor.destroy();
+      this.textEditor = null;
+    }
+
+    if (node && !this.textEditor) {
+      // Create a text editor added to this editor.
+      // This editor won't receive an update automatically, so we rely on
+      // child text editors to let us know that we need updating.
+      this.textEditor = new TextEditor(this.container, node, "text");
+      this.elt.insertBefore(
+        this.textEditor.elt,
+        this.elt.querySelector(".close")
+      );
+    }
+
+    if (this.textEditor) {
+      this.textEditor.update();
+    }
+  },
+
+  hasUnavailableChildren() {
+    return !!this.childrenUnavailableElt;
+  },
+
+  /**
+   * Update a special badge displayed for nodes which have children that can't
+   * be inspected by the current session (eg a parent-process only toolbox
+   * inspecting a content browser).
+   */
+  updateUnavailableChildren() {
+    const childrenUnavailable = this.node.childrenUnavailable;
+
+    if (this.childrenUnavailableElt) {
+      this.elt.removeChild(this.childrenUnavailableElt);
+      this.childrenUnavailableElt = null;
+    }
+
+    if (childrenUnavailable) {
+      this.childrenUnavailableElt = this.doc.createElement("div");
+      this.childrenUnavailableElt.className = "unavailable-children";
+      this.childrenUnavailableElt.dataset.label = INSPECTOR_L10N.getStr(
+        "markupView.unavailableChildren.label"
+      );
+      this.childrenUnavailableElt.title = INSPECTOR_L10N.getStr(
+        "markupView.unavailableChildren.title"
+      );
+      this.elt.insertBefore(
+        this.childrenUnavailableElt,
+        this.elt.querySelector(".close")
+      );
+    }
+  },
+
+  _startModifyingAttributes() {
+    return this.node.startModifyingAttributes();
+  },
+
+  /**
+   * Get the element used for one of the attributes of this element.
+   *
+   * @param  {String} attrName
+   *         The name of the attribute to get the element for
+   * @return {DOMNode}
+   */
+  getAttributeElement(attrName) {
+    return this.attrList.querySelector(
+      ".attreditor[data-attr=" + CSS.escape(attrName) + "] .attr-value"
+    );
+  },
+
+  /**
+   * Remove an attribute from the attrElements object and the DOM.
+   *
+   * @param  {String} attrName
+   *         The name of the attribute to remove
+   */
+  removeAttribute(attrName) {
+    const attr = this.attrElements.get(attrName);
+    if (attr) {
+      this.attrElements.delete(attrName);
+      attr.remove();
+    }
+  },
+
+  /**
+   * Creates and returns the DOM for displaying an attribute with the following DOM
+   * structure:
+   *
+   * dom.span(
+   *   {
+   *     className: "attreditor",
+   *     "data-attr": attribute.name,
+   *     "data-value": attribute.value,
+   *   },
+   *   " ",
+   *   dom.span(
+   *     { className: "editable", tabIndex: 0 },
+   *     dom.span({ className: "attr-name theme-fg-color1" }, attribute.name),
+   *     '="',
+   *     dom.span({ className: "attr-value theme-fg-color2" }, attribute.value),
+   *     '"'
+   *   )
+   */
+  _createAttribute(attribute, before = null) {
+    const attr = this.doc.createElement("span");
+    attr.dataset.attr = attribute.name;
+    attr.dataset.value = attribute.value;
+    attr.classList.add("attreditor");
+    attr.style.display = "none";
+
+    attr.appendChild(this.doc.createTextNode(" "));
+
+    const inner = this.doc.createElement("span");
+    inner.classList.add("editable");
+    inner.setAttribute("tabindex", this.container.canFocus ? "0" : "-1");
+    attr.appendChild(inner);
+
+    const name = this.doc.createElement("span");
+    name.classList.add("attr-name");
+    name.classList.add("theme-fg-color1");
+    name.textContent = attribute.name;
+    inner.appendChild(name);
+
+    inner.appendChild(this.doc.createTextNode('="'));
+
+    const val = this.doc.createElement("span");
+    val.classList.add("attr-value");
+    val.classList.add("theme-fg-color2");
+    inner.appendChild(val);
+
+    inner.appendChild(this.doc.createTextNode('"'));
+
+    this._setupAttributeEditor(attribute, attr, inner, name, val);
+
+    // Figure out where we should place the attribute.
+    if (attribute.name == "id") {
+      before = this.attrList.firstChild;
+    } else if (attribute.name == "class") {
+      const idNode = this.attrElements.get("id");
+      before = idNode ? idNode.nextSibling : this.attrList.firstChild;
+    }
+    this.attrList.insertBefore(attr, before);
+
+    this.removeAttribute(attribute.name);
+    this.attrElements.set(attribute.name, attr);
+
+    this._appendAttributeValue(attribute, val);
+
+    return attr;
+  },
+
+  /**
+   * Setup the editable field for the given attribute.
+   *
+   * @param  {Object} attribute
+   *         An object containing the name and value of a DOM attribute.
+   * @param  {Element} attrEditorEl
+   *         The attribute container <span class="attreditor"> element.
+   * @param  {Element} editableEl
+   *         The editable <span class="editable"> element that is setup to be
+   *         an editable field.
+   * @param  {Element} attrNameEl
+   *         The attribute name <span class="attr-name"> element.
+   * @param  {Element} attrValueEl
+   *         The attribute value <span class="attr-value"> element.
+   */
+  _setupAttributeEditor(
+    attribute,
+    attrEditorEl,
+    editableEl,
+    attrNameEl,
+    attrValueEl
+  ) {
+    // Double quotes need to be handled specially to prevent DOMParser failing.
+    // name="v"a"l"u"e" when editing -> name='v"a"l"u"e"'
+    // name="v'a"l'u"e" when editing -> name="v'a&quot;l'u&quot;e"
+    let editValueDisplayed = attribute.value || "";
+    const hasDoubleQuote = editValueDisplayed.includes('"');
+    const hasSingleQuote = editValueDisplayed.includes("'");
+    let initial = attribute.name + '="' + editValueDisplayed + '"';
+
+    // Can't just wrap value with ' since the value contains both " and '.
+    if (hasDoubleQuote && hasSingleQuote) {
+      editValueDisplayed = editValueDisplayed.replace(/\"/g, "&quot;");
+      initial = attribute.name + '="' + editValueDisplayed + '"';
+    }
+
+    // Wrap with ' since there are no single quotes in the attribute value.
+    if (hasDoubleQuote && !hasSingleQuote) {
+      initial = attribute.name + "='" + editValueDisplayed + "'";
+    }
+
+    // Make the attribute editable.
+    attrEditorEl.editMode = editableField({
+      element: editableEl,
+      trigger: "dblclick",
+      stopOnReturn: true,
+      selectAll: false,
+      initial,
+      multiline: true,
+      maxWidth: () => getAutocompleteMaxWidth(editableEl, this.container.elt),
+      contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
+      popup: this.markup.popup,
+      start: (editor, event) => {
+        // If the editing was started inside the name or value areas,
+        // select accordingly.
+        if (event?.target === attrNameEl) {
+          editor.input.setSelectionRange(0, attrNameEl.textContent.length);
+        } else if (event?.target.closest(".attr-value") === attrValueEl) {
+          const length = editValueDisplayed.length;
+          const editorLength = editor.input.value.length;
+          const start = editorLength - (length + 1);
+          editor.input.setSelectionRange(start, start + length);
+        } else {
+          editor.input.select();
+        }
+      },
+      done: (newValue, commit, direction) => {
+        if (!commit || newValue === initial) {
+          return;
+        }
+
+        const doMods = this._startModifyingAttributes();
+        const undoMods = this._startModifyingAttributes();
+
+        // Remove the attribute stored in this editor and re-add any attributes
+        // parsed out of the input element. Restore original attribute if
+        // parsing fails.
+        this.refocusOnEdit(attribute.name, attrEditorEl, direction);
+        this._saveAttribute(attribute.name, undoMods);
+        doMods.removeAttribute(attribute.name);
+        this._applyAttributes(newValue, attrEditorEl, doMods, undoMods);
+        this.container.undo.do(
+          () => {
+            doMods.apply();
+          },
+          () => {
+            undoMods.apply();
+          }
+        );
+      },
+      cssProperties: this._cssProperties,
+    });
+  },
+
+  /**
+   * Appends the attribute value to the given attribute value <span> element.
+   *
+   * @param  {Object} attribute
+   *         An object containing the name and value of a DOM attribute.
+   * @param  {Element} attributeValueEl
+   *         The attribute value <span class="attr-value"> element to append
+   *         the parsed attribute values to.
+   */
+  _appendAttributeValue(attribute, attributeValueEl) {
+    // Parse the attribute value to detect whether there are linkable parts in
+    // it (make sure to pass a complete list of existing attributes to the
+    // parseAttribute function, by concatenating attribute, because this could
+    // be a newly added attribute not yet on this.node).
+    const attributes = this.node.attributes.filter(
+      existingAttribute => existingAttribute.name !== attribute.name
+    );
+    attributes.push(attribute);
+
+    const parsedLinksData = parseAttribute(
+      this.node.namespaceURI,
+      this.node.tagName,
+      attributes,
+      attribute.name,
+      attribute.value
+    );
+
+    attributeValueEl.innerHTML = "";
+
+    // Create links in the attribute value, and truncate long attribute values if needed.
+    for (const token of parsedLinksData) {
+      if (token.type === "string") {
+        attributeValueEl.appendChild(
+          this.doc.createTextNode(this._truncateAttributeValue(token.value))
+        );
+      } else {
+        const link = this.doc.createElement("span");
+        link.classList.add("link");
+        link.setAttribute("data-type", token.type);
+        link.setAttribute("data-link", token.value);
+        link.textContent = this._truncateAttributeValue(token.value);
+        attributeValueEl.append(link);
+
+        // Add a "select node" button when we reference element ids
+        if (
+          token.type === ATTRIBUTE_TYPES.TYPE_IDREF ||
+          token.type === ATTRIBUTE_TYPES.TYPE_IDREF_LIST
+        ) {
+          const button = this.doc.createElement("button");
+          button.classList.add("select-node");
+          button.setAttribute(
+            "title",
+            INSPECTOR_L10N.getFormatStr(
+              "inspector.menu.selectElement.label",
+              token.value
+            )
+          );
+          link.append(button);
+        }
+      }
+    }
+  },
+
+  /**
+   * Truncates the given attribute value if it is a base64 data URL or the
+   * collapse attributes pref is enabled.
+   *
+   * @param  {String} value
+   *         Attribute value.
+   * @return {String} truncated attribute value.
+   */
+  _truncateAttributeValue(value) {
+    if (value && value.match(COLLAPSE_DATA_URL_REGEX)) {
+      return truncateString(value, COLLAPSE_DATA_URL_LENGTH);
+    }
+
+    return this.markup.collapseAttributes
+      ? truncateString(value, this.markup.collapseAttributeLength)
+      : value;
+  },
+
+  /**
+   * Parse a user-entered attribute string and apply the resulting
+   * attributes to the node. This operation is undoable.
+   *
+   * @param  {String} value
+   *         The user-entered value.
+   * @param  {DOMNode} attrNode
+   *         The attribute editor that created this
+   *         set of attributes, used to place new attributes where the
+   *         user put them.
+   */
+  _applyAttributes(value, attrNode, doMods, undoMods) {
+    const attrs = parseAttributeValues(value, this.doc);
+    for (const attr of attrs) {
+      // Create an attribute editor next to the current attribute if needed.
+      this._createAttribute(attr, attrNode ? attrNode.nextSibling : null);
+      this._saveAttribute(attr.name, undoMods);
+      doMods.setAttribute(attr.name, attr.value);
+    }
+  },
+
+  /**
+   * Saves the current state of the given attribute into an attribute
+   * modification list.
+   */
+  _saveAttribute(name, undoMods) {
+    const node = this.node;
+    if (node.hasAttribute(name)) {
+      const oldValue = node.getAttribute(name);
+      undoMods.setAttribute(name, oldValue);
+    } else {
+      undoMods.removeAttribute(name);
+    }
+  },
+
+  /**
+   * Listen to mutations, and when the attribute list is regenerated
+   * try to focus on the attribute after the one that's being edited now.
+   * If the attribute order changes, go to the beginning of the attribute list.
+   */
+  refocusOnEdit(attrName, attrNode, direction) {
+    // Only allow one refocus on attribute change at a time, so when there's
+    // more than 1 request in parallel, the last one wins.
+    if (this._editedAttributeObserver) {
+      this.markup.inspector.off(
+        "markupmutation",
+        this._editedAttributeObserver
+      );
+      this._editedAttributeObserver = null;
+    }
+
+    const activeElement = this.markup.doc.activeElement;
+    if (!activeElement || !activeElement.inplaceEditor) {
+      // The focus was already removed from the current inplace editor, we should not
+      // refocus the editable attribute.
+      return;
+    }
+
+    const container = this.markup.getContainer(this.node);
+
+    const activeAttrs = [...this.attrList.childNodes].filter(
+      el => el.style.display != "none"
+    );
+    const attributeIndex = activeAttrs.indexOf(attrNode);
+
+    const onMutations = (this._editedAttributeObserver = mutations => {
+      let isDeletedAttribute = false;
+      let isNewAttribute = false;
+
+      for (const mutation of mutations) {
+        const inContainer =
+          this.markup.getContainer(mutation.target) === container;
+        if (!inContainer) {
+          continue;
+        }
+
+        const isOriginalAttribute = mutation.attributeName === attrName;
+
+        isDeletedAttribute =
+          isDeletedAttribute ||
+          (isOriginalAttribute && mutation.newValue === null);
+        isNewAttribute = isNewAttribute || mutation.attributeName !== attrName;
+      }
+
+      const isModifiedOrder = isDeletedAttribute && isNewAttribute;
+      this._editedAttributeObserver = null;
+
+      // "Deleted" attributes are merely hidden, so filter them out.
+      const visibleAttrs = [...this.attrList.childNodes].filter(
+        el => el.style.display != "none"
+      );
+      let activeEditor;
+      if (visibleAttrs.length) {
+        if (!direction) {
+          // No direction was given; stay on current attribute.
+          activeEditor = visibleAttrs[attributeIndex];
+        } else if (isModifiedOrder) {
+          // The attribute was renamed, reordering the existing attributes.
+          // So let's go to the beginning of the attribute list for consistency.
+          activeEditor = visibleAttrs[0];
+        } else {
+          let newAttributeIndex;
+          if (isDeletedAttribute) {
+            newAttributeIndex = attributeIndex;
+          } else if (direction == Services.focus.MOVEFOCUS_FORWARD) {
+            newAttributeIndex = attributeIndex + 1;
+          } else if (direction == Services.focus.MOVEFOCUS_BACKWARD) {
+            newAttributeIndex = attributeIndex - 1;
+          }
+
+          // The number of attributes changed (deleted), or we moved through
+          // the array so check we're still within bounds.
+          if (
+            newAttributeIndex >= 0 &&
+            newAttributeIndex <= visibleAttrs.length - 1
+          ) {
+            activeEditor = visibleAttrs[newAttributeIndex];
+          }
+        }
+      }
+
+      // Either we have no attributes left,
+      // or we just edited the last attribute and want to move on.
+      if (!activeEditor) {
+        activeEditor = this.newAttr;
+      }
+
+      // Refocus was triggered by tab or shift-tab.
+      // Continue in edit mode.
+      if (direction) {
+        activeEditor.editMode();
+      } else {
+        // Refocus was triggered by enter.
+        // Exit edit mode (but restore focus).
+        const editable =
+          activeEditor === this.newAttr
+            ? activeEditor
+            : activeEditor.querySelector(".editable");
+        editable.focus();
+      }
+
+      this.markup.emit("refocusedonedit");
+    });
+
+    // Start listening for mutations until we find an attributes change
+    // that modifies this attribute.
+    this.markup.inspector.once("markupmutation", onMutations);
+  },
+
+  /**
+   * Called when the display badge is clicked. Toggles on the flexbox/grid highlighter for
+   * the selected node if it is a grid container.
+   *
+   * Event handling for highlighter events is delegated up to the Markup view panel.
+   * When a flexbox/grid highlighter is shown or hidden, the corresponding badge will
+   * be marked accordingly. See MarkupView.handleHighlighterEvent()
+   */
+  async onDisplayBadgeClick(event) {
+    event.stopPropagation();
+
+    const target = event.target;
+
+    if (
+      target.dataset.display === "flex" ||
+      target.dataset.display === "inline-flex"
+    ) {
+      await this.highlighters.toggleFlexboxHighlighter(this.node, "markup");
+    }
+
+    if (
+      target.dataset.display === "grid" ||
+      target.dataset.display === "inline-grid" ||
+      target.dataset.display === "subgrid"
+    ) {
+      // Don't toggle the grid highlighter if the max number of new grid highlighters
+      // allowed has been reached.
+      if (!this.highlighters.canGridHighlighterToggle(this.node)) {
+        return;
+      }
+
+      await this.highlighters.toggleGridHighlighter(this.node, "markup");
+    }
+  },
+
+  async onCustomBadgeClick() {
+    const { url, line, column } = this.node.customElementLocation;
+
+    this.markup.toolbox.viewSourceInDebugger(
+      url,
+      line,
+      column,
+      null,
+      "show_custom_element"
+    );
+  },
+
+  onExpandBadgeClick() {
+    this.container.expandContainer();
+  },
+
+  /**
+   * Called when the scrollable badge is clicked. Shows the overflow causing elements and
+   * highlights their container if the scroll badge is active.
+   */
+  async onScrollableBadgeClick() {
+    this.highlightingOverflowCausingElements =
+      this._scrollableBadge.classList.toggle("active");
+    this._scrollableBadge.setAttribute(
+      "aria-pressed",
+      this.highlightingOverflowCausingElements
+    );
+
+    const { nodes } = await this.node.walkerFront.getOverflowCausingElements(
+      this.node
+    );
+
+    for (const node of nodes) {
+      if (this.highlightingOverflowCausingElements) {
+        await this.markup.showNode(node);
+      }
+
+      const markupContainer = this.markup.getContainer(node);
+
+      if (markupContainer) {
+        markupContainer.editor.setOverflowHighlight(
+          this.highlightingOverflowCausingElements
+        );
+      }
+    }
+
+    this.markup.telemetry.scalarAdd(
+      "devtools.markup.scrollable.badge.clicked",
+      1
+    );
+  },
+
+  /**
+   * Called when the tag name editor has is done editing.
+   */
+  onTagEdit(newTagName, isCommit) {
+    if (
+      !isCommit ||
+      newTagName.toLowerCase() === this.node.tagName.toLowerCase() ||
+      !("editTagName" in this.markup.walker)
+    ) {
+      return;
+    }
+
+    // Changing the tagName removes the node. Make sure the replacing node gets
+    // selected afterwards.
+    this.markup.reselectOnRemoved(this.node, "edittagname");
+    this.node.walkerFront.editTagName(this.node, newTagName).catch(() => {
+      // Failed to edit the tag name, cancel the reselection.
+      this.markup.cancelReselectOnRemoved();
+    });
+  },
+
+  destroy() {
+    if (this._displayBadge) {
+      this._displayBadge.removeEventListener("click", this.onDisplayBadgeClick);
+    }
+
+    if (this._customBadge) {
+      this._customBadge.removeEventListener("click", this.onCustomBadgeClick);
+    }
+
+    if (this._scrollableBadge) {
+      this._scrollableBadge.removeEventListener(
+        "click",
+        this.onScrollableBadgeClick
+      );
+    }
+
+    this.expandBadge.removeEventListener("click", this.onExpandBadgeClick);
+
+    for (const key in this.animationTimers) {
+      clearTimeout(this.animationTimers[key]);
+    }
+    this.animationTimers = null;
+  },
+};
+
+module.exports = ElementEditor;
diff --git a/devtools/client/inspector/markup/views/html-editor.js b/devtools/client/inspector/markup/views/html-editor.js
new file mode 100644
index 0000000000..fbff0f3e2e
--- /dev/null
+++ b/devtools/client/inspector/markup/views/html-editor.js
@@ -0,0 +1,177 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const Editor = require("resource://devtools/client/shared/sourceeditor/editor.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+/**
+ * A wrapper around the Editor component, that allows editing of HTML.
+ *
+ * The main functionality this provides around the Editor is the ability
+ * to show/hide/position an editor inplace. It only appends once to the
+ * body, and uses CSS to position the editor.  The reason it is done this
+ * way is that the editor is loaded in an iframe, and calling appendChild
+ * causes it to reload.
+ *
+ * Meant to be embedded inside of an HTML page, as in markup.xhtml.
+ *
+ * @param  {HTMLDocument} htmlDocument
+ *         The document to attach the editor to.  Will also use this
+ *         document as a basis for listening resize events.
+ */
+function HTMLEditor(htmlDocument) {
+  this.doc = htmlDocument;
+  this.container = this.doc.createElement("div");
+  this.container.className = "html-editor theme-body";
+  this.container.style.display = "none";
+  this.editorInner = this.doc.createElement("div");
+  this.editorInner.className = "html-editor-inner";
+  this.container.appendChild(this.editorInner);
+
+  this.doc.body.appendChild(this.container);
+  this.hide = this.hide.bind(this);
+  this.refresh = this.refresh.bind(this);
+
+  EventEmitter.decorate(this);
+
+  this.doc.defaultView.addEventListener("resize", this.refresh, true);
+
+  const config = {
+    mode: Editor.modes.html,
+    lineWrapping: true,
+    styleActiveLine: false,
+    extraKeys: {},
+    theme: "mozilla markup-view",
+  };
+
+  config.extraKeys[ctrl("Enter")] = this.hide;
+  config.extraKeys.F2 = this.hide;
+  config.extraKeys.Esc = this.hide.bind(this, false);
+
+  this.container.addEventListener("click", this.hide);
+  this.editorInner.addEventListener("click", stopPropagation);
+  this.editor = new Editor(config);
+
+  this.editor.appendToLocalElement(this.editorInner);
+  this.hide(false);
+}
+
+HTMLEditor.prototype = {
+  /**
+   * Need to refresh position by manually setting CSS values, so this will
+   * need to be called on resizes and other sizing changes.
+   */
+  refresh() {
+    const element = this._attachedElement;
+
+    if (element) {
+      this.container.style.top = element.offsetTop + "px";
+      this.container.style.left = element.offsetLeft + "px";
+      this.container.style.width = element.offsetWidth + "px";
+      this.container.style.height = element.parentNode.offsetHeight + "px";
+      this.editor.refresh();
+    }
+  },
+
+  /**
+   * Anchor the editor to a particular element.
+   *
+   * @param  {DOMNode} element
+   *         The element that the editor will be anchored to.
+   *         Should belong to the HTMLDocument passed into the constructor.
+   */
+  _attach(element) {
+    this._detach();
+    this._attachedElement = element;
+    element.classList.add("html-editor-container");
+    this.refresh();
+  },
+
+  /**
+   * Unanchor the editor from an element.
+   */
+  _detach() {
+    if (this._attachedElement) {
+      this._attachedElement.classList.remove("html-editor-container");
+      this._attachedElement = undefined;
+    }
+  },
+
+  /**
+   * Anchor the editor to a particular element, and show the editor.
+   *
+   * @param  {DOMNode} element
+   *         The element that the editor will be anchored to.
+   *         Should belong to the HTMLDocument passed into the constructor.
+   * @param  {String} text
+   *         Value to set the contents of the editor to
+   * @param  {Function} cb
+   *         The function to call when hiding
+   */
+  show(element, text) {
+    if (this._visible) {
+      return;
+    }
+
+    this._originalValue = text;
+    this.editor.setText(text);
+    this._attach(element);
+    this.container.style.display = "flex";
+    this._visible = true;
+
+    this.editor.refresh();
+    this.editor.focus();
+    this.editor.clearHistory();
+
+    this.emit("popupshown");
+  },
+
+  /**
+   * Hide the editor, optionally committing the changes
+   *
+   * @param  {Boolean} shouldCommit
+   *         A change will be committed by default.  If this param
+   *         strictly equals false, no change will occur.
+   */
+  hide(shouldCommit) {
+    if (!this._visible) {
+      return;
+    }
+
+    this.container.style.display = "none";
+    this._detach();
+
+    const newValue = this.editor.getText();
+    const valueHasChanged = this._originalValue !== newValue;
+    const preventCommit = shouldCommit === false || !valueHasChanged;
+    this._originalValue = undefined;
+    this._visible = undefined;
+    this.emit("popuphidden", !preventCommit, newValue);
+  },
+
+  /**
+   * Destroy this object and unbind all event handlers
+   */
+  destroy() {
+    this.doc.defaultView.removeEventListener("resize", this.refresh, true);
+    this.container.removeEventListener("click", this.hide);
+    this.editorInner.removeEventListener("click", stopPropagation);
+
+    this.hide(false);
+    this.container.remove();
+    this.editor.destroy();
+  },
+};
+
+function ctrl(k) {
+  return (Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") + k;
+}
+
+function stopPropagation(e) {
+  e.stopPropagation();
+}
+
+module.exports = HTMLEditor;
diff --git a/devtools/client/inspector/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js
new file mode 100644
index 0000000000..7f4d8c8170
--- /dev/null
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -0,0 +1,900 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { KeyCodes } = require("resource://devtools/client/shared/keycodes.js");
+const {
+  flashElementOn,
+  flashElementOff,
+} = require("resource://devtools/client/inspector/markup/utils.js");
+
+loader.lazyRequireGetter(
+  this,
+  "wrapMoveFocus",
+  "resource://devtools/client/shared/focus.js",
+  true
+);
+
+const DRAG_DROP_MIN_INITIAL_DISTANCE = 10;
+const TYPES = {
+  TEXT_CONTAINER: "textcontainer",
+  ELEMENT_CONTAINER: "elementcontainer",
+  READ_ONLY_CONTAINER: "readonlycontainer",
+};
+
+/**
+ * The main structure for storing a document node in the markup
+ * tree.  Manages creation of the editor for the node and
+ * a <ul> for placing child elements, and expansion/collapsing
+ * of the element.
+ *
+ * This should not be instantiated directly, instead use one of:
+ *    MarkupReadOnlyContainer
+ *    MarkupTextContainer
+ *    MarkupElementContainer
+ */
+function MarkupContainer() {}
+
+/**
+ * Unique identifier used to set markup container node id.
+ * @type {Number}
+ */
+let markupContainerID = 0;
+
+MarkupContainer.prototype = {
+  // Get the UndoStack from the MarkupView.
+  get undo() {
+    // undo is a lazy getter in the MarkupView.
+    return this.markup.undo;
+  },
+
+  /*
+   * Initialize the MarkupContainer.  Should be called while one
+   * of the other contain classes is instantiated.
+   *
+   * @param  {MarkupView} markupView
+   *         The markup view that owns this container.
+   * @param  {NodeFront} node
+   *         The node to display.
+   * @param  {String} type
+   *         The type of container to build. One of TYPES.TEXT_CONTAINER,
+   *         TYPES.ELEMENT_CONTAINER, TYPES.READ_ONLY_CONTAINER
+   */
+  initialize(markupView, node, type) {
+    this.markup = markupView;
+    this.node = node;
+    this.type = type;
+    this.win = this.markup._frame.contentWindow;
+    this.id = "treeitem-" + markupContainerID++;
+    this.htmlElt = this.win.document.documentElement;
+
+    this.buildMarkup();
+
+    this.elt.container = this;
+
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onClick = this._onClick.bind(this);
+    this._onToggle = this._onToggle.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
+    this._eventListenersAbortController = new this.win.AbortController();
+
+    // Binding event listeners
+    const eventConfig = { signal: this._eventListenersAbortController.signal };
+    this.elt.addEventListener("mousedown", this._onMouseDown, eventConfig);
+    this.elt.addEventListener("click", this._onClick, eventConfig);
+    this.elt.addEventListener("dblclick", this._onToggle, eventConfig);
+    if (this.expander) {
+      this.expander.addEventListener("click", this._onToggle, eventConfig);
+    }
+
+    // Marking the node as shown or hidden
+    this.updateIsDisplayed();
+
+    if (node.isShadowRoot) {
+      this.markup.telemetry.scalarSet(
+        "devtools.shadowdom.shadow_root_displayed",
+        true
+      );
+    }
+  },
+
+  buildMarkup() {
+    this.elt = this.win.document.createElement("li");
+    this.elt.classList.add("child", "collapsed");
+    this.elt.setAttribute("role", "presentation");
+
+    this.tagLine = this.win.document.createElement("div");
+    this.tagLine.setAttribute("id", this.id);
+    this.tagLine.classList.add("tag-line");
+    this.tagLine.setAttribute("role", "treeitem");
+    this.tagLine.setAttribute("aria-level", this.level);
+    this.tagLine.setAttribute("aria-grabbed", this.isDragging);
+    this.elt.appendChild(this.tagLine);
+
+    this.mutationMarker = this.win.document.createElement("div");
+    this.mutationMarker.classList.add("markup-tag-mutation-marker");
+    this.mutationMarker.style.setProperty("--markup-level", this.level);
+    this.tagLine.appendChild(this.mutationMarker);
+
+    this.tagState = this.win.document.createElement("span");
+    this.tagState.classList.add("tag-state");
+    this.tagState.setAttribute("role", "presentation");
+    this.tagLine.appendChild(this.tagState);
+
+    if (this.type !== TYPES.TEXT_CONTAINER) {
+      this.expander = this.win.document.createElement("span");
+      this.expander.classList.add("theme-twisty", "expander");
+      this.expander.setAttribute("role", "presentation");
+      this.tagLine.appendChild(this.expander);
+    }
+
+    this.children = this.win.document.createElement("ul");
+    this.children.classList.add("children");
+    this.children.setAttribute("role", "group");
+    this.elt.appendChild(this.children);
+  },
+
+  toString() {
+    return "[MarkupContainer for " + this.node + "]";
+  },
+
+  isPreviewable() {
+    if (this.node.tagName && !this.node.isPseudoElement) {
+      const tagName = this.node.tagName.toLowerCase();
+      const srcAttr = this.editor.getAttributeElement("src");
+      const isImage = tagName === "img" && srcAttr;
+      const isCanvas = tagName === "canvas";
+
+      return isImage || isCanvas;
+    }
+
+    return false;
+  },
+
+  /**
+   * Show whether the element is displayed or not
+   * If an element has the attribute `display: none` or has been hidden with
+   * the H key, it is not displayed (faded in markup view).
+   * Otherwise, it is displayed.
+   */
+  updateIsDisplayed() {
+    this.elt.classList.remove("not-displayed");
+    if (!this.node.isDisplayed || this.node.hidden) {
+      this.elt.classList.add("not-displayed");
+    }
+  },
+
+  /**
+   * True if the current node has children. The MarkupView
+   * will set this attribute for the MarkupContainer.
+   */
+  _hasChildren: false,
+
+  get hasChildren() {
+    return this._hasChildren;
+  },
+
+  set hasChildren(value) {
+    this._hasChildren = value;
+    this.updateExpander();
+  },
+
+  /**
+   * A list of all elements with tabindex that are not in container's children.
+   */
+  get focusableElms() {
+    return [...this.tagLine.querySelectorAll("[tabindex]")];
+  },
+
+  /**
+   * An indicator that the container internals are focusable.
+   */
+  get canFocus() {
+    return this._canFocus;
+  },
+
+  /**
+   * Toggle focusable state for container internals.
+   */
+  set canFocus(value) {
+    if (this._canFocus === value) {
+      return;
+    }
+
+    this._canFocus = value;
+
+    if (value) {
+      this.tagLine.addEventListener("keydown", this._onKeyDown, true);
+      this.focusableElms.forEach(elm => elm.setAttribute("tabindex", "0"));
+    } else {
+      this.tagLine.removeEventListener("keydown", this._onKeyDown, true);
+      // Exclude from tab order.
+      this.focusableElms.forEach(elm => elm.setAttribute("tabindex", "-1"));
+    }
+  },
+
+  /**
+   * If conatiner and its contents are focusable, exclude them from tab order,
+   * and, if necessary, remove focus.
+   */
+  clearFocus() {
+    if (!this.canFocus) {
+      return;
+    }
+
+    this.canFocus = false;
+    const doc = this.markup.doc;
+
+    if (!doc.activeElement || doc.activeElement === doc.body) {
+      return;
+    }
+
+    let parent = doc.activeElement;
+
+    while (parent && parent !== this.elt) {
+      parent = parent.parentNode;
+    }
+
+    if (parent) {
+      doc.activeElement.blur();
+    }
+  },
+
+  /**
+   * True if the current node can be expanded.
+   */
+  get canExpand() {
+    return this._hasChildren && !this.node.inlineTextChild;
+  },
+
+  /**
+   * True if this is the root <html> element and can't be collapsed.
+   */
+  get mustExpand() {
+    return this.node._parent === this.markup.walker.rootNode;
+  },
+
+  /**
+   * True if current node can be expanded and collapsed.
+   */
+  get showExpander() {
+    return this.canExpand && !this.mustExpand;
+  },
+
+  updateExpander() {
+    if (!this.expander) {
+      return;
+    }
+
+    if (this.showExpander) {
+      this.elt.classList.add("expandable");
+      this.expander.style.visibility = "visible";
+      // Update accessibility expanded state.
+      this.tagLine.setAttribute("aria-expanded", this.expanded);
+    } else {
+      this.elt.classList.remove("expandable");
+      this.expander.style.visibility = "hidden";
+      // No need for accessible expanded state indicator when expander is not
+      // shown.
+      this.tagLine.removeAttribute("aria-expanded");
+    }
+  },
+
+  /**
+   * If current node has no children, ignore them. Otherwise, consider them a
+   * group from the accessibility point of view.
+   */
+  setChildrenRole() {
+    this.children.setAttribute(
+      "role",
+      this.hasChildren ? "group" : "presentation"
+    );
+  },
+
+  /**
+   * Set an appropriate DOM tree depth level for a node and its subtree.
+   */
+  updateLevel() {
+    // ARIA level should already be set when the container markup is created.
+    const currentLevel = this.tagLine.getAttribute("aria-level");
+    const newLevel = this.level;
+    if (currentLevel === newLevel) {
+      // If level did not change, ignore this node and its subtree.
+      return;
+    }
+
+    this.tagLine.setAttribute("aria-level", newLevel);
+    const childContainers = this.getChildContainers();
+    if (childContainers) {
+      childContainers.forEach(container => container.updateLevel());
+    }
+  },
+
+  /**
+   * If the node has children, return the list of containers for all these
+   * children.
+   */
+  getChildContainers() {
+    if (!this.hasChildren) {
+      return null;
+    }
+
+    return [...this.children.children]
+      .filter(node => node.container)
+      .map(node => node.container);
+  },
+
+  /**
+   * True if the node has been visually expanded in the tree.
+   */
+  get expanded() {
+    return !this.elt.classList.contains("collapsed");
+  },
+
+  setExpanded(value) {
+    if (!this.expander) {
+      return;
+    }
+
+    if (!this.canExpand) {
+      value = false;
+    }
+
+    if (this.mustExpand) {
+      value = true;
+    }
+
+    if (value && this.elt.classList.contains("collapsed")) {
+      this.showCloseTagLine();
+
+      this.elt.classList.remove("collapsed");
+      this.expander.setAttribute("open", "");
+      this.hovered = false;
+      this.markup.emit("expanded");
+    } else if (!value) {
+      this.hideCloseTagLine();
+
+      this.elt.classList.add("collapsed");
+      this.expander.removeAttribute("open");
+      this.markup.emit("collapsed");
+    }
+
+    if (this.showExpander) {
+      this.tagLine.setAttribute("aria-expanded", this.expanded);
+    }
+
+    if (this.node.isShadowRoot) {
+      this.markup.telemetry.scalarSet(
+        "devtools.shadowdom.shadow_root_expanded",
+        true
+      );
+    }
+  },
+
+  /**
+   * Expanding a node means cloning its "inline" closing tag into a new
+   * tag-line that the user can interact with and showing the children.
+   */
+  showCloseTagLine() {
+    // Only element containers display a closing tag line. #document has no closing line.
+    if (this.type !== TYPES.ELEMENT_CONTAINER) {
+      return;
+    }
+
+    // Retrieve the closest .close node for this container.
+    const closingTag = this.elt.querySelector(".close");
+    if (!closingTag) {
+      return;
+    }
+
+    // Create the closing tag-line element if not already created.
+    if (!this.closeTagLine) {
+      const line = this.markup.doc.createElement("div");
+      line.classList.add("tag-line");
+      // Closing tag is not important for accessibility.
+      line.setAttribute("role", "presentation");
+
+      const tagState = this.markup.doc.createElement("div");
+      tagState.classList.add("tag-state");
+      line.appendChild(tagState);
+
+      line.appendChild(closingTag.cloneNode(true));
+
+      flashElementOff(line);
+      this.closeTagLine = line;
+    }
+    this.elt.appendChild(this.closeTagLine);
+  },
+
+  /**
+   * Hide the closing tag-line element which should only be displayed when the container
+   * is expanded.
+   */
+  hideCloseTagLine() {
+    if (!this.closeTagLine) {
+      return;
+    }
+
+    this.elt.removeChild(this.closeTagLine);
+    this.closeTagLine = undefined;
+  },
+
+  parentContainer() {
+    return this.elt.parentNode ? this.elt.parentNode.container : null;
+  },
+
+  /**
+   * Determine tree depth level of a given node. This is used to specify ARIA
+   * level for node tree items and to give them better semantic context.
+   */
+  get level() {
+    let level = 1;
+    let parent = this.node.parentNode();
+    while (parent && parent !== this.markup.walker.rootNode) {
+      level++;
+      parent = parent.parentNode();
+    }
+    return level;
+  },
+
+  _isDragging: false,
+  _dragStartY: 0,
+
+  set isDragging(isDragging) {
+    const rootElt = this.markup.getContainer(this.markup._rootNode).elt;
+    this._isDragging = isDragging;
+    this.markup.isDragging = isDragging;
+    this.tagLine.setAttribute("aria-grabbed", isDragging);
+
+    if (isDragging) {
+      this.htmlElt.classList.add("dragging");
+      this.elt.classList.add("dragging");
+      this.markup.doc.body.classList.add("dragging");
+      rootElt.setAttribute("aria-dropeffect", "move");
+    } else {
+      this.htmlElt.classList.remove("dragging");
+      this.elt.classList.remove("dragging");
+      this.markup.doc.body.classList.remove("dragging");
+      rootElt.setAttribute("aria-dropeffect", "none");
+    }
+  },
+
+  get isDragging() {
+    return this._isDragging;
+  },
+
+  /**
+   * Check if element is draggable.
+   */
+  isDraggable() {
+    const tagName = this.node.tagName && this.node.tagName.toLowerCase();
+
+    return (
+      !this.node.isPseudoElement &&
+      !this.node.isAnonymous &&
+      !this.node.isDocumentElement &&
+      tagName !== "body" &&
+      tagName !== "head" &&
+      this.win.getSelection().isCollapsed &&
+      this.node.parentNode() &&
+      this.node.parentNode().tagName !== null
+    );
+  },
+
+  isSlotted() {
+    return false;
+  },
+
+  _onKeyDown(event) {
+    const { target, keyCode, shiftKey } = event;
+    const isInput = this.markup._isInputOrTextarea(target);
+
+    // Ignore all keystrokes that originated in editors except for when 'Tab' is
+    // pressed.
+    if (isInput && keyCode !== KeyCodes.DOM_VK_TAB) {
+      return;
+    }
+
+    switch (keyCode) {
+      case KeyCodes.DOM_VK_TAB:
+        // Only handle 'Tab' if tabbable element is on the edge (first or last).
+        if (isInput) {
+          // Corresponding tabbable element is editor's next sibling.
+          const next = wrapMoveFocus(
+            this.focusableElms,
+            target.nextSibling,
+            shiftKey
+          );
+          if (next) {
+            event.preventDefault();
+            // Keep the editing state if possible.
+            if (next._editable) {
+              const e = this.markup.doc.createEvent("Event");
+              e.initEvent(next._trigger, true, true);
+              next.dispatchEvent(e);
+            }
+          }
+        } else {
+          const next = wrapMoveFocus(this.focusableElms, target, shiftKey);
+          if (next) {
+            event.preventDefault();
+          }
+        }
+        break;
+      case KeyCodes.DOM_VK_ESCAPE:
+        this.clearFocus();
+        this.markup.getContainer(this.markup._rootNode).elt.focus();
+        if (this.isDragging) {
+          // Escape when dragging is handled by markup view itself.
+          return;
+        }
+        event.preventDefault();
+        break;
+      default:
+        return;
+    }
+    event.stopPropagation();
+  },
+
+  _onMouseDown(event) {
+    const { target, button, metaKey, ctrlKey } = event;
+    const isLeftClick = button === 0;
+    const isMiddleClick = button === 1;
+    const isMetaClick = isLeftClick && (metaKey || ctrlKey);
+
+    // The "show more nodes" button already has its onclick, so early return.
+    if (target.nodeName === "button") {
+      return;
+    }
+
+    // Bail out when clicking on arrow expanders to avoid selecting the row.
+    if (target.classList.contains("expander")) {
+      return;
+    }
+
+    // target is the MarkupContainer itself.
+    this.hovered = false;
+    this.markup.navigate(this);
+    // Make container tabbable descendants tabbable and focus in.
+    this.canFocus = true;
+    this.focus();
+    event.stopPropagation();
+
+    // Preventing the default behavior will avoid the body to gain focus on
+    // mouseup (through bubbling) when clicking on a non focusable node in the
+    // line. So, if the click happened outside of a focusable element, do
+    // prevent the default behavior, so that the tagname or textcontent gains
+    // focus.
+    if (!target.closest(".editor [tabindex]")) {
+      event.preventDefault();
+    }
+
+    // Middle clicks will trigger the scroll lock feature to turn on.
+    // The toolbox is normally responsible for calling preventDefault when
+    // needed, but we prevent markup-view mousedown events from bubbling up (via
+    // stopPropagation). So we have to preventDefault here as well in order to
+    // avoid this issue.
+    if (isMiddleClick) {
+      event.preventDefault();
+    }
+
+    // Follow attribute links if middle or meta click.
+    if (isMiddleClick || isMetaClick) {
+      this._openAttributeLink(target.dataset.type, target.dataset.link);
+      return;
+    }
+
+    // Start node drag & drop (if the mouse moved, see _onMouseMove).
+    if (isLeftClick && this.isDraggable()) {
+      this._isPreDragging = true;
+      this._dragStartY = event.pageY;
+      this.markup._draggedContainer = this;
+    }
+  },
+
+  _onClick(event) {
+    const { target } = event;
+    if (target.nodeName !== "button") {
+      return;
+    }
+
+    // We only care about handling click/keyboard activation for buttons inside
+    // "link" attributes (e.g. the "select node" button)
+    const closestLinkEl = target.closest("[data-link]");
+    if (!closestLinkEl) {
+      return;
+    }
+
+    this._openAttributeLink(
+      closestLinkEl.dataset.type,
+      closestLinkEl.dataset.link
+    );
+    event.stopPropagation();
+  },
+
+  /**
+   * Open a "link" found in a node's attribute in the markup-view
+   *
+   * @param {String} type: A node-attribute-parser.js ATTRIBUTE_TYPES
+   * @param {String} link: A "link" as returned by the `parseAttribute` function from
+   *                 node-attribute-parser.js . This can be an actual URL, but could be
+   *                 something else (e.g. an element id).
+   */
+  _openAttributeLink(type, link) {
+    // Make container tabbable descendants not tabbable (by default).
+    this.canFocus = false;
+    this.markup.followAttributeLink(type, link);
+  },
+
+  /**
+   * On mouse up, stop dragging.
+   * This handler is called from the markup view, to reduce number of listeners.
+   */
+  async onMouseUp() {
+    this._isPreDragging = false;
+    this.markup._draggedContainer = null;
+
+    if (this.isDragging) {
+      this.cancelDragging();
+
+      if (!this.markup.dropTargetNodes) {
+        return;
+      }
+
+      const { nextSibling, parent } = this.markup.dropTargetNodes;
+      const { walkerFront } = parent;
+      await walkerFront.insertBefore(this.node, parent, nextSibling);
+      this.markup.emit("drop-completed");
+    }
+  },
+
+  /**
+   * On mouse move, move the dragged element and indicate the drop target.
+   * This handler is called from the markup view, to reduce number of listeners.
+   */
+  onMouseMove(event) {
+    // If this is the first move after mousedown, only start dragging after the
+    // mouse has travelled a few pixels and then indicate the start position.
+    const initialDiff = Math.abs(event.pageY - this._dragStartY);
+    if (this._isPreDragging && initialDiff >= DRAG_DROP_MIN_INITIAL_DISTANCE) {
+      this._isPreDragging = false;
+      this.isDragging = true;
+
+      // If this is the last child, use the closing <div.tag-line> of parent as
+      // indicator.
+      const position =
+        this.elt.nextElementSibling ||
+        this.markup.getContainer(this.node.parentNode()).closeTagLine;
+      this.markup.indicateDragTarget(position);
+    }
+
+    if (this.isDragging) {
+      const x = 0;
+      let y = event.pageY - this.win.scrollY;
+
+      // Ensure we keep the dragged element within the markup view.
+      if (y < 0) {
+        y = 0;
+      } else if (y >= this.markup.doc.body.offsetHeight - this.win.scrollY) {
+        y = this.markup.doc.body.offsetHeight - this.win.scrollY - 1;
+      }
+
+      const diff = y - this._dragStartY + this.win.scrollY;
+      this.elt.style.top = diff + "px";
+
+      const el = this.markup.doc.elementFromPoint(x, y);
+      this.markup.indicateDropTarget(el);
+    }
+  },
+
+  cancelDragging() {
+    if (!this.isDragging) {
+      return;
+    }
+
+    this._isPreDragging = false;
+    this.isDragging = false;
+    this.elt.style.removeProperty("top");
+  },
+
+  /**
+   * Temporarily flash the container to attract attention.
+   * Used for markup mutations.
+   */
+  flashMutation() {
+    if (!this.selected) {
+      flashElementOn(this.tagState, {
+        foregroundElt: this.editor.elt,
+        backgroundClass: "theme-bg-contrast",
+      });
+      if (this._flashMutationTimer) {
+        clearTimeout(this._flashMutationTimer);
+        this._flashMutationTimer = null;
+      }
+      this._flashMutationTimer = setTimeout(() => {
+        flashElementOff(this.tagState, {
+          foregroundElt: this.editor.elt,
+          backgroundClass: "theme-bg-contrast",
+        });
+      }, this.markup.CONTAINER_FLASHING_DURATION);
+    }
+  },
+
+  _hovered: false,
+
+  /**
+   * Highlight the currently hovered tag + its closing tag if necessary
+   * (that is if the tag is expanded)
+   */
+  set hovered(value) {
+    this.tagState.classList.remove("flash-out");
+    this._hovered = value;
+    if (value) {
+      if (!this.selected) {
+        this.tagState.classList.add("tag-hover");
+      }
+      if (this.closeTagLine) {
+        this.closeTagLine
+          .querySelector(".tag-state")
+          .classList.add("tag-hover");
+      }
+    } else {
+      this.tagState.classList.remove("tag-hover");
+      if (this.closeTagLine) {
+        this.closeTagLine
+          .querySelector(".tag-state")
+          .classList.remove("tag-hover");
+      }
+    }
+  },
+
+  /**
+   * True if the container is visible in the markup tree.
+   */
+  get visible() {
+    return this.elt.getBoundingClientRect().height > 0;
+  },
+
+  /**
+   * True if the container is currently selected.
+   */
+  _selected: false,
+
+  get selected() {
+    return this._selected;
+  },
+
+  set selected(value) {
+    this.tagState.classList.remove("flash-out");
+    this._selected = value;
+    this.editor.selected = value;
+    // Markup tree item should have accessible selected state.
+    this.tagLine.setAttribute("aria-selected", value);
+    if (this._selected) {
+      const container = this.markup.getContainer(this.markup._rootNode);
+      if (container) {
+        container.elt.setAttribute("aria-activedescendant", this.id);
+      }
+      this.tagLine.setAttribute("selected", "");
+      this.tagState.classList.add("theme-selected");
+    } else {
+      this.tagLine.removeAttribute("selected");
+      this.tagState.classList.remove("theme-selected");
+    }
+  },
+
+  /**
+   * Update the container's editor to the current state of the
+   * viewed node.
+   */
+  update(mutationBreakpoints) {
+    if (this.node.pseudoClassLocks.length) {
+      this.elt.classList.add("pseudoclass-locked");
+    } else {
+      this.elt.classList.remove("pseudoclass-locked");
+    }
+
+    if (mutationBreakpoints) {
+      const allMutationsDisabled = Array.from(
+        mutationBreakpoints.values()
+      ).every(element => element === false);
+
+      if (mutationBreakpoints.size > 0) {
+        this.mutationMarker.classList.add("has-mutations");
+        this.mutationMarker.classList.toggle(
+          "mutation-breakpoint-disabled",
+          allMutationsDisabled
+        );
+      } else {
+        this.mutationMarker.classList.remove("has-mutations");
+      }
+    }
+
+    this.updateIsDisplayed();
+
+    if (this.editor.update) {
+      this.editor.update();
+    }
+  },
+
+  /**
+   * Try to put keyboard focus on the current editor.
+   */
+  focus() {
+    // Elements with tabindex of -1 are not focusable.
+    const focusable = this.editor.elt.querySelector("[tabindex='0']");
+    if (focusable) {
+      focusable.focus();
+    }
+  },
+
+  _onToggle(event) {
+    event.stopPropagation();
+
+    // Prevent the html tree from expanding when an event bubble, display or scrollable
+    // node is clicked.
+    if (
+      event.target.dataset.event ||
+      event.target.dataset.display ||
+      event.target.dataset.scrollable
+    ) {
+      return;
+    }
+
+    this.expandContainer(event.altKey);
+  },
+
+  /**
+   * Expands the markup container if it has children.
+   *
+   * @param  {Boolean} applyToDescendants
+   *         Whether all descendants should also be expanded/collapsed
+   */
+  expandContainer(applyToDescendants) {
+    if (this.hasChildren) {
+      this.markup.setNodeExpanded(
+        this.node,
+        !this.expanded,
+        applyToDescendants
+      );
+    }
+  },
+
+  /**
+   * Get rid of event listeners and references, when the container is no longer
+   * needed
+   */
+  destroy() {
+    // Remove event listeners
+    if (this._eventListenersAbortController) {
+      this._eventListenersAbortController.abort();
+    }
+    this.tagLine.removeEventListener("keydown", this._onKeyDown, true);
+
+    if (this.markup._draggedContainer === this) {
+      this.markup._draggedContainer = null;
+    }
+
+    this.win = null;
+    this.htmlElt = null;
+    this._eventListenersAbortController = null;
+
+    // Recursively destroy children containers
+    let firstChild = this.children.firstChild;
+    while (firstChild) {
+      // Not all children of a container are containers themselves
+      // ("show more nodes" button is one example)
+      if (firstChild.container) {
+        firstChild.container.destroy();
+      }
+      this.children.removeChild(firstChild);
+      firstChild = this.children.firstChild;
+    }
+
+    this.editor.destroy();
+  },
+};
+
+module.exports = MarkupContainer;
diff --git a/devtools/client/inspector/markup/views/moz.build b/devtools/client/inspector/markup/views/moz.build
new file mode 100644
index 0000000000..9be0f159ee
--- /dev/null
+++ b/devtools/client/inspector/markup/views/moz.build
@@ -0,0 +1,19 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "element-container.js",
+    "element-editor.js",
+    "html-editor.js",
+    "markup-container.js",
+    "read-only-container.js",
+    "read-only-editor.js",
+    "root-container.js",
+    "slotted-node-container.js",
+    "slotted-node-editor.js",
+    "text-container.js",
+    "text-editor.js",
+)
diff --git a/devtools/client/inspector/markup/views/read-only-container.js b/devtools/client/inspector/markup/views/read-only-container.js
new file mode 100644
index 0000000000..b48aad88a1
--- /dev/null
+++ b/devtools/client/inspector/markup/views/read-only-container.js
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const ReadOnlyEditor = require("resource://devtools/client/inspector/markup/views/read-only-editor.js");
+const MarkupContainer = require("resource://devtools/client/inspector/markup/views/markup-container.js");
+const { extend } = require("resource://devtools/shared/extend.js");
+
+/**
+ * An implementation of MarkupContainer for Pseudo Elements,
+ * Doctype nodes, or any other type generic node that doesn't
+ * fit for other editors.
+ * Does not allow any editing, just viewing / selecting.
+ *
+ * @param  {MarkupView} markupView
+ *         The markup view that owns this container.
+ * @param  {NodeFront} node
+ *         The node to display.
+ */
+function MarkupReadOnlyContainer(markupView, node) {
+  MarkupContainer.prototype.initialize.call(
+    this,
+    markupView,
+    node,
+    "readonlycontainer"
+  );
+
+  this.editor = new ReadOnlyEditor(this, node);
+  this.tagLine.appendChild(this.editor.elt);
+}
+
+MarkupReadOnlyContainer.prototype = extend(MarkupContainer.prototype, {});
+
+module.exports = MarkupReadOnlyContainer;
diff --git a/devtools/client/inspector/markup/views/read-only-editor.js b/devtools/client/inspector/markup/views/read-only-editor.js
new file mode 100644
index 0000000000..009abd5af0
--- /dev/null
+++ b/devtools/client/inspector/markup/views/read-only-editor.js
@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
+
+/**
+ * Creates an editor for non-editable nodes.
+ */
+function ReadOnlyEditor(container, node) {
+  this.container = container;
+  this.markup = this.container.markup;
+  this.buildMarkup();
+
+  if (node.isPseudoElement) {
+    this.tag.classList.add("theme-fg-color3");
+    if (node.isMarkerPseudoElement) {
+      this.tag.textContent = "::marker";
+    } else if (node.isBeforePseudoElement) {
+      this.tag.textContent = "::before";
+    } else if (node.isAfterPseudoElement) {
+      this.tag.textContent = "::after";
+    }
+  } else if (node.nodeType == nodeConstants.DOCUMENT_TYPE_NODE) {
+    this.elt.classList.add("comment", "doctype");
+    this.tag.textContent = node.doctypeString;
+  } else if (node.isShadowRoot) {
+    this.tag.textContent = `#shadow-root (${node.shadowRootMode})`;
+  } else {
+    this.tag.textContent = node.nodeName;
+  }
+
+  // Make the "tag" part of this editor focusable.
+  this.tag.setAttribute("tabindex", "-1");
+}
+
+ReadOnlyEditor.prototype = {
+  buildMarkup() {
+    const doc = this.markup.doc;
+
+    this.elt = doc.createElement("span");
+    this.elt.classList.add("editor");
+
+    this.tag = doc.createElement("span");
+    this.tag.classList.add("tag");
+    this.elt.appendChild(this.tag);
+  },
+
+  destroy() {
+    // We might be already destroyed.
+    if (!this.elt) {
+      return;
+    }
+
+    this.elt.remove();
+    this.elt = null;
+    this.tag = null;
+  },
+
+  /**
+   * Show overflow highlight if showOverflowHighlight is true, otherwise hide it.
+   *
+   * @param {Boolean} showOverflowHighlight
+   */
+  setOverflowHighlight(showOverflowHighlight) {
+    this.container.tagState.classList.toggle(
+      "overflow-causing-highlighted",
+      showOverflowHighlight
+    );
+  },
+
+  /**
+   * Stub method for consistency with ElementEditor.
+   */
+  getInfoAtNode() {
+    return null;
+  },
+};
+
+module.exports = ReadOnlyEditor;
diff --git a/devtools/client/inspector/markup/views/root-container.js b/devtools/client/inspector/markup/views/root-container.js
new file mode 100644
index 0000000000..8b34b85843
--- /dev/null
+++ b/devtools/client/inspector/markup/views/root-container.js
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * Dummy container node used for the root document element.
+ */
+function RootContainer(markupView, node) {
+  this.doc = markupView.doc;
+  this.elt = this.doc.createElement("ul");
+  // Root container has tree semantics for accessibility.
+  this.elt.setAttribute("role", "tree");
+  this.elt.setAttribute("tabindex", "0");
+  this.elt.setAttribute("aria-dropeffect", "none");
+  this.elt.container = this;
+  this.children = this.elt;
+  this.node = node;
+  this.toString = () => "[root container]";
+}
+
+RootContainer.prototype = {
+  hasChildren: true,
+  expanded: true,
+  update() {},
+  destroy() {},
+
+  /**
+   * If the node has children, return the list of containers for all these children.
+   * @return {Array} An array of child containers or null.
+   */
+  getChildContainers() {
+    return [...this.children.children]
+      .filter(node => node.container)
+      .map(node => node.container);
+  },
+
+  /**
+   * Set the expanded state of the container node.
+   * @param  {Boolean} value
+   */
+  setExpanded() {},
+
+  /**
+   * Set an appropriate role of the container's children node.
+   */
+  setChildrenRole() {},
+
+  /**
+   * Set an appropriate DOM tree depth level for a node and its subtree.
+   */
+  updateLevel() {},
+
+  isSlotted() {
+    return false;
+  },
+};
+
+module.exports = RootContainer;
diff --git a/devtools/client/inspector/markup/views/slotted-node-container.js b/devtools/client/inspector/markup/views/slotted-node-container.js
new file mode 100644
index 0000000000..6d128cfc39
--- /dev/null
+++ b/devtools/client/inspector/markup/views/slotted-node-container.js
@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const SlottedNodeEditor = require("resource://devtools/client/inspector/markup/views/slotted-node-editor.js");
+const MarkupContainer = require("resource://devtools/client/inspector/markup/views/markup-container.js");
+const { extend } = require("resource://devtools/shared/extend.js");
+
+function SlottedNodeContainer(markupView, node) {
+  MarkupContainer.prototype.initialize.call(
+    this,
+    markupView,
+    node,
+    "slottednodecontainer"
+  );
+
+  this.editor = new SlottedNodeEditor(this, node);
+  this.tagLine.appendChild(this.editor.elt);
+  this.hasChildren = false;
+}
+
+SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
+  _onMouseDown(event) {
+    if (event.target.classList.contains("reveal-link")) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+    MarkupContainer.prototype._onMouseDown.call(this, event);
+  },
+
+  /**
+   * Slotted node containers never display children and should not react to toggle.
+   */
+  _onToggle(event) {
+    event.stopPropagation();
+  },
+
+  _revealFromSlot() {
+    const reason = "reveal-from-slot";
+    this.markup.inspector.selection.setNodeFront(this.node, { reason });
+    this.markup.telemetry.scalarSet(
+      "devtools.shadowdom.reveal_link_clicked",
+      true
+    );
+  },
+
+  _onKeyDown(event) {
+    MarkupContainer.prototype._onKeyDown.call(this, event);
+
+    const isActionKey = event.code == "Enter" || event.code == "Space";
+    if (event.target.classList.contains("reveal-link") && isActionKey) {
+      this._revealFromSlot();
+    }
+  },
+
+  async onContainerClick(event) {
+    if (!event.target.classList.contains("reveal-link")) {
+      return;
+    }
+
+    this._revealFromSlot();
+  },
+
+  isDraggable() {
+    return false;
+  },
+
+  isSlotted() {
+    return true;
+  },
+});
+
+module.exports = SlottedNodeContainer;
diff --git a/devtools/client/inspector/markup/views/slotted-node-editor.js b/devtools/client/inspector/markup/views/slotted-node-editor.js
new file mode 100644
index 0000000000..d70311e4dc
--- /dev/null
+++ b/devtools/client/inspector/markup/views/slotted-node-editor.js
@@ -0,0 +1,63 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+function SlottedNodeEditor(container, node) {
+  this.container = container;
+  this.markup = this.container.markup;
+  this.buildMarkup();
+  this.tag.textContent = "<" + node.nodeName.toLowerCase() + ">";
+
+  // Make the "tag" part of this editor focusable.
+  this.tag.setAttribute("tabindex", "-1");
+}
+
+SlottedNodeEditor.prototype = {
+  buildMarkup() {
+    const doc = this.markup.doc;
+
+    this.elt = doc.createElement("span");
+    this.elt.classList.add("editor");
+
+    this.tag = doc.createElement("span");
+    this.tag.classList.add("tag");
+    this.elt.appendChild(this.tag);
+
+    this.revealLink = doc.createElement("span");
+    this.revealLink.setAttribute("role", "link");
+    this.revealLink.setAttribute("tabindex", -1);
+    this.revealLink.title = INSPECTOR_L10N.getStr(
+      "markupView.revealLink.tooltip"
+    );
+    this.revealLink.classList.add("reveal-link");
+    this.elt.appendChild(this.revealLink);
+  },
+
+  destroy() {
+    // We might be already destroyed.
+    if (!this.elt) {
+      return;
+    }
+
+    this.elt.remove();
+    this.elt = null;
+    this.tag = null;
+    this.revealLink = null;
+  },
+
+  /**
+   * Stub method for consistency with ElementEditor.
+   */
+  getInfoAtNode() {
+    return null;
+  },
+};
+
+module.exports = SlottedNodeEditor;
diff --git a/devtools/client/inspector/markup/views/text-container.js b/devtools/client/inspector/markup/views/text-container.js
new file mode 100644
index 0000000000..1b240cb1df
--- /dev/null
+++ b/devtools/client/inspector/markup/views/text-container.js
@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
+const TextEditor = require("resource://devtools/client/inspector/markup/views/text-editor.js");
+const MarkupContainer = require("resource://devtools/client/inspector/markup/views/markup-container.js");
+const { extend } = require("resource://devtools/shared/extend.js");
+
+/**
+ * An implementation of MarkupContainer for text node and comment nodes.
+ * Allows basic text editing in a textarea.
+ *
+ * @param  {MarkupView} markupView
+ *         The markup view that owns this container.
+ * @param  {NodeFront} node
+ *         The node to display.
+ * @param  {Inspector} inspector
+ *         The inspector tool container the markup-view
+ */
+function MarkupTextContainer(markupView, node) {
+  MarkupContainer.prototype.initialize.call(
+    this,
+    markupView,
+    node,
+    "textcontainer"
+  );
+
+  if (node.nodeType == nodeConstants.TEXT_NODE) {
+    this.editor = new TextEditor(this, node, "text");
+  } else if (node.nodeType == nodeConstants.COMMENT_NODE) {
+    this.editor = new TextEditor(this, node, "comment");
+  } else {
+    throw new Error("Invalid node for MarkupTextContainer");
+  }
+
+  this.tagLine.appendChild(this.editor.elt);
+}
+
+MarkupTextContainer.prototype = extend(MarkupContainer.prototype, {});
+
+module.exports = MarkupTextContainer;
diff --git a/devtools/client/inspector/markup/views/text-editor.js b/devtools/client/inspector/markup/views/text-editor.js
new file mode 100644
index 0000000000..62b59c74cd
--- /dev/null
+++ b/devtools/client/inspector/markup/views/text-editor.js
@@ -0,0 +1,143 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+
+const TextNode = createFactory(
+  require("resource://devtools/client/inspector/markup/components/TextNode.js")
+);
+
+loader.lazyRequireGetter(
+  this,
+  "getAutocompleteMaxWidth",
+  "resource://devtools/client/inspector/markup/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getLongString",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "InplaceEditor",
+  "resource://devtools/client/shared/inplace-editor.js",
+  true
+);
+
+/**
+ * Creates a simple text editor node, used for TEXT and COMMENT
+ * nodes.
+ *
+ * @param  {MarkupContainer} container
+ *         The container owning this editor.
+ * @param  {DOMNode} node
+ *         The node being edited.
+ * @param  {String} type
+ *         The type of editor to build. This can be either 'text' or 'comment'.
+ */
+function TextEditor(container, node, type) {
+  this.container = container;
+  this.markup = this.container.markup;
+  this.node = node;
+  this._selected = false;
+
+  this.showTextEditor = this.showTextEditor.bind(this);
+
+  this.buildMarkup(type);
+}
+
+TextEditor.prototype = {
+  buildMarkup(type) {
+    const doc = this.markup.doc;
+
+    this.elt = doc.createElement("span");
+    this.elt.classList.add("editor", type);
+
+    getLongString(this.node.getNodeValue()).then(value => {
+      this.textNode = this.ReactDOM.render(
+        TextNode({
+          showTextEditor: this.showTextEditor,
+          type,
+          value,
+        }),
+        this.elt
+      );
+    });
+  },
+
+  get ReactDOM() {
+    // Reuse the toolbox's ReactDOM to avoid loading react-dom.js again in the
+    // Inspector's BrowserLoader.
+    return this.container.markup.inspector.ReactDOM;
+  },
+
+  get selected() {
+    return this._selected;
+  },
+
+  set selected(value) {
+    if (value === this._selected) {
+      return;
+    }
+    this._selected = value;
+    this.update();
+  },
+
+  showTextEditor(element) {
+    new InplaceEditor({
+      cssProperties: this.markup.inspector.cssProperties,
+      done: (val, commit) => {
+        if (!commit) {
+          return;
+        }
+        getLongString(this.node.getNodeValue()).then(oldValue => {
+          this.container.undo.do(
+            () => {
+              this.node.setNodeValue(val);
+            },
+            () => {
+              this.node.setNodeValue(oldValue);
+            }
+          );
+        });
+      },
+      element,
+      maxWidth: () => getAutocompleteMaxWidth(element, this.container.elt),
+      multiline: true,
+      stopOnReturn: true,
+      trimOutput: false,
+    });
+  },
+
+  async update() {
+    try {
+      const value = await getLongString(this.node.getNodeValue());
+
+      if (this.textNode.state.value !== value) {
+        this.textNode.setState({ value });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  destroy() {
+    this.ReactDOM.unmountComponentAtNode(this.elt);
+  },
+
+  /**
+   * Stub method for consistency with ElementEditor.
+   */
+  getInfoAtNode() {
+    return null;
+  },
+};
+
+module.exports = TextEditor;
diff --git a/devtools/client/inspector/moz.build b/devtools/client/inspector/moz.build
new file mode 100644
index 0000000000..75017b4d91
--- /dev/null
+++ b/devtools/client/inspector/moz.build
@@ -0,0 +1,35 @@
+# 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/.
+
+DIRS += [
+    "animation",
+    "boxmodel",
+    "changes",
+    "compatibility",
+    "components",
+    "computed",
+    "extensions",
+    "flexbox",
+    "fonts",
+    "grids",
+    "layout",
+    "markup",
+    "rules",
+    "shared",
+]
+
+DevToolsModules(
+    "breadcrumbs.js",
+    "inspector-search.js",
+    "inspector.js",
+    "node-picker.js",
+    "panel.js",
+    "store.js",
+    "toolsidebar.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Inspector")
diff --git a/devtools/client/inspector/node-picker.js b/devtools/client/inspector/node-picker.js
new file mode 100644
index 0000000000..24b53b51e0
--- /dev/null
+++ b/devtools/client/inspector/node-picker.js
@@ -0,0 +1,313 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+loader.lazyRequireGetter(
+  this,
+  "EventEmitter",
+  "resource://devtools/shared/event-emitter.js"
+);
+
+/**
+ * Client-side NodePicker module.
+ * To be used by inspector front when it needs to select DOM elements.
+ *
+ * NodePicker is a proxy for the node picker functionality from WalkerFront instances
+ * of all available InspectorFronts. It is a single point of entry for the client to:
+ * - invoke actions to start and stop picking nodes on all walkers
+ * - listen to node picker events from all walkers and relay them to subscribers
+ *
+ *
+ * @param {Commands} commands
+ *        The commands object with all interfaces defined from devtools/shared/commands/
+ * @param {Selection} selection
+ *        The global Selection object
+ */
+class NodePicker extends EventEmitter {
+  constructor(commands, selection) {
+    super();
+    this.commands = commands;
+    this.targetCommand = commands.targetCommand;
+
+    // Whether or not the node picker is active.
+    this.isPicking = false;
+    // Whether to focus the top-level frame before picking nodes.
+    this.doFocus = false;
+  }
+
+  // The set of inspector fronts corresponding to the targets where picking happens.
+  #currentInspectorFronts = new Set();
+
+  /**
+   * Start/stop the element picker on the debuggee target.
+   *
+   * @param {Boolean} doFocus
+   *        Optionally focus the content area once the picker is activated.
+   * @return Promise that resolves when done
+   */
+  togglePicker = doFocus => {
+    if (this.isPicking) {
+      return this.stop({ canceled: true });
+    }
+    return this.start(doFocus);
+  };
+
+  /**
+   * This DOCUMENT_EVENT resource callback is only used for webextension targets
+   * to workaround the fact that some navigations will not create/destroy any
+   * target (eg when jumping from a background document to a popup document).
+   **/
+  #onWebExtensionDocumentEventAvailable = async resources => {
+    const { DOCUMENT_EVENT } = this.commands.resourceCommand.TYPES;
+
+    for (const resource of resources) {
+      if (
+        resource.resourceType == DOCUMENT_EVENT &&
+        resource.name === "dom-complete" &&
+        resource.targetFront.isTopLevel &&
+        // When switching frames for a webextension target, a first dom-complete
+        // resource is emitted when we start watching the new docshell, in the
+        // WindowGlobalTargetActor progress listener.
+        //
+        // However here, we are expecting the "fake" dom-complete resource
+        // emitted specifically from the webextension target actor, when the
+        // new docshell is finally recognized to be linked to the target's
+        // webextension. This resource is emitted from `_changeTopLevelDocument`
+        // and is the only one which will have `isFrameSwitching` set to true.
+        //
+        // It also emitted after the one for the new docshell, so to avoid
+        // stopping and starting the node-picker twice, we filter out the first
+        // resource, which does not have `isFrameSwitching` set.
+        resource.isFrameSwitching
+      ) {
+        const inspectorFront = await resource.targetFront.getFront("inspector");
+        // When a webextension target navigates, it will typically be between
+        // documents which are not under the same root (fallback-document,
+        // devtools-panel, popup). Even though we are not switching targets, we
+        // need to restart the node picker.
+        await inspectorFront.walker.cancelPick();
+        await inspectorFront.walker.pick(this.doFocus);
+        this.emitForTests("node-picker-webextension-target-restarted");
+      }
+    }
+  };
+
+  /**
+   * Tell the walker front corresponding to the given inspector front to enter node
+   * picking mode (listen for mouse movements over its nodes) and set event listeners
+   * associated with node picking: hover node, pick node, preview, cancel. See WalkerSpec.
+   *
+   * @param {InspectorFront} inspectorFront
+   * @return {Promise}
+   */
+  #onInspectorFrontAvailable = async inspectorFront => {
+    this.#currentInspectorFronts.add(inspectorFront);
+    // watchFront may notify us about inspector fronts that aren't initialized yet,
+    // so ensure waiting for initialization in order to have a defined `walker` attribute.
+    await inspectorFront.initialize();
+    const { walker } = inspectorFront;
+    walker.on("picker-node-hovered", this.#onHovered);
+    walker.on("picker-node-picked", this.#onPicked);
+    walker.on("picker-node-previewed", this.#onPreviewed);
+    walker.on("picker-node-canceled", this.#onCanceled);
+    await walker.pick(this.doFocus);
+
+    this.emitForTests("inspector-front-ready-for-picker", walker);
+  };
+
+  /**
+   * Tell the walker front corresponding to the given inspector front to exit the node
+   * picking mode and remove all event listeners associated with node picking.
+   *
+   * @param {InspectorFront} inspectorFront
+   * @param {Boolean} isDestroyCodePath
+   *        Optional. If true, we assume that's when the toolbox closes
+   *        and we should avoid doing any RDP request.
+   * @return {Promise}
+   */
+  #onInspectorFrontDestroyed = async (
+    inspectorFront,
+    { isDestroyCodepath } = {}
+  ) => {
+    this.#currentInspectorFronts.delete(inspectorFront);
+
+    const { walker } = inspectorFront;
+    if (!walker) {
+      return;
+    }
+
+    walker.off("picker-node-hovered", this.#onHovered);
+    walker.off("picker-node-picked", this.#onPicked);
+    walker.off("picker-node-previewed", this.#onPreviewed);
+    walker.off("picker-node-canceled", this.#onCanceled);
+    // Only do a RDP request if we stop the node picker from a user action.
+    // Avoid doing one when we close the toolbox, in this scenario
+    // the walker actor on the server side will automatically cancel the node picking.
+    if (!isDestroyCodepath) {
+      await walker.cancelPick();
+    }
+  };
+
+  /**
+   * While node picking, we want each target's walker fronts to listen for mouse
+   * movements over their nodes and emit events. Walker fronts are obtained from
+   * inspector fronts so we watch for the creation and destruction of inspector fronts
+   * in order to add or remove the necessary event listeners.
+   *
+   * @param {TargetFront} targetFront
+   * @return {Promise}
+   */
+  #onTargetAvailable = async ({ targetFront }) => {
+    targetFront.watchFronts(
+      "inspector",
+      this.#onInspectorFrontAvailable,
+      this.#onInspectorFrontDestroyed
+    );
+  };
+
+  /**
+   * Start the element picker.
+   * This will instruct walker fronts of all available targets (and those of targets
+   * created while node picking is active) to listen for mouse movements over their nodes
+   * and trigger events when a node is hovered or picked.
+   *
+   * @param {Boolean} doFocus
+   *        Optionally focus the content area once the picker is activated.
+   */
+  start = async doFocus => {
+    if (this.isPicking) {
+      return;
+    }
+    this.isPicking = true;
+    this.doFocus = doFocus;
+
+    this.emit("picker-starting");
+
+    this.targetCommand.watchTargets({
+      types: this.targetCommand.ALL_TYPES,
+      onAvailable: this.#onTargetAvailable,
+    });
+
+    if (this.targetCommand.descriptorFront.isWebExtension) {
+      await this.commands.resourceCommand.watchResources(
+        [this.commands.resourceCommand.TYPES.DOCUMENT_EVENT],
+        {
+          onAvailable: this.#onWebExtensionDocumentEventAvailable,
+        }
+      );
+    }
+
+    this.emit("picker-started");
+  };
+
+  /**
+   * Stop the element picker. Note that the picker is automatically stopped when
+   * an element is picked.
+   *
+   * @param {Boolean} isDestroyCodePath
+   *        Optional. If true, we assume that's when the toolbox closes
+   *        and we should avoid doing any RDP request.
+   * @param {Boolean} canceled
+   *        Optional. If true, emit an additional event to notify that the
+   *        picker was canceled, ie stopped without selecting a node.
+   */
+  stop = async ({ isDestroyCodepath, canceled } = {}) => {
+    if (!this.isPicking) {
+      return;
+    }
+    this.isPicking = false;
+    this.doFocus = false;
+
+    this.targetCommand.unwatchTargets({
+      types: this.targetCommand.ALL_TYPES,
+      onAvailable: this.#onTargetAvailable,
+    });
+
+    if (this.targetCommand.descriptorFront.isWebExtension) {
+      this.commands.resourceCommand.unwatchResources(
+        [this.commands.resourceCommand.TYPES.DOCUMENT_EVENT],
+        {
+          onAvailable: this.#onWebExtensionDocumentEventAvailable,
+        }
+      );
+    }
+
+    const promises = [];
+    for (const inspectorFront of this.#currentInspectorFronts) {
+      promises.push(
+        this.#onInspectorFrontDestroyed(inspectorFront, {
+          isDestroyCodepath,
+        })
+      );
+    }
+    await Promise.all(promises);
+
+    this.#currentInspectorFronts.clear();
+
+    this.emit("picker-stopped");
+
+    if (canceled) {
+      this.emit("picker-node-canceled");
+    }
+  };
+
+  destroy() {
+    // Do not await for stop as the isDestroy argument will make this method synchronous
+    // and we want to avoid having an async destroy
+    this.stop({ isDestroyCodepath: true });
+    this.targetCommand = null;
+    this.commands = null;
+  }
+
+  /**
+   * When a node is hovered by the mouse when the highlighter is in picker mode
+   *
+   * @param {Object} data
+   *        Information about the node being hovered
+   */
+  #onHovered = data => {
+    this.emit("picker-node-hovered", data.node);
+
+    // We're going to cleanup references for all the other walkers, so that if we hover
+    // back the same node, we will receive a new `picker-node-hovered` event.
+    for (const inspectorFront of this.#currentInspectorFronts) {
+      if (inspectorFront.walker !== data.node.walkerFront) {
+        inspectorFront.walker.clearPicker();
+      }
+    }
+  };
+
+  /**
+   * When a node has been picked while the highlighter is in picker mode
+   *
+   * @param {Object} data
+   *        Information about the picked node
+   */
+  #onPicked = data => {
+    this.emit("picker-node-picked", data.node);
+    return this.stop();
+  };
+
+  /**
+   * When a node has been shift-clicked (previewed) while the highlighter is in
+   * picker mode
+   *
+   * @param {Object} data
+   *        Information about the picked node
+   */
+  #onPreviewed = data => {
+    this.emit("picker-node-previewed", data.node);
+  };
+
+  /**
+   * When the picker is canceled, stop the picker, and make sure the toolbox
+   * gets the focus.
+   */
+  #onCanceled = data => {
+    return this.stop({ canceled: true });
+  };
+}
+
+module.exports = NodePicker;
diff --git a/devtools/client/inspector/panel.js b/devtools/client/inspector/panel.js
new file mode 100644
index 0000000000..8ffeca8172
--- /dev/null
+++ b/devtools/client/inspector/panel.js
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+function InspectorPanel(iframeWindow, toolbox, commands) {
+  this._inspector = new iframeWindow.Inspector(toolbox, commands);
+}
+InspectorPanel.prototype = {
+  open() {
+    return this._inspector.init();
+  },
+
+  destroy() {
+    this._inspector.destroy();
+  },
+};
+exports.InspectorPanel = InspectorPanel;
diff --git a/devtools/client/inspector/rules/constants.js b/devtools/client/inspector/rules/constants.js
new file mode 100644
index 0000000000..7414014cb2
--- /dev/null
+++ b/devtools/client/inspector/rules/constants.js
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Compatibility tooltip message id shared between the
+// models/text-property.js and the tooltip tests
+exports.COMPATIBILITY_TOOLTIP_MESSAGE = {
+  default: "css-compatibility-default-message",
+  deprecated: "css-compatibility-deprecated-message",
+  "deprecated-experimental":
+    "css-compatibility-deprecated-experimental-message",
+  "deprecated-experimental-supported":
+    "css-compatibility-deprecated-experimental-supported-message",
+  "deprecated-supported": "css-compatibility-deprecated-supported-message",
+  experimental: "css-compatibility-experimental-message",
+  "experimental-supported": "css-compatibility-experimental-supported-message",
+};
diff --git a/devtools/client/inspector/rules/models/class-list.js b/devtools/client/inspector/rules/models/class-list.js
new file mode 100644
index 0000000000..9173977382
--- /dev/null
+++ b/devtools/client/inspector/rules/models/class-list.js
@@ -0,0 +1,271 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+// This serves as a local cache for the classes applied to each of the node we care about
+// here.
+// The map is indexed by NodeFront. Any time a new node is selected in the inspector, an
+// entry is added here, indexed by the corresponding NodeFront.
+// The value for each entry is an array of each of the class this node has. Items of this
+// array are objects like: { name, isApplied } where the name is the class itself, and
+// isApplied is a Boolean indicating if the class is applied on the node or not.
+const CLASSES = new WeakMap();
+
+/**
+ * Manages the list classes per DOM elements we care about.
+ * The actual list is stored in the CLASSES const, indexed by NodeFront objects.
+ * The responsibility of this class is to be the source of truth for anyone who wants to
+ * know which classes a given NodeFront has, and which of these are enabled and which are
+ * disabled.
+ * It also reacts to DOM mutations so the list of classes is up to date with what is in
+ * the DOM.
+ * It can also be used to enable/disable a given class, or add classes.
+ *
+ * @param {Inspector} inspector
+ *        The current inspector instance.
+ */
+class ClassList {
+  constructor(inspector) {
+    EventEmitter.decorate(this);
+
+    this.inspector = inspector;
+
+    this.onMutations = this.onMutations.bind(this);
+    this.inspector.on("markupmutation", this.onMutations);
+
+    this.classListProxyNode = this.inspector.panelDoc.createElement("div");
+    this.previewClasses = [];
+    this.unresolvedStateChanges = [];
+  }
+
+  destroy() {
+    this.inspector.off("markupmutation", this.onMutations);
+    this.inspector = null;
+    this.classListProxyNode = null;
+  }
+
+  /**
+   * The current node selection (which only returns if the node is an ELEMENT_NODE type
+   * since that's the only type this model can work with.)
+   */
+  get currentNode() {
+    if (
+      this.inspector.selection.isElementNode() &&
+      !this.inspector.selection.isPseudoElementNode()
+    ) {
+      return this.inspector.selection.nodeFront;
+    }
+    return null;
+  }
+
+  /**
+   * The class states for the current node selection. See the documentation of the CLASSES
+   * constant.
+   */
+  get currentClasses() {
+    if (!this.currentNode) {
+      return [];
+    }
+
+    if (!CLASSES.has(this.currentNode)) {
+      // Use the proxy node to get a clean list of classes.
+      this.classListProxyNode.className = this.currentNode.className;
+      const nodeClasses = [...new Set([...this.classListProxyNode.classList])]
+        .filter(
+          className =>
+            !this.previewClasses.some(
+              previewClass =>
+                previewClass.className === className &&
+                !previewClass.wasAppliedOnNode
+            )
+        )
+        .map(name => {
+          return { name, isApplied: true };
+        });
+
+      CLASSES.set(this.currentNode, nodeClasses);
+    }
+
+    return CLASSES.get(this.currentNode);
+  }
+
+  /**
+   * Same as currentClasses, but returns it in the form of a className string, where only
+   * enabled classes are added.
+   */
+  get currentClassesPreview() {
+    const currentClasses = this.currentClasses
+      .filter(({ isApplied }) => isApplied)
+      .map(({ name }) => name);
+    const previewClasses = this.previewClasses
+      .filter(previewClass => !currentClasses.includes(previewClass.className))
+      .filter(item => item !== "")
+      .map(({ className }) => className);
+
+    return currentClasses.concat(previewClasses).join(" ").trim();
+  }
+
+  /**
+   * Set the state for a given class on the current node.
+   *
+   * @param {String} name
+   *        The class which state should be changed.
+   * @param {Boolean} isApplied
+   *        True if the class should be enabled, false otherwise.
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  setClassState(name, isApplied) {
+    // Do the change in our local model.
+    const nodeClasses = this.currentClasses;
+    nodeClasses.find(({ name: cName }) => cName === name).isApplied = isApplied;
+
+    return this.applyClassState();
+  }
+
+  /**
+   * Add several classes to the current node at once.
+   *
+   * @param {String} classNameString
+   *        The string that contains all classes.
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  addClassName(classNameString) {
+    this.classListProxyNode.className = classNameString;
+    this.eraseClassPreview();
+    return Promise.all(
+      [...new Set([...this.classListProxyNode.classList])].map(name => {
+        return this.addClass(name);
+      })
+    );
+  }
+
+  /**
+   * Add a class to the current node at once.
+   *
+   * @param {String} name
+   *        The class to be added.
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  addClass(name) {
+    // Avoid adding the same class again.
+    if (this.currentClasses.some(({ name: cName }) => cName === name)) {
+      return Promise.resolve();
+    }
+
+    // Change the local model, so we retain the state of the existing classes.
+    this.currentClasses.push({ name, isApplied: true });
+
+    return this.applyClassState();
+  }
+
+  /**
+   * Used internally by other functions like addClass or setClassState. Actually applies
+   * the class change to the DOM.
+   *
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  applyClassState() {
+    // If there is no valid inspector selection, bail out silently. No need to report an
+    // error here.
+    if (!this.currentNode) {
+      return Promise.resolve();
+    }
+
+    // Remember which node & className we applied until their mutation event is received, so we
+    // can filter out dom mutations that are caused by us in onMutations, even in situations when
+    // a new change is applied before that the event of the previous one has been received yet
+    this.unresolvedStateChanges.push({
+      node: this.currentNode,
+      className: this.currentClassesPreview,
+    });
+
+    // Apply the change to the node.
+    const mod = this.currentNode.startModifyingAttributes();
+    mod.setAttribute("class", this.currentClassesPreview);
+    return mod.apply();
+  }
+
+  onMutations(mutations) {
+    for (const { type, target, attributeName } of mutations) {
+      // Only care if this mutation is for the class attribute.
+      if (type !== "attributes" || attributeName !== "class") {
+        continue;
+      }
+
+      const isMutationForOurChange = this.unresolvedStateChanges.some(
+        previousStateChange =>
+          previousStateChange.node === target &&
+          previousStateChange.className === target.className
+      );
+
+      if (!isMutationForOurChange) {
+        CLASSES.delete(target);
+        if (target === this.currentNode) {
+          this.emit("current-node-class-changed");
+        }
+      } else {
+        this.removeResolvedStateChanged(target, target.className);
+      }
+    }
+  }
+
+  /**
+   * Get the available classNames in the document where the current selected node lives:
+   * - the one already used on elements of the document
+   * - the one defined in Stylesheets of the document
+   *
+   * @param {String} filter: A string the classNames should start with (an insensitive
+   *                         case matching will be done).
+   * @returns {Promise<Array<String>>} A promise that resolves with an array of strings
+   *                                   matching the passed filter.
+   */
+  getClassNames(filter) {
+    return this.currentNode.inspectorFront.pageStyle.getAttributesInOwnerDocument(
+      filter,
+      "class",
+      this.currentNode
+    );
+  }
+
+  previewClass(inputClasses) {
+    if (
+      this.previewClasses
+        .map(previewClass => previewClass.className)
+        .join(" ") !== inputClasses
+    ) {
+      this.previewClasses = [];
+      inputClasses.split(" ").forEach(className => {
+        this.previewClasses.push({
+          className,
+          wasAppliedOnNode: this.isClassAlreadyApplied(className),
+        });
+      });
+      this.applyClassState();
+    }
+  }
+
+  eraseClassPreview() {
+    this.previewClass("");
+  }
+
+  removeResolvedStateChanged(currentNode, currentClassesPreview) {
+    this.unresolvedStateChanges.splice(
+      0,
+      this.unresolvedStateChanges.findIndex(
+        previousState =>
+          previousState.node === currentNode &&
+          previousState.className === currentClassesPreview
+      ) + 1
+    );
+  }
+
+  isClassAlreadyApplied(className) {
+    return this.currentClasses.some(({ name }) => name === className);
+  }
+}
+
+module.exports = ClassList;
diff --git a/devtools/client/inspector/rules/models/element-style.js b/devtools/client/inspector/rules/models/element-style.js
new file mode 100644
index 0000000000..e280a5e4a0
--- /dev/null
+++ b/devtools/client/inspector/rules/models/element-style.js
@@ -0,0 +1,904 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const Rule = require("resource://devtools/client/inspector/rules/models/rule.js");
+const UserProperties = require("resource://devtools/client/inspector/rules/models/user-properties.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "promiseWarn",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  ["parseDeclarations", "parseNamedDeclarations", "parseSingleValue"],
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "isCssVariable",
+  "resource://devtools/shared/inspector/css-logic.js",
+  true
+);
+
+const PREF_INACTIVE_CSS_ENABLED = "devtools.inspector.inactive.css.enabled";
+
+/**
+ * ElementStyle is responsible for the following:
+ *   Keeps track of which properties are overridden.
+ *   Maintains a list of Rule objects for a given element.
+ */
+class ElementStyle {
+  /**
+   * @param  {Element} element
+   *         The element whose style we are viewing.
+   * @param  {CssRuleView} ruleView
+   *         The instance of the rule-view panel.
+   * @param  {Object} store
+   *         The ElementStyle can use this object to store metadata
+   *         that might outlast the rule view, particularly the current
+   *         set of disabled properties.
+   * @param  {PageStyleFront} pageStyle
+   *         Front for the page style actor that will be providing
+   *         the style information.
+   * @param  {Boolean} showUserAgentStyles
+   *         Should user agent styles be inspected?
+   */
+  constructor(element, ruleView, store, pageStyle, showUserAgentStyles) {
+    this.element = element;
+    this.ruleView = ruleView;
+    this.store = store || {};
+    this.pageStyle = pageStyle;
+    this.pseudoElements = [];
+    this.showUserAgentStyles = showUserAgentStyles;
+    this.rules = [];
+    this.cssProperties = this.ruleView.cssProperties;
+    this.variablesMap = new Map();
+
+    // We don't want to overwrite this.store.userProperties so we only create it
+    // if it doesn't already exist.
+    if (!("userProperties" in this.store)) {
+      this.store.userProperties = new UserProperties();
+    }
+
+    if (!("disabled" in this.store)) {
+      this.store.disabled = new WeakMap();
+    }
+  }
+
+  get unusedCssEnabled() {
+    if (!this._unusedCssEnabled) {
+      this._unusedCssEnabled = Services.prefs.getBoolPref(
+        PREF_INACTIVE_CSS_ENABLED,
+        false
+      );
+    }
+    return this._unusedCssEnabled;
+  }
+
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+
+    this.destroyed = true;
+    this.pseudoElements = [];
+
+    for (const rule of this.rules) {
+      if (rule.editor) {
+        rule.editor.destroy();
+      }
+
+      rule.destroy();
+    }
+  }
+
+  /**
+   * Called by the Rule object when it has been changed through the
+   * setProperty* methods.
+   */
+  _changed() {
+    if (this.onChanged) {
+      this.onChanged();
+    }
+  }
+
+  /**
+   * Refresh the list of rules to be displayed for the active element.
+   * Upon completion, this.rules[] will hold a list of Rule objects.
+   *
+   * Returns a promise that will be resolved when the elementStyle is
+   * ready.
+   */
+  populate() {
+    const populated = this.pageStyle
+      .getApplied(this.element, {
+        inherited: true,
+        matchedSelectors: true,
+        filter: this.showUserAgentStyles ? "ua" : undefined,
+      })
+      .then(entries => {
+        if (this.destroyed || this.populated !== populated) {
+          return Promise.resolve(undefined);
+        }
+
+        // Store the current list of rules (if any) during the population
+        // process. They will be reused if possible.
+        const existingRules = this.rules;
+
+        this.rules = [];
+
+        for (const entry of entries) {
+          this._maybeAddRule(entry, existingRules);
+        }
+
+        // Store a list of all pseudo-element types found in the matching rules.
+        this.pseudoElements = this.rules
+          .filter(r => r.pseudoElement)
+          .map(r => r.pseudoElement);
+
+        // Mark overridden computed styles.
+        this.onRuleUpdated();
+
+        this._sortRulesForPseudoElement();
+
+        // We're done with the previous list of rules.
+        for (const r of existingRules) {
+          if (r?.editor) {
+            r.editor.destroy();
+          }
+
+          r.destroy();
+        }
+
+        return undefined;
+      })
+      .catch(e => {
+        // populate is often called after a setTimeout,
+        // the connection may already be closed.
+        if (this.destroyed) {
+          return Promise.resolve(undefined);
+        }
+        return promiseWarn(e);
+      });
+    this.populated = populated;
+    return this.populated;
+  }
+
+  /**
+   * Returns the Rule object of the given rule id.
+   *
+   * @param  {String|null} id
+   *         The id of the Rule object.
+   * @return {Rule|undefined} of the given rule id or undefined if it cannot be found.
+   */
+  getRule(id) {
+    return id
+      ? this.rules.find(rule => rule.domRule.actorID === id)
+      : undefined;
+  }
+
+  /**
+   * Get the font families in use by the element.
+   *
+   * Returns a promise that will be resolved to a list of CSS family
+   * names. The list might have duplicates.
+   */
+  getUsedFontFamilies() {
+    return new Promise((resolve, reject) => {
+      this.ruleView.styleWindow.requestIdleCallback(async () => {
+        if (this.element.isDestroyed()) {
+          resolve([]);
+          return;
+        }
+        try {
+          const fonts = await this.pageStyle.getUsedFontFaces(this.element, {
+            includePreviews: false,
+          });
+          resolve(fonts.map(font => font.CSSFamilyName));
+        } catch (e) {
+          reject(e);
+        }
+      });
+    });
+  }
+
+  /**
+   * Put pseudo elements in front of others.
+   */
+  _sortRulesForPseudoElement() {
+    this.rules = this.rules.sort((a, b) => {
+      return (a.pseudoElement || "z") > (b.pseudoElement || "z");
+    });
+  }
+
+  /**
+   * Add a rule if it's one we care about. Filters out duplicates and
+   * inherited styles with no inherited properties.
+   *
+   * @param  {Object} options
+   *         Options for creating the Rule, see the Rule constructor.
+   * @param  {Array} existingRules
+   *         Rules to reuse if possible. If a rule is reused, then it
+   *         it will be deleted from this array.
+   * @return {Boolean} true if we added the rule.
+   */
+  _maybeAddRule(options, existingRules) {
+    // If we've already included this domRule (for example, when a
+    // common selector is inherited), ignore it.
+    if (
+      options.system ||
+      (options.rule && this.rules.some(rule => rule.domRule === options.rule))
+    ) {
+      return false;
+    }
+
+    let rule = null;
+
+    // If we're refreshing and the rule previously existed, reuse the
+    // Rule object.
+    if (existingRules) {
+      const ruleIndex = existingRules.findIndex(r => r.matches(options));
+      if (ruleIndex >= 0) {
+        rule = existingRules[ruleIndex];
+        rule.refresh(options);
+        existingRules.splice(ruleIndex, 1);
+      }
+    }
+
+    // If this is a new rule, create its Rule object.
+    if (!rule) {
+      rule = new Rule(this, options);
+    }
+
+    // Ignore inherited rules with no visible properties.
+    if (options.inherited && !rule.hasAnyVisibleProperties()) {
+      return false;
+    }
+
+    this.rules.push(rule);
+    return true;
+  }
+
+  /**
+   * Calls updateDeclarations with all supported pseudo elements
+   */
+  onRuleUpdated() {
+    this.updateDeclarations();
+
+    // Update declarations for matching rules for pseudo-elements.
+    for (const pseudo of this.pseudoElements) {
+      this.updateDeclarations(pseudo);
+    }
+  }
+
+  /**
+   * Go over all CSS rules matching the selected element and mark the CSS declarations
+   * (aka TextProperty instances) with an `overridden` Boolean flag if an earlier or
+   * higher priority declaration overrides it. Rules are already ordered by specificity.
+   *
+   * If a pseudo-element type is passed (ex: ::before, ::first-line, etc),
+   * restrict the operation only to declarations in rules matching that pseudo-element.
+   *
+   * At the end, update the declaration's view (TextPropertyEditor instance) so it relects
+   * the latest state. Use this opportunity to also trigger checks for the "inactive"
+   * state of the declaration (whether it has effect or not).
+   *
+   * @param  {String} pseudo
+   *         Optional pseudo-element for which to restrict marking CSS declarations as
+   *         overridden.
+   */
+  updateDeclarations(pseudo = "") {
+    // Gather all text properties applicable to the selected element or pseudo-element.
+    const textProps = this._getDeclarations(pseudo);
+    // Gather all the computed properties applied by those text properties.
+    let computedProps = [];
+    for (const textProp of textProps) {
+      computedProps = computedProps.concat(textProp.computed);
+    }
+
+    // CSS Variables inherits from the normal element in case of pseudo element.
+    const variables = new Map(pseudo ? this.variablesMap.get("") : null);
+
+    // Walk over the computed properties. As we see a property name
+    // for the first time, mark that property's name as taken by this
+    // property.
+    //
+    // If we come across a property whose name is already taken, check
+    // its priority against the property that was found first:
+    //
+    //   If the new property is a higher priority, mark the old
+    //   property overridden and mark the property name as taken by
+    //   the new property.
+    //
+    //   If the new property is a lower or equal priority, mark it as
+    //   overridden.
+    //
+    //   Note that this is different if layers are involved: if both
+    //   old and new properties have a high priority, and if the new
+    //   property is in a rule belonging to a layer that is different
+    //   from the the one the old property rule might be in,
+    //   mark the old property overridden and mark the property name as
+    //   taken by the new property.
+    //
+    // _overriddenDirty will be set on each prop, indicating whether its
+    // dirty status changed during this pass.
+    const taken = new Map();
+    for (const computedProp of computedProps) {
+      const earlier = taken.get(computedProp.name);
+
+      // Prevent -webkit-gradient from being selected after unchecking
+      // linear-gradient in this case:
+      //  -moz-linear-gradient: ...;
+      //  -webkit-linear-gradient: ...;
+      //  linear-gradient: ...;
+      if (!computedProp.textProp.isValid()) {
+        computedProp.overridden = true;
+        continue;
+      }
+
+      let overridden;
+      if (
+        earlier &&
+        computedProp.priority === "important" &&
+        (earlier.priority !== "important" ||
+          // Even if the earlier property was important, if the current rule is in a layer
+          // it will take precedence, unless the earlier property rule was in the same layer.
+          (computedProp.textProp.rule?.isInLayer() &&
+            computedProp.textProp.rule.isInDifferentLayer(
+              earlier.textProp.rule
+            ))) &&
+        // For !important only consider rules applying to the same parent node.
+        computedProp.textProp.rule.inherited == earlier.textProp.rule.inherited
+      ) {
+        // New property is higher priority. Mark the earlier property
+        // overridden (which will reverse its dirty state).
+        earlier._overriddenDirty = !earlier._overriddenDirty;
+        earlier.overridden = true;
+        overridden = false;
+      } else {
+        overridden = !!earlier;
+      }
+
+      computedProp._overriddenDirty = !!computedProp.overridden !== overridden;
+      computedProp.overridden = overridden;
+
+      if (!computedProp.overridden && computedProp.textProp.enabled) {
+        taken.set(computedProp.name, computedProp);
+
+        // At this point, we can get CSS variable from "inherited" rules.
+        // When this is a registered custom property with `inherits` set to false,
+        // the text prop is "invisible" (i.e. not shown in the rule view).
+        // In such case, we don't want to get the value in the Map, and we'll rather
+        // get the initial value from the registered property definition.
+        if (
+          isCssVariable(computedProp.name) &&
+          !computedProp.textProp.invisible
+        ) {
+          variables.set(computedProp.name, computedProp.value);
+        }
+      }
+    }
+
+    // Find the CSS variables that have been updated.
+    const previousVariablesMap = new Map(this.variablesMap.get(pseudo));
+    const changedVariableNamesSet = new Set(
+      [...variables.keys(), ...previousVariablesMap.keys()].filter(
+        k => variables.get(k) !== previousVariablesMap.get(k)
+      )
+    );
+
+    this.variablesMap.set(pseudo, variables);
+
+    // For each TextProperty, mark it overridden if all of its computed
+    // properties are marked overridden. Update the text property's associated
+    // editor, if any. This will clear the _overriddenDirty state on all
+    // computed properties. For each editor we also show or hide the inactive
+    // CSS icon as needed.
+    for (const textProp of textProps) {
+      // _updatePropertyOverridden will return true if the
+      // overridden state has changed for the text property.
+      // _hasUpdatedCSSVariable will return true if the declaration contains any
+      // of the updated CSS variable names.
+      if (
+        this._updatePropertyOverridden(textProp) ||
+        this._hasUpdatedCSSVariable(textProp, changedVariableNamesSet)
+      ) {
+        textProp.updateEditor();
+      }
+
+      // For each editor show or hide the inactive CSS icon as needed.
+      if (textProp.editor && this.unusedCssEnabled) {
+        textProp.editor.updatePropertyState();
+      }
+    }
+  }
+
+  /**
+   * Update CSS variable tooltip information on textProp editor when registered property
+   * are added/modified/removed.
+   *
+   * @param {Set<String>} registeredPropertyNamesSet: A Set containing the name of the
+   *                      registered properties which were added/modified/removed.
+   */
+  onRegisteredPropertiesChange(registeredPropertyNamesSet) {
+    for (const rule of this.rules) {
+      for (const textProp of rule.textProps) {
+        if (this._hasUpdatedCSSVariable(textProp, registeredPropertyNamesSet)) {
+          textProp.updateEditor();
+        }
+      }
+    }
+  }
+
+  /**
+   * Returns true if the given declaration's property value contains a CSS variable
+   * matching any of the updated CSS variable names.
+   *
+   * @param {TextProperty} declaration
+   *        A TextProperty of a rule.
+   * @param {Set<>String} variableNamesSet
+   *        A Set of CSS variable names that have been updated.
+   */
+  _hasUpdatedCSSVariable(declaration, variableNamesSet) {
+    for (const variableName of variableNamesSet) {
+      if (declaration.hasCSSVariable(variableName)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Helper for |this.updateDeclarations()| to mark CSS declarations as overridden.
+   *
+   * Returns an array of CSS declarations (aka TextProperty instances) from all rules
+   * applicable to the selected element ordered from more- to less-specific.
+   *
+   * If a pseudo-element type is given, restrict the result only to declarations
+   * applicable to that pseudo-element.
+   *
+   * NOTE: this method skips CSS declarations in @keyframes rules because a number of
+   * criteria such as time and animation delay need to be checked in order to determine
+   * if the property is overridden at runtime.
+   *
+   * @param  {String} pseudo
+   *         Optional pseudo-element for which to restrict marking CSS declarations as
+   *         overridden. If omitted, only declarations for regular style rules are
+   *         returned (no pseudo-element style rules).
+   *
+   * @return {Array}
+   *         Array of TextProperty instances.
+   */
+  _getDeclarations(pseudo = "") {
+    const textProps = [];
+
+    for (const rule of this.rules) {
+      // Skip @keyframes rules
+      if (rule.keyframes) {
+        continue;
+      }
+
+      // Style rules must be considered only when they have selectors that match the node.
+      // When renaming a selector, the unmatched rule lingers in the Rule view, but it no
+      // longer matches the node. This strict check avoids accidentally causing
+      // declarations to be overridden in the remaining matching rules.
+      const isStyleRule =
+        rule.pseudoElement === "" && !!rule.matchedDesugaredSelectors.length;
+
+      // Style rules for pseudo-elements must always be considered, regardless if their
+      // selector matches the node. As a convenience, declarations in rules for
+      // pseudo-elements show up in a separate Pseudo-elements accordion when selecting
+      // the host node (instead of the pseudo-element node directly, which is sometimes
+      // impossible, for example with ::selection or ::first-line).
+      // Loosening the strict check on matched selectors ensures these declarations
+      // participate in the algorithm below to mark them as overridden.
+      const isPseudoElementRule =
+        rule.pseudoElement !== "" && rule.pseudoElement === pseudo;
+
+      const isElementStyle = rule.domRule.type === ELEMENT_STYLE;
+
+      const filterCondition =
+        pseudo === "" ? isStyleRule || isElementStyle : isPseudoElementRule;
+
+      // Collect all relevant CSS declarations (aka TextProperty instances).
+      if (filterCondition) {
+        for (const textProp of rule.textProps.slice(0).reverse()) {
+          if (textProp.enabled) {
+            textProps.push(textProp);
+          }
+        }
+      }
+    }
+
+    return textProps;
+  }
+
+  /**
+   * Adds a new declaration to the rule.
+   *
+   * @param  {String} ruleId
+   *         The id of the Rule to be modified.
+   * @param  {String} value
+   *         The new declaration value.
+   */
+  addNewDeclaration(ruleId, value) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declarationsToAdd = parseNamedDeclarations(
+      this.cssProperties.isKnown,
+      value,
+      true
+    );
+    if (!declarationsToAdd.length) {
+      return;
+    }
+
+    this._addMultipleDeclarations(rule, declarationsToAdd);
+  }
+
+  /**
+   * Adds a new rule. The rules view is updated from a "stylesheet-updated" event
+   * emitted the PageStyleActor as a result of the rule being inserted into the
+   * the stylesheet.
+   */
+  async addNewRule() {
+    await this.pageStyle.addNewRule(
+      this.element,
+      this.element.pseudoClassLocks
+    );
+  }
+
+  /**
+   * Given the id of the rule and the new declaration name, modifies the existing
+   * declaration name to the new given value.
+   *
+   * @param  {String} ruleId
+   *         The Rule id of the given CSS declaration.
+   * @param  {String} declarationId
+   *         The TextProperty id for the CSS declaration.
+   * @param  {String} name
+   *         The new declaration name.
+   */
+  async modifyDeclarationName(ruleId, declarationId, name) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declaration = rule.getDeclaration(declarationId);
+    if (!declaration || declaration.name === name) {
+      return;
+    }
+
+    // Adding multiple rules inside of name field overwrites the current
+    // property with the first, then adds any more onto the property list.
+    const declarations = parseDeclarations(this.cssProperties.isKnown, name);
+    if (!declarations.length) {
+      return;
+    }
+
+    await declaration.setName(declarations[0].name);
+
+    if (!declaration.enabled) {
+      await declaration.setEnabled(true);
+    }
+  }
+
+  /**
+   * Helper function to addNewDeclaration() and modifyDeclarationValue() for
+   * adding multiple declarations to a rule.
+   *
+   * @param  {Rule} rule
+   *         The Rule object to write new declarations to.
+   * @param  {Array<Object>} declarationsToAdd
+   *         An array of object containg the parsed declaration data to be added.
+   * @param  {TextProperty|null} siblingDeclaration
+   *         Optional declaration next to which the new declaration will be added.
+   */
+  _addMultipleDeclarations(rule, declarationsToAdd, siblingDeclaration = null) {
+    for (const { commentOffsets, name, value, priority } of declarationsToAdd) {
+      const isCommented = Boolean(commentOffsets);
+      const enabled = !isCommented;
+      siblingDeclaration = rule.createProperty(
+        name,
+        value,
+        priority,
+        enabled,
+        siblingDeclaration
+      );
+    }
+  }
+
+  /**
+   * Parse a value string and break it into pieces, starting with the
+   * first value, and into an array of additional declarations (if any).
+   *
+   * Example: Calling with "red; width: 100px" would return
+   * { firstValue: "red", propertiesToAdd: [{ name: "width", value: "100px" }] }
+   *
+   * @param  {String} value
+   *         The string to parse.
+   * @return {Object} An object with the following properties:
+   *         firstValue: A string containing a simple value, like
+   *                     "red" or "100px!important"
+   *         declarationsToAdd: An array with additional declarations, following the
+   *                            parseDeclarations format of { name, value, priority }
+   */
+  _getValueAndExtraProperties(value) {
+    // The inplace editor will prevent manual typing of multiple declarations,
+    // but we need to deal with the case during a paste event.
+    // Adding multiple declarations inside of value editor sets value with the
+    // first, then adds any more onto the declaration list (below this declarations).
+    let firstValue = value;
+    let declarationsToAdd = [];
+
+    const declarations = parseDeclarations(this.cssProperties.isKnown, value);
+
+    // Check to see if the input string can be parsed as multiple declarations
+    if (declarations.length) {
+      // Get the first property value (if any), and any remaining
+      // declarations (if any)
+      if (!declarations[0].name && declarations[0].value) {
+        firstValue = declarations[0].value;
+        declarationsToAdd = declarations.slice(1);
+      } else if (declarations[0].name && declarations[0].value) {
+        // In some cases, the value could be a property:value pair
+        // itself.  Join them as one value string and append
+        // potentially following declarations
+        firstValue = declarations[0].name + ": " + declarations[0].value;
+        declarationsToAdd = declarations.slice(1);
+      }
+    }
+
+    return {
+      declarationsToAdd,
+      firstValue,
+    };
+  }
+
+  /**
+   * Given the id of the rule and the new declaration value, modifies the existing
+   * declaration value to the new given value.
+   *
+   * @param  {String} ruleId
+   *         The Rule id of the given CSS declaration.
+   * @param  {String} declarationId
+   *         The TextProperty id for the CSS declaration.
+   * @param  {String} value
+   *         The new declaration value.
+   */
+  async modifyDeclarationValue(ruleId, declarationId, value) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declaration = rule.getDeclaration(declarationId);
+    if (!declaration) {
+      return;
+    }
+
+    const { declarationsToAdd, firstValue } =
+      this._getValueAndExtraProperties(value);
+    const parsedValue = parseSingleValue(
+      this.cssProperties.isKnown,
+      firstValue
+    );
+
+    if (
+      !declarationsToAdd.length &&
+      declaration.value === parsedValue.value &&
+      declaration.priority === parsedValue.priority
+    ) {
+      return;
+    }
+
+    // First, set this declaration value (common case, only modified a property)
+    await declaration.setValue(parsedValue.value, parsedValue.priority);
+
+    if (!declaration.enabled) {
+      await declaration.setEnabled(true);
+    }
+
+    this._addMultipleDeclarations(rule, declarationsToAdd, declaration);
+  }
+
+  /**
+   * Modifies the existing rule's selector to the new given value.
+   *
+   * @param  {String} ruleId
+   *         The id of the Rule to be modified.
+   * @param  {String} selector
+   *         The new selector value.
+   */
+  async modifySelector(ruleId, selector) {
+    try {
+      const rule = this.getRule(ruleId);
+      if (!rule) {
+        return;
+      }
+
+      const response = await rule.domRule.modifySelector(
+        this.element,
+        selector
+      );
+      const { ruleProps, isMatching } = response;
+
+      if (!ruleProps) {
+        // Notify for changes, even when nothing changes, just to allow tests
+        // being able to track end of this request.
+        this.ruleView.emit("ruleview-invalid-selector");
+        return;
+      }
+
+      const newRule = new Rule(this, {
+        ...ruleProps,
+        isUnmatched: !isMatching,
+      });
+
+      // Recompute the list of applied styles because editing a
+      // selector might cause this rule's position to change.
+      const appliedStyles = await this.pageStyle.getApplied(this.element, {
+        inherited: true,
+        matchedSelectors: true,
+        filter: this.showUserAgentStyles ? "ua" : undefined,
+      });
+      const newIndex = appliedStyles.findIndex(r => r.rule == ruleProps.rule);
+      const oldIndex = this.rules.indexOf(rule);
+
+      // Remove the old rule and insert the new rule according to where it appears
+      // in the list of applied styles.
+      this.rules.splice(oldIndex, 1);
+      // If the selector no longer matches, then we leave the rule in
+      // the same relative position.
+      this.rules.splice(newIndex === -1 ? oldIndex : newIndex, 0, newRule);
+
+      // Recompute, mark and update the UI for any properties that are
+      // overridden or contain inactive CSS according to the new list of rules.
+      this.onRuleUpdated();
+
+      // In order to keep the new rule in place of the old in the rules view, we need
+      // to remove the rule again if the rule was inserted to its new index according
+      // to the list of applied styles.
+      // Note: you might think we would replicate the list-modification logic above,
+      // but that is complicated due to the way the UI installs pseudo-element rules
+      // and the like.
+      if (newIndex !== -1) {
+        this.rules.splice(newIndex, 1);
+        this.rules.splice(oldIndex, 0, newRule);
+      }
+      this._changed();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  /**
+   * Toggles the enabled state of the given CSS declaration.
+   *
+   * @param  {String} ruleId
+   *         The Rule id of the given CSS declaration.
+   * @param  {String} declarationId
+   *         The TextProperty id for the CSS declaration.
+   */
+  toggleDeclaration(ruleId, declarationId) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declaration = rule.getDeclaration(declarationId);
+    if (!declaration) {
+      return;
+    }
+
+    declaration.setEnabled(!declaration.enabled);
+  }
+
+  /**
+   * Mark a given TextProperty as overridden or not depending on the
+   * state of its computed properties. Clears the _overriddenDirty state
+   * on all computed properties.
+   *
+   * @param  {TextProperty} prop
+   *         The text property to update.
+   * @return {Boolean} true if the TextProperty's overridden state (or any of
+   *         its computed properties overridden state) changed.
+   */
+  _updatePropertyOverridden(prop) {
+    let overridden = true;
+    let dirty = false;
+
+    for (const computedProp of prop.computed) {
+      if (!computedProp.overridden) {
+        overridden = false;
+      }
+
+      dirty = computedProp._overriddenDirty || dirty;
+      delete computedProp._overriddenDirty;
+    }
+
+    dirty = !!prop.overridden !== overridden || dirty;
+    prop.overridden = overridden;
+    return dirty;
+  }
+
+  /**
+   * Returns the current value of a CSS variable; or its initial value if the
+   * variable is registered but not defined; or null if it's not registered and not defined.
+   *
+   * @param  {String} name
+   *         The name of the variable.
+   * @param  {String} pseudo
+   *         The pseudo-element name of the rule.
+   * @return {String|null} the variable's value (or initial value) or null if the variable
+   *         is not defined and not registered.
+   */
+  getVariable(name, pseudo = "") {
+    const variables = this.variablesMap.get(pseudo);
+
+    if (variables && variables.has(name)) {
+      return variables.get(name);
+    }
+
+    // If the variable wasn't defined, we want to check if it is a registered custom
+    // properties so we can get its initial value
+    const registeredPropertiesMap =
+      this.ruleView.getRegisteredPropertiesForSelectedNodeTarget();
+    return registeredPropertiesMap && registeredPropertiesMap.has(name)
+      ? registeredPropertiesMap.get(name).initialValue
+      : null;
+  }
+
+  /**
+   * Get all custom properties.
+   *
+   * @param  {String} pseudo
+   *         The pseudo-element name of the rule.
+   * @returns Map<String, String> A map whose key is the custom property name and value is
+   *                              the custom property value (or registered property initial
+   *                              value if the property is not defined)
+   */
+  getAllCustomProperties(pseudo = "") {
+    let customProperties = this.variablesMap.get(pseudo);
+
+    const registeredPropertiesMap =
+      this.ruleView.getRegisteredPropertiesForSelectedNodeTarget();
+
+    // If there's no registered properties, we can return the Map as is
+    if (!registeredPropertiesMap || registeredPropertiesMap.size === 0) {
+      return customProperties;
+    }
+
+    let newMapCreated = false;
+    for (const [name, propertyDefinition] of registeredPropertiesMap) {
+      // Only set the registered property if it's not defined (i.e. not in this.variablesMap)
+      if (!customProperties.has(name)) {
+        // Since we want to return registered property, we need to create a new Map
+        // to not modify the one in this.variablesMap.
+        if (!newMapCreated) {
+          customProperties = new Map(customProperties);
+          newMapCreated = true;
+        }
+        customProperties.set(name, propertyDefinition.initialValue);
+      }
+    }
+
+    return customProperties;
+  }
+}
+
+module.exports = ElementStyle;
diff --git a/devtools/client/inspector/rules/models/moz.build b/devtools/client/inspector/rules/models/moz.build
new file mode 100644
index 0000000000..7a5561e213
--- /dev/null
+++ b/devtools/client/inspector/rules/models/moz.build
@@ -0,0 +1,13 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "class-list.js",
+    "element-style.js",
+    "rule.js",
+    "text-property.js",
+    "user-properties.js",
+)
diff --git a/devtools/client/inspector/rules/models/rule.js b/devtools/client/inspector/rules/models/rule.js
new file mode 100644
index 0000000000..cfc4a60263
--- /dev/null
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -0,0 +1,874 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+const CssLogic = require("resource://devtools/shared/inspector/css-logic.js");
+const TextProperty = require("resource://devtools/client/inspector/rules/models/text-property.js");
+
+loader.lazyRequireGetter(
+  this,
+  "promiseWarn",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "parseNamedDeclarations",
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+
+const STYLE_INSPECTOR_PROPERTIES =
+  "devtools/shared/locales/styleinspector.properties";
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
+
+/**
+ * Rule is responsible for the following:
+ *   Manages a single style declaration or rule.
+ *   Applies changes to the properties in a rule.
+ *   Maintains a list of TextProperty objects.
+ */
+class Rule {
+  /**
+   * @param {ElementStyle} elementStyle
+   *        The ElementStyle to which this rule belongs.
+   * @param {Object} options
+   *        The information used to construct this rule. Properties include:
+   *          rule: A StyleRuleActor
+   *          inherited: An element this rule was inherited from. If omitted,
+   *            the rule applies directly to the current element.
+   *          isSystem: Is this a user agent style?
+   *          isUnmatched: True if the rule does not match the current selected
+   *            element, otherwise, false.
+   */
+  constructor(elementStyle, options) {
+    this.elementStyle = elementStyle;
+    this.domRule = options.rule;
+    this.compatibilityIssues = null;
+    this.matchedDesugaredSelectors = options.matchedDesugaredSelectors || [];
+    this.pseudoElement = options.pseudoElement || "";
+    this.isSystem = options.isSystem;
+    this.isUnmatched = options.isUnmatched || false;
+    this.inherited = options.inherited || null;
+    this.keyframes = options.keyframes || null;
+    this.userAdded = options.rule.userAdded;
+
+    this.cssProperties = this.elementStyle.ruleView.cssProperties;
+    this.inspector = this.elementStyle.ruleView.inspector;
+    this.store = this.elementStyle.ruleView.store;
+
+    // Populate the text properties with the style's current authoredText
+    // value, and add in any disabled properties from the store.
+    this.textProps = this._getTextProperties();
+    this.textProps = this.textProps.concat(this._getDisabledProperties());
+
+    this.getUniqueSelector = this.getUniqueSelector.bind(this);
+    this.onStyleRuleFrontUpdated = this.onStyleRuleFrontUpdated.bind(this);
+
+    this.domRule.on("rule-updated", this.onStyleRuleFrontUpdated);
+  }
+
+  destroy() {
+    if (this._unsubscribeSourceMap) {
+      this._unsubscribeSourceMap();
+    }
+
+    this.domRule.off("rule-updated", this.onStyleRuleFrontUpdated);
+    this.compatibilityIssues = null;
+    this.destroyed = true;
+  }
+
+  get declarations() {
+    return this.textProps;
+  }
+
+  get inheritance() {
+    if (!this.inherited) {
+      return null;
+    }
+
+    return {
+      inherited: this.inherited,
+      inheritedSource: this.inheritedSource,
+    };
+  }
+
+  get selector() {
+    return {
+      getUniqueSelector: this.getUniqueSelector,
+      matchedDesugaredSelectors: this.matchedDesugaredSelectors,
+      selectors: this.domRule.selectors,
+      selectorWarnings: this.domRule.selectors,
+      selectorText: this.keyframes ? this.domRule.keyText : this.selectorText,
+    };
+  }
+
+  get sourceMapURLService() {
+    return this.inspector.toolbox.sourceMapURLService;
+  }
+
+  get title() {
+    let title = CssLogic.shortSource(this.sheet);
+    if (this.domRule.type !== ELEMENT_STYLE && this.ruleLine > 0) {
+      title += ":" + this.ruleLine;
+    }
+
+    return title;
+  }
+
+  get inheritedSource() {
+    if (this._inheritedSource) {
+      return this._inheritedSource;
+    }
+    this._inheritedSource = "";
+    if (this.inherited) {
+      let eltText = this.inherited.displayName;
+      if (this.inherited.id) {
+        eltText += "#" + this.inherited.id;
+      }
+      this._inheritedSource = STYLE_INSPECTOR_L10N.getFormatStr(
+        "rule.inheritedFrom",
+        eltText
+      );
+    }
+    return this._inheritedSource;
+  }
+
+  get keyframesName() {
+    if (this._keyframesName) {
+      return this._keyframesName;
+    }
+    this._keyframesName = "";
+    if (this.keyframes) {
+      this._keyframesName = STYLE_INSPECTOR_L10N.getFormatStr(
+        "rule.keyframe",
+        this.keyframes.name
+      );
+    }
+    return this._keyframesName;
+  }
+
+  get keyframesRule() {
+    if (!this.keyframes) {
+      return null;
+    }
+
+    return {
+      id: this.keyframes.actorID,
+      keyframesName: this.keyframesName,
+    };
+  }
+
+  get selectorText() {
+    return this.domRule.selectors
+      ? this.domRule.selectors.join(", ")
+      : CssLogic.l10n("rule.sourceElement");
+  }
+
+  /**
+   * The rule's stylesheet.
+   */
+  get sheet() {
+    return this.domRule ? this.domRule.parentStyleSheet : null;
+  }
+
+  /**
+   * The rule's line within a stylesheet
+   */
+  get ruleLine() {
+    return this.domRule ? this.domRule.line : -1;
+  }
+
+  /**
+   * The rule's column within a stylesheet
+   */
+  get ruleColumn() {
+    return this.domRule ? this.domRule.column : null;
+  }
+
+  /**
+   * Get the declaration block issues from the compatibility actor
+   * @returns A promise that resolves with an array of objects in following form:
+   *    {
+   *      // Type of compatibility issue
+   *      type: <string>,
+   *      // The CSS declaration that has compatibility issues
+   *      property: <string>,
+   *      // Alias to the given CSS property
+   *      alias: <Array>,
+   *      // Link to MDN documentation for the particular CSS rule
+   *      url: <string>,
+   *      deprecated: <boolean>,
+   *      experimental: <boolean>,
+   *      // An array of all the browsers that don't support the given CSS rule
+   *      unsupportedBrowsers: <Array>,
+   *    }
+   */
+  async getCompatibilityIssues() {
+    if (!this.compatibilityIssues) {
+      this.compatibilityIssues =
+        this.inspector.commands.inspectorCommand.getCSSDeclarationBlockIssues(
+          this.domRule.declarations
+        );
+    }
+
+    return this.compatibilityIssues;
+  }
+
+  /**
+   * Returns the TextProperty with the given id or undefined if it cannot be found.
+   *
+   * @param {String|null} id
+   *        A TextProperty id.
+   * @return {TextProperty|undefined} with the given id in the current Rule or undefined
+   * if it cannot be found.
+   */
+  getDeclaration(id) {
+    return id ? this.textProps.find(textProp => textProp.id === id) : undefined;
+  }
+
+  /**
+   * Returns an unique selector for the CSS rule.
+   */
+  async getUniqueSelector() {
+    let selector = "";
+
+    if (this.domRule.selectors) {
+      // This is a style rule with a selector.
+      selector = this.domRule.selectors.join(", ");
+    } else if (this.inherited) {
+      // This is an inline style from an inherited rule. Need to resolve the unique
+      // selector from the node which rule this is inherited from.
+      selector = await this.inherited.getUniqueSelector();
+    } else {
+      // This is an inline style from the current node.
+      selector = await this.inspector.selection.nodeFront.getUniqueSelector();
+    }
+
+    return selector;
+  }
+
+  /**
+   * Returns true if the rule matches the creation options
+   * specified.
+   *
+   * @param {Object} options
+   *        Creation options. See the Rule constructor for documentation.
+   */
+  matches(options) {
+    return this.domRule === options.rule;
+  }
+
+  /**
+   * Create a new TextProperty to include in the rule.
+   *
+   * @param {String} name
+   *        The text property name (such as "background" or "border-top").
+   * @param {String} value
+   *        The property's value (not including priority).
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   * @param {Boolean} enabled
+   *        True if the property should be enabled.
+   * @param {TextProperty} siblingProp
+   *        Optional, property next to which the new property will be added.
+   */
+  createProperty(name, value, priority, enabled, siblingProp) {
+    const prop = new TextProperty(this, name, value, priority, enabled);
+
+    let ind;
+    if (siblingProp) {
+      ind = this.textProps.indexOf(siblingProp) + 1;
+      this.textProps.splice(ind, 0, prop);
+    } else {
+      ind = this.textProps.length;
+      this.textProps.push(prop);
+    }
+
+    this.applyProperties(modifications => {
+      modifications.createProperty(ind, name, value, priority, enabled);
+      // Now that the rule has been updated, the server might have given us data
+      // that changes the state of the property. Update it now.
+      prop.updateEditor();
+    });
+
+    return prop;
+  }
+
+  /**
+   * Helper function for applyProperties that is called when the actor
+   * does not support as-authored styles.  Store disabled properties
+   * in the element style's store.
+   */
+  _applyPropertiesNoAuthored(modifications) {
+    this.elementStyle.onRuleUpdated();
+
+    const disabledProps = [];
+
+    for (const prop of this.textProps) {
+      if (prop.invisible) {
+        continue;
+      }
+      if (!prop.enabled) {
+        disabledProps.push({
+          name: prop.name,
+          value: prop.value,
+          priority: prop.priority,
+        });
+        continue;
+      }
+      if (prop.value.trim() === "") {
+        continue;
+      }
+
+      modifications.setProperty(-1, prop.name, prop.value, prop.priority);
+
+      prop.updateComputed();
+    }
+
+    // Store disabled properties in the disabled store.
+    const disabled = this.elementStyle.store.disabled;
+    if (disabledProps.length) {
+      disabled.set(this.domRule, disabledProps);
+    } else {
+      disabled.delete(this.domRule);
+    }
+
+    return modifications.apply().then(() => {
+      const cssProps = {};
+      // Note that even though StyleRuleActors normally provide parsed
+      // declarations already, _applyPropertiesNoAuthored is only used when
+      // connected to older backend that do not provide them. So parse here.
+      for (const cssProp of parseNamedDeclarations(
+        this.cssProperties.isKnown,
+        this.domRule.authoredText
+      )) {
+        cssProps[cssProp.name] = cssProp;
+      }
+
+      for (const textProp of this.textProps) {
+        if (!textProp.enabled) {
+          continue;
+        }
+        let cssProp = cssProps[textProp.name];
+
+        if (!cssProp) {
+          cssProp = {
+            name: textProp.name,
+            value: "",
+            priority: "",
+          };
+        }
+
+        textProp.priority = cssProp.priority;
+      }
+    });
+  }
+
+  /**
+   * A helper for applyProperties that applies properties in the "as
+   * authored" case; that is, when the StyleRuleActor supports
+   * setRuleText.
+   */
+  _applyPropertiesAuthored(modifications) {
+    return modifications.apply().then(() => {
+      // The rewriting may have required some other property values to
+      // change, e.g., to insert some needed terminators.  Update the
+      // relevant properties here.
+      for (const index in modifications.changedDeclarations) {
+        const newValue = modifications.changedDeclarations[index];
+        this.textProps[index].updateValue(newValue);
+      }
+      // Recompute and redisplay the computed properties.
+      for (const prop of this.textProps) {
+        if (!prop.invisible && prop.enabled) {
+          prop.updateComputed();
+          prop.updateEditor();
+        }
+      }
+    });
+  }
+
+  /**
+   * Reapply all the properties in this rule, and update their
+   * computed styles.  Will re-mark overridden properties.  Sets the
+   * |_applyingModifications| property to a promise which will resolve
+   * when the edit has completed.
+   *
+   * @param {Function} modifier a function that takes a RuleModificationList
+   *        (or RuleRewriter) as an argument and that modifies it
+   *        to apply the desired edit
+   * @return {Promise} a promise which will resolve when the edit
+   *        is complete
+   */
+  applyProperties(modifier) {
+    // If there is already a pending modification, we have to wait
+    // until it settles before applying the next modification.
+    const resultPromise = Promise.resolve(this._applyingModifications)
+      .then(() => {
+        const modifications = this.domRule.startModifyingProperties(
+          this.cssProperties
+        );
+        modifier(modifications);
+        if (this.domRule.canSetRuleText) {
+          return this._applyPropertiesAuthored(modifications);
+        }
+        return this._applyPropertiesNoAuthored(modifications);
+      })
+      .then(() => {
+        this.elementStyle.onRuleUpdated();
+
+        if (resultPromise === this._applyingModifications) {
+          this._applyingModifications = null;
+          this.elementStyle._changed();
+        }
+      })
+      .catch(promiseWarn);
+
+    this._applyingModifications = resultPromise;
+    return resultPromise;
+  }
+
+  /**
+   * Renames a property.
+   *
+   * @param {TextProperty} property
+   *        The property to rename.
+   * @param {String} name
+   *        The new property name (such as "background" or "border-top").
+   * @return {Promise}
+   */
+  setPropertyName(property, name) {
+    if (name === property.name) {
+      return Promise.resolve();
+    }
+
+    const oldName = property.name;
+    property.name = name;
+    const index = this.textProps.indexOf(property);
+    return this.applyProperties(modifications => {
+      modifications.renameProperty(index, oldName, name);
+    });
+  }
+
+  /**
+   * Sets the value and priority of a property, then reapply all properties.
+   *
+   * @param {TextProperty} property
+   *        The property to manipulate.
+   * @param {String} value
+   *        The property's value (not including priority).
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   * @return {Promise}
+   */
+  setPropertyValue(property, value, priority) {
+    if (value === property.value && priority === property.priority) {
+      return Promise.resolve();
+    }
+
+    property.value = value;
+    property.priority = priority;
+
+    const index = this.textProps.indexOf(property);
+    return this.applyProperties(modifications => {
+      modifications.setProperty(index, property.name, value, priority);
+    });
+  }
+
+  /**
+   * Just sets the value and priority of a property, in order to preview its
+   * effect on the content document.
+   *
+   * @param {TextProperty} property
+   *        The property which value will be previewed
+   * @param {String} value
+   *        The value to be used for the preview
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   **@return {Promise}
+   */
+  previewPropertyValue(property, value, priority) {
+    this.elementStyle.ruleView.emitForTests("start-preview-property-value");
+    const modifications = this.domRule.startModifyingProperties(
+      this.cssProperties
+    );
+    modifications.setProperty(
+      this.textProps.indexOf(property),
+      property.name,
+      value,
+      priority
+    );
+    return modifications.apply().then(() => {
+      // Ensure dispatching a ruleview-changed event
+      // also for previews
+      this.elementStyle._changed();
+    });
+  }
+
+  /**
+   * Disables or enables given TextProperty.
+   *
+   * @param {TextProperty} property
+   *        The property to enable/disable
+   * @param {Boolean} value
+   */
+  setPropertyEnabled(property, value) {
+    if (property.enabled === !!value) {
+      return;
+    }
+    property.enabled = !!value;
+    const index = this.textProps.indexOf(property);
+    this.applyProperties(modifications => {
+      modifications.setPropertyEnabled(index, property.name, property.enabled);
+    });
+  }
+
+  /**
+   * Remove a given TextProperty from the rule and update the rule
+   * accordingly.
+   *
+   * @param {TextProperty} property
+   *        The property to be removed
+   */
+  removeProperty(property) {
+    const index = this.textProps.indexOf(property);
+    this.textProps.splice(index, 1);
+    // Need to re-apply properties in case removing this TextProperty
+    // exposes another one.
+    this.applyProperties(modifications => {
+      modifications.removeProperty(index, property.name);
+    });
+  }
+
+  /**
+   * Event handler for "rule-updated" event fired by StyleRuleActor.
+   *
+   * @param {StyleRuleFront} front
+   */
+  onStyleRuleFrontUpdated(front) {
+    // Overwritting this reference is not required, but it's here to avoid confusion.
+    // Whenever an actor is passed over the protocol, either as a return value or as
+    // payload on an event, the `form` of its corresponding front will be automatically
+    // updated. No action required.
+    // Even if this `domRule` reference here is not explicitly updated, lookups of
+    // `this.domRule.declarations` will point to the latest state of declarations set
+    // on the actor. Everything on `StyleRuleForm.form` will point to the latest state.
+    this.domRule = front;
+  }
+
+  /**
+   * Get the list of TextProperties from the style. Needs
+   * to parse the style's authoredText.
+   */
+  _getTextProperties() {
+    const textProps = [];
+    const store = this.elementStyle.store;
+
+    for (const prop of this.domRule.declarations) {
+      const name = prop.name;
+      // In an inherited rule, we only show inherited properties.
+      // However, we must keep all properties in order for rule
+      // rewriting to work properly.  So, compute the "invisible"
+      // property here.
+      const inherits = prop.isCustomProperty
+        ? prop.inherits
+        : this.cssProperties.isInherited(name);
+      const invisible = this.inherited && !inherits;
+
+      const value = store.userProperties.getProperty(
+        this.domRule,
+        name,
+        prop.value
+      );
+      const textProp = new TextProperty(
+        this,
+        name,
+        value,
+        prop.priority,
+        !("commentOffsets" in prop),
+        invisible
+      );
+      textProps.push(textProp);
+    }
+
+    return textProps;
+  }
+
+  /**
+   * Return the list of disabled properties from the store for this rule.
+   */
+  _getDisabledProperties() {
+    const store = this.elementStyle.store;
+
+    // Include properties from the disabled property store, if any.
+    const disabledProps = store.disabled.get(this.domRule);
+    if (!disabledProps) {
+      return [];
+    }
+
+    const textProps = [];
+
+    for (const prop of disabledProps) {
+      const value = store.userProperties.getProperty(
+        this.domRule,
+        prop.name,
+        prop.value
+      );
+      const textProp = new TextProperty(this, prop.name, value, prop.priority);
+      textProp.enabled = false;
+      textProps.push(textProp);
+    }
+
+    return textProps;
+  }
+
+  /**
+   * Reread the current state of the rules and rebuild text
+   * properties as needed.
+   */
+  refresh(options) {
+    this.matchedDesugaredSelectors = options.matchedDesugaredSelectors || [];
+    const newTextProps = this._getTextProperties();
+
+    // The element style rule behaves differently on refresh. We basically need to update
+    // it to reflect the new text properties exactly. The order might have changed, some
+    // properties might have been removed, etc. And we don't need to mark anything as
+    // disabled here. The element style rule should always reflect the content of the
+    // style attribute.
+    if (this.domRule.type === ELEMENT_STYLE) {
+      this.textProps = newTextProps;
+
+      if (this.editor) {
+        this.editor.populate(true);
+      }
+
+      return;
+    }
+
+    // Update current properties for each property present on the style.
+    // This will mark any touched properties with _visited so we
+    // can detect properties that weren't touched (because they were
+    // removed from the style).
+    // Also keep track of properties that didn't exist in the current set
+    // of properties.
+    const brandNewProps = [];
+    for (const newProp of newTextProps) {
+      if (!this._updateTextProperty(newProp)) {
+        brandNewProps.push(newProp);
+      }
+    }
+
+    // Refresh editors and disabled state for all the properties that
+    // were updated.
+    for (const prop of this.textProps) {
+      // Properties that weren't touched during the update
+      // process must no longer exist on the node.  Mark them disabled.
+      if (!prop._visited) {
+        prop.enabled = false;
+        prop.updateEditor();
+      } else {
+        delete prop._visited;
+      }
+    }
+
+    // Add brand new properties.
+    this.textProps = this.textProps.concat(brandNewProps);
+
+    // Refresh the editor if one already exists.
+    if (this.editor) {
+      this.editor.populate();
+    }
+  }
+
+  /**
+   * Update the current TextProperties that match a given property
+   * from the authoredText.  Will choose one existing TextProperty to update
+   * with the new property's value, and will disable all others.
+   *
+   * When choosing the best match to reuse, properties will be chosen
+   * by assigning a rank and choosing the highest-ranked property:
+   *   Name, value, and priority match, enabled. (6)
+   *   Name, value, and priority match, disabled. (5)
+   *   Name and value match, enabled. (4)
+   *   Name and value match, disabled. (3)
+   *   Name matches, enabled. (2)
+   *   Name matches, disabled. (1)
+   *
+   * If no existing properties match the property, nothing happens.
+   *
+   * @param {TextProperty} newProp
+   *        The current version of the property, as parsed from the
+   *        authoredText in Rule._getTextProperties().
+   * @return {Boolean} true if a property was updated, false if no properties
+   *         were updated.
+   */
+  _updateTextProperty(newProp) {
+    const match = { rank: 0, prop: null };
+
+    for (const prop of this.textProps) {
+      if (prop.name !== newProp.name) {
+        continue;
+      }
+
+      // Mark this property visited.
+      prop._visited = true;
+
+      // Start at rank 1 for matching name.
+      let rank = 1;
+
+      // Value and Priority matches add 2 to the rank.
+      // Being enabled adds 1.  This ranks better matches higher,
+      // with priority breaking ties.
+      if (prop.value === newProp.value) {
+        rank += 2;
+        if (prop.priority === newProp.priority) {
+          rank += 2;
+        }
+      }
+
+      if (prop.enabled) {
+        rank += 1;
+      }
+
+      if (rank > match.rank) {
+        if (match.prop) {
+          // We outrank a previous match, disable it.
+          match.prop.enabled = false;
+          match.prop.updateEditor();
+        }
+        match.rank = rank;
+        match.prop = prop;
+      } else if (rank) {
+        // A previous match outranks us, disable ourself.
+        prop.enabled = false;
+        prop.updateEditor();
+      }
+    }
+
+    // If we found a match, update its value with the new text property
+    // value.
+    if (match.prop) {
+      match.prop.set(newProp);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Jump between editable properties in the UI. If the focus direction is
+   * forward, begin editing the next property name if available or focus the
+   * new property editor otherwise. If the focus direction is backward,
+   * begin editing the previous property value or focus the selector editor if
+   * this is the first element in the property list.
+   *
+   * @param {TextProperty} textProperty
+   *        The text property that will be left to focus on a sibling.
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  editClosestTextProperty(textProperty, direction) {
+    let index = this.textProps.indexOf(textProperty);
+
+    if (direction === Services.focus.MOVEFOCUS_FORWARD) {
+      for (++index; index < this.textProps.length; ++index) {
+        if (!this.textProps[index].invisible) {
+          break;
+        }
+      }
+      if (index === this.textProps.length) {
+        textProperty.rule.editor.closeBrace.click();
+      } else {
+        this.textProps[index].editor.nameSpan.click();
+      }
+    } else if (direction === Services.focus.MOVEFOCUS_BACKWARD) {
+      for (--index; index >= 0; --index) {
+        if (!this.textProps[index].invisible) {
+          break;
+        }
+      }
+      if (index < 0) {
+        textProperty.editor.ruleEditor.selectorText.click();
+      } else {
+        this.textProps[index].editor.valueSpan.click();
+      }
+    }
+  }
+
+  /**
+   * Return a string representation of the rule.
+   */
+  stringifyRule() {
+    const selectorText = this.selectorText;
+    let cssText = "";
+    const terminator = Services.appinfo.OS === "WINNT" ? "\r\n" : "\n";
+
+    for (const textProp of this.textProps) {
+      if (!textProp.invisible) {
+        cssText += "\t" + textProp.stringifyProperty() + terminator;
+      }
+    }
+
+    return selectorText + " {" + terminator + cssText + "}";
+  }
+
+  /**
+   * @returns {Boolean} Whether or not the rule is in a layer
+   */
+  isInLayer() {
+    return this.domRule.ancestorData.some(({ type }) => type === "layer");
+  }
+
+  /**
+   * Return whether this rule and the one passed are in the same layer,
+   * (as in described in the spec; this is not checking that the 2 rules are children
+   * of the same CSSLayerBlockRule)
+   *
+   * @param {Rule} otherRule: The rule we want to compare with
+   * @returns {Boolean}
+   */
+  isInDifferentLayer(otherRule) {
+    const filterLayer = ({ type }) => type === "layer";
+    const thisLayers = this.domRule.ancestorData.filter(filterLayer);
+    const otherRuleLayers = otherRule.domRule.ancestorData.filter(filterLayer);
+
+    if (thisLayers.length !== otherRuleLayers.length) {
+      return true;
+    }
+
+    return thisLayers.some((layer, i) => {
+      const otherRuleLayer = otherRuleLayers[i];
+      // For named layers, we can compare the layer name directly, since we want to identify
+      // the actual layer, not the specific CSSLayerBlockRule.
+      // For nameless layers though, we don't have a choice and we can only identify them
+      // via their CSSLayerBlockRule, so we're using the rule actorID.
+      return (
+        (layer.value || layer.actorID) !==
+        (otherRuleLayer.value || otherRuleLayer.actorID)
+      );
+    });
+  }
+
+  /**
+   * See whether this rule has any non-invisible properties.
+   * @return {Boolean} true if there is any visible property, or false
+   *         if all properties are invisible
+   */
+  hasAnyVisibleProperties() {
+    for (const prop of this.textProps) {
+      if (!prop.invisible) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+module.exports = Rule;
diff --git a/devtools/client/inspector/rules/models/text-property.js b/devtools/client/inspector/rules/models/text-property.js
new file mode 100644
index 0000000000..d7568f74f3
--- /dev/null
+++ b/devtools/client/inspector/rules/models/text-property.js
@@ -0,0 +1,400 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { generateUUID } = require("resource://devtools/shared/generate-uuid.js");
+const {
+  COMPATIBILITY_TOOLTIP_MESSAGE,
+} = require("resource://devtools/client/inspector/rules/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "escapeCSSComment",
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+
+loader.lazyRequireGetter(
+  this,
+  "getCSSVariables",
+  "resource://devtools/client/inspector/rules/utils/utils.js",
+  true
+);
+
+/**
+ * TextProperty is responsible for the following:
+ *   Manages a single property from the authoredText attribute of the
+ *     relevant declaration.
+ *   Maintains a list of computed properties that come from this
+ *     property declaration.
+ *   Changes to the TextProperty are sent to its related Rule for
+ *     application.
+ */
+class TextProperty {
+  /**
+   * @param {Rule} rule
+   *        The rule this TextProperty came from.
+   * @param {String} name
+   *        The text property name (such as "background" or "border-top").
+   * @param {String} value
+   *        The property's value (not including priority).
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   * @param {Boolean} enabled
+   *        Whether the property is enabled.
+   * @param {Boolean} invisible
+   *        Whether the property is invisible. In an inherited rule, only show
+   *        the inherited declarations. The other declarations are considered
+   *        invisible and does not show up in the UI. These are needed so that
+   *        the index of a property in Rule.textProps is the same as the index
+   *        coming from parseDeclarations.
+   */
+  constructor(rule, name, value, priority, enabled = true, invisible = false) {
+    this.id = name + "_" + generateUUID().toString();
+    this.rule = rule;
+    this.name = name;
+    this.value = value;
+    this.priority = priority;
+    this.enabled = !!enabled;
+    this.invisible = invisible;
+    this.elementStyle = this.rule.elementStyle;
+    this.cssProperties = this.elementStyle.ruleView.cssProperties;
+    this.panelDoc = this.elementStyle.ruleView.inspector.panelDoc;
+    this.userProperties = this.elementStyle.store.userProperties;
+    // Names of CSS variables used in the value of this declaration.
+    this.usedVariables = new Set();
+
+    this.updateComputed();
+    this.updateUsedVariables();
+  }
+
+  get computedProperties() {
+    return this.computed
+      .filter(computed => computed.name !== this.name)
+      .map(computed => {
+        return {
+          isOverridden: computed.overridden,
+          name: computed.name,
+          priority: computed.priority,
+          value: computed.value,
+        };
+      });
+  }
+
+  /**
+   * Returns whether or not the declaration's name is known.
+   *
+   * @return {Boolean} true if the declaration name is known, false otherwise.
+   */
+  get isKnownProperty() {
+    return this.cssProperties.isKnown(this.name);
+  }
+
+  /**
+   * Returns whether or not the declaration is changed by the user.
+   *
+   * @return {Boolean} true if the declaration is changed by the user, false
+   * otherwise.
+   */
+  get isPropertyChanged() {
+    return this.userProperties.contains(this.rule.domRule, this.name);
+  }
+
+  /**
+   * Update the editor associated with this text property,
+   * if any.
+   */
+  updateEditor() {
+    // When the editor updates, reset the saved
+    // compatibility issues list as any updates
+    // may alter the compatibility status of declarations
+    this.rule.compatibilityIssues = null;
+    if (this.editor) {
+      this.editor.update();
+    }
+  }
+
+  /**
+   * Update the list of computed properties for this text property.
+   */
+  updateComputed() {
+    if (!this.name) {
+      return;
+    }
+
+    // This is a bit funky.  To get the list of computed properties
+    // for this text property, we'll set the property on a dummy element
+    // and see what the computed style looks like.
+    const dummyElement = this.elementStyle.ruleView.dummyElement;
+    const dummyStyle = dummyElement.style;
+    dummyStyle.cssText = "";
+    dummyStyle.setProperty(this.name, this.value, this.priority);
+
+    this.computed = [];
+
+    // Manually get all the properties that are set when setting a value on
+    // this.name and check the computed style on dummyElement for each one.
+    // If we just read dummyStyle, it would skip properties when value === "".
+    const subProps = this.cssProperties.getSubproperties(this.name);
+
+    for (const prop of subProps) {
+      this.computed.push({
+        textProp: this,
+        name: prop,
+        value: dummyStyle.getPropertyValue(prop),
+        priority: dummyStyle.getPropertyPriority(prop),
+      });
+    }
+  }
+
+  /**
+   * Extract all CSS variable names used in this declaration's value into a Set for
+   * easy querying. Call this method any time the declaration's value changes.
+   */
+  updateUsedVariables() {
+    this.usedVariables.clear();
+
+    for (const variable of getCSSVariables(this.value)) {
+      this.usedVariables.add(variable);
+    }
+  }
+
+  /**
+   * Set all the values from another TextProperty instance into
+   * this TextProperty instance.
+   *
+   * @param {TextProperty} prop
+   *        The other TextProperty instance.
+   */
+  set(prop) {
+    let changed = false;
+    for (const item of ["name", "value", "priority", "enabled"]) {
+      if (this[item] !== prop[item]) {
+        this[item] = prop[item];
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      this.updateUsedVariables();
+      this.updateEditor();
+    }
+  }
+
+  setValue(value, priority, force = false) {
+    if (value !== this.value || force) {
+      this.userProperties.setProperty(this.rule.domRule, this.name, value);
+    }
+    return this.rule.setPropertyValue(this, value, priority).then(() => {
+      this.updateUsedVariables();
+      this.updateEditor();
+    });
+  }
+
+  /**
+   * Called when the property's value has been updated externally, and
+   * the property and editor should update to reflect that value.
+   *
+   * @param {String} value
+   *        Property value
+   */
+  updateValue(value) {
+    if (value !== this.value) {
+      this.value = value;
+      this.updateUsedVariables();
+      this.updateEditor();
+    }
+  }
+
+  async setName(name) {
+    if (name !== this.name) {
+      this.userProperties.setProperty(this.rule.domRule, name, this.value);
+    }
+
+    await this.rule.setPropertyName(this, name);
+    this.updateEditor();
+  }
+
+  setEnabled(value) {
+    this.rule.setPropertyEnabled(this, value);
+    this.updateEditor();
+  }
+
+  remove() {
+    this.rule.removeProperty(this);
+  }
+
+  /**
+   * Return a string representation of the rule property.
+   */
+  stringifyProperty() {
+    // Get the displayed property value
+    let declaration = this.name + ": " + this.value;
+
+    if (this.priority) {
+      declaration += " !" + this.priority;
+    }
+
+    declaration += ";";
+
+    // Comment out property declarations that are not enabled
+    if (!this.enabled) {
+      declaration = "/* " + escapeCSSComment(declaration) + " */";
+    }
+
+    return declaration;
+  }
+
+  /**
+   * Validate this property. Does it make sense for this value to be assigned
+   * to this property name?
+   *
+   * @return {Boolean} true if the whole CSS declaration is valid, false otherwise.
+   */
+  isValid() {
+    const selfIndex = this.rule.textProps.indexOf(this);
+
+    // When adding a new property in the rule-view, the TextProperty object is
+    // created right away before the rule gets updated on the server, so we're
+    // not going to find the corresponding declaration object yet. Default to
+    // true.
+    if (!this.rule.domRule.declarations[selfIndex]) {
+      return true;
+    }
+
+    return this.rule.domRule.declarations[selfIndex].isValid;
+  }
+
+  isUsed() {
+    const selfIndex = this.rule.textProps.indexOf(this);
+    const declarations = this.rule.domRule.declarations;
+
+    // StyleRuleActor's declarations may have a isUsed flag (if the server is the right
+    // version). Just return true if the information is missing.
+    if (
+      !declarations ||
+      !declarations[selfIndex] ||
+      !declarations[selfIndex].isUsed
+    ) {
+      return { used: true };
+    }
+
+    return declarations[selfIndex].isUsed;
+  }
+
+  /**
+   * Get compatibility issue linked with the textProp.
+   *
+   * @returns  A JSON objects with compatibility information in following form:
+   *    {
+   *      // A boolean to denote the compatibility status
+   *      isCompatible: <boolean>,
+   *      // The CSS declaration that has compatibility issues
+   *      property: <string>,
+   *      // The un-aliased root CSS declaration for the given property
+   *      rootProperty: <string>,
+   *      // The l10n message id for the tooltip message
+   *      msgId: <string>,
+   *      // Link to MDN documentation for the rootProperty
+   *      url: <string>,
+   *      // An array of all the browsers that don't support the given CSS rule
+   *      unsupportedBrowsers: <Array>,
+   *    }
+   */
+  async isCompatible() {
+    // This is a workaround for Bug 1648339
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1648339
+    // that makes the tooltip icon inconsistent with the
+    // position of the rule it is associated with. Once solved,
+    // the compatibility data can be directly accessed from the
+    // declaration and this logic can be used to set isCompatible
+    // property directly to domRule in StyleRuleActor's form() method.
+    if (!this.enabled) {
+      return { isCompatible: true };
+    }
+
+    const compatibilityIssues = await this.rule.getCompatibilityIssues();
+    if (!compatibilityIssues.length) {
+      return { isCompatible: true };
+    }
+
+    const property = this.name;
+    const indexOfProperty = compatibilityIssues.findIndex(
+      issue => issue.property === property || issue.aliases?.includes(property)
+    );
+
+    if (indexOfProperty < 0) {
+      return { isCompatible: true };
+    }
+
+    const {
+      property: rootProperty,
+      deprecated,
+      experimental,
+      specUrl,
+      url,
+      unsupportedBrowsers,
+    } = compatibilityIssues[indexOfProperty];
+
+    let msgId = COMPATIBILITY_TOOLTIP_MESSAGE.default;
+    if (deprecated && experimental && !unsupportedBrowsers.length) {
+      msgId =
+        COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-experimental-supported"];
+    } else if (deprecated && experimental) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-experimental"];
+    } else if (deprecated && !unsupportedBrowsers.length) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"];
+    } else if (deprecated) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE.deprecated;
+    } else if (experimental && !unsupportedBrowsers.length) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE["experimental-supported"];
+    } else if (experimental) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE.experimental;
+    }
+
+    return {
+      isCompatible: false,
+      property,
+      rootProperty,
+      msgId,
+      specUrl,
+      url,
+      unsupportedBrowsers,
+    };
+  }
+
+  /**
+   * Validate the name of this property.
+   *
+   * @return {Boolean} true if the property name is valid, false otherwise.
+   */
+  isNameValid() {
+    const selfIndex = this.rule.textProps.indexOf(this);
+
+    // When adding a new property in the rule-view, the TextProperty object is
+    // created right away before the rule gets updated on the server, so we're
+    // not going to find the corresponding declaration object yet. Default to
+    // true.
+    if (!this.rule.domRule.declarations[selfIndex]) {
+      return true;
+    }
+
+    return this.rule.domRule.declarations[selfIndex].isNameValid;
+  }
+
+  /**
+   * Returns true if the property value is a CSS variables and contains the given variable
+   * name, and false otherwise.
+   *
+   * @param {String}
+   *        CSS variable name (e.g. "--color")
+   * @return {Boolean}
+   */
+  hasCSSVariable(name) {
+    return this.usedVariables.has(name);
+  }
+}
+
+module.exports = TextProperty;
diff --git a/devtools/client/inspector/rules/models/user-properties.js b/devtools/client/inspector/rules/models/user-properties.js
new file mode 100644
index 0000000000..381b800e59
--- /dev/null
+++ b/devtools/client/inspector/rules/models/user-properties.js
@@ -0,0 +1,85 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * Store of CSSStyleDeclarations mapped to properties that have been changed by
+ * the user.
+ */
+class UserProperties {
+  constructor() {
+    this.map = new Map();
+  }
+
+  /**
+   * Get a named property for a given CSSStyleDeclaration.
+   *
+   * @param {CSSStyleDeclaration} style
+   *        The CSSStyleDeclaration against which the property is mapped.
+   * @param {String} name
+   *        The name of the property to get.
+   * @param {String} value
+   *        Default value.
+   * @return {String}
+   *        The property value if it has previously been set by the user, null
+   *        otherwise.
+   */
+  getProperty(style, name, value) {
+    const key = this.getKey(style);
+    const entry = this.map.get(key, null);
+
+    if (entry && name in entry) {
+      return entry[name];
+    }
+    return value;
+  }
+
+  /**
+   * Set a named property for a given CSSStyleDeclaration.
+   *
+   * @param {CSSStyleDeclaration} style
+   *        The CSSStyleDeclaration against which the property is to be mapped.
+   * @param {String} name
+   *        The name of the property to set.
+   * @param {String} userValue
+   *        The value of the property to set.
+   */
+  setProperty(style, name, userValue) {
+    const key = this.getKey(style, name);
+    const entry = this.map.get(key, null);
+
+    if (entry) {
+      entry[name] = userValue;
+    } else {
+      const props = {};
+      props[name] = userValue;
+      this.map.set(key, props);
+    }
+  }
+
+  /**
+   * Check whether a named property for a given CSSStyleDeclaration is stored.
+   *
+   * @param {CSSStyleDeclaration} style
+   *        The CSSStyleDeclaration against which the property would be mapped.
+   * @param {String} name
+   *        The name of the property to check.
+   */
+  contains(style, name) {
+    const key = this.getKey(style, name);
+    const entry = this.map.get(key, null);
+    return !!entry && name in entry;
+  }
+
+  getKey(style, name) {
+    return style.actorID + ":" + name;
+  }
+
+  clear() {
+    this.map.clear();
+  }
+}
+
+module.exports = UserProperties;
diff --git a/devtools/client/inspector/rules/moz.build b/devtools/client/inspector/rules/moz.build
new file mode 100644
index 0000000000..260581d502
--- /dev/null
+++ b/devtools/client/inspector/rules/moz.build
@@ -0,0 +1,25 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "models",
+    "utils",
+    "views",
+]
+
+DevToolsModules(
+    "constants.js",
+    "rules.js",
+    "types.js",
+)
+
+BROWSER_CHROME_MANIFESTS += [
+    "test/browser_part1.toml",
+    "test/browser_part2.toml",
+]
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Inspector: Rules")
diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js
new file mode 100644
index 0000000000..6b7c622936
--- /dev/null
+++ b/devtools/client/inspector/rules/rules.js
@@ -0,0 +1,2558 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const flags = require("resource://devtools/shared/flags.js");
+const { l10n } = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const OutputParser = require("resource://devtools/client/shared/output-parser.js");
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+const ElementStyle = require("resource://devtools/client/inspector/rules/models/element-style.js");
+const RuleEditor = require("resource://devtools/client/inspector/rules/views/rule-editor.js");
+const RegisteredPropertyEditor = require("resource://devtools/client/inspector/rules/views/registered-property-editor.js");
+const TooltipsOverlay = require("resource://devtools/client/inspector/shared/tooltips-overlay.js");
+const {
+  createChild,
+  promiseWarn,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const { debounce } = require("resource://devtools/shared/debounce.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+loader.lazyRequireGetter(
+  this,
+  ["flashElementOn", "flashElementOff"],
+  "resource://devtools/client/inspector/markup/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "ClassListPreviewer",
+  "resource://devtools/client/inspector/rules/views/class-list-previewer.js"
+);
+loader.lazyRequireGetter(
+  this,
+  ["getNodeInfo", "getNodeCompatibilityInfo", "getRuleFromNode"],
+  "resource://devtools/client/inspector/rules/utils/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "StyleInspectorMenu",
+  "resource://devtools/client/inspector/shared/style-inspector-menu.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "AutocompletePopup",
+  "resource://devtools/client/shared/autocomplete-popup.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "KeyShortcuts",
+  "resource://devtools/client/shared/key-shortcuts.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
+const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
+const PREF_DRAGGABLE = "devtools.inspector.draggable_properties";
+const PREF_INPLACE_EDITOR_FOCUS_NEXT_ON_ENTER =
+  "devtools.inspector.rule-view.focusNextOnEnter";
+const FILTER_CHANGED_TIMEOUT = 150;
+// Removes the flash-out class from an element after 1 second.
+const PROPERTY_FLASHING_DURATION = 1000;
+
+// This is used to parse user input when filtering.
+const FILTER_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*;?$/;
+// This is used to parse the filter search value to see if the filter
+// should be strict or not
+const FILTER_STRICT_RE = /\s*`(.*?)`\s*$/;
+
+const RULE_VIEW_HEADER_CLASSNAME = "ruleview-header";
+const PSEUDO_ELEMENTS_CONTAINER_ID = "pseudo-elements-container";
+const REGISTERED_PROPERTIES_CONTAINER_ID = "registered-properties-container";
+
+/**
+ * Our model looks like this:
+ *
+ * ElementStyle:
+ *   Responsible for keeping track of which properties are overridden.
+ *   Maintains a list of Rule objects that apply to the element.
+ * Rule:
+ *   Manages a single style declaration or rule.
+ *   Responsible for applying changes to the properties in a rule.
+ *   Maintains a list of TextProperty objects.
+ * TextProperty:
+ *   Manages a single property from the authoredText attribute of the
+ *     relevant declaration.
+ *   Maintains a list of computed properties that come from this
+ *     property declaration.
+ *   Changes to the TextProperty are sent to its related Rule for
+ *     application.
+ *
+ * View hierarchy mostly follows the model hierarchy.
+ *
+ * CssRuleView:
+ *   Owns an ElementStyle and creates a list of RuleEditors for its
+ *    Rules.
+ * RuleEditor:
+ *   Owns a Rule object and creates a list of TextPropertyEditors
+ *     for its TextProperties.
+ *   Manages creation of new text properties.
+ * TextPropertyEditor:
+ *   Owns a TextProperty object.
+ *   Manages changes to the TextProperty.
+ *   Can be expanded to display computed properties.
+ *   Can mark a property disabled or enabled.
+ */
+
+/**
+ * CssRuleView is a view of the style rules and declarations that
+ * apply to a given element.  After construction, the 'element'
+ * property will be available with the user interface.
+ *
+ * @param {Inspector} inspector
+ *        Inspector toolbox panel
+ * @param {Document} document
+ *        The document that will contain the rule view.
+ * @param {Object} store
+ *        The CSS rule view can use this object to store metadata
+ *        that might outlast the rule view, particularly the current
+ *        set of disabled properties.
+ */
+function CssRuleView(inspector, document, store) {
+  EventEmitter.decorate(this);
+
+  this.inspector = inspector;
+  this.cssProperties = inspector.cssProperties;
+  this.styleDocument = document;
+  this.styleWindow = this.styleDocument.defaultView;
+  this.store = store || {};
+
+  // Allow tests to override debouncing behavior, as this can cause intermittents.
+  this.debounce = debounce;
+
+  // Variable used to stop the propagation of mouse events to children
+  // when we are updating a value by dragging the mouse and we then release it
+  this.childHasDragged = false;
+
+  this._outputParser = new OutputParser(document, this.cssProperties);
+  this._abortController = new this.styleWindow.AbortController();
+
+  this._onAddRule = this._onAddRule.bind(this);
+  this._onContextMenu = this._onContextMenu.bind(this);
+  this._onCopy = this._onCopy.bind(this);
+  this._onFilterStyles = this._onFilterStyles.bind(this);
+  this._onClearSearch = this._onClearSearch.bind(this);
+  this._onTogglePseudoClassPanel = this._onTogglePseudoClassPanel.bind(this);
+  this._onTogglePseudoClass = this._onTogglePseudoClass.bind(this);
+  this._onToggleClassPanel = this._onToggleClassPanel.bind(this);
+  this._onToggleLightColorSchemeSimulation =
+    this._onToggleLightColorSchemeSimulation.bind(this);
+  this._onToggleDarkColorSchemeSimulation =
+    this._onToggleDarkColorSchemeSimulation.bind(this);
+  this._onTogglePrintSimulation = this._onTogglePrintSimulation.bind(this);
+  this.highlightElementRule = this.highlightElementRule.bind(this);
+  this.highlightProperty = this.highlightProperty.bind(this);
+  this.refreshPanel = this.refreshPanel.bind(this);
+
+  const doc = this.styleDocument;
+  // Delegate bulk handling of events happening within the DOM tree of the Rules view
+  // to this.handleEvent(). Listening on the capture phase of the event bubbling to be
+  // able to stop event propagation on a case-by-case basis and prevent event target
+  // ancestor nodes from handling them.
+  this.styleDocument.addEventListener("click", this, { capture: true });
+  this.element = doc.getElementById("ruleview-container-focusable");
+  this.addRuleButton = doc.getElementById("ruleview-add-rule-button");
+  this.searchField = doc.getElementById("ruleview-searchbox");
+  this.searchClearButton = doc.getElementById("ruleview-searchinput-clear");
+  this.pseudoClassPanel = doc.getElementById("pseudo-class-panel");
+  this.pseudoClassToggle = doc.getElementById("pseudo-class-panel-toggle");
+  this.classPanel = doc.getElementById("ruleview-class-panel");
+  this.classToggle = doc.getElementById("class-panel-toggle");
+  this.colorSchemeLightSimulationButton = doc.getElementById(
+    "color-scheme-simulation-light-toggle"
+  );
+  this.colorSchemeDarkSimulationButton = doc.getElementById(
+    "color-scheme-simulation-dark-toggle"
+  );
+  this.printSimulationButton = doc.getElementById("print-simulation-toggle");
+
+  this._initSimulationFeatures();
+
+  this.searchClearButton.hidden = true;
+
+  this.onHighlighterShown = data =>
+    this.handleHighlighterEvent("highlighter-shown", data);
+  this.onHighlighterHidden = data =>
+    this.handleHighlighterEvent("highlighter-hidden", data);
+  this.inspector.highlighters.on("highlighter-shown", this.onHighlighterShown);
+  this.inspector.highlighters.on(
+    "highlighter-hidden",
+    this.onHighlighterHidden
+  );
+
+  this.shortcuts = new KeyShortcuts({ window: this.styleWindow });
+  this._onShortcut = this._onShortcut.bind(this);
+  this.shortcuts.on("Escape", event => this._onShortcut("Escape", event));
+  this.shortcuts.on("Return", event => this._onShortcut("Return", event));
+  this.shortcuts.on("Space", event => this._onShortcut("Space", event));
+  this.shortcuts.on("CmdOrCtrl+F", event =>
+    this._onShortcut("CmdOrCtrl+F", event)
+  );
+  this.element.addEventListener("copy", this._onCopy);
+  this.element.addEventListener("contextmenu", this._onContextMenu);
+  this.addRuleButton.addEventListener("click", this._onAddRule);
+  this.searchField.addEventListener("input", this._onFilterStyles);
+  this.searchClearButton.addEventListener("click", this._onClearSearch);
+  this.pseudoClassToggle.addEventListener(
+    "click",
+    this._onTogglePseudoClassPanel
+  );
+  this.classToggle.addEventListener("click", this._onToggleClassPanel);
+  // The "change" event bubbles up from checkbox inputs nested within the panel container.
+  this.pseudoClassPanel.addEventListener("change", this._onTogglePseudoClass);
+
+  if (flags.testing) {
+    // In tests, we start listening immediately to avoid having to simulate a mousemove.
+    this.highlighters.addToView(this);
+  } else {
+    this.element.addEventListener(
+      "mousemove",
+      () => {
+        this.highlighters.addToView(this);
+      },
+      { once: true }
+    );
+  }
+
+  this._handlePrefChange = this._handlePrefChange.bind(this);
+  this._handleUAStylePrefChange = this._handleUAStylePrefChange.bind(this);
+  this._handleDefaultColorUnitPrefChange =
+    this._handleDefaultColorUnitPrefChange.bind(this);
+  this._handleDraggablePrefChange = this._handleDraggablePrefChange.bind(this);
+  this._handleInplaceEditorFocusNextOnEnterPrefChange =
+    this._handleInplaceEditorFocusNextOnEnterPrefChange.bind(this);
+
+  this._prefObserver = new PrefObserver("devtools.");
+  this._prefObserver.on(PREF_UA_STYLES, this._handleUAStylePrefChange);
+  this._prefObserver.on(
+    PREF_DEFAULT_COLOR_UNIT,
+    this._handleDefaultColorUnitPrefChange
+  );
+  this._prefObserver.on(PREF_DRAGGABLE, this._handleDraggablePrefChange);
+  // Initialize value of this.draggablePropertiesEnabled
+  this._handleDraggablePrefChange();
+
+  this._prefObserver.on(
+    PREF_INPLACE_EDITOR_FOCUS_NEXT_ON_ENTER,
+    this._handleInplaceEditorFocusNextOnEnterPrefChange
+  );
+  // Initialize value of this.inplaceEditorFocusNextOnEnter
+  this._handleInplaceEditorFocusNextOnEnterPrefChange();
+
+  this.pseudoClassCheckboxes = this._createPseudoClassCheckboxes();
+  this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
+
+  // Add the tooltips and highlighters to the view
+  this.tooltips = new TooltipsOverlay(this);
+
+  this.cssRegisteredPropertiesByTarget = new Map();
+}
+
+CssRuleView.prototype = {
+  // The element that we're inspecting.
+  _viewedElement: null,
+
+  // Used for cancelling timeouts in the style filter.
+  _filterChangedTimeout: null,
+
+  // Empty, unconnected element of the same type as this node, used
+  // to figure out how shorthand properties will be parsed.
+  _dummyElement: null,
+
+  get popup() {
+    if (!this._popup) {
+      // The popup will be attached to the toolbox document.
+      this._popup = new AutocompletePopup(this.inspector.toolbox.doc, {
+        autoSelect: true,
+      });
+    }
+
+    return this._popup;
+  },
+
+  get classListPreviewer() {
+    if (!this._classListPreviewer) {
+      this._classListPreviewer = new ClassListPreviewer(
+        this.inspector,
+        this.classPanel
+      );
+    }
+
+    return this._classListPreviewer;
+  },
+
+  get contextMenu() {
+    if (!this._contextMenu) {
+      this._contextMenu = new StyleInspectorMenu(this, { isRuleView: true });
+    }
+
+    return this._contextMenu;
+  },
+
+  // Get the dummy elemenet.
+  get dummyElement() {
+    return this._dummyElement;
+  },
+
+  // Get the highlighters overlay from the Inspector.
+  get highlighters() {
+    if (!this._highlighters) {
+      // highlighters is a lazy getter in the inspector.
+      this._highlighters = this.inspector.highlighters;
+    }
+
+    return this._highlighters;
+  },
+
+  // Get the filter search value.
+  get searchValue() {
+    return this.searchField.value.toLowerCase();
+  },
+
+  get rules() {
+    return this._elementStyle ? this._elementStyle.rules : [];
+  },
+
+  get currentTarget() {
+    return this.inspector.toolbox.target;
+  },
+
+  /**
+   * Highlight/unhighlight all the nodes that match a given selector
+   * inside the document of the current selected node.
+   * Only one selector can be highlighted at a time, so calling the method a
+   * second time with a different selector will first unhighlight the previously
+   * highlighted nodes.
+   * Calling the method a second time with the same selector will just
+   * unhighlight the highlighted nodes.
+   *
+   * @param {String} selector
+   *        Elements matching this selector will be highlighted on the page.
+   */
+  async toggleSelectorHighlighter(selector) {
+    if (this.isSelectorHighlighted(selector)) {
+      await this.inspector.highlighters.hideHighlighterType(
+        this.inspector.highlighters.TYPES.SELECTOR
+      );
+    } else {
+      await this.inspector.highlighters.showHighlighterTypeForNode(
+        this.inspector.highlighters.TYPES.SELECTOR,
+        this.inspector.selection.nodeFront,
+        {
+          hideInfoBar: true,
+          hideGuides: true,
+          selector,
+        }
+      );
+    }
+  },
+
+  isPanelVisible() {
+    return (
+      this.inspector.toolbox &&
+      this.inspector.sidebar &&
+      this.inspector.toolbox.currentToolId === "inspector" &&
+      (this.inspector.sidebar.getCurrentTabID() == "ruleview" ||
+        this.inspector.is3PaneModeEnabled)
+    );
+  },
+
+  /**
+   * Check whether a SelectorHighlighter is active for the given selector text.
+   *
+   * @param {String} selector
+   * @return {Boolean}
+   */
+  isSelectorHighlighted(selector) {
+    const options = this.inspector.highlighters.getOptionsForActiveHighlighter(
+      this.inspector.highlighters.TYPES.SELECTOR
+    );
+
+    return options?.selector === selector;
+  },
+
+  /**
+   * Delegate handler for events happening within the DOM tree of the Rules view.
+   * Itself delegates to specific handlers by event type.
+   *
+   * Use this instead of attaching specific event handlers when:
+   * - there are many elements with the same event handler (eases memory pressure)
+   * - you want to avoid having to remove event handlers manually
+   * - elements are added/removed from the DOM tree arbitrarily over time
+   *
+   * @param {MouseEvent|UIEvent} event
+   */
+  handleEvent(event) {
+    if (this.childHasDragged) {
+      this.childHasDragged = false;
+      event.stopPropagation();
+      return;
+    }
+    switch (event.type) {
+      case "click":
+        this.handleClickEvent(event);
+        break;
+      default:
+    }
+  },
+
+  /**
+   * Delegate handler for click events happening within the DOM tree of the Rules view.
+   * Stop propagation of click event wrapping a CSS rule or CSS declaration to avoid
+   * triggering the prompt to add a new CSS declaration or to edit the existing one.
+   *
+   * @param {MouseEvent} event
+   */
+  async handleClickEvent(event) {
+    const target = event.target;
+
+    // Handle click on the icon next to a CSS selector.
+    if (target.classList.contains("js-toggle-selector-highlighter")) {
+      event.stopPropagation();
+      let selector = target.dataset.computedSelector;
+      // dataset.computedSelector will be initially empty for inline styles (inherited or not)
+      // Rules associated with a regular selector should have this data-attribute
+      // set in devtools/client/inspector/rules/views/rule-editor.js
+      if (selector === "") {
+        try {
+          const rule = getRuleFromNode(target, this._elementStyle);
+          if (rule.inherited) {
+            // This is an inline style from an inherited rule. Need to resolve the
+            // unique selector from the node which this rule is inherited from.
+            selector = await rule.inherited.getUniqueSelector();
+          } else {
+            // This is an inline style from the current node.
+            selector =
+              await this.inspector.selection.nodeFront.getUniqueSelector();
+          }
+
+          // Now that the selector was computed, we can store it for subsequent usage.
+          target.dataset.computedSelector = selector;
+        } finally {
+          // Could not resolve a unique selector for the inline style.
+        }
+      }
+
+      this.toggleSelectorHighlighter(selector);
+    }
+
+    // Handle click on swatches next to flex and inline-flex CSS properties
+    if (target.classList.contains("js-toggle-flexbox-highlighter")) {
+      event.stopPropagation();
+      this.inspector.highlighters.toggleFlexboxHighlighter(
+        this.inspector.selection.nodeFront,
+        "rule"
+      );
+    }
+
+    // Handle click on swatches next to grid CSS properties
+    if (target.classList.contains("js-toggle-grid-highlighter")) {
+      event.stopPropagation();
+      this.inspector.highlighters.toggleGridHighlighter(
+        this.inspector.selection.nodeFront,
+        "rule"
+      );
+    }
+  },
+
+  /**
+   * Delegate handler for highlighter events.
+   *
+   * This is the place to observe for highlighter events, check the highlighter type and
+   * event name, then react to specific events, for example by modifying the DOM.
+   *
+   * @param {String} eventName
+   *        Highlighter event name. One of: "highlighter-hidden", "highlighter-shown"
+   * @param {Object} data
+   *        Object with data associated with the highlighter event.
+   */
+  handleHighlighterEvent(eventName, data) {
+    switch (data.type) {
+      // Toggle the "highlighted" class on selector icons in the Rules view when
+      // the SelectorHighlighter is shown/hidden for a certain CSS selector.
+      case this.inspector.highlighters.TYPES.SELECTOR:
+        {
+          const selector = data?.options?.selector;
+          if (!selector) {
+            return;
+          }
+
+          const query = `.js-toggle-selector-highlighter[data-computed-selector='${selector}']`;
+          for (const node of this.styleDocument.querySelectorAll(query)) {
+            const isHighlighterDisplayed = eventName == "highlighter-shown";
+            node.classList.toggle("highlighted", isHighlighterDisplayed);
+            node.setAttribute("aria-pressed", isHighlighterDisplayed);
+          }
+        }
+        break;
+
+      // Toggle the "active" class on swatches next to flex and inline-flex CSS properties
+      // when the FlexboxHighlighter is shown/hidden for the currently selected node.
+      case this.inspector.highlighters.TYPES.FLEXBOX:
+        {
+          const query = ".js-toggle-flexbox-highlighter";
+          for (const node of this.styleDocument.querySelectorAll(query)) {
+            node.classList.toggle("active", eventName == "highlighter-shown");
+          }
+        }
+        break;
+
+      // Toggle the "active" class on swatches next to grid CSS properties
+      // when the GridHighlighter is shown/hidden for the currently selected node.
+      case this.inspector.highlighters.TYPES.GRID:
+        {
+          const query = ".js-toggle-grid-highlighter";
+          for (const node of this.styleDocument.querySelectorAll(query)) {
+            // From the Layout panel, we can toggle grid highlighters for nodes which are
+            // not currently selected. The Rules view shows `display: grid` declarations
+            // only for the selected node. Avoid mistakenly marking them as "active".
+            if (data.nodeFront === this.inspector.selection.nodeFront) {
+              node.classList.toggle("active", eventName == "highlighter-shown");
+            }
+
+            // When the max limit of grid highlighters is reached (default 3),
+            // mark inactive grid swatches as disabled.
+            node.toggleAttribute(
+              "disabled",
+              !this.inspector.highlighters.canGridHighlighterToggle(
+                this.inspector.selection.nodeFront
+              )
+            );
+          }
+        }
+        break;
+    }
+  },
+
+  /**
+   * Enables the print and color scheme simulation only for local and remote tab debugging.
+   */
+  async _initSimulationFeatures() {
+    if (!this.inspector.commands.descriptorFront.isTabDescriptor) {
+      return;
+    }
+    this.colorSchemeLightSimulationButton.removeAttribute("hidden");
+    this.colorSchemeDarkSimulationButton.removeAttribute("hidden");
+    this.printSimulationButton.removeAttribute("hidden");
+    this.printSimulationButton.addEventListener(
+      "click",
+      this._onTogglePrintSimulation
+    );
+    this.colorSchemeLightSimulationButton.addEventListener(
+      "click",
+      this._onToggleLightColorSchemeSimulation
+    );
+    this.colorSchemeDarkSimulationButton.addEventListener(
+      "click",
+      this._onToggleDarkColorSchemeSimulation
+    );
+  },
+
+  /**
+   * Get the type of a given node in the rule-view
+   *
+   * @param {DOMNode} node
+   *        The node which we want information about
+   * @return {Object|null} containing the following props:
+   * - type {String} One of the VIEW_NODE_XXX_TYPE const in
+   *   client/inspector/shared/node-types.
+   * - rule {Rule} The Rule object.
+   * - value {Object} Depends on the type of the node.
+   * Otherwise, returns null if the node isn't anything we care about.
+   */
+  getNodeInfo(node) {
+    return getNodeInfo(node, this._elementStyle);
+  },
+
+  /**
+   * Get the node's compatibility issues
+   *
+   * @param {DOMNode} node
+   *        The node which we want information about
+   * @return {Object|null} containing the following props:
+   * - type {String} Compatibility issue type.
+   * - property {string} The incompatible rule
+   * - alias {Array} The browser specific alias of rule
+   * - url {string} Link to MDN documentation
+   * - deprecated {bool} True if the rule is deprecated
+   * - experimental {bool} True if rule is experimental
+   * - unsupportedBrowsers {Array} Array of unsupported browser
+   * Otherwise, returns null if the node has cross-browser compatible CSS
+   */
+  async getNodeCompatibilityInfo(node) {
+    const compatibilityInfo = await getNodeCompatibilityInfo(
+      node,
+      this._elementStyle
+    );
+
+    return compatibilityInfo;
+  },
+
+  /**
+   * Context menu handler.
+   */
+  _onContextMenu(event) {
+    if (
+      event.originalTarget.closest("input[type=text]") ||
+      event.originalTarget.closest("input:not([type])") ||
+      event.originalTarget.closest("textarea")
+    ) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    this.contextMenu.show(event);
+  },
+
+  /**
+   * Callback for copy event. Copy the selected text.
+   *
+   * @param {Event} event
+   *        copy event object.
+   */
+  _onCopy(event) {
+    if (event) {
+      this.copySelection(event.target);
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+
+  /**
+   * Copy the current selection. The current target is necessary
+   * if the selection is inside an input or a textarea
+   *
+   * @param {DOMNode} target
+   *        DOMNode target of the copy action
+   */
+  copySelection(target) {
+    try {
+      let text = "";
+
+      const nodeName = target?.nodeName;
+      const targetType = target?.type;
+
+      if (
+        // The target can be the enable/disable rule checkbox here (See Bug 1680893).
+        (nodeName === "input" && targetType !== "checkbox") ||
+        nodeName == "textarea"
+      ) {
+        const start = Math.min(target.selectionStart, target.selectionEnd);
+        const end = Math.max(target.selectionStart, target.selectionEnd);
+        const count = end - start;
+        text = target.value.substr(start, count);
+      } else {
+        text = this.styleWindow.getSelection().toString();
+
+        // Remove any double newlines.
+        text = text.replace(/(\r?\n)\r?\n/g, "$1");
+      }
+
+      clipboardHelper.copyString(text);
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  /**
+   * Add a new rule to the current element.
+   */
+  async _onAddRule() {
+    const elementStyle = this._elementStyle;
+    const element = elementStyle.element;
+    const pseudoClasses = element.pseudoClassLocks;
+
+    this._focusNextUserAddedRule = true;
+    this.pageStyle.addNewRule(element, pseudoClasses);
+  },
+
+  /**
+   * Disables add rule button when needed
+   */
+  refreshAddRuleButtonState() {
+    const shouldBeDisabled =
+      !this._viewedElement ||
+      !this.inspector.selection.isElementNode() ||
+      this.inspector.selection.isAnonymousNode();
+    this.addRuleButton.disabled = shouldBeDisabled;
+  },
+
+  /**
+   * Return {Boolean} true if the rule view currently has an input
+   * editor visible.
+   */
+  get isEditing() {
+    return (
+      this.tooltips.isEditing ||
+      !!this.element.querySelectorAll(".styleinspector-propertyeditor").length
+    );
+  },
+
+  _handleUAStylePrefChange() {
+    this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
+    this._handlePrefChange(PREF_UA_STYLES);
+  },
+
+  _handleDefaultColorUnitPrefChange() {
+    this._handlePrefChange(PREF_DEFAULT_COLOR_UNIT);
+  },
+
+  _handleDraggablePrefChange() {
+    this.draggablePropertiesEnabled = Services.prefs.getBoolPref(
+      PREF_DRAGGABLE,
+      false
+    );
+    // This event is consumed by text-property-editor instances in order to
+    // update their draggable behavior. Preferences observer are costly, so
+    // we are forwarding the preference update via the EventEmitter.
+    this.emit("draggable-preference-updated");
+  },
+
+  _handleInplaceEditorFocusNextOnEnterPrefChange() {
+    this.inplaceEditorFocusNextOnEnter = Services.prefs.getBoolPref(
+      PREF_INPLACE_EDITOR_FOCUS_NEXT_ON_ENTER,
+      false
+    );
+    this._handlePrefChange(PREF_INPLACE_EDITOR_FOCUS_NEXT_ON_ENTER);
+  },
+
+  _handlePrefChange(pref) {
+    // Reselect the currently selected element
+    const refreshOnPrefs = [
+      PREF_UA_STYLES,
+      PREF_DEFAULT_COLOR_UNIT,
+      PREF_INPLACE_EDITOR_FOCUS_NEXT_ON_ENTER,
+    ];
+    if (this._viewedElement && refreshOnPrefs.includes(pref)) {
+      this.selectElement(this._viewedElement, true);
+    }
+  },
+
+  /**
+   * Set the filter style search value.
+   * @param {String} value
+   *        The search value.
+   */
+  setFilterStyles(value = "") {
+    this.searchField.value = value;
+    this.searchField.focus();
+    this._onFilterStyles();
+  },
+
+  /**
+   * Called when the user enters a search term in the filter style search box.
+   */
+  _onFilterStyles() {
+    if (this._filterChangedTimeout) {
+      clearTimeout(this._filterChangedTimeout);
+    }
+
+    const filterTimeout = this.searchValue.length ? FILTER_CHANGED_TIMEOUT : 0;
+    this.searchClearButton.hidden = this.searchValue.length === 0;
+
+    this._filterChangedTimeout = setTimeout(() => {
+      this.searchData = {
+        searchPropertyMatch: FILTER_PROP_RE.exec(this.searchValue),
+        searchPropertyName: this.searchValue,
+        searchPropertyValue: this.searchValue,
+        strictSearchValue: "",
+        strictSearchPropertyName: false,
+        strictSearchPropertyValue: false,
+        strictSearchAllValues: false,
+      };
+
+      if (this.searchData.searchPropertyMatch) {
+        // Parse search value as a single property line and extract the
+        // property name and value. If the parsed property name or value is
+        // contained in backquotes (`), extract the value within the backquotes
+        // and set the corresponding strict search for the property to true.
+        if (FILTER_STRICT_RE.test(this.searchData.searchPropertyMatch[1])) {
+          this.searchData.strictSearchPropertyName = true;
+          this.searchData.searchPropertyName = FILTER_STRICT_RE.exec(
+            this.searchData.searchPropertyMatch[1]
+          )[1];
+        } else {
+          this.searchData.searchPropertyName =
+            this.searchData.searchPropertyMatch[1];
+        }
+
+        if (FILTER_STRICT_RE.test(this.searchData.searchPropertyMatch[2])) {
+          this.searchData.strictSearchPropertyValue = true;
+          this.searchData.searchPropertyValue = FILTER_STRICT_RE.exec(
+            this.searchData.searchPropertyMatch[2]
+          )[1];
+        } else {
+          this.searchData.searchPropertyValue =
+            this.searchData.searchPropertyMatch[2];
+        }
+
+        // Strict search for stylesheets will match the property line regex.
+        // Extract the search value within the backquotes to be used
+        // in the strict search for stylesheets in _highlightStyleSheet.
+        if (FILTER_STRICT_RE.test(this.searchValue)) {
+          this.searchData.strictSearchValue = FILTER_STRICT_RE.exec(
+            this.searchValue
+          )[1];
+        }
+      } else if (FILTER_STRICT_RE.test(this.searchValue)) {
+        // If the search value does not correspond to a property line and
+        // is contained in backquotes, extract the search value within the
+        // backquotes and set the flag to perform a strict search for all
+        // the values (selector, stylesheet, property and computed values).
+        const searchValue = FILTER_STRICT_RE.exec(this.searchValue)[1];
+        this.searchData.strictSearchAllValues = true;
+        this.searchData.searchPropertyName = searchValue;
+        this.searchData.searchPropertyValue = searchValue;
+        this.searchData.strictSearchValue = searchValue;
+      }
+
+      this._clearHighlight(this.element);
+      this._clearRules();
+      this._createEditors();
+
+      this.inspector.emit("ruleview-filtered");
+
+      this._filterChangeTimeout = null;
+    }, filterTimeout);
+  },
+
+  /**
+   * Called when the user clicks on the clear button in the filter style search
+   * box. Returns true if the search box is cleared and false otherwise.
+   */
+  _onClearSearch() {
+    if (this.searchField.value) {
+      this.setFilterStyles("");
+      return true;
+    }
+
+    return false;
+  },
+
+  destroy() {
+    this.isDestroyed = true;
+    this.clear();
+
+    this._dummyElement = null;
+    // off handlers must have the same reference as their on handlers
+    this._prefObserver.off(PREF_UA_STYLES, this._handleUAStylePrefChange);
+    this._prefObserver.off(
+      PREF_DEFAULT_COLOR_UNIT,
+      this._handleDefaultColorUnitPrefChange
+    );
+    this._prefObserver.off(PREF_DRAGGABLE, this._handleDraggablePrefChange);
+    this._prefObserver.off(
+      PREF_INPLACE_EDITOR_FOCUS_NEXT_ON_ENTER,
+      this._handleInplaceEditorFocusNextOnEnterPrefChange
+    );
+    this._prefObserver.destroy();
+
+    this._outputParser = null;
+
+    if (this._classListPreviewer) {
+      this._classListPreviewer.destroy();
+      this._classListPreviewer = null;
+    }
+
+    if (this._contextMenu) {
+      this._contextMenu.destroy();
+      this._contextMenu = null;
+    }
+
+    if (this._highlighters) {
+      this._highlighters.removeFromView(this);
+      this._highlighters = null;
+    }
+
+    // Clean-up for simulations.
+    this.colorSchemeLightSimulationButton.removeEventListener(
+      "click",
+      this._onToggleLightColorSchemeSimulation
+    );
+    this.colorSchemeDarkSimulationButton.removeEventListener(
+      "click",
+      this._onToggleDarkColorSchemeSimulation
+    );
+    this.printSimulationButton.removeEventListener(
+      "click",
+      this._onTogglePrintSimulation
+    );
+
+    this.colorSchemeLightSimulationButton = null;
+    this.colorSchemeDarkSimulationButton = null;
+    this.printSimulationButton = null;
+
+    this.tooltips.destroy();
+
+    // Remove bound listeners
+    this._abortController.abort();
+    this._abortController = null;
+    this.shortcuts.destroy();
+    this.styleDocument.removeEventListener("click", this, { capture: true });
+    this.element.removeEventListener("copy", this._onCopy);
+    this.element.removeEventListener("contextmenu", this._onContextMenu);
+    this.addRuleButton.removeEventListener("click", this._onAddRule);
+    this.searchField.removeEventListener("input", this._onFilterStyles);
+    this.searchClearButton.removeEventListener("click", this._onClearSearch);
+    this.pseudoClassPanel.removeEventListener(
+      "change",
+      this._onTogglePseudoClass
+    );
+    this.pseudoClassToggle.removeEventListener(
+      "click",
+      this._onTogglePseudoClassPanel
+    );
+    this.classToggle.removeEventListener("click", this._onToggleClassPanel);
+    this.inspector.highlighters.off(
+      "highlighter-shown",
+      this.onHighlighterShown
+    );
+    this.inspector.highlighters.off(
+      "highlighter-hidden",
+      this.onHighlighterHidden
+    );
+
+    this.searchField = null;
+    this.searchClearButton = null;
+    this.pseudoClassPanel = null;
+    this.pseudoClassToggle = null;
+    this.pseudoClassCheckboxes = null;
+    this.classPanel = null;
+    this.classToggle = null;
+
+    this.inspector = null;
+    this.styleDocument = null;
+    this.styleWindow = null;
+
+    if (this.element.parentNode) {
+      this.element.remove();
+    }
+
+    if (this._elementStyle) {
+      this._elementStyle.destroy();
+    }
+
+    if (this._popup) {
+      this._popup.destroy();
+      this._popup = null;
+    }
+  },
+
+  /**
+   * Mark the view as selecting an element, disabling all interaction, and
+   * visually clearing the view after a few milliseconds to avoid confusion
+   * about which element's styles the rule view shows.
+   */
+  _startSelectingElement() {
+    this.element.classList.add("non-interactive");
+  },
+
+  /**
+   * Mark the view as no longer selecting an element, re-enabling interaction.
+   */
+  _stopSelectingElement() {
+    this.element.classList.remove("non-interactive");
+  },
+
+  /**
+   * Update the view with a new selected element.
+   *
+   * @param {NodeActor} element
+   *        The node whose style rules we'll inspect.
+   * @param {Boolean} allowRefresh
+   *        Update the view even if the element is the same as last time.
+   */
+  selectElement(element, allowRefresh = false) {
+    const refresh = this._viewedElement === element;
+    if (refresh && !allowRefresh) {
+      return Promise.resolve(undefined);
+    }
+
+    if (this._popup && this.popup.isOpen) {
+      this.popup.hidePopup();
+    }
+
+    this.clear(false);
+    this._viewedElement = element;
+
+    this.clearPseudoClassPanel();
+    this.refreshAddRuleButtonState();
+
+    if (!this._viewedElement) {
+      this._stopSelectingElement();
+      this._clearRules();
+      this._showEmpty();
+      this.refreshPseudoClassPanel();
+      if (this.pageStyle) {
+        this.pageStyle.off("stylesheet-updated", this.refreshPanel);
+        this.pageStyle = null;
+      }
+      return Promise.resolve(undefined);
+    }
+
+    this.pageStyle = element.inspectorFront.pageStyle;
+    this.pageStyle.on("stylesheet-updated", this.refreshPanel);
+
+    // To figure out how shorthand properties are interpreted by the
+    // engine, we will set properties on a dummy element and observe
+    // how their .style attribute reflects them as computed values.
+    const dummyElementPromise = Promise.resolve(this.styleDocument)
+      .then(document => {
+        // ::before and ::after do not have a namespaceURI
+        const namespaceURI =
+          this.element.namespaceURI || document.documentElement.namespaceURI;
+        this._dummyElement = document.createElementNS(
+          namespaceURI,
+          this.element.tagName
+        );
+      })
+      .catch(promiseWarn);
+
+    const elementStyle = new ElementStyle(
+      element,
+      this,
+      this.store,
+      this.pageStyle,
+      this.showUserAgentStyles
+    );
+    this._elementStyle = elementStyle;
+
+    this._startSelectingElement();
+
+    return dummyElementPromise
+      .then(() => {
+        if (this._elementStyle === elementStyle) {
+          return this._populate();
+        }
+        return undefined;
+      })
+      .then(() => {
+        if (this._elementStyle === elementStyle) {
+          if (!refresh) {
+            this.element.scrollTop = 0;
+          }
+          this._stopSelectingElement();
+          this._elementStyle.onChanged = () => {
+            this._changed();
+          };
+        }
+      })
+      .catch(e => {
+        if (this._elementStyle === elementStyle) {
+          this._stopSelectingElement();
+          this._clearRules();
+        }
+        console.error(e);
+      });
+  },
+
+  /**
+   * Update the rules for the currently highlighted element.
+   */
+  refreshPanel() {
+    // Ignore refreshes when the panel is hidden, or during editing or when no element is selected.
+    if (!this.isPanelVisible() || this.isEditing || !this._elementStyle) {
+      return Promise.resolve(undefined);
+    }
+
+    // Repopulate the element style once the current modifications are done.
+    const promises = [];
+    for (const rule of this._elementStyle.rules) {
+      if (rule._applyingModifications) {
+        promises.push(rule._applyingModifications);
+      }
+    }
+
+    return Promise.all(promises).then(() => {
+      return this._populate();
+    });
+  },
+
+  /**
+   * Clear the pseudo class options panel by removing the checked and disabled
+   * attributes for each checkbox.
+   */
+  clearPseudoClassPanel() {
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.checked = false;
+      checkbox.disabled = false;
+    });
+  },
+
+  /**
+   * For each item in PSEUDO_CLASSES, create a checkbox input element for toggling a
+   * pseudo-class on the selected element and append it to the pseudo-class panel.
+   *
+   * Returns an array with the checkbox input elements for pseudo-classes.
+   *
+   * @return {Array}
+   */
+  _createPseudoClassCheckboxes() {
+    const doc = this.styleDocument;
+    const fragment = doc.createDocumentFragment();
+
+    for (const pseudo of PSEUDO_CLASSES) {
+      const label = doc.createElement("label");
+      const checkbox = doc.createElement("input");
+      checkbox.setAttribute("tabindex", "-1");
+      checkbox.setAttribute("type", "checkbox");
+      checkbox.setAttribute("value", pseudo);
+
+      label.append(checkbox, pseudo);
+      fragment.append(label);
+    }
+
+    this.pseudoClassPanel.append(fragment);
+    return Array.from(
+      this.pseudoClassPanel.querySelectorAll("input[type=checkbox]")
+    );
+  },
+
+  /**
+   * Update the pseudo class options for the currently highlighted element.
+   */
+  refreshPseudoClassPanel() {
+    if (!this._elementStyle || !this.inspector.selection.isElementNode()) {
+      this.pseudoClassCheckboxes.forEach(checkbox => {
+        checkbox.disabled = true;
+      });
+      return;
+    }
+
+    const pseudoClassLocks = this._elementStyle.element.pseudoClassLocks;
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.disabled = false;
+      checkbox.checked = pseudoClassLocks.includes(checkbox.value);
+    });
+  },
+
+  _populate() {
+    const elementStyle = this._elementStyle;
+    return this._elementStyle
+      .populate()
+      .then(() => {
+        if (this._elementStyle !== elementStyle || this.isDestroyed) {
+          return null;
+        }
+
+        this._clearRules();
+        const onEditorsReady = this._createEditors();
+        this.refreshPseudoClassPanel();
+
+        // Notify anyone that cares that we refreshed.
+        return onEditorsReady.then(() => {
+          this.emit("ruleview-refreshed");
+        }, console.error);
+      })
+      .catch(promiseWarn);
+  },
+
+  /**
+   * Show the user that the rule view has no node selected.
+   */
+  _showEmpty() {
+    if (this.styleDocument.getElementById("ruleview-no-results")) {
+      return;
+    }
+
+    createChild(this.element, "div", {
+      id: "ruleview-no-results",
+      class: "devtools-sidepanel-no-result",
+      textContent: l10n("rule.empty"),
+    });
+  },
+
+  /**
+   * Clear the rules.
+   */
+  _clearRules() {
+    this.element.innerHTML = "";
+  },
+
+  /**
+   * Clear the rule view.
+   */
+  clear(clearDom = true) {
+    if (clearDom) {
+      this._clearRules();
+    }
+    this._viewedElement = null;
+
+    if (this._elementStyle) {
+      this._elementStyle.destroy();
+      this._elementStyle = null;
+    }
+
+    if (this.pageStyle) {
+      this.pageStyle.off("stylesheet-updated", this.refreshPanel);
+      this.pageStyle = null;
+    }
+  },
+
+  /**
+   * Called when the user has made changes to the ElementStyle.
+   * Emits an event that clients can listen to.
+   */
+  _changed() {
+    this.emit("ruleview-changed");
+  },
+
+  /**
+   * Text for header that shows above rules for this element
+   */
+  get selectedElementLabel() {
+    if (this._selectedElementLabel) {
+      return this._selectedElementLabel;
+    }
+    this._selectedElementLabel = l10n("rule.selectedElement");
+    return this._selectedElementLabel;
+  },
+
+  /**
+   * Text for header that shows above rules for pseudo elements
+   */
+  get pseudoElementLabel() {
+    if (this._pseudoElementLabel) {
+      return this._pseudoElementLabel;
+    }
+    this._pseudoElementLabel = l10n("rule.pseudoElement");
+    return this._pseudoElementLabel;
+  },
+
+  get showPseudoElements() {
+    if (this._showPseudoElements === undefined) {
+      this._showPseudoElements = Services.prefs.getBoolPref(
+        "devtools.inspector.show_pseudo_elements"
+      );
+    }
+    return this._showPseudoElements;
+  },
+
+  /**
+   * Creates an expandable container in the rule view
+   *
+   * @param  {String} label
+   *         The label for the container header
+   * @param  {String} containerId
+   *         The id that will be set on the container
+   * @param  {Boolean} isPseudo
+   *         Whether or not the container will hold pseudo element rules
+   * @return {DOMNode} The container element
+   */
+  createExpandableContainer(label, containerId, isPseudo = false) {
+    const header = this.styleDocument.createElementNS(HTML_NS, "div");
+    header.classList.add(
+      RULE_VIEW_HEADER_CLASSNAME,
+      "ruleview-expandable-header"
+    );
+    header.setAttribute("role", "heading");
+
+    const toggleButton = this.styleDocument.createElementNS(HTML_NS, "button");
+    toggleButton.setAttribute(
+      "title",
+      l10n("rule.expandableContainerToggleButton.title")
+    );
+    toggleButton.setAttribute("aria-expanded", "true");
+    toggleButton.setAttribute("aria-controls", containerId);
+
+    const twisty = this.styleDocument.createElementNS(HTML_NS, "span");
+    twisty.className = "ruleview-expander theme-twisty";
+
+    toggleButton.append(twisty, this.styleDocument.createTextNode(label));
+    header.append(toggleButton);
+
+    const container = this.styleDocument.createElementNS(HTML_NS, "div");
+    container.id = containerId;
+    container.classList.add("ruleview-expandable-container");
+    container.hidden = false;
+
+    this.element.append(header, container);
+
+    toggleButton.addEventListener("click", () => {
+      this._toggleContainerVisibility(
+        toggleButton,
+        container,
+        isPseudo,
+        !this.showPseudoElements
+      );
+    });
+
+    if (isPseudo) {
+      this._toggleContainerVisibility(
+        toggleButton,
+        container,
+        isPseudo,
+        this.showPseudoElements
+      );
+    }
+
+    return container;
+  },
+
+  /**
+   * Create the `@property` expandable container
+   *
+   * @returns {Element}
+   */
+  createRegisteredPropertiesExpandableContainer() {
+    const el = this.createExpandableContainer(
+      "@property",
+      REGISTERED_PROPERTIES_CONTAINER_ID
+    );
+    el.classList.add("registered-properties");
+    return el;
+  },
+
+  /**
+   * Return the RegisteredPropertyEditor element for a given property name
+   *
+   * @param {String} registeredPropertyName
+   * @returns {Element|null}
+   */
+  getRegisteredPropertyElement(registeredPropertyName) {
+    return this.styleDocument.querySelector(
+      `#${REGISTERED_PROPERTIES_CONTAINER_ID} [data-name="${registeredPropertyName}"]`
+    );
+  },
+
+  /**
+   * Toggle the visibility of an expandable container
+   *
+   * @param  {DOMNode}  twisty
+   *         Clickable toggle DOM Node
+   * @param  {DOMNode}  container
+   *         Expandable container DOM Node
+   * @param  {Boolean}  isPseudo
+   *         Whether or not the container will hold pseudo element rules
+   * @param  {Boolean}  showPseudo
+   *         Whether or not pseudo element rules should be displayed
+   */
+  _toggleContainerVisibility(toggleButton, container, isPseudo, showPseudo) {
+    let isOpen = toggleButton.getAttribute("aria-expanded") === "true";
+
+    if (isPseudo) {
+      this._showPseudoElements = !!showPseudo;
+
+      Services.prefs.setBoolPref(
+        "devtools.inspector.show_pseudo_elements",
+        this.showPseudoElements
+      );
+
+      container.hidden = !this.showPseudoElements;
+      isOpen = !this.showPseudoElements;
+    } else {
+      container.hidden = !container.hidden;
+    }
+
+    toggleButton.setAttribute("aria-expanded", !isOpen);
+  },
+
+  /**
+   * Creates editor UI for each of the rules in _elementStyle.
+   */
+  // eslint-disable-next-line complexity
+  _createEditors() {
+    // Run through the current list of rules, attaching
+    // their editors in order.  Create editors if needed.
+    let lastInheritedSource = "";
+    let lastKeyframes = null;
+    let seenPseudoElement = false;
+    let seenNormalElement = false;
+    let seenSearchTerm = false;
+    let container = null;
+
+    if (!this._elementStyle.rules) {
+      return Promise.resolve();
+    }
+
+    const editorReadyPromises = [];
+    for (const rule of this._elementStyle.rules) {
+      if (rule.domRule.system) {
+        continue;
+      }
+
+      // Initialize rule editor
+      if (!rule.editor) {
+        rule.editor = new RuleEditor(this, rule);
+        editorReadyPromises.push(rule.editor.once("source-link-updated"));
+      }
+
+      // Filter the rules and highlight any matches if there is a search input
+      if (this.searchValue && this.searchData) {
+        if (this.highlightRule(rule)) {
+          seenSearchTerm = true;
+        } else if (rule.domRule.type !== ELEMENT_STYLE) {
+          continue;
+        }
+      }
+
+      // Only print header for this element if there are pseudo elements
+      if (seenPseudoElement && !seenNormalElement && !rule.pseudoElement) {
+        seenNormalElement = true;
+        const div = this.styleDocument.createElementNS(HTML_NS, "div");
+        div.className = RULE_VIEW_HEADER_CLASSNAME;
+        div.setAttribute("role", "heading");
+        div.textContent = this.selectedElementLabel;
+        this.element.appendChild(div);
+      }
+
+      const inheritedSource = rule.inherited;
+      if (inheritedSource && inheritedSource !== lastInheritedSource) {
+        const div = this.styleDocument.createElementNS(HTML_NS, "div");
+        div.classList.add(
+          RULE_VIEW_HEADER_CLASSNAME,
+          "ruleview-header-inherited"
+        );
+        div.setAttribute("role", "heading");
+        div.setAttribute("aria-level", "3");
+        div.textContent = rule.inheritedSource;
+        lastInheritedSource = inheritedSource;
+        this.element.appendChild(div);
+      }
+
+      if (!seenPseudoElement && rule.pseudoElement) {
+        seenPseudoElement = true;
+        container = this.createExpandableContainer(
+          this.pseudoElementLabel,
+          PSEUDO_ELEMENTS_CONTAINER_ID,
+          true
+        );
+      }
+
+      const keyframes = rule.keyframes;
+      if (keyframes && keyframes !== lastKeyframes) {
+        lastKeyframes = keyframes;
+        container = this.createExpandableContainer(
+          rule.keyframesName,
+          `keyframes-container-${keyframes.name}`
+        );
+      }
+
+      rule.editor.element.setAttribute("role", "article");
+      if (container && (rule.pseudoElement || keyframes)) {
+        container.appendChild(rule.editor.element);
+      } else {
+        this.element.appendChild(rule.editor.element);
+      }
+
+      // Automatically select the selector input when we are adding a user-added rule
+      if (this._focusNextUserAddedRule && rule.domRule.userAdded) {
+        this._focusNextUserAddedRule = null;
+        rule.editor.selectorText.click();
+        this.emitForTests("new-rule-added");
+      }
+    }
+
+    const targetRegisteredProperties =
+      this.getRegisteredPropertiesForSelectedNodeTarget();
+    if (targetRegisteredProperties?.size) {
+      const registeredPropertiesContainer =
+        this.createRegisteredPropertiesExpandableContainer();
+
+      // Sort properties by their name, as we want to display them in alphabetical order
+      const propertyDefinitions = Array.from(
+        targetRegisteredProperties.values()
+      ).sort((a, b) => (a.name < b.name ? -1 : 1));
+      for (const propertyDefinition of propertyDefinitions) {
+        const registeredPropertyEditor = new RegisteredPropertyEditor(
+          this,
+          propertyDefinition
+        );
+
+        registeredPropertiesContainer.appendChild(
+          registeredPropertyEditor.element
+        );
+      }
+    }
+
+    const searchBox = this.searchField.parentNode;
+    searchBox.classList.toggle(
+      "devtools-searchbox-no-match",
+      this.searchValue && !seenSearchTerm
+    );
+
+    return Promise.all(editorReadyPromises);
+  },
+
+  /**
+   * Highlight rules that matches the filter search value and returns a
+   * boolean indicating whether or not rules were highlighted.
+   *
+   * @param  {Rule} rule
+   *         The rule object we're highlighting if its rule selectors or
+   *         property values match the search value.
+   * @return {Boolean} true if the rule was highlighted, false otherwise.
+   */
+  highlightRule(rule) {
+    const isRuleSelectorHighlighted = this._highlightRuleSelector(rule);
+    const isStyleSheetHighlighted = this._highlightStyleSheet(rule);
+    const isAncestorRulesHighlighted = this._highlightAncestorRules(rule);
+    let isHighlighted =
+      isRuleSelectorHighlighted ||
+      isStyleSheetHighlighted ||
+      isAncestorRulesHighlighted;
+
+    // Highlight search matches in the rule properties
+    for (const textProp of rule.textProps) {
+      if (!textProp.invisible && this._highlightProperty(textProp.editor)) {
+        isHighlighted = true;
+      }
+    }
+
+    return isHighlighted;
+  },
+
+  /**
+   * Highlights the rule selector that matches the filter search value and
+   * returns a boolean indicating whether or not the selector was highlighted.
+   *
+   * @param  {Rule} rule
+   *         The Rule object.
+   * @return {Boolean} true if the rule selector was highlighted,
+   *         false otherwise.
+   */
+  _highlightRuleSelector(rule) {
+    let isSelectorHighlighted = false;
+
+    let selectorNodes = [...rule.editor.selectorText.childNodes];
+    if (rule.domRule.type === CSSRule.KEYFRAME_RULE) {
+      selectorNodes = [rule.editor.selectorText];
+    } else if (rule.domRule.type === ELEMENT_STYLE) {
+      selectorNodes = [];
+    }
+
+    // Highlight search matches in the rule selectors
+    for (const selectorNode of selectorNodes) {
+      const selector = selectorNode.textContent.toLowerCase();
+      if (
+        (this.searchData.strictSearchAllValues &&
+          selector === this.searchData.strictSearchValue) ||
+        (!this.searchData.strictSearchAllValues &&
+          selector.includes(this.searchValue))
+      ) {
+        selectorNode.classList.add("ruleview-highlight");
+        isSelectorHighlighted = true;
+      }
+    }
+
+    return isSelectorHighlighted;
+  },
+
+  /**
+   * Highlights the ancestor rules data (@media / @layer) that matches the filter search
+   * value and returns a boolean indicating whether or not element was highlighted.
+   *
+   * @return {Boolean} true if the element was highlighted, false otherwise.
+   */
+  _highlightAncestorRules(rule) {
+    const element = rule.editor.ancestorDataEl;
+    if (!element) {
+      return false;
+    }
+
+    const ancestorSelectors = element.querySelectorAll(
+      ".ruleview-rule-ancestor-selectorcontainer"
+    );
+
+    let isHighlighted = false;
+    for (const child of ancestorSelectors) {
+      const dataText = child.innerText.toLowerCase();
+      const matches = this.searchData.strictSearchValue
+        ? dataText === this.searchData.strictSearchValue
+        : dataText.includes(this.searchValue);
+      if (matches) {
+        isHighlighted = true;
+        child.classList.add("ruleview-highlight");
+      }
+    }
+
+    return isHighlighted;
+  },
+
+  /**
+   * Highlights the stylesheet source that matches the filter search value and
+   * returns a boolean indicating whether or not the stylesheet source was
+   * highlighted.
+   *
+   * @return {Boolean} true if the stylesheet source was highlighted, false
+   *         otherwise.
+   */
+  _highlightStyleSheet(rule) {
+    const styleSheetSource = rule.title.toLowerCase();
+    const isStyleSheetHighlighted = this.searchData.strictSearchValue
+      ? styleSheetSource === this.searchData.strictSearchValue
+      : styleSheetSource.includes(this.searchValue);
+
+    if (isStyleSheetHighlighted) {
+      rule.editor.source.classList.add("ruleview-highlight");
+    }
+
+    return isStyleSheetHighlighted;
+  },
+
+  /**
+   * Highlights the rule properties and computed properties that match the
+   * filter search value and returns a boolean indicating whether or not the
+   * property or computed property was highlighted.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   * @return {Boolean} true if the property or computed property was
+   *         highlighted, false otherwise.
+   */
+  _highlightProperty(editor) {
+    const isPropertyHighlighted = this._highlightRuleProperty(editor);
+    const isComputedHighlighted = this._highlightComputedProperty(editor);
+
+    // Expand the computed list if a computed property is highlighted and the
+    // property rule is not highlighted
+    if (
+      !isPropertyHighlighted &&
+      isComputedHighlighted &&
+      !editor.computed.hasAttribute("user-open")
+    ) {
+      editor.expandForFilter();
+    }
+
+    return isPropertyHighlighted || isComputedHighlighted;
+  },
+
+  /**
+   * Called when TextPropertyEditor is updated and updates the rule property
+   * highlight.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   */
+  _updatePropertyHighlight(editor) {
+    if (!this.searchValue || !this.searchData) {
+      return;
+    }
+
+    this._clearHighlight(editor.element);
+
+    if (this._highlightProperty(editor)) {
+      this.searchField.classList.remove("devtools-style-searchbox-no-match");
+    }
+  },
+
+  /**
+   * Highlights the rule property that matches the filter search value
+   * and returns a boolean indicating whether or not the property was
+   * highlighted.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   * @return {Boolean} true if the rule property was highlighted,
+   *         false otherwise.
+   */
+  _highlightRuleProperty(editor) {
+    // Get the actual property value displayed in the rule view
+    const propertyName = editor.prop.name.toLowerCase();
+    const propertyValue = editor.valueSpan.textContent.toLowerCase();
+
+    return this._highlightMatches(
+      editor.container,
+      propertyName,
+      propertyValue
+    );
+  },
+
+  /**
+   * Highlights the computed property that matches the filter search value and
+   * returns a boolean indicating whether or not the computed property was
+   * highlighted.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   * @return {Boolean} true if the computed property was highlighted, false
+   *         otherwise.
+   */
+  _highlightComputedProperty(editor) {
+    let isComputedHighlighted = false;
+
+    // Highlight search matches in the computed list of properties
+    editor._populateComputed();
+    for (const computed of editor.prop.computed) {
+      if (computed.element) {
+        // Get the actual property value displayed in the computed list
+        const computedName = computed.name.toLowerCase();
+        const computedValue = computed.parsedValue.toLowerCase();
+
+        isComputedHighlighted = this._highlightMatches(
+          computed.element,
+          computedName,
+          computedValue
+        )
+          ? true
+          : isComputedHighlighted;
+      }
+    }
+
+    return isComputedHighlighted;
+  },
+
+  /**
+   * Helper function for highlightRules that carries out highlighting the given
+   * element if the search terms match the property, and returns a boolean
+   * indicating whether or not the search terms match.
+   *
+   * @param  {DOMNode} element
+   *         The node to highlight if search terms match
+   * @param  {String} propertyName
+   *         The property name of a rule
+   * @param  {String} propertyValue
+   *         The property value of a rule
+   * @return {Boolean} true if the given search terms match the property, false
+   *         otherwise.
+   */
+  _highlightMatches(element, propertyName, propertyValue) {
+    const {
+      searchPropertyName,
+      searchPropertyValue,
+      searchPropertyMatch,
+      strictSearchPropertyName,
+      strictSearchPropertyValue,
+      strictSearchAllValues,
+    } = this.searchData;
+    let matches = false;
+
+    // If the inputted search value matches a property line like
+    // `font-family: arial`, then check to make sure the name and value match.
+    // Otherwise, just compare the inputted search string directly against the
+    // name and value of the rule property.
+    const hasNameAndValue =
+      searchPropertyMatch && searchPropertyName && searchPropertyValue;
+    const isMatch = (value, query, isStrict) => {
+      return isStrict ? value === query : query && value.includes(query);
+    };
+
+    if (hasNameAndValue) {
+      matches =
+        isMatch(propertyName, searchPropertyName, strictSearchPropertyName) &&
+        isMatch(propertyValue, searchPropertyValue, strictSearchPropertyValue);
+    } else {
+      matches =
+        isMatch(
+          propertyName,
+          searchPropertyName,
+          strictSearchPropertyName || strictSearchAllValues
+        ) ||
+        isMatch(
+          propertyValue,
+          searchPropertyValue,
+          strictSearchPropertyValue || strictSearchAllValues
+        );
+    }
+
+    if (matches) {
+      element.classList.add("ruleview-highlight");
+    }
+
+    return matches;
+  },
+
+  /**
+   * Clear all search filter highlights in the panel, and close the computed
+   * list if toggled opened
+   */
+  _clearHighlight(element) {
+    for (const el of element.querySelectorAll(".ruleview-highlight")) {
+      el.classList.remove("ruleview-highlight");
+    }
+
+    for (const computed of element.querySelectorAll(
+      ".ruleview-computedlist[filter-open]"
+    )) {
+      computed.parentNode._textPropertyEditor.collapseForFilter();
+    }
+  },
+
+  /**
+   * Called when the pseudo class panel button is clicked and toggles
+   * the display of the pseudo class panel.
+   */
+  _onTogglePseudoClassPanel() {
+    if (this.pseudoClassPanel.hidden) {
+      this.showPseudoClassPanel();
+    } else {
+      this.hidePseudoClassPanel();
+    }
+  },
+
+  showPseudoClassPanel() {
+    this.hideClassPanel();
+
+    this.pseudoClassToggle.setAttribute("aria-pressed", "true");
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.setAttribute("tabindex", "0");
+    });
+    this.pseudoClassPanel.hidden = false;
+  },
+
+  hidePseudoClassPanel() {
+    this.pseudoClassToggle.setAttribute("aria-pressed", "false");
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.setAttribute("tabindex", "-1");
+    });
+    this.pseudoClassPanel.hidden = true;
+  },
+
+  /**
+   * Called when a pseudo class checkbox is clicked and toggles
+   * the pseudo class for the current selected element.
+   */
+  _onTogglePseudoClass(event) {
+    const target = event.target;
+    this.inspector.togglePseudoClass(target.value);
+  },
+
+  /**
+   * Called when the class panel button is clicked and toggles the display of the class
+   * panel.
+   */
+  _onToggleClassPanel() {
+    if (this.classPanel.hidden) {
+      this.showClassPanel();
+    } else {
+      this.hideClassPanel();
+    }
+  },
+
+  showClassPanel() {
+    this.hidePseudoClassPanel();
+
+    this.classToggle.setAttribute("aria-pressed", "true");
+    this.classPanel.hidden = false;
+
+    this.classListPreviewer.focusAddClassField();
+  },
+
+  hideClassPanel() {
+    this.classToggle.setAttribute("aria-pressed", "false");
+    this.classPanel.hidden = true;
+  },
+
+  /**
+   * Handle the keypress event in the rule view.
+   */
+  _onShortcut(name, event) {
+    if (!event.target.closest("#sidebar-panel-ruleview")) {
+      return;
+    }
+
+    if (name === "CmdOrCtrl+F") {
+      this.searchField.focus();
+      event.preventDefault();
+    } else if (
+      (name === "Return" || name === "Space") &&
+      this.element.classList.contains("non-interactive")
+    ) {
+      event.preventDefault();
+    } else if (
+      name === "Escape" &&
+      event.target === this.searchField &&
+      this._onClearSearch()
+    ) {
+      // Handle the search box's keypress event. If the escape key is pressed,
+      // clear the search box field.
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+
+  async _onToggleLightColorSchemeSimulation() {
+    const shouldSimulateLightScheme =
+      this.colorSchemeLightSimulationButton.getAttribute("aria-pressed") !==
+      "true";
+
+    this.colorSchemeLightSimulationButton.setAttribute(
+      "aria-pressed",
+      shouldSimulateLightScheme
+    );
+
+    this.colorSchemeDarkSimulationButton.setAttribute("aria-pressed", "false");
+
+    await this.inspector.commands.targetConfigurationCommand.updateConfiguration(
+      {
+        colorSchemeSimulation: shouldSimulateLightScheme ? "light" : null,
+      }
+    );
+    // Refresh the current element's rules in the panel.
+    this.refreshPanel();
+  },
+
+  async _onToggleDarkColorSchemeSimulation() {
+    const shouldSimulateDarkScheme =
+      this.colorSchemeDarkSimulationButton.getAttribute("aria-pressed") !==
+      "true";
+
+    this.colorSchemeDarkSimulationButton.setAttribute(
+      "aria-pressed",
+      shouldSimulateDarkScheme
+    );
+
+    this.colorSchemeLightSimulationButton.setAttribute("aria-pressed", "false");
+
+    await this.inspector.commands.targetConfigurationCommand.updateConfiguration(
+      {
+        colorSchemeSimulation: shouldSimulateDarkScheme ? "dark" : null,
+      }
+    );
+    // Refresh the current element's rules in the panel.
+    this.refreshPanel();
+  },
+
+  async _onTogglePrintSimulation() {
+    const enabled =
+      this.printSimulationButton.getAttribute("aria-pressed") !== "true";
+    this.printSimulationButton.setAttribute("aria-pressed", enabled);
+    await this.inspector.commands.targetConfigurationCommand.updateConfiguration(
+      {
+        printSimulationEnabled: enabled,
+      }
+    );
+    // Refresh the current element's rules in the panel.
+    this.refreshPanel();
+  },
+
+  /**
+   * Temporarily flash the given element.
+   *
+   * @param  {Element} element
+   *         The element.
+   */
+  _flashElement(element) {
+    flashElementOn(element, {
+      backgroundClass: "theme-bg-contrast",
+    });
+
+    if (this._flashMutationTimer) {
+      clearTimeout(this._removeFlashOutTimer);
+      this._flashMutationTimer = null;
+    }
+
+    this._flashMutationTimer = setTimeout(() => {
+      flashElementOff(element, {
+        backgroundClass: "theme-bg-contrast",
+      });
+
+      // Emit "scrolled-to-property" for use by tests.
+      this.emit("scrolled-to-element");
+    }, PROPERTY_FLASHING_DURATION);
+  },
+
+  /**
+   * Scrolls to the top of either the rule or declaration. The view will try to scroll to
+   * the rule if both can fit in the viewport. If not, then scroll to the declaration.
+   *
+   * @param  {Element} rule
+   *         The rule to scroll to.
+   * @param  {Element|null} declaration
+   *         Optional. The declaration to scroll to.
+   * @param  {String} scrollBehavior
+   *         Optional. The transition animation when scrolling. If prefers-reduced-motion
+   *         system pref is set, then the scroll behavior will be overridden to "auto".
+   */
+  _scrollToElement(rule, declaration, scrollBehavior = "smooth") {
+    let elementToScrollTo = rule;
+
+    if (declaration) {
+      const { offsetTop, offsetHeight } = declaration;
+      // Get the distance between both the rule and declaration. If the distance is
+      // greater than the height of the rule view, then only scroll to the declaration.
+      const distance = offsetTop + offsetHeight - rule.offsetTop;
+
+      if (this.element.parentNode.offsetHeight <= distance) {
+        elementToScrollTo = declaration;
+      }
+    }
+
+    // Ensure that smooth scrolling is disabled when the user prefers reduced motion.
+    const win = elementToScrollTo.ownerGlobal;
+    const reducedMotion = win.matchMedia("(prefers-reduced-motion)").matches;
+    scrollBehavior = reducedMotion ? "auto" : scrollBehavior;
+
+    elementToScrollTo.scrollIntoView({ behavior: scrollBehavior });
+  },
+
+  /**
+   * Toggles the visibility of the pseudo element rule's container.
+   */
+  _togglePseudoElementRuleContainer() {
+    const container = this.styleDocument.getElementById(
+      PSEUDO_ELEMENTS_CONTAINER_ID
+    );
+    const toggle = this.styleDocument.querySelector(
+      `[aria-controls="${PSEUDO_ELEMENTS_CONTAINER_ID}"]`
+    );
+    this._toggleContainerVisibility(toggle, container, true, true);
+  },
+
+  /**
+   * Finds the rule with the matching actorID and highlights it.
+   *
+   * @param  {String} ruleId
+   *         The actorID of the rule.
+   */
+  highlightElementRule(ruleId) {
+    let scrollBehavior = "smooth";
+
+    const rule = this.rules.find(r => r.domRule.actorID === ruleId);
+
+    if (!rule) {
+      return;
+    }
+
+    if (rule.domRule.actorID === ruleId) {
+      // If using 2-Pane mode, then switch to the Rules tab first.
+      if (!this.inspector.is3PaneModeEnabled) {
+        this.inspector.sidebar.select("ruleview");
+      }
+
+      if (rule.pseudoElement.length && !this.showPseudoElements) {
+        scrollBehavior = "auto";
+        this._togglePseudoElementRuleContainer();
+      }
+
+      const {
+        editor: { element },
+      } = rule;
+
+      // Scroll to the top of the rule and highlight it.
+      this._scrollToElement(element, null, scrollBehavior);
+      this._flashElement(element);
+    }
+  },
+
+  /**
+   * Finds the specified TextProperty name in the rule view. If found, scroll to and
+   * flash the TextProperty.
+   *
+   * @param  {String} name
+   *         The property name to scroll to and highlight.
+   * @return {Boolean} true if the TextProperty name is found, and false otherwise.
+   */
+  highlightProperty(name) {
+    for (const rule of this.rules) {
+      for (const textProp of rule.textProps) {
+        if (textProp.overridden || textProp.invisible || !textProp.enabled) {
+          continue;
+        }
+
+        const {
+          editor: { selectorText },
+        } = rule;
+        let scrollBehavior = "smooth";
+
+        // First, search for a matching authored property.
+        if (textProp.name === name) {
+          // If using 2-Pane mode, then switch to the Rules tab first.
+          if (!this.inspector.is3PaneModeEnabled) {
+            this.inspector.sidebar.select("ruleview");
+          }
+
+          // If the property is being applied by a pseudo element rule, expand the pseudo
+          // element list container.
+          if (rule.pseudoElement.length && !this.showPseudoElements) {
+            // Set the scroll behavior to "auto" to avoid timing issues between toggling
+            // the pseudo element container and scrolling smoothly to the rule.
+            scrollBehavior = "auto";
+            this._togglePseudoElementRuleContainer();
+          }
+
+          // Scroll to the top of the property's rule so that both the property and its
+          // rule are visible.
+          this._scrollToElement(
+            selectorText,
+            textProp.editor.element,
+            scrollBehavior
+          );
+          this._flashElement(textProp.editor.element);
+
+          return true;
+        }
+
+        // If there is no matching property, then look in computed properties.
+        for (const computed of textProp.computed) {
+          if (computed.overridden) {
+            continue;
+          }
+
+          if (computed.name === name) {
+            if (!this.inspector.is3PaneModeEnabled) {
+              this.inspector.sidebar.select("ruleview");
+            }
+
+            if (
+              textProp.rule.pseudoElement.length &&
+              !this.showPseudoElements
+            ) {
+              scrollBehavior = "auto";
+              this._togglePseudoElementRuleContainer();
+            }
+
+            // Expand the computed list.
+            textProp.editor.expandForFilter();
+
+            this._scrollToElement(
+              selectorText,
+              computed.element,
+              scrollBehavior
+            );
+            this._flashElement(computed.element);
+
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  },
+
+  /**
+   * Returns a Map (keyed by name) of the registered
+   * properties for the currently selected node document.
+   *
+   * @returns Map<String, Object>|null
+   */
+  getRegisteredPropertiesForSelectedNodeTarget() {
+    return this.cssRegisteredPropertiesByTarget.get(
+      this.inspector.selection.nodeFront.targetFront
+    );
+  },
+};
+
+class RuleViewTool {
+  constructor(inspector, window) {
+    this.inspector = inspector;
+    this.document = window.document;
+
+    this.view = new CssRuleView(this.inspector, this.document);
+
+    this.refresh = this.refresh.bind(this);
+    this.onDetachedFront = this.onDetachedFront.bind(this);
+    this.onPanelSelected = this.onPanelSelected.bind(this);
+    this.onDetachedFront = this.onDetachedFront.bind(this);
+    this.onSelected = this.onSelected.bind(this);
+    this.onViewRefreshed = this.onViewRefreshed.bind(this);
+
+    this.#abortController = new window.AbortController();
+    const { signal } = this.#abortController;
+    const baseEventConfig = { signal };
+
+    this.view.on("ruleview-refreshed", this.onViewRefreshed, baseEventConfig);
+    this.inspector.selection.on(
+      "detached-front",
+      this.onDetachedFront,
+      baseEventConfig
+    );
+    this.inspector.selection.on(
+      "new-node-front",
+      this.onSelected,
+      baseEventConfig
+    );
+    this.inspector.selection.on("pseudoclass", this.refresh, baseEventConfig);
+    this.inspector.ruleViewSideBar.on(
+      "ruleview-selected",
+      this.onPanelSelected,
+      baseEventConfig
+    );
+    this.inspector.sidebar.on(
+      "ruleview-selected",
+      this.onPanelSelected,
+      baseEventConfig
+    );
+    this.inspector.toolbox.on(
+      "inspector-selected",
+      this.onPanelSelected,
+      baseEventConfig
+    );
+    this.inspector.styleChangeTracker.on(
+      "style-changed",
+      this.refresh,
+      baseEventConfig
+    );
+
+    this.inspector.commands.resourceCommand.watchResources(
+      [
+        this.inspector.commands.resourceCommand.TYPES.DOCUMENT_EVENT,
+        this.inspector.commands.resourceCommand.TYPES.STYLESHEET,
+      ],
+      {
+        onAvailable: this.#onResourceAvailable,
+        ignoreExistingResources: true,
+      }
+    );
+
+    // We do want to get already existing registered properties, so we need to watch
+    // them separately
+    this.inspector.commands.resourceCommand
+      .watchResources(
+        [
+          this.inspector.commands.resourceCommand.TYPES
+            .CSS_REGISTERED_PROPERTIES,
+        ],
+        {
+          onAvailable: this.#onResourceAvailable,
+          onUpdated: this.#onResourceUpdated,
+          onDestroyed: this.#onResourceDestroyed,
+          ignoreExistingResources: false,
+        }
+      )
+      .catch(e => {
+        // watchResources is async and even making it's resulting promise part of
+        // this.readyPromise still causes test failures, so simply ignore the rejection
+        // if the view was already destroyed.
+        if (!this.view) {
+          return;
+        }
+        throw e;
+      });
+
+    // At the moment `readyPromise` is only consumed in tests (see `openRuleView`) to be
+    // notified when the ruleview was first populated to match the initial selected node.
+    this.readyPromise = this.onSelected();
+  }
+
+  #abortController;
+
+  isPanelVisible() {
+    if (!this.view) {
+      return false;
+    }
+    return this.view.isPanelVisible();
+  }
+
+  onDetachedFront() {
+    this.onSelected(false);
+  }
+
+  onSelected(selectElement = true) {
+    // Ignore the event if the view has been destroyed, or if it's inactive.
+    // But only if the current selection isn't null. If it's been set to null,
+    // let the update go through as this is needed to empty the view on
+    // navigation.
+    if (!this.view) {
+      return null;
+    }
+
+    const isInactive =
+      !this.isPanelVisible() && this.inspector.selection.nodeFront;
+    if (isInactive) {
+      return null;
+    }
+
+    if (
+      !this.inspector.selection.isConnected() ||
+      !this.inspector.selection.isElementNode()
+    ) {
+      return this.view.selectElement(null);
+    }
+
+    if (!selectElement) {
+      return null;
+    }
+
+    const done = this.inspector.updating("rule-view");
+    return this.view
+      .selectElement(this.inspector.selection.nodeFront)
+      .then(done, done);
+  }
+
+  refresh() {
+    if (this.isPanelVisible()) {
+      this.view.refreshPanel();
+    }
+  }
+
+  #onResourceAvailable = resources => {
+    if (!this.inspector) {
+      return;
+    }
+
+    let hasNewStylesheet = false;
+    const addedRegisteredProperties = [];
+    for (const resource of resources) {
+      if (
+        resource.resourceType ===
+          this.inspector.commands.resourceCommand.TYPES.DOCUMENT_EVENT &&
+        resource.name === "will-navigate"
+      ) {
+        this.view.cssRegisteredPropertiesByTarget.delete(resource.targetFront);
+        if (resource.targetFront.isTopLevel) {
+          this.clearUserProperties();
+        }
+        continue;
+      }
+
+      if (
+        resource.resourceType ===
+          this.inspector.commands.resourceCommand.TYPES.STYLESHEET &&
+        // resource.isNew is only true when the stylesheet was added from DevTools,
+        // for example when adding a rule in the rule view. In such cases, we're already
+        // updating the rule view, so ignore those.
+        !resource.isNew
+      ) {
+        hasNewStylesheet = true;
+      }
+
+      if (
+        resource.resourceType ===
+        this.inspector.commands.resourceCommand.TYPES.CSS_REGISTERED_PROPERTIES
+      ) {
+        if (
+          !this.view.cssRegisteredPropertiesByTarget.has(resource.targetFront)
+        ) {
+          this.view.cssRegisteredPropertiesByTarget.set(
+            resource.targetFront,
+            new Map()
+          );
+        }
+        this.view.cssRegisteredPropertiesByTarget
+          .get(resource.targetFront)
+          .set(resource.name, resource);
+        // Only add properties from the same target as the selected node
+        if (
+          this.view.inspector.selection?.nodeFront?.targetFront ===
+          resource.targetFront
+        ) {
+          addedRegisteredProperties.push(resource);
+        }
+      }
+    }
+
+    if (addedRegisteredProperties.length) {
+      // Retrieve @property container
+      let registeredPropertiesContainer =
+        this.view.styleDocument.getElementById(
+          REGISTERED_PROPERTIES_CONTAINER_ID
+        );
+      // create it if it didn't exist before
+      if (!registeredPropertiesContainer) {
+        registeredPropertiesContainer =
+          this.view.createRegisteredPropertiesExpandableContainer();
+      }
+
+      // Then add all new registered properties
+      const names = new Set();
+      for (const propertyDefinition of addedRegisteredProperties) {
+        const editor = new RegisteredPropertyEditor(
+          this.view,
+          propertyDefinition
+        );
+        names.add(propertyDefinition.name);
+
+        // We need to insert the element at the right position so we keep the list of
+        // properties alphabetically sorted.
+        let referenceNode = null;
+        for (const child of registeredPropertiesContainer.children) {
+          if (child.getAttribute("data-name") > propertyDefinition.name) {
+            referenceNode = child;
+            break;
+          }
+        }
+        registeredPropertiesContainer.insertBefore(
+          editor.element,
+          referenceNode
+        );
+      }
+
+      // Finally, update textProps that might rely on those new properties
+      this._updateElementStyleRegisteredProperties(names);
+    }
+
+    if (hasNewStylesheet) {
+      this.refresh();
+    }
+  };
+
+  #onResourceUpdated = updates => {
+    const updatedProperties = [];
+    for (const update of updates) {
+      if (
+        update.resource.resourceType ===
+        this.inspector.commands.resourceCommand.TYPES.CSS_REGISTERED_PROPERTIES
+      ) {
+        const { resource } = update;
+        if (
+          !this.view.cssRegisteredPropertiesByTarget.has(resource.targetFront)
+        ) {
+          continue;
+        }
+
+        this.view.cssRegisteredPropertiesByTarget
+          .get(resource.targetFront)
+          .set(resource.name, resource);
+
+        // Only consider properties from the same target as the selected node
+        if (
+          this.view.inspector.selection?.nodeFront?.targetFront ===
+          resource.targetFront
+        ) {
+          updatedProperties.push(resource);
+        }
+      }
+    }
+
+    const names = new Set();
+    if (updatedProperties.length) {
+      const registeredPropertiesContainer =
+        this.view.styleDocument.getElementById(
+          REGISTERED_PROPERTIES_CONTAINER_ID
+        );
+      for (const resource of updatedProperties) {
+        // Replace the existing registered property editor element with a new one,
+        // so we don't have to compute which elements should be updated.
+        const name = resource.name;
+        const el = this.view.getRegisteredPropertyElement(name);
+        const editor = new RegisteredPropertyEditor(this.view, resource);
+        registeredPropertiesContainer.replaceChild(editor.element, el);
+
+        names.add(resource.name);
+      }
+      // Finally, update textProps that might rely on those new properties
+      this._updateElementStyleRegisteredProperties(names);
+    }
+  };
+
+  #onResourceDestroyed = resources => {
+    const destroyedPropertiesNames = new Set();
+    for (const resource of resources) {
+      if (
+        resource.resourceType ===
+        this.inspector.commands.resourceCommand.TYPES.CSS_REGISTERED_PROPERTIES
+      ) {
+        if (
+          !this.view.cssRegisteredPropertiesByTarget.has(resource.targetFront)
+        ) {
+          continue;
+        }
+
+        const targetRegisteredProperties =
+          this.view.cssRegisteredPropertiesByTarget.get(resource.targetFront);
+        const resourceName = Array.from(
+          targetRegisteredProperties.entries()
+        ).find(
+          ([_, propDef]) => propDef.resourceId === resource.resourceId
+        )?.[0];
+        if (!resourceName) {
+          continue;
+        }
+
+        targetRegisteredProperties.delete(resourceName);
+
+        // Only consider properties from the same target as the selected node
+        if (
+          this.view.inspector.selection?.nodeFront?.targetFront ===
+          resource.targetFront
+        ) {
+          destroyedPropertiesNames.add(resourceName);
+        }
+      }
+    }
+    if (destroyedPropertiesNames.size > 0) {
+      for (const name of destroyedPropertiesNames) {
+        this.view.getRegisteredPropertyElement(name)?.remove();
+      }
+      // Finally, update textProps that were relying on those removed properties
+      this._updateElementStyleRegisteredProperties(destroyedPropertiesNames);
+    }
+  };
+
+  /**
+   * Update rules that reference registered properties whose name is in the passed Set,
+   * so the `var()` tooltip has up-to-date information.
+   *
+   * @param {Set<String>} registeredPropertyNames
+   */
+  _updateElementStyleRegisteredProperties(registeredPropertyNames) {
+    if (!this.view._elementStyle) {
+      return;
+    }
+    this.view._elementStyle.onRegisteredPropertiesChange(
+      registeredPropertyNames
+    );
+  }
+
+  clearUserProperties() {
+    if (this.view && this.view.store && this.view.store.userProperties) {
+      this.view.store.userProperties.clear();
+    }
+  }
+
+  onPanelSelected() {
+    if (this.inspector.selection.nodeFront === this.view._viewedElement) {
+      this.refresh();
+    } else {
+      this.onSelected();
+    }
+  }
+
+  onViewRefreshed() {
+    this.inspector.emit("rule-view-refreshed");
+  }
+
+  destroy() {
+    if (this.#abortController) {
+      this.#abortController.abort();
+    }
+
+    this.inspector.commands.resourceCommand.unwatchResources(
+      [
+        this.inspector.commands.resourceCommand.TYPES.DOCUMENT_EVENT,
+        this.inspector.commands.resourceCommand.TYPES.STYLESHEET,
+      ],
+      {
+        onAvailable: this.#onResourceAvailable,
+      }
+    );
+
+    this.inspector.commands.resourceCommand.unwatchResources(
+      [this.inspector.commands.resourceCommand.TYPES.CSS_REGISTERED_PROPERTIES],
+      {
+        onAvailable: this.#onResourceAvailable,
+        onUpdated: this.#onResourceUpdated,
+        onDestroyed: this.#onResourceDestroyed,
+      }
+    );
+
+    this.view.destroy();
+
+    this.view =
+      this.document =
+      this.inspector =
+      this.readyPromise =
+      this.#abortController =
+        null;
+  }
+}
+
+exports.CssRuleView = CssRuleView;
+exports.RuleViewTool = RuleViewTool;
diff --git a/devtools/client/inspector/rules/test/browser_part1.toml b/devtools/client/inspector/rules/test/browser_part1.toml
new file mode 100644
index 0000000000..17e0f11480
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_part1.toml
@@ -0,0 +1,319 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_blob_stylesheet.html",
+  "doc_copystyles.css",
+  "doc_copystyles.html",
+  "doc_class_panel_autocomplete_stylesheet.css",
+  "doc_class_panel_autocomplete.html",
+  "doc_conditional_import.css",
+  "doc_cssom.html",
+  "doc_custom.html",
+  "doc_edit_imported_selector.html",
+  "doc_imported_named_layer.css",
+  "doc_imported_nested_named_layer.css",
+  "doc_imported_no_layer.css",
+  "doc_test_image.png",
+  "doc_variables_4.html",
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_rules_add-property-and-reselect.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_rules_add-property-cancel_01.js"]
+
+["browser_rules_add-property-cancel_02.js"]
+
+["browser_rules_add-property-cancel_03.js"]
+
+["browser_rules_add-property-commented.js"]
+skip-if = ["verify && debug && os == 'win'"]
+
+["browser_rules_add-property-invalid-identifier.js"]
+
+["browser_rules_add-property-svg.js"]
+
+["browser_rules_add-property_01.js"]
+
+["browser_rules_add-property_02.js"]
+
+["browser_rules_add-rule-and-property.js"]
+
+["browser_rules_add-rule-and-remove-style-node.js"]
+
+["browser_rules_add-rule-button-state.js"]
+
+["browser_rules_add-rule-csp.js"]
+
+["browser_rules_add-rule-edit-selector.js"]
+
+["browser_rules_add-rule-iframes.js"]
+
+["browser_rules_add-rule-namespace-elements.js"]
+
+["browser_rules_add-rule-pseudo-class.js"]
+
+["browser_rules_add-rule-then-property-edit-selector.js"]
+
+["browser_rules_add-rule-with-menu.js"]
+
+["browser_rules_add-rule.js"]
+
+["browser_rules_authored.js"]
+
+["browser_rules_authored_color.js"]
+skip-if = [
+  "os == 'linux' && os_version == '18.04' && !debug", # Bug 1559315
+  "apple_catalina", # Bug 1713158
+  "win11_2009", # Bug 1797751
+]
+
+["browser_rules_authored_override.js"]
+
+["browser_rules_blob_stylesheet.js"]
+
+["browser_rules_class_panel_add.js"]
+
+["browser_rules_class_panel_autocomplete.js"]
+
+["browser_rules_class_panel_content.js"]
+
+["browser_rules_class_panel_edit.js"]
+
+["browser_rules_class_panel_invalid_nodes.js"]
+
+["browser_rules_class_panel_mutation.js"]
+
+["browser_rules_class_panel_state_preserved.js"]
+
+["browser_rules_class_panel_toggle.js"]
+
+["browser_rules_colorUnit.js"]
+
+["browser_rules_color_scheme_simulation.js"]
+skip-if = ["os == 'win' && !debug"] # Bug 1703465
+
+["browser_rules_color_scheme_simulation_bfcache.js"]
+
+["browser_rules_color_scheme_simulation_meta.js"]
+
+["browser_rules_color_scheme_simulation_rdm.js"]
+
+["browser_rules_colorpicker-and-image-tooltip_01.js"]
+
+["browser_rules_colorpicker-and-image-tooltip_02.js"]
+
+["browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js"]
+
+["browser_rules_colorpicker-commit-on-ENTER.js"]
+
+["browser_rules_colorpicker-contrast-ratio.js"]
+
+["browser_rules_colorpicker-edit-gradient.js"]
+
+["browser_rules_colorpicker-element-without-quads.js"]
+
+["browser_rules_colorpicker-hides-element-picker.js"]
+
+["browser_rules_colorpicker-hides-on-tooltip.js"]
+
+["browser_rules_colorpicker-multiple-changes.js"]
+
+["browser_rules_colorpicker-release-outside-frame.js"]
+
+["browser_rules_colorpicker-revert-on-ESC.js"]
+
+["browser_rules_colorpicker-swatch-displayed.js"]
+
+["browser_rules_colorpicker-works-with-css-vars.js"]
+
+["browser_rules_colorpicker-wrap-focus.js"]
+
+["browser_rules_completion-existing-property_01.js"]
+
+["browser_rules_completion-existing-property_02.js"]
+
+["browser_rules_completion-new-property_01.js"]
+
+["browser_rules_completion-new-property_02.js"]
+skip-if = ["verify && !debug && os == 'win'"]
+
+["browser_rules_completion-new-property_03.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_completion-new-property_04.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_completion-new-property_multiline.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_completion-on-empty.js"]
+
+["browser_rules_completion-popup-hidden-after-navigation.js"]
+
+["browser_rules_completion-shortcut.js"]
+
+["browser_rules_computed-lists_01.js"]
+
+["browser_rules_computed-lists_02.js"]
+
+["browser_rules_computed-lists_03.js"]
+
+["browser_rules_conditional_import.js"]
+
+["browser_rules_container-queries.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_content_01.js"]
+
+["browser_rules_content_02.js"]
+
+["browser_rules_copy_styles.js"]
+
+["browser_rules_cssom.js"]
+
+["browser_rules_cubicbezier-appears-on-swatch-click.js"]
+
+["browser_rules_cubicbezier-commit-on-ENTER.js"]
+
+["browser_rules_cubicbezier-revert-on-ESC.js"]
+
+["browser_rules_custom.js"]
+
+["browser_rules_cycle-angle.js"]
+
+["browser_rules_cycle-color.js"]
+
+["browser_rules_edit-display-grid-property.js"]
+
+["browser_rules_edit-property-cancel.js"]
+
+["browser_rules_edit-property-click.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_edit-property-commit.js"]
+
+["browser_rules_edit-property-computed.js"]
+skip-if = ["a11y_checks"] # Bugs 1849028 and 1858041 clicked span.ruleview-expander.theme-twisty is inconsistently not accessible
+
+["browser_rules_edit-property-increments.js"]
+
+["browser_rules_edit-property-nested-rules.js"]
+
+["browser_rules_edit-property-order.js"]
+
+["browser_rules_edit-property-remove_01.js"]
+skip-if = ["verify && debug && os == 'win'"]
+
+["browser_rules_edit-property-remove_02.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_edit-property-remove_03.js"]
+
+["browser_rules_edit-property-remove_04.js"]
+
+["browser_rules_edit-property_01.js"]
+
+["browser_rules_edit-property_02.js"]
+
+["browser_rules_edit-property_03.js"]
+
+["browser_rules_edit-property_04.js"]
+
+["browser_rules_edit-property_05.js"]
+
+["browser_rules_edit-property_06.js"]
+
+["browser_rules_edit-property_07.js"]
+
+["browser_rules_edit-property_08.js"]
+
+["browser_rules_edit-property_09.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_edit-property_10.js"]
+
+["browser_rules_edit-selector-click-on-scrollbar.js"]
+skip-if = ["os == 'mac'"] # Bug 1245996 : click on scrollbar not working on OSX
+
+["browser_rules_edit-selector-click.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_edit-selector-commit.js"]
+
+["browser_rules_edit-selector-nested-rules.js"]
+
+["browser_rules_edit-selector_01.js"]
+
+["browser_rules_edit-selector_02.js"]
+
+["browser_rules_edit-selector_03.js"]
+
+["browser_rules_edit-selector_04.js"]
+
+["browser_rules_edit-selector_05.js"]
+
+["browser_rules_edit-selector_06.js"]
+
+["browser_rules_edit-selector_07.js"]
+
+["browser_rules_edit-selector_08.js"]
+
+["browser_rules_edit-selector_09.js"]
+
+["browser_rules_edit-selector_10.js"]
+
+["browser_rules_edit-selector_11.js"]
+
+["browser_rules_edit-selector_12.js"]
+
+["browser_rules_edit-size-property-dragging.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_edit-value-after-name_01.js"]
+
+["browser_rules_edit-value-after-name_02.js"]
+
+["browser_rules_edit-value-after-name_03.js"]
+
+["browser_rules_edit-value-after-name_04.js"]
+
+["browser_rules_edit-variable-add.js"]
+
+["browser_rules_edit-variable-remove.js"]
+
+["browser_rules_edit-variable.js"]
+
+["browser_rules_editable-field-focus_01.js"]
+
+["browser_rules_editable-field-focus_02.js"]
+
+["browser_rules_eyedropper.js"]
+
+["browser_rules_variables-in-pseudo-element_01.js"]
+
+["browser_rules_variables-in-pseudo-element_02.js"]
+
+["browser_rules_variables_01.js"]
+
+["browser_rules_variables_02.js"]
+skip-if = ["debug"] # Bug 1250058 - Docshell leak on debug
+
+["browser_rules_variables_03-case-sensitive.js"]
+
+["browser_rules_variables_04-valid-chars.js"]
+
+["browser_rules_variables_autocomplete.js"]
+skip-if = ["!fission"]
+
+["browser_rules_variables_host.js"]
diff --git a/devtools/client/inspector/rules/test/browser_part2.toml b/devtools/client/inspector/rules/test/browser_part2.toml
new file mode 100644
index 0000000000..1cffe88e6e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_part2.toml
@@ -0,0 +1,399 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_author-sheet.html",
+  "doc_content_stylesheet.html",
+  "doc_content_stylesheet_imported.css",
+  "doc_content_stylesheet_imported2.css",
+  "doc_content_stylesheet_linked.css",
+  "doc_content_stylesheet_script.css",
+  "doc_filter.html",
+  "doc_grid_names.html",
+  "doc_grid_area_gridline_names.html",
+  "doc_inline_sourcemap.html",
+  "doc_invalid_sourcemap.css",
+  "doc_invalid_sourcemap.html",
+  "doc_keyframeanimation.css",
+  "doc_keyframeanimation.html",
+  "doc_keyframeLineNumbers.html",
+  "doc_media_queries.html",
+  "doc_print_media_simulation.html",
+  "doc_pseudoelement.html",
+  "doc_ruleLineNumbers.html",
+  "doc_rules_imported_stylesheet_edit.html",
+  "doc_sourcemaps.css",
+  "doc_sourcemaps.css.map",
+  "doc_sourcemaps.html",
+  "doc_sourcemaps.scss",
+  "doc_sourcemaps2.css",
+  "doc_sourcemaps2.css^headers^",
+  "doc_sourcemaps2.html",
+  "doc_style_editor_link.css",
+  "doc_test_image.png",
+  "doc_urls_clickable.css",
+  "doc_urls_clickable.html",
+  "doc_variables_1.html",
+  "doc_variables_2.html",
+  "doc_variables_3.html",
+  "doc_visited.html",
+  "doc_visited_in_media_query.html",
+  "doc_visited_with_style_attribute.html",
+  "doc_imported_anonymous_layer.css",
+  "doc_imported_named_layer.css",
+  "doc_imported_no_layer.css",
+  "doc_inactive_css_xul.xhtml",
+  "head.js",
+  "sjs_imported_stylesheet_edit.sjs",
+  "square_svg.sjs",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+  "!/devtools/client/webconsole/test/browser/shared-head.js",
+]
+
+["browser_rules_css-compatibility-add-rename-rule.js"]
+skip-if = [
+  "os == 'linux'", #bug 1657807
+  "os == 'win'", #bug 1657807
+]
+
+["browser_rules_css-compatibility-check-add-fix.js"]
+
+["browser_rules_css-compatibility-learn-more-link.js"]
+skip-if = ["a11y_checks"] # Bugs 1858041 and 1849028 for intermittent a11y_checks results
+
+["browser_rules_css-compatibility-toggle-rules.js"]
+
+["browser_rules_css-compatibility-tooltip-telemetry.js"]
+
+["browser_rules_filtereditor-appears-on-swatch-click.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_filtereditor-commit-on-ENTER.js"]
+
+["browser_rules_filtereditor-revert-on-ESC.js"]
+skip-if = ["os == 'win' && debug"] # bug 963492: win.
+
+["browser_rules_flexbox-highlighter-on-mutation.js"]
+
+["browser_rules_flexbox-highlighter-on-navigate.js"]
+
+["browser_rules_flexbox-highlighter-on-reload.js"]
+
+["browser_rules_flexbox-highlighter-restored-after-reload.js"]
+
+["browser_rules_flexbox-toggle-telemetry.js"]
+
+["browser_rules_flexbox-toggle_01.js"]
+
+["browser_rules_flexbox-toggle_01b.js"]
+
+["browser_rules_flexbox-toggle_02.js"]
+
+["browser_rules_flexbox-toggle_03.js"]
+
+["browser_rules_flexbox-toggle_04.js"]
+
+["browser_rules_font-family-parsing.js"]
+
+["browser_rules_grid-highlighter-on-mutation.js"]
+
+["browser_rules_grid-highlighter-on-navigate.js"]
+
+["browser_rules_grid-highlighter-on-reload.js"]
+
+["browser_rules_grid-highlighter-restored-after-reload.js"]
+
+["browser_rules_grid-template-areas.js"]
+
+["browser_rules_grid-toggle-telemetry.js"]
+
+["browser_rules_grid-toggle_01.js"]
+
+["browser_rules_grid-toggle_01b.js"]
+
+["browser_rules_grid-toggle_02.js"]
+
+["browser_rules_grid-toggle_03.js"]
+
+["browser_rules_grid-toggle_04.js"]
+
+["browser_rules_grid-toggle_05.js"]
+
+["browser_rules_gridline-names-are-shown-correctly.js"]
+skip-if = ["os == 'linux'"] # focusEditableField times out consistently on linux.
+
+["browser_rules_gridline-names-autocomplete.js"]
+skip-if = [
+  "os == 'mac' && !debug", # Bug 1675592; high frequency with/out fission
+]
+
+["browser_rules_guessIndentation.js"]
+
+["browser_rules_highlight-element-rule.js"]
+
+["browser_rules_highlight-property.js"]
+
+["browser_rules_highlight-used-fonts.js"]
+
+["browser_rules_imported_stylesheet_edit.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_rules_inactive_css_display-justify.js"]
+
+["browser_rules_inactive_css_flexbox.js"]
+
+["browser_rules_inactive_css_grid.js"]
+
+["browser_rules_inactive_css_inline.js"]
+
+["browser_rules_inactive_css_split-condition.js"]
+
+["browser_rules_inactive_css_visited.js"]
+
+["browser_rules_inactive_css_xul.js"]
+
+["browser_rules_inherited-custom-properties.js"]
+
+["browser_rules_inherited-properties_01.js"]
+
+["browser_rules_inherited-properties_02.js"]
+
+["browser_rules_inherited-properties_03.js"]
+
+["browser_rules_inherited-properties_04.js"]
+
+["browser_rules_inline-source-map.js"]
+
+["browser_rules_inline-style-order.js"]
+
+["browser_rules_invalid-source-map.js"]
+
+["browser_rules_invalid.js"]
+
+["browser_rules_keybindings.js"]
+
+["browser_rules_keyframeLineNumbers.js"]
+
+["browser_rules_keyframes-rule-shadowdom.js"]
+
+["browser_rules_keyframes-rule_01.js"]
+
+["browser_rules_keyframes-rule_02.js"]
+
+["browser_rules_large_base64_background_image.js"]
+
+["browser_rules_layer.js"]
+
+["browser_rules_lineNumbers.js"]
+
+["browser_rules_linear-easing-swatch.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_livepreview.js"]
+
+["browser_rules_mark_overridden_01.js"]
+
+["browser_rules_mark_overridden_02.js"]
+
+["browser_rules_mark_overridden_03.js"]
+
+["browser_rules_mark_overridden_04.js"]
+
+["browser_rules_mark_overridden_05.js"]
+
+["browser_rules_mark_overridden_06.js"]
+
+["browser_rules_mark_overridden_07.js"]
+
+["browser_rules_mark_overridden_08.js"]
+
+["browser_rules_mark_overridden_layers.js"]
+
+["browser_rules_mathml-element.js"]
+disabled = "bug 1231085 # This should be rewritten now that MathMLElement.style is available."
+
+["browser_rules_media-queries.js"]
+
+["browser_rules_media-queries_reload.js"]
+skip-if = ["ccov && os == 'win'"] # Bug 1516686
+
+["browser_rules_multiple-properties-duplicates.js"]
+
+["browser_rules_multiple-properties-priority.js"]
+
+["browser_rules_multiple-properties-unfinished_01.js"]
+
+["browser_rules_multiple-properties-unfinished_02.js"]
+
+["browser_rules_multiple_properties_01.js"]
+
+["browser_rules_multiple_properties_02.js"]
+
+["browser_rules_nested_at_rules.js"]
+
+["browser_rules_nested_rules.js"]
+
+["browser_rules_non_ascii.js"]
+
+["browser_rules_original-source-link.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = [
+  "ccov", #Bug 1432176
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_rules_original-source-link2.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = [
+  "ccov", # Bug 1432176
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_rules_preview-tooltips-sizes.js"]
+
+["browser_rules_print_media_simulation.js"]
+
+["browser_rules_pseudo-element_01.js"]
+
+["browser_rules_pseudo-element_02.js"]
+
+["browser_rules_pseudo-visited.js"]
+
+["browser_rules_pseudo-visited_in_media-query.js"]
+
+["browser_rules_pseudo-visited_with_style-attribute.js"]
+
+["browser_rules_pseudo_lock_options.js"]
+
+["browser_rules_refresh-no-flicker.js"]
+
+["browser_rules_refresh-on-attribute-change_01.js"]
+
+["browser_rules_refresh-on-style-change.js"]
+
+["browser_rules_refresh-on-stylesheet-change.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_registered-custom-properties.js"]
+skip-if = ["!fission"]
+
+["browser_rules_search-filter-computed-list_01.js"]
+
+["browser_rules_search-filter-computed-list_02.js"]
+
+["browser_rules_search-filter-computed-list_03.js"]
+
+["browser_rules_search-filter-computed-list_04.js"]
+
+["browser_rules_search-filter-computed-list_expander.js"]
+
+["browser_rules_search-filter-media-queries-layers.js"]
+
+["browser_rules_search-filter-overridden-property.js"]
+
+["browser_rules_search-filter_01.js"]
+
+["browser_rules_search-filter_02.js"]
+
+["browser_rules_search-filter_03.js"]
+
+["browser_rules_search-filter_04.js"]
+
+["browser_rules_search-filter_05.js"]
+
+["browser_rules_search-filter_06.js"]
+
+["browser_rules_search-filter_07.js"]
+
+["browser_rules_search-filter_08.js"]
+
+["browser_rules_search-filter_09.js"]
+
+["browser_rules_search-filter_10.js"]
+
+["browser_rules_search-filter_context-menu.js"]
+
+["browser_rules_search-filter_escape-keypress.js"]
+
+["browser_rules_select-and-copy-styles.js"]
+
+["browser_rules_selector-highlighter-iframe-picker.js"]
+
+["browser_rules_selector-highlighter-nested-rules.js"]
+
+["browser_rules_selector-highlighter-on-navigate.js"]
+
+["browser_rules_selector-highlighter_01.js"]
+
+["browser_rules_selector-highlighter_02.js"]
+
+["browser_rules_selector-highlighter_03.js"]
+
+["browser_rules_selector-highlighter_04.js"]
+
+["browser_rules_selector-highlighter_05.js"]
+
+["browser_rules_selector-highlighter_order.js"]
+
+["browser_rules_selector_highlight.js"]
+
+["browser_rules_selector_warnings.js"]
+
+["browser_rules_shadowdom_slot_rules.js"]
+
+["browser_rules_shapes-toggle_01.js"]
+skip-if = ["a11y_checks"] # Bugs 1849028 and 1858041 for causing intermittent a11y_checks results
+
+["browser_rules_shapes-toggle_02.js"]
+
+["browser_rules_shapes-toggle_03.js"]
+
+["browser_rules_shapes-toggle_04.js"]
+
+["browser_rules_shapes-toggle_05.js"]
+
+["browser_rules_shapes-toggle_06.js"]
+skip-if = ["a11y_checks"] # Bug 1858041 and 1849028 intermittent a11y_checks results (fails on Try, passes on Autoland)
+
+["browser_rules_shapes-toggle_07.js"]
+fail-if = ["a11y_checks"] # bug 1687723 ruleview-shapeswatch is not accessible
+
+["browser_rules_shapes-toggle_basic-shapes-default.js"]
+skip-if = ["a11y_checks"] # Bug 1858037 to investigate intermittent a11y_checks results (fails on Autoland, passes on Try)
+
+["browser_rules_shorthand-overridden-lists.js"]
+
+["browser_rules_shorthand-overridden-lists_01.js"]
+
+["browser_rules_strict-search-filter-computed-list_01.js"]
+
+["browser_rules_strict-search-filter_01.js"]
+
+["browser_rules_strict-search-filter_02.js"]
+
+["browser_rules_strict-search-filter_03.js"]
+
+["browser_rules_style-editor-link.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_rules_update_mask_image_cors.js"]
+
+["browser_rules_url-click-opens-new-tab.js"]
+
+["browser_rules_urls-clickable.js"]
+
+["browser_rules_user-agent-styles-uneditable.js"]
+
+["browser_rules_user-agent-styles.js"]
+
+["browser_rules_user-property-reset.js"]
+skip-if = ["os == 'win' && debug"] # bug 1758768, frequent leaks on win debug
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js b/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js
new file mode 100644
index 0000000000..d71af090cf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that adding properties to rules work and reselecting the element still
+// show them.
+
+const TEST_URI = URL_ROOT + "doc_content_stylesheet.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  info("Setting a font-weight property on all rules");
+  await setPropertyOnAllRules(view, inspector);
+
+  info("Reselecting the element");
+  await selectNode("body", inspector);
+  await selectNode("#target", inspector);
+
+  checkPropertyOnAllRules(view);
+});
+
+async function setPropertyOnAllRules(view, inspector) {
+  // Set the inline style rule first independently because it needs to wait for specific
+  // events and the DOM mutation that it causes refreshes the rules view, so we need to
+  // get the list of rules again later.
+  info("Adding font-weight:bold in the inline style rule");
+  const inlineStyleRuleEditor = view._elementStyle.rules[0].editor;
+
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewRefreshed = view.once("ruleview-refreshed");
+
+  inlineStyleRuleEditor.addProperty("font-weight", "bold", "", true);
+
+  await Promise.all([onMutation, onRuleViewRefreshed]);
+
+  // Now set the other rules after having retrieved the list.
+  const allRules = view._elementStyle.rules;
+
+  for (let i = 1; i < allRules.length; i++) {
+    info(`Adding font-weight:bold in rule ${i}`);
+    const rule = allRules[i];
+    const ruleEditor = rule.editor;
+
+    const onRuleViewChanged = view.once("ruleview-changed");
+
+    ruleEditor.addProperty("font-weight", "bold", "", true);
+
+    await onRuleViewChanged;
+  }
+}
+
+function checkPropertyOnAllRules(view) {
+  for (const rule of view._elementStyle.rules) {
+    const lastProperty = rule.textProps[rule.textProps.length - 1];
+
+    is(lastProperty.name, "font-weight", "Last property name is font-weight");
+    is(lastProperty.value, "bold", "Last property value is bold");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
new file mode 100644
index 0000000000..9131da6423
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new property and escapes the new empty property name editor.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const elementRuleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(elementRuleEditor);
+  is(
+    inplaceEditor(elementRuleEditor.newPropSpan),
+    editor,
+    "The new property editor got focused"
+  );
+
+  info("Escape the new property editor");
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onBlur;
+
+  info("Checking the state of cancelling a new property name editor");
+  is(
+    elementRuleEditor.rule.textProps.length,
+    0,
+    "Should have cancelled creating a new text property."
+  );
+  ok(
+    !elementRuleEditor.propertyList.hasChildNodes(),
+    "Should not have any properties."
+  );
+
+  is(
+    view.styleDocument.activeElement,
+    view.styleDocument.body,
+    "Correct element has focus"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
new file mode 100644
index 0000000000..e47023e8f3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new property and escapes the new empty property value editor.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Test creating a new property and escaping");
+  await addProperty(view, 1, "color", "red", {
+    commitValueWith: "VK_ESCAPE",
+    blurNewProperty: false,
+  });
+
+  is(
+    view.styleDocument.activeElement,
+    view.styleDocument.body,
+    "Correct element has focus"
+  );
+
+  const elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  is(
+    elementRuleEditor.rule.textProps.length,
+    1,
+    "Removed the new text property."
+  );
+  is(
+    elementRuleEditor.propertyList.children.length,
+    1,
+    "Removed the property editor."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
new file mode 100644
index 0000000000..ebaa27ae4c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new property and escapes the property name editor with a
+// value.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      background-color: blue;
+    }
+  </style>
+  <div>Test node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  // Add a property to the element's style declaration, add some text,
+  // then press escape.
+
+  const elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusNewRuleViewProperty(elementRuleEditor);
+
+  is(
+    inplaceEditor(elementRuleEditor.newPropSpan),
+    editor,
+    "Next focused editor should be the new property editor."
+  );
+
+  EventUtils.sendString("background", view.styleWindow);
+
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await onBlur;
+
+  is(
+    elementRuleEditor.rule.textProps.length,
+    1,
+    "Should have canceled creating a new text property."
+  );
+  is(
+    view.styleDocument.activeElement,
+    view.styleDocument.body,
+    "Correct element has focus"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-commented.js b/devtools/client/inspector/rules/test/browser_rules_add-property-commented.js
new file mode 100644
index 0000000000..eebade7d70
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-commented.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that commented properties can be added and are disabled.
+
+const TEST_URI = "<div id='testid'></div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testCreateNewSetOfCommentedAndUncommentedProperties(view);
+});
+
+async function testCreateNewSetOfCommentedAndUncommentedProperties(view) {
+  info("Test creating a new set of commented and uncommented properties");
+
+  info("Focusing a new property name in the rule-view");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusEditableField(view, ruleEditor.closeBrace);
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    editor,
+    "The new property editor has focus"
+  );
+
+  info(
+    "Entering a commented property/value pair into the property name editor"
+  );
+  const input = editor.input;
+  input.value = `color: blue;
+                 /* background-color: yellow; */
+                 width: 200px;
+                 height: 100px;
+                 /* padding-bottom: 1px; */`;
+
+  info("Pressing return to commit and focus the new value field");
+  const onModifications = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onModifications;
+
+  const textProps = ruleEditor.rule.textProps;
+  ok(textProps[0].enabled, "The 'color' property is enabled.");
+  ok(!textProps[1].enabled, "The 'background-color' property is disabled.");
+  ok(textProps[2].enabled, "The 'width' property is enabled.");
+  ok(textProps[3].enabled, "The 'height' property is enabled.");
+  ok(!textProps[4].enabled, "The 'padding-bottom' property is disabled.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-invalid-identifier.js b/devtools/client/inspector/rules/test/browser_rules_add-property-invalid-identifier.js
new file mode 100644
index 0000000000..e4a4b0fba1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-invalid-identifier.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding properties that are invalid identifiers.
+
+const TEST_URI = "<div id='testid'>Styled Node</div>";
+const TEST_DATA = [
+  { name: "1", value: "100" },
+  { name: "-1", value: "100" },
+  { name: "1a", value: "100" },
+  { name: "-11a", value: "100" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  for (const { name, value } of TEST_DATA) {
+    info(`Test creating a new property ${name}: ${value}`);
+    const declaration = await addProperty(view, 0, name, value);
+
+    is(declaration.name, name, "Property name should have been changed.");
+    is(declaration.value, value, "Property value should have been changed.");
+    is(
+      declaration.editor.isValid(),
+      false,
+      "The declaration should be invalid."
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js b/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
new file mode 100644
index 0000000000..f286d6f427
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
@@ -0,0 +1,24 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests editing SVG styles using the rules view.
+
+var TEST_URL = "chrome://devtools/skin/images/alert.svg";
+var TEST_SELECTOR = "path";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, view } = await openRuleView();
+  await selectNode(TEST_SELECTOR, inspector);
+
+  info("Test creating a new property");
+  await addProperty(view, 0, "fill", "red");
+
+  is(
+    await getComputedStyleProperty(TEST_SELECTOR, null, "fill"),
+    "rgb(255, 0, 0)",
+    "The fill was changed to red"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property_01.js b/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
new file mode 100644
index 0000000000..34c6a2066d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding an invalid property.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Test creating a new property");
+  const textProp = await addProperty(view, 0, "background-color", "#XYZ");
+
+  is(textProp.value, "#XYZ", "Text prop should have been changed.");
+  is(textProp.overridden, true, "Property should be overridden");
+  is(textProp.editor.isValid(), false, "#XYZ should not be a valid entry");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property_02.js b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
new file mode 100644
index 0000000000..fbe38c92ef
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding a valid property to a CSS rule, and navigating through the fields
+// by pressing ENTER.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      color: blue;
+    }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Focus the new property name field");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+  const input = editor.input;
+
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    editor,
+    "Next focused editor should be the new property editor."
+  );
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  // Try clicking on the editor's input again, shouldn't cause trouble
+  // (see bug 761665).
+  EventUtils.synthesizeMouse(input, 1, 1, {}, view.styleWindow);
+  input.select();
+
+  info("Entering the property name");
+  editor.input.value = "background-color";
+
+  info("Pressing RETURN and waiting for the value field focus");
+  const onNameAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onNameAdded;
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+
+  is(
+    ruleEditor.rule.textProps.length,
+    2,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    2,
+    "Should have created a property editor."
+  );
+  const textProp = ruleEditor.rule.textProps[1];
+  is(
+    editor,
+    inplaceEditor(textProp.editor.valueSpan),
+    "Should be editing the value span now."
+  );
+
+  info("Entering the property value");
+  const onValueAdded = view.once("ruleview-changed");
+  editor.input.value = "purple";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onValueAdded;
+
+  is(textProp.value, "purple", "Text prop should have been changed.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-and-property.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-property.js
new file mode 100644
index 0000000000..ddb99464e8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-property.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new rule and a new property in this rule.
+
+add_task(async function () {
+  await addTab(
+    "data:text/html;charset=utf-8,<div id='testid'>Styled Node</div>"
+  );
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info("Adding a new rule for this node and blurring the new selector field");
+  await addNewRuleAndDismissEditor(inspector, view, "#testid", 1);
+
+  info("Adding a new property for this rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  ruleEditor.addProperty("font-weight", "bold", "", true);
+  await onRuleViewChanged;
+
+  const textProps = ruleEditor.rule.textProps;
+  const prop = textProps[textProps.length - 1];
+  is(prop.name, "font-weight", "The last property name is font-weight");
+  is(prop.value, "bold", "The last property value is bold");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-and-remove-style-node.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-remove-style-node.js
new file mode 100644
index 0000000000..1505f70c32
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-remove-style-node.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that bug 1736412 is fixed
+// We press "add new rule", then we remove the style node
+// We then try to press "add new rule again"
+
+const TEST_URI = '<div id="testid">Test Node</div>';
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await addNewRule(inspector, view);
+  await testNewRule(view, 1);
+  await testRemoveStyleNode();
+  await addNewRule(inspector, view);
+  await testNewRule(view, 1);
+});
+
+function testNewRule(view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = ruleEditor.selectorText.ownerDocument.activeElement;
+  is(editor.value, "#testid", "Selector editor value is as expected");
+  info("Escaping from the selector field the change");
+  EventUtils.synthesizeKey("KEY_Escape");
+}
+
+async function testRemoveStyleNode() {
+  info("Removing the style node from the dom");
+  const nbStyleSheets = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      content.document.styleSheets[0].ownerNode.remove();
+      return content.document.styleSheets.length;
+    }
+  );
+  is(nbStyleSheets, 0, "Style node has been removed");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-button-state.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-button-state.js
new file mode 100644
index 0000000000..578f50c5a8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-button-state.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests if the `Add rule` button disables itself properly for non-element nodes
+// and anonymous element.
+
+const TEST_URI = `
+  <style type="text/css">
+    #pseudo::before {
+      content: "before";
+    }
+  </style>
+  <div id="pseudo"></div>
+  <div id="testid">Test Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await testDisabledButton(inspector, view);
+});
+
+async function testDisabledButton(inspector, view) {
+  const node = "#testid";
+
+  info("Selecting a real element");
+  await selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+
+  info("Select a null element");
+  await view.selectElement(null);
+  ok(view.addRuleButton.disabled, "Add rule button should be disabled");
+
+  info("Selecting a real element");
+  await selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+
+  info("Selecting a pseudo element");
+  const pseudo = await getNodeFront("#pseudo", inspector);
+  const children = await inspector.walker.children(pseudo);
+  const before = children.nodes[0];
+  await selectNode(before, inspector);
+  ok(view.addRuleButton.disabled, "Add rule button should be disabled");
+
+  info("Selecting a real element");
+  await selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js
new file mode 100644
index 0000000000..85d91a621d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-Security-Policy" content="style-src 'none'">
+  </head>
+  <body>
+    <div id="testid"></div>
+  </body>
+</html>
+`;
+
+// Tests adding a new rule works on a page with CSP style-src none.
+add_task(async function () {
+  await addTab(`data:text/html;charset=utf-8,${encodeURIComponent(TEST_URI)}`);
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info("Adding a new rule for this node and blurring the new selector field");
+  await addNewRuleAndDismissEditor(inspector, view, "#testid", 1);
+
+  info("Adding a new property for this rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  ruleEditor.addProperty("color", "red", "", true);
+  await onRuleViewChanged;
+
+  const textProps = ruleEditor.rule.textProps;
+  const prop = textProps[textProps.length - 1];
+  is(prop.name, "color", "The last property name is color");
+  is(prop.value, "red", "The last property value is red");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-edit-selector.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-edit-selector.js
new file mode 100644
index 0000000000..c5323983fc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-edit-selector.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the behaviour of adding a new rule to the rule view and editing
+// its selector.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      text-align: center;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span>This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await addNewRule(inspector, view);
+  await testEditSelector(view, "span");
+
+  info("Selecting the modified element with the new rule");
+  await selectNode("span", inspector);
+  await checkModifiedElement(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector field");
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = idRuleEditor.selectorText.ownerDocument.activeElement;
+
+  info("Entering a new selector name and committing");
+  editor.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-iframes.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-iframes.js
new file mode 100644
index 0000000000..5a46978bb7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-iframes.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a rule on elements nested in iframes.
+
+const TEST_URI = `<div>outer</div>
+  <iframe id="frame1" src="data:text/html;charset=utf-8,<div>inner1</div>">
+  </iframe>
+  <iframe id="frame2" src="data:text/html;charset=utf-8,<div>inner2</div>">
+  </iframe>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+  await addNewRuleAndDismissEditor(inspector, view, "div", 1);
+  await addNewProperty(view, 1, "color", "red");
+
+  await selectNodeInFrames(["#frame1", "div"], inspector);
+  await addNewRuleAndDismissEditor(inspector, view, "div", 1);
+  await addNewProperty(view, 1, "color", "blue");
+
+  await selectNodeInFrames(["#frame2", "div"], inspector);
+  await addNewRuleAndDismissEditor(inspector, view, "div", 1);
+  await addNewProperty(view, 1, "color", "green");
+});
+
+/**
+ * Add a new property in the rule at the provided index in the rule view.
+ *
+ * @param {RuleView} view
+ * @param {Number} index
+ *        The index of the rule in which we should add a new property.
+ * @param {String} name
+ *        The name of the new property.
+ * @param {String} value
+ *        The value of the new property.
+ */
+async function addNewProperty(view, index, name, value) {
+  const idRuleEditor = getRuleViewRuleEditor(view, index);
+  info(`Adding new property "${name}: ${value};"`);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  idRuleEditor.addProperty(name, value, "", true);
+  await onRuleViewChanged;
+
+  const textProps = idRuleEditor.rule.textProps;
+  const lastProperty = textProps[textProps.length - 1];
+  is(lastProperty.name, name, "Last property has the expected name");
+  is(lastProperty.value, value, "Last property has the expected value");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
new file mode 100644
index 0000000000..ef3a958875
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the behaviour of adding a new rule using the add rule button
+// on namespaced elements.
+
+const XHTML = `
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg">
+    <body>
+      <svg:svg width="100" height="100">
+        <svg:clipPath>
+          <svg:rect x="0" y="0" width="10" height="5"></svg:rect>
+        </svg:clipPath>
+        <svg:circle cx="0" cy="0" r="5"></svg:circle>
+      </svg:svg>
+    </body>
+  </html>
+`;
+const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
+
+const TEST_DATA = [
+  { node: "clipPath", expected: "clipPath" },
+  { node: "rect", expected: "rect" },
+  { node: "circle", expected: "circle" },
+];
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  for (const data of TEST_DATA) {
+    const { node, expected } = data;
+    await selectNode(node, inspector);
+    await addNewRuleAndDismissEditor(inspector, view, expected, 1);
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-pseudo-class.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-pseudo-class.js
new file mode 100644
index 0000000000..2963da9034
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-pseudo-class.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a rule with pseudo class locks on.
+
+const TEST_URI = "<p id='element'>Test element</p>";
+
+const EXPECTED_SELECTOR = "#element";
+const TEST_DATA = [
+  [],
+  [":hover"],
+  [":hover", ":active"],
+  [":hover", ":active", ":focus"],
+  [":active"],
+  [":active", ":focus"],
+  [":focus"],
+  [":focus-within"],
+  [":hover", ":focus-within"],
+  [":hover", ":active", ":focus-within"],
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#element", inspector);
+
+  for (const data of TEST_DATA) {
+    await runTestData(inspector, view, data);
+  }
+});
+
+async function runTestData(inspector, view, pseudoClasses) {
+  await setPseudoLocks(inspector, view, pseudoClasses);
+
+  const expected = EXPECTED_SELECTOR + pseudoClasses.join("");
+  await addNewRuleAndDismissEditor(inspector, view, expected, 1);
+
+  await resetPseudoLocks(inspector, view);
+}
+
+async function setPseudoLocks(inspector, view, pseudoClasses) {
+  if (!pseudoClasses.length) {
+    return;
+  }
+
+  for (const pseudoClass of pseudoClasses) {
+    const checkbox = getPseudoClassCheckbox(view, pseudoClass);
+    if (checkbox) {
+      checkbox.click();
+    }
+    await inspector.once("rule-view-refreshed");
+  }
+}
+
+async function resetPseudoLocks(inspector, view) {
+  for (const checkbox of view.pseudoClassCheckboxes) {
+    if (checkbox.checked) {
+      checkbox.click();
+      await inspector.once("rule-view-refreshed");
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-then-property-edit-selector.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-then-property-edit-selector.js
new file mode 100644
index 0000000000..e9647f8351
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-then-property-edit-selector.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the behaviour of adding a new rule to the rule view, adding a new
+// property and editing the selector.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      text-align: center;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span>This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await addNewRuleAndDismissEditor(inspector, view, "#testid", 1);
+
+  info("Adding a new property to the new rule");
+  await testAddingProperty(view, 1);
+
+  info("Editing existing selector field");
+  await testEditSelector(view, "span");
+
+  info("Selecting the modified element");
+  await selectNode("span", inspector);
+
+  info("Check new rule and property exist in the modified element");
+  await checkModifiedElement(view, "span", 1);
+});
+
+function testAddingProperty(view, index) {
+  const ruleEditor = getRuleViewRuleEditor(view, index);
+  ruleEditor.addProperty("font-weight", "bold", "", true);
+  const textProps = ruleEditor.rule.textProps;
+  const lastRule = textProps[textProps.length - 1];
+  is(lastRule.name, "font-weight", "Last rule name is font-weight");
+  is(lastRule.value, "bold", "Last rule value is bold");
+}
+
+async function testEditSelector(view, name) {
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name: " + name);
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+}
+
+function checkModifiedElement(view, name, index) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+
+  const idRuleEditor = getRuleViewRuleEditor(view, index);
+  const textProps = idRuleEditor.rule.textProps;
+  const lastRule = textProps[textProps.length - 1];
+  is(lastRule.name, "font-weight", "Last rule name is font-weight");
+  is(lastRule.value, "bold", "Last rule value is bold");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-with-menu.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-with-menu.js
new file mode 100644
index 0000000000..63aa0e4247
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-with-menu.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the a new CSS rule can be added using the context menu.
+
+const TEST_URI = '<div id="testid">Test Node</div>';
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await addNewRuleFromContextMenu(inspector, view);
+  await testNewRule(view);
+});
+
+async function addNewRuleFromContextMenu(inspector, view) {
+  info("Waiting for context menu to be shown");
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, view.element);
+  const menuitemAddRule = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.addNewRule")
+  );
+
+  ok(menuitemAddRule.visible, "Add rule is visible");
+
+  info("Adding the new rule and expecting a new-rule-added event");
+  const onNewRuleAdded = view.once("new-rule-added");
+  menuitemAddRule.click();
+  await onNewRuleAdded;
+}
+
+function testNewRule(view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = ruleEditor.selectorText.ownerDocument.activeElement;
+  is(editor.value, "#testid", "Selector editor value is as expected");
+
+  info("Escaping from the selector field the change");
+  EventUtils.synthesizeKey("KEY_Escape");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule.js b/devtools/client/inspector/rules/test/browser_rules_add-rule.js
new file mode 100644
index 0000000000..19315e33e2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new rule using the add rule button.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <span class="testclass2">This is a span</span>
+  <span class="class1 class2">Multiple classes</span>
+  <span class="class3      class4">Multiple classes</span>
+  <p>Empty<p>
+  <h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1>
+  <h2 id="asd@@@a!!2a">Invalid characters in id</h2>
+  <svg viewBox="0 0 10 10">
+    <circle cx="5" cy="5" r="5" fill="blue"></circle>
+  </svg>
+`;
+
+const TEST_DATA = [
+  { node: "#testid", expected: "#testid" },
+  { node: ".testclass2", expected: ".testclass2" },
+  { node: ".class1.class2", expected: ".class1.class2" },
+  { node: ".class3.class4", expected: ".class3.class4" },
+  { node: "p", expected: "p" },
+  { node: "h1", expected: ".asd\\@\\@\\@\\@a\\!\\!\\!\\!\\:\\:\\:\\@asd" },
+  { node: "h2", expected: "#asd\\@\\@\\@a\\!\\!2a" },
+  { node: "circle", expected: "circle" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const data of TEST_DATA) {
+    const { node, expected } = data;
+    await selectNode(node, inspector);
+    await addNewRuleAndDismissEditor(inspector, view, expected, 1);
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_authored.js b/devtools/client/inspector/rules/test/browser_rules_authored.js
new file mode 100644
index 0000000000..406e03d69c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_authored.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for as-authored styles.
+
+async function createTestContent(style) {
+  const html = `<style type="text/css">
+      ${style}
+      </style>
+      <div id="testid" class="testclass">Styled Node</div>`;
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(html));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  return view;
+}
+
+add_task(async function () {
+  const view = await createTestContent(
+    "#testid {" +
+      // Invalid property.
+      "  something: random;" +
+      // Invalid value.
+      "  color: orang;" +
+      // Override.
+      "  background-color: blue;" +
+      "  background-color: #f06;" +
+      "} "
+  );
+
+  const elementStyle = view._elementStyle;
+
+  const expected = [
+    { name: "something", overridden: true, isNameValid: false, isValid: false },
+    { name: "color", overridden: true, isNameValid: true, isValid: false },
+    {
+      name: "background-color",
+      overridden: true,
+      isNameValid: true,
+      isValid: true,
+    },
+    {
+      name: "background-color",
+      overridden: false,
+      isNameValid: true,
+      isValid: true,
+    },
+  ];
+
+  const rule = elementStyle.rules[1];
+
+  for (let i = 0; i < expected.length; ++i) {
+    const prop = rule.textProps[i];
+    is(prop.name, expected[i].name, "Check name for prop " + i);
+    is(
+      prop.overridden,
+      expected[i].overridden,
+      "Check overridden for prop " + i
+    );
+    is(
+      prop.isNameValid(),
+      expected[i].isNameValid,
+      "Check if property name is valid for prop " + i
+    );
+    is(
+      prop.isValid(),
+      expected[i].isValid,
+      "Check if whole declaration is valid for prop " + i
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_authored_color.js b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
new file mode 100644
index 0000000000..ea163d509d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for as-authored color styles.
+
+/**
+ * Array of test color objects:
+ *   {String} name: name of the used & expected color format.
+ *   {String} id: id of the element that will be created to test this color.
+ *   {String} color: initial value of the color property applied to the test element.
+ *   {String} result: expected value of the color property after edition.
+ */
+const colors = [
+  { name: "hex", id: "test1", color: "#f06", result: "#0f0" },
+  {
+    name: "rgb",
+    id: "test2",
+    color: "rgb(0,128,250)",
+    result: "rgb(0, 255, 0)",
+  },
+  // Test case preservation.
+  { name: "hex", id: "test3", color: "#F06", result: "#0F0" },
+];
+
+add_task(async function () {
+  Services.prefs.setCharPref("devtools.defaultColorUnit", "authored");
+
+  let html = "";
+  for (const { color, id } of colors) {
+    html += `<div id="${id}" style="color: ${color}">Styled Node</div>`;
+  }
+
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(html)
+  );
+
+  const { inspector, view } = await openRuleView();
+
+  for (const color of colors) {
+    const selector = "#" + color.id;
+    await selectNode(selector, inspector);
+
+    const swatch = getRuleViewProperty(
+      view,
+      "element",
+      "color"
+    ).valueSpan.querySelector(".ruleview-colorswatch");
+    const cPicker = view.tooltips.getTooltip("colorPicker");
+    const onColorPickerReady = cPicker.once("ready");
+    swatch.click();
+    await onColorPickerReady;
+
+    await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
+      selector,
+      name: "color",
+      value: "rgb(0, 255, 0)",
+    });
+
+    const spectrum = cPicker.spectrum;
+    const onHidden = cPicker.tooltip.once("hidden");
+    // Validating the color change ends up updating the rule view twice
+    const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+    focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+    await onHidden;
+    await onRuleViewChanged;
+
+    is(
+      getRuleViewPropertyValue(view, "element", "color"),
+      color.result,
+      "changing the color preserved the unit for " + color.name
+    );
+  }
+
+  await gDevTools.closeToolboxForTab(tab);
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_authored_override.js b/devtools/client/inspector/rules/test/browser_rules_authored_override.js
new file mode 100644
index 0000000000..d8067d5dc2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_override.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for as-authored styles.
+
+async function createTestContent(style) {
+  const html = `<style type="text/css">
+      ${style}
+      </style>
+      <div id="testid" class="testclass">Styled Node</div>`;
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(html));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  return view;
+}
+
+add_task(async function () {
+  const gradientText1 = "(orange, blue);";
+  const gradientText2 = "(pink, teal);";
+
+  const view = await createTestContent(
+    "#testid {" +
+      "  background-image: linear-gradient" +
+      gradientText1 +
+      "  background-image: -ms-linear-gradient" +
+      gradientText2 +
+      "  background-image: linear-gradient" +
+      gradientText2 +
+      "} "
+  );
+
+  const elementStyle = view._elementStyle;
+  const rule = elementStyle.rules[1];
+
+  // Initially the last property should be active.
+  for (let i = 0; i < 3; ++i) {
+    const prop = rule.textProps[i];
+    is(prop.name, "background-image", "check the property name");
+    is(prop.overridden, i !== 2, "check overridden for " + i);
+  }
+
+  await togglePropStatus(view, rule.textProps[2]);
+
+  // Now the first property should be active.
+  for (let i = 0; i < 3; ++i) {
+    const prop = rule.textProps[i];
+    is(
+      prop.overridden || !prop.enabled,
+      i !== 0,
+      "post-change check overridden for " + i
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_blob_stylesheet.js b/devtools/client/inspector/rules/test/browser_rules_blob_stylesheet.js
new file mode 100644
index 0000000000..4042695eaa
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_blob_stylesheet.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct for stylesheet generated
+// with createObjectURL(cssBlob)
+const TEST_URL = URL_ROOT + "doc_blob_stylesheet.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+  is(
+    view.element.querySelectorAll("#noResults").length,
+    0,
+    "The no-results element is not displayed"
+  );
+
+  is(
+    view.element.querySelectorAll(".ruleview-rule").length,
+    2,
+    "There are 2 displayed rules"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
new file mode 100644
index 0000000000..dfba3a63bf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that classes can be added in the class panel
+
+// This array contains the list of test cases. Each test case contains these properties:
+// - {String} textEntered The text to be entered in the field
+// - {Boolean} expectNoMutation Set to true if we shouldn't wait for a DOM mutation
+// - {Array} expectedClasses The expected list of classes to be applied to the DOM and to
+//   be found in the class panel
+const TEST_ARRAY = [
+  {
+    textEntered: "",
+    expectNoMutation: true,
+    expectedClasses: [],
+  },
+  {
+    textEntered: "class",
+    expectedClasses: ["class"],
+  },
+  {
+    textEntered: "class",
+    expectNoMutation: true,
+    expectedClasses: ["class"],
+  },
+  {
+    textEntered: "a a a a a a a a a a",
+    expectedClasses: ["class", "a"],
+  },
+  {
+    textEntered: "class2 class3",
+    expectedClasses: ["class", "a", "class2", "class3"],
+  },
+  {
+    textEntered: "                       ",
+    expectNoMutation: true,
+    expectedClasses: ["class", "a", "class2", "class3"],
+  },
+  {
+    textEntered: "          class4",
+    expectedClasses: ["class", "a", "class2", "class3", "class4"],
+  },
+  {
+    textEntered: "    \t      class5      \t \t\t             ",
+    expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,");
+  const { inspector, view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  const textField = inspector.panelDoc.querySelector(
+    "#ruleview-class-panel .add-class"
+  );
+  ok(textField, "The input field exists in the class panel");
+
+  textField.focus();
+
+  let onMutation;
+  for (const { textEntered, expectNoMutation, expectedClasses } of TEST_ARRAY) {
+    if (!expectNoMutation) {
+      onMutation = inspector.once("markupmutation");
+    }
+
+    info(`Enter the test string in the field: ${textEntered}`);
+    for (const key of textEntered.split("")) {
+      const onPreviewMutation = inspector.once("markupmutation");
+      EventUtils.synthesizeKey(key, {}, view.styleWindow);
+      await onPreviewMutation;
+    }
+
+    info("Submit the change and wait for the textfield to become empty");
+    const onEmpty = waitForFieldToBeEmpty(textField);
+    EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+    if (!expectNoMutation) {
+      info("Wait for the DOM to change");
+      await onMutation;
+    }
+
+    await onEmpty;
+
+    info("Check the state of the DOM node");
+    const className = await getContentPageElementAttribute("body", "class");
+    const expectedClassName = expectedClasses.length
+      ? expectedClasses.join(" ")
+      : null;
+    is(className, expectedClassName, "The DOM node has the right className");
+
+    info("Check the content of the class panel");
+    checkClassPanelContent(
+      view,
+      expectedClasses.map(name => {
+        return { name, state: true };
+      })
+    );
+  }
+});
+
+function waitForFieldToBeEmpty(textField) {
+  return waitForSuccess(() => !textField.value);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_autocomplete.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_autocomplete.js
new file mode 100644
index 0000000000..bc0d0a1c2e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_autocomplete.js
@@ -0,0 +1,277 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the autocomplete for the class panel input behaves as expected. The test also
+// checks that we're using the cache to retrieve the data when we can do so, and that the
+// cache gets cleared, and we're getting data from the server, when there's mutation on
+// the page.
+
+const TEST_URI = `${URL_ROOT}doc_class_panel_autocomplete.html`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  const { addEl: textInput } = view.classListPreviewer;
+  await selectNode("#auto-div-id-3", inspector);
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  textInput.focus();
+
+  info("Type a letter and check that the popup has the expected items");
+  const allClasses = [
+    "auto-body-class-1",
+    "auto-body-class-2",
+    "auto-bold",
+    "auto-cssom-primary-color",
+    "auto-div-class-1",
+    "auto-div-class-2",
+    "auto-html-class-1",
+    "auto-html-class-2",
+    "auto-inline-class-1",
+    "auto-inline-class-2",
+    "auto-inline-class-3",
+    "auto-inline-class-4",
+    "auto-inline-class-5",
+    "auto-inline-nested-class-1",
+    "auto-inline-nested-class-2",
+    "auto-inline-nested-class-3",
+    "auto-inline-nested-class-4",
+    "auto-inline-nested-class-5",
+    "auto-inline-nested-class-6",
+    "auto-stylesheet-class-1",
+    "auto-stylesheet-class-2",
+    "auto-stylesheet-class-3",
+    "auto-stylesheet-class-4",
+    "auto-stylesheet-class-5",
+    "auto-stylesheet-nested-class-1",
+    "auto-stylesheet-nested-class-2",
+    "auto-stylesheet-nested-class-3",
+    "auto-stylesheet-nested-class-4",
+    "auto-stylesheet-nested-class-5",
+    "auto-stylesheet-nested-class-6",
+  ];
+
+  const { autocompletePopup } = view.classListPreviewer;
+  let onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("a", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-class-1", "#auto-div-id-3");
+  await onPopupOpened;
+  await checkAutocompleteItems(
+    autocompletePopup,
+    allClasses,
+    "The autocomplete popup has all the classes used in the DOM and in stylesheets"
+  );
+
+  info(
+    "Test that typing more letters filters the autocomplete popup and uses the cache mechanism"
+  );
+  EventUtils.sendString("uto-b", view.styleWindow);
+  await waitForClassApplied("auto-body-class-1", "#auto-div-id-3");
+
+  await checkAutocompleteItems(
+    autocompletePopup,
+    allClasses.filter(cls => cls.startsWith("auto-b")),
+    "The autocomplete popup was filtered with the content of the input"
+  );
+  ok(true, "The results were retrieved from the cache mechanism");
+
+  info("Test that autocomplete shows up-to-date results");
+  // Modify the content page and assert that the new class is displayed in the
+  // autocomplete if the user types a new letter.
+  const onNewMutation = inspector.inspectorFront.walker.once("new-mutations");
+  await ContentTask.spawn(gBrowser.selectedBrowser, null, async function () {
+    content.document.body.classList.add("auto-body-added-by-script");
+  });
+  await onNewMutation;
+  await waitForClassApplied("auto-body-added-by-script", "body");
+
+  // close & reopen the autocomplete so it picks up the added to another element while autocomplete was opened
+  let onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onPopupClosed;
+
+  // input is now auto-body
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.sendString("ody", view.styleWindow);
+  await onPopupOpened;
+  await checkAutocompleteItems(
+    autocompletePopup,
+    [
+      ...allClasses.filter(cls => cls.startsWith("auto-body")),
+      "auto-body-added-by-script",
+    ].sort(),
+    "The autocomplete popup was filtered with the content of the input"
+  );
+
+  info(
+    "Test that typing a letter that won't match any of the item closes the popup"
+  );
+  // input is now auto-bodyy
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("y", {}, view.styleWindow);
+  await waitForClassApplied("auto-bodyy", "#auto-div-id-3");
+  await onPopupClosed;
+  ok(true, "The popup was closed as expected");
+  await checkAutocompleteItems(autocompletePopup, [], "The popup was cleared");
+
+  info("Clear the input and try to autocomplete again");
+  textInput.select();
+  EventUtils.synthesizeKey("KEY_Backspace", {}, view.styleWindow);
+  // Wait a bit so the debounced function can be executed
+  await wait(200);
+
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("a", {}, view.styleWindow);
+  await onPopupOpened;
+
+  await checkAutocompleteItems(
+    autocompletePopup,
+    [...allClasses, "auto-body-added-by-script"].sort(),
+    "The autocomplete popup was updated with the new class added to the DOM"
+  );
+
+  info("Test keyboard shortcut when the popup is displayed");
+  // Escape to hide
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onPopupClosed;
+  ok(true, "The popup was closed when hitting escape");
+
+  // Ctrl + space to show again
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, view.styleWindow);
+  await onPopupOpened;
+  ok(true, "Popup was opened again with Ctrl+Space");
+  await checkAutocompleteItems(
+    autocompletePopup,
+    [...allClasses, "auto-body-added-by-script"].sort()
+  );
+
+  // Arrow left to hide
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_ArrowLeft", {}, view.styleWindow);
+  await onPopupClosed;
+  ok(true, "The popup was closed as when hitting ArrowLeft");
+
+  // Arrow right and Ctrl + space to show again, and Arrow Right to accept
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, view.styleWindow);
+  await onPopupOpened;
+
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-added-by-script", "#auto-div-id-3");
+  await onPopupClosed;
+  is(
+    textInput.value,
+    "auto-body-added-by-script",
+    "ArrowRight puts the selected item in the input and closes the popup"
+  );
+
+  // Backspace to show the list again
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("KEY_Backspace", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-added-by-script", "#auto-div-id-3");
+  await onPopupOpened;
+  is(
+    textInput.value,
+    "auto-body-added-by-scrip",
+    "ArrowRight puts the selected item in the input and closes the popup"
+  );
+  await checkAutocompleteItems(
+    autocompletePopup,
+    ["auto-body-added-by-script"],
+    "The autocomplete does show the matching items after hitting backspace"
+  );
+
+  // Enter to accept
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Enter", {}, view.styleWindow);
+  await waitForClassRemoved("auto-body-added-by-scrip");
+  await onPopupClosed;
+  is(
+    textInput.value,
+    "auto-body-added-by-script",
+    "Enter puts the selected item in the input and closes the popup"
+  );
+
+  // Backspace to show again
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("KEY_Backspace", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-added-by-script", "#auto-div-id-3");
+  await onPopupOpened;
+  is(
+    textInput.value,
+    "auto-body-added-by-scrip",
+    "ArrowRight puts the selected item in the input and closes the popup"
+  );
+  await checkAutocompleteItems(
+    autocompletePopup,
+    ["auto-body-added-by-script"],
+    "The autocomplete does show the matching items after hitting backspace"
+  );
+
+  // Tab to accept
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Tab", {}, view.styleWindow);
+  await onPopupClosed;
+  is(
+    textInput.value,
+    "auto-body-added-by-script",
+    "Tab puts the selected item in the input and closes the popup"
+  );
+  await waitForClassRemoved("auto-body-added-by-scrip");
+});
+
+async function checkAutocompleteItems(
+  autocompletePopup,
+  expectedItems,
+  assertionMessage
+) {
+  await waitForSuccess(
+    () =>
+      getAutocompleteItems(autocompletePopup).length === expectedItems.length
+  );
+  const items = getAutocompleteItems(autocompletePopup);
+  Assert.deepEqual(items, expectedItems, assertionMessage);
+}
+
+function getAutocompleteItems(autocompletePopup) {
+  return Array.from(autocompletePopup._panel.querySelectorAll("li")).map(
+    el => el.textContent
+  );
+}
+
+async function waitForClassApplied(cls, selector) {
+  info("Wait for class to be applied: " + cls);
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [cls, selector],
+    async (_cls, _selector) => {
+      return ContentTaskUtils.waitForCondition(() =>
+        content.document.querySelector(_selector).classList.contains(_cls)
+      );
+    }
+  );
+  // Wait for debounced functions to be executed
+  await wait(200);
+}
+
+async function waitForClassRemoved(cls) {
+  info("Wait for class to be removed: " + cls);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [cls], async _cls => {
+    return ContentTaskUtils.waitForCondition(
+      () =>
+        !content.document
+          .querySelector("#auto-div-id-3")
+          .classList.contains(_cls)
+    );
+  });
+  // Wait for debounced functions to be executed
+  await wait(200);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
new file mode 100644
index 0000000000..52d490b1d0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
@@ -0,0 +1,124 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that class panel shows the right content when selecting various nodes.
+
+// This array contains the list of test cases. Each test case contains these properties:
+// - {String} inputClassName The className on a node
+// - {Array} expectedClasses The expected list of classes in the class panel
+const TEST_ARRAY = [
+  {
+    inputClassName: "",
+    expectedClasses: [],
+  },
+  {
+    inputClassName: "         a a a a           a a a      a   a",
+    expectedClasses: ["a"],
+  },
+  {
+    inputClassName: "c1 c2 c3 c4 c5",
+    expectedClasses: ["c1", "c2", "c3", "c4", "c5"],
+  },
+  {
+    inputClassName: "a a b b c c a a b b c c",
+    expectedClasses: ["a", "b", "c"],
+  },
+  {
+    inputClassName:
+      "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
+    expectedClasses: [
+      "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
+    ],
+  },
+  {
+    inputClassName:
+      "c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 " +
+      "c10 c11 c12 c13 c14 c15 c16 c17 c18 c19 " +
+      "c20 c21 c22 c23 c24 c25 c26 c27 c28 c29 " +
+      "c30 c31 c32 c33 c34 c35 c36 c37 c38 c39 " +
+      "c40 c41 c42 c43 c44 c45 c46 c47 c48 c49",
+    expectedClasses: [
+      "c0",
+      "c1",
+      "c2",
+      "c3",
+      "c4",
+      "c5",
+      "c6",
+      "c7",
+      "c8",
+      "c9",
+      "c10",
+      "c11",
+      "c12",
+      "c13",
+      "c14",
+      "c15",
+      "c16",
+      "c17",
+      "c18",
+      "c19",
+      "c20",
+      "c21",
+      "c22",
+      "c23",
+      "c24",
+      "c25",
+      "c26",
+      "c27",
+      "c28",
+      "c29",
+      "c30",
+      "c31",
+      "c32",
+      "c33",
+      "c34",
+      "c35",
+      "c36",
+      "c37",
+      "c38",
+      "c39",
+      "c40",
+      "c41",
+      "c42",
+      "c43",
+      "c44",
+      "c45",
+      "c46",
+      "c47",
+      "c48",
+      "c49",
+    ],
+  },
+  {
+    inputClassName: "  \n  \n class1  \t   class2 \t\tclass3\t",
+    expectedClasses: ["class1", "class2", "class3"],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<div>");
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  for (const { inputClassName, expectedClasses } of TEST_ARRAY) {
+    info(`Apply the '${inputClassName}' className to the node`);
+    const onMutation = inspector.once("markupmutation");
+    await setContentPageElementAttribute("div", "class", inputClassName);
+    await onMutation;
+
+    info("Check the content of the class panel");
+    checkClassPanelContent(
+      view,
+      expectedClasses.map(name => {
+        return { name, state: true };
+      })
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
new file mode 100644
index 0000000000..f43a5fd487
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that classes can be toggled in the class panel
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<body class='class1 class2'>");
+  const { view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  info(
+    "Click on class1 and check that the checkbox is unchecked and the DOM is updated"
+  );
+  await toggleClassPanelCheckBox(view, "class1");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: true },
+  ]);
+  let newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "class2", "The class attribute has been updated in the DOM");
+
+  info("Click on class2 and check the same thing");
+  await toggleClassPanelCheckBox(view, "class2");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: false },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "", "The class attribute has been updated in the DOM");
+
+  info("Click on class2 and checks that the class is added again");
+  await toggleClassPanelCheckBox(view, "class2");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: true },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "class2", "The class attribute has been updated in the DOM");
+
+  info("And finally, click on class1 again and checks it is added again");
+  await toggleClassPanelCheckBox(view, "class1");
+  checkClassPanelContent(view, [
+    { name: "class1", state: true },
+    { name: "class2", state: true },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(
+    newClassName,
+    "class1 class2",
+    "The class attribute has been updated in the DOM"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_invalid_nodes.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_invalid_nodes.js
new file mode 100644
index 0000000000..24a0dfbcfc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_invalid_nodes.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the class panel shows a message when invalid nodes are selected.
+// text nodes, pseudo-elements, DOCTYPE, comment nodes.
+
+add_task(async function () {
+  await addTab(`data:text/html;charset=utf-8,
+    <body>
+    <style>div::after {content: "test";}</style>
+    <!-- comment -->
+    Some text
+    <div></div>
+    </body>`);
+
+  info("Open the class panel");
+  const { inspector, view } = await openRuleView();
+  view.showClassPanel();
+
+  info("Selecting the DOCTYPE node");
+  const { nodes } = await inspector.walker.children(inspector.walker.rootNode);
+  await selectNode(nodes[0], inspector);
+  checkMessageIsDisplayed(view);
+
+  info("Selecting the comment node");
+  const styleNode = await getNodeFront("style", inspector);
+  const commentNode = await inspector.walker.nextSibling(styleNode);
+  await selectNode(commentNode, inspector);
+  checkMessageIsDisplayed(view);
+
+  info("Selecting the text node");
+  const textNode = await inspector.walker.nextSibling(commentNode);
+  await selectNode(textNode, inspector);
+  checkMessageIsDisplayed(view);
+
+  info("Selecting the ::after pseudo-element");
+  const divNode = await getNodeFront("div", inspector);
+  const pseudoElement = (await inspector.walker.children(divNode)).nodes[0];
+  await selectNode(pseudoElement, inspector);
+  checkMessageIsDisplayed(view);
+});
+
+function checkMessageIsDisplayed(view) {
+  ok(
+    view.classListPreviewer.classesEl.querySelector(".no-classes"),
+    "The message is displayed"
+  );
+  checkClassPanelContent(view, []);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
new file mode 100644
index 0000000000..4d3340b2ea
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that class panel updates on markup mutations
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<div class='c1 c2'>");
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  info("Trigger an unrelated mutation on the div (id attribute change)");
+  let onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("div", "id", "test-id");
+  await onMutation;
+
+  info("Check that the panel still contains the right classes");
+  checkClassPanelContent(view, [
+    { name: "c1", state: true },
+    { name: "c2", state: true },
+  ]);
+
+  info("Trigger a class mutation on a different, unknown, node");
+  onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("body", "class", "test-class");
+  await onMutation;
+
+  info("Check that the panel still contains the right classes");
+  checkClassPanelContent(view, [
+    { name: "c1", state: true },
+    { name: "c2", state: true },
+  ]);
+
+  info("Trigger a class mutation on the current node");
+  onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("div", "class", "c3 c4");
+  await onMutation;
+
+  info("Check that the panel now contains the new classes");
+  checkClassPanelContent(view, [
+    { name: "c3", state: true },
+    { name: "c4", state: true },
+  ]);
+
+  info("Change the state of one of the new classes");
+  await toggleClassPanelCheckBox(view, "c4");
+  checkClassPanelContent(view, [
+    { name: "c3", state: true },
+    { name: "c4", state: false },
+  ]);
+
+  info("Select another node");
+  await selectNode("body", inspector);
+
+  info("Trigger a class mutation on the div");
+  onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("div", "class", "c5 c6 c7");
+  await onMutation;
+
+  info(
+    "Go back to the previous node and check the content of the class panel." +
+      "Even if hidden, it should have refreshed when we changed the DOM"
+  );
+  await selectNode("div", inspector);
+  checkClassPanelContent(view, [
+    { name: "c5", state: true },
+    { name: "c6", state: true },
+    { name: "c7", state: true },
+  ]);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_state_preserved.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_state_preserved.js
new file mode 100644
index 0000000000..c4c20e3976
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_state_preserved.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that class states are preserved when switching to other nodes
+
+add_task(async function () {
+  await addTab(
+    "data:text/html;charset=utf-8,<body class='class1 class2 class3'><div>"
+  );
+  const { inspector, view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  info("With the <body> selected, uncheck class2 and class3 in the panel");
+  await toggleClassPanelCheckBox(view, "class2");
+  await toggleClassPanelCheckBox(view, "class3");
+
+  info("Now select the <div> so the panel gets refreshed");
+  await selectNode("div", inspector);
+  is(
+    view.classPanel.querySelectorAll("[type=checkbox]").length,
+    0,
+    "The panel content doesn't contain any checkboxes anymore"
+  );
+
+  info("Select the <body> again");
+  await selectNode("body", inspector);
+  const checkBoxes = view.classPanel.querySelectorAll("[type=checkbox]");
+
+  is(checkBoxes[0].dataset.name, "class1", "The first checkbox is class1");
+  is(checkBoxes[0].checked, true, "The first checkbox is still checked");
+
+  is(checkBoxes[1].dataset.name, "class2", "The second checkbox is class2");
+  is(checkBoxes[1].checked, false, "The second checkbox is still unchecked");
+
+  is(checkBoxes[2].dataset.name, "class3", "The third checkbox is class3");
+  is(checkBoxes[2].checked, false, "The third checkbox is still unchecked");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_toggle.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_toggle.js
new file mode 100644
index 0000000000..44e372acee
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_toggle.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the class panel can be toggled.
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<body class='class1 class2'>");
+  const { inspector, view } = await openRuleView();
+
+  info("Check that the toggle button exists");
+  const button = inspector.panelDoc.querySelector("#class-panel-toggle");
+  ok(button, "The class panel toggle button exists");
+  is(view.classToggle, button, "The rule-view refers to the right element");
+
+  info("Check that the panel exists and is hidden by default");
+  const panel = inspector.panelDoc.querySelector("#ruleview-class-panel");
+  ok(panel, "The class panel exists");
+  is(view.classPanel, panel, "The rule-view refers to the right element");
+  ok(panel.hasAttribute("hidden"), "The panel is hidden");
+  is(
+    button.getAttribute("aria-pressed"),
+    "false",
+    "The button is not pressed by default"
+  );
+  is(
+    inspector.panelDoc.getElementById(button.getAttribute("aria-controls")),
+    panel,
+    "The class panel toggle button has valid aria-controls attribute"
+  );
+
+  info("Click on the button to show the panel");
+  button.click();
+  ok(!panel.hasAttribute("hidden"), "The panel is shown");
+  is(button.getAttribute("aria-pressed"), "true", "The button is pressed");
+
+  info("Click again to hide the panel");
+  button.click();
+  ok(panel.hasAttribute("hidden"), "The panel is hidden");
+  is(button.getAttribute("aria-pressed"), "false", "The button is not pressed");
+
+  info("Open the pseudo-class panel first, then the class panel");
+  view.pseudoClassToggle.click();
+  ok(
+    !view.pseudoClassPanel.hasAttribute("hidden"),
+    "The pseudo-class panel is shown"
+  );
+  button.click();
+  ok(!panel.hasAttribute("hidden"), "The panel is shown");
+  ok(
+    view.pseudoClassPanel.hasAttribute("hidden"),
+    "The pseudo-class panel is hidden"
+  );
+
+  info("Click again on the pseudo-class button");
+  view.pseudoClassToggle.click();
+  ok(panel.hasAttribute("hidden"), "The panel is hidden");
+  ok(
+    !view.pseudoClassPanel.hasAttribute("hidden"),
+    "The pseudo-class panel is shown"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorUnit.js b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
new file mode 100644
index 0000000000..d7d92f8a8f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that color selection respects the user pref.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      color: blue;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  const TESTS = [
+    { name: "hex", result: "#0f0" },
+    { name: "rgb", result: "rgb(0, 255, 0)" },
+  ];
+
+  for (const { name, result } of TESTS) {
+    info("starting test for " + name);
+    Services.prefs.setCharPref("devtools.defaultColorUnit", name);
+
+    const tab = await addTab(
+      "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+    );
+    const { inspector, view } = await openRuleView();
+
+    await selectNode("#testid", inspector);
+    await basicTest(view, name, result);
+
+    await gDevTools.closeToolboxForTab(tab);
+    gBrowser.removeCurrentTab();
+  }
+});
+
+async function basicTest(view, name, result) {
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const swatch = getRuleViewProperty(
+    view,
+    "#testid",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
+    selector: "#testid",
+    name: "color",
+    value: "rgb(0, 255, 0)",
+  });
+
+  const spectrum = cPicker.spectrum;
+  const onHidden = cPicker.tooltip.once("hidden");
+  // Validating the color change ends up updating the rule view twice
+  const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onRuleViewChanged;
+
+  is(
+    getRuleViewPropertyValue(view, "#testid", "color"),
+    result,
+    "changing the color used the " + name + " unit"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
new file mode 100644
index 0000000000..959059d746
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
@@ -0,0 +1,159 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation.
+const TEST_URI = URL_ROOT_SSL + "doc_media_queries.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view, toolbox } = await openRuleView();
+
+  info("Check that the color scheme simulation buttons exist");
+  const lightButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-light-toggle"
+  );
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(lightButton, "The light color scheme simulation button exists");
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  is(
+    isButtonPressed(lightButton),
+    false,
+    "At first, the light button isn't checked"
+  );
+  is(
+    isButtonPressed(darkButton),
+    false,
+    "At first, the dark button isn't checked"
+  );
+
+  // Define functions checking if the rule view display the expected property.
+  const divHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
+  const divHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
+  const iframeElHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background:cyan");
+  const iframeHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background:darkred");
+
+  info(
+    "Select the div that will change according to conditions in prefered color scheme"
+  );
+  await selectNode("div", inspector);
+  ok(
+    await divHasDefaultStyling(),
+    "The rule view shows the expected initial rule"
+  );
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(() => isButtonPressed(darkButton));
+  ok(true, "The dark button is checked");
+  is(
+    isButtonPressed(lightButton),
+    false,
+    "the light button state didn't change when enabling dark mode"
+  );
+
+  await waitFor(() => divHasDarkSchemeStyling());
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark) {",
+    "The rules view was updated with the rule from the dark scheme media query"
+  );
+
+  info("Select the node from the remote iframe");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+
+  ok(
+    await iframeHasDarkSchemeStyling(),
+    "The simulation is also applied on the remote iframe"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark) {",
+    "The prefers-color-scheme media query is displayed"
+  );
+
+  info("Select the top level div again");
+  await selectNode("div", inspector);
+
+  info("Click the light button simulate light mode");
+  lightButton.click();
+  await waitFor(() => isButtonPressed(lightButton));
+  ok(true, "The button has the expected light state");
+  // TODO: Actually simulate light mode. This might require to set the OS-level preference
+  // to dark as the default state might consume the rule from the like scheme media query.
+
+  is(
+    isButtonPressed(darkButton),
+    false,
+    "the dark button was unchecked when enabling light mode"
+  );
+
+  await waitFor(() => divHasDefaultStyling());
+
+  info("Click the light button to disable simulation");
+  lightButton.click();
+  await waitFor(() => !isButtonPressed(lightButton));
+  ok(true, "The button isn't checked anymore");
+  await waitFor(() => divHasDefaultStyling());
+  ok(true, "We're not simulating color-scheme anymore");
+
+  info("Select the node from the remote iframe again");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+  await waitFor(() => iframeElHasDefaultStyling());
+  ok(true, "The simulation stopped on the remote iframe as well");
+
+  info("Check that reloading keep the selected simulation");
+  await selectNode("div", inspector);
+  darkButton.click();
+  await waitFor(() => divHasDarkSchemeStyling());
+
+  await navigateTo(TEST_URI);
+  await selectNode("div", inspector);
+  await waitFor(() => view.element.children[1]);
+  ok(
+    await divHasDarkSchemeStyling(),
+    "dark mode is still simulated after reloading the page"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark) {",
+    "The prefers-color-scheme media query is displayed on the rule after reloading"
+  );
+
+  await selectNodeInFrames(["iframe", "html"], inspector);
+  await waitFor(() => iframeHasDarkSchemeStyling());
+  ok(true, "simulation is still applied to the iframe after reloading");
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark) {",
+    "The prefers-color-scheme media query is still displayed on the rule for the element in iframe after reloading"
+  );
+
+  info("Check that closing DevTools reset the simulation");
+  await toolbox.destroy();
+  const matchesPrefersDarkColorSchemeMedia = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const { matches } = content.matchMedia("(prefers-color-scheme: dark)");
+      return matches;
+    }
+  );
+  is(
+    matchesPrefersDarkColorSchemeMedia,
+    false,
+    "color scheme simulation is disabled after closing DevTools"
+  );
+});
+
+function isButtonPressed(el) {
+  return el.getAttribute("aria-pressed") === "true";
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_bfcache.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_bfcache.js
new file mode 100644
index 0000000000..c4995a3cb3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_bfcache.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation.
+const TEST_URI = URL_ROOT_SSL + "doc_media_queries.html";
+
+add_task(async function testBfCacheNavigationWithDevTools() {
+  await addTab(TEST_URI);
+  const { inspector, toolbox } = await openRuleView();
+
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(async () => isSimulationEnabled());
+  is(await isSimulationEnabled(), true, "color scheme simulation is enabled");
+
+  info("Navigate to a different URL and disable the color simulation");
+  await navigateTo(TEST_URI + "?someparameter");
+  darkButton.click();
+  await waitFor(async () => !(await isSimulationEnabled()));
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  info(
+    "Perform a bfcache navigation and check that the simulation is still disabled"
+  );
+  const waitForDevToolsReload = await watchForDevToolsReload(
+    gBrowser.selectedBrowser
+  );
+  gBrowser.goBack();
+  await waitForDevToolsReload();
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  await toolbox.destroy();
+});
+
+add_task(async function testBfCacheNavigationAfterClosingDevTools() {
+  await addTab(TEST_URI);
+  const { inspector, toolbox } = await openRuleView();
+
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(async () => isSimulationEnabled());
+  is(await isSimulationEnabled(), true, "color scheme simulation is enabled");
+
+  // Wait for the iframe target to be processed before destroying the toolbox,
+  // to avoid unhandled promise rejections.
+  // The iframe URL starts with https://example.org/document-builder.sjs
+  let onIframeProcessed;
+
+  // Do not wait for the additional target in the noeft-nofis flavor.
+  const isNoEFTNoFis = !isFissionEnabled() && !isEveryFrameTargetEnabled();
+  if (!isNoEFTNoFis) {
+    const iframeURL = "https://example.org/document-builder.sjs";
+    onIframeProcessed = waitForTargetProcessed(toolbox.commands, targetFront =>
+      targetFront.url.startsWith(iframeURL)
+    );
+  }
+
+  info("Navigate to a different URL");
+  await navigateTo(TEST_URI + "?someparameter");
+
+  info("Wait for the iframe target to be processed by target-command");
+  await onIframeProcessed;
+
+  info("Close DevTools to disable the simulation");
+  await toolbox.destroy();
+  await waitFor(async () => !(await isSimulationEnabled()));
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  info(
+    "Perform a bfcache navigation and check that the simulation is still disabled"
+  );
+  const awaitPageShow = BrowserTestUtils.waitForContentEvent(
+    gBrowser.selectedBrowser,
+    "pageshow"
+  );
+  gBrowser.goBack();
+  await awaitPageShow;
+
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+});
+
+function isSimulationEnabled() {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const { matches } = content.matchMedia("(prefers-color-scheme: dark)");
+    return matches;
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js
new file mode 100644
index 0000000000..ba8163f1c0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// This test page should follow the overall color scheme.
+// Default colors / background colors should change depending on the scheme.
+const TEST_URI = `https://example.com/document-builder.sjs?html=
+  <!DOCTYPE html>
+    <html lang=en>
+      <meta charset=utf-8>
+      <meta name=color-scheme content="dark light">
+      Hello!
+`;
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector } = await openRuleView();
+
+  // Retrieve light and dark scheme buttons.
+  const lightButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-light-toggle"
+  );
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+
+  // Read the color scheme to know if we should click on the light or dark button
+  // to trigger a change.
+  info("Retrieve the default color scheme");
+  let isDarkScheme = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      return content.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+  );
+
+  // Clicks on the simulation button which triggers a color-scheme change.
+  // If current scheme is light, click on dark and vice-versa.
+  function toggleScheme() {
+    info(`Switch color scheme to ${isDarkScheme ? "light" : "dark"} mode`);
+    isDarkScheme ? lightButton.click() : darkButton.click();
+    isDarkScheme = !isDarkScheme;
+  }
+
+  info("Retrieve the initial (text) color of the page");
+  const initialColor = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      return content.getComputedStyle(content.document.body).color;
+    }
+  );
+
+  toggleScheme();
+
+  info("Wait until the color of the page changes");
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [initialColor],
+    _initialColor => {
+      return ContentTaskUtils.waitForCondition(() => {
+        const newColor = content.getComputedStyle(content.document.body).color;
+        return newColor !== _initialColor;
+      });
+    }
+  );
+
+  toggleScheme();
+
+  info("Wait until the color of the page goes back to the initial value");
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [initialColor],
+    _initialColor => {
+      return ContentTaskUtils.waitForCondition(() => {
+        const newColor = content.getComputedStyle(content.document.body).color;
+        return newColor === _initialColor;
+      });
+    }
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js
new file mode 100644
index 0000000000..4fb699aeb9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation when RDM is toggled
+const TEST_URI = URL_ROOT + "doc_media_queries.html";
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Check that the color scheme simulation buttons exist");
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+
+  // Define functions checking if the rule view display the expected property.
+  const divHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
+  const divHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
+
+  info(
+    "Select the div that will change according to conditions in prefered color scheme"
+  );
+  await selectNode("div", inspector);
+  ok(
+    await divHasDefaultStyling(),
+    "The rule view shows the expected initial rule"
+  );
+
+  info("Open responsive design mode");
+  await openRDM(tab);
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(() => isButtonPressed(darkButton));
+  ok(true, "The dark button is checked");
+
+  await waitFor(() => divHasDarkSchemeStyling());
+  ok(
+    true,
+    "The rules view was updated with the rule view from the dark scheme media query"
+  );
+
+  info("Close responsive design mode");
+  await closeRDM(tab);
+
+  info("Wait for a bit before checking dark mode is still enabled");
+  await wait(1000);
+  ok(isButtonPressed(darkButton), "button is still checked");
+  ok(
+    await divHasDarkSchemeStyling(),
+    "dark mode color-scheme simulation is still enabled"
+  );
+
+  info("Click the button to disable simulation");
+  darkButton.click();
+  await waitFor(() => !isButtonPressed(darkButton));
+  ok(true, "The button isn't checked anymore");
+  await waitFor(() => divHasDefaultStyling());
+  ok(true, "We're not simulating color-scheme anymore");
+
+  info("Check that enabling dark-mode simulation before RDM does work as well");
+  darkButton.click();
+  await waitFor(() => isButtonPressed(darkButton));
+  await waitFor(() => divHasDarkSchemeStyling());
+  ok(
+    true,
+    "The rules view was updated with the rule view from the dark scheme media query"
+  );
+
+  info("Open responsive design mode again");
+  await openRDM(tab);
+
+  info("Click the button to disable simulation while RDM is still opened");
+  darkButton.click();
+  await waitFor(() => !isButtonPressed(darkButton));
+  ok(true, "The button isn't checked anymore");
+  await waitFor(() => divHasDefaultStyling());
+  ok(true, "We're not simulating color-scheme anymore");
+
+  info("Close responsive design mode");
+  await closeRDM(tab);
+});
+
+function isButtonPressed(el) {
+  return el.getAttribute("aria-pressed") === "true";
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
new file mode 100644
index 0000000000..3a2c553f13
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that after a color change, the image preview tooltip in the same
+// property is displayed and positioned correctly.
+// See bug 979292
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: url("chrome://branding/content/icon64.png"), linear-gradient(white, #F06 400px);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  // Bug 1767679 - Use { wait: true } to avoid frequent intermittents on linux.
+  const property = await getRuleViewProperty(view, "body", "background", {
+    wait: true,
+  });
+
+  const value = property.valueSpan;
+  const swatch = value.querySelectorAll(".ruleview-colorswatch")[0];
+  const url = value.querySelector(".theme-link");
+  await testImageTooltipAfterColorChange(swatch, url, view);
+});
+
+async function testImageTooltipAfterColorChange(swatch, url, ruleView) {
+  info("First, verify that the image preview tooltip works");
+  let previewTooltip = await assertShowPreviewTooltip(ruleView, url);
+  await assertTooltipHiddenOnMouseOut(previewTooltip, url);
+
+  info("Open the color picker tooltip and change the color");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
+    selector: "body",
+    name: "background-image",
+    value:
+      'url("chrome://branding/content/icon64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)',
+  });
+
+  const spectrum = picker.spectrum;
+  const onHidden = picker.tooltip.once("hidden");
+
+  // On "RETURN", `ruleview-changed` is triggered when the SwatchBasedEditorTooltip calls
+  // its `commit` method, and then another event is emitted when the editor is hidden.
+  const onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onModifications;
+
+  info("Verify again that the image preview tooltip works");
+  // After a color change, the property is re-populated, we need to get the new
+  // dom node
+  url = getRuleViewProperty(
+    ruleView,
+    "body",
+    "background"
+  ).valueSpan.querySelector(".theme-link");
+  previewTooltip = await assertShowPreviewTooltip(ruleView, url);
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, url);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
new file mode 100644
index 0000000000..3262349274
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that after a color change, opening another tooltip, like the image
+// preview doesn't revert the color change in the rule view.
+// This used to happen when the activeSwatch wasn't reset when the colorpicker
+// would hide.
+// See bug 979292
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red url("chrome://branding/content/icon64.png")
+        no-repeat center center;
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+  await testColorChangeIsntRevertedWhenOtherTooltipIsShown(view);
+});
+
+async function testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
+  let swatch = getRuleViewProperty(
+    ruleView,
+    "body",
+    "background"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  info("Open the color picker tooltip and change the color");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
+    selector: "body",
+    name: "background-color",
+    value: "rgb(0, 0, 0)",
+  });
+
+  const spectrum = picker.spectrum;
+
+  const onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
+  const onHidden = picker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onModifications;
+
+  info("Open the image preview tooltip");
+  const value = getRuleViewProperty(ruleView, "body", "background").valueSpan;
+  const url = value.querySelector(".theme-link");
+  const previewTooltip = await assertShowPreviewTooltip(ruleView, url);
+
+  info("Image tooltip is shown, verify that the swatch is still correct");
+  swatch = value.querySelector(".ruleview-colorswatch");
+  is(swatch.style.backgroundColor, "black", "The swatch's color is correct");
+  is(swatch.nextSibling.textContent, "black", "The color name is correct");
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, url);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js
new file mode 100644
index 0000000000..0a44f4813f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that color pickers appear when clicking or using keyboard on color swatches.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const propertiesToTest = ["color", "background-color", "border"];
+
+  for (const property of propertiesToTest) {
+    info(`Test that the colorpicker appears on swatch click for ${property}`);
+    await testColorPickerAppearsOnColorSwatchActivation(view, property);
+
+    info(
+      `Test that swatch is focusable and colorpicker can be activated with a keyboard for ${property}`
+    );
+    await testColorPickerAppearsOnColorSwatchActivation(view, property, true);
+  }
+});
+
+async function testColorPickerAppearsOnColorSwatchActivation(
+  view,
+  property,
+  withKeyboard = false
+) {
+  const value = getRuleViewProperty(view, "body", property).valueSpan;
+  const swatch = value.querySelector(".ruleview-colorswatch");
+
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const onColorPickerReady = cPicker.once("ready");
+  if (withKeyboard) {
+    // Focus on the property value span
+    const doc = value.ownerDocument;
+    value.focus();
+
+    // Tab to focus on the color swatch
+    EventUtils.sendKey("Tab");
+    is(doc.activeElement, swatch, "Swatch successfully receives focus.");
+
+    // Press enter on the swatch to simulate click and open color picker
+    EventUtils.sendKey("Return");
+  } else {
+    swatch.click();
+  }
+  await onColorPickerReady;
+
+  info("The color picker was displayed");
+  ok(!inplaceEditor(swatch.parentNode), "The inplace editor wasn't displayed");
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
new file mode 100644
index 0000000000..5649d050d2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a color change in the color picker is committed when ENTER is
+// pressed.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "border"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+  await testPressingEnterCommitsChanges(swatch, view);
+});
+
+async function testPressingEnterCommitsChanges(swatch, ruleView) {
+  const cPicker = ruleView.tooltips.getTooltip("colorPicker");
+
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(ruleView, cPicker, [0, 255, 0, 0.5], {
+    selector: "body",
+    name: "border-left-color",
+    value: "rgba(0, 255, 0, 0.5)",
+  });
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated"
+  );
+  is(
+    getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
+    "2em solid rgba(0, 255, 0, 0.5)",
+    "The text of the border css property was updated"
+  );
+
+  const onModified = ruleView.once("ruleview-changed");
+  const spectrum = cPicker.spectrum;
+  const onHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onModified;
+
+  is(
+    await getComputedStyleProperty("body", null, "border-left-color"),
+    "rgba(0, 255, 0, 0.5)",
+    "The element's border was kept after RETURN"
+  );
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was kept after RETURN"
+  );
+  is(
+    getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
+    "2em solid rgba(0, 255, 0, 0.5)",
+    "The text of the border css property was kept after RETURN"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
new file mode 100644
index 0000000000..6bdb9dd9d3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
@@ -0,0 +1,230 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests color pickers displays expected contrast ratio information.
+
+const TEST_URI = `
+  <style type="text/css">
+    :root {
+      --title-color: #000;
+    }
+
+    body {
+      color: #eee;
+      background-color: #eee;
+    }
+
+    h1 {
+      color: var(--title-color);
+    }
+
+    div {
+      color: var(--title-color);
+      /* Try to to have consistent results over different platforms:
+         - using hardstop-ish gradient so the min and max contrast are computed against white and black background
+         - having min-content width will make sure we get the gradient only cover the text, and not the whole screen width
+      */
+      background-image: linear-gradient(to right, black, white);
+      width: min-content;
+      font-size: 100px;
+    }
+
+    section {
+      color: color-mix(in srgb, blue, var(--title-color) 50%);
+    }
+  </style>
+  <h1>Testing the color picker contrast ratio data</h1>
+  <div>————</div>
+  <section>mixed colors</section>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await checkColorPickerConstrastData({
+    view,
+    label: "Displays contrast information on color property",
+    ruleViewPropertyEl: getRuleViewProperty(view, "body", "color"),
+    expectVisibleContrast: true,
+    expectedContrastValueResult: "FAIL",
+    expectedContrastValueTitle:
+      "Does not meet WCAG standards for accessible text. Calculated against background: rgba(238,238,238,1)",
+    expectedContrastValueScore: "1.00",
+  });
+
+  await checkColorPickerConstrastData({
+    view,
+    label: "Does not display contrast information on background-color property",
+    ruleViewPropertyEl: getRuleViewProperty(view, "body", "background-color"),
+    expectVisibleContrast: false,
+  });
+
+  await selectNode("h1", inspector);
+  await checkColorPickerConstrastData({
+    view,
+    label: "Displays contrast information on color from CSS variable",
+    ruleViewPropertyEl: getRuleViewProperty(view, "h1", "color"),
+    expectVisibleContrast: true,
+    expectedContrastValueResult: "AAA",
+    expectedContrastValueTitle:
+      "Meets WCAG AAA standards for accessible text. Calculated against background: rgba(238,238,238,1)",
+    expectedContrastValueScore: "18.10",
+  });
+
+  await selectNode("div", inspector);
+  await checkColorPickerConstrastData({
+    view,
+    label:
+      "Displays range contrast information on color against gradient background",
+    ruleViewPropertyEl: getRuleViewProperty(view, "div", "color"),
+    expectVisibleContrast: true,
+    expectContrastRange: true,
+    expectedMinContrastValueResult: "FAIL",
+    expectedMinContrastValueTitle:
+      "Does not meet WCAG standards for accessible text. Calculated against background: rgba(0,0,0,1)",
+    expectedMinContrastValueScore: "1.00",
+    expectedMaxContrastValueResult: "AAA",
+    expectedMaxContrastValueTitle:
+      "Meets WCAG AAA standards for accessible text. Calculated against background: rgba(255,255,255,1)",
+    expectedMaxContrastValueScore: "19.77",
+  });
+
+  await selectNode("section", inspector);
+  await checkColorPickerConstrastData({
+    view,
+    label:
+      "Does not displays contrast information on color within color-mix function (#1)",
+    ruleViewPropertyEl: getRuleViewProperty(view, "section", "color"),
+    swatchIndex: 0,
+    expectVisibleContrast: false,
+  });
+  await checkColorPickerConstrastData({
+    view,
+    label:
+      "Does not displays contrast information on color within color-mix function (#2)",
+    ruleViewPropertyEl: getRuleViewProperty(view, "section", "color"),
+    swatchIndex: 1,
+    expectVisibleContrast: false,
+  });
+});
+
+async function checkColorPickerConstrastData({
+  view,
+  ruleViewPropertyEl,
+  label,
+  swatchIndex = 0,
+  expectVisibleContrast,
+  expectedContrastValueResult,
+  expectedContrastValueTitle,
+  expectedContrastValueScore,
+  expectContrastRange = false,
+  expectedMinContrastValueResult,
+  expectedMinContrastValueTitle,
+  expectedMinContrastValueScore,
+  expectedMaxContrastValueResult,
+  expectedMaxContrastValueTitle,
+  expectedMaxContrastValueScore,
+}) {
+  info(`Checking color picker: "${label}"`);
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const colorSwatch = ruleViewPropertyEl.valueSpan.querySelectorAll(
+    ".ruleview-colorswatch"
+  )[swatchIndex];
+
+  const onColorPickerReady = cPicker.once("ready");
+  colorSwatch.click();
+  await onColorPickerReady;
+  ok(true, "The color picker was displayed");
+
+  const contrastEl = cPickerPanel.querySelector(".spectrum-color-contrast");
+
+  if (!expectVisibleContrast) {
+    ok(
+      !contrastEl.classList.contains("visible"),
+      "Contrast information is not displayed, as expected"
+    );
+    await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+    return;
+  }
+
+  ok(
+    contrastEl.classList.contains("visible"),
+    "Contrast information is displayed"
+  );
+  is(
+    contrastEl.classList.contains("range"),
+    expectContrastRange,
+    `Contrast information ${
+      expectContrastRange ? "has" : "does not have"
+    } a result range`
+  );
+
+  if (expectContrastRange) {
+    const minContrastValueEl = contrastEl.querySelector(
+      ".contrast-ratio-range .contrast-ratio-min .accessibility-contrast-value"
+    );
+    ok(
+      minContrastValueEl.classList.contains(expectedMinContrastValueResult),
+      `min contrast value has expected "${expectedMinContrastValueResult}" class`
+    );
+    // Scores vary from platform to platform, disable for now.
+    // This should be re-enabled as part of  Bug 1780736
+    // is(
+    //   minContrastValueEl.title,
+    //   expectedMinContrastValueTitle,
+    //   "min contrast value has expected title"
+    // );
+    // is(
+    //   minContrastValueEl.textContent,
+    //   expectedMinContrastValueScore,
+    //   "min contrast value shows expected score"
+    // );
+
+    const maxContrastValueEl = contrastEl.querySelector(
+      ".contrast-ratio-range .contrast-ratio-max .accessibility-contrast-value"
+    );
+    ok(
+      maxContrastValueEl.classList.contains(expectedMaxContrastValueResult),
+      `max contrast value has expected "${expectedMaxContrastValueResult}" class`
+    );
+    // Scores vary from platform to platform, disable for now.
+    // This should be re-enabled as part of  Bug 1780736
+    // is(
+    //   maxContrastValueEl.title,
+    //   expectedMaxContrastValueTitle,
+    //   "max contrast value has expected title"
+    // );
+    // is(
+    //   maxContrastValueEl.textContent,
+    //   expectedMaxContrastValueScore,
+    //   "max contrast value shows expected score"
+    // );
+  } else {
+    const contrastValueEl = contrastEl.querySelector(
+      ".accessibility-contrast-value"
+    );
+    ok(
+      contrastValueEl.classList.contains(expectedContrastValueResult),
+      `contrast value has expected "${expectedContrastValueResult}" class`
+    );
+    is(
+      contrastValueEl.title,
+      expectedContrastValueTitle,
+      "contrast value has expected title"
+    );
+    is(
+      contrastValueEl.textContent,
+      expectedContrastValueScore,
+      "contrast value shows expected score"
+    );
+  }
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
new file mode 100644
index 0000000000..c5eef9d670
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changing a color in a gradient css declaration using the tooltip
+// color picker works.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);
+    }
+  </style>
+  Updating a gradient declaration with the color picker tooltip
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  info("Testing that the colors in gradient properties are parsed correctly");
+  testColorParsing(view);
+
+  info("Testing that changing one of the colors of a gradient property works");
+  await testPickingNewColor(view);
+});
+
+function testColorParsing(view) {
+  const ruleEl = getRuleViewProperty(view, "body", "background-image");
+  ok(ruleEl, "The background-image gradient declaration was found");
+
+  const swatchEls = ruleEl.valueSpan.querySelectorAll(".ruleview-colorswatch");
+  ok(swatchEls, "The color swatch elements were found");
+  is(swatchEls.length, 3, "There are 3 color swatches");
+
+  const colorEls = ruleEl.valueSpan.querySelectorAll(".ruleview-color");
+  ok(colorEls, "The color elements were found");
+  is(colorEls.length, 3, "There are 3 color values");
+
+  const colors = ["#f06", "#333", "#000"];
+  for (let i = 0; i < colors.length; i++) {
+    is(colorEls[i].textContent, colors[i], "The right color value was found");
+  }
+}
+
+async function testPickingNewColor(view) {
+  // Grab the first color swatch and color in the gradient
+  const ruleEl = getRuleViewProperty(view, "body", "background-image");
+  const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
+  const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
+
+  info("Get the color picker tooltip and clicking on the swatch to show it");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  const change = {
+    selector: "body",
+    name: "background-image",
+    value:
+      "linear-gradient(to left, rgb(1, 1, 1) 25%, " +
+      "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)",
+  };
+  await simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change);
+
+  is(
+    swatchEl.style.backgroundColor,
+    "rgb(1, 1, 1)",
+    "The color swatch's background was updated"
+  );
+  is(colorEl.textContent, "#010101", "The color text was updated");
+  is(
+    await getComputedStyleProperty("body", null, "background-image"),
+    "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
+      "rgb(0, 0, 0) 100%)",
+    "The gradient has been updated correctly"
+  );
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js
new file mode 100644
index 0000000000..f8012ab56b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+  <style type="text/css">
+    button {
+      color: tomato;
+      background-color: green;
+    }
+  </style>
+  <!-- The space as text context for the button is mandatory here, so that the
+       firstChild of the button is an whitespace text node -->
+  <button id="button-with-no-quads"> </button>
+`;
+
+/**
+ * Check that we can still open the color picker on elements for which getQuads
+ * returns an empty array, which is used to compute the background-color
+ * contrast.
+ */
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const hasEmptyQuads = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const button = content.document.querySelector("button");
+      const quads = button.firstChild.getBoxQuads({
+        box: "content",
+        relativeTo: content.document,
+        createFramesForSuppressedWhitespace: false,
+      });
+      return quads.length === 0;
+    }
+  );
+  ok(hasEmptyQuads, "The test element has empty quads");
+
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("button", inspector);
+
+  const ruleEl = getRuleViewProperty(view, "button", "color");
+  ok(ruleEl, "The color declaration was found");
+
+  const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
+  const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
+  is(colorEl.textContent, "tomato", "The right color value was found");
+
+  info("Open the color picker");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  info("Check that the background color of the button was correctly detected");
+  const contrastEl = cPicker.tooltip.container.querySelector(
+    ".contrast-value-and-swatch.contrast-ratio-single"
+  );
+  ok(
+    contrastEl.style.cssText.includes(
+      "--accessibility-contrast-bg: rgba(0,128,0,1)"
+    ),
+    "The background color contains the expected value"
+  );
+
+  info("Check that the color picker can be used");
+  await simulateColorPickerChange(view, cPicker, [255, 0, 0, 1], {
+    selector: "button",
+    name: "color",
+    value: "rgb(255, 0, 0)",
+  });
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-element-picker.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-element-picker.js
new file mode 100644
index 0000000000..53442989c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-element-picker.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that on selecting colorpicker eyedropper stops picker
+// if the picker is already selected.
+
+const TEST_URI = `<style>body{background:red}</style>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { toolbox, view } = await openRuleView();
+  const pickerStopped = toolbox.nodePicker.once("picker-stopped");
+
+  await startPicker(toolbox);
+
+  info("Get the background property from the rule-view");
+  const property = getRuleViewProperty(view, "body", "background");
+  const swatch = property.valueSpan.querySelector(".ruleview-colorswatch");
+  ok(swatch, "Color swatch is displayed for the background property");
+
+  info("Open the eyedropper from the colorpicker tooltip");
+  await openEyedropper(view, swatch);
+
+  info("Waiting for the picker-stopped event to be fired");
+  await pickerStopped;
+
+  ok(true, "picker-stopped event fired after eyedropper was clicked");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js
new file mode 100644
index 0000000000..e1d290c005
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the color picker tooltip hides when an image tooltip appears.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  const bgImageSpan = getRuleViewProperty(
+    view,
+    "body",
+    "background-image"
+  ).valueSpan;
+  const uriSpan = bgImageSpan.querySelector(".theme-link");
+
+  const colorPicker = view.tooltips.getTooltip("colorPicker");
+  info("Showing the color picker tooltip by clicking on the color swatch");
+  const onColorPickerReady = colorPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  info("Now showing the image preview tooltip to hide the color picker");
+  const onHidden = colorPicker.tooltip.once("hidden");
+  // Hiding the color picker refreshes the value.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
+  await onHidden;
+  await onRuleViewChanged;
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
+
+  ok(true, "The color picker closed when the image preview tooltip appeared");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
new file mode 100644
index 0000000000..f641745fd2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
@@ -0,0 +1,110 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the color in the colorpicker tooltip can be changed several times.
+// without causing error in various cases:
+// - simple single-color property (color)
+// - color and image property (background-image)
+// - overridden property
+// See bug 979292 and bug 980225
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: green;
+      background: red url("chrome://branding/content/icon64.png")
+        no-repeat center center;
+    }
+    p {
+      color: blue;
+    }
+  </style>
+  <p>Testing the color picker tooltip!</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await testSimpleMultipleColorChanges(inspector, view);
+  await testComplexMultipleColorChanges(inspector, view);
+});
+
+async function testSimpleMultipleColorChanges(inspector, ruleView) {
+  await selectNode("p", inspector);
+
+  info("Getting the <p> tag's color property");
+  const swatch = getRuleViewProperty(
+    ruleView,
+    "p",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  info("Opening the color picker");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  info("Changing the color several times");
+  const colors = [
+    { rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)" },
+    { rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)" },
+    { rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)" },
+  ];
+  for (const { rgba, computed } of colors) {
+    await simulateColorPickerChange(ruleView, picker, rgba, {
+      selector: "p",
+      name: "color",
+      value: computed,
+    });
+  }
+
+  is(
+    await getComputedStyleProperty("p", null, "color"),
+    "rgb(200, 200, 200)",
+    "The color of the P tag is correct"
+  );
+}
+
+async function testComplexMultipleColorChanges(inspector, ruleView) {
+  await selectNode("body", inspector);
+
+  info("Getting the <body> tag's color property");
+  const swatch = getRuleViewProperty(
+    ruleView,
+    "body",
+    "background"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  info("Opening the color picker");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  info("Changing the color several times");
+  const colors = [
+    { rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)" },
+    { rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)" },
+    { rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)" },
+  ];
+  for (const { rgba, computed } of colors) {
+    await simulateColorPickerChange(ruleView, picker, rgba, {
+      selector: "body",
+      name: "background-color",
+      value: computed,
+    });
+  }
+
+  info("Closing the color picker");
+  await hideTooltipAndWaitForRuleViewChanged(picker, ruleView);
+
+  is(
+    await getComputedStyleProperty("p", null, "color"),
+    "rgb(200, 200, 200)",
+    "The color of the P tag is still correct"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
new file mode 100644
index 0000000000..f992e93094
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that color pickers stops following the pointer if the pointer is
+// released outside the tooltip frame (bug 1160720).
+
+const TEST_URI = "<body style='color: red'>Test page for bug 1160720";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const cSwatch = getRuleViewProperty(
+    view,
+    "element",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  const picker = await openColorPickerForSwatch(cSwatch, view);
+  const spectrum = picker.spectrum;
+  const change = spectrum.once("changed");
+
+  info("Pressing mouse down over color picker.");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeMouseAtCenter(
+    spectrum.dragger,
+    {
+      type: "mousedown",
+    },
+    spectrum.dragger.ownerDocument.defaultView
+  );
+  await onRuleViewChanged;
+
+  const value = await change;
+  info(`Color changed to ${value} on mousedown.`);
+
+  // If the mousemove below fails to detect that the button is no longer pressed
+  // the spectrum will update and emit changed event synchronously after calling
+  // synthesizeMouse so this handler is executed before the test ends.
+  spectrum.once("changed", newValue => {
+    is(newValue, value, "Value changed on mousemove without a button pressed.");
+  });
+
+  // Releasing the button pressed by mousedown above on top of a different frame
+  // does not make sense in this test as EventUtils doesn't preserve the context
+  // i.e. the buttons that were pressed down between events.
+
+  info("Moving mouse over color picker without any buttons pressed.");
+
+  EventUtils.synthesizeMouse(
+    spectrum.dragger,
+    10,
+    10,
+    {
+      // -1 = no buttons are pressed down
+      button: -1,
+      type: "mousemove",
+    },
+    spectrum.dragger.ownerDocument.defaultView
+  );
+});
+
+async function openColorPickerForSwatch(swatch, view) {
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  ok(true, "The color picker was shown on click of the color swatch");
+
+  return cPicker;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
new file mode 100644
index 0000000000..47a39d0518
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a color change in the color picker is reverted when ESC is
+// pressed.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-color: #EDEDED;
+    }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+  await testPressingEscapeRevertsChanges(view);
+});
+
+async function testPressingEscapeRevertsChanges(view) {
+  const { swatch, propEditor, cPicker } = await openColorPickerAndSelectColor(
+    view,
+    1,
+    0,
+    [0, 0, 0, 1],
+    {
+      selector: "body",
+      name: "background-color",
+      value: "rgb(0, 0, 0)",
+    }
+  );
+
+  is(
+    swatch.style.backgroundColor,
+    "rgb(0, 0, 0)",
+    "The color swatch's background was updated"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "#000",
+    "The text of the background-color css property was updated"
+  );
+
+  const spectrum = cPicker.spectrum;
+
+  info("Pressing ESCAPE to close the tooltip");
+  const onHidden = cPicker.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  EventUtils.sendKey("ESCAPE", spectrum.element.ownerDocument.defaultView);
+  await onHidden;
+  await onModifications;
+
+  await waitForComputedStyleProperty(
+    "body",
+    null,
+    "background-color",
+    "rgb(237, 237, 237)"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "#EDEDED",
+    "Got expected property value."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-swatch-displayed.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-swatch-displayed.js
new file mode 100644
index 0000000000..56e15ba8cf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-swatch-displayed.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that color swatches are displayed next to colors in the rule-view.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+    * {
+      color: blue;
+      background: linear-gradient(
+          to right,
+          #f00,
+          #f008,
+          #00ff00,
+          #00ff0080,
+          rgb(31,170,217),
+          rgba(31,170,217,.5),
+          hsl(5, 5%, 5%),
+          hsla(5, 5%, 5%, 0.25),
+          #F00,
+          #F008,
+          #00FF00,
+          #00FF0080,
+          RGB(31,170,217),
+          RGBA(31,170,217,.5),
+          HSL(5, 5%, 5%),
+          HSLA(5, 5%, 5%, 0.25)
+        ),
+        radial-gradient(
+          red,
+          blue
+        ),
+        conic-gradient(
+          from 90deg at 0 0,
+          lemonchiffon,
+          peachpuff
+        ),
+        repeating-linear-gradient(blue, pink),
+        repeating-radial-gradient(limegreen, bisque),
+        repeating-conic-gradient(chocolate, olive);
+      box-shadow: inset 0 0 2px 20px red, inset 0 0 2px 40px blue;
+      filter: drop-shadow(2px 2px 2px salmon);
+      text-shadow: 2px 2px color-mix(
+        in srgb,
+        color-mix(in srgb, tomato 30%, #FA8072),
+        hsla(5, 5%, 5%, 0.25) 5%
+      );
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+// Tests that properties in the rule-view contain color swatches.
+// Each entry in the test array should contain:
+// {
+//   selector: the rule-view selector to look for the property in
+//   propertyName: the property to test
+//   nb: the number of color swatches this property should have
+// }
+const TESTS = [
+  { selector: "body", propertyName: "color", nb: 1 },
+  { selector: "body", propertyName: "background-color", nb: 1 },
+  { selector: "body", propertyName: "border", nb: 1 },
+  { selector: "*", propertyName: "color", nb: 1 },
+  { selector: "*", propertyName: "background", nb: 26 },
+  { selector: "*", propertyName: "box-shadow", nb: 2 },
+  { selector: "*", propertyName: "filter", nb: 1 },
+  { selector: "*", propertyName: "text-shadow", nb: 3 },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  for (const { selector, propertyName, nb } of TESTS) {
+    info(
+      "Looking for color swatches in property " +
+        propertyName +
+        " in selector " +
+        selector
+    );
+
+    const prop = (
+      await getRuleViewProperty(view, selector, propertyName, { wait: true })
+    ).valueSpan;
+    const swatches = prop.querySelectorAll(".ruleview-colorswatch");
+
+    ok(swatches.length, "Swatches found in the property");
+    is(swatches.length, nb, "Correct number of swatches found in the property");
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-works-with-css-vars.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-works-with-css-vars.js
new file mode 100644
index 0000000000..6e28426b20
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-works-with-css-vars.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests color pickers work with CSS variables.
+
+const TEST_URI = `
+  <style type="text/css">
+    :root {
+      --main-bg-color: coral;
+    }
+    body {
+      color: red;
+      background-color: var(--main-bg-color);
+      border: 1px solid var(--main-bg-color);
+    }
+  </style>
+  Testing the color picker tooltip with CSS variables!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const propertiesToTest = ["color", "background-color", "border"];
+
+  for (const property of propertiesToTest) {
+    info(`Test that the colorpicker appears on swatch click for ${property}`);
+    await testColorPickerAppearsOnColorSwatchActivation(view, property);
+
+    info(
+      `Test that swatch is focusable and colorpicker can be activated with a keyboard for ${property}`
+    );
+    await testColorPickerAppearsOnColorSwatchActivation(view, property, true);
+  }
+});
+
+async function testColorPickerAppearsOnColorSwatchActivation(
+  view,
+  property,
+  withKeyboard = false
+) {
+  const value = (
+    await getRuleViewProperty(view, "body", property, { wait: true })
+  ).valueSpan;
+  const swatch = value.querySelector(".ruleview-colorswatch");
+
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const onColorPickerReady = cPicker.once("ready");
+  if (withKeyboard) {
+    // Focus on the property value span
+    const doc = value.ownerDocument;
+    value.focus();
+
+    // Tab to focus on the color swatch
+    EventUtils.sendKey("Tab");
+    is(doc.activeElement, swatch, "Swatch successfully receives focus.");
+
+    // Press enter on the swatch to simulate click and open color picker
+    EventUtils.sendKey("Return");
+  } else {
+    swatch.click();
+  }
+  await onColorPickerReady;
+
+  info("The color picker was displayed");
+  ok(!inplaceEditor(swatch.parentNode), "The inplace editor wasn't displayed");
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-wrap-focus.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-wrap-focus.js
new file mode 100644
index 0000000000..36ef6f15cb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-wrap-focus.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that focus stays inside color picker on TAB and Shift + TAB
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  info("Focus on the property value span");
+  getRuleViewProperty(view, "body", "color").valueSpan.focus();
+
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+
+  info(
+    "Tab to focus on the color swatch and press enter to simulate a click event"
+  );
+  EventUtils.sendKey("Tab");
+  EventUtils.sendKey("Return");
+
+  await onColorPickerReady;
+  const doc = cPicker.spectrum.element.ownerDocument;
+  ok(
+    doc.activeElement.classList.contains("spectrum-color"),
+    "Focus is initially on the spectrum dragger when color picker is shown."
+  );
+
+  info("Test that tabbing should move focus to the next focusable elements.");
+  testFocusOnTab(doc, "devtools-button");
+  testFocusOnTab(doc, "spectrum-hue-input");
+  testFocusOnTab(doc, "spectrum-alpha-input");
+  testFocusOnTab(doc, "learn-more");
+
+  info(
+    "Test that tabbing on the last element wraps focus to the first element."
+  );
+  testFocusOnTab(doc, "spectrum-color");
+
+  info(
+    "Test that shift tabbing on the first element wraps focus to the last element."
+  );
+  testFocusOnTab(doc, "learn-more", true);
+
+  info(
+    "Test that shift tabbing should move focus to the previous focusable elements."
+  );
+  testFocusOnTab(doc, "spectrum-alpha-input", true);
+  testFocusOnTab(doc, "spectrum-hue-input", true);
+  testFocusOnTab(doc, "devtools-button", true);
+  testFocusOnTab(doc, "spectrum-color", true);
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+});
+
+function testFocusOnTab(doc, expectedClass, shiftKey = false) {
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey });
+  ok(
+    doc.activeElement.classList.contains(expectedClass),
+    "Focus is on the correct element."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_01.js b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_01.js
new file mode 100644
index 0000000000..d9333fe40c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_01.js
@@ -0,0 +1,148 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names are autocompleted and cycled correctly when
+// editing an existing property in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//  ]
+
+const OPEN = true,
+  SELECTED = true;
+var testData = [
+  ["VK_RIGHT", "font", !OPEN, !SELECTED],
+  ["-", "font-size", OPEN, SELECTED],
+  ["f", "font-family", OPEN, SELECTED],
+  ["VK_BACK_SPACE", "font-f", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "font-", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "font", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "fon", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "fo", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "f", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["d", "display", OPEN, SELECTED],
+  ["VK_DOWN", "dominant-baseline", OPEN, SELECTED],
+  ["VK_DOWN", "d", OPEN, SELECTED],
+  ["VK_DOWN", "direction", OPEN, SELECTED],
+  ["VK_DOWN", "display", OPEN, SELECTED],
+  ["VK_UP", "direction", OPEN, SELECTED],
+  ["VK_UP", "d", OPEN, SELECTED],
+  ["VK_UP", "dominant-baseline", OPEN, SELECTED],
+  ["VK_UP", "display", OPEN, SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["i", "display", OPEN, SELECTED],
+  ["s", "display", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "di", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["VK_HOME", "", !OPEN, !SELECTED],
+  ["VK_END", "", !OPEN, !SELECTED],
+  ["VK_PAGE_UP", "", !OPEN, !SELECTED],
+  ["VK_PAGE_DOWN", "", !OPEN, !SELECTED],
+  ["d", "display", OPEN, SELECTED],
+  ["VK_HOME", "display", !OPEN, !SELECTED],
+  ["VK_END", "display", !OPEN, !SELECTED],
+  // Press right key to ensure caret move to end of the input on Mac OS since
+  // Mac OS doesn't move caret after pressing HOME / END.
+  ["VK_RIGHT", "display", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "displa", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "displ", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "disp", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "di", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["f", "font-size", OPEN, SELECTED],
+  ["i", "filter", OPEN, SELECTED],
+  ["VK_LEFT", "filter", !OPEN, !SELECTED],
+  ["VK_LEFT", "filter", !OPEN, !SELECTED],
+  ["i", "fiilter", !OPEN, !SELECTED],
+  ["VK_ESCAPE", null, !OPEN, !SELECTED],
+];
+
+const TEST_URI = "<h1 style='font: 24px serif'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the css property editable field");
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyname"
+  )[0];
+  const editor = await focusEditableField(view, propertyName);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    if (!testData[i].length) {
+      continue;
+    }
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion([key, completion, open, selected], editor, view) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  // Listening for the right event that will tell us when the key has been
+  // entered and processed.
+  let onSuggest;
+  if (/(left|right|back_space|escape|home|end|page_up|page_down)/gi.test(key)) {
+    info(
+      "Adding event listener for " +
+        "left|right|back_space|escape|home|end|page_up|page_down keys"
+    );
+    onSuggest = once(editor.input, "keypress");
+  } else {
+    info("Waiting for after-suggest event on the editor");
+    onSuggest = editor.once("after-suggest");
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key);
+  EventUtils.synthesizeKey(key, {}, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onSuggest;
+  await onPopupEvent;
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
new file mode 100644
index 0000000000..c8e198e85f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
@@ -0,0 +1,136 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names and values are autocompleted and cycled
+// correctly when editing existing properties in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    modifers,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//    expect ruleview-changed,
+//  ]
+
+const OPEN = true,
+  SELECTED = true,
+  CHANGE = true;
+var testData = [
+  ["b", {}, "beige", OPEN, SELECTED, CHANGE],
+  ["l", {}, "black", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "blanchedalmond", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "blue", OPEN, SELECTED, CHANGE],
+  ["VK_RIGHT", {}, "blue", !OPEN, !SELECTED, !CHANGE],
+  [" ", {}, "blue aliceblue", OPEN, SELECTED, CHANGE],
+  ["!", {}, "blue !important", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "blue !", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "blue ", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "blue", !OPEN, !SELECTED, CHANGE],
+  ["VK_TAB", { shiftKey: true }, "color", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
+  ["d", {}, "display", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "blue", !OPEN, !SELECTED, CHANGE],
+  ["n", {}, "none", !OPEN, !SELECTED, CHANGE],
+  ["VK_RETURN", {}, null, !OPEN, !SELECTED, CHANGE],
+];
+
+const TEST_URI = "<h1 style='color: red'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  const prop = getTextProperty(view, 0, { color: "red" });
+
+  info("Focusing the css property editable value");
+  let editor = await focusEditableField(view, prop.editor.valueSpan);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    // Re-define the editor at each iteration, because the focus may have moved
+    // from property to value and back
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, modifiers, completion, open, selected, change],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  let onDone;
+  if (change) {
+    // If the key triggers a ruleview-changed, wait for that event, it will
+    // always be the last to be triggered and tells us when the preview has
+    // been done.
+    onDone = view.once("ruleview-changed");
+  } else {
+    // Otherwise, expect an after-suggest event (except if the popup gets
+    // closed).
+    onDone =
+      key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+        ? editor.once("after-suggest")
+        : null;
+  }
+
+  info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onDone;
+  await onPopupEvent;
+
+  // The key might have been a TAB or shift-TAB, in which case the editor will
+  // be a new one
+  editor = inplaceEditor(view.styleDocument.activeElement);
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+
+  if (
+    key === "VK_RETURN" &&
+    !Services.prefs.getBoolPref("devtools.inspector.rule-view.focusNextOnEnter")
+  ) {
+    ok(!editor, "Enter does not move focus to next element");
+    return;
+  }
+
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_01.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_01.js
new file mode 100644
index 0000000000..139c825db0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_01.js
@@ -0,0 +1,112 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names are autocompleted and cycled correctly when
+// creating a new property in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//  ]
+const OPEN = true,
+  SELECTED = true;
+var testData = [
+  ["d", "display", OPEN, SELECTED],
+  ["VK_DOWN", "dominant-baseline", OPEN, SELECTED],
+  ["VK_DOWN", "d", OPEN, SELECTED],
+  ["VK_DOWN", "direction", OPEN, SELECTED],
+  ["VK_DOWN", "display", OPEN, SELECTED],
+  ["VK_UP", "direction", OPEN, SELECTED],
+  ["VK_UP", "d", OPEN, SELECTED],
+  ["VK_UP", "dominant-baseline", OPEN, SELECTED],
+  ["VK_UP", "display", OPEN, SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["i", "display", OPEN, SELECTED],
+  ["s", "display", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "di", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["f", "font-size", OPEN, SELECTED],
+  ["i", "filter", OPEN, SELECTED],
+  ["VK_ESCAPE", null, !OPEN, !SELECTED],
+];
+
+const TEST_URI = "<h1 style='border: 1px solid red'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the css property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    if (!testData[i].length) {
+      continue;
+    }
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, completion, open, isSelected],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + isSelected);
+
+  let onSuggest;
+
+  if (/(right|back_space|escape)/gi.test(key)) {
+    info("Adding event listener for right|back_space|escape keys");
+    onSuggest = once(editor.input, "keypress");
+  } else {
+    info("Waiting for after-suggest event on the editor");
+    onSuggest = editor.once("after-suggest");
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key);
+  EventUtils.synthesizeKey(key, {}, view.styleWindow);
+
+  await onSuggest;
+  await onPopupEvent;
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, isSelected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
new file mode 100644
index 0000000000..60df90e410
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names and values are autocompleted and cycled
+// correctly when editing new properties in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    modifers,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//    expect ruleview-changed,
+//  ]
+
+const OPEN = true,
+  SELECTED = true,
+  CHANGE = true;
+const testData = [
+  ["d", {}, "display", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "", OPEN, !SELECTED, CHANGE],
+  ["VK_DOWN", {}, "block", OPEN, SELECTED, CHANGE],
+  ["n", {}, "none", !OPEN, !SELECTED, CHANGE],
+  ["VK_TAB", { shiftKey: true }, "display", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
+  ["o", {}, "overflow", OPEN, SELECTED, !CHANGE],
+  ["u", {}, "outline", OPEN, SELECTED, !CHANGE],
+  ["VK_DOWN", {}, "outline-color", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "none", !OPEN, !SELECTED, CHANGE],
+  ["r", {}, "rebeccapurple", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "red", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert-layer", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "rgb", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "rgba", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "rosybrown", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "royalblue", OPEN, SELECTED, CHANGE],
+  ["VK_RIGHT", {}, "royalblue", !OPEN, !SELECTED, !CHANGE],
+  [" ", {}, "royalblue aliceblue", OPEN, SELECTED, CHANGE],
+  ["!", {}, "royalblue !important", !OPEN, !SELECTED, CHANGE],
+  ["VK_ESCAPE", {}, null, !OPEN, !SELECTED, CHANGE],
+];
+
+const TEST_URI = `
+  <style type="text/css">
+    h1 {
+      border: 1px solid red;
+    }
+  </style>
+  <h1>Test element</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing a new css property editable property");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    // Re-define the editor at each iteration, because the focus may have moved
+    // from property to value and back
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, modifiers, completion, open, selected, change],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  let onDone;
+  if (change) {
+    // If the key triggers a ruleview-changed, wait for that event, it will
+    // always be the last to be triggered and tells us when the preview has
+    // been done.
+    onDone = view.once("ruleview-changed");
+  } else {
+    // Otherwise, expect an after-suggest event (except if the popup gets
+    // closed).
+    onDone =
+      key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+        ? editor.once("after-suggest")
+        : null;
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
+  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onDone;
+  await onPopupEvent;
+
+  info("Checking the state");
+  if (completion !== null) {
+    // The key might have been a TAB or shift-TAB, in which case the editor will
+    // be a new one
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_03.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_03.js
new file mode 100644
index 0000000000..4f5577a21e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_03.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for a case where completing gave the wrong answer.
+// See bug 1179318.
+
+const TEST_URI = "<h1 style='color: red'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion for background-color");
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the new property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info('Sending "background" to the editable field');
+  for (const key of "background") {
+    const onSuggest = editor.once("after-suggest");
+    EventUtils.synthesizeKey(key, {}, view.styleWindow);
+    await onSuggest;
+  }
+
+  const itemIndex = 4;
+
+  const bgcItem = editor.popup.getItemAtIndex(itemIndex);
+  is(
+    bgcItem.label,
+    "background-color",
+    "check the expected completion element"
+  );
+
+  editor.popup.selectedIndex = itemIndex;
+
+  const node = editor.popup._list.childNodes[itemIndex];
+  EventUtils.synthesizeMouseAtCenter(node, {}, editor.popup._window);
+
+  is(editor.input.value, "background-color", "Correct value is autocompleted");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_04.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_04.js
new file mode 100644
index 0000000000..9002f89822
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_04.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a new property editor supports the following flow:
+// - type first character of property name
+// - select an autocomplete suggestion !!with a mouse click!!
+// - press RETURN to move to the property value
+// - blur the input to commit
+
+const TEST_URI =
+  "<style>.title {color: red;}</style>" + "<h1 class=title>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the new property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info('Sending "background" to the editable field.');
+  for (const key of "background") {
+    const onSuggest = editor.once("after-suggest");
+    EventUtils.synthesizeKey(key, {}, view.styleWindow);
+    await onSuggest;
+  }
+
+  const itemIndex = 4;
+  const bgcItem = editor.popup.getItemAtIndex(itemIndex);
+  is(
+    bgcItem.label,
+    "background-color",
+    "Check the expected completion element is background-color."
+  );
+  editor.popup.selectItemAtIndex(itemIndex);
+
+  info("Select the background-color suggestion with a mouse click.");
+  const onSuggest = editor.once("after-suggest");
+  const node = editor.popup.elements.get(bgcItem);
+  EventUtils.synthesizeMouseAtCenter(node, {}, editor.popup._window);
+
+  await onSuggest;
+  is(editor.input.value, "background-color", "Correct value is autocompleted");
+
+  info("Press RETURN to move the focus to a property value editor.");
+  let onModifications = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onModifications;
+
+  // Getting the new value editor after focus
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  const textProp = ruleEditor.rule.textProps[1];
+
+  is(ruleEditor.rule.textProps.length, 2, "Created a new text property.");
+  is(ruleEditor.propertyList.children.length, 2, "Created a property editor.");
+  is(
+    editor,
+    inplaceEditor(textProp.editor.valueSpan),
+    "Editing the value span now."
+  );
+
+  info("Entering a value and blurring the field to expect a rule change");
+  onModifications = view.once("ruleview-changed");
+
+  EventUtils.sendString("#F00");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onModifications;
+
+  is(textProp.value, "#F00", "Text prop should have been changed.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
new file mode 100644
index 0000000000..ba892ea8aa
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
@@ -0,0 +1,140 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the behaviour of the CSS autocomplete for CSS value displayed on
+// multiple lines. Expected behavior is:
+// - UP/DOWN should navigate in the input and not increment/decrement numbers
+// - typing a new value should still trigger the autocomplete
+// - UP/DOWN when the autocomplete popup is displayed should cycle through
+//   suggestions
+
+const LONG_CSS_VALUE =
+  "transparent linear-gradient(0deg, blue 0%, white 5%, red 10%, blue 15%, " +
+  "white 20%, red 25%, blue 30%, white 35%, red 40%, blue 45%, white 50%, " +
+  "red 55%, blue 60%, white 65%, red 70%, blue 75%, white 80%, red 85%, " +
+  "blue 90%, white 95% ) repeat scroll 0% 0%";
+
+const EXPECTED_CSS_VALUE = LONG_CSS_VALUE.replace("95%", "95%, red");
+
+const TEST_URI = `<style>
+    .title {
+      background: ${LONG_CSS_VALUE};
+    }
+  </style>
+  <h1 class=title>Header</h1>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the property editable field");
+  const prop = getTextProperty(view, 1, { background: LONG_CSS_VALUE });
+
+  // Calculate offsets to click in the middle of the first box quad.
+  const rect = prop.editor.valueSpan.getBoundingClientRect();
+  const firstQuadBounds = prop.editor.valueSpan.getBoxQuads()[0].getBounds();
+  // For a multiline value, the first quad left edge is not aligned with the
+  // bounding rect left edge. The offsets expected by focusEditableField are
+  // relative to the bouding rectangle, so we need to translate the x-offset.
+  const x = firstQuadBounds.left - rect.left + firstQuadBounds.width / 2;
+  // The first quad top edge is aligned with the bounding top edge, no
+  // translation needed here.
+  const y = firstQuadBounds.height / 2;
+
+  info("Focusing the css property editable value");
+  const editor = await focusEditableField(view, prop.editor.valueSpan, x, y);
+
+  info("Moving the caret next to a number");
+  let pos = editor.input.value.indexOf("0deg") + 1;
+  editor.input.setSelectionRange(pos, pos);
+  is(
+    editor.input.value[editor.input.selectionStart - 1],
+    "0",
+    "Input caret is after a 0"
+  );
+
+  info("Check that UP/DOWN navigates in the input, even when next to a number");
+  EventUtils.synthesizeKey("VK_DOWN", {}, view.styleWindow);
+  Assert.notStrictEqual(editor.input.selectionStart, pos, "Input caret moved");
+  is(editor.input.value, LONG_CSS_VALUE, "Input value was not decremented.");
+
+  info("Move the caret to the end of the gradient definition.");
+  pos = editor.input.value.indexOf("95%") + 3;
+  editor.input.setSelectionRange(pos, pos);
+
+  info('Sending ", re" to the editable field.');
+  for (const key of ", re") {
+    await synthesizeKeyForAutocomplete(key, editor, view.styleWindow);
+  }
+
+  info("Check the autocomplete can still be displayed.");
+  ok(editor.popup && editor.popup.isOpen, "Autocomplete popup is displayed.");
+  is(
+    editor.popup.selectedIndex,
+    0,
+    "Autocomplete has an item selected by default"
+  );
+
+  let item = editor.popup.getItemAtIndex(editor.popup.selectedIndex);
+  is(
+    item.label,
+    "rebeccapurple",
+    "Check autocomplete displays expected value."
+  );
+
+  info("Check autocomplete suggestions can be cycled using UP/DOWN arrows.");
+
+  await synthesizeKeyForAutocomplete("VK_DOWN", editor, view.styleWindow);
+  is(editor.popup.selectedIndex, 1, "Using DOWN cycles autocomplete values.");
+  await synthesizeKeyForAutocomplete("VK_DOWN", editor, view.styleWindow);
+  is(editor.popup.selectedIndex, 2, "Using DOWN cycles autocomplete values.");
+  await synthesizeKeyForAutocomplete("VK_UP", editor, view.styleWindow);
+  is(editor.popup.selectedIndex, 1, "Using UP cycles autocomplete values.");
+  item = editor.popup.getItemAtIndex(editor.popup.selectedIndex);
+  is(item.label, "red", "Check autocomplete displays expected value.");
+
+  info("Select the background-color suggestion with a mouse click.");
+  let onRuleviewChanged = view.once("ruleview-changed");
+  const onSuggest = editor.once("after-suggest");
+
+  const node = editor.popup._list.childNodes[editor.popup.selectedIndex];
+  EventUtils.synthesizeMouseAtCenter(node, {}, editor.popup._window);
+
+  view.debounce.flush();
+  await onSuggest;
+  await onRuleviewChanged;
+
+  is(
+    editor.input.value,
+    EXPECTED_CSS_VALUE,
+    "Input value correctly autocompleted"
+  );
+
+  info("Press ESCAPE to leave the input.");
+  onRuleviewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onRuleviewChanged;
+});
+
+/**
+ * Send the provided key to the currently focused input of the provided window.
+ * Wait for the editor to emit "after-suggest" to make sure the autocompletion
+ * process is finished.
+ *
+ * @param {String} key
+ *        The key to send to the input.
+ * @param {InplaceEditor} editor
+ *        The inplace editor which owns the focused input.
+ * @param {Window} win
+ *        Window in which the key event will be dispatched.
+ */
+async function synthesizeKeyForAutocomplete(key, editor, win) {
+  const onSuggest = editor.once("after-suggest");
+  EventUtils.synthesizeKey(key, {}, win);
+  await onSuggest;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js b/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js
new file mode 100644
index 0000000000..9a3348783f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the suggest completion popup behavior of CSS property field.
+
+const TEST_URI = "<h1 style='color: lime'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  const prop = getTextProperty(view, 0, { color: "lime" });
+
+  info("Test with css property value field");
+  await testCompletion(view, prop.editor.valueSpan, true);
+
+  info("Test with css property name field");
+  await testCompletion(view, prop.editor.nameSpan, false);
+});
+
+async function testCompletion(view, target, isExpectedOpenPopup) {
+  const editor = await focusEditableField(view, target);
+
+  info(
+    "Check the suggest completion popup visibility after clearing the field"
+  );
+
+  const onChanged = view.once("ruleview-changed");
+  const popupEvent = isExpectedOpenPopup ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen === isExpectedOpenPopup
+      ? Promise.resolve()
+      : once(view.popup, popupEvent);
+  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, view.styleWindow);
+
+  // Flush the debounce to update the preview text.
+  view.debounce.flush();
+
+  await Promise.all([onChanged, onPopupEvent]);
+  is(
+    editor.popup.isOpen,
+    isExpectedOpenPopup,
+    "The popup visibility is correct"
+  );
+
+  if (editor.popup.isOpen) {
+    info("Close the suggest completion popup");
+    const closingEvents = [
+      view.once("ruleview-changed"),
+      once(view.popup, "popup-closed"),
+    ];
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+    await Promise.all(closingEvents);
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-popup-hidden-after-navigation.js b/devtools/client/inspector/rules/test/browser_rules_completion-popup-hidden-after-navigation.js
new file mode 100644
index 0000000000..6f22ab0d17
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-popup-hidden-after-navigation.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the ruleview autocomplete popup is hidden after page navigation.
+
+const TEST_URI = "<h1 style='font: 24px serif'></h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test autocompletion popup is hidden after page navigation");
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the css property editable field");
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyname"
+  )[0];
+  const editor = await focusEditableField(view, propertyName);
+
+  info("Pressing key VK_DOWN");
+  const onSuggest = once(editor.input, "keypress");
+  const onPopupOpened = once(editor.popup, "popup-opened");
+
+  EventUtils.synthesizeKey("VK_DOWN", {}, view.styleWindow);
+
+  info("Waiting for autocomplete popup to be displayed");
+  await onSuggest;
+  await onPopupOpened;
+
+  ok(view.popup && view.popup.isOpen, "Popup should be opened");
+
+  info("Reloading the page");
+  await reloadBrowser();
+
+  ok(!(view.popup && view.popup.isOpen), "Popup should be closed");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js b/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js
new file mode 100644
index 0000000000..966dbab043
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the shortcut key for the suggest completion popup.
+
+const TEST_URI = "<h1 style='colo: lim'>Header</h1>";
+const TEST_SHORTCUTS = [
+  {
+    key: " ",
+    modifiers: { ctrlKey: true },
+  },
+  {
+    key: "VK_DOWN",
+    modifiers: {},
+  },
+];
+
+add_task(async function () {
+  for (const shortcut of TEST_SHORTCUTS) {
+    info(
+      "Start to test for the shortcut " +
+        `key: "${shortcut.key}" modifiers: ${Object.keys(shortcut.modifiers)}`
+    );
+
+    const tab = await addTab(
+      "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+    );
+    const { inspector, view } = await openRuleView();
+
+    info("Selecting the test node");
+    await selectNode("h1", inspector);
+
+    const prop = getTextProperty(view, 0, { colo: "lim" });
+
+    info("Test with css property name field");
+    const nameEditor = await focusEditableField(view, prop.editor.nameSpan);
+    await testCompletion(shortcut, view, nameEditor, "color");
+
+    info("Test with css property value field");
+    const valueEditor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(shortcut, view, valueEditor, "lime");
+
+    await removeTab(tab);
+  }
+});
+
+async function testCompletion(shortcut, view, editor, expectedValue) {
+  const spanEl = editor.elt;
+
+  info("Move cursor to the end");
+  EventUtils.synthesizeKey("VK_RIGHT", {}, view.styleWindow);
+  await waitUntil(
+    () => editor.input.selectionStart === editor.input.selectionEnd
+  );
+
+  info("Check whether the popup opens after sending the shortcut key");
+  const onPopupOpened = once(view.popup, "popup-opened");
+  EventUtils.synthesizeKey(shortcut.key, shortcut.modifiers, view.styleWindow);
+  await onPopupOpened;
+  ok(view.popup.isOpen, "The popup opened correctly");
+
+  info("Commit the suggestion");
+  const onChanged = view.once("ruleview-changed");
+  const onPopupClosed = once(view.popup, "popup-closed");
+  EventUtils.synthesizeKey("VK_TAB", {}, view.styleWindow);
+  await Promise.all([onChanged, onPopupClosed]);
+  is(spanEl.textContent, expectedValue, "The value is set correctly");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js
new file mode 100644
index 0000000000..af7c03220a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view shows expanders for properties with computed lists.
+
+var TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px;
+      top: 0px;
+    }
+  </style>
+  <h1 id="testid">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testExpandersShown(inspector, view);
+});
+
+function testExpandersShown(inspector, view) {
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  info("Check that the correct rules are visible");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  is(rule.textProps[0].name, "margin", "First property is margin.");
+  is(rule.textProps[1].name, "top", "Second property is top.");
+
+  info("Check that the expanders are shown correctly");
+  is(
+    rule.textProps[0].editor.expander.style.display,
+    "inline-block",
+    "margin expander is displayed."
+  );
+  is(
+    rule.textProps[1].editor.expander.style.display,
+    "none",
+    "top expander is hidden."
+  );
+  ok(
+    !rule.textProps[0].editor.expander.hasAttribute("open"),
+    "margin computed list is closed."
+  );
+  ok(
+    !rule.textProps[1].editor.expander.hasAttribute("open"),
+    "top computed list is closed."
+  );
+  ok(
+    !rule.textProps[0].editor.computed.hasChildNodes(),
+    "margin computed list is empty before opening."
+  );
+  ok(
+    !rule.textProps[1].editor.computed.hasChildNodes(),
+    "top computed list is empty."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
new file mode 100644
index 0000000000..3d59baea68
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view computed lists can be expanded/collapsed,
+// and contain the right subproperties.
+
+var TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 0px 1px 2px 3px;
+      top: 0px;
+    }
+  </style>
+  <h1 id="testid">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testComputedList(inspector, view);
+});
+
+function testComputedList(inspector, view) {
+  const prop = getTextProperty(view, 1, { margin: "0px 1px 2px 3px" });
+  const propEditor = prop.editor;
+  const expander = propEditor.expander;
+
+  ok(!expander.hasAttribute("open"), "margin computed list is closed");
+
+  info("Opening the computed list of margin property");
+  expander.click();
+  ok(expander.hasAttribute("open"), "margin computed list is open");
+
+  const computed = propEditor.prop.computed;
+  const computedDom = propEditor.computed;
+  const propNames = [
+    "margin-top",
+    "margin-right",
+    "margin-bottom",
+    "margin-left",
+  ];
+
+  is(computed.length, propNames.length, "There should be 4 computed values");
+  is(
+    computedDom.children.length,
+    propNames.length,
+    "There should be 4 nodes in the DOM"
+  );
+
+  propNames.forEach((propName, i) => {
+    const propValue = i + "px";
+    is(
+      computed[i].name,
+      propName,
+      "Computed property #" + i + " has name " + propName
+    );
+    is(
+      computed[i].value,
+      propValue,
+      "Computed property #" + i + " has value " + propValue
+    );
+    is(
+      computedDom.querySelectorAll(".ruleview-propertyname")[i].textContent,
+      propName,
+      "Computed property #" + i + " in DOM has correct name"
+    );
+    is(
+      computedDom.querySelectorAll(".ruleview-propertyvalue")[i].textContent,
+      propValue,
+      "Computed property #" + i + " in DOM has correct value"
+    );
+  });
+
+  info("Closing the computed list of margin property");
+  expander.click();
+  ok(!expander.hasAttribute("open"), "margin computed list is closed");
+
+  info("Opening the computed list of margin property");
+  expander.click();
+  ok(expander.hasAttribute("open"), "margin computed list is open");
+  is(computed.length, propNames.length, "Still 4 computed values");
+  is(computedDom.children.length, propNames.length, "Still 4 nodes in the DOM");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_03.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_03.js
new file mode 100644
index 0000000000..f002a77c8b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_03.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view does not show expanders for property values that contain
+// variables.
+// This should, in theory, be able to work, but the complexity outlined in
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1535315#c2 made us hide the expander
+// instead. Also, this is what Chrome does too.
+
+var TEST_URI = `
+  <style type="text/css">
+    #testid {
+      --primary-color: black;
+      background: var(--primary-color, red);
+    }
+  </style>
+  <h1 id="testid">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(
+    rule.textProps[0].name,
+    "--primary-color",
+    "The first property is the variable"
+  );
+  is(rule.textProps[1].name, "background", "The second property is background");
+
+  info("Check that the expander is hidden for the background property");
+  is(
+    rule.textProps[1].editor.expander.style.display,
+    "none",
+    "Expander is hidden"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_conditional_import.js b/devtools/client/inspector/rules/test/browser_rules_conditional_import.js
new file mode 100644
index 0000000000..36370e0162
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_conditional_import.js
@@ -0,0 +1,135 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content displays @import conditions.
+
+const TEST_URI = `
+  <style type="text/css">
+    @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) screen and (width > 10px);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer) (height > 42px);
+    @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex);
+    @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex) screen and (width > 10px);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayerTwo) supports(display: flex) screen and (width > 10px);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
+  </style>
+  <h1>Hello @import!</h1>
+`;
+
+add_task(async function () {
+  // Enable the pref for @import supports()
+  await pushPref("layout.css.import-supports.enabled", true);
+
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+  const expectedRules = [
+    { selector: "element", ancestorRulesData: null },
+    {
+      // Checking that we don't show @import for rules from imported stylesheet with no conditions
+      selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`,
+      ancestorRulesData: null,
+    },
+    {
+      selector: `h1, [test-hint="imported-conditional"]`,
+      ancestorRulesData: [
+        "@import supports(display: flex) screen and (width > 10px) {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-conditional"]`,
+      ancestorRulesData: ["@import supports(display: flex) {"],
+    },
+    {
+      selector: `h1, [test-hint="imported-conditional"]`,
+      ancestorRulesData: ["@import screen and (width > 10px) {"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
+      ancestorRulesData: [
+        "@import supports(display: flex) screen and (width > 10px) {",
+        "  @layer importedLayerTwo {",
+        "    @media screen {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@import supports(display: flex) screen and (width > 10px) {",
+        "  @layer importedLayerTwo {",
+        "    @media screen {",
+        "      @layer in-imported-stylesheet {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@import supports(display: flex) screen and (width > 10px) {",
+        "  @layer importedLayerTwo {",
+        "    @layer importedNestedLayer {",
+        "      @layer in-imported-nested-stylesheet {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
+      ancestorRulesData: [
+        "@import (height > 42px) {",
+        "  @layer importedLayer {",
+        "    @media screen {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@import (height > 42px) {",
+        "  @layer importedLayer {",
+        "    @media screen {",
+        "      @layer in-imported-stylesheet {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@import (height > 42px) {",
+        "  @layer importedLayer {",
+        "    @layer importedNestedLayer {",
+        "      @layer in-imported-nested-stylesheet {",
+      ],
+    },
+  ];
+
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectors-container"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_container-queries.js b/devtools/client/inspector/rules/test/browser_rules_container-queries.js
new file mode 100644
index 0000000000..1a1857be05
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_container-queries.js
@@ -0,0 +1,321 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page defines container queries.
+const TEST_URI = `
+  <!DOCTYPE html>
+  <style type="text/css">
+    body {
+      container: mycontainer / size;
+    }
+
+    section {
+      container: mycontainer / inline-size;
+    }
+
+    @container (width > 0px) {
+      h1, [test-hint="nocontainername"]{
+        outline-color: chartreuse;
+      }
+    }
+
+    @container unknowncontainer (min-width: 2vw) {
+      h1, [test-hint="unknowncontainer"] {
+        border-color: salmon;
+      }
+    }
+
+    @container mycontainer (1px < width < 10000px) {
+      h1, [test-hint="container"] {
+        color: tomato;
+      }
+
+      section, [test-hint="container-duplicate-name--body"] {
+        color: gold;
+      }
+
+      div, [test-hint="container-duplicate-name--section"] {
+        color: salmon;
+      }
+    }
+  </style>
+  <body id=myBody class="a-container test">
+    <h1>Hello @container!</h1>
+    <section>
+      <div>
+        <h2>You rock</h2>
+      </div>
+    </section>
+  </body>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.container-queries.enabled", true);
+
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+  assertContainerQueryData(view, [
+    { selector: "element", ancestorRulesData: null },
+    {
+      selector: `h1, [test-hint="container"]`,
+      ancestorRulesData: ["@container mycontainer (1px < width < 10000px) {"],
+    },
+    {
+      selector: `h1, [test-hint="nocontainername"]`,
+      ancestorRulesData: ["@container (width > 0px) {"],
+    },
+  ]);
+
+  info("Check that the query container tooltip works as expected");
+  // Retrieve query containers sizes
+  const { bodyInlineSize, bodyBlockSize, sectionInlineSize } =
+    await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+      const body = content.document.body;
+      const section = content.document.querySelector("section");
+      return {
+        bodyInlineSize: content.getComputedStyle(body).inlineSize,
+        bodyBlockSize: content.getComputedStyle(body).blockSize,
+        sectionInlineSize: content.getComputedStyle(section).inlineSize,
+      };
+    });
+
+  await assertQueryContainerTooltip({
+    inspector,
+    view,
+    ruleIndex: 1,
+    expectedHeaderText: "<body#myBody.a-container.test>",
+    expectedBodyText: [
+      "container-type: size",
+      `inline-size: ${bodyInlineSize}`,
+      `block-size: ${bodyBlockSize}`,
+    ],
+  });
+
+  info("Check that the 'jump to container' button works as expected");
+  await assertJumpToContainerButton(inspector, view, 1, "body");
+
+  info("Check that inherited rules display container query data as expected");
+  await selectNode("h2", inspector);
+
+  assertContainerQueryData(view, [
+    { selector: "element", ancestorRulesData: null },
+    {
+      selector: `div, [test-hint="container-duplicate-name--section"]`,
+      ancestorRulesData: ["@container mycontainer (1px < width < 10000px) {"],
+    },
+    {
+      selector: `section, [test-hint="container-duplicate-name--body"]`,
+      ancestorRulesData: ["@container mycontainer (1px < width < 10000px) {"],
+    },
+  ]);
+
+  info(
+    "Check that the query container tooltip works as expected for inherited rules as well"
+  );
+  await assertQueryContainerTooltip({
+    inspector,
+    view,
+    ruleIndex: 1,
+    expectedHeaderText: "<section>",
+    expectedBodyText: [
+      "container-type: inline-size",
+      `inline-size: ${sectionInlineSize}`,
+    ],
+  });
+  await assertQueryContainerTooltip({
+    inspector,
+    view,
+    ruleIndex: 2,
+    expectedHeaderText: "<body#myBody.a-container.test>",
+    expectedBodyText: [
+      "container-type: size",
+      `inline-size: ${bodyInlineSize}`,
+      `block-size: ${bodyBlockSize}`,
+    ],
+  });
+
+  info(
+    "Check that the 'jump to container' button works as expected for inherited rules"
+  );
+  await assertJumpToContainerButton(inspector, view, 1, "section");
+
+  await selectNode("h2", inspector);
+  await assertJumpToContainerButton(inspector, view, 2, "body");
+});
+
+function assertContainerQueryData(view, expectedRules) {
+  const rulesInView = Array.from(
+    view.element.querySelectorAll(".ruleview-rule")
+  );
+
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectors-container"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    const ancestorDataEl = getRuleViewAncestorRulesDataElementByIndex(view, i);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        ancestorDataEl,
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        ancestorDataEl?.innerText,
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+      Assert.notStrictEqual(
+        ancestorDataEl.querySelector(".container-query .open-inspector"),
+        null,
+        "An icon is displayed to select the container in the markup view"
+      );
+    }
+  }
+}
+
+async function assertJumpToContainerButton(
+  inspector,
+  view,
+  ruleIndex,
+  expectedSelectedNodeAfterClick
+) {
+  const selectContainerButton = getRuleViewAncestorRulesDataElementByIndex(
+    view,
+    ruleIndex
+  ).querySelector(".open-inspector");
+
+  // Ensure that the button can be targetted from EventUtils.
+  selectContainerButton.scrollIntoView();
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const onNodeHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    selectContainerButton,
+    { type: "mouseover" },
+    selectContainerButton.ownerDocument.defaultView
+  );
+  const { nodeFront: highlightedNodeFront } = await onNodeHighlight;
+  is(
+    highlightedNodeFront.displayName,
+    expectedSelectedNodeAfterClick,
+    "The correct node was highlighted"
+  );
+
+  const onceNewNodeFront = inspector.selection.once("new-node-front");
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  EventUtils.synthesizeMouseAtCenter(
+    selectContainerButton,
+    {},
+    selectContainerButton.ownerDocument.defaultView
+  );
+
+  const nodeFront = await onceNewNodeFront;
+  is(
+    nodeFront.displayName,
+    expectedSelectedNodeAfterClick,
+    "The correct node has been selected"
+  );
+
+  await onNodeUnhighlight;
+  ok(true, "Highlighter was hidden when clicking on icon");
+
+  // Move mouse so it does stay in a position where it could hover something impacting
+  // the test.
+  EventUtils.synthesizeMouse(
+    selectContainerButton.closest("body"),
+    0,
+    0,
+    { type: "mouseover" },
+    selectContainerButton.ownerDocument.defaultView
+  );
+}
+
+async function assertQueryContainerTooltip({
+  inspector,
+  view,
+  ruleIndex,
+  expectedHeaderText,
+  expectedBodyText,
+}) {
+  const tooltipTriggerEl = getRuleViewAncestorRulesDataElementByIndex(
+    view,
+    ruleIndex
+  ).querySelector(".container-query-declaration");
+
+  // Ensure that the element can be targetted from EventUtils.
+  tooltipTriggerEl.scrollIntoView();
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const onNodeHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+  const onTooltipReady = tooltip.once("shown");
+  info("synthesizing mousemove: " + tooltip.isVisible());
+  EventUtils.synthesizeMouseAtCenter(
+    tooltipTriggerEl,
+    { type: "mousemove" },
+    tooltipTriggerEl.ownerDocument.defaultView
+  );
+  await onTooltipReady;
+  info("tooltip was shown");
+  await onNodeHighlight;
+  info("node was highlighted");
+
+  is(
+    tooltip.panel.querySelector("header").textContent,
+    expectedHeaderText,
+    "Tooltip has expected header content"
+  );
+
+  const lis = Array.from(tooltip.panel.querySelectorAll("li")).map(
+    li => li.textContent
+  );
+  Assert.deepEqual(lis, expectedBodyText, "Tooltip has expected body items");
+
+  info("Hide the tooltip");
+  const onHidden = tooltip.once("hidden");
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  // Move the mouse elsewhere to hide the tooltip
+  EventUtils.synthesizeMouse(
+    tooltipTriggerEl.ownerDocument.body,
+    1,
+    1,
+    { type: "mousemove" },
+    tooltipTriggerEl.ownerDocument.defaultView
+  );
+  await onHidden;
+  await onNodeUnhighlight;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_content_01.js b/devtools/client/inspector/rules/test/browser_rules_content_01.js
new file mode 100644
index 0000000000..b92ec47db0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_content_01.js
@@ -0,0 +1,147 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct
+
+const TEST_URI = `
+  <style type="text/css">
+    @media screen and (min-width: 10px) {
+      #testid {
+        background-color: blue;
+      }
+    }
+    .testclass, .unmatched {
+      background-color: green;
+    }
+
+    main {
+      container-type: inline-size;
+
+      & > .foo, .unmatched {
+        color: tomato;
+
+        @container (0px < width) {
+          background: gold;
+        }
+      }
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <main>
+    <div class="foo">Styled Node in Nested rule</div>
+  </main>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  is(
+    view.element.querySelectorAll("#ruleview-no-results").length,
+    0,
+    "After a highlight, no longer has a no-results element."
+  );
+
+  await clearCurrentNodeSelection(inspector);
+  is(
+    view.element.querySelectorAll("#ruleview-no-results").length,
+    1,
+    "After highlighting null, has a no-results element again."
+  );
+
+  await selectNode("#testid", inspector);
+
+  let linkText = getRuleViewLinkTextByIndex(view, 1);
+  is(linkText, "inline:3", "link text at index 1 has expected content.");
+
+  const mediaText = getRuleViewAncestorRulesDataTextByIndex(view, 1);
+  is(
+    mediaText,
+    "@media screen and (min-width: 10px) {",
+    "media text at index 1 has expected content"
+  );
+
+  linkText = getRuleViewLinkTextByIndex(view, 2);
+  is(linkText, "inline:7", "link text at index 2 has expected content.");
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 2),
+    null,
+    "There is no media text element for rule at index 2"
+  );
+
+  assertSelectors(view, 2, [
+    {
+      selector: ".testclass",
+      matches: true,
+    },
+    {
+      selector: ".unmatched",
+      matches: false,
+    },
+  ]);
+
+  info("Check nested rules");
+  await selectNode(".foo", inspector);
+
+  assertSelectors(view, 1, [
+    // That's the rule that was created as a result of a
+    // nested container rule (`@container (0px < width) { background: gold}`)
+    // In such case, the rule's selector is only `&`, and it should be displayed as
+    // matching the selected node (`<div class="foo">`).
+    {
+      selector: "&",
+      matches: true,
+    },
+  ]);
+
+  assertSelectors(view, 2, [
+    {
+      selector: "& > .foo",
+      matches: true,
+    },
+    {
+      selector: ".unmatched",
+      matches: false,
+    },
+  ]);
+});
+
+/**
+ * Returns the selector elements for a given rule index
+ *
+ * @param {Inspector} view
+ * @param {Integer} ruleIndex
+ * @param {Array<Object>} expectedSelectors:
+ *        An array of objects representing each selector. Objects have the following shape:
+ *        - selector: The expected selector text
+ *        - matches: True if the selector should have the "matching" class
+ */
+function assertSelectors(view, ruleIndex, expectedSelectors) {
+  const ruleSelectors = getRuleViewRuleEditor(
+    view,
+    ruleIndex
+  ).selectorText.querySelectorAll(".ruleview-selector");
+
+  is(
+    ruleSelectors.length,
+    expectedSelectors.length,
+    `There are the expected number of selectors on rule #${ruleIndex}`
+  );
+
+  for (let i = 0; i < expectedSelectors.length; i++) {
+    is(
+      ruleSelectors[i].textContent,
+      expectedSelectors[i].selector,
+      `Got expected text for the selector element #${i} on rule #${ruleIndex}`
+    );
+    is(
+      [...ruleSelectors[i].classList].join(","),
+      "ruleview-selector," +
+        (expectedSelectors[i].matches ? "matched" : "unmatched"),
+      `Got expected css class on the selector element #${i} ("${ruleSelectors[i].textContent}") on rule #${ruleIndex}`
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_content_02.js b/devtools/client/inspector/rules/test/browser_rules_content_02.js
new file mode 100644
index 0000000000..88a883f275
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_content_02.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the rule-view content when the inspector gets opened via the page
+// ctx-menu "inspect element"
+
+const CONTENT = `
+  <body style="color:red;">
+    <div style="color:blue;">
+      <p style="color:green;">
+        <span style="color:yellow;">test element</span>
+      </p>
+    </div>
+  </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + CONTENT);
+
+  // const commands = await CommandsFactory.forTab(tab);
+  // // Initialize the TargetCommands which require some async stuff to be done
+  // // before being fully ready. This will define the `targetCommand.targetFront` attribute.
+  // await commands.targetCommand.startListening();
+  const inspector = await clickOnInspectMenuItem("span");
+
+  checkRuleViewContent(inspector.getPanel("ruleview").view);
+});
+
+function checkRuleViewContent({ styleDocument }) {
+  info("Making sure the rule-view contains the expected content");
+
+  const headers = [...styleDocument.querySelectorAll(".ruleview-header")];
+  is(headers.length, 3, "There are 3 headers for inherited rules");
+
+  is(
+    headers[0].textContent,
+    STYLE_INSPECTOR_L10N.getFormatStr("rule.inheritedFrom", "p"),
+    "The first header is correct"
+  );
+  is(
+    headers[1].textContent,
+    STYLE_INSPECTOR_L10N.getFormatStr("rule.inheritedFrom", "div"),
+    "The second header is correct"
+  );
+  is(
+    headers[2].textContent,
+    STYLE_INSPECTOR_L10N.getFormatStr("rule.inheritedFrom", "body"),
+    "The third header is correct"
+  );
+
+  const rules = styleDocument.querySelectorAll(".ruleview-rule");
+  is(rules.length, 4, "There are 4 rules in the view");
+
+  for (const rule of rules) {
+    const selector = rule.querySelector(".ruleview-selectors-container");
+    is(
+      selector.textContent,
+      STYLE_INSPECTOR_L10N.getStr("rule.sourceElement"),
+      "The rule's selector is correct"
+    );
+
+    const propertyNames = [...rule.querySelectorAll(".ruleview-propertyname")];
+    is(propertyNames.length, 1, "There's only one property name, as expected");
+
+    const propertyValues = [
+      ...rule.querySelectorAll(".ruleview-propertyvalue"),
+    ];
+    is(
+      propertyValues.length,
+      1,
+      "There's only one property value, as expected"
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_copy_styles.js b/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
new file mode 100644
index 0000000000..01fe365841
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
@@ -0,0 +1,359 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests the behaviour of the copy styles context menu items in the rule
+ * view.
+ */
+
+const osString = Services.appinfo.OS;
+
+const TEST_URI = URL_ROOT_SSL + "doc_copystyles.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  const data = [
+    {
+      desc: "Test Copy Property Name",
+      node: ruleEditor.rule.textProps[0].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyPropertyName",
+      expectedPattern: "color",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Value",
+      node: ruleEditor.rule.textProps[2].editor.valueSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
+      expectedPattern: "12px",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: false,
+        copyPropertyValue: true,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Value with Priority",
+      node: ruleEditor.rule.textProps[3].editor.valueSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
+      expectedPattern: "#00F !important",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: false,
+        copyPropertyValue: true,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Declaration",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyDeclaration",
+      expectedPattern: "font-size: 12px;",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Declaration with Priority",
+      node: ruleEditor.rule.textProps[3].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyDeclaration",
+      expectedPattern: "border-color: #00F !important;",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Rule",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyRule",
+      expectedPattern:
+        "#testid {[\\r\\n]+" +
+        "\tcolor: #F00;[\\r\\n]+" +
+        "\tbackground-color: #00F;[\\r\\n]+" +
+        "\tfont-size: 12px;[\\r\\n]+" +
+        "\tborder-color: #00F !important;[\\r\\n]+" +
+        '\t--var: "\\*/";[\\r\\n]+' +
+        "}",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Selector",
+      node: ruleEditor.selectorText,
+      menuItemLabel: "styleinspector.contextmenu.copySelector",
+      expectedPattern: "html, body, #testid",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: false,
+        copyPropertyName: false,
+        copyPropertyValue: false,
+        copySelector: true,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Location",
+      node: ruleEditor.source,
+      menuItemLabel: "styleinspector.contextmenu.copyLocation",
+      expectedPattern:
+        "https://example.com/browser/devtools/client/" +
+        "inspector/rules/test/doc_copystyles.css",
+      visible: {
+        copyLocation: true,
+        copyDeclaration: false,
+        copyPropertyName: false,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      async setup() {
+        await disableProperty(view, 0);
+      },
+      desc: "Test Copy Rule with Disabled Property",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyRule",
+      expectedPattern:
+        "#testid {[\\r\\n]+" +
+        "\t/\\* color: #F00; \\*/[\\r\\n]+" +
+        "\tbackground-color: #00F;[\\r\\n]+" +
+        "\tfont-size: 12px;[\\r\\n]+" +
+        "\tborder-color: #00F !important;[\\r\\n]+" +
+        '\t--var: "\\*/";[\\r\\n]+' +
+        "}",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      async setup() {
+        await disableProperty(view, 4);
+      },
+      desc: "Test Copy Rule with Disabled Property with Comment",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyRule",
+      expectedPattern:
+        "#testid {[\\r\\n]+" +
+        "\t/\\* color: #F00; \\*/[\\r\\n]+" +
+        "\tbackground-color: #00F;[\\r\\n]+" +
+        "\tfont-size: 12px;[\\r\\n]+" +
+        "\tborder-color: #00F !important;[\\r\\n]+" +
+        '\t/\\* --var: "\\*\\\\/"; \\*/[\\r\\n]+' +
+        "}",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Declaration with Disabled Property",
+      node: ruleEditor.rule.textProps[0].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyDeclaration",
+      expectedPattern: "/\\* color: #F00; \\*/",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+  ];
+
+  for (const {
+    setup,
+    desc,
+    node,
+    menuItemLabel,
+    expectedPattern,
+    visible,
+  } of data) {
+    if (setup) {
+      await setup();
+    }
+
+    info(desc);
+    await checkCopyStyle(view, node, menuItemLabel, expectedPattern, visible);
+  }
+});
+
+async function checkCopyStyle(
+  view,
+  node,
+  menuItemLabel,
+  expectedPattern,
+  visible
+) {
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, node);
+  const menuItem = allMenuItems.find(
+    item => item.label === STYLE_INSPECTOR_L10N.getStr(menuItemLabel)
+  );
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+  const menuitemCopyLocation = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyLocation")
+  );
+  const menuitemCopyDeclaration = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyDeclaration")
+  );
+  const menuitemCopyPropertyName = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyPropertyName")
+  );
+  const menuitemCopyPropertyValue = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copyPropertyValue"
+      )
+  );
+  const menuitemCopySelector = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copySelector")
+  );
+  const menuitemCopyRule = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyRule")
+  );
+
+  ok(menuitemCopy.disabled, "Copy disabled is as expected: true");
+  ok(menuitemCopy.visible, "Copy visible is as expected: true");
+
+  is(
+    menuitemCopyLocation.visible,
+    visible.copyLocation,
+    "Copy Location visible attribute is as expected: " + visible.copyLocation
+  );
+
+  is(
+    menuitemCopyDeclaration.visible,
+    visible.copyDeclaration,
+    "Copy Property Declaration visible attribute is as expected: " +
+      visible.copyDeclaration
+  );
+
+  is(
+    menuitemCopyPropertyName.visible,
+    visible.copyPropertyName,
+    "Copy Property Name visible attribute is as expected: " +
+      visible.copyPropertyName
+  );
+
+  is(
+    menuitemCopyPropertyValue.visible,
+    visible.copyPropertyValue,
+    "Copy Property Value visible attribute is as expected: " +
+      visible.copyPropertyValue
+  );
+
+  is(
+    menuitemCopySelector.visible,
+    visible.copySelector,
+    "Copy Selector visible attribute is as expected: " + visible.copySelector
+  );
+
+  is(
+    menuitemCopyRule.visible,
+    visible.copyRule,
+    "Copy Rule visible attribute is as expected: " + visible.copyRule
+  );
+
+  try {
+    await waitForClipboardPromise(
+      () => menuItem.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+}
+
+async function disableProperty(view, index) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const textProp = ruleEditor.rule.textProps[index];
+  await togglePropStatus(view, textProp);
+}
+
+function checkClipboardData(expectedPattern) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  const expectedRegExp = new RegExp(expectedPattern, "g");
+  return expectedRegExp.test(actual);
+}
+
+function failedClipboard(expectedPattern) {
+  // Format expected text for comparison
+  const terminator = osString == "WINNT" ? "\r\n" : "\n";
+  expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator);
+  expectedPattern = expectedPattern.replace(/\\\(/g, "(");
+  expectedPattern = expectedPattern.replace(/\\\)/g, ")");
+
+  let actual = SpecialPowers.getClipboardData("text/plain");
+
+  // Trim the right hand side of our strings. This is because expectedPattern
+  // accounts for windows sometimes adding a newline to our copied data.
+  expectedPattern = expectedPattern.trimRight();
+  actual = actual.trimRight();
+
+  ok(
+    false,
+    "Clipboard text does not match expected " +
+      "results (escaped for accurate comparison):\n"
+  );
+  info("Actual: " + escape(actual));
+  info("Expected: " + escape(expectedPattern));
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-add-rename-rule.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-add-rename-rule.js
new file mode 100644
index 0000000000..f2d6413481
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-add-rename-rule.js
@@ -0,0 +1,121 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Add and rename rules
+// Test the correctness of the compatibility
+// status when the incompatible rules are added
+// or renamed to another universally compatible
+// rule
+
+const TEST_URI = `
+<style>
+  body {
+    user-select: none;
+    text-decoration-skip: none;
+    clip: auto;
+  }
+</style>
+<body>
+</body>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    selector: "body",
+    rules: [
+      {},
+      {
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+        "text-decoration-skip": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+        clip: {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"],
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_ADD_RULE = [
+  {
+    selector: "body",
+    rules: [
+      {
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+      {
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+        "text-decoration-skip": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+        clip: {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"],
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_RENAME_RULE = [
+  {
+    selector: "body",
+    rules: [
+      {
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+      {
+        "background-color": {
+          value: "green",
+        },
+        "text-decoration-skip": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+        clip: {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"],
+        },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  const userSelect = { "user-select": "none" };
+  const backgroundColor = { "background-color": "green" };
+
+  info("Check initial compatibility issues");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+
+  info(
+    "Add an inheritable incompatible rule and check the compatibility status"
+  );
+  await addProperty(view, 0, "-moz-float-edge", "content-box");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_ADD_RULE);
+
+  info("Rename user-select to color and check the compatibility status");
+  await updateDeclaration(view, 1, userSelect, backgroundColor);
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_RENAME_RULE);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-check-add-fix.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-check-add-fix.js
new file mode 100644
index 0000000000..50dd61867d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-check-add-fix.js
@@ -0,0 +1,130 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Add fix for incompatible property
+// For properties like "user-select", there exists an alias
+// "-webkit-user-select", that is supported on all platform
+// as a result of its popularity. If such a universally
+// compatible alias exists, we shouldn't show compatibility
+// warning for the base declaration.
+// In this case "user-select" is marked compatible because the
+// universally compatible alias "-webkit-user-select" exists
+// alongside.
+
+const TARGET_BROWSERS = [
+  {
+    // Chrome doesn't need any prefix for both user-select and text-size-adjust.
+    id: "chrome",
+    status: "current",
+  },
+  {
+    // The safari_ios needs -webkit prefix for both properties.
+    id: "safari_ios",
+    status: "current",
+  },
+];
+
+const TEST_URI = `
+<style>
+  div {
+    color: green;
+    background-color: black;
+    user-select: none;
+    text-size-adjust: none;
+  }
+</style>
+<div>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+        "text-size-adjust": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_FIX_USER_SELECT = [
+  {
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "user-select": { value: "none" },
+        "-webkit-user-select": { value: "none" },
+        "text-size-adjust": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+      },
+    ],
+  },
+];
+
+// text-size-adjust is an experimental property with aliases.
+// Adding -webkit makes it compatible on all platforms but will
+// still show an inline warning for its experimental status.
+const TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED = [
+  {
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "user-select": { value: "none" },
+        "-webkit-user-select": { value: "none" },
+        "text-size-adjust": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["experimental-supported"],
+        },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref(
+    "devtools.inspector.compatibility.target-browsers",
+    JSON.stringify(TARGET_BROWSERS)
+  );
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  // We're only looking for properties on this single node so select it here instead of
+  // passing `selector` to `runCSSCompatibilityTests` (otherwise addition requests are sent
+  // to the server and we may end up with pending promises when the toolbox closes).
+  await selectNode("div", inspector);
+
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+
+  info(
+    'Add -webkit-user-select: "none" which solves the compatibility issue from user-select'
+  );
+  await addProperty(view, 1, "-webkit-user-select", "none");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_FIX_USER_SELECT);
+
+  info(
+    'Add -webkit-text-size-adjust: "none" fixing issue but leaving an inline warning of an experimental property'
+  );
+  await addProperty(view, 1, "-webkit-text-size-adjust", "none");
+  await runCSSCompatibilityTests(
+    view,
+    inspector,
+    TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-learn-more-link.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-learn-more-link.js
new file mode 100644
index 0000000000..0051c65067
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-learn-more-link.js
@@ -0,0 +1,64 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Learn More link is displayed when possible,
+// and that it links to MDN or the spec if no MDN url is provided.
+
+const TEST_URI = `
+<style>
+  body {
+    user-select: none;
+    hyphenate-limit-chars: auto;
+    // TODO: Re-enable it when we have another property with no MDN url nor spec url Bug 1840910
+    /*overflow-clip-box: padding-box;*/
+  }
+</style>
+<body>
+</body>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    selector: "body",
+    rules: [
+      {},
+      {
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+          // MDN url
+          expectedLearnMoreUrl:
+            "https://developer.mozilla.org/docs/Web/CSS/user-select?utm_source=devtools&utm_medium=inspector-css-compatibility&utm_campaign=default",
+        },
+        "hyphenate-limit-chars": {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+          // No MDN url, but a spec one
+          expectedLearnMoreUrl:
+            "https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars",
+        },
+        // TODO: Re-enable it when we have another property with no MDN url nor spec url Bug 1840910
+        /*"overflow-clip-box": {
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+          value: "padding-box",
+          // No MDN nor spec url
+          expectedLearnMoreUrl: null,
+        },*/
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  // If the test fail because the properties used are no longer in the dataset, or they
+  // now have mdn/spec url although we expected them not to, uncomment the next line
+  // to get all the properties in the dataset that don't have a MDN url.
+  // logCssCompatDataPropertiesWithoutMDNUrl()
+
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js
new file mode 100644
index 0000000000..c77894190c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js
@@ -0,0 +1,146 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Toggling rules linked to the element and the class
+// Checking whether the compatibility warning icon is displayed
+// correctly.
+// If a rule is disabled, it is marked compatible to keep
+// consistency with compatibility panel.
+// We test both the compatible and incompatible rules here
+
+const TEST_URI = `
+<style>
+  div {
+    color: green;
+    background-color: black;
+    -moz-float-edge: content-box;
+  }
+</style>
+<div class="test-inline" style="color:pink; user-select:none;"></div>
+<div class="test-class-linked"></div>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    selector: ".test-class-linked",
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+    ],
+  },
+  {
+    selector: ".test-inline",
+    rules: [
+      {
+        color: { value: "pink" },
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+      },
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_TOGGLE_CLASS_DECLARATION = [
+  {
+    selector: ".test-class-linked",
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+  {
+    selector: ".test-inline",
+    rules: [
+      {
+        color: { value: "pink" },
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+      },
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_TOGGLE_INLINE = [
+  {
+    selector: ".test-class-linked",
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+  {
+    selector: ".test-inline",
+    rules: [
+      {
+        color: { value: "pink" },
+        "user-select": { value: "none" },
+      },
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  const mozFloatEdge = { "-moz-float-edge": "content-box" };
+  const userSelect = { "user-select": "none" };
+
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+
+  info(
+    'Disable -moz-float-edge: "content-box" which is not cross browser compatible declaration'
+  );
+  await toggleDeclaration(view, 1, mozFloatEdge);
+  await runCSSCompatibilityTests(
+    view,
+    inspector,
+    TEST_DATA_TOGGLE_CLASS_DECLARATION
+  );
+
+  info(
+    'Toggle inline declaration "user-select": "none" and check the compatibility status'
+  );
+  await selectNode(".test-inline", inspector);
+  await toggleDeclaration(view, 0, userSelect);
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_TOGGLE_INLINE);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-tooltip-telemetry.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-tooltip-telemetry.js
new file mode 100644
index 0000000000..8f7a3b346f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-tooltip-telemetry.js
@@ -0,0 +1,54 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Toggling rules linked to the element and the class
+// Checking whether the compatibility warning icon is displayed
+// correctly.
+// If a rule is disabled, it is marked compatible to keep
+// consistency with compatibility panel.
+// We test both the compatible and incompatible rules here
+
+const TEST_URI = `
+<style>
+  div {
+    -moz-float-edge: content-box;
+  }
+</style>
+<div></div>`;
+
+const TEST_DATA = [
+  {
+    selector: "div",
+    rules: [
+      {},
+      {
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  startTelemetry();
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Check correctness of data by toggling tooltip open");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA);
+
+  checkResults();
+});
+
+function checkResults() {
+  info(
+    'Check the telemetry against "devtools.tooltip.shown" for label "css-compatibility" and ensure it is set'
+  );
+  checkTelemetry("devtools.tooltip.shown", "", 1, "css-compatibility");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cssom.js b/devtools/client/inspector/rules/test/browser_rules_cssom.js
new file mode 100644
index 0000000000..f07d16635b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cssom.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test to ensure that CSSOM doesn't make the rule view blow up.
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1224121
+
+const TEST_URI = URL_ROOT + "doc_cssom.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  const elementStyle = view._elementStyle;
+  let rule;
+
+  rule = elementStyle.rules[1];
+  is(rule.textProps.length, 1, "rule 1 should have one property");
+  is(rule.textProps[0].name, "color", "the property should be 'color'");
+  is(rule.ruleLine, 1, "the property has no source line");
+
+  rule = elementStyle.rules[2];
+  is(rule.textProps.length, 1, "rule 2 should have one property");
+  is(
+    rule.textProps[0].name,
+    "font-weight",
+    "the property should be 'font-weight'"
+  );
+  is(rule.ruleLine, 2, "the property has no source line");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js
new file mode 100644
index 0000000000..8a967e1a8a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that cubic-bezier pickers appear when clicking on cubic-bezier
+// swatches.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      animation: move 3s linear;
+      transition: top 4s cubic-bezier(.1, 1.45, 1, -1.2);
+    }
+    .test {
+      animation-timing-function: ease-in-out;
+      transition-timing-function: ease-out;
+    }
+  </style>
+  <div class="test">Testing the cubic-bezier tooltip!</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const swatches = [];
+  swatches.push(
+    getRuleViewProperty(view, "div", "animation").valueSpan.querySelector(
+      ".ruleview-bezierswatch"
+    )
+  );
+  swatches.push(
+    getRuleViewProperty(view, "div", "transition").valueSpan.querySelector(
+      ".ruleview-bezierswatch"
+    )
+  );
+  swatches.push(
+    getRuleViewProperty(
+      view,
+      ".test",
+      "animation-timing-function"
+    ).valueSpan.querySelector(".ruleview-bezierswatch")
+  );
+  swatches.push(
+    getRuleViewProperty(
+      view,
+      ".test",
+      "transition-timing-function"
+    ).valueSpan.querySelector(".ruleview-bezierswatch")
+  );
+
+  for (const swatch of swatches) {
+    info("Testing that the cubic-bezier appears on cubicswatch click");
+    await testAppears(view, swatch);
+  }
+});
+
+async function testAppears(view, swatch) {
+  ok(swatch, "The cubic-swatch exists");
+
+  const bezier = view.tooltips.getTooltip("cubicBezier");
+  ok(bezier, "The rule-view has the expected cubicBezier property");
+
+  const bezierPanel = bezier.tooltip.panel;
+  ok(bezierPanel, "The XUL panel for the cubic-bezier tooltip exists");
+
+  const onBezierWidgetReady = bezier.once("ready");
+  swatch.click();
+  await onBezierWidgetReady;
+
+  ok(true, "The cubic-bezier tooltip was shown on click of the cibuc swatch");
+  ok(
+    !inplaceEditor(swatch.parentNode),
+    "The inplace editor wasn't shown as a result of the cibuc swatch click"
+  );
+  await hideTooltipAndWaitForRuleViewChanged(bezier, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
new file mode 100644
index 0000000000..5fbd1da25b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a curve change in the cubic-bezier tooltip is committed when ENTER
+// is pressed.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      transition: top 2s linear;
+    }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  info("Getting the bezier swatch element");
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "transition"
+  ).valueSpan.querySelector(".ruleview-bezierswatch");
+
+  await testPressingEnterCommitsChanges(swatch, view);
+});
+
+async function testPressingEnterCommitsChanges(swatch, ruleView) {
+  const bezierTooltip = ruleView.tooltips.getTooltip("cubicBezier");
+
+  info("Showing the tooltip");
+  const onBezierWidgetReady = bezierTooltip.once("ready");
+  swatch.click();
+  await onBezierWidgetReady;
+
+  const widget = await bezierTooltip.widget;
+  info("Simulating a change of curve in the widget");
+  widget.coordinates = [0.1, 2, 0.9, -1];
+  const expected = "cubic-bezier(0.1, 2, 0.9, -1)";
+
+  await waitForSuccess(async function () {
+    const func = await getComputedStyleProperty(
+      "body",
+      null,
+      "transition-timing-function"
+    );
+    return func === expected;
+  }, "Waiting for the change to be previewed on the element");
+
+  ok(
+    getRuleViewProperty(
+      ruleView,
+      "body",
+      "transition"
+    ).valueSpan.textContent.includes("cubic-bezier("),
+    "The text of the timing-function was updated"
+  );
+
+  info("Sending RETURN key within the tooltip document");
+  // Pressing RETURN ends up doing 2 rule-view updates, one for the preview and
+  // one for the commit when the tooltip closes.
+  const onRuleViewChanged = waitForNEvents(ruleView, "ruleview-changed", 2);
+  focusAndSendKey(widget.parent.ownerDocument.defaultView, "RETURN");
+  await onRuleViewChanged;
+
+  const style = await getComputedStyleProperty(
+    "body",
+    null,
+    "transition-timing-function"
+  );
+  is(style, expected, "The element's timing-function was kept after RETURN");
+
+  const ruleViewStyle = getRuleViewProperty(
+    ruleView,
+    "body",
+    "transition"
+  ).valueSpan.textContent.includes("cubic-bezier(");
+  ok(ruleViewStyle, "The text of the timing-function was kept after RETURN");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
new file mode 100644
index 0000000000..91371fa548
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changes made to the cubic-bezier timing-function in the
+// cubic-bezier tooltip are reverted when ESC is pressed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    body {
+      animation-timing-function: linear;
+    }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+  await testPressingEscapeRevertsChanges(view);
+});
+
+async function testPressingEscapeRevertsChanges(view) {
+  const { propEditor } = await openCubicBezierAndChangeCoords(
+    view,
+    1,
+    0,
+    [0.1, 2, 0.9, -1],
+    {
+      selector: "body",
+      name: "animation-timing-function",
+      value: "cubic-bezier(0.1, 2, 0.9, -1)",
+    }
+  );
+
+  is(
+    propEditor.valueSpan.textContent,
+    "cubic-bezier(.1,2,.9,-1)",
+    "Got expected property value."
+  );
+
+  await escapeTooltip(view);
+
+  await waitForComputedStyleProperty(
+    "body",
+    null,
+    "animation-timing-function",
+    "linear"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "linear",
+    "Got expected property value."
+  );
+}
+
+async function escapeTooltip(view) {
+  info("Pressing ESCAPE to close the tooltip");
+
+  const bezierTooltip = view.tooltips.getTooltip("cubicBezier");
+  const widget = await bezierTooltip.widget;
+  const onHidden = bezierTooltip.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  focusAndSendKey(widget.parent.ownerDocument.defaultView, "ESCAPE");
+  await onHidden;
+  await onModifications;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_custom.js b/devtools/client/inspector/rules/test/browser_rules_custom.js
new file mode 100644
index 0000000000..084a870eb8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_custom.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = URL_ROOT + "doc_custom.html";
+
+// Tests the display of custom declarations in the rule-view.
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await simpleCustomOverride(inspector, view);
+  await importantCustomOverride(inspector, view);
+  await disableCustomOverride(inspector, view);
+});
+
+async function simpleCustomOverride(inspector, view) {
+  await selectNode("#testidSimple", inspector);
+
+  const idRule = getRuleViewRuleEditor(view, 1).rule;
+  const idRuleProp = idRule.textProps[0];
+
+  is(
+    idRuleProp.name,
+    "--background-color",
+    "First ID prop should be --background-color"
+  );
+  ok(!idRuleProp.overridden, "ID prop should not be overridden.");
+
+  const classRule = getRuleViewRuleEditor(view, 2).rule;
+  const classRuleProp = classRule.textProps[0];
+
+  is(
+    classRuleProp.name,
+    "--background-color",
+    "First class prop should be --background-color"
+  );
+  ok(classRuleProp.overridden, "Class property should be overridden.");
+
+  // Override --background-color by changing the element style.
+  const elementProp = await addProperty(
+    view,
+    0,
+    "--background-color",
+    "purple"
+  );
+
+  is(
+    classRuleProp.name,
+    "--background-color",
+    "First element prop should now be --background-color"
+  );
+  ok(
+    !elementProp.overridden,
+    "Element style property should not be overridden"
+  );
+  ok(idRuleProp.overridden, "ID property should be overridden");
+  ok(classRuleProp.overridden, "Class property should be overridden");
+}
+
+async function importantCustomOverride(inspector, view) {
+  await selectNode("#testidImportant", inspector);
+
+  const idRule = getRuleViewRuleEditor(view, 1).rule;
+  const idRuleProp = idRule.textProps[0];
+  ok(idRuleProp.overridden, "Not-important rule should be overridden.");
+
+  const classRule = getRuleViewRuleEditor(view, 2).rule;
+  const classRuleProp = classRule.textProps[0];
+  ok(!classRuleProp.overridden, "Important rule should not be overridden.");
+}
+
+async function disableCustomOverride(inspector, view) {
+  await selectNode("#testidDisable", inspector);
+
+  const idRule = getRuleViewRuleEditor(view, 1).rule;
+  const idRuleProp = idRule.textProps[0];
+
+  await togglePropStatus(view, idRuleProp);
+
+  const classRule = getRuleViewRuleEditor(view, 2).rule;
+  const classRuleProp = classRule.textProps[0];
+  ok(
+    !classRuleProp.overridden,
+    "Class prop should not be overridden after id prop was disabled."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js b/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
new file mode 100644
index 0000000000..e55ab5b4dc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
@@ -0,0 +1,122 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test cycling angle units in the rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    .turn {
+      filter: hue-rotate(1turn);
+    }
+    .deg {
+      filter: hue-rotate(180deg);
+    }
+  </style>
+  <body><div class=turn>Test turn</div><div class=deg>Test deg</div>cycling angle units in the rule view!</body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await checkAngleCycling(inspector, view);
+  await checkAngleCyclingPersist(inspector, view);
+});
+
+async function checkAngleCycling(inspector, view) {
+  await selectNode(".turn", inspector);
+
+  const container = (
+    await getRuleViewProperty(view, ".turn", "filter", { wait: true })
+  ).valueSpan;
+  const valueNode = container.querySelector(".ruleview-angle");
+  const win = view.styleWindow;
+
+  // turn
+  is(valueNode.textContent, "1turn", "Angle displayed as a turn value.");
+
+  const tests = [
+    {
+      value: "360deg",
+      comment: "Angle displayed as a degree value.",
+    },
+    {
+      value: `${Math.round(Math.PI * 2 * 10000) / 10000}rad`,
+      comment: "Angle displayed as a radian value.",
+    },
+    {
+      value: "400grad",
+      comment: "Angle displayed as a gradian value.",
+    },
+    {
+      value: "1turn",
+      comment: "Angle displayed as a turn value again.",
+    },
+  ];
+
+  for (const test of tests) {
+    await checkSwatchShiftClick(container, win, test.value, test.comment);
+  }
+}
+
+async function checkAngleCyclingPersist(inspector, view) {
+  await selectNode(".deg", inspector);
+  let container = (
+    await getRuleViewProperty(view, ".deg", "filter", { wait: true })
+  ).valueSpan;
+  let valueNode = container.querySelector(".ruleview-angle");
+  const win = view.styleWindow;
+
+  is(valueNode.textContent, "180deg", "Angle displayed as a degree value.");
+
+  await checkSwatchShiftClick(
+    container,
+    win,
+    `${Math.round(Math.PI * 10000) / 10000}rad`,
+    "Angle displayed as a radian value."
+  );
+
+  // Select the .turn div and reselect the .deg div to see
+  // if the new angle unit persisted
+  await selectNode(".turn", inspector);
+  await selectNode(".deg", inspector);
+
+  // We have to query for the container and the swatch because
+  // they've been re-generated
+  container = (
+    await getRuleViewProperty(view, ".deg", "filter", { wait: true })
+  ).valueSpan;
+  valueNode = container.querySelector(".ruleview-angle");
+  is(
+    valueNode.textContent,
+    `${Math.round(Math.PI * 10000) / 10000}rad`,
+    "Angle still displayed as a radian value."
+  );
+}
+
+async function checkSwatchShiftClick(container, win, expectedValue, comment) {
+  // Wait for 500ms before attempting a click to workaround frequent
+  // intermittents.
+  //
+  // See intermittent bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1721938
+  // See potentially related bugs:
+  // - browserLoaded + synthesizeMouse timeouts https://bugzilla.mozilla.org/show_bug.cgi?id=1727749
+  // - mochitest general synthesize events issue https://bugzilla.mozilla.org/show_bug.cgi?id=1720248
+  await wait(500);
+
+  const swatch = container.querySelector(".ruleview-angleswatch");
+  const valueNode = container.querySelector(".ruleview-angle");
+
+  const onUnitChange = once(swatch, "unit-change");
+  EventUtils.synthesizeMouseAtCenter(
+    swatch,
+    {
+      type: "mousedown",
+      shiftKey: true,
+    },
+    win
+  );
+  await onUnitChange;
+  is(valueNode.textContent, expectedValue, comment);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cycle-color.js b/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
new file mode 100644
index 0000000000..1d209fbd22
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
@@ -0,0 +1,225 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test cycling color types in the rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: #f00;
+    }
+    span {
+      color: blue;
+      border-color: #ff000080;
+    }
+    div {
+      color: green;
+    }
+    p {
+      color: blue;
+    }
+  </style>
+  <body>
+    <span>Test</span>
+    <div>cycling color types in the rule view!</div>
+    <p>cycling color and using the color picker</p>
+  </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await checkColorCycling(view);
+  await checkAlphaColorCycling(inspector, view);
+  await checkColorCyclingWithDifferentDefaultType(inspector, view);
+  await checkColorCyclingWithColorPicker(inspector, view);
+});
+
+async function checkColorCycling(view) {
+  const { valueSpan } = getRuleViewProperty(view, "body", "color");
+
+  checkColorValue(
+    valueSpan,
+    "#f00",
+    "Color displayed as a hex value, its authored type"
+  );
+
+  await runSwatchShiftClickTests(view, valueSpan, [
+    {
+      value: "hsl(0, 100%, 50%)",
+      comment: "Color displayed as an HSL value",
+    },
+    {
+      value: "rgb(255, 0, 0)",
+      comment: "Color displayed as an RGB value",
+    },
+    {
+      value: "hwb(0 0% 0%)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "red",
+      comment: "Color displayed as a color name",
+    },
+    {
+      value: "#f00",
+      comment: "Color displayed as an authored value",
+    },
+    {
+      value: "hsl(0, 100%, 50%)",
+      comment: "Color displayed as an HSL value again",
+    },
+  ]);
+}
+
+async function checkAlphaColorCycling(inspector, view) {
+  await selectNode("span", inspector);
+  const { valueSpan } = getRuleViewProperty(view, "span", "border-color");
+
+  checkColorValue(
+    valueSpan,
+    "#ff000080",
+    "Color displayed as an alpha hex value, its authored type"
+  );
+
+  await runSwatchShiftClickTests(view, valueSpan, [
+    {
+      value: "hsla(0, 100%, 50%, 0.5)",
+      comment: "Color displayed as an HSLa value",
+    },
+    {
+      value: "rgba(255, 0, 0, 0.5)",
+      comment: "Color displayed as an RGBa value",
+    },
+    {
+      value: "hwb(0 0% 0% / 0.5)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "#ff000080",
+      comment: "Color displayed as an alpha hex value again",
+    },
+  ]);
+}
+
+async function checkColorCyclingWithDifferentDefaultType(inspector, view) {
+  info("Change the default color type pref to hex");
+  await pushPref("devtools.defaultColorUnit", "hex");
+
+  info(
+    "Select a new node that would normally have a color with a different type"
+  );
+  await selectNode("div", inspector);
+  const { valueSpan } = getRuleViewProperty(view, "div", "color");
+
+  checkColorValue(
+    valueSpan,
+    "#008000",
+    "Color displayed as a hex value, which is the type just selected"
+  );
+
+  info("Cycle through color types again");
+  await runSwatchShiftClickTests(view, valueSpan, [
+    {
+      value: "hsl(120, 100%, 25.1%)",
+      comment: "Color displayed as an HSL value",
+    },
+    {
+      value: "rgb(0, 128, 0)",
+      comment: "Color displayed as an RGB value",
+    },
+    {
+      value: "hwb(120 0% 49.8%)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "green",
+      comment: "Color displayed as a color name",
+    },
+    {
+      value: "#008000",
+      comment: "Color displayed as an authored value",
+    },
+    {
+      value: "hsl(120, 100%, 25.1%)",
+      comment: "Color displayed as an HSL value again",
+    },
+  ]);
+}
+
+async function checkColorCyclingWithColorPicker(inspector, view) {
+  // Enforce hex format for this test
+  await pushPref("devtools.defaultColorUnit", "hex");
+
+  info("Select a new node for this test");
+  await selectNode("p", inspector);
+  const { valueSpan } = getRuleViewProperty(view, "p", "color");
+
+  checkColorValue(valueSpan, "#00f", "Color has the expected initial value");
+
+  checkSwatchShiftClick(
+    view,
+    valueSpan,
+    "hsl(240, 100%, 50%)",
+    "Color has the expected value after a shift+click"
+  );
+
+  info("Opening the color picker");
+  const swatchElement = valueSpan.querySelector(".ruleview-colorswatch");
+  const picker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatchElement.click();
+  await onColorPickerReady;
+
+  info("Hide the color picker with escape");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const { spectrum } = cPicker;
+  const onHidden = cPicker.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  EventUtils.sendKey("ESCAPE", spectrum.element.ownerDocument.defaultView);
+  await onHidden;
+  await onModifications;
+
+  is(
+    swatchElement.parentNode.dataset.color,
+    "hsl(240, 100%, 50%)",
+    "data-color is still using the correct format"
+  );
+}
+
+async function runSwatchShiftClickTests(view, valueSpan, tests) {
+  for (const { value, comment } of tests) {
+    await checkSwatchShiftClick(view, valueSpan, value, comment);
+  }
+}
+
+async function checkSwatchShiftClick(view, valueSpan, expectedValue, comment) {
+  const swatchNode = valueSpan.querySelector(".ruleview-colorswatch");
+  const colorNode = valueSpan.querySelector(".ruleview-color");
+
+  info(
+    "Shift-click the color swatch and wait for the color type and ruleview to update"
+  );
+  const onUnitChange = once(swatchNode, "unit-change");
+
+  EventUtils.synthesizeMouseAtCenter(
+    swatchNode,
+    {
+      type: "mousedown",
+      shiftKey: true,
+    },
+    view.styleWindow
+  );
+
+  await onUnitChange;
+
+  is(colorNode.textContent, expectedValue, comment);
+}
+
+function checkColorValue(valueSpan, expectedColorValue, comment) {
+  const colorNode = valueSpan.querySelector(".ruleview-color");
+  is(colorNode.textContent, expectedColorValue, comment);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-display-grid-property.js b/devtools/client/inspector/rules/test/browser_rules_edit-display-grid-property.js
new file mode 100644
index 0000000000..e3556ed8ff
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-display-grid-property.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view and modifying the 'display: grid'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = (
+    await getRuleViewProperty(view, "#grid", "display", { wait: true })
+  ).valueSpan;
+  let gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info("Edit the 'grid' property value to 'block'.");
+  const editor = await focusEditableField(view, container);
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  const onDone = view.once("ruleview-changed");
+  editor.input.value = "block;";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onHighlighterHidden;
+  await onDone;
+
+  info("Check the grid highlighter and grid toggle button are hidden.");
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+  ok(!gridToggle, "Grid highlighter toggle is not visible.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js
new file mode 100644
index 0000000000..443f8432f8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests editing a property name or value and escaping will revert the
+// changes and restore the original value.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const prop = getTextProperty(view, 1, { "background-color": "#00F" });
+  const propEditor = prop.editor;
+
+  await focusEditableField(view, propEditor.nameSpan);
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["DELETE", "ESCAPE"]);
+
+  is(
+    propEditor.nameSpan.textContent,
+    "background-color",
+    "'background-color' property name is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("#testid", null, "background-color"),
+    "rgb(0, 0, 255)",
+    "#00F background color is set."
+  );
+
+  await focusEditableField(view, propEditor.valueSpan);
+  const onValueDeleted = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["DELETE", "ESCAPE"]);
+  await onValueDeleted;
+
+  is(
+    propEditor.valueSpan.textContent,
+    "#00F",
+    "'#00F' property value is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("#testid", null, "background-color"),
+    "rgb(0, 0, 255)",
+    "#00F background color is set."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js
new file mode 100644
index 0000000000..78fa56eb35
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the property name and value editors can be triggered when
+// clicking on the property-name, the property-value, the colon or semicolon.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    margin: 0;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testEditPropertyAndCancel(inspector, view);
+});
+
+async function testEditPropertyAndCancel(inspector, view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = getTextProperty(view, 1, { margin: "0" }).editor;
+
+  info("Test editor is created when clicking on property name");
+  await focusEditableField(view, propEditor.nameSpan);
+  ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+
+  info("Test editor is created when clicking on ':' next to property name");
+  const nameRect = propEditor.nameSpan.getBoundingClientRect();
+  await focusEditableField(view, propEditor.nameSpan, nameRect.width + 1);
+  ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+
+  info("Test editor is created when clicking on property value");
+  await focusEditableField(view, propEditor.valueSpan);
+  ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
+  // When cancelling a value edition, the text-property-editor will trigger
+  // a modification to make sure the property is back to its original value
+  // => need to wait on "ruleview-changed" to avoid unhandled promises
+  let onRuleviewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+  await onRuleviewChanged;
+
+  info("Test editor is created when clicking on ';' next to property value");
+  const valueRect = propEditor.valueSpan.getBoundingClientRect();
+  await focusEditableField(view, propEditor.valueSpan, valueRect.width + 1);
+  ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
+  // When cancelling a value edition, the text-property-editor will trigger
+  // a modification to make sure the property is back to its original value
+  // => need to wait on "ruleview-changed" to avoid unhandled promises
+  onRuleviewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+  await onRuleviewChanged;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
new file mode 100644
index 0000000000..c27395a18d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test original value is correctly displayed when ESCaping out of the
+// inplace editor in the style inspector.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+// Test data format
+// {
+//  value: what char sequence to type,
+//  commitKey: what key to type to "commit" the change,
+//  modifiers: commitKey modifiers,
+//  expected: what value is expected as a result
+// }
+const testData = [
+  {
+    value: "red",
+    commitKey: "VK_ESCAPE",
+    modifiers: {},
+    expected: "#00F",
+  },
+  {
+    value: "red",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: "red",
+  },
+  {
+    value: "invalid",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: "invalid",
+  },
+  {
+    value: "blue",
+    commitKey: "VK_TAB",
+    modifiers: { shiftKey: true },
+    expected: "blue",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  for (const data of testData) {
+    await runTestData(view, data);
+  }
+});
+
+async function runTestData(view, { value, commitKey, modifiers, expected }) {
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = idRuleEditor.rule.textProps[0].editor;
+
+  info("Focusing the inplace editor field");
+
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "Focused editor should be the value span."
+  );
+
+  info("Entering test data " + value);
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendString(value, view.styleWindow);
+  view.debounce.flush();
+  await onRuleViewChanged;
+
+  info("Entering the commit key " + commitKey + " " + modifiers);
+  onRuleViewChanged = view.once("ruleview-changed");
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey(commitKey, modifiers);
+  await onBlur;
+  await onRuleViewChanged;
+
+  if (commitKey === "VK_ESCAPE") {
+    is(
+      propEditor.valueSpan.textContent,
+      expected,
+      "Value is as expected: " + expected
+    );
+  } else {
+    is(
+      propEditor.valueSpan.textContent,
+      expected,
+      "Value is as expected: " + expected
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
new file mode 100644
index 0000000000..cbcbc506fe
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the computed values of a style (the shorthand expansion) are
+// properly updated after the style is changed.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      padding: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await editAndCheck(view);
+});
+
+async function editAndCheck(view) {
+  const prop = getTextProperty(view, 1, { padding: "10px" });
+  const propEditor = prop.editor;
+  const newPaddingValue = "20px";
+
+  info("Focusing the inplace editor field");
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "Focused editor should be the value span."
+  );
+
+  const onPropertyChange = waitForComputedStyleProperty(
+    "#testid",
+    null,
+    "padding-top",
+    newPaddingValue
+  );
+  const onRefreshAfterPreview = once(view, "ruleview-changed");
+
+  info("Entering a new value");
+  EventUtils.sendString(newPaddingValue, view.styleWindow);
+
+  info(
+    "Waiting for the debounced previewValue to apply the " +
+      "changes to document"
+  );
+
+  view.debounce.flush();
+  await onPropertyChange;
+
+  info("Waiting for ruleview-refreshed after previewValue was applied.");
+  await onRefreshAfterPreview;
+
+  const onBlur = once(editor.input, "blur");
+
+  info("Entering the commit key and finishing edit");
+  EventUtils.synthesizeKey("KEY_Enter");
+
+  info("Waiting for blur on the field");
+  await onBlur;
+
+  info("Waiting for the style changes to be applied");
+  await once(view, "ruleview-changed");
+
+  const computed = prop.computed;
+  const propNames = [
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left",
+  ];
+
+  is(computed.length, propNames.length, "There should be 4 computed values");
+  propNames.forEach((propName, i) => {
+    is(
+      computed[i].name,
+      propName,
+      "Computed property #" + i + " has name " + propName
+    );
+    is(
+      computed[i].value,
+      newPaddingValue,
+      "Computed value of " + propName + " is as expected"
+    );
+  });
+
+  propEditor.expander.click();
+  const computedDom = propEditor.computed;
+  is(
+    computedDom.children.length,
+    propNames.length,
+    "There should be 4 nodes in the DOM"
+  );
+  propNames.forEach((propName, i) => {
+    is(
+      computedDom.getElementsByClassName("ruleview-propertyvalue")[i]
+        .textContent,
+      newPaddingValue,
+      "Computed value of " + propName + " in DOM is as expected"
+    );
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
new file mode 100644
index 0000000000..2072ea5f96
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
@@ -0,0 +1,820 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that increasing/decreasing values in rule view using
+// arrow keys works correctly.
+
+// Bug 1275446 - This test happen to hit the default timeout on linux32
+requestLongerTimeout(2);
+
+const lazy = {};
+ChromeUtils.defineESModuleGetters(lazy, {
+  AppConstants: "resource://gre/modules/AppConstants.sys.mjs",
+});
+
+const TEST_URI = `
+  <style>
+    #test {
+      margin-top: 0px;
+      padding-top: 0px;
+      color: #000000;
+      background-color: #000000;
+      background: none;
+      transition: initial;
+      z-index: 0;
+      opacity: 1;
+      line-height: 1;
+      --custom: 0;
+    }
+  </style>
+  <div id="test"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test", inspector);
+
+  await testMarginIncrements(view);
+  await testVariousUnitIncrements(view);
+  await testHexIncrements(view);
+  await testAlphaHexIncrements(view);
+  await testRgbIncrements(view);
+  await testHslIncrements(view);
+  await testRgbCss4Increments(view);
+  await testHslCss4Increments(view);
+  await testHwbIncrements(view);
+  await testShorthandIncrements(view);
+  await testOddCases(view);
+  await testZeroValueIncrements(view);
+  await testOpacityIncrements(view);
+  await testLineHeightIncrements(view);
+  await testCssVariableIncrements(view);
+});
+
+async function testMarginIncrements(view) {
+  info("Testing keyboard increments on the margin property");
+
+  const marginPropEditor = getTextProperty(view, 1, {
+    "margin-top": "0px",
+  }).editor;
+
+  await runIncrementTest(marginPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0px",
+      end: "0.1px",
+      selectAll: true,
+    },
+    2: { start: "0px", end: "1px", selectAll: true },
+    3: { shift: true, start: "0px", end: "10px", selectAll: true },
+    4: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0.1px",
+      end: "0px",
+      selectAll: true,
+    },
+    5: { down: true, start: "0px", end: "-1px", selectAll: true },
+    6: { down: true, shift: true, start: "0px", end: "-10px", selectAll: true },
+    7: {
+      pageUp: true,
+      shift: true,
+      start: "0px",
+      end: "100px",
+      selectAll: true,
+    },
+    8: {
+      pageDown: true,
+      shift: true,
+      start: "0px",
+      end: "-100px",
+      selectAll: true,
+    },
+    9: { start: "0", end: "1px", selectAll: true },
+    10: { down: true, start: "0", end: "-1px", selectAll: true },
+  });
+}
+
+async function testVariousUnitIncrements(view) {
+  info("Testing keyboard increments on values with various units");
+
+  const paddingPropEditor = getTextProperty(view, 1, {
+    "padding-top": "0px",
+  }).editor;
+
+  await runIncrementTest(paddingPropEditor, view, {
+    1: { start: "0px", end: "1px", selectAll: true },
+    2: { start: "0pt", end: "1pt", selectAll: true },
+    3: { start: "0pc", end: "1pc", selectAll: true },
+    4: { start: "0em", end: "1em", selectAll: true },
+    5: { start: "0%", end: "1%", selectAll: true },
+    6: { start: "0in", end: "1in", selectAll: true },
+    7: { start: "0cm", end: "1cm", selectAll: true },
+    8: { start: "0mm", end: "1mm", selectAll: true },
+    9: { start: "0ex", end: "1ex", selectAll: true },
+    10: { start: "0", end: "1px", selectAll: true },
+    11: { down: true, start: "0", end: "-1px", selectAll: true },
+  });
+}
+
+async function testHexIncrements(view) {
+  info("Testing keyboard increments with hex colors");
+
+  const hexColorPropEditor = getTextProperty(view, 1, {
+    color: "#000000",
+  }).editor;
+
+  await runIncrementTest(hexColorPropEditor, view, {
+    1: { start: "#CCCCCC", end: "#CDCDCD", selectAll: true },
+    2: { shift: true, start: "#CCCCCC", end: "#DCDCDC", selectAll: true },
+    3: { start: "#CCCCCC", end: "#CDCCCC", selection: [1, 3] },
+    4: { shift: true, start: "#CCCCCC", end: "#DCCCCC", selection: [1, 3] },
+    5: { start: "#FFFFFF", end: "#FFFFFF", selectAll: true },
+    6: {
+      down: true,
+      shift: true,
+      start: "#000000",
+      end: "#000000",
+      selectAll: true,
+    },
+  });
+}
+
+async function testAlphaHexIncrements(view) {
+  info("Testing keyboard increments with alpha hex colors");
+
+  const hexColorPropEditor = getTextProperty(view, 1, {
+    color: "#000000",
+  }).editor;
+
+  await runIncrementTest(hexColorPropEditor, view, {
+    1: { start: "#CCCCCCAA", end: "#CDCDCDAB", selectAll: true },
+    2: { shift: true, start: "#CCCCCCAA", end: "#DCDCDCBA", selectAll: true },
+    3: { start: "#CCCCCCAA", end: "#CDCCCCAA", selection: [1, 3] },
+    4: { shift: true, start: "#CCCCCCAA", end: "#DCCCCCAA", selection: [1, 3] },
+    5: { start: "#FFFFFFFF", end: "#FFFFFFFF", selectAll: true },
+    6: {
+      down: true,
+      shift: true,
+      start: "#00000000",
+      end: "#00000000",
+      selectAll: true,
+    },
+  });
+}
+
+async function testRgbIncrements(view) {
+  info("Testing keyboard increments with rgb(a) colors");
+
+  const rgbColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(rgbColorPropEditor, view, {
+    1: { start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6, 7] },
+    2: {
+      shift: true,
+      start: "rgb(0,0,0)",
+      end: "rgb(0,10,0)",
+      selection: [6, 7],
+    },
+    3: { start: "rgb(0,255,0)", end: "rgb(0,255,0)", selection: [6, 9] },
+    4: {
+      shift: true,
+      start: "rgb(0,250,0)",
+      end: "rgb(0,255,0)",
+      selection: [6, 9],
+    },
+    5: {
+      down: true,
+      start: "rgb(0,0,0)",
+      end: "rgb(0,0,0)",
+      selection: [6, 7],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "rgb(0,5,0)",
+      end: "rgb(0,0,0)",
+      selection: [6, 7],
+    },
+    7: {
+      start: "rgba(0,0,0,1)",
+      end: "rgba(0,0,0,1)",
+      selection: [11, 12],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "rgba(0,0,0,0.5)",
+      end: "rgba(0,0,0,0.6)",
+      selection: [12, 13],
+    },
+    9: {
+      down: true,
+      start: "rgba(0,0,0,0)",
+      end: "rgba(0,0,0,0)",
+      selection: [11, 12],
+    },
+  });
+}
+
+async function testHslIncrements(view) {
+  info("Testing keyboard increments with hsl(a) colors");
+
+  const hslColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(hslColorPropEditor, view, {
+    1: { start: "hsl(0,0%,0%)", end: "hsl(0,1%,0%)", selection: [6, 8] },
+    2: {
+      shift: true,
+      start: "hsl(0,0%,0%)",
+      end: "hsl(0,10%,0%)",
+      selection: [6, 8],
+    },
+    3: { start: "hsl(0,100%,0%)", end: "hsl(0,100%,0%)", selection: [6, 10] },
+    4: {
+      shift: true,
+      start: "hsl(0,95%,0%)",
+      end: "hsl(0,100%,0%)",
+      selection: [6, 10],
+    },
+    5: {
+      down: true,
+      start: "hsl(0,0%,0%)",
+      end: "hsl(0,0%,0%)",
+      selection: [6, 8],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "hsl(0,5%,0%)",
+      end: "hsl(0,0%,0%)",
+      selection: [6, 8],
+    },
+    7: {
+      start: "hsla(0,0%,0%,1)",
+      end: "hsla(0,0%,0%,1)",
+      selection: [13, 14],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "hsla(0,0%,0%,0.5)",
+      end: "hsla(0,0%,0%,0.6)",
+      selection: [14, 15],
+    },
+    9: {
+      down: true,
+      start: "hsla(0,0%,0%,0)",
+      end: "hsla(0,0%,0%,0)",
+      selection: [13, 14],
+    },
+  });
+}
+
+async function testRgbCss4Increments(view) {
+  info("Testing keyboard increments with rgb colors using CSS 4 Color syntax");
+
+  const rgbColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(rgbColorPropEditor, view, {
+    1: { start: "rgb(0 0 0)", end: "rgb(0 1 0)", selection: [6, 7] },
+    2: {
+      shift: true,
+      start: "rgb(0 0 0)",
+      end: "rgb(0 10 0)",
+      selection: [6, 7],
+    },
+    3: { start: "rgb(0 255 0)", end: "rgb(0 255 0)", selection: [6, 9] },
+    4: {
+      shift: true,
+      start: "rgb(0 250 0)",
+      end: "rgb(0 255 0)",
+      selection: [6, 9],
+    },
+    5: {
+      down: true,
+      start: "rgb(0 0 0)",
+      end: "rgb(0 0 0)",
+      selection: [6, 7],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "rgb(0 5 0)",
+      end: "rgb(0 0 0)",
+      selection: [6, 7],
+    },
+    7: {
+      start: "rgb(0 0 0/1)",
+      end: "rgb(0 0 0/1)",
+      selection: [10, 11],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "rgb(0 0 0/0.5)",
+      end: "rgb(0 0 0/0.6)",
+      selection: [11, 12],
+    },
+    9: {
+      down: true,
+      start: "rgb(0 0 0/0)",
+      end: "rgb(0 0 0/0)",
+      selection: [10, 11],
+    },
+  });
+}
+
+async function testHslCss4Increments(view) {
+  info("Testing keyboard increments with hsl colors using CSS 4 Color syntax");
+
+  const hslColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(hslColorPropEditor, view, {
+    1: { start: "hsl(0 0% 0%)", end: "hsl(0 1% 0%)", selection: [6, 8] },
+    2: {
+      shift: true,
+      start: "hsl(0 0% 0%)",
+      end: "hsl(0 10% 0%)",
+      selection: [6, 8],
+    },
+    3: { start: "hsl(0 100% 0%)", end: "hsl(0 100% 0%)", selection: [6, 10] },
+    4: {
+      shift: true,
+      start: "hsl(0 95% 0%)",
+      end: "hsl(0 100% 0%)",
+      selection: [6, 10],
+    },
+    5: {
+      down: true,
+      start: "hsl(0 0% 0%)",
+      end: "hsl(0 0% 0%)",
+      selection: [6, 8],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "hsl(0 5% 0%)",
+      end: "hsl(0 0% 0%)",
+      selection: [6, 8],
+    },
+    7: {
+      start: "hsl(0 0% 0%/1)",
+      end: "hsl(0 0% 0%/1)",
+      selection: [12, 13],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "hsl(0 0% 0%/0.5)",
+      end: "hsl(0 0% 0%/0.6)",
+      selection: [13, 14],
+    },
+    9: {
+      down: true,
+      start: "hsl(0 0% 0%/0)",
+      end: "hsl(0 0% 0%/0)",
+      selection: [12, 13],
+    },
+  });
+}
+
+async function testHwbIncrements(view) {
+  info("Testing keyboard increments with hwb colors");
+
+  const hwbColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(hwbColorPropEditor, view, {
+    1: { start: "hwb(0 0% 0%)", end: "hwb(0 1% 0%)", selection: [6, 8] },
+    2: {
+      shift: true,
+      start: "hwb(0 0% 0%)",
+      end: "hwb(0 10% 0%)",
+      selection: [6, 8],
+    },
+    3: { start: "hwb(0 100% 0%)", end: "hwb(0 100% 0%)", selection: [6, 10] },
+    4: {
+      shift: true,
+      start: "hwb(0 95% 0%)",
+      end: "hwb(0 100% 0%)",
+      selection: [6, 10],
+    },
+    5: {
+      down: true,
+      start: "hwb(0 0% 0%)",
+      end: "hwb(0 0% 0%)",
+      selection: [6, 8],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "hwb(0 5% 0%)",
+      end: "hwb(0 0% 0%)",
+      selection: [6, 8],
+    },
+    7: {
+      start: "hwb(0 0% 0%/1)",
+      end: "hwb(0 0% 0%/1)",
+      selection: [12, 13],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "hwb(0 0% 0%/0.5)",
+      end: "hwb(0 0% 0%/0.6)",
+      selection: [13, 14],
+    },
+    9: {
+      down: true,
+      start: "hwb(0 0% 0%/0)",
+      end: "hwb(0 0% 0%/0)",
+      selection: [12, 13],
+    },
+  });
+}
+
+async function testShorthandIncrements(view) {
+  info("Testing keyboard increments within shorthand values");
+
+  const paddingPropEditor = getTextProperty(view, 1, {
+    "padding-top": "0px",
+  }).editor;
+
+  await runIncrementTest(paddingPropEditor, view, {
+    1: { start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4, 7] },
+    2: {
+      shift: true,
+      start: "0px 0px 0px 0px",
+      end: "0px 10px 0px 0px",
+      selection: [4, 7],
+    },
+    3: { start: "0px 0px 0px 0px", end: "1px 0px 0px 0px", selectAll: true },
+    4: {
+      shift: true,
+      start: "0px 0px 0px 0px",
+      end: "10px 0px 0px 0px",
+      selectAll: true,
+    },
+    5: {
+      down: true,
+      start: "0px 0px 0px 0px",
+      end: "0px 0px -1px 0px",
+      selection: [8, 11],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "0px 0px 0px 0px",
+      end: "-10px 0px 0px 0px",
+      selectAll: true,
+    },
+    7: {
+      up: true,
+      start: "0.1em .1em 0em 0em",
+      end: "0.1em 1.1em 0em 0em",
+      selection: [6, 9],
+    },
+    8: {
+      up: true,
+      ...getSmallIncrementKey(),
+      start: "0.1em .9em 0em 0em",
+      end: "0.1em 1em 0em 0em",
+      selection: [6, 9],
+    },
+    9: {
+      up: true,
+      shift: true,
+      start: "0.2em .2em 0em 0em",
+      end: "0.2em 10.2em 0em 0em",
+      selection: [6, 9],
+    },
+  });
+}
+
+async function testOddCases(view) {
+  info("Testing some more odd cases");
+
+  const marginPropEditor = getTextProperty(view, 1, {
+    "margin-top": "0px",
+  }).editor;
+
+  await runIncrementTest(marginPropEditor, view, {
+    1: { start: "98.7%", end: "99.7%", selection: [3, 3] },
+    2: {
+      ...getSmallIncrementKey(),
+      start: "98.7%",
+      end: "98.8%",
+      selection: [3, 3],
+    },
+    3: { start: "0", end: "1px" },
+    4: { down: true, start: "0", end: "-1px" },
+    5: { start: "'a=-1'", end: "'a=0'", selection: [4, 4] },
+    6: { start: "0 -1px", end: "0 0px", selection: [2, 2] },
+    7: { start: "url(-1)", end: "url(-1)", selection: [4, 4] },
+    8: {
+      start: "url('test1.1.png')",
+      end: "url('test1.2.png')",
+      selection: [11, 11],
+    },
+    9: {
+      start: "url('test1.png')",
+      end: "url('test2.png')",
+      selection: [9, 9],
+    },
+    10: {
+      shift: true,
+      start: "url('test1.1.png')",
+      end: "url('test11.1.png')",
+      selection: [9, 9],
+    },
+    11: {
+      down: true,
+      start: "url('test-1.png')",
+      end: "url('test-2.png')",
+      selection: [9, 11],
+    },
+    12: {
+      start: "url('test1.1.png')",
+      end: "url('test1.2.png')",
+      selection: [11, 12],
+    },
+    13: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "url('test-0.png')",
+      end: "url('test--0.1.png')",
+      selection: [10, 11],
+    },
+    14: {
+      ...getSmallIncrementKey(),
+      start: "url('test--0.1.png')",
+      end: "url('test-0.png')",
+      selection: [10, 14],
+    },
+  });
+}
+
+async function testZeroValueIncrements(view) {
+  info("Testing a valid unit is added when incrementing from 0");
+
+  const backgroundPropEditor = getTextProperty(view, 1, {
+    background: "none",
+  }).editor;
+  await runIncrementTest(backgroundPropEditor, view, {
+    1: {
+      start: "url(test-0.png) no-repeat 0 0",
+      end: "url(test-0.png) no-repeat 1px 0",
+      selection: [26, 26],
+    },
+    2: {
+      start: "url(test-0.png) no-repeat 0 0",
+      end: "url(test-0.png) no-repeat 0 1px",
+      selection: [28, 28],
+    },
+    3: {
+      start: "url(test-0.png) no-repeat center/0",
+      end: "url(test-0.png) no-repeat center/1px",
+      selection: [34, 34],
+    },
+    4: {
+      start: "url(test-0.png) no-repeat 0 0",
+      end: "url(test-1.png) no-repeat 0 0",
+      selection: [10, 10],
+    },
+    5: {
+      start: "linear-gradient(0, red 0, blue 0)",
+      end: "linear-gradient(1deg, red 0, blue 0)",
+      selection: [17, 17],
+    },
+    6: {
+      start: "linear-gradient(1deg, red 0, blue 0)",
+      end: "linear-gradient(1deg, red 1px, blue 0)",
+      selection: [27, 27],
+    },
+    7: {
+      start: "linear-gradient(1deg, red 0, blue 0)",
+      end: "linear-gradient(1deg, red 0, blue 1px)",
+      selection: [35, 35],
+    },
+  });
+
+  const transitionPropEditor = getTextProperty(view, 1, {
+    transition: "initial",
+  }).editor;
+  await runIncrementTest(transitionPropEditor, view, {
+    1: { start: "all 0 ease-out", end: "all 1s ease-out", selection: [5, 5] },
+    2: {
+      start: "margin 4s, color 0",
+      end: "margin 4s, color 1s",
+      selection: [18, 18],
+    },
+  });
+
+  const zIndexPropEditor = getTextProperty(view, 1, { "z-index": "0" }).editor;
+  await runIncrementTest(zIndexPropEditor, view, {
+    1: { start: "0", end: "1", selection: [1, 1] },
+  });
+}
+
+async function testOpacityIncrements(view) {
+  info("Testing keyboard increments on the opacity property");
+
+  const opacityPropEditor = getTextProperty(view, 1, { opacity: "1" }).editor;
+
+  await runIncrementTest(opacityPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0.5",
+      end: "0.51",
+      selectAll: true,
+    },
+    2: { start: "0", end: "0.1", selectAll: true },
+    3: { shift: true, start: "0", end: "1", selectAll: true },
+    4: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0.1",
+      end: "0.09",
+      selectAll: true,
+    },
+    5: { down: true, start: "0", end: "-0.1", selectAll: true },
+    6: { down: true, shift: true, start: "0", end: "-1", selectAll: true },
+    7: { pageUp: true, shift: true, start: "0", end: "10", selectAll: true },
+    8: { pageDown: true, shift: true, start: "0", end: "-10", selectAll: true },
+    9: { start: "0.7", end: "0.8", selectAll: true },
+    10: { down: true, start: "0", end: "-0.1", selectAll: true },
+  });
+}
+
+async function testLineHeightIncrements(view) {
+  info("Testing keyboard increments on the line height property");
+
+  const opacityPropEditor = getTextProperty(view, 1, {
+    "line-height": "1",
+  }).editor;
+
+  // line-height accepts both values with or without units, check that we don't
+  // force using a unit if none was specified.
+  await runIncrementTest(opacityPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "0.1",
+      selectAll: true,
+    },
+    2: {
+      ...getSmallIncrementKey(),
+      start: "0px",
+      end: "0.1px",
+      selectAll: true,
+    },
+    3: {
+      start: "0",
+      end: "1",
+      selectAll: true,
+    },
+    4: {
+      start: "0px",
+      end: "1px",
+      selectAll: true,
+    },
+    5: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "-0.1",
+      selectAll: true,
+    },
+    6: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0px",
+      end: "-0.1px",
+      selectAll: true,
+    },
+    7: {
+      down: true,
+      start: "0",
+      end: "-1",
+      selectAll: true,
+    },
+    8: {
+      down: true,
+      start: "0px",
+      end: "-1px",
+      selectAll: true,
+    },
+  });
+}
+
+async function testCssVariableIncrements(view) {
+  info("Testing keyboard increments on the css variable property");
+
+  const opacityPropEditor = getTextProperty(view, 1, {
+    "--custom": "0",
+  }).editor;
+
+  await runIncrementTest(opacityPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "0.1",
+      selectAll: true,
+    },
+    2: {
+      start: "0",
+      end: "1",
+      selectAll: true,
+    },
+    3: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "-0.1",
+      selectAll: true,
+    },
+    4: {
+      down: true,
+      start: "0",
+      end: "-1",
+      selectAll: true,
+    },
+  });
+}
+
+async function runIncrementTest(propertyEditor, view, tests) {
+  propertyEditor.valueSpan.scrollIntoView();
+  const editor = await focusEditableField(view, propertyEditor.valueSpan);
+
+  for (const test in tests) {
+    await testIncrement(editor, tests[test], view, propertyEditor);
+  }
+
+  // Blur the field to put back the UI in its initial state (and avoid pending
+  // requests when the test ends).
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  view.debounce.flush();
+  await onRuleViewChanged;
+}
+
+async function testIncrement(editor, options, view) {
+  editor.input.value = options.start;
+  const input = editor.input;
+
+  if (options.selectAll) {
+    input.select();
+  } else if (options.selection) {
+    input.setSelectionRange(options.selection[0], options.selection[1]);
+  }
+
+  is(input.value, options.start, "Value initialized at " + options.start);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const onKeyUp = once(input, "keyup");
+
+  let key;
+  key = options.down ? "VK_DOWN" : "VK_UP";
+  if (options.pageDown) {
+    key = "VK_PAGE_DOWN";
+  } else if (options.pageUp) {
+    key = "VK_PAGE_UP";
+  }
+
+  let smallIncrementKey = { ctrlKey: options.ctrl };
+  if (lazy.AppConstants.platform === "macosx") {
+    smallIncrementKey = { altKey: options.alt };
+  }
+
+  EventUtils.synthesizeKey(
+    key,
+    { ...smallIncrementKey, shiftKey: options.shift },
+    view.styleWindow
+  );
+
+  await onKeyUp;
+
+  // Only expect a change if the value actually changed!
+  if (options.start !== options.end) {
+    view.debounce.flush();
+    await onRuleViewChanged;
+  }
+
+  is(input.value, options.end, "Value changed to " + options.end);
+}
+
+function getSmallIncrementKey() {
+  if (lazy.AppConstants.platform === "macosx") {
+    return { alt: true };
+  }
+  return { ctrl: true };
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-nested-rules.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-nested-rules.js
new file mode 100644
index 0000000000..149066cfc6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-nested-rules.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing editing nested rules in the rule view.
+
+const STYLE = `
+    main {
+      background-color: tomato;
+      & > .foo {
+        background-color: teal;
+        &.foo {
+          color: gold;
+        }
+      }
+    }`;
+
+const HTML = `
+  <main>
+    Hello
+    <div class=foo>Nested</div>
+  </main>`;
+
+const TEST_URI_INLINE_SHEET = `
+  <style>${STYLE}</style>
+  ${HTML}`;
+
+const TEST_URI_CONSTRUCTED_SHEET = `
+  ${HTML}
+  <script>
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(\`${STYLE}\`);
+    document.adoptedStyleSheets.push(sheet);
+  </script>
+`;
+
+add_task(async function test_inline_sheet() {
+  info("Run test with inline stylesheet");
+  await runTest(TEST_URI_INLINE_SHEET);
+});
+
+add_task(async function test_constructed_sheet() {
+  info("Run test with constructed stylesheet");
+  await runTest(TEST_URI_CONSTRUCTED_SHEET);
+});
+
+async function runTest(uri) {
+  await addTab(`data:text/html,<meta charset=utf8>${encodeURIComponent(uri)}`);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode(".foo", inspector);
+
+  info(`Modify color in "&.foo" rule`);
+  await updateDeclaration(view, 1, { color: "gold" }, { color: "white" });
+  is(
+    await getComputedStyleProperty(".foo", null, "color"),
+    "rgb(255, 255, 255)",
+    "color was set to white on .foo"
+  );
+
+  info(`Modify background-color in "& > .foo" rule`);
+  await updateDeclaration(
+    view,
+    2,
+    { "background-color": "teal" },
+    { "background-color": "blue" }
+  );
+  is(
+    await getComputedStyleProperty(".foo", null, "background-color"),
+    "rgb(0, 0, 255)",
+    "background-color was set to blue on .foo…"
+  );
+  is(
+    await getComputedStyleProperty(".foo", null, "color"),
+    "rgb(255, 255, 255)",
+    "…and color is still white"
+  );
+
+  await selectNode("main", inspector);
+  info(`Modify background-color in "main" rule`);
+  await updateDeclaration(
+    view,
+    1,
+    { "background-color": "tomato" },
+    { "background-color": "red" }
+  );
+  is(
+    await getComputedStyleProperty("main", null, "background-color"),
+    "rgb(255, 0, 0)",
+    "background-color was set to red on <main>…"
+  );
+  is(
+    await getComputedStyleProperty(".foo", null, "background-color"),
+    "rgb(0, 0, 255)",
+    "…background-color is still blue on .foo…"
+  );
+  is(
+    await getComputedStyleProperty(".foo", null, "color"),
+    "rgb(255, 255, 255)",
+    "…and color is still white"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js
new file mode 100644
index 0000000000..172c01d511
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js
@@ -0,0 +1,130 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Checking properties orders and overrides in the rule-view.
+
+const TEST_URI = "<style>#testid {}</style><div id='testid'>Styled Node</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const elementStyle = view._elementStyle;
+  const elementRule = elementStyle.rules[1];
+
+  info("Checking rules insertion order and checking the applied style");
+  const firstProp = await addProperty(view, 1, "background-color", "green");
+  let secondProp = await addProperty(view, 1, "background-color", "blue");
+
+  is(elementRule.textProps[0], firstProp, "Rules should be in addition order.");
+  is(
+    elementRule.textProps[1],
+    secondProp,
+    "Rules should be in addition order."
+  );
+
+  // rgb(0, 0, 255) = blue
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Second property should have been used."
+  );
+
+  info("Removing the second property and checking the applied style again");
+  await removeProperty(view, secondProp);
+  // rgb(0, 128, 0) = green
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 128, 0)",
+    "After deleting second property, first should be used."
+  );
+
+  info(
+    "Creating a new second property and checking that the insertion order " +
+      "is still the same"
+  );
+
+  secondProp = await addProperty(view, 1, "background-color", "blue");
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "New property should be used."
+  );
+  is(
+    elementRule.textProps[0],
+    firstProp,
+    "Rules shouldn't have switched places."
+  );
+  is(
+    elementRule.textProps[1],
+    secondProp,
+    "Rules shouldn't have switched places."
+  );
+
+  info("Disabling the second property and checking the applied style");
+  await togglePropStatus(view, secondProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 128, 0)",
+    "After disabling second property, first value should be used"
+  );
+
+  info("Disabling the first property too and checking the applied style");
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgba(0, 0, 0, 0)",
+    "After disabling both properties, value should be empty."
+  );
+
+  info("Re-enabling the second propertyt and checking the applied style");
+  await togglePropStatus(view, secondProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Value should be set correctly after re-enabling"
+  );
+
+  info(
+    "Re-enabling the first property and checking the insertion order " +
+      "is still respected"
+  );
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Re-enabling an earlier property shouldn't make it override " +
+      "a later property."
+  );
+  is(
+    elementRule.textProps[0],
+    firstProp,
+    "Rules shouldn't have switched places."
+  );
+  is(
+    elementRule.textProps[1],
+    secondProp,
+    "Rules shouldn't have switched places."
+  );
+  info("Modifying the first property and checking the applied style");
+  await setProperty(view, firstProp, "purple");
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Modifying an earlier property shouldn't override a later property."
+  );
+});
+
+async function getValue(selector, propName) {
+  const value = await getComputedStyleProperty(selector, null, propName);
+  return value;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_01.js
new file mode 100644
index 0000000000..c929d252da
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_01.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests removing a property by clearing the property name and pressing the
+// return key, and checks if the focus is moved to the appropriate editable
+// field.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Getting the first property in the #testid rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  let prop = rule.textProps[0];
+
+  info("Deleting the name of that property to remove the property");
+  await removeProperty(view, prop, false);
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  info("Getting the new first property in the rule");
+  prop = rule.textProps[0];
+
+  let editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "Focus should have moved to the next property name"
+  );
+
+  info("Deleting the name of that property to remove the property");
+  view.styleDocument.activeElement.blur();
+  await removeProperty(view, prop, false);
+
+  newValue = await getRulePropertyValue(0, 0, "color");
+  is(newValue, "", "color should have been unset.");
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(rule.editor.newPropSpan),
+    editor,
+    "Focus should have moved to the new property span"
+  );
+  is(rule.textProps.length, 0, "All properties should have been removed.");
+  is(
+    rule.editor.propertyList.children.length,
+    1,
+    "Should have the new property span."
+  );
+
+  view.styleDocument.activeElement.blur();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_02.js
new file mode 100644
index 0000000000..b5f0673b5d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_02.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests removing a property by clearing the property value and pressing the
+// return key, and checks if the focus is moved to the appropriate editable
+// field.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Getting the first property in the rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  let prop = rule.textProps[0];
+
+  info("Clearing the property value");
+  await setProperty(view, prop, null, { blurNewProperty: false });
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  info("Getting the new first property in the rule");
+  prop = rule.textProps[0];
+
+  let editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "Focus should have moved to the next property name"
+  );
+  view.styleDocument.activeElement.blur();
+
+  info("Clearing the property value");
+  await setProperty(view, prop, null, { blurNewProperty: false });
+
+  newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "color should have been unset.");
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(rule.editor.newPropSpan),
+    editor,
+    "Focus should have moved to the new property span"
+  );
+  is(rule.textProps.length, 0, "All properties should have been removed.");
+  is(
+    rule.editor.propertyList.children.length,
+    1,
+    "Should have the new property span."
+  );
+
+  view.styleDocument.activeElement.blur();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_03.js
new file mode 100644
index 0000000000..d5bc376dd4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_03.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests removing a property by clearing the property name and pressing shift
+// and tab keys, and checks if the focus is moved to the appropriate editable
+// field.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Getting the second property in the rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  let prop = rule.textProps[1];
+
+  info("Clearing the property value and pressing shift-tab");
+  let editor = await focusEditableField(view, prop.editor.valueSpan);
+  const onValueDone = view.once("ruleview-changed");
+  editor.input.value = "";
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onValueDone;
+
+  let newValue = await getRulePropertyValue(0, 0, "color");
+  is(newValue, "", "color should have been unset.");
+  is(
+    prop.editor.valueSpan.textContent,
+    "",
+    "'' property value is correctly set."
+  );
+
+  info("Pressing shift-tab again to focus the previous property value");
+  const onValueFocused = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onValueFocused;
+
+  info("Getting the first property in the rule");
+  prop = rule.textProps[0];
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(prop.editor.valueSpan),
+    editor,
+    "Focus should have moved to the previous property value"
+  );
+
+  info("Pressing shift-tab again to focus the property name");
+  const onNameFocused = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onNameFocused;
+
+  info("Removing the name and pressing shift-tab to focus the selector");
+  const onNameDeleted = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.styleWindow);
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onNameDeleted;
+
+  newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(rule.editor.selectorText),
+    editor,
+    "Focus should have moved to the selector text."
+  );
+  is(rule.textProps.length, 0, "All properties should have been removed.");
+  ok(
+    !rule.editor.propertyList.hasChildNodes(),
+    "Should not have any properties."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_04.js
new file mode 100644
index 0000000000..0d9915285c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_04.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that removing the only declaration from a rule and unselecting then re-selecting
+// the element will not restore the removed declaration. Bug 1512956
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+  <div id='empty'></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Select original node");
+  await selectNode("#testid", inspector);
+
+  info("Get the first property in the #testid rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = rule.textProps[0];
+
+  info("Delete the property name to remove the declaration");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await removeProperty(view, prop, false);
+  info("Wait for Rule view to update");
+  await onRuleViewChanged;
+
+  is(rule.textProps.length, 0, "No CSS properties left on the rule");
+
+  info("Select another node");
+  await selectNode("#empty", inspector);
+
+  info("Select original node again");
+  await selectNode("#testid", inspector);
+
+  is(rule.textProps.length, 0, "Still no CSS properties on the rule");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_01.js
new file mode 100644
index 0000000000..ef4dac4e23
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_01.js
@@ -0,0 +1,165 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing adding new properties via the inplace-editors in the rule
+// view.
+// FIXME: some of the inplace-editor focus/blur/commit/revert stuff
+// should be factored out in head.js
+
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background-color: blue;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
+var BACKGROUND_IMAGE_URL = 'url("' + URL_ROOT + 'doc_test_image.png")';
+
+var TEST_DATA = [
+  { name: "border-color", value: "red", isValid: true },
+  { name: "background-image", value: BACKGROUND_IMAGE_URL, isValid: true },
+  { name: "border", value: "solid 1px foo", isValid: false },
+];
+
+const DATA = [
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+];
+
+add_task(async function () {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  for (const { name, value, isValid } of TEST_DATA) {
+    await testEditProperty(view, rule, name, value, isValid);
+  }
+
+  checkResults();
+});
+
+async function testEditProperty(view, rule, name, value, isValid) {
+  info("Test editing existing property name/value fields");
+
+  const doc = rule.editor.doc;
+  const prop = rule.textProps[0];
+
+  info("Focusing an existing property name in the rule-view");
+  let editor = await focusEditableField(view, prop.editor.nameSpan, 32, 1);
+
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "The property name editor got focused"
+  );
+  let input = editor.input;
+  is(
+    input.getAttribute("aria-label"),
+    "Property name",
+    "Property name input has expected aria-label"
+  );
+
+  info(
+    "Entering a new property name, including : to commit and " +
+      "focus the value"
+  );
+  const onValueFocus = once(rule.editor.element, "focus", true);
+  const onNameDone = view.once("ruleview-changed");
+  EventUtils.sendString(name + ":", doc.defaultView);
+  await onValueFocus;
+  await onNameDone;
+
+  // Getting the value editor after focus
+  editor = inplaceEditor(doc.activeElement);
+  input = editor.input;
+  is(inplaceEditor(prop.editor.valueSpan), editor, "Focus moved to the value.");
+
+  info("Entering a new value, including ; to commit and blur the value");
+  const onValueDone = view.once("ruleview-changed");
+  const onBlur = once(input, "blur");
+  EventUtils.sendString(value + ";", doc.defaultView);
+  await onBlur;
+  await onValueDone;
+
+  is(
+    prop.editor.isValid(),
+    isValid,
+    value + " is " + isValid ? "valid" : "invalid"
+  );
+
+  info("Checking that the style property was changed on the content page");
+  const propValue = await getRulePropertyValue(0, 0, name);
+  if (isValid) {
+    is(propValue, value, name + " should have been set.");
+  } else {
+    isnot(propValue, value, name + " shouldn't have been set.");
+  }
+}
+
+function checkResults() {
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const events = snapshot.parent.filter(
+    event =>
+      event[1] === "devtools.main" &&
+      event[2] === "edit_rule" &&
+      event[3] === "ruleview"
+  );
+
+  for (const i in DATA) {
+    const [timestamp, category, method, object] = events[i];
+    const expected = DATA[i];
+
+    // ignore timestamp
+    Assert.greater(timestamp, 0, "timestamp is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js
new file mode 100644
index 0000000000..373f78eab6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js
@@ -0,0 +1,143 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test several types of rule-view property edition
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    background-color: blue;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await testEditProperty(inspector, view);
+  await testDisableProperty(inspector, view);
+  await testPropertyStillMarkedDirty(inspector, view);
+});
+
+async function testEditProperty(inspector, ruleView) {
+  const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
+  const prop = getTextProperty(ruleView, 1, { "background-color": "blue" });
+
+  let editor = await focusEditableField(ruleView, prop.editor.nameSpan);
+  let input = editor.input;
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "Next focused editor should be the name editor."
+  );
+
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  // Try clicking on the editor's input again, shouldn't cause trouble
+  // (see bug 761665).
+  EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
+  input.select();
+
+  info(
+    'Entering property name "border-color" followed by a colon to ' +
+      "focus the value"
+  );
+  const onNameDone = ruleView.once("ruleview-changed");
+  const onFocus = once(idRule.editor.element, "focus", true);
+  EventUtils.sendString("border-color:", ruleView.styleWindow);
+  await onFocus;
+  await onNameDone;
+
+  info("Verifying that the focused field is the valueSpan");
+  editor = inplaceEditor(ruleView.styleDocument.activeElement);
+  input = editor.input;
+  is(
+    inplaceEditor(prop.editor.valueSpan),
+    editor,
+    "Focus should have moved to the value."
+  );
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  info("Entering a value following by a semi-colon to commit it");
+  const onBlur = once(editor.input, "blur");
+  // Use sendChar() to pass each character as a string so that we can test
+  // prop.editor.warning.hidden after each character.
+  for (const ch of "red;") {
+    const onPreviewDone = ruleView.once("ruleview-changed");
+    EventUtils.sendChar(ch, ruleView.styleWindow);
+    ruleView.debounce.flush();
+    await onPreviewDone;
+    is(
+      prop.editor.warning.hidden,
+      true,
+      "warning triangle is hidden or shown as appropriate"
+    );
+  }
+  await onBlur;
+
+  const newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "border-color should have been set.");
+
+  ruleView.styleDocument.activeElement.blur();
+  await addProperty(ruleView, 1, "color", "red", { commitValueWith: ";" });
+
+  const props = ruleView.element.querySelectorAll(".ruleview-property");
+  for (let i = 0; i < props.length; i++) {
+    is(
+      props[i].hasAttribute("dirty"),
+      i <= 1,
+      "props[" + i + "] marked dirty as appropriate"
+    );
+  }
+}
+
+async function testDisableProperty(inspector, ruleView) {
+  const prop = getTextProperty(ruleView, 1, {
+    "border-color": "red",
+    color: "red",
+  });
+
+  info("Disabling a property");
+  await togglePropStatus(ruleView, prop);
+
+  let newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "", "Border-color should have been unset.");
+
+  info("Enabling the property again");
+  await togglePropStatus(ruleView, prop);
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "Border-color should have been reset.");
+}
+
+async function testPropertyStillMarkedDirty(inspector, ruleView) {
+  // Select an unstyled node.
+  await selectNode("#testid2", inspector);
+
+  // Select the original node again.
+  await selectNode("#testid", inspector);
+
+  const props = ruleView.element.querySelectorAll(".ruleview-property");
+  for (let i = 0; i < props.length; i++) {
+    is(
+      props[i].hasAttribute("dirty"),
+      i <= 1,
+      "props[" + i + "] marked dirty as appropriate"
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js
new file mode 100644
index 0000000000..e664093e9d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that emptying out an existing value removes the property and
+// doesn't cause any other issues.  See also Bug 1150780.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background-color: blue;
+    font-size: 12px;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = getTextProperty(view, 1, {
+    "background-color": "blue",
+  }).editor;
+
+  await focusEditableField(view, propEditor.valueSpan);
+
+  info("Deleting all the text out of a value field");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["DELETE", "TAB"]);
+  await onRuleViewChanged;
+
+  info("Pressing enter a couple times to cycle through editors");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["TAB"]);
+  onRuleViewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["TAB"]);
+  await onRuleViewChanged;
+
+  isnot(propEditor.nameSpan.style.display, "none", "The name span is visible");
+  is(ruleEditor.rule.textProps.length, 2, "Correct number of props");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js
new file mode 100644
index 0000000000..070832710b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a disabled property remains disabled when the escaping out of
+// the property editor.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+
+  info("Disabling a property");
+  await togglePropStatus(view, prop);
+
+  const newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  await testEditDisableProperty(view, prop, "name", "VK_ESCAPE");
+  await testEditDisableProperty(view, prop, "value", "VK_ESCAPE");
+  await testEditDisableProperty(view, prop, "value", "VK_TAB");
+  await testEditDisableProperty(view, prop, "value", "VK_RETURN");
+});
+
+async function testEditDisableProperty(view, prop, fieldType, commitKey) {
+  const field =
+    fieldType === "name" ? prop.editor.nameSpan : prop.editor.valueSpan;
+
+  const editor = await focusEditableField(view, field);
+
+  ok(
+    !prop.editor.element.classList.contains("ruleview-overridden"),
+    "property is not overridden."
+  );
+  is(
+    prop.editor.enable.style.visibility,
+    "hidden",
+    "property enable checkbox is hidden."
+  );
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should remain unset.");
+
+  let onChangeDone;
+  if (fieldType === "value") {
+    onChangeDone = view.once("ruleview-changed");
+  }
+
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey(commitKey, {}, view.styleWindow);
+  await onBlur;
+  await onChangeDone;
+
+  ok(!prop.enabled, "property is disabled.");
+  ok(
+    prop.editor.element.classList.contains("ruleview-overridden"),
+    "property is overridden."
+  );
+  is(
+    prop.editor.enable.style.visibility,
+    "visible",
+    "property enable checkbox is visible."
+  );
+  ok(
+    !prop.editor.enable.getAttribute("checked"),
+    "property enable checkbox is not checked."
+  );
+
+  newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should remain unset.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js
new file mode 100644
index 0000000000..9bfc002a4a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a disabled property is re-enabled if the property name or value is
+// modified
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+
+  info("Disabling background-color property");
+  await togglePropStatus(view, prop);
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  info(
+    "Entering a new property name, including : to commit and " +
+      "focus the value"
+  );
+
+  await focusEditableField(view, prop.editor.nameSpan);
+  const onNameDone = view.once("ruleview-changed");
+  EventUtils.sendString("border-color:", view.styleWindow);
+  await onNameDone;
+
+  info("Escape editing the property value");
+  const onValueDone = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onValueDone;
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "blue", "border-color should have been set.");
+
+  ok(prop.enabled, "border-color property is enabled.");
+  ok(
+    !prop.editor.element.classList.contains("ruleview-overridden"),
+    "border-color is not overridden"
+  );
+
+  info("Disabling border-color property");
+  await togglePropStatus(view, prop);
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "", "border-color should have been unset.");
+
+  info("Enter a new property value for the border-color property");
+  await setProperty(view, prop, "red");
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "new border-color should have been set.");
+
+  ok(prop.enabled, "border-color property is enabled.");
+  ok(
+    !prop.editor.element.classList.contains("ruleview-overridden"),
+    "border-color is not overridden"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js
new file mode 100644
index 0000000000..1b9a04ba5d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that editing a property's priority is behaving correctly, and disabling
+// and editing the property will re-enable the property.
+
+const TEST_URI = `
+  <style type='text/css'>
+  body {
+    background-color: green !important;
+  }
+  body {
+    background-color: red;
+  }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("body", inspector);
+
+  const prop = getTextProperty(view, 1, { "background-color": "red" });
+
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(0, 128, 0)",
+    "green background color is set."
+  );
+
+  await setProperty(view, prop, "red !important");
+
+  is(
+    prop.editor.valueSpan.textContent,
+    "red !important",
+    "'red !important' property value is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(255, 0, 0)",
+    "red background color is set."
+  );
+
+  info("Disabling red background color property");
+  await togglePropStatus(view, prop);
+
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(0, 128, 0)",
+    "green background color is set."
+  );
+
+  await setProperty(view, prop, "red");
+
+  is(
+    prop.editor.valueSpan.textContent,
+    "red",
+    "'red' property value is correctly set."
+  );
+  ok(prop.enabled, "red background-color property is enabled.");
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(0, 128, 0)",
+    "green background color is set."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js
new file mode 100644
index 0000000000..9edd910fa6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that adding multiple values will enable the property even if the
+// property does not change, and that the extra values are added correctly.
+
+const STYLE = "#testid { background-color: #f00 }";
+
+const TEST_URI_INLINE_SHEET = `
+  <style>${STYLE}</style>
+  <div id='testid'>Styled Node</div>
+`;
+
+const TEST_URI_CONSTRUCTED_SHEET = `
+  <div id='testid'>Styled Node</div>
+  <script>
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync("${STYLE}");
+    document.adoptedStyleSheets.push(sheet);
+  </script>
+`;
+
+async function runTest(testUri) {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(testUri));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = rule.textProps[0];
+
+  info("Disabling red background color property");
+  await togglePropStatus(view, prop);
+  ok(!prop.enabled, "red background-color property is disabled.");
+
+  const editor = await focusEditableField(view, prop.editor.valueSpan);
+  const onDone = view.once("ruleview-changed");
+  editor.input.value = "red; color: red;";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onDone;
+
+  is(
+    prop.editor.valueSpan.textContent,
+    "red",
+    "'red' property value is correctly set."
+  );
+  ok(prop.enabled, "red background-color property is enabled.");
+  is(
+    await getComputedStyleProperty("#testid", null, "background-color"),
+    "rgb(255, 0, 0)",
+    "red background color is set."
+  );
+
+  const propEditor = rule.textProps[1].editor;
+  is(
+    propEditor.nameSpan.textContent,
+    "color",
+    "new 'color' property name is correctly set."
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "red",
+    "new 'red' property value is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("#testid", null, "color"),
+    "rgb(255, 0, 0)",
+    "red color is set."
+  );
+}
+
+add_task(async function test_inline_sheet() {
+  await runTest(TEST_URI_INLINE_SHEET);
+});
+
+add_task(async function test_constructed_sheet() {
+  await runTest(TEST_URI_CONSTRUCTED_SHEET);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_08.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_08.js
new file mode 100644
index 0000000000..d00a7c2c24
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_08.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that renaming a property works.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: #FFF;
+  }
+  </style>
+  <div style='color: red' id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Get the color property editor");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+  is(ruleEditor.rule.textProps[0].name, "color");
+
+  info("Focus the property name field");
+  await focusEditableField(ruleEditor.ruleView, propEditor.nameSpan, 32, 1);
+
+  info("Rename the property to background-color");
+  // Expect 3 events: the value editor being focused, the ruleview-changed event
+  // which signals that the new value has been previewed (fires once when the
+  // value gets focused), and the markupmutation event since we're modifying an
+  // inline style.
+  const onValueFocus = once(ruleEditor.element, "focus", true);
+  let onRuleViewChanged = ruleEditor.ruleView.once("ruleview-changed");
+  const onMutation = inspector.once("markupmutation");
+  EventUtils.sendString("background-color:", ruleEditor.doc.defaultView);
+  await onValueFocus;
+  await onRuleViewChanged;
+  await onMutation;
+
+  is(ruleEditor.rule.textProps[0].name, "background-color");
+  await waitForComputedStyleProperty(
+    "#testid",
+    null,
+    "background-color",
+    "rgb(255, 0, 0)"
+  );
+
+  is(
+    await getComputedStyleProperty("#testid", null, "color"),
+    "rgb(255, 255, 255)",
+    "color is white"
+  );
+
+  // The value field is still focused. Blur it now and wait for the
+  // ruleview-changed event to avoid pending requests.
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await onRuleViewChanged;
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js
new file mode 100644
index 0000000000..ab54c98729
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a newProperty editor is only created if no other editor was
+// previously displayed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testClickOnEmptyAreaToCloseEditor(inspector, view);
+});
+
+function synthesizeMouseOnEmptyArea(view) {
+  // any text property editor will do
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+  const propEditor = prop.editor;
+  const valueContainer = propEditor.valueContainer;
+  const valueRect = valueContainer.getBoundingClientRect();
+  // click right next to the ";" at the end of valueContainer
+  EventUtils.synthesizeMouse(
+    valueContainer,
+    valueRect.width + 1,
+    1,
+    {},
+    view.styleWindow
+  );
+}
+
+async function testClickOnEmptyAreaToCloseEditor(inspector, view) {
+  // Start at the beginning: start to add a rule to the element's style
+  // declaration, add some text, then press escape.
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+  const propEditor = prop.editor;
+
+  info("Create a property value editor");
+  let editor = await focusEditableField(view, propEditor.valueSpan);
+  ok(editor.input, "The inplace-editor field is ready");
+
+  info(
+    "Close the property value editor by clicking on an empty area " +
+      "in the rule editor"
+  );
+  const onRuleViewChanged = view.once("ruleview-changed");
+  let onBlur = once(editor.input, "blur");
+  synthesizeMouseOnEmptyArea(view);
+  await onBlur;
+  await onRuleViewChanged;
+  ok(!view.isEditing, "No inplace editor should be displayed in the ruleview");
+
+  info("Create new newProperty editor by clicking again on the empty area");
+  const onFocus = once(ruleEditor.element, "focus", true);
+  synthesizeMouseOnEmptyArea(view);
+  await onFocus;
+  editor = inplaceEditor(ruleEditor.element.ownerDocument.activeElement);
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    editor,
+    "New property editor was created"
+  );
+
+  info("Close the newProperty editor by clicking again on the empty area");
+  onBlur = once(editor.input, "blur");
+  synthesizeMouseOnEmptyArea(view);
+  await onBlur;
+
+  ok(!view.isEditing, "No inplace editor should be displayed in the ruleview");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js
new file mode 100644
index 0000000000..3db2164b0c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+  <style>
+    div {
+      color: red;
+      width: 10; /* This document is in quirks mode so this value should be valid */
+    }
+  </style>
+  <div></div>
+`;
+
+// Test that CSS property names are case insensitive when validating, and that
+// quirks mode is accounted for when validating.
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+
+  await selectNode("div", inspector);
+  let prop = getTextProperty(ruleView, 1, { color: "red" });
+
+  let onRuleViewChanged;
+
+  info(`Rename the CSS property name to "Color"`);
+  onRuleViewChanged = ruleView.once("ruleview-changed");
+  await renameProperty(ruleView, prop, "Color");
+  info("Wait for Rule view to update");
+  await onRuleViewChanged;
+
+  is(prop.overridden, false, "Titlecase property is not overriden");
+  is(prop.enabled, true, "Titlecase property is enabled");
+  is(prop.isNameValid(), true, "Titlecase property is valid");
+
+  info(`Rename the CSS property name to "COLOR"`);
+  onRuleViewChanged = ruleView.once("ruleview-changed");
+  await renameProperty(ruleView, prop, "COLOR");
+  info("Wait for Rule view to update");
+  await onRuleViewChanged;
+
+  is(prop.overridden, false, "Uppercase property is not overriden");
+  is(prop.enabled, true, "Uppercase property is enabled");
+  is(prop.isNameValid(), true, "Uppercase property is valid");
+
+  info(`Checking width validity`);
+  prop = getTextProperty(ruleView, 1, { width: "10" });
+  is(prop.isNameValid(), true, "width is a valid property");
+  is(prop.isValid(), true, "10 is a valid property value in quirks mode");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js
new file mode 100644
index 0000000000..52e11097cc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing ruleview inplace-editor is not blurred when clicking on the ruleview
+// container scrollbar.
+
+const TEST_URI = `
+  <style type="text/css">
+    div.testclass {
+      color: black;
+    }
+    .a {
+      color: #aaa;
+    }
+    .b {
+      color: #bbb;
+    }
+    .c {
+      color: #ccc;
+    }
+    .d {
+      color: #ddd;
+    }
+    .e {
+      color: #eee;
+    }
+    .f {
+      color: #fff;
+    }
+  </style>
+  <div class="testclass a b c d e f">Styled Node</div>
+`;
+
+add_task(async function () {
+  info("Toolbox height should be small enough to force scrollbars to appear");
+  await new Promise(done => {
+    const options = { set: [["devtools.toolbox.footer.height", 200]] };
+    SpecialPowers.pushPrefEnv(options, done);
+  });
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+
+  info("Check we have an overflow on the ruleview container.");
+  const container = view.element;
+  const hasScrollbar = container.offsetHeight < container.scrollHeight;
+  ok(hasScrollbar, "The rule view container should have a vertical scrollbar.");
+
+  info("Focusing an existing selector name in the rule-view.");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor is focused."
+  );
+
+  info("Click on the scrollbar element.");
+  await clickOnRuleviewScrollbar(view);
+
+  is(
+    editor.input,
+    view.styleDocument.activeElement,
+    "The editor input should still be focused."
+  );
+
+  info("Check a new value can still be committed in the editable field");
+  const newValue = ".testclass.a.b.c.d.e.f";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Enter new value and commit.");
+  editor.input.value = newValue;
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+  ok(getRuleViewRule(view, newValue), "Rule with '" + newValue + " 'exists.");
+});
+
+async function clickOnRuleviewScrollbar(view) {
+  const container = view.element.parentNode;
+  const onScroll = once(container, "scroll");
+  const rect = container.getBoundingClientRect();
+  // click 5 pixels before the bottom-right corner should hit the scrollbar
+  EventUtils.synthesizeMouse(
+    container,
+    rect.width - 5,
+    rect.height - 5,
+    {},
+    view.styleWindow
+  );
+  await onScroll;
+
+  ok(true, "The rule view container scrolled after clicking on the scrollbar.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js
new file mode 100644
index 0000000000..e3c1822201
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor remains available and focused after clicking
+// in its input.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testClickOnSelectorEditorInput(view);
+});
+
+async function testClickOnSelectorEditorInput(view) {
+  info("Test clicking inside the selector editor input");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+  const editorInput = editor.input;
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Click inside the editor input");
+  const onClick = once(editorInput, "click");
+  EventUtils.synthesizeMouse(editor.input, 2, 1, {}, view.styleWindow);
+  await onClick;
+  is(
+    editor.input,
+    view.styleDocument.activeElement,
+    "The editor input should still be focused"
+  );
+  ok(!ruleEditor.newPropSpan, "No newProperty editor was created");
+
+  info("Doubleclick inside the editor input");
+  const onDoubleClick = once(editorInput, "dblclick");
+  EventUtils.synthesizeMouse(
+    editor.input,
+    2,
+    1,
+    { clickCount: 2 },
+    view.styleWindow
+  );
+  await onDoubleClick;
+  is(
+    editor.input,
+    view.styleDocument.activeElement,
+    "The editor input should still be focused"
+  );
+  ok(!ruleEditor.newPropSpan, "No newProperty editor was created");
+
+  info("Click outside the editor input");
+  const onBlur = once(editorInput, "blur");
+  const rect = editorInput.getBoundingClientRect();
+  EventUtils.synthesizeMouse(
+    editorInput,
+    rect.width + 5,
+    rect.height / 2,
+    {},
+    view.styleWindow
+  );
+  await onBlur;
+
+  isnot(
+    editorInput,
+    view.styleDocument.activeElement,
+    "The editor input should no longer be focused"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-commit.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-commit.js
new file mode 100644
index 0000000000..bb5c0d99f6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-commit.js
@@ -0,0 +1,145 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test selector value is correctly displayed when committing the inplace editor
+// with ENTER, ESC, SHIFT+TAB and TAB
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid1 {
+      text-align: center;
+    }
+    #testid2 {
+      text-align: center;
+    }
+    #testid3 {
+    }
+  </style>
+  <div id='testid1'>Styled Node</div>
+  <div id='testid2'>Styled Node</div>
+  <div id='testid3'>Styled Node</div>
+`;
+
+const TEST_DATA = [
+  {
+    node: "#testid1",
+    value: ".testclass",
+    commitKey: "VK_ESCAPE",
+    modifiers: {},
+    expected: "#testid1",
+  },
+  {
+    node: "#testid1",
+    value: ".testclass1",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: ".testclass1",
+  },
+  {
+    node: "#testid2",
+    value: ".testclass2",
+    commitKey: "VK_TAB",
+    modifiers: {},
+    expected: ".testclass2",
+  },
+  {
+    node: "#testid3",
+    value: ".testclass3",
+    commitKey: "VK_TAB",
+    modifiers: { shiftKey: true },
+    expected: ".testclass3",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const data of TEST_DATA) {
+    await runTestData(inspector, view, data);
+  }
+});
+
+async function runTestData(inspector, view, data) {
+  const { node, value, commitKey, modifiers, expected } = data;
+
+  info(
+    "Updating " +
+      node +
+      " to " +
+      value +
+      " and committing with " +
+      commitKey +
+      ". Expecting: " +
+      expected
+  );
+
+  info("Selecting the test element");
+  await selectNode(node, inspector);
+
+  let idRuleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Enter the new selector value: " + value);
+  editor.input.value = value;
+
+  info("Entering the commit key " + commitKey + " " + modifiers);
+  EventUtils.synthesizeKey(commitKey, modifiers);
+
+  const activeElement = view.styleDocument.activeElement;
+
+  if (commitKey === "VK_ESCAPE") {
+    is(
+      idRuleEditor.rule.selectorText,
+      expected,
+      "Value is as expected: " + expected
+    );
+    is(idRuleEditor.isEditing, false, "Selector is not being edited.");
+    is(idRuleEditor.selectorText, activeElement, "Focus is on selector span.");
+    return;
+  }
+
+  await once(view, "ruleview-changed");
+
+  ok(
+    getRuleViewRule(view, expected),
+    "Rule with " + expected + " selector exists."
+  );
+
+  if (modifiers.shiftKey) {
+    idRuleEditor = getRuleViewRuleEditor(view, 0);
+  }
+
+  if (
+    commitKey === "VK_RETURN" &&
+    !Services.prefs.getBoolPref("devtools.inspector.rule-view.focusNextOnEnter")
+  ) {
+    is(idRuleEditor.isEditing, false, "Selector is not being edited.");
+    is(idRuleEditor.selectorText, activeElement, "Focus is on selector span.");
+    return;
+  }
+
+  const rule = idRuleEditor.rule;
+  if (rule.textProps.length) {
+    is(
+      inplaceEditor(rule.textProps[0].editor.nameSpan).input,
+      activeElement,
+      "Focus is on the first property name span."
+    );
+  } else {
+    is(
+      inplaceEditor(idRuleEditor.newPropSpan).input,
+      activeElement,
+      "Focus is on the new property span."
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js
new file mode 100644
index 0000000000..673ff18185
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing editing nested rules selector in the rule view.
+
+const STYLE = `
+    h1 {
+      color: lime;
+      &.foo {
+        color: red;
+      }
+    }`;
+
+const HTML = `<h1 class=foo>Nested</h1>`;
+
+const TEST_URI_INLINE_SHEET = `
+  <style>${STYLE}</style>
+  ${HTML}`;
+
+const TEST_URI_CONSTRUCTED_SHEET = `
+  ${HTML}
+  <script>
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(\`${STYLE}\`);
+    document.adoptedStyleSheets.push(sheet);
+  </script>
+`;
+
+add_task(async function test_inline_sheet() {
+  info("Run test with inline stylesheet");
+  await runTest(TEST_URI_INLINE_SHEET);
+});
+
+add_task(async function test_constructed_sheet() {
+  info("Run test with constructed stylesheet");
+  await runTest(TEST_URI_CONSTRUCTED_SHEET);
+});
+
+async function runTest(uri) {
+  await addTab(`data:text/html,<meta charset=utf8>${encodeURIComponent(uri)}`);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  is(
+    await getComputedStyleProperty("h1", null, "color"),
+    "rgb(255, 0, 0)",
+    "h1 color is red initially"
+  );
+
+  info(`Modify "&.foo" selector into "&.bar"`);
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+  const onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.value = "&.bar";
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(
+    await getComputedStyleProperty("h1", null, "color"),
+    "rgb(0, 255, 0)",
+    "h1 color is now lime, as the new selector does not match the element"
+  );
+
+  info(`Modify color in "h1" rule to blue`);
+  await updateDeclaration(view, 2, { color: "lime" }, { color: "blue" });
+  is(
+    await getComputedStyleProperty("h1", null, "color"),
+    "rgb(0, 0, 255)",
+    "h1 color is now blue"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_01.js
new file mode 100644
index 0000000000..be18919f68
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_01.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <span>This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+
+  info("Selecting the modified element with the new rule");
+  await selectNode("span", inspector);
+  await checkModifiedElement(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_02.js
new file mode 100644
index 0000000000..70b58d4e42
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_02.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view with pseudo
+// classes.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+    #testid3::first-letter {
+      text-decoration: "italic"
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+  <div class="testclass2">A</div>
+  <div id="testid3">B</div>
+`;
+
+const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
+
+add_task(async function () {
+  // Expand the pseudo-elements section by default.
+  Services.prefs.setBoolPref(PSEUDO_PREF, true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode(".testclass", inspector);
+  await testEditSelector(view, "div:nth-child(1)");
+
+  info("Selecting the modified element");
+  await selectNode("#testid", inspector);
+  await checkModifiedElement(view, "div:nth-child(1)");
+
+  info("Selecting the test element");
+  await selectNode("#testid3", inspector);
+  await testEditSelector(view, ".testclass2::first-letter");
+
+  info("Selecting the modified element");
+  await selectNode(".testclass2", inspector);
+  await checkModifiedElement(view, ".testclass2::first-letter");
+
+  // Reset the pseudo-elements section pref to its default value.
+  Services.prefs.clearUserPref(PSEUDO_PREF);
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const idRuleEditor =
+    getRuleViewRuleEditor(view, 1) || getRuleViewRuleEditor(view, 1, 0);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name: " + name);
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rule.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+
+  const newRuleEditor =
+    getRuleViewRuleEditor(view, 1) || getRuleViewRuleEditor(view, 1, 0);
+  ok(
+    newRuleEditor.element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_03.js
new file mode 100644
index 0000000000..bbc9175568
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_03.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view with invalid
+// selectors
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testEditSelector(view, "asd@:::!");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+  const onRuleViewChanged = once(view, "ruleview-invalid-selector");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRule(view, name),
+    undefined,
+    "Rule with " + name + " selector should not exist."
+  );
+  ok(
+    getRuleViewRule(view, ".testclass"),
+    "Rule with .testclass selector exists."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_04.js
new file mode 100644
index 0000000000..02a1feaac3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_04.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the selector highlighter is removed when modifying a selector and
+// the selector highlighter works for the newly added unmatched rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    p {
+      background: red;
+    }
+  </style>
+  <p>Test the selector highlighter</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("p", inspector);
+
+  await testSelectorHighlight(view, "p");
+  await testEditSelector(inspector, view, "body");
+  await testSelectorHighlight(view, "body");
+});
+
+async function testSelectorHighlight(view, selector) {
+  info("Test creating selector highlighter");
+
+  info("Clicking on a selector icon");
+  const { highlighter, isShown } = await clickSelectorIcon(view, selector);
+
+  ok(highlighter, "The selector highlighter instance was created");
+  ok(isShown, "The selector highlighter was shown");
+}
+
+async function testEditSelector(inspector, view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+  const onSelectorHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+  EventUtils.synthesizeKey("KEY_Enter");
+
+  info("Waiting for Rules view to update");
+  await onRuleViewChanged;
+  await onSelectorHighlighterHidden;
+  const highlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+
+  ok(!highlighter, "The highlighter instance was removed");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
new file mode 100644
index 0000000000..0baf48cdd4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that adding a new property of an unmatched rule works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+    }
+    .testclass {
+      background-color: white;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+  await testAddProperty(view);
+
+  info("Selecting the modified element with the new rule");
+  await selectNode("span", inspector);
+  await checkModifiedElement(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
+
+async function testAddProperty(view) {
+  info("Test creating a new property");
+  const textProp = await addProperty(view, 1, "text-align", "center");
+
+  is(textProp.value, "center", "Text prop should have been changed.");
+  ok(!textProp.overridden, "Property should not be overridden");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_06.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_06.js
new file mode 100644
index 0000000000..c78bc2c590
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_06.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view with unmatched
+// selectors
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+    div {
+    }
+  </style>
+  <div class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testEditClassSelector(view);
+  await testEditDivSelector(view);
+});
+
+async function testEditClassSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = "body";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Tab");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(ruleEditor.element.getAttribute("unmatched"), "Rule editor is unmatched.");
+  is(
+    getRuleViewRule(view, ".testclass"),
+    undefined,
+    "Rule with .testclass selector should not exist."
+  );
+  ok(getRuleViewRule(view, "body"), "Rule with body selector exists.");
+  is(
+    inplaceEditor(propEditor.nameSpan),
+    inplaceEditor(view.styleDocument.activeElement),
+    "Focus should have moved to the property name."
+  );
+}
+
+async function testEditDivSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 2);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = "asdf";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Tab");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(ruleEditor.element.getAttribute("unmatched"), "Rule editor is unmatched.");
+  is(
+    getRuleViewRule(view, "div"),
+    undefined,
+    "Rule with div selector should not exist."
+  );
+  ok(getRuleViewRule(view, "asdf"), "Rule with asdf selector exists.");
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    inplaceEditor(view.styleDocument.activeElement),
+    "Focus should have moved to the property name."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js
new file mode 100644
index 0000000000..0949a966e8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view overridden search filter does not appear for an
+// unmatched rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      height: 0px;
+    }
+    #testid {
+      height: 1px;
+    }
+    .testclass {
+      height: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Entering the commit key");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const textPropEditor = rule.textProps[0].editor;
+
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    ruleEditor.element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+  ok(textPropEditor.filterProperty.hidden, "Overridden search is hidden.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_08.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_08.js
new file mode 100644
index 0000000000..112e2c83c7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_08.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that reverting a selector edit does the right thing.
+// Bug 1241046.
+
+const TEST_URI = `
+  <style type="text/css">
+    span {
+      color: chartreuse;
+    }
+  </style>
+  <span>
+    <div id="testid" class="testclass">Styled Node</div>
+  </span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode("#testid", inspector);
+
+  let idRuleEditor = getRuleViewRuleEditor(view, 2);
+
+  info("Focusing an existing selector name in the rule-view");
+  let editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = "pre";
+
+  info("Waiting for rule view to update");
+  let onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  info("Re-focusing the selector name in the rule-view");
+  idRuleEditor = getRuleViewRuleEditor(view, 2);
+  editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, "pre"), "Rule with pre selector exists.");
+  is(
+    getRuleViewRuleEditor(view, 2).element.getAttribute("unmatched"),
+    "true",
+    "Rule with pre does not match the current element."
+  );
+
+  // Now change it back.
+  info("Re-entering original selector name and committing");
+  editor.input.value = "span";
+
+  info("Waiting for rule view to update");
+  onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, "span"), "Rule with span selector exists.");
+  is(
+    getRuleViewRuleEditor(view, 2).element.getAttribute("unmatched"),
+    "false",
+    "Rule with span matches the current element."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js
new file mode 100644
index 0000000000..5eef305d0e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js
@@ -0,0 +1,110 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that editing a selector to an unmatched rule does set up the correct
+// property on the rule, and that settings property in said rule does not
+// lead to overriding properties from matched rules.
+// Test that having a rule with both matched and unmatched selectors does work
+// correctly.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      color: black;
+    }
+    .testclass {
+      background-color: white;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+  await testAddImportantProperty(view);
+  await testAddMatchedRule(view, "span, div");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+}
+
+async function testAddImportantProperty(view) {
+  info("Test creating a new property with !important");
+  const textProp = await addProperty(view, 1, "color", "red !important");
+
+  is(textProp.value, "red", "Text prop should have been changed.");
+  is(textProp.priority, "important", 'Text prop has an "important" priority.');
+  ok(!textProp.overridden, "Property should not be overridden");
+
+  const prop = getTextProperty(view, 1, { color: "black" });
+  ok(
+    !prop.overridden,
+    "Existing property on matched rule should not be overridden"
+  );
+}
+
+async function testAddMatchedRule(view, name) {
+  info("Test adding a matching selector");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "false",
+    "Rule with " + name + " does match the current element."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_10.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_10.js
new file mode 100644
index 0000000000..b0f3294516
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_10.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for bug 1293616: make sure that editing a selector
+// keeps the rule in the proper position.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid span, #testid p {
+      background: aqua;
+    }
+    span {
+      background: fuchsia;
+    }
+  </style>
+  <div id="testid">
+    <span class="pickme">
+      Styled Node
+    </span>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".pickme", inspector);
+  await testEditSelector(view);
+});
+
+async function testEditSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = "#testid span";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  is(
+    ruleEditor.element.getAttribute("unmatched"),
+    "false",
+    "Rule editor is matched."
+  );
+
+  let props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  ok(!props[0].overridden, "Background property is not overridden");
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+  props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  ok(props[0].overridden, "Background property is overridden");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_11.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_11.js
new file mode 100644
index 0000000000..73efe28046
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_11.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for bug 1293616, where editing a selector should
+// change the relative priority of the rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background: aqua;
+    }
+    .pickme {
+      background: seagreen;
+    }
+    span {
+      background: fuchsia;
+    }
+  </style>
+  <div>
+    <span id="testid" class="pickme">
+      Styled Node
+    </span>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".pickme", inspector);
+  await testEditSelector(view);
+});
+
+async function testEditSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = ".pickme";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 4, "Should have 4 rules.");
+  is(
+    ruleEditor.element.getAttribute("unmatched"),
+    "false",
+    "Rule editor is matched."
+  );
+
+  let props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  is(props[0].value, "aqua", "Background property is aqua");
+  ok(props[0].overridden, "Background property is overridden");
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+  props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  is(props[0].value, "seagreen", "Background property is seagreen");
+  ok(!props[0].overridden, "Background property is not overridden");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_12.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_12.js
new file mode 100644
index 0000000000..42ed04f933
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_12.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing selectors for rules inside @import'd stylesheets.
+// This is a regression test for bug 1355819.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_edit_imported_selector.html");
+  const { inspector, view } = await openRuleView();
+
+  info("Select the node styled by an @import'd rule");
+  await selectNode("#target", inspector);
+
+  info("Focus the selector in the rule-view");
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  info("Change the selector to something else");
+  editor.input.value = "div";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  info("Check the rules are still displayed correctly");
+  is(view._elementStyle.rules.length, 3, "The element still has 3 rules.");
+
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  is(
+    ruleEditor.element.getAttribute("unmatched"),
+    "false",
+    "Rule editor is matched."
+  );
+  is(ruleEditor.selectorText.textContent, "div", "The new selector is correct");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js
new file mode 100644
index 0000000000..c95506de50
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js
@@ -0,0 +1,481 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that increasing / decreasing values in rule view by dragging with
+// the mouse works correctly.
+
+const TEST_URI = `
+  <style>
+    #test {
+      padding-top: 10px;
+      margin-top: unset;
+      margin-bottom: 0px;
+      width: 0px;
+      border: 1px solid red;
+      line-height: 2;
+      border-width: var(--12px);
+      max-height: +10.2e3vmin;
+      min-height: 1% !important;
+      font-size: 10Q;
+      transform: rotate(45deg);
+      margin-left: 28.3em;
+      animation-delay: +15s;
+      margin-right: -2px;
+      padding-bottom: .9px;
+      rotate: 90deg;
+    }
+  </style>
+  <div id="test"></div>
+`;
+
+const DRAGGABLE_VALUE_CLASSNAME = "ruleview-propertyvalue-draggable";
+
+add_task(async function () {
+  await pushPref("devtools.inspector.draggable_properties", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test", inspector);
+
+  testDraggingClassIsAddedWhenNeeded(view);
+
+  // Check that toggling the feature updates the UI immediately.
+  await pushPref("devtools.inspector.draggable_properties", false);
+  testDraggingClassIsRemovedAfterPrefChange(view);
+
+  await pushPref("devtools.inspector.draggable_properties", true);
+  testDraggingClassIsAddedWhenNeeded(view);
+
+  await testIncrementAngleValue(view);
+  await testPressingEscapeWhileDragging(view);
+  await testUpdateDisabledValue(view);
+  await testWidthIncrements(view);
+  await testDraggingClassIsAddedOnValueUpdate(view);
+});
+
+const PROPERTIES = [
+  {
+    name: "border",
+    value: "1px solid red",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "line-height",
+    value: "2",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "border-width",
+    value: "var(--12px)",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "transform",
+    value: "rotate(45deg)",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "max-height",
+    value: "+10.2e3vmin",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "min-height",
+    value: "1%",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "font-size",
+    value: "10Q",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "margin-left",
+    value: "28.3em",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "animation-delay",
+    value: "+15s",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "margin-right",
+    value: "-2px",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "padding-bottom",
+    value: ".9px",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "rotate",
+    value: "90deg",
+    shouldBeDraggable: true,
+  },
+];
+
+function testDraggingClassIsAddedWhenNeeded(view) {
+  info("Testing class is added or not on different property values");
+  runIsDraggableTest(view, PROPERTIES);
+}
+
+function testDraggingClassIsRemovedAfterPrefChange(view) {
+  info("Testing class is removed if the feature is disabled");
+  runIsDraggableTest(
+    view,
+    // Create a temporary copy of the test PROPERTIES, where shouldBeDraggable is
+    // always false.
+    PROPERTIES.map(prop =>
+      Object.assign({}, prop, { shouldBeDraggable: false })
+    )
+  );
+}
+
+async function testIncrementAngleValue(view) {
+  info("Testing updating an angle value with the angle swatch span");
+  const rotatePropEditor = getTextProperty(view, 1, {
+    rotate: "90deg",
+  }).editor;
+  await runIncrementTest(rotatePropEditor, view, [
+    {
+      startValue: "90deg",
+      expectedEndValue: "100deg",
+      distance: 10,
+      description: "updating angle value",
+    },
+  ]);
+}
+
+async function testPressingEscapeWhileDragging(view) {
+  info("Testing pressing escape while dragging with mouse");
+  const marginPropEditor = getTextProperty(view, 1, {
+    "margin-bottom": "0px",
+  }).editor;
+  await runIncrementTest(marginPropEditor, view, [
+    {
+      startValue: "0px",
+      expectedEndValue: "0px",
+      expectedEndValueBeforeEscape: "100px",
+      escape: true,
+      distance: 100,
+      description: "Pressing escape to check if value has been reset",
+    },
+  ]);
+}
+
+async function testUpdateDisabledValue(view) {
+  info("Testing updating a disabled value by dragging mouse");
+
+  const textProperty = getTextProperty(view, 1, { "padding-top": "10px" });
+  const editor = textProperty.editor;
+
+  await togglePropStatus(view, textProperty);
+  ok(!editor.enable.checked, "Should be disabled");
+  await runIncrementTest(editor, view, [
+    {
+      startValue: "10px",
+      expectedEndValue: "110px",
+      distance: 100,
+      description: "Updating disabled value",
+    },
+  ]);
+  ok(editor.enable.checked, "Should be enabled");
+}
+
+async function testWidthIncrements(view) {
+  info("Testing dragging the mouse on the width property");
+
+  const marginPropEditor = getTextProperty(view, 1, { width: "0px" }).editor;
+  await runIncrementTest(marginPropEditor, view, [
+    {
+      startValue: "0px",
+      expectedEndValue: "20px",
+      distance: 20,
+      description: "Increasing value while dragging",
+    },
+    {
+      startValue: "20px",
+      expectedEndValue: "0px",
+      distance: -20,
+      description: "Decreasing value while dragging",
+    },
+    {
+      startValue: "0px",
+      expectedEndValue: "2px",
+      ...getSmallIncrementKey(),
+      distance: 20,
+      description:
+        "Increasing value with small increments by pressing ctrl or alt",
+    },
+    {
+      startValue: "2px",
+      expectedEndValue: "202px",
+      shift: true,
+      distance: 20,
+      description: "Increasing value with large increments by pressing shift",
+    },
+    {
+      startValue: "202px",
+      expectedEndValue: "402px",
+      distance: 200,
+      description: "Increasing value with long distance",
+    },
+    {
+      startValue: "402px",
+      expectedEndValue: "402px",
+      distance: marginPropEditor._DRAGGING_DEADZONE_DISTANCE - 1,
+      description: "No change in the deadzone (positive value)",
+      deadzoneIncluded: true,
+    },
+    {
+      startValue: "402px",
+      expectedEndValue: "402px",
+      distance: -1 * (marginPropEditor._DRAGGING_DEADZONE_DISTANCE - 1),
+      description: "No change in the deadzone (negative value)",
+      deadzoneIncluded: true,
+    },
+    {
+      startValue: "402px",
+      expectedEndValue: "403px",
+      distance: marginPropEditor._DRAGGING_DEADZONE_DISTANCE + 1,
+      description: "Changed by 1 when leaving the deadzone (positive value)",
+      deadzoneIncluded: true,
+    },
+    {
+      startValue: "403px",
+      expectedEndValue: "402px",
+      distance: -1 * (marginPropEditor._DRAGGING_DEADZONE_DISTANCE + 1),
+      description: "Changed by 1 when leaving the deadzone (negative value)",
+      deadzoneIncluded: true,
+    },
+  ]);
+}
+
+async function testDraggingClassIsAddedOnValueUpdate(view) {
+  info("Testing dragging class is added when a supported unit is detected");
+
+  const editor = getTextProperty(view, 1, { "margin-top": "unset" }).editor;
+  const valueSpan = editor.valueSpan;
+  ok(
+    !valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+    "Should not be draggable"
+  );
+  valueSpan.scrollIntoView();
+  await setProperty(view, editor.prop, "23em");
+  ok(
+    valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+    "Should be draggable"
+  );
+}
+
+/**
+ * Runs each test and check whether or not the property is draggable
+ *
+ * @param  {CSSRuleView} view
+ * @param  {Array.<{
+ *   name: String,
+ *   value: String,
+ *   shouldBeDraggable: Boolean,
+ * }>} tests
+ */
+function runIsDraggableTest(view, tests) {
+  for (const test of tests) {
+    const property = test;
+    info(`Testing ${property.name} with value ${property.value}`);
+    const editor = getTextProperty(view, 1, {
+      [property.name]: property.value,
+    }).editor;
+    const valueSpan = editor.valueSpan;
+    if (property.shouldBeDraggable) {
+      ok(
+        valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+        "Should be draggable"
+      );
+    } else {
+      ok(
+        !valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+        "Should not be draggable"
+      );
+    }
+  }
+}
+
+/**
+ * Runs each test in the tests array by synthesizing a mouse dragging
+ *
+ * @param  {TextPropertyEditor} editor
+ * @param  {CSSRuleView} view
+ * @param  {Array} tests
+ */
+async function runIncrementTest(editor, view, tests) {
+  for (const test of tests) {
+    await testIncrement(editor, test, view);
+  }
+  view.debounce.flush();
+}
+
+/**
+ * Runs an increment test
+ *
+ * 1. We initialize the TextProperty value with "startValue"
+ * 2. We synthesize a mouse dragging of "distance" length
+ * 3. We check the value of TextProperty is equal to "expectedEndValue"
+ *
+ * @param  {TextPropertyEditor} editor
+ * @param  {Array} options
+ * @param  {String} options.startValue
+ * @param  {String} options.expectedEndValue
+ * @param  {Boolean} options.shift Whether or not we press the shift key
+ * @param  {Number} options.distance Distance of the dragging
+ * @param  {String} options.description
+ * @param  {Boolean} options.ctrl Small increment key
+ * @param  {Boolean} options.alt Small increment key for macosx
+ * @param  {Boolean} option.deadzoneIncluded True if the provided distance
+ *         accounts for the deadzone. When false, the deadzone will automatically
+ *         be added to the distance.
+ * @param  {CSSRuleView} view
+ */
+async function testIncrement(editor, options, view) {
+  info("Running subtest: " + options.description);
+
+  editor.valueSpan.scrollIntoView();
+  await setProperty(editor.ruleView, editor.prop, options.startValue);
+
+  is(
+    editor.prop.value,
+    options.startValue,
+    "Value initialized at " + options.startValue
+  );
+
+  const onMouseUp = once(editor.valueSpan, "mouseup");
+
+  await synthesizeMouseDragging(editor, options.distance, options);
+
+  // mouseup event not triggered when escape is pressed
+  if (!options.escape) {
+    info("Waiting mouseup");
+    await onMouseUp;
+    info("Received mouseup");
+  }
+
+  is(
+    editor.prop.value,
+    options.expectedEndValue,
+    "Value changed to " + editor.prop.value
+  );
+}
+
+/**
+ * Synthesizes mouse dragging (mousedown + mousemove + mouseup)
+ *
+ * @param {TextPropertyEditor} editor
+ * @param {Number} distance length of the horizontal dragging (negative if dragging left)
+ * @param {Object} option
+ * @param {Boolean} option.escape
+ * @param {Boolean} option.alt
+ * @param {Boolean} option.shift
+ * @param {Boolean} option.ctrl
+ * @param {Boolean} option.deadzoneIncluded
+ */
+async function synthesizeMouseDragging(editor, distance, options = {}) {
+  info(`Start to synthesize mouse dragging (from ${1} to ${1 + distance})`);
+
+  const styleWindow = editor.ruleView.styleWindow;
+  const elm = editor.valueSpan;
+  const startPosition = [1, 1];
+
+  // Handle the pixel based deadzone.
+  const deadzone = editor._DRAGGING_DEADZONE_DISTANCE;
+  if (!options.deadzoneIncluded) {
+    // Most tests do not care about the deadzone and the provided distance does
+    // not account for the deadzone. Add it automatically.
+    distance = distance + Math.sign(distance) * deadzone;
+  }
+  const updateExpected = Math.abs(options.distance) > deadzone;
+
+  const endPosition = [startPosition[0] + distance, startPosition[1]];
+
+  EventUtils.synthesizeMouse(
+    elm,
+    startPosition[0],
+    startPosition[1],
+    { type: "mousedown" },
+    styleWindow
+  );
+
+  // If the drag will not trigger any update, simply wait for 100ms.
+  // Otherwise, wait for the next property-updated-by-dragging event.
+  const updated = updateExpected
+    ? editor.ruleView.once("property-updated-by-dragging")
+    : wait(100);
+
+  EventUtils.synthesizeMouse(
+    elm,
+    endPosition[0],
+    endPosition[1],
+    {
+      type: "mousemove",
+      shiftKey: !!options.shift,
+      ctrlKey: !!options.ctrl,
+      altKey: !!options.alt,
+    },
+    styleWindow
+  );
+
+  // We wait because the mousemove event listener is throttled to 30ms
+  // in the TextPropertyEditor class
+  info("waiting for event property-updated-by-dragging");
+  await updated;
+  ok(true, "received event property-updated-by-dragging");
+
+  if (options.escape) {
+    is(
+      editor.prop.value,
+      options.expectedEndValueBeforeEscape,
+      "testing value before pressing escape"
+    );
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, styleWindow);
+  }
+
+  // If the drag will not trigger any update, simply wait for 100ms.
+  // Otherwise, wait for the next ruleview-changed event.
+  const done = updateExpected
+    ? editor.ruleView.once("ruleview-changed")
+    : wait(100);
+
+  EventUtils.synthesizeMouse(
+    elm,
+    endPosition[0],
+    endPosition[1],
+    {
+      type: "mouseup",
+    },
+    styleWindow
+  );
+  await done;
+
+  // If the drag did not trigger any update, mouseup might open an inline editor.
+  // Leave the editor.
+  const inplaceEditor = styleWindow.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  if (inplaceEditor) {
+    const onBlur = once(inplaceEditor, "blur");
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, styleWindow);
+    await onBlur;
+  }
+
+  info("Finish to synthesize mouse dragging");
+}
+
+function getSmallIncrementKey() {
+  if (AppConstants.platform === "macosx") {
+    return { alt: true };
+  }
+  return { ctrl: true };
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js
new file mode 100644
index 0000000000..a3813f1f7b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js
@@ -0,0 +1,119 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on swatch-preceeded value while editing the property name
+// will result in editing the property value. Also tests that the value span is updated
+// only if the property name has changed. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  const prop = getTextProperty(view, 1, { color: "red" });
+  const propEditor = prop.editor;
+
+  await testColorValueSpanClickWithoutNameChange(propEditor, view);
+  await testColorValueSpanClickAfterNameChange(propEditor, view);
+});
+
+async function testColorValueSpanClickWithoutNameChange(propEditor, view) {
+  info("Test click on color span while focusing property name editor");
+  const colorSpan = propEditor.valueSpan.querySelector(".ruleview-color");
+
+  info("Focus the color name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  // We add a click event to make sure the color span won't be cleared
+  // on nameSpan blur (which would lead to the click event not being triggered)
+  const onColorSpanClick = once(colorSpan, "click");
+
+  // The property-value-updated is emitted when the valueSpan markup is being
+  // re-populated, which should not be the case when not modifying the property name
+  const onPropertyValueUpdated = function () {
+    ok(false, 'The "property-value-updated" should not be emitted');
+  };
+  view.on("property-value-updated", onPropertyValueUpdated);
+
+  info("blur propEditor.nameSpan by clicking on the color span");
+  EventUtils.synthesizeMouse(colorSpan, 1, 1, {}, propEditor.doc.defaultView);
+
+  info("wait for the click event on the color span");
+  await onColorSpanClick;
+  ok(true, "Expected click event was emitted");
+
+  editor = inplaceEditor(propEditor.doc.activeElement);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "The property value editor got focused"
+  );
+
+  // We remove this listener in order to not cause unwanted conflict in the next test
+  view.off("property-value-updated", onPropertyValueUpdated);
+
+  info(
+    "blur valueSpan editor to trigger ruleview-changed event and prevent " +
+      "having pending request"
+  );
+  const onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  await onRuleViewChanged;
+}
+
+async function testColorValueSpanClickAfterNameChange(propEditor, view) {
+  info("Test click on color span after property name change");
+  const colorSpan = propEditor.valueSpan.querySelector(".ruleview-color");
+
+  info("Focus the color name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the property to border-color to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "border-color";
+
+  let onRuleViewChanged = view.once("ruleview-changed");
+  const onPropertyValueUpdate = view.once("property-value-updated");
+
+  info("blur propEditor.nameSpan by clicking on the color span");
+  EventUtils.synthesizeMouse(colorSpan, 1, 1, {}, propEditor.doc.defaultView);
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+  ok(true, 'Expected "property-value-updated" event was emitted');
+
+  editor = inplaceEditor(propEditor.doc.activeElement);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "The property value editor got focused"
+  );
+
+  info(
+    "blur valueSpan editor to trigger ruleview-changed event and prevent " +
+      "having pending request"
+  );
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  await onRuleViewChanged;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js
new file mode 100644
index 0000000000..03b6bf021b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that hitting shift + click on color swatch while editing the property
+// name will only change the color unit and not lead to edit the property value.
+// See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background: linear-gradient(
+      90deg,
+      rgb(183,222,237),
+      rgb(33,180,226),
+      rgb(31,170,217),
+      rgba(200,170,140,0.5));
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test shift + click on color swatch while editing property name");
+
+  await selectNode("#testid", inspector);
+  const prop = getTextProperty(view, 1, {
+    background:
+      "linear-gradient( 90deg, rgb(183,222,237), rgb(33,180,226), rgb(31,170,217), rgba(200,170,140,0.5))",
+  });
+  const propEditor = prop.editor;
+
+  const swatchSpan = propEditor.valueSpan.querySelectorAll(
+    ".ruleview-colorswatch"
+  )[2];
+
+  info("Focus the background name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  const editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the property to background-image to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "background-image";
+
+  const onPropertyValueUpdate = view.once("property-value-updated");
+  const onSwatchUnitChange = once(swatchSpan, "unit-change");
+  const onRuleViewChanged = view.once("ruleview-changed");
+
+  info("blur propEditor.nameSpan by clicking on the color swatch");
+  EventUtils.synthesizeMouseAtCenter(
+    swatchSpan,
+    { shiftKey: true },
+    propEditor.doc.defaultView
+  );
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the color unit to change");
+  await onSwatchUnitChange;
+  ok(true, "the color unit was changed");
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+
+  ok(
+    !inplaceEditor(propEditor.valueSpan),
+    "The inplace editor wasn't shown " +
+      "as a result of the color swatch shift + click"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
new file mode 100644
index 0000000000..c43751da1f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on color swatch while editing the property name
+// will show the color tooltip with the correct value. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background: linear-gradient(
+      90deg,
+      rgb(183,222,237),
+      rgb(33,180,226),
+      rgb(31,170,217),
+      rgba(200,170,140,0.5));
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test click on color swatch while editing property name");
+
+  await selectNode("#testid", inspector);
+  const prop = getTextProperty(view, 1, {
+    background:
+      "linear-gradient( 90deg, rgb(183,222,237), rgb(33,180,226), rgb(31,170,217), rgba(200,170,140,0.5))",
+  });
+  const propEditor = prop.editor;
+
+  const swatchSpan = propEditor.valueSpan.querySelectorAll(
+    ".ruleview-colorswatch"
+  )[3];
+  const colorPicker = view.tooltips.getTooltip("colorPicker");
+
+  info("Focus the background name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  const editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the background property to background-image to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "background-image";
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const onPropertyValueUpdate = view.once("property-value-updated");
+  const onReady = colorPicker.once("ready");
+
+  info("blur propEditor.nameSpan by clicking on the color swatch");
+  EventUtils.synthesizeMouseAtCenter(
+    swatchSpan,
+    {},
+    propEditor.doc.defaultView
+  );
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+
+  info("wait for the color picker to be shown");
+  await onReady;
+
+  ok(true, "The color picker was shown on click of the color swatch");
+  ok(
+    !inplaceEditor(propEditor.valueSpan),
+    "The inplace editor wasn't shown as a result of the color swatch click"
+  );
+
+  const spectrum = colorPicker.spectrum;
+  is(
+    `"${spectrum.rgb}"`,
+    '"200,170,140,0.5"',
+    "The correct color picker was shown"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js
new file mode 100644
index 0000000000..a315f5bec5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on a property's value URL while editing the property name
+// will open the link in a new tab. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+      background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png"), linear-gradient(white, #F06 400px);
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test click on background-image url while editing property name");
+
+  await selectNode("#testid", inspector);
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+  const anchor = propEditor.valueSpan.querySelector(
+    ".ruleview-propertyvalue .theme-link"
+  );
+
+  info("Focus the background name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  const editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the property to background to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "background-image";
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const onPropertyValueUpdate = view.once("property-value-updated");
+  const onTabOpened = waitForTab();
+
+  info("blur propEditor.nameSpan by clicking on the link");
+  // The url can be wrapped across multiple lines, and so we click the lower left corner
+  // of the anchor to make sure to target the link.
+  const rect = anchor.getBoundingClientRect();
+  EventUtils.synthesizeMouse(
+    anchor,
+    2,
+    rect.height - 2,
+    {},
+    propEditor.doc.defaultView
+  );
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+
+  info("wait for the image to be open in a new tab");
+  const tab = await onTabOpened;
+  ok(true, "A new tab opened");
+
+  is(
+    tab.linkedBrowser.currentURI.spec,
+    anchor.href,
+    "The URL for the new tab is correct"
+  );
+
+  gBrowser.removeTab(tab);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-variable-add.js b/devtools/client/inspector/rules/test/browser_rules_edit-variable-add.js
new file mode 100644
index 0000000000..3c4c9a25a4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-variable-add.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding a CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: var(--color);
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Check the initial state of --color which refers to an unset variable");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-unmatched-variable",
+    "--color is not set"
+  );
+
+  info("Add the --color CSS variable");
+  await addProperty(view, 0, "--color", "lime");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-variable-remove.js b/devtools/client/inspector/rules/test/browser_rules_edit-variable-remove.js
new file mode 100644
index 0000000000..322cc8e166
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-variable-remove.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test removing a CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Check the initial state of the --color variable");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Remove the --color variable declaration");
+  const prop = getTextProperty(view, 1, { "--color": "lime" });
+  await removeProperty(view, prop);
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-unmatched-variable",
+    "--color is not set"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-variable.js b/devtools/client/inspector/rules/test/browser_rules_edit-variable.js
new file mode 100644
index 0000000000..0df57d9bf1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-variable.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing a CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Check the initial state of the --color variable");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Edit the CSS variable");
+  const prop = getTextProperty(view, 1, { "--color": "lime" });
+  const propEditor = prop.editor;
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+  editor.input.value = "blue";
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onRuleViewChanged;
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = blue"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_01.js b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_01.js
new file mode 100644
index 0000000000..5d0a9f1ce5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_01.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the correct editable fields are focused when tabbing and entering
+// through the rule view.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+    color: red;
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    border-color: red
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Click on the selector of the inline style ('element')");
+  let ruleEditor = getRuleViewRuleEditor(view, 0);
+  const onFocus = once(ruleEditor.element, "focus", true);
+  ruleEditor.selectorText.click();
+  await onFocus;
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should be in the element property span"
+  );
+
+  info("Focus the next field with Tab");
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  await focusNextEditableField(view, ruleEditor);
+  assertEditor(
+    view,
+    ruleEditor.selectorText,
+    "Focus should have moved to the next rule selector"
+  );
+
+  for (let i = 0; i < ruleEditor.rule.textProps.length; i++) {
+    const textProp = ruleEditor.rule.textProps[i];
+    const propEditor = textProp.editor;
+
+    info("Focus the next field with Tab");
+    // Expect a ruleview-changed event if we are moving from a property value
+    // to the next property name (which occurs after the first iteration, as for
+    // i=0, the previous field is the selector).
+    const onRuleViewChanged = i > 0 ? view.once("ruleview-changed") : null;
+    await focusNextEditableField(view, ruleEditor);
+    await onRuleViewChanged;
+    assertEditor(
+      view,
+      propEditor.nameSpan,
+      "Focus should have moved to the property name"
+    );
+
+    info("Focus the next field with Tab");
+    await focusNextEditableField(view, ruleEditor);
+    assertEditor(
+      view,
+      propEditor.valueSpan,
+      "Focus should have moved to the property value"
+    );
+  }
+
+  // Expect a ruleview-changed event again as we're bluring a property value.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await focusNextEditableField(view, ruleEditor);
+  await onRuleViewChanged;
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should have moved to the new property span"
+  );
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+
+  await focusNextEditableField(view, ruleEditor);
+  assertEditor(
+    view,
+    ruleEditor.selectorText,
+    "Focus should have moved to the next rule selector"
+  );
+
+  info("Blur the selector field");
+  EventUtils.synthesizeKey("KEY_Escape");
+});
+
+async function focusNextEditableField(view, ruleEditor) {
+  const onFocus = once(ruleEditor.element, "focus", true);
+  EventUtils.synthesizeKey("KEY_Tab", {}, view.styleWindow);
+  await onFocus;
+}
+
+function assertEditor(view, element, message) {
+  const editor = inplaceEditor(view.styleDocument.activeElement);
+  is(inplaceEditor(element), editor, message);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js
new file mode 100644
index 0000000000..c63bc0db13
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js
@@ -0,0 +1,111 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the correct editable fields are focused when shift tabbing
+// through the rule view.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+    color: red;
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    border-color: red
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testEditableFieldFocus(inspector, view, "VK_TAB", { shiftKey: true });
+});
+
+async function testEditableFieldFocus(
+  inspector,
+  view,
+  commitKey,
+  options = {}
+) {
+  let ruleEditor = getRuleViewRuleEditor(view, 2);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "Focus should be in the 'div' rule selector"
+  );
+
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  await focusNextField(view, ruleEditor, commitKey, options);
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should have moved to the new property span"
+  );
+
+  for (const textProp of ruleEditor.rule.textProps.slice(0).reverse()) {
+    const propEditor = textProp.editor;
+
+    await focusNextField(view, ruleEditor, commitKey, options);
+    await assertEditor(
+      view,
+      propEditor.valueSpan,
+      "Focus should have moved to the property value"
+    );
+
+    await focusNextFieldAndExpectChange(view, ruleEditor, commitKey, options);
+    await assertEditor(
+      view,
+      propEditor.nameSpan,
+      "Focus should have moved to the property name"
+    );
+  }
+
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  await focusNextField(view, ruleEditor, commitKey, options);
+  await assertEditor(
+    view,
+    ruleEditor.selectorText,
+    "Focus should have moved to the '#testid' rule selector"
+  );
+
+  ruleEditor = getRuleViewRuleEditor(view, 0);
+
+  await focusNextField(view, ruleEditor, commitKey, options);
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should have moved to the new property span"
+  );
+}
+
+async function focusNextFieldAndExpectChange(
+  view,
+  ruleEditor,
+  commitKey,
+  options
+) {
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await focusNextField(view, ruleEditor, commitKey, options);
+  await onRuleViewChanged;
+}
+
+async function focusNextField(view, ruleEditor, commitKey, options) {
+  const onFocus = once(ruleEditor.element, "focus", true);
+  EventUtils.synthesizeKey(commitKey, options, view.styleWindow);
+  await onFocus;
+}
+
+function assertEditor(view, element, message) {
+  const editor = inplaceEditor(view.styleDocument.activeElement);
+  is(inplaceEditor(element), editor, message);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_eyedropper.js b/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
new file mode 100644
index 0000000000..bf59ef4b91
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test opening the eyedropper from the color picker. Pressing escape to close it, and
+// clicking the page to select a color.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-color: white;
+      padding: 0px
+    }
+
+    #div1 {
+      background-color: #ff5;
+      width: 20px;
+      height: 20px;
+    }
+
+    #div2 {
+      margin-left: 20px;
+      width: 20px;
+      height: 20px;
+      background-color: #f09;
+    }
+  </style>
+  <body><div id="div1"></div><div id="div2"></div></body>
+`;
+
+// #f09
+const ORIGINAL_COLOR = "rgb(255, 0, 153)";
+// #ff5
+const EXPECTED_COLOR = "rgb(255, 255, 85)";
+
+registerCleanupFunction(() => {
+  // Restore the default Toolbox host position after the test.
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+});
+
+add_task(async function () {
+  info("Add the test tab, open the rule-view and select the test node");
+
+  const url = "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI);
+  await addTab(url);
+
+  const { inspector, view, toolbox } = await openRuleView();
+
+  await runTest(inspector, view, false);
+
+  info("Reload the page to restore the initial state");
+  await navigateTo(url);
+
+  info("Change toolbox host to WINDOW");
+  await toolbox.switchHost("window");
+
+  // Switching hosts is not correctly waiting when DevTools run in content frame
+  // See Bug 1571421.
+  await wait(1000);
+
+  await runTest(inspector, view, true);
+});
+
+async function runTest(inspector, view, isWindowHost) {
+  await selectNode("#div2", inspector);
+
+  info("Get the background-color property from the rule-view");
+  const property = getRuleViewProperty(view, "#div2", "background-color");
+  const swatch = property.valueSpan.querySelector(".ruleview-colorswatch");
+  ok(swatch, "Color swatch is displayed for the bg-color property");
+
+  info("Open the eyedropper from the colorpicker tooltip");
+  await openEyedropper(view, swatch);
+
+  const tooltip = view.tooltips.getTooltip("colorPicker").tooltip;
+  ok(
+    !tooltip.isVisible(),
+    "color picker tooltip is closed after opening eyedropper"
+  );
+
+  info("Test that pressing escape dismisses the eyedropper");
+  await testESC(swatch, inspector);
+
+  if (isWindowHost) {
+    // The following code is only needed on linux otherwise the test seems to
+    // timeout when clicking again on the swatch. Both the focus and the wait
+    // seem needed to make it pass.
+    // To be fixed in Bug 1571421.
+    info("Ensure the swatch window is focused");
+    const onWindowFocus = BrowserTestUtils.waitForEvent(
+      swatch.ownerGlobal,
+      "focus"
+    );
+    swatch.ownerGlobal.focus();
+    await onWindowFocus;
+  }
+
+  info("Open the eyedropper again");
+  await openEyedropper(view, swatch);
+
+  info("Test that a color can be selected with the eyedropper");
+  await testSelect(view, swatch, inspector);
+
+  const onHidden = tooltip.once("hidden");
+  tooltip.hide();
+  await onHidden;
+  ok(!tooltip.isVisible(), "color picker tooltip is closed");
+
+  await waitForTick();
+}
+
+async function testESC(swatch, inspector) {
+  info("Press escape");
+  const onCanceled = new Promise(resolve => {
+    inspector.inspectorFront.once("color-pick-canceled", resolve);
+  });
+  BrowserTestUtils.synthesizeKey(
+    "VK_ESCAPE",
+    {},
+    gBrowser.selectedTab.linkedBrowser
+  );
+  await onCanceled;
+
+  const color = swatch.style.backgroundColor;
+  is(color, ORIGINAL_COLOR, "swatch didn't change after pressing ESC");
+}
+
+async function testSelect(view, swatch, inspector) {
+  info("Click at x:10px y:10px");
+  const onPicked = new Promise(resolve => {
+    inspector.inspectorFront.once("color-picked", resolve);
+  });
+  // The change to the content is done async after rule view change
+  const onRuleViewChanged = view.once("ruleview-changed");
+
+  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
+    type: "mousemove",
+  });
+  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
+    type: "mousedown",
+  });
+  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
+    type: "mouseup",
+  });
+
+  await onPicked;
+  await onRuleViewChanged;
+
+  const color = swatch.style.backgroundColor;
+  is(color, EXPECTED_COLOR, "swatch changed colors");
+
+  ok(!swatch.eyedropperOpen, "swatch eye dropper is closed");
+  ok(!swatch.activeSwatch, "no active swatch");
+
+  is(
+    await getComputedStyleProperty("div", null, "background-color"),
+    EXPECTED_COLOR,
+    "div's color set to body color after dropper"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js
new file mode 100644
index 0000000000..037c3f8a82
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the that Filter Editor Tooltip opens by clicking on filter swatches
+
+const TEST_URL = URL_ROOT + "doc_filter.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+
+  const { toolbox, view } = await openRuleView();
+
+  info("Getting the filter swatch element");
+  const property = await getRuleViewProperty(view, "body", "filter", {
+    wait: true,
+  });
+
+  const swatch = property.valueSpan.querySelector(".ruleview-filterswatch");
+
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  // Clicking on a cssfilter swatch sets the current filter value in the tooltip
+  // which, in turn, makes the FilterWidget emit an "updated" event that causes
+  // the rule-view to refresh. So we must wait for the ruleview-changed event.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  swatch.click();
+  await onRuleViewChanged;
+
+  ok(true, "The shown event was emitted after clicking on swatch");
+  ok(
+    !inplaceEditor(swatch.parentNode),
+    "The inplace editor wasn't shown as a result of the filter swatch click"
+  );
+
+  info("Get the cssfilter widget instance");
+  const widget = filterTooltip.widget;
+  const select = widget.el.querySelector("select");
+
+  // Next we will check that interacting with the select does not close the
+  // filter tooltip.
+  info("Show the filter select");
+  const onSelectPopupShown = BrowserTestUtils.waitForSelectPopupShown(window);
+  EventUtils.synthesizeMouseAtCenter(select, {}, toolbox.win);
+  const selectPopup = await onSelectPopupShown;
+  ok(
+    filterTooltip.tooltip.isVisible(),
+    "The tooltip was not hidden when opening the select"
+  );
+
+  info("Hide the filter select");
+  const onSelectPopupHidden = once(selectPopup, "popuphidden");
+  const blurMenuItem = selectPopup.querySelector("menuitem[label='blur']");
+  EventUtils.synthesizeMouseAtCenter(blurMenuItem, {}, window);
+  await onSelectPopupHidden;
+  await waitFor(() => select.value === "blur");
+  is(
+    select.value,
+    "blur",
+    "The filter select was updated with the correct value"
+  );
+  ok(
+    filterTooltip.tooltip.isVisible(),
+    "The tooltip was not hidden when using the select"
+  );
+
+  await hideTooltipAndWaitForRuleViewChanged(filterTooltip, view);
+  await waitForTick();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js
new file mode 100644
index 0000000000..7237f0c997
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the Filter Editor Tooltip committing changes on ENTER
+
+const TEST_URL = URL_ROOT + "doc_filter.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { view } = await openRuleView();
+
+  info("Get the filter swatch element");
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "filter"
+  ).valueSpan.querySelector(".ruleview-filterswatch");
+
+  info("Click on the filter swatch element");
+  // Clicking on a cssfilter swatch sets the current filter value in the tooltip
+  // which, in turn, makes the FilterWidget emit an "updated" event that causes
+  // the rule-view to refresh. So we must wait for the ruleview-changed event.
+  let onRuleViewChanged = view.once("ruleview-changed");
+  swatch.click();
+  await onRuleViewChanged;
+
+  info("Get the cssfilter widget instance");
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  const widget = filterTooltip.widget;
+
+  info("Set a new value in the cssfilter widget");
+  onRuleViewChanged = view.once("ruleview-changed");
+  widget.setCssValue("blur(2px)");
+  await waitForComputedStyleProperty("body", null, "filter", "blur(2px)");
+  await onRuleViewChanged;
+  ok(true, "Changes previewed on the element");
+
+  info("Press RETURN to commit changes");
+  // Pressing return in the cssfilter tooltip triggeres 2 ruleview-changed
+  onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+  EventUtils.sendKey("RETURN", widget.styleWindow);
+  await onRuleViewChanged;
+
+  is(
+    await getComputedStyleProperty("body", null, "filter"),
+    "blur(2px)",
+    "The elemenet's filter was kept after RETURN"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js
new file mode 100644
index 0000000000..ea46af9997
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changes made to the Filter Editor Tooltip are reverted when
+// ESC is pressed
+
+const TEST_URL = URL_ROOT + "doc_filter.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { view } = await openRuleView();
+  await testPressingEscapeRevertsChanges(view);
+});
+
+async function testPressingEscapeRevertsChanges(view) {
+  const prop = getTextProperty(view, 1, { filter: "blur(2px) contrast(2)" });
+  const propEditor = prop.editor;
+  const swatch = propEditor.valueSpan.querySelector(".ruleview-filterswatch");
+
+  await clickOnFilterSwatch(swatch, view);
+  await setValueInFilterWidget("blur(2px)", view);
+
+  await waitForComputedStyleProperty("body", null, "filter", "blur(2px)");
+  is(
+    propEditor.valueSpan.textContent,
+    "blur(2px)",
+    "Got expected property value."
+  );
+
+  await pressEscapeToCloseTooltip(view);
+
+  await waitForComputedStyleProperty(
+    "body",
+    null,
+    "filter",
+    "blur(2px) contrast(2)"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "blur(2px) contrast(2)",
+    "Got expected property value."
+  );
+}
+
+async function clickOnFilterSwatch(swatch, view) {
+  info("Clicking on a css filter swatch to open the tooltip");
+
+  // Clicking on a cssfilter swatch sets the current filter value in the tooltip
+  // which, in turn, makes the FilterWidget emit an "updated" event that causes
+  // the rule-view to refresh. So we must wait for the ruleview-changed event.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  swatch.click();
+  await onRuleViewChanged;
+}
+
+async function setValueInFilterWidget(value, view) {
+  info("Setting the CSS filter value in the tooltip");
+
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  filterTooltip.widget.setCssValue(value);
+  await onRuleViewChanged;
+}
+
+async function pressEscapeToCloseTooltip(view) {
+  info("Pressing ESCAPE to close the tooltip");
+
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("ESCAPE", filterTooltip.widget.styleWindow);
+  await onRuleViewChanged;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js
new file mode 100644
index 0000000000..eb887f9848
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the flexbox highlighter is hidden when the highlighted flexbox container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  const onRuleViewUpdated = view.once("ruleview-refreshed");
+  await selectNode("#flex", inspector);
+  await onRuleViewUpdated;
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Remove the #flex container in the content page.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.querySelector("#flex").remove()
+  );
+  await onHighlighterHidden;
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is hidden."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-navigate.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-navigate.js
new file mode 100644
index 0000000000..85b8f5429f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-navigate.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that flexbox highlighter is hidden on page navigation.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { getNodeForActiveHighlighter, waitForHighlighterTypeShown } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  await navigateTo(TEST_URI_2);
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is hidden."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-reload.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-reload.js
new file mode 100644
index 0000000000..aa35ffb322
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-reload.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a flexbox highlighter after reloading the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  info("Check that the flexbox highlighter can be displayed.");
+  await checkFlexboxHighlighter();
+
+  info("Close the toolbox before reloading the tab.");
+  await gDevTools.closeToolboxForTab(tab);
+
+  await reloadBrowser();
+
+  info(
+    "Check that the flexbox highlighter can be displayed after reloading the page."
+  );
+  await checkFlexboxHighlighter();
+});
+
+async function checkFlexboxHighlighter() {
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { getNodeForActiveHighlighter, waitForHighlighterTypeShown } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-restored-after-reload.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-restored-after-reload.js
new file mode 100644
index 0000000000..dfa0368e1d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-restored-after-reload.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the flexbox highlighter is re-displayed after reloading a page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+const OTHER_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Check that the flexbox highlighter can be displayed.");
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeRestored,
+    waitForHighlighterTypeDiscarded,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+  ok(getActiveHighlighter(HIGHLIGHTER_TYPE), "Flexbox highlighter is shown.");
+
+  info("Reload the page, expect the highlighter to be displayed once again");
+  const onRestored = waitForHighlighterTypeRestored(HIGHLIGHTER_TYPE);
+  const onReloaded = inspector.once("reloaded");
+  await reloadBrowser();
+  info("Wait for inspector to be reloaded after page reload");
+  await onReloaded;
+  info("Wait for the highlighter to be restored");
+  await onRestored;
+  ok(getActiveHighlighter(HIGHLIGHTER_TYPE), "Flexbox highlighter restored.");
+
+  info("Navigate to another URL, and check that the highlighter is hidden");
+  const otherUri =
+    "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
+  const onDiscarded = waitForHighlighterTypeDiscarded(HIGHLIGHTER_TYPE);
+  await navigateTo(otherUri);
+  info("Expect the highlighter not to be restored");
+  await onDiscarded;
+  ok(!getActiveHighlighter(HIGHLIGHTER_TYPE), "Flexbox highlighter not shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle-telemetry.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle-telemetry.js
new file mode 100644
index 0000000000..cc58a25c5f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle-telemetry.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry is correct when the flexbox highlighter is activated from
+// the rules view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  startTelemetry();
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.rules.flexboxhighlighter.opened", "", 1, "scalar");
+  checkTelemetry(
+    "DEVTOOLS_FLEXBOX_HIGHLIGHTER_TIME_ACTIVE_SECONDS",
+    "",
+    null,
+    "hasentries"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01.js
new file mode 100644
index 0000000000..d09e28a0ec
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view and the display of the
+// flexbox highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01b.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01b.js
new file mode 100644
index 0000000000..16f55d75c2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01b.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flebox highlighter in the rule view and the display of the
+// flexbox highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: inline-flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_02.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_02.js
new file mode 100644
index 0000000000..858562a5ee
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_02.js
@@ -0,0 +1,114 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view from an overridden
+// 'display: flex' declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+    div, ul {
+      display: flex;
+    }
+  </style>
+  <ul id="flex">
+    <li>1</li>
+    <li>2</li>
+  </ul>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+  const overriddenContainer = getRuleViewProperty(
+    view,
+    "div, ul",
+    "display"
+  ).valueSpan;
+  const overriddenFlexboxToggle = overriddenContainer.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(
+    flexboxToggle && overriddenFlexboxToggle,
+    "Flexbox highlighter toggles are visible."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active") &&
+      !overriddenFlexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle buttons are not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter from the overridden rule in the rule-view."
+  );
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  overriddenFlexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle buttons are active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active") &&
+      overriddenFlexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info(
+    "Toggling off the flexbox highlighter from the normal flexbox declaration in  " +
+      "the rule-view."
+  );
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle buttons are not " +
+      "active in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active") &&
+      !overriddenFlexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle buttons are not active."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_03.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_03.js
new file mode 100644
index 0000000000..6f1855f3f7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_03.js
@@ -0,0 +1,134 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view with multiple flexboxes in the
+// page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex1" class="flex"></div>
+  <div id="flex2" class="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+  } = getHighlighterTestHelpers(inspector);
+
+  info("Selecting the first flexbox container.");
+  await selectNode("#flex1", inspector);
+  let container = getRuleViewProperty(view, ".flex", "display").valueSpan;
+  let flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
+
+  info(
+    "Checking the state of the flexbox toggle for the first flexbox container in " +
+      "the rule-view."
+  );
+  ok(flexboxToggle, "flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter for the first flexbox container from the " +
+      "rule-view."
+  );
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Selecting the second flexbox container.");
+  await selectNode("#flex2", inspector);
+  const firstFlexboxHighterShown =
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE);
+  container = getRuleViewProperty(view, ".flex", "display").valueSpan;
+  flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
+
+  info(
+    "Checking the state of the CSS flexbox toggle for the second flexbox container " +
+      "in the rule-view."
+  );
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is still shown."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter for the second flexbox container from the " +
+      "rule-view."
+  );
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created for the second flexbox container " +
+      "and toggle button is active in the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  Assert.notEqual(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    firstFlexboxHighterShown,
+    "Flexbox highlighter for the second flexbox container is shown."
+  );
+
+  info("Selecting the first flexbox container.");
+  await selectNode("#flex1", inspector);
+  container = getRuleViewProperty(view, ".flex", "display").valueSpan;
+  flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
+
+  info(
+    "Checking the state of the flexbox toggle for the first flexbox container in " +
+      "the rule-view."
+  );
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_04.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_04.js
new file mode 100644
index 0000000000..abf1e1e1d5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_04.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view from a
+// 'display: flex!important' declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex !important;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_font-family-parsing.js b/devtools/client/inspector/rules/test/browser_rules_font-family-parsing.js
new file mode 100644
index 0000000000..5e067be731
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_font-family-parsing.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the parsed font-family property value shown in the rules
+// pane is correct.
+
+const TEST_URI = `
+  <style type="text/css">
+    #id1 {
+      font-family: georgia, arial, sans-serif;
+    }
+    #id2 {
+      font-family: georgia,arial,sans-serif;
+    }
+    #id3 {
+      font-family: georgia ,arial ,sans-serif;
+    }
+    #id4 {
+      font-family: georgia , arial , sans-serif;
+    }
+    #id4 {
+      font-family:   arial,  georgia,   sans-serif  ;
+    }
+    #id5 {
+      font-family: helvetica !important;
+    }
+  </style>
+  <div id="id1">1</div>
+  <div id="id2">2</div>
+  <div id="id3">3</div>
+  <div id="id4">4</div>
+  <div id="id5">5</div>
+`;
+
+const TESTS = [
+  { selector: "#id1", expectedTextContent: "georgia, arial, sans-serif" },
+  { selector: "#id2", expectedTextContent: "georgia,arial,sans-serif" },
+  { selector: "#id3", expectedTextContent: "georgia ,arial ,sans-serif" },
+  { selector: "#id4", expectedTextContent: "arial, georgia, sans-serif" },
+  { selector: "#id5", expectedTextContent: "helvetica !important" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const { selector, expectedTextContent } of TESTS) {
+    await selectNode(selector, inspector);
+    info("Looking for font-family property value in selector " + selector);
+
+    const prop = getRuleViewProperty(view, selector, "font-family").valueSpan;
+    is(
+      prop.textContent,
+      expectedTextContent,
+      "The font-family property value is correct"
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-mutation.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-mutation.js
new file mode 100644
index 0000000000..1394c0532c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-mutation.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid highlighter is hidden when the highlighted grid container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = inspector.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  info("Remove the #grid container in the content page");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.querySelector("#grid").remove()
+  );
+  await onHighlighterHidden;
+  ok(!highlighters.gridHighlighters.size, "CSS grid highlighter is hidden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-navigate.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-navigate.js
new file mode 100644
index 0000000000..6c2192b800
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-navigate.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that grid highlighter is hidden on page navigation.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = inspector.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  await navigateTo(TEST_URI_2);
+  ok(!highlighters.gridHighlighters.size, "CSS grid highlighter is hidden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-reload.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-reload.js
new file mode 100644
index 0000000000..7850b069ae
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-reload.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a grid highlighter showing grid gaps can be displayed after reloading the
+// page (Bug 1342051).
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+      grid-gap: 10px;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Check that the grid highlighter can be displayed");
+  await checkGridHighlighter();
+
+  info("Close the toolbox before reloading the tab");
+  await gDevTools.closeToolboxForTab(gBrowser.selectedTab);
+
+  await reloadBrowser();
+
+  info(
+    "Check that the grid highlighter can be displayed after reloading the page"
+  );
+  await checkGridHighlighter();
+});
+
+async function checkGridHighlighter() {
+  const { inspector, view } = await openRuleView();
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js
new file mode 100644
index 0000000000..6a2e5743af
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid highlighter is re-displayed after reloading a page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const OTHER_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Check that the grid highlighter can be displayed");
+  const { inspector, view } = await openRuleView();
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeRestored,
+    waitForHighlighterTypeDiscarded,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Reload the page, expect the highlighter to be displayed once again");
+  const onRestored = waitForHighlighterTypeRestored(HIGHLIGHTER_TYPE);
+
+  const onReloaded = inspector.once("reloaded");
+  await reloadBrowser();
+  info("Wait for inspector to be reloaded after page reload");
+  await onReloaded;
+
+  await onRestored;
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "CSS grid highlighter was restored."
+  );
+
+  info("Navigate to another URL, and check that the highlighter is hidden");
+  const otherUri =
+    "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
+  const onDiscarded = waitForHighlighterTypeDiscarded(HIGHLIGHTER_TYPE);
+  await navigateTo(otherUri);
+  await onDiscarded;
+  is(
+    highlighters.gridHighlighters.size,
+    0,
+    "CSS grid highlighter was not restored."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js b/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js
new file mode 100644
index 0000000000..0decb7f7db
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js
@@ -0,0 +1,178 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the text editor correctly display the grid-template-areas value.
+// The CSS Grid spec allows to create grid-template-areas in an ascii-art style matrix.
+// It should show each string on its own line, when displaying rules for grid-template-areas.
+
+const TEST_URI = `
+<style type='text/css'>
+  #testid {
+    display: grid;
+    grid-template-areas: "a   a   bb"
+                         'a   a   bb'
+                         "ccc ccc bb";
+  }
+
+  #testid-quotes {
+    quotes: "«" "»" "‹" "›";
+  }
+
+  #testid-invalid-strings {
+    grid-template-areas: "a   a   b"
+                      "a   a";
+  }
+
+  #testid-valid-quotefree-value {
+    grid-template-areas: inherit;
+  }
+
+  .a {
+		grid-area: a;
+	}
+
+	.b {
+		grid-area: bb;
+	}
+
+	.c {
+		grid-area: ccc;
+	}
+</style>
+<div id="testid">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+  <div class="c">cell c</div>
+</div>
+<q id="testid-quotes">
+  Show us the wonder-working <q>Brothers,</q> let them come out publicly—and we will believe in them!
+</q>
+<div id="testid-invalid-strings">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+</div>
+<div id="testid-valid-quotefree-value">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+</div>
+`;
+
+const multiLinesInnerText = '\n"a   a   bb" \n\'a   a   bb\' \n"ccc ccc bb"';
+const typedAndCopiedMultiLinesString = '"a a bb ccc" "a a bb ccc"';
+const typedAndCopiedMultiLinesInnerText = '\n"a a bb ccc" \n"a a bb ccc"';
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info(
+    "Tests display of grid-template-areas value in an ascii-art style," +
+      "displaying each string on its own line"
+  );
+
+  const gridRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    gridRuleProperty.innerText,
+    multiLinesInnerText,
+    "the grid-area is displayed with each string in its own line, and sufficient spacing for areas to align vertically"
+  );
+
+  // copy/paste the current value inside, to also make sure of the value copied is useful as text
+
+  // Calculate offsets to click in the value line which is below the property name line .
+  const rect = gridRuleProperty.getBoundingClientRect();
+  const previousProperty = await getRuleViewProperty(
+    view,
+    "#testid",
+    "display"
+  ).nameSpan.getBoundingClientRect();
+
+  const x = rect.width / 2;
+  const y = rect.y - previousProperty.y + 1;
+
+  info("Focusing the css property editable value");
+  await focusEditableField(view, gridRuleProperty, x, y);
+  info("typing a new value");
+  [...typedAndCopiedMultiLinesString].map(char =>
+    EventUtils.synthesizeKey(char, {}, view.styleWindow)
+  );
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  is(
+    gridRuleProperty.innerText,
+    typedAndCopiedMultiLinesInnerText,
+    "the typed value is correct, and a single quote is displayed on its own line"
+  );
+  info("copy-paste the 'grid-template-areas' property value to duplicate it");
+  const onDone = view.once("ruleview-changed");
+  await focusEditableField(view, gridRuleProperty, x, y);
+  EventUtils.synthesizeKey("C", { accelKey: true }, view.styleWindow);
+  EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
+  EventUtils.synthesizeKey("V", { accelKey: true }, view.styleWindow);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onDone;
+
+  info("Check copy-pasting the property value is not breaking it");
+
+  is(
+    gridRuleProperty.innerText,
+    typedAndCopiedMultiLinesInnerText + " " + typedAndCopiedMultiLinesInnerText,
+    "copy-pasting the current value duplicate the correct value, with each string of the multi strings grid-template-areas value is displayed on a new line"
+  );
+
+  // test that when "non grid-template-area", like quotes for example, its multi-string value is not displayed over multiple lines
+  await selectNode("#testid-quotes", inspector);
+
+  info(
+    "Tests display of content string value is NOT in an ascii-art style," +
+      "displaying each string on a single line"
+  );
+
+  const contentRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid-quotes",
+    "quotes"
+  ).valueSpan;
+  is(
+    contentRuleProperty.innerText,
+    '"«" "»" "‹" "›"',
+    "the quotes strings values are all displayed on the same single line"
+  );
+
+  // test that when invalid strings values do not get formatted
+  info("testing it does not try to format invalid values");
+  await selectNode("#testid-invalid-strings", inspector);
+  const invalidGridRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid-invalid-strings",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    invalidGridRuleProperty.innerText,
+    '"a a b" "a a"',
+    "the invalid strings values do not get formatted"
+  );
+
+  // test that when a valid value without quotes such as `inherit` it does not get formatted
+  info("testing it does not try to format valid non-quote values");
+  await selectNode("#testid-valid-quotefree-value", inspector);
+  const validGridRuleNoQuoteProperty = await getRuleViewProperty(
+    view,
+    "#testid-valid-quotefree-value",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    validGridRuleNoQuoteProperty.innerText,
+    "inherit",
+    "the valid quote-free values do not get formatted"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle-telemetry.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle-telemetry.js
new file mode 100644
index 0000000000..7ea229a734
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle-telemetry.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry count is correct when the grid highlighter is activated from
+// the rules view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  startTelemetry();
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.rules.gridinspector.opened", "", 1, "scalar");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01.js
new file mode 100644
index 0000000000..21097c907a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view and the display of the
+// grid highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01b.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01b.js
new file mode 100644
index 0000000000..0933d1b4ab
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01b.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view and the display of the
+// grid highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: inline-grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_02.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_02.js
new file mode 100644
index 0000000000..2f168126a6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_02.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view from an overridden 'display: grid'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+    div, ul {
+      display: grid;
+    }
+  </style>
+  <ul id="grid">
+    <li id="cell1">cell1</li>
+    <li id="cell2">cell2</li>
+  </ul>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+  const overriddenContainer = getRuleViewProperty(
+    view,
+    "div, ul",
+    "display"
+  ).valueSpan;
+  const overriddenGridToggle =
+    overriddenContainer.querySelector(".ruleview-grid");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !overriddenGridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active") &&
+      !overriddenGridToggle.classList.contains("active"),
+    "Grid highlighter toggle buttons are not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info(
+    "Toggling ON the CSS grid highlighter from the overridden rule in the rule-view."
+  );
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  overriddenGridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle buttons are active in " +
+      "the rule-view."
+  );
+  ok(
+    gridToggle.classList.contains("active") &&
+      overriddenGridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info(
+    "Toggling off the CSS grid highlighter from the normal grid declaration in the " +
+      "rule-view."
+  );
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle buttons are not " +
+      "active in the rule-view."
+  );
+  ok(
+    !gridToggle.classList.contains("active") &&
+      !overriddenGridToggle.classList.contains("active"),
+    "Grid highlighter toggle buttons are not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_03.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_03.js
new file mode 100644
index 0000000000..77022a103e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_03.js
@@ -0,0 +1,138 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view with multiple grids in the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 1);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  info("Selecting the first grid container.");
+  await selectNode("#grid1", inspector);
+  let container = getRuleViewProperty(view, ".grid", "display").valueSpan;
+  let gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info(
+    "Checking the state of the CSS grid toggle for the first grid container in the " +
+      "rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info(
+    "Toggling ON the CSS grid highlighter for the first grid container from the " +
+      "rule-view."
+  );
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Selecting the second grid container.");
+  await selectNode("#grid2", inspector);
+  const firstGridHighterShown = highlighters.gridHighlighters
+    .keys()
+    .next().value;
+  container = getRuleViewProperty(view, ".grid", "display").valueSpan;
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info(
+    "Checking the state of the CSS grid toggle for the second grid container in the " +
+      "rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "CSS grid highlighter is still shown."
+  );
+
+  info(
+    "Toggling ON the CSS grid highlighter for the second grid container from the " +
+      "rule-view."
+  );
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created for the second grid container and " +
+      "toggle button is active in the rule-view."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  Assert.notEqual(
+    highlighters.gridHighlighters.keys().next().value,
+    firstGridHighterShown,
+    "Grid highlighter for the second grid container is shown."
+  );
+
+  info("Selecting the first grid container.");
+  await selectNode("#grid1", inspector);
+  container = getRuleViewProperty(view, ".grid", "display").valueSpan;
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info(
+    "Checking the state of the CSS grid toggle for the first grid container in the " +
+      "rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_04.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_04.js
new file mode 100644
index 0000000000..70e4b91893
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_04.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view from a 'display: grid !important'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid !important;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_05.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_05.js
new file mode 100644
index 0000000000..54d2d0979f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_05.js
@@ -0,0 +1,139 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the grid toggle is hidden when the maximum number of grid highlighters
+// have been reached.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid3" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 2);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const ruleView = selectRuleView(inspector);
+  const { document: doc } = gridInspector;
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid1", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox2 = gridList.children[1].querySelector("input");
+  const checkbox3 = gridList.children[2].querySelector("input");
+  const container = getRuleViewProperty(ruleView, ".grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid2.");
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  checkbox2.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid3.");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  checkbox3.click();
+  await onHighlighterShown;
+
+  info("Checking the CSS grid toggle for #grid1 is disabled.");
+  ok(
+    gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is disabled."
+  );
+  is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
+
+  info("Toggling OFF the CSS grid highlighter for #grid3.");
+  let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  checkbox3.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid1 from the rule-view.");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info("Checking the CSS grid toggle for #grid1 is not disabled.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
+
+  info("Toggling OFF the CSS grid highlighter for #grid1 from the rule-view.");
+  onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js b/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js
new file mode 100644
index 0000000000..5d0d5b24a8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js
@@ -0,0 +1,148 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the text editor correctly calculates the grid line names shown in the
+// autocomplete popup. We generally want to show all the grid line names for a grid
+// container, except for implicit line names created by an implicitly named area.
+
+const TEST_URL = URL_ROOT + "doc_grid_area_gridline_names.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, view } = await openRuleView();
+
+  info(
+    "Test that implicit grid line names from explicit grid areas are shown."
+  );
+  await testExplicitNamedAreas(inspector, view);
+
+  info(
+    "Test that explicit grid line names creating implicit grid areas are shown."
+  );
+  await testImplicitNamedAreasWithExplicitGridLineNames(inspector, view);
+
+  info(
+    "Test that implicit grid line names creating implicit grid areas are not shown."
+  );
+  await testImplicitAreasWithImplicitGridLineNames(inspector, view);
+  await testImplicitNamedAreasWithReversedGridLineNames(inspector, view);
+});
+
+async function testExplicitNamedAreas(inspector, view) {
+  await selectNode(".header", inspector);
+
+  const gridColLines = ["header-start", "header-end", "main-start", "main-end"];
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the expected grid line column names are shown in the editor popup."
+  );
+  for (const lineName of gridColLines) {
+    Assert.greater(
+      editor.gridLineNames.cols.indexOf(lineName),
+      -1,
+      `${lineName} is a suggested implicit grid line`
+    );
+  }
+}
+
+async function testImplicitNamedAreasWithExplicitGridLineNames(
+  inspector,
+  view
+) {
+  await selectNode(".contentArea", inspector);
+
+  const gridRowLines = [
+    "main-start",
+    "main-end",
+    "content-start",
+    "content-end",
+  ];
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[1];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the expected grid line row names are shown in the editor popup."
+  );
+  for (const lineName of gridRowLines) {
+    Assert.greater(
+      editor.gridLineNames.rows.indexOf(lineName),
+      -1,
+      `${lineName} is a suggested explicit grid line`
+    );
+  }
+}
+
+async function testImplicitAreasWithImplicitGridLineNames(inspector, view) {
+  await selectNode(".a", inspector);
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the implicit grid lines created by implicit areas are not shown."
+  );
+  ok(
+    !(editor.gridLineNames.cols.indexOf("a-end") > -1),
+    "a-end is not shown because it is created by an implicit named area."
+  );
+}
+
+async function testImplicitNamedAreasWithReversedGridLineNames(
+  inspector,
+  view
+) {
+  await selectNode(".b", inspector);
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Test that reversed implicit grid line names from implicit areas are not shown"
+  );
+  ok(
+    !(editor.gridLineNames.cols.indexOf("b-start") > -1),
+    "b-start is not shown because it is created by an implicit named area."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_gridline-names-autocomplete.js b/devtools/client/inspector/rules/test/browser_rules_gridline-names-autocomplete.js
new file mode 100644
index 0000000000..7e9bee61bc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_gridline-names-autocomplete.js
@@ -0,0 +1,205 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property values are autocompleted and cycled
+// correctly when editing an existing property in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    modifers,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//    expect ruleview-changed,
+//  ]
+
+const OPEN = true,
+  SELECTED = true,
+  CHANGE = true;
+const changeTestData = [
+  ["c", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["o", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["l", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "col2-start", OPEN, SELECTED, CHANGE],
+  ["VK_RIGHT", {}, "col2-start", !OPEN, !SELECTED, !CHANGE],
+];
+
+// Creates a new CSS property value.
+// Checks that grid-area autocompletes column and row names.
+const newAreaTestData = [
+  ["g", {}, "gap", OPEN, SELECTED, !CHANGE],
+  ["VK_DOWN", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["VK_DOWN", {}, "grid-area", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "", !OPEN, !SELECTED, !CHANGE],
+  "grid-line-names-updated",
+  ["c", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "c", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", OPEN, !SELECTED, CHANGE],
+  ["r", {}, "revert", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert-layer", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "row1-start", OPEN, SELECTED, CHANGE],
+  ["r", {}, "rr", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "r", !OPEN, !SELECTED, CHANGE],
+  ["o", {}, "row1-start", OPEN, SELECTED, CHANGE],
+  ["VK_TAB", {}, "", !OPEN, !SELECTED, CHANGE],
+];
+
+// Creates a new CSS property value.
+// Checks that grid-row only autocompletes row names.
+const newRowTestData = [
+  ["g", {}, "gap", OPEN, SELECTED, !CHANGE],
+  ["r", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["i", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["d", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["-", {}, "grid-area", OPEN, SELECTED, !CHANGE],
+  ["r", {}, "grid-row", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "", !OPEN, !SELECTED, !CHANGE],
+  "grid-line-names-updated",
+  ["c", {}, "c", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", OPEN, !SELECTED, CHANGE],
+  ["r", {}, "revert", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert-layer", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "row1-start", OPEN, SELECTED, CHANGE],
+  ["VK_TAB", {}, "", !OPEN, !SELECTED, CHANGE],
+];
+
+const TEST_URL = URL_ROOT + "doc_grid_names.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion changing a preexisting property");
+  await runChangePropertyAutocompletionTest(
+    toolbox,
+    inspector,
+    view,
+    changeTestData
+  );
+
+  info("Test autocompletion creating a new property");
+  await runNewPropertyAutocompletionTest(
+    toolbox,
+    inspector,
+    view,
+    newAreaTestData
+  );
+
+  info("Test autocompletion creating a new property");
+  await runNewPropertyAutocompletionTest(
+    toolbox,
+    inspector,
+    view,
+    newRowTestData
+  );
+});
+
+async function runNewPropertyAutocompletionTest(
+  toolbox,
+  inspector,
+  view,
+  testData
+) {
+  info("Selecting the test node");
+  await selectNode("#cell2", inspector);
+
+  info("Focusing the css property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+
+  info("Starting to test for css property completion");
+  for (const data of testData) {
+    if (data == "grid-line-names-updated") {
+      await gridLineNamesUpdated;
+      continue;
+    }
+    await testCompletion(data, editor, view);
+  }
+}
+
+async function runChangePropertyAutocompletionTest(
+  toolbox,
+  inspector,
+  view,
+  testData
+) {
+  info("Selecting the test node");
+  await selectNode("#cell3", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1).rule;
+  const prop = ruleEditor.textProps[0];
+
+  info("Focusing the css property editable value");
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  let editor = await focusEditableField(view, prop.editor.valueSpan);
+  await gridLineNamesUpdated;
+
+  info("Starting to test for css property completion");
+  for (const data of testData) {
+    // Re-define the editor at each iteration, because the focus may have moved
+    // from property to value and back
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(data, editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, modifiers, completion, open, selected, change],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  let onDone;
+  if (change) {
+    // If the key triggers a ruleview-changed, wait for that event, it will
+    // always be the last to be triggered and tells us when the preview has
+    // been done.
+    onDone = view.once("ruleview-changed");
+  } else {
+    // Otherwise, expect an after-suggest event (except if the popup gets
+    // closed).
+    onDone =
+      key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+        ? editor.once("after-suggest")
+        : null;
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
+
+  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onDone;
+  await onPopupEvent;
+
+  // The key might have been a TAB or shift-TAB, in which case the editor will
+  // be a new one
+  editor = inplaceEditor(view.styleDocument.activeElement);
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
new file mode 100644
index 0000000000..22bec84378
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that we can guess indentation from a style sheet, not just a
+// rule.
+
+// Use a weird indentation depth to avoid accidental success.
+const TEST_URI = `
+  <style type='text/css'>
+div {
+       background-color: blue;
+}
+
+* {
+}
+</style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+const expectedText = `
+div {
+       background-color: blue;
+}
+
+* {
+       color: chartreuse;
+}
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Add a new property in the rule-view");
+  await addProperty(view, 2, "color", "chartreuse");
+
+  info("Switch to the style-editor");
+  const { UI } = await toolbox.selectTool("styleeditor");
+
+  const styleEditor = await UI.editors[0].getSourceEditor();
+  const text = styleEditor.sourceEditor.getText();
+  is(text, expectedText, "style inspector changes are synced");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_highlight-element-rule.js b/devtools/client/inspector/rules/test/browser_rules_highlight-element-rule.js
new file mode 100644
index 0000000000..f5e1357950
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-element-rule.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view's highlightElementRule scrolls to the specified rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    .test::after {
+      content: "!";
+      color: red;
+    }
+  </style>
+  <div class="test">Hello</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode(".test", inspector);
+  const { rules, styleWindow } = view;
+
+  info("Highlight .test::after rule.");
+  const ruleId = rules[0].domRule.actorID;
+
+  info("Wait for the view to scroll to the property.");
+  const onHighlightProperty = view.once("scrolled-to-element");
+
+  view.highlightElementRule(ruleId);
+
+  await onHighlightProperty;
+
+  ok(
+    isInViewport(rules[0].editor.element, styleWindow),
+    ".test::after is in view."
+  );
+});
+
+function isInViewport(element, win) {
+  const { top, left, bottom, right } = element.getBoundingClientRect();
+  return (
+    top >= 0 &&
+    bottom <= win.innerHeight &&
+    left >= 0 &&
+    right <= win.innerWidth
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_highlight-property.js b/devtools/client/inspector/rules/test/browser_rules_highlight-property.js
new file mode 100644
index 0000000000..6c244cecfd
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-property.js
@@ -0,0 +1,94 @@
+/* Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view's highlightProperty scrolls to the specified declaration.
+
+const TEST_URI = `
+  <style type="text/css">
+    .test {
+      margin: 5px;
+      font-size: 12px;
+      border: 1px solid blue;
+      margin-top: 20px;
+    }
+
+    .test::after {
+      content: "!";
+      color: red;
+    }
+  </style>
+  <div class="test">Hello this is a test</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode(".test", inspector);
+  const { rules, styleWindow } = view;
+
+  info(
+    "Highlight the computed border-left-width declaration in the rule view."
+  );
+  const borderLeftWidthStyle = rules[2].textProps[2].computed.find(
+    ({ name }) => name === "border-left-width"
+  );
+
+  let onHighlightProperty = view.once("scrolled-to-element");
+  let isHighlighted = view.highlightProperty("border-left-width");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "border-left-property is highlighted.");
+  ok(
+    isInViewport(borderLeftWidthStyle.element, styleWindow),
+    "border-left-width is in view."
+  );
+
+  info("Highlight the font-size declaration in the rule view.");
+  const fontSize = rules[2].textProps[1].editor;
+
+  info("Wait for the view to scroll to the property.");
+  onHighlightProperty = view.once("scrolled-to-element");
+  isHighlighted = view.highlightProperty("font-size");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "font-size property is highlighted.");
+  ok(isInViewport(fontSize.element, styleWindow), "font-size is in view.");
+
+  info("Highlight the pseudo-element's color declaration in the rule view.");
+  const color = rules[0].textProps[1].editor;
+
+  info("Wait for the view to scroll to the property.");
+  onHighlightProperty = view.once("scrolled-to-element");
+  isHighlighted = view.highlightProperty("color");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "color property is highlighted.");
+  ok(isInViewport(color.element, styleWindow), "color property is in view.");
+
+  info("Highlight margin-top declaration in the rules view.");
+  const marginTop = rules[2].textProps[3].editor;
+
+  info("Wait for the view to scroll to the property.");
+  onHighlightProperty = view.once("scrolled-to-element");
+  isHighlighted = view.highlightProperty("margin-top");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "margin-top property is highlighted.");
+  ok(
+    isInViewport(marginTop.element, styleWindow),
+    "margin-top property is in view."
+  );
+});
+
+function isInViewport(element, win) {
+  const { top, left, bottom, right } = element.getBoundingClientRect();
+  return (
+    top >= 0 &&
+    bottom <= win.innerHeight &&
+    left >= 0 &&
+    right <= win.innerWidth
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
new file mode 100644
index 0000000000..f0dc95f15c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
@@ -0,0 +1,125 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a used font-family is highlighted in the rule-view.
+
+const TEST_URI = `
+  <style type="text/css">
+    #id1 {
+      font-family: foo, bar, sans-serif;
+    }
+    #id2 {
+      font-family: serif;
+    }
+    #id3 {
+      font-family: foo, monospace, monospace, serif;
+    }
+    #id4 {
+      font-family: foo, bar;
+    }
+    #id5 {
+      font-family: "monospace";
+    }
+    #id6 {
+      font-family: georgia, arial;
+    }
+    #id7 {
+      font-family: foo, serif !important;
+    }
+    #id8 {
+      font-family: important;
+    }
+    #id9::before {
+      content: ' ';
+      font-family: foo, monospace;
+    }
+  </style>
+  <div id="id1">Text</div>
+  <div id="id2">Text</div>
+  <div id="id3">Text</div>
+  <div id="id4">Text</div>
+  <div id="id5">Text</div>
+  <div id="id6">A &#586;</div>
+  <div id="id7">Text</div>
+  <div id="id8">Text</div>
+  <div id="id9">Text</div>
+`;
+
+// Tests that font-family properties in the rule-view correctly
+// indicates which font is in use.
+// Each entry in the test array should contain:
+// {
+//   baseSelector: the rule-view selector to look for font-family in
+//   nb: the number of fonts this property should have
+//   used: the indexes of all the fonts that should be highlighted, or null if none should
+//         be highlighted
+//   selectBeforePseudoElement: Whether the before pseudo element should be selectd or not
+// }
+const TESTS = [
+  { baseSelector: "#id1", nb: 3, used: [2] }, // sans-serif
+  { baseSelector: "#id2", nb: 1, used: [0] }, // serif
+  { baseSelector: "#id3", nb: 4, used: [1] }, // monospace
+  { baseSelector: "#id4", nb: 2, used: null },
+  { baseSelector: "#id5", nb: 1, used: [0] }, // monospace
+  { baseSelector: "#id7", nb: 2, used: [1] }, // serif
+  { baseSelector: "#id8", nb: 1, used: null },
+  { baseSelector: "#id9", nb: 2, used: [1], selectBeforePseudoElement: true }, // monospace
+];
+
+if (Services.appinfo.OS !== "Linux") {
+  // Both georgia and arial are used because the second character can't be rendered with
+  // georgia, so the browser falls back. Also, skip this on Linux which has neither of
+  // these fonts.
+  TESTS.push({ baseSelector: "#id6", nb: 2, used: [0, 1] });
+}
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const { baseSelector, nb, used, selectBeforePseudoElement } of TESTS) {
+    const onFontHighlighted = view.once("font-highlighted");
+
+    if (selectBeforePseudoElement) {
+      // Query the first children node to get the before pseudo element:
+      const baseNode = await getNodeFront(baseSelector, inspector);
+      const pseudoElement = (await inspector.walker.children(baseNode))
+        .nodes[0];
+      await selectNode(pseudoElement, inspector);
+    } else {
+      await selectNode(baseSelector, inspector);
+    }
+    await onFontHighlighted;
+
+    const selector = !selectBeforePseudoElement
+      ? baseSelector
+      : `${baseSelector}::before`;
+    info(`Looking for fonts in font-family property for: <${selector}>`);
+
+    const prop = getRuleViewProperty(view, selector, "font-family").valueSpan;
+    const fonts = prop.querySelectorAll(".ruleview-font-family");
+
+    ok(fonts.length, "Fonts found in the property");
+    is(fonts.length, nb, "Correct number of fonts found in the property");
+
+    const highlighted = [...fonts].filter(span =>
+      span.classList.contains("used-font")
+    );
+    const expectedHighlightedNb = used === null ? 0 : used.length;
+    is(
+      highlighted.length,
+      expectedHighlightedNb,
+      "Correct number of used fonts found"
+    );
+
+    let highlightedIndex = 0;
+    [...fonts].forEach((font, index) => {
+      if (font === highlighted[highlightedIndex]) {
+        is(index, used[highlightedIndex], "The right font is highlighted");
+        highlightedIndex++;
+      }
+    });
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_imported_stylesheet_edit.js b/devtools/client/inspector/rules/test/browser_rules_imported_stylesheet_edit.js
new file mode 100644
index 0000000000..76c2b4a5ba
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_imported_stylesheet_edit.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI = URL_ROOT_SSL + "doc_rules_imported_stylesheet_edit.html";
+const SJS_URI = URL_ROOT_SSL + "sjs_imported_stylesheet_edit.sjs";
+/**
+ * Test that imported stylesheets are correctly handled by the inspector after
+ * being updated.
+ * The inspector used to retrieve an outdated version of the stylesheet text,
+ * which triggered many issues: outdated values, blank panels etc...
+ *
+ * This test involves an imported CSS which is generated by a sjs file.
+ * Using sjs here allows us to simulate an "update" of a stylesheet while still
+ * fetching the same URL, which closely matches what a developer would experience
+ * when manually editing a stylesheet in an IDE before reloading a page.
+ */
+add_task(async function () {
+  info("Call `?setup` on the test sjs");
+  await fetch(SJS_URI + "?setup");
+
+  info("Add the test tab, open the rule-view and select the test node");
+  await addTab(TEST_URI);
+
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+  const redColorProp = getTextProperty(view, 1, { color: "red" });
+  ok(redColorProp, "RuleView displays a color:red property");
+
+  // The "?update-stylesheet" call will change the CSS returned by sjs_imported_stylesheet_edit.sjs:
+  // - some rules are added before the matching `div {}` rule
+  // - the value of the `color` property changes
+  info("Call `?update-stylesheet` on the test sjs");
+  await fetch(SJS_URI + "?update-stylesheet");
+
+  info("Reload the page to restore the initial state");
+  await navigateTo(TEST_URI);
+
+  info("Wait until a rule is displayed at index 1");
+  await waitFor(() => view.element.children[1]);
+
+  info("Check that the displayed rule has been correctly updated.");
+  const goldColorProp = getTextProperty(view, 1, { color: "gold" });
+  ok(goldColorProp, "RuleView displays a color:gold property");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
new file mode 100644
index 0000000000..a196fcca40
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
@@ -0,0 +1,47 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a declaration's inactive state doesn't linger on its previous state when
+// the declaration it depends on changes. Bug 1593944
+
+const TEST_URI = `
+<style>
+  div {
+    justify-content: center;
+    /*! display: flex */
+  }
+</style>
+<div>`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  const justifyContent = { "justify-content": "center" };
+  const justifyItems = { "justify-items": "center" };
+  const displayFlex = { display: "flex" };
+  const displayGrid = { display: "grid" };
+
+  info("Enable display:flex and check that justify-content becomes active");
+  await checkDeclarationIsInactive(view, 1, justifyContent);
+  await toggleDeclaration(view, 1, displayFlex);
+  await checkDeclarationIsActive(view, 1, justifyContent);
+
+  info(
+    "Rename justify-content to justify-items and check that it becomes inactive"
+  );
+  await updateDeclaration(view, 1, justifyContent, justifyItems);
+  await checkDeclarationIsInactive(view, 1, justifyItems);
+
+  info(
+    "Rename display:flex to display:grid and check that justify-items becomes active"
+  );
+  await updateDeclaration(view, 1, displayFlex, displayGrid);
+  await checkDeclarationIsActive(view, 1, justifyItems);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_flexbox.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_flexbox.js
new file mode 100644
index 0000000000..23f1b39845
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_flexbox.js
@@ -0,0 +1,161 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test inactive flex properties.
+
+const TEST_URI = `
+<head>
+  <style>
+    #container {
+      width: 200px;
+      height: 100px;
+      border: 1px solid #000;
+      align-content: space-between;
+      order: 1;
+    }
+
+    .flex-item {
+      flex-basis: auto;
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-direction: row;
+    }
+
+    #self-aligned {
+      align-self: stretch;
+    }
+  </style>
+</head>
+<body>
+    <h1>browser_rules_inactive_css_flexbox.js</h1>
+    <div id="container" style="display:flex">
+      <div class="flex-item item-1" style="order:1">1</div>
+      <div class="flex-item item-2" style="order:2">2</div>
+      <div class="flex-item item-3" style="order:3">3</div>
+    </div>
+    <div id="self-aligned"></div>
+</body>`;
+
+const BEFORE = [
+  {
+    selector: "#self-aligned",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "align-self": "stretch",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: ".item-2",
+    activeDeclarations: [
+      {
+        declarations: {
+          order: "2",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          "flex-basis": "auto",
+          "flex-grow": "1",
+          "flex-shrink": "1",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "flex-direction": "row",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#container",
+    activeDeclarations: [
+      {
+        declarations: {
+          display: "flex",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          width: "200px",
+          height: "100px",
+          border: "1px solid #000",
+          "align-content": "space-between",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          order: "1",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+const AFTER = [
+  {
+    selector: ".item-2",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          order: "2",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declaration: {
+          "flex-basis": "auto",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "flex-grow": "1",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "flex-shrink": "1",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "flex-direction": "row",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, BEFORE);
+
+  // Toggle `display:flex` to disabled.
+  await toggleDeclaration(view, 0, {
+    display: "flex",
+  });
+  await runInactiveCSSTests(view, inspector, AFTER);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_grid.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_grid.js
new file mode 100644
index 0000000000..a0afad08f7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_grid.js
@@ -0,0 +1,267 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test inactive grid properties.
+
+const TEST_URI = `
+<head>
+  <style>
+    html {
+      grid-area: foo;
+    }
+    #container {
+      width: 200px;
+      height: 100px;
+      border: 1px solid #000;
+      column-gap: 10px;
+      row-gap: 10px;
+      align-self: start;
+      position: relative;
+    }
+
+    .item-1 {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 1;
+      grid-row-end: auto;
+      flex-direction: row
+    }
+
+    #abspos {
+      position: absolute;
+      grid-column: 2;
+    }
+
+    #self-aligned {
+      align-self: stretch;
+    }
+  </style>
+</head>
+<body>
+    <h1>browser_rules_inactive_css_grid.js</h1>
+    <div id="container" style="display:grid">
+      <div class="grid-item item-1">1</div>
+      <div class="grid-item item-2">2</div>
+      <div class="grid-item item-3">3</div>
+      <div class="grid-item item-4">4</div>
+      <div class="grid-item item-5">
+        <div id="abspos">AbsPos item</div>
+      </div>
+    </div>
+    <div id="self-aligned"></div>
+</body>`;
+
+const BEFORE = [
+  {
+    // Check first that the getting grid-related data about the <html> node doesn't break.
+    // See bug 1576484.
+    selector: "html",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "grid-area": "foo",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#self-aligned",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "align-self": "stretch",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: ".item-1",
+    activeDeclarations: [
+      {
+        declarations: {
+          "grid-column-start": "1",
+          "grid-column-end": "3",
+          "grid-row-start": "1",
+          "grid-row-end": "auto",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "flex-direction": "row",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#abspos",
+    activeDeclarations: [
+      {
+        declarations: {
+          "grid-column": 2,
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#container",
+    activeDeclarations: [
+      {
+        declarations: {
+          display: "grid",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          width: "200px",
+          height: "100px",
+          border: "1px solid #000",
+          "column-gap": "10px",
+          "row-gap": "10px",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "align-self": "start",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+const AFTER = [
+  {
+    activeDeclarations: [
+      {
+        declarations: {
+          display: "grid",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          width: "200px",
+          height: "100px",
+          border: "1px solid #000",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "column-gap": "10px",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "row-gap": "10px",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "align-self": "start",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#abspos",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "grid-column": 2,
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, BEFORE);
+
+  // Toggle `display:grid` to disabled.
+  await toggleDeclaration(view, 0, {
+    display: "grid",
+  });
+  await view.once("ruleview-refreshed");
+  await runInactiveCSSTests(view, inspector, AFTER);
+
+  info("Toggle `display: grid` to enabled again.");
+  await selectNode("#container", inspector);
+  await toggleDeclaration(view, 0, {
+    display: "grid",
+  });
+  await runAbsPosGridElementTests(view, inspector);
+});
+
+/**
+ * Tests for absolute positioned elements in a grid.
+ */
+async function runAbsPosGridElementTests(view, inspector) {
+  info("Toggling `position: relative` to disabled.");
+  await toggleDeclaration(view, 1, {
+    position: "relative",
+  });
+  await runInactiveCSSTests(view, inspector, [
+    {
+      selector: "#abspos",
+      inactiveDeclarations: [
+        {
+          declaration: {
+            "grid-column": 2,
+          },
+          ruleIndex: 1,
+        },
+      ],
+    },
+  ]);
+
+  info("Toggling `position: relative` back to enabled.");
+  await selectNode("#container", inspector);
+  await toggleDeclaration(view, 1, {
+    position: "relative",
+  });
+
+  info("Toggling `position: absolute` on grid element to disabled.");
+  await selectNode("#abspos", inspector);
+  await toggleDeclaration(view, 1, {
+    position: "absolute",
+  });
+
+  await runInactiveCSSTests(view, inspector, [
+    {
+      selector: "#abspos",
+      inactiveDeclarations: [
+        {
+          declaration: {
+            "grid-column": 2,
+          },
+          ruleIndex: 1,
+        },
+      ],
+    },
+  ]);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_inline.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_inline.js
new file mode 100644
index 0000000000..2670e50d10
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_inline.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test css properties that are inactive on block-level elements.
+
+const TEST_URI = `
+<style>
+#block {
+  border: 1px solid #000;
+  vertical-align: sub;
+}
+td {
+  vertical-align: super;
+}
+#flex {
+  display: inline-flex;
+  vertical-align: text-bottom;
+}
+</style>
+<h1 style="vertical-align:text-bottom;">browser_rules_inactive_css_inline.js</h1>
+<div id="block">Block</div>
+<table>
+  <tr><td>A table cell</td></tr>
+</table>
+<div id="flex">Inline flex element</div>
+`;
+
+const TEST_DATA = [
+  {
+    selector: "h1",
+    inactiveDeclarations: [
+      {
+        declaration: { "vertical-align": "text-bottom" },
+        ruleIndex: 0,
+      },
+    ],
+  },
+  {
+    selector: "#block",
+    inactiveDeclarations: [
+      {
+        declaration: { "vertical-align": "sub" },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "td",
+    activeDeclarations: [
+      {
+        declarations: { "vertical-align": "super" },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#flex",
+    activeDeclarations: [
+      {
+        declarations: { "vertical-align": "text-bottom" },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js
new file mode 100644
index 0000000000..d03bcd9e63
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js
@@ -0,0 +1,31 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a CSS property is marked as inactive when a condition
+// changes in other CSS rule matching the element.
+
+const TEST_URI = `
+<style>
+  .display {
+    display: grid;
+  }
+  .gap {
+    gap: 1em;
+  }
+</style>
+<div class="display gap">`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  await checkDeclarationIsActive(view, 1, { gap: "1em" });
+  await toggleDeclaration(view, 2, { display: "grid" });
+  await checkDeclarationIsInactive(view, 1, { gap: "1em" });
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_visited.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_visited.js
new file mode 100644
index 0000000000..6b452f23bc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_visited.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test css properties that are inactive in :visited rule.
+
+const TEST_URI = URL_ROOT + "doc_visited.html";
+
+const TEST_DATA = [
+  {
+    selector: "#visited",
+    inactiveDeclarations: [
+      {
+        declaration: { "font-size": "100px" },
+        ruleIndex: 2,
+      },
+      {
+        declaration: { "margin-left": "50px" },
+        ruleIndex: 2,
+      },
+    ],
+    activeDeclarations: [
+      {
+        declarations: {
+          "background-color": "transparent",
+          "border-color": "lime",
+          color: "rgba(0, 255, 0, 0.8)",
+          "text-decoration-color": "lime",
+          "text-emphasis-color": "seagreen",
+        },
+        ruleIndex: 2,
+      },
+    ],
+  },
+  {
+    selector: "#visited-and-other-matched-selector",
+    activeDeclarations: [
+      {
+        declarations: {
+          "background-color": "transparent",
+          "border-color": "lime",
+          color: "rgba(0, 255, 0, 0.8)",
+          "font-size": "100px",
+          "margin-left": "50px",
+          "text-decoration-color": "lime",
+          "text-emphasis-color": "seagreen",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async () => {
+  info("Open a url which has visited links");
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the visited links are available");
+  const selectors = TEST_DATA.map(t => t.selector);
+  await waitUntilVisitedState(tab, selectors);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_xul.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_xul.js
new file mode 100644
index 0000000000..b9536f1f9e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_xul.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test inactive css properties in XUL documents.
+
+const TEST_URI = URL_ROOT_SSL + "doc_inactive_css_xul.xhtml";
+
+const TEST_DATA = [
+  {
+    selector: "#test-img-in-xul",
+    inactiveDeclarations: [
+      {
+        declaration: { "grid-column-gap": "5px" },
+        ruleIndex: 0,
+      },
+    ],
+    activeDeclarations: [
+      {
+        declarations: {
+          width: "10px",
+          height: "10px",
+        },
+        ruleIndex: 0,
+      },
+    ],
+  },
+];
+
+add_task(async () => {
+  await SpecialPowers.pushPermissions([
+    { type: "allowXULXBL", allow: true, context: URL_ROOT_SSL },
+  ]);
+
+  info("Open a url to a XUL document");
+  await addTab(TEST_URI);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js b/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js
new file mode 100644
index 0000000000..498b3185c9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js
@@ -0,0 +1,88 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that custom properties are only displayed when they are unregistered,
+// or when their property definition indicate that they should inherit.
+
+const TEST_URI = `
+  <style>
+    @property --inherit {
+      syntax: "<color>";
+      inherits: true;
+      initial-value: gold;
+    }
+
+    @property --no-inherit {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: tomato;
+    }
+
+    main, [test="no-inherit"] {
+      --no-inherit: blue;
+    }
+
+    main, [test="inherit"] {
+      --inherit: red;
+    }
+
+    main, [test="unregistered"] {
+      --myvar: brown;
+    }
+
+    h1 {
+      background-color: var(--no-inherit);
+      color: var(--inherit);
+      outline-color: var(--myvar);
+    }
+  </style>
+  <main>
+    <h1>Hello world</h1>
+  </main>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.properties-and-values.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  const inheritedHeaders = view.element.querySelectorAll(
+    ".ruleview-header-inherited"
+  );
+  is(inheritedHeaders.length, 1, "There's one inherited section header");
+  is(
+    inheritedHeaders[0].textContent,
+    "Inherited from main",
+    "The header is the expected inherited one"
+  );
+
+  const inheritedRules = view.element.querySelectorAll(
+    ".ruleview-header ~ .ruleview-rule"
+  );
+  is(inheritedRules.length, 2, "There are 2 inherited rules displayed");
+
+  info("Check that registered inherits property is visible");
+  is(
+    getRuleViewPropertyValue(view, `main, [test="inherit"]`, "--inherit"),
+    "red",
+    "--inherit definition on main is visible"
+  );
+
+  info("Check that unregistered property is visible");
+  is(
+    getRuleViewPropertyValue(view, `main, [test="unregistered"]`, "--myvar"),
+    "brown",
+    "--myvar definition on main is displayed"
+  );
+
+  info("Check that registered non-inherits property is not visible");
+  // The no-inherit rule only has 1 definition that should be hidden, which means
+  // that the whole rule should be hidden
+  ok(
+    !getRuleViewRule(view, `main, [test="no-inherit"]`),
+    "The rule with the not inherited registered property is not displayed"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js
new file mode 100644
index 0000000000..60e7966528
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that inherited properties appear for a nested element in the
+// rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    #test2 {
+      background-color: green;
+      color: purple;
+    }
+  </style>
+  <div id="test2"><div id="test1">Styled Node</div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test1", inspector);
+  await simpleInherit(inspector, view);
+});
+
+function simpleInherit(inspector, view) {
+  const elementStyle = view._elementStyle;
+  is(elementStyle.rules.length, 2, "Should have 2 rules.");
+
+  const elementRule = elementStyle.rules[0];
+  ok(
+    !elementRule.inherited,
+    "Element style attribute should not consider itself inherited."
+  );
+
+  const inheritRule = elementStyle.rules[1];
+  is(
+    inheritRule.selectorText,
+    "#test2",
+    "Inherited rule should be the one that includes inheritable properties."
+  );
+  ok(!!inheritRule.inherited, "Rule should consider itself inherited.");
+  is(inheritRule.textProps.length, 2, "Rule should have two styles");
+  const bgcProp = inheritRule.textProps[0];
+  is(
+    bgcProp.name,
+    "background-color",
+    "background-color property should exist"
+  );
+  ok(bgcProp.invisible, "background-color property should be invisible");
+  const inheritProp = inheritRule.textProps[1];
+  is(inheritProp.name, "color", "color should have been inherited.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js
new file mode 100644
index 0000000000..da489b45d1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that no inherited properties appear when the property does not apply
+// to the nested element.
+
+const TEST_URI = `
+  <style type="text/css">
+    #test2 {
+      background-color: green;
+    }
+  </style>
+  <div id="test2"><div id="test1">Styled Node</div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test1", inspector);
+  await emptyInherit(inspector, view);
+});
+
+function emptyInherit(inspector, view) {
+  // No inheritable styles, this rule shouldn't show up.
+  const elementStyle = view._elementStyle;
+  is(elementStyle.rules.length, 1, "Should have 1 rule.");
+
+  const elementRule = elementStyle.rules[0];
+  ok(
+    !elementRule.inherited,
+    "Element style attribute should not consider itself inherited."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_03.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_03.js
new file mode 100644
index 0000000000..995fd7f88d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_03.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that inline inherited properties appear in the nested element.
+
+var {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+const TEST_URI = `
+  <div id="test2" style="color: red">
+    <div id="test1">Styled Node</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test1", inspector);
+  await elementStyleInherit(inspector, view);
+});
+
+function elementStyleInherit(inspector, view) {
+  const elementStyle = view._elementStyle;
+  is(elementStyle.rules.length, 2, "Should have 2 rules.");
+
+  const elementRule = elementStyle.rules[0];
+  ok(
+    !elementRule.inherited,
+    "Element style attribute should not consider itself inherited."
+  );
+
+  const inheritRule = elementStyle.rules[1];
+  is(
+    inheritRule.domRule.type,
+    ELEMENT_STYLE,
+    "Inherited rule should be an element style, not a rule."
+  );
+  ok(!!inheritRule.inherited, "Rule should consider itself inherited.");
+  is(
+    inheritRule.textProps.length,
+    1,
+    "Should only display one inherited style"
+  );
+  const inheritProp = inheritRule.textProps[0];
+  is(inheritProp.name, "color", "color should have been inherited.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_04.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_04.js
new file mode 100644
index 0000000000..2416b01910
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_04.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that different inherited properties sections are created for rules
+// inherited from several elements of the same type.
+
+const TEST_URI = `
+  <div style="cursor:pointer">
+    A
+    <div style="cursor:pointer">
+      B<a>Cursor</a>
+    </div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("a", inspector);
+  await elementStyleInherit(inspector, view);
+});
+
+function elementStyleInherit(inspector, view) {
+  const gutters = view.element.querySelectorAll(".ruleview-header");
+  is(gutters.length, 2, "Gutters should contains 2 sections");
+  ok(gutters[0].textContent, "Inherited from div");
+  ok(gutters[1].textContent, "Inherited from div");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inline-source-map.js b/devtools/client/inspector/rules/test/browser_rules_inline-source-map.js
new file mode 100644
index 0000000000..34a9943b56
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inline-source-map.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when a source map comment appears in an inline stylesheet, the
+// rule-view still appears correctly.
+// Bug 1255787.
+
+const TESTCASE_URI = URL_ROOT + "doc_inline_sourcemap.html";
+const PREF = "devtools.source-map.client-service.enabled";
+
+add_task(async function () {
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  const ruleEl = getRuleViewRule(view, "div");
+  ok(ruleEl, "The 'div' rule exists in the rule-view");
+
+  Services.prefs.clearUserPref(PREF);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inline-style-order.js b/devtools/client/inspector/rules/test/browser_rules_inline-style-order.js
new file mode 100644
index 0000000000..6018b04a85
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inline-style-order.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that when the order of properties in the inline style changes, the inline style
+// rule updates accordingly.
+// This can happen in cases such as this one:
+// Given this DOM node:
+// <div style="margin:0;color:red;"></div>
+// Executing this:
+// element.style.margin = "10px";
+// Will result in the following attribute value:
+// <div style="color: red; margin: 10px;"></div>
+// The inline style rule in the rule-view need to update to reflect the new order of
+// properties accordingly.
+// Note however that we do not want to expect a specific order in this test, and be
+// subject to failures if it changes again. Instead, the test compares the order against
+// what is in the style DOM attribute.
+// See bug 1467076.
+
+// Test cases, these are { name, value } objects used to change the DOM element's style
+// property. After each of these changes, the inline style rule's content will be checked
+// against the style DOM attribute's content.
+const TEST_CASES = [
+  { name: "margin", value: "10px" },
+  { name: "color", value: "blue" },
+  { name: "padding", value: "20px" },
+  { name: "margin", value: "0px" },
+  { name: "color", value: "black" },
+];
+
+add_task(async function () {
+  const { linkedBrowser: browser } = await addTab(
+    `data:text/html;charset=utf-8,<div style="margin:0;color:red;">Inspect me!</div>`
+  );
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  for (const { name, value } of TEST_CASES) {
+    info(`Setting style.${name} to ${value} on the test node`);
+
+    const onStyleMutation = waitForStyleModification(inspector);
+    const onRuleRefreshed = inspector.once("rule-view-refreshed");
+    await SpecialPowers.spawn(
+      browser,
+      [{ name, value }],
+      async function (change) {
+        content.document.querySelector("div").style[change.name] = change.value;
+      }
+    );
+    await Promise.all([onStyleMutation, onRuleRefreshed]);
+
+    info("Getting and parsing the content of the node's style attribute");
+    const markupContainer = inspector.markup.getContainer(
+      inspector.selection.nodeFront
+    );
+    const styleAttrValue =
+      markupContainer.elt.querySelector(".attr-value").textContent;
+    const parsedStyleAttr = styleAttrValue
+      .split(";")
+      .filter(v => v.trim())
+      .map(decl => {
+        const nameValue = decl.split(":").map(v => v.trim());
+        return { name: nameValue[0], value: nameValue[1] };
+      });
+
+    info("Checking the content of the rule-view");
+    const ruleEditor = getRuleViewRuleEditor(view, 0);
+    const propertiesEls = ruleEditor.propertyList.children;
+
+    parsedStyleAttr.forEach((expected, i) => {
+      is(
+        propertiesEls[i].querySelector(".ruleview-propertyname").textContent,
+        expected.name,
+        `Correct name found for property ${i}`
+      );
+      is(
+        propertiesEls[i].querySelector(".ruleview-propertyvalue").textContent,
+        expected.value,
+        `Correct value found for property ${i}`
+      );
+    });
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js b/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js
new file mode 100644
index 0000000000..0e99d11789
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when a source map is missing/invalid, the rule view still loads
+// correctly.
+
+const TESTCASE_URI = URL_ROOT + "doc_invalid_sourcemap.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const CSS_LOC = "doc_invalid_sourcemap.css:1";
+
+add_task(async function () {
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  const ruleEl = getRuleViewRule(view, "div");
+  ok(ruleEl, "The 'div' rule exists in the rule-view");
+
+  const prop = getRuleViewProperty(view, "div", "color");
+  ok(prop, "The 'color' property exists in this rule");
+
+  const value = getRuleViewPropertyValue(view, "div", "color");
+  is(value, "gold", "The 'color' property has the right value");
+
+  await verifyLinkText(view, CSS_LOC);
+
+  Services.prefs.clearUserPref(PREF);
+});
+
+function verifyLinkText(view, text) {
+  info("Verifying that the rule-view stylesheet link is " + text);
+  const label = getRuleViewLinkByIndex(view, 1).querySelector(
+    ".ruleview-rule-source-label"
+  );
+  return waitForSuccess(
+    () => label.textContent == text,
+    "Link text changed to display correct location: " + text
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_invalid.js b/devtools/client/inspector/rules/test/browser_rules_invalid.js
new file mode 100644
index 0000000000..f6776b47c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_invalid.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that an invalid property still lets us display the rule view
+// Bug 1235603.
+
+const TEST_URI = `
+  <style>
+    div {
+        background: #fff;
+        font-family: sans-serif;
+        url(display-table.min.htc);
+    }
+ </style>
+ <body>
+    <div id="testid" class="testclass">Styled Node</div>
+ </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  // Have to actually get the rule in order to ensure that the
+  // elements were created.
+  ok(getRuleViewRule(view, "div"), "Rule with div selector exists");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_keybindings.js b/devtools/client/inspector/rules/test/browser_rules_keybindings.js
new file mode 100644
index 0000000000..4a85d4b497
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keybindings.js
@@ -0,0 +1,301 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test keyboard navigation in the rule view
+
+add_task(async function () {
+  await pushPref("devtools.inspector.rule-view.focusNextOnEnter", false);
+  const tab = await addTab(`data:text/html;charset=utf-8,
+    <style>h1 {}</style>
+    <h1>Some header text</h1>`);
+  let { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info("Getting the ruleclose brace element for the `h1` rule");
+  const brace = view.styleDocument.querySelectorAll(".ruleview-ruleclose")[1];
+
+  info("Focus the new property editable field to create a color property");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  await focusNewRuleViewProperty(ruleEditor);
+  EventUtils.sendString("color");
+
+  info("Typing ENTER to focus the next field: property value");
+  let onFocus = once(brace.parentNode, "focus", true);
+  let onRuleViewChanged = view.once("ruleview-changed");
+
+  EventUtils.sendKey("Return");
+
+  await onFocus;
+  await onRuleViewChanged;
+  ok(true, "The value field was focused");
+
+  info("Entering a property value");
+  EventUtils.sendString("tomato");
+
+  info("Typing Tab again should focus a new property name");
+  onFocus = once(brace.parentNode, "focus", true);
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("Tab");
+  await onFocus;
+  await onRuleViewChanged;
+  ok(true, "The new property name field was focused");
+
+  info(
+    "Filling new property name with background-color and hit Tab to focus value input"
+  );
+  EventUtils.sendString("background-color");
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("Tab");
+  await onRuleViewChanged;
+
+  ok(true, "The value field was focused");
+
+  info("Entering a background color value");
+  EventUtils.sendString("gold");
+
+  info("Typing Enter should close the input and focus the value span");
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("Return");
+  await onRuleViewChanged;
+
+  info("Wait until the swatch for the color is created");
+  const colorSwatchEl = await waitFor(() =>
+    getRuleViewProperty(
+      view,
+      "h1",
+      "background-color"
+    )?.valueSpan?.querySelector(".ruleview-colorswatch")
+  );
+
+  is(
+    view.styleDocument.activeElement.textContent,
+    "gold",
+    "Value span is focused after pressing Enter"
+  );
+
+  info("Type Tab should focus the color swatch");
+  EventUtils.sendKey("Tab");
+  is(
+    view.styleDocument.activeElement,
+    colorSwatchEl,
+    "Focused was moved to color swatch"
+  );
+
+  info("Press Shift Tab");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  is(
+    view.styleDocument.activeElement.textContent,
+    "gold",
+    "Focus is moved back to property value"
+  );
+
+  info("Press Shift Tab again");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  is(
+    view.styleDocument.activeElement.textContent,
+    "background-color",
+    "Focus is moved back to property name"
+  );
+
+  info("Press Shift Tab once more");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  ok(
+    view.styleDocument.activeElement.matches(
+      "input[type=checkbox].ruleview-enableproperty"
+    ),
+    "Focus is moved to the prop toggle checkbox"
+  );
+  const toggleEl = view.styleDocument.activeElement;
+  ok(toggleEl.checked, "Checkbox is checked by default");
+  is(
+    toggleEl.getAttribute("title"),
+    "Enable background-color property",
+    "checkbox has expected label"
+  );
+
+  info("Press Space to uncheck checkbox");
+  let onRuleViewRefreshed = view.once("ruleview-changed");
+  EventUtils.sendKey("Space");
+  await onRuleViewRefreshed;
+  ok(!toggleEl.checked, "Checkbox is now unchecked");
+
+  info("Press Space to check checkbox back");
+  onRuleViewRefreshed = view.once("ruleview-changed");
+  EventUtils.sendKey("Space");
+  await onRuleViewRefreshed;
+  ok(toggleEl.checked, "Checkbox is checked again");
+
+  info("Re-start the toolbox");
+  await gDevTools.closeToolboxForTab(tab);
+  ({ view } = await openRuleView());
+});
+
+// The `element` have specific behavior, so we want to test that keyboard navigation
+// also works fine on them.
+
+add_task(async function testKeyboardNavigationInElementRule() {
+  await pushPref("devtools.inspector.rule-view.focusNextOnEnter", false);
+  await addTab("data:text/html;charset=utf-8,<h1>Some header text</h1>");
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info("Getting the ruleclose brace element");
+  const brace = view.styleDocument.querySelector(".ruleview-ruleclose");
+
+  info("Focus the new property editable field to create a color property");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+  editor.input.value = "color";
+
+  info("Typing ENTER to focus the next field: property value");
+  let onFocus = once(brace.parentNode, "focus", true);
+  let onRuleViewChanged = view.once("ruleview-changed");
+  let onStyleAttributeMutation = waitForStyleAttributeMutation(view, `color: `);
+
+  EventUtils.sendKey("Return");
+
+  await onFocus;
+  await onRuleViewChanged;
+  await onStyleAttributeMutation;
+  ok(true, "The value field was focused");
+
+  info("Entering a property value");
+  onStyleAttributeMutation = waitForStyleAttributeMutation(
+    view,
+    `color: green;`
+  );
+  editor = getCurrentInplaceEditor(view);
+  editor.input.value = "green";
+
+  info("Typing Tab again should focus a new property name");
+  onFocus = once(brace.parentNode, "focus", true);
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("Tab");
+  await onFocus;
+  await onRuleViewChanged;
+  await onStyleAttributeMutation;
+  ok(true, "The new property name field was focused");
+
+  info(
+    "Filling new property name with background-color and hit Tab to focus value input"
+  );
+
+  EventUtils.sendString("background-color");
+
+  onRuleViewChanged = view.once("ruleview-changed");
+  onStyleAttributeMutation = waitForStyleAttributeMutation(
+    view,
+    `background-color:`
+  );
+  EventUtils.sendKey("Tab");
+  await onRuleViewChanged;
+  await onStyleAttributeMutation;
+
+  ok(true, "The value field was focused");
+
+  info("Entering a background color value");
+  onStyleAttributeMutation = waitForStyleAttributeMutation(
+    view,
+    `background-color: tomato;`
+  );
+
+  EventUtils.sendString("tomato", view.styleWindow);
+
+  info("Typing Enter should close the input and focus the value span");
+  const onValueDone = view.once("ruleview-changed");
+  // The element rule is reset when a property is added, which impacts how we deal
+  // with the focused element.
+  const onRuleEditorFocusReset = view.once("rule-editor-focus-reset");
+  EventUtils.sendKey("Return");
+
+  await onValueDone;
+  await onRuleEditorFocusReset;
+  await onStyleAttributeMutation;
+
+  is(
+    view.styleDocument.activeElement,
+    getRuleViewProperty(view, "element", "background-color").valueSpan,
+    `background-color value span ("tomato") is focused after pressing Enter`
+  );
+  is(
+    view.styleDocument.activeElement.textContent,
+    "tomato",
+    `focused element has expected text`
+  );
+});
+
+// Test keyboard navigation in the rule view when
+// devtools.inspector.rule-view.focusNextOnEnter is set to true
+
+add_task(async function () {
+  await pushPref("devtools.inspector.rule-view.focusNextOnEnter", true);
+  await addTab(`data:text/html;charset=utf-8,
+    <style>h1 {}</style>
+    <h1>Some header text</h1>`);
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info("Getting the ruleclose brace element for the `h1` rule");
+  const brace = view.styleDocument.querySelectorAll(".ruleview-ruleclose")[1];
+
+  info("Focus the new property editable field to create a color property");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  await focusNewRuleViewProperty(ruleEditor);
+  EventUtils.sendString("color");
+
+  info("Typing ENTER to focus the next field: property value");
+  let onFocus = once(brace.parentNode, "focus", true);
+  let onRuleViewChanged = view.once("ruleview-changed");
+
+  EventUtils.sendKey("Return");
+
+  await onFocus;
+  await onRuleViewChanged;
+  ok(true, "The value field was focused");
+
+  info("Entering a property value");
+  EventUtils.sendString("tomato");
+
+  info("Typing Enter again should focus a new property name");
+  onFocus = once(brace.parentNode, "focus", true);
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("Return");
+  await onFocus;
+  await onRuleViewChanged;
+
+  const activeElement = view.styleDocument.activeElement;
+  is(
+    `${activeElement.tagName}${[...activeElement.classList]
+      .map(cls => `.${cls}`)
+      .join("")}`,
+    "input.styleinspector-propertyeditor",
+    "The new property name field was focused"
+  );
+});
+
+function waitForStyleAttributeMutation(view, expectedAttributeValue) {
+  return new Promise(r => {
+    view.inspector.walker.on(
+      "mutations",
+      function onWalkerMutations(mutations) {
+        // Wait until we receive a mutation which updates the style attribute
+        // with the expected value.
+        const receivedLastMutation = mutations.find(
+          mut =>
+            mut.attributeName === "style" &&
+            mut.newValue.includes(expectedAttributeValue)
+        );
+        if (receivedLastMutation) {
+          view.inspector.walker.off("mutations", onWalkerMutations);
+          r();
+        }
+      }
+    );
+  });
+}
+
+function getCurrentInplaceEditor(view) {
+  return inplaceEditor(view.styleDocument.activeElement);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframeLineNumbers.js b/devtools/client/inspector/rules/test/browser_rules_keyframeLineNumbers.js
new file mode 100644
index 0000000000..98b0452a9b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframeLineNumbers.js
@@ -0,0 +1,24 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing a rule will update the line numbers of subsequent
+// rules in the rule view.
+
+const TESTCASE_URI = URL_ROOT + "doc_keyframeLineNumbers.html";
+
+add_task(async function () {
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#outer", inspector);
+
+  info("Insert a new property, which will affect the line numbers");
+  await addProperty(view, 1, "font-size", "72px");
+
+  await selectNode("#inner", inspector);
+
+  const value = getRuleViewLinkTextByIndex(view, 3);
+  // Note that this is relative to the <style>.
+  is(value.slice(-3), ":27", "rule line number is 27");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js
new file mode 100644
index 0000000000..1200fa3ab0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that keyframes are displayed for elements nested under a shadow-root.
+
+const TEST_URI = `data:text/html;charset=utf-8,
+  <div></div>
+  <script>
+    document.querySelector('div').attachShadow({mode: 'open'}).innerHTML = \`
+      <span>text</span>
+      <style>
+        @keyframes blink {
+          0% {
+            border: rgba(255,0,0,1) 2px dashed;
+          }
+          100% {
+            border: rgba(255,0,0,0) 2px dashed;
+          }
+        }
+        span {
+          animation: blink .5s 0s infinite;
+        }
+      </style>\`;
+  </script>`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+
+  const { inspector, view } = await openRuleView();
+
+  info("Expand the shadow-root parent");
+  const divFront = await getNodeFront("div", inspector);
+  await inspector.markup.expandNode(divFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  const { markup } = inspector;
+  const divContainer = markup.getContainer(divFront);
+
+  info("Expand the shadow-root");
+  const shadowRootContainer = divContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Retrieve the rules displayed for the span under the shadow root");
+  const spanContainer = shadowRootContainer.getChildContainers()[0];
+  const rules = await getKeyframeRules(spanContainer.node, inspector, view);
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[0].textProps),
+    "border: rgba(255,0,0,1) 2px dashed",
+    "Keyframe blink (0%) property is correct"
+  );
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[1].textProps),
+    "border: rgba(255,0,0,0) 2px dashed",
+    "Keyframe blink (100%) property is correct"
+  );
+});
+
+function convertTextPropsToString(textProps) {
+  return textProps.map(t => t.name + ": " + t.value).join("; ");
+}
+
+async function getKeyframeRules(selector, inspector, view) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
+    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
+  };
+
+  return rules;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js
new file mode 100644
index 0000000000..6a0b2d16cc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js
@@ -0,0 +1,123 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that keyframe rules and gutters are displayed correctly in the
+// rule view.
+
+const TEST_URI = URL_ROOT + "doc_keyframeanimation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await testPacman(inspector, view);
+  await testBoxy(inspector, view);
+  await testMoxy(inspector, view);
+});
+
+async function testPacman(inspector, view) {
+  info("Test content and gutter in the keyframes rule of #pacman");
+
+  await assertKeyframeRules("#pacman", inspector, view, {
+    elementRulesNb: 2,
+    keyframeRulesNb: 2,
+    keyframesRules: ["pacman", "pacman"],
+    keyframeRules: ["100%", "100%"],
+  });
+
+  assertGutters(view, {
+    guttersNbs: 2,
+    gutterHeading: ["Keyframes pacman", "Keyframes pacman"],
+  });
+}
+
+async function testBoxy(inspector, view) {
+  info("Test content and gutter in the keyframes rule of #boxy");
+
+  await assertKeyframeRules("#boxy", inspector, view, {
+    elementRulesNb: 3,
+    keyframeRulesNb: 3,
+    keyframesRules: ["boxy", "boxy", "boxy"],
+    keyframeRules: ["10%", "20%", "100%"],
+  });
+
+  assertGutters(view, {
+    guttersNbs: 1,
+    gutterHeading: ["Keyframes boxy"],
+  });
+}
+
+async function testMoxy(inspector, view) {
+  info("Test content and gutter in the keyframes rule of #moxy");
+
+  await assertKeyframeRules("#moxy", inspector, view, {
+    elementRulesNb: 3,
+    keyframeRulesNb: 4,
+    keyframesRules: ["boxy", "boxy", "boxy", "moxy"],
+    keyframeRules: ["10%", "20%", "100%", "100%"],
+  });
+
+  assertGutters(view, {
+    guttersNbs: 2,
+    gutterHeading: ["Keyframes boxy", "Keyframes moxy"],
+  });
+}
+
+async function assertKeyframeRules(selector, inspector, view, expected) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
+    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
+  };
+
+  is(
+    rules.elementRules.length,
+    expected.elementRulesNb,
+    selector + " has the correct number of non keyframe element rules"
+  );
+  is(
+    rules.keyframeRules.length,
+    expected.keyframeRulesNb,
+    selector + " has the correct number of keyframe rules"
+  );
+
+  let i = 0;
+  for (const keyframeRule of rules.keyframeRules) {
+    Assert.equal(
+      keyframeRule.keyframes.name,
+      expected.keyframesRules[i],
+      keyframeRule.keyframes.name + " has the correct keyframes name"
+    );
+    Assert.equal(
+      keyframeRule.domRule.keyText,
+      expected.keyframeRules[i],
+      keyframeRule.domRule.keyText + " selector heading is correct"
+    );
+    i++;
+  }
+}
+
+function assertGutters(view, expected) {
+  const gutters = view.element.querySelectorAll(".ruleview-header");
+
+  is(
+    gutters.length,
+    expected.guttersNbs,
+    "There are " + gutters.length + " gutter headings"
+  );
+
+  let i = 0;
+  for (const gutter of gutters) {
+    is(
+      gutter.textContent,
+      expected.gutterHeading[i],
+      "Correct " + gutter.textContent + " gutter headings"
+    );
+    i++;
+  }
+
+  return gutters;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js
new file mode 100644
index 0000000000..63e8ae4e65
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that verifies the content of the keyframes rule and property changes
+// to keyframe rules.
+
+const TEST_URI = URL_ROOT + "doc_keyframeanimation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await testPacman(inspector, view);
+  await testBoxy(inspector, view);
+});
+
+async function testPacman(inspector, view) {
+  info("Test content in the keyframes rule of #pacman");
+
+  const rules = await getKeyframeRules("#pacman", inspector, view);
+
+  info("Test text properties for Keyframes #pacman");
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[0].textProps),
+    "left: 750px",
+    "Keyframe pacman (100%) property is correct"
+  );
+
+  // Dynamic changes test disabled because of Bug 1050940
+  // If this part of the test is ever enabled again, it should be changed to
+  // use addProperty (in head.js) and stop using _applyingModifications
+
+  // info("Test dynamic changes to keyframe rule for #pacman");
+
+  // let defaultView = element.ownerDocument.defaultView;
+  // let ruleEditor = view.element.children[5].childNodes[0]._ruleEditor;
+  // ruleEditor.addProperty("opacity", "0", true);
+
+  // yield ruleEditor._applyingModifications;
+  // yield once(element, "animationend");
+
+  // is
+  // (
+  //   convertTextPropsToString(rules.keyframeRules[1].textProps),
+  //   "left: 750px; opacity: 0",
+  //   "Keyframe pacman (100%) property is correct"
+  // );
+
+  // is(defaultView.getComputedStyle(element).getPropertyValue("opacity"), "0",
+  //   "Added opacity property should have been used.");
+}
+
+async function testBoxy(inspector, view) {
+  info("Test content in the keyframes rule of #boxy");
+
+  const rules = await getKeyframeRules("#boxy", inspector, view);
+
+  info("Test text properties for Keyframes #boxy");
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[0].textProps),
+    "background-color: blue",
+    "Keyframe boxy (10%) property is correct"
+  );
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[1].textProps),
+    "background-color: green",
+    "Keyframe boxy (20%) property is correct"
+  );
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[2].textProps),
+    "opacity: 0",
+    "Keyframe boxy (100%) property is correct"
+  );
+}
+
+function convertTextPropsToString(textProps) {
+  return textProps.map(t => t.name + ": " + t.value).join("; ");
+}
+
+async function getKeyframeRules(selector, inspector, view) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
+    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
+  };
+
+  return rules;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
new file mode 100644
index 0000000000..0373d29321
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 1px red dot
+const shortDataUrl =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4z8DwHwAFAAH/F1FwBgAAAABJRU5ErkJggg==";
+
+// Not a valid base64 image, but will still generate a long text property
+const longDataUrl = new Array(1000 * 1000).join("a");
+
+const TEST_STYLESHEET = `
+body {
+  background-image: url(data:image/png;base64,${shortDataUrl});
+  background-image: url(data:image/png;base64,${longDataUrl});
+}`;
+
+// Serve the stylesheet dynamically from a test HTTPServer to avoid logging an
+// extremely long data-url when adding the tab using our usual test helpers.
+const server = createTestHTTPServer();
+const filepath = "/style.css";
+const cssuri = `http://localhost:${server.identity.primaryPort}${filepath}`;
+server.registerContentType("css", "text/css");
+server.registerPathHandler(filepath, (metadata, response) => {
+  response.write(TEST_STYLESHEET);
+});
+
+const TEST_URL =
+  "data:text/html," +
+  encodeURIComponent(`
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <link href="${cssuri}" rel="stylesheet" />
+    </head>
+    <body></body>
+  </html>
+`);
+
+// Check that long URLs are rendered correctly in the rule view.
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const view = selectRuleView(inspector);
+
+  await selectNode("body", inspector);
+
+  const propertyValues = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  );
+
+  is(propertyValues.length, 2, "Ruleview has 2 propertyvalue elements");
+  ok(
+    propertyValues[0].textContent.startsWith("url(data:image/png"),
+    "Property value for the background image was correctly rendered"
+  );
+
+  ok(
+    !propertyValues[0].querySelector(".propertyvalue-long-text"),
+    "The first background-image is short enough and does not need to be truncated"
+  );
+  ok(
+    !!propertyValues[1].querySelector(".propertyvalue-long-text"),
+    "The second background-image has a special CSS class to be truncated"
+  );
+  const ruleviewContainer =
+    view.styleDocument.getElementById("ruleview-container");
+  Assert.strictEqual(
+    ruleviewContainer.scrollHeight,
+    ruleviewContainer.clientHeight,
+    "The ruleview container does not have a scrollbar"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_layer.js b/devtools/client/inspector/rules/test/browser_rules_layer.js
new file mode 100644
index 0000000000..7d32f716e6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_layer.js
@@ -0,0 +1,115 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page defines layers.
+
+const TEST_URI = `
+  <style type="text/css">
+    @import url(${URL_ROOT_COM_SSL}doc_imported_anonymous_layer.css) layer;
+    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
+
+    @layer myLayer {
+      h1, [test-hint=named-layer] {
+        background-color: tomato;
+        color: lightgreen;
+      }
+    }
+
+    @layer {
+      h1, [test-hint=anonymous-layer] {
+        color: green;
+        font-variant: small-caps
+      }
+    }
+
+    h1, [test-hint=no-rule-layer] {
+      color: pink;
+    }
+  </style>
+  <h1>Hello @layer!</h1>
+`;
+
+add_task(async function () {
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  const expectedRules = [
+    { selector: "element", ancestorRulesData: null },
+    { selector: `h1, [test-hint="no-rule-layer"]`, ancestorRulesData: null },
+    {
+      selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`,
+      ancestorRulesData: null,
+    },
+    {
+      selector: `h1, [test-hint="anonymous-layer"]`,
+      ancestorRulesData: ["@layer {"],
+    },
+    {
+      selector: `h1, [test-hint="named-layer"]`,
+      ancestorRulesData: ["@layer myLayer {"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
+      ancestorRulesData: ["@layer importedLayer {", "  @media screen {"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@layer importedLayer {",
+        "  @media screen {",
+        "    @layer in-imported-stylesheet {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@layer importedLayer {",
+        "  @layer importedNestedLayer {",
+        "    @layer in-imported-nested-stylesheet {",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-anonymous-layer--no-rule-layer"]`,
+      ancestorRulesData: ["@layer {"],
+    },
+  ];
+
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectors-container"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js b/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
new file mode 100644
index 0000000000..9c9d1ef9ab
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing a rule will update the line numbers of subsequent
+// rules in the rule view.
+
+const TESTCASE_URI = URL_ROOT + "doc_ruleLineNumbers.html";
+
+add_task(async function () {
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const bodyRuleEditor = getRuleViewRuleEditor(view, 3);
+  const value = getRuleViewLinkTextByIndex(view, 2);
+  // Note that this is relative to the <style>.
+  is(value.slice(-2), ":6", "initial rule line number is 6");
+
+  const onLocationChanged = once(
+    bodyRuleEditor.rule.domRule,
+    "location-changed"
+  );
+  await addProperty(view, 1, "font-size", "23px");
+  await onLocationChanged;
+
+  const newBodyTitle = getRuleViewLinkTextByIndex(view, 2);
+  // Note that this is relative to the <style>.
+  is(newBodyTitle.slice(-2), ":7", "updated rule line number is 7");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_linear-easing-swatch.js b/devtools/client/inspector/rules/test/browser_rules_linear-easing-swatch.js
new file mode 100644
index 0000000000..3739e6ff9c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_linear-easing-swatch.js
@@ -0,0 +1,487 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that linear easing widget pickers appear when clicking on linear
+// swatches.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      animation: move 3s linear(0, 0.2, 1);
+      transition: top 4s linear(0 10%, 0.5 20% 80%, 0 90%);
+    }
+    .test {
+      animation-timing-function: linear(0, 1 50% 100%);
+      transition-timing-function: linear(1 -10%, 0, -1 110%);
+    }
+  </style>
+  <div class="test">Testing the linear easing tooltip!</div>
+`;
+
+add_task(async function testSwatches() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const tooltip = view.tooltips.getTooltip("linearEaseFunction");
+  ok(tooltip, "The rule-view has the expected linear tooltip");
+  const panel = tooltip.tooltip.panel;
+  ok(panel, "The XUL panel for the linear tooltip exists");
+
+  const expectedData = [
+    {
+      selector: "div",
+      property: "animation",
+      expectedPoints: [
+        [0, 0],
+        [0.5, 0.2],
+        [1, 1],
+      ],
+    },
+    {
+      selector: "div",
+      property: "transition",
+      expectedPoints: [
+        [0.1, 0],
+        [0.2, 0.5],
+        [0.8, 0.5],
+        [0.9, 0],
+      ],
+    },
+    {
+      selector: ".test",
+      property: "animation-timing-function",
+      expectedPoints: [
+        [0, 0],
+        [0.5, 1],
+        [1, 1],
+      ],
+    },
+    {
+      selector: ".test",
+      property: "transition-timing-function",
+      expectedPoints: [
+        [-0.1, 1],
+        [0.5, 0],
+        [1.1, -1],
+      ],
+    },
+  ];
+
+  for (const { selector, property, expectedPoints } of expectedData) {
+    const messagePrefix = `[${selector}|${property}]`;
+    const swatch = getRuleViewLinearEasingSwatch(view, selector, property);
+    ok(swatch, `${messagePrefix} the swatch exists`);
+
+    const onWidgetReady = tooltip.once("ready");
+    swatch.click();
+    await onWidgetReady;
+    ok(true, `${messagePrefix} clicking the swatch displayed the tooltip`);
+
+    ok(
+      !inplaceEditor(swatch.parentNode),
+      `${messagePrefix} inplace editor wasn't shown`
+    );
+
+    checkChartState(panel, expectedPoints);
+
+    await hideTooltipAndWaitForRuleViewChanged(tooltip, view);
+  }
+});
+
+add_task(async function testChart() {
+  await pushPref("ui.prefersReducedMotion", 0);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const tooltip = view.tooltips.getTooltip("linearEaseFunction");
+  ok(tooltip, "The rule-view has the expected linear tooltip");
+  const panel = tooltip.tooltip.panel;
+  ok(panel, "The XUL panel for the linear tooltip exists");
+
+  const selector = ".test";
+  const property = "animation-timing-function";
+
+  const swatch = getRuleViewLinearEasingSwatch(view, selector, property);
+  const onWidgetReady = tooltip.once("ready");
+  swatch.click();
+  await onWidgetReady;
+  const widget = await tooltip.widget;
+
+  const svgEl = panel.querySelector(`svg.chart`);
+  const svgRect = svgEl.getBoundingClientRect();
+
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [0.5, 1],
+      [1, 1],
+    ],
+    "testChart - initial state:"
+  );
+
+  info("Check that double clicking a point removes it");
+  const middlePoint = panel.querySelector(
+    `svg.chart .control-points-group .control-point:nth-of-type(2)`
+  );
+  let onWidgetUpdated = widget.once("updated");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendMouseEvent(
+    { type: "dblclick" },
+    middlePoint,
+    widget.parent.ownerGlobal
+  );
+
+  let newValue = await onWidgetUpdated;
+  is(newValue, `linear(0 0%, 1 100%)`);
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [1, 1],
+    ],
+    "testChart - after point removed:"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info(
+    "Check that double clicking a point when there are only 2 points on the line does not remove it"
+  );
+  const timeoutRes = Symbol();
+  let onTimeout = wait(1000).then(() => timeoutRes);
+  onWidgetUpdated = widget.once("updated");
+  EventUtils.sendMouseEvent(
+    { type: "dblclick" },
+    panel.querySelector(`svg.chart .control-points-group .control-point`),
+    widget.parent.ownerGlobal
+  );
+  let raceWinner = await Promise.race([onWidgetUpdated, onTimeout]);
+  is(
+    raceWinner,
+    timeoutRes,
+    "The widget wasn't updated after double clicking one of the 2 last points"
+  );
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [1, 1],
+    ],
+    "testChart - no point removed:"
+  );
+
+  info("Check that double clicking on the svg does add a point");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+  // Clicking on svg center with shiftKey so it snaps to the grid
+  EventUtils.synthesizeMouseAtCenter(
+    panel.querySelector(`svg.chart`),
+    { clickCount: 2, shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0 0%, 0.5 50%, 1 100%)`,
+    "Widget was updated with expected value"
+  );
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - new point added"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Check that points can be moved");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeMouseAtCenter(
+    panel.querySelector(`svg.chart .control-points-group .control-point`),
+    { type: "mousedown" },
+    widget.parent.ownerGlobal
+  );
+
+  EventUtils.synthesizeMouse(
+    svgEl,
+    svgRect.width / 3,
+    svgRect.height / 3,
+    { type: "mousemove", shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0.7 30%, 0.5 50%, 1 100%)`,
+    "Widget was updated with expected value"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.3, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point moved"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Check that the points can be moved past the next point");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+
+  // the second point is at 50%, so simulate a mousemove all the way to the right (which
+  // should be ~100%)
+  EventUtils.synthesizeMouse(
+    svgEl,
+    svgRect.width,
+    svgRect.height / 3,
+    { type: "mousemove", shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0.7 50%, 0.5 50%, 1 100%)`,
+    "point wasn't moved past the next point (50%)"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.5, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point moved constrained by next point"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Stop dragging");
+  EventUtils.synthesizeMouseAtCenter(
+    svgEl,
+    { type: "mouseup" },
+    widget.parent.ownerGlobal
+  );
+
+  onTimeout = wait(1000).then(() => timeoutRes);
+  onWidgetUpdated = widget.once("updated");
+  EventUtils.synthesizeMouseAtCenter(
+    svgEl,
+    { type: "mousemove" },
+    widget.parent.ownerGlobal
+  );
+  raceWinner = await Promise.race([onWidgetUpdated, onTimeout]);
+  is(raceWinner, timeoutRes, "Dragging is disabled after mouseup");
+
+  info("Add another point, which should be the first one for the line");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+
+  EventUtils.synthesizeMouse(
+    svgEl,
+    svgRect.width / 3,
+    svgRect.height - 1,
+    { clickCount: 2, shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0 30%, 0.7 50%, 0.5 50%, 1 100%)`,
+    "Widget was updated with expected value"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.3, 0],
+      [0.5, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point added at beginning"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Check that the points can't be moved past previous point");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeMouseAtCenter(
+    panel.querySelector(
+      `svg.chart .control-points-group .control-point:nth-of-type(2)`
+    ),
+    { type: "mousedown" },
+    widget.parent.ownerGlobal
+  );
+
+  EventUtils.synthesizeMouse(
+    svgEl,
+    0,
+    svgRect.height / 3,
+    { type: "mousemove", shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0 30%, 0.7 30%, 0.5 50%, 1 100%)`,
+    "point wasn't moved past previous point (30%)"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.3, 0],
+      [0.3, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point moved constrained by previous point"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Stop dragging");
+  EventUtils.synthesizeMouseAtCenter(
+    svgEl,
+    { type: "mouseup" },
+    widget.parent.ownerGlobal
+  );
+
+  info(
+    "Check that timing preview is destroyed if prefers-reduced-motion gets enabled"
+  );
+  const getTimingFunctionPreview = () =>
+    panel.querySelector(".timing-function-preview");
+  ok(getTimingFunctionPreview(), "By default, timing preview is visible");
+  info("Enable prefersReducedMotion");
+  await pushPref("ui.prefersReducedMotion", 1);
+  await waitFor(() => !getTimingFunctionPreview());
+  ok(true, "timing preview was removed after enabling prefersReducedMotion");
+
+  info("Disable prefersReducedMotion");
+  await pushPref("ui.prefersReducedMotion", 0);
+  await waitFor(() => getTimingFunctionPreview());
+  ok(
+    true,
+    "timing preview was added back after disabling prefersReducedMotion"
+  );
+
+  info("Hide tooltip with escape to cancel modification");
+  const onHidden = tooltip.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  focusAndSendKey(widget.parent.ownerDocument.defaultView, "ESCAPE");
+  await onHidden;
+  await onModifications;
+
+  await checkRuleView(
+    view,
+    selector,
+    property,
+    "linear(0, 1 50% 100%)",
+    "linear(0 0%, 1 50%, 1 100%)"
+  );
+});
+
+/**
+ * Check that the svg chart line and control points are placed where we expect them.
+ *
+ * @param {ToolipPanel} panel
+ * @param {Array<Array<Number>>} expectedPoints: Array of coordinated
+ * @param {String} messagePrefix
+ */
+function checkChartState(panel, expectedPoints, messagePrefix = "") {
+  const svgLine = panel.querySelector("svg.chart .chart-linear");
+  is(
+    svgLine.getAttribute("points"),
+    expectedPoints.map(([x, y]) => `${x},${1 - y}`).join(" "),
+    `${messagePrefix} line has the expected points`
+  );
+
+  const controlPoints = panel.querySelectorAll(
+    `svg.chart .control-points-group .control-point`
+  );
+
+  is(
+    controlPoints.length,
+    expectedPoints.length,
+    `${messagePrefix} the expected number of control points were created`
+  );
+  controlPoints.forEach((controlPoint, i) => {
+    is(
+      parseFloat(controlPoint.getAttribute("cx")),
+      expectedPoints[i][0],
+      `${messagePrefix} Control point ${i} has correct cx`
+    );
+    is(
+      parseFloat(controlPoint.getAttribute("cy")),
+      // XXX work around floating point issues
+      Math.round((1 - expectedPoints[i][1]) * 10) / 10,
+      `${messagePrefix} Control point ${i} has correct cy`
+    );
+  });
+}
+
+/**
+ * Checks if the property in the rule view has the expected state
+ *
+ * @param {RuleView} view
+ * @param {String} selector
+ * @param {String} property
+ * @param {String} expectedLinearValue: Expected value in the rule view
+ * @param {String} expectedComputedLinearValue: Expected computed value. Defaults to expectedLinearValue.
+ * @returns {Element|null}
+ */
+async function checkRuleView(
+  view,
+  selector,
+  property,
+  expectedLinearValue,
+  expectedComputedLinearValue = expectedLinearValue
+) {
+  await waitForComputedStyleProperty(
+    selector,
+    null,
+    property,
+    expectedComputedLinearValue
+  );
+
+  is(
+    getRuleViewProperty(view, selector, property).valueSpan.textContent,
+    expectedLinearValue,
+    `${selector} ${property} has expected value`
+  );
+  const swatch = getRuleViewLinearEasingSwatch(view, selector, property);
+  is(
+    swatch.getAttribute("data-linear"),
+    expectedLinearValue,
+    `${selector} ${property} swatch has expected "data-linear" attribute`
+  );
+}
+
+/**
+ * Returns the linear easing swatch for a rule (defined by its selector), and a property.
+ *
+ * @param {RuleView} view
+ * @param {String} selector
+ * @param {String} property
+ * @returns {Element|null}
+ */
+function getRuleViewLinearEasingSwatch(view, selector, property) {
+  return getRuleViewProperty(view, selector, property).valueSpan.querySelector(
+    ".ruleview-lineareasingswatch"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_livepreview.js b/devtools/client/inspector/rules/test/browser_rules_livepreview.js
new file mode 100644
index 0000000000..38ad5ee1d0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_livepreview.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that changes are previewed when editing a property value.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      display:block;
+    }
+  </style>
+  <div id="testid">Styled Node</div><span>inline element</span>
+`;
+
+// Format
+// {
+//   value : what to type in the field
+//   expected : expected computed style on the targeted element
+// }
+const TEST_DATA = [
+  { value: "inline", expected: "inline" },
+  { value: "inline-block", expected: "inline-block" },
+
+  // Invalid property values should not apply, and should fall back to default
+  { value: "red", expected: "block" },
+  { value: "something", expected: "block" },
+
+  { escape: true, value: "inline", expected: "block" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  for (const data of TEST_DATA) {
+    await testLivePreviewData(data, view, "#testid");
+  }
+});
+
+async function testLivePreviewData(data, ruleView, selector) {
+  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  const propEditor = rule.textProps[0].editor;
+
+  info("Focusing the property value inplace-editor");
+  const editor = await focusEditableField(ruleView, propEditor.valueSpan);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "The focused editor is the value"
+  );
+
+  info("Entering value in the editor: " + data.value);
+  const onPreviewDone = ruleView.once("ruleview-changed");
+  EventUtils.sendString(data.value, ruleView.styleWindow);
+  ruleView.debounce.flush();
+  await onPreviewDone;
+
+  const onValueDone = ruleView.once("ruleview-changed");
+  if (data.escape) {
+    EventUtils.synthesizeKey("KEY_Escape");
+  } else {
+    EventUtils.synthesizeKey("KEY_Enter");
+  }
+  await onValueDone;
+
+  // While the editor is still focused in, the display should have
+  // changed already
+  is(
+    await getComputedStyleProperty(selector, null, "display"),
+    data.expected,
+    "Element should be previewed as " + data.expected
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_01.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_01.js
new file mode 100644
index 0000000000..4ac9ea3498
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_01.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// specificity of the rule.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  .testclass {
+    background-color: green;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const idProp = getTextProperty(view, 1, { "background-color": "blue" });
+  ok(!idProp.overridden, "ID prop should not be overridden.");
+  ok(
+    !idProp.editor.element.classList.contains("ruleview-overridden"),
+    "ID property editor should not have ruleview-overridden class"
+  );
+
+  const classProp = getTextProperty(view, 2, { "background-color": "green" });
+  ok(classProp.overridden, "Class property should be overridden.");
+  ok(
+    classProp.editor.element.classList.contains("ruleview-overridden"),
+    "Class property editor should have ruleview-overridden class"
+  );
+
+  // Override background-color by changing the element style.
+  const elementProp = await addProperty(view, 0, "background-color", "purple");
+
+  ok(
+    !elementProp.overridden,
+    "Element style property should not be overridden"
+  );
+  ok(idProp.overridden, "ID property should be overridden");
+  ok(
+    idProp.editor.element.classList.contains("ruleview-overridden"),
+    "ID property editor should have ruleview-overridden class"
+  );
+  ok(classProp.overridden, "Class property should be overridden");
+  ok(
+    classProp.editor.element.classList.contains("ruleview-overridden"),
+    "Class property editor should have ruleview-overridden class"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_02.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_02.js
new file mode 100644
index 0000000000..283419def9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_02.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly for short hand
+// properties and the computed list properties
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    margin-left: 1px;
+  }
+  .testclass {
+    margin: 2px;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testMarkOverridden(inspector, view);
+});
+
+function testMarkOverridden(inspector, view) {
+  const elementStyle = view._elementStyle;
+
+  const classRule = elementStyle.rules[2];
+  const classProp = classRule.textProps[0];
+  ok(
+    !classProp.overridden,
+    "Class prop shouldn't be overridden, some props are still being used."
+  );
+
+  for (const computed of classProp.computed) {
+    if (computed.name.indexOf("margin-left") == 0) {
+      ok(computed.overridden, "margin-left props should be overridden.");
+    } else {
+      ok(
+        !computed.overridden,
+        "Non-margin-left props should not be overridden."
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_03.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_03.js
new file mode 100644
index 0000000000..9acb4ae8cd
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_03.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// priority for the rule
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  .testclass {
+    background-color: green !important;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const idProp = getTextProperty(view, 1, { "background-color": "blue" });
+  ok(idProp.overridden, "Not-important rule should be overridden.");
+
+  const classProp = getTextProperty(view, 2, { "background-color": "green" });
+  ok(!classProp.overridden, "Important rule should not be overridden.");
+
+  ok(idProp.overridden, "ID property should be overridden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_04.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_04.js
new file mode 100644
index 0000000000..5a3de5b3fa
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_04.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly if a property gets
+// disabled
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  .testclass {
+    background-color: green;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const idProp = getTextProperty(view, 1, { "background-color": "blue" });
+
+  await togglePropStatus(view, idProp);
+  const classProp = getTextProperty(view, 2, { "background-color": "green" });
+  ok(
+    !classProp.overridden,
+    "Class prop should not be overridden after id prop was disabled."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_05.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_05.js
new file mode 100644
index 0000000000..892ebaa955
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_05.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// order of the property.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: green;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await addProperty(view, 1, "background-color", "red");
+
+  const firstProp = getTextProperty(view, 1, { "background-color": "green" });
+  const secondProp = getTextProperty(view, 1, { "background-color": "red" });
+
+  ok(firstProp.overridden, "First property should be overridden.");
+  ok(!secondProp.overridden, "Second property should not be overridden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_06.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_06.js
new file mode 100644
index 0000000000..7ae4e77a02
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_06.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly after
+// editing the selector.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    background-color: blue;
+    background-color: chartreuse;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testMarkOverridden(inspector, view);
+});
+
+async function testMarkOverridden(inspector, view) {
+  const elementStyle = view._elementStyle;
+  const rule = elementStyle.rules[1];
+  checkProperties(rule);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  info("Entering a new selector name and committing");
+  editor.input.value = "div[class]";
+
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  view.searchField.focus();
+  checkProperties(rule);
+}
+
+// A helper to perform a repeated set of checks.
+function checkProperties(rule) {
+  let prop = rule.textProps[0];
+  is(
+    prop.name,
+    "background-color",
+    "First property should be background-color"
+  );
+  is(prop.value, "blue", "First property value should be blue");
+  ok(prop.overridden, "prop should be overridden.");
+  prop = rule.textProps[1];
+  is(
+    prop.name,
+    "background-color",
+    "Second property should be background-color"
+  );
+  is(prop.value, "chartreuse", "First property value should be chartreuse");
+  ok(!prop.overridden, "prop should not be overridden.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_07.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_07.js
new file mode 100644
index 0000000000..bdfe34a307
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_07.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// specificity of the rule.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      margin-left: 23px;
+    }
+
+    div {
+      margin-right: 23px;
+      margin-left: 1px !important;
+    }
+
+    body {
+      color: blue;
+    }
+
+    body {
+      margin-right: 1px !important;
+      font-size: 79px;
+      line-height: 100px !important;
+      color: green !important;
+    }
+
+    body {
+      color: red;
+    }
+
+    span {
+      font-size: 12px;
+      line-height: 10px;
+    }
+  </style>
+  <body>
+    <span>
+      <div id='testid' class='testclass'>Styled Node</div>
+    </span>
+  </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  testMarkOverridden(inspector, view);
+});
+
+function testMarkOverridden(inspector, view) {
+  const elementStyle = view._elementStyle;
+
+  const RESULTS = [
+    // We skip the first element
+    [],
+    [{ name: "margin-left", value: "23px", overridden: true }],
+    [
+      { name: "margin-right", value: "23px", overridden: false },
+      { name: "margin-left", value: "1px", overridden: false },
+    ],
+    [
+      { name: "font-size", value: "12px", overridden: false },
+      { name: "line-height", value: "10px", overridden: false },
+    ],
+    [{ name: "color", value: "red", overridden: true }],
+    [
+      { name: "margin-right", value: "1px", overridden: true },
+      { name: "font-size", value: "79px", overridden: true },
+      { name: "line-height", value: "100px", overridden: true },
+      { name: "color", value: "green", overridden: false },
+    ],
+    [{ name: "color", value: "blue", overridden: true }],
+  ];
+
+  for (let i = 1; i < RESULTS.length; ++i) {
+    const idRule = elementStyle.rules[i];
+
+    for (const propIndex in RESULTS[i]) {
+      const expected = RESULTS[i][propIndex];
+      const prop = idRule.textProps[propIndex];
+
+      info("Checking rule " + i + ", property " + propIndex);
+
+      is(prop.name, expected.name, "check property name");
+      is(prop.value, expected.value, "check property value");
+      is(prop.overridden, expected.overridden, "check property overridden");
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_08.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_08.js
new file mode 100644
index 0000000000..444c87cbd7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_08.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly in pseudo-elements when
+// selecting their host node.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid::before {
+    content: 'Pseudo-element';
+    color: red;
+    color: green;
+  }
+  #testid {
+    color: blue;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info(
+    "Check the CSS declarations for ::before in the Pseudo-elements accordion."
+  );
+  const pseudoRule = getRuleViewRuleEditor(view, 1, 0).rule;
+  const pseudoProp1 = pseudoRule.textProps[1];
+  const pseudoProp2 = pseudoRule.textProps[2];
+  ok(
+    pseudoProp1.overridden,
+    "First declaration of color in pseudo-element should be overridden."
+  );
+  ok(
+    !pseudoProp2.overridden,
+    "Second declaration of color in pseudo-element should not be overridden."
+  );
+
+  info(
+    "Check that pseudo-element declarations do not override the host's declarations"
+  );
+  const idProp = getTextProperty(view, 4, { color: "blue" });
+  ok(
+    !idProp.overridden,
+    "The single declaration of color in ID selector should not be overridden"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js
new file mode 100644
index 0000000000..57ca54eae0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_layers.js
@@ -0,0 +1,166 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly when using layers
+
+const HTML = `
+  <style type='text/css'>
+    @layer A, B;
+
+    h1 {
+      background-color: red;
+      color: tomato !important;
+    }
+
+    @layer A {
+      h1 {
+        background-color: green;
+        color: darkseagreen !important;
+        color: lime !important;
+        color: forestgreen;
+      }
+    }
+    @layer B {
+      h1 {
+        background-color: cyan;
+        color: blue !important;
+      }
+    }
+
+    @layer {
+      h2 {
+        color: red !important;
+      }
+    }
+    @layer {
+      h2 {
+        color: blue !important;
+      }
+    }
+
+    @layer {
+      @layer A {
+        h3 {
+          color: red !important;
+        }
+      }
+
+      @layer A {
+        h3 {
+          color: lime !important;
+        }
+      }
+    }
+
+    @layer {
+      @layer A {
+        h3 {
+          color: blue !important;
+        }
+      }
+    }
+  </style>
+  <h1>Hello</h1>
+  <h2>world</h2>
+  <h3>!</h3>
+`;
+
+add_task(async function () {
+  await addTab(
+    `https://example.com/document-builder.sjs?html=${encodeURIComponent(HTML)}`
+  );
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info("Check background-color properties");
+  is(
+    await getComputedStyleProperty("h1", null, "background-color"),
+    "rgb(255, 0, 0)",
+    "The h1 element has a red background-color, as the value in the layer-less rule wins"
+  );
+  ok(
+    !isPropertyOverridden(view, 1, { "background-color": "red" }),
+    "background-color value in layer-less rule is not overridden"
+  );
+  ok(
+    isPropertyOverridden(view, 2, { "background-color": "cyan" }),
+    "background-color value in layer B rule is overridden"
+  );
+  ok(
+    isPropertyOverridden(view, 3, { "background-color": "green" }),
+    "background-color value in layer A rule is overridden"
+  );
+
+  info("Check (!important) color properties");
+  is(
+    await getComputedStyleProperty("h1", null, "color"),
+    "rgb(0, 255, 0)",
+    "The h1 element has a lime color, as the last important value in the first declared layer wins"
+  );
+  ok(
+    isPropertyOverridden(view, 1, { color: "tomato" }),
+    "important color value in layer-less rule is overridden"
+  );
+  ok(
+    isPropertyOverridden(view, 2, { color: "blue" }),
+    "important color value in layer B rule is overridden"
+  );
+  ok(
+    isPropertyOverridden(view, 3, { color: "darkseagreen" }),
+    "first important color value in layer A rule is overridden"
+  );
+  ok(
+    !isPropertyOverridden(view, 3, { color: "lime" }),
+    "important color value in layer A rule is not overridden"
+  );
+  ok(
+    isPropertyOverridden(view, 3, { color: "forestgreen" }),
+    "last, non-important color value in layer A rule is overridden"
+  );
+
+  info("Check (!important) color properties on nameless layers");
+  await selectNode("h2", inspector);
+  is(
+    await getComputedStyleProperty("h2", null, "color"),
+    "rgb(255, 0, 0)",
+    "The h2 element has a blue color, as important value in the first nameless layer wins"
+  );
+  ok(
+    isPropertyOverridden(view, 1, { color: "blue" }),
+    "important color value in second layer-less rule is overridden"
+  );
+  ok(
+    !isPropertyOverridden(view, 2, { color: "red" }),
+    "important color value in first layer-less rule is not overridden"
+  );
+
+  info("Check (!important) color properties on nested layer in nameless layer");
+  await selectNode("h3", inspector);
+  is(
+    await getComputedStyleProperty("h3", null, "color"),
+    "rgb(0, 255, 0)",
+    "The h3 element has a lime color, as important value in the last rule of the first declared nameless layer wins"
+  );
+  ok(
+    isPropertyOverridden(view, 1, { color: "blue" }),
+    "important color value in second layer-less rule is overridden"
+  );
+  ok(
+    !isPropertyOverridden(view, 2, { color: "lime" }),
+    "important color value in second rule of layer-less rule is not overridden"
+  );
+  ok(
+    isPropertyOverridden(view, 3, { color: "red" }),
+    "important color value in first rule of layer-less rule is overridden"
+  );
+});
+
+function isPropertyOverridden(view, ruleIndex, property) {
+  return getTextProperty(
+    view,
+    ruleIndex,
+    property
+  ).editor.element.classList.contains("ruleview-overridden");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mathml-element.js b/devtools/client/inspector/rules/test/browser_rules_mathml-element.js
new file mode 100644
index 0000000000..275426b105
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mathml-element.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule-view displays correctly on MathML elements.
+
+const TEST_URI = `
+  <div>
+    <math xmlns=\http://www.w3.org/1998/Math/MathML\>
+      <mfrac>
+        <msubsup>
+          <mi>a</mi>
+          <mi>i</mi>
+          <mi>j</mi>
+        </msubsup>
+        <msub>
+          <mi>x</mi>
+          <mn>0</mn>
+        </msub>
+      </mfrac>
+    </math>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Select the DIV node and verify the rule-view shows rules");
+  await selectNode("div", inspector);
+  ok(
+    view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view shows rules for the div element"
+  );
+
+  info("Select various MathML nodes and verify the rule-view is empty");
+  await selectNode("math", inspector);
+  ok(
+    !view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view is empty for the math element"
+  );
+
+  await selectNode("msubsup", inspector);
+  ok(
+    !view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view is empty for the msubsup element"
+  );
+
+  await selectNode("mn", inspector);
+  ok(
+    !view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view is empty for the mn element"
+  );
+
+  info("Select again the DIV node and verify the rule-view shows rules");
+  await selectNode("div", inspector);
+  ok(
+    view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view shows rules for the div element"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_media-queries.js b/devtools/client/inspector/rules/test/browser_rules_media-queries.js
new file mode 100644
index 0000000000..6d5f71d697
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_media-queries.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that we correctly display appropriate media query information in the rule view.
+
+const TEST_URI = URL_ROOT + "doc_media_queries.html?constructed";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const elementStyle = view._elementStyle;
+
+  const inline = STYLE_INSPECTOR_L10N.getStr("rule.sourceInline");
+  const constructed = STYLE_INSPECTOR_L10N.getStr("rule.sourceConstructed");
+
+  is(elementStyle.rules.length, 4, "Should have 4 rules.");
+  is(elementStyle.rules[0].title, inline, "check rule 0 title");
+  is(
+    elementStyle.rules[1].title,
+    constructed + ":1",
+    "check constructed sheet rule title"
+  );
+  is(elementStyle.rules[2].title, inline + ":9", "check rule 2 title");
+  is(elementStyle.rules[3].title, inline + ":2", "check rule 3 title");
+
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 2),
+    "@media screen and (min-width: 1px) {",
+    "Media queries information are displayed"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js b/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js
new file mode 100644
index 0000000000..79bc9b9f8f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that applicable media queries are updated in the Rule view after reloading
+// the page and resizing the window.
+
+const TEST_URI = `
+  <style type='text/css'>
+    @media all and (max-width: 500px) {
+      div {
+        color: red;
+      }
+    }
+    @media all and (min-width: 500px) {
+      div {
+        color: green;
+      }
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView, toolbox } = await openRuleView();
+  const hostWindow = toolbox.win.parent;
+
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for small viewports applies");
+  hostWindow.resizeTo(400, 400);
+
+  await waitForMediaRuleColor(ruleView, "red");
+  ok(true, "Small viewport media query inspected");
+
+  info("Reload the current page");
+  await reloadBrowser();
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for large viewports applies");
+  hostWindow.resizeTo(800, 800);
+
+  info("Reselect the rule after page reload.");
+  await waitForMediaRuleColor(ruleView, "green");
+  ok(true, "Large viewport media query inspected");
+
+  info("Resize window to original dimentions");
+  const onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(originalWidth, originalHeight);
+  await onResize;
+});
+
+function waitForMediaRuleColor(ruleView, color) {
+  return waitUntil(() => {
+    try {
+      const { value } = getTextProperty(ruleView, 1, { color });
+      return value === color;
+    } catch (e) {
+      return false;
+    }
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-duplicates.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-duplicates.js
new file mode 100644
index 0000000000..2eb93e4b70
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-duplicates.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:red;color:orange;color:yellow;color:green;color:blue;color:indigo;" +
+      "color:violet;"
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    7,
+    "Should have created new text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    8,
+    "Should have created new property editors."
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "red" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "red" }).value,
+    "red",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "orange" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "orange" }).value,
+    "orange",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "yellow" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "yellow" }).value,
+    "yellow",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "green" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "green" }).value,
+    "green",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "blue" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "blue" }).value,
+    "blue",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "indigo" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "indigo" }).value,
+    "indigo",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "violet" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "violet" }).value,
+    "violet",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-priority.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-priority.js
new file mode 100644
index 0000000000..f7713529b5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-priority.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors.
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:red;width:100px;height: 100px;"
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    3,
+    "Should have created new text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    4,
+    "Should have created new property editors."
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "red" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "red" }).value,
+    "red",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { width: "100px" }).name,
+    "width",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { width: "100px" }).value,
+    "100px",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { height: "100px" }).name,
+    "height",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { height: "100px" }).value,
+    "100px",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_01.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_01.js
new file mode 100644
index 0000000000..7a15507293
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_01.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering multiple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+  await testCreateNewMultiUnfinished(inspector, view);
+});
+
+async function testCreateNewMultiUnfinished(inspector, view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const onMutation = inspector.once("markupmutation");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:blue;background : orange   ; text-align:center; border-color: "
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have created new text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    4,
+    "Should have created property editors."
+  );
+
+  EventUtils.sendString("red", view.styleWindow);
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_TAB", {}, view.styleWindow);
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have the same number of text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    5,
+    "Should have added the changed value editor."
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "blue" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "blue" }).value,
+    "blue",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { background: "orange" }).name,
+    "background",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { background: "orange" }).value,
+    "orange",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { "text-align": "center" }).name,
+    "text-align",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { "text-align": "center" }).value,
+    "center",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { "border-color": "red" }).name,
+    "border-color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { "border-color": "red" }).value,
+    "red",
+    "Should have correct property value"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js
new file mode 100644
index 0000000000..9c52d33e58
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  // Turn off throttling, which can cause intermittents. Throttling is used by
+  // the TextPropertyEditor.
+  view.debounce = () => {};
+
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  let onMutation = inspector.once("markupmutation");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(ruleEditor, "width: 100px; heig");
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    2,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    2,
+    "Should have created a property editor."
+  );
+
+  // Value is focused, lets add multiple rules here and make sure they get added
+  onMutation = inspector.once("markupmutation");
+  onRuleViewChanged = view.once("ruleview-changed");
+  const valueEditor = ruleEditor.propertyList.children[1].querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  valueEditor.value = "10px;background:orangered;color: black;";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have added the changed value."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    5,
+    "Should have added the changed value editor."
+  );
+
+  is(
+    getTextProperty(view, 0, { width: "100px" }).name,
+    "width",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { width: "100px" }).value,
+    "100px",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { heig: "10px" }).name,
+    "heig",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { heig: "10px" }).value,
+    "10px",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { background: "orangered" }).name,
+    "background",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { background: "orangered" }).value,
+    "orangered",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "black" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "black" }).value,
+    "black",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple_properties_01.js b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_01.js
new file mode 100644
index 0000000000..65babeddf6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_01.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors.
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:blue;background : orange   ; text-align:center; " +
+      "border-color: green;"
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    5,
+    "Should have created a new property editor."
+  );
+
+  is(
+    ruleEditor.rule.textProps[0].name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[0].value,
+    "blue",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[1].name,
+    "background",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[1].value,
+    "orange",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[2].name,
+    "text-align",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[2].value,
+    "center",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[3].name,
+    "border-color",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[3].value,
+    "green",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js
new file mode 100644
index 0000000000..c2ed334bbe
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  let onDone = view.once("ruleview-changed");
+  await createNewRuleViewProperty(ruleEditor, "width:");
+  await onDone;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    1,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    1,
+    "Should have created a property editor."
+  );
+
+  // Value is focused, lets add multiple rules here and make sure they get added
+  onDone = view.once("ruleview-changed");
+  const onMutation = inspector.once("markupmutation");
+  const input = view.styleDocument.activeElement;
+  input.value = "height: 10px;color:blue";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onMutation;
+  await onDone;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    2,
+    "Should have added the changed value."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    3,
+    "Should have added the changed value editor."
+  );
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  is(
+    ruleEditor.propertyList.children.length,
+    2,
+    "Should have removed the value editor."
+  );
+
+  is(
+    ruleEditor.rule.textProps[0].name,
+    "width",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[0].value,
+    "height: 10px",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[1].name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[1].value,
+    "blue",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_nested_at_rules.js b/devtools/client/inspector/rules/test/browser_rules_nested_at_rules.js
new file mode 100644
index 0000000000..e945b9269f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_nested_at_rules.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page defines nested at-rules (@media, @layer, @supports, …)
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      container: mycontainer / inline-size;
+    }
+
+    @layer mylayer {
+      @supports (container-name: mycontainer) {
+        @container mycontainer (min-width: 1px) {
+          @media screen {
+            @container mycontainer (min-width: 2rem) {
+              h1, [test-hint="nested"] {
+                background: gold;
+              }
+            }
+          }
+        }
+      }
+    }
+  </style>
+  <h1>Hello nested at-rules!</h1>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.container-queries.enabled", true);
+
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  const expectedRules = [
+    { selector: "element", ancestorRulesData: null },
+    {
+      selector: `h1, [test-hint="nested"]`,
+      ancestorRulesData: [
+        `@layer mylayer {`,
+        `  @supports (container-name: mycontainer) {`,
+        `    @container mycontainer (min-width: 1px) {`,
+        `      @media screen {`,
+        `        @container mycontainer (min-width: 2rem) {`,
+      ],
+    },
+  ];
+
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectors-container"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_nested_rules.js b/devtools/client/inspector/rules/test/browser_rules_nested_rules.js
new file mode 100644
index 0000000000..925f36a0e6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_nested_rules.js
@@ -0,0 +1,211 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page uses nested CSS rules
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: tomato;
+      container-type: inline-size;
+
+      @media screen {
+        container-name: main;
+
+        & h1 {
+          border-color: gold;
+
+          .foo {
+            color: white;
+          }
+
+          #bar {
+            text-decoration: underline;
+          }
+
+          @container main (width > 10px) {
+            & + nav {
+              border: 1px solid;
+
+              [href] {
+                background-color: lightgreen;
+              }
+            }
+          }
+        }
+      }
+    }
+  </style>
+  <h1>Hello <i class="foo">nested</i> <em id="bar">rules</em>!</h1>
+  <nav>
+    <ul>
+      <li><a href="#">Leaf</a></li>
+      <li><a>Nowhere</a></li>
+    </ul>
+  </nav>
+`;
+
+add_task(async function () {
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("body", inspector);
+  checkRuleViewContent(view, [
+    { selector: "element", ancestorRulesData: null, declarations: [] },
+    {
+      selector: `&`,
+      // prettier-ignore
+      ancestorRulesData: [
+        `body {`,
+        `  @media screen {`
+      ],
+      declarations: [{ name: "container-name", value: "main" }],
+    },
+    {
+      selector: `body`,
+      ancestorRulesData: null,
+      declarations: [
+        { name: "background", value: "tomato" },
+        { name: "container-type", value: "inline-size" },
+      ],
+    },
+  ]);
+
+  await selectNode("h1", inspector);
+  checkRuleViewContent(view, [
+    { selector: "element", ancestorRulesData: null, declarations: [] },
+    {
+      selector: `& h1`,
+      // prettier-ignore
+      ancestorRulesData: [
+        `body {`,
+        `  @media screen {`
+      ],
+      declarations: [{ name: "border-color", value: "gold" }],
+    },
+  ]);
+
+  await selectNode("h1 > .foo", inspector);
+  checkRuleViewContent(view, [
+    { selector: "element", ancestorRulesData: null, declarations: [] },
+    {
+      selector: `.foo`,
+      // prettier-ignore
+      ancestorRulesData: [
+        `body {`,
+        `  @media screen {`,
+        `    & h1 {`
+      ],
+      declarations: [{ name: "color", value: "white" }],
+    },
+  ]);
+
+  await selectNode("h1 > #bar", inspector);
+  checkRuleViewContent(view, [
+    { selector: "element", ancestorRulesData: null, declarations: [] },
+    {
+      selector: `#bar`,
+      // prettier-ignore
+      ancestorRulesData: [
+        `body {`,
+        `  @media screen {`,
+        `    & h1 {`
+      ],
+      declarations: [{ name: "text-decoration", value: "underline" }],
+    },
+  ]);
+
+  await selectNode("nav", inspector);
+  checkRuleViewContent(view, [
+    { selector: "element", ancestorRulesData: null, declarations: [] },
+    {
+      selector: `& + nav`,
+      ancestorRulesData: [
+        `body {`,
+        `  @media screen {`,
+        `    & h1 {`,
+        `      @container main (width > 10px) {`,
+      ],
+      declarations: [{ name: "border", value: "1px solid" }],
+    },
+  ]);
+
+  await selectNode("nav a", inspector);
+  checkRuleViewContent(view, [
+    { selector: "element", ancestorRulesData: null, declarations: [] },
+    {
+      selector: `[href]`,
+      ancestorRulesData: [
+        `body {`,
+        `  @media screen {`,
+        `    & h1 {`,
+        `      @container main (width > 10px) {`,
+        `        & + nav {`,
+      ],
+      declarations: [{ name: "background-color", value: "lightgreen" }],
+    },
+  ]);
+});
+
+function checkRuleViewContent(view, expectedRules) {
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const ruleInView = rulesInView[i];
+    const selector = ruleInView.querySelector(
+      ".ruleview-selectors-container"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+
+    const declarations = ruleInView.querySelectorAll(".ruleview-property");
+    is(
+      declarations.length,
+      expectedRule.declarations.length,
+      "Got the expected number of declarations"
+    );
+    for (let j = 0; j < declarations.length; j++) {
+      const expectedDeclaration = expectedRule.declarations[j];
+      const [propName, propValue] = Array.from(
+        declarations[j].querySelectorAll(
+          ".ruleview-propertyname, .ruleview-propertyvalue"
+        )
+      );
+      is(
+        propName.innerText,
+        expectedDeclaration?.name,
+        "Got expected property name"
+      );
+      is(
+        propValue.innerText,
+        expectedDeclaration?.value,
+        "Got expected property value"
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_non_ascii.js b/devtools/client/inspector/rules/test/browser_rules_non_ascii.js
new file mode 100644
index 0000000000..b124c7513b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_non_ascii.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that rule view can open when there are non-ASCII characters in
+// the style sheet.  Regression test for bug 1390455.
+
+// Use a few 4-byte UTF-8 sequences to make it so the rule column
+// would be wrong when we had the bug.
+const SHEET_TEXT = "/*🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒*/#q{color:orange}";
+const HTML = `<style type="text/css">\n${SHEET_TEXT}
+              </style><div id="q">Styled Node</div>`;
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+add_task(async function () {
+  await addTab(TEST_URI);
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#q", inspector);
+
+  const elementStyle = view._elementStyle;
+
+  const expected = [{ name: "color", overridden: false }];
+
+  const rule = elementStyle.rules[1];
+
+  for (let i = 0; i < expected.length; ++i) {
+    const prop = rule.textProps[i];
+    is(prop.name, expected[i].name, `Got expected property name ${prop.name}`);
+    is(
+      prop.overridden,
+      expected[i].overridden,
+      `Got expected overridden value ${prop.overridden}`
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js
new file mode 100644
index 0000000000..9d440659a2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js
@@ -0,0 +1,118 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the stylesheet links in the rule view are correct when source maps
+// are involved.
+
+const TESTCASE_URI = URL_ROOT_SSL + "doc_sourcemaps.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const SCSS_FILENAME = "doc_sourcemaps.scss";
+const SCSS_LOC_LINE = 4;
+const CSS_FILENAME = "doc_sourcemaps.css";
+const CSS_LOC_LINE = 1;
+
+add_task(async function () {
+  info("Setting the " + PREF + " pref to true");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("div", inspector);
+
+  await verifyStyleSheetLink(view, SCSS_FILENAME, SCSS_LOC_LINE);
+
+  info("Setting the " + PREF + " pref to false");
+  Services.prefs.setBoolPref(PREF, false);
+  await verifyStyleSheetLink(view, CSS_FILENAME, CSS_LOC_LINE);
+
+  info("Setting the " + PREF + " pref to true again");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await testClickingLink(toolbox, view);
+  const selectedEditor = await waitForOriginalStyleSheetEditorSelection(
+    toolbox
+  );
+
+  const href = selectedEditor.styleSheet.href;
+  ok(
+    href.endsWith("doc_sourcemaps.scss"),
+    "selected stylesheet is correct one"
+  );
+
+  await selectedEditor.getSourceEditor();
+  const { line } = selectedEditor.sourceEditor.getCursor();
+  is(line, 3, "cursor is at correct line number in original source");
+
+  info("Clearing the " + PREF + " pref");
+  Services.prefs.clearUserPref(PREF);
+});
+
+async function testClickingLink(toolbox, view) {
+  info("Listening for switch to the style editor");
+  const onStyleEditorReady = toolbox.once("styleeditor-selected");
+
+  info("Finding the stylesheet link and clicking it");
+  const link = getRuleViewLinkByIndex(view, 1);
+  link.scrollIntoView();
+  link.click();
+  await onStyleEditorReady;
+}
+
+function waitForOriginalStyleSheetEditorSelection(toolbox) {
+  const panel = toolbox.getCurrentPanel();
+  return new Promise((resolve, reject) => {
+    const maybeContinue = editor => {
+      // The style editor selects the first sheet at first load before
+      // selecting the desired sheet.
+      if (editor.styleSheet.href.endsWith("scss")) {
+        info("Original source editor selected");
+        off();
+        resolve(editor);
+      }
+    };
+    const off = panel.UI.on("editor-selected", maybeContinue);
+    if (panel.UI.selectedEditor) {
+      maybeContinue(panel.UI.selectedEditor);
+    }
+  });
+}
+
+async function verifyStyleSheetLink(view, fileName, lineNumber) {
+  const expectedLocation = `${fileName}:${lineNumber}`;
+  const expectedUrl = URL_ROOT_SSL + fileName;
+  const expectedTitle = URL_ROOT_SSL + expectedLocation;
+
+  info("Verifying that the rule-view stylesheet link is " + expectedLocation);
+  const label = getRuleViewLinkByIndex(view, 1).querySelector(
+    ".ruleview-rule-source-label"
+  );
+  await waitForSuccess(function () {
+    return (
+      label.textContent == expectedLocation &&
+      label.getAttribute("title") === expectedTitle
+    );
+  }, "Link text changed to display correct location: " + expectedLocation);
+
+  const copyLocationMenuItem = openStyleContextMenuAndGetAllItems(
+    view,
+    label
+  ).find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyLocation")
+  );
+
+  try {
+    await waitForClipboardPromise(
+      () => copyLocationMenuItem.click(),
+      () => SpecialPowers.getClipboardData("text/plain") === expectedUrl
+    );
+    ok(true, "Expected URL was copied to clipboard");
+  } catch (e) {
+    ok(false, `Clipboard text does not match expected "${expectedUrl}" url`);
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
new file mode 100644
index 0000000000..87963f9ec5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the stylesheet links in the rule view are correct when source maps
+// are involved.
+
+const TESTCASE_URI = URL_ROOT + "doc_sourcemaps2.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const SCSS_LOC = "doc_sourcemaps.scss:4";
+const CSS_LOC = "doc_sourcemaps2.css:1";
+
+add_task(async function () {
+  info("Setting the " + PREF + " pref to true");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("div", inspector);
+
+  await verifyLinkText(SCSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to false");
+  Services.prefs.setBoolPref(PREF, false);
+  await verifyLinkText(CSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to true again");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await testClickingLink(toolbox, view);
+  const selectedEditor = await waitForOriginalStyleSheetEditorSelection(
+    toolbox
+  );
+  const href = selectedEditor.styleSheet.href;
+  ok(
+    href.endsWith("doc_sourcemaps.scss"),
+    "selected stylesheet is correct one"
+  );
+  await selectedEditor.getSourceEditor();
+
+  const { line } = selectedEditor.sourceEditor.getCursor();
+  is(line, 3, "cursor is at correct line number in original source");
+
+  info("Clearing the " + PREF + " pref");
+  Services.prefs.clearUserPref(PREF);
+});
+
+async function testClickingLink(toolbox, view) {
+  info("Listening for switch to the style editor");
+  const onStyleEditorReady = toolbox.once("styleeditor-selected");
+
+  info("Finding the stylesheet link and clicking it");
+  const link = getRuleViewLinkByIndex(view, 1);
+  link.scrollIntoView();
+  link.click();
+  await onStyleEditorReady;
+}
+
+function waitForOriginalStyleSheetEditorSelection(toolbox) {
+  const panel = toolbox.getCurrentPanel();
+  return new Promise((resolve, reject) => {
+    const maybeContinue = editor => {
+      // The style editor selects the first sheet at first load before
+      // selecting the desired sheet.
+      if (editor.styleSheet.href.endsWith("scss")) {
+        info("Original source editor selected");
+        off();
+        resolve(editor);
+      }
+    };
+    const off = panel.UI.on("editor-selected", maybeContinue);
+    if (panel.UI.selectedEditor) {
+      maybeContinue(panel.UI.selectedEditor);
+    }
+  });
+}
+
+function verifyLinkText(text, view) {
+  info("Verifying that the rule-view stylesheet link is " + text);
+  const label = getRuleViewLinkByIndex(view, 1).querySelector(
+    ".ruleview-rule-source-label"
+  );
+  return waitForSuccess(function () {
+    return label.textContent == text;
+  }, "Link text changed to display correct location: " + text);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js b/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js
new file mode 100644
index 0000000000..30a5a7fced
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the dimensions of the preview tooltips are correctly updated to fit their
+// content.
+
+// Small 32x32 image.
+const BASE_64_URL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr" +
+  "0AAAAUElEQVRYR+3UsQkAQAhD0TjJ7T+Wk3gbxMIizbcVITwwJWlkZtptpXp+v94TAAEE4gLTvgfOf770RB" +
+  "EAAQTiAvEiIgACCMQF4kVEAAQQSAt8xsyeAW6R8eIAAAAASUVORK5CYII=";
+
+add_task(async function () {
+  await addTab(
+    "data:text/html;charset=utf-8," +
+      encodeURIComponent(`
+      <style>
+        html {
+          /* Using a long variable name to ensure preview tooltip for variable will be */
+          /* wider than the preview tooltip for the test 32x32 image. */
+          --test-var-wider-than-image: red;
+        }
+
+        #target {
+          color: var(--test-var-wider-than-image);
+          background: url(${BASE_64_URL});
+        }
+      </style>
+      <div id="target">inspect me</div>
+    `)
+  );
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  // Note: See intermittent Bug 1721743.
+  // On linux webrender opt, the inspector might open the ruleview before it has
+  // been populated with the rules for the div.
+  info("Wait until the rule view property is rendered");
+  const colorPropertyElement = await waitFor(() =>
+    getRuleViewProperty(view, "#target", "color")
+  );
+
+  // Retrieve the element for `--test-var` on which the CSS variable tooltip will appear.
+  const colorPropertySpan = colorPropertyElement.valueSpan;
+  const colorVariableElement =
+    colorPropertySpan.querySelector(".ruleview-variable");
+
+  // Retrieve the element for the background url on which the image preview will appear.
+  const backgroundPropertySpan = getRuleViewProperty(
+    view,
+    "#target",
+    "background"
+  ).valueSpan;
+  const backgroundUrlElement =
+    backgroundPropertySpan.querySelector(".theme-link");
+
+  info("Show preview tooltip for CSS variable");
+  let previewTooltip = await assertShowPreviewTooltip(
+    view,
+    colorVariableElement
+  );
+  // Measure tooltip dimensions.
+  let tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  const originalHeight = tooltipRect.height;
+  const originalWidth = tooltipRect.width;
+  info(`Original dimensions: ${originalWidth} x ${originalHeight}`);
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+
+  info("Show preview tooltip for background url");
+  previewTooltip = await assertShowPreviewTooltip(view, backgroundUrlElement);
+  // Compare new tooltip dimensions to previous measures.
+  tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  info(
+    `Image preview dimensions: ${tooltipRect.width} x ${tooltipRect.height}`
+  );
+  Assert.greater(
+    tooltipRect.height,
+    originalHeight,
+    "Tooltip is taller for image preview"
+  );
+  Assert.less(
+    tooltipRect.width,
+    originalWidth,
+    "Tooltip is narrower for image preview"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+
+  info("Show preview tooltip for CSS variable again");
+  previewTooltip = await assertShowPreviewTooltip(view, colorVariableElement);
+  // Check measures are identical to initial ones.
+  tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  info(
+    `CSS variable tooltip dimensions: ${tooltipRect.width} x ${tooltipRect.height}`
+  );
+  is(
+    tooltipRect.height,
+    originalHeight,
+    "Tooltip has the same height as the original"
+  );
+  is(
+    tooltipRect.width,
+    originalWidth,
+    "Tooltip has the same width as the original"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js b/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js
new file mode 100644
index 0000000000..92044a77ed
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test print media simulation.
+
+// Load the test page under .com TLD, to make the inner .org iframe remote with
+// Fission.
+const TEST_URI = URL_ROOT_COM_SSL + "doc_print_media_simulation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Check that the print simulation button exists");
+  const button = inspector.panelDoc.querySelector("#print-simulation-toggle");
+  ok(button, "The print simulation button exists");
+
+  is(
+    button.getAttribute("aria-pressed"),
+    "false",
+    "The print button is not pressed"
+  );
+
+  // Helper to retrieve the background-color property of the selected element
+  // All the test elements are expected to have a single background-color rule
+  // for this test.
+  const ruleViewHasColor = async color =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:" + color);
+
+  info("Select a div that will change according to print simulation");
+  await selectNode("div", inspector);
+  ok(
+    await ruleViewHasColor("#f00"),
+    "The rule view shows the expected initial rule"
+  );
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "No media query information are displayed initially"
+  );
+
+  info("Click on the button and wait for print media to be applied");
+  button.click();
+
+  await waitFor(() => button.getAttribute("aria-pressed") === "true");
+  ok(true, "The button is now pressed");
+
+  await waitFor(() => ruleViewHasColor("#00f"));
+  ok(
+    true,
+    "The rules view was updated with the rule view from the print media query"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media print {",
+    "Media queries information are displayed"
+  );
+
+  info("Select the node from the remote iframe");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+
+  ok(
+    await ruleViewHasColor("#0ff"),
+    "The simulation is also applied on the remote iframe"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media print {",
+    "Media queries information are displayed for the node on the remote iframe as well"
+  );
+
+  info("Select the top level div again");
+  await selectNode("div", inspector);
+
+  info("Click the button again to disable print simulation");
+  button.click();
+
+  await waitFor(() => button.getAttribute("aria-pressed") === "false");
+  ok(true, "The button is no longer checked");
+
+  await waitFor(() => ruleViewHasColor("#f00"));
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "media query is no longer displayed"
+  );
+
+  info("Select the node from the remote iframe again");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+
+  await waitFor(() => ruleViewHasColor("#ff0"));
+  ok(true, "The simulation stopped on the remote iframe as well");
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "media query is no longer displayed on the remote iframe as well"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
new file mode 100644
index 0000000000..f170cf1591
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -0,0 +1,484 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that pseudoelements are displayed correctly in the rule view
+
+const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
+const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
+
+add_task(async function () {
+  await pushPref(PSEUDO_PREF, true);
+  await pushPref("dom.customHighlightAPI.enabled", true);
+
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await testTopLeft(inspector, view);
+  await testTopRight(inspector, view);
+  await testBottomRight(inspector, view);
+  await testBottomLeft(inspector, view);
+  await testParagraph(inspector, view);
+  await testBody(inspector, view);
+  await testList(inspector, view);
+  await testDialogBackdrop(inspector, view);
+  await testCustomHighlight(inspector, view);
+});
+
+async function testTopLeft(inspector, view) {
+  const id = "#topleft";
+  const rules = await assertPseudoElementRulesNumbers(id, inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 2,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 1,
+    markerRulesNb: 0,
+    afterRulesNb: 1,
+    beforeRulesNb: 2,
+  });
+
+  const gutters = assertGutters(view);
+
+  info("Make sure that clicking on the twisty hides pseudo elements");
+  const expander = gutters[0].querySelector(".ruleview-expander");
+  ok(!view.element.children[1].hidden, "Pseudo Elements are expanded");
+
+  expander.click();
+  ok(
+    view.element.children[1].hidden,
+    "Pseudo Elements are collapsed by twisty"
+  );
+
+  expander.click();
+  ok(!view.element.children[1].hidden, "Pseudo Elements are expanded again");
+
+  info(
+    "Make sure that dblclicking on the header container also toggles " +
+      "the pseudo elements"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    gutters[0],
+    { clickCount: 2 },
+    view.styleWindow
+  );
+  ok(
+    view.element.children[1].hidden,
+    "Pseudo Elements are collapsed by dblclicking"
+  );
+
+  const elementRuleView = getRuleViewRuleEditor(view, 3);
+
+  const elementFirstLineRule = rules.firstLineRules[0];
+  const elementFirstLineRuleView = [
+    ...view.element.children[1].children,
+  ].filter(e => {
+    return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule;
+  })[0]._ruleEditor;
+
+  is(
+    convertTextPropsToString(elementFirstLineRule.textProps),
+    "color: orange",
+    "TopLeft firstLine properties are correct"
+  );
+
+  let onAdded = view.once("ruleview-changed");
+  let firstProp = elementFirstLineRuleView.addProperty(
+    "background-color",
+    "rgb(0, 255, 0)",
+    "",
+    true
+  );
+  await onAdded;
+
+  onAdded = view.once("ruleview-changed");
+  const secondProp = elementFirstLineRuleView.addProperty(
+    "font-style",
+    "italic",
+    "",
+    true
+  );
+  await onAdded;
+
+  is(
+    firstProp,
+    elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 2],
+    "First added property is on back of array"
+  );
+  is(
+    secondProp,
+    elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 1],
+    "Second added property is on back of array"
+  );
+
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(0, 255, 0)",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, ":first-line", "font-style"),
+    "italic",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, null, "text-decoration-line"),
+    "none",
+    "Added property should not apply to element"
+  );
+
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(255, 0, 0)",
+    "Disabled property should now have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, null, "background-color"),
+    "rgb(221, 221, 221)",
+    "Added property should not apply to element"
+  );
+
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(0, 255, 0)",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, null, "text-decoration-line"),
+    "none",
+    "Added property should not apply to element"
+  );
+
+  onAdded = view.once("ruleview-changed");
+  firstProp = elementRuleView.addProperty(
+    "background-color",
+    "rgb(0, 0, 255)",
+    "",
+    true
+  );
+  await onAdded;
+
+  is(
+    await getComputedStyleProperty(id, null, "background-color"),
+    "rgb(0, 0, 255)",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(0, 255, 0)",
+    "Added prop does not apply to pseudo"
+  );
+}
+
+async function testTopRight(inspector, view) {
+  await assertPseudoElementRulesNumbers("#topright", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 0,
+    beforeRulesNb: 2,
+    afterRulesNb: 1,
+  });
+
+  const gutters = assertGutters(view);
+
+  const expander = gutters[0].querySelector(".ruleview-expander");
+  ok(
+    !view.element.firstChild.classList.contains("show-expandable-container"),
+    "Pseudo Elements remain collapsed after switching element"
+  );
+
+  expander.scrollIntoView();
+  expander.click();
+  ok(
+    !view.element.children[1].hidden,
+    "Pseudo Elements are shown again after clicking twisty"
+  );
+}
+
+async function testBottomRight(inspector, view) {
+  await assertPseudoElementRulesNumbers("#bottomright", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 0,
+    beforeRulesNb: 3,
+    afterRulesNb: 1,
+  });
+}
+
+async function testBottomLeft(inspector, view) {
+  await assertPseudoElementRulesNumbers("#bottomleft", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 0,
+    beforeRulesNb: 2,
+    afterRulesNb: 1,
+  });
+}
+
+async function testParagraph(inspector, view) {
+  const rules = await assertPseudoElementRulesNumbers(
+    "#bottomleft p",
+    inspector,
+    view,
+    {
+      elementRulesNb: 3,
+      firstLineRulesNb: 1,
+      firstLetterRulesNb: 1,
+      selectionRulesNb: 2,
+      markerRulesNb: 0,
+      beforeRulesNb: 0,
+      afterRulesNb: 0,
+    }
+  );
+
+  assertGutters(view);
+
+  const elementFirstLineRule = rules.firstLineRules[0];
+  is(
+    convertTextPropsToString(elementFirstLineRule.textProps),
+    "background: blue",
+    "Paragraph first-line properties are correct"
+  );
+
+  const elementFirstLetterRule = rules.firstLetterRules[0];
+  is(
+    convertTextPropsToString(elementFirstLetterRule.textProps),
+    "color: red; font-size: 130%",
+    "Paragraph first-letter properties are correct"
+  );
+
+  const elementSelectionRule = rules.selectionRules[0];
+  is(
+    convertTextPropsToString(elementSelectionRule.textProps),
+    "color: white; background: black",
+    "Paragraph first-letter properties are correct"
+  );
+}
+
+async function testBody(inspector, view) {
+  await testNode("body", inspector, view);
+
+  const gutters = getGutters(view);
+  is(gutters.length, 0, "There are no gutter headings");
+}
+
+async function testList(inspector, view) {
+  await assertPseudoElementRulesNumbers("#list", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 1,
+    beforeRulesNb: 1,
+    afterRulesNb: 1,
+  });
+
+  assertGutters(view);
+}
+
+async function testDialogBackdrop(inspector, view) {
+  await assertPseudoElementRulesNumbers("dialog", inspector, view, {
+    elementRulesNb: 3,
+    backdropRules: 1,
+  });
+
+  assertGutters(view);
+}
+
+async function testCustomHighlight(inspector, view) {
+  const { highlightRules } = await assertPseudoElementRulesNumbers(
+    ".highlights-container",
+    inspector,
+    view,
+    {
+      elementRulesNb: 4,
+      highlightRulesNb: 3,
+    }
+  );
+
+  is(
+    highlightRules[0].pseudoElement,
+    "::highlight(filter)",
+    "First highlight rule is for the filter highlight"
+  );
+
+  is(
+    highlightRules[1].pseudoElement,
+    "::highlight(search)",
+    "Second highlight rule is for the search highlight"
+  );
+  is(
+    highlightRules[2].pseudoElement,
+    "::highlight(search)",
+    "Third highlight rule is also for the search highlight"
+  );
+  is(highlightRules.length, 3, "Got all 3 active rules, but not unused one");
+
+  // Check that properties are marked as overridden only when they're on the same Highlight
+  is(
+    convertTextPropsToString(highlightRules[0].textProps),
+    `background-color: purple`,
+    "Got expected properties for filter highlight"
+  );
+  is(
+    convertTextPropsToString(highlightRules[1].textProps),
+    `color: white`,
+    "Got expected properties for first search highlight"
+  );
+  is(
+    convertTextPropsToString(highlightRules[2].textProps),
+    `background-color: tomato; ~~color: gold~~`,
+    "Got expected properties for second search highlight, `color` is marked as overridden"
+  );
+
+  assertGutters(view);
+}
+
+function convertTextPropsToString(textProps) {
+  return textProps
+    .map(
+      t =>
+        `${t.overridden ? "~~" : ""}${t.name}: ${t.value}${
+          t.overridden ? "~~" : ""
+        }`
+    )
+    .join("; ");
+}
+
+async function testNode(selector, inspector, view) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+  return elementStyle;
+}
+
+async function assertPseudoElementRulesNumbers(
+  selector,
+  inspector,
+  view,
+  ruleNbs
+) {
+  const elementStyle = await testNode(selector, inspector, view);
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.pseudoElement),
+    firstLineRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::first-line"
+    ),
+    firstLetterRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::first-letter"
+    ),
+    selectionRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::selection"
+    ),
+    markerRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::marker"
+    ),
+    beforeRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::before"
+    ),
+    afterRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::after"
+    ),
+    backdropRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::backdrop"
+    ),
+    highlightRules: elementStyle.rules.filter(rule =>
+      rule.pseudoElement?.startsWith("::highlight(")
+    ),
+  };
+
+  is(
+    rules.elementRules.length,
+    ruleNbs.elementRulesNb || 0,
+    selector + " has the correct number of non pseudo element rules"
+  );
+  is(
+    rules.firstLineRules.length,
+    ruleNbs.firstLineRulesNb || 0,
+    selector + " has the correct number of ::first-line rules"
+  );
+  is(
+    rules.firstLetterRules.length,
+    ruleNbs.firstLetterRulesNb || 0,
+    selector + " has the correct number of ::first-letter rules"
+  );
+  is(
+    rules.selectionRules.length,
+    ruleNbs.selectionRulesNb || 0,
+    selector + " has the correct number of ::selection rules"
+  );
+  is(
+    rules.markerRules.length,
+    ruleNbs.markerRulesNb || 0,
+    selector + " has the correct number of ::marker rules"
+  );
+  is(
+    rules.beforeRules.length,
+    ruleNbs.beforeRulesNb || 0,
+    selector + " has the correct number of ::before rules"
+  );
+  is(
+    rules.afterRules.length,
+    ruleNbs.afterRulesNb || 0,
+    selector + " has the correct number of ::after rules"
+  );
+  is(
+    rules.highlightRules.length,
+    ruleNbs.highlightRulesNb || 0,
+    selector + " has the correct number of ::highlight rules"
+  );
+
+  // If we do have pseudo element rules displayed, ensure we don't mark their selectors
+  // as matched or unmatched
+  if (
+    rules.elementRules.length &&
+    elementStyle.rules.length !== rules.elementRules.length
+  ) {
+    const pseudoElementContainer = view.styleWindow.document.getElementById(
+      "pseudo-elements-container"
+    );
+    const selectors = Array.from(
+      pseudoElementContainer.querySelectorAll(".ruleview-selector")
+    );
+    ok(selectors.length, "We do have selectors for pseudo element rules");
+    ok(
+      selectors.every(
+        selectorEl =>
+          !selectorEl.classList.contains("matched") &&
+          !selectorEl.classList.contains("unmatched")
+      ),
+      "Pseudo element selectors are not marked as matched nor unmatched"
+    );
+  }
+
+  return rules;
+}
+
+function getGutters(view) {
+  return view.element.querySelectorAll(".ruleview-header");
+}
+
+function assertGutters(view) {
+  const gutters = getGutters(view);
+
+  is(gutters.length, 3, "There are 3 gutter headings");
+  is(gutters[0].textContent, "Pseudo-elements", "Gutter heading is correct");
+  is(gutters[1].textContent, "This Element", "Gutter heading is correct");
+  is(
+    gutters[2].textContent,
+    "Inherited from body",
+    "Gutter heading is correct"
+  );
+
+  return gutters;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js
new file mode 100644
index 0000000000..d098542758
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that pseudoelements are displayed correctly in the markup view.
+
+const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector } = await openRuleView();
+
+  const node = await getNodeFront("#topleft", inspector);
+  const children = await inspector.markup.walker.children(node);
+
+  is(children.nodes.length, 3, "Element has correct number of children");
+
+  const beforeElement = children.nodes[0];
+  is(
+    beforeElement.tagName,
+    "_moz_generated_content_before",
+    "tag name is correct"
+  );
+  await selectNode(beforeElement, inspector);
+
+  const afterElement = children.nodes[children.nodes.length - 1];
+  is(
+    afterElement.tagName,
+    "_moz_generated_content_after",
+    "tag name is correct"
+  );
+  await selectNode(afterElement, inspector);
+
+  const listNode = await getNodeFront("#list", inspector);
+  const listChildren = await inspector.markup.walker.children(listNode);
+
+  is(listChildren.nodes.length, 4, "<li> has correct number of children");
+  const markerElement = listChildren.nodes[0];
+  is(
+    markerElement.tagName,
+    "_moz_generated_content_marker",
+    "tag name is correct"
+  );
+  await selectNode(markerElement, inspector);
+
+  const listBeforeElement = listChildren.nodes[1];
+  is(
+    listBeforeElement.tagName,
+    "_moz_generated_content_before",
+    "tag name is correct"
+  );
+  await selectNode(listBeforeElement, inspector);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-visited.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited.js
new file mode 100644
index 0000000000..6d37829160
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests for visited/unvisited rule.
+
+const TEST_URI = URL_ROOT + "doc_visited.html";
+
+add_task(async () => {
+  info("Open a url which has a visited and an unvisited link");
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the visited link is available");
+  await waitUntilVisitedState(tab, ["#visited"]);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  info("Check whether the rule view is shown correctly for visited element");
+  await selectNode("#visited", inspector);
+  ok(getRuleViewRule(view, "a:visited"), "Rule of a:visited is shown");
+  ok(!getRuleViewRule(view, "a:link"), "Rule of a:link is not shown");
+  ok(getRuleViewRule(view, "a"), "Rule of a is shown");
+
+  info("Check whether the rule view is shown correctly for unvisited element");
+  await selectNode("#unvisited", inspector);
+  ok(!getRuleViewRule(view, "a:visited"), "Rule of a:visited is not shown");
+  ok(getRuleViewRule(view, "a:link"), "Rule of a:link is shown");
+  ok(getRuleViewRule(view, "a"), "Rule of a is shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_in_media-query.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_in_media-query.js
new file mode 100644
index 0000000000..48f62a2fa9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_in_media-query.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests for visited/unvisited rule.
+
+const TEST_URI = URL_ROOT + "doc_visited_in_media_query.html";
+
+add_task(async () => {
+  info("Open a url which has a visited link and the style in the media query");
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the visited link is available");
+  await waitUntilVisitedState(tab, ["#visited"]);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  info("Check whether the rule view is shown correctly for visited element");
+  await selectNode("#visited", inspector);
+  ok(getRuleViewRule(view, "a"), "Rule of a is shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_with_style-attribute.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_with_style-attribute.js
new file mode 100644
index 0000000000..97d1458b72
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_with_style-attribute.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view works for an element with a visited pseudo class
+// with a style attribute defined.
+
+const TEST_URI = URL_ROOT + "doc_visited_with_style_attribute.html";
+
+add_task(async () => {
+  info(
+    "Open a page which has an element with a visited pseudo class and a style attribute"
+  );
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the link has been visited");
+  await waitUntilVisitedState(tab, ["#visited"]);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  info("Check whether the rule view is shown correctly for visited element");
+  await selectNode("#visited", inspector);
+  ok(getRuleViewRule(view, "element"), "Rule of a is shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js b/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js
new file mode 100644
index 0000000000..438b96807f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js
@@ -0,0 +1,181 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view pseudo lock options work properly.
+
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+    div:hover {
+      color: blue;
+    }
+    div:active {
+      color: yellow;
+    }
+    div:focus {
+      color: green;
+    }
+    div:focus-within {
+      color: papayawhip;
+    }
+    div:visited {
+      color: orange;
+    }
+    div:focus-visible {
+      color: wheat;
+    }
+    div:target {
+      color: crimson;
+    }
+  </style>
+  <div>test div</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Check that the toggle button exists");
+  const button = inspector.panelDoc.getElementById("pseudo-class-panel-toggle");
+  ok(button, "The pseudo-class panel toggle button exists");
+  is(
+    view.pseudoClassToggle,
+    button,
+    "The rule-view refers to the right element"
+  );
+  is(
+    inspector.panelDoc.getElementById(button.getAttribute("aria-controls")),
+    view.pseudoClassPanel,
+    "The pseudo-class panel toggle button has valid aria-controls attribute"
+  );
+
+  await assertPseudoPanelClosed(view);
+
+  info("Toggle the pseudo class panel open");
+  view.pseudoClassToggle.click();
+  await assertPseudoPanelOpened(view);
+
+  info("Toggle each pseudo lock and check that the pseudo lock is added");
+  for (const pseudo of PSEUDO_CLASSES) {
+    await togglePseudoClass(inspector, view, pseudo);
+    await assertPseudoAdded(inspector, view, pseudo, 3, 1);
+    await togglePseudoClass(inspector, view, pseudo);
+    await assertPseudoRemoved(inspector, view, 2);
+  }
+
+  info("Toggle all pseudo locks and check that the pseudo lock is added");
+  await togglePseudoClass(inspector, view, ":hover");
+  await togglePseudoClass(inspector, view, ":active");
+  await togglePseudoClass(inspector, view, ":focus");
+  await togglePseudoClass(inspector, view, ":target");
+  await assertPseudoAdded(inspector, view, ":target", 6, 1);
+  await assertPseudoAdded(inspector, view, ":focus", 6, 2);
+  await assertPseudoAdded(inspector, view, ":active", 6, 3);
+  await assertPseudoAdded(inspector, view, ":hover", 6, 4);
+  await togglePseudoClass(inspector, view, ":hover");
+  await togglePseudoClass(inspector, view, ":active");
+  await togglePseudoClass(inspector, view, ":focus");
+  await togglePseudoClass(inspector, view, ":target");
+  await assertPseudoRemoved(inspector, view, 2);
+
+  info("Select a null element");
+  await view.selectElement(null);
+
+  info("Check that all pseudo locks are unchecked and disabled");
+  for (const pseudo of PSEUDO_CLASSES) {
+    const checkbox = getPseudoClassCheckbox(view, pseudo);
+    ok(
+      !checkbox.checked && checkbox.disabled,
+      `${pseudo} checkbox is unchecked and disabled`
+    );
+  }
+
+  info("Toggle the pseudo class panel close");
+  view.pseudoClassToggle.click();
+  await assertPseudoPanelClosed(view);
+});
+
+async function togglePseudoClass(inspector, view, pseudoClass) {
+  info(`Toggle the pseudo-class ${pseudoClass}, wait for it to be applied`);
+  const onRefresh = inspector.once("rule-view-refreshed");
+  const checkbox = getPseudoClassCheckbox(view, pseudoClass);
+  if (checkbox) {
+    checkbox.click();
+  }
+  await onRefresh;
+}
+
+function assertPseudoAdded(inspector, view, pseudoClass, numRules, childIndex) {
+  info("Check that the rule view contains the pseudo-class rule");
+  is(
+    view.element.children.length,
+    numRules,
+    "Should have " + numRules + " rules."
+  );
+  is(
+    getRuleViewRuleEditor(view, childIndex).rule.selectorText,
+    "div" + pseudoClass,
+    "rule view is showing " + pseudoClass + " rule"
+  );
+}
+
+function assertPseudoRemoved(inspector, view, numRules) {
+  info("Check that the rule view no longer contains the pseudo-class rule");
+  is(
+    view.element.children.length,
+    numRules,
+    "Should have " + numRules + " rules."
+  );
+  is(
+    getRuleViewRuleEditor(view, 1).rule.selectorText,
+    "div",
+    "Second rule is div"
+  );
+}
+
+function assertPseudoPanelOpened(view) {
+  info("Check the opened state of the pseudo class panel");
+  ok(!view.pseudoClassPanel.hidden, "Pseudo Class Panel Opened");
+  is(
+    view.pseudoClassToggle.getAttribute("aria-pressed"),
+    "true",
+    "The toggle button is pressed"
+  );
+
+  for (const pseudo of PSEUDO_CLASSES) {
+    const checkbox = getPseudoClassCheckbox(view, pseudo);
+    ok(!checkbox.disabled, `${pseudo} checkbox is not disabled`);
+    is(
+      checkbox.getAttribute("tabindex"),
+      "0",
+      `${pseudo} checkbox has a tabindex of 0`
+    );
+  }
+}
+
+function assertPseudoPanelClosed(view) {
+  info("Check the closed state of the pseudo clas panel");
+  ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Hidden");
+  is(
+    view.pseudoClassToggle.getAttribute("aria-pressed"),
+    "false",
+    "The toggle button is not pressed"
+  );
+
+  for (const pseudo of PSEUDO_CLASSES) {
+    const checkbox = getPseudoClassCheckbox(view, pseudo);
+    is(
+      checkbox.getAttribute("tabindex"),
+      "-1",
+      `${pseudo} checkbox has a tabindex of -1`
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js b/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js
new file mode 100644
index 0000000000..8b803284f0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule view does not go blank while selecting a new node.
+
+const TESTCASE_URI =
+  "data:text/html;charset=utf-8," +
+  '<div id="testdiv" style="font-size:10px;">' +
+  "Test div!</div>";
+
+add_task(async function () {
+  await addTab(TESTCASE_URI);
+
+  info("Opening the rule view and selecting the test node");
+  const { inspector, view } = await openRuleView();
+  const testdiv = await getNodeFront("#testdiv", inspector);
+  await selectNode(testdiv, inspector);
+
+  const htmlBefore = view.element.innerHTML;
+  Assert.greater(
+    htmlBefore.indexOf("font-size"),
+    -1,
+    "The rule view should contain a font-size property."
+  );
+
+  // Do the selectNode call manually, because otherwise it's hard to guarantee
+  // that we can make the below checks at a reasonable time.
+  info("refreshing the node");
+  const p = view.selectElement(testdiv, true);
+  is(
+    view.element.innerHTML,
+    htmlBefore,
+    "The rule view is unchanged during selection."
+  );
+  ok(
+    view.element.classList.contains("non-interactive"),
+    "The rule view is marked non-interactive."
+  );
+  await p;
+
+  info("node refreshed");
+  ok(
+    !view.element.classList.contains("non-interactive"),
+    "The rule view is marked interactive again."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js
new file mode 100644
index 0000000000..63b6b87497
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that changing the current element's attributes refreshes the rule-view
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id="testid" class="testclass" style="margin-top: 1px; padding-top: 5px;">
+    Styled Node
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info(
+    "Checking that the rule-view has the element, #testid and " +
+      ".testclass selectors"
+  );
+  checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
+
+  info(
+    "Changing the node's ID attribute and waiting for the " +
+      "rule-view refresh"
+  );
+  let ruleViewRefreshed = inspector.once("rule-view-refreshed");
+  await setContentPageElementAttribute("#testid", "id", "differentid");
+  await ruleViewRefreshed;
+
+  info("Checking that the rule-view doesn't have the #testid selector anymore");
+  checkRuleViewContent(view, ["element", ".testclass"]);
+
+  info("Reverting the ID attribute change");
+  ruleViewRefreshed = inspector.once("rule-view-refreshed");
+  await setContentPageElementAttribute("#differentid", "id", "testid");
+  await ruleViewRefreshed;
+
+  info("Checking that the rule-view has all the selectors again");
+  checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
+});
+
+function checkRuleViewContent(view, expectedSelectors) {
+  const selectors = view.styleDocument.querySelectorAll(
+    ".ruleview-selectors-container"
+  );
+
+  is(
+    selectors.length,
+    expectedSelectors.length,
+    expectedSelectors.length + " selectors are displayed"
+  );
+
+  for (let i = 0; i < expectedSelectors.length; i++) {
+    is(
+      selectors[i].textContent.indexOf(expectedSelectors[i]),
+      0,
+      "Selector " + (i + 1) + " is " + expectedSelectors[i]
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js
new file mode 100644
index 0000000000..9287f161de
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule view refreshes when the current node has its style
+// changed
+
+const TEST_URI = "<div id='testdiv' style='font-size: 10px;''>Test div!</div>";
+
+add_task(async function () {
+  Services.prefs.setCharPref("devtools.defaultColorUnit", "name");
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testdiv", inspector);
+
+  let fontSize = getRuleViewPropertyValue(view, "element", "font-size");
+  is(fontSize, "10px", "The rule view shows the right font-size");
+
+  info("Changing the node's style and waiting for the update");
+  const onUpdated = inspector.once("rule-view-refreshed");
+  await setContentPageElementAttribute(
+    "#testdiv",
+    "style",
+    "font-size: 3em; color: lightgoldenrodyellow; " +
+      "text-align: right; text-transform: uppercase"
+  );
+  await onUpdated;
+
+  const textAlign = getRuleViewPropertyValue(view, "element", "text-align");
+  is(textAlign, "right", "The rule view shows the new text align.");
+  const color = getRuleViewPropertyValue(view, "element", "color");
+  is(color, "lightgoldenrodyellow", "The rule view shows the new color.");
+  fontSize = getRuleViewPropertyValue(view, "element", "font-size");
+  is(fontSize, "3em", "The rule view shows the new font size.");
+  const textTransform = getRuleViewPropertyValue(
+    view,
+    "element",
+    "text-transform"
+  );
+  is(textTransform, "uppercase", "The rule view shows the new text transform.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-stylesheet-change.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-stylesheet-change.js
new file mode 100644
index 0000000000..079dde1d7d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-stylesheet-change.js
@@ -0,0 +1,105 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule view refreshes when a stylesheet is added or modified
+
+const TEST_URI = "<h1>Hello DevTools</h1>";
+
+add_task(async function () {
+  // Disable transition so changes made in styleeditor are instantly applied
+  await pushPref("devtools.styleeditor.transitions", false);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  info("Add a stylesheet with matching rule for the h1 node");
+  let onUpdated = inspector.once("rule-view-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const addedStylesheet = content.document.createElement("style");
+    addedStylesheet.textContent = "h1 { background: tomato }";
+    content.document.head.append(addedStylesheet);
+  });
+  await onUpdated;
+  ok(true, "Rules view was refreshed when adding a stylesheet");
+  checkRulesViewSelectors(view, ["element", "h1"]);
+  is(
+    getRuleViewPropertyValue(view, "h1", "background"),
+    "tomato",
+    "Expected value is displayed for the background property"
+  );
+
+  info("Modify the stylesheet added previously");
+  onUpdated = inspector.once("rule-view-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const addedStylesheet = content.document.querySelector("style");
+    addedStylesheet.textContent = "body h1 { background: gold; color: navy; }";
+  });
+  await onUpdated;
+  ok(true, "Rules view was refreshed when updating the stylesheet");
+  checkRulesViewSelectors(view, ["element", "body h1"]);
+  is(
+    getRuleViewPropertyValue(view, "body h1", "background"),
+    "gold",
+    "Expected value is displayed for the background property"
+  );
+  is(
+    getRuleViewPropertyValue(view, "body h1", "color"),
+    "navy",
+    "Expected value is displayed for the color property"
+  );
+
+  info("Add Stylesheet from StyleEditor");
+  const styleEditor = await inspector.toolbox.selectTool("styleeditor");
+  const onEditorAdded = styleEditor.UI.once("editor-added");
+  // create a new style sheet
+  styleEditor.panelWindow.document
+    .querySelector(".style-editor-newButton")
+    .click();
+
+  const editor = await onEditorAdded;
+  await editor.getSourceEditor();
+
+  if (!editor.sourceEditor.hasFocus()) {
+    info("Waiting for stylesheet editor to gain focus");
+    await editor.sourceEditor.once("focus");
+  }
+  ok(editor.sourceEditor.hasFocus(), "new editor has focus");
+
+  const stylesheetText = `:is(h1) { font-size: 36px; }`;
+  await new Promise(resolve => {
+    waitForFocus(function () {
+      for (const c of stylesheetText) {
+        EventUtils.synthesizeKey(c, {}, styleEditor.panelWindow);
+      }
+      resolve();
+    }, styleEditor.panelWindow);
+  });
+
+  info("Select inspector again");
+  await inspector.toolbox.selectTool("inspector");
+  await waitFor(() => getRuleSelectors(view).includes(":is(h1)"));
+  ok(true, "Rules view was refreshed when selecting the inspector");
+  checkRulesViewSelectors(view, ["element", "body h1", ":is(h1)"]);
+  is(
+    getRuleViewPropertyValue(view, ":is(h1)", "font-size"),
+    "36px",
+    "Expected value is displayed for the font-size property"
+  );
+});
+
+function checkRulesViewSelectors(view, expectedSelectors) {
+  Assert.deepEqual(
+    getRuleSelectors(view),
+    expectedSelectors,
+    "Expected selectors are displayed"
+  );
+}
+
+function getRuleSelectors(view) {
+  return Array.from(
+    view.styleDocument.querySelectorAll(".ruleview-selectors-container")
+  ).map(el => el.textContent);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_registered-custom-properties.js b/devtools/client/inspector/rules/test/browser_rules_registered-custom-properties.js
new file mode 100644
index 0000000000..106ad6d412
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_registered-custom-properties.js
@@ -0,0 +1,490 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that registed custom properties (@property/Css.registerProperty) are displayed
+// in a dedicated section and that they are properly reflected in the `var()` popup.
+
+const CSS_NO_INHERIT_INITIAL_VALUE = "tomato";
+const CSS_INHERIT_INITIAL_VALUE = "gold";
+const CSS_NOT_DEFINED_INITIAL_VALUE = "purple";
+const JS_NO_INHERIT_INITIAL_VALUE = "42px";
+
+const CSS_NO_INHERIT_MAIN_VALUE = "#0000FF";
+const CSS_INHERIT_MAIN_VALUE = "#FF0000";
+const JS_NO_INHERIT_MAIN_VALUE = "100%";
+const JS_INHERIT_MAIN_VALUE = "50vw";
+
+const TEST_URI = `https://example.org/document-builder.sjs?html=${encodeURIComponent(`
+ <script>
+    CSS.registerProperty({
+      name: "--js-no-inherit",
+      syntax: "<length>",
+      inherits: false,
+      initialValue: "${JS_NO_INHERIT_INITIAL_VALUE}",
+    });
+    CSS.registerProperty({
+      name: "--js-inherit",
+      syntax: "*",
+      inherits: true,
+    });
+  </script>
+  <style>
+    @property --css-no-inherit {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: ${CSS_NO_INHERIT_INITIAL_VALUE};
+    }
+
+    @property --css-inherit {
+      syntax: "<color>";
+      inherits: true;
+      initial-value: ${CSS_INHERIT_INITIAL_VALUE};
+    }
+
+    @property --css-not-defined {
+      syntax: "<color>";
+      inherits: true;
+      initial-value: ${CSS_NOT_DEFINED_INITIAL_VALUE};
+    }
+
+    main {
+      --js-no-inherit: ${JS_NO_INHERIT_MAIN_VALUE};
+      --js-inherit: ${JS_INHERIT_MAIN_VALUE};
+      --css-no-inherit: ${CSS_NO_INHERIT_MAIN_VALUE};
+      --css-inherit: ${CSS_INHERIT_MAIN_VALUE};
+    }
+
+    h1 {
+      background-color: var(--css-no-inherit);
+      color: var(--css-inherit);
+      border-color: var(--css-not-defined);
+      height: var(--js-no-inherit);
+      width: var(--js-inherit);
+      outline: 10px solid var(--constructed, green);
+      text-decoration-color: var(--js-not-defined, blue);
+      caret-color: var(--css-dynamic-registered, turquoise);
+    }
+  </style>
+  <main>
+    <h1>Hello world</h1>
+    <iframe src="https://example.com/document-builder.sjs?html=iframe"></iframe>
+  </main>
+`)}`;
+
+add_task(async function () {
+  await pushPref("layout.css.properties-and-values.enabled", true);
+  const tab = await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  const doc = view.styleDocument;
+  await selectNode("h1", inspector);
+
+  info("Check the content of the @property section");
+  is(
+    doc.querySelector(".ruleview-expandable-header").textContent,
+    "@property",
+    "The @property section header is displayed"
+  );
+  const registeredPropertiesContainer = doc.getElementById(
+    "registered-properties-container"
+  );
+  ok(!!registeredPropertiesContainer, "The @property container is displayed");
+
+  const expectedProperties = [
+    {
+      header: `--css-inherit {`,
+      propertyDefinition: [
+        `  syntax: "<color>";`,
+        `  inherits: true;`,
+        `  initial-value: ${CSS_INHERIT_INITIAL_VALUE};`,
+      ],
+    },
+    {
+      header: `--css-no-inherit {`,
+      propertyDefinition: [
+        `  syntax: "<color>";`,
+        `  inherits: false;`,
+        `  initial-value: ${CSS_NO_INHERIT_INITIAL_VALUE};`,
+      ],
+    },
+    {
+      header: `--css-not-defined {`,
+      propertyDefinition: [
+        `  syntax: "<color>";`,
+        `  inherits: true;`,
+        `  initial-value: ${CSS_NOT_DEFINED_INITIAL_VALUE};`,
+      ],
+    },
+    {
+      header: `--js-inherit {`,
+      propertyDefinition: [
+        `  name: "--js-inherit",`,
+        `  syntax: "*",`,
+        `  inherits: true,`,
+      ],
+    },
+    {
+      header: `--js-no-inherit {`,
+      propertyDefinition: [
+        `  name: "--js-no-inherit",`,
+        `  syntax: "<length>",`,
+        `  inherits: false,`,
+        `  initialValue: "${JS_NO_INHERIT_INITIAL_VALUE}",`,
+      ],
+    },
+  ];
+
+  checkRegisteredProperties(view, expectedProperties);
+
+  info("Check that var() tooltips handle registered properties");
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "background-color",
+    // The variable value is the initial value since the variable does not inherit
+    `--css-no-inherit = ${CSS_NO_INHERIT_INITIAL_VALUE}`
+  );
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "color",
+    // The variable value is the value set in the main selector, since the variable does inherit
+    `--css-inherit = ${CSS_INHERIT_MAIN_VALUE}`
+  );
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "border-color",
+    // The variable value is the initial value since the variable is not set
+    `--css-not-defined = ${CSS_NOT_DEFINED_INITIAL_VALUE}`
+  );
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "height",
+    // The variable value is the initial value since the variable does not inherit
+    `--js-no-inherit = ${JS_NO_INHERIT_INITIAL_VALUE}`
+  );
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "width",
+    // The variable value is the value set in the main selector, since the variable does inherit
+    `--js-inherit = ${JS_INHERIT_MAIN_VALUE}`
+  );
+
+  info(
+    "Check that registered properties from new regular stylesheets are displayed"
+  );
+  let onRuleViewRefreshed = view.once("ruleview-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const s = content.wrappedJSObject.document.createElement("style");
+    s.id = "added";
+    s.textContent = `
+      @property --css-dynamic-registered {
+        syntax: "<color>";
+        inherits: false;
+        initial-value: orchid;
+      }
+    `;
+
+    content.wrappedJSObject.document.head.append(s);
+  });
+  info("Wait for the new registered property to be displayed");
+  await onRuleViewRefreshed;
+
+  checkRegisteredProperties(
+    view,
+    [
+      ...expectedProperties,
+      {
+        header: `--css-dynamic-registered {`,
+        propertyDefinition: [
+          `  syntax: "<color>";`,
+          `  inherits: false;`,
+          `  initial-value: orchid;`,
+        ],
+      },
+    ].sort((a, b) => (a.header < b.header ? -1 : 1))
+  );
+
+  // The var() tooltip should show the initial value of the new property
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "caret-color",
+    `--css-dynamic-registered = orchid`
+  );
+
+  info("Check that updating property does update rules view");
+  onRuleViewRefreshed = view.once("ruleview-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.wrappedJSObject.document.querySelector(
+      "style#added"
+    ).textContent = `
+      @property --css-dynamic-registered {
+        syntax: "<color>";
+        inherits: true;
+        initial-value: purple;
+      }
+    `;
+  });
+  info("Wait for the rules view to be updated");
+  await onRuleViewRefreshed;
+
+  checkRegisteredProperties(
+    view,
+    [
+      ...expectedProperties,
+      {
+        header: `--css-dynamic-registered {`,
+        propertyDefinition: [
+          `  syntax: "<color>";`,
+          `  inherits: true;`,
+          `  initial-value: purple;`,
+        ],
+      },
+    ].sort((a, b) => (a.header < b.header ? -1 : 1))
+  );
+
+  // The var() tooltip should show the new initial value of the updated property
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "caret-color",
+    `--css-dynamic-registered = purple`
+  );
+
+  info("Check that removing property does update rules view");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.wrappedJSObject.document.querySelector("style#added").remove();
+  });
+  info("Wait for registered property to be removed");
+  await waitFor(
+    () =>
+      view.styleDocument.querySelector(
+        `[data-name="--css-dynamic-registered"]`
+      ) == null
+  );
+  ok(true, `--css-dynamic-registered was removed`);
+  checkRegisteredProperties(view, expectedProperties);
+
+  // The var() tooltip should indicate that the property isn't set anymore
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "caret-color",
+    `--css-dynamic-registered is not set`
+  );
+
+  info(
+    "Check that registered properties from new constructed stylesheets are displayed"
+  );
+  is(
+    getRuleViewProperty(view, "h1", "outline").valueSpan.querySelector(
+      ".ruleview-unmatched-variable"
+    ).textContent,
+    "--constructed",
+    "The --constructed variable is set as unmatched since it's not defined nor registered"
+  );
+
+  onRuleViewRefreshed = view.once("ruleview-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const s = new content.wrappedJSObject.CSSStyleSheet();
+    s.replaceSync(`
+      @property --constructed {
+        syntax: "<color>";
+        inherits: true;
+        initial-value: aqua;
+      }
+    `);
+    content.wrappedJSObject.document.adoptedStyleSheets.push(s);
+  });
+  await onRuleViewRefreshed;
+
+  info("Wait for the new registered property to be displayed");
+  checkRegisteredProperties(
+    view,
+    [
+      ...expectedProperties,
+      {
+        header: `--constructed {`,
+        propertyDefinition: [
+          `  syntax: "<color>";`,
+          `  inherits: true;`,
+          `  initial-value: aqua;`,
+        ],
+      },
+    ].sort((a, b) => (a.header < b.header ? -1 : 1))
+  );
+
+  // The `var()` tooltip should show the initial-value of the new property
+  await checkVariableTooltipForProperty(
+    view,
+    "h1",
+    "outline",
+    `--constructed = aqua`
+  );
+
+  info(
+    "Check that selecting a node in another document with no registered property hides the container"
+  );
+  await selectNodeInFrames(["iframe", "body"], inspector);
+  is(
+    getRegisteredPropertiesContainer(view),
+    null,
+    "registered properties container isn't displayed"
+  );
+
+  info(
+    "Check that registering a property will cause the @property container to be displayed"
+  );
+  const iframeBrowsingContext = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    () => content.document.querySelector("iframe").browsingContext
+  );
+
+  await SpecialPowers.spawn(iframeBrowsingContext, [], () => {
+    content.CSS.registerProperty({
+      name: "--js-iframe",
+      syntax: "<color>",
+      inherits: true,
+      initialValue: "turquoise",
+    });
+    content.CSS.registerProperty({
+      name: "--js-inherit",
+      syntax: "*",
+      inherits: true,
+    });
+  });
+
+  await waitFor(() => getRegisteredPropertiesContainer(view));
+  ok(true, "@property container is diplayed when registering a property");
+
+  // Wait for the 2 properties to be added.
+  await waitFor(() => getRegisteredPropertiesElements(view).length == 2);
+  checkRegisteredProperties(view, [
+    {
+      header: `--js-iframe {`,
+      propertyDefinition: [
+        `  name: "--js-iframe",`,
+        `  syntax: "<color>",`,
+        `  inherits: true,`,
+        `  initialValue: turquoise,`,
+      ],
+    },
+    {
+      header: `--js-inherit {`,
+      propertyDefinition: [
+        `  name: "--js-inherit",`,
+        `  syntax: "*",`,
+        `  inherits: true,`,
+      ],
+    },
+  ]);
+
+  info("Select a node from the top-level document");
+  await selectNode("main", inspector);
+
+  checkRegisteredProperties(
+    view,
+    [
+      ...expectedProperties,
+      {
+        header: `--constructed {`,
+        propertyDefinition: [
+          `  syntax: "<color>";`,
+          `  inherits: true;`,
+          `  initial-value: aqua;`,
+        ],
+      },
+    ].sort((a, b) => (a.header < b.header ? -1 : 1))
+  );
+});
+
+function getRegisteredPropertiesContainer(view) {
+  return view.styleDocument.querySelector("#registered-properties-container");
+}
+
+function getRegisteredPropertiesElements(view) {
+  const container = getRegisteredPropertiesContainer(view);
+  if (!container) {
+    return [];
+  }
+
+  return Array.from(
+    container.querySelectorAll(
+      "#registered-properties-container .ruleview-rule"
+    )
+  );
+}
+
+function checkRegisteredProperties(view, expectedProperties) {
+  const registeredPropertiesEl = getRegisteredPropertiesElements(view);
+
+  is(
+    registeredPropertiesEl.length,
+    expectedProperties.length,
+    "There are the expected number of registered properties"
+  );
+  for (let i = 0; i < expectedProperties.length; i++) {
+    info(`Checking registered property #${i}`);
+    const { header, propertyDefinition } = expectedProperties[i];
+    const registeredPropertyEl = registeredPropertiesEl[i];
+
+    is(
+      registeredPropertyEl.querySelector("header").textContent,
+      header,
+      `Registered property #${i} has the expected header text`
+    );
+    const propertyDefinitionEl = Array.from(
+      registeredPropertyEl.querySelectorAll("div[role=listitem]")
+    );
+    is(
+      propertyDefinitionEl.length,
+      propertyDefinition.length,
+      `Registered property #${i} have the expected number of items in its definition`
+    );
+    for (let j = 0; j < expectedProperties.length; j++) {
+      is(
+        propertyDefinitionEl[j]?.textContent,
+        propertyDefinition[j],
+        `Registered property #${i} have the expected definition at index #${j}`
+      );
+    }
+  }
+}
+
+/**
+ * Check the content of a `var()` tooltip on a given rule and property name.
+ *
+ * @param {CssRuleView} view
+ * @param {String} ruleSelector
+ * @param {String} propertyName
+ * @param {String} expectedTooltipContent
+ */
+async function checkVariableTooltipForProperty(
+  view,
+  ruleSelector,
+  propertyName,
+  expectedTooltipContent
+) {
+  // retrieve tooltip target
+  const variableEl = await waitFor(() =>
+    getRuleViewProperty(
+      view,
+      ruleSelector,
+      propertyName
+    ).valueSpan.querySelector(".ruleview-variable,.ruleview-unmatched-variable")
+  );
+
+  const previewTooltip = await assertShowPreviewTooltip(view, variableEl);
+  is(
+    previewTooltip.panel.textContent,
+    expectedTooltipContent,
+    `CSS variable preview tooltip shows the expected value for ${propertyName} in ${ruleSelector}`
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, variableEl);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js
new file mode 100644
index 0000000000..8a4d78e843
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js
@@ -0,0 +1,180 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter and clear button works properly in
+// the computed list.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for property names",
+    search: "margin",
+    isExpanderOpen: false,
+    isFilterOpen: false,
+    isMarginHighlighted: true,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: true,
+    isMarginBottomHighlighted: true,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for property values",
+    search: "0px",
+    isExpanderOpen: false,
+    isFilterOpen: false,
+    isMarginHighlighted: true,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: true,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for property line input",
+    search: "margin-top:4px",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for parsed name",
+    search: "margin-top:",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for parsed property value",
+    search: ":4px",
+    isExpanderOpen: false,
+    isFilterOpen: false,
+    isMarginHighlighted: true,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: true,
+    isMarginLeftHighlighted: false,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  is(
+    !!textPropEditor.expander.getAttribute("open"),
+    data.isExpanderOpen,
+    "Got correct expander state."
+  );
+  is(
+    computed.hasAttribute("filter-open"),
+    data.isFilterOpen,
+    "Got correct expanded state for margin computed list."
+  );
+  is(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    data.isMarginHighlighted,
+    "Got correct highlight for margin text property."
+  );
+
+  is(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    data.isMarginTopHighlighted,
+    "Got correct highlight for margin-top computed property."
+  );
+  is(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    data.isMarginRightHighlighted,
+    "Got correct highlight for margin-right computed property."
+  );
+  is(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    data.isMarginBottomHighlighted,
+    "Got correct highlight for margin-bottom computed property."
+  );
+  is(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    data.isMarginLeftHighlighted,
+    "Got correct highlight for margin-left computed property."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !view.styleDocument.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+
+  ok(!textPropEditor.expander.getAttribute("open"), "Expander is closed.");
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_02.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_02.js
new file mode 100644
index 0000000000..98c48c9f79
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_02.js
@@ -0,0 +1,118 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly in the computed list
+// when modifying the existing search filter value
+
+const SEARCH = "margin-";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testRemoveTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = getTextProperty(view, 1, { margin: "4px 0px" }).editor;
+  const computed = ruleEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    !ruleEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is not highlighted."
+  );
+  ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
+
+  ok(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
+
+async function testRemoveTextInFilter(inspector, view) {
+  info('Press backspace and set filter text to "margin"');
+
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
+  await inspector.once("ruleview-filtered");
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = getTextProperty(view, 1, { margin: "4px 0px" }).editor;
+  const computed = ruleEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
+  ok(
+    ruleEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is correctly highlighted."
+  );
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+
+  ok(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_03.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_03.js
new file mode 100644
index 0000000000..5c2a48a7fb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_03.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly in the computed list
+// for color values.
+
+// The color format here is chosen to match the default returned by
+// CssColor.toString.
+const SEARCH = "background-color: rgb(243, 243, 243)";
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      background: rgb(243, 243, 243) none repeat scroll 0% 0%;
+    }
+  </style>
+  <div class="testclass">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = rule.textProps[0].editor;
+  const computed = ruleEditor.computed;
+
+  is(rule.selectorText, ".testclass", "Second rule is .testclass.");
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    !ruleEditor.container.classList.contains("ruleview-highlight"),
+    "background property is not highlighted."
+  );
+  ok(computed.hasAttribute("filter-open"), "background computed list is open.");
+  ok(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    "background-color computed property is highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_04.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_04.js
new file mode 100644
index 0000000000..6b2344b6a6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_04.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly in the computed list
+// for newly modified property values.
+
+const SEARCH = "0px";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      margin: 4px;
+      top: 0px;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testModifyPropertyValueFilter(inspector, view);
+});
+
+async function testModifyPropertyValueFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const propEditor = getTextProperty(view, 1, { margin: "4px" }).editor;
+  const computed = propEditor.computed;
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+
+  info("Check that the correct rules are visible");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    !propEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is not highlighted."
+  );
+  ok(
+    rule.textProps[1].editor.container.classList.contains("ruleview-highlight"),
+    "top text property is correctly highlighted."
+  );
+
+  const onBlur = once(editor.input, "blur");
+  const onModification = view.once("ruleview-changed");
+  EventUtils.sendString("4px 0px", view.styleWindow);
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onBlur;
+  await onModification;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is correctly highlighted."
+  );
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(
+    !computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is not highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    !computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is not highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_expander.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_expander.js
new file mode 100644
index 0000000000..5eeff9b539
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_expander.js
@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the expanded computed list for a property remains open after
+// clearing the rule view search filter.
+
+const SEARCH = "0px";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testOpenExpanderAndAddTextInFilter(inspector, view);
+  await testClearSearchFilter(inspector, view);
+});
+
+async function testOpenExpanderAndAddTextInFilter(inspector, view) {
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = getTextProperty(view, 1, { margin: "4px 0px" }).editor;
+  const computed = ruleEditor.computed;
+
+  info("Opening the computed list of margin property");
+  ruleEditor.expander.click();
+
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    ruleEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is correctly highlighted."
+  );
+  ok(
+    !computed.hasAttribute("filter-open"),
+    "margin computed list does not contain filter-open class."
+  );
+  ok(
+    computed.hasAttribute("user-open"),
+    "margin computed list contains user-open attribute."
+  );
+
+  ok(
+    !computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is not highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    !computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is not highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
+
+async function testClearSearchFilter(inspector, view) {
+  info("Clearing the search filter");
+
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+  const onRuleViewFiltered = inspector.once("ruleview-filtered");
+
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, view.styleWindow);
+
+  await onRuleViewFiltered;
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !view.styleDocument.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1).rule.textProps[0].editor;
+  const computed = ruleEditor.computed;
+
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    !computed.hasAttribute("filter-open"),
+    "margin computed list does not contain filter-open class."
+  );
+  ok(
+    computed.hasAttribute("user-open"),
+    "margin computed list contains user-open attribute."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-media-queries-layers.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-media-queries-layers.js
new file mode 100644
index 0000000000..ced27d5841
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-media-queries-layers.js
@@ -0,0 +1,195 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for @media / @layer rules.
+// The document uses selectors so we can identify rule more easily
+const TEST_URI = `
+  <!DOCTYPE html>
+    <style type='text/css'>
+      h1, simple {
+        color: tomato;
+      }
+      @layer {
+        h1, anonymous {
+          color: tomato;
+        }
+      }
+      @layer myLayer {
+        h1, named {
+          color: tomato;
+        }
+      }
+      @media screen {
+        h1, skreen {
+          color: tomato;
+        }
+      }
+      @layer {
+        @layer myLayer {
+          @media (min-width: 1px) {
+            @media (min-height: 1px) {
+              h1, nested {
+                color: tomato;
+              }
+            }
+          }
+        }
+      }
+    </style>
+    <h1>Hello Mochi</h1>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info(`Check initial state and rules order`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, skreen", highlighted: [] },
+      { selector: "h1, simple", highlighted: [] },
+      { selector: "h1, nested", highlighted: [] },
+      { selector: "h1, named", highlighted: [] },
+      { selector: "h1, anonymous", highlighted: [] },
+    ],
+  });
+
+  info(`Check filtering on "layer"`);
+  await setSearchFilter(view, `layer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer", "@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+      { selector: "h1, anonymous", highlighted: ["@layer"] },
+    ],
+  });
+
+  info(`Check filtering on "@layer"`);
+  await setNewSearchFilter(view, `@layer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer", "@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+      { selector: "h1, anonymous", highlighted: ["@layer"] },
+    ],
+  });
+
+  info("Check filtering on exact `@layer`");
+  await setNewSearchFilter(view, "`@layer`");
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer"] },
+      { selector: "h1, anonymous", highlighted: ["@layer"] },
+    ],
+  });
+
+  info(`Check filtering on layer name "myLayer"`);
+  await setNewSearchFilter(view, `myLayer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+    ],
+  });
+
+  info(`Check filtering on "@layer myLayer"`);
+  await setNewSearchFilter(view, `@layer myLayer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+    ],
+  });
+
+  info(`Check filtering on "media"`);
+  await setNewSearchFilter(view, `media`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, skreen", highlighted: ["@media screen"] },
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-width: 1px)", "@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info(`Check filtering on "@media"`);
+  await setNewSearchFilter(view, `@media`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, skreen", highlighted: ["@media screen"] },
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-width: 1px)", "@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info(`Check filtering on media query content "1px"`);
+  await setNewSearchFilter(view, `1px`);
+  await checkRuleView(view, {
+    rules: [
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-width: 1px)", "@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info(`Check filtering on media query content "height"`);
+  await setNewSearchFilter(view, `height`);
+  await checkRuleView(view, {
+    rules: [
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info("Check filtering on exact `@media`");
+  await setNewSearchFilter(view, "`@media`");
+  await checkRuleView(view, {
+    rules: [],
+  });
+});
+
+async function checkRuleView(view, { rules }) {
+  info("Check that the correct rules are visible");
+
+  const rulesInView = Array.from(view.element.children);
+  // The `element` "rule" is never filtered, so remove it from the list of element we check.
+  rulesInView.shift();
+
+  is(rulesInView.length, rules.length, "All expected rules are displayed");
+
+  for (let i = 0; i < rulesInView.length; i++) {
+    const rule = rulesInView[i];
+    const selector = rule.querySelector(
+      ".ruleview-selectors-container"
+    ).innerText;
+    is(selector, rules[i]?.selector, `Expected selector at index ${i}`);
+
+    const highlightedElements = Array.from(
+      rule.querySelectorAll(".ruleview-highlight")
+    ).map(el => el.innerText);
+    Assert.deepEqual(
+      highlightedElements,
+      rules[i]?.highlighted,
+      "The expected ancestor rules information element are highlighted"
+    );
+  }
+}
+
+async function setNewSearchFilter(view, newSearchText) {
+  const win = view.styleWindow;
+  const searchClearButton = view.searchClearButton;
+
+  const onRuleViewCleared = view.inspector.once("ruleview-filtered");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await onRuleViewCleared;
+
+  await setSearchFilter(view, newSearchText);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-overridden-property.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-overridden-property.js
new file mode 100644
index 0000000000..77d2be0545
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-overridden-property.js
@@ -0,0 +1,119 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view overriden search filter works properly for
+// overridden properties.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    width: 100%;
+    color: tomato;
+  }
+  h1 {
+    width: 50%;
+    color: gold;
+  }
+  </style>
+  <h1 id='testid' class='testclass'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testFilterOverriddenProperty(inspector, view);
+});
+
+async function testFilterOverriddenProperty(inspector, ruleView) {
+  info("Check that the correct rules are visible");
+  is(ruleView.element.children.length, 3, "Should have 3 rules.");
+
+  let rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  let textPropEditor = getTextProperty(ruleView, 1, { width: "100%" }).editor;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    !textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is not overridden."
+  );
+  ok(
+    textPropEditor.filterProperty.hidden,
+    "Overridden search button is hidden."
+  );
+
+  rule = getRuleViewRuleEditor(ruleView, 2).rule;
+  textPropEditor = getTextProperty(ruleView, 2, { width: "50%" }).editor;
+  is(rule.selectorText, "h1", "Third rule is h1.");
+  ok(
+    textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is overridden."
+  );
+  ok(
+    !textPropEditor.filterProperty.hidden,
+    "Overridden search button is not hidden."
+  );
+
+  const searchField = ruleView.searchField;
+  const onRuleViewFiltered = inspector.once("ruleview-filtered");
+
+  info("Click the overridden search");
+  textPropEditor.filterProperty.click();
+  await onRuleViewFiltered;
+
+  info("Check that the overridden search is applied");
+  is(searchField.value, "`width`", "The search field value is width.");
+  ok(searchField.matches(":focus"), "The search field is focused");
+
+  rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  textPropEditor = getTextProperty(ruleView, 1, { width: "100%" }).editor;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    "width property is correctly highlighted."
+  );
+
+  rule = getRuleViewRuleEditor(ruleView, 2).rule;
+  textPropEditor = getTextProperty(ruleView, 2, { width: "50%" }).editor;
+  is(rule.selectorText, "h1", "Third rule is h1.");
+  ok(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    "width property is correctly highlighted."
+  );
+  ok(
+    textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is overridden."
+  );
+  ok(
+    !textPropEditor.filterProperty.hidden,
+    "Overridden search button is not hidden."
+  );
+
+  info("Check that overridden search button can be used with the keyboard");
+  const goldColorTextPropertyEditor = getTextProperty(ruleView, 2, {
+    color: "gold",
+  }).editor;
+
+  info("First, focus the gold value span");
+  goldColorTextPropertyEditor.valueSpan.focus();
+
+  info("Check that hiting Tab moves the focus to the override search button");
+  EventUtils.synthesizeKey("KEY_Tab", {}, ruleView.styleWindow);
+  is(
+    ruleView.styleDocument.activeElement,
+    goldColorTextPropertyEditor.filterProperty,
+    "override search button is the active element"
+  );
+  ok(
+    goldColorTextPropertyEditor.filterProperty.matches(
+      ".ruleview-overridden-rule-filter:focus"
+    ),
+    "override search button has expected class and is focused"
+  );
+
+  info("Press enter to active the button");
+  EventUtils.synthesizeKey("KEY_Enter", {}, ruleView.styleWindow);
+  is(searchField.value, "`color`", "The search field value is color.");
+  ok(searchField.matches(":focus"), "The search field is focused");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
new file mode 100644
index 0000000000..a0a3ed32ff
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter and clear button works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid, h1 {
+      background-color: #00F !important;
+    }
+    .testclass {
+      width: 100%;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc: "Tests that the search filter works properly for property names",
+    search: "color",
+  },
+  {
+    desc: "Tests that the search filter works properly for property values",
+    search: "00F",
+  },
+  {
+    desc: "Tests that the search filter works properly for property line input",
+    search: "background-color:#00F",
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for parsed property " +
+      "names",
+    search: "background:",
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for parsed property " +
+      "values",
+    search: ":00F",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(rule.selectorText, "#testid, h1", "Second rule is #testid, h1.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared.");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_02.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_02.js
new file mode 100644
index 0000000000..173da66296
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_02.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for keyframe rule
+// selectors.
+
+const SEARCH = "20%";
+const TEST_URI = URL_ROOT + "doc_keyframeanimation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#boxy", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 2, 0);
+
+  is(ruleEditor.rule.domRule.keyText, "20%", "Second rule is 20%.");
+  ok(
+    ruleEditor.selectorText.classList.contains("ruleview-highlight"),
+    "20% selector is highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_03.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_03.js
new file mode 100644
index 0000000000..18335c121c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_03.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for inline styles.
+
+const SEARCH = "color";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" style="background-color:aliceblue">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 1, "Should have 1 rule.");
+
+  const rule = getRuleViewRuleEditor(view, 0).rule;
+
+  is(rule.selectorText, "element", "First rule is inline element.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_04.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_04.js
new file mode 100644
index 0000000000..fc0eee9f19
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_04.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly when modifying the
+// existing search filter value.
+
+const SEARCH = "00F";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: #00F;
+    }
+    .testclass {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testRemoveTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
+
+async function testRemoveTextInFilter(inspector, view) {
+  info('Press backspace and set filter text to "00"');
+
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
+  await inspector.once("ruleview-filtered");
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  let rule = getRuleViewRuleEditor(view, 1).rule;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+
+  rule = getRuleViewRuleEditor(view, 2).rule;
+  is(rule.selectorText, ".testclass", "Second rule is .testclass.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "width text property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_05.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_05.js
new file mode 100644
index 0000000000..8138528ee4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_05.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for stylesheet source.
+
+const SEARCH = "doc_urls_clickable.css";
+const TEST_URI = URL_ROOT + "doc_urls_clickable.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode(".relative1", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const source = rule.textProps[0].editor.ruleEditor.source;
+
+  is(rule.selectorText, ".relative1", "Second rule is .relative1.");
+  ok(
+    source.classList.contains("ruleview-highlight"),
+    "stylesheet source is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_06.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_06.js
new file mode 100644
index 0000000000..a73fb87ff9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_06.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter does not highlight the source with
+// input that could be parsed as a property line.
+
+const SEARCH = "doc_urls_clickable.css: url";
+const TEST_URI = URL_ROOT + "doc_urls_clickable.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode(".relative1", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 1, "Should have 1 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_07.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_07.js
new file mode 100644
index 0000000000..427523f4d3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_07.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for newly modified
+// property name.
+
+const SEARCH = "e";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      width: 100%;
+      height: 50%;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Enter the test value in the search filter");
+  await setSearchFilter(view, SEARCH);
+
+  info("Focus the width property name");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const propEditor = rule.textProps[0].editor;
+  await focusEditableField(view, propEditor.nameSpan);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    !propEditor.container.classList.contains("ruleview-highlight"),
+    "width text property is not highlighted."
+  );
+  ok(
+    rule.textProps[1].editor.container.classList.contains("ruleview-highlight"),
+    "height text property is correctly highlighted."
+  );
+
+  info("Change the width property to margin-left");
+  EventUtils.sendString("margin-left", view.styleWindow);
+
+  info("Submit the change");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "margin-left text property is correctly highlighted."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js
new file mode 100644
index 0000000000..b35afd7d10
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for newly modified
+// property value.
+
+const SEARCH = "100%";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      width: 100%;
+      height: 50%;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Enter the test value in the search filter");
+  await setSearchFilter(view, SEARCH);
+
+  info("Focus the height property value");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const propEditor = rule.textProps[1].editor;
+  await focusEditableField(view, propEditor.valueSpan);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "width text property is correctly highlighted."
+  );
+  ok(
+    !propEditor.container.classList.contains("ruleview-highlight"),
+    "height text property is not highlighted."
+  );
+
+  info("Change the height property value to 100%");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendString("100%", view.styleWindow);
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "height text property is correctly highlighted."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
new file mode 100644
index 0000000000..0d1c8c8a45
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for newly added
+// property.
+
+const SEARCH = "100%";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      width: 100%;
+      height: 50%;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Enter the test value in the search filter");
+  await setSearchFilter(view, SEARCH);
+
+  info("Start entering a new property in the rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const prop = getTextProperty(view, 1, { width: "100%" });
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    prop.editor.container.classList.contains("ruleview-highlight"),
+    "width text property is correctly highlighted."
+  );
+  ok(
+    !getTextProperty(view, 1, {
+      height: "50%",
+    }).editor.container.classList.contains("ruleview-highlight"),
+    "height text property is not highlighted."
+  );
+
+  info("Test creating a new property");
+
+  info("Entering margin-left in the property name editor");
+  // Changing the value doesn't cause a rule-view refresh, no need to wait for
+  // ruleview-changed here.
+  editor.input.value = "margin-left";
+
+  info("Pressing return to commit and focus the new value field");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onRuleViewChanged;
+
+  // Getting the new value editor after focus
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  const propEditor = ruleEditor.rule.textProps[2].editor;
+
+  info("Entering a value and bluring the field to expect a rule change");
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.value = "100%";
+  view.debounce.flush();
+  await onRuleViewChanged;
+
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  await onRuleViewChanged;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "margin-left text property is correctly highlighted."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js
new file mode 100644
index 0000000000..b3ee69c2b9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for rule selectors.
+
+const TEST_URI = `
+  <style type="text/css">
+    html, body, div {
+      background-color: #00F;
+    }
+    #testid {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the search filter works properly for a single rule " +
+      "selector",
+    search: "#test",
+    selectorText: "#testid",
+    index: 0,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for multiple rule " +
+      "selectors",
+    search: "body",
+    selectorText: "html, body, div",
+    index: 2,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  is(
+    ruleEditor.rule.selectorText,
+    data.selectorText,
+    "Second rule is " + data.selectorText + "."
+  );
+  ok(
+    ruleEditor.selectorText.children[data.index].classList.contains(
+      "ruleview-highlight"
+    ),
+    data.selectorText + " selector is highlighted."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared.");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
new file mode 100644
index 0000000000..881b5274ee
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test rule view search filter context menu works properly.
+
+const TEST_INPUT = "h1";
+const TEST_URI = "<h1>test filter context menu</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  const searchField = view.searchField;
+
+  info("Opening context menu");
+
+  emptyClipboard();
+
+  const onFocus = once(searchField, "focus");
+  searchField.focus();
+  await onFocus;
+
+  let onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  let searchContextMenu = toolbox.getTextBoxContextMenu();
+  ok(
+    searchContextMenu,
+    "The search filter context menu is loaded in the rule view"
+  );
+
+  let cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  let cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  let cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  let cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  let cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  let cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
+  is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
+  is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
+
+  if (isWindows()) {
+    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
+    is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
+  }
+
+  info("Closing context menu");
+  let onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+
+  info("Copy text in search field using the context menu");
+  searchField.setUserInput(TEST_INPUT);
+  searchField.select();
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  await waitForClipboardPromise(() => cmdCopy.click(), TEST_INPUT);
+
+  onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+
+  info("Reopen context menu and check command properties");
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+
+  const onContextMenuHidden = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuHidden;
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_escape-keypress.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_escape-keypress.js
new file mode 100644
index 0000000000..600aefe536
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_escape-keypress.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter escape keypress will clear the search
+// field.
+
+const SEARCH = "00F";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: #00F;
+    }
+    .testclass {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testEscapeKeypress(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = getTextProperty(view, 1, { "background-color": "#00F" });
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    prop.editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
+
+async function testEscapeKeypress(inspector, view) {
+  info("Pressing the escape key on search filter");
+
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const onRuleViewFiltered = inspector.once("ruleview-filtered");
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, win);
+  await onRuleViewFiltered;
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
new file mode 100644
index 0000000000..f9d245828e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
@@ -0,0 +1,255 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that properties can be selected and copied from the rule view
+
+const osString = Services.appinfo.OS;
+
+const TEST_URI = `
+  <style type="text/css">
+    html {
+      color: #000000;
+    }
+    span {
+      font-variant: small-caps; color: #000000;
+    }
+    .nomatches {
+      color: #ff0000;
+    }
+
+    html {
+      body {
+        container-type: inline-size;
+        @container (1px < width) {
+          #nested {
+            background: tomato;
+            color: gold;
+          }
+        }
+      }
+    }
+  </style>
+  <div id="first" style="margin: 10em;
+    font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+    <h1>Some header text</h1>
+    <p id="salutation" style="font-size: 12pt">hi.</p>
+    <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+    solely to provide some things to <span style="color: yellow">
+    highlight</span> and <span style="font-weight: bold">count</span>
+    style list-items in the box at right. If you are reading this,
+    you should go do something else instead. Maybe read a book. Or better
+    yet, write some test-cases for another bit of code.
+    <span style="font-style: italic">some text</span></p>
+    <p id="closing">more text</p>
+    <p>even more text</p>
+  </div>
+  <section id=nested>Nested</section>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+  await checkCopySelection(view);
+  await checkSelectAll(view);
+  await checkCopyEditorValue(view);
+
+  await selectNode("#nested", inspector);
+  await checkCopyNestedRule(view);
+});
+
+async function checkCopySelection(view) {
+  info("Testing selection copy");
+
+  const contentDoc = view.styleDocument;
+  const win = view.styleWindow;
+  const prop = contentDoc.querySelector(".ruleview-property");
+  const values = contentDoc.querySelectorAll(
+    ".ruleview-propertyvaluecontainer"
+  );
+
+  let range = contentDoc.createRange();
+  range.setStart(prop, 0);
+  range.setEnd(values[4], 2);
+  win.getSelection().addRange(range);
+  info("Checking that _Copy() returns the correct clipboard value");
+
+  const expectedPattern =
+    "  margin: 10em;[\\r\\n]+" +
+    "  font-size: 14pt;[\\r\\n]+" +
+    "  font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "  color: #AAA;[\\r\\n]+" +
+    "}[\\r\\n]+" +
+    "html {[\\r\\n]+" +
+    "  color: #000000;[\\r\\n]*";
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, prop);
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+
+  ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
+
+  try {
+    await waitForClipboardPromise(
+      () => menuitemCopy.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+
+  info("Check copying from keyboard");
+  win.getSelection().removeRange(range);
+  // Selecting the declaration `margin: 10em;`
+  range = contentDoc.createRange();
+  range.setStart(prop, 0);
+  range.setEnd(prop, 1);
+  win.getSelection().addRange(range);
+
+  // Dispatching the copy event from the checkbox to make sure we cover Bug 1680893.
+  const declarationCheckbox = contentDoc.querySelector(
+    "input[type=checkbox].ruleview-enableproperty"
+  );
+  const copyEvent = new win.Event("copy", { bubbles: true });
+  await waitForClipboardPromise(
+    () => declarationCheckbox.dispatchEvent(copyEvent),
+    () => checkClipboardData("^  margin: 10em;$")
+  );
+  win.getSelection().removeRange(range);
+}
+
+async function checkSelectAll(view) {
+  info("Testing select-all copy");
+
+  const contentDoc = view.styleDocument;
+  const prop = contentDoc.querySelector(".ruleview-property");
+
+  info(
+    "Checking that _SelectAll() then copy returns the correct " +
+      "clipboard value"
+  );
+  view.contextMenu._onSelectAll();
+  const expectedPattern =
+    "element {[\\r\\n]+" +
+    "  margin: 10em;[\\r\\n]+" +
+    "  font-size: 14pt;[\\r\\n]+" +
+    "  font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "  color: #AAA;[\\r\\n]+" +
+    "}[\\r\\n]+" +
+    "html {[\\r\\n]+" +
+    "  color: #000000;[\\r\\n]+" +
+    "}[\\r\\n]*";
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, prop);
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+
+  ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
+
+  try {
+    await waitForClipboardPromise(
+      () => menuitemCopy.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+}
+
+async function checkCopyEditorValue(view) {
+  info("Testing CSS property editor value copy");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+
+  info(
+    "Checking that copying a css property value editor returns the correct" +
+      " clipboard value"
+  );
+
+  const expectedPattern = "10em";
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, editor.input);
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+
+  ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
+
+  try {
+    await waitForClipboardPromise(
+      () => menuitemCopy.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+}
+
+async function checkCopyNestedRule(view) {
+  info("Select nested rule");
+  const doc = view.styleDocument;
+  const range = doc.createRange();
+  const nestedRule = doc.querySelector(".ruleview-rule:nth-of-type(2)");
+  range.selectNode(nestedRule);
+  const win = view.styleWindow;
+  win.getSelection().addRange(range);
+
+  const copyEvent = new win.Event("copy", { bubbles: true });
+  const expectedNested = `html {
+  body {
+    @container (1px < width) {
+      #nested {
+        background: tomato;
+        color: gold;
+      }
+    }
+  }
+}
+`;
+
+  await waitForClipboardPromise(
+    () => nestedRule.dispatchEvent(copyEvent),
+    expectedNested
+  );
+}
+
+function checkClipboardData(expectedPattern) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  const expectedRegExp = new RegExp(expectedPattern, "g");
+  return expectedRegExp.test(actual);
+}
+
+function failedClipboard(expectedPattern) {
+  // Format expected text for comparison
+  const terminator = osString == "WINNT" ? "\r\n" : "\n";
+  expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator);
+  expectedPattern = expectedPattern.replace(/\\\(/g, "(");
+  expectedPattern = expectedPattern.replace(/\\\)/g, ")");
+
+  let actual = SpecialPowers.getClipboardData("text/plain");
+
+  // Trim the right hand side of our strings. This is because expectedPattern
+  // accounts for windows sometimes adding a newline to our copied data.
+  expectedPattern = expectedPattern.trimRight();
+  actual = actual.trimRight();
+
+  dump(
+    "TEST-UNEXPECTED-FAIL | Clipboard text does not match expected ... " +
+      "results (escaped for accurate comparison):\n"
+  );
+  info("Actual: " + escape(actual));
+  info("Expected: " + escape(expectedPattern));
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-iframe-picker.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-iframe-picker.js
new file mode 100644
index 0000000000..51d4a9b371
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-iframe-picker.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is hidden when selecting frames in the iframe picker
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+    }
+  </style>
+  <h1>Test the selector highlighter</h1>
+  <iframe src="data:text/html,<meta charset=utf8><style>h2 {background: yellow;}</style><h2>In iframe</h2>">
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, toolbox, view } = await openRuleView();
+
+  info("Clicking on a selector icon");
+  const { highlighter, isShown } = await clickSelectorIcon(view, "body");
+
+  ok(highlighter, "The selector highlighter instance was created");
+  ok(isShown, "The selector highlighter was shown");
+  is(
+    highlighter,
+    inspector.highlighters.getActiveHighlighter(
+      inspector.highlighters.TYPES.SELECTOR
+    ),
+    "The selector highlighter is the active highlighter"
+  );
+
+  // Open frame menu and wait till it's available on the screen.
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  const btn = toolbox.doc.getElementById("command-button-frames");
+  btn.click();
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  // Verify that the menu is populated.
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const frames = Array.from(menuList.querySelectorAll(".command"));
+
+  // Wait for the inspector to be reloaded
+  // (instead of only new-root) in order to wait for full
+  // async update of the inspector.
+  const onNewRoot = inspector.once("reloaded");
+  frames[1].click();
+  await onNewRoot;
+
+  await waitFor(
+    () =>
+      !inspector.highlighters.getActiveHighlighter(
+        inspector.highlighters.TYPES.SELECTOR
+      )
+  );
+  ok(true, "The selector highlighter gets hidden after selecting a frame");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js
new file mode 100644
index 0000000000..4a5e8bcd0c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js
@@ -0,0 +1,130 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter works for nested rules.
+
+const TEST_URI = `
+  <style>
+    main {
+      background: tomato;
+      & > h1 {
+        color: gold;
+
+        &#title {
+          text-decoration: underline;
+        }
+
+        &.title {
+          outline: 2px solid rebeccapurple;
+          & em {
+            color: salmon;
+
+            html & {
+              padding: 1em;
+            }
+          }
+        }
+      }
+
+      .title {
+        font-weight: 32px;
+      }
+    }
+  </style>
+  <main>
+    <h1 class="title" id="title">Selector Highlighter for <em>nested rules</em></h1>
+  </main>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  ok(!activeHighlighter, "No selector highlighter is active");
+
+  info(`Clicking on "& > h1" selector icon`);
+  let highlighterData = await clickSelectorIcon(view, "& > h1");
+  is(
+    highlighterData.nodeFront.nodeName.toLowerCase(),
+    "h1",
+    "<h1> is highlighted"
+  );
+
+  ok(
+    highlighterData.highlighter,
+    "The selector highlighter instance was created"
+  );
+  ok(highlighterData.isShown, "The selector highlighter was shown");
+
+  info(`Clicking on "&#title" selector icon`);
+  highlighterData = await clickSelectorIcon(view, "&#title");
+  is(
+    highlighterData.nodeFront.nodeName.toLowerCase(),
+    "h1",
+    "<h1> is highlighted"
+  );
+  ok(
+    highlighterData.highlighter,
+    "The selector highlighter instance was created"
+  );
+  ok(highlighterData.isShown, "The selector highlighter was shown");
+
+  info(`Clicking on "&.title" selector icon`);
+  highlighterData = await clickSelectorIcon(view, "&.title");
+  is(
+    highlighterData.nodeFront.nodeName.toLowerCase(),
+    "h1",
+    "<h1> is highlighted"
+  );
+  ok(
+    highlighterData.highlighter,
+    "The selector highlighter instance was created"
+  );
+  ok(highlighterData.isShown, "The selector highlighter was shown");
+
+  info(`Clicking on ".title" selector icon`);
+  highlighterData = await clickSelectorIcon(view, ".title");
+  is(
+    highlighterData.nodeFront.nodeName.toLowerCase(),
+    "h1",
+    "<h1> is highlighted"
+  );
+  ok(
+    highlighterData.highlighter,
+    "The selector highlighter instance was created"
+  );
+  ok(highlighterData.isShown, "The selector highlighter was shown");
+
+  await selectNode("h1 em", inspector);
+  info(`Clicking on "& em" selector icon`);
+  highlighterData = await clickSelectorIcon(view, "& em");
+  is(
+    highlighterData.nodeFront.nodeName.toLowerCase(),
+    "em",
+    "<em> is highlighted"
+  );
+  ok(
+    highlighterData.highlighter,
+    "The selector highlighter instance was created"
+  );
+  ok(highlighterData.isShown, "The selector highlighter was shown");
+
+  info(`Clicking on "html &" selector icon`);
+  highlighterData = await clickSelectorIcon(view, "html &");
+  is(
+    highlighterData.nodeFront.nodeName.toLowerCase(),
+    "em",
+    "<em> is highlighted"
+  );
+  ok(
+    highlighterData.highlighter,
+    "The selector highlighter instance was created"
+  );
+  ok(highlighterData.isShown, "The selector highlighter was shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-on-navigate.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-on-navigate.js
new file mode 100644
index 0000000000..3a014a68f7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-on-navigate.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is hidden on page navigation.
+
+const TEST_URI = `
+  <style type="text/css">
+    body, p, td {
+      background: red;
+    }
+  </style>
+  Test the selector highlighter
+`;
+
+const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Clicking on a selector icon");
+  const { highlighter, isShown } = await clickSelectorIcon(view, "body, p, td");
+
+  ok(highlighter, "The selector highlighter instance was created");
+  ok(isShown, "The selector highlighter was shown");
+
+  await navigateTo(TEST_URI_2);
+
+  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  ok(!activeHighlighter, "No selector highlighter is active");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_01.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_01.js
new file mode 100644
index 0000000000..f83a6f08ea
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_01.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is created when clicking on a selector
+// icon in the rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    body, p, td {
+      background: red;
+    }
+  </style>
+  Test the selector highlighter
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  ok(!activeHighlighter, "No selector highlighter is active");
+
+  info("Clicking on a selector icon");
+  let data = await clickSelectorIcon(view, "body, p, td");
+
+  ok(data.highlighter, "The selector highlighter instance was created");
+  ok(data.isShown, "The selector highlighter was shown");
+
+  info("Click on the same icon to disable highlighter");
+  data = await clickSelectorIcon(view, "body, p, td");
+  ok(!data.isShown, "The highlighter is not visible anymore");
+
+  info("Check that the selector highlighter can be toggled from the keyboard");
+  const ruleEl = getRuleViewRule(view, "body, p, td", 0);
+  const selectorContainerEl = ruleEl.querySelector(
+    ".ruleview-selectors-container"
+  );
+  const selectorHighlighterIcon = ruleEl.querySelector(
+    ".ruleview-selectorhighlighter"
+  );
+  is(
+    selectorHighlighterIcon.getAttribute("aria-pressed"),
+    "false",
+    "selector highlighter icon is not pressed by default"
+  );
+  selectorContainerEl.focus();
+  EventUtils.synthesizeKey("VK_TAB", {}, selectorContainerEl.ownerGlobal);
+  await waitFor(
+    () =>
+      selectorContainerEl.ownerDocument.activeElement ===
+      selectorHighlighterIcon
+  );
+  ok(true, "selector highlighter button can be focused");
+
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  EventUtils.synthesizeKey("VK_RETURN", {}, selectorContainerEl.ownerGlobal);
+  data = await onHighlighterShown;
+
+  ok(true, "The selector highlighter was shown from the keyboard");
+  ok(data.highlighter, "The selector highlighter instance was created");
+
+  await waitFor(
+    () => selectorHighlighterIcon.getAttribute("aria-pressed") === "true"
+  );
+  ok(true, "selector highlighter icon is pressed");
+
+  const onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  EventUtils.synthesizeKey("VK_RETURN", {}, selectorContainerEl.ownerGlobal);
+  await onHighlighterHidden;
+  ok(true, "The selector highlighter was hidden from the keyboard");
+  is(
+    selectorHighlighterIcon.getAttribute("aria-pressed"),
+    "false",
+    "selector highlighter icon is no longer pressed"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_02.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_02.js
new file mode 100644
index 0000000000..3d6ca9cbb4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_02.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is shown when clicking on a selector icon
+// in the rule-view
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+    }
+    p {
+      color: white;
+    }
+  </style>
+  <p>Testing the selector highlighter</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Clicking once on the body selector highlighter icon");
+  data = await clickSelectorIcon(view, "body");
+  ok(data.isShown, "The highlighter is shown");
+
+  info("Clicking once again on the body selector highlighter icon");
+  data = await clickSelectorIcon(view, "body");
+  ok(!data.isShown, "The highlighter is hidden");
+
+  info("Checking that the right NodeFront reference and options are passed");
+  await selectNode("p", inspector);
+  data = await clickSelectorIcon(view, "p");
+
+  is(
+    data.nodeFront.tagName,
+    "P",
+    "The right NodeFront is passed to the highlighter"
+  );
+  is(
+    data.options.selector,
+    "p",
+    "The right selector option is passed to the highlighter"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_03.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_03.js
new file mode 100644
index 0000000000..1c43e6adad
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_03.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter toggling mechanism works correctly.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {text-decoration: underline;}
+    .node-1 {color: red;}
+    .node-2 {color: green;}
+  </style>
+  <div class="node-1">Node 1</div>
+  <div class="node-2">Node 2</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Select .node-1 and click on the .node-1 selector icon");
+  await selectNode(".node-1", inspector);
+  data = await clickSelectorIcon(view, ".node-1");
+  ok(data.isShown, "The highlighter is shown");
+
+  info("With .node-1 still selected, click again on the .node-1 selector icon");
+  data = await clickSelectorIcon(view, ".node-1");
+  ok(!data.isShown, "The highlighter is now hidden");
+
+  info("With .node-1 still selected, click on the div selector icon");
+  data = await clickSelectorIcon(view, "div");
+  ok(data.isShown, "The highlighter is shown again");
+
+  info("With .node-1 still selected, click again on the .node-1 selector icon");
+  data = await clickSelectorIcon(view, ".node-1");
+  ok(
+    data.isShown,
+    "The highlighter is shown again since the clicked selector was different"
+  );
+
+  info("Selecting .node-2");
+  await selectNode(".node-2", inspector);
+  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  ok(activeHighlighter, "The highlighter is still shown after selection");
+
+  info("With .node-2 selected, click on the div selector icon");
+  data = await clickSelectorIcon(view, "div");
+  ok(
+    data.isShown,
+    "The highlighter is shown still since the selected was different"
+  );
+
+  info("Switching back to .node-1 and clicking on the div selector");
+  await selectNode(".node-1", inspector);
+  data = await clickSelectorIcon(view, "div");
+  ok(
+    !data.isShown,
+    "The highlighter is hidden now that the same selector was clicked"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_04.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_04.js
new file mode 100644
index 0000000000..46def76f05
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_04.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is shown when clicking on a selector icon
+// for the 'element {}' rule
+
+const TEST_URI = `
+<p>Testing the selector highlighter for the 'element {}' rule</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Checking that the right NodeFront reference and options are passed");
+  await selectNode("p", inspector);
+  data = await clickSelectorIcon(view, "element");
+  is(
+    data.nodeFront.tagName,
+    "P",
+    "The right NodeFront is passed to the highlighter (1)"
+  );
+  is(
+    data.options.selector,
+    "body > p:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+  ok(data.isShown, "The toggle event says the highlighter is visible");
+
+  data = await clickSelectorIcon(view, "element");
+  ok(!data.isShown, "The toggle event says the highlighter is not visible");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_05.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_05.js
new file mode 100644
index 0000000000..e5538c682f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_05.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is correctly shown when clicking on a
+// inherited element
+
+const TEST_URI = `
+<div style="cursor:pointer">
+  A
+  <div style="cursor:pointer">
+    B<a>Cursor</a>
+  </div>
+</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Checking that the right NodeFront reference and options are passed");
+  await selectNode("a", inspector);
+
+  data = await clickSelectorIcon(view, "element");
+  is(
+    data.options.selector,
+    "body > div:nth-child(1) > div:nth-child(1) > a:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+
+  data = await clickSelectorIcon(view, "element", 1);
+  is(
+    data.options.selector,
+    "body > div:nth-child(1) > div:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+
+  data = await clickSelectorIcon(view, "element", 2);
+  is(
+    data.options.selector,
+    "body > div:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js
new file mode 100644
index 0000000000..b7b259982f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+<style type="text/css">
+  #rule-from-stylesheet {
+    color: red;
+  }
+</style>
+<div id=inline style="cursor:pointer">
+  A
+  <div id=inherited>B</div>
+</div>
+<div id=rule-from-stylesheet>C</a>
+`;
+
+// This test will assert that specific elements of a ruleview rule have been
+// rendered in the expected order. This is specifically done to check the fix
+// for Bug 1664511, where some elements were rendered out of order due to
+// unexpected async processing.
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#inline", inspector);
+  checkRuleViewRuleMarkupOrder(view, "element");
+  await selectNode("#inherited", inspector);
+  checkRuleViewRuleMarkupOrder(view, "element", 1);
+  await selectNode("#rule-from-stylesheet", inspector);
+  checkRuleViewRuleMarkupOrder(view, "#rule-from-stylesheet");
+});
+
+function checkRuleViewRuleMarkupOrder(view, selectorText, index = 0) {
+  const rule = getRuleViewRule(view, selectorText, index);
+
+  // Retrieve the individual elements to assert.
+  const selectorContainer = rule.querySelector(".ruleview-selectors-container");
+  const highlighterIcon = rule.querySelector(".js-toggle-selector-highlighter");
+  const ruleOpenBrace = rule.querySelector(".ruleview-ruleopen");
+
+  const parentNode = selectorContainer.parentNode;
+  const childNodes = [...parentNode.childNodes];
+
+  Assert.less(
+    childNodes.indexOf(selectorContainer),
+    childNodes.indexOf(highlighterIcon),
+    "Selector text is rendered before the highlighter icon"
+  );
+  Assert.less(
+    childNodes.indexOf(highlighterIcon),
+    childNodes.indexOf(ruleOpenBrace),
+    "Highlighter icon is rendered before the opening brace"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js b/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js
new file mode 100644
index 0000000000..be9147e988
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js
@@ -0,0 +1,152 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view selector text is highlighted correctly according
+// to the components of the selector.
+
+const TEST_URI = [
+  "<style type='text/css'>",
+  "  h1 {}",
+  "  h1#testid {}",
+  "  h1 + p {}",
+  '  div[hidden="true"] {}',
+  '  div[title="test"][checked=true] {}',
+  "  p:empty {}",
+  "  p:lang(en) {}",
+  "  .testclass:active {}",
+  "  .testclass:focus {}",
+  "  .testclass:hover {}",
+  "</style>",
+  "<h1>Styled Node</h1>",
+  "<p>Paragraph</p>",
+  '<h1 id="testid">Styled Node</h1>',
+  '<div hidden="true"></div>',
+  '<div title="test" checked="true"></div>',
+  "<p></p>",
+  '<p lang="en">Paragraph<p>',
+  '<div class="testclass">Styled Node</div>',
+].join("\n");
+
+const SELECTOR_ATTRIBUTE = "ruleview-selector-attribute";
+const SELECTOR_ELEMENT = "ruleview-selector-element";
+const SELECTOR_PSEUDO_CLASS = "ruleview-selector-pseudo-class";
+const SELECTOR_PSEUDO_CLASS_LOCK = "ruleview-selector-pseudo-class-lock";
+
+const TEST_DATA = [
+  {
+    node: "h1",
+    expected: [{ value: "h1", class: SELECTOR_ELEMENT }],
+  },
+  {
+    node: "h1 + p",
+    expected: [{ value: "h1 + p", class: SELECTOR_ELEMENT }],
+  },
+  {
+    node: "h1#testid",
+    expected: [{ value: "h1#testid", class: SELECTOR_ELEMENT }],
+  },
+  {
+    node: "div[hidden='true']",
+    expected: [
+      { value: "div", class: SELECTOR_ELEMENT },
+      { value: '[hidden="true"]', class: SELECTOR_ATTRIBUTE },
+    ],
+  },
+  {
+    node: 'div[title="test"][checked="true"]',
+    expected: [
+      { value: "div", class: SELECTOR_ELEMENT },
+      { value: '[title="test"]', class: SELECTOR_ATTRIBUTE },
+      { value: '[checked="true"]', class: SELECTOR_ATTRIBUTE },
+    ],
+  },
+  {
+    node: "p:empty",
+    expected: [
+      { value: "p", class: SELECTOR_ELEMENT },
+      { value: ":empty", class: SELECTOR_PSEUDO_CLASS },
+    ],
+  },
+  {
+    node: "p:lang(en)",
+    expected: [
+      { value: "p", class: SELECTOR_ELEMENT },
+      { value: ":lang(en)", class: SELECTOR_PSEUDO_CLASS },
+    ],
+  },
+  {
+    node: ".testclass",
+    pseudoClass: ":active",
+    expected: [
+      { value: ".testclass", class: SELECTOR_ELEMENT },
+      { value: ":active", class: SELECTOR_PSEUDO_CLASS_LOCK },
+    ],
+  },
+  {
+    node: ".testclass",
+    pseudoClass: ":focus",
+    expected: [
+      { value: ".testclass", class: SELECTOR_ELEMENT },
+      { value: ":focus", class: SELECTOR_PSEUDO_CLASS_LOCK },
+    ],
+  },
+  {
+    node: ".testclass",
+    pseudoClass: ":hover",
+    expected: [
+      { value: ".testclass", class: SELECTOR_ELEMENT },
+      { value: ":hover", class: SELECTOR_PSEUDO_CLASS_LOCK },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const { node, pseudoClass, expected } of TEST_DATA) {
+    await selectNode(node, inspector);
+
+    if (pseudoClass) {
+      const onRefresh = inspector.once("rule-view-refreshed");
+      inspector.togglePseudoClass(pseudoClass);
+      await onRefresh;
+    }
+
+    const selectorContainer = getRuleViewRuleEditor(view, 1).selectorText
+      .firstChild;
+
+    if (selectorContainer.children.length === expected.length) {
+      for (let i = 0; i < expected.length; i++) {
+        is(
+          expected[i].value,
+          selectorContainer.children[i].textContent,
+          "Got expected selector value: " +
+            expected[i].value +
+            " == " +
+            selectorContainer.children[i].textContent
+        );
+        is(
+          expected[i].class,
+          selectorContainer.children[i].className,
+          "Got expected class name: " +
+            expected[i].class +
+            " == " +
+            selectorContainer.children[i].className
+        );
+      }
+    } else {
+      for (const selector of selectorContainer.children) {
+        info(
+          "Actual selector components: { value: " +
+            selector.textContent +
+            ", class: " +
+            selector.className +
+            " }\n"
+        );
+      }
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector_warnings.js b/devtools/client/inspector/rules/test/browser_rules_selector_warnings.js
new file mode 100644
index 0000000000..1e5c7da302
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector_warnings.js
@@ -0,0 +1,154 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that selector warnings are displayed in the rule-view.
+const TEST_URI = `
+  <!DOCTYPE html>
+  <style>
+    main, :has(form) {
+      /* /!\ space between & and : is important */
+      & :has(input),
+      & :has(select),
+      &:has(button) {
+        background: gold;
+      }
+    }
+  </style>
+  <body>
+    <main>
+      <form>
+        <input>
+      </form>
+    </main>
+  </body>`;
+
+const UNCONSTRAINED_HAS_WARNING_MESSAGE =
+  "This selector uses unconstrained :has(), which can be slow";
+
+add_task(async function () {
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("main", inspector);
+  const { ancestorDataEl, selectorText } = getRuleViewRuleEditor(view, 1);
+
+  info(
+    "Check that unconstrained :has() warnings are displayed for the rules selectors"
+  );
+  const ruleSelectors = Array.from(
+    selectorText.querySelectorAll(".ruleview-selector")
+  );
+
+  await assertSelectorWarnings({
+    view,
+    selectorEl: ruleSelectors[0],
+    selectorText: "& :has(input)",
+    expectedWarnings: [UNCONSTRAINED_HAS_WARNING_MESSAGE],
+  });
+  await assertSelectorWarnings({
+    view,
+    selectorEl: ruleSelectors[1],
+    selectorText: "& :has(select)",
+    expectedWarnings: [UNCONSTRAINED_HAS_WARNING_MESSAGE],
+  });
+  // Warning is not displayed when the selector does not have warnings
+  await assertSelectorWarnings({
+    view,
+    selectorEl: ruleSelectors[2],
+    selectorText: "&:has(button)",
+    expectedWarnings: [],
+  });
+
+  info(
+    "Check that unconstrained :has() warnings are displayed for the parent rules selectors"
+  );
+  const parentRuleSelectors = Array.from(
+    ancestorDataEl.querySelectorAll(".ruleview-selector")
+  );
+  await assertSelectorWarnings({
+    view,
+    selectorEl: parentRuleSelectors[0],
+    selectorText: "main",
+    expectedWarnings: [],
+  });
+  await assertSelectorWarnings({
+    view,
+    selectorEl: parentRuleSelectors[1],
+    selectorText: ":has(form)",
+    expectedWarnings: [UNCONSTRAINED_HAS_WARNING_MESSAGE],
+  });
+});
+
+async function assertSelectorWarnings({
+  view,
+  selectorEl,
+  selectorText,
+  expectedWarnings,
+}) {
+  is(
+    selectorEl.textContent,
+    selectorText,
+    "Passed selector element is the expected one"
+  );
+
+  const selectorWarningsContainerEl = selectorEl.querySelector(
+    ".ruleview-selector-warnings"
+  );
+
+  if (expectedWarnings.length === 0) {
+    Assert.strictEqual(
+      selectorWarningsContainerEl,
+      null,
+      `"${selectorText}" does not have warnings`
+    );
+    return;
+  }
+
+  Assert.notStrictEqual(
+    selectorWarningsContainerEl,
+    null,
+    `"${selectorText}" does have warnings`
+  );
+
+  is(
+    selectorWarningsContainerEl
+      .getAttribute("data-selector-warning-kind")
+      ?.split(",")?.length || 0,
+    expectedWarnings.length,
+    `"${selectorText}" has expected number of warnings`
+  );
+
+  // Ensure that the element can be targetted from EventUtils.
+  selectorWarningsContainerEl.scrollIntoView();
+
+  const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+  const onTooltipReady = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(
+    selectorWarningsContainerEl,
+    { type: "mousemove" },
+    selectorWarningsContainerEl.ownerDocument.defaultView
+  );
+  await onTooltipReady;
+
+  const lis = Array.from(tooltip.panel.querySelectorAll("li")).map(
+    li => li.textContent
+  );
+  Assert.deepEqual(lis, expectedWarnings, "Tooltip has expected items");
+
+  info("Hide the tooltip");
+  const onHidden = tooltip.once("hidden");
+  // Move the mouse elsewhere to hide the tooltip
+  EventUtils.synthesizeMouse(
+    selectorWarningsContainerEl.ownerDocument.body,
+    1,
+    1,
+    { type: "mousemove" },
+    selectorWarningsContainerEl.ownerDocument.defaultView
+  );
+  await onHidden;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js b/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js
new file mode 100644
index 0000000000..f0d3a17d1e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when selecting a slot element, the rule view displays the rules for the
+// corresponding element.
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <html>
+  <head>
+  <style>
+    #el1 { color: red }
+    #el2 { color: blue }
+  </style>
+  </head>
+  <body>
+  <test-component>
+    <div slot="slot1" id="el1">slot1-1</div>
+    <div slot="slot1" id="el2">slot1-2</div>
+    <div slot="slot1" id="el3">slot1-2</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`
+          <style>
+            ::slotted(#el3) {
+              color: green;
+            }
+          </style>
+          <slot name="slot1"></slot>
+        \`;
+      }
+    });
+  </script>
+  </body>
+  </html>
+`);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  const ruleview = inspector.getPanel("ruleview").view;
+
+  // <test-component> is a shadow host.
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+
+  await markup.expandNode(hostFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info(
+    "Test that expanding a shadow host shows shadow root and one host child."
+  );
+  const hostContainer = markup.getContainer(hostFront);
+
+  info("Expand the shadow root");
+  const childContainers = hostContainer.getChildContainers();
+  const shadowRootContainer = childContainers[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Expand the slot");
+  const shadowChildContainers = shadowRootContainer.getChildContainers();
+  // shadowChildContainers[0] is the style node.
+  const slotContainer = shadowChildContainers[1];
+  await expandContainer(inspector, slotContainer);
+
+  const slotChildContainers = slotContainer.getChildContainers();
+  is(slotChildContainers.length, 3, "Expecting 3 slotted children");
+
+  info(
+    "Select slotted node and check that the rule view displays correct content"
+  );
+  await selectNode(slotChildContainers[0].node, inspector);
+  checkRule(ruleview, "#el1", "color", "red");
+
+  info("Select another slotted node and check the rule view");
+  await selectNode(slotChildContainers[1].node, inspector);
+  checkRule(ruleview, "#el2", "color", "blue");
+
+  info("Select the last slotted node and check the rule view");
+  await selectNode(slotChildContainers[2].node, inspector);
+  checkRule(ruleview, "::slotted(#el3)", "color", "green");
+});
+
+function checkRule(ruleview, selector, name, expectedValue) {
+  const rule = getRuleViewRule(ruleview, selector);
+  ok(rule, "ruleview shows the expected rule for slotted " + selector);
+  const value = getRuleViewPropertyValue(ruleview, selector, name);
+  is(
+    value,
+    expectedValue,
+    "ruleview shows the expected value for slotted " + selector
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
new file mode 100644
index 0000000000..a3fd4ccd3e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view and the display of the
+// shapes highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Checking the initial state of the CSS shape toggle in the rule-view.");
+  ok(shapesToggle, "Shapes highlighter toggle is visible.");
+  ok(
+    !shapesToggle.classList.contains("active"),
+    "Shapes highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "No CSS shapes highlighter exists in the rule-view."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+  info("Toggling ON the CSS shapes highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapesToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    shapesToggle.classList.contains("active"),
+    "Shapes highlighter toggle is active."
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  info("Toggling OFF the CSS shapes highlighter from the rule-view.");
+  const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  shapesToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS shapes highlighter is not shown and toggle button is not " +
+      "active in the rule-view."
+  );
+  ok(
+    !shapesToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js
new file mode 100644
index 0000000000..3d2cd0d9e0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the swatch to toggle a shapes highlighter does not show up
+// on overwritten properties.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+    div {
+      clip-path: circle(30%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapeToggle = container.querySelector(".ruleview-shapeswatch");
+  const shapeToggleStyle = getComputedStyle(shapeToggle);
+  const overriddenContainer = getRuleViewProperty(
+    view,
+    "div",
+    "clip-path"
+  ).valueSpan;
+  const overriddenShapeToggle = overriddenContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  const overriddenShapeToggleStyle = getComputedStyle(overriddenShapeToggle);
+
+  ok(
+    shapeToggle && overriddenShapeToggle,
+    "Shapes highlighter toggles exist in the DOM."
+  );
+  ok(
+    !shapeToggle.classList.contains("active") &&
+      !overriddenShapeToggle.classList.contains("active"),
+    "Shapes highlighter toggle buttons are not active."
+  );
+
+  isnot(
+    shapeToggleStyle.display,
+    "none",
+    "Shape highlighter toggle is not hidden"
+  );
+  is(
+    overriddenShapeToggleStyle.display,
+    "none",
+    "Overwritten shape highlighter toggle is not visible"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
new file mode 100644
index 0000000000..922a845ac7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view with multiple shapes in the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div class="shape" id="shape1"></div>
+  <div class="shape" id="shape2"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Selecting the first shape container.");
+  await selectNode("#shape1", inspector);
+  let container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info(
+    "Checking the state of the CSS shape toggle for the first shape container " +
+      "in the rule-view."
+  );
+  ok(shapeToggle, "shape highlighter toggle is visible.");
+  ok(
+    !shapeToggle.classList.contains("active"),
+    "shape highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "No CSS shape highlighter exists in the rule-view."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for the first shapes container from the " +
+      "rule-view."
+  );
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle is active."
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  info("Selecting the second shapes container.");
+  await selectNode("#shape2", inspector);
+  const firstShapesHighlighterShown = highlighters.shapesHighlighterShown;
+  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info(
+    "Checking the state of the CSS shapes toggle for the second shapes container " +
+      "in the rule-view."
+  );
+  ok(shapeToggle, "shapes highlighter toggle is visible.");
+  ok(
+    !shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "CSS shapes highlighter is still no longer" +
+      "shown due to selecting another node."
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for the second shapes container " +
+      "from the rule-view."
+  );
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created for the second shapes container " +
+      "and toggle button is active in the rule-view."
+  );
+  ok(
+    shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle is active."
+  );
+  Assert.notEqual(
+    highlighters.shapesHighlighterShown,
+    firstShapesHighlighterShown,
+    "shapes highlighter for the second shapes container is shown."
+  );
+
+  info("Selecting the first shapes container.");
+  await selectNode("#shape1", inspector);
+  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info(
+    "Checking the state of the CSS shapes toggle for the first shapes container " +
+      "in the rule-view."
+  );
+  ok(shapeToggle, "shapes highlighter toggle is visible.");
+  ok(
+    !shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
new file mode 100644
index 0000000000..0add21381f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view and modifying the 'clip-path'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Toggling ON the CSS shape highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+
+  info("Edit the clip-path property to ellipse.");
+  const editor = await focusEditableField(view, container, 30);
+  const onDone = view.once("ruleview-changed");
+  editor.input.value = "ellipse(30% 20%);";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onDone;
+
+  info(
+    "Check the shape highlighter and shape toggle button are still visible."
+  );
+  shapeToggle = container.querySelector(".ruleview-shapeswatch");
+  ok(shapeToggle, "Shape highlighter toggle is visible.");
+  ok(highlighters.shapesHighlighterShown, "CSS shape highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
new file mode 100644
index 0000000000..cf5722144f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the shapes highlighter is hidden when the highlighted shape container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Toggling ON the CSS shapes highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  info("Remove the #shapes container in the content page");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.querySelector("#shape").remove()
+  );
+  await onHighlighterHidden;
+  ok(!highlighters.shapesHighlighterShown, "CSS shapes highlighter is hidden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
new file mode 100644
index 0000000000..f1395cc1c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view with clip-path and shape-outside
+// on the same element.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+      shape-outside: circle(25%);
+    }
+  </style>
+  <div class="shape" id="shape1"></div>
+  <div class="shape" id="shape2"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Selecting the first shapes container.");
+  await selectNode("#shape1", inspector);
+  let clipPathContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "clip-path"
+  ).valueSpan;
+  let clipPathShapeToggle = clipPathContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  let shapeOutsideContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "shape-outside"
+  ).valueSpan;
+  let shapeOutsideToggle = shapeOutsideContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for clip-path from the rule-view."
+  );
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  clipPathShapeToggle.click();
+  await onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(
+    clipPathShapeToggle.classList.contains("active"),
+    "clip-path toggle button is active."
+  );
+  ok(
+    !shapeOutsideToggle.classList.contains("active"),
+    "shape-outside toggle button is not active."
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for shape-outside from the rule-view."
+  );
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeOutsideToggle.click();
+  await onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(
+    !clipPathShapeToggle.classList.contains("active"),
+    "clip-path toggle button is not active."
+  );
+  ok(
+    shapeOutsideToggle.classList.contains("active"),
+    "shape-outside toggle button is active."
+  );
+
+  info("Selecting the second shapes container.");
+  await selectNode("#shape2", inspector);
+  clipPathContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "clip-path"
+  ).valueSpan;
+  clipPathShapeToggle = clipPathContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  shapeOutsideContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "shape-outside"
+  ).valueSpan;
+  shapeOutsideToggle = shapeOutsideContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  ok(
+    !clipPathShapeToggle.classList.contains("active"),
+    "clip-path toggle button is not active."
+  );
+  ok(
+    !shapeOutsideToggle.classList.contains("active"),
+    "shape-outside toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
new file mode 100644
index 0000000000..d117d51b91
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling transform mode of the shapes highlighter
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Toggling ON the CSS shapes highlighter with transform mode on.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.sendMouseEvent(
+    { type: "click", metaKey: true, ctrlKey: true },
+    shapesToggle,
+    view.styleWindow
+  );
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and transform mode is on"
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(highlighters.state.shapes.options.transformMode, "Transform mode is on.");
+
+  info("Toggling OFF the CSS shapes highlighter from the rule-view.");
+  const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  EventUtils.sendMouseEvent({ type: "click" }, shapesToggle, view.styleWindow);
+  await onHighlighterHidden;
+
+  info("Checking the CSS shapes highlighter is not shown.");
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+
+  info("Toggling ON the CSS shapes highlighter with transform mode off.");
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.sendMouseEvent({ type: "click" }, shapesToggle, view.styleWindow);
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and transform mode is off"
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(
+    !highlighters.state.shapes.options.transformMode,
+    "Transform mode is off."
+  );
+
+  info(
+    "Clicking shapes toggle to turn on transform mode while highlighter is shown."
+  );
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.sendMouseEvent(
+    { type: "click", metaKey: true, ctrlKey: true },
+    shapesToggle,
+    view.styleWindow
+  );
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and transform mode is on"
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(highlighters.state.shapes.options.transformMode, "Transform mode is on.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js
new file mode 100644
index 0000000000..46afb2ac57
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the shapes highlighter can be toggled for basic shapes with default values.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape-circle {
+      clip-path: circle();
+    }
+    #shape-ellipse {
+      clip-path: ellipse();
+    }
+    #shape-inset {
+      clip-path: inset();
+    }
+    #shape-polygon {
+      clip-path: polygon();
+    }
+  </style>
+  <div id="shape-circle"></div>
+  <div id="shape-ellipse"></div>
+  <div id="shape-inset"></div>
+  <div id="shape-polygon"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  const selectors = new Map([
+    ["#shape-circle", true],
+    ["#shape-ellipse", true],
+    // Basic shapes inset() and polygon() expect explicit coordinates.
+    // They don't have default values and are invalid without coordinates.
+    ["#shape-inset", false],
+    ["#shape-polygon", false],
+  ]);
+
+  for (const [selector, expectShapesToogle] of selectors) {
+    await selectNode(selector, inspector);
+    const container = getRuleViewProperty(
+      view,
+      selector,
+      "clip-path"
+    ).valueSpan;
+    const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+    if (expectShapesToogle) {
+      ok(
+        shapesToggle,
+        `Shapes highlighter toggle expected and found for ${selector}`
+      );
+    } else {
+      is(
+        shapesToggle,
+        null,
+        `Shapes highlighter toggle not expected and not found for ${selector}`
+      );
+
+      // Skip the rest of the test.
+      continue;
+    }
+
+    info(`Toggling ON the shapes highlighter for ${selector}`);
+    const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+    shapesToggle.click();
+    await onHighlighterShown;
+
+    ok(
+      shapesToggle.classList.contains("active"),
+      `Shapes highlighter toggle active for ${selector}`
+    );
+    ok(
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+      `Shapes highlighter instance created for ${selector}`
+    );
+    ok(
+      highlighters.shapesHighlighterShown,
+      `Shapes highlighter shown for ${selector}`
+    );
+
+    info(`Toggling OFF the shapes highlighter for ${selector}`);
+    const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+    shapesToggle.click();
+    await onHighlighterHidden;
+
+    ok(
+      !shapesToggle.classList.contains("active"),
+      `Shapes highlighter toggle no longer active for ${selector}`
+    );
+    ok(
+      !highlighters.shapesHighlighterShown,
+      `Shapes highlighter no longer shown for ${selector}`
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists.js b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists.js
new file mode 100644
index 0000000000..2ad037d443
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view shorthand overridden list works correctly,
+// can be shown and hidden correctly, and contain the right subproperties.
+
+var TEST_URI = `
+  <style type="text/css">
+    div {
+      margin: 0px 1px 2px 3px;
+      top: 0px;
+    }
+    #testid {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testComputedList(inspector, view);
+});
+
+function testComputedList(inspector, view) {
+  const rule = getRuleViewRuleEditor(view, 2).rule;
+  const propEditor = rule.textProps[0].editor;
+  const expander = propEditor.expander;
+  const overriddenItems = propEditor.shorthandOverridden.children;
+  const propNames = ["margin-right", "margin-left"];
+
+  ok(!expander.hasAttribute("open"), "margin computed list is closed.");
+  ok(
+    !propEditor.shorthandOverridden.hasAttribute("hidden"),
+    "The shorthandOverridden list should be open."
+  );
+
+  is(
+    overriddenItems.length,
+    propNames.length,
+    "There should be 2 overridden shorthand value."
+  );
+  for (let i = 0; i < propNames.length; i++) {
+    const overriddenItem = overriddenItems[i].querySelector(
+      ".ruleview-propertyname"
+    );
+    is(
+      overriddenItem.textContent,
+      propNames[i],
+      "The overridden item #" + i + " should be " + propNames[i]
+    );
+  }
+
+  info("Opening the computed list of margin property.");
+  expander.click();
+  ok(expander.hasAttribute("open"), "margin computed list is open.");
+  ok(
+    propEditor.shorthandOverridden.hasAttribute("hidden"),
+    "The shorthandOverridden list should be hidden."
+  );
+
+  info("Closing the computed list of margin property.");
+  expander.click();
+  ok(!expander.hasAttribute("open"), "margin computed list is closed.");
+  ok(
+    !propEditor.shorthandOverridden.hasAttribute("hidden"),
+    "The shorthandOverridden list should be open."
+  );
+
+  for (let i = 0; i < propNames.length; i++) {
+    const overriddenItem = overriddenItems[i].querySelector(
+      ".ruleview-propertyname"
+    );
+    is(
+      overriddenItem.textContent,
+      propNames[i],
+      "The overridden item #" + i + " should still be " + propNames[i]
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists_01.js b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists_01.js
new file mode 100644
index 0000000000..f33fd57148
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists_01.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that overridden longhand properties aren't shown when the shorthand's value
+// contains a CSS variable. When this happens, the longhand values can't be computed
+// properly and are hidden. So the overridden longhand that are normally auto-expanded
+// should be hidden too.
+
+var TEST_URI = `
+  <style type="text/css">
+    div {
+      --color: red;
+      background: var(--color);
+      background-repeat: no-repeat;
+    }
+  </style>
+  <div>Inspect me</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const shorthandOverridden = rule.textProps[1].editor.shorthandOverridden;
+
+  is(
+    shorthandOverridden.children.length,
+    0,
+    "The shorthandOverridden list is empty"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js
new file mode 100644
index 0000000000..d1c51acedc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js
@@ -0,0 +1,208 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter and clear button works properly
+// in the computed list
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px 10px 44px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for property names",
+    search: "`margin-left`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for property values",
+    search: "`0px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: true,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for parsed property names",
+    search: "`margin-left`:",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for parsed property values",
+    search: ":`4px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for property line input",
+    search: "`margin-top`:`4px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for a parsed strict property name and non-strict " +
+      "property value",
+    search: "`margin-top`:4px",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for a parsed strict property value and non-strict " +
+      "property name",
+    search: "i:`4px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  is(
+    !!textPropEditor.expander.getAttribute("open"),
+    data.isExpanderOpen,
+    "Got correct expander state."
+  );
+  is(
+    computed.hasAttribute("filter-open"),
+    data.isFilterOpen,
+    "Got correct expanded state for margin computed list."
+  );
+  is(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    data.isMarginHighlighted,
+    "Got correct highlight for margin text property."
+  );
+
+  is(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    data.isMarginTopHighlighted,
+    "Got correct highlight for margin-top computed property."
+  );
+  is(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    data.isMarginRightHighlighted,
+    "Got correct highlight for margin-right computed property."
+  );
+  is(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    data.isMarginBottomHighlighted,
+    "Got correct highlight for margin-bottom computed property."
+  );
+  is(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    data.isMarginLeftHighlighted,
+    "Got correct highlight for margin-left computed property."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !view.styleDocument.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+
+  ok(!textPropEditor.expander.getAttribute("open"), "Expander is closed.");
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js
new file mode 100644
index 0000000000..e70f02e37e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter works properly for property
+// names.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      width: 2%;
+      color: red;
+    }
+    .testclass {
+      width: 22%;
+      background-color: #00F;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the strict search filter works properly for property " +
+      "names",
+    search: "`color`",
+    ruleCount: 2,
+    propertyIndex: 1,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for property " +
+      "values",
+    search: "`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for parsed " +
+      "property names",
+    search: "`color`:",
+    ruleCount: 2,
+    propertyIndex: 1,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for parsed " +
+      "property values",
+    search: ":`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for property " +
+      "line input",
+    search: "`width`:`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for a parsed strict " +
+      "property name and non-strict property value.",
+    search: "`width`:2%",
+    ruleCount: 3,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for a parsed strict " +
+      "property value and non-strict property name.",
+    search: "i:`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(
+    view.element.children.length,
+    data.ruleCount,
+    "Should have " + data.ruleCount + " rules."
+  );
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  let rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[data.propertyIndex].editor.container.classList.contains(
+      "ruleview-highlight"
+    ),
+    "Text property is correctly highlighted."
+  );
+
+  if (data.ruleCount > 2) {
+    rule = getRuleViewRuleEditor(view, 2).rule;
+    is(rule.selectorText, ".testclass", "Third rule is .testclass.");
+    ok(
+      rule.textProps[data.propertyIndex].editor.container.classList.contains(
+        "ruleview-highlight"
+      ),
+      "Text property is correctly highlighted."
+    );
+  }
+}
+
+async function clearSearchAndCheckRules(view) {
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared.");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_02.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_02.js
new file mode 100644
index 0000000000..a1c3824adf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_02.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter works properly for stylesheet
+// source.
+
+const SEARCH = "`doc_urls_clickable.css:1`";
+const TEST_URI = URL_ROOT + "doc_urls_clickable.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode(".relative1", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const source = rule.textProps[0].editor.ruleEditor.source;
+
+  is(rule.selectorText, ".relative1", "Second rule is .relative1.");
+  ok(
+    source.classList.contains("ruleview-highlight"),
+    "stylesheet source is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_03.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_03.js
new file mode 100644
index 0000000000..3bd34fd2c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_03.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter works properly for selector
+// values.
+
+const SEARCH = "`.testclass`";
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass1 {
+      background-color: #00F;
+    }
+    .testclass {
+      color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass testclass1">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  is(ruleEditor.rule.selectorText, ".testclass", "Second rule is .testclass.");
+  ok(
+    ruleEditor.selectorText.children[0].classList.contains(
+      "ruleview-highlight"
+    ),
+    ".testclass selector is highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
new file mode 100644
index 0000000000..f28ca723c6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
@@ -0,0 +1,251 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the links from the rule-view to the styleeditor
+
+const STYLESHEET_DATA_URL_CONTENTS = `#first {
+color: blue
+}`;
+const STYLESHEET_DATA_URL = `data:text/css,${encodeURIComponent(
+  STYLESHEET_DATA_URL_CONTENTS
+)}`;
+
+const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css";
+const EXTERNAL_STYLESHEET_URL = URL_ROOT_SSL + EXTERNAL_STYLESHEET_FILE_NAME;
+
+const DOCUMENT_HTML = encodeURIComponent(`
+  <html>
+    <head>
+      <title>Rule view style editor link test</title>
+      <style type="text/css">
+        html { color: #000000; }
+        div { font-variant: small-caps; color: #000000; }
+        .nomatches {color: #ff0000;}
+      </style>
+      <style>
+        div { font-weight: bold; }
+      </style>
+      <link rel="stylesheet" type="text/css" href="${STYLESHEET_DATA_URL}">
+      <link rel="stylesheet" type="text/css" href="${EXTERNAL_STYLESHEET_URL}">
+    </head>
+    <body>
+      <div id="first" style="margin: 10em;font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+        <h1>Some header text</h1>
+        <p id="salutation" style="font-size: 12pt">hi.</p>
+        <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+        solely to provide some things to
+        <span style="color: yellow" class="highlight">
+        highlight</span> and <span style="font-weight: bold">count</span>
+        style list-items in the box at right. If you are reading this,
+        you should go do something else instead. Maybe read a book. Or better
+        yet, write some test-cases for another bit of code.
+        <span style="font-style: italic">some text</span></p>
+        <p id="closing">more text</p>
+        <p>even more text</p>
+      </div>
+    </body>
+  </html>
+`);
+
+const DOCUMENT_DATA_URL = "data:text/html;charset=utf-8," + DOCUMENT_HTML;
+const EXAMPLE_ORG_DOCUMENT_URL =
+  "https://example.org/document-builder.sjs?html=" + DOCUMENT_HTML;
+
+add_task(async function () {
+  await addTab(DOCUMENT_DATA_URL);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  await testAllStylesheets(inspector, view, toolbox);
+
+  info("Navigate to the example.org document");
+  await navigateTo(EXAMPLE_ORG_DOCUMENT_URL);
+  await testAllStylesheets(inspector, view, toolbox);
+});
+
+add_task(async function () {
+  info("Check that link to the style editor works after tab reload");
+  await addTab(EXAMPLE_ORG_DOCUMENT_URL);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Reload the example.org document");
+  // Use navigateTo as it waits for the inspector to be ready.
+  await navigateTo(EXAMPLE_ORG_DOCUMENT_URL);
+  await testAllStylesheets(inspector, view, toolbox);
+});
+
+async function testAllStylesheets(inspector, view, toolbox) {
+  await selectNode("div", inspector);
+  await testRuleViewLinkLabel(view);
+  await testDisabledStyleEditor(view, toolbox);
+  await testFirstInlineStyleSheet(view, toolbox);
+  await testSecondInlineStyleSheet(view, toolbox);
+  await testExternalStyleSheet(view, toolbox);
+
+  info("Switch back to the inspector panel");
+  await toolbox.selectTool("inspector");
+  await selectNode("body", inspector);
+}
+
+async function testFirstInlineStyleSheet(view, toolbox) {
+  info("Testing inline stylesheet");
+
+  info("Listening for toolbox switch to the styleeditor");
+  const onSwitch = waitForStyleEditor(toolbox);
+
+  info("Clicking an inline stylesheet");
+  clickLinkByIndex(view, 4);
+  const editor = await onSwitch;
+
+  ok(true, "Switched to the style-editor panel in the toolbox");
+
+  await validateStyleEditorSheet(toolbox, editor, 0);
+}
+
+async function testSecondInlineStyleSheet(view, toolbox) {
+  info("Testing second inline stylesheet");
+
+  const styleEditorPanel = toolbox.getCurrentPanel();
+  const onEditorSelected = styleEditorPanel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+  const onToolSelected = toolbox.once("styleeditor-selected");
+
+  info("Clicking on second inline stylesheet link");
+  clickLinkByIndex(view, 3);
+
+  info("Wait for the stylesheet editor to be selected");
+  const editor = await onEditorSelected;
+  await onToolSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(toolbox, editor, 1);
+}
+
+async function testExternalStyleSheet(view, toolbox) {
+  info("Testing external stylesheet");
+  const styleEditorPanel = toolbox.getCurrentPanel();
+  const onEditorSelected = styleEditorPanel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+  const onToolSelected = toolbox.once("styleeditor-selected");
+
+  info("Clicking on an external stylesheet link");
+  clickLinkByIndex(view, 1);
+
+  info("Wait for the stylesheet editor to be selected");
+  const editor = await onEditorSelected;
+  await onToolSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(toolbox, editor, 2);
+}
+
+async function validateStyleEditorSheet(toolbox, editor, expectedSheetIndex) {
+  info("validating style editor stylesheet");
+  is(
+    editor.styleSheet.styleSheetIndex,
+    expectedSheetIndex,
+    "loaded stylesheet index matches document stylesheet"
+  );
+
+  const href = editor.styleSheet.href || editor.styleSheet.nodeHref;
+
+  const expectedHref = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [expectedSheetIndex],
+    _expectedSheetIndex => {
+      return (
+        content.document.styleSheets[_expectedSheetIndex].href ||
+        content.document.location.href
+      );
+    }
+  );
+
+  is(href, expectedHref, "loaded stylesheet href matches document stylesheet");
+}
+
+async function testDisabledStyleEditor(view, toolbox) {
+  info("Testing with the style editor disabled");
+
+  info("Switching to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Disabling the style editor");
+  Services.prefs.setBoolPref("devtools.styleeditor.enabled", false);
+  gDevTools.emit("tool-unregistered", "styleeditor");
+
+  info("Clicking on a link");
+  testUnselectableRuleViewLink(view, 1);
+  clickLinkByIndex(view, 1);
+  // Wait for a bit just to make sure the click didn't had an impact
+  await wait(2000);
+
+  is(toolbox.currentToolId, "inspector", "The click should have no effect");
+
+  info("Enabling the style editor");
+  Services.prefs.setBoolPref("devtools.styleeditor.enabled", true);
+  gDevTools.emit("tool-registered", "styleeditor");
+
+  Services.prefs.clearUserPref("devtools.styleeditor.enabled");
+}
+
+async function testRuleViewLinkLabel(view) {
+  info("Checking the data URL link label");
+  let link = getRuleViewLinkByIndex(view, 1);
+  let labelElem = link.querySelector(".ruleview-rule-source-label");
+  let value = labelElem.textContent;
+  let tooltipText = labelElem.getAttribute("title");
+
+  is(
+    value,
+    STYLESHEET_DATA_URL_CONTENTS + ":1",
+    "Rule view data URL stylesheet display value matches contents"
+  );
+  is(
+    tooltipText,
+    STYLESHEET_DATA_URL + ":1",
+    "Rule view data URL stylesheet tooltip text matches the full URI path"
+  );
+
+  info("Checking the external link label");
+  link = getRuleViewLinkByIndex(view, 2);
+  labelElem = link.querySelector(".ruleview-rule-source-label");
+  value = labelElem.textContent;
+  tooltipText = labelElem.getAttribute("title");
+
+  is(
+    value,
+    `${EXTERNAL_STYLESHEET_FILE_NAME}:1`,
+    "Rule view external stylesheet display value matches filename and line number"
+  );
+  is(
+    tooltipText,
+    `${EXTERNAL_STYLESHEET_URL}:1`,
+    "Rule view external stylesheet tooltip text matches the full URI path"
+  );
+}
+
+function testUnselectableRuleViewLink(view, index) {
+  const link = getRuleViewLinkByIndex(view, index);
+  const unselectable = link.hasAttribute("unselectable");
+
+  ok(unselectable, "Rule view is unselectable");
+}
+
+function clickLinkByIndex(view, index) {
+  const link = getRuleViewLinkByIndex(view, index);
+  link.scrollIntoView();
+  link.click();
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_update_mask_image_cors.js b/devtools/client/inspector/rules/test/browser_rules_update_mask_image_cors.js
new file mode 100644
index 0000000000..bac63a9572
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_update_mask_image_cors.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/webconsole/test/browser/shared-head.js",
+  this
+);
+
+// The mask image is served from example.com while the test page is served from
+// example.org.
+const MASK_SRC = URL_ROOT_COM_SSL + "square_svg.sjs";
+const STYLE_ATTRIBUTE = `mask-image: url("${MASK_SRC}"); width:10px; height: 10px; background: red;`;
+const TEST_URL = `https://example.org/document-builder.sjs?html=<div style='${STYLE_ATTRIBUTE}'>`;
+
+// Used to assert screenshot colors.
+const RED = { r: 255, g: 0, b: 0 };
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, toolbox, view } = await openRuleView();
+
+  info("Open the splitconsole to check for CORS messages");
+  await toolbox.toggleSplitConsole();
+
+  await selectNode("div", inspector);
+
+  info("Take a node screenshot, mask is applied, should be red");
+  const beforeScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(beforeScreenshot, 10, 10, RED);
+
+  info("Update a property from the rule view");
+  const heightProperty = getTextProperty(view, 0, { height: "10px" });
+  await setProperty(view, heightProperty, "11px");
+
+  info("Wait until the style has been applied in the content page");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
+    await ContentTaskUtils.waitForCondition(
+      () => content.document.querySelector("div").style.height == "11px"
+    );
+  });
+
+  // Wait for some time in case the image needs to be reloaded, and to allow
+  // error messages (if any) to be rendered.
+  await wait(1000);
+
+  info("Take another screenshot, mask should still apply, should be red");
+  const afterScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(afterScreenshot, 10, 11, RED);
+
+  const hud = toolbox.getPanel("webconsole").hud;
+  ok(
+    !findMessageByType(hud, "Cross-Origin Request Blocked", ".error"),
+    "No message was logged about a CORS issue"
+  );
+
+  info("Close split console");
+  await toolbox.toggleSplitConsole();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_url-click-opens-new-tab.js b/devtools/client/inspector/rules/test/browser_rules_url-click-opens-new-tab.js
new file mode 100644
index 0000000000..0fe12dc859
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_url-click-opens-new-tab.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Bug 1326626 - Tests that clicking a background url opens a new tab
+// even when the devtools is opened in a separate window.
+
+const TEST_URL =
+  "data:text/html,<style>body{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGD4DwABBAEAfbLI3wAAAABJRU5ErkJggg==) no-repeat}";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL, "window");
+  const view = selectRuleView(inspector);
+
+  await selectNode("body", inspector);
+
+  const anchor = view.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(anchor, "Link exists for style tag node");
+
+  const onTabOpened = waitForTab();
+  anchor.click();
+
+  info("Wait for the image to open in a new tab");
+  const tab = await onTabOpened;
+  ok(tab, "A new tab opened");
+
+  is(
+    tab.linkedBrowser.currentURI.spec,
+    anchor.href,
+    "The new tab has the expected URL"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_urls-clickable.js b/devtools/client/inspector/rules/test/browser_rules_urls-clickable.js
new file mode 100644
index 0000000000..1d9574d73f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_urls-clickable.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests to make sure that URLs are clickable in the rule view
+
+const TEST_URI = URL_ROOT_SSL + "doc_urls_clickable.html";
+const TEST_IMAGE = URL_ROOT_SSL + "doc_test_image.png";
+const BASE_64_URL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAA" +
+  "FCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAA" +
+  "BJRU5ErkJggg==";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNodes(inspector, view);
+});
+
+async function selectNodes(inspector, ruleView) {
+  const relative1 = ".relative1";
+  const relative2 = ".relative2";
+  const absolute = ".absolute";
+  const inline = ".inline";
+  const base64 = ".base64";
+  const noimage = ".noimage";
+  const inlineresolved = ".inline-resolved";
+
+  await selectNode(relative1, inspector);
+  let relativeLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(relativeLink, "Link exists for relative1 node");
+  is(relativeLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(relative2, inspector);
+  relativeLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(relativeLink, "Link exists for relative2 node");
+  is(relativeLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(absolute, inspector);
+  const absoluteLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(absoluteLink, "Link exists for absolute node");
+  is(absoluteLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(inline, inspector);
+  const inlineLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(inlineLink, "Link exists for inline node");
+  is(inlineLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(base64, inspector);
+  const base64Link = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(base64Link, "Link exists for base64 node");
+  is(base64Link.getAttribute("href"), BASE_64_URL, "href matches");
+
+  await selectNode(inlineresolved, inspector);
+  const inlineResolvedLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(inlineResolvedLink, "Link exists for style tag node");
+  is(inlineResolvedLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(noimage, inspector);
+  const noimageLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(!noimageLink, "There is no link for the node with no background image");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_user-agent-styles-uneditable.js b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles-uneditable.js
new file mode 100644
index 0000000000..07a2b6abb8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles-uneditable.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that user agent styles are never editable via
+// the UI
+
+const TEST_URI = `
+  <blockquote type=cite>
+   <pre _moz_quote=true>
+     inspect <a href='foo' style='color:orange'>user agent</a> styles
+   </pre>
+  </blockquote>
+`;
+
+var PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
+
+add_task(async function () {
+  info("Starting the test with the pref set to true before toolbox is opened");
+  Services.prefs.setBoolPref(PREF_UA_STYLES, true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await userAgentStylesUneditable(inspector, view);
+
+  info("Resetting " + PREF_UA_STYLES);
+  Services.prefs.clearUserPref(PREF_UA_STYLES);
+});
+
+async function userAgentStylesUneditable(inspector, view) {
+  info("Making sure that UI is not editable for user agent styles");
+
+  await selectNode("a", inspector);
+  const uaRules = view._elementStyle.rules.filter(
+    rule => !rule.editor.isEditable
+  );
+
+  for (const rule of uaRules) {
+    ok(
+      rule.editor.element.hasAttribute("uneditable"),
+      "UA rules have uneditable attribute"
+    );
+
+    const firstProp = rule.textProps.filter(p => !p.invisible)[0];
+
+    ok(!firstProp.editor.nameSpan._editable, "nameSpan is not editable");
+    ok(!firstProp.editor.valueSpan._editable, "valueSpan is not editable");
+    ok(!rule.editor.closeBrace._editable, "closeBrace is not editable");
+
+    const colorswatch = rule.editor.element.querySelector(
+      ".ruleview-colorswatch"
+    );
+    if (colorswatch) {
+      ok(
+        !view.tooltips.getTooltip("colorPicker").swatches.has(colorswatch),
+        "The swatch is not editable"
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js
new file mode 100644
index 0000000000..6e5fbe53da
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js
@@ -0,0 +1,217 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that user agent styles are inspectable via rule view if
+// it is preffed on.
+
+var PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+
+const TEST_URI = URL_ROOT + "doc_author-sheet.html";
+
+const TEST_DATA = [
+  {
+    selector: "blockquote",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "pre",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=range]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=number]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=color]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=text]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "progress",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  // Note that some tests below assume that the "a" selector is the
+  // last test in TEST_DATA.
+  {
+    selector: "a",
+    numUserRules: 3,
+    numUARules: 0,
+  },
+];
+
+add_task(async function () {
+  // Bug 1517210: GC heuristics are broken for this test, so that the test ends up
+  // running out of memory if we don't force to reduce the GC side before/after the test.
+  Cu.forceShrinkingGC();
+
+  requestLongerTimeout(4);
+
+  info("Starting the test with the pref set to true before toolbox is opened");
+  await setUserAgentStylesPref(true);
+
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Making sure that UA styles are visible on initial load");
+  await userAgentStylesVisible(inspector, view);
+
+  info("Making sure that setting the pref to false hides UA styles");
+  await setUserAgentStylesPref(false);
+  await userAgentStylesNotVisible(inspector, view);
+
+  info("Making sure that resetting the pref to true shows UA styles again");
+  await setUserAgentStylesPref(true);
+  await userAgentStylesVisible(inspector, view);
+
+  info("Resetting " + PREF_UA_STYLES);
+  Services.prefs.clearUserPref(PREF_UA_STYLES);
+
+  // Bug 1517210: GC heuristics are broken for this test, so that the test ends up
+  // running out of memory if we don't force to reduce the GC side before/after the test.
+  Cu.forceShrinkingGC();
+});
+
+async function setUserAgentStylesPref(val) {
+  info("Setting the pref " + PREF_UA_STYLES + " to: " + val);
+
+  // Reset the pref and wait for PrefObserver to callback so UI
+  // has a chance to get updated.
+  const prefObserver = new PrefObserver("devtools.");
+  const oncePrefChanged = new Promise(resolve => {
+    prefObserver.on(PREF_UA_STYLES, onPrefChanged);
+
+    function onPrefChanged() {
+      prefObserver.off(PREF_UA_STYLES, onPrefChanged);
+      resolve();
+    }
+  });
+  Services.prefs.setBoolPref(PREF_UA_STYLES, val);
+  await oncePrefChanged;
+}
+
+async function userAgentStylesVisible(inspector, view) {
+  info("Making sure that user agent styles are currently visible");
+
+  let userRules;
+  let uaRules;
+
+  for (const data of TEST_DATA) {
+    await selectNode(data.selector, inspector);
+    await compareAppliedStylesWithUI(inspector, view, "ua");
+
+    userRules = view._elementStyle.rules.filter(rule => rule.editor.isEditable);
+    uaRules = view._elementStyle.rules.filter(rule => !rule.editor.isEditable);
+    is(userRules.length, data.numUserRules, "Correct number of user rules");
+    Assert.greater(uaRules.length, data.numUARules, "Has UA rules");
+  }
+
+  ok(
+    userRules.some(rule => rule.matchedDesugaredSelectors.length === 1),
+    "There is an inline style for element in user styles"
+  );
+
+  // These tests rely on the "a" selector being the last test in
+  // TEST_DATA.
+  ok(
+    uaRules.some(rule => {
+      return rule.matchedDesugaredSelectors.includes(":any-link");
+    }),
+    "There is a rule for :any-link"
+  );
+  ok(
+    uaRules.some(rule => {
+      return rule.matchedDesugaredSelectors.includes(":link");
+    }),
+    "There is a rule for :link"
+  );
+  ok(
+    uaRules.some(rule => {
+      return rule.matchedDesugaredSelectors.length === 1;
+    }),
+    "Inline styles for ua styles"
+  );
+}
+
+async function userAgentStylesNotVisible(inspector, view) {
+  info("Making sure that user agent styles are not currently visible");
+
+  let userRules;
+  let uaRules;
+
+  for (const data of TEST_DATA) {
+    await selectNode(data.selector, inspector);
+    await compareAppliedStylesWithUI(inspector, view);
+
+    userRules = view._elementStyle.rules.filter(rule => rule.editor.isEditable);
+    uaRules = view._elementStyle.rules.filter(rule => !rule.editor.isEditable);
+    is(userRules.length, data.numUserRules, "Correct number of user rules");
+    is(uaRules.length, data.numUARules, "No UA rules");
+  }
+}
+
+async function compareAppliedStylesWithUI(inspector, view, filter) {
+  info("Making sure that UI is consistent with pageStyle.getApplied");
+
+  const pageStyle = inspector.selection.nodeFront.inspectorFront.pageStyle;
+  let entries = await pageStyle.getApplied(inspector.selection.nodeFront, {
+    inherited: true,
+    matchedSelectors: true,
+    filter,
+  });
+
+  // We may see multiple entries that map to a given rule; filter the
+  // duplicates here to match what the UI does.
+  const entryMap = new Map();
+  for (const entry of entries) {
+    entryMap.set(entry.rule, entry);
+  }
+  entries = [...entryMap.values()];
+
+  const elementStyle = view._elementStyle;
+  await waitFor(() => elementStyle.rules.length === entries.length);
+  is(
+    elementStyle.rules.length,
+    entries.length,
+    "Should have correct number of rules (" + entries.length + ")"
+  );
+
+  entries = entries.sort((a, b) => {
+    return (a.pseudoElement || "z") > (b.pseudoElement || "z");
+  });
+
+  entries.forEach((entry, i) => {
+    const elementStyleRule = elementStyle.rules[i];
+    is(
+      !!elementStyleRule.inherited,
+      !!entry.inherited,
+      "Same inherited (" + entry.inherited + ")"
+    );
+    is(
+      elementStyleRule.isSystem,
+      entry.isSystem,
+      "Same isSystem (" + entry.isSystem + ")"
+    );
+    is(
+      elementStyleRule.editor.isEditable,
+      !entry.isSystem,
+      "Editor isEditable opposite of UA (" + entry.isSystem + ")"
+    );
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_user-property-reset.js b/devtools/client/inspector/rules/test/browser_rules_user-property-reset.js
new file mode 100644
index 0000000000..1c8126c31f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_user-property-reset.js
@@ -0,0 +1,105 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that user set style properties can be changed from the markup-view and
+// don't survive page reload
+
+const TEST_URI = `
+  <p id='id1' style='width:200px;'>element 1</p>
+  <p id='id2' style='width:100px;'>element 2</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#id1", inspector);
+  await modifyRuleViewWidth("300px", view, inspector);
+  await assertRuleAndMarkupViewWidth("id1", "300px", view, inspector);
+
+  await selectNode("#id2", inspector);
+  await assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
+  await modifyRuleViewWidth("50px", view, inspector);
+  await assertRuleAndMarkupViewWidth("id2", "50px", view, inspector);
+
+  is(
+    view.store.userProperties.map.size,
+    2,
+    "The modifications are stored as expected"
+  );
+
+  await reloadBrowser();
+
+  is(
+    view.store.userProperties.map.size,
+    0,
+    "Properties storing user modifications is cleared after a reload"
+  );
+
+  await selectNode("#id1", inspector);
+  await assertRuleAndMarkupViewWidth("id1", "200px", view, inspector);
+  await selectNode("#id2", inspector);
+  await assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
+});
+
+function getStyleRule(ruleView) {
+  return ruleView.styleDocument.querySelector(".ruleview-rule");
+}
+
+async function modifyRuleViewWidth(value, ruleView, inspector) {
+  info("Getting the property value element");
+  const valueSpan = getStyleRule(ruleView).querySelector(
+    ".ruleview-propertyvalue"
+  );
+
+  info("Focusing the property value to set it to edit mode");
+  const editor = await focusEditableField(ruleView, valueSpan.parentNode);
+
+  ok(editor.input, "The inplace-editor field is ready");
+  info("Setting the new value");
+  editor.input.value = value;
+
+  info(
+    "Pressing return and waiting for the field to blur and for the " +
+      "markup-view to show the mutation"
+  );
+  const onBlur = once(editor.input, "blur", true);
+  const onStyleChanged = waitForStyleModification(inspector);
+  EventUtils.sendKey("return");
+  await onBlur;
+  await onStyleChanged;
+}
+
+async function getContainerStyleAttrValue(id, { walker, markup }) {
+  const front = await walker.querySelector(walker.rootNode, "#" + id);
+  const container = markup.getContainer(front);
+
+  let attrIndex = 0;
+  for (const attrName of container.elt.querySelectorAll(".attr-name")) {
+    if (attrName.textContent === "style") {
+      return container.elt.querySelectorAll(".attr-value")[attrIndex];
+    }
+    attrIndex++;
+  }
+  return undefined;
+}
+
+async function assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) {
+  const valueSpan = getStyleRule(ruleView).querySelector(
+    ".ruleview-propertyvalue"
+  );
+  is(
+    valueSpan.textContent,
+    value,
+    "Rule-view style width is " + value + " as expected"
+  );
+
+  const attr = await getContainerStyleAttrValue(id, inspector);
+  is(
+    attr.textContent.replace(/\s/g, ""),
+    "width:" + value + ";",
+    "Markup-view style attribute width is " + value
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_01.js
new file mode 100644
index 0000000000..9e9a2d1d50
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_01.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for pseudo element which defines CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div::before {
+      color: var(--color);
+      --color: orange;
+    }
+
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Test the CSS variable which normal element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Test the CSS variable which pseudo element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div::before",
+    "color",
+    "ruleview-variable",
+    "--color = orange"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_02.js b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_02.js
new file mode 100644
index 0000000000..fba5c163c1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_02.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for pseudo element which inherits CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div::before {
+      color: var(--color);
+    }
+
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Test the CSS variable which normal element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Test the CSS variable which pseudo element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div::before",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_01.js b/devtools/client/inspector/rules/test/browser_rules_variables_01.js
new file mode 100644
index 0000000000..255367fcbb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_01.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for variables in rule view.
+
+const TEST_URI = URL_ROOT + "doc_variables_1.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  info(
+    "Tests basic support for CSS Variables for both single variable " +
+      "and double variable. Formats tested: var(x, constant), var(x, var(y))"
+  );
+
+  const unsetColor = getRuleViewProperty(
+    view,
+    "div",
+    "color"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setColor = unsetColor.previousElementSibling;
+  is(unsetColor.textContent, " red", "red is unmatched in color");
+  is(setColor.textContent, "--color", "--color is not set correctly");
+  is(
+    setColor.dataset.variable,
+    "--color = chartreuse",
+    "--color's dataset.variable is not set correctly"
+  );
+  let previewTooltip = await assertShowPreviewTooltip(view, setColor);
+  await assertTooltipHiddenOnMouseOut(previewTooltip, setColor);
+
+  ok(
+    previewTooltip.panel.textContent.includes("--color = chartreuse"),
+    "CSS variable preview tooltip shows the expected CSS variable"
+  );
+
+  const unsetVar = getRuleViewProperty(
+    view,
+    "div",
+    "background-color"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setVar = unsetVar.nextElementSibling;
+  const setVarName = setVar.querySelector(".ruleview-variable");
+  is(
+    unsetVar.textContent,
+    "--not-set",
+    "--not-set is unmatched in background-color"
+  );
+  is(setVar.textContent, " var(--bg)", "var(--bg) parsed incorrectly");
+  is(setVarName.textContent, "--bg", "--bg is not set correctly");
+  is(
+    setVarName.dataset.variable,
+    "--bg = seagreen",
+    "--bg's dataset.variable is not set correctly"
+  );
+  previewTooltip = await assertShowPreviewTooltip(view, setVarName);
+
+  ok(
+    !previewTooltip.panel.textContent.includes("--color = chartreuse"),
+    "CSS variable preview tooltip no longer shows the previous CSS variable"
+  );
+  ok(
+    previewTooltip.panel.textContent.includes("--bg = seagreen"),
+    "CSS variable preview tooltip shows the new CSS variable"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, setVarName);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_02.js b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
new file mode 100644
index 0000000000..4100859fb9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
@@ -0,0 +1,321 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for variables in rule view.
+
+const TEST_URI = URL_ROOT + "doc_variables_2.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await testBasic(inspector, view);
+  await testNestedCssFunctions(inspector, view);
+  await testBorderShorthandAndInheritance(inspector, view);
+  await testSingleLevelVariable(inspector, view);
+  await testDoubleLevelVariable(inspector, view);
+  await testTripleLevelVariable(inspector, view);
+});
+
+async function testBasic(inspector, view) {
+  info(
+    "Test support for basic variable functionality for var() with 2 variables." +
+      "Format: var(--var1, var(--var2))"
+  );
+
+  await selectNode("#a", inspector);
+  const unsetVar = getRuleViewProperty(
+    view,
+    "#a",
+    "font-size"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setVarParent = unsetVar.nextElementSibling;
+  const setVar = getVarFromParent(setVarParent);
+  is(
+    unsetVar.textContent,
+    "--var-not-defined",
+    "--var-not-defined is not set correctly"
+  );
+  is(
+    unsetVar.dataset.variable,
+    "--var-not-defined is not set",
+    "--var-not-defined's dataset.variable is not set correctly"
+  );
+  is(
+    setVarParent.textContent,
+    " var(--var-defined-font-size)",
+    "var(--var-defined-font-size) parsed incorrectly"
+  );
+  is(
+    setVar.textContent,
+    "--var-defined-font-size",
+    "--var-defined-font-size is not set correctly"
+  );
+  is(
+    setVar.dataset.variable,
+    "--var-defined-font-size = 60px",
+    "--bg's dataset.variable is not set correctly"
+  );
+}
+
+async function testNestedCssFunctions(inspector, view) {
+  info(
+    "Test support for variable functionality for a var() nested inside " +
+      "another CSS function. Format: rgb(0, 0, var(--var1, var(--var2)))"
+  );
+
+  await selectNode("#b", inspector);
+  const unsetVarParent = getRuleViewProperty(
+    view,
+    "#b",
+    "color"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const unsetVar = getVarFromParent(unsetVarParent);
+  const setVar = unsetVarParent.previousElementSibling;
+  is(
+    unsetVarParent.textContent,
+    " var(--var-defined-r-2)",
+    "var(--var-defined-r-2) not parsed correctly"
+  );
+  is(
+    unsetVar.textContent,
+    "--var-defined-r-2",
+    "--var-defined-r-2 is not set correctly"
+  );
+  is(
+    unsetVar.dataset.variable,
+    "--var-defined-r-2 = 0",
+    "--var-defined-r-2's dataset.variable is not set correctly"
+  );
+  is(
+    setVar.textContent,
+    "--var-defined-r-1",
+    "--var-defined-r-1 is not set correctly"
+  );
+  is(
+    setVar.dataset.variable,
+    "--var-defined-r-1 = 255",
+    "--var-defined-r-1's dataset.variable is not set correctly"
+  );
+}
+
+async function testBorderShorthandAndInheritance(inspector, view) {
+  info(
+    "Test support for variable functionality for shorthands/CSS styles with spaces " +
+      'like "margin: w x y z". Also tests functionality for inherticance of CSS' +
+      " variables. Format: var(l, var(m)) var(x) rgb(var(r) var(g) var(b))"
+  );
+
+  await selectNode("#c", inspector);
+  const unsetVarL = getRuleViewProperty(
+    view,
+    "#c",
+    "border"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setVarMParent = unsetVarL.nextElementSibling;
+
+  // var(x) is the next sibling of the parent of M
+  const setVarXParent = setVarMParent.parentNode.nextElementSibling;
+
+  // var(r) is the next sibling of var(x), and var(g) is the next sibling of var(r), etc.
+  const setVarRParent = setVarXParent.nextElementSibling;
+  const setVarGParent = setVarRParent.nextElementSibling;
+  const setVarBParent = setVarGParent.nextElementSibling;
+
+  const setVarM = getVarFromParent(setVarMParent);
+  const setVarX = setVarXParent.firstElementChild;
+  const setVarR = setVarRParent.firstElementChild;
+  const setVarG = setVarGParent.firstElementChild;
+  const setVarB = setVarBParent.firstElementChild;
+
+  is(
+    unsetVarL.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVarL.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarM.textContent,
+    "--var-border-px",
+    "--var-border-px is not set correctly"
+  );
+  is(
+    setVarM.dataset.variable,
+    "--var-border-px = 10px",
+    "--var-border-px's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarX.textContent,
+    "--var-border-style",
+    "--var-border-style is not set correctly"
+  );
+  is(
+    setVarX.dataset.variable,
+    "--var-border-style = solid",
+    "var-border-style's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarR.textContent,
+    "--var-border-r",
+    "--var-defined-r is not set correctly"
+  );
+  is(
+    setVarR.dataset.variable,
+    "--var-border-r = 255",
+    "--var-defined-r's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarG.textContent,
+    "--var-border-g",
+    "--var-defined-g is not set correctly"
+  );
+  is(
+    setVarG.dataset.variable,
+    "--var-border-g = 0",
+    "--var-defined-g's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarB.textContent,
+    "--var-border-b",
+    "--var-defined-b is not set correctly"
+  );
+  is(
+    setVarB.dataset.variable,
+    "--var-border-b = 0",
+    "--var-defined-b's dataset.variable is not set correctly"
+  );
+}
+
+async function testSingleLevelVariable(inspector, view) {
+  info(
+    "Test support for variable functionality of a single level of " +
+      "undefined variables. Format: var(x, constant)"
+  );
+
+  await selectNode("#d", inspector);
+  const unsetVar = getRuleViewProperty(
+    view,
+    "#d",
+    "font-size"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+
+  is(
+    unsetVar.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+}
+
+async function testDoubleLevelVariable(inspector, view) {
+  info(
+    "Test support for variable functionality of double level of " +
+      "undefined variables. Format: var(x, var(y, constant))"
+  );
+
+  await selectNode("#e", inspector);
+  const allUnsetVars = getRuleViewProperty(
+    view,
+    "#e",
+    "color"
+  ).valueSpan.querySelectorAll(".ruleview-unmatched-variable");
+
+  is(allUnsetVars.length, 2, "The number of unset variables is mismatched.");
+
+  const unsetVar1 = allUnsetVars[0];
+  const unsetVar2 = allUnsetVars[1];
+
+  is(
+    unsetVar1.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar1.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+
+  is(
+    unsetVar2.textContent,
+    "--var-undefined-2",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar2.dataset.variable,
+    "--var-undefined-2 is not set",
+    "--var-undefined-2's dataset.variable is not set correctly"
+  );
+}
+
+async function testTripleLevelVariable(inspector, view) {
+  info(
+    "Test support for variable functionality of triple level of " +
+      "undefined variables. Format: var(x, var(y, var(z, constant)))"
+  );
+
+  await selectNode("#f", inspector);
+  const allUnsetVars = getRuleViewProperty(
+    view,
+    "#f",
+    "border-style"
+  ).valueSpan.querySelectorAll(".ruleview-unmatched-variable");
+
+  is(allUnsetVars.length, 3, "The number of unset variables is mismatched.");
+
+  const unsetVar1 = allUnsetVars[0];
+  const unsetVar2 = allUnsetVars[1];
+  const unsetVar3 = allUnsetVars[2];
+
+  is(
+    unsetVar1.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar1.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+
+  is(
+    unsetVar2.textContent,
+    "--var-undefined-2",
+    "--var-undefined-2 is not set correctly"
+  );
+  is(
+    unsetVar2.dataset.variable,
+    "--var-undefined-2 is not set",
+    "--var-defined-r-2's dataset.variable is not set correctly"
+  );
+
+  is(
+    unsetVar3.textContent,
+    "--var-undefined-3",
+    "--var-undefined-3 is not set correctly"
+  );
+  is(
+    unsetVar3.dataset.variable,
+    "--var-undefined-3 is not set",
+    "--var-defined-r-3's dataset.variable is not set correctly"
+  );
+}
+
+function getVarFromParent(varParent) {
+  return varParent.firstElementChild.firstElementChild;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js b/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
new file mode 100644
index 0000000000..21fd00ec42
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that inherited CSS variables are case senstive.
+
+const TEST_URI = URL_ROOT + "doc_variables_3.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(
+    view,
+    "div",
+    "color"
+  ).valueSpan.querySelector(".ruleview-variable");
+  const lowerCaseVarEl = getRuleViewProperty(
+    view,
+    "div",
+    "background"
+  ).valueSpan.querySelector(".ruleview-variable");
+
+  is(upperCaseVarEl.textContent, "--COLOR", "upper case variable is matched");
+  is(
+    lowerCaseVarEl.textContent,
+    "--background",
+    "lower case variable is matched"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_04-valid-chars.js b/devtools/client/inspector/rules/test/browser_rules_variables_04-valid-chars.js
new file mode 100644
index 0000000000..4e163b1fb7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_04-valid-chars.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for variables in rule view.
+
+const TEST_URI = URL_ROOT + "doc_variables_4.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await testNumber(inspector, view);
+  await testDash(inspector, view);
+});
+
+async function testNumber(inspector, view) {
+  info(
+    "Test support for allowing vars that begin with a number" +
+      "Format: --10: 10px;"
+  );
+
+  await selectNode("#a", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(
+    view,
+    "#a",
+    "font-size"
+  ).valueSpan.querySelector(".ruleview-variable");
+
+  is(
+    upperCaseVarEl.dataset.variable,
+    "--10 = 10px",
+    "variable that starts with a number is valid"
+  );
+}
+
+async function testDash(inspector, view) {
+  info(
+    "Test support for allowing vars that begin with a dash" +
+      "Format: ---blue: blue;"
+  );
+
+  await selectNode("#b", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(
+    view,
+    "#b",
+    "color"
+  ).valueSpan.querySelector(".ruleview-variable");
+
+  is(
+    upperCaseVarEl.dataset.variable,
+    "---blue = blue",
+    "variable that starts with a dash is valid"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js b/devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js
new file mode 100644
index 0000000000..c62818e64d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js
@@ -0,0 +1,131 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for autocomplete of CSS variables in the Rules view.
+
+const IFRAME_URL = `https://example.org/document-builder.sjs?html=${encodeURIComponent(`
+  <style>
+    @property --iframe {
+      syntax: "*";
+      inherits: true;
+    }
+    body {
+      --iframe-not-registered: turquoise;
+    }
+
+    h1 {
+      color: tomato;
+    }
+  </style>
+  <h1>iframe</h1>
+`)}`;
+
+const TEST_URI = `https://example.org/document-builder.sjs?html=
+ <script>
+    CSS.registerProperty({
+      name: "--js",
+      syntax: "*",
+      inherits: false,
+    });
+  </script>
+  <style>
+    @property --css {
+      syntax: "*";
+      inherits: false;
+    }
+
+    h1 {
+      --css: red;
+      --not-registered: blue;
+      color: gold;
+    }
+  </style>
+  <h1>Hello world</h1>
+  <iframe src="${encodeURIComponent(IFRAME_URL)}"></iframe>`;
+
+add_task(async function () {
+  await pushPref("layout.css.properties-and-values.enabled", true);
+
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info("Wait for @property panel to be displayed");
+  await waitFor(() =>
+    view.styleDocument.querySelector("#registered-properties-container")
+  );
+
+  const topLevelVariables = ["--css", "--js", "--not-registered"];
+  await checkNewPropertyCssVariableAutocomplete(view, topLevelVariables);
+
+  await checkCssVariableAutocomplete(
+    view,
+    getTextProperty(view, 1, { color: "gold" }).editor.valueSpan,
+    topLevelVariables
+  );
+
+  info(
+    "Check that the list is correct when selecting a node from another document"
+  );
+  await selectNodeInFrames(["iframe", "h1"], inspector);
+
+  const iframeVariables = ["--iframe", "--iframe-not-registered"];
+  await checkNewPropertyCssVariableAutocomplete(view, iframeVariables);
+
+  await checkCssVariableAutocomplete(
+    view,
+    getTextProperty(view, 1, { color: "tomato" }).editor.valueSpan,
+    iframeVariables
+  );
+});
+
+async function checkNewPropertyCssVariableAutocomplete(
+  view,
+  expectedPopupItems
+) {
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+  const onPopupOpen = editor.popup.once("popup-opened");
+  EventUtils.sendString("--");
+  await onPopupOpen;
+
+  Assert.deepEqual(
+    editor.popup.getItems().map(item => item.label),
+    expectedPopupItems,
+    "Got expected items in autopopup"
+  );
+
+  info("Close the popup");
+  const onPopupClosed = once(editor.popup, "popup-closed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onPopupClosed;
+}
+
+async function checkCssVariableAutocomplete(
+  view,
+  inplaceEditorEl,
+  expectedPopupItems
+) {
+  let onRuleViewChanged = view.once("ruleview-changed");
+  const editor = await focusEditableField(view, inplaceEditorEl);
+  const onPopupOpen = editor.popup.once("popup-opened");
+  EventUtils.sendString("var(--");
+  view.debounce.flush();
+  await onPopupOpen;
+  await onRuleViewChanged;
+  Assert.deepEqual(
+    editor.popup.getItems().map(item => item.label),
+    expectedPopupItems,
+    "Got expected items in autopopup"
+  );
+
+  info("Close the popup");
+  const onPopupClosed = once(editor.popup, "popup-closed");
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  view.debounce.flush();
+  await onRuleViewChanged;
+  await onPopupClosed;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_host.js b/devtools/client/inspector/rules/test/browser_rules_variables_host.js
new file mode 100644
index 0000000000..a8fe04d7b6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_host.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test matched selectors and variables defined for a :host selector.
+
+const SHADOW_DOM = `<style>
+  :host {
+    --test-color: red;
+  }
+
+  span {
+    color: var(--test-color);
+  }
+</style>
+<span class="test-span">test</span>`;
+
+const TEST_PAGE = `
+  <div id="host"></div>
+  <script>
+    const div = document.querySelector("div");
+    div.attachShadow({ mode: "open" }).innerHTML = \`${SHADOW_DOM}\`;
+  </script>`;
+
+const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
+  TEST_PAGE
+)}`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Select the host and check that :host is matching");
+  await selectNode("#host", inspector);
+  let selector = getRuleViewRuleEditor(view, 1).selectorText;
+  is(
+    selector.querySelector(".matched").textContent,
+    ":host",
+    ":host should be matched."
+  );
+
+  info("Select a shadow dom element and check that :host is matching");
+  const nodeFront = await getNodeFrontInShadowDom(
+    ".test-span",
+    "#host",
+    inspector
+  );
+  await selectNode(nodeFront, inspector);
+
+  selector = getRuleViewRuleEditor(view, 3).selectorText;
+  is(
+    selector.querySelector(".matched").textContent,
+    ":host",
+    ":host should be matched."
+  );
+
+  info("Check that the variable from :host is correctly applied");
+  const setColor = getRuleViewProperty(
+    view,
+    "span",
+    "color"
+  ).valueSpan.querySelector(".ruleview-variable");
+  is(setColor.textContent, "--test-color", "--test-color is set correctly");
+  is(
+    setColor.dataset.variable,
+    "--test-color = red",
+    "--test-color's dataset.variable is set correctly"
+  );
+  const previewTooltip = await assertShowPreviewTooltip(view, setColor);
+  ok(
+    previewTooltip.panel.textContent.includes("--test-color = red"),
+    "CSS variable preview tooltip shows the expected CSS variable"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, setColor);
+});
diff --git a/devtools/client/inspector/rules/test/doc_author-sheet.html b/devtools/client/inspector/rules/test/doc_author-sheet.html
new file mode 100644
index 0000000000..7595bc2e79
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_author-sheet.html
@@ -0,0 +1,34 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>authored sheet test</title>
+
+  <style>
+  pre a {
+    color: orange;
+  }
+  </style>
+
+  <script>
+    "use strict";
+    var style = "data:text/css,a { background-color: seagreen; }";
+    var uri = SpecialPowers.Services.io.newURI(style);
+    var windowUtils = SpecialPowers.getDOMWindowUtils(window);
+    windowUtils.loadSheet(uri, windowUtils.AUTHOR_SHEET);
+  </script>
+
+</head>
+<body>
+  <input type=text placeholder=test></input>
+  <input type=color></input>
+  <input type=range></input>
+  <input type=number></input>
+  <progress></progress>
+  <blockquote type=cite>
+    <pre _moz_quote=true>
+      inspect <a href="foo">user agent</a> styles
+    </pre>
+  </blockquote>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_blob_stylesheet.html b/devtools/client/inspector/rules/test/doc_blob_stylesheet.html
new file mode 100644
index 0000000000..b408c2f6b0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_blob_stylesheet.html
@@ -0,0 +1,39 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+</html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Blob stylesheet sourcemap</title>
+</head>
+<body>
+<h1>Test</h1>
+<script>
+"use strict";
+
+var cssContent = `body {
+  background-color: black;
+}
+body > h1 {
+  color: white;
+}
+` +
+"//# sourceMappingURL=data:application/json;base64,ewoidmVyc2lvbiI6IDMsCiJtYX" +
+"BwaW5ncyI6ICJBQUFBLElBQUs7RUFDSCxnQkFBZ0IsRUFBRSxLQUFLOztBQUN2QixTQUFPO0VBQ0" +
+"wsS0FBSyxFQUFFLEtBQUsiLAoic291cmNlcyI6IFsidGVzdC5zY3NzIl0sCiJzb3VyY2VzQ29udG" +
+"VudCI6IFsiYm9keSB7XG4gIGJhY2tncm91bmQtY29sb3I6IGJsYWNrO1xuICAmID4gaDEge1xuIC" +
+"AgIGNvbG9yOiB3aGl0ZTsgIFxuICB9XG59XG4iXSwKIm5hbWVzIjogW10sCiJmaWxlIjogInRlc3" +
+"QuY3NzIgp9Cg==";
+var cssBlob = new Blob([cssContent], {type: "text/css"});
+var url = URL.createObjectURL(cssBlob);
+
+var head = document.querySelector("head");
+var link = document.createElement("link");
+link.rel = "stylesheet";
+link.type = "text/css";
+link.href = url;
+head.appendChild(link);
+</script>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html
new file mode 100644
index 0000000000..b025bcda2f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html
@@ -0,0 +1,63 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="auto-html-class-1 auto-html-class-2 auto-bold">
+<head>
+  <title>Class panel autocomplete test</title>
+
+  <link href="./doc_class_panel_autocomplete_stylesheet.css" rel="stylesheet" type="text/css">
+  <style>
+    .auto-inline-class-1 {
+      padding: 1em;
+    }
+    .auto-inline-class-2 {
+      padding: 2em;
+    }
+    .auto-inline-class-3 {
+      padding: 3em;
+    }
+
+    .auto-inline-class-1,
+    div.auto-inline-class-2,
+    p:first-of-type.auto-inline-class-3,
+    .auto-inline-class-4 {
+      background-color: blue;
+    }
+
+    :root .auto-bold .auto-inline-class-5 {
+      font-size: 1em;
+
+      & .auto-inline-nested-class-1,
+      &:is(.auto-inline-nested-class-2),
+      &:has(.auto-inline-nested-class-3) {
+        font-weight: bold;
+      }
+    }
+
+    @media (min-width: 1000px) {
+      .auto-inline-nested-class-4 {
+        color: black;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .auto-inline-nested-class-5 {
+          color: white;
+
+          &.auto-inline-nested-class-6 {
+            outline: 1px solid;
+          }
+        }
+      }
+    }
+  </style>
+  <script defer>
+    "use strict";
+      const x = document.styleSheets[0];
+      x.insertRule(".auto-cssom-primary-color { color: tomato; }", 1);
+  </script>
+</head>
+<body class="auto-body-class-1 auto-body-class-2 auto-bold">
+  <div id="auto-div-id-1" class="auto-div-class-1 auto-div-class-2 auto-bold"> the ocean </div>
+  <div id="auto-div-id-2" class="auto-div-class-1 auto-div-class-2 auto-bold"> roaring </div>
+  <div id="auto-div-id-3"> ahead </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_class_panel_autocomplete_stylesheet.css b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete_stylesheet.css
new file mode 100644
index 0000000000..473e14bbbd
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete_stylesheet.css
@@ -0,0 +1,42 @@
+.auto-stylesheet-class-1 {
+  padding: 1em;
+}
+.auto-stylesheet-class-2 {
+  padding: 2em;
+}
+.auto-stylesheet-class-3 {
+  padding: 3em;
+}
+
+.auto-stylesheet-class-1,
+div.auto-stylesheet-class-2,
+p:first-of-type.auto-stylesheet-class-3,
+.auto-stylesheet-class-4 {
+  background-color: blue;
+}
+
+:root .auto-bold .auto-stylesheet-class-5 {
+  font-size: 1em;
+
+  & .auto-stylesheet-nested-class-1,
+  &:is(.auto-stylesheet-nested-class-2),
+  &:has(.auto-stylesheet-nested-class-3) {
+    font-weight: bold;
+  }
+}
+
+@media (min-width: 1000px) {
+  .auto-stylesheet-nested-class-4 {
+    color: black;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .auto-stylesheet-nested-class-5 {
+      color: white;
+
+      &.auto-stylesheet-nested-class-6 {
+        outline: 1px solid;
+      }
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/doc_conditional_import.css b/devtools/client/inspector/rules/test/doc_conditional_import.css
new file mode 100644
index 0000000000..32529fc608
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_conditional_import.css
@@ -0,0 +1,3 @@
+h1, [test-hint=imported-conditional] {
+  color: rebeccapurple;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet.html b/devtools/client/inspector/rules/test/doc_content_stylesheet.html
new file mode 100644
index 0000000000..8af8ae950f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <title>test</title>
+
+  <link href="./doc_content_stylesheet_linked.css" rel="stylesheet" type="text/css">
+
+  <script>
+    /* eslint no-unused-vars: [2, {"vars": "local"}] */
+    "use strict";
+    // Load script.css
+    function loadCSS() {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.type = "text/css";
+      link.href = "./doc_content_stylesheet_script.css";
+      document.getElementsByTagName("head")[0].appendChild(link);
+    }
+  </script>
+
+  <style>
+    table {
+      border: 1px solid #000;
+    }
+  </style>
+</head>
+<body onload="loadCSS();">
+  <table id="target">
+    <tr>
+      <td>
+        <h3>Simple test</h3>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_imported.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported.css
new file mode 100644
index 0000000000..ea1a3d986b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported.css
@@ -0,0 +1,5 @@
+@import url("./doc_content_stylesheet_imported2.css");
+
+#target {
+  text-decoration: underline;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_imported2.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported2.css
new file mode 100644
index 0000000000..77c73299ea
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported2.css
@@ -0,0 +1,3 @@
+#target {
+  text-decoration: underline;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
new file mode 100644
index 0000000000..712ba78fb6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
@@ -0,0 +1,3 @@
+table  {
+  border-collapse: collapse;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
new file mode 100644
index 0000000000..5aa5e2c6cb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
@@ -0,0 +1,5 @@
+@import url("./doc_content_stylesheet_imported.css");
+
+table  {
+  opacity: 1;
+}
diff --git a/devtools/client/inspector/rules/test/doc_copystyles.css b/devtools/client/inspector/rules/test/doc_copystyles.css
new file mode 100644
index 0000000000..83f0c87b12
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_copystyles.css
@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body, #testid {
+  color: #F00;
+  background-color: #00F;
+  font-size: 12px;
+  border-color: #00F !important;
+  --var: "*/";
+}
diff --git a/devtools/client/inspector/rules/test/doc_copystyles.html b/devtools/client/inspector/rules/test/doc_copystyles.html
new file mode 100644
index 0000000000..da1b4c0b3f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_copystyles.html
@@ -0,0 +1,11 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>Test case for copying stylesheet in rule-view</title>
+    <link rel="stylesheet" type="text/css" href="doc_copystyles.css"/>
+  </head>
+  <body>
+    <div id='testid'>Styled Node</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_cssom.html b/devtools/client/inspector/rules/test/doc_cssom.html
new file mode 100644
index 0000000000..6c44cfcf98
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_cssom.html
@@ -0,0 +1,25 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>CSSOM test</title>
+
+  <script>
+    "use strict";
+    window.onload = function() {
+      const x = document.styleSheets[0];
+      x.insertRule("div { color: seagreen; }", 1);
+
+      // Add a rule with a leading newline, to test that inspector can handle it.
+      x.insertRule("\ndiv { font-weight: bold; }", 1);
+    };
+  </script>
+
+  <style>
+    span { }
+  </style>
+</head>
+<body>
+  <div id="target"> the ocean </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_custom.html b/devtools/client/inspector/rules/test/doc_custom.html
new file mode 100644
index 0000000000..09bf501d59
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_custom.html
@@ -0,0 +1,33 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      #testidSimple {
+	--background-color: blue;
+      }
+      .testclassSimple {
+	--background-color: green;
+      }
+
+      .testclassImportant {
+	--background-color: green !important;
+      }
+      #testidImportant {
+	--background-color: blue;
+      }
+
+      #testidDisable {
+	--background-color: blue;
+      }
+      .testclassDisable {
+	--background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="testidSimple" class="testclassSimple">Styled Node</div>
+    <div id="testidImportant" class="testclassImportant">Styled Node</div>
+    <div id="testidDisable" class="testclassDisable">Styled Node</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_edit_imported_selector.html b/devtools/client/inspector/rules/test/doc_edit_imported_selector.html
new file mode 100644
index 0000000000..5b2120850a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_edit_imported_selector.html
@@ -0,0 +1,13 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Edit a selector in an imported stylesheet</title>
+  <link rel="stylesheet" type="text/css" href="doc_content_stylesheet_script.css">
+</head>
+<body>
+  <div id="target">Styled node</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_filter.html b/devtools/client/inspector/rules/test/doc_filter.html
new file mode 100644
index 0000000000..cb2df9feb6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_filter.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<!-- 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/. -->
+<html>
+<head>
+  <title>Bug 1055181 - CSS Filter Editor Widget</title>
+  <style>
+    body {
+      filter: blur(2px) contrast(2);
+    }
+  </style>
+</head>
diff --git a/devtools/client/inspector/rules/test/doc_grid_area_gridline_names.html b/devtools/client/inspector/rules/test/doc_grid_area_gridline_names.html
new file mode 100644
index 0000000000..0fe8527c01
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_grid_area_gridline_names.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<style type='text/css'>
+  /* Implicit gridlines created from explicit grid areas. */
+  .wrapperA {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "header header header"
+      "main   main   main";
+  }
+
+  .header {
+    grid-column: header-start / header-end;
+    grid-row: header-start / header-end;
+  }
+
+  .main {
+    grid-area: main;
+  }
+
+  /* Implicit grid areas created from explicit gridlines */
+  .wrapperB {
+    display: grid;
+    grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end main-end];
+    grid-template-rows: [main-start] 100px [content-start] 100px [content-end main-end];
+  }
+
+  .contentArea {
+    grid-column: content-start / content-end;
+    grid-row: content-start / content-end;
+  }
+
+  .wrapperC {
+    display: grid;
+    grid-template-columns: [a-start b-end] 1fr [c];
+  }
+
+  .a {
+    grid-column: a-start / a-end;
+  }
+
+  .b {
+    grid-column: b-start / b-end;
+  }
+</style>
+<div>
+  <div class="wrapperA">
+    <div class="header">Header</div>
+    <div class="main">Content</div>
+  </div>
+  <div class="wrapperB">
+    <div class="contentArea">Implicit area named "content".</div>
+  </div>
+  <div class="wrapperC">
+    <div class="a">A.</div>
+    <div class="b">B.</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_grid_names.html b/devtools/client/inspector/rules/test/doc_grid_names.html
new file mode 100644
index 0000000000..0aefb18585
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_grid_names.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<style type='text/css'>
+  #grid {
+    display: grid;
+    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
+    grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
+  }
+  #cell3 {
+    grid-column: "col3-start";
+    grid-row: "row2-start";
+  }
+</style>
+<div id="grid">
+  <div>cell1</div>
+  <div id="cell2">cell2</div>
+  <div id="cell3">cell3</div>
+</div>
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
new file mode 100644
index 0000000000..fb537b53ae
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
@@ -0,0 +1,4 @@
+h1, [test-hint=imported-anonymous-layer--no-rule-layer] {
+    color:cyan;
+    outline: 10px solid cyan;
+}
diff --git a/devtools/client/inspector/rules/test/doc_imported_named_layer.css b/devtools/client/inspector/rules/test/doc_imported_named_layer.css
new file mode 100644
index 0000000000..3341a6ffe1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_imported_named_layer.css
@@ -0,0 +1,13 @@
+@import url(./doc_imported_nested_named_layer.css) layer(importedNestedLayer);
+@media screen {
+    h1, [test-hint=imported-named-layer--no-rule-layer] {
+        color:tomato;
+        border: 10px dotted currentColor;
+    }
+
+    @layer in-imported-stylesheet {
+        h1, [test-hint=imported-named-layer--named-layer] {
+            color: purple;
+        }
+    }
+}
diff --git a/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css b/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css
new file mode 100644
index 0000000000..e1f572c206
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css
@@ -0,0 +1,5 @@
+@layer in-imported-nested-stylesheet {
+    h1, [test-hint=imported-nested-named-layer--named-layer] {
+        color: lime;
+    }
+}
diff --git a/devtools/client/inspector/rules/test/doc_imported_no_layer.css b/devtools/client/inspector/rules/test/doc_imported_no_layer.css
new file mode 100644
index 0000000000..9290eebc08
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_imported_no_layer.css
@@ -0,0 +1,3 @@
+h1, [test-hint=imported-no-layer--no-rule-layer] {
+  color: gold;
+}
diff --git a/devtools/client/inspector/rules/test/doc_inactive_css_xul.xhtml b/devtools/client/inspector/rules/test/doc_inactive_css_xul.xhtml
new file mode 100644
index 0000000000..ebe347997b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_inactive_css_xul.xhtml
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<?xml-stylesheet href="chrome://devtools/skin/light-theme.css"?>
+<window class="theme-light"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        title="Inactive CSS for XUL documents">
+
+  <vbox>
+    <html:img
+      id="test-img-in-xul"
+      style="width:10px; height: 10px; grid-column-gap: 5px;">
+    </html:img>
+  </vbox>
+</window>
diff --git a/devtools/client/inspector/rules/test/doc_inline_sourcemap.html b/devtools/client/inspector/rules/test/doc_inline_sourcemap.html
new file mode 100644
index 0000000000..cb107d4244
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_inline_sourcemap.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+  <title>CSS source maps in inline stylesheets</title>
+</head>
+<body>
+  <div>CSS source maps in inline stylesheets</div>
+  <style>
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
+
+/*# sourceMappingURL=doc_sourcemaps.css.map */
+  </style>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_invalid_sourcemap.css b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.css
new file mode 100644
index 0000000000..ff96a6b542
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.css
@@ -0,0 +1,3 @@
+div { color: gold; }

+

+/*# sourceMappingURL=this-source-map-does-not-exist.css.map */
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_invalid_sourcemap.html b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.html
new file mode 100644
index 0000000000..cd3a74817f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>

+<html>

+<head>

+  <meta charset="utf-8">

+  <title>Invalid source map</title>

+  <link rel="stylesheet" type="text/css" href="doc_invalid_sourcemap.css">

+</head>

+<body>

+  <div>invalid source map</div>

+</body>

+</html>
diff --git a/devtools/client/inspector/rules/test/doc_keyframeLineNumbers.html b/devtools/client/inspector/rules/test/doc_keyframeLineNumbers.html
new file mode 100644
index 0000000000..9964bf5069
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_keyframeLineNumbers.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>keyframe line numbers test</title>
+  <style type="text/css">
+div {
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-name: CC;
+}
+
+span {
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-name: DD;
+}
+
+@keyframes CC {
+  from {
+    background: #ffffff;
+  }
+  to {
+    background: #f06;
+  }
+}
+
+@keyframes DD {
+  from {
+    background: seagreen;
+  }
+  to {
+    background: chartreuse;
+  }
+}
+  </style>
+</head>
+<body>
+  <div id="outer">
+    <span id="inner">lizards</div>
+  </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_keyframeanimation.css b/devtools/client/inspector/rules/test/doc_keyframeanimation.css
new file mode 100644
index 0000000000..64582ed358
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_keyframeanimation.css
@@ -0,0 +1,84 @@
+/* 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/. */
+
+.box {
+  height: 50px;
+  width: 50px;
+}
+
+.circle {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: #FFCB01;
+}
+
+#pacman {
+  width: 0px;
+  height: 0px;
+  border-right: 60px solid transparent;
+  border-top: 60px solid #FFCB01;
+  border-left: 60px solid #FFCB01;
+  border-bottom: 60px solid #FFCB01;
+  border-top-left-radius: 60px;
+  border-bottom-left-radius: 60px;
+  border-top-right-radius: 60px;
+  border-bottom-right-radius: 60px;
+  top: 120px;
+  left: 150px;
+  position: absolute;
+  animation-name: pacman;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-duration: 15s;
+}
+
+#boxy {
+  top: 170px;
+  left: 450px;
+  position: absolute;
+  animation: 4s linear 0s normal none infinite boxy;
+}
+
+
+#moxy {
+  animation-name: moxy, boxy;
+  animation-delay: 3.5s;
+  animation-duration: 2s;
+  top: 170px;
+  left: 650px;
+  position: absolute;
+}
+
+@-moz-keyframes pacman {
+  100% {
+    left: 750px;
+  }
+}
+
+@keyframes pacman {
+  100% {
+    left: 750px;
+  }
+}
+
+@keyframes boxy {
+  10% {
+    background-color: blue;
+  }
+
+  20% {
+    background-color: green;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes moxy {
+  to {
+    opacity: 0;
+  }
+}
diff --git a/devtools/client/inspector/rules/test/doc_keyframeanimation.html b/devtools/client/inspector/rules/test/doc_keyframeanimation.html
new file mode 100644
index 0000000000..4e02c32f05
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_keyframeanimation.html
@@ -0,0 +1,13 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>test case for keyframes rule in rule-view</title>
+    <link rel="stylesheet" type="text/css" href="doc_keyframeanimation.css"/>
+  </head>
+  <body>
+    <div id="pacman"></div>
+    <div id="boxy" class="circle"></div>
+    <div id="moxy" class="circle"></div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_media_queries.html b/devtools/client/inspector/rules/test/doc_media_queries.html
new file mode 100644
index 0000000000..f4706dad87
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_media_queries.html
@@ -0,0 +1,42 @@
+<html>
+<head>
+  <title>test</title>
+  <script type="application/javascript">
+
+  </script>
+  <style>
+    div {
+      width: 1000px;
+      height: 100px;
+      background-color: #f00;
+    }
+
+    @media screen and (min-width: 1px) {
+      div {
+        width: 200px;
+        background-color: yellow;
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      div {
+        background-color: darkblue;
+      }
+    }
+  </style>
+  <script>
+    "use strict";
+    if (window.location.search == "?constructed") {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(`div { z-index: 0 }`);
+      document.adoptedStyleSheets.push(sheet);
+    }
+  </script>
+</head>
+<body>
+<div></div>
+<iframe
+  src='https://example.org/document-builder.sjs?html=<style>html { background: cyan;} @media (prefers-color-scheme: dark) {html {background: darkred;}}'>
+</iframe>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_print_media_simulation.html b/devtools/client/inspector/rules/test/doc_print_media_simulation.html
new file mode 100644
index 0000000000..e0caa25296
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_print_media_simulation.html
@@ -0,0 +1,27 @@
+<html>
+<head>
+  <title>test print media simulation</title>
+  <script type="application/javascript">
+
+  </script>
+  <style>
+    div {
+      width: 1000px;
+      height: 100px;
+      background-color: #f00;
+    }
+
+    @media print {
+      div {
+        background-color: #00f;
+      }
+    }
+  </style>
+</head>
+<body>
+<div></div>
+<iframe
+  src='https://example.org/document-builder.sjs?html=<style>html { background-color: %23ff0;} @media print {html {background-color: %230ff;}}'>
+</iframe>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html
new file mode 100644
index 0000000000..a6251c613c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html
@@ -0,0 +1,188 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+
+body {
+    color: #333;
+}
+
+.box {
+    float:left;
+    width: 128px;
+    height: 128px;
+    background: #ddd;
+    padding: 32px;
+    margin: 32px;
+    position:relative;
+}
+
+.box:first-line {
+    color: orange;
+    background: red;
+}
+
+.box:first-letter {
+    color: green;
+}
+
+* {
+    cursor: default;
+}
+
+nothing {
+    cursor: pointer;
+}
+
+p::-moz-selection {
+    color: white;
+    background: black;
+}
+p::selection {
+    color: white;
+    background: black;
+}
+
+p:first-line {
+   background: blue;
+}
+p:first-letter {
+  color: red;
+  font-size: 130%;
+}
+
+.box:before {
+    background: green;
+    content: " ";
+    position: absolute;
+    height:32px;
+    width:32px;
+}
+
+.box:after {
+    background: red;
+    content: " ";
+    position: absolute;
+    border-radius: 50%;
+    height:32px;
+    width:32px;
+    top: 50%;
+    left: 50%;
+    margin-top: -16px;
+    margin-left: -16px;
+}
+
+.topleft:before {
+    top:0;
+    left:0;
+}
+
+.topleft:first-line {
+    color: orange;
+}
+.topleft::selection {
+    color: orange;
+}
+
+.topright:before {
+    top:0;
+    right:0;
+}
+
+.bottomright:before {
+    bottom:10px;
+    right:10px;
+    color: red;
+}
+
+.bottomright:before {
+    bottom:0;
+    right:0;
+}
+
+.bottomleft:before {
+    bottom:0;
+    left:0;
+}
+
+#list::marker {
+    color: purple;
+}
+
+dialog::backdrop {
+    background-color: transparent;
+}
+
+.highlights-container {
+    &::highlight(search) {
+        background-color: tomato;
+        color: gold;
+    }
+
+    &::highlight(search) {
+        color: white;
+    }
+
+    &::highlight(filter) {
+        background-color: purple;
+    }
+
+    &::highlight(unused) {
+        background-color: cyan;
+    }
+}
+
+
+    </style>
+  </head>
+  <body>
+    <h1>ruleview pseudoelement($("test"));</h1>
+
+    <div id="topleft" class="box topleft">
+        <p>Top Left<br />Position</p>
+    </div>
+
+    <div id="topright" class="box topright">
+        <p>Top Right<br />Position</p>
+    </div>
+
+    <div id="bottomright" class="box bottomright">
+        <p>Bottom Right<br />Position</p>
+    </div>
+
+    <div id="bottomleft" class="box bottomleft">
+        <p>Bottom Left<br />Position</p>
+    </div>
+
+    <ol>
+        <li id="list" class="box">List element</li>
+    </ol>
+
+    <dialog>In dialog</dialog>
+
+    <section class="highlights-container">
+        Firefox Developer Tools is a set of web developer tools built into Firefox.
+        You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
+    </section>
+
+    <script>
+        "use strict";
+        // This is the only way to have the ::backdrop style to be applied
+        document.querySelector("dialog").showModal()
+
+        // Register highlights for ::highlight pseudo elements
+        const highlightsContainer = document.querySelector(".highlights-container");
+
+        const searchRange = new Range();
+        searchRange.setStart(highlightsContainer.firstChild, 0);
+        searchRange.setEnd(highlightsContainer.firstChild, 10);
+        CSS.highlights.set("search", new globalThis.Highlight(searchRange));
+
+        const filterRange = new Range();
+        filterRange.setStart(highlightsContainer.firstChild, 20);
+        filterRange.setEnd(highlightsContainer.firstChild, 100);
+        CSS.highlights.set("filter", new globalThis.Highlight(filterRange));
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_ruleLineNumbers.html b/devtools/client/inspector/rules/test/doc_ruleLineNumbers.html
new file mode 100644
index 0000000000..5a157f384c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_ruleLineNumbers.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>simple testcase</title>
+  <style type="text/css">
+  #testid {
+    background-color: seagreen;
+  }
+
+  body {
+    color: chartreuse;
+  }
+  </style>
+</head>
+<body>
+	<div id="testid">simple testcase</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_rules_imported_stylesheet_edit.html b/devtools/client/inspector/rules/test/doc_rules_imported_stylesheet_edit.html
new file mode 100644
index 0000000000..f1c87fa0ab
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_rules_imported_stylesheet_edit.html
@@ -0,0 +1,4 @@
+<style type="text/css">
+  @import url("./sjs_imported_stylesheet_edit.sjs");
+</style>
+<body><div></div></body>
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.css b/devtools/client/inspector/rules/test/doc_sourcemaps.css
new file mode 100644
index 0000000000..a9b437a408
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.css
@@ -0,0 +1,7 @@
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
+
+/*# sourceMappingURL=doc_sourcemaps.css.map */
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.css.map b/devtools/client/inspector/rules/test/doc_sourcemaps.css.map
new file mode 100644
index 0000000000..0f7486fd91
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAGA,GAAI;EACF,KAAK,EAHU,OAAI;;AAMrB,IAAK;EACH,gBAAgB,EAAE,IAAI",
+"sources": ["doc_sourcemaps.scss"],
+"names": [],
+"file": "doc_sourcemaps.css"
+}
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.html b/devtools/client/inspector/rules/test/doc_sourcemaps.html
new file mode 100644
index 0000000000..0014e55fe9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="doc_sourcemaps.css"/>
+</head>
+<body>
+	<div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.scss b/devtools/client/inspector/rules/test/doc_sourcemaps.scss
new file mode 100644
index 0000000000..0ff6c471bb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.scss
@@ -0,0 +1,10 @@
+
+$paulrougetpink: #f06;
+
+div {
+  color: $paulrougetpink;
+}
+
+span {
+  background-color: #EEE;
+}
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps2.css b/devtools/client/inspector/rules/test/doc_sourcemaps2.css
new file mode 100644
index 0000000000..c3e4ae7b40
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css
@@ -0,0 +1,5 @@
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^
new file mode 100644
index 0000000000..a5e1f3c7a0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^
@@ -0,0 +1 @@
+X-SourceMap: doc_sourcemaps.css.map
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps2.html b/devtools/client/inspector/rules/test/doc_sourcemaps2.html
new file mode 100644
index 0000000000..e6990700e7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="doc_sourcemaps2.css"/>
+</head>
+<body>
+	<div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_style_editor_link.css b/devtools/client/inspector/rules/test/doc_style_editor_link.css
new file mode 100644
index 0000000000..e49e1f5871
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_style_editor_link.css
@@ -0,0 +1,3 @@
+div {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_test_image.png b/devtools/client/inspector/rules/test/doc_test_image.png
new file mode 100644
index 0000000000..769c636340
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_test_image.png
diff --git a/devtools/client/inspector/rules/test/doc_urls_clickable.css b/devtools/client/inspector/rules/test/doc_urls_clickable.css
new file mode 100644
index 0000000000..e2f77934e2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_urls_clickable.css
@@ -0,0 +1,9 @@
+.relative1 {
+    background-image: url(./doc_test_image.png);
+}
+.absolute {
+    background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png");
+}
+.base64 {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
+}
diff --git a/devtools/client/inspector/rules/test/doc_urls_clickable.html b/devtools/client/inspector/rules/test/doc_urls_clickable.html
new file mode 100644
index 0000000000..b0265a703e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_urls_clickable.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+
+    <link href="./doc_urls_clickable.css" rel="stylesheet" type="text/css">
+
+    <style>
+    .relative2 {
+        background-image: url(doc_test_image.png);
+    }
+    </style>
+  </head>
+  <body>
+
+    <div class="relative1">Background image #1 with relative path (loaded from external css)</div>
+
+    <div class="relative2">Background image #2 with relative path (loaded from style tag)</div>
+
+    <div class="absolute">Background image with absolute path (loaded from external css)</div>
+
+    <div class="base64">Background image with base64 url (loaded from external css)</div>
+
+    <div class="inline" style="background: url(doc_test_image.png);">Background image with relative path (loaded from style attribute)</div>
+
+    <div class="inline-resolved" style="background-image: url(./doc_test_image.png)">Background image with resolved relative path (loaded from style attribute)</div>
+
+    <div class="noimage">No background image :(</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_1.html b/devtools/client/inspector/rules/test/doc_variables_1.html
new file mode 100644
index 0000000000..5b7905f47e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_1.html
@@ -0,0 +1,23 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>variables test</title>
+
+  <style>
+    * {
+      --color: tomato;
+      --bg: violet;
+    }
+
+    div {
+      --color: chartreuse;
+      color: var(--color, red);
+      background-color: var(--not-set, var(--bg));
+    }
+  </style>
+</head>
+<body>
+  <div id="target" style="--bg: seagreen;"> the ocean </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_2.html b/devtools/client/inspector/rules/test/doc_variables_2.html
new file mode 100644
index 0000000000..4215ea87c6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_2.html
@@ -0,0 +1,45 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>variables test</title>
+  <style>
+    :root {
+      --var-border-px: 10px;
+      --var-border-style: solid;
+      --var-border-r: 255;
+      --var-border-g: 0;
+      --var-border-b: 0;
+    }
+    #a {
+      --var-defined-font-size: 60px;
+      font-size: var(--var-not-defined, var(--var-defined-font-size));
+    }
+    #b {
+      --var-defined-r-1: 255;
+      --var-defined-r-2: 0;
+      color: rgb(var(--var-defined-r-1, var(--var-defined-r-2)), 0, 0);
+    }
+    #c {
+      border: var(--var-undefined, var(--var-border-px)) var(--var-border-style) rgb(var(--var-border-r), var(--var-border-g), var(--var-border-b))
+    }
+    #d {
+      font-size: var(--var-undefined, 30px);
+    }
+    #e {
+      color: var(--var-undefined, var(--var-undefined-2, blue));
+    }
+    #f {
+      border-style: var(--var-undefined, var(--var-undefined-2, var(--var-undefined-3, solid)));
+    }
+  </style>
+</head>
+<body>
+  <div id="a">A</div><br>
+  <div id="b">B</div><br>
+  <div id="c">C</div><br>
+  <div id="d">D</div><br>
+  <div id="e">E</div><br>
+  <div id="f">F</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_3.html b/devtools/client/inspector/rules/test/doc_variables_3.html
new file mode 100644
index 0000000000..61027c7b23
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_3.html
@@ -0,0 +1,16 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html style="--COLOR: green; --background: black">
+<head>
+
+  <style>
+    div {
+      background: var(--background);
+      color: var(--COLOR);
+    }
+  </style>
+</head>
+<body>
+  <div id="target">test</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_4.html b/devtools/client/inspector/rules/test/doc_variables_4.html
new file mode 100644
index 0000000000..81441c67c2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_4.html
@@ -0,0 +1,23 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>variables test</title>
+  <style>
+    :root {
+      --10: 10px;
+      ---blue: blue;
+    }
+    #a {
+      font-size: var(--10);
+    }
+    #b {
+      color: var(---blue);
+    }
+  </style>
+</head>
+<body>
+  <div id="a">A</div><br>
+  <div id="b">B</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_visited.html b/devtools/client/inspector/rules/test/doc_visited.html
new file mode 100644
index 0000000000..b18e8c3da1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_visited.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style type='text/css'>
+    a:visited, #visited-and-other-matched-selector {
+      background-color: transparent;
+      border-color: lime;
+      color: rgba(0, 255, 0, 0.8);
+      font-size: 100px;
+      margin-left: 50px;
+      text-decoration-color: lime;
+      text-emphasis-color: seagreen;
+    }
+    a:visited { color: lime; }
+    a:link { color: blue; }
+    a { color: pink; }
+    </style>
+  </head>
+  <body>
+    <a href="./doc_visited.html" id="visited">visited link</a>
+    <a href="#" id="unvisited">unvisited link</a>
+    <a href="./doc_visited.html" id="visited-and-other-matched-selector">
+      visited and other matched selector
+    </a>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_visited_in_media_query.html b/devtools/client/inspector/rules/test/doc_visited_in_media_query.html
new file mode 100644
index 0000000000..ff95cfbc73
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_visited_in_media_query.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style type='text/css'>
+    @media (min-width:1px)
+    {
+      a {
+        color: lime;
+        margin-left: 1px;
+      }
+    }
+    </style>
+  </head>
+  <body>
+    <a href="./doc_visited_in_media_query.html" id="visited">visited link</a>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_visited_with_style_attribute.html b/devtools/client/inspector/rules/test/doc_visited_with_style_attribute.html
new file mode 100644
index 0000000000..0f07fb9d48
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_visited_with_style_attribute.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <a href="./doc_visited_with_style_attribute.html" style="margin: 0;" id="visited">visited link</a>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js
new file mode 100644
index 0000000000..254cfb8924
--- /dev/null
+++ b/devtools/client/inspector/rules/test/head.js
@@ -0,0 +1,1200 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
+});
+
+var {
+  getInplaceEditorForSpan: inplaceEditor,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+
+const {
+  COMPATIBILITY_TOOLTIP_MESSAGE,
+} = require("resource://devtools/client/inspector/rules/constants.js");
+
+const ROOT_TEST_DIR = getRootDirectory(gTestPath);
+
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/shared/locales/styleinspector.properties"
+);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
+});
+
+/**
+ * When a tooltip is closed, this ends up "commiting" the value changed within
+ * the tooltip (e.g. the color in case of a colorpicker) which, in turn, ends up
+ * setting the value of the corresponding css property in the rule-view.
+ * Use this function to close the tooltip and make sure the test waits for the
+ * ruleview-changed event.
+ * @param {SwatchBasedEditorTooltip} editorTooltip
+ * @param {CSSRuleView} view
+ */
+async function hideTooltipAndWaitForRuleViewChanged(editorTooltip, view) {
+  const onModified = view.once("ruleview-changed");
+  const onHidden = editorTooltip.tooltip.once("hidden");
+  editorTooltip.hide();
+  await onModified;
+  await onHidden;
+}
+
+/**
+ * Polls a given generator function waiting for it to return true.
+ *
+ * @param {Function} validatorFn
+ *        A validator generator function that returns a boolean.
+ *        This is called every few milliseconds to check if the result is true.
+ *        When it is true, the promise resolves.
+ * @param {String} name
+ *        Optional name of the test. This is used to generate
+ *        the success and failure messages.
+ * @return a promise that resolves when the function returned true or rejects
+ * if the timeout is reached
+ */
+var waitForSuccess = async function (validatorFn, desc = "untitled") {
+  let i = 0;
+  while (true) {
+    info("Checking: " + desc);
+    if (await validatorFn()) {
+      ok(true, "Success: " + desc);
+      break;
+    }
+    i++;
+    if (i > 10) {
+      ok(false, "Failure: " + desc);
+      break;
+    }
+    await new Promise(r => setTimeout(r, 200));
+  }
+};
+
+/**
+ * Simulate a color change in a given color picker tooltip, and optionally wait
+ * for a given element in the page to have its style changed as a result.
+ * Note that this function assumes that the colorpicker popup is already open
+ * and it won't close it after having selected the new color.
+ *
+ * @param {RuleView} ruleView
+ *        The related rule view instance
+ * @param {SwatchColorPickerTooltip} colorPicker
+ * @param {Array} newRgba
+ *        The new color to be set [r, g, b, a]
+ * @param {Object} expectedChange
+ *        Optional object that needs the following props:
+ *          - {String} selector The selector to the element in the page that
+ *            will have its style changed.
+ *          - {String} name The style name that will be changed
+ *          - {String} value The expected style value
+ * The style will be checked like so: getComputedStyle(element)[name] === value
+ */
+var simulateColorPickerChange = async function (
+  ruleView,
+  colorPicker,
+  newRgba,
+  expectedChange
+) {
+  let onComputedStyleChanged;
+  if (expectedChange) {
+    const { selector, name, value } = expectedChange;
+    onComputedStyleChanged = waitForComputedStyleProperty(
+      selector,
+      null,
+      name,
+      value
+    );
+  }
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  info("Getting the spectrum colorpicker object");
+  const spectrum = colorPicker.spectrum;
+  info("Setting the new color");
+  spectrum.rgb = newRgba;
+  info("Applying the change");
+  spectrum.updateUI();
+  spectrum.onChange();
+  info("Waiting for rule-view to update");
+  await onRuleViewChanged;
+
+  if (expectedChange) {
+    info("Waiting for the style to be applied on the page");
+    await onComputedStyleChanged;
+  }
+};
+
+/**
+ * Open the color picker popup for a given property in a given rule and
+ * simulate a color change. Optionally wait for a given element in the page to
+ * have its style changed as a result.
+ *
+ * @param {RuleView} view
+ *        The related rule view instance
+ * @param {Number} ruleIndex
+ *        Which rule to target in the rule view
+ * @param {Number} propIndex
+ *        Which property to target in the rule
+ * @param {Array} newRgba
+ *        The new color to be set [r, g, b, a]
+ * @param {Object} expectedChange
+ *        Optional object that needs the following props:
+ *          - {String} selector The selector to the element in the page that
+ *            will have its style changed.
+ *          - {String} name The style name that will be changed
+ *          - {String} value The expected style value
+ * The style will be checked like so: getComputedStyle(element)[name] === value
+ */
+var openColorPickerAndSelectColor = async function (
+  view,
+  ruleIndex,
+  propIndex,
+  newRgba,
+  expectedChange
+) {
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  const propEditor = ruleEditor.rule.textProps[propIndex].editor;
+  const swatch = propEditor.valueSpan.querySelector(".ruleview-colorswatch");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+
+  info("Opening the colorpicker by clicking the color swatch");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(view, cPicker, newRgba, expectedChange);
+
+  return { propEditor, swatch, cPicker };
+};
+
+/**
+ * Open the cubicbezier popup for a given property in a given rule and
+ * simulate a curve change. Optionally wait for a given element in the page to
+ * have its style changed as a result.
+ *
+ * @param {RuleView} view
+ *        The related rule view instance
+ * @param {Number} ruleIndex
+ *        Which rule to target in the rule view
+ * @param {Number} propIndex
+ *        Which property to target in the rule
+ * @param {Array} coords
+ *        The new coordinates to be used, e.g. [0.1, 2, 0.9, -1]
+ * @param {Object} expectedChange
+ *        Optional object that needs the following props:
+ *          - {String} selector The selector to the element in the page that
+ *            will have its style changed.
+ *          - {String} name The style name that will be changed
+ *          - {String} value The expected style value
+ * The style will be checked like so: getComputedStyle(element)[name] === value
+ */
+var openCubicBezierAndChangeCoords = async function (
+  view,
+  ruleIndex,
+  propIndex,
+  coords,
+  expectedChange
+) {
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  const propEditor = ruleEditor.rule.textProps[propIndex].editor;
+  const swatch = propEditor.valueSpan.querySelector(".ruleview-bezierswatch");
+  const bezierTooltip = view.tooltips.getTooltip("cubicBezier");
+
+  info("Opening the cubicBezier by clicking the swatch");
+  const onBezierWidgetReady = bezierTooltip.once("ready");
+  swatch.click();
+  await onBezierWidgetReady;
+
+  const widget = await bezierTooltip.widget;
+
+  info("Simulating a change of curve in the widget");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  widget.coordinates = coords;
+  await onRuleViewChanged;
+
+  if (expectedChange) {
+    info("Waiting for the style to be applied on the page");
+    const { selector, name, value } = expectedChange;
+    await waitForComputedStyleProperty(selector, null, name, value);
+  }
+
+  return { propEditor, swatch, bezierTooltip };
+};
+
+/**
+ * Simulate adding a new property in an existing rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {Number} ruleIndex
+ *        The index of the rule to use.
+ * @param {String} name
+ *        The name for the new property
+ * @param {String} value
+ *        The value for the new property
+ * @param {Object=} options
+ * @param {String=} options.commitValueWith
+ *        Which key should be used to commit the new value. VK_RETURN is used by
+ *        default, but tests might want to use another key to test cancelling
+ *        for exemple.
+ * @param {Boolean=} options.blurNewProperty
+ *        After the new value has been added, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
+ * @return {TextProperty} The instance of the TextProperty that was added
+ */
+var addProperty = async function (
+  view,
+  ruleIndex,
+  name,
+  value,
+  { commitValueWith = "VK_TAB", blurNewProperty = true } = {}
+) {
+  info("Adding new property " + name + ":" + value + " to rule " + ruleIndex);
+
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+  const numOfProps = ruleEditor.rule.textProps.length;
+
+  const onMutations = new Promise(r => {
+    // If the rule index is 0, then we are updating the rule for the "element"
+    // selector in the rule view.
+    // This rule is actually updating the style attribute of the element, and
+    // therefore we can expect mutations.
+    // For any other rule index, no mutation should be created, we can resolve
+    // immediately.
+    if (ruleIndex !== 0) {
+      r();
+    }
+
+    // Use CSS.escape for the name in order to match the logic at
+    // devtools/client/fronts/inspector/rule-rewriter.js
+    // This leads to odd values in the style attribute and might change in the
+    // future. See https://bugzilla.mozilla.org/show_bug.cgi?id=1765943
+    const expectedAttributeValue = `${CSS.escape(name)}: ${value}`;
+    view.inspector.walker.on(
+      "mutations",
+      function onWalkerMutations(mutations) {
+        // Wait until we receive a mutation which updates the style attribute
+        // with the expected value.
+        const receivedLastMutation = mutations.some(
+          mut =>
+            mut.attributeName === "style" &&
+            mut.newValue.includes(expectedAttributeValue)
+        );
+        if (receivedLastMutation) {
+          view.inspector.walker.off("mutations", onWalkerMutations);
+          r();
+        }
+      }
+    );
+  });
+
+  info("Adding name " + name);
+  editor.input.value = name;
+  is(
+    editor.input.getAttribute("aria-label"),
+    "New property name",
+    "New property name input has expected aria-label"
+  );
+
+  const onNameAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_TAB", {}, view.styleWindow);
+  await onNameAdded;
+
+  // Focus has moved to the value inplace-editor automatically.
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  const textProps = ruleEditor.rule.textProps;
+  const textProp = textProps[textProps.length - 1];
+
+  is(
+    ruleEditor.rule.textProps.length,
+    numOfProps + 1,
+    "A new test property was added"
+  );
+  is(
+    editor,
+    inplaceEditor(textProp.editor.valueSpan),
+    "The inplace editor appeared for the value"
+  );
+
+  info("Adding value " + value);
+  // Setting the input value schedules a preview to be shown in 10ms which
+  // triggers a ruleview-changed event (see bug 1209295).
+  const onPreview = view.once("ruleview-changed");
+  editor.input.value = value;
+
+  ok(
+    !!editor.input.getAttribute("aria-labelledby"),
+    "The value input has an aria-labelledby attribute…"
+  );
+  is(
+    editor.input.getAttribute("aria-labelledby"),
+    textProp.editor.nameSpan.id,
+    "…which references the property name input"
+  );
+
+  view.debounce.flush();
+  await onPreview;
+
+  const onValueAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey(commitValueWith, {}, view.styleWindow);
+  await onValueAdded;
+
+  info(
+    "Waiting for DOM mutations in case the property was added to the element style"
+  );
+  await onMutations;
+
+  if (blurNewProperty) {
+    view.styleDocument.activeElement.blur();
+  }
+
+  return textProp;
+};
+
+/**
+ * Change the name of a property in a rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel.
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be changed.
+ * @param {String} name
+ *        The new property name.
+ */
+var renameProperty = async function (view, textProp, name) {
+  await focusEditableField(view, textProp.editor.nameSpan);
+
+  const onNameDone = view.once("ruleview-changed");
+  info(`Rename the property to ${name}`);
+  EventUtils.sendString(name, view.styleWindow);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  info("Wait for property name.");
+  await onNameDone;
+
+  if (
+    !Services.prefs.getBoolPref("devtools.inspector.rule-view.focusNextOnEnter")
+  ) {
+    return;
+  }
+
+  // Renaming the property auto-advances the focus to the value input. Exiting without
+  // committing will still fire a change event. @see TextPropertyEditor._onValueDone().
+  // Wait for that event too before proceeding.
+  const onValueDone = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  info("Wait for property value.");
+  await onValueDone;
+};
+
+/**
+ * Simulate removing a property from an existing rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be removed
+ * @param {Boolean} blurNewProperty
+ *        After the property has been removed, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
+ */
+var removeProperty = async function (view, textProp, blurNewProperty = true) {
+  await focusEditableField(view, textProp.editor.nameSpan);
+
+  const onModifications = view.once("ruleview-changed");
+  info("Deleting the property name now");
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.styleWindow);
+  EventUtils.synthesizeKey("VK_TAB", {}, view.styleWindow);
+  await onModifications;
+
+  if (blurNewProperty) {
+    view.styleDocument.activeElement.blur();
+  }
+};
+
+/**
+ * Simulate clicking the enable/disable checkbox next to a property in a rule.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be enabled/disabled
+ */
+var togglePropStatus = async function (view, textProp) {
+  const onRuleViewRefreshed = view.once("ruleview-changed");
+  textProp.editor.enable.click();
+  await onRuleViewRefreshed;
+};
+
+/**
+ * Create a new rule by clicking on the "add rule" button.
+ * This will leave the selector inplace-editor active.
+ *
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @return a promise that resolves after the rule has been added
+ */
+async function addNewRule(inspector, view) {
+  const onNewRuleAdded = view.once("new-rule-added");
+  info("Adding the new rule using the button");
+  view.addRuleButton.click();
+
+  info("Waiting for new-rule-added event…");
+  await onNewRuleAdded;
+  info("…received new-rule-added");
+}
+
+/**
+ * Create a new rule by clicking on the "add rule" button, dismiss the editor field and
+ * verify that the selector is correct.
+ *
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} expectedSelector
+ *        The value we expect the selector to have
+ * @param {Number} expectedIndex
+ *        The index we expect the rule to have in the rule-view
+ * @return a promise that resolves after the rule has been added
+ */
+async function addNewRuleAndDismissEditor(
+  inspector,
+  view,
+  expectedSelector,
+  expectedIndex
+) {
+  await addNewRule(inspector, view);
+
+  info("Getting the new rule at index " + expectedIndex);
+  const ruleEditor = getRuleViewRuleEditor(view, expectedIndex);
+  const editor = ruleEditor.selectorText.ownerDocument.activeElement;
+  is(
+    editor.value,
+    expectedSelector,
+    "The editor for the new selector has the correct value: " + expectedSelector
+  );
+
+  info("Pressing escape to leave the editor");
+  EventUtils.synthesizeKey("KEY_Escape");
+
+  is(
+    ruleEditor.selectorText.textContent,
+    expectedSelector,
+    "The new selector has the correct text: " + expectedSelector
+  );
+}
+
+/**
+ * Simulate a sequence of non-character keys (return, escape, tab) and wait for
+ * a given element to receive the focus.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {DOMNode} element
+ *        The element that should be focused
+ * @param {Array} keys
+ *        Array of non-character keys, the part that comes after "DOM_VK_" eg.
+ *        "RETURN", "ESCAPE"
+ * @return a promise that resolves after the element received the focus
+ */
+async function sendKeysAndWaitForFocus(view, element, keys) {
+  const onFocus = once(element, "focus", true);
+  for (const key of keys) {
+    EventUtils.sendKey(key, view.styleWindow);
+  }
+  await onFocus;
+}
+
+/**
+ * Wait for a markupmutation event on the inspector that is for a style modification.
+ * @param {InspectorPanel} inspector
+ * @return {Promise}
+ */
+function waitForStyleModification(inspector) {
+  return new Promise(function (resolve) {
+    function checkForStyleModification(mutations) {
+      for (const mutation of mutations) {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "style"
+        ) {
+          inspector.off("markupmutation", checkForStyleModification);
+          resolve();
+          return;
+        }
+      }
+    }
+    inspector.on("markupmutation", checkForStyleModification);
+  });
+}
+
+/**
+ * Click on the icon next to the selector of a CSS rule in the Rules view
+ * to toggle the selector highlighter. If a selector highlighter is not already visible
+ * for the given selector, wait for it to be shown. Otherwise, wait for it to be hidden.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the Rules view
+ * @param {String} selectorText
+ *        The selector of the CSS rule to look for
+ * @param {Number} index
+ *        If there are more CSS rules with the same selector, use this index
+ *        to determine which one should be retrieved. Defaults to 0 (first)
+ */
+async function clickSelectorIcon(view, selectorText, index = 0) {
+  const { inspector } = view;
+  const rule = getRuleViewRule(view, selectorText, index);
+
+  info(`Waiting for icon to be available for selector: ${selectorText}`);
+  const icon = await waitFor(() => {
+    return rule.querySelector(".js-toggle-selector-highlighter");
+  });
+
+  // Grab the actual selector associated with the matched icon.
+  // For inline styles, the CSS rule with the "element" selector actually points to
+  // a generated unique selector, for example: "div:nth-child(1)".
+  // The selector highlighter is invoked with this unique selector.
+  // Continuing to use selectorText ("element") would fail some of the checks below.
+  const selector = icon.dataset.computedSelector;
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  // If there is an active selector highlighter, get its configuration options.
+  // Will be undefined if there isn't an active selector highlighter.
+  const options = inspector.highlighters.getOptionsForActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+
+  // If there is already a highlighter visible for this selector,
+  // wait for hidden event. Otherwise, wait for shown event.
+  const waitForEvent =
+    options?.selector === selector
+      ? waitForHighlighterTypeHidden(inspector.highlighters.TYPES.SELECTOR)
+      : waitForHighlighterTypeShown(inspector.highlighters.TYPES.SELECTOR);
+
+  // Boolean flag whether we waited for a highlighter shown event
+  const waitedForShown = options?.selector !== selector;
+
+  info(`Click the icon for selector: ${selectorText}`);
+  icon.scrollIntoView();
+  EventUtils.synthesizeMouseAtCenter(icon, {}, view.styleWindow);
+
+  // Promise resolves with event data from either highlighter shown or hidden event.
+  const data = await waitForEvent;
+  return { ...data, isShown: waitedForShown };
+}
+/**
+ * Toggle one of the checkboxes inside the class-panel. Resolved after the DOM mutation
+ * has been recorded.
+ * @param {CssRuleView} view The rule-view instance.
+ * @param {String} name The class name to find the checkbox.
+ */
+async function toggleClassPanelCheckBox(view, name) {
+  info(`Clicking on checkbox for class ${name}`);
+  const checkBox = [
+    ...view.classPanel.querySelectorAll("[type=checkbox]"),
+  ].find(box => {
+    return box.dataset.name === name;
+  });
+
+  const onMutation = view.inspector.once("markupmutation");
+  checkBox.click();
+  info("Waiting for a markupmutation as a result of toggling this class");
+  await onMutation;
+}
+
+/**
+ * Verify the content of the class-panel.
+ * @param {CssRuleView} view The rule-view instance
+ * @param {Array} classes The list of expected classes. Each item in this array is an
+ * object with the following properties: {name: {String}, state: {Boolean}}
+ */
+function checkClassPanelContent(view, classes) {
+  const checkBoxNodeList = view.classPanel.querySelectorAll("[type=checkbox]");
+  is(
+    checkBoxNodeList.length,
+    classes.length,
+    "The panel contains the expected number of checkboxes"
+  );
+
+  for (let i = 0; i < classes.length; i++) {
+    is(
+      checkBoxNodeList[i].dataset.name,
+      classes[i].name,
+      `Checkbox ${i} has the right class name`
+    );
+    is(
+      checkBoxNodeList[i].checked,
+      classes[i].state,
+      `Checkbox ${i} has the right state`
+    );
+  }
+}
+
+/**
+ * Opens the eyedropper from the colorpicker tooltip
+ * by selecting the colorpicker and then selecting the eyedropper icon
+ * @param {view} ruleView
+ * @param {swatch} color swatch of a particular property
+ */
+async function openEyedropper(view, swatch) {
+  const tooltip = view.tooltips.getTooltip("colorPicker").tooltip;
+
+  info("Click on the swatch");
+  const onColorPickerReady = view.tooltips
+    .getTooltip("colorPicker")
+    .once("ready");
+  EventUtils.synthesizeMouseAtCenter(swatch, {}, swatch.ownerGlobal);
+  await onColorPickerReady;
+
+  const dropperButton = tooltip.container.querySelector("#eyedropper-button");
+
+  info("Click on the eyedropper icon");
+  const onOpened = tooltip.once("eyedropper-opened");
+  dropperButton.click();
+  await onOpened;
+}
+
+/**
+ * Gets a set of declarations for a rule index.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {boolean} addCompatibilityData
+ *        Optional argument to add compatibility dat with the property data
+ *
+ * @returns A Promise that resolves with a Map containing stringified property declarations e.g.
+ *          [
+ *            {
+ *              "color:red":
+ *                {
+ *                  propertyName: "color",
+ *                  propertyValue: "red",
+ *                  warning: "This won't work",
+ *                  used: true,
+ *                  compatibilityData: {
+ *                    isCompatible: true,
+ *                  },
+ *                }
+ *            },
+ *            ...
+ *          ]
+ */
+async function getPropertiesForRuleIndex(
+  view,
+  ruleIndex,
+  addCompatibilityData = false
+) {
+  const declaration = new Map();
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+
+  for (const currProp of ruleEditor?.rule?.textProps || []) {
+    const icon = currProp.editor.unusedState;
+    const unused = currProp.editor.element.classList.contains("unused");
+
+    let compatibilityData;
+    let compatibilityIcon;
+    if (addCompatibilityData) {
+      compatibilityData = await currProp.isCompatible();
+      compatibilityIcon = currProp.editor.compatibilityState;
+    }
+
+    declaration.set(`${currProp.name}:${currProp.value}`, {
+      propertyName: currProp.name,
+      propertyValue: currProp.value,
+      icon,
+      data: currProp.isUsed(),
+      warning: unused,
+      used: !unused,
+      ...(addCompatibilityData
+        ? {
+            compatibilityData,
+            compatibilityIcon,
+          }
+        : {}),
+    });
+  }
+
+  return declaration;
+}
+
+/**
+ * Toggle a declaration disabled or enabled.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance
+ * @param {Number} ruleIndex
+ *        The index of the CSS rule where we can find the declaration to be
+ *        toggled.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function toggleDeclaration(view, ruleIndex, declaration) {
+  const textProp = getTextProperty(view, ruleIndex, declaration);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  ok(textProp, `Declaration "${dec}" found`);
+
+  const newStatus = textProp.enabled ? "disabled" : "enabled";
+  info(`Toggling declaration "${dec}" of rule ${ruleIndex} to ${newStatus}`);
+
+  await togglePropStatus(view, textProp);
+  info("Toggled successfully.");
+}
+
+/**
+ * Update a declaration from a CSS rule in the Rules view
+ * by changing its property name, property value or both.
+ *
+ * @param {RuleView} view
+ *        Instance of RuleView.
+ * @param {Number} ruleIndex
+ *        The index of the CSS rule where to find the declaration.
+ * @param {Object} declaration
+ *        An object representing the target declaration e.g. { color: red }.
+ * @param {Object} newDeclaration
+ *        An object representing the desired updated declaration e.g. { display: none }.
+ */
+async function updateDeclaration(
+  view,
+  ruleIndex,
+  declaration,
+  newDeclaration = {}
+) {
+  const textProp = getTextProperty(view, ruleIndex, declaration);
+  const [[name, value]] = Object.entries(declaration);
+  const [[newName, newValue]] = Object.entries(newDeclaration);
+
+  if (newName && name !== newName) {
+    info(
+      `Updating declaration ${name}:${value};
+      Changing ${name} to ${newName}`
+    );
+    await renameProperty(view, textProp, newName);
+  }
+
+  if (newValue && value !== newValue) {
+    info(
+      `Updating declaration ${name}:${value};
+      Changing ${value} to ${newValue}`
+    );
+    await setProperty(view, textProp, newValue);
+  }
+}
+
+/**
+ * Check whether the given CSS declaration is compatible or not
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ * @param {Object} options
+ * @param {string | undefined} options.expected
+ *        Expected message ID for the given incompatible property.
+ * If the expected message is not specified (undefined), the given declaration
+ * is inferred as cross-browser compatible and is tested for same.
+ * @param {string | null | undefined} options.expectedLearnMoreUrl
+ *        Expected learn more link. Pass `null` to check that no "Learn more" link is displayed.
+ */
+async function checkDeclarationCompatibility(
+  view,
+  ruleIndex,
+  declaration,
+  { expected, expectedLearnMoreUrl }
+) {
+  const declarations = await getPropertiesForRuleIndex(view, ruleIndex, true);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  const { compatibilityData } = declarations.get(dec);
+
+  is(
+    !expected,
+    compatibilityData.isCompatible,
+    `"${dec}" has the correct compatibility status in the payload`
+  );
+
+  is(compatibilityData.msgId, expected, `"${dec}" has expected message ID`);
+
+  if (expected) {
+    await checkInteractiveTooltip(
+      view,
+      "compatibility-tooltip",
+      ruleIndex,
+      declaration
+    );
+  }
+
+  if (expectedLearnMoreUrl !== undefined) {
+    // Show the tooltip
+    const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+    const onTooltipReady = tooltip.once("shown");
+    const { compatibilityIcon } = declarations.get(dec);
+    await view.tooltips.onInteractiveTooltipTargetHover(compatibilityIcon);
+    tooltip.show(compatibilityIcon);
+    await onTooltipReady;
+
+    const learnMoreEl = tooltip.panel.querySelector(".link");
+    if (expectedLearnMoreUrl === null) {
+      ok(!learnMoreEl, `"${dec}" has no "Learn more" link`);
+    } else {
+      ok(learnMoreEl, `"${dec}" has a "Learn more" link`);
+
+      const { link } = await simulateLinkClick(learnMoreEl);
+      is(
+        link,
+        expectedLearnMoreUrl,
+        `Click on ${dec} "Learn more" link navigates user to expected url`
+      );
+    }
+
+    // Hide the tooltip.
+    const onTooltipHidden = tooltip.once("hidden");
+    tooltip.hide();
+    await onTooltipHidden;
+  }
+}
+
+/**
+ * Check that a declaration is marked inactive and that it has the expected
+ * warning.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function checkDeclarationIsInactive(view, ruleIndex, declaration) {
+  const declarations = await getPropertiesForRuleIndex(view, ruleIndex);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  const { used, warning } = declarations.get(dec);
+
+  ok(!used, `"${dec}" is inactive`);
+  ok(warning, `"${dec}" has a warning`);
+
+  await checkInteractiveTooltip(
+    view,
+    "inactive-css-tooltip",
+    ruleIndex,
+    declaration
+  );
+}
+
+/**
+ * Check that a declaration is marked active.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function checkDeclarationIsActive(view, ruleIndex, declaration) {
+  const declarations = await getPropertiesForRuleIndex(view, ruleIndex);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  const { used, warning } = declarations.get(dec);
+
+  ok(used, `${dec} is active`);
+  ok(!warning, `${dec} has no warning`);
+}
+
+/**
+ * Check that a tooltip contains the correct value.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ *  @param {string} type
+ *        The interactive tooltip type being tested.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function checkInteractiveTooltip(view, type, ruleIndex, declaration) {
+  // Get the declaration
+  const declarations = await getPropertiesForRuleIndex(
+    view,
+    ruleIndex,
+    type === "compatibility-tooltip"
+  );
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+
+  // Get the relevant icon and tooltip payload data
+  let icon;
+  let data;
+  if (type === "inactive-css-tooltip") {
+    ({ icon, data } = declarations.get(dec));
+  } else {
+    const { compatibilityIcon, compatibilityData } = declarations.get(dec);
+    icon = compatibilityIcon;
+    data = compatibilityData;
+  }
+
+  // Get the tooltip.
+  const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+
+  // Get the necessary tooltip helper to fetch the Fluent template.
+  let tooltipHelper;
+  if (type === "inactive-css-tooltip") {
+    tooltipHelper = view.tooltips.inactiveCssTooltipHelper;
+  } else {
+    tooltipHelper = view.tooltips.compatibilityTooltipHelper;
+  }
+
+  // Get the HTML template.
+  const template = tooltipHelper.getTemplate(data, tooltip);
+
+  // Translate the template using Fluent.
+  const { doc } = tooltip;
+  await doc.l10n.translateFragment(template);
+
+  // Get the expected HTML content of the now translated template.
+  const expected = template.firstElementChild.outerHTML;
+
+  // Show the tooltip for the correct icon.
+  const onTooltipReady = tooltip.once("shown");
+  await view.tooltips.onInteractiveTooltipTargetHover(icon);
+  tooltip.show(icon);
+  await onTooltipReady;
+
+  // Get the tooltip's actual HTML content.
+  const actual = tooltip.panel.firstElementChild.outerHTML;
+
+  // Hide the tooltip.
+  const onTooltipHidden = tooltip.once("hidden");
+  tooltip.hide();
+  await onTooltipHidden;
+
+  // Finally, check the values.
+  is(actual, expected, "Tooltip contains the correct value.");
+}
+
+/**
+ * CSS compatibility test runner.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox.
+ * @param {Array} tests
+ *        An array of test object for this method to consume e.g.
+ *          [
+ *            {
+ *              selector: "#flex-item",
+ *              rules: [
+ *                // Rule Index: 0
+ *                {
+ *                  // If the object doesn't include the "expected"
+ *                  // key, we consider the declaration as
+ *                  // cross-browser compatible and test for same
+ *                  color: { value: "green" },
+ *                },
+ *                // Rule Index: 1
+ *                {
+ *                  cursor:
+ *                  {
+ *                    value: "grab",
+ *                    expected: INCOMPATIBILITY_TOOLTIP_MESSAGE.default,
+ *                    expectedLearnMoreUrl: "https://developer.mozilla.org/en-US/docs/Web/CSS/cursor",
+ *                  },
+ *                },
+ *              ],
+ *            },
+ *            ...
+ *          ]
+ */
+async function runCSSCompatibilityTests(view, inspector, tests) {
+  for (const test of tests) {
+    if (test.selector) {
+      await selectNode(test.selector, inspector);
+    }
+
+    for (const [ruleIndex, rules] of test.rules.entries()) {
+      for (const rule in rules) {
+        await checkDeclarationCompatibility(
+          view,
+          ruleIndex,
+          {
+            [rule]: rules[rule].value,
+          },
+          {
+            expected: rules[rule].expected,
+            expectedLearnMoreUrl: rules[rule].expectedLearnMoreUrl,
+          }
+        );
+      }
+    }
+  }
+}
+
+/**
+ * Inactive CSS test runner.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox.
+ * @param {Array} tests
+ *        An array of test object for this method to consume e.g.
+ *          [
+ *            {
+ *              selector: "#flex-item",
+ *              activeDeclarations: [
+ *                {
+ *                  declarations: {
+ *                    "order": "2",
+ *                  },
+ *                  ruleIndex: 0,
+ *                },
+ *                {
+ *                  declarations: {
+ *                    "flex-basis": "auto",
+ *                    "flex-grow": "1",
+ *                    "flex-shrink": "1",
+ *                  },
+ *                  ruleIndex: 1,
+ *                },
+ *              ],
+ *              inactiveDeclarations: [
+ *                {
+ *                  declaration: {
+ *                    "flex-direction": "row",
+ *                  },
+ *                  ruleIndex: 1,
+ *                },
+ *              ],
+ *            },
+ *            ...
+ *          ]
+ */
+async function runInactiveCSSTests(view, inspector, tests) {
+  for (const test of tests) {
+    if (test.selector) {
+      await selectNode(test.selector, inspector);
+    }
+
+    if (test.activeDeclarations) {
+      info("Checking whether declarations are marked as used.");
+
+      for (const activeDeclarations of test.activeDeclarations) {
+        for (const [name, value] of Object.entries(
+          activeDeclarations.declarations
+        )) {
+          await checkDeclarationIsActive(view, activeDeclarations.ruleIndex, {
+            [name]: value,
+          });
+        }
+      }
+    }
+
+    if (test.inactiveDeclarations) {
+      info("Checking that declarations are unused and have a warning.");
+
+      for (const inactiveDeclaration of test.inactiveDeclarations) {
+        await checkDeclarationIsInactive(
+          view,
+          inactiveDeclaration.ruleIndex,
+          inactiveDeclaration.declaration
+        );
+      }
+    }
+  }
+}
+
+/**
+ * Return the checkbox element from the Rules view corresponding
+ * to the given pseudo-class.
+ *
+ * @param  {Object} view
+ *         Instance of RuleView.
+ * @param  {String} pseudo
+ *         Pseudo-class, like :hover, :active, :focus, etc.
+ * @return {HTMLElement}
+ */
+function getPseudoClassCheckbox(view, pseudo) {
+  return view.pseudoClassCheckboxes.filter(
+    checkbox => checkbox.value === pseudo
+  )[0];
+}
+
+/**
+ * Check that the CSS variable output has the expected class name and data attribute.
+ *
+ * @param {RulesView} view
+ *        The RulesView instance.
+ * @param {String} selector
+ *        Selector name for a rule. (e.g. "div", "div::before" and ".sample" etc);
+ * @param {String} propertyName
+ *        Property name (e.g. "color" and "padding-top" etc);
+ * @param {String} expectedClassName
+ *        The class name the variable should have.
+ * @param {String} expectedDatasetValue
+ *        The variable data attribute value.
+ */
+function checkCSSVariableOutput(
+  view,
+  selector,
+  propertyName,
+  expectedClassName,
+  expectedDatasetValue
+) {
+  const target = getRuleViewProperty(
+    view,
+    selector,
+    propertyName
+  ).valueSpan.querySelector(`.${expectedClassName}`);
+
+  ok(target, "The target element should exist");
+  is(target.dataset.variable, expectedDatasetValue);
+}
+
+/**
+ * Return specific rule ancestor data element (i.e. the one containing @layer / @media
+ * information) from the Rules view
+ *
+ * @param {RulesView} view
+ *        The RulesView instance.
+ * @param {Number} ruleIndex
+ * @returns {HTMLElement}
+ */
+function getRuleViewAncestorRulesDataElementByIndex(view, ruleIndex) {
+  return view.styleDocument
+    .querySelectorAll(`.ruleview-rule`)
+    [ruleIndex]?.querySelector(`.ruleview-rule-ancestor-data`);
+}
+
+/**
+ * Return specific rule ancestor data text from the Rules view.
+ * Will return something like "@layer topLayer\n@media screen\n@layer".
+ *
+ * @param {RulesView} view
+ *        The RulesView instance.
+ * @param {Number} ruleIndex
+ * @returns {String}
+ */
+function getRuleViewAncestorRulesDataTextByIndex(view, ruleIndex) {
+  return getRuleViewAncestorRulesDataElementByIndex(view, ruleIndex)?.innerText;
+}
diff --git a/devtools/client/inspector/rules/test/sjs_imported_stylesheet_edit.sjs b/devtools/client/inspector/rules/test/sjs_imported_stylesheet_edit.sjs
new file mode 100644
index 0000000000..5a68c5571c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/sjs_imported_stylesheet_edit.sjs
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+"use strict";
+const INITIAL_CONTENT = `
+div {
+  color: red
+}
+`;
+
+const UPDATED_CONTENT = `
+span {
+  color: green;
+}
+
+a {
+  color: blue;
+}
+
+div {
+  color: gold;
+}
+`;
+
+/**
+ * This sjs file supports three endpoint:
+ * - "sjs_imported_stylesheet_edit.sjs" -> will return a text/css content which
+ *   will be either INITIAL_CONTENT or UPDATED_CONTENT. Initially will return
+ *   INITIAL_CONTENT.
+ * - "sjs_imported_stylesheet_edit.sjs?update-stylesheet" -> will update an
+ *   internal flag. After calling this URL, the regular endpoint will return
+ *   UPDATED_CONTENT instead of INITIAL_CONTENT
+ * - "sjs_imported_stylesheet_edit.sjs?setup" -> set the internal flag to its
+ *   default value. Should be called at the beginning of every test to avoid
+ *   side effects.
+ */
+function handleRequest(request, response) {
+  const { queryString } = request;
+  if (queryString === "setup") {
+    setState("serve-updated-content", "false");
+    response.setHeader("Content-Type", "text/html");
+    response.write("OK");
+  } else if (queryString === "update-stylesheet") {
+    setState("serve-updated-content", "true");
+    response.setHeader("Content-Type", "text/html");
+    response.write("OK");
+  } else {
+    response.setHeader("Content-Type", "text/css");
+    const shouldServeUpdatedCSS = getState("serve-updated-content") == "true";
+    response.write(shouldServeUpdatedCSS ? UPDATED_CONTENT : INITIAL_CONTENT);
+  }
+}
diff --git a/devtools/client/inspector/rules/test/square_svg.sjs b/devtools/client/inspector/rules/test/square_svg.sjs
new file mode 100644
index 0000000000..7f42dfdae1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/square_svg.sjs
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+function handleRequest(request, response) {
+  response.setStatusLine(request.httpVersion, 200, "OK");
+  response.setHeader("Access-Control-Allow-Origin", "*", false);
+  response.setHeader("Access-Control-Allow-Headers", "content-type", false);
+  response.setHeader("Content-Type", "image/svg+xml", false);
+  response.write(
+    `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" /></svg>`
+  );
+}
diff --git a/devtools/client/inspector/rules/types.js b/devtools/client/inspector/rules/types.js
new file mode 100644
index 0000000000..8bb12d6a73
--- /dev/null
+++ b/devtools/client/inspector/rules/types.js
@@ -0,0 +1,165 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * A CSS class.
+ */
+exports.classes = {
+  // The CSS class name.
+  name: PropTypes.string,
+
+  // Whether or not the CSS class is applied.
+  isApplied: PropTypes.bool,
+};
+
+/**
+ * A CSS declaration.
+ */
+const declaration = (exports.declaration = {
+  // Array of the computed properties for a CSS declaration.
+  computedProperties: PropTypes.arrayOf(
+    PropTypes.shape({
+      // Whether or not the computed property is overridden.
+      isOverridden: PropTypes.bool,
+      // The computed property name.
+      name: PropTypes.string,
+      // The computed priority (either "important" or an empty string).
+      priority: PropTypes.string,
+      // The computed property value.
+      value: PropTypes.string,
+    })
+  ),
+
+  // An unique CSS declaration id.
+  id: PropTypes.string,
+
+  // Whether or not the declaration is valid. (Does it make sense for this value
+  // to be assigned to this property name?)
+  isDeclarationValid: PropTypes.bool,
+
+  // Whether or not the declaration is enabled.
+  isEnabled: PropTypes.bool,
+
+  // Whether or not the declaration is invisible. In an inherited rule, only the
+  // inherited declarations are shown and the rest are considered invisible.
+  isInvisible: PropTypes.bool,
+
+  // Whether or not the declaration's property name is known.
+  isKnownProperty: PropTypes.bool,
+
+  // Whether or not the property name is valid.
+  isNameValid: PropTypes.bool,
+
+  // Whether or not the the declaration is overridden.
+  isOverridden: PropTypes.bool,
+
+  // Whether or not the declaration is changed by the user.
+  isPropertyChanged: PropTypes.bool,
+
+  // The declaration's property name.
+  name: PropTypes.string,
+
+  // The declaration's priority (either "important" or an empty string).
+  priority: PropTypes.string,
+
+  // The declaration's property value.
+  value: PropTypes.string,
+});
+
+/**
+ * The pseudo classes redux structure.
+ */
+exports.pseudoClasses = {
+  // An object containing the :active pseudo class toggle state.
+  ":active": PropTypes.shape({
+    // Whether or not the :active pseudo class is checked.
+    isChecked: PropTypes.bool,
+    // Whether or not the :active pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+
+  // An object containing the :focus pseudo class toggle state.
+  ":focus": PropTypes.shape({
+    // Whether or not the :focus pseudo class is checked
+    isChecked: PropTypes.bool,
+    // Whether or not the :focus pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+
+  // An object containing the :focus-within pseudo class toggle state.
+  ":focus-within": PropTypes.shape({
+    // Whether or not the :focus-within pseudo class is checked
+    isChecked: PropTypes.bool,
+    // Whether or not the :focus-within pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+
+  // An object containing the :hover pseudo class toggle state.
+  ":hover": PropTypes.shape({
+    // Whether or not the :hover pseudo class is checked.
+    isChecked: PropTypes.bool,
+    // Whether or not the :hover pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+};
+
+/**
+ * A CSS selector.
+ */
+const selector = (exports.selector = {
+  // Function that returns a Promise containing an unique CSS selector.
+  getUniqueSelector: PropTypes.func,
+  // Array of the selectors that match the selected element.
+  matchedDesugaredSelectors: PropTypes.arrayOf(PropTypes.string),
+  // The CSS rule's selector text content.
+  selectorText: PropTypes.string,
+  // Array of the CSS rule's selectors.
+  selectors: PropTypes.arrayOf(PropTypes.string),
+});
+
+/**
+ * A CSS Rule.
+ */
+exports.rule = {
+  // Array of CSS declarations.
+  declarations: PropTypes.arrayOf(PropTypes.shape(declaration)),
+
+  // An unique CSS rule id.
+  id: PropTypes.string,
+
+  // An object containing information about the CSS rule's inheritance.
+  inheritance: PropTypes.shape({
+    // The NodeFront of the element this rule was inherited from.
+    inherited: PropTypes.object,
+    // A header label for where the element this rule was inherited from.
+    inheritedSource: PropTypes.string,
+  }),
+
+  // Whether or not the rule does not match the current selected element.
+  isUnmatched: PropTypes.bool,
+
+  // Whether or not the rule is an user agent style.
+  isUserAgentStyle: PropTypes.bool,
+
+  // An object containing information about the CSS keyframes rules.
+  keyframesRule: PropTypes.shape({
+    // The actor ID of the keyframes rule.
+    id: PropTypes.string,
+    // The keyframes rule name.
+    keyframesName: PropTypes.string,
+  }),
+
+  // The pseudo-element keyword used in the rule.
+  pseudoElement: PropTypes.string,
+
+  // An object containing information about the CSS rule's selector.
+  selector: PropTypes.shape(selector),
+
+  // The CSS rule type.
+  type: PropTypes.number,
+};
diff --git a/devtools/client/inspector/rules/utils/l10n.js b/devtools/client/inspector/rules/utils/l10n.js
new file mode 100644
index 0000000000..b90748ae22
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/l10n.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/shared/locales/styleinspector.properties"
+);
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+};
diff --git a/devtools/client/inspector/rules/utils/moz.build b/devtools/client/inspector/rules/utils/moz.build
new file mode 100644
index 0000000000..cc3fa4dfbd
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "l10n.js",
+    "utils.js",
+)
diff --git a/devtools/client/inspector/rules/utils/utils.js b/devtools/client/inspector/rules/utils/utils.js
new file mode 100644
index 0000000000..fc352d9df7
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/utils.js
@@ -0,0 +1,364 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  VIEW_NODE_CSS_QUERY_CONTAINER,
+  VIEW_NODE_CSS_SELECTOR_WARNINGS,
+  VIEW_NODE_FONT_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+  VIEW_NODE_INACTIVE_CSS,
+  VIEW_NODE_LOCATION_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_SHAPE_POINT_TYPE,
+  VIEW_NODE_SHAPE_SWATCH,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_VARIABLE_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
+
+/**
+ * Returns the [Rule] object associated with the given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want to find the [Rule] object for
+ * @param {ElementStyle} elementStyle
+ *        The [ElementStyle] associated with the selected element
+ * @return {Rule|null} associated with the given node
+ */
+function getRuleFromNode(node, elementStyle) {
+  const ruleEl = node.closest(".ruleview-rule[data-rule-id]");
+  const ruleId = ruleEl ? ruleEl.dataset.ruleId : null;
+  return ruleId ? elementStyle.getRule(ruleId) : null;
+}
+
+/**
+ * Returns the [TextProperty] object associated with the given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want to find the [TextProperty] object for
+ * @param {Rule|null} rule
+ *        The [Rule] associated with the given node
+ * @return {TextProperty|null} associated with the given node
+ */
+function getDeclarationFromNode(node, rule) {
+  if (!rule) {
+    return null;
+  }
+
+  const declarationEl = node.closest(".ruleview-property[data-declaration-id]");
+  const declarationId = declarationEl
+    ? declarationEl.dataset.declarationId
+    : null;
+  return rule ? rule.getDeclaration(declarationId) : null;
+}
+
+/**
+ * Get the type of a given node in the Rules view.
+ *
+ * @param {DOMNode} node
+ *        The node which we want information about
+ * @param {ElementStyle} elementStyle
+ *        The ElementStyle to which this rule belongs
+ * @return {Object|null} containing the following props:
+ * - rule {Rule} The Rule object.
+ * - type {String} One of the VIEW_NODE_XXX_TYPE const in
+ *   client/inspector/shared/node-types.
+ * - value {Object} Depends on the type of the node.
+ * - view {String} Always "rule" to indicate the rule view.
+ * Otherwise, returns null if the node isn't anything we care about.
+ */
+// eslint-disable-next-line complexity
+function getNodeInfo(node, elementStyle) {
+  if (!node) {
+    return null;
+  }
+
+  const rule = getRuleFromNode(node, elementStyle);
+  const declaration = getDeclarationFromNode(node, rule);
+  const classList = node.classList;
+
+  let type, value;
+
+  if (declaration && classList.contains("ruleview-propertyname")) {
+    type = VIEW_NODE_PROPERTY_TYPE;
+    value = {
+      property: node.textContent,
+      value: getPropertyNameAndValue(node).value,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-propertyvalue")) {
+    type = VIEW_NODE_VALUE_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-font-family")) {
+    const { name: propertyName, value: propertyValue } =
+      getPropertyNameAndValue(node);
+    type = VIEW_NODE_FONT_TYPE;
+    value = {
+      property: propertyName,
+      value: propertyValue,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-shape-point")) {
+    type = VIEW_NODE_SHAPE_POINT_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+      toggleActive: getShapeToggleActive(node),
+      point: getShapePoint(node),
+    };
+  } else if (declaration && classList.contains("ruleview-unused-warning")) {
+    type = VIEW_NODE_INACTIVE_CSS;
+    value = declaration.isUsed();
+  } else if (node.closest(".container-query-declaration")) {
+    type = VIEW_NODE_CSS_QUERY_CONTAINER;
+    const containerQueryEl = node.closest(".container-query");
+    value = {
+      ancestorIndex: containerQueryEl.getAttribute("data-ancestor-index"),
+      rule,
+    };
+  } else if (node.classList.contains("ruleview-selector-warnings")) {
+    type = VIEW_NODE_CSS_SELECTOR_WARNINGS;
+    value = node.getAttribute("data-selector-warning-kind").split(",");
+  } else if (declaration && classList.contains("ruleview-shapeswatch")) {
+    type = VIEW_NODE_SHAPE_SWATCH;
+    value = {
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      textProperty: declaration,
+    };
+  } else if (
+    declaration &&
+    (classList.contains("ruleview-variable") ||
+      classList.contains("ruleview-unmatched-variable"))
+  ) {
+    type = VIEW_NODE_VARIABLE_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent.trim(),
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+      variable: node.dataset.variable,
+    };
+  } else if (
+    declaration &&
+    classList.contains("theme-link") &&
+    !classList.contains("ruleview-rule-source")
+  ) {
+    type = VIEW_NODE_IMAGE_URL_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.parentNode.textContent,
+      url: node.href,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (
+    classList.contains("ruleview-selectors-container") ||
+    classList.contains("ruleview-selector") ||
+    classList.contains("ruleview-selector-element") ||
+    classList.contains("ruleview-selector-attribute") ||
+    classList.contains("ruleview-selector-pseudo-class") ||
+    classList.contains("ruleview-selector-pseudo-class-lock")
+  ) {
+    type = VIEW_NODE_SELECTOR_TYPE;
+    value = rule.selectorText;
+  } else if (
+    classList.contains("ruleview-rule-source") ||
+    classList.contains("ruleview-rule-source-label")
+  ) {
+    type = VIEW_NODE_LOCATION_TYPE;
+    const sourceLabelEl = classList.contains("ruleview-rule-source-label")
+      ? node
+      : node.querySelector(".ruleview-rule-source-label");
+    value =
+      sourceLabelEl.getAttribute("data-url") || rule.sheet?.href || rule.title;
+  } else {
+    return null;
+  }
+
+  return {
+    rule,
+    type,
+    value,
+    view: "rule",
+  };
+}
+
+/**
+ * Walk up the DOM from a given node until a parent property holder is found,
+ * and return the textContent for the name and value nodes.
+ * Stops at the first property found, so if node is inside the computed property
+ * list, the computed property will be returned
+ *
+ * @param {DOMNode} node
+ *        The node to start from
+ * @return {Object} {name, value}
+ */
+function getPropertyNameAndValue(node) {
+  while (node?.classList) {
+    // Check first for ruleview-computed since it's the deepest
+    if (
+      node.classList.contains("ruleview-computed") ||
+      node.classList.contains("ruleview-property")
+    ) {
+      return {
+        name: node.querySelector(".ruleview-propertyname").textContent,
+        value: node.querySelector(".ruleview-propertyvalue").textContent,
+      };
+    }
+
+    node = node.parentNode;
+  }
+
+  return null;
+}
+
+/**
+ * Walk up the DOM from a given node until a parent property holder is found,
+ * and return an active shape toggle if one exists.
+ *
+ * @param {DOMNode} node
+ *        The node to start from
+ * @returns {DOMNode} The active shape toggle node, if one exists.
+ */
+function getShapeToggleActive(node) {
+  while (node?.classList) {
+    // Check first for ruleview-computed since it's the deepest
+    if (
+      node.classList.contains("ruleview-computed") ||
+      node.classList.contains("ruleview-property")
+    ) {
+      return node.querySelector(".ruleview-shapeswatch.active");
+    }
+
+    node = node.parentNode;
+  }
+
+  return null;
+}
+
+/**
+ * Get the point associated with a shape point node.
+ *
+ * @param {DOMNode} node
+ *        A shape point node
+ * @returns {String} The point associated with the given node.
+ */
+function getShapePoint(node) {
+  const classList = node.classList;
+  let point = node.dataset.point;
+  // Inset points use classes instead of data because a single span can represent
+  // multiple points.
+  const insetClasses = [];
+  classList.forEach(className => {
+    if (INSET_POINT_TYPES.includes(className)) {
+      insetClasses.push(className);
+    }
+  });
+  if (insetClasses.length) {
+    point = insetClasses.join(",");
+  }
+  return point;
+}
+
+/**
+ * Returns an array of CSS variables used in a CSS property value.
+ * If no CSS variables are used, returns an empty array.
+ *
+ * @param {String} propertyValue
+ *        CSS property value (e.g. "1px solid var(--color, blue)")
+ * @return {Array}
+ *         List of variable names (e.g. ["--color"])
+ *
+ */
+function getCSSVariables(propertyValue = "") {
+  const variables = [];
+  const parts = propertyValue.split(/var\(\s*--/);
+
+  if (parts.length) {
+    // Skip first part. It is the substring before the first occurence of "var(--"
+    for (let i = 1; i < parts.length; i++) {
+      // Split the part by any of the following characters expected after a variable name:
+      // comma, closing parenthesis or whitespace.
+      // Take just the first match. Anything else is either:
+      // - the fallback value, ex: ", blue" from "var(--color, blue)"
+      // - the closing parenthesis, ex: ")" from "var(--color)"
+      const variable = parts[i].split(/[,)\s+]/).shift();
+
+      if (variable) {
+        // Add back the double-dash. The initial string was split by "var(--"
+        variables.push(`--${variable}`);
+      }
+    }
+  }
+
+  return variables;
+}
+
+/**
+ * Get the CSS compatibility issue information for a given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want compatibility information about
+ * @param {ElementStyle} elementStyle
+ *        The ElementStyle to which this rule belongs
+ */
+async function getNodeCompatibilityInfo(node, elementStyle) {
+  const rule = getRuleFromNode(node, elementStyle);
+  const declaration = getDeclarationFromNode(node, rule);
+  const issue = await declaration.isCompatible();
+
+  return issue;
+}
+
+/**
+ * Returns true if the given CSS property value contains the given variable name.
+ *
+ * @param {String} propertyValue
+ *        CSS property value (e.g. "var(--color)")
+ * @param {String} variableName
+ *        CSS variable name (e.g. "--color")
+ * @return {Boolean}
+ */
+function hasCSSVariable(propertyValue, variableName) {
+  return getCSSVariables(propertyValue).includes(variableName);
+}
+
+module.exports = {
+  getCSSVariables,
+  getNodeInfo,
+  getRuleFromNode,
+  hasCSSVariable,
+  getNodeCompatibilityInfo,
+};
diff --git a/devtools/client/inspector/rules/views/class-list-previewer.js b/devtools/client/inspector/rules/views/class-list-previewer.js
new file mode 100644
index 0000000000..e4e99bedde
--- /dev/null
+++ b/devtools/client/inspector/rules/views/class-list-previewer.js
@@ -0,0 +1,310 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const ClassList = require("resource://devtools/client/inspector/rules/models/class-list.js");
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js");
+const { debounce } = require("resource://devtools/shared/debounce.js");
+
+/**
+ * This UI widget shows a textfield and a series of checkboxes in the rule-view. It is
+ * used to toggle classes on the current node selection, and add new classes.
+ */
+class ClassListPreviewer {
+  /*
+   * @param {Inspector} inspector
+   *        The current inspector instance.
+   * @param {DomNode} containerEl
+   *        The element in the rule-view where the widget should go.
+   */
+  constructor(inspector, containerEl) {
+    this.inspector = inspector;
+    this.containerEl = containerEl;
+    this.model = new ClassList(inspector);
+
+    this.onNewSelection = this.onNewSelection.bind(this);
+    this.onCheckBoxChanged = this.onCheckBoxChanged.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onAddElementInputModified = debounce(
+      this.onAddElementInputModified,
+      75,
+      this
+    );
+    this.onCurrentNodeClassChanged = this.onCurrentNodeClassChanged.bind(this);
+    this.onNodeFrontWillUnset = this.onNodeFrontWillUnset.bind(this);
+    this.onAutocompleteClassHovered = debounce(
+      this.onAutocompleteClassHovered,
+      75,
+      this
+    );
+    this.onAutocompleteClosed = this.onAutocompleteClosed.bind(this);
+
+    // Create the add class text field.
+    this.addEl = this.doc.createElement("input");
+    this.addEl.classList.add("devtools-textinput");
+    this.addEl.classList.add("add-class");
+    this.addEl.setAttribute(
+      "placeholder",
+      L10N.getStr("inspector.classPanel.newClass.placeholder")
+    );
+    this.addEl.addEventListener("keydown", this.onKeyDown);
+    this.addEl.addEventListener("input", this.onAddElementInputModified);
+    this.containerEl.appendChild(this.addEl);
+
+    // Create the class checkboxes container.
+    this.classesEl = this.doc.createElement("div");
+    this.classesEl.classList.add("classes");
+    this.containerEl.appendChild(this.classesEl);
+
+    // Create the autocomplete popup
+    this.autocompletePopup = new AutocompletePopup(this.inspector.toolbox.doc, {
+      listId: "inspector_classListPreviewer_autocompletePopupListBox",
+      position: "bottom",
+      autoSelect: true,
+      useXulWrapper: true,
+      input: this.addEl,
+      onClick: (e, item) => {
+        if (item) {
+          this.addEl.value = item.label;
+          this.autocompletePopup.hidePopup();
+          this.autocompletePopup.clearItems();
+          this.model.previewClass(item.label);
+        }
+      },
+      onSelect: item => {
+        if (item) {
+          this.onAutocompleteClassHovered(item?.label);
+        }
+      },
+    });
+
+    // Start listening for interesting events.
+    this.inspector.selection.on("new-node-front", this.onNewSelection);
+    this.inspector.selection.on(
+      "node-front-will-unset",
+      this.onNodeFrontWillUnset
+    );
+    this.containerEl.addEventListener("input", this.onCheckBoxChanged);
+    this.model.on("current-node-class-changed", this.onCurrentNodeClassChanged);
+    this.autocompletePopup.on("popup-closed", this.onAutocompleteClosed);
+
+    this.onNewSelection();
+  }
+
+  destroy() {
+    this.inspector.selection.off("new-node-front", this.onNewSelection);
+    this.inspector.selection.off(
+      "node-front-will-unset",
+      this.onNodeFrontWillUnset
+    );
+    this.autocompletePopup.off("popup-closed", this.onAutocompleteClosed);
+    this.addEl.removeEventListener("keydown", this.onKeyDown);
+    this.addEl.removeEventListener("input", this.onAddElementInputModified);
+    this.containerEl.removeEventListener("input", this.onCheckBoxChanged);
+
+    this.autocompletePopup.destroy();
+
+    this.containerEl.innerHTML = "";
+
+    this.model.destroy();
+    this.containerEl = null;
+    this.inspector = null;
+    this.addEl = null;
+    this.classesEl = null;
+  }
+
+  get doc() {
+    return this.containerEl.ownerDocument;
+  }
+
+  /**
+   * Render the content of the panel. You typically don't need to call this as the panel
+   * renders itself on inspector selection changes.
+   */
+  render() {
+    this.classesEl.innerHTML = "";
+
+    for (const { name, isApplied } of this.model.currentClasses) {
+      const checkBox = this.renderCheckBox(name, isApplied);
+      this.classesEl.appendChild(checkBox);
+    }
+
+    if (!this.model.currentClasses.length) {
+      this.classesEl.appendChild(this.renderNoClassesMessage());
+    }
+  }
+
+  /**
+   * Render a single checkbox for a given classname.
+   *
+   * @param {String} name
+   *        The name of this class.
+   * @param {Boolean} isApplied
+   *        Is this class currently applied on the DOM node.
+   * @return {DOMNode} The DOM element for this checkbox.
+   */
+  renderCheckBox(name, isApplied) {
+    const box = this.doc.createElement("input");
+    box.setAttribute("type", "checkbox");
+    if (isApplied) {
+      box.setAttribute("checked", "checked");
+    }
+    box.dataset.name = name;
+
+    const labelWrapper = this.doc.createElement("label");
+    labelWrapper.setAttribute("title", name);
+    labelWrapper.appendChild(box);
+
+    // A child element is required to do the ellipsis.
+    const label = this.doc.createElement("span");
+    label.textContent = name;
+    labelWrapper.appendChild(label);
+
+    return labelWrapper;
+  }
+
+  /**
+   * Render the message displayed in the panel when the current element has no classes.
+   *
+   * @return {DOMNode} The DOM element for the message.
+   */
+  renderNoClassesMessage() {
+    const msg = this.doc.createElement("p");
+    msg.classList.add("no-classes");
+    msg.textContent = L10N.getStr("inspector.classPanel.noClasses");
+    return msg;
+  }
+
+  /**
+   * Focus the add-class text field.
+   */
+  focusAddClassField() {
+    if (this.addEl) {
+      this.addEl.focus();
+    }
+  }
+
+  onCheckBoxChanged({ target }) {
+    if (!target.dataset.name) {
+      return;
+    }
+
+    this.model.setClassState(target.dataset.name, target.checked).catch(e => {
+      // Only log the error if the panel wasn't destroyed in the meantime.
+      if (this.containerEl) {
+        console.error(e);
+      }
+    });
+  }
+
+  onKeyDown(event) {
+    // If the popup is already open, all the keyboard interaction are handled
+    // directly by the popup component.
+    if (this.autocompletePopup.isOpen) {
+      return;
+    }
+
+    // Open the autocomplete popup on Ctrl+Space / ArrowDown (when the input isn't empty)
+    if (
+      (this.addEl.value && event.key === " " && event.ctrlKey) ||
+      event.key === "ArrowDown"
+    ) {
+      this.onAddElementInputModified();
+      return;
+    }
+
+    if (this.addEl.value !== "" && event.key === "Enter") {
+      this.addClassName(this.addEl.value);
+    }
+  }
+
+  async onAddElementInputModified() {
+    const newValue = this.addEl.value;
+
+    // if the input is empty, let's close the popup, if it was open.
+    if (newValue === "") {
+      if (this.autocompletePopup.isOpen) {
+        this.autocompletePopup.hidePopup();
+        this.autocompletePopup.clearItems();
+      } else {
+        this.model.previewClass("");
+      }
+      return;
+    }
+
+    // Otherwise, we need to update the popup items to match the new input.
+    let items = [];
+    try {
+      const classNames = await this.model.getClassNames(newValue);
+      if (!this.autocompletePopup.isOpen) {
+        this._previewClassesBeforeAutocompletion =
+          this.model.previewClasses.map(previewClass => previewClass.className);
+      }
+      items = classNames.map(className => {
+        return {
+          preLabel: className.substring(0, newValue.length),
+          label: className,
+        };
+      });
+    } catch (e) {
+      // If there was an error while retrieving the classNames, we'll simply NOT show the
+      // popup, which is okay.
+      console.warn("Error when calling getClassNames", e);
+    }
+
+    if (!items.length || (items.length == 1 && items[0].label === newValue)) {
+      this.autocompletePopup.clearItems();
+      await this.autocompletePopup.hidePopup();
+      this.model.previewClass(newValue);
+    } else {
+      this.autocompletePopup.setItems(items);
+      this.autocompletePopup.openPopup();
+    }
+  }
+
+  async addClassName(className) {
+    try {
+      await this.model.addClassName(className);
+      this.render();
+      this.addEl.value = "";
+    } catch (e) {
+      // Only log the error if the panel wasn't destroyed in the meantime.
+      if (this.containerEl) {
+        console.error(e);
+      }
+    }
+  }
+
+  onNewSelection() {
+    this.render();
+  }
+
+  onCurrentNodeClassChanged() {
+    this.render();
+  }
+
+  onNodeFrontWillUnset() {
+    this.model.eraseClassPreview();
+    this.addEl.value = "";
+  }
+
+  onAutocompleteClassHovered(autocompleteItemLabel = "") {
+    if (this.autocompletePopup.isOpen) {
+      this.model.previewClass(autocompleteItemLabel);
+    }
+  }
+
+  onAutocompleteClosed() {
+    const inputValue = this.addEl.value;
+    this.model.previewClass(inputValue);
+  }
+}
+
+module.exports = ClassListPreviewer;
diff --git a/devtools/client/inspector/rules/views/moz.build b/devtools/client/inspector/rules/views/moz.build
new file mode 100644
index 0000000000..6dcb5aa05f
--- /dev/null
+++ b/devtools/client/inspector/rules/views/moz.build
@@ -0,0 +1,10 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "class-list-previewer.js",
+    "registered-property-editor.js",
+    "rule-editor.js",
+    "text-property-editor.js",
+)
diff --git a/devtools/client/inspector/rules/views/registered-property-editor.js b/devtools/client/inspector/rules/views/registered-property-editor.js
new file mode 100644
index 0000000000..d89c0fe89d
--- /dev/null
+++ b/devtools/client/inspector/rules/views/registered-property-editor.js
@@ -0,0 +1,182 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const {
+  appendText,
+  createChild,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+
+const INDENT_SIZE = 2;
+const INDENT_STR = " ".repeat(INDENT_SIZE);
+
+/**
+ * RegisteredPropertyEditor creates a list of TextPropertyEditors for a given
+ * CSS registered property propertyDefinition that can be rendered in the Rules view.
+ *
+ * @param {CssRuleView} ruleView
+ *        The CssRuleView containg the document holding this rule editor.
+ * @param {Rule} rule
+ *        The Rule object we're editing.
+ */
+class RegisteredPropertyEditor extends EventEmitter {
+  /**
+   * @param {CssRuleView} ruleView
+   *        The CssRuleView containing the document holding this rule editor.
+   * @param {Object} propertyDefinition
+   *        The property definition data as returned by PageStyleActor's getRegisteredProperties
+   */
+  constructor(ruleView, propertyDefinition) {
+    super();
+
+    this.#doc = ruleView.styleDocument;
+    this.#propertyDefinition = propertyDefinition;
+    this.#createElement();
+  }
+
+  #doc;
+  #propertyDefinition;
+  // The HTMLElement that will represent the registered property. Populated in #createElement.
+  element = null;
+
+  #createElement() {
+    this.element = this.#doc.createElement("div");
+    this.element.className = "ruleview-rule devtools-monospace";
+    this.element.setAttribute("uneditable", true);
+    this.element.setAttribute("unmatched", false);
+    this.element.setAttribute("data-name", this.#propertyDefinition.name);
+
+    // Give a relative position for the inplace editor's measurement
+    // span to be placed absolutely against.
+    this.element.style.position = "relative";
+
+    const code = createChild(this.element, "code", {
+      class: "ruleview-code",
+    });
+
+    const header = createChild(code, "header", {});
+
+    this.propertyName = createChild(header, "span", {
+      class: "ruleview-registered-property-name",
+      textContent: this.#propertyDefinition.name,
+    });
+
+    this.openBrace = createChild(header, "span", {
+      class: "ruleview-ruleopen",
+      textContent: " {",
+    });
+
+    // We can't use a proper "ol" as it will mess with selection copy text,
+    // adding spaces on list item instead of the one we craft (.ruleview-rule-indent)
+    this.propertyList = createChild(code, "div", {
+      class: "ruleview-propertylist",
+      role: "list",
+    });
+
+    this.#populateProperties();
+
+    this.closeBrace = createChild(code, "div", {
+      class: "ruleview-ruleclose",
+      textContent: "}",
+    });
+  }
+
+  /**
+   * Sets the content of this.#propertyList with the contents of the registered property .
+   */
+  #populateProperties() {
+    const properties = [
+      {
+        name: "syntax",
+        value: `"${this.#propertyDefinition.syntax}"`,
+      },
+      {
+        name: "inherits",
+        value: this.#propertyDefinition.inherits,
+      },
+    ];
+
+    // The initial value may not be set, when syntax is "*", so let's only display
+    // it when it is actually set.
+    if (this.#propertyDefinition.initialValue !== null) {
+      // For JS-defined properties, we want to display them in the same syntax that
+      // was used in CSS.registerProperty (so we'll show `initialValue` and not `initial-value`).
+      properties.push({
+        name: this.#propertyDefinition.fromJS
+          ? "initialValue"
+          : "initial-value",
+        value: this.#propertyDefinition.fromJS
+          ? `"${this.#propertyDefinition.initialValue}"`
+          : this.#propertyDefinition.initialValue,
+      });
+    }
+
+    // When the property is registered with CSS.registerProperty, we want to match the
+    // object shape of the parameter, so include the "name" property.
+    if (this.#propertyDefinition.fromJS) {
+      properties.unshift({
+        name: "name",
+        value: `"${this.#propertyDefinition.name}"`,
+      });
+    }
+
+    for (const { name, value } of properties) {
+      // XXX: We could use the TextPropertyEditor here.
+      // Pros:
+      // - we'd get the similar markup, so styling would be easier
+      // - the value would be properly parsed so our various swatches and popups would work
+      //   out of the box
+      // - rule view filtering would also work out of the box
+      // Cons:
+      // - it is quite tied with the Rules view regular rule, which mean we'd have
+      //   to modify it to accept registered properties.
+
+      const element = createChild(this.propertyList, "div", {
+        role: "listitem",
+      });
+      const container = createChild(element, "div", {
+        class: "ruleview-propertycontainer",
+      });
+
+      createChild(container, "span", {
+        class: "ruleview-rule-indent clipboard-only",
+        textContent: INDENT_STR,
+      });
+
+      const nameContainer = createChild(container, "span", {
+        class: "ruleview-namecontainer",
+      });
+
+      createChild(nameContainer, "span", {
+        class: "ruleview-propertyname theme-fg-color3",
+        textContent: name,
+      });
+
+      appendText(nameContainer, ": ");
+
+      // Create a span that will hold the property and semicolon.
+      // Use this span to create a slightly larger click target
+      // for the value.
+      const valueContainer = createChild(container, "span", {
+        class: "ruleview-propertyvaluecontainer",
+      });
+
+      // Property value, editable when focused.  Changes to the
+      // property value are applied as they are typed, and reverted
+      // if the user presses escape.
+      createChild(valueContainer, "span", {
+        class: "ruleview-propertyvalue theme-fg-color1",
+        textContent: value,
+      });
+
+      appendText(valueContainer, this.#propertyDefinition.fromJS ? "," : ";");
+
+      this.propertyList.appendChild(element);
+    }
+  }
+}
+
+module.exports = RegisteredPropertyEditor;
diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js
new file mode 100644
index 0000000000..93e24f0946
--- /dev/null
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -0,0 +1,1010 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { l10n } = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+const Rule = require("resource://devtools/client/inspector/rules/models/rule.js");
+const {
+  InplaceEditor,
+  editableField,
+  editableItem,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+const TextPropertyEditor = require("resource://devtools/client/inspector/rules/views/text-property-editor.js");
+const {
+  createChild,
+  blurOnMultipleProperties,
+  promiseWarn,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const {
+  parseNamedDeclarations,
+  parsePseudoClassesAndAttributes,
+  SELECTOR_ATTRIBUTE,
+  SELECTOR_ELEMENT,
+  SELECTOR_PSEUDO_CLASS,
+} = require("resource://devtools/shared/css/parsing-utils.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const CssLogic = require("resource://devtools/shared/inspector/css-logic.js");
+
+loader.lazyRequireGetter(
+  this,
+  "Tools",
+  "resource://devtools/client/definitions.js",
+  true
+);
+
+const STYLE_INSPECTOR_PROPERTIES =
+  "devtools/shared/locales/styleinspector.properties";
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
+
+loader.lazyGetter(this, "NEW_PROPERTY_NAME_INPUT_LABEL", function () {
+  return STYLE_INSPECTOR_L10N.getStr("rule.newPropertyName.label");
+});
+
+const INDENT_SIZE = 2;
+const INDENT_STR = " ".repeat(INDENT_SIZE);
+
+/**
+ * RuleEditor is responsible for the following:
+ *   Owns a Rule object and creates a list of TextPropertyEditors
+ *     for its TextProperties.
+ *   Manages creation of new text properties.
+ *
+ * @param {CssRuleView} ruleView
+ *        The CssRuleView containg the document holding this rule editor.
+ * @param {Rule} rule
+ *        The Rule object we're editing.
+ */
+function RuleEditor(ruleView, rule) {
+  EventEmitter.decorate(this);
+
+  this.ruleView = ruleView;
+  this.doc = this.ruleView.styleDocument;
+  this.toolbox = this.ruleView.inspector.toolbox;
+  this.telemetry = this.toolbox.telemetry;
+  this.rule = rule;
+
+  this.isEditable = !rule.isSystem;
+  // Flag that blocks updates of the selector and properties when it is
+  // being edited
+  this.isEditing = false;
+
+  this._onNewProperty = this._onNewProperty.bind(this);
+  this._newPropertyDestroy = this._newPropertyDestroy.bind(this);
+  this._onSelectorDone = this._onSelectorDone.bind(this);
+  this._locationChanged = this._locationChanged.bind(this);
+  this.updateSourceLink = this.updateSourceLink.bind(this);
+  this._onToolChanged = this._onToolChanged.bind(this);
+  this._updateLocation = this._updateLocation.bind(this);
+  this._onSourceClick = this._onSourceClick.bind(this);
+
+  this.rule.domRule.on("location-changed", this._locationChanged);
+  this.toolbox.on("tool-registered", this._onToolChanged);
+  this.toolbox.on("tool-unregistered", this._onToolChanged);
+
+  this._create();
+}
+
+RuleEditor.prototype = {
+  destroy() {
+    this.rule.domRule.off("location-changed");
+    this.toolbox.off("tool-registered", this._onToolChanged);
+    this.toolbox.off("tool-unregistered", this._onToolChanged);
+
+    if (this._unsubscribeSourceMap) {
+      this._unsubscribeSourceMap();
+    }
+  },
+
+  get sourceMapURLService() {
+    if (!this._sourceMapURLService) {
+      // sourceMapURLService is a lazy getter in the toolbox.
+      this._sourceMapURLService = this.toolbox.sourceMapURLService;
+    }
+
+    return this._sourceMapURLService;
+  },
+
+  get isSelectorEditable() {
+    const trait =
+      this.isEditable &&
+      this.rule.domRule.type !== ELEMENT_STYLE &&
+      this.rule.domRule.type !== CSSRule.KEYFRAME_RULE;
+
+    // Do not allow editing anonymousselectors until we can
+    // detect mutations on  pseudo elements in Bug 1034110.
+    return trait && !this.rule.elementStyle.element.isAnonymous;
+  },
+
+  _create() {
+    this.element = this.doc.createElement("div");
+    this.element.className = "ruleview-rule devtools-monospace";
+    this.element.dataset.ruleId = this.rule.domRule.actorID;
+    this.element.setAttribute("uneditable", !this.isEditable);
+    this.element.setAttribute("unmatched", this.rule.isUnmatched);
+    this.element._ruleEditor = this;
+
+    // Give a relative position for the inplace editor's measurement
+    // span to be placed absolutely against.
+    this.element.style.position = "relative";
+
+    // Add the source link.
+    this.source = createChild(this.element, "div", {
+      class: "ruleview-rule-source theme-link",
+    });
+    this.source.addEventListener("click", this._onSourceClick);
+
+    const sourceLabel = this.doc.createElement("span");
+    sourceLabel.classList.add("ruleview-rule-source-label");
+    this.source.appendChild(sourceLabel);
+
+    this.updateSourceLink();
+
+    if (this.rule.domRule.ancestorData.length) {
+      const ancestorsFrag = this.doc.createDocumentFragment();
+      this.rule.domRule.ancestorData.forEach((ancestorData, index) => {
+        const ancestorItem = this.doc.createElement("div");
+        ancestorItem.setAttribute("role", "listitem");
+        ancestorsFrag.append(ancestorItem);
+        ancestorItem.setAttribute("data-ancestor-index", index);
+        ancestorItem.classList.add("ruleview-rule-ancestor");
+        if (ancestorData.type) {
+          ancestorItem.classList.add(ancestorData.type);
+        }
+
+        // Indent each parent selector
+        if (index) {
+          createChild(ancestorItem, "span", {
+            class: "ruleview-rule-indent",
+            textContent: INDENT_STR.repeat(index),
+          });
+        }
+
+        const selectorContainer = createChild(ancestorItem, "span", {
+          class: "ruleview-rule-ancestor-selectorcontainer",
+        });
+
+        if (ancestorData.type == "container") {
+          ancestorItem.classList.add("container-query", "has-tooltip");
+
+          createChild(selectorContainer, "span", {
+            class: "container-query-declaration",
+            textContent: `@container${
+              ancestorData.containerName ? " " + ancestorData.containerName : ""
+            }`,
+          });
+
+          // We can't use a button, otherwise a line break is added when copy/pasting the rule
+          const jumpToNodeButton = createChild(selectorContainer, "span", {
+            class: "open-inspector",
+            role: "button",
+            title: l10n("rule.containerQuery.selectContainerButton.tooltip"),
+          });
+
+          let containerNodeFront;
+          const getNodeFront = async () => {
+            if (!containerNodeFront) {
+              const res = await this.rule.domRule.getQueryContainerForNode(
+                index,
+                this.rule.inherited ||
+                  this.ruleView.inspector.selection.nodeFront
+              );
+              containerNodeFront = res.node;
+            }
+            return containerNodeFront;
+          };
+
+          jumpToNodeButton.addEventListener("click", async () => {
+            const front = await getNodeFront();
+            if (!front) {
+              return;
+            }
+            this.ruleView.inspector.selection.setNodeFront(front);
+            await this.ruleView.inspector.highlighters.hideHighlighterType(
+              this.ruleView.inspector.highlighters.TYPES.BOXMODEL
+            );
+          });
+
+          ancestorItem.addEventListener("mouseenter", async () => {
+            const front = await getNodeFront();
+            if (!front) {
+              return;
+            }
+
+            await this.ruleView.inspector.highlighters.showHighlighterTypeForNode(
+              this.ruleView.inspector.highlighters.TYPES.BOXMODEL,
+              front
+            );
+          });
+          ancestorItem.addEventListener("mouseleave", async () => {
+            await this.ruleView.inspector.highlighters.hideHighlighterType(
+              this.ruleView.inspector.highlighters.TYPES.BOXMODEL
+            );
+          });
+
+          createChild(selectorContainer, "span", {
+            // Add a space between the container name (or @container if there's no name)
+            // and the query so the title, which is computed from the DOM, displays correctly.
+            textContent: " " + ancestorData.containerQuery,
+          });
+        } else if (ancestorData.type == "layer") {
+          selectorContainer.append(
+            this.doc.createTextNode(
+              `@layer${ancestorData.value ? " " + ancestorData.value : ""}`
+            )
+          );
+        } else if (ancestorData.type == "media") {
+          selectorContainer.append(
+            this.doc.createTextNode(`@media ${ancestorData.value}`)
+          );
+        } else if (ancestorData.type == "supports") {
+          selectorContainer.append(
+            this.doc.createTextNode(`@supports ${ancestorData.conditionText}`)
+          );
+        } else if (ancestorData.type == "import") {
+          selectorContainer.append(
+            this.doc.createTextNode(`@import ${ancestorData.value}`)
+          );
+        } else if (ancestorData.selectors) {
+          ancestorData.selectors.forEach((selector, i) => {
+            if (i !== 0) {
+              createChild(selectorContainer, "span", {
+                class: "ruleview-selector-separator",
+                textContent: ", ",
+              });
+            }
+
+            const selectorEl = createChild(selectorContainer, "span", {
+              class: "ruleview-selector",
+              textContent: selector,
+            });
+
+            const warningsContainer = this._createWarningsElementForSelector(
+              i,
+              ancestorData.selectorWarnings
+            );
+            if (warningsContainer) {
+              selectorEl.append(warningsContainer);
+            }
+          });
+        } else {
+          // We shouldn't get here as `type` should only match to what can be set in
+          // the StyleRuleActor form, but just in case, let's return an empty string.
+          console.warn("Unknown ancestor data type:", ancestorData.type);
+          return;
+        }
+
+        createChild(ancestorItem, "span", {
+          class: "ruleview-ancestor-ruleopen",
+          textContent: " {",
+        });
+      });
+
+      // We can't use a proper "ol" as it will mess with selection copy text,
+      // adding spaces on list item instead of the one we craft (.ruleview-rule-indent)
+      this.ancestorDataEl = createChild(this.element, "div", {
+        class: "ruleview-rule-ancestor-data theme-link",
+        role: "list",
+      });
+      this.ancestorDataEl.append(ancestorsFrag);
+    }
+
+    const code = createChild(this.element, "div", {
+      class: "ruleview-code",
+    });
+
+    const header = createChild(code, "div", {});
+
+    createChild(header, "span", {
+      class: "ruleview-rule-indent",
+      textContent: INDENT_STR.repeat(this.rule.domRule.ancestorData.length),
+    });
+
+    this.selectorText = createChild(header, "span", {
+      class: "ruleview-selectors-container",
+      tabindex: this.isSelectorEditable ? "0" : "-1",
+    });
+
+    if (this.isSelectorEditable) {
+      this.selectorText.addEventListener("click", event => {
+        // Clicks within the selector shouldn't propagate any further.
+        event.stopPropagation();
+      });
+
+      editableField({
+        element: this.selectorText,
+        done: this._onSelectorDone,
+        cssProperties: this.rule.cssProperties,
+        // (Shift+)Tab will move the focus to the previous/next editable field (so property name,
+        // or new property of the previous rule).
+        focusEditableFieldAfterApply: true,
+        focusEditableFieldContainerSelector: ".ruleview-rule",
+        // We don't want Enter to trigger the next editable field, just to validate
+        // what the user entered, close the editor, and focus the span so the user can
+        // navigate with the keyboard as expected, unless the user has
+        // devtools.inspector.rule-view.focusNextOnEnter set to true
+        stopOnReturn: this.ruleView.inplaceEditorFocusNextOnEnter !== true,
+      });
+    }
+
+    if (this.rule.domRule.type !== CSSRule.KEYFRAME_RULE) {
+      let selector = "";
+      let desugaredSelector = "";
+      if (this.rule.domRule.selectors) {
+        // This is a "normal" rule with a selector.
+        selector = this.rule.domRule.selectors.join(", ");
+        desugaredSelector = this.rule.domRule.desugaredSelectors?.join(", ");
+        // Otherwise, the rule is either inherited or inline, and selectors will
+        // be computed on demand when the highlighter is requested.
+      }
+
+      const isHighlighted = this.ruleView.isSelectorHighlighted(selector);
+      // Handling of click events is delegated to CssRuleView.handleEvent()
+      createChild(header, "button", {
+        class:
+          "ruleview-selectorhighlighter js-toggle-selector-highlighter" +
+          (isHighlighted ? " highlighted" : ""),
+        "aria-pressed": isHighlighted,
+        // This is used in rules.js for the selector highlighter
+        "data-computed-selector": desugaredSelector,
+        title: l10n("rule.selectorHighlighter.tooltip"),
+      });
+    }
+
+    this.openBrace = createChild(header, "span", {
+      class: "ruleview-ruleopen",
+      textContent: " {",
+    });
+
+    // We can't use a proper "ol" as it will mess with selection copy text,
+    // adding spaces on list item instead of the one we craft (.ruleview-rule-indent)
+    this.propertyList = createChild(code, "div", {
+      class: "ruleview-propertylist",
+      role: "list",
+    });
+
+    this.populate();
+
+    this.closeBrace = createChild(code, "div", {
+      class: "ruleview-ruleclose",
+      tabindex: this.isEditable ? "0" : "-1",
+    });
+
+    if (this.rule.domRule.ancestorData.length) {
+      createChild(this.closeBrace, "span", {
+        class: "ruleview-rule-indent",
+        textContent: INDENT_STR.repeat(this.rule.domRule.ancestorData.length),
+      });
+    }
+    this.closeBrace.append(this.doc.createTextNode("}"));
+
+    if (this.rule.domRule.ancestorData.length) {
+      let closingBracketsText = "";
+      for (let i = this.rule.domRule.ancestorData.length - 1; i >= 0; i--) {
+        if (i) {
+          closingBracketsText += INDENT_STR.repeat(i);
+        }
+        closingBracketsText += "}\n";
+      }
+      createChild(code, "div", {
+        class: "ruleview-ancestor-ruleclose",
+        textContent: closingBracketsText,
+      });
+    }
+
+    if (this.isEditable) {
+      // A newProperty editor should only be created when no editor was
+      // previously displayed. Since the editors are cleared on blur,
+      // check this.ruleview.isEditing on mousedown
+      this._ruleViewIsEditing = false;
+
+      code.addEventListener("mousedown", () => {
+        this._ruleViewIsEditing = this.ruleView.isEditing;
+      });
+
+      code.addEventListener("click", event => {
+        const selection = this.doc.defaultView.getSelection();
+        if (selection.isCollapsed && !this._ruleViewIsEditing) {
+          this.newProperty();
+        }
+        // Cleanup the _ruleViewIsEditing flag
+        this._ruleViewIsEditing = false;
+      });
+
+      this.element.addEventListener("mousedown", () => {
+        this.doc.defaultView.focus();
+      });
+
+      // Create a property editor when the close brace is clicked.
+      editableItem({ element: this.closeBrace }, () => {
+        this.newProperty();
+      });
+    }
+  },
+
+  /**
+   * Returns the selector warnings element, or null if selector at selectorIndex
+   * does not have any warning.
+   *
+   * @param {Integer} selectorIndex: The index of the selector we want to create the
+   *        warnings for
+   * @param {Array<Object>} selectorWarnings: An array of object of the following shape:
+   *        - {Integer} index: The index of the selector this applies to
+   *        - {String} kind: Identifies the warning
+   * @returns {Element|null}
+   */
+  _createWarningsElementForSelector(selectorIndex, selectorWarnings) {
+    if (!selectorWarnings) {
+      return null;
+    }
+
+    const warningKinds = [];
+    for (const { index, kind } of selectorWarnings) {
+      if (index !== selectorIndex) {
+        continue;
+      }
+      warningKinds.push(kind);
+    }
+
+    if (!warningKinds.length) {
+      return null;
+    }
+
+    const warningsContainer = this.doc.createElement("div");
+    warningsContainer.classList.add(
+      "ruleview-selector-warnings",
+      "has-tooltip"
+    );
+
+    warningsContainer.setAttribute(
+      "data-selector-warning-kind",
+      warningKinds.join(",")
+    );
+
+    if (warningKinds.includes("UnconstrainedHas")) {
+      warningsContainer.classList.add("slow");
+    }
+
+    return warningsContainer;
+  },
+
+  /**
+   * Called when a tool is registered or unregistered.
+   */
+  _onToolChanged() {
+    // When the source editor is registered, update the source links
+    // to be clickable; and if it is unregistered, update the links to
+    // be unclickable.  However, some links are never clickable, so
+    // filter those out first.
+    if (this.source.getAttribute("unselectable") === "permanent") {
+      // Nothing.
+    } else if (this.toolbox.isToolRegistered("styleeditor")) {
+      this.source.removeAttribute("unselectable");
+    } else {
+      this.source.setAttribute("unselectable", "true");
+    }
+  },
+
+  /**
+   * Event handler called when a property changes on the
+   * StyleRuleActor.
+   */
+  _locationChanged() {
+    this.updateSourceLink();
+  },
+
+  _onSourceClick() {
+    if (this.source.hasAttribute("unselectable")) {
+      return;
+    }
+
+    const { inspector } = this.ruleView;
+    if (Tools.styleEditor.isToolSupported(inspector.toolbox)) {
+      inspector.toolbox.viewSourceInStyleEditorByResource(
+        this.rule.sheet,
+        this.rule.ruleLine,
+        this.rule.ruleColumn
+      );
+    }
+  },
+
+  /**
+   * Update the text of the source link to reflect whether we're showing
+   * original sources or not.  This is a callback for
+   * SourceMapURLService.subscribeByID, which see.
+   *
+   * @param {Object | null} originalLocation
+   *        The original position object (url/line/column) or null.
+   */
+  _updateLocation(originalLocation) {
+    let displayURL = this.rule.sheet?.href;
+    const constructed = this.rule.sheet?.constructed;
+    let line = this.rule.ruleLine;
+    if (originalLocation) {
+      displayURL = originalLocation.url;
+      line = originalLocation.line;
+    }
+
+    let sourceTextContent = CssLogic.shortSource({
+      constructed,
+      href: displayURL,
+    });
+    let title = displayURL ? displayURL : sourceTextContent;
+    if (line > 0) {
+      sourceTextContent += ":" + line;
+      title += ":" + line;
+    }
+
+    const sourceLabel = this.element.querySelector(
+      ".ruleview-rule-source-label"
+    );
+    sourceLabel.setAttribute("title", title);
+    sourceLabel.setAttribute("data-url", displayURL);
+    sourceLabel.textContent = sourceTextContent;
+  },
+
+  updateSourceLink() {
+    if (this.rule.isSystem) {
+      const sourceLabel = this.element.querySelector(
+        ".ruleview-rule-source-label"
+      );
+      const uaLabel = STYLE_INSPECTOR_L10N.getStr("rule.userAgentStyles");
+      sourceLabel.textContent = uaLabel + " " + this.rule.title;
+      sourceLabel.setAttribute("data-url", this.rule.sheet?.href);
+    } else {
+      this._updateLocation(null);
+    }
+
+    if (
+      this.rule.sheet &&
+      !this.rule.isSystem &&
+      this.rule.domRule.type !== ELEMENT_STYLE
+    ) {
+      // Only get the original source link if the rule isn't a system
+      // rule and if it isn't an inline rule.
+      if (this._unsubscribeSourceMap) {
+        this._unsubscribeSourceMap();
+      }
+      this._unsubscribeSourceMap = this.sourceMapURLService.subscribeByID(
+        this.rule.sheet.resourceId,
+        this.rule.ruleLine,
+        this.rule.ruleColumn,
+        this._updateLocation
+      );
+      // Set "unselectable" appropriately.
+      this._onToolChanged();
+    } else if (this.rule.domRule.type === ELEMENT_STYLE) {
+      this.source.setAttribute("unselectable", "permanent");
+    } else {
+      // Set "unselectable" appropriately.
+      this._onToolChanged();
+    }
+
+    Promise.resolve().then(() => {
+      this.emit("source-link-updated");
+    });
+  },
+
+  /**
+   * Update the rule editor with the contents of the rule.
+   *
+   * @param {Boolean} reset
+   *        True to completely reset the rule editor before populating.
+   */
+  populate(reset) {
+    // Clear out existing viewers.
+    while (this.selectorText.hasChildNodes()) {
+      this.selectorText.removeChild(this.selectorText.lastChild);
+    }
+
+    // If selector text comes from a css rule, highlight selectors that
+    // actually match.  For custom selector text (such as for the 'element'
+    // style, just show the text directly.
+    if (this.rule.domRule.type === ELEMENT_STYLE) {
+      this.selectorText.textContent = this.rule.selectorText;
+    } else if (this.rule.domRule.type === CSSRule.KEYFRAME_RULE) {
+      this.selectorText.textContent = this.rule.domRule.keyText;
+    } else {
+      const desugaredSelectors = this.rule.domRule.desugaredSelectors;
+      this.rule.domRule.selectors.forEach((selector, i) => {
+        if (i !== 0) {
+          createChild(this.selectorText, "span", {
+            class: "ruleview-selector-separator",
+            textContent: ", ",
+          });
+        }
+
+        let containerClass = "ruleview-selector ";
+
+        // Only add matched/unmatched class when the rule does have some matched
+        // selectors. We don't always have some (e.g. rules for pseudo elements)
+        if (this.rule.matchedDesugaredSelectors.length) {
+          const desugaredSelector = desugaredSelectors[i];
+          const matchedSelector =
+            this.rule.matchedDesugaredSelectors.includes(desugaredSelector);
+          containerClass += matchedSelector ? "matched" : "unmatched";
+        }
+
+        const selectorContainer = createChild(this.selectorText, "span", {
+          class: containerClass,
+        });
+
+        const parsedSelector = parsePseudoClassesAndAttributes(selector);
+
+        for (const selectorText of parsedSelector) {
+          let selectorClass = "";
+
+          switch (selectorText.type) {
+            case SELECTOR_ATTRIBUTE:
+              selectorClass = "ruleview-selector-attribute";
+              break;
+            case SELECTOR_ELEMENT:
+              selectorClass = "ruleview-selector-element";
+              break;
+            case SELECTOR_PSEUDO_CLASS:
+              selectorClass = PSEUDO_CLASSES.some(
+                pseudo => selectorText.value === pseudo
+              )
+                ? "ruleview-selector-pseudo-class-lock"
+                : "ruleview-selector-pseudo-class";
+              break;
+            default:
+              break;
+          }
+
+          createChild(selectorContainer, "span", {
+            textContent: selectorText.value,
+            class: selectorClass,
+          });
+        }
+
+        const warningsContainer = this._createWarningsElementForSelector(
+          i,
+          this.rule.domRule.selectorWarnings
+        );
+        if (warningsContainer) {
+          selectorContainer.append(warningsContainer);
+        }
+      });
+    }
+
+    let focusedElSelector;
+    if (reset) {
+      // If we're going to reset the rule (i.e. if this is the `element` rule),
+      // we want to restore the focus after the rule is populated.
+      // So if this element contains the active element, retrieve its selector for later use.
+      if (this.element.contains(this.doc.activeElement)) {
+        focusedElSelector = CssLogic.findCssSelector(this.doc.activeElement);
+      }
+
+      while (this.propertyList.hasChildNodes()) {
+        this.propertyList.removeChild(this.propertyList.lastChild);
+      }
+    }
+
+    for (const prop of this.rule.textProps) {
+      if (!prop.editor && !prop.invisible) {
+        const editor = new TextPropertyEditor(this, prop);
+        this.propertyList.appendChild(editor.element);
+      } else if (prop.editor) {
+        // If an editor already existed, append it to the bottom now to make sure the
+        // order of editors in the DOM follow the order of the rule's properties.
+        this.propertyList.appendChild(prop.editor.element);
+      }
+    }
+
+    if (focusedElSelector) {
+      const elementToFocus = this.doc.querySelector(focusedElSelector);
+      if (elementToFocus && this.element.contains(elementToFocus)) {
+        // We need to wait for a tick for the focus to be properly set
+        setTimeout(() => {
+          elementToFocus.focus();
+          this.ruleView.emitForTests("rule-editor-focus-reset");
+        }, 0);
+      }
+    }
+  },
+
+  /**
+   * Programatically add a new property to the rule.
+   *
+   * @param {String} name
+   *        Property name.
+   * @param {String} value
+   *        Property value.
+   * @param {String} priority
+   *        Property priority.
+   * @param {Boolean} enabled
+   *        True if the property should be enabled.
+   * @param {TextProperty} siblingProp
+   *        Optional, property next to which the new property will be added.
+   * @return {TextProperty}
+   *        The new property
+   */
+  addProperty(name, value, priority, enabled, siblingProp) {
+    const prop = this.rule.createProperty(
+      name,
+      value,
+      priority,
+      enabled,
+      siblingProp
+    );
+    const index = this.rule.textProps.indexOf(prop);
+    const editor = new TextPropertyEditor(this, prop);
+
+    // Insert this node before the DOM node that is currently at its new index
+    // in the property list.  There is currently one less node in the DOM than
+    // in the property list, so this causes it to appear after siblingProp.
+    // If there is no node at its index, as is the case where this is the last
+    // node being inserted, then this behaves as appendChild.
+    this.propertyList.insertBefore(
+      editor.element,
+      this.propertyList.children[index]
+    );
+
+    return prop;
+  },
+
+  /**
+   * Programatically add a list of new properties to the rule.  Focus the UI
+   * to the proper location after adding (either focus the value on the
+   * last property if it is empty, or create a new property and focus it).
+   *
+   * @param {Array} properties
+   *        Array of properties, which are objects with this signature:
+   *        {
+   *          name: {string},
+   *          value: {string},
+   *          priority: {string}
+   *        }
+   * @param {TextProperty} siblingProp
+   *        Optional, the property next to which all new props should be added.
+   */
+  addProperties(properties, siblingProp) {
+    if (!properties || !properties.length) {
+      return;
+    }
+
+    let lastProp = siblingProp;
+    for (const p of properties) {
+      const isCommented = Boolean(p.commentOffsets);
+      const enabled = !isCommented;
+      lastProp = this.addProperty(
+        p.name,
+        p.value,
+        p.priority,
+        enabled,
+        lastProp
+      );
+    }
+
+    // Either focus on the last value if incomplete, or start a new one.
+    if (lastProp && lastProp.value.trim() === "") {
+      lastProp.editor.valueSpan.click();
+    } else {
+      this.newProperty();
+    }
+  },
+
+  /**
+   * Create a text input for a property name.  If a non-empty property
+   * name is given, we'll create a real TextProperty and add it to the
+   * rule.
+   */
+  newProperty() {
+    // If we're already creating a new property, ignore this.
+    if (!this.closeBrace.hasAttribute("tabindex")) {
+      return;
+    }
+
+    // While we're editing a new property, it doesn't make sense to
+    // start a second new property editor, so disable focusing the
+    // close brace for now.
+    this.closeBrace.removeAttribute("tabindex");
+
+    this.newPropItem = createChild(this.propertyList, "div", {
+      class: "ruleview-property ruleview-newproperty",
+      role: "listitem",
+    });
+
+    this.newPropSpan = createChild(this.newPropItem, "span", {
+      class: "ruleview-propertyname",
+      tabindex: "0",
+    });
+
+    this.multipleAddedProperties = null;
+
+    this.editor = new InplaceEditor({
+      element: this.newPropSpan,
+      done: this._onNewProperty,
+      destroy: this._newPropertyDestroy,
+      advanceChars: ":",
+      contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
+      popup: this.ruleView.popup,
+      cssProperties: this.rule.cssProperties,
+      inputAriaLabel: NEW_PROPERTY_NAME_INPUT_LABEL,
+      cssVariables: this.rule.elementStyle.getAllCustomProperties(
+        this.rule.pseudoElement
+      ),
+    });
+
+    // Auto-close the input if multiple rules get pasted into new property.
+    this.editor.input.addEventListener(
+      "paste",
+      blurOnMultipleProperties(this.rule.cssProperties)
+    );
+  },
+
+  /**
+   * Called when the new property input has been dismissed.
+   *
+   * @param {String} value
+   *        The value in the editor.
+   * @param {Boolean} commit
+   *        True if the value should be committed.
+   */
+  _onNewProperty(value, commit) {
+    if (!value || !commit) {
+      return;
+    }
+
+    // parseDeclarations allows for name-less declarations, but in the present
+    // case, we're creating a new declaration, it doesn't make sense to accept
+    // these entries
+    this.multipleAddedProperties = parseNamedDeclarations(
+      this.rule.cssProperties.isKnown,
+      value,
+      true
+    );
+
+    // Blur the editor field now and deal with adding declarations later when
+    // the field gets destroyed (see _newPropertyDestroy)
+    this.editor.input.blur();
+
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+  },
+
+  /**
+   * Called when the new property editor is destroyed.
+   * This is where the properties (type TextProperty) are actually being
+   * added, since we want to wait until after the inplace editor `destroy`
+   * event has been fired to keep consistent UI state.
+   */
+  _newPropertyDestroy() {
+    // We're done, make the close brace focusable again.
+    this.closeBrace.setAttribute("tabindex", "0");
+
+    this.propertyList.removeChild(this.newPropItem);
+    delete this.newPropItem;
+    delete this.newPropSpan;
+
+    // If properties were added, we want to focus the proper element.
+    // If the last new property has no value, focus the value on it.
+    // Otherwise, start a new property and focus that field.
+    if (this.multipleAddedProperties && this.multipleAddedProperties.length) {
+      this.addProperties(this.multipleAddedProperties);
+    }
+  },
+
+  /**
+   * Called when the selector's inplace editor is closed.
+   * Ignores the change if the user pressed escape, otherwise
+   * commits it.
+   *
+   * @param {String} value
+   *        The value contained in the editor.
+   * @param {Boolean} commit
+   *        True if the change should be applied.
+   * @param {Number} direction
+   *        The move focus direction number.
+   * @param {Number} key
+   *        The event keyCode that trigger the editor to close
+   */
+  async _onSelectorDone(value, commit, direction, key) {
+    if (
+      !commit ||
+      this.isEditing ||
+      value === "" ||
+      value === this.rule.selectorText
+    ) {
+      return;
+    }
+
+    const ruleView = this.ruleView;
+    const elementStyle = ruleView._elementStyle;
+    const element = elementStyle.element;
+
+    this.isEditing = true;
+
+    // Remove highlighter for the previous selector.
+    if (this.ruleView.isSelectorHighlighted(this.rule.selectorText)) {
+      await this.ruleView.toggleSelectorHighlighter(this.rule.selectorText);
+    }
+
+    try {
+      const response = await this.rule.domRule.modifySelector(element, value);
+
+      // We recompute the list of applied styles, because editing a
+      // selector might cause this rule's position to change.
+      const applied = await elementStyle.pageStyle.getApplied(element, {
+        inherited: true,
+        matchedSelectors: true,
+        filter: elementStyle.showUserAgentStyles ? "ua" : undefined,
+      });
+
+      this.isEditing = false;
+
+      const { ruleProps, isMatching } = response;
+      if (!ruleProps) {
+        // Notify for changes, even when nothing changes,
+        // just to allow tests being able to track end of this request.
+        ruleView.emit("ruleview-invalid-selector");
+        return;
+      }
+
+      ruleProps.isUnmatched = !isMatching;
+      const newRule = new Rule(elementStyle, ruleProps);
+      const editor = new RuleEditor(ruleView, newRule);
+      const rules = elementStyle.rules;
+
+      let newRuleIndex = applied.findIndex(r => r.rule == ruleProps.rule);
+      const oldIndex = rules.indexOf(this.rule);
+
+      // If the selector no longer matches, then we leave the rule in
+      // the same relative position.
+      if (newRuleIndex === -1) {
+        newRuleIndex = oldIndex;
+      }
+
+      // Remove the old rule and insert the new rule.
+      rules.splice(oldIndex, 1);
+      rules.splice(newRuleIndex, 0, newRule);
+      elementStyle._changed();
+      elementStyle.onRuleUpdated();
+
+      // We install the new editor in place of the old -- you might
+      // think we would replicate the list-modification logic above,
+      // but that is complicated due to the way the UI installs
+      // pseudo-element rules and the like.
+      this.element.parentNode.replaceChild(editor.element, this.element);
+
+      // As the rules elements will be replaced, and given that the inplace-editor doesn't
+      // wait for this `done` callback to be resolved, the focus management we do there
+      // will be useless as this specific code will usually happen later (and the focused
+      // element might be replaced).
+      // Because of this, we need to handle setting the focus ourselves from here.
+      editor._moveSelectorFocus(direction);
+    } catch (err) {
+      this.isEditing = false;
+      promiseWarn(err);
+    }
+  },
+
+  /**
+   * Handle moving the focus change after a Tab keypress in the selector inplace editor.
+   *
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  _moveSelectorFocus(direction) {
+    if (!direction || direction === Services.focus.MOVEFOCUS_BACKWARD) {
+      return;
+    }
+
+    if (this.rule.textProps.length) {
+      this.rule.textProps[0].editor.nameSpan.click();
+    } else {
+      this.propertyList.click();
+    }
+  },
+};
+
+module.exports = RuleEditor;
diff --git a/devtools/client/inspector/rules/views/text-property-editor.js b/devtools/client/inspector/rules/views/text-property-editor.js
new file mode 100644
index 0000000000..8546417cfb
--- /dev/null
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -0,0 +1,1637 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  l10n,
+  l10nFormatStr,
+} = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  InplaceEditor,
+  editableField,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+const {
+  createChild,
+  appendText,
+  advanceValidate,
+  blurOnMultipleProperties,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const { throttle } = require("resource://devtools/shared/throttle.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "openContentLink",
+  "resource://devtools/client/shared/link.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  ["parseDeclarations", "parseSingleValue"],
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "findCssSelector",
+  "resource://devtools/shared/inspector/css-logic.js",
+  true
+);
+loader.lazyGetter(this, "PROPERTY_NAME_INPUT_LABEL", function () {
+  return l10n("rule.propertyName.label");
+});
+
+const lazy = {};
+ChromeUtils.defineESModuleGetters(lazy, {
+  AppConstants: "resource://gre/modules/AppConstants.sys.mjs",
+});
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+
+const SHARED_SWATCH_CLASS = "ruleview-swatch";
+const COLOR_SWATCH_CLASS = "ruleview-colorswatch";
+const BEZIER_SWATCH_CLASS = "ruleview-bezierswatch";
+const LINEAR_EASING_SWATCH_CLASS = "ruleview-lineareasingswatch";
+const FILTER_SWATCH_CLASS = "ruleview-filterswatch";
+const ANGLE_SWATCH_CLASS = "ruleview-angleswatch";
+const FONT_FAMILY_CLASS = "ruleview-font-family";
+const SHAPE_SWATCH_CLASS = "ruleview-shapeswatch";
+
+/*
+ * An actionable element is an element which on click triggers a specific action
+ * (e.g. shows a color tooltip, opens a link, …).
+ */
+const ACTIONABLE_ELEMENTS_SELECTORS = [
+  `.${COLOR_SWATCH_CLASS}`,
+  `.${BEZIER_SWATCH_CLASS}`,
+  `.${LINEAR_EASING_SWATCH_CLASS}`,
+  `.${FILTER_SWATCH_CLASS}`,
+  `.${ANGLE_SWATCH_CLASS}`,
+  "a",
+];
+
+/*
+ * Speeds at which we update the value when the user is dragging its mouse
+ * over a value.
+ */
+const SLOW_DRAGGING_SPEED = 0.1;
+const DEFAULT_DRAGGING_SPEED = 1;
+const FAST_DRAGGING_SPEED = 10;
+
+// Deadzone in pixels where dragging should not update the value.
+const DRAGGING_DEADZONE_DISTANCE = 5;
+
+const DRAGGABLE_VALUE_CLASSNAME = "ruleview-propertyvalue-draggable";
+const IS_DRAGGING_CLASSNAME = "ruleview-propertyvalue-dragging";
+
+// In order to highlight the used fonts in font-family properties, we
+// retrieve the list of used fonts from the server. That always
+// returns the actually used font family name(s). If the property's
+// authored value is sans-serif for instance, the used font might be
+// arial instead.  So we need the list of all generic font family
+// names to underline those when we find them.
+const GENERIC_FONT_FAMILIES = [
+  "serif",
+  "sans-serif",
+  "cursive",
+  "fantasy",
+  "monospace",
+  "system-ui",
+];
+
+/**
+ * TextPropertyEditor is responsible for the following:
+ *   Owns a TextProperty object.
+ *   Manages changes to the TextProperty.
+ *   Can be expanded to display computed properties.
+ *   Can mark a property disabled or enabled.
+ *
+ * @param {RuleEditor} ruleEditor
+ *        The rule editor that owns this TextPropertyEditor.
+ * @param {TextProperty} property
+ *        The text property to edit.
+ */
+function TextPropertyEditor(ruleEditor, property) {
+  this.ruleEditor = ruleEditor;
+  this.ruleView = this.ruleEditor.ruleView;
+  this.cssProperties = this.ruleView.cssProperties;
+  this.doc = this.ruleEditor.doc;
+  this.popup = this.ruleView.popup;
+  this.prop = property;
+  this.prop.editor = this;
+  this.browserWindow = this.doc.defaultView.top;
+
+  this._populatedComputed = false;
+  this._hasPendingClick = false;
+  this._clickedElementOptions = null;
+
+  this.toolbox = this.ruleView.inspector.toolbox;
+  this.telemetry = this.toolbox.telemetry;
+
+  this._isDragging = false;
+  this._hasDragged = false;
+  this._draggingController = null;
+  this._draggingValueCache = null;
+
+  this.getGridlineNames = this.getGridlineNames.bind(this);
+  this.update = this.update.bind(this);
+  this.updatePropertyState = this.updatePropertyState.bind(this);
+  this._onDraggablePreferenceChanged =
+    this._onDraggablePreferenceChanged.bind(this);
+  this._onEnableChanged = this._onEnableChanged.bind(this);
+  this._onEnableClicked = this._onEnableClicked.bind(this);
+  this._onExpandClicked = this._onExpandClicked.bind(this);
+  this._onNameDone = this._onNameDone.bind(this);
+  this._onStartEditing = this._onStartEditing.bind(this);
+  this._onSwatchCommit = this._onSwatchCommit.bind(this);
+  this._onSwatchPreview = this._onSwatchPreview.bind(this);
+  this._onSwatchRevert = this._onSwatchRevert.bind(this);
+  this._onValidate = this.ruleView.debounce(this._previewValue, 10, this);
+  this._onValueDone = this._onValueDone.bind(this);
+
+  this._draggingOnMouseDown = this._draggingOnMouseDown.bind(this);
+  this._draggingOnMouseMove = throttle(this._draggingOnMouseMove, 30, this);
+  this._draggingOnMouseUp = this._draggingOnMouseUp.bind(this);
+  this._draggingOnKeydown = this._draggingOnKeydown.bind(this);
+
+  this._create();
+  this.update();
+}
+
+TextPropertyEditor.prototype = {
+  /**
+   * Boolean indicating if the name or value is being currently edited.
+   */
+  get editing() {
+    return (
+      !!(
+        this.nameSpan.inplaceEditor ||
+        this.valueSpan.inplaceEditor ||
+        this.ruleView.tooltips.isEditing
+      ) || this.popup.isOpen
+    );
+  },
+
+  /**
+   * Get the rule to the current text property
+   */
+  get rule() {
+    return this.prop.rule;
+  },
+
+  // Exposed for tests.
+  get _DRAGGING_DEADZONE_DISTANCE() {
+    return DRAGGING_DEADZONE_DISTANCE;
+  },
+
+  /**
+   * Create the property editor's DOM.
+   */
+  _create() {
+    this.element = this.doc.createElementNS(HTML_NS, "div");
+    this.element.setAttribute("role", "listitem");
+    this.element.classList.add("ruleview-property");
+    this.element.dataset.declarationId = this.prop.id;
+    this.element._textPropertyEditor = this;
+
+    this.container = createChild(this.element, "div", {
+      class: "ruleview-propertycontainer",
+    });
+
+    const indent =
+      ((this.ruleEditor.rule.domRule.ancestorData.length || 0) + 1) * 2;
+    createChild(this.container, "span", {
+      class: "ruleview-rule-indent clipboard-only",
+      textContent: " ".repeat(indent),
+    });
+
+    // The enable checkbox will disable or enable the rule.
+    this.enable = createChild(this.container, "input", {
+      type: "checkbox",
+      class: "ruleview-enableproperty",
+      title: l10nFormatStr("rule.propertyToggle.label", this.prop.name),
+    });
+
+    this.nameContainer = createChild(this.container, "span", {
+      class: "ruleview-namecontainer",
+    });
+
+    // Property name, editable when focused.  Property name
+    // is committed when the editor is unfocused.
+    this.nameSpan = createChild(this.nameContainer, "span", {
+      class: "ruleview-propertyname theme-fg-color3",
+      tabindex: this.ruleEditor.isEditable ? "0" : "-1",
+      id: this.prop.id,
+    });
+
+    appendText(this.nameContainer, ": ");
+
+    // Click to expand the computed properties of the text property.
+    this.expander = createChild(this.container, "span", {
+      class: "ruleview-expander theme-twisty",
+    });
+    this.expander.addEventListener("click", this._onExpandClicked, true);
+
+    // Create a span that will hold the property and semicolon.
+    // Use this span to create a slightly larger click target
+    // for the value.
+    this.valueContainer = createChild(this.container, "span", {
+      class: "ruleview-propertyvaluecontainer",
+    });
+
+    // Property value, editable when focused.  Changes to the
+    // property value are applied as they are typed, and reverted
+    // if the user presses escape.
+    this.valueSpan = createChild(this.valueContainer, "span", {
+      class: "ruleview-propertyvalue theme-fg-color1",
+      tabindex: this.ruleEditor.isEditable ? "0" : "-1",
+    });
+
+    // Storing the TextProperty on the elements for easy access
+    // (for instance by the tooltip)
+    this.valueSpan.textProperty = this.prop;
+    this.nameSpan.textProperty = this.prop;
+
+    appendText(this.valueContainer, ";");
+
+    this.warning = createChild(this.container, "div", {
+      class: "ruleview-warning",
+      hidden: "",
+      title: l10n("rule.warning.title"),
+    });
+
+    this.unusedState = createChild(this.container, "div", {
+      class: "ruleview-unused-warning",
+      hidden: "",
+    });
+
+    this.compatibilityState = createChild(this.container, "div", {
+      class: "ruleview-compatibility-warning",
+      hidden: "",
+    });
+
+    // Filter button that filters for the current property name and is
+    // displayed when the property is overridden by another rule.
+    this.filterProperty = createChild(this.container, "button", {
+      class: "ruleview-overridden-rule-filter",
+      hidden: "",
+      title: l10n("rule.filterProperty.title"),
+    });
+
+    this.filterProperty.addEventListener("click", event => {
+      this.ruleEditor.ruleView.setFilterStyles("`" + this.prop.name + "`");
+      event.stopPropagation();
+    });
+
+    // Holds the viewers for the computed properties.
+    // will be populated in |_updateComputed|.
+    this.computed = createChild(this.element, "ul", {
+      class: "ruleview-computedlist",
+    });
+
+    // Holds the viewers for the overridden shorthand properties.
+    // will be populated in |_updateShorthandOverridden|.
+    this.shorthandOverridden = createChild(this.element, "ul", {
+      class: "ruleview-overridden-items",
+    });
+
+    // Only bind event handlers if the rule is editable.
+    if (this.ruleEditor.isEditable) {
+      this.enable.addEventListener("click", this._onEnableClicked, true);
+      this.enable.addEventListener("change", this._onEnableChanged, true);
+
+      this.nameContainer.addEventListener("click", event => {
+        // Clicks within the name shouldn't propagate any further.
+        event.stopPropagation();
+
+        // Forward clicks on nameContainer to the editable nameSpan
+        if (event.target === this.nameContainer) {
+          this.nameSpan.click();
+        }
+      });
+
+      const cssVariables = this.rule.elementStyle.getAllCustomProperties(
+        this.rule.pseudoElement
+      );
+
+      editableField({
+        start: this._onStartEditing,
+        element: this.nameSpan,
+        done: this._onNameDone,
+        destroy: this.updatePropertyState,
+        advanceChars: ":",
+        contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
+        popup: this.popup,
+        cssProperties: this.cssProperties,
+        cssVariables,
+        // (Shift+)Tab will move the focus to the previous/next editable field (so property value
+        // or new selector).
+        focusEditableFieldAfterApply: true,
+        focusEditableFieldContainerSelector: ".ruleview-rule",
+        // We don't want Enter to trigger the next editable field, just to validate
+        // what the user entered, close the editor, and focus the span so the user can
+        // navigate with the keyboard as expected, unless the user has
+        // devtools.inspector.rule-view.focusNextOnEnter set to true
+        stopOnReturn: this.ruleView.inplaceEditorFocusNextOnEnter !== true,
+        inputAriaLabel: PROPERTY_NAME_INPUT_LABEL,
+      });
+
+      // Auto blur name field on multiple CSS rules get pasted in.
+      this.nameContainer.addEventListener(
+        "paste",
+        blurOnMultipleProperties(this.cssProperties)
+      );
+
+      this.valueContainer.addEventListener("click", event => {
+        // Clicks within the value shouldn't propagate any further.
+        event.stopPropagation();
+
+        // Forward clicks on valueContainer to the editable valueSpan
+        if (event.target === this.valueContainer) {
+          this.valueSpan.click();
+        }
+      });
+
+      // The mousedown event could trigger a blur event on nameContainer, which
+      // will trigger a call to the update function. The update function clears
+      // valueSpan's markup. Thus the regular click event does not bubble up, and
+      // listener's callbacks are not called.
+      // So we need to remember where the user clicks in order to re-trigger the click
+      // after the valueSpan's markup is re-populated. We only need to track this for
+      // valueSpan's child elements, because direct click on valueSpan will always
+      // trigger a click event.
+      this.valueSpan.addEventListener("mousedown", event => {
+        const clickedEl = event.target;
+        if (clickedEl === this.valueSpan) {
+          return;
+        }
+        this._hasPendingClick = true;
+
+        const matchedSelector = ACTIONABLE_ELEMENTS_SELECTORS.find(selector =>
+          clickedEl.matches(selector)
+        );
+        if (matchedSelector) {
+          const similarElements = [
+            ...this.valueSpan.querySelectorAll(matchedSelector),
+          ];
+          this._clickedElementOptions = {
+            selector: matchedSelector,
+            index: similarElements.indexOf(clickedEl),
+          };
+        }
+      });
+
+      this.valueSpan.addEventListener("mouseup", event => {
+        // if we have dragged, we will handle the pending click in _draggingOnMouseUp instead
+        if (this._hasDragged) {
+          return;
+        }
+        this._clickedElementOptions = null;
+        this._hasPendingClick = false;
+      });
+
+      this.valueSpan.addEventListener("click", event => {
+        const target = event.target;
+
+        if (target.nodeName === "a") {
+          event.stopPropagation();
+          event.preventDefault();
+          openContentLink(target.href);
+        }
+      });
+
+      this.ruleView.on(
+        "draggable-preference-updated",
+        this._onDraggablePreferenceChanged
+      );
+      if (this._isDraggableProperty(this.prop)) {
+        this._addDraggingCapability();
+      }
+
+      editableField({
+        start: this._onStartEditing,
+        element: this.valueSpan,
+        done: this._onValueDone,
+        destroy: this.update,
+        validate: this._onValidate,
+        advanceChars: advanceValidate,
+        contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
+        property: this.prop,
+        defaultIncrement: this.prop.name === "opacity" ? 0.1 : 1,
+        popup: this.popup,
+        multiline: true,
+        maxWidth: () => this.container.getBoundingClientRect().width,
+        cssProperties: this.cssProperties,
+        cssVariables,
+        getGridLineNames: this.getGridlineNames,
+        showSuggestCompletionOnEmpty: true,
+        // (Shift+)Tab will move the focus to the previous/next editable field (so property name,
+        // or new property).
+        focusEditableFieldAfterApply: true,
+        focusEditableFieldContainerSelector: ".ruleview-rule",
+        // We don't want Enter to trigger the next editable field, just to validate
+        // what the user entered, close the editor, and focus the span so the user can
+        // navigate with the keyboard as expected, unless the user has
+        // devtools.inspector.rule-view.focusNextOnEnter set to true
+        stopOnReturn: this.ruleView.inplaceEditorFocusNextOnEnter !== true,
+        // Label the value input with the name span so screenreader users know what this
+        // applies to.
+        inputAriaLabelledBy: this.nameSpan.id,
+      });
+    }
+  },
+
+  /**
+   * Get the grid line names of the grid that the currently selected element is
+   * contained in.
+   *
+   * @return {Object} Contains the names of the cols and rows as arrays
+   * {cols: [], rows: []}.
+   */
+  async getGridlineNames() {
+    const gridLineNames = { cols: [], rows: [] };
+    const layoutInspector =
+      await this.ruleView.inspector.walker.getLayoutInspector();
+    const gridFront = await layoutInspector.getCurrentGrid(
+      this.ruleView.inspector.selection.nodeFront
+    );
+
+    if (gridFront) {
+      const gridFragments = gridFront.gridFragments;
+
+      for (const gridFragment of gridFragments) {
+        for (const rowLine of gridFragment.rows.lines) {
+          // We specifically ignore implicit line names created from implicitly named
+          // areas. This is because showing implicit line names can be confusing for
+          // designers who may have used a line name with "-start" or "-end" and created
+          // an implicitly named grid area without meaning to.
+          let gridArea;
+
+          for (const name of rowLine.names) {
+            const rowLineName =
+              name.substring(0, name.lastIndexOf("-start")) ||
+              name.substring(0, name.lastIndexOf("-end"));
+            gridArea = gridFragment.areas.find(
+              area => area.name === rowLineName
+            );
+
+            if (
+              rowLine.type === "implicit" &&
+              gridArea &&
+              gridArea.type === "implicit"
+            ) {
+              continue;
+            }
+            gridLineNames.rows.push(name);
+          }
+        }
+
+        for (const colLine of gridFragment.cols.lines) {
+          let gridArea;
+
+          for (const name of colLine.names) {
+            const colLineName =
+              name.substring(0, name.lastIndexOf("-start")) ||
+              name.substring(0, name.lastIndexOf("-end"));
+            gridArea = gridFragment.areas.find(
+              area => area.name === colLineName
+            );
+
+            if (
+              colLine.type === "implicit" &&
+              gridArea &&
+              gridArea.type === "implicit"
+            ) {
+              continue;
+            }
+            gridLineNames.cols.push(name);
+          }
+        }
+      }
+    }
+
+    // Emit message for test files
+    this.ruleView.inspector.emit("grid-line-names-updated");
+    return gridLineNames;
+  },
+
+  /**
+   * Get the path from which to resolve requests for this
+   * rule's stylesheet.
+   *
+   * @return {String} the stylesheet's href.
+   */
+  get sheetHref() {
+    const domRule = this.rule.domRule;
+    if (domRule) {
+      return domRule.href || domRule.nodeHref;
+    }
+    return undefined;
+  },
+
+  /**
+   * Populate the span based on changes to the TextProperty.
+   */
+  // eslint-disable-next-line complexity
+  update() {
+    if (this.ruleView.isDestroyed) {
+      return;
+    }
+
+    this.updatePropertyState();
+
+    const name = this.prop.name;
+    this.nameSpan.textContent = name;
+    this.enable.setAttribute(
+      "title",
+      l10nFormatStr("rule.propertyToggle.label", name)
+    );
+
+    // Combine the property's value and priority into one string for
+    // the value.
+    const store = this.rule.elementStyle.store;
+    let val = store.userProperties.getProperty(
+      this.rule.domRule,
+      name,
+      this.prop.value
+    );
+    if (this.prop.priority) {
+      val += " !" + this.prop.priority;
+    }
+
+    const propDirty = store.userProperties.contains(this.rule.domRule, name);
+
+    if (propDirty) {
+      this.element.setAttribute("dirty", "");
+    } else {
+      this.element.removeAttribute("dirty");
+    }
+
+    const outputParser = this.ruleView._outputParser;
+    const parserOptions = {
+      angleClass: "ruleview-angle",
+      angleSwatchClass: SHARED_SWATCH_CLASS + " " + ANGLE_SWATCH_CLASS,
+      bezierClass: "ruleview-bezier",
+      bezierSwatchClass: SHARED_SWATCH_CLASS + " " + BEZIER_SWATCH_CLASS,
+      colorClass: "ruleview-color",
+      colorSwatchClass: SHARED_SWATCH_CLASS + " " + COLOR_SWATCH_CLASS,
+      filterClass: "ruleview-filter",
+      filterSwatchClass: SHARED_SWATCH_CLASS + " " + FILTER_SWATCH_CLASS,
+      flexClass: "ruleview-flex js-toggle-flexbox-highlighter",
+      gridClass: "ruleview-grid js-toggle-grid-highlighter",
+      linearEasingClass: "ruleview-lineareasing",
+      linearEasingSwatchClass:
+        SHARED_SWATCH_CLASS + " " + LINEAR_EASING_SWATCH_CLASS,
+      shapeClass: "ruleview-shape",
+      shapeSwatchClass: SHAPE_SWATCH_CLASS,
+      // Only ask the parser to convert colors to the default color type specified by the
+      // user if the property hasn't been changed yet.
+      useDefaultColorUnit: !propDirty,
+      defaultColorUnit: this.ruleView.inspector.defaultColorUnit,
+      urlClass: "theme-link",
+      fontFamilyClass: FONT_FAMILY_CLASS,
+      baseURI: this.sheetHref,
+      unmatchedVariableClass: "ruleview-unmatched-variable",
+      matchedVariableClass: "ruleview-variable",
+      getVariableValue: varName =>
+        this.rule.elementStyle.getVariable(varName, this.rule.pseudoElement),
+    };
+    const frag = outputParser.parseCssProperty(name, val, parserOptions);
+
+    // Save the initial value as the last committed value,
+    // for restoring after pressing escape.
+    if (!this.committed) {
+      this.committed = {
+        name,
+        value: frag.textContent,
+        priority: this.prop.priority,
+      };
+    }
+
+    // Save focused element inside value span if one exists before wiping the innerHTML
+    let focusedElSelector = null;
+    if (this.valueSpan.contains(this.doc.activeElement)) {
+      focusedElSelector = findCssSelector(this.doc.activeElement);
+    }
+
+    this.valueSpan.innerHTML = "";
+    this.valueSpan.appendChild(frag);
+    if (
+      this.valueSpan.textProperty?.name === "grid-template-areas" &&
+      this.isValid() &&
+      (this.valueSpan.innerText.includes(`"`) ||
+        this.valueSpan.innerText.includes(`'`))
+    ) {
+      this._formatGridTemplateAreasValue();
+    }
+
+    this.ruleView.emit("property-value-updated", {
+      rule: this.prop.rule,
+      property: name,
+      value: val,
+    });
+
+    // Highlight the currently used font in font-family properties.
+    // If we cannot find a match, highlight the first generic family instead.
+    const fontFamilySpans = this.valueSpan.querySelectorAll(
+      "." + FONT_FAMILY_CLASS
+    );
+    if (fontFamilySpans.length && this.prop.enabled && !this.prop.overridden) {
+      this.rule.elementStyle
+        .getUsedFontFamilies()
+        .then(families => {
+          const usedFontFamilies = families.map(font => font.toLowerCase());
+          let foundMatchingFamily = false;
+          let firstGenericSpan = null;
+
+          for (const span of fontFamilySpans) {
+            const authoredFont = span.textContent.toLowerCase();
+
+            if (
+              !firstGenericSpan &&
+              GENERIC_FONT_FAMILIES.includes(authoredFont)
+            ) {
+              firstGenericSpan = span;
+            }
+
+            if (usedFontFamilies.includes(authoredFont)) {
+              span.classList.add("used-font");
+              foundMatchingFamily = true;
+            }
+          }
+
+          if (!foundMatchingFamily && firstGenericSpan) {
+            firstGenericSpan.classList.add("used-font");
+          }
+
+          this.ruleView.emit("font-highlighted", this.valueSpan);
+        })
+        .catch(e =>
+          console.error("Could not get the list of font families", e)
+        );
+    }
+
+    // Attach the color picker tooltip to the color swatches
+    this._colorSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + COLOR_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const span of this._colorSwatchSpans) {
+        // Adding this swatch to the list of swatches our colorpicker
+        // knows about
+        this.ruleView.tooltips.getTooltip("colorPicker").addSwatch(span, {
+          onShow: this._onStartEditing,
+          onPreview: this._onSwatchPreview,
+          onCommit: this._onSwatchCommit,
+          onRevert: this._onSwatchRevert,
+        });
+        const title = l10n("rule.colorSwatch.tooltip");
+        span.setAttribute("title", title);
+        span.dataset.propertyName = this.nameSpan.textContent;
+      }
+    }
+
+    // Attach the cubic-bezier tooltip to the bezier swatches
+    this._bezierSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + BEZIER_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const span of this._bezierSwatchSpans) {
+        // Adding this swatch to the list of swatches our colorpicker
+        // knows about
+        this.ruleView.tooltips.getTooltip("cubicBezier").addSwatch(span, {
+          onShow: this._onStartEditing,
+          onPreview: this._onSwatchPreview,
+          onCommit: this._onSwatchCommit,
+          onRevert: this._onSwatchRevert,
+        });
+        const title = l10n("rule.bezierSwatch.tooltip");
+        span.setAttribute("title", title);
+      }
+    }
+
+    // Attach the linear easing tooltip to the linear easing swatches
+    this._linearEasingSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + LINEAR_EASING_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const span of this._linearEasingSwatchSpans) {
+        // Adding this swatch to the list of swatches our colorpicker
+        // knows about
+        this.ruleView.tooltips
+          .getTooltip("linearEaseFunction")
+          .addSwatch(span, {
+            onShow: this._onStartEditing,
+            onPreview: this._onSwatchPreview,
+            onCommit: this._onSwatchCommit,
+            onRevert: this._onSwatchRevert,
+          });
+        span.setAttribute("title", l10n("rule.bezierSwatch.tooltip"));
+      }
+    }
+
+    // Attach the filter editor tooltip to the filter swatch
+    const span = this.valueSpan.querySelector("." + FILTER_SWATCH_CLASS);
+    if (this.ruleEditor.isEditable) {
+      if (span) {
+        parserOptions.filterSwatch = true;
+
+        this.ruleView.tooltips.getTooltip("filterEditor").addSwatch(
+          span,
+          {
+            onShow: this._onStartEditing,
+            onPreview: this._onSwatchPreview,
+            onCommit: this._onSwatchCommit,
+            onRevert: this._onSwatchRevert,
+          },
+          outputParser,
+          parserOptions
+        );
+        const title = l10n("rule.filterSwatch.tooltip");
+        span.setAttribute("title", title);
+      }
+    }
+
+    this.angleSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + ANGLE_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const angleSpan of this.angleSwatchSpans) {
+        angleSpan.addEventListener("unit-change", this._onSwatchCommit);
+        const title = l10n("rule.angleSwatch.tooltip");
+        angleSpan.setAttribute("title", title);
+      }
+    }
+
+    const nodeFront = this.ruleView.inspector.selection.nodeFront;
+
+    const flexToggle = this.valueSpan.querySelector(".ruleview-flex");
+    if (flexToggle) {
+      flexToggle.setAttribute("title", l10n("rule.flexToggle.tooltip"));
+      flexToggle.classList.toggle(
+        "active",
+        this.ruleView.inspector.highlighters.getNodeForActiveHighlighter(
+          this.ruleView.inspector.highlighters.TYPES.FLEXBOX
+        ) === nodeFront
+      );
+    }
+
+    const gridToggle = this.valueSpan.querySelector(".ruleview-grid");
+    if (gridToggle) {
+      gridToggle.setAttribute("title", l10n("rule.gridToggle.tooltip"));
+      gridToggle.classList.toggle(
+        "active",
+        this.ruleView.highlighters.gridHighlighters.has(nodeFront)
+      );
+      gridToggle.toggleAttribute(
+        "disabled",
+        !this.ruleView.highlighters.canGridHighlighterToggle(nodeFront)
+      );
+    }
+
+    const shapeToggle = this.valueSpan.querySelector(".ruleview-shapeswatch");
+    if (shapeToggle) {
+      const mode =
+        "css" +
+        name
+          .split("-")
+          .map(s => {
+            return s[0].toUpperCase() + s.slice(1);
+          })
+          .join("");
+      shapeToggle.setAttribute("data-mode", mode);
+    }
+
+    // Now that we have updated the property's value, we might have a pending
+    // click on the value container. If we do, we have to trigger a click event
+    // on the right element.
+    // If we are dragging, we don't need to handle the pending click
+    if (this._hasPendingClick && !this._isDragging) {
+      this._hasPendingClick = false;
+      let elToClick;
+
+      if (this._clickedElementOptions !== null) {
+        const { selector, index } = this._clickedElementOptions;
+        elToClick = this.valueSpan.querySelectorAll(selector)[index];
+
+        this._clickedElementOptions = null;
+      }
+
+      if (!elToClick) {
+        elToClick = this.valueSpan;
+      }
+      elToClick.click();
+    }
+
+    // Populate the computed styles and shorthand overridden styles.
+    this._updateComputed();
+    this._updateShorthandOverridden();
+
+    // Update the rule property highlight.
+    this.ruleView._updatePropertyHighlight(this);
+
+    // Restore focus back to the element whose markup was recreated above.
+    if (focusedElSelector) {
+      const elementToFocus = this.doc.querySelector(focusedElSelector);
+      if (elementToFocus) {
+        elementToFocus.focus();
+      }
+    }
+  },
+
+  _onStartEditing() {
+    this.element.classList.remove("ruleview-overridden");
+    this.filterProperty.hidden = true;
+    this.enable.style.visibility = "hidden";
+    this.expander.style.display = "none";
+  },
+
+  get shouldShowComputedExpander() {
+    // Only show the expander to reveal computed properties if:
+    // - the computed properties are actually different from the current property (i.e
+    //   these are longhands while the current property is the shorthand)
+    // - all of the computed properties have defined values. In case the current property
+    //   value contains CSS variables, then the computed properties will be missing and we
+    //   want to avoid showing them.
+    return (
+      this.prop.computed.some(c => c.name !== this.prop.name) &&
+      !this.prop.computed.every(c => !c.value)
+    );
+  },
+
+  /**
+   * Update the visibility of the enable checkbox, the warning indicator, the used
+   * indicator and the filter property, as well as the overridden state of the property.
+   */
+  updatePropertyState() {
+    if (this.prop.enabled) {
+      this.enable.style.removeProperty("visibility");
+    } else {
+      this.enable.style.visibility = "visible";
+    }
+
+    this.enable.checked = this.prop.enabled;
+
+    this.warning.title = !this.isNameValid()
+      ? l10n("rule.warningName.title")
+      : l10n("rule.warning.title");
+
+    this.warning.hidden = this.editing || this.isValid();
+    this.filterProperty.hidden =
+      this.editing ||
+      !this.isValid() ||
+      !this.prop.overridden ||
+      this.ruleEditor.rule.isUnmatched;
+
+    this.expander.style.display = this.shouldShowComputedExpander
+      ? "inline-block"
+      : "none";
+
+    if (
+      !this.editing &&
+      (this.prop.overridden || !this.prop.enabled || !this.prop.isKnownProperty)
+    ) {
+      this.element.classList.add("ruleview-overridden");
+    } else {
+      this.element.classList.remove("ruleview-overridden");
+    }
+
+    this.updatePropertyUsedIndicator();
+    this.updatePropertyCompatibilityIndicator();
+  },
+
+  updatePropertyUsedIndicator() {
+    const { used } = this.prop.isUsed();
+
+    if (this.editing || this.prop.overridden || !this.prop.enabled || used) {
+      this.element.classList.remove("unused");
+      this.unusedState.hidden = true;
+    } else {
+      this.element.classList.add("unused");
+      this.unusedState.hidden = false;
+    }
+  },
+
+  async updatePropertyCompatibilityIndicator() {
+    const { isCompatible } = await this.prop.isCompatible();
+
+    if (this.editing || isCompatible) {
+      this.compatibilityState.hidden = true;
+    } else {
+      this.compatibilityState.hidden = false;
+    }
+  },
+
+  /**
+   * Update the indicator for computed styles. The computed styles themselves
+   * are populated on demand, when they become visible.
+   */
+  _updateComputed() {
+    this.computed.innerHTML = "";
+
+    this.expander.style.display =
+      !this.editing && this.shouldShowComputedExpander
+        ? "inline-block"
+        : "none";
+
+    this._populatedComputed = false;
+    if (this.expander.hasAttribute("open")) {
+      this._populateComputed();
+    }
+  },
+
+  /**
+   * Populate the list of computed styles.
+   */
+  _populateComputed() {
+    if (this._populatedComputed) {
+      return;
+    }
+    this._populatedComputed = true;
+
+    for (const computed of this.prop.computed) {
+      // Don't bother to duplicate information already
+      // shown in the text property.
+      if (computed.name === this.prop.name) {
+        continue;
+      }
+
+      // Store the computed style element for easy access when highlighting
+      // styles
+      computed.element = this._createComputedListItem(
+        this.computed,
+        computed,
+        "ruleview-computed"
+      );
+    }
+  },
+
+  /**
+   * Update the indicator for overridden shorthand styles. The shorthand
+   * overridden styles themselves are populated on demand, when they
+   * become visible.
+   */
+  _updateShorthandOverridden() {
+    this.shorthandOverridden.innerHTML = "";
+
+    this._populatedShorthandOverridden = false;
+    this._populateShorthandOverridden();
+  },
+
+  /**
+   * Populate the list of overridden shorthand styles.
+   */
+  _populateShorthandOverridden() {
+    if (
+      this._populatedShorthandOverridden ||
+      this.prop.overridden ||
+      !this.shouldShowComputedExpander
+    ) {
+      return;
+    }
+    this._populatedShorthandOverridden = true;
+
+    for (const computed of this.prop.computed) {
+      // Don't display duplicate information or show properties
+      // that are completely overridden.
+      if (computed.name === this.prop.name || !computed.overridden) {
+        continue;
+      }
+
+      this._createComputedListItem(
+        this.shorthandOverridden,
+        computed,
+        "ruleview-overridden-item"
+      );
+    }
+  },
+
+  /**
+   * Creates and populates a list item with the computed CSS property.
+   */
+  _createComputedListItem(parentEl, computed, className) {
+    const li = createChild(parentEl, "li", {
+      class: className,
+    });
+
+    if (computed.overridden) {
+      li.classList.add("ruleview-overridden");
+    }
+
+    const nameContainer = createChild(li, "span", {
+      class: "ruleview-namecontainer",
+    });
+
+    createChild(nameContainer, "span", {
+      class: "ruleview-propertyname theme-fg-color3",
+      textContent: computed.name,
+    });
+    appendText(nameContainer, ": ");
+
+    const outputParser = this.ruleView._outputParser;
+    const frag = outputParser.parseCssProperty(computed.name, computed.value, {
+      colorSwatchClass: "ruleview-swatch ruleview-colorswatch",
+      urlClass: "theme-link",
+      baseURI: this.sheetHref,
+      fontFamilyClass: "ruleview-font-family",
+    });
+
+    // Store the computed property value that was parsed for output
+    computed.parsedValue = frag.textContent;
+
+    const propertyContainer = createChild(li, "span", {
+      class: "ruleview-propertyvaluecontainer",
+    });
+
+    createChild(propertyContainer, "span", {
+      class: "ruleview-propertyvalue theme-fg-color1",
+      child: frag,
+    });
+    appendText(propertyContainer, ";");
+
+    return li;
+  },
+
+  /**
+   * Handle updates to the preference which disables/enables the feature to
+   * edit size properties on drag.
+   */
+  _onDraggablePreferenceChanged() {
+    if (this._isDraggableProperty(this.prop)) {
+      this._addDraggingCapability();
+    } else {
+      this._removeDraggingCapacity();
+    }
+  },
+
+  /**
+   * Stop clicks propogating down the tree from the enable / disable checkbox.
+   */
+  _onEnableClicked(event) {
+    event.stopPropagation();
+  },
+
+  /**
+   * Handles clicks on the disabled property.
+   */
+  _onEnableChanged(event) {
+    this.prop.setEnabled(this.enable.checked);
+    event.stopPropagation();
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+  },
+
+  /**
+   * Handles clicks on the computed property expander. If the computed list is
+   * open due to user expanding or style filtering, collapse the computed list
+   * and close the expander. Otherwise, add user-open attribute which is used to
+   * expand the computed list and tracks whether or not the computed list is
+   * expanded by manually by the user.
+   */
+  _onExpandClicked(event) {
+    if (
+      this.computed.hasAttribute("filter-open") ||
+      this.computed.hasAttribute("user-open")
+    ) {
+      this.expander.removeAttribute("open");
+      this.computed.removeAttribute("filter-open");
+      this.computed.removeAttribute("user-open");
+      this.shorthandOverridden.hidden = false;
+      this._populateShorthandOverridden();
+    } else {
+      this.expander.setAttribute("open", "true");
+      this.computed.setAttribute("user-open", "");
+      this.shorthandOverridden.hidden = true;
+      this._populateComputed();
+    }
+
+    event.stopPropagation();
+  },
+
+  /**
+   * Expands the computed list when a computed property is matched by the style
+   * filtering. The filter-open attribute is used to track whether or not the
+   * computed list was toggled opened by the filter.
+   */
+  expandForFilter() {
+    if (!this.computed.hasAttribute("user-open")) {
+      this.expander.setAttribute("open", "true");
+      this.computed.setAttribute("filter-open", "");
+      this._populateComputed();
+    }
+  },
+
+  /**
+   * Collapses the computed list that was expanded by style filtering.
+   */
+  collapseForFilter() {
+    this.computed.removeAttribute("filter-open");
+
+    if (!this.computed.hasAttribute("user-open")) {
+      this.expander.removeAttribute("open");
+    }
+  },
+
+  /**
+   * Called when the property name's inplace editor is closed.
+   * Ignores the change if the user pressed escape, otherwise
+   * commits it.
+   *
+   * @param {String} value
+   *        The value contained in the editor.
+   * @param {Boolean} commit
+   *        True if the change should be applied.
+   * @param {Number} direction
+   *        The move focus direction number.
+   * @param {Number} key
+   *        The event keyCode that trigger the editor to close
+   */
+  _onNameDone(value, commit, direction, key) {
+    const isNameUnchanged =
+      (!commit && !this.ruleEditor.isEditing) || this.committed.name === value;
+    if (this.prop.value && isNameUnchanged) {
+      return;
+    }
+
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+
+    // Remove a property if the name is empty
+    if (!value.trim()) {
+      this.remove(direction);
+      return;
+    }
+
+    // Remove a property if the property value is empty and the property
+    // value is not about to be focused
+    if (!this.prop.value && direction !== Services.focus.MOVEFOCUS_FORWARD) {
+      this.remove(direction);
+      return;
+    }
+
+    // Adding multiple rules inside of name field overwrites the current
+    // property with the first, then adds any more onto the property list.
+    const properties = parseDeclarations(this.cssProperties.isKnown, value);
+
+    if (properties.length) {
+      this.prop.setName(properties[0].name);
+      this.committed.name = this.prop.name;
+
+      if (!this.prop.enabled) {
+        this.prop.setEnabled(true);
+      }
+
+      if (properties.length > 1) {
+        this.prop.setValue(properties[0].value, properties[0].priority);
+        this.ruleEditor.addProperties(properties.slice(1), this.prop);
+      }
+    }
+  },
+
+  /**
+   * Remove property from style and the editors from DOM.
+   * Begin editing next or previous available property given the focus
+   * direction.
+   *
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  remove(direction) {
+    if (this._colorSwatchSpans && this._colorSwatchSpans.length) {
+      for (const span of this._colorSwatchSpans) {
+        this.ruleView.tooltips.getTooltip("colorPicker").removeSwatch(span);
+      }
+    }
+
+    if (this.angleSwatchSpans && this.angleSwatchSpans.length) {
+      for (const span of this.angleSwatchSpans) {
+        span.removeEventListener("unit-change", this._onSwatchCommit);
+      }
+    }
+
+    this.ruleView.off(
+      "draggable-preference-updated",
+      this._onDraggablePreferenceChanged
+    );
+
+    this.element.remove();
+    this.ruleEditor.rule.editClosestTextProperty(this.prop, direction);
+    this.nameSpan.textProperty = null;
+    this.valueSpan.textProperty = null;
+    this.prop.remove();
+  },
+
+  /**
+   * Called when a value editor closes.  If the user pressed escape,
+   * revert to the value this property had before editing.
+   *
+   * @param {String} value
+   *        The value contained in the editor.
+   * @param {Boolean} commit
+   *        True if the change should be applied.
+   * @param {Number} direction
+   *        The move focus direction number.
+   * @param {Number} key
+   *        The event keyCode that trigger the editor to close
+   */
+  _onValueDone(value = "", commit, direction, key) {
+    const parsedProperties = this._getValueAndExtraProperties(value);
+    const val = parseSingleValue(
+      this.cssProperties.isKnown,
+      parsedProperties.firstValue
+    );
+    const isValueUnchanged =
+      (!commit && !this.ruleEditor.isEditing) ||
+      (!parsedProperties.propertiesToAdd.length &&
+        this.committed.value === val.value &&
+        this.committed.priority === val.priority);
+
+    // If the value is not empty and unchanged, revert the property back to
+    // its original value and enabled or disabled state
+    if (value.trim() && isValueUnchanged) {
+      this.ruleEditor.rule.previewPropertyValue(
+        this.prop,
+        val.value,
+        val.priority
+      );
+      this.rule.setPropertyEnabled(this.prop, this.prop.enabled);
+      return;
+    }
+
+    // Check if unit of value changed to add dragging feature
+    if (this._isDraggableProperty(val)) {
+      this._addDraggingCapability();
+    } else {
+      this._removeDraggingCapacity();
+    }
+
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+
+    // First, set this property value (common case, only modified a property)
+    this.prop.setValue(val.value, val.priority);
+
+    if (!this.prop.enabled) {
+      this.prop.setEnabled(true);
+    }
+
+    this.committed.value = this.prop.value;
+    this.committed.priority = this.prop.priority;
+
+    // If needed, add any new properties after this.prop.
+    this.ruleEditor.addProperties(parsedProperties.propertiesToAdd, this.prop);
+
+    // If the input value is empty and the focus is moving forward to the next
+    // editable field, then remove the whole property.
+    // A timeout is used here to accurately check the state, since the inplace
+    // editor `done` and `destroy` events fire before the next editor
+    // is focused.
+    if (!value.trim() && direction !== Services.focus.MOVEFOCUS_BACKWARD) {
+      setTimeout(() => {
+        if (!this.editing) {
+          this.remove(direction);
+        }
+      }, 0);
+    }
+  },
+
+  /**
+   * Called when the swatch editor wants to commit a value change.
+   */
+  _onSwatchCommit() {
+    this._onValueDone(this.valueSpan.textContent, true);
+    this.update();
+  },
+
+  /**
+   * Called when the swatch editor wants to preview a value change.
+   */
+  _onSwatchPreview() {
+    this._previewValue(this.valueSpan.textContent);
+  },
+
+  /**
+   * Called when the swatch editor closes from an ESC. Revert to the original
+   * value of this property before editing.
+   */
+  _onSwatchRevert() {
+    this._previewValue(this.prop.value, true);
+    this.update();
+  },
+
+  /**
+   * Parse a value string and break it into pieces, starting with the
+   * first value, and into an array of additional properties (if any).
+   *
+   * Example: Calling with "red; width: 100px" would return
+   * { firstValue: "red", propertiesToAdd: [{ name: "width", value: "100px" }] }
+   *
+   * @param {String} value
+   *        The string to parse
+   * @return {Object} An object with the following properties:
+   *        firstValue: A string containing a simple value, like
+   *                    "red" or "100px!important"
+   *        propertiesToAdd: An array with additional properties, following the
+   *                         parseDeclarations format of {name,value,priority}
+   */
+  _getValueAndExtraProperties(value) {
+    // The inplace editor will prevent manual typing of multiple properties,
+    // but we need to deal with the case during a paste event.
+    // Adding multiple properties inside of value editor sets value with the
+    // first, then adds any more onto the property list (below this property).
+    let firstValue = value;
+    let propertiesToAdd = [];
+
+    const properties = parseDeclarations(this.cssProperties.isKnown, value);
+
+    // Check to see if the input string can be parsed as multiple properties
+    if (properties.length) {
+      // Get the first property value (if any), and any remaining
+      // properties (if any)
+      if (!properties[0].name && properties[0].value) {
+        firstValue = properties[0].value;
+        propertiesToAdd = properties.slice(1);
+      } else if (properties[0].name && properties[0].value) {
+        // In some cases, the value could be a property:value pair
+        // itself.  Join them as one value string and append
+        // potentially following properties
+        firstValue = properties[0].name + ": " + properties[0].value;
+        propertiesToAdd = properties.slice(1);
+      }
+    }
+
+    return {
+      propertiesToAdd,
+      firstValue,
+    };
+  },
+
+  /**
+   * Live preview this property, without committing changes.
+   *
+   * @param {String} value
+   *        The value to set the current property to.
+   * @param {Boolean} reverting
+   *        True if we're reverting the previously previewed value
+   */
+  _previewValue(value, reverting = false) {
+    // Since function call is debounced, we need to make sure we are still
+    // editing, and any selector modifications have been completed
+    if (!reverting && (!this.editing || this.ruleEditor.isEditing)) {
+      return;
+    }
+
+    const val = parseSingleValue(this.cssProperties.isKnown, value);
+    this.ruleEditor.rule.previewPropertyValue(
+      this.prop,
+      val.value,
+      val.priority
+    );
+  },
+
+  /**
+   * Check if the event passed has a "small increment" modifier
+   * Alt on macosx and ctrl on other OSs
+   *
+   * @param  {KeyboardEvent} event
+   * @returns {Boolean}
+   */
+  _hasSmallIncrementModifier(event) {
+    const modifier =
+      lazy.AppConstants.platform === "macosx" ? "altKey" : "ctrlKey";
+    return event[modifier] === true;
+  },
+
+  /**
+   * Parses the value to check if it is a dimension
+   * e.g. if the input is "128px" it will return an object like
+   * { groups: { value: "128", unit: "px"}}
+   *
+   * @param  {String} value
+   * @returns {Object|null}
+   */
+  _parseDimension(value) {
+    // The regex handles values like +1, -1, 1e4, .4, 1.3e-4, 1.567
+    const cssDimensionRegex =
+      /^(?<value>[+-]?(\d*\.)?\d+(e[+-]?\d+)?)(?<unit>(%|[a-zA-Z]+))$/;
+    return value.match(cssDimensionRegex);
+  },
+
+  /**
+   * Check if a textProperty value is supported to add the dragging feature
+   *
+   * @param  {TextProperty} textProperty
+   * @returns {Boolean}
+   */
+  _isDraggableProperty(textProperty) {
+    // Check if the feature is explicitly disabled.
+    if (!this.ruleView.draggablePropertiesEnabled) {
+      return false;
+    }
+    // temporary way of fixing the bug when editing inline styles
+    // otherwise the textPropertyEditor object is destroyed on each value edit
+    // See Bug 1755024
+    if (this.rule.domRule.type == ELEMENT_STYLE) {
+      return false;
+    }
+
+    const nbValues = textProperty.value.split(" ").length;
+    if (nbValues > 1) {
+      // we do not support values like "1px solid red" yet
+      // See 1755025
+      return false;
+    }
+
+    const dimensionMatchObj = this._parseDimension(textProperty.value);
+    return !!dimensionMatchObj;
+  },
+
+  _draggingOnMouseDown(event) {
+    this._isDragging = true;
+    this.valueSpan.setPointerCapture(event.pointerId);
+    this._draggingController = new AbortController();
+    const { signal } = this._draggingController;
+
+    // turn off user-select in CSS when we drag
+    this.valueSpan.classList.add(IS_DRAGGING_CLASSNAME);
+
+    const dimensionObj = this._parseDimension(this.prop.value);
+    const { value, unit } = dimensionObj.groups;
+    this._draggingValueCache = {
+      isInDeadzone: true,
+      previousScreenX: event.screenX,
+      value: parseFloat(value),
+      unit,
+    };
+
+    this.valueSpan.addEventListener("mousemove", this._draggingOnMouseMove, {
+      signal,
+    });
+    this.valueSpan.addEventListener("mouseup", this._draggingOnMouseUp, {
+      signal,
+    });
+    this.valueSpan.addEventListener("keydown", this._draggingOnKeydown, {
+      signal,
+    });
+  },
+
+  _draggingOnMouseMove(event) {
+    if (!this._isDragging) {
+      return;
+    }
+
+    const { isInDeadzone, previousScreenX } = this._draggingValueCache;
+    let deltaX = event.screenX - previousScreenX;
+
+    // If `isInDeadzone` is still true, the user has not previously left the deadzone.
+    if (isInDeadzone) {
+      // If the mouse is still in the deadzone, bail out immediately.
+      if (Math.abs(deltaX) < DRAGGING_DEADZONE_DISTANCE) {
+        return;
+      }
+
+      // Otherwise, remove the DRAGGING_DEADZONE_DISTANCE from the current deltaX, so that
+      // the value does not update too abruptly.
+      deltaX =
+        Math.sign(deltaX) * (Math.abs(deltaX) - DRAGGING_DEADZONE_DISTANCE);
+
+      // Update the state to remember the user is out of the deadzone.
+      this._draggingValueCache.isInDeadzone = false;
+    }
+
+    let draggingSpeed = DEFAULT_DRAGGING_SPEED;
+    if (event.shiftKey) {
+      draggingSpeed = FAST_DRAGGING_SPEED;
+    } else if (this._hasSmallIncrementModifier(event)) {
+      draggingSpeed = SLOW_DRAGGING_SPEED;
+    }
+
+    const delta = deltaX * draggingSpeed;
+    this._draggingValueCache.previousScreenX = event.screenX;
+    this._draggingValueCache.value += delta;
+
+    if (delta == 0) {
+      return;
+    }
+
+    const { value, unit } = this._draggingValueCache;
+    // We use toFixed to avoid the case where value is too long, 9.00001px for example
+    const roundedValue = Number.isInteger(value) ? value : value.toFixed(1);
+    this.prop.setValue(roundedValue + unit, this.prop.priority);
+    this.ruleView.emitForTests("property-updated-by-dragging");
+    this._hasDragged = true;
+  },
+
+  _draggingOnMouseUp(event) {
+    if (!this._isDragging) {
+      return;
+    }
+    if (this._hasDragged) {
+      this.committed.value = this.prop.value;
+      this.prop.setEnabled(true);
+    }
+    this._onStopDragging(event);
+  },
+
+  _draggingOnKeydown(event) {
+    if (event.key == "Escape") {
+      this.prop.setValue(this.committed.value, this.committed.priority);
+      this._onStopDragging(event);
+      event.preventDefault();
+    }
+  },
+
+  _onStopDragging(event) {
+    // childHasDragged is used to stop the propagation of a click event when we
+    // release the mouse in the ruleview.
+    // The click event is not emitted when we have a pending click on the text property.
+    if (this._hasDragged && !this._hasPendingClick) {
+      this.ruleView.childHasDragged = true;
+    }
+    this._isDragging = false;
+    this._hasDragged = false;
+    this._draggingValueCache = null;
+    this.valueSpan.releasePointerCapture(event.pointerId);
+    this.valueSpan.classList.remove(IS_DRAGGING_CLASSNAME);
+    this._draggingController.abort();
+  },
+
+  /**
+   * add event listeners to add the ability to modify any size value
+   * by dragging the mouse horizontally
+   */
+  _addDraggingCapability() {
+    if (this.valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME)) {
+      return;
+    }
+    this.valueSpan.classList.add(DRAGGABLE_VALUE_CLASSNAME);
+    this.valueSpan.addEventListener("mousedown", this._draggingOnMouseDown);
+  },
+
+  _removeDraggingCapacity() {
+    if (!this.valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME)) {
+      return;
+    }
+    this._draggingController = null;
+    this.valueSpan.classList.remove(DRAGGABLE_VALUE_CLASSNAME);
+    this.valueSpan.removeEventListener("mousedown", this._draggingOnMouseDown);
+  },
+
+  /**
+   * Validate this property. Does it make sense for this value to be assigned
+   * to this property name? This does not apply the property value
+   *
+   * @return {Boolean} true if the property name + value pair is valid, false otherwise.
+   */
+  isValid() {
+    return this.prop.isValid();
+  },
+
+  /**
+   * Validate the name of this property.
+   * @return {Boolean} true if the property name is valid, false otherwise.
+   */
+  isNameValid() {
+    return this.prop.isNameValid();
+  },
+
+  /**
+   * Display grid-template-area value strings each on their own line
+   * to display it in an ascii-art style matrix
+   */
+  _formatGridTemplateAreasValue() {
+    this.valueSpan.classList.add("ruleview-propertyvalue-break-spaces");
+
+    let quoteSymbolsUsed = [];
+
+    const getQuoteSymbolsUsed = cssValue => {
+      const regex = /\"|\'/g;
+      const found = cssValue.match(regex);
+      quoteSymbolsUsed = found.filter((_, i) => i % 2 === 0);
+    };
+
+    getQuoteSymbolsUsed(this.valueSpan.innerText);
+
+    this.valueSpan.innerText = this.valueSpan.innerText
+      .split('"')
+      .filter(s => s !== "")
+      .map(s => s.split("'"))
+      .flat()
+      .map(s => s.trim().replace(/\s+/g, " "))
+      .filter(s => s.length)
+      .map(line => line.split(" "))
+      .map((line, i, lines) =>
+        line.map((col, j) =>
+          col.padEnd(Math.max(...lines.map(l => l[j].length)), " ")
+        )
+      )
+      .map(
+        (line, i) =>
+          `\n${quoteSymbolsUsed[i]}` + line.join(" ") + quoteSymbolsUsed[i]
+      )
+      .join(" ");
+  },
+};
+
+module.exports = TextPropertyEditor;
diff --git a/devtools/client/inspector/shared/highlighters-overlay.js b/devtools/client/inspector/shared/highlighters-overlay.js
new file mode 100644
index 0000000000..6082b8b842
--- /dev/null
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -0,0 +1,2014 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  safeAsyncMethod,
+} = require("resource://devtools/shared/async-utils.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const WalkerEventListener = require("resource://devtools/client/inspector/shared/walker-event-listener.js");
+const {
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_SHAPE_POINT_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+
+loader.lazyRequireGetter(
+  this,
+  "parseURL",
+  "resource://devtools/client/shared/source-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "asyncStorage",
+  "resource://devtools/shared/async-storage.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "gridsReducer",
+  "resource://devtools/client/inspector/grids/reducers/grids.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "highlighterSettingsReducer",
+  "resource://devtools/client/inspector/grids/reducers/highlighter-settings.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "flexboxReducer",
+  "resource://devtools/client/inspector/flexbox/reducers/flexbox.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "deepEqual",
+  "resource://devtools/shared/DevToolsUtils.js",
+  true
+);
+loader.lazyGetter(this, "HighlightersBundle", () => {
+  return new Localization(["devtools/shared/highlighters.ftl"], true);
+});
+
+const DEFAULT_HIGHLIGHTER_COLOR = "#9400FF";
+const SUBGRID_PARENT_ALPHA = 0.5;
+
+const TYPES = {
+  BOXMODEL: "BoxModelHighlighter",
+  FLEXBOX: "FlexboxHighlighter",
+  GEOMETRY: "GeometryEditorHighlighter",
+  GRID: "CssGridHighlighter",
+  SHAPES: "ShapesHighlighter",
+  SELECTOR: "SelectorHighlighter",
+  TRANSFORM: "CssTransformHighlighter",
+};
+
+/**
+ * While refactoring to an abstracted way to show and hide highlighters,
+ * we did not update all tests and code paths which listen for exact events.
+ *
+ * When we show or hide highlighters we reference this mapping to
+ * emit events that consumers may be listening to.
+ *
+ * This list should go away as we incrementally rewrite tests to use
+ * abstract event names with data payloads indicating the highlighter.
+ *
+ * DO NOT OPTIMIZE THIS MAPPING AS CONCATENATED SUBSTRINGS!
+ * It makes it difficult to do project-wide searches for exact matches.
+ */
+const HIGHLIGHTER_EVENTS = {
+  [TYPES.GRID]: {
+    shown: "grid-highlighter-shown",
+    hidden: "grid-highlighter-hidden",
+  },
+  [TYPES.GEOMETRY]: {
+    shown: "geometry-editor-highlighter-shown",
+    hidden: "geometry-editor-highlighter-hidden",
+  },
+  [TYPES.SHAPES]: {
+    shown: "shapes-highlighter-shown",
+    hidden: "shapes-highlighter-hidden",
+  },
+  [TYPES.TRANSFORM]: {
+    shown: "css-transform-highlighter-shown",
+    hidden: "css-transform-highlighter-hidden",
+  },
+};
+
+// Tool IDs mapped by highlighter type. Used to log telemetry for opening & closing tools.
+const TELEMETRY_TOOL_IDS = {
+  [TYPES.FLEXBOX]: "FLEXBOX_HIGHLIGHTER",
+  [TYPES.GRID]: "GRID_HIGHLIGHTER",
+};
+
+// Scalars mapped by highlighter type. Used to log telemetry about highlighter triggers.
+const TELEMETRY_SCALARS = {
+  [TYPES.FLEXBOX]: {
+    layout: "devtools.layout.flexboxhighlighter.opened",
+    markup: "devtools.markup.flexboxhighlighter.opened",
+    rule: "devtools.rules.flexboxhighlighter.opened",
+  },
+
+  [TYPES.GRID]: {
+    grid: "devtools.grid.gridinspector.opened",
+    markup: "devtools.markup.gridinspector.opened",
+    rule: "devtools.rules.gridinspector.opened",
+  },
+};
+
+/**
+ * HighlightersOverlay manages the visibility of highlighters in the Inspector.
+ */
+class HighlightersOverlay {
+  /**
+   * @param  {Inspector} inspector
+   *         Inspector toolbox panel.
+   */
+  constructor(inspector) {
+    this.inspector = inspector;
+    this.store = this.inspector.store;
+
+    this.telemetry = this.inspector.telemetry;
+    this.maxGridHighlighters = Services.prefs.getIntPref(
+      "devtools.gridinspector.maxHighlighters"
+    );
+
+    // Map of active highlighter types to objects with the highlighted nodeFront and the
+    // highlighter instance. Ex: "BoxModelHighlighter" => { nodeFront, highlighter }
+    // It will fully replace this.highlighters when all highlighter consumers are updated
+    // to use it as the single source of truth for which highlighters are visible.
+    this._activeHighlighters = new Map();
+    // Map of highlighter types to symbols. Showing highlighters is an async operation,
+    // until it doesn't complete, this map will be populated with the requested type and
+    // a unique symbol identifying that request. Once completed, the entry is removed.
+    this._pendingHighlighters = new Map();
+    // Map of highlighter types to objects with metadata used to restore active
+    // highlighters after a page reload.
+    this._restorableHighlighters = new Map();
+    // Collection of instantiated highlighter actors like FlexboxHighlighter,
+    // ShapesHighlighter and GeometryEditorHighlighter.
+    this.highlighters = {};
+    // Map of grid container node to an object with the grid highlighter instance
+    // and, if the node is a subgrid, the parent grid node and parent grid highlighter.
+    // Ex: {NodeFront} => {
+    //  highlighter: {CustomHighlighterFront},
+    //  parentGridNode: {NodeFront|null},
+    //  parentGridHighlighter: {CustomHighlighterFront|null}
+    // }
+    this.gridHighlighters = new Map();
+    // Collection of instantiated in-context editors, like ShapesInContextEditor, which
+    // behave like highlighters but with added editing capabilities that need to map value
+    // changes to properties in the Rule view.
+    this.editors = {};
+
+    // Highlighter state.
+    this.state = {
+      // Map of grid container NodeFront to the their stored grid options
+      // Used to restore grid highlighters on reload (should be migrated to
+      // _restorableHighlighters in Bug 1572652).
+      grids: new Map(),
+      // Shape Path Editor highlighter options.
+      // Used as a cache for the latest configuration when showing the highlighter.
+      // It is reused and augmented when hovering coordinates in the Rules view which
+      // mark the corresponding points in the highlighter overlay.
+      shapes: {},
+    };
+
+    // NodeFront of element that is highlighted by the geometry editor.
+    this.geometryEditorHighlighterShown = null;
+    // Name of the highlighter shown on mouse hover.
+    this.hoveredHighlighterShown = null;
+    // NodeFront of the shape that is highlighted
+    this.shapesHighlighterShown = null;
+
+    this.onClick = this.onClick.bind(this);
+    this.onDisplayChange = this.onDisplayChange.bind(this);
+    this.onMarkupMutation = this.onMarkupMutation.bind(this);
+    this._onResourceAvailable = this._onResourceAvailable.bind(this);
+
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseOut = this.onMouseOut.bind(this);
+    this.hideAllHighlighters = this.hideAllHighlighters.bind(this);
+    this.hideFlexboxHighlighter = this.hideFlexboxHighlighter.bind(this);
+    this.hideGridHighlighter = this.hideGridHighlighter.bind(this);
+    this.hideShapesHighlighter = this.hideShapesHighlighter.bind(this);
+    this.showFlexboxHighlighter = this.showFlexboxHighlighter.bind(this);
+    this.showGridHighlighter = this.showGridHighlighter.bind(this);
+    this.showShapesHighlighter = this.showShapesHighlighter.bind(this);
+    this._handleRejection = this._handleRejection.bind(this);
+    this.onShapesHighlighterShown = this.onShapesHighlighterShown.bind(this);
+    this.onShapesHighlighterHidden = this.onShapesHighlighterHidden.bind(this);
+
+    // Catch unexpected errors from async functions if the manager has been destroyed.
+    this.hideHighlighterType = safeAsyncMethod(
+      this.hideHighlighterType.bind(this),
+      () => this.destroyed
+    );
+    this.showHighlighterTypeForNode = safeAsyncMethod(
+      this.showHighlighterTypeForNode.bind(this),
+      () => this.destroyed
+    );
+    this.showGridHighlighter = safeAsyncMethod(
+      this.showGridHighlighter.bind(this),
+      () => this.destroyed
+    );
+    this.restoreState = safeAsyncMethod(
+      this.restoreState.bind(this),
+      () => this.destroyed
+    );
+
+    // Add inspector events, not specific to a given view.
+    this.inspector.on("markupmutation", this.onMarkupMutation);
+
+    this.resourceCommand = this.inspector.toolbox.resourceCommand;
+    this.resourceCommand.watchResources(
+      [this.resourceCommand.TYPES.ROOT_NODE],
+      { onAvailable: this._onResourceAvailable }
+    );
+
+    this.walkerEventListener = new WalkerEventListener(this.inspector, {
+      "display-change": this.onDisplayChange,
+    });
+
+    if (this.toolbox.win.matchMedia("(prefers-reduced-motion)").matches) {
+      this._showSimpleHighlightersMessage();
+    }
+
+    EventEmitter.decorate(this);
+  }
+
+  get inspectorFront() {
+    return this.inspector.inspectorFront;
+  }
+
+  get target() {
+    return this.inspector.currentTarget;
+  }
+
+  get toolbox() {
+    return this.inspector.toolbox;
+  }
+
+  // FIXME: Shim for HighlightersOverlay.parentGridHighlighters
+  // Remove after updating tests to stop accessing this map directly. Bug 1683153
+  get parentGridHighlighters() {
+    return Array.from(this.gridHighlighters.values()).reduce((map, value) => {
+      const { parentGridNode, parentGridHighlighter } = value;
+      if (parentGridNode) {
+        map.set(parentGridNode, parentGridHighlighter);
+      }
+
+      return map;
+    }, new Map());
+  }
+
+  /**
+   * Optionally run some operations right after showing a highlighter of a given type,
+   * but before notifying consumers by emitting the "highlighter-shown" event.
+   *
+   * This is a chance to run some non-essential operations like: logging telemetry data,
+   * storing metadata about the highlighter to enable restoring it after refresh, etc.
+   *
+   * @param  {String} type
+   *          Highlighter type shown.
+   * @param  {NodeFront} nodeFront
+   *          Node front of the element that was highlighted.
+   * @param  {Options} options
+   *          Optional object with options passed to the highlighter.
+   */
+  _afterShowHighlighterTypeForNode(type, nodeFront, options) {
+    switch (type) {
+      // Log telemetry for showing the flexbox and grid highlighters.
+      case TYPES.FLEXBOX:
+      case TYPES.GRID:
+        const toolID = TELEMETRY_TOOL_IDS[type];
+        if (toolID) {
+          this.telemetry.toolOpened(toolID, this);
+        }
+
+        const scalar = TELEMETRY_SCALARS[type]?.[options?.trigger];
+        if (scalar) {
+          this.telemetry.scalarAdd(scalar, 1);
+        }
+
+        break;
+    }
+
+    // Set metadata necessary to restore the active highlighter upon page refresh.
+    if (type === TYPES.FLEXBOX) {
+      const { url } = this.target;
+      const selectors = [...this.inspector.selectionCssSelectors];
+
+      this._restorableHighlighters.set(type, {
+        options,
+        selectors,
+        type,
+        url,
+      });
+    }
+  }
+
+  /**
+   * Optionally run some operations before showing a highlighter of a given type.
+   *
+   * Depending its type, before showing a new instance of a highlighter, we may do extra
+   * operations, like hiding another visible highlighter, or preventing the show
+   * operation, for example due to a duplicate call with the same arguments.
+   *
+   * Returns a promise that resovles with a boolean indicating whether to skip showing
+   * the highlighter with these arguments.
+   *
+   * @param  {String} type
+   *          Highlighter type to show.
+   * @param  {NodeFront} nodeFront
+   *          Node front of the element to be highlighted.
+   * @param  {Options} options
+   *          Optional object with options to pass to the highlighter.
+   * @return {Promise}
+   */
+  async _beforeShowHighlighterTypeForNode(type, nodeFront, options) {
+    // Get the data associated with the visible highlighter of this type, if any.
+    const {
+      highlighter: activeHighlighter,
+      nodeFront: activeNodeFront,
+      options: activeOptions,
+      timer: activeTimer,
+    } = this.getDataForActiveHighlighter(type);
+
+    // There isn't an active highlighter of this type. Early return, proceed with showing.
+    if (!activeHighlighter) {
+      return false;
+    }
+
+    // Whether conditions are met to skip showing the highlighter (ex: duplicate calls).
+    let skipShow = false;
+
+    // Clear any autohide timer associated with this highlighter type.
+    // This clears any existing timer for duplicate calls to show() if:
+    // - called with different options.duration
+    // - called once with options.duration, then without (see deepEqual() above)
+    clearTimeout(activeTimer);
+
+    switch (type) {
+      // Hide the visible selector highlighter if called for the same node,
+      // but with a different selector.
+      case TYPES.SELECTOR:
+        if (
+          nodeFront === activeNodeFront &&
+          options?.selector !== activeOptions?.selector
+        ) {
+          await this.hideHighlighterType(TYPES.SELECTOR);
+        }
+        break;
+
+      // For others, hide the existing highlighter before showing it for a different node.
+      // Else, if the node is the same and options are the same, skip a duplicate call.
+      // Duplicate calls to show the highlighter for the same node are allowed
+      // if the options are different (for example, when scheduling autohide).
+      default:
+        if (nodeFront !== activeNodeFront) {
+          await this.hideHighlighterType(type);
+        } else if (deepEqual(options, activeOptions)) {
+          skipShow = true;
+        }
+    }
+
+    return skipShow;
+  }
+
+  /**
+   * Optionally run some operations before hiding a highlighter of a given type.
+   * Runs only if a highlighter of that type exists.
+   *
+   * @param {String} type
+   *         highlighter type
+   * @return {Promise}
+   */
+  _beforeHideHighlighterType(type) {
+    switch (type) {
+      // Log telemetry for hiding the flexbox and grid highlighters.
+      case TYPES.FLEXBOX:
+      case TYPES.GRID:
+        const toolID = TELEMETRY_TOOL_IDS[type];
+        const conditions = {
+          [TYPES.FLEXBOX]: () => {
+            // always stop the timer when the flexbox highlighter is about to be hidden.
+            return true;
+          },
+          [TYPES.GRID]: () => {
+            // stop the timer only once the last grid highlighter is about to be hidden.
+            return this.gridHighlighters.size === 1;
+          },
+        };
+
+        if (toolID && conditions[type].call(this)) {
+          this.telemetry.toolClosed(toolID, this);
+        }
+
+        break;
+    }
+  }
+
+  /**
+   * Get the maximum number of possible active highlighter instances of a given type.
+   *
+   * @param  {String} type
+   *         Highlighter type
+   * @return {Number}
+   *         Default 1
+   */
+  _getMaxActiveHighlighters(type) {
+    let max;
+
+    switch (type) {
+      // Grid highligthters are special (there is a parent-child relationship between
+      // subgrid and parent grid) so we suppport multiple visible instances.
+      // Grid highlighters are performance-intensive and this limit is somewhat arbitrary
+      // to guard against performance degradation.
+      case TYPES.GRID:
+        max = this.maxGridHighlighters;
+        break;
+      // By default, for all other highlighter types, only one instance may visible.
+      // Before showing a new highlighter, any other instance will be hidden.
+      default:
+        max = 1;
+    }
+
+    return max;
+  }
+
+  /**
+   * Get a highlighter instance of the given type for the given node front.
+   *
+   * @param  {String} type
+   *         Highlighter type.
+   * @param  {NodeFront} nodeFront
+   *         Node front of the element to be highlighted with the requested highlighter.
+   * @return {Promise}
+   *         Promise which resolves with a highlighter instance
+   */
+  async _getHighlighterTypeForNode(type, nodeFront) {
+    const { inspectorFront } = nodeFront;
+    const max = this._getMaxActiveHighlighters(type);
+    let highlighter;
+
+    // If only one highlighter instance may be visible, get a highlighter front
+    // and cache it to return it on future requests.
+    // Otherwise, return a new highlighter front every time and clean-up manually.
+    if (max === 1) {
+      highlighter = await inspectorFront.getOrCreateHighlighterByType(type);
+    } else {
+      highlighter = await inspectorFront.getHighlighterByType(type);
+    }
+
+    return highlighter;
+  }
+
+  /**
+   * Get the currently active highlighter of a given type.
+   *
+   * @param  {String} type
+   *         Highlighter type.
+   * @return {Highlighter|null}
+   *         Highlighter instance
+   *         or null if no highlighter of that type is active.
+   */
+  getActiveHighlighter(type) {
+    if (!this._activeHighlighters.has(type)) {
+      return null;
+    }
+
+    const { highlighter } = this._activeHighlighters.get(type);
+    return highlighter;
+  }
+
+  /**
+   * Get an object with data associated with the active highlighter of a given type.
+   * This data object contains:
+   *   - nodeFront: NodeFront of the highlighted node
+   *   - highlighter: Highlighter instance
+   *   - options: Configuration options passed to the highlighter
+   *   - timer: (Optional) index of timer set with setTimout() to autohide the highlighter
+   * Returns an empty object if a highlighter of the given type is not active.
+   *
+   * @param  {String} type
+   *         Highlighter type.
+   * @return {Object}
+   */
+  getDataForActiveHighlighter(type) {
+    if (!this._activeHighlighters.has(type)) {
+      return {};
+    }
+
+    return this._activeHighlighters.get(type);
+  }
+
+  /**
+   * Get the configuration options of the active highlighter of a given type.
+   *
+   * @param  {String} type
+   *         Highlighter type.
+   * @return {Object}
+   */
+  getOptionsForActiveHighlighter(type) {
+    const { options } = this.getDataForActiveHighlighter(type);
+    return options;
+  }
+
+  /**
+   * Get the node front highlighted by a given highlighter type.
+   *
+   * @param  {String} type
+   *         Highlighter type.
+   * @return {NodeFront|null}
+   *         Node front of the element currently being highlighted
+   *         or null if no highlighter of that type is active.
+   */
+  getNodeForActiveHighlighter(type) {
+    if (!this._activeHighlighters.has(type)) {
+      return null;
+    }
+
+    const { nodeFront } = this._activeHighlighters.get(type);
+    return nodeFront;
+  }
+
+  /**
+   * Highlight a given node front with a given type of highlighter.
+   *
+   * Highlighters are shown for one node at a time. Before showing the same highlighter
+   * type on another node, it will first be hidden from the previously highlighted node.
+   * In pages with frames running in different processes, this ensures highlighters from
+   * other frames do not stay visible.
+   *
+   * @param  {String} type
+   *          Highlighter type to show.
+   * @param  {NodeFront} nodeFront
+   *          Node front of the element to be highlighted.
+   * @param  {Options} options
+   *         Optional object with options to pass to the highlighter.
+   * @return {Promise}
+   */
+  async showHighlighterTypeForNode(type, nodeFront, options) {
+    const promise = this._beforeShowHighlighterTypeForNode(
+      type,
+      nodeFront,
+      options
+    );
+
+    // Set a pending highlighter in order to detect if, while we were awaiting, there was
+    // a more recent request to highlight a node with the same type, or a request to hide
+    // the highlighter. Then we will abort this one in favor of the newer one.
+    // This needs to be done before the 'await' in order to be synchronous, but after
+    // calling _beforeShowHighlighterTypeForNode, since it can call hideHighlighterType.
+    const id = Symbol();
+    this._pendingHighlighters.set(type, id);
+    const skipShow = await promise;
+
+    if (this._pendingHighlighters.get(type) !== id) {
+      return;
+    } else if (skipShow || nodeFront.isDestroyed()) {
+      this._pendingHighlighters.delete(type);
+      return;
+    }
+
+    const highlighter = await this._getHighlighterTypeForNode(type, nodeFront);
+
+    if (this._pendingHighlighters.get(type) !== id) {
+      return;
+    }
+    this._pendingHighlighters.delete(type);
+
+    // Set a timer to automatically hide the highlighter if a duration is provided.
+    const timer = this.scheduleAutoHideHighlighterType(type, options?.duration);
+    // TODO: support case for multiple highlighter instances (ex: multiple grids)
+    this._activeHighlighters.set(type, {
+      nodeFront,
+      highlighter,
+      options,
+      timer,
+    });
+    await highlighter.show(nodeFront, options);
+    this._afterShowHighlighterTypeForNode(type, nodeFront, options);
+
+    // Emit any type-specific highlighter shown event for tests
+    // which have not yet been updated to listen for the generic event
+    if (HIGHLIGHTER_EVENTS[type]?.shown) {
+      this.emit(HIGHLIGHTER_EVENTS[type].shown, nodeFront, options);
+    }
+    this.emit("highlighter-shown", { type, highlighter, nodeFront, options });
+  }
+
+  /**
+   * Set a timer to automatically hide all highlighters of a given type after a delay.
+   *
+   * @param  {String} type
+   *         Highlighter type to hide.
+   * @param  {Number|undefined} duration
+   *         Delay in milliseconds after which to hide the highlighter.
+   *         If a duration is not provided, return early without scheduling a task.
+   * @return {Number|undefined}
+   *         Index of the scheduled task returned by setTimeout().
+   */
+  scheduleAutoHideHighlighterType(type, duration) {
+    if (!duration) {
+      return undefined;
+    }
+
+    const timer = setTimeout(async () => {
+      await this.hideHighlighterType(type);
+      clearTimeout(timer);
+    }, duration);
+
+    return timer;
+  }
+
+  /**
+   * Hide all instances of a given highlighter type.
+   *
+   * @param  {String} type
+   *         Highlighter type to hide.
+   * @return {Promise}
+   */
+  async hideHighlighterType(type) {
+    if (this._pendingHighlighters.has(type)) {
+      // Abort pending highlighters for the given type.
+      this._pendingHighlighters.delete(type);
+    }
+    if (!this._activeHighlighters.has(type)) {
+      return;
+    }
+
+    const data = this.getDataForActiveHighlighter(type);
+    const { highlighter, nodeFront, timer } = data;
+    // Clear any autohide timer associated with this highlighter type.
+    clearTimeout(timer);
+    // Remove any metadata used to restore this highlighter type on page refresh.
+    this._restorableHighlighters.delete(type);
+    this._activeHighlighters.delete(type);
+    this._beforeHideHighlighterType(type);
+    await highlighter.hide();
+
+    // Emit any type-specific highlighter hidden event for tests
+    // which have not yet been updated to listen for the generic event
+    if (HIGHLIGHTER_EVENTS[type]?.hidden) {
+      this.emit(HIGHLIGHTER_EVENTS[type].hidden, nodeFront);
+    }
+    this.emit("highlighter-hidden", { type, ...data });
+  }
+
+  /**
+   * Returns true if the grid highlighter can be toggled on/off for the given node, and
+   * false otherwise. A grid container can be toggled on if the max grid highlighters
+   * is only 1 or less than the maximum grid highlighters that can be displayed or if
+   * the grid highlighter already highlights the given node.
+   *
+   * @param  {NodeFront} node
+   *         Grid container NodeFront.
+   * @return {Boolean}
+   */
+  canGridHighlighterToggle(node) {
+    return (
+      this.maxGridHighlighters === 1 ||
+      this.gridHighlighters.size < this.maxGridHighlighters ||
+      this.gridHighlighters.has(node)
+    );
+  }
+
+  /**
+   * Returns true when the maximum number of grid highlighter instances is reached.
+   * FIXME: Bug 1572652 should address this constraint.
+   *
+   * @return {Boolean}
+   */
+  isGridHighlighterLimitReached() {
+    return this.gridHighlighters.size === this.maxGridHighlighters;
+  }
+
+  /**
+   * Returns whether `node` is somewhere inside the DOM of the rule view.
+   *
+   * @param {DOMNode} node
+   * @return {Boolean}
+   */
+  isRuleView(node) {
+    return !!node.closest("#ruleview-panel");
+  }
+
+  /**
+   * Add the highlighters overlay to the view. This will start tracking mouse events
+   * and display highlighters when needed.
+   *
+   * @param  {CssRuleView|CssComputedView|LayoutView} view
+   *         Either the rule-view or computed-view panel to add the highlighters overlay.
+   */
+  addToView(view) {
+    const el = view.element;
+    el.addEventListener("click", this.onClick, true);
+    el.addEventListener("mousemove", this.onMouseMove);
+    el.addEventListener("mouseout", this.onMouseOut);
+    el.ownerDocument.defaultView.addEventListener("mouseout", this.onMouseOut);
+  }
+
+  /**
+   * Remove the overlay from the given view. This will stop tracking mouse movement and
+   * showing highlighters.
+   *
+   * @param  {CssRuleView|CssComputedView|LayoutView} view
+   *         Either the rule-view or computed-view panel to remove the highlighters
+   *         overlay.
+   */
+  removeFromView(view) {
+    const el = view.element;
+    el.removeEventListener("click", this.onClick, true);
+    el.removeEventListener("mousemove", this.onMouseMove);
+    el.removeEventListener("mouseout", this.onMouseOut);
+  }
+
+  /**
+   * Toggle the shapes highlighter for the given node.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the element with a shape to highlight.
+   * @param  {Object} options
+   *         Object used for passing options to the shapes highlighter.
+   * @param {TextProperty} textProperty
+   *        TextProperty where to write changes.
+   */
+  async toggleShapesHighlighter(node, options, textProperty) {
+    const shapesEditor = await this.getInContextEditor(node, "shapesEditor");
+    if (!shapesEditor) {
+      return;
+    }
+    shapesEditor.toggle(node, options, textProperty);
+  }
+
+  /**
+   * Show the shapes highlighter for the given node.
+   * This method delegates to the in-context shapes editor.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the element with a shape to highlight.
+   * @param  {Object} options
+   *         Object used for passing options to the shapes highlighter.
+   */
+  async showShapesHighlighter(node, options) {
+    const shapesEditor = await this.getInContextEditor(node, "shapesEditor");
+    if (!shapesEditor) {
+      return;
+    }
+    shapesEditor.show(node, options);
+  }
+
+  /**
+   * Called after the shape highlighter was shown.
+   *
+   * @param  {Object} data
+   *         Data associated with the event.
+   *         Contains:
+   *         - {NodeFront} node: The NodeFront of the element that is highlighted.
+   *         - {Object} options: Options that were passed to ShapesHighlighter.show()
+   */
+  onShapesHighlighterShown(data) {
+    const { node, options } = data;
+    this.shapesHighlighterShown = node;
+    this.state.shapes.options = options;
+    this.emit("shapes-highlighter-shown", node, options);
+  }
+
+  /**
+   * Hide the shapes highlighter if visible.
+   * This method delegates the to the in-context shapes editor which wraps
+   * the shapes highlighter with additional functionality.
+   *
+   * @param  {NodeFront} node.
+   */
+  async hideShapesHighlighter(node) {
+    const shapesEditor = await this.getInContextEditor(node, "shapesEditor");
+    if (!shapesEditor) {
+      return;
+    }
+    shapesEditor.hide();
+  }
+
+  /**
+   * Called after the shapes highlighter was hidden.
+   *
+   * @param  {Object} data
+   *         Data associated with the event.
+   *         Contains:
+   *         - {NodeFront} node: The NodeFront of the element that was highlighted.
+   */
+  onShapesHighlighterHidden(data) {
+    this.emit(
+      "shapes-highlighter-hidden",
+      this.shapesHighlighterShown,
+      this.state.shapes.options
+    );
+    this.shapesHighlighterShown = null;
+    this.state.shapes = {};
+  }
+
+  /**
+   * Show the shapes highlighter for the given element, with the given point highlighted.
+   *
+   * @param {NodeFront} node
+   *        The NodeFront of the element to highlight.
+   * @param {String} point
+   *        The point to highlight in the shapes highlighter.
+   */
+  async hoverPointShapesHighlighter(node, point) {
+    if (node == this.shapesHighlighterShown) {
+      const options = Object.assign({}, this.state.shapes.options);
+      options.hoverPoint = point;
+      await this.showShapesHighlighter(node, options);
+    }
+  }
+
+  /**
+   * Returns the flexbox highlighter color for the given node.
+   */
+  async getFlexboxHighlighterColor() {
+    // Load the Redux slice for flexbox if not yet available.
+    const state = this.store.getState();
+    if (!state.flexbox) {
+      this.store.injectReducer("flexbox", flexboxReducer);
+    }
+
+    // Attempt to get the flexbox highlighter color from the Redux store.
+    const { flexbox } = this.store.getState();
+    const color = flexbox.color;
+
+    if (color) {
+      return color;
+    }
+
+    // If the flexbox inspector has not been initialized, attempt to get the flexbox
+    // highlighter from the async storage.
+    const customHostColors =
+      (await asyncStorage.getItem("flexboxInspectorHostColors")) || {};
+
+    // Get the hostname, if there is no hostname, fall back on protocol
+    // ex: `data:` uri, and `about:` pages
+    let hostname;
+    try {
+      hostname =
+        parseURL(this.target.url).hostname ||
+        parseURL(this.target.url).protocol;
+    } catch (e) {
+      this._handleRejection(e);
+    }
+
+    return hostname && customHostColors[hostname]
+      ? customHostColors[hostname]
+      : DEFAULT_HIGHLIGHTER_COLOR;
+  }
+
+  /**
+   * Toggle the flexbox highlighter for the given flexbox container element.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the flexbox container element to highlight.
+   * @param. {String} trigger
+   *         String name matching "layout", "markup" or "rule" to indicate where the
+   *         flexbox highlighter was toggled on from. "layout" represents the layout view.
+   *         "markup" represents the markup view. "rule" represents the rule view.
+   */
+  async toggleFlexboxHighlighter(node, trigger) {
+    const highlightedNode = this.getNodeForActiveHighlighter(TYPES.FLEXBOX);
+    if (node == highlightedNode) {
+      await this.hideFlexboxHighlighter(node);
+      return;
+    }
+
+    await this.showFlexboxHighlighter(node, {}, trigger);
+  }
+
+  /**
+   * Show the flexbox highlighter for the given flexbox container element.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the flexbox container element to highlight.
+   * @param  {Object} options
+   *         Object used for passing options to the flexbox highlighter.
+   * @param. {String} trigger
+   *         String name matching "layout", "markup" or "rule" to indicate where the
+   *         flexbox highlighter was toggled on from. "layout" represents the layout view.
+   *         "markup" represents the markup view. "rule" represents the rule view.
+   *         Will be passed as an option even though the highlighter doesn't use it
+   *         in order to log telemetry in _afterShowHighlighterTypeForNode()
+   */
+  async showFlexboxHighlighter(node, options, trigger) {
+    const color = await this.getFlexboxHighlighterColor(node);
+    await this.showHighlighterTypeForNode(TYPES.FLEXBOX, node, {
+      ...options,
+      trigger,
+      color,
+    });
+  }
+
+  /**
+   * Hide the flexbox highlighter if any instance is visible.
+   */
+  async hideFlexboxHighlighter() {
+    await this.hideHighlighterType(TYPES.FLEXBOX);
+  }
+
+  /**
+   * Create a grid highlighter settings object for the provided nodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront for which we need highlighter settings.
+   */
+  getGridHighlighterSettings(nodeFront) {
+    // Load the Redux slices for grids and grid highlighter settings if not yet available.
+    const state = this.store.getState();
+    if (!state.grids) {
+      this.store.injectReducer("grids", gridsReducer);
+    }
+
+    if (!state.highlighterSettings) {
+      this.store.injectReducer(
+        "highlighterSettings",
+        highlighterSettingsReducer
+      );
+    }
+
+    // Get grids and grid highlighter settings from the latest Redux state
+    // in case they were just added above.
+    const { grids, highlighterSettings } = this.store.getState();
+    const grid = grids.find(g => g.nodeFront === nodeFront);
+    const color = grid ? grid.color : DEFAULT_HIGHLIGHTER_COLOR;
+    const zIndex = grid ? grid.zIndex : 0;
+    return Object.assign({}, highlighterSettings, { color, zIndex });
+  }
+
+  /**
+   * Return a list of all node fronts that are highlighted with a Grid highlighter.
+   *
+   * @return {Array}
+   */
+  getHighlightedGridNodes() {
+    return [...Array.from(this.gridHighlighters.keys())];
+  }
+
+  /**
+   * Toggle the grid highlighter for the given grid container element.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element to highlight.
+   * @param. {String} trigger
+   *         String name matching "grid", "markup" or "rule" to indicate where the
+   *         grid highlighter was toggled on from. "grid" represents the grid view.
+   *         "markup" represents the markup view. "rule" represents the rule view.
+   */
+  async toggleGridHighlighter(node, trigger) {
+    if (this.gridHighlighters.has(node)) {
+      await this.hideGridHighlighter(node);
+      return;
+    }
+
+    await this.showGridHighlighter(node, {}, trigger);
+  }
+
+  /**
+   * Show the grid highlighter for the given grid container element.
+   * Allow as many active highlighter instances as permitted by the
+   * maxGridHighlighters limit (default 3).
+   *
+   * Logic of showing grid highlighters:
+   * - GRID:
+   *  - Show a highlighter for a grid container when explicitly requested
+   *    (ex. click badge in Markup view) and count it against the limit.
+   *  - When the limit of active highlighters is reached, do no show any more
+   *    until other instances are hidden. If configured to show only one instance,
+   *    hide the existing highlighter before showing a new one.
+   *
+   * - SUBGRID:
+   *  - When a highlighter for a subgrid is shown, also show a highlighter for its parent
+   *    grid, but with faded-out colors (serves as a visual reference for the subgrid)
+   *  - The "active" state of the highlighter for the parent grid is not reflected
+   *    in the UI (checkboxes in the Layout panel, badges in the Markup view, etc.)
+   *  - The highlighter for the parent grid DOES NOT count against the highlighter limit
+   *  - If the highlighter for the parent grid is explicitly requested to be shown
+   *    (ex: click badge in Markup view), show it in full color and reflect its "active"
+   *    state in the UI (checkboxes in the Layout panel, badges in the Markup view)
+   *  - When a highlighter for a subgrid is hidden, also hide the highlighter for its
+   *    parent grid; if the parent grid was explicitly requested separately, keep the
+   *    highlighter for the parent grid visible, but show it in full color.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element to highlight.
+   * @param  {Object} options
+   *         Object used for passing options to the grid highlighter.
+   * @param  {String} trigger
+   *         String name matching "grid", "markup" or "rule" to indicate where the
+   *         grid highlighter was toggled on from. "grid" represents the grid view.
+   *         "markup" represents the markup view. "rule" represents the rule view.
+   */
+  async showGridHighlighter(node, options, trigger) {
+    if (!this.gridHighlighters.has(node)) {
+      // If only one grid highlighter can be shown at a time, hide the other instance.
+      // Otherwise, if the max highlighter limit is reached, do not show another one.
+      if (this.maxGridHighlighters === 1) {
+        await this.hideGridHighlighter(
+          this.gridHighlighters.keys().next().value
+        );
+      } else if (this.gridHighlighters.size === this.maxGridHighlighters) {
+        return;
+      }
+    }
+
+    // If the given node is already highlighted as the parent grid for a subgrid,
+    // hide the parent grid highlighter because it will be explicitly shown below.
+    const isHighlightedAsParentGrid = Array.from(this.gridHighlighters.values())
+      .map(value => value.parentGridNode)
+      .includes(node);
+    if (isHighlightedAsParentGrid) {
+      await this.hideParentGridHighlighter(node);
+    }
+
+    // Show a translucent highlight of the parent grid container if the given node is
+    // a subgrid and the parent grid container is not already explicitly highlighted.
+    let parentGridNode = null;
+    let parentGridHighlighter = null;
+    if (node.displayType === "subgrid") {
+      parentGridNode = await node.walkerFront.getParentGridNode(node);
+      parentGridHighlighter = await this.showParentGridHighlighter(
+        parentGridNode
+      );
+    }
+
+    // When changing highlighter colors, we call highlighter.show() again with new options
+    // Reuse the active highlighter instance if present; avoid creating new highlighters
+    let highlighter;
+    if (this.gridHighlighters.has(node)) {
+      highlighter = this.gridHighlighters.get(node).highlighter;
+    }
+
+    if (!highlighter) {
+      highlighter = await this._getHighlighterTypeForNode(TYPES.GRID, node);
+    }
+
+    this.gridHighlighters.set(node, {
+      highlighter,
+      parentGridNode,
+      parentGridHighlighter,
+    });
+
+    options = { ...options, ...this.getGridHighlighterSettings(node) };
+    await highlighter.show(node, options);
+
+    this._afterShowHighlighterTypeForNode(TYPES.GRID, node, {
+      ...options,
+      trigger,
+    });
+
+    try {
+      // Save grid highlighter state.
+      const { url } = this.target;
+
+      const selectors =
+        await this.inspector.commands.inspectorCommand.getNodeFrontSelectorsFromTopDocument(
+          node
+        );
+
+      this.state.grids.set(node, { selectors, options, url });
+
+      // Emit the NodeFront of the grid container element that the grid highlighter was
+      // shown for, and its options for testing the highlighter setting options.
+      this.emit("grid-highlighter-shown", node, options);
+
+      // XXX: Shim to use generic highlighter events until addressing Bug 1572652
+      // Ensures badges in the Markup view reflect the state of the grid highlighter.
+      this.emit("highlighter-shown", {
+        type: TYPES.GRID,
+        nodeFront: node,
+        highlighter,
+        options,
+      });
+    } catch (e) {
+      this._handleRejection(e);
+    }
+  }
+
+  /**
+   * Show the grid highlighter for the given subgrid's parent grid container element.
+   * The parent grid highlighter is shown with faded-out colors, as opposed
+   * to the full-color grid highlighter shown when calling showGridHighlighter().
+   * If the grid container is already explicitly highlighted (i.e. standalone grid),
+   * skip showing the another grid highlighter for it.
+   *
+   * @param   {NodeFront} node
+   *          The NodeFront of the parent grid container element to highlight.
+   * @returns {Promise}
+   *          Resolves with either the highlighter instance or null if it was skipped.
+   */
+  async showParentGridHighlighter(node) {
+    const isHighlighted = Array.from(this.gridHighlighters.keys()).includes(
+      node
+    );
+
+    if (!node || isHighlighted) {
+      return null;
+    }
+
+    // Get the parent grid highlighter for the parent grid container if one already exists
+    let highlighter = this.getParentGridHighlighter(node);
+    if (!highlighter) {
+      highlighter = await this._getHighlighterTypeForNode(TYPES.GRID, node);
+    }
+    const options = {
+      ...this.getGridHighlighterSettings(node),
+      // Configure the highlighter with faded-out colors.
+      globalAlpha: SUBGRID_PARENT_ALPHA,
+    };
+    await highlighter.show(node, options);
+
+    this.emitForTests("highlighter-shown", {
+      type: TYPES.GRID,
+      nodeFront: node,
+      highlighter,
+      options,
+    });
+
+    return highlighter;
+  }
+
+  /**
+   * Get the parent grid highlighter associated with the given node
+   * if the node is a parent grid container for a highlighted subgrid.
+   *
+   * @param  {NodeFront} node
+   *         NodeFront of the parent grid container for a subgrid.
+   * @return {CustomHighlighterFront|null}
+   */
+  getParentGridHighlighter(node) {
+    // Find the highlighter map value for the subgrid whose parent grid is the given node.
+    const value = Array.from(this.gridHighlighters.values()).find(
+      ({ parentGridNode }) => {
+        return parentGridNode === node;
+      }
+    );
+
+    if (!value) {
+      return null;
+    }
+
+    const { parentGridHighlighter } = value;
+    return parentGridHighlighter;
+  }
+
+  /**
+   * Restore the parent grid highlighter for a subgrid.
+   *
+   * A grid node can be highlighted both explicitly (ex: by clicking a badge in the
+   * Markup view) and implicitly, as a parent grid for a subgrid.
+   *
+   * An explicit grid highlighter overwrites a subgrid's parent grid highlighter.
+   * After an explicit grid highlighter for a node is hidden, but that node is also the
+   * parent grid container for a subgrid which is still highlighted, restore the implicit
+   * parent grid highlighter.
+   *
+   * @param  {NodeFront} node
+   *         NodeFront for a grid node which may also be a subgrid's parent grid
+   *         container.
+   * @return {Promise}
+   */
+  async restoreParentGridHighlighter(node) {
+    // Find the highlighter map entry for the subgrid whose parent grid is the given node.
+    const entry = Array.from(this.gridHighlighters.entries()).find(
+      ([key, value]) => {
+        return value?.parentGridNode === node;
+      }
+    );
+
+    if (!Array.isArray(entry)) {
+      return;
+    }
+
+    const [highlightedSubgridNode, data] = entry;
+    if (!data.parentGridHighlighter) {
+      const parentGridHighlighter = await this.showParentGridHighlighter(node);
+      this.gridHighlighters.set(highlightedSubgridNode, {
+        ...data,
+        parentGridHighlighter,
+      });
+    }
+  }
+
+  /**
+   * Hide the grid highlighter for the given grid container element.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element to unhighlight.
+   */
+  async hideGridHighlighter(node) {
+    const { highlighter, parentGridNode } =
+      this.gridHighlighters.get(node) || {};
+
+    if (!highlighter) {
+      return;
+    }
+
+    // Hide the subgrid's parent grid highlighter, if any.
+    if (parentGridNode) {
+      await this.hideParentGridHighlighter(parentGridNode);
+    }
+
+    this._beforeHideHighlighterType(TYPES.GRID);
+    // Don't just hide the highlighter, destroy the front instance to release memory.
+    // If another highlighter is shown later, a new front will be created.
+    highlighter.destroy();
+    this.gridHighlighters.delete(node);
+    this.state.grids.delete(node);
+
+    // It's possible we just destroyed the grid highlighter for a node which also serves
+    // as a subgrid's parent grid. If so, restore the parent grid highlighter.
+    await this.restoreParentGridHighlighter(node);
+
+    // Emit the NodeFront of the grid container element that the grid highlighter was
+    // hidden for.
+    this.emit("grid-highlighter-hidden", node);
+
+    // XXX: Shim to use generic highlighter events until addressing Bug 1572652
+    // Ensures badges in the Markup view reflect the state of the grid highlighter.
+    this.emit("highlighter-hidden", {
+      type: TYPES.GRID,
+      nodeFront: node,
+    });
+  }
+
+  /**
+   * Hide the parent grid highlighter for the given parent grid container element.
+   * If there are multiple subgrids with the same parent grid, do not hide the parent
+   * grid highlighter.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the parent grid container element to unhiglight.
+   */
+  async hideParentGridHighlighter(node) {
+    let count = 0;
+    let parentGridHighlighter;
+    let subgridNode;
+    for (const [key, value] of this.gridHighlighters.entries()) {
+      if (value.parentGridNode === node) {
+        parentGridHighlighter = value.parentGridHighlighter;
+        subgridNode = key;
+        count++;
+      }
+    }
+
+    if (!parentGridHighlighter || count > 1) {
+      return;
+    }
+
+    // Destroy the highlighter front instance to release memory.
+    parentGridHighlighter.destroy();
+
+    // Update the grid highlighter entry to indicate the parent grid highlighter is gone.
+    this.gridHighlighters.set(subgridNode, {
+      ...this.gridHighlighters.get(subgridNode),
+      parentGridHighlighter: null,
+    });
+  }
+
+  /**
+   * Toggle the geometry editor highlighter for the given element.
+   *
+   * @param {NodeFront} node
+   *        The NodeFront of the element to highlight.
+   */
+  async toggleGeometryHighlighter(node) {
+    if (node == this.geometryEditorHighlighterShown) {
+      await this.hideGeometryEditor();
+      return;
+    }
+
+    await this.showGeometryEditor(node);
+  }
+
+  /**
+   * Show the geometry editor highlightor for the given element.
+   *
+   * @param {NodeFront} node
+   *        THe NodeFront of the element to highlight.
+   */
+  async showGeometryEditor(node) {
+    const highlighter = await this._getHighlighterTypeForNode(
+      "GeometryEditorHighlighter",
+      node
+    );
+    if (!highlighter) {
+      return;
+    }
+
+    const isShown = await highlighter.show(node);
+    if (!isShown) {
+      return;
+    }
+
+    this.emit("geometry-editor-highlighter-shown");
+    this.geometryEditorHighlighterShown = node;
+  }
+
+  /**
+   * Hide the geometry editor highlighter.
+   */
+  async hideGeometryEditor() {
+    if (!this.geometryEditorHighlighterShown) {
+      return;
+    }
+
+    const highlighter =
+      this.geometryEditorHighlighterShown.inspectorFront.getKnownHighlighter(
+        "GeometryEditorHighlighter"
+      );
+
+    if (!highlighter) {
+      return;
+    }
+
+    await highlighter.hide();
+
+    this.emit("geometry-editor-highlighter-hidden");
+    this.geometryEditorHighlighterShown = null;
+  }
+
+  /**
+   * Restores the saved flexbox highlighter state.
+   */
+  async restoreFlexboxState() {
+    const state = this._restorableHighlighters.get(TYPES.FLEXBOX);
+    if (!state) {
+      return;
+    }
+
+    this._restorableHighlighters.delete(TYPES.FLEXBOX);
+    await this.restoreState(TYPES.FLEXBOX, state, this.showFlexboxHighlighter);
+  }
+
+  /**
+   * Restores the saved grid highlighter state.
+   */
+  async restoreGridState() {
+    // The NodeFronts that are used as the keys in the grid state Map are no longer in the
+    // tree after a reload. To clean up the grid state, we create a copy of the values of
+    // the grid state before restoring and clear it.
+    const values = [...this.state.grids.values()];
+    this.state.grids.clear();
+
+    try {
+      for (const gridState of values) {
+        await this.restoreState(
+          TYPES.GRID,
+          gridState,
+          this.showGridHighlighter
+        );
+      }
+    } catch (e) {
+      this._handleRejection(e);
+    }
+  }
+
+  /**
+   * Helper function called by restoreFlexboxState, restoreGridState.
+   * Restores the saved highlighter state for the given highlighter
+   * and their state.
+   *
+   * @param  {String} type
+   *         Highlighter type to be restored.
+   * @param  {Object} state
+   *         Object containing the metadata used to restore the highlighter.
+   *         {Array} state.selectors
+   *         Array of CSS selector which identifies the node to be highlighted.
+   *         If the node is in the top-level document, the array contains just one item.
+   *         Otherwise, if the node is nested within a stack of iframes, each iframe is
+   *         identified by its unique selector; the last item in the array identifies
+   *         the target node within its host iframe document.
+   *         {Object} state.options
+   *         Configuration options to use when showing the highlighter.
+   *         {String} state.url
+   *         URL of the top-level target when the metadata was stored. Used to identify
+   *         if there was a page refresh or a navigation away to a different page.
+   * @param  {Function} showFunction
+   *         The function that shows the highlighter
+   * @return {Promise} that resolves when the highlighter was restored and shown.
+   */
+  async restoreState(type, state, showFunction) {
+    const { selectors = [], options, url } = state;
+
+    if (!selectors.length || url !== this.target.url) {
+      // Bail out if no selector was saved, or if we are on a different page.
+      this.emit(`highlighter-discarded`, { type });
+      return;
+    }
+
+    const nodeFront =
+      await this.inspector.commands.inspectorCommand.findNodeFrontFromSelectors(
+        selectors
+      );
+
+    if (nodeFront) {
+      await showFunction(nodeFront, options);
+      this.emit(`highlighter-restored`, { type });
+    } else {
+      this.emit(`highlighter-discarded`, { type });
+    }
+  }
+
+  /**
+   * Get an instance of an in-context editor for the given type.
+   *
+   * In-context editors behave like highlighters but with added editing capabilities which
+   * need to write value changes back to something, like to properties in the Rule view.
+   * They typically exist in the context of the page, like the ShapesInContextEditor.
+   *
+   * @param  {NodeFront} node.
+   * @param  {String} type
+   *         Type of in-context editor. Currently supported: "shapesEditor"
+   * @return {Object|null}
+   *         Reference to instance for given type of in-context editor or null.
+   */
+  async getInContextEditor(node, type) {
+    if (this.editors[type]) {
+      return this.editors[type];
+    }
+
+    let editor;
+
+    switch (type) {
+      case "shapesEditor":
+        const highlighter = await this._getHighlighterTypeForNode(
+          "ShapesHighlighter",
+          node
+        );
+        if (!highlighter) {
+          return null;
+        }
+        const ShapesInContextEditor = require("resource://devtools/client/shared/widgets/ShapesInContextEditor.js");
+
+        editor = new ShapesInContextEditor(
+          highlighter,
+          this.inspector,
+          this.state
+        );
+        editor.on("show", this.onShapesHighlighterShown);
+        editor.on("hide", this.onShapesHighlighterHidden);
+        break;
+      default:
+        throw new Error(`Unsupported in-context editor '${name}'`);
+    }
+
+    this.editors[type] = editor;
+
+    return editor;
+  }
+
+  /**
+   * Get a highlighter front given a type. It will only be initialized once.
+   *
+   * @param  {String} type
+   *         The highlighter type. One of this.highlighters.
+   * @return {Promise} that resolves to the highlighter
+   */
+  async _getHighlighter(type) {
+    if (this.highlighters[type]) {
+      return this.highlighters[type];
+    }
+
+    let highlighter;
+
+    try {
+      highlighter = await this.inspectorFront.getHighlighterByType(type);
+    } catch (e) {
+      this._handleRejection(e);
+    }
+
+    if (!highlighter) {
+      return null;
+    }
+
+    this.highlighters[type] = highlighter;
+    return highlighter;
+  }
+
+  /**
+   * Ignore unexpected errors from async function calls
+   * if HighlightersOverlay has been destroyed.
+   *
+   * @param {Error} error
+   */
+  _handleRejection(error) {
+    if (!this.destroyed) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * Toggle the class "active" on the given shape point in the rule view if the current
+   * inspector selection is highlighted by the shapes highlighter.
+   *
+   * @param {NodeFront} node
+   *        The NodeFront of the shape point to toggle
+   * @param {Boolean} active
+   *        Whether the shape point should be active
+   */
+  _toggleShapePointActive(node, active) {
+    if (this.inspector.selection.nodeFront != this.shapesHighlighterShown) {
+      return;
+    }
+
+    node.classList.toggle("active", active);
+  }
+
+  /**
+   * Hide the currently shown hovered highlighter.
+   */
+  _hideHoveredHighlighter() {
+    if (
+      !this.hoveredHighlighterShown ||
+      !this.highlighters[this.hoveredHighlighterShown]
+    ) {
+      return;
+    }
+
+    // For some reason, the call to highlighter.hide doesn't always return a
+    // promise. This causes some tests to fail when trying to install a
+    // rejection handler on the result of the call. To avoid this, check
+    // whether the result is truthy before installing the handler.
+    const onHidden = this.highlighters[this.hoveredHighlighterShown].hide();
+    if (onHidden) {
+      onHidden.catch(console.error);
+    }
+
+    this.hoveredHighlighterShown = null;
+    this.emit("css-transform-highlighter-hidden");
+  }
+
+  /**
+   * Given a node front and a function that hides the given node's highlighter, hides
+   * the highlighter if the node front is no longer in the DOM tree. This is called
+   * from the "markupmutation" event handler.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of a highlighted DOM node.
+   * @param  {Function} hideHighlighter
+   *         The function that will hide the highlighter of the highlighted node.
+   */
+  async _hideHighlighterIfDeadNode(node, hideHighlighter) {
+    if (!node) {
+      return;
+    }
+
+    try {
+      const isInTree =
+        node.walkerFront && (await node.walkerFront.isInDOMTree(node));
+      if (!isInTree) {
+        await hideHighlighter(node);
+      }
+    } catch (e) {
+      this._handleRejection(e);
+    }
+  }
+
+  /**
+   * Is the current hovered node a css transform property value in the
+   * computed-view.
+   *
+   * @param  {Object} nodeInfo
+   * @return {Boolean}
+   */
+  _isComputedViewTransform(nodeInfo) {
+    if (nodeInfo.view != "computed") {
+      return false;
+    }
+    return (
+      nodeInfo.type === VIEW_NODE_VALUE_TYPE &&
+      nodeInfo.value.property === "transform"
+    );
+  }
+
+  /**
+   * Does the current clicked node have the shapes highlighter toggle in the
+   * rule-view.
+   *
+   * @param  {DOMNode} node
+   * @return {Boolean}
+   */
+  _isRuleViewShapeSwatch(node) {
+    return (
+      this.isRuleView(node) && node.classList.contains("ruleview-shapeswatch")
+    );
+  }
+
+  /**
+   * Is the current hovered node a css transform property value in the rule-view.
+   *
+   * @param  {Object} nodeInfo
+   * @return {Boolean}
+   */
+  _isRuleViewTransform(nodeInfo) {
+    if (nodeInfo.view != "rule") {
+      return false;
+    }
+    const isTransform =
+      nodeInfo.type === VIEW_NODE_VALUE_TYPE &&
+      nodeInfo.value.property === "transform";
+    const isEnabled =
+      nodeInfo.value.enabled &&
+      !nodeInfo.value.overridden &&
+      !nodeInfo.value.pseudoElement;
+    return isTransform && isEnabled;
+  }
+
+  /**
+   * Is the current hovered node a highlightable shape point in the rule-view.
+   *
+   * @param  {Object} nodeInfo
+   * @return {Boolean}
+   */
+  isRuleViewShapePoint(nodeInfo) {
+    if (nodeInfo.view != "rule") {
+      return false;
+    }
+    const isShape =
+      nodeInfo.type === VIEW_NODE_SHAPE_POINT_TYPE &&
+      (nodeInfo.value.property === "clip-path" ||
+        nodeInfo.value.property === "shape-outside");
+    const isEnabled =
+      nodeInfo.value.enabled &&
+      !nodeInfo.value.overridden &&
+      !nodeInfo.value.pseudoElement;
+    return (
+      isShape &&
+      isEnabled &&
+      nodeInfo.value.toggleActive &&
+      !this.state.shapes.options.transformMode
+    );
+  }
+
+  onClick(event) {
+    if (this._isRuleViewShapeSwatch(event.target)) {
+      event.stopPropagation();
+
+      const view = this.inspector.getPanel("ruleview").view;
+      const nodeInfo = view.getNodeInfo(event.target);
+
+      this.toggleShapesHighlighter(
+        this.inspector.selection.nodeFront,
+        {
+          mode: event.target.dataset.mode,
+          transformMode: event.metaKey || event.ctrlKey,
+        },
+        nodeInfo.value.textProperty
+      );
+    }
+  }
+
+  /**
+   * Handler for "display-change" events from walker fronts. Hides the flexbox or
+   * grid highlighter if their respective node is no longer a flex container or
+   * grid container.
+   *
+   * @param  {Array} nodes
+   *         An array of nodeFronts
+   */
+  async onDisplayChange(nodes) {
+    const highlightedGridNodes = this.getHighlightedGridNodes();
+
+    for (const node of nodes) {
+      const display = node.displayType;
+
+      // Hide the flexbox highlighter if the node is no longer a flexbox container.
+      if (
+        display !== "flex" &&
+        display !== "inline-flex" &&
+        node == this.getNodeForActiveHighlighter(TYPES.FLEXBOX)
+      ) {
+        await this.hideFlexboxHighlighter(node);
+        return;
+      }
+
+      // Hide the grid highlighter if the node is no longer a grid container.
+      if (
+        display !== "grid" &&
+        display !== "inline-grid" &&
+        display !== "subgrid" &&
+        highlightedGridNodes.includes(node)
+      ) {
+        await this.hideGridHighlighter(node);
+        return;
+      }
+    }
+  }
+
+  onMouseMove(event) {
+    // Bail out if the target is the same as for the last mousemove.
+    if (event.target === this._lastHovered) {
+      return;
+    }
+
+    // Only one highlighter can be displayed at a time, hide the currently shown.
+    this._hideHoveredHighlighter();
+
+    this._lastHovered = event.target;
+
+    const view = this.isRuleView(this._lastHovered)
+      ? this.inspector.getPanel("ruleview").view
+      : this.inspector.getPanel("computedview").computedView;
+    const nodeInfo = view.getNodeInfo(event.target);
+    if (!nodeInfo) {
+      return;
+    }
+
+    if (this.isRuleViewShapePoint(nodeInfo)) {
+      const { point } = nodeInfo.value;
+      this.hoverPointShapesHighlighter(
+        this.inspector.selection.nodeFront,
+        point
+      );
+      return;
+    }
+
+    // Choose the type of highlighter required for the hovered node.
+    let type;
+    if (
+      this._isRuleViewTransform(nodeInfo) ||
+      this._isComputedViewTransform(nodeInfo)
+    ) {
+      type = "CssTransformHighlighter";
+    }
+
+    if (type) {
+      this.hoveredHighlighterShown = type;
+      const node = this.inspector.selection.nodeFront;
+      this._getHighlighter(type)
+        .then(highlighter => highlighter.show(node))
+        .then(shown => {
+          if (shown) {
+            this.emit("css-transform-highlighter-shown");
+          }
+        });
+    }
+  }
+
+  onMouseOut(event) {
+    // Only hide the highlighter if the mouse leaves the currently hovered node.
+    if (
+      !this._lastHovered ||
+      (event && this._lastHovered.contains(event.relatedTarget))
+    ) {
+      return;
+    }
+
+    // Otherwise, hide the highlighter.
+    const view = this.isRuleView(this._lastHovered)
+      ? this.inspector.getPanel("ruleview").view
+      : this.inspector.getPanel("computedview").computedView;
+    const nodeInfo = view.getNodeInfo(this._lastHovered);
+    if (nodeInfo && this.isRuleViewShapePoint(nodeInfo)) {
+      this.hoverPointShapesHighlighter(
+        this.inspector.selection.nodeFront,
+        null
+      );
+    }
+    this._lastHovered = null;
+    this._hideHoveredHighlighter();
+  }
+
+  /**
+   * Handler function called when a new root-node has been added in the
+   * inspector. Nodes may have been added / removed and highlighters should
+   * be updated.
+   */
+  async _onResourceAvailable(resources) {
+    for (const resource of resources) {
+      if (
+        resource.resourceType !== this.resourceCommand.TYPES.ROOT_NODE ||
+        // It might happen that the ROOT_NODE resource (which is a Front) is already
+        // destroyed, and in such case we want to ignore it.
+        resource.isDestroyed()
+      ) {
+        // Only handle root-node resources.
+        // Note that we could replace this with DOCUMENT_EVENT resources, since
+        // the actual root-node resource is not used here.
+        continue;
+      }
+
+      if (resource.targetFront.isTopLevel && resource.isTopLevelDocument) {
+        // The topmost root node will lead to the destruction and recreation of
+        // the MarkupView, and highlighters will be refreshed afterwards. This is
+        // handled by the inspector.
+        continue;
+      }
+
+      await this._hideOrphanedHighlighters();
+    }
+  }
+
+  /**
+   * Handler function for "markupmutation" events. Hides the flexbox/grid/shapes
+   * highlighter if the flexbox/grid/shapes container is no longer in the DOM tree.
+   */
+  async onMarkupMutation(mutations) {
+    const hasInterestingMutation = mutations.some(
+      mut => mut.type === "childList"
+    );
+    if (!hasInterestingMutation) {
+      // Bail out if the mutations did not remove nodes, or if no grid highlighter is
+      // displayed.
+      return;
+    }
+
+    await this._hideOrphanedHighlighters();
+  }
+
+  /**
+   * Hide every active highlighter whose nodeFront is no longer present in the DOM.
+   * Returns a promise that resolves when all orphaned highlighters are hidden.
+   *
+   * @return {Promise}
+   */
+  async _hideOrphanedHighlighters() {
+    await this._hideHighlighterIfDeadNode(
+      this.shapesHighlighterShown,
+      this.hideShapesHighlighter
+    );
+
+    // Hide all active highlighters whose nodeFront is no longer attached.
+    const promises = [];
+    for (const [type, data] of this._activeHighlighters) {
+      promises.push(
+        this._hideHighlighterIfDeadNode(data.nodeFront, () => {
+          return this.hideHighlighterType(type);
+        })
+      );
+    }
+
+    const highlightedGridNodes = this.getHighlightedGridNodes();
+    for (const node of highlightedGridNodes) {
+      promises.push(
+        this._hideHighlighterIfDeadNode(node, this.hideGridHighlighter)
+      );
+    }
+
+    return Promise.all(promises);
+  }
+
+  /**
+   * Hides any visible highlighter and clear internal state. This should be called to
+   * have a clean slate, for example when the page navigates or when a given frame is
+   * selected in the iframe picker.
+   */
+  async hideAllHighlighters() {
+    this.destroyEditors();
+
+    // Hide any visible highlighters and clear any timers set to autohide highlighters.
+    for (const { highlighter, timer } of this._activeHighlighters.values()) {
+      await highlighter.hide();
+      clearTimeout(timer);
+    }
+
+    this._activeHighlighters.clear();
+    this._pendingHighlighters.clear();
+    this.gridHighlighters.clear();
+
+    this.geometryEditorHighlighterShown = null;
+    this.hoveredHighlighterShown = null;
+    this.shapesHighlighterShown = null;
+  }
+
+  /**
+   * Display a message about the simple highlighters which can be enabled for
+   * users relying on prefers-reduced-motion. This message will be a toolbox
+   * notification, which will contain a button to open the settings panel and
+   * will no longer be displayed if the user decides to explicitly close the
+   * message.
+   */
+  _showSimpleHighlightersMessage() {
+    const pref = "devtools.inspector.simple-highlighters.message-dismissed";
+    const messageDismissed = Services.prefs.getBoolPref(pref, false);
+    if (messageDismissed) {
+      return;
+    }
+    const notificationBox = this.inspector.toolbox.getNotificationBox();
+    const message = HighlightersBundle.formatValueSync(
+      "simple-highlighters-message"
+    );
+
+    notificationBox.appendNotification(
+      message,
+      "simple-highlighters-message",
+      null,
+      notificationBox.PRIORITY_INFO_MEDIUM,
+      [
+        {
+          label: HighlightersBundle.formatValueSync(
+            "simple-highlighters-settings-button"
+          ),
+          callback: async () => {
+            const { panelDoc } = await this.toolbox.selectTool("options");
+            const option = panelDoc.querySelector(
+              "[data-pref='devtools.inspector.simple-highlighters-reduced-motion']"
+            ).parentNode;
+            option.scrollIntoView({ block: "center" });
+            option.classList.add("options-panel-highlight");
+
+            // Emit a test-only event to know when the settings panel is opened.
+            this.toolbox.emitForTests("test-highlighters-settings-opened");
+          },
+        },
+      ],
+      evt => {
+        if (evt === "removed") {
+          // Flip the preference when the message is dismissed.
+          Services.prefs.setBoolPref(pref, true);
+        }
+      }
+    );
+  }
+
+  /**
+   * Destroy and clean-up all instances of in-context editors.
+   */
+  destroyEditors() {
+    for (const type in this.editors) {
+      this.editors[type].off("show");
+      this.editors[type].off("hide");
+      this.editors[type].destroy();
+    }
+
+    this.editors = {};
+  }
+
+  /**
+   * Destroy and clean-up all instances of highlighters.
+   */
+  destroyHighlighters() {
+    // Destroy all highlighters and clear any timers set to autohide highlighters.
+    const values = [
+      ...this._activeHighlighters.values(),
+      ...this.gridHighlighters.values(),
+    ];
+    for (const { highlighter, parentGridHighlighter, timer } of values) {
+      if (highlighter) {
+        highlighter.destroy();
+      }
+
+      if (parentGridHighlighter) {
+        parentGridHighlighter.destroy();
+      }
+
+      if (timer) {
+        clearTimeout(timer);
+      }
+    }
+
+    this._activeHighlighters.clear();
+    this._pendingHighlighters.clear();
+    this.gridHighlighters.clear();
+
+    for (const type in this.highlighters) {
+      if (this.highlighters[type]) {
+        this.highlighters[type].finalize();
+        this.highlighters[type] = null;
+      }
+    }
+  }
+
+  /**
+   * Destroy this overlay instance, removing it from the view and destroying
+   * all initialized highlighters.
+   */
+  destroy() {
+    this.inspector.off("markupmutation", this.onMarkupMutation);
+    this.resourceCommand.unwatchResources(
+      [this.resourceCommand.TYPES.ROOT_NODE],
+      { onAvailable: this._onResourceAvailable }
+    );
+
+    this.walkerEventListener.destroy();
+    this.walkerEventListener = null;
+
+    this.destroyEditors();
+    this.destroyHighlighters();
+
+    this._lastHovered = null;
+
+    this.inspector = null;
+    this.state = null;
+    this.store = null;
+    this.telemetry = null;
+
+    this.geometryEditorHighlighterShown = null;
+    this.hoveredHighlighterShown = null;
+    this.shapesHighlighterShown = null;
+
+    this.destroyed = true;
+  }
+}
+
+HighlightersOverlay.TYPES = HighlightersOverlay.prototype.TYPES = TYPES;
+
+module.exports = HighlightersOverlay;
diff --git a/devtools/client/inspector/shared/moz.build b/devtools/client/inspector/shared/moz.build
new file mode 100644
index 0000000000..6d7ce0590b
--- /dev/null
+++ b/devtools/client/inspector/shared/moz.build
@@ -0,0 +1,18 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "highlighters-overlay.js",
+    "node-reps.js",
+    "node-types.js",
+    "style-change-tracker.js",
+    "style-inspector-menu.js",
+    "tooltips-overlay.js",
+    "utils.js",
+    "walker-event-listener.js",
+)
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/devtools/client/inspector/shared/node-reps.js b/devtools/client/inspector/shared/node-reps.js
new file mode 100644
index 0000000000..c93fc68f0e
--- /dev/null
+++ b/devtools/client/inspector/shared/node-reps.js
@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+loader.lazyGetter(this, "MODE", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .MODE;
+});
+
+loader.lazyGetter(this, "ElementNode", function () {
+  return require("resource://devtools/client/shared/components/reps/reps/element-node.js");
+});
+
+loader.lazyGetter(this, "TextNode", function () {
+  return require("resource://devtools/client/shared/components/reps/reps/text-node.js");
+});
+
+loader.lazyRequireGetter(
+  this,
+  "translateNodeFrontToGrip",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+
+/**
+ * Creates either an ElementNode or a TextNode rep given a nodeFront. By default the
+ * rep is created in TINY mode.
+ *
+ * @param {NodeFront} nodeFront
+ *        The node front to create the element for.
+ * @param {Object} props
+ *        Props to pass to the rep.
+ */
+function getNodeRep(nodeFront, props = {}) {
+  const object = translateNodeFrontToGrip(nodeFront);
+  const { rep } = ElementNode.supportsObject(object) ? ElementNode : TextNode;
+
+  return rep({
+    object,
+    mode: MODE.TINY,
+    ...props,
+  });
+}
+
+module.exports = getNodeRep;
diff --git a/devtools/client/inspector/shared/node-types.js b/devtools/client/inspector/shared/node-types.js
new file mode 100644
index 0000000000..662bc0dd4e
--- /dev/null
+++ b/devtools/client/inspector/shared/node-types.js
@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * Types of nodes used in the rule and computed view.
+ */
+
+exports.VIEW_NODE_CSS_QUERY_CONTAINER = "css-query-container";
+exports.VIEW_NODE_CSS_SELECTOR_WARNINGS = "css-selector-warnings";
+exports.VIEW_NODE_FONT_TYPE = "font-type";
+exports.VIEW_NODE_IMAGE_URL_TYPE = "image-url-type";
+exports.VIEW_NODE_INACTIVE_CSS = "inactive-css";
+exports.VIEW_NODE_LOCATION_TYPE = "location-type";
+exports.VIEW_NODE_PROPERTY_TYPE = "property-type";
+exports.VIEW_NODE_SELECTOR_TYPE = "selector-type";
+exports.VIEW_NODE_SHAPE_POINT_TYPE = "shape-point-type";
+exports.VIEW_NODE_SHAPE_SWATCH = "shape-swatch";
+exports.VIEW_NODE_VALUE_TYPE = "value-type";
+exports.VIEW_NODE_VARIABLE_TYPE = "variable-type";
diff --git a/devtools/client/inspector/shared/style-change-tracker.js b/devtools/client/inspector/shared/style-change-tracker.js
new file mode 100644
index 0000000000..348918cd56
--- /dev/null
+++ b/devtools/client/inspector/shared/style-change-tracker.js
@@ -0,0 +1,100 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const WalkerEventListener = require("resource://devtools/client/inspector/shared/walker-event-listener.js");
+
+/**
+ * The InspectorStyleChangeTracker simply emits an event when it detects any changes in
+ * the page that may cause the current inspector selection to have different style applied
+ * to it.
+ * It currently tracks:
+ * - markup mutations, because they may cause different CSS rules to apply to the current
+ *   node.
+ * - window resize, because they may cause media query changes and therefore also
+ *   different CSS rules to apply to the current node.
+ */
+class InspectorStyleChangeTracker {
+  constructor(inspector) {
+    this.selection = inspector.selection;
+
+    this.onMutations = this.onMutations.bind(this);
+    this.onResized = this.onResized.bind(this);
+
+    this.walkerEventListener = new WalkerEventListener(inspector, {
+      mutations: this.onMutations,
+      resize: this.onResized,
+    });
+
+    EventEmitter.decorate(this);
+  }
+
+  destroy() {
+    this.walkerEventListener.destroy();
+    this.walkerEventListener = null;
+    this.selection = null;
+  }
+
+  /**
+   * When markup mutations occur, if an attribute of the selected node, one of its
+   * ancestors or siblings changes, we need to consider this as potentially causing a
+   * style change for the current node.
+   */
+  onMutations(mutations) {
+    const canMutationImpactCurrentStyles = ({
+      type,
+      target: mutationTarget,
+    }) => {
+      // Only attributes mutations are interesting here.
+      if (type !== "attributes") {
+        return false;
+      }
+
+      // Is the mutation on the current selected node?
+      const currentNode = this.selection.nodeFront;
+      if (mutationTarget === currentNode) {
+        return true;
+      }
+
+      // Is the mutation on one of the current selected node's siblings?
+      // We can't know the order of nodes on the client-side without calling
+      // walker.children, so don't attempt to check the previous or next element siblings.
+      // It's good enough to know that one sibling changed.
+      let parent = currentNode.parentNode();
+      const siblings = parent.treeChildren();
+      if (siblings.includes(mutationTarget)) {
+        return true;
+      }
+
+      // Is the mutation on one of the current selected node's parents?
+      while (parent) {
+        if (mutationTarget === parent) {
+          return true;
+        }
+        parent = parent.parentNode();
+      }
+
+      return false;
+    };
+
+    for (const mutation of mutations) {
+      if (canMutationImpactCurrentStyles(mutation)) {
+        this.emit("style-changed");
+        break;
+      }
+    }
+  }
+
+  /**
+   * When the window gets resized, this may cause media-queries to match, and we therefore
+   * need to consider this as a style change for the current node.
+   */
+  onResized() {
+    this.emit("style-changed");
+  }
+}
+
+module.exports = InspectorStyleChangeTracker;
diff --git a/devtools/client/inspector/shared/style-inspector-menu.js b/devtools/client/inspector/shared/style-inspector-menu.js
new file mode 100644
index 0000000000..e8eae77dae
--- /dev/null
+++ b/devtools/client/inspector/shared/style-inspector-menu.js
@@ -0,0 +1,502 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+  VIEW_NODE_LOCATION_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+
+loader.lazyRequireGetter(
+  this,
+  "Menu",
+  "resource://devtools/client/framework/menu.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "MenuItem",
+  "resource://devtools/client/framework/menu-item.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "getRuleFromNode",
+  "resource://devtools/client/inspector/rules/utils/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+
+const STYLE_INSPECTOR_PROPERTIES =
+  "devtools/shared/locales/styleinspector.properties";
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
+
+const PREF_ORIG_SOURCES = "devtools.source-map.client-service.enabled";
+
+/**
+ * Style inspector context menu
+ *
+ * @param {RuleView|ComputedView} view
+ *        RuleView or ComputedView instance controlling this menu
+ * @param {Object} options
+ *        Option menu configuration
+ */
+function StyleInspectorMenu(view, { isRuleView = false } = {}) {
+  this.view = view;
+  this.inspector = this.view.inspector;
+  this.styleWindow = this.view.styleWindow || this.view.doc.defaultView;
+  this.isRuleView = isRuleView;
+
+  this._onCopy = this._onCopy.bind(this);
+  this._onCopyColor = this._onCopyColor.bind(this);
+  this._onCopyImageDataUrl = this._onCopyImageDataUrl.bind(this);
+  this._onCopyLocation = this._onCopyLocation.bind(this);
+  this._onCopyDeclaration = this._onCopyDeclaration.bind(this);
+  this._onCopyPropertyName = this._onCopyPropertyName.bind(this);
+  this._onCopyPropertyValue = this._onCopyPropertyValue.bind(this);
+  this._onCopyRule = this._onCopyRule.bind(this);
+  this._onCopySelector = this._onCopySelector.bind(this);
+  this._onCopyUrl = this._onCopyUrl.bind(this);
+  this._onSelectAll = this._onSelectAll.bind(this);
+  this._onToggleOrigSources = this._onToggleOrigSources.bind(this);
+}
+
+module.exports = StyleInspectorMenu;
+
+StyleInspectorMenu.prototype = {
+  /**
+   * Display the style inspector context menu
+   */
+  show(event) {
+    try {
+      this._openMenu({
+        target: event.target,
+        screenX: event.screenX,
+        screenY: event.screenY,
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  _openMenu({ target, screenX = 0, screenY = 0 } = {}) {
+    this.currentTarget = target;
+    this.styleWindow.focus();
+
+    const menu = new Menu();
+
+    const menuitemCopy = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy"),
+      accesskey: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copy.accessKey"
+      ),
+      click: () => {
+        this._onCopy();
+      },
+      disabled: !this._hasTextSelected(),
+    });
+    const menuitemCopyLocation = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copyLocation"
+      ),
+      click: () => {
+        this._onCopyLocation();
+      },
+      visible: false,
+    });
+    const menuitemCopyRule = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyRule"),
+      click: () => {
+        this._onCopyRule();
+      },
+      visible: this.isRuleView,
+    });
+    const copyColorAccessKey = "styleinspector.contextmenu.copyColor.accessKey";
+    const menuitemCopyColor = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copyColor"
+      ),
+      accesskey: STYLE_INSPECTOR_L10N.getStr(copyColorAccessKey),
+      click: () => {
+        this._onCopyColor();
+      },
+      visible: this._isColorPopup(),
+    });
+    const copyUrlAccessKey = "styleinspector.contextmenu.copyUrl.accessKey";
+    const menuitemCopyUrl = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyUrl"),
+      accesskey: STYLE_INSPECTOR_L10N.getStr(copyUrlAccessKey),
+      click: () => {
+        this._onCopyUrl();
+      },
+      visible: this._isImageUrl(),
+    });
+    const copyImageAccessKey =
+      "styleinspector.contextmenu.copyImageDataUrl.accessKey";
+    const menuitemCopyImageDataUrl = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copyImageDataUrl"
+      ),
+      accesskey: STYLE_INSPECTOR_L10N.getStr(copyImageAccessKey),
+      click: () => {
+        this._onCopyImageDataUrl();
+      },
+      visible: this._isImageUrl(),
+    });
+    const copyDeclarationLabel = "styleinspector.contextmenu.copyDeclaration";
+    const menuitemCopyDeclaration = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(copyDeclarationLabel),
+      click: () => {
+        this._onCopyDeclaration();
+      },
+      visible: false,
+    });
+    const menuitemCopyPropertyName = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copyPropertyName"
+      ),
+      click: () => {
+        this._onCopyPropertyName();
+      },
+      visible: false,
+    });
+    const menuitemCopyPropertyValue = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copyPropertyValue"
+      ),
+      click: () => {
+        this._onCopyPropertyValue();
+      },
+      visible: false,
+    });
+    const menuitemCopySelector = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copySelector"
+      ),
+      click: () => {
+        this._onCopySelector();
+      },
+      visible: false,
+    });
+
+    this._clickedNodeInfo = this._getClickedNodeInfo();
+    if (this.isRuleView && this._clickedNodeInfo) {
+      switch (this._clickedNodeInfo.type) {
+        case VIEW_NODE_PROPERTY_TYPE:
+          menuitemCopyDeclaration.visible = true;
+          menuitemCopyPropertyName.visible = true;
+          break;
+        case VIEW_NODE_VALUE_TYPE:
+          menuitemCopyDeclaration.visible = true;
+          menuitemCopyPropertyValue.visible = true;
+          break;
+        case VIEW_NODE_SELECTOR_TYPE:
+          menuitemCopySelector.visible = true;
+          break;
+        case VIEW_NODE_LOCATION_TYPE:
+          menuitemCopyLocation.visible = true;
+          break;
+      }
+    }
+
+    menu.append(menuitemCopy);
+    menu.append(menuitemCopyLocation);
+    menu.append(menuitemCopyRule);
+    menu.append(menuitemCopyColor);
+    menu.append(menuitemCopyUrl);
+    menu.append(menuitemCopyImageDataUrl);
+    menu.append(menuitemCopyDeclaration);
+    menu.append(menuitemCopyPropertyName);
+    menu.append(menuitemCopyPropertyValue);
+    menu.append(menuitemCopySelector);
+
+    menu.append(
+      new MenuItem({
+        type: "separator",
+      })
+    );
+
+    // Select All
+    const selectAllAccessKey = "styleinspector.contextmenu.selectAll.accessKey";
+    const menuitemSelectAll = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.selectAll"
+      ),
+      accesskey: STYLE_INSPECTOR_L10N.getStr(selectAllAccessKey),
+      click: () => {
+        this._onSelectAll();
+      },
+    });
+    menu.append(menuitemSelectAll);
+
+    menu.append(
+      new MenuItem({
+        type: "separator",
+      })
+    );
+
+    // Add new rule
+    const addRuleAccessKey = "styleinspector.contextmenu.addNewRule.accessKey";
+    const menuitemAddRule = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.addNewRule"
+      ),
+      accesskey: STYLE_INSPECTOR_L10N.getStr(addRuleAccessKey),
+      click: () => this.view._onAddRule(),
+      visible: this.isRuleView,
+      disabled: !this.isRuleView || this.inspector.selection.isAnonymousNode(),
+    });
+    menu.append(menuitemAddRule);
+
+    // Show Original Sources
+    const sourcesAccessKey =
+      "styleinspector.contextmenu.toggleOrigSources.accessKey";
+    const menuitemSources = new MenuItem({
+      label: STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.toggleOrigSources"
+      ),
+      accesskey: STYLE_INSPECTOR_L10N.getStr(sourcesAccessKey),
+      click: () => {
+        this._onToggleOrigSources();
+      },
+      type: "checkbox",
+      checked: Services.prefs.getBoolPref(PREF_ORIG_SOURCES),
+    });
+    menu.append(menuitemSources);
+
+    menu.popup(screenX, screenY, this.inspector.toolbox.doc);
+    return menu;
+  },
+
+  _hasTextSelected() {
+    let hasTextSelected;
+    const selection = this.styleWindow.getSelection();
+
+    const node = this._getClickedNode();
+    if (node.nodeName == "input" || node.nodeName == "textarea") {
+      const { selectionStart, selectionEnd } = node;
+      hasTextSelected =
+        isFinite(selectionStart) &&
+        isFinite(selectionEnd) &&
+        selectionStart !== selectionEnd;
+    } else {
+      hasTextSelected = selection.toString() && !selection.isCollapsed;
+    }
+
+    return hasTextSelected;
+  },
+
+  /**
+   * Get the type of the currently clicked node
+   */
+  _getClickedNodeInfo() {
+    const node = this._getClickedNode();
+    return this.view.getNodeInfo(node);
+  },
+
+  /**
+   * A helper that determines if the popup was opened with a click to a color
+   * value and saves the color to this._colorToCopy.
+   *
+   * @return {Boolean}
+   *         true if click on color opened the popup, false otherwise.
+   */
+  _isColorPopup() {
+    this._colorToCopy = "";
+
+    const container = this._getClickedNode();
+    if (!container) {
+      return false;
+    }
+
+    const colorNode = container.closest("[data-color]");
+    if (!colorNode) {
+      return false;
+    }
+
+    this._colorToCopy = colorNode.dataset.color;
+    return true;
+  },
+
+  /**
+   * Check if the current node (clicked node) is an image URL
+   *
+   * @return {Boolean} true if the node is an image url
+   */
+  _isImageUrl() {
+    const nodeInfo = this._getClickedNodeInfo();
+    if (!nodeInfo) {
+      return false;
+    }
+    return nodeInfo.type == VIEW_NODE_IMAGE_URL_TYPE;
+  },
+
+  /**
+   * Get the DOM Node container for the current target node.
+   * If the target node is a text node, return the parent node, otherwise return
+   * the target node itself.
+   *
+   * @return {DOMNode}
+   */
+  _getClickedNode() {
+    const node = this.currentTarget;
+
+    if (!node) {
+      return null;
+    }
+
+    return node.nodeType === node.TEXT_NODE ? node.parentElement : node;
+  },
+
+  /**
+   * Select all text.
+   */
+  _onSelectAll() {
+    const selection = this.styleWindow.getSelection();
+
+    if (this.isRuleView) {
+      selection.selectAllChildren(
+        this.currentTarget.closest("#ruleview-container-focusable")
+      );
+    } else {
+      selection.selectAllChildren(this.view.element);
+    }
+  },
+
+  /**
+   * Copy the most recently selected color value to clipboard.
+   */
+  _onCopy() {
+    this.view.copySelection(this.currentTarget);
+  },
+
+  /**
+   * Copy the most recently selected color value to clipboard.
+   */
+  _onCopyColor() {
+    clipboardHelper.copyString(this._colorToCopy);
+  },
+
+  /*
+   * Retrieve the url for the selected image and copy it to the clipboard
+   */
+  _onCopyUrl() {
+    if (!this._clickedNodeInfo) {
+      return;
+    }
+
+    clipboardHelper.copyString(this._clickedNodeInfo.value.url);
+  },
+
+  /**
+   * Retrieve the image data for the selected image url and copy it to the
+   * clipboard
+   */
+  async _onCopyImageDataUrl() {
+    if (!this._clickedNodeInfo) {
+      return;
+    }
+
+    let message;
+    try {
+      const inspectorFront = this.inspector.inspectorFront;
+      const imageUrl = this._clickedNodeInfo.value.url;
+      const data = await inspectorFront.getImageDataFromURL(imageUrl);
+      message = await data.data.string();
+    } catch (e) {
+      message = STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.copyImageDataUrlError"
+      );
+    }
+
+    clipboardHelper.copyString(message);
+  },
+
+  /**
+   * Copy the rule source location of the current clicked node.
+   */
+  _onCopyLocation() {
+    if (!this._clickedNodeInfo) {
+      return;
+    }
+
+    clipboardHelper.copyString(this._clickedNodeInfo.value);
+  },
+
+  /**
+   * Copy the CSS declaration of the current clicked node.
+   */
+  _onCopyDeclaration() {
+    if (!this._clickedNodeInfo) {
+      return;
+    }
+
+    const textProp = this._clickedNodeInfo.value.textProperty;
+    clipboardHelper.copyString(textProp.stringifyProperty());
+  },
+
+  /**
+   * Copy the rule property name of the current clicked node.
+   */
+  _onCopyPropertyName() {
+    if (!this._clickedNodeInfo) {
+      return;
+    }
+
+    clipboardHelper.copyString(this._clickedNodeInfo.value.property);
+  },
+
+  /**
+   * Copy the rule property value of the current clicked node.
+   */
+  _onCopyPropertyValue() {
+    if (!this._clickedNodeInfo) {
+      return;
+    }
+
+    clipboardHelper.copyString(this._clickedNodeInfo.value.value);
+  },
+
+  /**
+   * Copy the rule of the current clicked node.
+   */
+  _onCopyRule() {
+    const node = this._getClickedNode();
+    const rule = getRuleFromNode(node, this.view._elementStyle);
+    clipboardHelper.copyString(rule.stringifyRule());
+  },
+
+  /**
+   * Copy the rule selector of the current clicked node.
+   */
+  _onCopySelector() {
+    if (!this._clickedNodeInfo) {
+      return;
+    }
+
+    clipboardHelper.copyString(this._clickedNodeInfo.value);
+  },
+
+  /**
+   * Toggle the original sources pref.
+   */
+  _onToggleOrigSources() {
+    const isEnabled = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
+    Services.prefs.setBoolPref(PREF_ORIG_SOURCES, !isEnabled);
+  },
+
+  destroy() {
+    this.currentTarget = null;
+    this.view = null;
+    this.inspector = null;
+    this.styleWindow = null;
+  },
+};
diff --git a/devtools/client/inspector/shared/test/browser.toml b/devtools/client/inspector/shared/test/browser.toml
new file mode 100644
index 0000000000..3cb858d97f
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser.toml
@@ -0,0 +1,44 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_content_style_changes.html",
+  "head.js",
+  "!/devtools/client/inspector/test/head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_styleinspector_context-menu-copy-color_01.js"]
+
+["browser_styleinspector_context-menu-copy-color_02.js"]
+
+["browser_styleinspector_context-menu-copy-urls.js"]
+
+["browser_styleinspector_output-parser.js"]
+
+["browser_styleinspector_refresh_when_active.js"]
+
+["browser_styleinspector_refresh_when_style_changes.js"]
+
+["browser_styleinspector_tooltip-background-image.js"]
+
+["browser_styleinspector_tooltip-closes-on-new-selection.js"]
+
+["browser_styleinspector_tooltip-longhand-fontfamily.js"]
+
+["browser_styleinspector_tooltip-multiple-background-images.js"]
+
+["browser_styleinspector_tooltip-shorthand-fontfamily.js"]
+
+["browser_styleinspector_tooltip-size.js"]
+
+["browser_styleinspector_transform-highlighter-01.js"]
+
+["browser_styleinspector_transform-highlighter-02.js"]
+
+["browser_styleinspector_transform-highlighter-03.js"]
+
+["browser_styleinspector_transform-highlighter-04.js"]
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js
new file mode 100644
index 0000000000..c1809dd543
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test "Copy color" item of the context menu #1: Test _isColorPopup.
+
+const TEST_URI = `
+  <div style="color:rgb(18, 58, 188);margin:0px;background:span[data-color];">
+    Test "Copy color" context menu option
+  </div>
+`;
+
+add_task(async function () {
+  // Test is slow on Linux EC2 instances - Bug 1137765
+  requestLongerTimeout(2);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openInspector();
+  await testView("ruleview", inspector);
+  await testView("computedview", inspector);
+});
+
+async function testView(viewId, inspector) {
+  info("Testing " + viewId);
+
+  await inspector.sidebar.select(viewId);
+  const view =
+    inspector.getPanel(viewId).view || inspector.getPanel(viewId).computedView;
+  await selectNode("div", inspector);
+
+  testIsColorValueNode(view);
+  await clearCurrentNodeSelection(inspector);
+}
+
+/**
+ * A function testing that isColorValueNode correctly detects nodes part of
+ * color values.
+ */
+function testIsColorValueNode(view) {
+  info("Testing that child nodes of color nodes are detected.");
+  const root = rootElement(view);
+  const colorNode = root.querySelector("span[data-color]");
+
+  ok(colorNode, "Color node found");
+  for (const node of iterateNodes(colorNode)) {
+    ok(isColorValueNode(node), "Node is part of color value.");
+  }
+}
+
+/**
+ * Check if a node is part of color value i.e. it has parent with a 'data-color'
+ * attribute.
+ */
+function isColorValueNode(node) {
+  let container = node.nodeType == node.TEXT_NODE ? node.parentElement : node;
+
+  const isColorNode = el => el.dataset && "color" in el.dataset;
+
+  while (!isColorNode(container)) {
+    container = container.parentNode;
+    if (!container) {
+      info("No color. Node is not part of color value.");
+      return false;
+    }
+  }
+
+  info("Found a color. Node is part of color value.");
+
+  return true;
+}
+
+/**
+ * A generator that iterates recursively trough all child nodes of baseNode.
+ */
+function* iterateNodes(baseNode) {
+  yield baseNode;
+
+  for (const child of baseNode.childNodes) {
+    yield* iterateNodes(child);
+  }
+}
+
+/**
+ * Returns the root element for the given view, rule or computed.
+ */
+var rootElement = view => (view.element ? view.element : view.styleDocument);
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js
new file mode 100644
index 0000000000..546f3520d0
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js
@@ -0,0 +1,115 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test "Copy color" item of the context menu #2: Test that correct color is
+// copied if the color changes.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      color: #123ABC;
+    }
+  </style>
+  <div>Testing the color picker tooltip!</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+
+  await testCopyToClipboard(inspector, view);
+  await testManualEdit(inspector, view);
+  await testColorPickerEdit(inspector, view);
+});
+
+async function testCopyToClipboard(inspector, view) {
+  info("Testing that color is copied to clipboard");
+
+  await selectNode("div", inspector);
+
+  const element = getRuleViewProperty(
+    view,
+    "div",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  const menu = view.contextMenu._openMenu({ target: element });
+  const allMenuItems = buildContextMenuItems(menu);
+  const menuitemCopyColor = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyColor")
+  );
+
+  ok(menuitemCopyColor.visible, "Copy color is visible");
+
+  await waitForClipboardPromise(() => menuitemCopyColor.click(), "#123ABC");
+  ok(true, "expected color was copied to clipboard");
+
+  // close context menu
+  const onContextMenuClose = menu.once("close");
+  menu.hide(element.ownerDocument);
+  await onContextMenuClose;
+}
+
+async function testManualEdit(inspector, view) {
+  info("Testing manually edited colors");
+  await selectNode("div", inspector);
+
+  const colorTextProp = getTextProperty(view, 1, { color: "#123ABC" });
+  const newColor = "#C9184E";
+  await setProperty(view, colorTextProp, newColor);
+
+  const colorValueElement = await waitFor(() => {
+    const el = getRuleViewProperty(view, "div", "color").valueSpan.firstChild;
+    if (el?.dataset?.color !== newColor) {
+      return false;
+    }
+    return el;
+  });
+
+  ok(!!colorValueElement, "data-color was updated");
+
+  const contextMenu = view.contextMenu;
+  contextMenu.currentTarget = colorValueElement;
+  contextMenu._isColorPopup();
+
+  is(contextMenu._colorToCopy, newColor, "_colorToCopy has the new value");
+}
+
+async function testColorPickerEdit(inspector, view) {
+  info("Testing colors edited via color picker");
+  await selectNode("div", inspector);
+
+  const swatchElement = getRuleViewProperty(
+    view,
+    "div",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  info("Opening the color picker");
+  const picker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatchElement.click();
+  await onColorPickerReady;
+
+  const newColor = "#53B759";
+  const { colorUtils } = require("resource://devtools/shared/css/color.js");
+
+  const { r, g, b, a } = new colorUtils.CssColor(newColor).getRGBATuple();
+  await simulateColorPickerChange(view, picker, [r, g, b, a]);
+
+  is(
+    swatchElement.parentNode.dataset.color,
+    newColor,
+    "data-color was updated"
+  );
+
+  const contextMenu = view.contextMenu;
+  contextMenu.currentTarget = swatchElement;
+  contextMenu._isColorPopup();
+
+  is(contextMenu._colorToCopy, newColor, "_colorToCopy has the new value");
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
new file mode 100644
index 0000000000..69042cc747
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* Tests both Copy URL and Copy Data URL context menu items */
+
+const TEST_DATA_URI =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
+
+// Invalid URL still needs to be reachable otherwise getImageDataUrl will
+// timeout.  DevTools chrome:// URLs aren't content accessible, so use some
+// random resource:// URL here.
+const INVALID_IMAGE_URI = "resource://devtools/client/definitions.js";
+const ERROR_MESSAGE = STYLE_INSPECTOR_L10N.getStr(
+  "styleinspector.copyImageDataUrlError"
+);
+
+add_task(async function () {
+  const TEST_URI = `<style type="text/css">
+      .valid-background {
+        background-image: url(${TEST_DATA_URI});
+      }
+      .invalid-background {
+        background-image: url(${INVALID_IMAGE_URI});
+      }
+    </style>
+    <div class="valid-background">Valid background image</div>
+    <div class="invalid-background">Invalid background image</div>`;
+
+  await addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
+
+  await startTest();
+});
+
+async function startTest() {
+  info("Opening rule view");
+  let { inspector, view } = await openRuleView();
+
+  info("Test valid background image URL in rule view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+
+  info("Test invalid background image URL in rue view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".invalid-background",
+    ERROR_MESSAGE
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".invalid-background",
+    INVALID_IMAGE_URI
+  );
+
+  info("Opening computed view");
+  view = selectComputedView(inspector);
+
+  info("Test valid background image URL in computed view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+
+  info("Test invalid background image URL in computed view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".invalid-background",
+    ERROR_MESSAGE
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".invalid-background",
+    INVALID_IMAGE_URI
+  );
+}
+
+async function testCopyUrlToClipboard(
+  { view, inspector },
+  type,
+  selector,
+  expected
+) {
+  info("Select node in inspector panel");
+  await selectNode(selector, inspector);
+
+  info(
+    "Retrieve background-image link for selected node in current " +
+      "styleinspector view"
+  );
+  const property = await getBackgroundImageProperty(view, selector);
+  const imageLink = property.valueSpan.querySelector(".theme-link");
+  ok(imageLink, "Background-image link element found");
+
+  info("Simulate right click on the background-image URL");
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, imageLink);
+  const menuitemCopyUrl = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyUrl")
+  );
+  const menuitemCopyImageDataUrl = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyImageDataUrl")
+  );
+
+  info("Context menu is displayed");
+  ok(menuitemCopyUrl.visible, '"Copy URL" menu entry is displayed');
+  ok(
+    menuitemCopyImageDataUrl.visible,
+    '"Copy Image Data-URL" menu entry is displayed'
+  );
+
+  if (type == "data-uri") {
+    info("Click Copy Data URI and wait for clipboard");
+    await waitForClipboardPromise(() => {
+      return menuitemCopyImageDataUrl.click();
+    }, expected);
+  } else {
+    info("Click Copy URL and wait for clipboard");
+    await waitForClipboardPromise(() => {
+      return menuitemCopyUrl.click();
+    }, expected);
+  }
+
+  info("Hide context menu");
+}
+
+async function getBackgroundImageProperty(view, selector) {
+  const isRuleView = view instanceof CssRuleView;
+  if (isRuleView) {
+    return getRuleViewProperty(view, selector, "background-image", {
+      wait: true,
+    });
+  }
+  return getComputedViewProperty(view, "background-image");
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
new file mode 100644
index 0000000000..1aa2879ee2
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
@@ -0,0 +1,381 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test expected outputs of the output-parser's parseCssProperty function.
+
+// This is more of a unit test than a mochitest-browser test, but can't be
+// tested with an xpcshell test as the output-parser requires the DOM to work.
+
+const OutputParser = require("resource://devtools/client/shared/output-parser.js");
+
+const COLOR_CLASS = "color-class";
+const URL_CLASS = "url-class";
+const CUBIC_BEZIER_CLASS = "bezier-class";
+const ANGLE_CLASS = "angle-class";
+const LINEAR_EASING_CLASS = "linear-easing-class";
+
+const TEST_DATA = [
+  {
+    name: "width",
+    value: "100%",
+    test: fragment => {
+      is(countAll(fragment), 0);
+      is(fragment.textContent, "100%");
+    },
+  },
+  {
+    name: "width",
+    value: "blue",
+    test: fragment => {
+      is(countAll(fragment), 0);
+    },
+  },
+  {
+    name: "content",
+    value: "'red url(test.png) repeat top left'",
+    test: fragment => {
+      is(countAll(fragment), 0);
+    },
+  },
+  {
+    name: "content",
+    value: '"blue"',
+    test: fragment => {
+      is(countAll(fragment), 0);
+    },
+  },
+  {
+    name: "margin-left",
+    value: "url(something.jpg)",
+    test: fragment => {
+      is(countAll(fragment), 0);
+    },
+  },
+  {
+    name: "background-color",
+    value: "transparent",
+    test: fragment => {
+      is(countAll(fragment), 2);
+      is(countColors(fragment), 1);
+      is(fragment.textContent, "transparent");
+    },
+  },
+  {
+    name: "color",
+    value: "red",
+    test: fragment => {
+      is(countColors(fragment), 1);
+      is(fragment.textContent, "red");
+    },
+  },
+  {
+    name: "color",
+    value: "#F06",
+    test: fragment => {
+      is(countColors(fragment), 1);
+      is(fragment.textContent, "#F06");
+    },
+  },
+  {
+    name: "border",
+    value: "80em dotted pink",
+    test: fragment => {
+      is(countAll(fragment), 2);
+      is(countColors(fragment), 1);
+      is(getColor(fragment), "pink");
+    },
+  },
+  {
+    name: "color",
+    value: "red !important",
+    test: fragment => {
+      is(countColors(fragment), 1);
+      is(fragment.textContent, "red !important");
+    },
+  },
+  {
+    name: "background",
+    value: "red url(test.png) repeat top left",
+    test: fragment => {
+      is(countColors(fragment), 1);
+      is(countUrls(fragment), 1);
+      is(getColor(fragment), "red");
+      is(getUrl(fragment), "test.png");
+      is(countAll(fragment), 3);
+    },
+  },
+  {
+    name: "background",
+    value: "blue url(test.png) repeat top left !important",
+    test: fragment => {
+      is(countColors(fragment), 1);
+      is(countUrls(fragment), 1);
+      is(getColor(fragment), "blue");
+      is(getUrl(fragment), "test.png");
+      is(countAll(fragment), 3);
+    },
+  },
+  {
+    name: "list-style-image",
+    value: 'url("images/arrow.gif")',
+    test: fragment => {
+      is(countAll(fragment), 1);
+      is(getUrl(fragment), "images/arrow.gif");
+    },
+  },
+  {
+    name: "list-style-image",
+    value: 'url("images/arrow.gif")!important',
+    test: fragment => {
+      is(countAll(fragment), 1);
+      is(getUrl(fragment), "images/arrow.gif");
+      is(fragment.textContent, 'url("images/arrow.gif")!important');
+    },
+  },
+  {
+    name: "background",
+    value:
+      "linear-gradient(to right, rgba(183,222,237,1) 0%, " +
+      "rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, " +
+      "#F06 75%, red 100%)",
+    test: fragment => {
+      is(countAll(fragment), 10);
+      const allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
+      is(allSwatches.length, 5);
+      is(allSwatches[0].textContent, "rgba(183,222,237,1)");
+      is(allSwatches[1].textContent, "rgba(33,180,226,1)");
+      is(allSwatches[2].textContent, "rgba(31,170,217,.5)");
+      is(allSwatches[3].textContent, "#F06");
+      is(allSwatches[4].textContent, "red");
+    },
+  },
+  {
+    name: "background",
+    value:
+      "radial-gradient(circle closest-side at center, orange 0%, red 100%)",
+    test: fragment => {
+      is(countAll(fragment), 4);
+      const colorSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
+      is(colorSwatches.length, 2);
+      is(colorSwatches[0].textContent, "orange");
+      is(colorSwatches[1].textContent, "red");
+    },
+  },
+  {
+    name: "background",
+    value: "white  url(http://test.com/wow_such_image.png) no-repeat top left",
+    test: fragment => {
+      is(countAll(fragment), 3);
+      is(countUrls(fragment), 1);
+      is(countColors(fragment), 1);
+    },
+  },
+  {
+    name: "background",
+    value:
+      'url("http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t")',
+    test: fragment => {
+      is(countAll(fragment), 1);
+      is(
+        getUrl(fragment),
+        "http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t"
+      );
+    },
+  },
+  {
+    name: "background-image",
+    value: "url(this-is-an-incredible-image.jpeg)",
+    test: fragment => {
+      is(countAll(fragment), 1);
+      is(getUrl(fragment), "this-is-an-incredible-image.jpeg");
+    },
+  },
+  {
+    name: "background",
+    value:
+      'red url(    "http://wow.com/cool/../../../you\'re(doingit)wrong"   ) repeat center',
+    test: fragment => {
+      is(countAll(fragment), 3);
+      is(countColors(fragment), 1);
+      is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong");
+    },
+  },
+  {
+    name: "background-image",
+    value:
+      "url(../../../look/at/this/folder/structure/../" +
+      "../red.blue.green.svg   )",
+    test: fragment => {
+      is(countAll(fragment), 1);
+      is(
+        getUrl(fragment),
+        "../../../look/at/this/folder/structure/../" + "../red.blue.green.svg"
+      );
+    },
+  },
+  {
+    name: "transition-timing-function",
+    value: "linear",
+    test: fragment => {
+      is(countCubicBeziers(fragment), 1);
+      is(getCubicBezier(fragment), "linear");
+    },
+  },
+  {
+    name: "animation-timing-function",
+    value: "ease-in-out",
+    test: fragment => {
+      is(countCubicBeziers(fragment), 1);
+      is(getCubicBezier(fragment), "ease-in-out");
+    },
+  },
+  {
+    name: "animation-timing-function",
+    value: "cubic-bezier(.1, 0.55, .9, -3.45)",
+    test: fragment => {
+      is(countCubicBeziers(fragment), 1);
+      is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)");
+    },
+  },
+  {
+    name: "animation-timing-function",
+    value: "CUBIC-BEZIER(.1, 0.55, .9, -3.45)",
+    test: fragment => {
+      is(countCubicBeziers(fragment), 1);
+      is(getCubicBezier(fragment), "CUBIC-BEZIER(.1, 0.55, .9, -3.45)");
+    },
+  },
+  {
+    name: "animation",
+    value: "move 3s cubic-bezier(.1, 0.55, .9, -3.45)",
+    test: fragment => {
+      is(countCubicBeziers(fragment), 1);
+      is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)");
+    },
+  },
+  {
+    name: "transition",
+    value: "top 1s ease-in",
+    test: fragment => {
+      is(countCubicBeziers(fragment), 1);
+      is(getCubicBezier(fragment), "ease-in");
+    },
+  },
+  {
+    name: "animation-timing-function",
+    value: "linear(0, 1 50% 100%)",
+    test: fragment => {
+      is(countLinears(fragment), 1);
+      is(getLinear(fragment), "linear(0, 1 50% 100%)");
+    },
+  },
+  {
+    name: "animation-timing-function",
+    value: "LINEAR(0, 1 50% 100%)",
+    test: fragment => {
+      is(countLinears(fragment), 1);
+      is(getLinear(fragment), "LINEAR(0, 1 50% 100%)");
+    },
+  },
+  {
+    name: "transition",
+    value: "top 3s steps(4, end)",
+    test: fragment => {
+      is(countAll(fragment), 0);
+    },
+  },
+  {
+    name: "transition",
+    value: "top 3s step-start",
+    test: fragment => {
+      is(countAll(fragment), 0);
+    },
+  },
+  {
+    name: "transition",
+    value: "top 3s step-end",
+    test: fragment => {
+      is(countAll(fragment), 0);
+    },
+  },
+  {
+    name: "background",
+    value: "rgb(255, var(--g-value), 192)",
+    test: fragment => {
+      is(fragment.textContent, "rgb(255, var(--g-value), 192)");
+    },
+  },
+  {
+    name: "background",
+    value: "rgb(255, var(--g-value, 0), 192)",
+    test: fragment => {
+      is(fragment.textContent, "rgb(255, var(--g-value, 0), 192)");
+    },
+  },
+  {
+    name: "--url",
+    value: "url(())",
+    test: fragment => {
+      is(countAll(fragment), 0);
+      is(fragment.textContent, "url(())");
+    },
+  },
+];
+
+add_task(async function () {
+  const cssProperties = getClientCssProperties();
+  const parser = new OutputParser(document, cssProperties);
+  for (let i = 0; i < TEST_DATA.length; i++) {
+    const data = TEST_DATA[i];
+    info(
+      "Output-parser test data " +
+        i +
+        ". {" +
+        data.name +
+        " : " +
+        data.value +
+        ";}"
+    );
+    data.test(
+      parser.parseCssProperty(data.name, data.value, {
+        colorClass: COLOR_CLASS,
+        urlClass: URL_CLASS,
+        bezierClass: CUBIC_BEZIER_CLASS,
+        angleClass: ANGLE_CLASS,
+        linearEasingClass: LINEAR_EASING_CLASS,
+      })
+    );
+  }
+});
+
+function countAll(fragment) {
+  return fragment.querySelectorAll("*").length;
+}
+function countColors(fragment) {
+  return fragment.querySelectorAll("." + COLOR_CLASS).length;
+}
+function countUrls(fragment) {
+  return fragment.querySelectorAll("." + URL_CLASS).length;
+}
+function countCubicBeziers(fragment) {
+  return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS).length;
+}
+function countLinears(fragment) {
+  return fragment.querySelectorAll("." + LINEAR_EASING_CLASS).length;
+}
+function getColor(fragment, index) {
+  return fragment.querySelectorAll("." + COLOR_CLASS)[index || 0].textContent;
+}
+function getUrl(fragment, index) {
+  return fragment.querySelectorAll("." + URL_CLASS)[index || 0].textContent;
+}
+function getCubicBezier(fragment, index) {
+  return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS)[index || 0]
+    .textContent;
+}
+function getLinear(fragment, index = 0) {
+  return fragment.querySelectorAll("." + LINEAR_EASING_CLASS)[index]
+    .textContent;
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
new file mode 100644
index 0000000000..de2f3cc3e6
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule and computed view refreshes when they are active.
+
+const TEST_URI = `
+  <div id="one" style="color:red;">one</div>
+  <div id="two" style="color:blue;">two</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#one", inspector);
+
+  is(
+    getRuleViewPropertyValue(view, "element", "color"),
+    "red",
+    "The rule-view shows the properties for test node one"
+  );
+
+  info("Switching to the computed-view");
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  selectComputedView(inspector);
+  await onComputedViewReady;
+  const cView = inspector.getPanel("computedview").computedView;
+
+  is(
+    getComputedViewPropertyValue(cView, "color"),
+    "rgb(255, 0, 0)",
+    "The computed-view shows the properties for test node one"
+  );
+
+  info("Selecting test node two");
+  await selectNode("#two", inspector);
+
+  is(
+    getComputedViewPropertyValue(cView, "color"),
+    "rgb(0, 0, 255)",
+    "The computed-view shows the properties for test node two"
+  );
+  is(
+    getRuleViewPropertyValue(view, "element", "color"),
+    "blue",
+    "The rule-view shows the properties for test node two"
+  );
+});
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_style_changes.js b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_style_changes.js
new file mode 100644
index 0000000000..9b92e65c07
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_style_changes.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule and computed views refresh when style changes that impact the
+// current selection occur.
+// This test does not need to worry about the correctness of the styles and rules
+// displayed in these views (other tests do this) but only cares that they do catch the
+// change.
+
+const TEST_URI = TEST_URL_ROOT + "doc_content_style_changes.html";
+
+const TEST_DATA = [
+  {
+    target: "#test",
+    className: "green-class",
+    force: true,
+  },
+  {
+    target: "#test",
+    className: "green-class",
+    force: false,
+  },
+  {
+    target: "#parent",
+    className: "purple-class",
+    force: true,
+  },
+  {
+    target: "#parent",
+    className: "purple-class",
+    force: false,
+  },
+  {
+    target: "#sibling",
+    className: "blue-class",
+    force: true,
+  },
+  {
+    target: "#sibling",
+    className: "blue-class",
+    force: false,
+  },
+];
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+
+  const { inspector } = await openRuleView();
+  await selectNode("#test", inspector);
+
+  info("Run the test on the rule-view");
+  await runViewTest(inspector, tab, "rule");
+
+  info("Switch to the computed view");
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  selectComputedView(inspector);
+  await onComputedViewReady;
+
+  info("Run the test again on the computed view");
+  await runViewTest(inspector, tab, "computed");
+});
+
+async function runViewTest(inspector, tab, viewName) {
+  for (const { target, className, force } of TEST_DATA) {
+    info(
+      (force ? "Adding" : "Removing") +
+        ` class ${className} on ${target} and expecting a ${viewName}-view refresh`
+    );
+
+    await toggleClassAndWaitForViewChange(
+      { target, className, force },
+      inspector,
+      tab,
+      `${viewName}-view-refreshed`
+    );
+  }
+}
+
+async function toggleClassAndWaitForViewChange(
+  whatToMutate,
+  inspector,
+  tab,
+  eventName
+) {
+  const onRefreshed = inspector.once(eventName);
+
+  await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [whatToMutate],
+    function ({ target, className, force }) {
+      content.document.querySelector(target).classList.toggle(className, force);
+    }
+  );
+
+  await onRefreshed;
+  ok(true, "The view was refreshed after the class was changed");
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
new file mode 100644
index 0000000000..638648d78e
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that background-image URLs have image preview tooltips in the rule-view
+// and computed-view
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      padding: 1em;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADI5JREFUeNrsWwuQFNUVPf1m5z87szv7HWSWj8CigBFMEFZKiQsB1PgJwUAZg1HBpIQsKmokEhNjWUnFVPnDWBT+KolJYbRMoqUVq0yCClpqiX8sCchPWFwVlt2db7+X93pez7zu6Vn2NxsVWh8987p7pu+9555z7+tZjTGGY3kjOMa34w447oBjfKsY7i/UNM3Y8eFSAkD50Plgw03K5P9gvGv7U5ieeR3PszeREiPNX3/0DL4hjslzhm8THh+OITfXk3dhiv4GDtGPVzCaeJmPLYzuu5qJuWfuw2QTlcN1X9pwQU7LhdZ/ZAseD45cOh9hHvDkc/yAF/DNhdb5Mrr3PvBMaAYW8fMSIi2G497IMEK/YutGtAYr6+ej+nxu/NN8Ks3N7AR6HgcLz0Eg1Ljg1UcxZzi5qewIkMYLRweTr2Kzp+nmyXAd5pS3XQDd+N/4h4zgu9FI7brlXf90nMEnuwQxlvv+hosE3TuexmWeysmT4W+WxkMaLzf9Y8ATgjcUn7T9H1gqrpFq8eV1gMn6t16NhngjfoX6q4DUP032Rd4LJgpSLwJ1yzFqBG69eRkah0MVyo0Acfe+yy9AG4nMiYCkeM53KKFXncBLAXqEm+wCqZwaueq7WCmuLTcKSJmj737ol2hurA9eq9VdyiO8yWa3NNyog+SB5CZodSsQq/dfu34tJpYbBaTMzvVddDZu16q5smXf4G8zEvqm4cyaAmJPuTJk3oJWdS4WzcVtfMZbThSQckb/pYfRGgo3zNOqZnEHbJPGK4abaDCQIIsT8V/qTaBqHkLh6LzXH8XZQhbLhYKyyCC/WeHYcNdmvOgfe8skzbWL270/T3wf7tSx/lGCbTu8xlzzmCSWLc5iwmgikcCHi3Mga0Ry913vBFvQwg90l6M4ImWKfsWOp7DSWxmfpPlCFuPFfsNfKrCnPYpQKIRgqBK7D0SxYaNHwkEiJMtl0ReDp3Lc5D3PGoTo/sKngCl7a5chFqvBatKwjBd7WwqIlzB/78NcoUcp5VSgGxm+7b8eqQRGnHMO634epO4S1EZww09/iFg5UmGoESDuznP1xVhTUX1WWHPzjpd25wyH0hRxI3LGM75nxmuNEEUVpAN0XgxmPoKralakbQnWlIMQyVBD/w+3orkq4lvualjKyWwzt4MaxqspQHVhPOWG64bxYuhZXSFGWhipbSDVragOu5Y9eAsmDDUKyBA703vemVhHoueD6e9wAzJK1WfmN0Umk5GGM4kEMZcuIECqgjm0nldAqmbjwtm4VxZH5AvlADP6mx9Eqy9Q0+KqW8Ch+47FaMMYmnNGfY1iPMshoC6qFxme4wQ+0p+ARE6H3+9veWEDWgUhDhUKyFARn4jM5BNxT0XsMg7bfymGK1ov3wtjDfhL4w0HVGUVBEjDaaE+QNdrcNWch1PG4W6xrjBUXECGivg++Cva3JUT4iQUz3V2RsSVaKLwOuDT89A3HdBQoxhNC+fnVm74ual2EG893P6G+PuP4SfiO4cCBWQooL9qCWKNXPbcI37Aa/lnlZxXRt4RFONGwSDCPAHqOuqjWct1QiEMw5mChM5X4K47FyNqcd3aK9AwFH0CGYLoe1ctxk2eWi57rg5JfGp9rzC6ggCdFlAgHBDw5Yxlcg6G8SyHCjMlsgmDD9zhSeHlF+JnAgWDTQUy2NxfdwOao1UVV3pi3+bE97YSbWpLAbn6zefHNQkp1PMpIBwwvslKgIYTKM2nEpNzrGcH3FXTEal0L38kJ4uDQgEZbO4vnI173LXf5NHZaiUxtaCxyZuo/rK6LpUg54yg3zTWRAArvDcRIPZ6BqzrQ1REpmL+DNw32OKIDCb3X1qPVn8wNNMT4w2bvs+q4bAZrqBh2skaL3yyhhIIZ4i6oHkUK0RckcB8GigEyRIH4A6Mgc8fatl0/+BkkQxC9gIT4ljna1rIZW9rEdNbjJcNjsnoYj7LHWCUwpITzEgzRQKZ3XAFHbTzA3hrz8TEUUZxFBhoKpABQt/97p+w0hMZG68I8R6FtlsJT3FELndZntjM+VMnylKYq8GJI3UZaRMpquGSGFVOEfv0YZBMNzz+uvjbfzS6xQERIhlI9FcvQWNdFVb7x1zCb+QNK8vb9NsiifmI5hBgVoOCBC1sb0ab5RomqENxLO3eA1/0NDRU47q2RQNbRCUDIb7lF2CNL3ZGxEV4n08TVvZWYG4pZyV0zUdS45tyCBByOHWiyvZmxFXDCyRo1ge5+Sy0TA+8lWMiP/6O0S32exGV9Jf4fr8azdUR3zL/CZz4MtvzdX5uOYs6NDOmpkuj5Huh+7qUQSYl0ThHzw0YQzcGo6bhzEqoYq5rN3yRiYiG3Vfe2Ybm/qKA9NNZ3nNm4F7/yDkg9AN+U1mHiBcXP8zuDN76jj8hg1QyiWQigalj02BJPhK8I0zxijAjhp5zhlpLUDvS+BCy2HMAvvB4XDgL9/SXC0g/ou/5+6/xLX8w0uJrOIkXfPvyhY0F6gr7M8H0KWFYikcqAXakB+xwD9CdREBLoau7Gz3cAdSIdLFxFtJTCqRChSjnutvhDcREtzjz2Tswtz+yeNRFUeXZXtWux7C1fuoVcbd3J//ipDX3uZZDLGrwweS+UBLL5TDliVBnF8P7H+XI8aRRGsIBJg/Zlslt1+W+D1JWoSyi+kD9jfhs78t7mhZhSl+fLfY1Bdyv3I8V/qpY3B1McgN7ZFT5/vNO0I5DPLLdPBIJA8qc4h2I0QplYfDpJwHT+aj0246r5S8rToG8OjCle8wk4OLvvYGa+Ovr84uo2qBSwJS9G5egoZFLTfiEqWDtbwGfHgKOdPHcS+ai7XDzMPW/FJRLGGcxnBbK4YJC2K+h+T6Bdu5CqHqCWERd3bawb7JI+iJ735+LNaHaprBLLHBm08U3XxShEsdt+f3eTh3v7aC95Dct4RCWL5OZWh/oXBZThxAIxyOXLzBk8aiEWJID8rK3CpPOmeHaGpvCS+7EHv5FujVHUSJPLXvIFeHcNc+9xrB2gws9KZdxuLFax/WLM5gzzSm/lTXF/OdAcapyvjxPqxqHjr2v4ckX2bS2dRBrc5lSdpKjEJ9/9tdwX2WMd53ZQ2IVo3RES+UwVSpCPvYepNx4gmTGDUKIMQ4eduPnD7mx9xOn/KZKOlFbStjONxHTtR+BYAPmnoZ1Zp8wkBRwP/EL3u0F/C2hGl7vpz7vW37T3vP7if8wroKuoh8ribknX9BK5rcF+mo1qKaKyRPJTgTDjbzY8szcuLb3bpH00u35T47j7prRpwDJTxzyG0dHgxPp5bPG8VdkpfPbUg3SgoOo2mwVukb98D5EqpswZTTulCggTk4gpYhv0++wIhCJxr0+Hq1sondis0SE2oxQe3qWXwWyO4DSQg9gJ8Iiw1VFcGqXxet0N9xE4ygIxv/9W6wo9WyROEX/R+eiobYSq2vHTOR631Eiv2lRfh9dvxkumkXh92Qsx8XrAJ+7YGbWuhxOi/U+31NQmzyqNYG8N/3wfo6CRtRHcN01FzkvojohwLu0VVvDa56IS/xcj2b7nN+O+m0jqpE1wMPXZxAN9iCVThtDvH7gmiRGRpU8Lspv1Uhq4wIVdQoyuGSLNYPKUCS8+CzNURbzMmjK3i8u0U793lmuV0ef9nWQ5MGC/DiUqEUSaCtXna9RJEspZS1lrXINK/pcq+SpT50t98QKMq1FRmDfx3vxty102k0PM4ssEnvuz5+G26Ij4yDpz6z9fV8bkyIkqBFkhej0Ib+ZQ34XJK9AfozaiimqIoX3Jp3tiISrcfYpuN2+iFph/02P36PNC9fVcCnp6H9jYouKyfaWufz5Tp9tVxcUniw7IohZv4dZz81/ns67z3AYPrc2n0+Ix2q8k0PWjgBy88XaibnfK9A+5LdDY2Ivhy36fbT8Zv3Lb1U1qLqUxorXEEXIs0mjjrtxoTZWtdvigNs2sgPiujTv6DIZLld6b/V5742JZV3fUsUVFy5gdsNtKWFzUCEVbNepD1MkSMVbsb6SZm7jI3/zODtQKgUMsOw8wDZ63t5xcV1TnaEAxoc6wrqY+Fj+N4DsqOnhOIdicrQSm1MPYCPlIqHn5bbHg8/bj2D3QfZnCX3mpAICDZV8jH5kpbZqTD0W+DxaA74CWzLN2nd14OlL72J38Lf7+TjC7dadZFDoZJQPrtaIKL/G0L6ktptPZVJ8fMqHYPZOKYPMyQGadIJfDvdXwAFiZOTvDBPydf5vk4rWA+RfdhBlaF/yDDBRoMu9pfnSjv/p7DG+HXfAcQcc49v/BBgAcFAO4DmB2GQAAAAASUVORK5CYII=);
+      background-repeat: repeat-y;
+      background-position: right top;
+    }
+    .test-element {
+      font-family: verdana;
+      color: #333;
+      background: url(chrome://global/skin/icons/help.svg) no-repeat left center;
+      padding-left: 70px;
+    }
+  </style>
+  <div class="test-element">test element</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, view } = await openRuleView();
+
+  info("Testing the background-image property on the body rule");
+  await testBodyRuleView(view);
+
+  info("Selecting the test div node");
+  await selectNode(".test-element", inspector);
+  info("Testing the the background property on the .test-element rule");
+  await testDivRuleView(view);
+
+  info(
+    "Testing that image preview tooltips show even when there are " +
+      "fields being edited"
+  );
+  await testTooltipAppearsEvenInEditMode(view);
+
+  info("Switching over to the computed-view");
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  view = selectComputedView(inspector);
+  await onComputedViewReady;
+
+  info("Testing that the background-image computed style has a tooltip too");
+  await testComputedView(view);
+});
+
+async function testBodyRuleView(view) {
+  info("Testing tooltips in the rule view");
+
+  // XXX we have an intermittent here (Bug 1743594) where the rule view is still empty
+  // at this point. We're currently investigating what's going on and a proper way to
+  // wait in openRuleView, but for now, let's fix the intermittent by waiting until the
+  // rule view has the expected content.
+  const property = await waitFor(() =>
+    getRuleViewProperty(view, "body", "background-image")
+  );
+
+  // Get the background-image property inside the rule view
+  const { valueSpan } = property;
+  const uriSpan = valueSpan.querySelector(".theme-link");
+
+  const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
+
+  const images = previewTooltip.panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0]
+      .getAttribute("src")
+      .includes("iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe"),
+    "The image URL seems fine"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
+}
+
+async function testDivRuleView(view) {
+  // Get the background property inside the rule view
+  const { valueSpan } = getRuleViewProperty(
+    view,
+    ".test-element",
+    "background"
+  );
+  const uriSpan = valueSpan.querySelector(".theme-link");
+
+  const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
+
+  const images = previewTooltip.panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri image as expected"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
+}
+
+async function testTooltipAppearsEvenInEditMode(view) {
+  info("Switching to edit mode in the rule view");
+  const editor = await turnToEditMode(view);
+
+  info("Now trying to show the preview tooltip");
+  const { valueSpan } = getRuleViewProperty(
+    view,
+    ".test-element",
+    "background"
+  );
+  const uriSpan = valueSpan.querySelector(".theme-link");
+
+  const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
+
+  is(
+    view.styleDocument.activeElement,
+    editor.input,
+    "Tooltip was shown in edit mode, and inplace-editor still focused"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
+}
+
+function turnToEditMode(ruleView) {
+  const brace = ruleView.styleDocument.querySelector(".ruleview-ruleclose");
+  return focusEditableField(ruleView, brace);
+}
+
+async function testComputedView(view) {
+  const { valueSpan } = getComputedViewProperty(view, "background-image");
+  const uriSpan = valueSpan.querySelector(".theme-link");
+
+  // Scroll to ensure the line is visible as we see the box model by default
+  valueSpan.scrollIntoView();
+
+  const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
+
+  const images = previewTooltip.panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri in the computed-view too"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
new file mode 100644
index 0000000000..3fe58aa63d
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that if a tooltip is visible when a new selection is made, it closes
+
+const TEST_URI = "<div class='one'>el 1</div><div class='two'>el 2</div>";
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, view } = await openRuleView();
+  await selectNode(".one", inspector);
+
+  info("Testing rule view tooltip closes on new selection");
+  await testRuleView(view, inspector);
+
+  info("Testing computed view tooltip closes on new selection");
+  view = selectComputedView(inspector);
+  await testComputedView(view, inspector);
+});
+
+async function testRuleView(ruleView, inspector) {
+  info("Showing the tooltip");
+
+  const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
+  const tooltipContent = ruleView.styleDocument.createElementNS(
+    XHTML_NS,
+    "div"
+  );
+  tooltip.panel.appendChild(tooltipContent);
+  tooltip.setContentSize({ width: 100, height: 30 });
+
+  // Stop listening for mouse movements because it's not needed for this test,
+  // and causes intermittent failures on Linux. When this test runs in the suite
+  // sometimes a mouseleave event is dispatched at the start, which causes the
+  // tooltip to hide in the middle of being shown, which causes timeouts later.
+  tooltip.stopTogglingOnHover();
+
+  const onShown = tooltip.once("shown");
+  tooltip.show(ruleView.styleDocument.firstElementChild);
+  await onShown;
+
+  info("Selecting a new node");
+  const onHidden = tooltip.once("hidden");
+  await selectNode(".two", inspector);
+  await onHidden;
+
+  ok(true, "Rule view tooltip closed after a new node got selected");
+}
+
+async function testComputedView(computedView, inspector) {
+  info("Showing the tooltip");
+
+  const tooltip = computedView.tooltips.getTooltip("previewTooltip");
+  const tooltipContent = computedView.styleDocument.createElementNS(
+    XHTML_NS,
+    "div"
+  );
+  tooltip.panel.appendChild(tooltipContent);
+  await tooltip.setContentSize({ width: 100, height: 30 });
+
+  // Stop listening for mouse movements because it's not needed for this test,
+  // and causes intermittent failures on Linux. When this test runs in the suite
+  // sometimes a mouseleave event is dispatched at the start, which causes the
+  // tooltip to hide in the middle of being shown, which causes timeouts later.
+  tooltip.stopTogglingOnHover();
+
+  const onShown = tooltip.once("shown");
+  tooltip.show(computedView.styleDocument.firstElementChild);
+  await onShown;
+
+  info("Selecting a new node");
+  const onHidden = tooltip.once("hidden");
+  await selectNode(".one", inspector);
+  await onHidden;
+
+  ok(true, "Computed view tooltip closed after a new node got selected");
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
new file mode 100644
index 0000000000..8a31e94918
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
@@ -0,0 +1,178 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the fontfamily tooltip on longhand properties
+
+const TEST_URI = `
+  <style type="text/css">
+    #testElement {
+      font-family: cursive;
+      color: #333;
+      padding-left: 70px;
+    }
+  </style>
+  <div id="testElement">test element</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, view } = await openRuleView();
+  await selectNode("#testElement", inspector);
+  await testRuleView(view, inspector.selection.nodeFront);
+
+  info("Opening the computed view");
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  view = selectComputedView(inspector);
+  await onComputedViewReady;
+
+  await testComputedView(view, inspector.selection.nodeFront);
+
+  await testExpandedComputedViewProperty(view, inspector.selection.nodeFront);
+});
+
+async function testRuleView(ruleView, nodeFront) {
+  info("Testing font-family tooltips in the rule view");
+
+  const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+
+  // Check that the rule view has a tooltip and that a XUL panel has
+  // been created
+  ok(tooltip, "Tooltip instance exists");
+  ok(panel, "XUL panel exists");
+
+  // Get the font family property inside the rule view
+  const { valueSpan } = getRuleViewProperty(
+    ruleView,
+    "#testElement",
+    "font-family"
+  );
+
+  // And verify that the tooltip gets shown on this property
+  valueSpan.scrollIntoView(true);
+  let previewTooltip = await assertShowPreviewTooltip(ruleView, valueSpan);
+
+  let images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri image as expected"
+  );
+
+  let dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
+
+  // Do the tooltip test again, but now when hovering on the span that
+  // encloses each and every font family.
+  const fontFamilySpan = valueSpan.querySelector(".ruleview-font-family");
+  fontFamilySpan.scrollIntoView(true);
+
+  previewTooltip = await assertShowPreviewTooltip(ruleView, fontFamilySpan);
+
+  images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri image as expected"
+  );
+
+  dataURL = await getFontFamilyDataURL(fontFamilySpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, fontFamilySpan);
+}
+
+async function testComputedView(computedView, nodeFront) {
+  info("Testing font-family tooltips in the computed view");
+
+  const tooltip = computedView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+  const { valueSpan } = getComputedViewProperty(computedView, "font-family");
+
+  valueSpan.scrollIntoView(true);
+  const previewTooltip = await assertShowPreviewTooltip(
+    computedView,
+    valueSpan
+  );
+
+  const images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri image as expected"
+  );
+
+  const dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
+}
+
+async function testExpandedComputedViewProperty(computedView, nodeFront) {
+  info(
+    "Testing font-family tooltips in expanded properties of the " +
+      "computed view"
+  );
+
+  info("Expanding the font-family property to reveal matched selectors");
+  const propertyView = getPropertyView(computedView, "font-family");
+  propertyView.matchedExpanded = true;
+  await propertyView.refreshMatchedSelectors();
+
+  const valueSpan = propertyView.matchedSelectorsContainer.querySelector(
+    ".bestmatch .computed-other-property-value"
+  );
+
+  const tooltip = computedView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+
+  valueSpan.scrollIntoView(true);
+  const previewTooltip = await assertShowPreviewTooltip(
+    computedView,
+    valueSpan
+  );
+
+  const images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri image as expected"
+  );
+
+  const dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
+}
+
+function getPropertyView(computedView, name) {
+  let propertyView = null;
+  computedView.propertyViews.some(function (view) {
+    if (view.name == name) {
+      propertyView = view;
+      return true;
+    }
+    return false;
+  });
+  return propertyView;
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js
new file mode 100644
index 0000000000..5caab37555
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test for bug 1026921: Ensure the URL of hovered url() node is used instead
+// of the first found from the declaration  as there might be multiple urls.
+
+const YELLOW_DOT =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gYcDCwCr0o5ngAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAANSURBVAjXY/j/n6EeAAd9An7Z55GEAAAAAElFTkSuQmCC";
+const BLUE_DOT =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gYcDCwlCkCM9QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAANSURBVAjXY2Bg+F8PAAKCAX/tPkrkAAAAAElFTkSuQmCC";
+const TEST_STYLE = `h1 {background: url(${YELLOW_DOT}), url(${BLUE_DOT});}`;
+const TEST_URI = `<style>${TEST_STYLE}</style><h1>test element</h1>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openInspector();
+
+  await testRuleViewUrls(inspector);
+  await testComputedViewUrls(inspector);
+});
+
+async function testRuleViewUrls(inspector) {
+  info("Testing tooltips in the rule view");
+  const view = selectRuleView(inspector);
+  await selectNode("h1", inspector);
+
+  const { valueSpan } = getRuleViewProperty(view, "h1", "background");
+  await performChecks(view, valueSpan);
+}
+
+async function testComputedViewUrls(inspector) {
+  info("Testing tooltips in the computed view");
+
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  const view = selectComputedView(inspector);
+  await onComputedViewReady;
+
+  const { valueSpan } = getComputedViewProperty(view, "background-image");
+
+  await performChecks(view, valueSpan);
+}
+
+/**
+ * A helper that checks url() tooltips contain correct images
+ */
+async function performChecks(view, propertyValue) {
+  function checkTooltip(panel, imageSrc) {
+    const images = panel.getElementsByTagName("img");
+    is(images.length, 1, "Tooltip contains an image");
+    is(images[0].getAttribute("src"), imageSrc, "The image URL is correct");
+  }
+
+  const links = propertyValue.querySelectorAll(".theme-link");
+
+  info("Checking first link tooltip");
+  let previewTooltip = await assertShowPreviewTooltip(view, links[0]);
+  const panel = view.tooltips.getTooltip("previewTooltip").panel;
+  checkTooltip(panel, YELLOW_DOT);
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, links[0]);
+
+  info("Checking second link tooltip");
+  previewTooltip = await assertShowPreviewTooltip(view, links[1]);
+  checkTooltip(panel, BLUE_DOT);
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, links[1]);
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
new file mode 100644
index 0000000000..ef98a20a37
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the fontfamily tooltip on shorthand properties
+
+const TEST_URI = `
+  <style type="text/css">
+    #testElement {
+      font: italic bold .8em/1.2 Arial;
+    }
+  </style>
+  <div id="testElement">test element</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testElement", inspector);
+  await testRuleView(view, inspector.selection.nodeFront);
+});
+
+async function testRuleView(ruleView, nodeFront) {
+  info("Testing font-family tooltips in the rule view");
+
+  const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+
+  // Check that the rule view has a tooltip and that a XUL panel has
+  // been created
+  ok(tooltip, "Tooltip instance exists");
+  ok(panel, "XUL panel exists");
+
+  // Get the computed font family property inside the font rule view
+  const propertyList = ruleView.element.querySelectorAll(
+    ".ruleview-propertylist"
+  );
+  const fontExpander =
+    propertyList[1].querySelectorAll(".ruleview-expander")[0];
+  fontExpander.click();
+
+  const rule = getRuleViewRule(ruleView, "#testElement");
+  const computedlist = rule.querySelectorAll(".ruleview-computed");
+  let valueSpan;
+  for (const computed of computedlist) {
+    const propertyName = computed.querySelector(".ruleview-propertyname");
+    if (propertyName.textContent == "font-family") {
+      valueSpan = computed.querySelector(".ruleview-propertyvalue");
+      break;
+    }
+  }
+
+  // And verify that the tooltip gets shown on this property
+  const previewTooltip = await assertShowPreviewTooltip(ruleView, valueSpan);
+
+  const images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri image as expected"
+  );
+
+  const dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
new file mode 100644
index 0000000000..4458477a0c
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Checking tooltips dimensions, to make sure their big enough to display their
+// content
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      width: 300px;height: 300px;border-radius: 50%;
+      background: red url(chrome://global/skin/icons/help.svg);
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+  await testImageDimension(view);
+  await testPickerDimension(view);
+});
+
+async function testImageDimension(ruleView) {
+  info("Testing background-image tooltip dimensions");
+
+  const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+  const { valueSpan } = getRuleViewProperty(ruleView, "div", "background");
+  const uriSpan = valueSpan.querySelector(".theme-link");
+
+  // Make sure there is a hover tooltip for this property, this also will fill
+  // the tooltip with its content
+  const previewTooltip = await assertShowPreviewTooltip(ruleView, uriSpan);
+
+  // Let's not test for a specific size, but instead let's make sure it's at
+  // least as big as the image
+  const imageRect = panel.querySelector("img").getBoundingClientRect();
+  const panelRect = panel.getBoundingClientRect();
+
+  Assert.greaterOrEqual(
+    panelRect.width,
+    imageRect.width,
+    "The panel is wide enough to show the image"
+  );
+  Assert.greaterOrEqual(
+    panelRect.height,
+    imageRect.height,
+    "The panel is high enough to show the image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
+}
+
+async function testPickerDimension(ruleView) {
+  info("Testing color-picker tooltip dimensions");
+
+  const { valueSpan } = getRuleViewProperty(ruleView, "div", "background");
+  const swatch = valueSpan.querySelector(".ruleview-colorswatch");
+  const cPicker = ruleView.tooltips.getTooltip("colorPicker");
+
+  const onReady = cPicker.once("ready");
+  swatch.click();
+  await onReady;
+
+  // The colorpicker spectrum's iframe has a fixed width height, so let's
+  // make sure the tooltip is at least as big as that
+  const spectrumRect = cPicker.spectrum.element.getBoundingClientRect();
+  const panelRect = cPicker.tooltip.container.getBoundingClientRect();
+
+  Assert.greaterOrEqual(
+    panelRect.width,
+    spectrumRect.width,
+    "The panel is wide enough to show the picker"
+  );
+  Assert.greaterOrEqual(
+    panelRect.height,
+    spectrumRect.height,
+    "The panel is high enough to show the picker"
+  );
+
+  const onHidden = cPicker.tooltip.once("hidden");
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  cPicker.hide();
+  await onHidden;
+  await onRuleViewChanged;
+}
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
new file mode 100644
index 0000000000..b4297a66c2
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the css transform highlighter is created only when asked and only one
+// instance exists across the inspector
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      transform: skew(16deg);
+    }
+  </style>
+  Test the css transform highlighter
+`;
+
+const TYPE = "CssTransformHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  let overlay = view.highlighters;
+
+  ok(!overlay.highlighters[TYPE], "No highlighter exists in the rule-view");
+  const h = await overlay._getHighlighter(TYPE);
+  ok(
+    overlay.highlighters[TYPE],
+    "The highlighter has been created in the rule-view"
+  );
+  is(h, overlay.highlighters[TYPE], "The right highlighter has been created");
+  const h2 = await overlay._getHighlighter(TYPE);
+  is(
+    h,
+    h2,
+    "The same instance of highlighter is returned everytime in the rule-view"
+  );
+
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  const cView = selectComputedView(inspector);
+  await onComputedViewReady;
+  overlay = cView.highlighters;
+
+  ok(overlay.highlighters[TYPE], "The highlighter exists in the computed-view");
+  const h3 = await overlay._getHighlighter(TYPE);
+  is(
+    h,
+    h3,
+    "The same instance of highlighter is returned everytime " +
+      "in the computed-view"
+  );
+});
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
new file mode 100644
index 0000000000..f1ddc68892
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the css transform highlighter is created when hovering over a
+// transform property
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      transform: skew(16deg);
+      color: yellow;
+    }
+  </style>
+  Test the css transform highlighter
+`;
+
+var TYPE = "CssTransformHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let hs = view.highlighters;
+
+  ok(!hs.highlighters[TYPE], "No highlighter exists in the rule-view (1)");
+
+  info("Faking a mousemove on a non-transform property");
+  let { valueSpan } = getRuleViewProperty(view, "body", "color");
+  hs.onMouseMove({ target: valueSpan });
+  ok(!hs.highlighters[TYPE], "No highlighter exists in the rule-view (2)");
+
+  info("Faking a mousemove on a transform property");
+  ({ valueSpan } = getRuleViewProperty(view, "body", "transform"));
+  let onHighlighterShown = hs.once("css-transform-highlighter-shown");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterShown;
+
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  const cView = selectComputedView(inspector);
+  await onComputedViewReady;
+  hs = cView.highlighters;
+
+  info("Remove the created transform highlighter");
+  hs.highlighters[TYPE].finalize();
+  hs.highlighters[TYPE] = null;
+
+  info("Faking a mousemove on a non-transform property");
+  ({ valueSpan } = getComputedViewProperty(cView, "color"));
+  hs.onMouseMove({ target: valueSpan });
+  ok(!hs.highlighters[TYPE], "No highlighter exists in the computed-view (3)");
+
+  info("Faking a mousemove on a transform property");
+  ({ valueSpan } = getComputedViewProperty(cView, "transform"));
+  onHighlighterShown = hs.once("css-transform-highlighter-shown");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterShown;
+
+  ok(
+    hs.highlighters[TYPE],
+    "The highlighter has been created in the computed-view"
+  );
+});
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
new file mode 100644
index 0000000000..ee95db2432
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
@@ -0,0 +1,115 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the css transform highlighter is shown when hovering over transform
+// properties
+
+// Note that in this test, we mock the highlighter front, merely testing the
+// behavior of the style-inspector UI for now
+
+const TEST_URI = `
+  <style type="text/css">
+    html {
+      transform: scale(.9);
+    }
+    body {
+      transform: skew(16deg);
+      color: purple;
+    }
+  </style>
+  Test the css transform highlighter
+`;
+
+const TYPE = "CssTransformHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  // Mock the highlighter front to get the reference of the NodeFront
+  const HighlighterFront = {
+    isShown: false,
+    nodeFront: null,
+    nbOfTimesShown: 0,
+    show(nodeFront) {
+      this.nodeFront = nodeFront;
+      this.isShown = true;
+      this.nbOfTimesShown++;
+      return Promise.resolve(true);
+    },
+    hide() {
+      this.nodeFront = null;
+      this.isShown = false;
+      return Promise.resolve();
+    },
+    finalize() {},
+  };
+
+  // Inject the mock highlighter in the rule-view
+  const hs = view.highlighters;
+  hs.highlighters[TYPE] = HighlighterFront;
+
+  let { valueSpan } = getRuleViewProperty(view, "body", "transform");
+
+  info("Checking that the HighlighterFront's show/hide methods are called");
+  let onHighlighterShown = hs.once("css-transform-highlighter-shown");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterShown;
+  ok(HighlighterFront.isShown, "The highlighter is shown");
+  let onHighlighterHidden = hs.once("css-transform-highlighter-hidden");
+  hs.onMouseOut();
+  await onHighlighterHidden;
+  ok(!HighlighterFront.isShown, "The highlighter is hidden");
+
+  info(
+    "Checking that hovering several times over the same property doesn't" +
+      " show the highlighter several times"
+  );
+  const nb = HighlighterFront.nbOfTimesShown;
+  onHighlighterShown = hs.once("css-transform-highlighter-shown");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterShown;
+  is(HighlighterFront.nbOfTimesShown, nb + 1, "The highlighter was shown once");
+  hs.onMouseMove({ target: valueSpan });
+  hs.onMouseMove({ target: valueSpan });
+  is(
+    HighlighterFront.nbOfTimesShown,
+    nb + 1,
+    "The highlighter was shown once, after several mousemove"
+  );
+
+  info("Checking that the right NodeFront reference is passed");
+  await selectNode("html", inspector);
+  ({ valueSpan } = getRuleViewProperty(view, "html", "transform"));
+  onHighlighterShown = hs.once("css-transform-highlighter-shown");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterShown;
+  is(
+    HighlighterFront.nodeFront.tagName,
+    "HTML",
+    "The right NodeFront is passed to the highlighter (1)"
+  );
+
+  await selectNode("body", inspector);
+  ({ valueSpan } = getRuleViewProperty(view, "body", "transform"));
+  onHighlighterShown = hs.once("css-transform-highlighter-shown");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterShown;
+  is(
+    HighlighterFront.nodeFront.tagName,
+    "BODY",
+    "The right NodeFront is passed to the highlighter (2)"
+  );
+
+  info(
+    "Checking that the highlighter gets hidden when hovering a " +
+      "non-transform property"
+  );
+  ({ valueSpan } = getRuleViewProperty(view, "body", "color"));
+  onHighlighterHidden = hs.once("css-transform-highlighter-hidden");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterHidden;
+  ok(!HighlighterFront.isShown, "The highlighter is hidden");
+});
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
new file mode 100644
index 0000000000..1bf76d517b
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the css transform highlighter is shown only when hovering over a
+// transform declaration that isn't overriden or disabled
+
+// Note that unlike the other browser_styleinspector_transform-highlighter-N.js
+// tests, this one only tests the rule-view as only this view features disabled
+// and overriden properties
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      background: purple;
+      width:300px;height:300px;
+      transform: rotate(16deg);
+    }
+    .test {
+      transform: skew(25deg);
+    }
+  </style>
+  <div class="test"></div>
+`;
+
+const TYPE = "CssTransformHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".test", inspector);
+
+  const hs = view.highlighters;
+
+  info("Faking a mousemove on the overriden property");
+  let { valueSpan } = getRuleViewProperty(view, "div", "transform");
+  hs.onMouseMove({ target: valueSpan });
+  ok(
+    !hs.highlighters[TYPE],
+    "No highlighter was created for the overriden property"
+  );
+
+  info("Disabling the applied property");
+  const classRuleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = classRuleEditor.rule.textProps[0].editor;
+  propEditor.enable.click();
+  await classRuleEditor.rule._applyingModifications;
+
+  info("Faking a mousemove on the disabled property");
+  ({ valueSpan } = getRuleViewProperty(view, ".test", "transform"));
+  hs.onMouseMove({ target: valueSpan });
+  ok(
+    !hs.highlighters[TYPE],
+    "No highlighter was created for the disabled property"
+  );
+
+  info("Faking a mousemove on the now unoverriden property");
+  ({ valueSpan } = getRuleViewProperty(view, "div", "transform"));
+  const onHighlighterShown = hs.once("css-transform-highlighter-shown");
+  hs.onMouseMove({ target: valueSpan });
+  await onHighlighterShown;
+});
diff --git a/devtools/client/inspector/shared/test/doc_content_style_changes.html b/devtools/client/inspector/shared/test/doc_content_style_changes.html
new file mode 100644
index 0000000000..c439f2bf4f
--- /dev/null
+++ b/devtools/client/inspector/shared/test/doc_content_style_changes.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+#test {
+  color: red;
+}
+/* Adding/removing the green-class on #test should refresh the rule-view when #test is
+   selected */
+#test.green-class {
+  color: green;
+}
+/* Adding/removing the purple-class on #parent should refresh the rule-view when #test is
+   selected */
+#parent.purple-class #test {
+  color: purple;
+}
+/* Adding/removing the blue-class on #sibling should refresh the rule-view when #test is
+   selected*/
+#sibling.blue-class + #test {
+  color: blue;
+}
+</style>
+<div id="parent">
+  <div>
+    <div id="sibling"></div>
+    <div id="test">test</div>
+  </div>
+</div>
diff --git a/devtools/client/inspector/shared/test/head.js b/devtools/client/inspector/shared/test/head.js
new file mode 100644
index 0000000000..f87fed0f03
--- /dev/null
+++ b/devtools/client/inspector/shared/test/head.js
@@ -0,0 +1,218 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+var {
+  CssRuleView,
+} = require("resource://devtools/client/inspector/rules/rules.js");
+var {
+  getInplaceEditorForSpan: inplaceEditor,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+const {
+  getColor: getThemeColor,
+} = require("resource://devtools/client/shared/theme.js");
+
+const TEST_URL_ROOT =
+  "http://example.com/browser/devtools/client/inspector/shared/test/";
+const TEST_URL_ROOT_SSL =
+  "https://example.com/browser/devtools/client/inspector/shared/test/";
+const ROOT_TEST_DIR = getRootDirectory(gTestPath);
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/shared/locales/styleinspector.properties"
+);
+
+// Clean-up all prefs that might have been changed during a test run
+// (safer here because if the test fails, then the pref is never reverted)
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
+});
+
+/**
+ * The functions found below are here to ease test development and maintenance.
+ * Most of these functions are stateless and will require some form of context
+ * (the instance of the current toolbox, or inspector panel for instance).
+ *
+ * Most of these functions are async too and return promises.
+ *
+ * All tests should follow the following pattern:
+ *
+ * add_task(async function() {
+ *   await addTab(TEST_URI);
+ *   let {toolbox, inspector} = await openInspector();
+ *   await inspector.sidebar.select(viewId);
+ *   let view = inspector.getPanel(viewId).view;
+ *   await selectNode("#test", inspector);
+ *   await someAsyncTestFunction(view);
+ * });
+ *
+ * add_task is the way to define the testcase in the test file. It accepts
+ * a single argument: a function returning a promise (usually async function).
+ *
+ * There is no need to clean tabs up at the end of a test as this is done
+ * automatically.
+ *
+ * It is advised not to store any references on the global scope. There
+ * shouldn't be a need to anyway. Thanks to async functions, test steps, even
+ * though asynchronous, can be described in a nice flat way, and
+ * if/for/while/... control flow can be used as in sync code, making it
+ * possible to write the outline of the test case all in add_task, and delegate
+ * actual processing and assertions to other functions.
+ */
+
+/* *********************************************
+ * UTILS
+ * *********************************************
+ * General test utilities.
+ * Add new tabs, open the toolbox and switch to the various panels, select
+ * nodes, get node references, ...
+ */
+
+/**
+ * Polls a given function waiting for it to return true.
+ *
+ * @param {Function} validatorFn
+ *        A validator function that returns a boolean.
+ *        This is called every few milliseconds to check if the result is true.
+ *        When it is true, the promise resolves.
+ * @param {String} name
+ *        Optional name of the test. This is used to generate
+ *        the success and failure messages.
+ * @return a promise that resolves when the function returned true or rejects
+ * if the timeout is reached
+ */
+function waitForSuccess(validatorFn, name = "untitled") {
+  return new Promise(resolve => {
+    function wait(validator) {
+      if (validator()) {
+        ok(true, "Validator function " + name + " returned true");
+        resolve();
+      } else {
+        setTimeout(() => wait(validator), 200);
+      }
+    }
+    wait(validatorFn);
+  });
+}
+
+/**
+ * Get the dataURL for the font family tooltip.
+ *
+ * @param {String} font
+ *        The font family value.
+ * @param {object} nodeFront
+ *        The NodeActor that will used to retrieve the dataURL for the
+ *        font family tooltip contents.
+ */
+var getFontFamilyDataURL = async function (font, nodeFront) {
+  const fillStyle = getThemeColor("body-color");
+
+  const { data } = await nodeFront.getFontFamilyDataURL(font, fillStyle);
+  const dataURL = await data.string();
+  return dataURL;
+};
+
+/* *********************************************
+ * RULE-VIEW
+ * *********************************************
+ * Rule-view related test utility functions
+ * This object contains functions to get rules, get properties, ...
+ */
+
+/**
+ * Simulate a color change in a given color picker tooltip, and optionally wait
+ * for a given element in the page to have its style changed as a result
+ *
+ * @param {RuleView} ruleView
+ *        The related rule view instance
+ * @param {SwatchColorPickerTooltip} colorPicker
+ * @param {Array} newRgba
+ *        The new color to be set [r, g, b, a]
+ * @param {Object} expectedChange
+ *        Optional object that needs the following props:
+ *          - {DOMNode} element The element in the page that will have its
+ *            style changed.
+ *          - {String} name The style name that will be changed
+ *          - {String} value The expected style value
+ * The style will be checked like so: getComputedStyle(element)[name] === value
+ */
+var simulateColorPickerChange = async function (
+  ruleView,
+  colorPicker,
+  newRgba,
+  expectedChange
+) {
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  info("Getting the spectrum colorpicker object");
+  const spectrum = await colorPicker.spectrum;
+  info("Setting the new color");
+  spectrum.rgb = newRgba;
+  info("Applying the change");
+  spectrum.updateUI();
+  spectrum.onChange();
+  info("Waiting for rule-view to update");
+  await onRuleViewChanged;
+
+  if (expectedChange) {
+    info("Waiting for the style to be applied on the page");
+    await waitForSuccess(() => {
+      const { element, name, value } = expectedChange;
+      return content.getComputedStyle(element)[name] === value;
+    }, "Color picker change applied on the page");
+  }
+};
+
+/* *********************************************
+ * COMPUTED-VIEW
+ * *********************************************
+ * Computed-view related utility functions.
+ * Allows to get properties, links, expand properties, ...
+ */
+
+/**
+ * Get references to the name and value span nodes corresponding to a given
+ * property name in the computed-view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return an object {nameSpan, valueSpan}
+ */
+function getComputedViewProperty(view, name) {
+  let prop;
+  for (const property of view.styleDocument.querySelectorAll(
+    ".computed-property-view"
+  )) {
+    const nameSpan = property.querySelector(".computed-property-name");
+    const valueSpan = property.querySelector(".computed-property-value");
+
+    if (nameSpan.firstChild.textContent === name) {
+      prop = { nameSpan, valueSpan };
+      break;
+    }
+  }
+  return prop;
+}
+
+/**
+ * Get the text value of the property corresponding to a given name in the
+ * computed-view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return {String} The property value
+ */
+function getComputedViewPropertyValue(view, name, propertyName) {
+  return getComputedViewProperty(view, name, propertyName).valueSpan
+    .textContent;
+}
diff --git a/devtools/client/inspector/shared/tooltips-overlay.js b/devtools/client/inspector/shared/tooltips-overlay.js
new file mode 100644
index 0000000000..7c2d67c2da
--- /dev/null
+++ b/devtools/client/inspector/shared/tooltips-overlay.js
@@ -0,0 +1,570 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * The tooltip overlays are tooltips that appear when hovering over property values and
+ * editor tooltips that appear when clicking swatch based editors.
+ */
+
+const flags = require("resource://devtools/shared/flags.js");
+const {
+  VIEW_NODE_CSS_QUERY_CONTAINER,
+  VIEW_NODE_CSS_SELECTOR_WARNINGS,
+  VIEW_NODE_FONT_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+  VIEW_NODE_INACTIVE_CSS,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_VARIABLE_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+
+loader.lazyRequireGetter(
+  this,
+  "getColor",
+  "resource://devtools/client/shared/theme.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "HTMLTooltip",
+  "resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  ["getImageDimensions", "setImageTooltip", "setBrokenImageTooltip"],
+  "resource://devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "setVariableTooltip",
+  "resource://devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "InactiveCssTooltipHelper",
+  "resource://devtools/client/shared/widgets/tooltip/inactive-css-tooltip-helper.js",
+  false
+);
+loader.lazyRequireGetter(
+  this,
+  "CssCompatibilityTooltipHelper",
+  "resource://devtools/client/shared/widgets/tooltip/css-compatibility-tooltip-helper.js",
+  false
+);
+loader.lazyRequireGetter(
+  this,
+  "CssQueryContainerTooltipHelper",
+  "resource://devtools/client/shared/widgets/tooltip/css-query-container-tooltip-helper.js",
+  false
+);
+loader.lazyRequireGetter(
+  this,
+  "CssSelectorWarningsTooltipHelper",
+  "resource://devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js",
+  false
+);
+
+const PREF_IMAGE_TOOLTIP_SIZE = "devtools.inspector.imagePreviewTooltipSize";
+
+// Types of existing tooltips
+const TOOLTIP_CSS_COMPATIBILITY = "css-compatibility";
+const TOOLTIP_CSS_QUERY_CONTAINER = "css-query-info";
+const TOOLTIP_CSS_SELECTOR_WARNINGS = "css-selector-warnings";
+const TOOLTIP_FONTFAMILY_TYPE = "font-family";
+const TOOLTIP_IMAGE_TYPE = "image";
+const TOOLTIP_INACTIVE_CSS = "inactive-css";
+const TOOLTIP_VARIABLE_TYPE = "variable";
+
+// Telemetry
+const TOOLTIP_SHOWN_SCALAR = "devtools.tooltip.shown";
+
+/**
+ * Manages all tooltips in the style-inspector.
+ *
+ * @param {CssRuleView|CssComputedView} view
+ *        Either the rule-view or computed-view panel
+ */
+function TooltipsOverlay(view) {
+  this.view = view;
+  this._instances = new Map();
+
+  this._onNewSelection = this._onNewSelection.bind(this);
+  this.view.inspector.selection.on("new-node-front", this._onNewSelection);
+
+  this.addToView();
+}
+
+TooltipsOverlay.prototype = {
+  get isEditing() {
+    for (const [, tooltip] of this._instances) {
+      if (typeof tooltip.isEditing == "function" && tooltip.isEditing()) {
+        return true;
+      }
+    }
+    return false;
+  },
+
+  /**
+   * Add the tooltips overlay to the view. This will start tracking mouse
+   * movements and display tooltips when needed
+   */
+  addToView() {
+    if (this._isStarted || this._isDestroyed) {
+      return;
+    }
+
+    this._isStarted = true;
+
+    this.inactiveCssTooltipHelper = new InactiveCssTooltipHelper();
+    this.compatibilityTooltipHelper = new CssCompatibilityTooltipHelper();
+    this.cssQueryContainerTooltipHelper = new CssQueryContainerTooltipHelper();
+    this.cssSelectorWarningsTooltipHelper =
+      new CssSelectorWarningsTooltipHelper();
+
+    // Instantiate the interactiveTooltip and preview tooltip when the
+    // rule/computed view is hovered over in order to call
+    // `tooltip.startTogglingOnHover`. This will allow the tooltip to be shown
+    // when an appropriate element is hovered over.
+    for (const type of ["interactiveTooltip", "previewTooltip"]) {
+      if (flags.testing) {
+        this.getTooltip(type);
+      } else {
+        // Lazily get the preview tooltip to avoid loading HTMLTooltip.
+        this.view.element.addEventListener(
+          "mousemove",
+          () => {
+            this.getTooltip(type);
+          },
+          { once: true }
+        );
+      }
+    }
+  },
+
+  /**
+   * Lazily fetch and initialize the different tooltips that are used in the inspector.
+   * These tooltips are attached to the toolbox document if they require a popup panel.
+   * Otherwise, it is attached to the inspector panel document if it is an inline editor.
+   *
+   * @param {String} name
+   *        Identifier name for the tooltip
+   */
+  getTooltip(name) {
+    let tooltip = this._instances.get(name);
+    if (tooltip) {
+      return tooltip;
+    }
+    const { doc } = this.view.inspector.toolbox;
+    switch (name) {
+      case "colorPicker":
+        const SwatchColorPickerTooltip = require("resource://devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js");
+        tooltip = new SwatchColorPickerTooltip(doc, this.view.inspector);
+        break;
+      case "cubicBezier":
+        const SwatchCubicBezierTooltip = require("resource://devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js");
+        tooltip = new SwatchCubicBezierTooltip(doc);
+        break;
+      case "linearEaseFunction":
+        const SwatchLinearEasingFunctionTooltip = require("devtools/client/shared/widgets/tooltip/SwatchLinearEasingFunctionTooltip");
+        tooltip = new SwatchLinearEasingFunctionTooltip(doc);
+        break;
+      case "filterEditor":
+        const SwatchFilterTooltip = require("resource://devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js");
+        tooltip = new SwatchFilterTooltip(doc);
+        break;
+      case "interactiveTooltip":
+        tooltip = new HTMLTooltip(doc, {
+          type: "doorhanger",
+          useXulWrapper: true,
+          noAutoHide: true,
+        });
+        tooltip.startTogglingOnHover(
+          this.view.element,
+          this.onInteractiveTooltipTargetHover.bind(this),
+          {
+            interactive: true,
+          }
+        );
+        break;
+      case "previewTooltip":
+        tooltip = new HTMLTooltip(doc, {
+          type: "arrow",
+          useXulWrapper: true,
+        });
+        tooltip.startTogglingOnHover(
+          this.view.element,
+          this._onPreviewTooltipTargetHover.bind(this)
+        );
+        break;
+      default:
+        throw new Error(`Unsupported tooltip '${name}'`);
+    }
+    this._instances.set(name, tooltip);
+    return tooltip;
+  },
+
+  /**
+   * Remove the tooltips overlay from the view. This will stop tracking mouse
+   * movements and displaying tooltips
+   */
+  removeFromView() {
+    if (!this._isStarted || this._isDestroyed) {
+      return;
+    }
+
+    for (const [, tooltip] of this._instances) {
+      tooltip.destroy();
+    }
+
+    this.inactiveCssTooltipHelper.destroy();
+    this.compatibilityTooltipHelper.destroy();
+
+    this._isStarted = false;
+  },
+
+  /**
+   * Given a hovered node info, find out which type of tooltip should be shown,
+   * if any
+   *
+   * @param {Object} nodeInfo
+   * @return {String} The tooltip type to be shown, or null
+   */
+  _getTooltipType({ type, value: prop }) {
+    let tooltipType = null;
+
+    // Image preview tooltip
+    if (type === VIEW_NODE_IMAGE_URL_TYPE) {
+      tooltipType = TOOLTIP_IMAGE_TYPE;
+    }
+
+    // Font preview tooltip
+    if (
+      (type === VIEW_NODE_VALUE_TYPE && prop.property === "font-family") ||
+      type === VIEW_NODE_FONT_TYPE
+    ) {
+      const value = prop.value.toLowerCase();
+      if (value !== "inherit" && value !== "unset" && value !== "initial") {
+        tooltipType = TOOLTIP_FONTFAMILY_TYPE;
+      }
+    }
+
+    // Inactive CSS tooltip
+    if (type === VIEW_NODE_INACTIVE_CSS) {
+      tooltipType = TOOLTIP_INACTIVE_CSS;
+    }
+
+    // Variable preview tooltip
+    if (type === VIEW_NODE_VARIABLE_TYPE) {
+      tooltipType = TOOLTIP_VARIABLE_TYPE;
+    }
+
+    // Container info tooltip
+    if (type === VIEW_NODE_CSS_QUERY_CONTAINER) {
+      tooltipType = TOOLTIP_CSS_QUERY_CONTAINER;
+    }
+
+    // Selector warnings info tooltip
+    if (type === VIEW_NODE_CSS_SELECTOR_WARNINGS) {
+      tooltipType = TOOLTIP_CSS_SELECTOR_WARNINGS;
+    }
+
+    return tooltipType;
+  },
+
+  _removePreviousInstances() {
+    for (const tooltip of this._instances.values()) {
+      if (tooltip.isVisible()) {
+        if (tooltip.revert) {
+          tooltip.revert();
+        }
+        tooltip.hide();
+      }
+    }
+  },
+
+  /**
+   * Executed by the tooltip when the pointer hovers over an element of the
+   * view. Used to decide whether the tooltip should be shown or not and to
+   * actually put content in it.
+   * Checks if the hovered target is a css value we support tooltips for.
+   *
+   * @param {DOMNode} target The currently hovered node
+   * @return {Promise}
+   */
+  async _onPreviewTooltipTargetHover(target) {
+    const nodeInfo = this.view.getNodeInfo(target);
+    if (!nodeInfo) {
+      // The hovered node isn't something we care about
+      return false;
+    }
+
+    const type = this._getTooltipType(nodeInfo);
+    if (!type) {
+      // There is no tooltip type defined for the hovered node
+      return false;
+    }
+
+    this._removePreviousInstances();
+
+    const inspector = this.view.inspector;
+
+    if (type === TOOLTIP_IMAGE_TYPE) {
+      try {
+        await this._setImagePreviewTooltip(nodeInfo.value.url);
+      } catch (e) {
+        await setBrokenImageTooltip(
+          this.getTooltip("previewTooltip"),
+          this.view.inspector.panelDoc
+        );
+      }
+
+      this.sendOpenScalarToTelemetry(type);
+
+      return true;
+    }
+
+    if (type === TOOLTIP_FONTFAMILY_TYPE) {
+      const font = nodeInfo.value.value;
+      const nodeFront = inspector.selection.nodeFront;
+      await this._setFontPreviewTooltip(font, nodeFront);
+
+      this.sendOpenScalarToTelemetry(type);
+
+      if (nodeInfo.type === VIEW_NODE_FONT_TYPE) {
+        // If the hovered element is on the font family span, anchor
+        // the tooltip on the whole property value instead.
+        return target.parentNode;
+      }
+      return true;
+    }
+
+    if (
+      type === TOOLTIP_VARIABLE_TYPE &&
+      nodeInfo.value.value.startsWith("--")
+    ) {
+      const variable = nodeInfo.value.variable;
+      await this._setVariablePreviewTooltip(variable);
+
+      this.sendOpenScalarToTelemetry(type);
+
+      return true;
+    }
+
+    return false;
+  },
+
+  /**
+   * Executed by the tooltip when the pointer hovers over an element of the
+   * view. Used to decide whether the tooltip should be shown or not and to
+   * actually put content in it.
+   * Checks if the hovered target is a css value we support tooltips for.
+   *
+   * @param  {DOMNode} target
+   *         The currently hovered node
+   * @return {Boolean}
+   *         true if shown, false otherwise.
+   */
+  async onInteractiveTooltipTargetHover(target) {
+    if (target.classList.contains("ruleview-compatibility-warning")) {
+      const nodeCompatibilityInfo = await this.view.getNodeCompatibilityInfo(
+        target
+      );
+
+      await this.compatibilityTooltipHelper.setContent(
+        nodeCompatibilityInfo,
+        this.getTooltip("interactiveTooltip")
+      );
+
+      this.sendOpenScalarToTelemetry(TOOLTIP_CSS_COMPATIBILITY);
+      return true;
+    }
+
+    const nodeInfo = this.view.getNodeInfo(target);
+    if (!nodeInfo) {
+      // The hovered node isn't something we care about.
+      return false;
+    }
+
+    const type = this._getTooltipType(nodeInfo);
+    if (!type) {
+      // There is no tooltip type defined for the hovered node.
+      return false;
+    }
+
+    this._removePreviousInstances();
+
+    if (type === TOOLTIP_INACTIVE_CSS) {
+      // Ensure this is the correct node and not a parent.
+      if (!target.classList.contains("ruleview-unused-warning")) {
+        return false;
+      }
+
+      await this.inactiveCssTooltipHelper.setContent(
+        nodeInfo.value,
+        this.getTooltip("interactiveTooltip")
+      );
+
+      this.sendOpenScalarToTelemetry(type);
+
+      return true;
+    }
+
+    if (type === TOOLTIP_CSS_QUERY_CONTAINER) {
+      // Ensure this is the correct node and not a parent.
+      if (!target.closest(".container-query .container-query-declaration")) {
+        return false;
+      }
+
+      await this.cssQueryContainerTooltipHelper.setContent(
+        nodeInfo.value,
+        this.getTooltip("interactiveTooltip")
+      );
+
+      this.sendOpenScalarToTelemetry(type);
+
+      return true;
+    }
+
+    if (type === TOOLTIP_CSS_SELECTOR_WARNINGS) {
+      await this.cssSelectorWarningsTooltipHelper.setContent(
+        nodeInfo.value,
+        this.getTooltip("interactiveTooltip")
+      );
+
+      this.sendOpenScalarToTelemetry(type);
+
+      return true;
+    }
+
+    return false;
+  },
+
+  /**
+   * Send a telemetry Scalar showing that a tooltip of `type` has been opened.
+   *
+   * @param {String} type
+   *        The node type from `devtools/client/inspector/shared/node-types` or the Tooltip type.
+   */
+  sendOpenScalarToTelemetry(type) {
+    this.view.inspector.telemetry.keyedScalarAdd(TOOLTIP_SHOWN_SCALAR, type, 1);
+  },
+
+  /**
+   * Set the content of the preview tooltip to display an image preview. The image URL can
+   * be relative, a call will be made to the debuggee to retrieve the image content as an
+   * imageData URI.
+   *
+   * @param {String} imageUrl
+   *        The image url value (may be relative or absolute).
+   * @return {Promise} A promise that resolves when the preview tooltip content is ready
+   */
+  async _setImagePreviewTooltip(imageUrl) {
+    const doc = this.view.inspector.panelDoc;
+    const maxDim = Services.prefs.getIntPref(PREF_IMAGE_TOOLTIP_SIZE);
+
+    let naturalWidth, naturalHeight;
+    if (imageUrl.startsWith("data:")) {
+      // If the imageUrl already is a data-url, save ourselves a round-trip
+      const size = await getImageDimensions(doc, imageUrl);
+      naturalWidth = size.naturalWidth;
+      naturalHeight = size.naturalHeight;
+    } else {
+      const inspectorFront = this.view.inspector.inspectorFront;
+      const { data, size } = await inspectorFront.getImageDataFromURL(
+        imageUrl,
+        maxDim
+      );
+      imageUrl = await data.string();
+      naturalWidth = size.naturalWidth;
+      naturalHeight = size.naturalHeight;
+    }
+
+    await setImageTooltip(this.getTooltip("previewTooltip"), doc, imageUrl, {
+      maxDim,
+      naturalWidth,
+      naturalHeight,
+    });
+  },
+
+  /**
+   * Set the content of the preview tooltip to display a font family preview.
+   *
+   * @param {String} font
+   *        The font family value.
+   * @param {object} nodeFront
+   *        The NodeActor that will used to retrieve the dataURL for the font
+   *        family tooltip contents.
+   * @return {Promise} A promise that resolves when the preview tooltip content is ready
+   */
+  async _setFontPreviewTooltip(font, nodeFront) {
+    if (
+      !font ||
+      !nodeFront ||
+      typeof nodeFront.getFontFamilyDataURL !== "function"
+    ) {
+      throw new Error("Unable to create font preview tooltip content.");
+    }
+
+    font = font.replace(/"/g, "'");
+    font = font.replace("!important", "");
+    font = font.trim();
+
+    const fillStyle = getColor("body-color");
+    const { data, size: maxDim } = await nodeFront.getFontFamilyDataURL(
+      font,
+      fillStyle
+    );
+
+    const imageUrl = await data.string();
+    const doc = this.view.inspector.panelDoc;
+    const { naturalWidth, naturalHeight } = await getImageDimensions(
+      doc,
+      imageUrl
+    );
+
+    await setImageTooltip(this.getTooltip("previewTooltip"), doc, imageUrl, {
+      hideDimensionLabel: true,
+      hideCheckeredBackground: true,
+      maxDim,
+      naturalWidth,
+      naturalHeight,
+    });
+  },
+
+  /**
+   * Set the content of the preview tooltip to display a variable preview.
+   *
+   * @param {String} text
+   *        The text to display for the variable tooltip
+   * @return {Promise} A promise that resolves when the preview tooltip content is ready
+   */
+  async _setVariablePreviewTooltip(text) {
+    const doc = this.view.inspector.panelDoc;
+    await setVariableTooltip(this.getTooltip("previewTooltip"), doc, text);
+  },
+
+  _onNewSelection() {
+    for (const [, tooltip] of this._instances) {
+      tooltip.hide();
+    }
+  },
+
+  /**
+   * Destroy this overlay instance, removing it from the view
+   */
+  destroy() {
+    this.removeFromView();
+
+    this.view.inspector.selection.off("new-node-front", this._onNewSelection);
+    this.view = null;
+
+    this._isDestroyed = true;
+  },
+};
+
+module.exports = TooltipsOverlay;
diff --git a/devtools/client/inspector/shared/utils.js b/devtools/client/inspector/shared/utils.js
new file mode 100644
index 0000000000..542f9897b1
--- /dev/null
+++ b/devtools/client/inspector/shared/utils.js
@@ -0,0 +1,239 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+loader.lazyRequireGetter(
+  this,
+  "KeyCodes",
+  "resource://devtools/client/shared/keycodes.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getCSSLexer",
+  "resource://devtools/shared/css/lexer.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "parseDeclarations",
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+
+/**
+ * Called when a character is typed in a value editor.  This decides
+ * whether to advance or not, first by checking to see if ";" was
+ * typed, and then by lexing the input and seeing whether the ";"
+ * would be a terminator at this point.
+ *
+ * @param {number} keyCode
+ *        Key code to be checked.
+ * @param {string} aValue
+ *        Current text editor value.
+ * @param {number} insertionPoint
+ *        The index of the insertion point.
+ * @return {Boolean} True if the focus should advance; false if
+ *        the character should be inserted.
+ */
+function advanceValidate(keyCode, value, insertionPoint) {
+  // Only ";" has special handling here.
+  if (keyCode !== KeyCodes.DOM_VK_SEMICOLON) {
+    return false;
+  }
+
+  // Insert the character provisionally and see what happens.  If we
+  // end up with a ";" symbol token, then the semicolon terminates the
+  // value.  Otherwise it's been inserted in some spot where it has a
+  // valid meaning, like a comment or string.
+  value = value.slice(0, insertionPoint) + ";" + value.slice(insertionPoint);
+  const lexer = getCSSLexer(value);
+  while (true) {
+    const token = lexer.nextToken();
+    if (token.endOffset > insertionPoint) {
+      if (token.tokenType === "symbol" && token.text === ";") {
+        // The ";" is a terminator.
+        return true;
+      }
+      // The ";" is not a terminator in this context.
+      break;
+    }
+  }
+  return false;
+}
+
+/**
+ * Append a text node to an element.
+ *
+ * @param {Element} parent
+ *        The parent node.
+ * @param {string} text
+ *        The text content for the text node.
+ */
+function appendText(parent, text) {
+  parent.appendChild(parent.ownerDocument.createTextNode(text));
+}
+
+/**
+ * Event handler that causes a blur on the target if the input has
+ * multiple CSS properties as the value.
+ */
+function blurOnMultipleProperties(cssProperties) {
+  return e => {
+    setTimeout(() => {
+      const props = parseDeclarations(cssProperties.isKnown, e.target.value);
+      if (props.length > 1) {
+        e.target.blur();
+      }
+    }, 0);
+  };
+}
+
+/**
+ * Create a child element with a set of attributes.
+ *
+ * @param {Element} parent
+ *        The parent node.
+ * @param {string} tagName
+ *        The tag name.
+ * @param {object} attributes
+ *        A set of attributes to set on the node.
+ */
+function createChild(parent, tagName, attributes = {}) {
+  const elt = parent.ownerDocument.createElementNS(HTML_NS, tagName);
+  for (const attr in attributes) {
+    if (attributes.hasOwnProperty(attr)) {
+      if (attr === "textContent") {
+        elt.textContent = attributes[attr];
+      } else if (attr === "child") {
+        elt.appendChild(attributes[attr]);
+      } else {
+        elt.setAttribute(attr, attributes[attr]);
+      }
+    }
+  }
+  parent.appendChild(elt);
+  return elt;
+}
+
+/**
+ * Retrieve the content of a longString (via a promise resolving a LongStringActor).
+ *
+ * @param  {Promise} longStringActorPromise
+ *         promise expected to resolve a LongStringActor instance
+ * @return {Promise} promise resolving with the retrieved string as argument
+ */
+async function getLongString(longStringActorPromise) {
+  try {
+    const longStringActor = await longStringActorPromise;
+    const string = await longStringActor.string();
+    longStringActor.release().catch(console.error);
+    return string;
+  } catch (e) {
+    console.error(e);
+    return undefined;
+  }
+}
+
+/**
+ * Returns a selector of the Element Rep from the grip. This is based on the
+ * getElements() function in our devtools-reps component for a ElementNode.
+ *
+ * @param  {Object} grip
+ *         Grip-like object that can be used with Reps.
+ * @return {String} selector of the element node.
+ */
+function getSelectorFromGrip(grip) {
+  const {
+    attributes,
+    nodeName,
+    isAfterPseudoElement,
+    isBeforePseudoElement,
+    isMarkerPseudoElement,
+  } = grip.preview;
+
+  if (isAfterPseudoElement) {
+    return "::after";
+  } else if (isBeforePseudoElement) {
+    return "::before";
+  } else if (isMarkerPseudoElement) {
+    return "::marker";
+  }
+
+  let selector = nodeName;
+
+  if (attributes.id) {
+    selector += `#${attributes.id}`;
+  }
+
+  if (attributes.class) {
+    selector += attributes.class
+      .trim()
+      .split(/\s+/)
+      .map(cls => `.${cls}`)
+      .join("");
+  }
+
+  return selector;
+}
+
+/**
+ * Log the provided error to the console and return a rejected Promise for
+ * this error.
+ *
+ * @param {Error} error
+ *         The error to log
+ * @return {Promise} A rejected promise
+ */
+function promiseWarn(error) {
+  console.error(error);
+  return Promise.reject(error);
+}
+
+/**
+ * While waiting for a reps fix in https://github.com/firefox-devtools/reps/issues/92,
+ * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
+ *
+ * @params  {NodeFront} nodeFront
+ *          The NodeFront for which we want to create a grip-like object.
+ * @returns {Object} a grip-like object that can be used with Reps.
+ */
+function translateNodeFrontToGrip(nodeFront) {
+  const { attributes } = nodeFront;
+
+  // The main difference between NodeFront and grips is that attributes are treated as
+  // a map in grips and as an array in NodeFronts.
+  const attributesMap = {};
+  for (const { name, value } of attributes) {
+    attributesMap[name] = value;
+  }
+
+  return {
+    actor: nodeFront.actorID,
+    preview: {
+      attributes: attributesMap,
+      attributesLength: attributes.length,
+      isAfterPseudoElement: nodeFront.isAfterPseudoElement,
+      isBeforePseudoElement: nodeFront.isBeforePseudoElement,
+      isMarkerPseudoElement: nodeFront.isMarkerPseudoElement,
+      // All the grid containers are assumed to be in the DOM tree.
+      isConnected: true,
+      // nodeName is already lowerCased in Node grips
+      nodeName: nodeFront.nodeName.toLowerCase(),
+      nodeType: nodeFront.nodeType,
+    },
+  };
+}
+
+exports.advanceValidate = advanceValidate;
+exports.appendText = appendText;
+exports.blurOnMultipleProperties = blurOnMultipleProperties;
+exports.createChild = createChild;
+exports.getLongString = getLongString;
+exports.getSelectorFromGrip = getSelectorFromGrip;
+exports.promiseWarn = promiseWarn;
+exports.translateNodeFrontToGrip = translateNodeFrontToGrip;
diff --git a/devtools/client/inspector/shared/walker-event-listener.js b/devtools/client/inspector/shared/walker-event-listener.js
new file mode 100644
index 0000000000..322c3be6df
--- /dev/null
+++ b/devtools/client/inspector/shared/walker-event-listener.js
@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * WalkerEventListener provides a mechanism to listen the walker event of the inspector
+ * while reflecting the updating of TargetCommand.
+ */
+class WalkerEventListener {
+  /**
+   * @param {Inspector} - inspector
+   * @param {Object} - listenerMap
+   *        The structure of listenerMap should be as follows.
+   *        {
+   *          walkerEventName1: eventHandler1,
+   *          walkerEventName2: eventHandler2,
+   *          ...
+   *        }
+   */
+  constructor(inspector, listenerMap) {
+    this._inspector = inspector;
+    this._listenerMap = listenerMap;
+    this._onTargetAvailable = this._onTargetAvailable.bind(this);
+    this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+
+    this._init();
+  }
+
+  /**
+   * Clean up function.
+   */
+  destroy() {
+    this._inspector.commands.targetCommand.unwatchTargets({
+      types: [this._inspector.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
+
+    const targets = this._inspector.commands.targetCommand.getAllTargets([
+      this._inspector.commands.targetCommand.TYPES.FRAME,
+    ]);
+    for (const targetFront of targets) {
+      this._onTargetDestroyed({
+        targetFront,
+      });
+    }
+
+    this._inspector = null;
+    this._listenerMap = null;
+  }
+
+  _init() {
+    this._inspector.commands.targetCommand.watchTargets({
+      types: [this._inspector.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
+  }
+
+  async _onTargetAvailable({ targetFront }) {
+    const inspectorFront = await targetFront.getFront("inspector");
+    // In case of multiple fast navigations, the front may already be destroyed,
+    // in such scenario bail out and ignore this short lived target.
+    if (inspectorFront.isDestroyed() || !this._listenerMap) {
+      return;
+    }
+    const { walker } = inspectorFront;
+    for (const [name, listener] of Object.entries(this._listenerMap)) {
+      walker.on(name, listener);
+    }
+  }
+
+  _onTargetDestroyed({ targetFront }) {
+    const inspectorFront = targetFront.getCachedFront("inspector");
+    if (inspectorFront) {
+      const { walker } = inspectorFront;
+      for (const [name, listener] of Object.entries(this._listenerMap)) {
+        walker.off(name, listener);
+      }
+    }
+  }
+}
+
+module.exports = WalkerEventListener;
diff --git a/devtools/client/inspector/store.js b/devtools/client/inspector/store.js
new file mode 100644
index 0000000000..d9d7c0f995
--- /dev/null
+++ b/devtools/client/inspector/store.js
@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const createStore = require("resource://devtools/client/shared/redux/create-store.js");
+const {
+  combineReducers,
+} = require("resource://devtools/client/shared/vendor/redux.js");
+// Reducers which need to be available immediately when the Inspector loads.
+const reducers = {
+  // Provide a dummy default reducer.
+  // Redux throws an error when calling combineReducers() with an empty object.
+  default: (state = {}) => state,
+};
+
+function createReducer(laterReducers = {}) {
+  return combineReducers({
+    ...reducers,
+    ...laterReducers,
+  });
+}
+
+module.exports = inspector => {
+  const store = createStore(createReducer(), {
+    // Enable log middleware in tests
+    shouldLog: true,
+    // Pass the client inspector instance so thunks (dispatched functions)
+    // can access it from their arguments
+    thunkOptions: { inspector },
+  });
+
+  // Map of registered reducers loaded on-demand.
+  store.laterReducers = {};
+
+  /**
+   * Augment the current Redux store with a slice reducer.
+   * Call this method to add reducers on-demand after the initial store creation.
+   *
+   * @param {String} key
+   *        Slice name.
+   * @param {Function} reducer
+   *        Slice reducer function.
+   */
+  store.injectReducer = (key, reducer) => {
+    if (store.laterReducers[key]) {
+      console.log(`Already loaded reducer: ${key}`);
+      return;
+    }
+    store.laterReducers[key] = reducer;
+    store.replaceReducer(createReducer(store.laterReducers));
+  };
+
+  return store;
+};
diff --git a/devtools/client/inspector/test/browser.toml b/devtools/client/inspector/test/browser.toml
new file mode 100644
index 0000000000..eaa54c31f8
--- /dev/null
+++ b/devtools/client/inspector/test/browser.toml
@@ -0,0 +1,445 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "doc_inspector_add_node.html",
+  "doc_inspector_breadcrumbs.html",
+  "doc_inspector_breadcrumbs_visibility.html",
+  "doc_inspector_csp.html",
+  "doc_inspector_csp.html^headers^",
+  "doc_inspector_delete-selected-node-01.html",
+  "doc_inspector_delete-selected-node-02.html",
+  "doc_inspector_embed.html",
+  "doc_inspector_eyedropper_disabled.xhtml",
+  "doc_inspector_fission_frame_navigation.html",
+  "doc_inspector_highlight_after_transition.html",
+  "doc_inspector_highlighter-comments.html",
+  "doc_inspector_highlighter-geometry_01.html",
+  "doc_inspector_highlighter-geometry_02.html",
+  "doc_inspector_highlighter_cssshapes.html",
+  "doc_inspector_highlighter_cssshapes-percent.html",
+  "doc_inspector_highlighter_cssshapes_iframe.html",
+  "doc_inspector_highlighter_csstransform.html",
+  "doc_inspector_highlighter_dom.html",
+  "doc_inspector_highlighter_inline.html",
+  "doc_inspector_highlighter.html",
+  "doc_inspector_highlighter_rect.html",
+  "doc_inspector_highlighter_rect_iframe.html",
+  "doc_inspector_highlighter_scroll.html",
+  "doc_inspector_highlighter_custom_element.xhtml",
+  "doc_inspector_infobar_01.html",
+  "doc_inspector_infobar_02.html",
+  "doc_inspector_infobar_03.html",
+  "doc_inspector_infobar_04.html",
+  "doc_inspector_infobar_textnode.html",
+  "doc_inspector_long-divs.html",
+  "doc_inspector_menu.html",
+  "doc_inspector_outerhtml.html",
+  "doc_inspector_pane-toggle-layout-invariant.html",
+  "doc_inspector_reload_xul.xhtml",
+  "doc_inspector_remove-iframe-during-load.html",
+  "doc_inspector_search.html",
+  "doc_inspector_search-iframes.html",
+  "doc_inspector_search-reserved.html",
+  "doc_inspector_search-suggestions.html",
+  "doc_inspector_search-svg.html",
+  "doc_inspector_select-last-selected-01.html",
+  "doc_inspector_select-last-selected-02.html",
+  "doc_inspector_svg.svg",
+  "head.js",
+  "img_browser_inspector_highlighter-eyedropper-image.png",
+  "shared-head.js",
+  "sjs_slow-loading-image.sjs",
+  "style_inspector_eyedropper_ruleview.css",
+  "style_inspector_csp.css",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/debugger/test/mochitest/shared-head.js",
+  "!/devtools/client/shared/test/highlighter-test-actor.js",
+]
+
+["browser_inspector_addNode_01.js"]
+
+["browser_inspector_addNode_02.js"]
+
+["browser_inspector_addNode_03.js"]
+
+["browser_inspector_addSidebarTab.js"]
+
+["browser_inspector_breadcrumbs.js"]
+
+["browser_inspector_breadcrumbs_highlight_hover.js"]
+
+["browser_inspector_breadcrumbs_keybinding.js"]
+
+["browser_inspector_breadcrumbs_keyboard_trap.js"]
+skip-if = ["os == 'mac'"] # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
+
+["browser_inspector_breadcrumbs_mutations.js"]
+
+["browser_inspector_breadcrumbs_namespaced.js"]
+
+["browser_inspector_breadcrumbs_shadowdom.js"]
+
+["browser_inspector_breadcrumbs_visibility.js"]
+
+["browser_inspector_delete-selected-node-01.js"]
+
+["browser_inspector_delete-selected-node-02.js"]
+
+["browser_inspector_delete-selected-node-03.js"]
+
+["browser_inspector_delete_node_in_frame.js"]
+
+["browser_inspector_destroy-after-navigation.js"]
+
+["browser_inspector_destroy-before-ready.js"]
+
+["browser_inspector_expand-collapse.js"]
+
+["browser_inspector_eyedropper_ruleview.js"]
+
+["browser_inspector_fission_frame.js"]
+
+["browser_inspector_fission_frame_navigation.js"]
+
+["browser_inspector_fission_switch_target.js"]
+
+["browser_inspector_highlighter-01.js"]
+
+["browser_inspector_highlighter-02.js"]
+
+["browser_inspector_highlighter-03.js"]
+
+["browser_inspector_highlighter-04.js"]
+
+["browser_inspector_highlighter-05.js"]
+
+["browser_inspector_highlighter-06.js"]
+
+["browser_inspector_highlighter-07.js"]
+
+["browser_inspector_highlighter-08.js"]
+
+["browser_inspector_highlighter-autohide-config_01.js"]
+
+["browser_inspector_highlighter-autohide-config_02.js"]
+
+["browser_inspector_highlighter-autohide-config_03.js"]
+
+["browser_inspector_highlighter-autohide.js"]
+
+["browser_inspector_highlighter-by-type.js"]
+
+["browser_inspector_highlighter-cancel.js"]
+
+["browser_inspector_highlighter-comments.js"]
+
+["browser_inspector_highlighter-cssgrid_01.js"]
+
+["browser_inspector_highlighter-cssgrid_02.js"]
+
+["browser_inspector_highlighter-cssshape_01.js"]
+
+["browser_inspector_highlighter-cssshape_02.js"]
+
+["browser_inspector_highlighter-cssshape_03.js"]
+
+["browser_inspector_highlighter-cssshape_04.js"]
+skip-if = [
+  "os == 'win' && asan", # Bug 1453214
+  "os == 'win' && debug", # Bug 1453214
+  "os == 'linux'", # Bug 1453214
+  "os == 'mac' && debug", # high frequency intermittent, bug 1453214
+]
+
+["browser_inspector_highlighter-cssshape_05.js"]
+fail-if = ["a11y_checks"] # bug 1687723 ruleview-shapeswatch is not accessible
+
+["browser_inspector_highlighter-cssshape_06-scale.js"]
+fail-if = ["a11y_checks"] # bug 1687723 ruleview-shapeswatch is not accessible
+
+["browser_inspector_highlighter-cssshape_06-translate.js"]
+fail-if = ["a11y_checks"] # bug 1687723 ruleview-shapeswatch is not accessible
+
+["browser_inspector_highlighter-cssshape_07.js"]
+fail-if = ["a11y_checks"] # bug 1687723 ruleview-shapeswatch is not accessible
+
+["browser_inspector_highlighter-cssshape_iframe_01.js"]
+skip-if = ["verify && debug"]
+fail-if = ["a11y_checks"] # bug 1687723 ruleview-shapeswatch is not accessible
+
+["browser_inspector_highlighter-cssshape_offset-path.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_inspector_highlighter-cssshape_percent.js"]
+
+["browser_inspector_highlighter-csstransform_01.js"]
+
+["browser_inspector_highlighter-csstransform_02.js"]
+
+["browser_inspector_highlighter-custom-element.js"]
+
+["browser_inspector_highlighter-embed.js"]
+
+["browser_inspector_highlighter-eyedropper-clipboard.js"]
+
+["browser_inspector_highlighter-eyedropper-csp.js"]
+
+["browser_inspector_highlighter-eyedropper-events.js"]
+skip-if = ["os == 'win'"] # bug 1413442
+
+["browser_inspector_highlighter-eyedropper-frames.js"]
+
+["browser_inspector_highlighter-eyedropper-image.js"]
+
+["browser_inspector_highlighter-eyedropper-label.js"]
+
+["browser_inspector_highlighter-eyedropper-show-hide.js"]
+
+["browser_inspector_highlighter-eyedropper-xul.js"]
+
+["browser_inspector_highlighter-eyedropper-zoom.js"]
+
+["browser_inspector_highlighter-geometry_01.js"]
+
+["browser_inspector_highlighter-geometry_02.js"]
+
+["browser_inspector_highlighter-geometry_03.js"]
+
+["browser_inspector_highlighter-geometry_04.js"]
+
+["browser_inspector_highlighter-geometry_05.js"]
+
+["browser_inspector_highlighter-geometry_06.js"]
+
+["browser_inspector_highlighter-geometry_07.js"]
+
+["browser_inspector_highlighter-geometry_hide_on_interaction.js"]
+
+["browser_inspector_highlighter-geometry_iframe.js"]
+
+["browser_inspector_highlighter-hover_01.js"]
+
+["browser_inspector_highlighter-hover_02.js"]
+
+["browser_inspector_highlighter-hover_03.js"]
+
+["browser_inspector_highlighter-iframes_01.js"]
+
+["browser_inspector_highlighter-iframes_02.js"]
+
+["browser_inspector_highlighter-inline.js"]
+
+["browser_inspector_highlighter-keybinding_01.js"]
+
+["browser_inspector_highlighter-keybinding_02.js"]
+
+["browser_inspector_highlighter-keybinding_03.js"]
+
+["browser_inspector_highlighter-keybinding_04.js"]
+
+["browser_inspector_highlighter-keybinding_separate-window.js"]
+
+["browser_inspector_highlighter-measure-keybinding.js"]
+
+["browser_inspector_highlighter-measure_01.js"]
+
+["browser_inspector_highlighter-measure_02.js"]
+
+["browser_inspector_highlighter-measure_03.js"]
+
+["browser_inspector_highlighter-measure_04.js"]
+
+["browser_inspector_highlighter-options.js"]
+
+["browser_inspector_highlighter-preview.js"]
+
+["browser_inspector_highlighter-reduced-motion-message.js"]
+
+["browser_inspector_highlighter-reduced-motion.js"]
+
+["browser_inspector_highlighter-reload.js"]
+
+["browser_inspector_highlighter-rulers_01.js"]
+
+["browser_inspector_highlighter-rulers_02.js"]
+
+["browser_inspector_highlighter-rulers_03.js"]
+skip-if = ["os == 'win' && !debug"] # Bug 1449754
+
+["browser_inspector_highlighter-selector_01.js"]
+
+["browser_inspector_highlighter-selector_02.js"]
+
+["browser_inspector_highlighter-zoom.js"]
+
+["browser_inspector_iframe-navigation.js"]
+
+["browser_inspector_iframe-picker-bfcache-navigation.js"]
+
+["browser_inspector_iframe-picker.js"]
+
+["browser_inspector_infobar_01.js"]
+
+["browser_inspector_infobar_02.js"]
+
+["browser_inspector_infobar_03.js"]
+
+["browser_inspector_infobar_04.js"]
+
+["browser_inspector_infobar_05.js"]
+
+["browser_inspector_infobar_textnode.js"]
+
+["browser_inspector_initialization.js"]
+skip-if = ["debug"] # Bug 1250058 - Docshell leak on debug
+
+["browser_inspector_inspect-object-element.js"]
+
+["browser_inspector_inspect_loading_document.js"]
+
+["browser_inspector_inspect_mutated_node.js"]
+
+["browser_inspector_inspect_node_contextmenu.js"]
+
+["browser_inspector_inspect_node_contextmenu_nested.js"]
+
+["browser_inspector_inspect_parent_process_page.js"]
+
+["browser_inspector_invalidate.js"]
+
+["browser_inspector_keyboard-shortcuts-copy-outerhtml.js"]
+
+["browser_inspector_keyboard-shortcuts.js"]
+
+["browser_inspector_menu-01-sensitivity.js"]
+
+["browser_inspector_menu-03-paste-items-svg.js"]
+
+["browser_inspector_menu-03-paste-items.js"]
+
+["browser_inspector_menu-04-use-in-console.js"]
+
+["browser_inspector_menu-05-attribute-items.js"]
+
+["browser_inspector_menu-06-other.js"]
+
+["browser_inspector_navigate_to_errors.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_inspector_navigation.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_inspector_open_on_neterror.js"]
+
+["browser_inspector_pane-toggle-01.js"]
+
+["browser_inspector_pane-toggle-02.js"]
+
+["browser_inspector_pane-toggle-03.js"]
+
+["browser_inspector_pane-toggle-04.js"]
+
+["browser_inspector_pane-toggle-05.js"]
+
+["browser_inspector_pane-toggle-layout-invariant.js"]
+
+["browser_inspector_pane_state_restore.js"]
+
+["browser_inspector_picker-reset-reference.js"]
+
+["browser_inspector_picker-shift-key.js"]
+
+["browser_inspector_picker-stop-on-eyedropper.js"]
+
+["browser_inspector_picker-stop-on-tool-change.js"]
+
+["browser_inspector_picker-useragent-widget.js"]
+
+["browser_inspector_portrait_mode.js"]
+
+["browser_inspector_pseudoclass-lock.js"]
+
+["browser_inspector_pseudoclass-menu.js"]
+
+["browser_inspector_reload-01.js"]
+
+["browser_inspector_reload-02.js"]
+
+["browser_inspector_reload_iframe.js"]
+
+["browser_inspector_reload_invalid_iframe.js"]
+
+["browser_inspector_reload_missing-iframe-node.js"]
+
+["browser_inspector_reload_nested_iframe.js"]
+
+["browser_inspector_reload_shadow_dom.js"]
+
+["browser_inspector_reload_xul.js"]
+
+["browser_inspector_remove-iframe-during-load.js"]
+
+["browser_inspector_search-01.js"]
+
+["browser_inspector_search-02.js"]
+
+["browser_inspector_search-03.js"]
+
+["browser_inspector_search-04.js"]
+
+["browser_inspector_search-05.js"]
+
+["browser_inspector_search-06.js"]
+
+["browser_inspector_search-07.js"]
+
+["browser_inspector_search-08.js"]
+
+["browser_inspector_search-09.js"]
+
+["browser_inspector_search-10.js"]
+
+["browser_inspector_search-clear.js"]
+
+["browser_inspector_search-filter_context-menu.js"]
+
+["browser_inspector_search-label.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_inspector_search-navigation.js"]
+
+["browser_inspector_search-reserved.js"]
+
+["browser_inspector_search-selection.js"]
+
+["browser_inspector_search-sidebar.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_inspector_search-suggests-ids-and-classes.js"]
+
+["browser_inspector_search_keyboard_shortcut_conflict.js"]
+
+["browser_inspector_search_keyboard_trap.js"]
+
+["browser_inspector_select-last-selected.js"]
+
+["browser_inspector_sidebarstate.js"]
+
+["browser_inspector_startup.js"]
+
+["browser_inspector_switch-to-inspector-on-pick.js"]
+skip-if = ["apple_catalina && !debug"] # Bug 1713158
+
+["browser_inspector_textbox-menu.js"]
+
+["browser_inspector_textbox-menu_reopen_toolbox.js"]
+
+["browser_inspector_use-in-console-conflict.js"]
diff --git a/devtools/client/inspector/test/browser_inspector_addNode_01.js b/devtools/client/inspector/test/browser_inspector_addNode_01.js
new file mode 100644
index 0000000000..ef89950b9b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_addNode_01.js
@@ -0,0 +1,22 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the add node button and context menu items are present in the UI.
+
+const TEST_URL = "data:text/html;charset=utf-8,<h1>Add node</h1>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { panelDoc } = inspector;
+
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  const menuItem = allMenuItems.find(item => item.id === "node-menu-add");
+  ok(menuItem, "The item is in the menu");
+
+  const toolbarButton = panelDoc.querySelector(
+    "#inspector-toolbar #inspector-element-add-button"
+  );
+  ok(toolbarButton, "The add button is in the toolbar");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_addNode_02.js b/devtools/client/inspector/test/browser_inspector_addNode_02.js
new file mode 100644
index 0000000000..fcd9b00f18
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_addNode_02.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the add node button and context menu items have the right state
+// depending on the current selection.
+
+const TEST_URL = URL_ROOT + "doc_inspector_add_node.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select the DOCTYPE element");
+  let { nodes } = await inspector.walker.children(inspector.walker.rootNode);
+  await selectNode(nodes[0], inspector);
+  assertState(false, inspector, "The button and item are disabled on DOCTYPE");
+
+  info("Select the ::before pseudo-element");
+  const body = await getNodeFront("body", inspector);
+  ({ nodes } = await inspector.walker.children(body));
+  await selectNode(nodes[0], inspector);
+  assertState(
+    false,
+    inspector,
+    "The button and item are disabled on a pseudo-element"
+  );
+
+  info("Select the svg element");
+  await selectNode("svg", inspector);
+  assertState(
+    false,
+    inspector,
+    "The button and item are disabled on a SVG element"
+  );
+
+  info("Select the div#foo element");
+  await selectNode("#foo", inspector);
+  assertState(
+    true,
+    inspector,
+    "The button and item are enabled on a DIV element"
+  );
+
+  info("Select the documentElement element (html)");
+  await selectNode("html", inspector);
+  assertState(
+    false,
+    inspector,
+    "The button and item are disabled on the documentElement"
+  );
+
+  info("Select the iframe element");
+  await selectNode("iframe", inspector);
+  assertState(
+    false,
+    inspector,
+    "The button and item are disabled on an IFRAME element"
+  );
+});
+
+function assertState(isEnabled, inspector, desc) {
+  const doc = inspector.panelDoc;
+  const btn = doc.querySelector("#inspector-element-add-button");
+
+  // Force an update of the context menu to make sure menu items are updated
+  // according to the current selection. This normally happens when the menu is
+  // opened, but for the sake of this test's simplicity, we directly call the
+  // private update function instead.
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  const menuItem = allMenuItems.find(item => item.id === "node-menu-add");
+  ok(menuItem, "The item is in the menu");
+  is(!menuItem.disabled, isEnabled, desc);
+
+  is(!btn.hasAttribute("disabled"), isEnabled, desc);
+}
diff --git a/devtools/client/inspector/test/browser_inspector_addNode_03.js b/devtools/client/inspector/test/browser_inspector_addNode_03.js
new file mode 100644
index 0000000000..abc50d2969
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_addNode_03.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that adding nodes does work as expected: the parent node remains selected and the
+// new node is created inside the parent.
+
+const TEST_URL = URL_ROOT + "doc_inspector_add_node.html";
+const PARENT_TREE_LEVEL = 3;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Adding a node in an element that has no children and is collapsed");
+  let parentNode = await getNodeFront("#foo", inspector);
+  await selectNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+
+  info(
+    "Adding a node in an element with children but that has not been expanded yet"
+  );
+  parentNode = await getNodeFront("#bar", inspector);
+  await selectNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+
+  info(
+    "Adding a node in an element with children that has been expanded then collapsed"
+  );
+  // Select again #bar and collapse it.
+  parentNode = await getNodeFront("#bar", inspector);
+  await selectNode(parentNode, inspector);
+  collapseNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+
+  info("Adding a node in an element with children that is expanded");
+  parentNode = await getNodeFront("#bar", inspector);
+  await selectNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+});
+
+async function testAddNode(parentNode, inspector) {
+  const btn = inspector.panelDoc.querySelector("#inspector-element-add-button");
+  const parentContainer = inspector.markup.getContainer(parentNode);
+
+  is(
+    parseInt(parentContainer.tagLine.getAttribute("aria-level"), 10),
+    PARENT_TREE_LEVEL,
+    "The parent aria-level is up to date."
+  );
+
+  info(
+    "Clicking 'add node' and expecting a markup mutation and a new container"
+  );
+  const onMutation = inspector.once("markupmutation");
+  const onNewContainer = inspector.once("container-created");
+  btn.click();
+  let mutations = await onMutation;
+  await onNewContainer;
+
+  // We are only interested in childList mutations here. Filter everything else out as
+  // there may be unrelated mutations (e.g. "events") grouped in.
+  mutations = mutations.filter(({ type }) => type === "childList");
+
+  is(mutations.length, 1, "There is one mutation only");
+  is(mutations[0].added.length, 1, "There is one new node only");
+
+  const newNode = mutations[0].added[0];
+
+  is(
+    parentNode,
+    inspector.selection.nodeFront,
+    "The parent node is still selected"
+  );
+  is(
+    newNode.parentNode(),
+    parentNode,
+    "The new node is inside the right parent"
+  );
+
+  const newNodeContainer = inspector.markup.getContainer(newNode);
+
+  is(
+    parseInt(newNodeContainer.tagLine.getAttribute("aria-level"), 10),
+    PARENT_TREE_LEVEL + 1,
+    "The child aria-level is up to date."
+  );
+}
+
+function collapseNode(node, inspector) {
+  const container = inspector.markup.getContainer(node);
+  container.setExpanded(false);
+}
diff --git a/devtools/client/inspector/test/browser_inspector_addSidebarTab.js b/devtools/client/inspector/test/browser_inspector_addSidebarTab.js
new file mode 100644
index 0000000000..d7c810d3c6
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_addSidebarTab.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI =
+  "data:text/html;charset=UTF-8," + "<h1>browser_inspector_addtabbar.js</h1>";
+
+const CONTENT_TEXT = "Hello World!";
+
+/**
+ * Verify InspectorPanel.addSidebarTab() API that can be consumed
+ * by DevTools extensions as well as DevTools code base.
+ */
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  const { Component, createFactory } = inspector.React;
+  const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+  const { div } = dom;
+
+  info("Adding custom panel.");
+
+  // Define custom side-panel.
+  class myTabPanel extends Component {
+    render() {
+      return div({ className: "my-tab-panel" }, CONTENT_TEXT);
+    }
+  }
+  let tabPanel = createFactory(myTabPanel);
+
+  // Append custom panel (tab) into the Inspector panel and
+  // make sure it's selected by default (the last arg = true).
+  inspector.addSidebarTab("myPanel", "My Panel", tabPanel, true);
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "myPanel",
+    "My Panel is selected by default"
+  );
+
+  // Define another custom side-panel.
+  class myTabPanel2 extends Component {
+    render() {
+      return div({ className: "my-tab-panel2" }, "Another Content");
+    }
+  }
+  tabPanel = createFactory(myTabPanel2);
+
+  // Append second panel, but don't select it by default.
+  inspector.addSidebarTab("myPanel", "My Panel", tabPanel, false);
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "myPanel",
+    "My Panel is selected by default"
+  );
+
+  // Check the the panel content is properly rendered.
+  const tabPanelNode = inspector.panelDoc.querySelector(".my-tab-panel");
+  is(
+    tabPanelNode.textContent,
+    CONTENT_TEXT,
+    "Side panel content has been rendered."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs.js
new file mode 100644
index 0000000000..01d53820ac
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs.js
@@ -0,0 +1,191 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the breadcrumbs widget content is correct.
+
+const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs.html";
+const NODES = [
+  {
+    selector: "#i1111",
+    ids: "i1 i11 i111 i1111",
+    nodeName: "div",
+    title: "div#i1111",
+  },
+  { selector: "#i22", ids: "i2 i22", nodeName: "div", title: "div#i22" },
+  {
+    selector: "#i2111",
+    ids: "i2 i21 i211 i2111",
+    nodeName: "div",
+    title: "div#i2111",
+  },
+  {
+    selector: "#i21",
+    ids: "i2 i21 i211 i2111",
+    nodeName: "div",
+    title: "div#i21",
+  },
+  {
+    selector: "#i22211",
+    ids: "i2 i22 i222 i2221 i22211",
+    nodeName: "div",
+    title: "div#i22211",
+  },
+  {
+    selector: "#i22",
+    ids: "i2 i22 i222 i2221 i22211",
+    nodeName: "div",
+    title: "div#i22",
+  },
+  { selector: "#i3", ids: "i3", nodeName: "article", title: "article#i3" },
+  {
+    selector: "clipPath",
+    ids: "vector clip",
+    nodeName: "clipPath",
+    title: "clipPath#clip",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+  const breadcrumbs = inspector.panelDoc.getElementById(
+    "inspector-breadcrumbs"
+  );
+  const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
+
+  for (const node of NODES) {
+    info("Testing node " + node.selector);
+
+    info("Selecting node and waiting for breadcrumbs to update");
+    const breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+    await selectNode(node.selector, inspector);
+    await breadcrumbsUpdated;
+
+    info("Performing checks for node " + node.selector);
+    const buttonsLabelIds = node.ids.split(" ");
+
+    // html > body > …
+    is(
+      container.childNodes.length,
+      buttonsLabelIds.length + 2,
+      "Node " + node.selector + ": Items count"
+    );
+
+    for (let i = 2; i < container.childNodes.length; i++) {
+      const expectedId = "#" + buttonsLabelIds[i - 2];
+      const button = container.childNodes[i];
+      const labelId = button.querySelector(".breadcrumbs-widget-item-id");
+      is(
+        labelId.textContent,
+        expectedId,
+        "Node " + node.selector + ": button " + i + " matches"
+      );
+    }
+
+    const checkedButton = container.querySelector("button[checked]");
+    const labelId = checkedButton.querySelector(".breadcrumbs-widget-item-id");
+    const id = inspector.selection.nodeFront.id;
+    is(
+      labelId.textContent,
+      "#" + id,
+      "Node " + node.selector + ": selection matches"
+    );
+
+    const labelTag = checkedButton.querySelector(
+      ".breadcrumbs-widget-item-tag"
+    );
+    is(
+      labelTag.textContent,
+      node.nodeName,
+      "Node " + node.selector + " has the expected tag name"
+    );
+
+    is(
+      checkedButton.getAttribute("title"),
+      node.title,
+      "Node " + node.selector + " has the expected tooltip"
+    );
+  }
+
+  await testPseudoElements(inspector, container);
+  await testComments(inspector, container);
+});
+
+async function testPseudoElements(inspector, container) {
+  info("Checking for pseudo elements");
+
+  const pseudoParent = await getNodeFront("#pseudo-container", inspector);
+  const children = await inspector.walker.children(pseudoParent);
+  is(children.nodes.length, 2, "Pseudo children returned from walker");
+
+  const beforeElement = children.nodes[0];
+  let breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  await selectNode(beforeElement, inspector);
+  await breadcrumbsUpdated;
+  is(
+    container.childNodes[3].textContent,
+    "::before",
+    "::before shows up in breadcrumb"
+  );
+
+  const afterElement = children.nodes[1];
+  breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  await selectNode(afterElement, inspector);
+  await breadcrumbsUpdated;
+  is(
+    container.childNodes[3].textContent,
+    "::after",
+    "::before shows up in breadcrumb"
+  );
+}
+
+async function testComments(inspector, container) {
+  info("Checking for comment elements");
+
+  const breadcrumbs = inspector.breadcrumbs;
+  const checkedButtonIndex = 2;
+  const button = container.childNodes[checkedButtonIndex];
+
+  let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  button.click();
+  await onBreadcrumbsUpdated;
+
+  is(breadcrumbs.currentIndex, checkedButtonIndex, "New button is selected");
+  ok(
+    breadcrumbs.outer.hasAttribute("aria-activedescendant"),
+    "Active descendant must be set"
+  );
+
+  const comment = [...inspector.markup._containers].find(
+    ([node]) => node.nodeType === Node.COMMENT_NODE
+  )[0];
+
+  let onInspectorUpdated = inspector.once("inspector-updated");
+  inspector.selection.setNodeFront(comment);
+  await onInspectorUpdated;
+
+  is(
+    breadcrumbs.currentIndex,
+    -1,
+    "When comment is selected no breadcrumb should be checked"
+  );
+  ok(
+    !breadcrumbs.outer.hasAttribute("aria-activedescendant"),
+    "Active descendant must not be set"
+  );
+
+  onInspectorUpdated = inspector.once("inspector-updated");
+  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  button.click();
+  await Promise.all([onInspectorUpdated, onBreadcrumbsUpdated]);
+
+  is(
+    breadcrumbs.currentIndex,
+    checkedButtonIndex,
+    "Same button is selected again"
+  );
+  ok(
+    breadcrumbs.outer.hasAttribute("aria-activedescendant"),
+    "Active descendant must be set again"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_highlight_hover.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_highlight_hover.js
new file mode 100644
index 0000000000..d94b640b6f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_highlight_hover.js
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that hovering over nodes on the breadcrumb buttons in the inspector
+// shows the highlighter over those nodes
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  info("Selecting the test node");
+  await selectNode("span", inspector);
+  const bcButtons = inspector.breadcrumbs.container;
+
+  let onNodeHighlighted = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  let button = bcButtons.childNodes[1];
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    { type: "mousemove" },
+    button.ownerDocument.defaultView
+  );
+  await onNodeHighlighted;
+
+  let isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "The highlighter is shown on a markup container hover");
+
+  ok(
+    await highlighterTestFront.assertHighlightedNode("body"),
+    "The highlighter highlights the right node"
+  );
+
+  const onNodeUnhighlighted = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  // move outside of the breadcrumb trail to trigger unhighlight
+  EventUtils.synthesizeMouseAtCenter(
+    inspector.addNodeButton,
+    { type: "mousemove" },
+    inspector.addNodeButton.ownerDocument.defaultView
+  );
+  await onNodeUnhighlighted;
+
+  onNodeHighlighted = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  button = bcButtons.childNodes[2];
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    { type: "mousemove" },
+    button.ownerDocument.defaultView
+  );
+  await onNodeHighlighted;
+
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "The highlighter is shown on a markup container hover");
+
+  ok(
+    await highlighterTestFront.assertHighlightedNode("span"),
+    "The highlighter highlights the right node"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_keybinding.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_keybinding.js
new file mode 100644
index 0000000000..5d795afdca
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_keybinding.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the breadcrumbs keybindings work.
+
+const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs.html";
+const TEST_DATA = [
+  {
+    desc: "Pressing left should select the parent <body>",
+    key: "KEY_ArrowLeft",
+    newSelection: "body",
+  },
+  {
+    desc: "Pressing left again should select the parent <html>",
+    key: "KEY_ArrowLeft",
+    newSelection: "html",
+  },
+  {
+    desc: "Pressing left again should stay on <html>, it's the first element",
+    key: "KEY_ArrowLeft",
+    newSelection: "html",
+  },
+  {
+    desc: "Pressing right should go to <body>",
+    key: "KEY_ArrowRight",
+    newSelection: "body",
+  },
+  {
+    desc: "Pressing right again should go to #i2",
+    key: "KEY_ArrowRight",
+    newSelection: "#i2",
+  },
+  {
+    desc: "Pressing right again should stay on #i2, it's the last element",
+    key: "KEY_ArrowRight",
+    newSelection: "#i2",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  info("Selecting the test node");
+  await selectNode("#i2", inspector);
+
+  info("Clicking on the corresponding breadcrumbs node to focus it");
+  const container = inspector.panelDoc.getElementById("inspector-breadcrumbs");
+
+  const button = container.querySelector("button[checked]");
+  button.click();
+
+  let currentSelection = "#id2";
+  for (const { desc, key, newSelection } of TEST_DATA) {
+    info(desc);
+
+    // If the selection will change, wait for the breadcrumb to update,
+    // otherwise continue.
+    let onUpdated = null;
+    if (newSelection !== currentSelection) {
+      info("Expecting a new node to be selected");
+      onUpdated = inspector.once("breadcrumbs-updated");
+    }
+
+    EventUtils.synthesizeKey(key);
+    await onUpdated;
+
+    const newNodeFront = await getNodeFront(newSelection, inspector);
+    is(
+      newNodeFront,
+      inspector.selection.nodeFront,
+      "The current selection is correct"
+    );
+    is(
+      container.getAttribute("aria-activedescendant"),
+      container.querySelector("button[checked]").id,
+      "aria-activedescendant is set correctly"
+    );
+
+    currentSelection = newSelection;
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_keyboard_trap.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_keyboard_trap.js
new file mode 100644
index 0000000000..e3046ce30e
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_keyboard_trap.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test ability to tab to and away from breadcrumbs using keyboard.
+
+const TEST_URL = URL_ROOT + "doc_inspector_breadcrumbs.html";
+
+/**
+ * Test data has the format of:
+ * {
+ *   desc     {String}   description for better logging
+ *   focused  {Boolean}  flag, indicating if breadcrumbs contain focus
+ *   key      {String}   key event's key
+ *   options  {?Object}  optional event data such as shiftKey, etc
+ * }
+ */
+const TEST_DATA = [
+  {
+    desc: "Move the focus away from breadcrumbs to a next focusable element",
+    focused: false,
+    key: "VK_TAB",
+    options: {},
+  },
+  {
+    desc: "Move the focus back to the breadcrumbs",
+    focused: true,
+    key: "VK_TAB",
+    options: { shiftKey: true },
+  },
+  {
+    desc:
+      "Move the focus back away from breadcrumbs to a previous focusable " +
+      "element",
+    focused: false,
+    key: "VK_TAB",
+    options: { shiftKey: true },
+  },
+  {
+    desc: "Move the focus back to the breadcrumbs",
+    focused: true,
+    key: "VK_TAB",
+    options: {},
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const doc = inspector.panelDoc;
+  const { breadcrumbs } = inspector;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#i2", inspector);
+
+  info("Clicking on the corresponding breadcrumbs node to focus it");
+  const container = doc.getElementById("inspector-breadcrumbs");
+
+  const button = container.querySelector("button[checked]");
+  const onHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  button.click();
+  await onHighlight;
+
+  // Ensure a breadcrumb is focused.
+  is(doc.activeElement, container, "Focus is on selected breadcrumb");
+  is(
+    container.getAttribute("aria-activedescendant"),
+    button.id,
+    "aria-activedescendant is set correctly"
+  );
+
+  for (const { desc, focused, key, options } of TEST_DATA) {
+    info(desc);
+
+    EventUtils.synthesizeKey(key, options);
+    // Wait until the keyPromise promise resolves.
+    await breadcrumbs.keyPromise;
+
+    if (focused) {
+      is(doc.activeElement, container, "Focus is on selected breadcrumb");
+    } else {
+      ok(!containsFocus(doc, container), "Focus is outside of breadcrumbs");
+    }
+    is(
+      container.getAttribute("aria-activedescendant"),
+      button.id,
+      "aria-activedescendant is set correctly"
+    );
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js
new file mode 100644
index 0000000000..91e3976907
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js
@@ -0,0 +1,282 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the breadcrumbs widget refreshes correctly when there are markup
+// mutations (and that it doesn't refresh when those mutations don't change its
+// output).
+
+const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs.html";
+
+// Each item in the TEST_DATA array is a test case that should contain the
+// following properties:
+// - desc {String} A description of this test case (will be logged).
+// - setup {Function*} A generator function (can yield promises) that sets up
+//   the test case. Useful for selecting a node before starting the test.
+// - run {Function*} A generator function (can yield promises) that runs the
+//   actual test case, i.e, mutates the content DOM to cause the breadcrumbs
+//   to refresh, or not.
+// - shouldRefresh {Boolean} Once the `run` function has completed, and the test
+//   has detected that the page has changed, this boolean instructs the test to
+//   verify if the breadcrumbs has refreshed or not.
+// - output {Array} A list of strings for the text that should be found in each
+//   button after the test has run.
+const TEST_DATA = [
+  {
+    desc: "Adding a child at the end of the chain shouldn't change anything",
+    async setup(inspector) {
+      await selectNode("#i1111", inspector);
+    },
+    async run({ walker, selection }) {
+      await walker.setInnerHTML(selection.nodeFront, "<b>test</b>");
+    },
+    shouldRefresh: false,
+    output: ["html", "body", "article#i1", "div#i11", "div#i111", "div#i1111"],
+  },
+  {
+    desc: "Updating an ID to an displayed element should refresh",
+    setup() {},
+    async run({ walker }) {
+      const node = await walker.querySelector(walker.rootNode, "#i1");
+      await node.modifyAttributes([
+        {
+          attributeName: "id",
+          newValue: "i1-changed",
+        },
+      ]);
+    },
+    shouldRefresh: true,
+    output: [
+      "html",
+      "body",
+      "article#i1-changed",
+      "div#i11",
+      "div#i111",
+      "div#i1111",
+    ],
+  },
+  {
+    desc: "Updating an class to a displayed element should refresh",
+    setup() {},
+    async run({ walker }) {
+      const node = await walker.querySelector(walker.rootNode, "body");
+      await node.modifyAttributes([
+        {
+          attributeName: "class",
+          newValue: "test-class",
+        },
+      ]);
+    },
+    shouldRefresh: true,
+    output: [
+      "html",
+      "body.test-class",
+      "article#i1-changed",
+      "div#i11",
+      "div#i111",
+      "div#i1111",
+    ],
+  },
+  {
+    desc:
+      "Updating a non id/class attribute to a displayed element should not " +
+      "refresh",
+    setup() {},
+    async run({ walker }) {
+      const node = await walker.querySelector(walker.rootNode, "#i11");
+      await node.modifyAttributes([
+        {
+          attributeName: "name",
+          newValue: "value",
+        },
+      ]);
+    },
+    shouldRefresh: false,
+    output: [
+      "html",
+      "body.test-class",
+      "article#i1-changed",
+      "div#i11",
+      "div#i111",
+      "div#i1111",
+    ],
+  },
+  {
+    desc: "Moving a child in an element that's not displayed should not refresh",
+    setup() {},
+    async run({ walker }) {
+      // Re-append #i1211 as a last child of #i2.
+      const parent = await walker.querySelector(walker.rootNode, "#i2");
+      const child = await walker.querySelector(walker.rootNode, "#i211");
+      await walker.insertBefore(child, parent);
+    },
+    shouldRefresh: false,
+    output: [
+      "html",
+      "body.test-class",
+      "article#i1-changed",
+      "div#i11",
+      "div#i111",
+      "div#i1111",
+    ],
+  },
+  {
+    desc: "Moving an undisplayed child in a displayed element should not refresh",
+    setup() {},
+    async run({ walker }) {
+      // Re-append #i2 in body (move it to the end).
+      const parent = await walker.querySelector(walker.rootNode, "body");
+      const child = await walker.querySelector(walker.rootNode, "#i2");
+      await walker.insertBefore(child, parent);
+    },
+    shouldRefresh: false,
+    output: [
+      "html",
+      "body.test-class",
+      "article#i1-changed",
+      "div#i11",
+      "div#i111",
+      "div#i1111",
+    ],
+  },
+  {
+    desc:
+      "Updating attributes on an element that's not displayed should not " +
+      "refresh",
+    setup() {},
+    async run({ walker }) {
+      const node = await walker.querySelector(walker.rootNode, "#i2");
+      await node.modifyAttributes([
+        {
+          attributeName: "id",
+          newValue: "i2-changed",
+        },
+        {
+          attributeName: "class",
+          newValue: "test-class",
+        },
+      ]);
+    },
+    shouldRefresh: false,
+    output: [
+      "html",
+      "body.test-class",
+      "article#i1-changed",
+      "div#i11",
+      "div#i111",
+      "div#i1111",
+    ],
+  },
+  {
+    desc: "Removing the currently selected node should refresh",
+    async setup(inspector) {
+      await selectNode("#i2-changed", inspector);
+    },
+    async run({ walker, selection }) {
+      await walker.removeNode(selection.nodeFront);
+    },
+    shouldRefresh: true,
+    output: ["html", "body.test-class"],
+  },
+  {
+    desc: "Changing the class of the currently selected node should refresh",
+    setup() {},
+    async run({ selection }) {
+      await selection.nodeFront.modifyAttributes([
+        {
+          attributeName: "class",
+          newValue: "test-class-changed",
+        },
+      ]);
+    },
+    shouldRefresh: true,
+    output: ["html", "body.test-class-changed"],
+  },
+  {
+    desc: "Changing the id of the currently selected node should refresh",
+    setup() {},
+    async run({ selection }) {
+      await selection.nodeFront.modifyAttributes([
+        {
+          attributeName: "id",
+          newValue: "new-id",
+        },
+      ]);
+    },
+    shouldRefresh: true,
+    output: ["html", "body#new-id.test-class-changed"],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+  const breadcrumbs = inspector.panelDoc.getElementById(
+    "inspector-breadcrumbs"
+  );
+  const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
+  const win = container.ownerDocument.defaultView;
+
+  for (const { desc, setup, run, shouldRefresh, output } of TEST_DATA) {
+    info("Running test case: " + desc);
+
+    info(
+      "Listen to markupmutation events from the inspector to know when a " +
+        "test case has completed"
+    );
+    const onContentMutation = inspector.once("markupmutation");
+
+    info("Running setup");
+    await setup(inspector);
+
+    info("Listen to mutations on the breadcrumbs container");
+    let hasBreadcrumbsMutated = false;
+    const observer = new win.MutationObserver(mutations => {
+      // Only consider childList changes or tooltiptext/checked attributes
+      // changes. The rest may be mutations caused by the overflowing arrowbox.
+      for (const { type, attributeName } of mutations) {
+        const isChildList = type === "childList";
+        const isAttributes =
+          type === "attributes" &&
+          (attributeName === "checked" || attributeName === "tooltiptext");
+        if (isChildList || isAttributes) {
+          hasBreadcrumbsMutated = true;
+          break;
+        }
+      }
+    });
+    observer.observe(container, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+
+    info("Running the test case");
+    await run(inspector);
+
+    info("Wait until the page has mutated");
+    await onContentMutation;
+
+    if (shouldRefresh) {
+      info("The breadcrumbs is expected to refresh, so wait for it");
+      await inspector.once("inspector-updated");
+    } else {
+      ok(
+        !inspector._updateProgress,
+        "The breadcrumbs widget is not currently updating"
+      );
+    }
+
+    is(shouldRefresh, hasBreadcrumbsMutated, "Has the breadcrumbs refreshed?");
+    observer.disconnect();
+
+    info("Check the output of the breadcrumbs widget");
+    is(container.childNodes.length, output.length, "Correct number of buttons");
+    for (let i = 0; i < container.childNodes.length; i++) {
+      is(
+        output[i],
+        container.childNodes[i].textContent,
+        "Text content for button " + i + " is correct"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_namespaced.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_namespaced.js
new file mode 100644
index 0000000000..77b25a0ffa
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_namespaced.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the breadcrumbs widget content for namespaced elements is correct.
+
+const XHTML = `
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg">
+    <body>
+      <svg:svg width="100" height="100">
+        <svg:clipPath id="clip">
+          <svg:rect id="rectangle" x="0" y="0" width="10" height="5"></svg:rect>
+        </svg:clipPath>
+        <svg:circle cx="0" cy="0" r="5"></svg:circle>
+      </svg:svg>
+    </body>
+  </html>
+`;
+
+const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
+
+const NODES = [
+  {
+    selector: "clipPath",
+    nodes: ["svg:svg", "svg:clipPath"],
+    nodeName: "svg:clipPath",
+    title: "svg:clipPath#clip",
+  },
+  {
+    selector: "circle",
+    nodes: ["svg:svg", "svg:circle"],
+    nodeName: "svg:circle",
+    title: "svg:circle",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+  const container = inspector.panelDoc.getElementById("inspector-breadcrumbs");
+
+  for (const node of NODES) {
+    info("Testing node " + node.selector);
+
+    info("Selecting node and waiting for breadcrumbs to update");
+    const breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+    await selectNode(node.selector, inspector);
+    await breadcrumbsUpdated;
+
+    info("Performing checks for node " + node.selector);
+
+    const checkedButton = container.querySelector("button[checked]");
+
+    const labelTag = checkedButton.querySelector(
+      ".breadcrumbs-widget-item-tag"
+    );
+    is(
+      labelTag.textContent,
+      node.nodeName,
+      "Node " + node.selector + " has the expected tag name"
+    );
+
+    is(
+      checkedButton.getAttribute("title"),
+      node.title,
+      "Node " + node.selector + " has the expected tooltip"
+    );
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js
new file mode 100644
index 0000000000..80540a528d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the breadcrumbs widget refreshes correctly when there are markup
+// mutations, even if the currently selected node is a slotted node in the shadow DOM.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">content</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot class="slot-class" name="slot1"></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  const breadcrumbs = inspector.panelDoc.getElementById(
+    "inspector-breadcrumbs"
+  );
+
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+
+  info("Expand the shadow root");
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  const slotContainer = shadowRootContainer.getChildContainers()[0];
+
+  info("Select the slot node and wait for the breadcrumbs update");
+  const slotNodeFront = slotContainer.node;
+  let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  inspector.selection.setNodeFront(slotNodeFront);
+  await onBreadcrumbsUpdated;
+
+  checkBreadcrumbsContent(breadcrumbs, [
+    "html",
+    "body",
+    "test-component",
+    "#shadow-root",
+    "slot.slot-class",
+  ]);
+
+  info("Expand the slot");
+  await expandContainer(inspector, slotContainer);
+
+  const slotChildContainers = slotContainer.getChildContainers();
+  is(slotChildContainers.length, 1, "Expecting 1 slotted child");
+
+  info("Select the slotted node and wait for the breadcrumbs update");
+  const slottedNodeFront = slotChildContainers[0].node;
+  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  inspector.selection.setNodeFront(slottedNodeFront);
+  await onBreadcrumbsUpdated;
+
+  checkBreadcrumbsContent(breadcrumbs, [
+    "html",
+    "body",
+    "test-component",
+    "div#el1",
+  ]);
+
+  info(
+    "Update the classname of the real element and wait for the breadcrumbs update"
+  );
+  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    content.document.getElementById("el1").setAttribute("class", "test");
+  });
+  await onBreadcrumbsUpdated;
+
+  checkBreadcrumbsContent(breadcrumbs, [
+    "html",
+    "body",
+    "test-component",
+    "div#el1.test",
+  ]);
+});
+
+function checkBreadcrumbsContent(breadcrumbs, selectors) {
+  info("Check the output of the breadcrumbs widget");
+  const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
+  is(
+    container.childNodes.length,
+    selectors.length,
+    "Correct number of buttons"
+  );
+  for (let i = 0; i < container.childNodes.length; i++) {
+    is(
+      container.childNodes[i].textContent,
+      selectors[i],
+      "Text content for button " + i + " is correct"
+    );
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js
new file mode 100644
index 0000000000..1267d23646
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js
@@ -0,0 +1,114 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the start and end buttons on the breadcrumb trail bring the right
+// crumbs into the visible area, for both LTR and RTL
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs_visibility.html";
+const NODE_ONE = "div#aVeryLongIdToExceedTheBreadcrumbTruncationLimit";
+const NODE_TWO = "div#anotherVeryLongIdToExceedTheBreadcrumbTruncationLimit";
+const NODE_THREE = "div#aThirdVeryLongIdToExceedTheTruncationLimit";
+const NODE_FOUR = "div#aFourthOneToExceedTheTruncationLimit";
+const NODE_FIVE = "div#aFifthOneToExceedTheTruncationLimit";
+const NODE_SIX = "div#aSixthOneToExceedTheTruncationLimit";
+const NODE_SEVEN = "div#aSeventhOneToExceedTheTruncationLimit";
+
+const NODES = [
+  { action: "start", title: NODE_SIX },
+  { action: "start", title: NODE_FIVE },
+  { action: "start", title: NODE_FOUR },
+  { action: "start", title: NODE_THREE },
+  { action: "start", title: NODE_TWO },
+  { action: "start", title: NODE_ONE },
+  { action: "end", title: NODE_TWO },
+  { action: "end", title: NODE_THREE },
+  { action: "end", title: NODE_FOUR },
+  { action: "end", title: NODE_FIVE },
+  { action: "end", title: NODE_SIX },
+];
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
+
+  // No way to wait for scrolling to end (Bug 1172171)
+  // Rather than wait a max time; limit test to instant scroll behavior
+  inspector.breadcrumbs.arrowScrollBox.scrollBehavior = "instant";
+
+  await toolbox.switchHost(Toolbox.HostType.WINDOW);
+  const hostWindow = toolbox.win.parent;
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+  const inspectorResized = inspector.once("inspector-resize");
+  hostWindow.resizeTo(640, 300);
+  await inspectorResized;
+
+  info("Testing transitions ltr");
+  await pushPref("intl.l10n.pseudo", "");
+  await testBreadcrumbTransitions(hostWindow, inspector);
+
+  info("Testing transitions rtl");
+  await pushPref("intl.l10n.pseudo", "bidi");
+  await testBreadcrumbTransitions(hostWindow, inspector);
+
+  hostWindow.resizeTo(originalWidth, originalHeight);
+});
+
+async function testBreadcrumbTransitions(hostWindow, inspector) {
+  const breadcrumbs = inspector.panelDoc.getElementById(
+    "inspector-breadcrumbs"
+  );
+  const startBtn = breadcrumbs.querySelector(".scrollbutton-up");
+  const endBtn = breadcrumbs.querySelector(".scrollbutton-down");
+  const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
+  const breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+
+  info("Selecting initial node");
+  await selectNode(NODE_SEVEN, inspector);
+
+  // So just need to wait for a duration
+  await breadcrumbsUpdated;
+  const initialCrumb = container.querySelector("button[checked]");
+  is(
+    isElementInViewport(hostWindow, initialCrumb),
+    true,
+    "initial element was visible"
+  );
+
+  for (const node of NODES) {
+    info("Checking for visibility of crumb " + node.title);
+    if (node.action === "end") {
+      info("Simulating click of end button");
+      EventUtils.synthesizeMouseAtCenter(endBtn, {}, inspector.panelWin);
+    } else if (node.action === "start") {
+      info("Simulating click of start button");
+      EventUtils.synthesizeMouseAtCenter(startBtn, {}, inspector.panelWin);
+    }
+    await breadcrumbsUpdated;
+    const selector = 'button[title="' + node.title + '"]';
+    const relevantCrumb = container.querySelector(selector);
+    is(
+      isElementInViewport(hostWindow, relevantCrumb),
+      true,
+      node.title + " crumb is visible"
+    );
+  }
+}
+
+function isElementInViewport(window, el) {
+  const rect = el.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= window.innerHeight &&
+    rect.right <= window.innerWidth
+  );
+}
+
+registerCleanupFunction(function () {
+  // Restore the host type for other tests.
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_delete-selected-node-01.js b/devtools/client/inspector/test/browser_inspector_delete-selected-node-01.js
new file mode 100644
index 0000000000..8d7b3a1cfc
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_delete-selected-node-01.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test to ensure inspector handles deletion of selected node correctly.
+
+const TEST_URL = URL_ROOT + "doc_inspector_delete-selected-node-01.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const spanNodeFront = await getNodeFrontInFrames(
+    ["iframe", "span"],
+    inspector
+  );
+  await selectNode(spanNodeFront, inspector);
+
+  info("Removing selected <span> element.");
+  const parentNode = spanNodeFront.parentNode();
+  await spanNodeFront.inspectorFront.walker.removeNode(spanNodeFront);
+
+  // Wait for the inspector to process the mutation
+  await inspector.once("inspector-updated");
+  is(
+    inspector.selection.nodeFront,
+    parentNode,
+    "Parent node of selected <span> got selected."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_delete-selected-node-02.js b/devtools/client/inspector/test/browser_inspector_delete-selected-node-02.js
new file mode 100644
index 0000000000..6fc8c1031f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_delete-selected-node-02.js
@@ -0,0 +1,145 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that when nodes are being deleted in the page, the current selection
+// and therefore the markup view, css rule view, computed view, font view,
+// box model view, and breadcrumbs, reset accordingly to show the right node
+
+const TEST_PAGE = URL_ROOT + "doc_inspector_delete-selected-node-02.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_PAGE);
+
+  await testManuallyDeleteSelectedNode();
+  await testAutomaticallyDeleteSelectedNode();
+  await testDeleteSelectedNodeContainerFrame();
+  await testDeleteWithNonElementNode();
+
+  async function testManuallyDeleteSelectedNode() {
+    info(
+      "Selecting a node, deleting it via context menu and checking that " +
+        "its parent node is selected and breadcrumbs are updated."
+    );
+
+    await selectNode("#deleteManually", inspector);
+    const nodeToBeDeleted = inspector.selection.nodeFront;
+    await deleteNodeWithContextMenu(nodeToBeDeleted, inspector);
+
+    info("Performing checks.");
+    await assertNodeSelectedAndPanelsUpdated(
+      "#selectedAfterDelete",
+      "li#selectedAfterDelete"
+    );
+  }
+
+  async function testAutomaticallyDeleteSelectedNode() {
+    info(
+      "Selecting a node, deleting it via javascript and checking that " +
+        "its parent node is selected and breadcrumbs are updated."
+    );
+
+    const div = await getNodeFront("#deleteAutomatically", inspector);
+    await selectNode(div, inspector);
+
+    info("Deleting selected node via javascript.");
+    await inspector.walker.removeNode(div);
+
+    info("Waiting for inspector to update.");
+    await inspector.once("inspector-updated");
+
+    info("Inspector updated, performing checks.");
+    await assertNodeSelectedAndPanelsUpdated(
+      "#deleteChildren",
+      "ul#deleteChildren"
+    );
+  }
+
+  async function testDeleteSelectedNodeContainerFrame() {
+    info(
+      "Selecting a node inside iframe, deleting the iframe via javascript " +
+        "and checking the parent node of the iframe is selected and " +
+        "breadcrumbs are updated."
+    );
+
+    info("Selecting an element inside iframe.");
+    await selectNodeInFrames(["#deleteIframe", "#deleteInIframe"], inspector);
+
+    info("Deleting parent iframe node via javascript.");
+    const onInspectorUpdated = inspector.once("inspector-updated");
+
+    SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+      content.document.querySelector("iframe#deleteIframe").remove();
+    });
+
+    info("Waiting for inspector to update.");
+    await onInspectorUpdated;
+
+    info("Inspector updated, performing checks.");
+    await assertNodeSelectedAndPanelsUpdated("body", "body");
+  }
+
+  async function testDeleteWithNonElementNode() {
+    info(
+      "Selecting a node, deleting it via context menu and checking that " +
+        "its parent node is selected and breadcrumbs are updated " +
+        "when the node is followed by a non-element node"
+    );
+
+    await selectNode("#deleteWithNonElement", inspector);
+    const nodeToBeDeleted = inspector.selection.nodeFront;
+    await deleteNodeWithContextMenu(nodeToBeDeleted, inspector);
+
+    let expectedCrumbs = ["html", "body", "div#deleteToMakeSingleTextNode"];
+    await assertNodeSelectedAndCrumbsUpdated(expectedCrumbs, Node.TEXT_NODE);
+
+    // Delete node with key, as cannot delete text node with
+    // context menu at this time.
+    inspector.markup._frame.focus();
+    EventUtils.synthesizeKey("KEY_Delete");
+    await inspector.once("inspector-updated");
+
+    expectedCrumbs = ["html", "body", "div#deleteToMakeSingleTextNode"];
+    await assertNodeSelectedAndCrumbsUpdated(expectedCrumbs, Node.ELEMENT_NODE);
+  }
+
+  function assertNodeSelectedAndCrumbsUpdated(
+    expectedCrumbs,
+    expectedNodeType
+  ) {
+    info("Performing checks");
+    const actualNodeType = inspector.selection.nodeFront.nodeType;
+    is(actualNodeType, expectedNodeType, "The node has the right type");
+
+    const breadcrumbs = inspector.panelDoc.querySelectorAll(
+      "#inspector-breadcrumbs .html-arrowscrollbox-inner > *"
+    );
+    is(
+      breadcrumbs.length,
+      expectedCrumbs.length,
+      "Have the correct number of breadcrumbs"
+    );
+    for (let i = 0; i < breadcrumbs.length; i++) {
+      is(
+        breadcrumbs[i].textContent,
+        expectedCrumbs[i],
+        "Text content for button " + i + " is correct"
+      );
+    }
+  }
+
+  async function assertNodeSelectedAndPanelsUpdated(selector, crumbLabel) {
+    const nodeFront = await getNodeFront(selector, inspector);
+    is(inspector.selection.nodeFront, nodeFront, "The right node is selected");
+
+    const breadcrumbs = inspector.panelDoc.querySelector(
+      "#inspector-breadcrumbs .html-arrowscrollbox-inner"
+    );
+    is(
+      breadcrumbs.querySelector("button[checked=true]").textContent,
+      crumbLabel,
+      "The right breadcrumb is selected"
+    );
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_delete-selected-node-03.js b/devtools/client/inspector/test/browser_inspector_delete-selected-node-03.js
new file mode 100644
index 0000000000..e8d1c2bb9e
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_delete-selected-node-03.js
@@ -0,0 +1,24 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test to ensure inspector can handle destruction of selected node inside an iframe.
+
+const TEST_URL = URL_ROOT + "doc_inspector_delete-selected-node-01.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select a node inside the iframe");
+  await selectNodeInFrames(["iframe", "span"], inspector);
+
+  info("Removing iframe.");
+  const onInspectorUpdated = inspector.once("inspector-updated");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.document.querySelector("iframe").remove();
+  });
+  await onInspectorUpdated;
+
+  const body = await getNodeFront("body", inspector);
+  is(inspector.selection.nodeFront, body, "Selection is now the body node");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_delete_node_in_frame.js b/devtools/client/inspector/test/browser_inspector_delete_node_in_frame.js
new file mode 100644
index 0000000000..53b4b11277
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_delete_node_in_frame.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URL_1 = `https://example.com/document-builder.sjs?html=
+<meta charset=utf8><iframe srcdoc="<div>"></iframe><body>`;
+const TEST_URL_2 = `https://example.com/document-builder.sjs?html=<meta charset=utf8><div id=url2>`;
+
+// Test that deleting a node in a same-process iframe and doing a navigation
+// does not freeze the browser or break the toolbox.
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL_1);
+
+  info("Select a node in a same-process iframe");
+  const node = await selectNodeInFrames(["iframe", "div"], inspector);
+  const parentNode = node.parentNode();
+
+  info("Removing selected element with the context menu.");
+  await deleteNodeWithContextMenu(node, inspector);
+
+  is(
+    inspector.selection.nodeFront,
+    parentNode,
+    "The parent node of the deleted node was selected."
+  );
+
+  const onInspectorReloaded = inspector.once("reloaded");
+  await navigateTo(TEST_URL_2);
+  await onInspectorReloaded;
+
+  const url2NodeFront = await getNodeFront("#url2", inspector);
+  ok(url2NodeFront, "Can retrieve a node front after the navigation");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_destroy-after-navigation.js b/devtools/client/inspector/test/browser_inspector_destroy-after-navigation.js
new file mode 100644
index 0000000000..2040bccae4
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_destroy-after-navigation.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing that closing the inspector after navigating to a page doesn't fail.
+
+const URL_1 = "data:text/plain;charset=UTF-8,abcde";
+const URL_2 = "data:text/plain;charset=UTF-8,12345";
+
+add_task(async function () {
+  const { toolbox } = await openInspectorForURL(URL_1);
+
+  await navigateTo(URL_2);
+
+  info("Destroying toolbox");
+  try {
+    await toolbox.destroy();
+    ok(true, "Toolbox destroyed");
+  } catch (e) {
+    ok(false, "An exception occured while destroying toolbox");
+    console.error(e);
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_destroy-before-ready.js b/devtools/client/inspector/test/browser_inspector_destroy-before-ready.js
new file mode 100644
index 0000000000..4df83e3a46
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_destroy-before-ready.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that switching to the inspector panel and not waiting for it to be fully
+// loaded doesn't fail the test with unhandled rejected promises.
+
+add_task(async function () {
+  // At least one assertion is needed to avoid failing the test, but really,
+  // what we're interested in is just having the test pass when switching to the
+  // inspector.
+  ok(true);
+
+  await addTab("data:text/html;charset=utf-8,test inspector destroy");
+
+  info("Open the toolbox on the debugger panel");
+  const toolbox = await gDevTools.showToolboxForTab(gBrowser.selectedTab, {
+    toolId: "jsdebugger",
+  });
+
+  info("Switch to the inspector panel and immediately end the test");
+  const onInspectorSelected = toolbox.once("inspector-selected");
+  toolbox.selectTool("inspector");
+  await onInspectorSelected;
+});
diff --git a/devtools/client/inspector/test/browser_inspector_expand-collapse.js b/devtools/client/inspector/test/browser_inspector_expand-collapse.js
new file mode 100644
index 0000000000..dd39d5898f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_expand-collapse.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that context menu items exapnd all and collapse are shown properly.
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  "<div id='parent-node'><div id='child-node'></div></div>";
+
+add_task(async function () {
+  // Test is often exceeding time-out threshold, similar to Bug 1137765
+  requestLongerTimeout(2);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Selecting the parent node");
+
+  const front = await getNodeFrontForSelector("#parent-node", inspector);
+
+  await selectNode(front, inspector);
+
+  info("Simulating context menu click on the selected node container.");
+  let allMenuItems = openContextMenuAndGetAllItems(inspector, {
+    target: getContainerForNodeFront(front, inspector).tagLine,
+  });
+  let nodeMenuCollapseElement = allMenuItems.find(
+    item => item.id === "node-menu-collapse"
+  );
+  let nodeMenuExpandElement = allMenuItems.find(
+    item => item.id === "node-menu-expand"
+  );
+
+  ok(nodeMenuCollapseElement.disabled, "Collapse option is disabled");
+  ok(!nodeMenuExpandElement.disabled, "ExpandAll option is enabled");
+
+  info("Testing whether expansion works properly");
+  nodeMenuExpandElement.click();
+
+  info("Waiting for expansion to occur");
+  await waitForMultipleChildrenUpdates(inspector);
+  const markUpContainer = getContainerForNodeFront(front, inspector);
+  ok(markUpContainer.expanded, "node has been successfully expanded");
+
+  // reselecting node after expansion
+  await selectNode(front, inspector);
+
+  info("Testing whether collapse works properly");
+  info("Simulating context menu click on the selected node container.");
+  allMenuItems = openContextMenuAndGetAllItems(inspector, {
+    target: getContainerForNodeFront(front, inspector).tagLine,
+  });
+  nodeMenuCollapseElement = allMenuItems.find(
+    item => item.id === "node-menu-collapse"
+  );
+  nodeMenuExpandElement = allMenuItems.find(
+    item => item.id === "node-menu-expand"
+  );
+
+  ok(!nodeMenuCollapseElement.disabled, "Collapse option is enabled");
+  ok(!nodeMenuExpandElement.disabled, "ExpandAll option is enabled");
+  nodeMenuCollapseElement.click();
+
+  info("Waiting for collapse to occur");
+  await waitForMultipleChildrenUpdates(inspector);
+  ok(!markUpContainer.expanded, "node has been successfully collapsed");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_eyedropper_ruleview.js b/devtools/client/inspector/test/browser_inspector_eyedropper_ruleview.js
new file mode 100644
index 0000000000..ba749fbf10
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_eyedropper_ruleview.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const CSS_URI = URL_ROOT + "style_inspector_eyedropper_ruleview.css";
+
+const TEST_URI = `
+  <link href="${CSS_URI}" rel="stylesheet" type="text/css"/>
+`;
+
+// Test that opening the eyedropper before opening devtools doesn't break links
+// in the ruleview.
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const onPickerCommandHandled = new Promise(r => {
+    const listener = subject => {
+      Services.obs.removeObserver(listener, "color-picker-command-handled");
+      r(subject.wrappedJSObject);
+    };
+    Services.obs.addObserver(listener, "color-picker-command-handled");
+  });
+
+  info("Trigger the eyedropper command");
+  const menu = document.getElementById("menu_eyedropper");
+  menu.doCommand();
+
+  info("Wait for the color-picker-command-handled observable");
+  const targetFront = await onPickerCommandHandled;
+
+  info("Wait for the eye dropper to be visible");
+  const highlighterTestFront = await targetFront.getFront("highlighterTest");
+  await asyncWaitUntil(() => highlighterTestFront.isEyeDropperVisible());
+
+  info("Cancel the eye dropper and wait for the target to be destroyed");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await waitFor(() => targetFront.isDestroyed());
+
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("body", inspector);
+
+  const linkText = getRuleViewLinkTextByIndex(view, 1);
+  is(
+    linkText,
+    "style_inspector_eyedropper_ruleview.css:1",
+    "link text at index 1 has the correct link."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_fission_frame.js b/devtools/client/inspector/test/browser_inspector_fission_frame.js
new file mode 100644
index 0000000000..fda1471248
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_fission_frame.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * bug 1673627 - Test that remote iframes with short inline content,
+ * get their inner remote document displayed instead of the inlineTextChild content.
+ */
+const TEST_URI = `data:text/html,<div id="root"><iframe src="https://example.com/document-builder.sjs?html=<div id=com>com"><br></iframe></div>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+  const tree = `
+    id="root"
+      iframe
+        #document
+          html
+            head
+            body
+              id="com"`;
+  await assertMarkupViewAsTree(tree, "#root", inspector);
+});
+
+// Test regular remote frames
+const FRAME_URL = `https://example.com/document-builder.sjs?html=<div>com`;
+const TEST_REMOTE_FRAME = `https://example.org/document-builder.sjs?html=<div id="org-root"><iframe src="${FRAME_URL}"></iframe></div>`;
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_REMOTE_FRAME);
+  const tree = `
+    id="org-root"
+      iframe
+        #document
+          html
+            head
+            body
+              com`;
+  await assertMarkupViewAsTree(tree, "#org-root", inspector);
+});
diff --git a/devtools/client/inspector/test/browser_inspector_fission_frame_navigation.js b/devtools/client/inspector/test/browser_inspector_fission_frame_navigation.js
new file mode 100644
index 0000000000..7ac3b51586
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_fission_frame_navigation.js
@@ -0,0 +1,163 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const EXAMPLE_COM_URI =
+  "https://example.com/document-builder.sjs?html=<div id=com>com";
+const EXAMPLE_NET_URI =
+  "https://example.net/document-builder.sjs?html=<div id=net>net";
+
+const ORG_URL_ROOT = URL_ROOT.replace("example.com", "example.org");
+const TEST_ORG_URI =
+  ORG_URL_ROOT + "doc_inspector_fission_frame_navigation.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_ORG_URI);
+  const tree = `
+    id="root"
+      iframe
+        #document
+          html
+            head
+            body
+              id="org"`;
+  // Note: the assertMarkupViewAsTree uses very high level APIs and is similar
+  // to what should happen when a user interacts with the markup view.
+  // It is important to avoid explicitly fetching walkers or node fronts during
+  // the test, as it might cause reparenting of remote frames and make the test
+  // succeed without actually testing that the feature works correctly.
+  await assertMarkupViewAsTree(tree, "#root", inspector);
+
+  await navigateIframeTo(inspector, EXAMPLE_COM_URI);
+  const treeAfterLoadingCom = `
+    id="root"
+      iframe
+        #document
+          html
+            head
+            body
+              id="com"`;
+  await assertMarkupViewAsTree(treeAfterLoadingCom, "#root", inspector);
+
+  await navigateIframeTo(inspector, EXAMPLE_NET_URI);
+  const treeAfterLoadingNet = `
+    id="root"
+      iframe
+        #document
+          html
+            head
+            body
+              id="net"`;
+  await assertMarkupViewAsTree(treeAfterLoadingNet, "#root", inspector);
+});
+
+/**
+ * This test will check the behavior when navigating a frame which is not
+ * visible in the markup view, because its parentNode has not been expanded yet.
+ *
+ * We expect a root-node resource to be emitted, but ideally we should not
+ * initialize the walker and inspector actors for the target of this root-node
+ * resource.
+ */
+add_task(async function navigateFrameNotExpandedInMarkupView() {
+  if (!isFissionEnabled()) {
+    // This test only makes sense with Fission and remote frames, otherwise the
+    // root-node resource will not be emitted for a frame navigation.
+    return;
+  }
+
+  const { inspector } = await openInspectorForURL(TEST_ORG_URI);
+  const resourceCommand = inspector.toolbox.resourceCommand;
+
+  // At this stage the expected layout of the markup view is
+  // v html     (expanded)
+  //   v body   (expanded)
+  //     > p    (collapsed)
+  //     > div  (collapsed)
+  //
+  // The iframe we are about to navigate is therefore hidden and we are not
+  // watching it - ie, it is not in the list of known NodeFronts/Actors.
+  const resource = await navigateIframeTo(inspector, EXAMPLE_COM_URI);
+
+  is(
+    resource.resourceType,
+    resourceCommand.TYPES.ROOT_NODE,
+    "A resource with resourceType ROOT_NODE was received when navigating"
+  );
+
+  // This highlights what doesn't work with the current approach.
+  // Since the root-node resource is a NodeFront watched via the WalkerFront,
+  // watching it for a new remote frame target implies initializing the
+  // inspector & walker fronts.
+  //
+  // If the resource was not a front (eg ContentDOMreference?) and was emitted
+  // by the target actor instead of the walker actor, the client can decide if
+  // the inspector and walker fronts should be initialized or not.
+  //
+  // In this test scenario, the children of the iframe were not known by the
+  // inspector before this navigation. Per the explanation above, the new target
+  // should not have an already instantiated inspector front.
+  //
+  // This should be fixed when implementing the RootNode resource on the server
+  // in https://bugzilla.mozilla.org/show_bug.cgi?id=1644190
+  todo(
+    !resource.targetFront.getCachedFront("inspector"),
+    "The inspector front for the new target should not be initialized"
+  );
+});
+
+async function navigateIframeTo(inspector, url) {
+  info("Navigate the test iframe to " + url);
+
+  const { commands } = inspector;
+  const { resourceCommand } = inspector.toolbox;
+  const onTargetProcessed = waitForTargetProcessed(commands, url);
+
+  const { onResource: onNewRoot } = await resourceCommand.waitForNextResource(
+    resourceCommand.TYPES.ROOT_NODE,
+    {
+      ignoreExistingResources: true,
+    }
+  );
+
+  info("Update the src attribute of the iframe tag");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [url], function (_url) {
+    content.document.querySelector("iframe").setAttribute("src", _url);
+  });
+
+  info("Wait for frameLoad/newRoot to resolve");
+  const newRootResult = await onNewRoot;
+
+  info("Wait for pending children updates");
+  await inspector.markup._waitForChildren();
+
+  if (isFissionEnabled()) {
+    info("Wait until the new target has been processed by TargetCommand");
+    await onTargetProcessed;
+  }
+
+  // Note: the newRootResult changes when the test runs with or without fission.
+  return newRootResult;
+}
+
+/**
+ * Returns a promise that waits until the provided commands's TargetCommand has fully
+ * processed a target with the provided URL.
+ * This will avoid navigating again before the new resource command  have fully
+ * attached to the new target.
+ */
+function waitForTargetProcessed(commands, url) {
+  return new Promise(resolve => {
+    const onTargetProcessed = targetFront => {
+      if (targetFront.url !== encodeURI(url)) {
+        return;
+      }
+      commands.targetCommand.off(
+        "processed-available-target",
+        onTargetProcessed
+      );
+      resolve();
+    };
+    commands.targetCommand.on("processed-available-target", onTargetProcessed);
+  });
+}
diff --git a/devtools/client/inspector/test/browser_inspector_fission_switch_target.js b/devtools/client/inspector/test/browser_inspector_fission_switch_target.js
new file mode 100644
index 0000000000..f8c7edc5dd
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_fission_switch_target.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test target-switching with the inspector.
+// This test should check both fission and non-fission target switching.
+
+const PARENT_PROCESS_URI = "about:robots";
+const EXAMPLE_COM_URI =
+  "https://example.com/document-builder.sjs?html=<div id=com>com";
+const EXAMPLE_ORG_URI =
+  "https://example.org/document-builder.sjs?html=<div id=org>org";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(PARENT_PROCESS_URI);
+  const aboutRobotsNodeFront = await getNodeFront(".title-text", inspector);
+  ok(!!aboutRobotsNodeFront, "Can retrieve a node front from about:robots");
+
+  info("Navigate to " + EXAMPLE_COM_URI);
+  await navigateTo(EXAMPLE_COM_URI);
+  const comNodeFront = await getNodeFront("#com", inspector);
+  ok(!!comNodeFront, "Can retrieve a node front from example.com");
+
+  await navigateTo(EXAMPLE_ORG_URI);
+  const orgNodeFront = await getNodeFront("#org", inspector);
+  ok(!!orgNodeFront, "Can retrieve a node front from example.org");
+
+  await navigateTo(PARENT_PROCESS_URI);
+  const aboutRobotsNodeFront2 = await getNodeFront(".title-text", inspector);
+  ok(!!aboutRobotsNodeFront2, "Can retrieve a node front from about:robots");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-01.js b/devtools/client/inspector/test/browser_inspector_highlighter-01.js
new file mode 100644
index 0000000000..2cdf530073
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-01.js
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that hovering over nodes in the markup-view shows the highlighter over
+// those nodes
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  let isVisible = !!inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  ok(!isVisible, "The highlighter is hidden by default");
+
+  info("Selecting the test node");
+  await selectNode("span", inspector);
+  const container = await getContainerForSelector("h1", inspector);
+
+  const onHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mousemove" },
+    inspector.markup.doc.defaultView
+  );
+  await onHighlight;
+
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "The highlighter is shown on a markup container hover");
+
+  ok(
+    await highlighterTestFront.assertHighlightedNode("h1"),
+    "The highlighter highlights the right node"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-02.js b/devtools/client/inspector/test/browser_inspector_highlighter-02.js
new file mode 100644
index 0000000000..d112dcb290
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-02.js
@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the highlighter is correctly displayed over a variety of elements
+
+const TEST_URI = URL_ROOT + "doc_inspector_highlighter.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  info("Selecting the simple, non-transformed DIV");
+  await selectAndHighlightNode("#simple-div", inspector);
+
+  let isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "The highlighter is shown");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#simple-div"),
+    "The highlighter's outline corresponds to the simple div"
+  );
+  await isNodeCorrectlyHighlighted(highlighterTestFront, "#simple-div");
+
+  info("Selecting the rotated DIV");
+  await selectAndHighlightNode("#rotated-div", inspector);
+
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "The highlighter is shown");
+  info(
+    "Check that the highlighter is displayed at the expected position for rotated div"
+  );
+  await isNodeCorrectlyHighlighted(highlighterTestFront, "#rotated-div");
+
+  info("Selecting the zero width height DIV");
+  await selectAndHighlightNode("#widthHeightZero-div", inspector);
+
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "The highlighter is shown");
+  info(
+    "Check that the highlighter is displayed at the expected position for a zero width height div"
+  );
+  await isNodeCorrectlyHighlighted(
+    highlighterTestFront,
+    "#widthHeightZero-div"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-03.js b/devtools/client/inspector/test/browser_inspector_highlighter-03.js
new file mode 100644
index 0000000000..8be820248b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-03.js
@@ -0,0 +1,125 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that iframes are correctly highlighted.
+
+const IFRAME_SRC = `<style>
+    body {
+      margin:0;
+      height:100%;
+      background-color:tomato;
+    }
+  </style>
+  <body class=remote>hello from iframe</body>`;
+
+const DOCUMENT_SRC = `<style>
+    iframe {
+      height:200px;
+      border: 11px solid black;
+      padding: 13px;
+    }
+    body,iframe,h1 {
+      margin:0;
+      padding: 0;
+    }
+  </style>
+  <body>
+    <iframe src='https://example.com/document-builder.sjs?html=${encodeURIComponent(
+      IFRAME_SRC
+    )}'></iframe>
+  </body>`;
+
+const TEST_URI = "data:text/html;charset=utf-8," + DOCUMENT_SRC;
+
+add_task(async function () {
+  const { inspector, toolbox, highlighterTestFront } =
+    await openInspectorForURL(TEST_URI);
+
+  info("Waiting for box mode to show.");
+  const topLevelBodyNodeFront = await getNodeFront("body", inspector);
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    topLevelBodyNodeFront
+  );
+
+  info("Waiting for element picker to become active.");
+  await startPicker(toolbox);
+
+  info("Check that hovering iframe padding does highlight the iframe element");
+  // the iframe has 13px of padding, so hovering at [1,1] should be enough.
+  await hoverElement(inspector, "iframe", 1, 1);
+
+  await isNodeCorrectlyHighlighted(highlighterTestFront, "iframe");
+
+  info("Scrolling the document");
+  await setContentPageElementProperty(
+    "iframe",
+    "style",
+    "margin-bottom: 2000px"
+  );
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.scrollBy(0, 40)
+  );
+
+  // target the body within the iframe
+  const iframeBodySelector = ["iframe", "body"];
+  let iframeHighlighterTestFront = highlighterTestFront;
+  let bodySelectorWithinHighlighterEnv = iframeBodySelector;
+
+  if (isFissionEnabled() || isEveryFrameTargetEnabled()) {
+    const target = toolbox.commands.targetCommand
+      .getAllTargets([toolbox.commands.targetCommand.TYPES.FRAME])
+      .find(t => t.url.startsWith("https://example.com"));
+
+    // We need to retrieve the highlighterTestFront for the frame target.
+    iframeHighlighterTestFront = await getHighlighterTestFront(toolbox, {
+      target,
+    });
+
+    bodySelectorWithinHighlighterEnv = ["body"];
+  }
+
+  info("Check that hovering the iframe <body> highlights the expected element");
+  await hoverElement(inspector, iframeBodySelector, 40, 40);
+
+  ok(
+    await iframeHighlighterTestFront.assertHighlightedNode(
+      bodySelectorWithinHighlighterEnv
+    ),
+    "highlighter is shown on the iframe body"
+  );
+  await isNodeCorrectlyHighlighted(
+    iframeHighlighterTestFront,
+    iframeBodySelector
+  );
+
+  info("Scrolling the document up");
+  // scroll up so we can inspect the top level document again
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.scrollTo(0, 0)
+  );
+
+  info("Check that hovering iframe padding again does work");
+  // the iframe has 13px of padding, so hovering at [1,1] should be enough.
+  await hoverElement(inspector, "iframe", 1, 1);
+  await isNodeCorrectlyHighlighted(highlighterTestFront, "iframe");
+
+  info("And finally check that hovering the iframe <body> again does work");
+  info("Check that hovering the iframe <body> highlights the expected element");
+  await hoverElement(inspector, iframeBodySelector, 40, 40);
+
+  ok(
+    await iframeHighlighterTestFront.assertHighlightedNode(
+      bodySelectorWithinHighlighterEnv
+    ),
+    "highlighter is shown on the iframe body"
+  );
+  await isNodeCorrectlyHighlighted(
+    iframeHighlighterTestFront,
+    iframeBodySelector
+  );
+
+  info("Stop the element picker.");
+  await toolbox.nodePicker.stop({ canceled: true });
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-04.js b/devtools/client/inspector/test/browser_inspector_highlighter-04.js
new file mode 100644
index 0000000000..eb8e2b3deb
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-04.js
@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that various highlighter elements exist.
+
+const TEST_URL = "data:text/html;charset=utf-8,<div>test</div>";
+
+// IDs of all highlighter elements that we expect to find in the canvasFrame.
+const ELEMENTS = [
+  "box-model-root",
+  "box-model-elements",
+  "box-model-margin",
+  "box-model-border",
+  "box-model-padding",
+  "box-model-content",
+  "box-model-guide-top",
+  "box-model-guide-right",
+  "box-model-guide-bottom",
+  "box-model-guide-left",
+  "box-model-infobar-container",
+  "box-model-infobar-tagname",
+  "box-model-infobar-id",
+  "box-model-infobar-classes",
+  "box-model-infobar-pseudo-classes",
+  "box-model-infobar-dimensions",
+];
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+
+  info("Show the box-model highlighter");
+  const divFront = await getNodeFront("div", inspector);
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    divFront
+  );
+
+  for (const id of ELEMENTS) {
+    const foundId = await highlighterTestFront.getHighlighterNodeAttribute(
+      id,
+      "id"
+    );
+    is(foundId, id, "Element " + id + " found");
+  }
+
+  info("Hide the box-model highlighter");
+  await inspector.highlighters.hideHighlighterType(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-05.js b/devtools/client/inspector/test/browser_inspector_highlighter-05.js
new file mode 100644
index 0000000000..4c4fd4781c
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-05.js
@@ -0,0 +1,72 @@
+/* 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/. */
+/* eslint-disable mozilla/no-arbitrary-setTimeout */
+
+"use strict";
+
+// This is testing that the Anonymous Content is properly inserted into the document.
+// Usually that is happening during the "interactive" state of the document, to have them
+// ready as soon as possible.
+// However, in some conditions, that's not possible since we don't have access yet to
+// the `CustomContentContainer`, that is used to add the Anonymous Content.
+// That can happen if the page has some external resource, as <link>, that takes time
+// to load and / or returns the wrong content. This is not happening, for instance, with
+// images.
+//
+// In those case, we want to be sure that if we're not able to insert the Anonymous
+// Content at the "interactive" state, we're doing so when the document is loaded.
+//
+// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1365075
+
+const server = createTestHTTPServer();
+const filepath = "/slow.css";
+const cssuri = `http://localhost:${server.identity.primaryPort}${filepath}`;
+
+// Register a slow css file handler so we can simulate a long loading time.
+server.registerContentType("css", "text/css");
+server.registerPathHandler(filepath, (metadata, response) => {
+  info("CSS has been requested");
+  response.processAsync();
+  setTimeout(() => {
+    info("CSS is responding");
+    response.finish();
+  }, 2000);
+});
+
+const TEST_URL =
+  "data:text/html," +
+  encodeURIComponent(`
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <link href="${cssuri}" rel="stylesheet" />
+    </head>
+    <body>
+      <p>Slow page</p>
+     </body>
+  </html>
+`);
+
+add_task(async function () {
+  info("Open the inspector to a blank page.");
+  const { inspector } = await openInspectorForURL("about:blank");
+
+  info("Navigate to the test url and waiting for the page to be loaded.");
+  await navigateTo(TEST_URL);
+
+  info("Shows the box model highligher for the <p> node.");
+  const nodeFront = await getNodeFront("p", inspector);
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    nodeFront
+  );
+
+  info("Check the node is highlighted.");
+  const highlighterTestFront = await getHighlighterTestFront(inspector.toolbox);
+  is(
+    await highlighterTestFront.isHighlighting(),
+    true,
+    "Box Model highlighter is working as expected."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-06.js b/devtools/client/inspector/test/browser_inspector_highlighter-06.js
new file mode 100644
index 0000000000..11f1cee1a1
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-06.js
@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the browser remembers the previous scroll position after reload, even with
+// Inspector opened - Bug 1382341.
+// NOTE: Using a real file instead data: URL since the bug won't happen on data: URL
+const TEST_URI = URL_ROOT + "doc_inspector_highlighter_scroll.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  await scrollContentPageNodeIntoView(gBrowser.selectedBrowser, "a");
+  await selectAndHighlightNode("a", inspector);
+
+  const markupLoaded = inspector.once("markuploaded");
+
+  const y = await getPageYOffset();
+  isnot(y, 0, "window scrolled vertically.");
+
+  info("Reloading page.");
+  await reloadBrowser();
+
+  info("Waiting for markupview to load after reload.");
+  await markupLoaded;
+
+  const newY = await getPageYOffset();
+  is(y, newY, "window remember the previous scroll position.");
+});
+
+async function getPageYOffset() {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.pageYOffset
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-07.js b/devtools/client/inspector/test/browser_inspector_highlighter-07.js
new file mode 100644
index 0000000000..cb8c11cdd0
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-07.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js",
+  this
+);
+
+// Test that the highlighter works when the debugger is paused.
+
+function debuggerIsPaused(dbg) {
+  return !!dbg.selectors.getIsPaused(dbg.selectors.getCurrentThread());
+}
+
+function waitForPaused(dbg) {
+  return new Promise(resolve => {
+    if (debuggerIsPaused(dbg)) {
+      resolve();
+      return;
+    }
+
+    const unsubscribe = dbg.store.subscribe(() => {
+      if (debuggerIsPaused(dbg)) {
+        unsubscribe();
+        resolve();
+      }
+    });
+  });
+}
+
+const IFRAME_SRC =
+  "<style>" +
+  "body {" +
+  "margin:0;" +
+  "height:100%;" +
+  "background-color:red" +
+  "}" +
+  "</style><body>hello from iframe</body>";
+
+const DOCUMENT_SRC =
+  "<style>" +
+  "iframe {" +
+  "height:200px;" +
+  "border: 11px solid black;" +
+  "padding: 13px;" +
+  "}" +
+  "body,iframe {" +
+  "margin:0" +
+  "}" +
+  "</style>" +
+  "<body>" +
+  "<script>setInterval('debugger', 100)</script>" +
+  "<iframe src='data:text/html;charset=utf-8," +
+  IFRAME_SRC +
+  "'></iframe>" +
+  "</body>";
+
+const TEST_URI = "data:text/html;charset=utf-8," + DOCUMENT_SRC;
+
+add_task(async function () {
+  const { inspector, toolbox, highlighterTestFront, tab } =
+    await openInspectorForURL(TEST_URI);
+
+  await gDevTools.showToolboxForTab(tab, { toolId: "jsdebugger" });
+  const dbg = await createDebuggerContext(toolbox);
+
+  await waitForPaused(dbg);
+
+  await gDevTools.showToolboxForTab(tab, { toolId: "inspector" });
+
+  // Needed to get this test to pass consistently :(
+  await waitForTime(1000);
+
+  info("Waiting for box mode to show.");
+  const body = await getNodeFront("body", inspector);
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    body
+  );
+
+  info("Waiting for element picker to become active.");
+  await startPicker(toolbox);
+
+  info("Moving mouse over iframe padding.");
+  await hoverElement(inspector, "iframe", 1, 1);
+
+  info("Performing checks");
+  await isNodeCorrectlyHighlighted(highlighterTestFront, "iframe");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-08.js b/devtools/client/inspector/test/browser_inspector_highlighter-08.js
new file mode 100644
index 0000000000..49b544a325
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-08.js
@@ -0,0 +1,67 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that performing multiple requests to highlight nodes or to hide the highlighter,
+// without waiting for the former ones to complete, still works well.
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html,"
+  );
+  const html = await getNodeFront("html", inspector);
+  const body = await getNodeFront("body", inspector);
+  const type = inspector.highlighters.TYPES.BOXMODEL;
+  const getActiveHighlighter = () => {
+    return inspector.highlighters.getActiveHighlighter(type);
+  };
+  is(getActiveHighlighter(), null, "The highlighter is hidden by default");
+
+  info("Highlight <body>, and hide the highlighter immediately after");
+  await Promise.all([
+    inspector.highlighters.showHighlighterTypeForNode(type, body),
+    inspector.highlighters.hideHighlighterType(type),
+  ]);
+  is(getActiveHighlighter(), null, "The highlighter is hidden");
+
+  info("Highlight <body>, then <html>, then <body> again, synchronously");
+  await Promise.all([
+    inspector.highlighters.showHighlighterTypeForNode(type, body),
+    inspector.highlighters.showHighlighterTypeForNode(type, html),
+    inspector.highlighters.showHighlighterTypeForNode(type, body),
+  ]);
+  ok(
+    await highlighterTestFront.assertHighlightedNode("body"),
+    "The highlighter highlights <body>"
+  );
+
+  info("Highlight <html>, then <body>, then <html> again, synchronously");
+  await Promise.all([
+    inspector.highlighters.showHighlighterTypeForNode(type, html),
+    inspector.highlighters.showHighlighterTypeForNode(type, body),
+    inspector.highlighters.showHighlighterTypeForNode(type, html),
+  ]);
+  ok(
+    await highlighterTestFront.assertHighlightedNode("html"),
+    "The highlighter highlights <html>"
+  );
+
+  info("Hide the highlighter, and highlight <html> immediately after");
+  await Promise.all([
+    inspector.highlighters.hideHighlighterType(type),
+    inspector.highlighters.showHighlighterTypeForNode(type, body),
+  ]);
+  ok(
+    await highlighterTestFront.assertHighlightedNode("body"),
+    "The highlighter highlights <body>"
+  );
+
+  info("Highlight <html>, and hide the highlighter immediately after");
+  await Promise.all([
+    inspector.highlighters.showHighlighterTypeForNode(type, html),
+    inspector.highlighters.hideHighlighterType(type),
+  ]);
+  is(getActiveHighlighter(), null, "The highlighter is hidden");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_01.js
new file mode 100644
index 0000000000..f0daf4bbe8
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_01.js
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that highlighters can be configured to automatically hide after a delay.
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<p id='one'>TEST 1</p>"
+  );
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const HALF_SECOND = 500;
+  const nodeFront = await getNodeFront("#one", inspector);
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  const onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  info("Show Box Model Highlighter, then hide after half a second");
+  inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    nodeFront,
+    { duration: HALF_SECOND }
+  );
+
+  info("Wait for Box Model Highlighter shown");
+  await onHighlighterShown;
+  info("Wait for Box Model Highlighter hidden");
+  await onHighlighterHidden;
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_02.js
new file mode 100644
index 0000000000..bebc87f593
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_02.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that configuring two different highlighters to autohide
+// will not overwrite each other's timers.
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<p id='one'>TEST 1</p>"
+  );
+
+  const HALF_SECOND = 500;
+  const nodeFront = await getNodeFront("#one", inspector);
+
+  const waitForShowEvents = waitForNEvents(
+    inspector.highlighters,
+    "highlighter-shown",
+    2
+  );
+  const waitForHideEvents = waitForNEvents(
+    inspector.highlighters,
+    "highlighter-hidden",
+    2
+  );
+
+  info("Show Box Model Highlighter, then hide after half a second");
+  inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    nodeFront,
+    { duration: HALF_SECOND }
+  );
+
+  info("Show Selector Highlighter, then hide after half a second");
+  inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.SELECTOR,
+    nodeFront,
+    { selector: "#one", duration: HALF_SECOND }
+  );
+
+  info("Waiting for 2 highlighter-shown and 2 highlighter-hidden events");
+  await Promise.all([waitForShowEvents, waitForHideEvents]);
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
new file mode 100644
index 0000000000..188b99a7cb
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { getTimeoutMultiplier } = ChromeUtils.importESModule(
+  "chrome://remote/content/shared/AppInfo.sys.mjs"
+);
+
+// Test that configuring a highlighter to autohide twice
+// will replace the first timer and hide just once.
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<p id='one'>TEST 1</p>"
+  );
+
+  // On opt builds, use 500ms and 1000ms for popup timeouts.
+  // On debug builds, multiply the first timeout by the platform multiplier to avoid
+  // an extra `hidden` event between the `showHighlighterTypeForNode` commands.
+  const FIRST_POPUP_TIMEOUT = getTimeoutMultiplier() * 500;
+  const SECOND_POPUP_TIMEOUT = 1000;
+
+  const nodeFront = await getNodeFront("#one", inspector);
+
+  const waitForShowEvents = waitForNEvents(
+    inspector.highlighters,
+    "highlighter-shown",
+    2
+  );
+  const waitForHideEvents = waitForNEvents(
+    inspector.highlighters,
+    "highlighter-hidden",
+    1
+  );
+
+  info("Show Box Model Highlighter, then hide after half a second");
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    nodeFront,
+    { duration: FIRST_POPUP_TIMEOUT }
+  );
+
+  info("Show Box Model Highlighter again, then hide after one second");
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    nodeFront,
+    { duration: SECOND_POPUP_TIMEOUT }
+  );
+
+  info("Waiting for 2 highlighter-shown and 1 highlighter-hidden event");
+  await Promise.all([waitForShowEvents, waitForHideEvents]);
+
+  /*
+  Since the second duration passed is longer than the first and is supposed to overwrite
+  the first, it is reasonable to expect that the "highlighter-hidden" event was emitted
+  after the second (longer) duration expired. As an added check, we naively wait for an
+  additional time amounting to the sum of both durations to check if the first timer was
+  somehow not overwritten and fires another "highlighter-hidden" event.
+   */
+  let wasEmitted = false;
+  const waitForExtraEvent = new Promise((resolve, reject) => {
+    const _handler = () => {
+      wasEmitted = true;
+      resolve();
+    };
+
+    inspector.highlighters.on("highlighter-hidden", _handler, { once: true });
+  });
+
+  info("Wait to see if another highlighter-hidden event is emitted");
+  await Promise.race([
+    waitForExtraEvent,
+    wait(FIRST_POPUP_TIMEOUT + SECOND_POPUP_TIMEOUT),
+  ]);
+
+  is(wasEmitted, false, "An extra highlighter-hidden event was not emitted");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-autohide.js b/devtools/client/inspector/test/browser_inspector_highlighter-autohide.js
new file mode 100644
index 0000000000..4d658e77ad
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-autohide.js
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that clicking on a node in the markup view or picking a node with the node picker
+// shows a highlighter which is automatically hidden after a delay.
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector, toolbox, highlighterTestFront } =
+    await openInspectorForURL(
+      "data:text/html;charset=utf-8,<p id='one'>TEST 1</p><p id='two'>TEST 2</p>"
+    );
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  // While in test mode, the configuration to automatically hide Box Model Highlighters
+  // after a delay is ignored to prevent intermittent test failures from race conditions.
+  // Restore this behavior just for this test because it is explicitly checked.
+  const HIGHLIGHTER_AUTOHIDE_TIMER = inspector.HIGHLIGHTER_AUTOHIDE_TIMER;
+  inspector.HIGHLIGHTER_AUTOHIDE_TIMER = 1000;
+
+  registerCleanupFunction(() => {
+    // Restore the value to avoid impacting other tests.
+    inspector.HIGHLIGHTER_AUTOHIDE_TIMER = HIGHLIGHTER_AUTOHIDE_TIMER;
+  });
+
+  info(
+    "Check that selecting an element in the markup-view shows the highlighter and auto-hides it"
+  );
+  let onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  const onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  let delay;
+  const start = Date.now();
+  onHighlighterHidden.then(() => {
+    delay = Date.now() - start;
+  });
+
+  await clickContainer("#one", inspector);
+
+  info("Wait for Box Model Highlighter shown");
+  await onHighlighterShown;
+  info("Wait for Box Model Highlighter hidden");
+  await onHighlighterHidden;
+
+  ok(true, "Highlighter was shown and hidden");
+  Assert.greaterOrEqual(
+    delay,
+    inspector.HIGHLIGHTER_AUTOHIDE_TIMER,
+    `Highlighter was hidden after expected delay (${delay}ms)`
+  );
+
+  info("Check that picking a node hides the highlighter right away");
+  onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#two", 0, 0);
+  await onHighlighterShown;
+  ok(
+    await highlighterTestFront.isHighlighting(),
+    "Highlighter was shown when hovering the node"
+  );
+
+  await pickElement(inspector, "#two", 0, 0);
+  is(
+    await highlighterTestFront.isHighlighting(),
+    false,
+    "Highlighter gets hidden without delay after picking a node"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-by-type.js b/devtools/client/inspector/test/browser_inspector_highlighter-by-type.js
new file mode 100644
index 0000000000..4687448ec9
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-by-type.js
@@ -0,0 +1,73 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that custom highlighters can be retrieved by type and that they expose
+// the expected API.
+
+const TEST_URL = "data:text/html;charset=utf-8,custom highlighters";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await manyInstancesOfCustomHighlighters(inspector);
+  await showHideMethodsAreAvailable(inspector);
+  await unknownHighlighterTypeShouldntBeAccepted(inspector);
+});
+
+async function manyInstancesOfCustomHighlighters({ inspectorFront }) {
+  const h1 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
+  const h2 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
+  Assert.notStrictEqual(
+    h1,
+    h2,
+    "getHighlighterByType returns new instances every time (1)"
+  );
+
+  const h3 = await inspectorFront.getHighlighterByType(
+    "CssTransformHighlighter"
+  );
+  const h4 = await inspectorFront.getHighlighterByType(
+    "CssTransformHighlighter"
+  );
+  Assert.notStrictEqual(
+    h3,
+    h4,
+    "getHighlighterByType returns new instances every time (2)"
+  );
+  ok(
+    h3 !== h1 && h3 !== h2,
+    "getHighlighterByType returns new instances every time (3)"
+  );
+  ok(
+    h4 !== h1 && h4 !== h2,
+    "getHighlighterByType returns new instances every time (4)"
+  );
+
+  await h1.finalize();
+  await h2.finalize();
+  await h3.finalize();
+  await h4.finalize();
+}
+
+async function showHideMethodsAreAvailable({ inspectorFront }) {
+  const h1 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
+  const h2 = await inspectorFront.getHighlighterByType(
+    "CssTransformHighlighter"
+  );
+
+  ok("show" in h1, "Show method is present on the front API");
+  ok("show" in h2, "Show method is present on the front API");
+  ok("hide" in h1, "Hide method is present on the front API");
+  ok("hide" in h2, "Hide method is present on the front API");
+
+  await h1.finalize();
+  await h2.finalize();
+}
+
+async function unknownHighlighterTypeShouldntBeAccepted({ inspectorFront }) {
+  const h = await inspectorFront.getHighlighterByType("whatever");
+  ok(!h, "No highlighter was returned for the invalid type");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cancel.js b/devtools/client/inspector/test/browser_inspector_highlighter-cancel.js
new file mode 100644
index 0000000000..4502870863
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cancel.js
@@ -0,0 +1,94 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that canceling the element picker zooms back on the focused element. Bug 1224304.
+
+const TEST_URL = URL_ROOT + "doc_inspector_long-divs.html";
+
+const isMac = Services.appinfo.OS === "Darwin";
+const TESTS = [
+  {
+    key: "VK_ESCAPE",
+    options: {},
+    // Escape would open the split console if the toolbox was focused
+    focusToolbox: false,
+  },
+  {
+    key: "C",
+    options: {
+      metaKey: isMac,
+      ctrlKey: !isMac,
+      shiftKey: true,
+    },
+    // Test with the toolbox focused to check the client side event listener.
+    focusToolbox: true,
+  },
+  {
+    key: "C",
+    options: {
+      metaKey: isMac,
+      ctrlKey: !isMac,
+      shiftKey: true,
+    },
+    // Test with the content page focused to check the actor's event listener.
+    focusToolbox: false,
+  },
+];
+
+for (const { key, options, focusToolbox } of TESTS) {
+  add_task(async function () {
+    info(`Testing cancel shortcut: ${key} with toolbox focus: ${focusToolbox}`);
+
+    const { inspector, toolbox, highlighterTestFront } =
+      await openInspectorForURL(TEST_URL);
+    await selectAndHighlightNode("#focus-here", inspector);
+    ok(
+      await highlighterTestFront.assertHighlightedNode("#focus-here"),
+      "The highlighter focuses on div#focus-here"
+    );
+    ok(
+      isSelectedMarkupNodeInView(inspector),
+      "The currently selected node is on the screen."
+    );
+
+    await startPicker(toolbox);
+
+    await hoverElement(inspector, "#zoom-here");
+    ok(
+      !isSelectedMarkupNodeInView(inspector),
+      "The currently selected node is off the screen."
+    );
+
+    if (focusToolbox) {
+      toolbox.win.focus();
+    }
+
+    await cancelPickerByShortcut(toolbox, key, options);
+    ok(
+      isSelectedMarkupNodeInView(inspector),
+      "The currently selected node is focused back on the screen."
+    );
+
+    is(
+      await highlighterTestFront.isHighlighting(),
+      false,
+      "The highlighter was hidden"
+    );
+  });
+}
+
+async function cancelPickerByShortcut(toolbox, key, options) {
+  info("Key pressed. Waiting for picker to be canceled.");
+  const onStopped = toolbox.nodePicker.once("picker-node-canceled");
+  EventUtils.synthesizeKey(key, options, toolbox.win);
+  return onStopped;
+}
+
+function isSelectedMarkupNodeInView(inspector) {
+  const selectedNodeContainer = inspector.markup._selectedContainer.elt;
+  const bounds = selectedNodeContainer.getBoundingClientRect();
+  return bounds.top > 0 && bounds.bottom > 0;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-comments.js b/devtools/client/inspector/test/browser_inspector_highlighter-comments.js
new file mode 100644
index 0000000000..615e110d89
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-comments.js
@@ -0,0 +1,119 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that hovering over the markup-view's containers doesn't always show the
+// highlighter, depending on the type of node hovered over.
+
+const TEST_PAGE = URL_ROOT + "doc_inspector_highlighter-comments.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_PAGE
+  );
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  const markupView = inspector.markup;
+  await selectNode("p", inspector);
+
+  info("Hovering over #id1 and waiting for highlighter to appear.");
+  await hoverElement("#id1");
+  await assertHighlighterShownOn("#id1");
+
+  info("Hovering over comment node and ensuring highlighter doesn't appear.");
+  await hoverComment();
+  await assertHighlighterHidden();
+
+  info("Hovering over #id1 again and waiting for highlighter to appear.");
+  await hoverElement("#id1");
+  await assertHighlighterShownOn("#id1");
+
+  info("Hovering over #id2 and waiting for highlighter to appear.");
+  await hoverElement("#id2");
+  await assertHighlighterShownOn("#id2");
+
+  info("Hovering over <script> and ensuring highlighter doesn't appear.");
+  await hoverElement("script");
+  await assertHighlighterHidden();
+
+  info("Hovering over #id3 and waiting for highlighter to appear.");
+  await hoverElement("#id3");
+  await assertHighlighterShownOn("#id3");
+
+  info("Hovering over hidden #id4 and ensuring highlighter doesn't appear.");
+  await hoverElement("#id4");
+  await assertHighlighterHidden();
+
+  info("Hovering over a text node and waiting for highlighter to appear.");
+  await hoverTextNode("Visible text node");
+  await assertHighlighterShownOnTextNode("body", 14);
+
+  function hoverContainer(container) {
+    const onHighlighterShown = waitForHighlighterTypeShown(
+      inspector.highlighters.TYPES.BOXMODEL
+    );
+
+    container.tagLine.scrollIntoView();
+    EventUtils.synthesizeMouse(
+      container.tagLine,
+      2,
+      2,
+      { type: "mousemove" },
+      markupView.doc.defaultView
+    );
+
+    return onHighlighterShown;
+  }
+
+  async function hoverElement(selector) {
+    info(`Hovering node ${selector} in the markup view`);
+    const container = await getContainerForSelector(selector, inspector);
+    return hoverContainer(container);
+  }
+
+  function hoverComment() {
+    info("Hovering the comment node in the markup view");
+    for (const [node, container] of markupView._containers) {
+      if (node.nodeType === Node.COMMENT_NODE) {
+        return hoverContainer(container);
+      }
+    }
+    return null;
+  }
+
+  function hoverTextNode(text) {
+    info(`Hovering the text node "${text}" in the markup view`);
+    const container = [...markupView._containers].filter(([nodeFront]) => {
+      return (
+        nodeFront.nodeType === Node.TEXT_NODE &&
+        nodeFront._form.nodeValue.trim() === text.trim()
+      );
+    })[0][1];
+    return hoverContainer(container);
+  }
+
+  async function assertHighlighterShownOn(selector) {
+    ok(
+      await highlighterTestFront.assertHighlightedNode(selector),
+      "Highlighter is shown on the right node: " + selector
+    );
+  }
+
+  async function assertHighlighterShownOnTextNode(
+    parentSelector,
+    childNodeIndex
+  ) {
+    ok(
+      await highlighterTestFront.assertHighlightedTextNode(
+        parentSelector,
+        childNodeIndex
+      ),
+      "Highlighter is shown on the right text node"
+    );
+  }
+
+  async function assertHighlighterHidden() {
+    const isVisible = await highlighterTestFront.isHighlighting();
+    ok(!isVisible, "Highlighter is hidden");
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_01.js
new file mode 100644
index 0000000000..cbc10c8843
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_01.js
@@ -0,0 +1,91 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the canvas highlighter element of the css grid highlighter.
+
+const TEST_URL = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+    #cell1 {
+      grid-column: 1;
+      grid-row: 1;
+    }
+    #cell2 {
+      grid-column: 2;
+      grid-row: 1;
+    }
+    #cell3 {
+      grid-column: 1;
+      grid-row: 2;
+    }
+    #cell4 {
+      grid-column: 2;
+      grid-row: 2;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+`;
+
+const HIGHLIGHTER_TYPE = "CssGridHighlighter";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URL)
+  );
+  const front = inspector.inspectorFront;
+  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
+
+  await isHiddenByDefault(highlighterTestFront, highlighter);
+  await isVisibleWhenShown(highlighterTestFront, inspector, highlighter);
+
+  await highlighter.finalize();
+});
+
+async function isHiddenByDefault(highlighterTestFront, highlighterFront) {
+  info("Checking that the highlighter is hidden by default");
+
+  const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-grid-canvas",
+    "hidden",
+    highlighterFront
+  );
+  ok(hidden, "The highlighter is hidden by default");
+}
+
+async function isVisibleWhenShown(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Asking to show the highlighter on the test node");
+
+  const node = await getNodeFront("#grid", inspector);
+  await highlighterFront.show(node);
+
+  let hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-grid-canvas",
+    "hidden",
+    highlighterFront
+  );
+  ok(!hidden, "The highlighter is visible");
+
+  info("Hiding the highlighter");
+  await highlighterFront.hide();
+
+  hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-grid-canvas",
+    "hidden",
+    highlighterFront
+  );
+  ok(hidden, "The highlighter is hidden");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_02.js
new file mode 100644
index 0000000000..2fabf9b34b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_02.js
@@ -0,0 +1,51 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that grid layouts without items don't cause grid highlighter errors.
+
+const TEST_URL = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+      grid-template-columns: 20px 20px;
+      grid-gap: 15px;
+    }
+  </style>
+  <div class="grid"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "CssGridHighlighter";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URL)
+  );
+  const front = inspector.inspectorFront;
+  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
+
+  info("Try to show the highlighter on the grid container");
+  const node = await getNodeFront(".grid", inspector);
+  await highlighter.show(node);
+
+  let hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-grid-canvas",
+    "hidden",
+    highlighter
+  );
+  ok(!hidden, "The highlighter is visible");
+
+  info("Hiding the highlighter");
+  await highlighter.hide();
+
+  hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-grid-canvas",
+    "hidden",
+    highlighter
+  );
+  ok(hidden, "The highlighter is hidden");
+
+  await highlighter.finalize();
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_01.js
new file mode 100644
index 0000000000..ae4e968263
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_01.js
@@ -0,0 +1,95 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the CSS shapes highlighter.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+const SHAPE_IDS = ["polygon", "ellipse", "rect"];
+const SHAPE_TYPES = [
+  {
+    shapeName: "polygon",
+    highlighter: "polygon",
+  },
+  {
+    shapeName: "circle",
+    highlighter: "ellipse",
+  },
+  {
+    shapeName: "ellipse",
+    highlighter: "ellipse",
+  },
+  {
+    shapeName: "inset",
+    highlighter: "rect",
+  },
+];
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
+
+  await isHiddenByDefault(highlighterTestFront, highlighter);
+  await isVisibleWhenShown(highlighterTestFront, inspector, highlighter);
+
+  await highlighter.finalize();
+});
+
+async function getShapeHidden(highlighterTestFront, highlighterFront) {
+  const hidden = {};
+  for (const shape of SHAPE_IDS) {
+    hidden[shape] = await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-" + shape,
+      "hidden",
+      highlighterFront
+    );
+  }
+  return hidden;
+}
+
+async function isHiddenByDefault(highlighterTestFront, highlighterFront) {
+  info("Checking that highlighter is hidden by default");
+
+  const polygonHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-polygon",
+    "hidden",
+    highlighterFront
+  );
+  const ellipseHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "hidden",
+    highlighterFront
+  );
+  ok(polygonHidden && ellipseHidden, "The highlighter is hidden by default");
+}
+
+async function isVisibleWhenShown(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  for (const { shapeName, highlighter } of SHAPE_TYPES) {
+    info(`Asking to show the highlighter on the ${shapeName} node`);
+
+    const node = await getNodeFront(`#${shapeName}`, inspector);
+    await highlighterFront.show(node, { mode: "cssClipPath" });
+
+    const hidden = await getShapeHidden(highlighterTestFront, highlighterFront);
+    ok(!hidden[highlighter], `The ${shapeName} highlighter is visible`);
+  }
+
+  info("Hiding the highlighter");
+  await highlighterFront.hide();
+
+  const hidden = await getShapeHidden(highlighterTestFront, highlighterFront);
+  ok(
+    hidden.polygon && hidden.ellipse && hidden.rect,
+    "The highlighter is hidden"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_02.js
new file mode 100644
index 0000000000..1cb72c7b4d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_02.js
@@ -0,0 +1,157 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Make sure that the CSS shapes highlighters have the correct attributes.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
+
+  await polygonHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
+  await circleHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
+  await ellipseHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
+  await insetHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
+
+  await highlighter.finalize();
+});
+
+async function polygonHasCorrectAttrs(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Checking polygon highlighter has correct points");
+
+  const polygonNode = await getNodeFront("#polygon", inspector);
+  await highlighterFront.show(polygonNode, { mode: "cssClipPath" });
+
+  const points = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-polygon",
+    "points",
+    highlighterFront
+  );
+  const realPoints =
+    "0,0 12.5,50 25,0 37.5,50 50,0 62.5,50 " +
+    "75,0 87.5,50 100,0 90,100 50,60 10,100";
+  is(points, realPoints, "Polygon highlighter has correct points");
+}
+
+async function circleHasCorrectAttrs(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Checking circle highlighter has correct attributes");
+
+  const circleNode = await getNodeFront("#circle", inspector);
+  await highlighterFront.show(circleNode, { mode: "cssClipPath" });
+
+  const rx = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "rx",
+    highlighterFront
+  );
+  const ry = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "ry",
+    highlighterFront
+  );
+  const cx = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "cx",
+    highlighterFront
+  );
+  const cy = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "cy",
+    highlighterFront
+  );
+
+  is(rx, "25", "Circle highlighter has correct rx");
+  is(ry, "25", "Circle highlighter has correct ry");
+  is(cx, "30", "Circle highlighter has correct cx");
+  is(cy, "40", "Circle highlighter has correct cy");
+}
+
+async function ellipseHasCorrectAttrs(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Checking ellipse highlighter has correct attributes");
+
+  const ellipseNode = await getNodeFront("#ellipse", inspector);
+  await highlighterFront.show(ellipseNode, { mode: "cssClipPath" });
+
+  const rx = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "rx",
+    highlighterFront
+  );
+  const ry = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "ry",
+    highlighterFront
+  );
+  const cx = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "cx",
+    highlighterFront
+  );
+  const cy = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-ellipse",
+    "cy",
+    highlighterFront
+  );
+
+  is(rx, "40", "Ellipse highlighter has correct rx");
+  is(ry, "30", "Ellipse highlighter has correct ry");
+  is(cx, "25", "Ellipse highlighter has correct cx");
+  is(cy, "30", "Ellipse highlighter has correct cy");
+}
+
+async function insetHasCorrectAttrs(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Checking rect highlighter has correct attributes");
+
+  const insetNode = await getNodeFront("#inset", inspector);
+  await highlighterFront.show(insetNode, { mode: "cssClipPath" });
+
+  const x = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-rect",
+    "x",
+    highlighterFront
+  );
+  const y = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-rect",
+    "y",
+    highlighterFront
+  );
+  const width = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-rect",
+    "width",
+    highlighterFront
+  );
+  const height = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-rect",
+    "height",
+    highlighterFront
+  );
+
+  is(x, "15", "Rect highlighter has correct x");
+  is(y, "25", "Rect highlighter has correct y");
+  is(width, "72.5", "Rect highlighter has correct width");
+  is(height, "45", "Rect highlighter has correct height");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_03.js
new file mode 100644
index 0000000000..7d1b7d0ca6
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_03.js
@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Make sure that the CSS shapes highlighters have the correct size
+// in different zoom levels and with different geometry-box.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+const TEST_LEVELS = [0.5, 1, 2];
+
+add_task(async function () {
+  const inspector = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(inspector);
+  const { highlighterTestFront } = inspector;
+
+  await testZoomSize(highlighterTestFront, helper);
+  await testGeometryBox(helper);
+  await testStrokeBox(helper);
+
+  await helper.finalize();
+});
+
+async function testZoomSize(highlighterTestFront, helper) {
+  await helper.show("#polygon", { mode: "cssClipPath" });
+  const quads = await getAllAdjustedQuadsForContentPageElement("#polygon");
+  const { top, left, width, height } = quads.border[0].bounds;
+  const expectedStyle = `top:${top}px;left:${left}px;width:${width}px;height:${height}px;`;
+
+  // The top/left/width/height of the highlighter should not change at any zoom level.
+  // It should always match the element being highlighted.
+  for (const zoom of TEST_LEVELS) {
+    info(`Setting zoom level to ${zoom}.`);
+
+    const onHighlighterUpdated = highlighterTestFront.once(
+      "highlighter-updated"
+    );
+    // we need to await here to ensure the event listener was registered.
+    await highlighterTestFront.registerOneTimeHighlighterUpdate(helper.actorID);
+
+    setContentPageZoomLevel(zoom);
+    await onHighlighterUpdated;
+    const style = await helper.getElementAttribute(
+      "shapes-shape-container",
+      "style"
+    );
+
+    is(
+      style,
+      expectedStyle,
+      `Highlighter has correct quads at zoom level ${zoom}`
+    );
+  }
+  // reset zoom
+  setContentPageZoomLevel(1);
+}
+
+async function testGeometryBox(helper) {
+  await helper.show("#ellipse", { mode: "cssClipPath" });
+  let quads = await getAllAdjustedQuadsForContentPageElement("#ellipse");
+  const {
+    top: cTop,
+    left: cLeft,
+    width: cWidth,
+    height: cHeight,
+  } = quads.content[0].bounds;
+  let expectedStyle =
+    `top:${cTop}px;left:${cLeft}px;` + `width:${cWidth}px;height:${cHeight}px;`;
+  let style = await helper.getElementAttribute(
+    "shapes-shape-container",
+    "style"
+  );
+  is(style, expectedStyle, "Highlighter has correct quads for content-box");
+
+  await helper.show("#ellipse-padding-box", { mode: "cssClipPath" });
+  quads = await getAllAdjustedQuadsForContentPageElement(
+    "#ellipse-padding-box"
+  );
+  const {
+    top: pTop,
+    left: pLeft,
+    width: pWidth,
+    height: pHeight,
+  } = quads.padding[0].bounds;
+  expectedStyle =
+    `top:${pTop}px;left:${pLeft}px;` + `width:${pWidth}px;height:${pHeight}px;`;
+  style = await helper.getElementAttribute("shapes-shape-container", "style");
+  is(style, expectedStyle, "Highlighter has correct quads for padding-box");
+}
+
+async function testStrokeBox(helper) {
+  // #rect has a stroke and doesn't have the clip-path option stroke-box,
+  // so we must adjust the quads to reflect the object bounding box.
+  await helper.show("#rect", { mode: "cssClipPath" });
+  const quads = await getAllAdjustedQuadsForContentPageElement("#rect");
+  const { top, left, width, height } = quads.border[0].bounds;
+  const { highlightedNode } = helper;
+  const computedStyle = await highlightedNode.getComputedStyle();
+  const strokeWidth = computedStyle["stroke-width"].value;
+  const delta = parseFloat(strokeWidth) / 2;
+
+  const expectedStyle =
+    `top:${top + delta}px;left:${left + delta}px;` +
+    `width:${width - 2 * delta}px;height:${height - 2 * delta}px;`;
+  const style = await helper.getElementAttribute(
+    "shapes-shape-container",
+    "style"
+  );
+  is(
+    style,
+    expectedStyle,
+    "Highlighter has correct quads for SVG rect with stroke and stroke-box"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_04.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_04.js
new file mode 100644
index 0000000000..26fa1bda82
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_04.js
@@ -0,0 +1,539 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that shapes are updated correctly on mouse events.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { highlighterTestFront, inspector } = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+
+  const config = {
+    inspector,
+    view,
+    highlighters,
+    highlighterTestFront,
+    helper,
+  };
+
+  await testPolygonMovePoint(config);
+  await testPolygonAddPoint(config);
+  await testPolygonRemovePoint(config);
+  await testCircleMoveCenter(config);
+  await testCircleWithoutPosition(config);
+  await testEllipseMoveRadius(config);
+  await testInsetMoveEdges(config);
+
+  helper.finalize();
+});
+
+async function getComputedPropertyValue(selector, property, inspector) {
+  const highlightedNode = await getNodeFront(selector, inspector);
+  const computedStyle =
+    await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode);
+  return computedStyle[property].value;
+}
+
+async function setup(config) {
+  const { view, selector, property, inspector } = config;
+  info(`Turn on shapes highlighter for ${selector}`);
+  await selectNode(selector, inspector);
+  await toggleShapesHighlighter(view, selector, property, true);
+}
+
+async function teardown(config) {
+  const { view, selector, property } = config;
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+
+async function testPolygonMovePoint(config) {
+  const { inspector, view, highlighterTestFront, helper } = config;
+  const selector = "#polygon";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  const points = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-polygon",
+    "points",
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+  );
+  let [x, y] = points.split(" ")[0].split(",");
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { top, left, width, height } = quads.border[0].bounds;
+  x = left + (width * x) / 100;
+  y = top + (height * y) / 100;
+  const dx = width / 10;
+  const dyPercent = 10;
+  const dy = height / dyPercent;
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  info("Moving first polygon point");
+  const { mouse } = helper;
+  await mouse.down(x, y);
+  await mouse.move(x + dx, y + dy);
+  await mouse.up();
+  await reflowContentPage();
+  info("Waiting for rule view changed from shape change");
+  await onRuleViewChanged;
+
+  const definition = await getComputedPropertyValue(
+    selector,
+    property,
+    inspector
+  );
+  ok(
+    definition.includes(`${dx}px ${dyPercent}%`),
+    `Point moved to ${dx}px ${dyPercent}%`
+  );
+
+  await teardown({ selector, property, ...config });
+}
+
+async function testPolygonAddPoint(config) {
+  const { inspector, view, highlighterTestFront, helper } = config;
+  const selector = "#polygon";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  // Move first point to have same x as second point, then double click between
+  // the two points to add a new one.
+  const points = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-polygon",
+    "points",
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+  );
+  const pointsArray = points.split(" ");
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { top, left, width, height } = quads.border[0].bounds;
+  let [x1, y1] = pointsArray[0].split(",");
+  let [x2, y2] = pointsArray[1].split(",");
+  x1 = left + (width * x1) / 100;
+  x2 = left + (width * x2) / 100;
+  y1 = top + (height * y1) / 100;
+  y2 = top + (height * y2) / 100;
+
+  const { mouse } = helper;
+  await mouse.down(x1, y1);
+  await mouse.move(x2, y1);
+  await mouse.up();
+  await reflowContentPage();
+
+  let newPointX = x2;
+  let newPointY = (y1 + y2) / 2;
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  info("Adding new polygon point");
+  BrowserTestUtils.synthesizeMouse(
+    ":root",
+    newPointX,
+    newPointY,
+    { clickCount: 2 },
+    gBrowser.selectedTab.linkedBrowser
+  );
+
+  await reflowContentPage();
+  info("Waiting for rule view changed from shape change");
+  await onRuleViewChanged;
+
+  // Decimal precision for coordinates with percentage units is 2
+  const precision = 2;
+  // Round to the desired decimal precision and cast to Number to remove trailing zeroes.
+  newPointX = Number(((newPointX * 100) / width).toFixed(precision));
+  newPointY = Number(((newPointY * 100) / height).toFixed(precision));
+  const definition = await getComputedPropertyValue(
+    selector,
+    property,
+    inspector
+  );
+  ok(
+    definition.includes(`${newPointX}% ${newPointY}%`),
+    "Point successfuly added"
+  );
+
+  await teardown({ selector, property, ...config });
+}
+
+async function testPolygonRemovePoint(config) {
+  const { inspector, highlighters, highlighterTestFront, helper } = config;
+  const selector = "#polygon";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  const points = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-polygon",
+    "points",
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+  );
+  const [x, y] = points.split(" ")[0].split(",");
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { top, left, width, height } = quads.border[0].bounds;
+
+  const adjustedX = left + (width * x) / 100;
+  const adjustedY = top + (height * y) / 100;
+
+  info("Move mouse over first point in highlighter");
+  const onEventHandled = highlighters.once("highlighter-event-handled");
+  const { mouse } = helper;
+  await mouse.move(adjustedX, adjustedY);
+  await onEventHandled;
+  const markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-marker-hover",
+    "hidden",
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+  );
+  ok(!markerHidden, "Marker on highlighter is visible");
+
+  info("Double click on first point in highlighter");
+  const onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  BrowserTestUtils.synthesizeMouse(
+    ":root",
+    adjustedX,
+    adjustedY,
+    { clickCount: 2 },
+    gBrowser.selectedTab.linkedBrowser
+  );
+
+  info("Waiting for shape changes to apply");
+  await onShapeChangeApplied;
+  const definition = await getComputedPropertyValue(
+    selector,
+    property,
+    inspector
+  );
+  ok(!definition.includes(`${x}% ${y}%`), "Point successfully removed");
+
+  await teardown({ selector, property, ...config });
+}
+
+async function testCircleMoveCenter(config) {
+  const { inspector, highlighters, highlighterTestFront, helper } = config;
+  const selector = "#circle";
+  const property = "clip-path";
+
+  const onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await setup({ selector, property, ...config });
+
+  const cx = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "cx",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const cy = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "cy",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { width, height } = quads.border[0].bounds;
+  const cxPixel = (width * cx) / 100;
+  const cyPixel = (height * cy) / 100;
+  const dx = width / 10;
+  const dy = height / 10;
+
+  info("Moving circle center");
+  const { mouse } = helper;
+  await mouse.down(cxPixel, cyPixel, selector);
+  await mouse.move(cxPixel + dx, cyPixel + dy, selector);
+  await mouse.up(cxPixel + dx, cyPixel + dy, selector);
+  await reflowContentPage();
+  info("Waiting for shape changes to apply");
+  await onShapeChangeApplied;
+
+  const definition = await getComputedPropertyValue(
+    selector,
+    property,
+    inspector
+  );
+  ok(
+    definition.includes(`at ${cx + 10}% ${cy + 10}%`),
+    "Circle center successfully moved"
+  );
+
+  await teardown({ selector, property, ...config });
+}
+
+async function testCircleWithoutPosition(config) {
+  const { inspector, highlighters, highlighterTestFront, helper } = config;
+  const selector = "#circle-without-position";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  const rx = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "rx",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+
+  const cx = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "cx",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const cy = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "cy",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { width, height } = quads.content[0].bounds;
+  const highlightedNode = await getNodeFront(selector, inspector);
+  const computedStyle =
+    await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode);
+  const paddingTop = parseFloat(computedStyle["padding-top"].value);
+  const paddingLeft = parseFloat(computedStyle["padding-left"].value);
+  const cxPixel = paddingLeft + (width * cx) / 100;
+  const cyPixel = paddingTop + (height * cy) / 100;
+  const rxPixel = cxPixel + (width * rx) / 100;
+  const dx = width / 10;
+  const dy = height / 10;
+
+  const { mouse } = helper;
+  info("Moving circle rx");
+  let onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await mouse.down(rxPixel, cyPixel, selector);
+  await mouse.move(rxPixel + dx, cyPixel, selector);
+  await mouse.up(rxPixel + dx, cyPixel, selector);
+  await reflowContentPage();
+  await onShapeChangeApplied;
+
+  let definition = await getComputedPropertyValue(
+    selector,
+    property,
+    inspector
+  );
+  is(
+    definition,
+    `circle(${rx + 10}%)`,
+    "Circle without position radiuses successfully changed"
+  );
+
+  info("Moving circle center");
+  onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await mouse.down(cxPixel, cyPixel, selector);
+  await mouse.move(cxPixel + dx, cyPixel, selector);
+  await mouse.up(cxPixel + dx, cyPixel, selector);
+  await reflowContentPage();
+  info("Waiting for shape changes to apply");
+  await onShapeChangeApplied;
+
+  definition = await getComputedPropertyValue(selector, property, inspector);
+  is(
+    definition,
+    `circle(${rx + 10}% at ${cxPixel + dx}px ${cyPixel}px)`,
+    `Circle without position center (${cxPixel},${cyPixel}) successfully moved (${dx},${dy})`
+  );
+
+  await teardown({ selector, property, ...config });
+}
+
+async function testEllipseMoveRadius(config) {
+  const { inspector, highlighters, highlighterTestFront, helper } = config;
+  const selector = "#ellipse";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  const rx = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "rx",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const ry = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "ry",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const cx = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "cx",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const cy = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-ellipse",
+      "cy",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const quads = await getAllAdjustedQuadsForContentPageElement("#ellipse");
+  const { width, height } = quads.content[0].bounds;
+  const highlightedNode = await getNodeFront(selector, inspector);
+  const computedStyle =
+    await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode);
+  const paddingTop = parseFloat(computedStyle["padding-top"].value);
+  const paddingLeft = parseFloat(computedStyle["padding-left"].value);
+  const cxPixel = paddingLeft + (width * cx) / 100;
+  const cyPixel = paddingTop + (height * cy) / 100;
+  const rxPixel = cxPixel + (width * rx) / 100;
+  const ryPixel = cyPixel + (height * ry) / 100;
+  const dx = width / 10;
+  const dy = height / 10;
+
+  const { mouse } = helper;
+  info("Moving ellipse rx");
+  await mouse.down(rxPixel, cyPixel, selector);
+  await mouse.move(rxPixel + dx, cyPixel, selector);
+  await mouse.up(rxPixel + dx, cyPixel, selector);
+  await reflowContentPage();
+
+  info("Moving ellipse ry");
+  const onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await mouse.down(cxPixel, ryPixel, selector);
+  await mouse.move(cxPixel, ryPixel - dy, selector);
+  await mouse.up(cxPixel, ryPixel - dy, selector);
+  await reflowContentPage();
+  await onShapeChangeApplied;
+
+  const definition = await getComputedPropertyValue(
+    selector,
+    property,
+    inspector
+  );
+  ok(
+    definition.includes(`${rx + 10}% ${ry - 10}%`),
+    "Ellipse radiuses successfully moved"
+  );
+
+  await teardown({ selector, property, ...config });
+}
+
+async function testInsetMoveEdges(config) {
+  const { inspector, highlighters, highlighterTestFront, helper } = config;
+  const selector = "#inset";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  const x = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "x",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const y = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "y",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const width = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "width",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const height = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "height",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { width: elemWidth, height: elemHeight } = quads.content[0].bounds;
+
+  const left = (elemWidth * x) / 100;
+  const top = (elemHeight * y) / 100;
+  const right = left + (elemWidth * width) / 100;
+  const bottom = top + (elemHeight * height) / 100;
+  const xCenter = (left + right) / 2;
+  const yCenter = (top + bottom) / 2;
+  const dx = elemWidth / 10;
+  const dy = elemHeight / 10;
+  const { mouse } = helper;
+
+  info("Moving inset top");
+  let onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await mouse.down(xCenter, top, selector);
+  await mouse.move(xCenter, top + dy, selector);
+  await mouse.up(xCenter, top + dy, selector);
+  await reflowContentPage();
+  await onShapeChangeApplied;
+
+  // TODO: Test bottom inset marker after Bug 1456777 is fixed.
+  // Bug 1456777 - https://bugzilla.mozilla.org/show_bug.cgi?id=1456777
+  // The test element is larger than the viewport when tests run in headless mode.
+  // When moved, the bottom marker value is getting clamped to the viewport.
+
+  info("Moving inset left");
+  onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await mouse.down(left, yCenter, selector);
+  await mouse.move(left + dx, yCenter, selector);
+  await mouse.up(left + dx, yCenter, selector);
+  await reflowContentPage();
+  await onShapeChangeApplied;
+
+  info("Moving inset right");
+  onShapeChangeApplied = highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await mouse.down(right, yCenter, selector);
+  await mouse.move(right + dx, yCenter, selector);
+  await mouse.up(right + dx, yCenter, selector);
+  await reflowContentPage();
+  await onShapeChangeApplied;
+
+  const definition = await getComputedPropertyValue(
+    selector,
+    property,
+    inspector
+  );
+
+  // NOTE: No change to bottom inset until Bug 1456777 is fixed.
+  ok(
+    definition.includes(
+      `${top + dy}px ${elemWidth - right - dx}px ${100 - y - height}% ${
+        x + 10
+      }%`
+    ),
+    "Inset edges successfully moved"
+  );
+
+  await teardown({ selector, property, ...config });
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
new file mode 100644
index 0000000000..194fc76cc4
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
@@ -0,0 +1,158 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test hovering over shape points in the rule-view and shapes highlighter.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { highlighterTestFront, inspector } = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+  const config = {
+    inspector,
+    view,
+    highlighters,
+    highlighterTestFront,
+    helper,
+  };
+
+  await highlightFromRuleView(config);
+  await highlightFromHighlighter(config);
+});
+
+async function setup(config) {
+  const { view, selector, property, inspector } = config;
+  info(`Turn on shapes highlighter for ${selector}`);
+  await selectNode(selector, inspector);
+  await toggleShapesHighlighter(view, selector, property, true);
+}
+
+async function teardown(config) {
+  const { view, selector, property } = config;
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+/*
+ * Test that points hovered in the rule view will highlight corresponding points
+ * in the shapes highlighter on the page.
+ */
+async function highlightFromRuleView(config) {
+  const { view, highlighters, highlighterTestFront, inspector } = config;
+  const selector = "#polygon";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  const container = getRuleViewProperty(view, selector, property).valueSpan;
+  const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+  const highlighterFront =
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
+
+  let markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-marker-hover",
+    "hidden",
+    highlighterFront
+  );
+  ok(markerHidden, "Hover marker on highlighter is not visible");
+
+  info("Hover over point 0 in rule view");
+  const pointSpan = container.querySelector(
+    ".ruleview-shape-point[data-point='0']"
+  );
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.synthesizeMouseAtCenter(
+    pointSpan,
+    { type: "mousemove" },
+    view.styleWindow
+  );
+  await onHighlighterShown;
+
+  info(
+    "Point in shapes highlighter is marked when same point in rule view is hovered"
+  );
+  markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-marker-hover",
+    "hidden",
+    highlighterFront
+  );
+  ok(!markerHidden, "Marker on highlighter is visible");
+
+  info("Move mouse off point");
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.synthesizeMouseAtCenter(
+    shapesToggle,
+    { type: "mousemove" },
+    view.styleWindow
+  );
+  await onHighlighterShown;
+
+  markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-marker-hover",
+    "hidden",
+    highlighterFront
+  );
+  ok(markerHidden, "Marker on highlighter is not visible");
+
+  await teardown({ selector, property, ...config });
+}
+
+/*
+ * Test that points hovered in the shapes highlighter on the page will highlight
+ * corresponding points in the rule view.
+ */
+async function highlightFromHighlighter(config) {
+  const { view, highlighters, highlighterTestFront, helper, inspector } =
+    config;
+  const selector = "#polygon";
+  const property = "clip-path";
+
+  await setup({ selector, property, ...config });
+
+  const highlighterFront =
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
+  const { mouse } = helper;
+  const container = getRuleViewProperty(view, selector, property).valueSpan;
+
+  info("Hover over first point in highlighter");
+  let onEventHandled = highlighters.once("highlighter-event-handled");
+  await mouse.move(0, 0);
+  await onEventHandled;
+  let markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-marker-hover",
+    "hidden",
+    highlighterFront
+  );
+  ok(!markerHidden, "Marker on highlighter is visible");
+
+  info(
+    "Point in rule view is marked when same point in shapes highlighter is hovered"
+  );
+  const pointSpan = container.querySelector(
+    ".ruleview-shape-point[data-point='0']"
+  );
+  ok(pointSpan.classList.contains("active"), "Span for point 0 is active");
+
+  info("Move mouse off point");
+  onEventHandled = highlighters.once("highlighter-event-handled");
+  await mouse.move(100, 100);
+  await onEventHandled;
+  markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-marker-hover",
+    "hidden",
+    highlighterFront
+  );
+  ok(markerHidden, "Marker on highlighter is no longer visible");
+  ok(
+    !pointSpan.classList.contains("active"),
+    "Span for point 0 is no longer active"
+  );
+
+  await teardown({ selector, property, ...config });
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-scale.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-scale.js
new file mode 100644
index 0000000000..60f645943a
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-scale.js
@@ -0,0 +1,187 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that shapes are updated correctly on mouse events in transform mode.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+const SHAPE_SELECTORS = ["#polygon-transform", "#circle", "#ellipse", "#inset"];
+
+add_task(async function () {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { highlighterTestFront, inspector } = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+  const config = {
+    inspector,
+    view,
+    highlighters,
+    highlighterTestFront,
+    helper,
+  };
+
+  await testScale(config);
+});
+
+async function setup(config) {
+  const { inspector, view, selector, property, options } = config;
+  await selectNode(selector, inspector);
+  await toggleShapesHighlighter(view, selector, property, true, options);
+}
+
+async function teardown(config) {
+  const { view, selector, property } = config;
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+
+async function testScale(config) {
+  const { helper, highlighters } = config;
+  const options = { transformMode: true };
+  const property = "clip-path";
+
+  for (const selector of SHAPE_SELECTORS) {
+    await setup({ selector, property, options, ...config });
+    const { mouse } = helper;
+
+    const { nw, width, height, center } = await getBoundingBoxInPx({
+      selector,
+      ...config,
+    });
+
+    // if the top or left edges are not visible, move the shape so it is.
+    if (nw[0] < 0 || nw[1] < 0) {
+      const [x, y] = center;
+      const dx = Math.max(0, -nw[0]);
+      const dy = Math.max(0, -nw[1]);
+      await mouse.down(x, y, selector);
+      await mouse.move(x + dx, y + dy, selector);
+      await mouse.up(x + dx, y + dy, selector);
+      await reflowContentPage();
+      nw[0] += dx;
+      nw[1] += dy;
+    }
+    const dx = width / 10;
+    const dy = height / 10;
+    let onShapeChangeApplied;
+
+    info("Scaling from nw");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(nw[0], nw[1], selector);
+    await mouse.move(nw[0] + dx, nw[1] + dy, selector);
+    await mouse.up(nw[0] + dx, nw[1] + dy, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const nwBB = await getBoundingBoxInPx({ selector, ...config });
+    isnot(nwBB.nw[0], nw[0], `${selector} nw moved right after nw scale`);
+    isnot(nwBB.nw[1], nw[1], `${selector} nw moved down after nw scale`);
+    isnot(nwBB.width, width, `${selector} width reduced after nw scale`);
+    isnot(nwBB.height, height, `${selector} height reduced after nw scale`);
+
+    info("Scaling from ne");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(nwBB.ne[0], nwBB.ne[1], selector);
+    await mouse.move(nwBB.ne[0] - dx, nwBB.ne[1] + dy, selector);
+    await mouse.up(nwBB.ne[0] - dx, nwBB.ne[1] + dy, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const neBB = await getBoundingBoxInPx({ selector, ...config });
+    isnot(neBB.ne[0], nwBB.ne[0], `${selector} ne moved right after ne scale`);
+    isnot(neBB.ne[1], nwBB.ne[1], `${selector} ne moved down after ne scale`);
+    isnot(neBB.width, nwBB.width, `${selector} width reduced after ne scale`);
+    isnot(
+      neBB.height,
+      nwBB.height,
+      `${selector} height reduced after ne scale`
+    );
+
+    info("Scaling from sw");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(neBB.sw[0], neBB.sw[1], selector);
+    await mouse.move(neBB.sw[0] + dx, neBB.sw[1] - dy, selector);
+    await mouse.up(neBB.sw[0] + dx, neBB.sw[1] - dy, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const swBB = await getBoundingBoxInPx({ selector, ...config });
+    isnot(swBB.sw[0], neBB.sw[0], `${selector} sw moved right after sw scale`);
+    isnot(swBB.sw[1], neBB.sw[1], `${selector} sw moved down after sw scale`);
+    isnot(swBB.width, neBB.width, `${selector} width reduced after sw scale`);
+    isnot(
+      swBB.height,
+      neBB.height,
+      `${selector} height reduced after sw scale`
+    );
+
+    info("Scaling from se");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(swBB.se[0], swBB.se[1], selector);
+    await mouse.move(swBB.se[0] - dx, swBB.se[1] - dy, selector);
+    await mouse.up(swBB.se[0] - dx, swBB.se[1] - dy, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const seBB = await getBoundingBoxInPx({ selector, ...config });
+    isnot(seBB.se[0], swBB.se[0], `${selector} se moved right after se scale`);
+    isnot(seBB.se[1], swBB.se[1], `${selector} se moved down after se scale`);
+    isnot(seBB.width, swBB.width, `${selector} width reduced after se scale`);
+    isnot(
+      seBB.height,
+      swBB.height,
+      `${selector} height reduced after se scale`
+    );
+
+    await teardown({ selector, property, ...config });
+  }
+}
+
+async function getBoundingBoxInPx(config) {
+  const { highlighterTestFront, selector, inspector } = config;
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { width, height } = quads.content[0].bounds;
+  const highlightedNode = await getNodeFront(selector, inspector);
+  const highlighterFront =
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
+  const computedStyle =
+    await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode);
+  const paddingTop = parseFloat(computedStyle["padding-top"].value);
+  const paddingLeft = parseFloat(computedStyle["padding-left"].value);
+  // path is always of form "Mx y Lx y Lx y Lx y Z", where x/y are numbers
+  const path = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-bounding-box",
+    "d",
+    highlighterFront
+  );
+  const coords = path
+    .replace(/[MLZ]/g, "")
+    .split(" ")
+    .map((n, i) => {
+      return i % 2 === 0
+        ? paddingLeft + (width * n) / 100
+        : paddingTop + (height * n) / 100;
+    });
+
+  const nw = [coords[0], coords[1]];
+  const ne = [coords[2], coords[3]];
+  const se = [coords[4], coords[5]];
+  const sw = [coords[6], coords[7]];
+  const center = [(nw[0] + se[0]) / 2, (nw[1] + se[1]) / 2];
+  const shapeWidth = Math.sqrt((ne[0] - nw[0]) ** 2 + (ne[1] - nw[1]) ** 2);
+  const shapeHeight = Math.sqrt((sw[0] - nw[0]) ** 2 + (sw[1] - nw[1]) ** 2);
+
+  return { nw, ne, se, sw, center, width: shapeWidth, height: shapeHeight };
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js
new file mode 100644
index 0000000000..11a683188b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js
@@ -0,0 +1,127 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that shapes are updated correctly on mouse events in transform mode.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+const SHAPE_SELECTORS = ["#polygon-transform", "#circle", "#ellipse", "#inset"];
+
+add_task(async function () {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { highlighterTestFront, inspector } = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+  const config = {
+    inspector,
+    view,
+    highlighters,
+    highlighterTestFront,
+    helper,
+  };
+
+  await testTranslate(config);
+});
+
+async function setup(config) {
+  const { inspector, view, selector, property, options } = config;
+  await selectNode(selector, inspector);
+  await toggleShapesHighlighter(view, selector, property, true, options);
+}
+
+async function teardown(config) {
+  const { view, selector, property } = config;
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+
+async function testTranslate(config) {
+  const { helper, highlighters } = config;
+  const options = { transformMode: true };
+  const property = "clip-path";
+
+  for (const selector of SHAPE_SELECTORS) {
+    await setup({ selector, property, options, ...config });
+    const { mouse } = helper;
+
+    const { center, width, height } = await getBoundingBoxInPx({
+      selector,
+      ...config,
+    });
+    const [x, y] = center;
+    const dx = width / 10;
+    const dy = height / 10;
+    let onShapeChangeApplied;
+
+    info(`Translating ${selector}`);
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(x, y, selector);
+    await mouse.move(x + dx, y + dy, selector);
+    await mouse.up(x + dx, y + dy, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    let newBB = await getBoundingBoxInPx({ selector, ...config });
+    isnot(newBB.center[0], x, `${selector} translated on y axis`);
+    isnot(newBB.center[1], y, `${selector} translated on x axis`);
+
+    info(`Translating ${selector} back`);
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(x + dx, y + dy, selector);
+    await mouse.move(x, y, selector);
+    await mouse.up(x, y, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    newBB = await getBoundingBoxInPx({ selector, ...config });
+    is(newBB.center[0], x, `${selector} translated back on x axis`);
+    is(newBB.center[1], y, `${selector} translated back on y axis`);
+
+    await teardown({ selector, property, ...config });
+  }
+}
+
+async function getBoundingBoxInPx(config) {
+  const { highlighterTestFront, selector, inspector } = config;
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { width, height } = quads.content[0].bounds;
+  const highlightedNode = await getNodeFront(selector, inspector);
+  const highlighterFront =
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
+  const computedStyle =
+    await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode);
+  const paddingTop = parseFloat(computedStyle["padding-top"].value);
+  const paddingLeft = parseFloat(computedStyle["padding-left"].value);
+  // path is always of form "Mx y Lx y Lx y Lx y Z", where x/y are numbers
+  const path = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-bounding-box",
+    "d",
+    highlighterFront
+  );
+  const coords = path
+    .replace(/[MLZ]/g, "")
+    .split(" ")
+    .map((n, i) => {
+      return i % 2 === 0
+        ? paddingLeft + (width * n) / 100
+        : paddingTop + (height * n) / 100;
+    });
+
+  const nw = [coords[0], coords[1]];
+  const ne = [coords[2], coords[3]];
+  const se = [coords[4], coords[5]];
+  const sw = [coords[6], coords[7]];
+  const center = [(nw[0] + se[0]) / 2, (nw[1] + se[1]) / 2];
+  const shapeWidth = Math.sqrt((ne[0] - nw[0]) ** 2 + (ne[1] - nw[1]) ** 2);
+  const shapeHeight = Math.sqrt((sw[0] - nw[0]) ** 2 + (sw[1] - nw[1]) ** 2);
+
+  return { nw, ne, se, sw, center, width: shapeWidth, height: shapeHeight };
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_07.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_07.js
new file mode 100644
index 0000000000..07df792c23
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_07.js
@@ -0,0 +1,179 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that shapes are updated correctly for scaling on one axis in transform mode.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+const SHAPE_SELECTORS = ["#polygon-transform", "#ellipse"];
+
+add_task(async function () {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { highlighterTestFront, inspector } = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+  const config = {
+    inspector,
+    view,
+    highlighters,
+    highlighterTestFront,
+    helper,
+  };
+
+  await testOneDimScale(config);
+});
+
+async function setup(config) {
+  const { inspector, view, selector, property, options } = config;
+  await selectNode(selector, inspector);
+  await toggleShapesHighlighter(view, selector, property, true, options);
+}
+
+async function teardown(config) {
+  const { view, selector, property } = config;
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+
+async function testOneDimScale(config) {
+  const { helper, highlighters } = config;
+  const options = { transformMode: true };
+  const property = "clip-path";
+
+  for (const selector of SHAPE_SELECTORS) {
+    await setup({ selector, property, options, ...config });
+    const { mouse } = helper;
+
+    const { nw, width, height, center } = await getBoundingBoxInPx({
+      selector,
+      ...config,
+    });
+
+    // if the top or left edges are not visible, move the shape so it is.
+    if (nw[0] < 0 || nw[1] < 0) {
+      const [x, y] = center;
+      const dx = Math.max(0, -nw[0]);
+      const dy = Math.max(0, -nw[1]);
+      await mouse.down(x, y, selector);
+      await mouse.move(x + dx, y + dy, selector);
+      await mouse.up(x + dx, y + dy, selector);
+      await reflowContentPage();
+      nw[0] += dx;
+      nw[1] += dy;
+    }
+    const dx = width / 10;
+    const dy = height / 10;
+    let onShapeChangeApplied;
+
+    info("Scaling from w");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(nw[0], center[1], selector);
+    await mouse.move(nw[0] + dx, center[1], selector);
+    await mouse.up(nw[0] + dx, center[1], selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const wBB = await getBoundingBoxInPx({ selector, ...config });
+    isnot(wBB.nw[0], nw[0], `${selector} nw moved right after w scale`);
+    is(wBB.nw[1], nw[1], `${selector} nw not moved down after w scale`);
+    isnot(wBB.width, width, `${selector} width reduced after w scale`);
+    is(wBB.height, height, `${selector} height not reduced after w scale`);
+
+    info("Scaling from e");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(wBB.ne[0], center[1], selector);
+    await mouse.move(wBB.ne[0] - dx, center[1], selector);
+    await mouse.up(wBB.ne[0] - dx, center[1], selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const eBB = await getBoundingBoxInPx({ selector, ...config });
+    isnot(eBB.ne[0], wBB.ne[0], `${selector} ne moved left after e scale`);
+    is(eBB.ne[1], wBB.ne[1], `${selector} ne not moved down after e scale`);
+    isnot(eBB.width, wBB.width, `${selector} width reduced after e scale`);
+    is(eBB.height, wBB.height, `${selector} height not reduced after e scale`);
+
+    info("Scaling from s");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(eBB.center[0], eBB.sw[1], selector);
+    await mouse.move(eBB.center[0], eBB.sw[1] - dy, selector);
+    await mouse.up(eBB.center[0], eBB.sw[1] - dy, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const sBB = await getBoundingBoxInPx({ selector, ...config });
+    is(sBB.sw[0], eBB.sw[0], `${selector} sw not moved right after w scale`);
+    isnot(sBB.sw[1], eBB.sw[1], `${selector} sw moved down after w scale`);
+    is(sBB.width, eBB.width, `${selector} width not reduced after w scale`);
+    isnot(sBB.height, eBB.height, `${selector} height reduced after w scale`);
+
+    info("Scaling from n");
+    onShapeChangeApplied = highlighters.once(
+      "shapes-highlighter-changes-applied"
+    );
+    await mouse.down(sBB.center[0], sBB.nw[1], selector);
+    await mouse.move(sBB.center[0], sBB.nw[1] + dy, selector);
+    await mouse.up(sBB.center[0], sBB.nw[1] + dy, selector);
+    await reflowContentPage();
+    await onShapeChangeApplied;
+
+    const nBB = await getBoundingBoxInPx({ selector, ...config });
+    is(nBB.nw[0], sBB.nw[0], `${selector} nw not moved right after n scale`);
+    isnot(nBB.nw[1], sBB.nw[1], `${selector} nw moved down after n scale`);
+    is(nBB.width, sBB.width, `${selector} width reduced after n scale`);
+    isnot(
+      nBB.height,
+      sBB.height,
+      `${selector} height not reduced after n scale`
+    );
+
+    await teardown({ selector, property, ...config });
+  }
+}
+
+async function getBoundingBoxInPx(config) {
+  const { highlighterTestFront, selector, inspector } = config;
+  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
+  const { width, height } = quads.content[0].bounds;
+  const highlightedNode = await getNodeFront(selector, inspector);
+  const highlighterFront =
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
+  const computedStyle =
+    await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode);
+  const paddingTop = parseFloat(computedStyle["padding-top"].value);
+  const paddingLeft = parseFloat(computedStyle["padding-left"].value);
+  // path is always of form "Mx y Lx y Lx y Lx y Z", where x/y are numbers
+  const path = await highlighterTestFront.getHighlighterNodeAttribute(
+    "shapes-bounding-box",
+    "d",
+    highlighterFront
+  );
+  const coords = path
+    .replace(/[MLZ]/g, "")
+    .split(" ")
+    .map((n, i) => {
+      return i % 2 === 0
+        ? paddingLeft + (width * n) / 100
+        : paddingTop + (height * n) / 100;
+    });
+
+  const nw = [coords[0], coords[1]];
+  const ne = [coords[2], coords[3]];
+  const se = [coords[4], coords[5]];
+  const sw = [coords[6], coords[7]];
+  const center = [(nw[0] + se[0]) / 2, (nw[1] + se[1]) / 2];
+  const shapeWidth = Math.sqrt((ne[0] - nw[0]) ** 2 + (ne[1] - nw[1]) ** 2);
+  const shapeHeight = Math.sqrt((sw[0] - nw[0]) ** 2 + (sw[1] - nw[1]) ** 2);
+
+  return { nw, ne, se, sw, center, width: shapeWidth, height: shapeHeight };
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js
new file mode 100644
index 0000000000..3598939d27
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js
@@ -0,0 +1,97 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that shapes in iframes are updated correctly on mouse events.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes_iframe.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { inspector } = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+  const config = { inspector, view, highlighters, helper };
+
+  await testPolygonIframeMovePoint(config);
+});
+
+async function testPolygonIframeMovePoint(config) {
+  const { inspector, view, helper } = config;
+  const selector = "#polygon";
+  const property = "clip-path";
+
+  info(`Turn on shapes highlighter for ${selector}`);
+  // Get a reference to the highlighter's target node inside the iframe.
+  const highlightedNode = await getNodeFrontInFrames(
+    ["#frame", selector],
+    inspector
+  );
+  // Select the nested node so toggling of the shapes highlighter works from the rule view
+  await selectNode(highlightedNode, inspector);
+  await toggleShapesHighlighter(view, selector, property, true);
+  const { mouse } = helper;
+
+  // We expect two ruleview-changed events:
+  // - one for previewing the change (DomRule::previewPropertyValue)
+  // - one for applying the change (DomRule::applyProperties)
+  let onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+
+  info("Moving polygon point visible in iframe");
+  // Iframe has 10px margin. Element in iframe is 800px by 800px. First point is at 0 0%
+  is(
+    await getClipPathPoint(highlightedNode, 0),
+    "0px 0%",
+    `First point is at 0 0%`
+  );
+
+  await mouse.down(10, 10);
+  await mouse.move(20, 20);
+  await mouse.up();
+  await reflowContentPage();
+  await onRuleViewChanged;
+
+  // point moved from y 0 to 10px, 10/800 (iframe height) = 1,25%
+  is(
+    await getClipPathPoint(highlightedNode, 0),
+    "10px 1.25%",
+    `Point moved to 10px 1.25%`
+  );
+
+  onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+
+  info("Dragging mouse out of the iframe");
+  // Iframe has 10px margin. Element in iframe is 800px by 800px. Second point is at 100px 50%
+  is(
+    await getClipPathPoint(highlightedNode, 1),
+    "100px 50%",
+    `Second point is at 100px 50%`
+  );
+
+  await mouse.down(110, 410);
+  await mouse.move(120, 510);
+  await mouse.up();
+  await reflowContentPage();
+  await onRuleViewChanged;
+
+  // The point can't be moved out of the iframe boundary, so we can't really assert the
+  // y point here (as it depends on the horizontal scrollbar size + the shape control point size).
+  ok(
+    (await getClipPathPoint(highlightedNode, 1)).startsWith("110px"),
+    `Point moved to 110px`
+  );
+
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+
+async function getClipPathPoint(node, pointIndex) {
+  const computedStyle = await node.inspectorFront.pageStyle.getComputed(node);
+  const definition = computedStyle["clip-path"].value;
+  const points = definition.replaceAll(/(^polygon\()|(\)$)/g, "").split(", ");
+  return points[pointIndex];
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js
new file mode 100644
index 0000000000..004d7e945f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js
@@ -0,0 +1,204 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the CSS shapes highlighter for offset-path.
+
+const TEST_URL = `data:text/html,<meta charset=utf8>${encodeURIComponent(`
+  <style>
+    html, body  {margin: 0; padding: 0; }
+
+    .wrapper {
+      width: 100px;
+      height: 100px;
+      background: tomato;
+    }
+
+    .target {
+      width: 20px;
+      height: 20px;
+      display: block;
+      background: gold;
+      offset-path: inset(10% 20%);
+    }
+
+    #abs {
+      position: absolute;
+      background: cyan;
+      offset-path: inset(10% 20%);
+    }
+  </style>
+  <div class=wrapper>
+    <span id=regular class=target></span>
+    <span id=abs class=target></span>
+  </div>`)}`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await pushPref("layout.css.motion-path-basic-shapes.enabled", true);
+  const env = await openInspectorForURL(TEST_URL);
+  const { highlighterTestFront, inspector } = env;
+  const view = selectRuleView(inspector);
+
+  await selectNode("#regular", inspector);
+
+  info(`Show offset-path shape highlighter for regular case`);
+  await toggleShapesHighlighter(view, ".target", "offset-path", true);
+
+  info(
+    "Check that highlighter is drawn relatively to the selected node parent node"
+  );
+
+  const wrapperQuads = await getAllAdjustedQuadsForContentPageElement(
+    ".wrapper"
+  );
+  const {
+    width: wrapperWidth,
+    height: wrapperHeight,
+    x: wrapperX,
+    y: wrapperY,
+  } = wrapperQuads.content[0].bounds;
+
+  const rect = await getShapeHighlighterRect(highlighterTestFront, inspector);
+  // SVG stroke seems to impact boundingClientRect differently depending on platform/hardware.
+  // Let's assert that the delta is okay, and use it for the different assertions.
+  const delta = wrapperX + wrapperWidth * 0.2 - rect.x;
+  Assert.lessOrEqual(Math.abs(delta), 1, `delta is <=1 (${Math.abs(delta)})`);
+
+  // Coming from inset(10% 20%)
+  let inlineOffset = 0.2 * wrapperWidth - delta;
+  let blockOffset = 0.1 * wrapperHeight - delta;
+
+  is(rect.x, wrapperX + inlineOffset, "Rect has expected x");
+  is(rect.y, wrapperY + blockOffset, "Rect has expected y");
+  is(rect.width, wrapperWidth - inlineOffset * 2, "Rect has expected width");
+  is(rect.height, wrapperHeight - blockOffset * 2, "Rect has expected height");
+
+  const x = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "x",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const y = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "y",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+  const width = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "width",
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
+    )
+  );
+
+  const left = (wrapperWidth * x) / 100;
+  const top = (wrapperHeight * y) / 100;
+  const right = left + (wrapperWidth * width) / 100;
+  const xCenter = (left + right) / 2;
+  const dy = wrapperHeight / 10;
+
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { mouse } = helper;
+
+  info("Moving inset top");
+  const onShapeChangeApplied = view.highlighters.once(
+    "shapes-highlighter-changes-applied"
+  );
+  await mouse.down(xCenter, top, ".wrapper");
+  await mouse.move(xCenter, top + dy, ".wrapper");
+  await mouse.up(xCenter, top + dy, ".wrapper");
+  await reflowContentPage();
+  await onShapeChangeApplied;
+
+  const offsetPathAfterUpdate = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () =>
+      content.getComputedStyle(content.document.getElementById("regular"))
+        .offsetPath
+  );
+
+  is(
+    offsetPathAfterUpdate,
+    `inset(${top + dy}% 20% 10%)`,
+    "Inset edges successfully moved"
+  );
+
+  info(`Hide offset-path shape highlighter`);
+  await toggleShapesHighlighter(view, ".target", "offset-path", false);
+
+  info(`Show offset-path shape highlighter for absolutely positioned element`);
+  await selectNode("#abs", inspector);
+  await toggleShapesHighlighter(view, ".target", "offset-path", true);
+
+  const viewportClientRect = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const [quad] = content.document.getBoxQuads();
+      return {
+        x: quad.p1.x,
+        y: quad.p1.y,
+        width: quad.p2.x - quad.p1.x,
+        height: quad.p3.y - quad.p2.y,
+      };
+    }
+  );
+
+  const absRect = await getShapeHighlighterRect(
+    highlighterTestFront,
+    inspector
+  );
+
+  inlineOffset = 0.2 * viewportClientRect.width - delta;
+  blockOffset = 0.1 * viewportClientRect.height - delta;
+
+  Assert.less(
+    Math.abs(absRect.x - (viewportClientRect.x + inlineOffset)),
+    1,
+    `Rect approximately has expected x (got ${absRect.x}, expected ${
+      viewportClientRect.x + inlineOffset
+    })`
+  );
+  Assert.less(
+    Math.abs(absRect.y - (viewportClientRect.y + blockOffset)),
+    1,
+    `Rect approximately has expected y (got ${absRect.y}, expected ${
+      viewportClientRect.y + blockOffset
+    })`
+  );
+  Assert.less(
+    Math.abs(absRect.width - (viewportClientRect.width - inlineOffset * 2)),
+    1,
+    `Rect approximately has expected width (got ${absRect.width}, expected ${
+      viewportClientRect.width - inlineOffset * 2
+    })`
+  );
+  Assert.less(
+    Math.abs(absRect.height - (viewportClientRect.height - blockOffset * 2)),
+    1,
+    `Rect approximately has expected height (got ${absRect.height}, expected ${
+      viewportClientRect.height - blockOffset * 2
+    })`
+  );
+
+  info(`Hide offset-path shape highlighter for absolutely positioned element`);
+  await toggleShapesHighlighter(view, ".target", "offset-path", false);
+});
+
+async function getShapeHighlighterRect(highlighterTestFront, inspector) {
+  const highlighterFront =
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
+  return highlighterTestFront.getHighlighterBoundingClientRect(
+    "shapes-rect",
+    highlighterFront.actorID
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_percent.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_percent.js
new file mode 100644
index 0000000000..f1a7b07fe3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_percent.js
@@ -0,0 +1,121 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Make sure that the inset() highlighter displays correctly when using pixels
+// on top of screen %.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes-percent.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
+
+  await insetHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
+
+  await highlighter.finalize();
+});
+
+async function insetHasCorrectAttrs(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Testing inset() editor using pixels on page %");
+
+  const top = 10;
+  const right = 20;
+  const bottom = 30;
+  const left = 40;
+
+  // Set the clip-path property
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [top, right, bottom, left],
+    (t, r, b, l) => {
+      content.document.querySelector(
+        "#inset"
+      ).style.clipPath = `inset(${t}px ${r}px ${b}px ${l}px)`;
+    }
+  );
+
+  // Get width and height of page
+  const { innerWidth, innerHeight } = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      return {
+        innerWidth: content.innerWidth,
+        innerHeight: content.innerHeight,
+      };
+    }
+  );
+
+  const insetNode = await getNodeFront("#inset", inspector);
+  await highlighterFront.show(insetNode, { mode: "cssClipPath" });
+
+  const x = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "x",
+      highlighterFront
+    )
+  );
+  const y = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "y",
+      highlighterFront
+    )
+  );
+  const width = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "width",
+      highlighterFront
+    )
+  );
+  const height = parseFloat(
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      "shapes-rect",
+      "height",
+      highlighterFront
+    )
+  );
+
+  // Convert pixels to screen percentage
+  const expectedX = (left / innerWidth) * 100;
+  const expectedY = (top / innerHeight) * 100;
+  const expectedWidth = ((innerWidth - (left + right)) / innerWidth) * 100;
+  const expectedHeight = ((innerHeight - (top + bottom)) / innerHeight) * 100;
+
+  ok(
+    floatEq(x, expectedX),
+    `Rect highlighter has correct x (got ${x}, expected ${expectedX})`
+  );
+  ok(
+    floatEq(y, expectedY),
+    `Rect highlighter has correct y (got ${y}, expected ${expectedY})`
+  );
+  ok(
+    floatEq(width, expectedWidth),
+    `Rect highlighter has correct width (got ${width}, expected ${expectedWidth})`
+  );
+  ok(
+    floatEq(height, expectedHeight),
+    `Rect highlighter has correct height (got ${height}, expected ${expectedHeight})`
+  );
+}
+
+/**
+ * Compare two floats with a tolerance of 0.1
+ */
+function floatEq(f1, f2) {
+  return Math.abs(f1 - f2) < 0.1;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js
new file mode 100644
index 0000000000..934625867b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js
@@ -0,0 +1,229 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the SVG highlighter elements of the css transform
+// highlighter.
+
+const TEST_URL = `
+ <div id="transformed"
+   style="border:1px solid red;width:100px;height:100px;transform:skew(13deg);">
+ </div>
+ <div id="untransformed"
+   style="border:1px solid blue;width:100px;height:100px;">
+ </div>
+ <span id="inline"
+   style="transform:rotate(90deg);">this is an inline transformed element
+ </span>
+`;
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL)
+  );
+  const front = inspector.inspectorFront;
+
+  const highlighter = await front.getHighlighterByType(
+    "CssTransformHighlighter"
+  );
+
+  await isHiddenByDefault(highlighterTestFront, highlighter);
+  await has2PolygonsAnd4Lines(highlighterTestFront, highlighter);
+  await isNotShownForUntransformed(
+    highlighterTestFront,
+    inspector,
+    highlighter
+  );
+  await isNotShownForInline(highlighterTestFront, inspector, highlighter);
+  await isVisibleWhenShown(highlighterTestFront, inspector, highlighter);
+  await linesLinkThePolygons(highlighterTestFront, inspector, highlighter);
+
+  await highlighter.finalize();
+});
+
+async function isHiddenByDefault(highlighterTestFront, highlighterFront) {
+  info("Checking that the highlighter is hidden by default");
+
+  const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-elements",
+    "hidden",
+    highlighterFront
+  );
+  ok(hidden, "The highlighter is hidden by default");
+}
+
+async function has2PolygonsAnd4Lines(highlighterTestFront, highlighterFront) {
+  info("Checking that the highlighter is made up of 4 lines and 2 polygons");
+
+  let value = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-untransformed",
+    "class",
+    highlighterFront
+  );
+  is(value, "css-transform-untransformed", "The untransformed polygon exists");
+
+  value = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-transformed",
+    "class",
+    highlighterFront
+  );
+  is(value, "css-transform-transformed", "The transformed polygon exists");
+
+  for (const nb of ["1", "2", "3", "4"]) {
+    value = await highlighterTestFront.getHighlighterNodeAttribute(
+      "css-transform-line" + nb,
+      "class",
+      highlighterFront
+    );
+    is(value, "css-transform-line", "The line " + nb + " exists");
+  }
+}
+
+async function isNotShownForUntransformed(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Asking to show the highlighter on the untransformed test node");
+
+  const node = await getNodeFront("#untransformed", inspector);
+  await highlighterFront.show(node);
+
+  const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-elements",
+    "hidden",
+    highlighterFront
+  );
+  ok(hidden, "The highlighter is still hidden");
+}
+
+async function isNotShownForInline(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Asking to show the highlighter on the inline test node");
+
+  const node = await getNodeFront("#inline", inspector);
+  await highlighterFront.show(node);
+
+  const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-elements",
+    "hidden",
+    highlighterFront
+  );
+  ok(hidden, "The highlighter is still hidden");
+}
+
+async function isVisibleWhenShown(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Asking to show the highlighter on the test node");
+
+  const node = await getNodeFront("#transformed", inspector);
+  await highlighterFront.show(node);
+
+  let hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-elements",
+    "hidden",
+    highlighterFront
+  );
+  ok(!hidden, "The highlighter is visible");
+
+  info("Hiding the highlighter");
+  await highlighterFront.hide();
+
+  hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-elements",
+    "hidden",
+    highlighterFront
+  );
+  ok(hidden, "The highlighter is hidden");
+}
+
+async function linesLinkThePolygons(
+  highlighterTestFront,
+  inspector,
+  highlighterFront
+) {
+  info("Showing the highlighter on the transformed node");
+
+  const node = await getNodeFront("#transformed", inspector);
+  await highlighterFront.show(node);
+
+  info("Checking that the 4 lines do link the 2 shape's corners");
+
+  const lines = [];
+  for (const nb of ["1", "2", "3", "4"]) {
+    const x1 = await highlighterTestFront.getHighlighterNodeAttribute(
+      "css-transform-line" + nb,
+      "x1",
+      highlighterFront
+    );
+    const y1 = await highlighterTestFront.getHighlighterNodeAttribute(
+      "css-transform-line" + nb,
+      "y1",
+      highlighterFront
+    );
+    const x2 = await highlighterTestFront.getHighlighterNodeAttribute(
+      "css-transform-line" + nb,
+      "x2",
+      highlighterFront
+    );
+    const y2 = await highlighterTestFront.getHighlighterNodeAttribute(
+      "css-transform-line" + nb,
+      "y2",
+      highlighterFront
+    );
+    lines.push({ x1, y1, x2, y2 });
+  }
+
+  let points1 = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-untransformed",
+    "points",
+    highlighterFront
+  );
+  points1 = points1.split(" ");
+
+  let points2 = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-transformed",
+    "points",
+    highlighterFront
+  );
+  points2 = points2.split(" ");
+
+  for (let i = 0; i < lines.length; i++) {
+    info("Checking line nb " + i);
+    const line = lines[i];
+
+    const p1 = points1[i].split(",");
+    is(
+      p1[0],
+      line.x1,
+      "line " + i + "'s first point matches the untransformed x coordinate"
+    );
+    is(
+      p1[1],
+      line.y1,
+      "line " + i + "'s first point matches the untransformed y coordinate"
+    );
+
+    const p2 = points2[i].split(",");
+    is(
+      p2[0],
+      line.x2,
+      "line " + i + "'s first point matches the transformed x coordinate"
+    );
+    is(
+      p2[1],
+      line.y2,
+      "line " + i + "'s first point matches the transformed y coordinate"
+    );
+  }
+
+  await highlighterFront.hide();
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js
new file mode 100644
index 0000000000..9903a40da0
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/*
+Bug 1014547 - CSS transforms highlighter
+Test that the highlighter elements created have the right size and coordinates.
+
+Note that instead of hard-coding values here, the assertions are made by
+comparing with the result of getAdjustedQuads.
+
+There's a separate test for checking that getAdjustedQuads actually returns
+sensible values
+(devtools/client/shared/test/browser_layoutHelpers-getBoxQuads.js),
+so the present test doesn't care about that, it just verifies that the css
+transform highlighter applies those values correctly to the SVG elements
+*/
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_csstransform.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+
+  const highlighter = await front.getHighlighterByType(
+    "CssTransformHighlighter"
+  );
+
+  const nodeFront = await getNodeFront("#test-node", inspector);
+
+  info("Displaying the transform highlighter on test node");
+  await highlighter.show(nodeFront);
+
+  const data = await getAllAdjustedQuadsForContentPageElement("#test-node");
+  const [expected] = data.border;
+
+  const points = await highlighterTestFront.getHighlighterNodeAttribute(
+    "css-transform-transformed",
+    "points",
+    highlighter
+  );
+  const polygonPoints = points.split(" ").map(p => {
+    return {
+      x: +p.substring(0, p.indexOf(",")),
+      y: +p.substring(p.indexOf(",") + 1),
+    };
+  });
+
+  for (let i = 1; i < 5; i++) {
+    is(
+      polygonPoints[i - 1].x,
+      expected["p" + i].x,
+      "p" + i + " x coordinate is correct"
+    );
+    is(
+      polygonPoints[i - 1].y,
+      expected["p" + i].y,
+      "p" + i + " y coordinate is correct"
+    );
+  }
+
+  info("Hiding the transform highlighter");
+  await highlighter.hide();
+  await highlighter.finalize();
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-custom-element.js b/devtools/client/inspector/test/browser_inspector_highlighter-custom-element.js
new file mode 100644
index 0000000000..8d24505565
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-custom-element.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the picker works correctly with XBL anonymous nodes
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_custom_element.xhtml";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  await startPicker(toolbox);
+
+  info("Selecting the custom element");
+  await hoverElement(inspector, "#custom-element");
+
+  info("Key pressed. Waiting for element to be picked");
+  BrowserTestUtils.synthesizeKey("VK_RETURN", {}, gBrowser.selectedBrowser);
+  await Promise.all([
+    inspector.selection.once("new-node-front"),
+    inspector.once("inspector-updated"),
+  ]);
+
+  is(
+    inspector.selection.nodeFront.className,
+    "custom-element-anon",
+    "The .custom-element-anon inside the div was selected"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-embed.js b/devtools/client/inspector/test/browser_inspector_highlighter-embed.js
new file mode 100644
index 0000000000..5da6d0ac08
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-embed.js
@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the highlighter can go inside <embed> elements
+
+const TEST_URL = URL_ROOT + "doc_inspector_embed.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Get a node inside the <embed> element and select/highlight it");
+  const body = await getEmbeddedBody(inspector);
+  await selectAndHighlightNode(body, inspector);
+
+  const selectedNode = inspector.selection.nodeFront;
+  is(selectedNode.tagName.toLowerCase(), "body", "The selected node is <body>");
+  ok(
+    selectedNode.baseURI.endsWith("doc_inspector_menu.html"),
+    "The selected node is the <body> node inside the <embed> element"
+  );
+});
+
+async function getEmbeddedBody({ walker }) {
+  const embed = await walker.querySelector(walker.rootNode, "embed");
+  const { nodes } = await walker.children(embed);
+  const contentDoc = nodes[0];
+  const body = await walker.querySelector(contentDoc, "body");
+  return body;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-clipboard.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-clipboard.js
new file mode 100644
index 0000000000..8d1b355e9f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-clipboard.js
@@ -0,0 +1,63 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that the eyedropper can copy colors to the clipboard
+
+const HIGHLIGHTER_TYPE = "EyeDropper";
+const ID = "eye-dropper-";
+const TEST_URI =
+  "data:text/html;charset=utf-8,<style>html{background:red}</style>";
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URI).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+  helper.prefix = ID;
+
+  const {
+    show,
+    finalize,
+    waitForElementAttributeSet,
+    waitForElementAttributeRemoved,
+  } = helper;
+
+  info("Show the eyedropper with the copyOnSelect option");
+  await show("html", { copyOnSelect: true });
+
+  info(
+    "Make sure to wait until the eyedropper is done taking a screenshot of the page"
+  );
+  await waitForElementAttributeSet("root", "drawn", helper);
+
+  await waitForClipboardPromise(() => {
+    info("Activate the eyedropper so the background color is copied");
+    EventUtils.synthesizeKey("KEY_Enter");
+  }, "#ff0000");
+
+  ok(true, "The clipboard contains the right value");
+
+  await waitForElementAttributeRemoved("root", "drawn", helper);
+  await waitForElementAttributeSet("root", "hidden", helper);
+  ok(true, "The eyedropper is now hidden");
+
+  info("Check that the clipboard still contains the copied color");
+  is(SpecialPowers.getClipboardData("text/plain"), "#ff0000");
+
+  info("Replace the clipboard content with another text");
+  SpecialPowers.clipboardCopyString("not-a-color");
+  is(SpecialPowers.getClipboardData("text/plain"), "not-a-color");
+
+  info("Click on the page again, check the clipboard was not updated");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    "body",
+    {},
+    gBrowser.selectedBrowser
+  );
+  // Wait 500ms because nothing is observable when the test is successful.
+  await wait(500);
+  is(SpecialPowers.getClipboardData("text/plain"), "not-a-color");
+
+  finalize();
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-csp.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-csp.js
new file mode 100644
index 0000000000..0435aee919
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-csp.js
@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that the eyedropper opens correctly even when the page defines CSP headers.
+
+const TEST_URI = URL_ROOT + "doc_inspector_csp.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  const toggleButton = inspector.panelDoc.querySelector(
+    "#inspector-eyedropper-toggle"
+  );
+  toggleButton.click();
+  await TestUtils.waitForCondition(() =>
+    highlighterTestFront.isEyeDropperVisible()
+  );
+
+  ok(true, "Eye dropper is visible");
+
+  await checkEyeDropperColorAt(
+    highlighterTestFront,
+    5,
+    5,
+    "#ff0000",
+    "The eyedropper holds the expected color for the top-level element"
+  );
+
+  info("Hide the eyedropper");
+  toggleButton.click();
+  await TestUtils.waitForCondition(async () => {
+    const visible = await highlighterTestFront.isEyeDropperVisible();
+    return !visible;
+  });
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
new file mode 100644
index 0000000000..0c05aa219f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
@@ -0,0 +1,184 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test the eyedropper mouse and keyboard handling.
+
+const HIGHLIGHTER_TYPE = "EyeDropper";
+const ID = "eye-dropper-";
+const TEST_URI = `
+<style>
+  html{width:100%;height:100%;}
+</style>
+<body>eye-dropper test</body>`;
+
+const MOVE_EVENTS_DATA = [
+  { type: "mouse", x: 200, y: 100, expected: { x: 200, y: 100 } },
+  { type: "mouse", x: 100, y: 200, expected: { x: 100, y: 200 } },
+  { type: "keyboard", key: "VK_LEFT", expected: { x: 99, y: 200 } },
+  {
+    type: "keyboard",
+    key: "VK_LEFT",
+    shift: true,
+    expected: { x: 89, y: 200 },
+  },
+  { type: "keyboard", key: "VK_RIGHT", expected: { x: 90, y: 200 } },
+  {
+    type: "keyboard",
+    key: "VK_RIGHT",
+    shift: true,
+    expected: { x: 100, y: 200 },
+  },
+  { type: "keyboard", key: "VK_DOWN", expected: { x: 100, y: 201 } },
+  {
+    type: "keyboard",
+    key: "VK_DOWN",
+    shift: true,
+    expected: { x: 100, y: 211 },
+  },
+  { type: "keyboard", key: "VK_UP", expected: { x: 100, y: 210 } },
+  { type: "keyboard", key: "VK_UP", shift: true, expected: { x: 100, y: 200 } },
+  // Mouse initialization for left and top snapping
+  { type: "mouse", x: 7, y: 7, expected: { x: 7, y: 7 } },
+  // Left Snapping
+  {
+    type: "keyboard",
+    key: "VK_LEFT",
+    shift: true,
+    expected: { x: 0, y: 7 },
+    desc: "Left Snapping to x=0",
+  },
+  // Top Snapping
+  {
+    type: "keyboard",
+    key: "VK_UP",
+    shift: true,
+    expected: { x: 0, y: 0 },
+    desc: "Top Snapping to y=0",
+  },
+  // Mouse initialization for right snapping
+  {
+    type: "mouse",
+    x: (width, height) => width - 5,
+    y: 0,
+    expected: {
+      x: (width, height) => width - 5,
+      y: 0,
+    },
+  },
+  // Right snapping
+  {
+    type: "keyboard",
+    key: "VK_RIGHT",
+    shift: true,
+    expected: {
+      x: (width, height) => width,
+      y: 0,
+    },
+    desc: "Right snapping to x=max window width available",
+  },
+  // Mouse initialization for bottom snapping
+  {
+    type: "mouse",
+    x: 0,
+    y: (width, height) => height - 5,
+    expected: {
+      x: 0,
+      y: (width, height) => height - 5,
+    },
+  },
+  // Bottom snapping
+  {
+    type: "keyboard",
+    key: "VK_DOWN",
+    shift: true,
+    expected: {
+      x: 0,
+      y: (width, height) => height,
+    },
+    desc: "Bottom snapping to y=max window height available",
+  },
+];
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)({
+    inspector,
+    highlighterTestFront,
+  });
+
+  helper.prefix = ID;
+
+  await helper.show("html");
+  await respondsToMoveEvents(helper);
+  await respondsToReturnAndEscape(helper);
+
+  helper.finalize();
+});
+
+async function respondsToMoveEvents(helper) {
+  info(
+    "Checking that the eyedropper responds to events from the mouse and keyboard"
+  );
+  const { mouse } = helper;
+  const { width, height } = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const rect = content.document
+        .querySelector("html")
+        .getBoundingClientRect();
+      return { width: rect.width, height: rect.height };
+    }
+  );
+
+  for (let { type, x, y, key, shift, expected, desc } of MOVE_EVENTS_DATA) {
+    x = typeof x === "function" ? x(width, height) : x;
+    y = typeof y === "function" ? y(width, height) : y;
+    expected.x =
+      typeof expected.x === "function" ? expected.x(width, height) : expected.x;
+    expected.y =
+      typeof expected.y === "function" ? expected.y(width, height) : expected.y;
+
+    if (typeof desc === "undefined") {
+      info(`Simulating a ${type} event to move to ${expected.x} ${expected.y}`);
+    } else {
+      info(`Simulating ${type} event: ${desc}`);
+    }
+
+    if (type === "mouse") {
+      await mouse.move(x, y);
+    } else if (type === "keyboard") {
+      const options = shift ? { shiftKey: true } : {};
+      await EventUtils.synthesizeAndWaitKey(key, options);
+    }
+    await checkPosition(expected, helper);
+  }
+}
+
+async function checkPosition({ x, y }, { getElementAttribute }) {
+  const style = await getElementAttribute("root", "style");
+  is(
+    style,
+    `top:${y}px;left:${x}px;`,
+    `The eyedropper is at the expected ${x} ${y} position`
+  );
+}
+
+async function respondsToReturnAndEscape({ isElementHidden, show }) {
+  info("Simulating return to select the color and hide the eyedropper");
+
+  await EventUtils.synthesizeAndWaitKey("VK_RETURN", {});
+  let hidden = await isElementHidden("root");
+  ok(hidden, "The eyedropper has been hidden");
+
+  info("Showing the eyedropper again and simulating escape to hide it");
+
+  await show("html");
+  await EventUtils.synthesizeAndWaitKey("VK_ESCAPE", {});
+  hidden = await isElementHidden("root");
+  ok(hidden, "The eyedropper has been hidden again");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-frames.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-frames.js
new file mode 100644
index 0000000000..926a97a80b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-frames.js
@@ -0,0 +1,94 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that the eyedropper works on a page with iframes.
+
+const TOP_LEVEL_BACKGROUND_COLOR = "#ff0000";
+const SAME_ORIGIN_FRAME_BACKGROUND_COLOR = "#00ee00";
+const REMOTE_FRAME_BACKGROUND_COLOR = "#0000dd";
+
+const HTML = `
+<style>
+  body {
+    height: 100vh;
+    background: ${TOP_LEVEL_BACKGROUND_COLOR};
+    margin: 0;
+  }
+
+  div, iframe {
+    border: none;
+    display: block;
+    height: 100px;
+    text-align: center;
+  }
+</style>
+<div>top-level element</div>
+<iframe src="https://example.com/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
+  SAME_ORIGIN_FRAME_BACKGROUND_COLOR
+)};text-align: center;}</style><body>same origin iframe</body>"></iframe>
+<iframe src="https://example.org/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
+  REMOTE_FRAME_BACKGROUND_COLOR
+)};text-align: center;}</style><body>remote iframe</body>"></iframe>
+`;
+const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
+  HTML
+)}`;
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  const toggleButton = inspector.panelDoc.querySelector(
+    "#inspector-eyedropper-toggle"
+  );
+  toggleButton.click();
+  await TestUtils.waitForCondition(() =>
+    highlighterTestFront.isEyeDropperVisible()
+  );
+
+  ok(true, "Eye dropper is visible");
+
+  const checkColorAt = (...args) =>
+    checkEyeDropperColorAt(highlighterTestFront, ...args);
+
+  //   The content page has the following layout:
+  //
+  //  +------------------------------------+
+  //  |   top level div (#ff0000)          | 100px
+  //  +------------------------------------+
+  //  |   same origin iframe (#00ee00)     | 100px
+  //  +------------------------------------+
+  //  |   remote iframe (#0000dd)          | 100px
+  //  +------------------------------------+
+
+  await checkColorAt(
+    50,
+    50,
+    TOP_LEVEL_BACKGROUND_COLOR,
+    "The eyedropper holds the expected color for the top-level element"
+  );
+
+  await checkColorAt(
+    50,
+    150,
+    SAME_ORIGIN_FRAME_BACKGROUND_COLOR,
+    "The eyedropper holds the expected color for the same-origin iframe"
+  );
+
+  await checkColorAt(
+    50,
+    250,
+    REMOTE_FRAME_BACKGROUND_COLOR,
+    "The eyedropper holds the expected color for the remote iframe"
+  );
+
+  info("Hide the eyedropper");
+  toggleButton.click();
+  await TestUtils.waitForCondition(async () => {
+    const visible = await highlighterTestFront.isEyeDropperVisible();
+    return !visible;
+  });
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-image.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-image.js
new file mode 100644
index 0000000000..eb38767bf8
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-image.js
@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the eyedropper icon in the toolbar is enabled when viewing an image.
+
+const TEST_URL =
+  URL_ROOT + "img_browser_inspector_highlighter-eyedropper-image.png";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  info("Check the inspector toolbar when viewing an image");
+  const button = inspector.panelDoc.querySelector(
+    "#inspector-eyedropper-toggle"
+  );
+  ok(!button.disabled, "The button is enabled in the toolbar");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
new file mode 100644
index 0000000000..d9413e5d39
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
@@ -0,0 +1,145 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test the position of the eyedropper label.
+// It should move around when the eyedropper is close to the edges of the viewport so as
+// to always stay visible.
+
+const HIGHLIGHTER_TYPE = "EyeDropper";
+const ID = "eye-dropper-";
+
+const HTML = `
+<style>
+html, body {height: 100%; margin: 0;}
+body {background: linear-gradient(red, gold); display: flex; justify-content: center;
+      align-items: center;}
+</style>
+Eyedropper label position test
+`;
+const TEST_PAGE = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+const TEST_DATA = [
+  {
+    desc: "Move the mouse to the center of the screen",
+    getCoordinates: (width, height) => {
+      return { x: width / 2, y: height / 2 };
+    },
+    expectedPositions: { top: false, right: false, left: false },
+  },
+  {
+    desc: "Move the mouse to the center left",
+    getCoordinates: (width, height) => {
+      return { x: 0, y: height / 2 };
+    },
+    expectedPositions: { top: false, right: true, left: false },
+  },
+  {
+    desc: "Move the mouse to the center right",
+    getCoordinates: (width, height) => {
+      return { x: width, y: height / 2 };
+    },
+    expectedPositions: { top: false, right: false, left: true },
+  },
+  {
+    desc: "Move the mouse to the bottom center",
+    getCoordinates: (width, height) => {
+      return { x: width / 2, y: height };
+    },
+    expectedPositions: { top: true, right: false, left: false },
+  },
+  {
+    desc: "Move the mouse to the bottom left",
+    getCoordinates: (width, height) => {
+      return { x: 0, y: height };
+    },
+    expectedPositions: { top: true, right: true, left: false },
+  },
+  {
+    desc: "Move the mouse to the bottom right",
+    getCoordinates: (width, height) => {
+      return { x: width, y: height };
+    },
+    expectedPositions: { top: true, right: false, left: true },
+  },
+  {
+    desc: "Move the mouse to the top left",
+    getCoordinates: (width, height) => {
+      return { x: 0, y: 0 };
+    },
+    expectedPositions: { top: false, right: true, left: false },
+  },
+  {
+    desc: "Move the mouse to the top right",
+    getCoordinates: (width, height) => {
+      return { x: width, y: 0 };
+    },
+    expectedPositions: { top: false, right: false, left: true },
+  },
+];
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_PAGE
+  );
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)({
+    inspector,
+    highlighterTestFront,
+  });
+  helper.prefix = ID;
+
+  const { mouse, show, hide, finalize } = helper;
+  let { width, height } = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const rect = content.document
+        .querySelector("html")
+        .getBoundingClientRect();
+      return { width: rect.width, height: rect.height };
+    }
+  );
+
+  // This test fails in non-e10s windows if we use width and height. For some reasons, the
+  // mouse events can't be dispatched/handled properly when we try to move the eyedropper
+  // to the far right and/or bottom of the screen. So just removing 10px from each side
+  // fixes it.
+  width -= 10;
+  height -= 10;
+
+  info("Show the eyedropper on the page");
+  await show("html");
+
+  info(
+    "Move the eyedropper around and check that the label appears at the right place"
+  );
+  for (const { desc, getCoordinates, expectedPositions } of TEST_DATA) {
+    info(desc);
+    const { x, y } = getCoordinates(width, height);
+    info(`Moving the mouse to ${x} ${y}`);
+    await mouse.move(x, y);
+    await checkLabelPositionAttributes(helper, expectedPositions);
+  }
+
+  info("Hide the eyedropper");
+  await hide();
+  finalize();
+});
+
+async function checkLabelPositionAttributes(helper, positions) {
+  for (const position in positions) {
+    is(
+      await hasAttribute(helper, position),
+      positions[position],
+      `The label was ${
+        positions[position] ? "" : "not "
+      }moved to the ${position}`
+    );
+  }
+}
+
+async function hasAttribute({ getElementAttribute }, name) {
+  const value = await getElementAttribute("root", name);
+  return value !== null;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-show-hide.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-show-hide.js
new file mode 100644
index 0000000000..7ccc87bf88
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-show-hide.js
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test the basic structure of the eye-dropper highlighter.
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,eye-dropper test"
+  );
+
+  info("Checking that the eyedropper is hidden by default");
+  const eyeDropperVisible = await highlighterTestFront.isEyeDropperVisible();
+  is(eyeDropperVisible, false, "The eyedropper is hidden by default");
+
+  const toggleButton = inspector.panelDoc.querySelector(
+    "#inspector-eyedropper-toggle"
+  );
+
+  info("Display the eyedropper by clicking on the inspector toolbar button");
+  toggleButton.click();
+  await TestUtils.waitForCondition(() =>
+    highlighterTestFront.isEyeDropperVisible()
+  );
+  ok(true, "Eye dropper is visible after clicking the button in the inspector");
+
+  const style = await highlighterTestFront.getEyeDropperElementAttribute(
+    "root",
+    "style"
+  );
+  is(style, "top:100px;left:100px;", "The eyedropper is correctly positioned");
+
+  info("Hide the eyedropper by clicking on the inspector toolbar button again");
+  toggleButton.click();
+  await TestUtils.waitForCondition(async () => {
+    const visible = await highlighterTestFront.isEyeDropperVisible();
+    return !visible;
+  });
+  ok(true, "Eye dropper is not visible anymore");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js
new file mode 100644
index 0000000000..07d6708440
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the eyedropper icons in the toolbar and in the color picker aren't displayed
+// when the page isn't an HTML one.
+
+const TEST_URL = URL_ROOT_SSL + "doc_inspector_eyedropper_disabled.xhtml";
+const TEST_URL_2 =
+  "data:text/html;charset=utf-8,<h1 style='color:red'>HTML test page</h1>";
+
+add_task(async function () {
+  await SpecialPowers.pushPermissions([
+    { type: "allowXULXBL", allow: true, context: URL_ROOT_SSL },
+  ]);
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Check the inspector toolbar");
+  let button = inspector.panelDoc.querySelector("#inspector-eyedropper-toggle");
+  ok(isDisabled(button), "The button is hidden in the toolbar");
+
+  info("Check the color picker");
+  await selectNode("#box", inspector);
+
+  // Find the color swatch in the rule-view.
+  let ruleView = inspector.getPanel("ruleview").view;
+  let ruleViewDocument = ruleView.styleDocument;
+  let swatchEl = ruleViewDocument.querySelector(".ruleview-colorswatch");
+
+  info("Open the color picker");
+  let cPicker = ruleView.tooltips.getTooltip("colorPicker");
+  let onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  button = cPicker.tooltip.container.querySelector("#eyedropper-button");
+  ok(isDisabled(button), "The button is disabled in the color picker");
+
+  // Close the picker to avoid pending Promise when the connection closes because of
+  // the navigation to the HTML document (See Bug 1721369).
+  cPicker.hide();
+
+  info("Navigate to a HTML document");
+  const toolbarUpdated = inspector.once("inspector-toolbar-updated");
+  await navigateTo(TEST_URL_2);
+  await toolbarUpdated;
+
+  info("Check the inspector toolbar in HTML document");
+  button = inspector.panelDoc.querySelector("#inspector-eyedropper-toggle");
+  ok(!isDisabled(button), "The button is enabled in the toolbar");
+
+  info("Check the color picker in HTML document");
+  // Find the color swatch in the rule-view.
+  await selectNode("h1", inspector);
+
+  ruleView = inspector.getPanel("ruleview").view;
+  ruleViewDocument = ruleView.styleDocument;
+  swatchEl = ruleViewDocument.querySelector(".ruleview-colorswatch");
+
+  info("Open the color picker in HTML document");
+  cPicker = ruleView.tooltips.getTooltip("colorPicker");
+  onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  button = cPicker.tooltip.container.querySelector("#eyedropper-button");
+  ok(!isDisabled(button), "The button is enabled in the color picker");
+});
+
+function isDisabled(button) {
+  return button.disabled;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-zoom.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-zoom.js
new file mode 100644
index 0000000000..ea8b3ef444
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-zoom.js
@@ -0,0 +1,89 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that the eye dropper works as expected when the page is zoomed-in.
+
+const COLOR_1 = "#aa0000";
+const COLOR_2 = "#0bb000";
+const COLOR_3 = "#00cc00";
+const COLOR_4 = "#000dd0";
+
+const HTML = `
+<style>
+  body {
+    margin: 0;
+  }
+  div {
+    height: 50px;
+    width: 50px;
+  }
+</style>
+<div style="background-color: ${COLOR_1};"></div>
+<div style="background-color: ${COLOR_2};"></div>
+<div style="background-color: ${COLOR_3};"></div>
+<div style="background-color: ${COLOR_4};"></div>`;
+const TEST_URI = `http://example.com/document-builder.sjs?html=${encodeURIComponent(
+  HTML
+)}`;
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  info("Zoom in the page");
+  setContentPageZoomLevel(2);
+
+  const toggleButton = inspector.panelDoc.querySelector(
+    "#inspector-eyedropper-toggle"
+  );
+  toggleButton.click();
+  await TestUtils.waitForCondition(() =>
+    highlighterTestFront.isEyeDropperVisible()
+  );
+
+  ok(true, "Eye dropper is visible");
+
+  const checkColorAt = (...args) =>
+    checkEyeDropperColorAt(highlighterTestFront, ...args);
+
+  // ⚠️ Note that we need to check the regular position, not the zoomed-in ones.
+
+  await checkColorAt(
+    25,
+    10,
+    COLOR_1,
+    "The eyedropper holds the expected color for the first div"
+  );
+
+  await checkColorAt(
+    25,
+    60,
+    COLOR_2,
+    "The eyedropper holds the expected color for the second div"
+  );
+
+  await checkColorAt(
+    25,
+    110,
+    COLOR_3,
+    "The eyedropper holds the expected color for the third div"
+  );
+
+  await checkColorAt(
+    25,
+    160,
+    COLOR_4,
+    "The eyedropper holds the expected color for the fourth div"
+  );
+
+  info("Hide the eyedropper");
+  toggleButton.click();
+  await TestUtils.waitForCondition(async () => {
+    const visible = await highlighterTestFront.isEyeDropperVisible();
+    return !visible;
+  });
+  setContentPageZoomLevel(1);
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
new file mode 100644
index 0000000000..c50dee30b0
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
@@ -0,0 +1,96 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the geometry highlighter elements.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+                  <span id='inline'></span>
+                  <div id='positioned' style='
+                    background:yellow;
+                    position:absolute;
+                    left:5rem;
+                    top:30px;
+                    right:300px;
+                    bottom:10em;'></div>
+                  <div id='sized' style='
+                    background:red;
+                    width:5em;
+                    height:50%;'></div>`;
+
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+
+const ID = "geometry-editor-";
+const SIDES = ["left", "right", "top", "bottom"];
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  const { finalize } = helper;
+
+  helper.prefix = ID;
+
+  await hasArrowsAndLabelsAndHandlers(helper);
+  await isHiddenForNonPositionedNonSizedElement(helper);
+  await sideArrowsAreDisplayedForPositionedNode(helper);
+
+  finalize();
+});
+
+async function hasArrowsAndLabelsAndHandlers({ getElementAttribute }) {
+  info("Checking that the highlighter has the expected arrows and labels");
+
+  for (const name of [...SIDES]) {
+    let value = await getElementAttribute("arrow-" + name, "class");
+    is(value, ID + "arrow " + name, "The " + name + " arrow exists");
+
+    value = await getElementAttribute("label-text-" + name, "class");
+    is(value, ID + "label-text", "The " + name + " label exists");
+
+    value = await getElementAttribute("handler-" + name, "class");
+    is(value, ID + "handler-" + name, "The " + name + " handler exists");
+  }
+}
+
+async function isHiddenForNonPositionedNonSizedElement({
+  show,
+  hide,
+  isElementHidden,
+}) {
+  info("Asking to show the highlighter on an inline, non p  ositioned element");
+
+  await show("#inline");
+
+  for (const name of [...SIDES]) {
+    let hidden = await isElementHidden("arrow-" + name);
+    ok(hidden, "The " + name + " arrow is hidden");
+
+    hidden = await isElementHidden("handler-" + name);
+    ok(hidden, "The " + name + " handler is hidden");
+  }
+}
+
+async function sideArrowsAreDisplayedForPositionedNode({
+  show,
+  hide,
+  isElementHidden,
+}) {
+  info("Asking to show the highlighter on the positioned node");
+
+  await show("#positioned");
+
+  for (const name of SIDES) {
+    let hidden = await isElementHidden("arrow-" + name);
+    ok(!hidden, "The " + name + " arrow is visible for the positioned node");
+
+    hidden = await isElementHidden("handler-" + name);
+    ok(!hidden, "The " + name + " handler is visible for the positioned node");
+  }
+
+  info("Hiding the highlighter");
+  await hide();
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js
new file mode 100644
index 0000000000..8875b95efb
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js
@@ -0,0 +1,125 @@
+/* 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/. */
+
+/* Globals defined in: devtools/client/inspector/test/head.js */
+
+"use strict";
+
+// Test that the geometry highlighter labels are correct.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+                  <div id='positioned' style='
+                    background:yellow;
+                    position:absolute;
+                    left:5rem;
+                    top:30px;
+                    right:300px;
+                    bottom:10em;'></div>
+                  <div id='positioned2' style='
+                    background:blue;
+                    position:absolute;
+                    right:10%;
+                    top:5vmin;'>test element</div>
+                 <div id='relative' style='
+                    background:green;
+                    position:relative;
+                    top:10px;
+                    left:20px;
+                    bottom:30px;
+                    right:40px;
+                    width:100px;
+                    height:100px;'></div>
+                 <div id='relative2' style='
+                    background:grey;
+                    position:relative;
+                    top:0;bottom:-50px;
+                    height:3em;'>relative</div>`;
+
+const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+
+const POSITIONED_ELEMENT_TESTS = [
+  {
+    selector: "#positioned",
+    expectedLabels: [
+      { side: "left", visible: true, label: "5rem" },
+      { side: "top", visible: true, label: "30px" },
+      { side: "right", visible: true, label: "300px" },
+      { side: "bottom", visible: true, label: "10em" },
+    ],
+  },
+  {
+    selector: "#positioned2",
+    expectedLabels: [
+      { side: "left", visible: false },
+      { side: "top", visible: true, label: "5vmin" },
+      { side: "right", visible: true, label: "10%" },
+      { side: "bottom", visible: false },
+    ],
+  },
+  {
+    selector: "#relative",
+    expectedLabels: [
+      { side: "left", visible: true, label: "20px" },
+      { side: "top", visible: true, label: "10px" },
+      { side: "right", visible: false },
+      { side: "bottom", visible: false },
+    ],
+  },
+  {
+    selector: "#relative2",
+    expectedLabels: [
+      { side: "left", visible: false },
+      { side: "top", visible: true, label: "0px" },
+      { side: "right", visible: false },
+      { side: "bottom", visible: false },
+    ],
+  },
+];
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  helper.prefix = ID;
+
+  const { finalize } = helper;
+
+  await positionLabelsAreCorrect(helper);
+
+  await finalize();
+});
+
+async function positionLabelsAreCorrect({
+  show,
+  hide,
+  isElementHidden,
+  getElementTextContent,
+}) {
+  info("Highlight nodes and check position labels");
+
+  for (const { selector, expectedLabels } of POSITIONED_ELEMENT_TESTS) {
+    info("Testing node " + selector);
+
+    await show(selector);
+
+    for (const { side, visible, label } of expectedLabels) {
+      const id = "label-" + side;
+
+      const hidden = await isElementHidden(id);
+      if (visible) {
+        ok(!hidden, "The " + side + " label is visible");
+
+        const value = await getElementTextContent(id);
+        is(value, label, "The " + side + " label textcontent is correct");
+      } else {
+        ok(hidden, "The " + side + " label is hidden");
+      }
+    }
+
+    info("Hiding the highlighter");
+    await hide();
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js
new file mode 100644
index 0000000000..e11b9484db
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js
@@ -0,0 +1,72 @@
+/* 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/. */
+
+/* Globals defined in: devtools/client/inspector/test/head.js */
+
+"use strict";
+
+// Test that the right arrows/labels are shown even when the css properties are
+// in several different css rules.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
+const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+const PROPS = ["left", "right", "top", "bottom"];
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  helper.prefix = ID;
+
+  const { finalize } = helper;
+
+  await checkArrowsLabelsAndHandlers(
+    "#node2",
+    ["top", "left", "bottom", "right"],
+    helper
+  );
+
+  await checkArrowsLabelsAndHandlers("#node3", ["top", "left"], helper);
+
+  await finalize();
+});
+
+async function checkArrowsLabelsAndHandlers(
+  selector,
+  expectedProperties,
+  { show, hide, isElementHidden }
+) {
+  info("Getting node " + selector + " from the page");
+
+  await show(selector);
+
+  for (const name of expectedProperties) {
+    const hidden =
+      (await isElementHidden("arrow-" + name)) &&
+      (await isElementHidden("handler-" + name));
+    ok(
+      !hidden,
+      "The " + name + " label/arrow & handler is visible for node " + selector
+    );
+  }
+
+  // Testing that the other arrows are hidden
+  for (const name of PROPS) {
+    if (expectedProperties.includes(name)) {
+      continue;
+    }
+    const hidden =
+      (await isElementHidden("arrow-" + name)) &&
+      (await isElementHidden("handler-" + name));
+    ok(
+      hidden,
+      "The " + name + " arrow & handler is hidden for node " + selector
+    );
+  }
+
+  info("Hiding the highlighter");
+  await hide();
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_04.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_04.js
new file mode 100644
index 0000000000..9fef4c98dd
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_04.js
@@ -0,0 +1,103 @@
+/* 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/. */
+
+/* Globals defined in: devtools/client/inspector/test/head.js */
+
+"use strict";
+
+// Test that the arrows and handlers are positioned correctly and have the right
+// size.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
+const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+
+const handlerMap = {
+  top: { cx: "x2", cy: "y2" },
+  bottom: { cx: "x2", cy: "y2" },
+  left: { cx: "x2", cy: "y2" },
+  right: { cx: "x2", cy: "y2" },
+};
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  helper.prefix = ID;
+
+  const { hide, finalize } = helper;
+
+  await checkArrowsAndHandlers(helper, ".absolute-all-4", {
+    top: { x1: 506, y1: 51, x2: 506, y2: 61 },
+    bottom: { x1: 506, y1: 451, x2: 506, y2: 251 },
+    left: { x1: 401, y1: 156, x2: 411, y2: 156 },
+    right: { x1: 901, y1: 156, x2: 601, y2: 156 },
+  });
+
+  await checkArrowsAndHandlers(helper, ".relative", {
+    top: { x1: 901, y1: 51, x2: 901, y2: 91 },
+    left: { x1: 401, y1: 97, x2: 651, y2: 97 },
+  });
+
+  await checkArrowsAndHandlers(helper, ".fixed", {
+    top: { x1: 25, y1: 0, x2: 25, y2: 400 },
+    left: { x1: 0, y1: 425, x2: 0, y2: 425 },
+  });
+
+  info("Hiding the highlighter");
+  await hide();
+  await finalize();
+});
+
+async function checkArrowsAndHandlers(helper, selector, arrows) {
+  info("Highlighting the test node " + selector);
+
+  await helper.show(selector);
+
+  for (const side in arrows) {
+    await checkArrowAndHandler(helper, side, arrows[side]);
+  }
+}
+
+async function checkArrowAndHandler(
+  { getElementAttribute },
+  name,
+  expectedCoords
+) {
+  info("Checking " + name + "arrow and handler coordinates are correct");
+
+  const handlerX = await getElementAttribute("handler-" + name, "cx");
+  const handlerY = await getElementAttribute("handler-" + name, "cy");
+
+  const expectedHandlerX = await getElementAttribute(
+    "arrow-" + name,
+    handlerMap[name].cx
+  );
+  const expectedHandlerY = await getElementAttribute(
+    "arrow-" + name,
+    handlerMap[name].cy
+  );
+
+  is(
+    handlerX,
+    expectedHandlerX,
+    "coordinate X for handler " + name + " is correct."
+  );
+  is(
+    handlerY,
+    expectedHandlerY,
+    "coordinate Y for handler " + name + " is correct."
+  );
+
+  for (const coordinate in expectedCoords) {
+    const value = await getElementAttribute("arrow-" + name, coordinate);
+
+    is(
+      Math.floor(value),
+      expectedCoords[coordinate],
+      coordinate + " coordinate for arrow " + name + " is correct"
+    );
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_05.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_05.js
new file mode 100644
index 0000000000..7b68fd1042
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_05.js
@@ -0,0 +1,140 @@
+/* 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/. */
+
+/* Globals defined in: devtools/client/inspector/test/head.js */
+
+"use strict";
+
+// Test that the arrows/handlers and offsetparent and currentnode elements of
+// the geometry highlighter only appear when needed.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_02.html";
+const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+
+const TEST_DATA = [
+  {
+    selector: "body",
+    isOffsetParentVisible: false,
+    isCurrentNodeVisible: false,
+    hasVisibleArrowsAndHandlers: false,
+  },
+  {
+    selector: "h1",
+    isOffsetParentVisible: false,
+    isCurrentNodeVisible: false,
+    hasVisibleArrowsAndHandlers: false,
+  },
+  {
+    selector: ".absolute",
+    isOffsetParentVisible: false,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: true,
+  },
+  {
+    selector: "#absolute-container",
+    isOffsetParentVisible: false,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: false,
+  },
+  {
+    selector: ".absolute-bottom-right",
+    isOffsetParentVisible: true,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: true,
+  },
+  {
+    selector: ".absolute-width-margin",
+    isOffsetParentVisible: true,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: true,
+  },
+  {
+    selector: ".absolute-all-4",
+    isOffsetParentVisible: true,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: true,
+  },
+  {
+    selector: ".relative",
+    isOffsetParentVisible: true,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: true,
+  },
+  {
+    selector: ".static",
+    isOffsetParentVisible: false,
+    isCurrentNodeVisible: false,
+    hasVisibleArrowsAndHandlers: false,
+  },
+  {
+    selector: ".static-size",
+    isOffsetParentVisible: false,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: false,
+  },
+  {
+    selector: ".fixed",
+    isOffsetParentVisible: false,
+    isCurrentNodeVisible: true,
+    hasVisibleArrowsAndHandlers: true,
+  },
+];
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  helper.prefix = ID;
+
+  const { hide, finalize } = helper;
+
+  for (const data of TEST_DATA) {
+    await testNode(helper, data);
+  }
+
+  info("Hiding the highlighter");
+  await hide();
+  await finalize();
+});
+
+async function testNode(helper, data) {
+  const { selector } = data;
+  await helper.show(data.selector);
+
+  is(
+    await isOffsetParentVisible(helper),
+    data.isOffsetParentVisible,
+    "The offset-parent highlighter visibility is correct for node " + selector
+  );
+  is(
+    await isCurrentNodeVisible(helper),
+    data.isCurrentNodeVisible,
+    "The current-node highlighter visibility is correct for node " + selector
+  );
+  is(
+    await hasVisibleArrowsAndHandlers(helper),
+    data.hasVisibleArrowsAndHandlers,
+    "The arrows visibility is correct for node " + selector
+  );
+}
+
+async function isOffsetParentVisible({ isElementHidden }) {
+  return !(await isElementHidden("offset-parent"));
+}
+
+async function isCurrentNodeVisible({ isElementHidden }) {
+  return !(await isElementHidden("current-node"));
+}
+
+async function hasVisibleArrowsAndHandlers({ isElementHidden }) {
+  for (const side of ["top", "left", "bottom", "right"]) {
+    const hidden = await isElementHidden("arrow-" + side);
+    if (!hidden) {
+      return !(await isElementHidden("handler-" + side));
+    }
+  }
+  return false;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js
new file mode 100644
index 0000000000..c4064792cd
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js
@@ -0,0 +1,166 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the geometry editor resizes properly an element on all sides,
+// with different unit measures, and that arrow/handlers are updated correctly.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
+const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+
+const SIDES = ["top", "right", "bottom", "left"];
+
+// The object below contains all the tests for this unit test.
+// The property's name is the test's description, that points to an
+// object contains the steps (what side of the geometry editor to drag,
+// the amount of pixels) and the expectation.
+const TESTS = {
+  "Drag top's handler along x and y, south-east direction": {
+    expects: "Only y axis is used to updated the top's element value",
+    drag: "top",
+    by: { x: 10, y: 10 },
+  },
+  "Drag right's handler along x and y, south-east direction": {
+    expects: "Only x axis is used to updated the right's element value",
+    drag: "right",
+    by: { x: 10, y: 10 },
+  },
+  "Drag bottom's handler along x and y, south-east direction": {
+    expects: "Only y axis is used to updated the bottom's element value",
+    drag: "bottom",
+    by: { x: 10, y: 10 },
+  },
+  "Drag left's handler along x and y, south-east direction": {
+    expects: "Only y axis is used to updated the left's element value",
+    drag: "left",
+    by: { x: 10, y: 10 },
+  },
+  "Drag top's handler along x and y, north-west direction": {
+    expects: "Only y axis is used to updated the top's element value",
+    drag: "top",
+    by: { x: -20, y: -20 },
+  },
+  "Drag right's handler along x and y, north-west direction": {
+    expects: "Only x axis is used to updated the right's element value",
+    drag: "right",
+    by: { x: -20, y: -20 },
+  },
+  "Drag bottom's handler along x and y, north-west direction": {
+    expects: "Only y axis is used to updated the bottom's element value",
+    drag: "bottom",
+    by: { x: -20, y: -20 },
+  },
+  "Drag left's handler along x and y, north-west direction": {
+    expects: "Only y axis is used to updated the left's element value",
+    drag: "left",
+    by: { x: -20, y: -20 },
+  },
+};
+
+add_task(async function () {
+  const inspector = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(inspector);
+
+  helper.prefix = ID;
+
+  const { show, hide, finalize } = helper;
+
+  info("Showing the highlighter");
+  await show("#node2");
+
+  for (const desc in TESTS) {
+    await executeTest(helper, desc, TESTS[desc]);
+  }
+
+  info("Hiding the highlighter");
+  await hide();
+  await finalize();
+});
+
+async function executeTest(helper, desc, data) {
+  info(desc);
+
+  ok(
+    await areElementAndHighlighterMovedCorrectly(helper, data.drag, data.by),
+    data.expects
+  );
+}
+
+async function areElementAndHighlighterMovedCorrectly(helper, side, by) {
+  const { mouse, highlightedNode } = helper;
+
+  const { x, y } = await getHandlerCoords(helper, side);
+
+  const dx = x + by.x;
+  const dy = y + by.y;
+
+  const beforeDragStyle = await highlightedNode.getComputedStyle();
+
+  // simulate drag & drop
+  await mouse.down(x, y);
+  await mouse.move(dx, dy);
+  await mouse.up();
+
+  await reflowContentPage();
+
+  info(`Checking ${side} handler is moved correctly`);
+  await isHandlerPositionUpdated(helper, side, x, y, by);
+
+  let delta = side === "left" || side === "right" ? by.x : by.y;
+  delta = delta * (side === "right" || side === "bottom" ? -1 : 1);
+
+  info("Checking element's sides are correct after drag & drop");
+  return areElementSideValuesCorrect(
+    highlightedNode,
+    beforeDragStyle,
+    side,
+    delta
+  );
+}
+
+async function isHandlerPositionUpdated(helper, name, x, y, by) {
+  const { x: afterDragX, y: afterDragY } = await getHandlerCoords(helper, name);
+
+  if (name === "left" || name === "right") {
+    is(afterDragX, x + by.x, `${name} handler's x axis updated.`);
+    is(afterDragY, y, `${name} handler's y axis unchanged.`);
+  } else {
+    is(afterDragX, x, `${name} handler's x axis unchanged.`);
+    is(afterDragY, y + by.y, `${name} handler's y axis updated.`);
+  }
+}
+
+async function areElementSideValuesCorrect(node, beforeDragStyle, name, delta) {
+  const afterDragStyle = await node.getComputedStyle();
+  let isSideCorrect = true;
+
+  for (const side of SIDES) {
+    const afterValue = Math.round(parseFloat(afterDragStyle[side].value));
+    const beforeValue = Math.round(parseFloat(beforeDragStyle[side].value));
+
+    if (side === name) {
+      // `isSideCorrect` is used only as test's return value, not to perform
+      // the actual test, because with `is` instead of `ok` we gather more
+      // information in case of failure
+      isSideCorrect = isSideCorrect && afterValue === beforeValue + delta;
+
+      is(afterValue, beforeValue + delta, `${side} is updated.`);
+    } else {
+      isSideCorrect = isSideCorrect && afterValue === beforeValue;
+
+      is(afterValue, beforeValue, `${side} is unchaged.`);
+    }
+  }
+
+  return isSideCorrect;
+}
+
+async function getHandlerCoords({ getElementAttribute }, side) {
+  return {
+    x: Math.round(await getElementAttribute("handler-" + side, "cx")),
+    y: Math.round(await getElementAttribute("handler-" + side, "cy")),
+  };
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_07.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_07.js
new file mode 100644
index 0000000000..e371ed4ca9
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_07.js
@@ -0,0 +1,146 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the original position of a relative positioned node is correct
+// even when zooming.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
+const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+
+const TESTS = {
+  ".absolute-all-4": {
+    desc: "Check absolute positioned element's parentOffset highlight",
+    sides: ["top", "right", "bottom", "left"],
+  },
+  ".relative": {
+    desc: "Check relative positioned element original offset highlight",
+    sides: ["top", "left"],
+  },
+};
+
+add_task(async function () {
+  const inspector = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(inspector);
+
+  helper.prefix = ID;
+
+  const { finalize } = helper;
+
+  for (const selector in TESTS) {
+    await executeTest(inspector, helper, selector, TESTS[selector]);
+  }
+
+  await finalize();
+});
+
+async function executeTest(inspector, helper, selector, data) {
+  const { show, hide } = helper;
+
+  info("Showing the highlighter");
+  await show(selector);
+  info(data.desc);
+
+  await checkOffsetParentSame(helper, selector, data.sides);
+
+  setContentPageZoomLevel(1.2);
+  await reflowContentPage();
+
+  await checkOffsetParentSame(helper, selector, data.sides);
+
+  info("Hiding the highlighter and resetting zoom");
+  setContentPageZoomLevel(1);
+  await hide();
+}
+
+// Check that the offsetParent element does not move around,
+// when the target element itself is being moved.
+async function checkOffsetParentSame({ getElementAttribute }, selector, sides) {
+  const expectedOffsetParent = splitPointsIntoCoordinates(
+    await getElementAttribute("offset-parent", "points")
+  );
+  const expectedArrowStartPos = await checkArrowStartingPos(
+    getElementAttribute,
+    expectedOffsetParent,
+    sides
+  );
+
+  // Setting both to 0px would disable the offsetParent highlighter and not update points.
+  await setContentPageElementAttribute(selector, "style", "top:1px; left:1px;");
+  await reflowContentPage();
+
+  const actualOffsetParent = splitPointsIntoCoordinates(
+    await getElementAttribute("offset-parent", "points")
+  );
+  const actualArrowStartPos = await checkArrowStartingPos(
+    getElementAttribute,
+    actualOffsetParent,
+    sides
+  );
+
+  await removeContentPageElementAttribute(selector, "style");
+
+  for (let i = 0; i < 4; i++) {
+    for (let j = 0; j < 2; j++) {
+      is(
+        actualOffsetParent[i][j],
+        expectedOffsetParent[i][j],
+        `Coordinate ${j + 1}/2 of point ${
+          i + 1
+        }/4 is the same after repositioning.`
+      );
+    }
+  }
+
+  for (let i = 0; i < expectedArrowStartPos.length; i++) {
+    is(
+      actualArrowStartPos[i],
+      expectedArrowStartPos[i],
+      `Start position of arrow-${sides[i]} is the same after repositioning.`
+    );
+  }
+}
+
+// Check that the arrow starts at the boundary of the offsetParent.
+// This also returns the start coordinate along the relevant axis.
+async function checkArrowStartingPos(
+  getElementAttribute,
+  offsetParentPoints,
+  sides
+) {
+  // offsetParentPoints is a number[][].
+  offsetParentPoints = offsetParentPoints.flat();
+  const result = [];
+
+  for (const side of sides) {
+    // The only attribute that must not change is the start position of the arrow.
+    // Cross-axis and end position could change when the target element is moved.
+    const axis = side === "top" || side === "bottom" ? "y" : "x";
+    // We have to round because floating point arithmetics are not consistent.
+    // (They are consistent enough, they just vary in their 10^(-5))
+    const arrowPos = Math.round(
+      parseFloat(await getElementAttribute("arrow-" + side, axis + "1"))
+    );
+    ok(
+      offsetParentPoints.includes(arrowPos),
+      `arrow-${side} starts at offset parent`
+    );
+    result.push(arrowPos);
+  }
+
+  return result;
+}
+
+// Splits the value of the points attribute into coordinates.
+function splitPointsIntoCoordinates(points) {
+  const result = [];
+  for (const coord of points.split(" ")) {
+    // We have to round (see above).
+    result.push(coord.split(",").map(s => Math.round(parseFloat(s))));
+  }
+
+  return result;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js
new file mode 100644
index 0000000000..4b44561b61
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the geometry highlighter gets hidden when the user performs other actions.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+   <h1 style='background:yellow;position:absolute;left:5rem;'>Hello</h1>`;
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Select the absolute positioned element");
+  await selectNode("h1", inspector);
+  const boxModelPanel = inspector.getPanel("boxmodel");
+
+  info("Click on the button enabling the highlighter");
+  const button = await waitFor(() =>
+    boxModelPanel.document.querySelector(".layout-geometry-editor")
+  );
+
+  let onHighlighterShown = getOnceHighlighterShown(inspector);
+  button.click();
+
+  await onHighlighterShown;
+  ok(true, "Highlighter is displayed");
+
+  info("Check that hovering a node in the markup view hides the highlighter");
+  const h1Nodecontainer = await getContainerForSelector("h1", inspector);
+
+  let onHighlighterHidden = getOnceHighlighterHidden(inspector);
+  EventUtils.synthesizeMouseAtCenter(
+    h1Nodecontainer.tagLine,
+    { type: "mousemove" },
+    inspector.markup.doc.defaultView
+  );
+  await onHighlighterHidden;
+  ok("Highlighter was hidden when hovering a node in the markup view");
+
+  info("Check that leaving the markupview shows the highlighter again");
+  onHighlighterShown = getOnceHighlighterShown(inspector);
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    { type: "mousemove" },
+    button.ownerDocument.defaultView
+  );
+  await onHighlighterShown;
+  ok(true, "Highlighter is shown again when leaving the markup view");
+
+  info("Check that starting the node picker disable the highlighter");
+  onHighlighterHidden = getOnceHighlighterHidden(inspector);
+  await startPicker(toolbox);
+  await onHighlighterHidden;
+  ok("Highlighter was hidden when using the node picker");
+
+  // stop the node picker
+  await toolbox.nodePicker.stop({ canceled: true });
+
+  info("Check that selecting another node does hide the highlighter");
+  onHighlighterShown = onHighlighterShown = getOnceHighlighterShown(inspector);
+  button.click();
+  await onHighlighterShown;
+  ok(true, "highlighter is displayed again");
+
+  onHighlighterHidden = onHighlighterHidden =
+    getOnceHighlighterHidden(inspector);
+  await selectNode("body", inspector);
+  await onHighlighterHidden;
+  ok(true, "Selecting another node hides the highlighter");
+});
+
+function getOnceHighlighterShown(inspector) {
+  return inspector.highlighters.once("geometry-editor-highlighter-shown");
+}
+
+function getOnceHighlighterHidden(inspector) {
+  return inspector.highlighters.once("geometry-editor-highlighter-hidden");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_iframe.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_iframe.js
new file mode 100644
index 0000000000..a5f7b22a00
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_iframe.js
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the geometry highlighter elements on remote frame.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <iframe src="https://example.org/document-builder.sjs?html=${encodeURIComponent(`
+    <div id='positioned' style='
+      background:yellow;
+      position:absolute;
+      left:5rem;
+      top:30px;'
+    >
+      Hello from iframe
+    </div>`)}">
+  </iframe>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select the absolute positioned node in the iframe");
+  await selectNodeInFrames(["iframe", "#positioned"], inspector);
+
+  info("Click on the button enabling the highlighter");
+  const onHighlighterShown = inspector.highlighters.once(
+    "geometry-editor-highlighter-shown"
+  );
+  const boxModelPanel = inspector.getPanel("boxmodel");
+  const button = await waitFor(() =>
+    boxModelPanel.document.querySelector(".layout-geometry-editor")
+  );
+  button.click();
+
+  await onHighlighterShown;
+  ok(true, "Highlighter is displayed");
+
+  info("Click on the button again to disable the highlighter");
+  const onHighlighterHidden = inspector.highlighters.once(
+    "geometry-editor-highlighter-hidden"
+  );
+
+  button.click();
+  await onHighlighterHidden;
+  ok("Highlighter is hidden");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-hover_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-hover_01.js
new file mode 100644
index 0000000000..1f80694e70
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-hover_01.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint-disable mozilla/no-arbitrary-setTimeout */
+
+"use strict";
+
+// Test that when first hovering over a node and immediately after selecting it
+// by clicking on it, the highlighter stays visible
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," + "<p>It's going to be legen....</p>";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+
+  info("hovering over the <p> line in the markup-view");
+  await hoverContainer("p", inspector);
+  let isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "the highlighter is still visible");
+
+  info("selecting the <p> line by clicking in the markup-view");
+  await clickContainer("p", inspector);
+
+  info(
+    "wait and see if the highlighter stays visible even after the node " +
+      "was selected"
+  );
+
+  await setContentPageElementProperty("p", "textContent", "dary!!!!");
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "the highlighter is still visible");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-hover_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-hover_02.js
new file mode 100644
index 0000000000..e67f63c7ff
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-hover_02.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when after an element is selected and highlighted on hover, if the
+// mouse leaves the markup-view and comes back again on the same element, that
+// the highlighter is shown again on the node
+
+const TEST_URL = "data:text/html;charset=utf-8,<p>Select me!</p>";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+
+  info(
+    "hover over the <p> line in the markup-view so that it's the " +
+      "currently hovered node"
+  );
+  await hoverContainer("p", inspector);
+
+  info("select the <p> markup-container line by clicking");
+  await clickContainer("p", inspector);
+  let isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "the highlighter is shown");
+
+  const onHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  info("mouse-leave the markup-view");
+  await mouseLeaveMarkupView(inspector);
+  info("listen to the highlighter's hidden event");
+  await onHidden;
+  info("check that the highlighter is no longer visible");
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(!isVisible, "the highlighter is hidden after mouseleave");
+
+  info("hover over the <p> line again, which is still selected");
+  await hoverContainer("p", inspector);
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "the highlighter is visible again");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-hover_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-hover_03.js
new file mode 100644
index 0000000000..0cd7461bea
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-hover_03.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that once a node has been hovered over and marked as such, if it is
+// navigated away using the keyboard, the highlighter moves to the new node, and
+// if it is then navigated back to, it is briefly highlighted again
+
+const TEST_PAGE =
+  "data:text/html;charset=utf-8," + '<p id="one">one</p><p id="two">two</p>';
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_PAGE);
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  info("Making sure the markup-view frame is focused");
+  inspector.markup._frame.focus();
+
+  let highlightedNode = null;
+
+  async function isHighlighting(selector, desc) {
+    const nodeFront = await getNodeFront(selector, inspector);
+    is(highlightedNode, nodeFront, desc);
+  }
+
+  async function waitForHighlighterShown() {
+    const onShownData = await waitForHighlighterTypeShown(
+      inspector.highlighters.TYPES.BOXMODEL
+    );
+    highlightedNode = onShownData.nodeFront;
+  }
+
+  async function waitForInspectorUpdated() {
+    await inspector.once("inspector-updated");
+  }
+
+  info("Hover over <p#one> line in the markup-view");
+  let onShown = waitForHighlighterShown();
+  await hoverContainer("#one", inspector);
+  await onShown;
+  await isHighlighting("#one", "<p#one> is highlighted");
+
+  info("Navigate to <p#two> with the keyboard");
+  let onUpdated = waitForInspectorUpdated();
+  EventUtils.synthesizeKey("VK_DOWN", {}, inspector.panelWin);
+  await onUpdated;
+  onUpdated = waitForInspectorUpdated();
+  onShown = waitForHighlighterShown();
+  EventUtils.synthesizeKey("VK_DOWN", {}, inspector.panelWin);
+  await Promise.all([onShown, onUpdated]);
+  await isHighlighting("#two", "<p#two> is highlighted");
+
+  info("Navigate back to <p#one> with the keyboard");
+  onUpdated = waitForInspectorUpdated();
+  onShown = waitForHighlighterShown();
+  EventUtils.synthesizeKey("VK_UP", {}, inspector.panelWin);
+  await Promise.all([onShown, onUpdated]);
+  await isHighlighting("#one", "<p#one> is highlighted again");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-iframes_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-iframes_01.js
new file mode 100644
index 0000000000..bfc6905b2d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-iframes_01.js
@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Testing that moving the mouse over the document with the element picker
+// started highlights nodes
+
+const NESTED_FRAME_SRC =
+  "data:text/html;charset=utf-8," +
+  "nested iframe<section>nested div</section>";
+
+const OUTER_FRAME_SRC =
+  "data:text/html;charset=utf-8," +
+  "little frame<main>little div</main>" +
+  "<iframe src='" +
+  NESTED_FRAME_SRC +
+  "' />";
+
+const TEST_URI =
+  "data:text/html;charset=utf-8," +
+  "iframe tests for inspector" +
+  '<iframe src="' +
+  OUTER_FRAME_SRC +
+  '" />';
+
+add_task(async function () {
+  const { toolbox, inspector } = await openInspectorForURL(TEST_URI);
+  const outerFrameMainSelector = ["iframe", "main"];
+  const innerFrameSectionSelector = ["iframe", "iframe", "section"];
+
+  const outerFrameMainNodeFront = await getNodeFrontInFrames(
+    outerFrameMainSelector,
+    inspector
+  );
+  const outerFrameHighlighterTestFront = await getHighlighterTestFront(
+    toolbox,
+    { target: outerFrameMainNodeFront.targetFront }
+  );
+
+  const innerFrameSectionNodeFront = await getNodeFrontInFrames(
+    innerFrameSectionSelector,
+    inspector
+  );
+  const innerFrameHighlighterTestFront = await getHighlighterTestFront(
+    toolbox,
+    { target: innerFrameSectionNodeFront.targetFront }
+  );
+
+  info("Waiting for element picker to activate.");
+  await startPicker(inspector.toolbox);
+
+  info("Moving mouse over outerFrameDiv");
+  await hoverElement(inspector, outerFrameMainSelector);
+
+  ok(
+    await outerFrameHighlighterTestFront.assertHighlightedNode(
+      isEveryFrameTargetEnabled()
+        ? outerFrameMainSelector.at(-1)
+        : outerFrameMainSelector
+    ),
+    "outerFrameDiv is highlighted."
+  );
+
+  info("Moving mouse over innerFrameDiv");
+  await hoverElement(inspector, innerFrameSectionSelector);
+  ok(
+    await innerFrameHighlighterTestFront.assertHighlightedNode(
+      isEveryFrameTargetEnabled()
+        ? innerFrameSectionSelector.at(-1)
+        : innerFrameSectionSelector
+    ),
+    "innerFrameDiv is highlighted."
+  );
+
+  info("Selecting root node");
+  await selectNode(inspector.walker.rootNode, inspector);
+
+  info("Selecting an element from the nested iframe directly");
+  await selectNodeInFrames(innerFrameSectionSelector, inspector);
+
+  is(
+    inspector.breadcrumbs.nodeHierarchy.length,
+    9,
+    "Breadcrumbs have 9 items."
+  );
+
+  info("Waiting for element picker to deactivate.");
+  await toolbox.nodePicker.stop({ canceled: true });
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-iframes_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-iframes_02.js
new file mode 100644
index 0000000000..5f50e0eb0c
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-iframes_02.js
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that the highlighter is correctly positioned when switching context
+// to an iframe that has an offset from the parent viewport (eg. 100px margin)
+
+const TEST_URI =
+  "data:text/html;charset=utf-8," +
+  '<div id="outer"></div>' +
+  "<iframe style='margin:100px' src='data:text/html," +
+  '<div id="inner">Look I am here!</div>\'>';
+
+add_task(async function () {
+  info("Enable command-button-frames preference setting");
+  Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
+
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="outer"
+      iframe!ignore-children`,
+    "body",
+    inspector
+  );
+
+  info("Switch to the iframe context.");
+  await switchToFrameContext(1, toolbox, inspector);
+
+  info("Check the markup view is rendered correctly after switching frames");
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="inner"`,
+    "body",
+    inspector
+  );
+
+  info("Check highlighting is correct after switching iframe context");
+  await selectAndHighlightNode("#inner", inspector);
+
+  const nodeFront = await getNodeFront("#inner", inspector);
+  const iframeHighlighterTestFront = await getHighlighterTestFront(toolbox, {
+    target: nodeFront.targetFront,
+  });
+  const isHighlightCorrect =
+    await iframeHighlighterTestFront.assertHighlightedNode("#inner");
+  ok(isHighlightCorrect, "The selected node is properly highlighted.");
+
+  info("Cleanup command-button-frames preferences.");
+  Services.prefs.clearUserPref("devtools.command-button-frames.enabled");
+});
+
+/**
+ * Helper designed to switch context to another frame at the provided index.
+ * Returns a promise that will resolve when the navigation is complete.
+ * @return {Promise}
+ */
+async function switchToFrameContext(frameIndex, toolbox, inspector) {
+  // Open frame menu and wait till it's available on the screen.
+  const btn = toolbox.doc.getElementById("command-button-frames");
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  btn.click();
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  info("Select the iframe in the frame list.");
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const firstButton = menuList.querySelectorAll(".command")[frameIndex];
+  const newRoot = inspector.once("new-root");
+
+  firstButton.click();
+
+  await newRoot;
+  await inspector.once("inspector-updated");
+
+  info("Navigation to the iframe is done.");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-inline.js b/devtools/client/inspector/test/browser_inspector_highlighter-inline.js
new file mode 100644
index 0000000000..158c0b9ce8
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-inline.js
@@ -0,0 +1,95 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that highlighting various inline boxes displays the right number of
+// polygons in the page.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_inline.html";
+const TEST_DATA = [
+  "body",
+  "h1",
+  "h2",
+  "h2 em",
+  "p",
+  "p span",
+  // The following test case used to fail. See bug 1139925.
+  "[dir=rtl] > span",
+];
+
+add_task(async function () {
+  info("Loading the test document and opening the inspector");
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+
+  for (const selector of TEST_DATA) {
+    info("Selecting and highlighting node " + selector);
+    await selectAndHighlightNode(selector, inspector);
+
+    info("Get all quads for this node");
+    const data = await getAllAdjustedQuadsForContentPageElement(selector);
+
+    info(
+      "Iterate over the box-model regions and verify that the highlighter " +
+        "is correct"
+    );
+    for (const region of ["margin", "border", "padding", "content"]) {
+      const { points } = await highlighterTestFront.getHighlighterRegionPath(
+        region
+      );
+      is(
+        points.length,
+        data[region].length,
+        "The highlighter's " +
+          region +
+          " path defines the correct number of boxes"
+      );
+    }
+
+    info(
+      "Verify that the guides define a rectangle that contains all " +
+        "content boxes"
+    );
+
+    const expectedContentRect = {
+      p1: { x: Infinity, y: Infinity },
+      p2: { x: -Infinity, y: Infinity },
+      p3: { x: -Infinity, y: -Infinity },
+      p4: { x: Infinity, y: -Infinity },
+    };
+    for (const { p1, p2, p3, p4 } of data.content) {
+      expectedContentRect.p1.x = Math.min(expectedContentRect.p1.x, p1.x);
+      expectedContentRect.p1.y = Math.min(expectedContentRect.p1.y, p1.y);
+      expectedContentRect.p2.x = Math.max(expectedContentRect.p2.x, p2.x);
+      expectedContentRect.p2.y = Math.min(expectedContentRect.p2.y, p2.y);
+      expectedContentRect.p3.x = Math.max(expectedContentRect.p3.x, p3.x);
+      expectedContentRect.p3.y = Math.max(expectedContentRect.p3.y, p3.y);
+      expectedContentRect.p4.x = Math.min(expectedContentRect.p4.x, p4.x);
+      expectedContentRect.p4.y = Math.max(expectedContentRect.p4.y, p4.y);
+    }
+
+    const contentRect = await highlighterTestFront.getGuidesRectangle();
+
+    for (const point of ["p1", "p2", "p3", "p4"]) {
+      is(
+        Math.round(contentRect[point].x),
+        Math.round(expectedContentRect[point].x),
+        "x coordinate of point " +
+          point +
+          " of the content rectangle defined by the outer guides is correct"
+      );
+      is(
+        Math.round(contentRect[point].y),
+        Math.round(expectedContentRect[point].y),
+        "y coordinate of point " +
+          point +
+          " of the content rectangle defined by the outer guides is correct"
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_01.js
new file mode 100644
index 0000000000..7e5a09ded3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_01.js
@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the keybindings for Picker work alright
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_dom.html";
+
+add_task(async function () {
+  const { inspector, toolbox, highlighterTestFront } =
+    await openInspectorForURL(TEST_URL);
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await startPicker(toolbox);
+
+  info("Selecting the simple-div1 DIV");
+  await hoverElement(inspector, "#simple-div1");
+
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#simple-div1"),
+    "The highlighter shows #simple-div1. OK."
+  );
+
+  // First Child selection
+  info("Testing first-child selection.");
+
+  await doKeyHover("VK_RIGHT");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#useless-para"),
+    "The highlighter shows #useless-para. OK."
+  );
+
+  info("Selecting the useful-para paragraph DIV");
+  await hoverElement(inspector, "#useful-para");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#useful-para"),
+    "The highlighter shows #useful-para. OK."
+  );
+
+  await doKeyHover("VK_RIGHT");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#bold"),
+    "The highlighter shows #bold. OK."
+  );
+
+  info("Going back up to the simple-div1 DIV");
+  await doKeyHover("VK_LEFT");
+  await doKeyHover("VK_LEFT");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#simple-div1"),
+    "The highlighter shows #simple-div1. OK."
+  );
+
+  info("First child selection test Passed.");
+
+  info("Stopping the picker");
+  await toolbox.nodePicker.stop({ canceled: true });
+
+  function doKeyHover(key) {
+    info("Key pressed. Waiting for element to be highlighted/hovered");
+    const onPickerHovered = toolbox.nodePicker.once("picker-node-hovered");
+    const onHighlighterShown = waitForHighlighterTypeShown(
+      inspector.highlighters.TYPES.BOXMODEL
+    );
+    BrowserTestUtils.synthesizeKey(key, {}, gBrowser.selectedBrowser);
+
+    return Promise.all([onPickerHovered, onHighlighterShown]);
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_02.js
new file mode 100644
index 0000000000..cb8f995699
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_02.js
@@ -0,0 +1,64 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the keybindings for Picker work alright
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_dom.html";
+
+add_task(async function () {
+  const { inspector, toolbox, highlighterTestFront } =
+    await openInspectorForURL(TEST_URL);
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await startPicker(toolbox);
+
+  // Previously chosen child memory
+  info("Testing whether previously chosen child is remembered");
+
+  info("Selecting the ahoy paragraph DIV");
+  await hoverElement(inspector, "#ahoy");
+
+  await doKeyHover("VK_LEFT");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#simple-div2"),
+    "The highlighter shows #simple-div2. OK."
+  );
+
+  await doKeyHover("VK_RIGHT");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#ahoy"),
+    "The highlighter shows #ahoy. OK."
+  );
+
+  info("Going back up to the complex-div DIV");
+  await doKeyHover("VK_LEFT");
+  await doKeyHover("VK_LEFT");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#complex-div"),
+    "The highlighter shows #complex-div. OK."
+  );
+
+  await doKeyHover("VK_RIGHT");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#simple-div2"),
+    "The highlighter shows #simple-div2. OK."
+  );
+
+  info("Previously chosen child is remembered. Passed.");
+
+  info("Stopping the picker");
+  await toolbox.nodePicker.stop({ canceled: true });
+
+  function doKeyHover(key) {
+    info("Key pressed. Waiting for element to be highlighted/hovered");
+    const onPickerHovered = toolbox.nodePicker.once("picker-node-hovered");
+    const onHighlighterShown = waitForHighlighterTypeShown(
+      inspector.highlighters.TYPES.BOXMODEL
+    );
+    BrowserTestUtils.synthesizeKey(key, {}, gBrowser.selectedBrowser);
+    return Promise.all([onPickerHovered, onHighlighterShown]);
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_03.js
new file mode 100644
index 0000000000..86a427c6e7
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_03.js
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the keybindings for Picker work alright
+
+const IS_OSX = Services.appinfo.OS === "Darwin";
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_dom.html";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#another");
+
+  info("Testing enter/return key as pick-node command");
+  await doKeyPick("VK_RETURN");
+  is(
+    inspector.selection.nodeFront.id,
+    "another",
+    "The #another node was selected. Passed."
+  );
+
+  info("Testing escape key as cancel-picker command");
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#ahoy");
+  await doKeyStop("VK_ESCAPE");
+  is(
+    inspector.selection.nodeFront.id,
+    "another",
+    "The #another DIV is still selected. Passed."
+  );
+
+  info("Testing Ctrl+Shift+C shortcut as cancel-picker command");
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#ahoy");
+  const eventOptions = { key: "VK_C" };
+  if (IS_OSX) {
+    eventOptions.metaKey = true;
+    eventOptions.altKey = true;
+  } else {
+    eventOptions.ctrlKey = true;
+    eventOptions.shiftKey = true;
+  }
+  await doKeyStop("VK_C", eventOptions);
+  is(
+    inspector.selection.nodeFront.id,
+    "another",
+    "The #another DIV is still selected. Passed."
+  );
+
+  function doKeyPick(key, options = {}) {
+    info("Key pressed. Waiting for element to be picked");
+    BrowserTestUtils.synthesizeKey(key, options, gBrowser.selectedBrowser);
+    return Promise.all([
+      inspector.selection.once("new-node-front"),
+      inspector.once("inspector-updated"),
+      toolbox.nodePicker.once("picker-stopped"),
+    ]);
+  }
+
+  function doKeyStop(key, options = {}) {
+    info("Key pressed. Waiting for picker to be canceled");
+    BrowserTestUtils.synthesizeKey(key, options, gBrowser.selectedBrowser);
+    return toolbox.nodePicker.once("picker-stopped");
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js
new file mode 100644
index 0000000000..5351ae32de
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that pressing ESC twice while in picker mode first stops the picker and
+// then opens the split-console (see bug 988278).
+
+const TEST_URL = "data:text/html;charset=utf8,<div></div>";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  await startPicker(toolbox);
+
+  info("Start using the picker by hovering over nodes");
+  const onHover = toolbox.nodePicker.once("picker-node-hovered");
+  await safeSynthesizeMouseEventAtCenterInContentPage("div", {
+    type: "mousemove",
+  });
+
+  await onHover;
+
+  info("Press escape and wait for the picker to stop");
+  await stopPickerWithEscapeKey(toolbox);
+
+  info("Press escape again and wait for the split console to open");
+  const onSplitConsole = toolbox.once("split-console");
+  const onConsoleReady = toolbox.once("webconsole-ready");
+  // The escape key is synthesized in the main process, which is where the focus
+  // should be after the picker was stopped.
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, inspector.panelWin);
+  await onSplitConsole;
+  await onConsoleReady;
+  ok(toolbox.splitConsole, "The split console is shown.");
+
+  // Hide the split console.
+  await toolbox.toggleSplitConsole();
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_separate-window.js b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_separate-window.js
new file mode 100644
index 0000000000..80984bf96e
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_separate-window.js
@@ -0,0 +1,120 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the keybindings for element picker with separate window.
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const IS_OSX = Services.appinfo.OS === "Darwin";
+const TEST_URL = "data:text/html;charset=utf8,<div></div>";
+
+const TEST_MODIFIERS = [
+  {
+    isOSX: true,
+    description: "OSX and altKey+metaKey",
+    modifier: { altKey: true, metaKey: true },
+  },
+  {
+    isOSX: true,
+    description: "OSX and metaKey+shiftKey",
+    modifier: { metaKey: true, shiftKey: true },
+  },
+  {
+    description: "ctrlKey+shiftKey",
+    modifier: { ctrlKey: true, shiftKey: true },
+  },
+];
+
+add_task(async () => {
+  info("In order to open the inspector in separate window");
+  await pushPref("devtools.toolbox.host", "window");
+
+  info("Open an inspected tab");
+  await addTab(TEST_URL);
+
+  for (const { description, modifier, isOSX } of TEST_MODIFIERS) {
+    if (!!isOSX !== IS_OSX) {
+      continue;
+    }
+
+    info(`Start the test for ${description}`);
+
+    info("Open the toolbox and the inspecor");
+    const onToolboxReady = gDevTools.once("toolbox-ready");
+    EventUtils.synthesizeKey("c", modifier, window);
+
+    info("Check the state of the inspector");
+    const toolbox = await onToolboxReady;
+    is(
+      toolbox.hostType,
+      Toolbox.HostType.WINDOW,
+      "The toolbox opens in a separate window"
+    );
+    is(toolbox.currentToolId, "inspector", "The inspector selects");
+    await assertStatuses(toolbox, true, true);
+
+    info("Toggle the picker mode by the shortcut key on the toolbox");
+    EventUtils.synthesizeKey("c", modifier, toolbox.win);
+    await assertStatuses(toolbox, false, true);
+
+    info("Focus on main window");
+    window.focus();
+    await waitForFocusChanged(document, true);
+    ok(true, "The main window has focus");
+
+    info("Toggle the picker mode by the shortcut key on the main window");
+    EventUtils.synthesizeKey("c", modifier, window);
+    await assertStatuses(toolbox, true, false);
+
+    info("Toggle again by the shortcut key on the main window");
+    EventUtils.synthesizeKey("c", modifier, window);
+    await assertStatuses(toolbox, false, false);
+
+    info("Select a tool other than the inspector");
+    const onConsoleLoaded = toolbox.once("webconsole-ready");
+    await toolbox.selectTool("webconsole");
+    await onConsoleLoaded;
+    await waitForFocusChanged(toolbox.doc, true);
+
+    info("Focus on main window");
+    window.focus();
+    await waitForFocusChanged(document, true);
+
+    info("Type the shortcut key again after selecting other tool");
+    const onInspectorSelected = toolbox.once("inspector-selected");
+    EventUtils.synthesizeKey("c", modifier, window);
+    await onInspectorSelected;
+    await assertStatuses(toolbox, true, false);
+
+    info("Cancel the picker mode");
+    EventUtils.synthesizeKey("c", modifier, window);
+    await waitUntil(() => toolbox.pickerButton.isChecked === false);
+
+    info("Close the toolbox");
+    await toolbox.closeToolbox();
+  }
+});
+
+async function assertStatuses(toolbox, isPickerMode, isToolboxHavingFocus) {
+  info("Check the state of the picker mode");
+  await waitUntil(() => toolbox.pickerButton.isChecked === isPickerMode);
+  is(
+    toolbox.pickerButton.isChecked,
+    isPickerMode,
+    "The picker mode is correct"
+  );
+
+  info("Check whether the toolbox has the focus");
+  await waitForFocusChanged(toolbox.doc, isToolboxHavingFocus);
+  ok(true, "The focus state of the toolbox is correct");
+
+  await waitForFocusChanged(document, !isToolboxHavingFocus);
+  ok(true, "The focus state of the main window is correct");
+}
+
+async function waitForFocusChanged(doc, expected) {
+  return waitUntil(() => doc.hasFocus() === expected);
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure-keybinding.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure-keybinding.js
new file mode 100644
index 0000000000..0831b90bf4
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure-keybinding.js
@@ -0,0 +1,194 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const IS_OSX = Services.appinfo.OS === "Darwin";
+const VK_MOD = IS_OSX ? "VK_META" : "VK_CONTROL";
+const TEST_URL = "data:text/html;charset=utf-8,measuring tool test";
+
+const PREFIX = "measuring-tool-";
+const HANDLER_PREFIX = "handler-";
+const HIGHLIGHTED_HANDLER_CLASSNAME = "highlight";
+const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
+
+const SMALL_DELTA = 1;
+const LARGE_DELTA = 10;
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  const { show, finalize } = helper;
+
+  helper.prefix = PREFIX;
+
+  info("Showing the highlighter");
+  await show();
+
+  info("Creating the area");
+  const { mouse } = helper;
+  await mouse.down(32, 20);
+  await mouse.move(32 + 160, 20 + 100);
+  await mouse.up();
+
+  const arrow_tests = [
+    {
+      key: "VK_LEFT",
+      shift: false,
+      delta: -SMALL_DELTA,
+      move: "dx",
+      resize: "dw",
+    },
+    {
+      key: "VK_LEFT",
+      shift: true,
+      delta: -LARGE_DELTA,
+      move: "dx",
+      resize: "dw",
+    },
+    {
+      key: "VK_RIGHT",
+      shift: false,
+      delta: SMALL_DELTA,
+      move: "dx",
+      resize: "dw",
+    },
+    {
+      key: "VK_RIGHT",
+      shift: true,
+      delta: LARGE_DELTA,
+      move: "dx",
+      resize: "dw",
+    },
+    {
+      key: "VK_UP",
+      shift: false,
+      delta: -SMALL_DELTA,
+      move: "dy",
+      resize: "dh",
+    },
+    {
+      key: "VK_UP",
+      shift: true,
+      delta: -LARGE_DELTA,
+      move: "dy",
+      resize: "dh",
+    },
+    {
+      key: "VK_DOWN",
+      shift: false,
+      delta: SMALL_DELTA,
+      move: "dy",
+      resize: "dh",
+    },
+    {
+      key: "VK_DOWN",
+      shift: true,
+      delta: LARGE_DELTA,
+      move: "dy",
+      resize: "dh",
+    },
+  ];
+
+  for (const { key, shift, delta, move, resize } of arrow_tests) {
+    await canMoveAreaViaKeybindings(helper, key, shift, { [move]: delta });
+    await canResizeAreaViaKeybindings(helper, key, shift, { [resize]: delta });
+  }
+
+  // Test handler highlighting on Ctrl/Command hold
+  await handlerShouldNotBeHighlighted(helper);
+  BrowserTestUtils.synthesizeKey(
+    VK_MOD,
+    { type: "keydown" },
+    gBrowser.selectedBrowser
+  );
+  await handlerShouldBeHighlighted(helper);
+  BrowserTestUtils.synthesizeKey("VK_LEFT", {}, gBrowser.selectedBrowser);
+  await handlerShouldBeHighlighted(helper);
+  BrowserTestUtils.synthesizeKey(
+    VK_MOD,
+    { type: "keyup" },
+    gBrowser.selectedBrowser
+  );
+  await handlerShouldNotBeHighlighted(helper);
+
+  info("Hiding the highlighter");
+  await finalize();
+});
+
+async function canMoveAreaViaKeybindings(helper, key, shiftHeld, deltas) {
+  const { dx = 0, dy = 0 } = deltas;
+
+  const {
+    x: origAreaX,
+    y: origAreaY,
+    width: origAreaWidth,
+    height: origAreaHeight,
+  } = await getAreaRect(helper);
+
+  const eventOptions = shiftHeld ? { shiftKey: true } : {};
+  BrowserTestUtils.synthesizeKey(key, eventOptions, gBrowser.selectedBrowser);
+
+  const {
+    x: areaX,
+    y: areaY,
+    width: areaWidth,
+    height: areaHeight,
+  } = await getAreaRect(helper);
+
+  is(areaX, origAreaX + dx, "X coordinate correct after moving");
+  is(areaY, origAreaY + dy, "Y coordinate correct after moving");
+  is(areaWidth, origAreaWidth, "Width unchanged after moving");
+  is(areaHeight, origAreaHeight, "Height unchanged after moving");
+}
+
+async function canResizeAreaViaKeybindings(helper, key, shiftHeld, deltas) {
+  const { dw = 0, dh = 0 } = deltas;
+
+  const {
+    x: origAreaX,
+    y: origAreaY,
+    width: origAreaWidth,
+    height: origAreaHeight,
+  } = await getAreaRect(helper);
+
+  const eventOptions = IS_OSX ? { metaKey: true } : { ctrlKey: true };
+  if (shiftHeld) {
+    eventOptions.shiftKey = true;
+  }
+  BrowserTestUtils.synthesizeKey(key, eventOptions, gBrowser.selectedBrowser);
+
+  const {
+    x: areaX,
+    y: areaY,
+    width: areaWidth,
+    height: areaHeight,
+  } = await getAreaRect(helper);
+
+  is(areaX, origAreaX, "X coordinate unchanged after resizing");
+  is(areaY, origAreaY, "Y coordinate unchanged after resizing");
+  is(areaWidth, origAreaWidth + dw, "Width correct after resizing");
+  is(areaHeight, origAreaHeight + dh, "Height correct after resizing");
+}
+
+async function handlerIsHighlighted(helper) {
+  const klass = await helper.getElementAttribute(
+    `${HANDLER_PREFIX}topleft`,
+    "class"
+  );
+  return klass.includes(HIGHLIGHTED_HANDLER_CLASSNAME);
+}
+
+async function handlerShouldBeHighlighted(helper) {
+  ok(await handlerIsHighlighted(helper), "Origin handler is highlighted");
+}
+
+async function handlerShouldNotBeHighlighted(helper) {
+  ok(
+    !(await handlerIsHighlighted(helper)),
+    "Origin handler is not highlighted"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_01.js
new file mode 100644
index 0000000000..6155cec2d7
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_01.js
@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URL = `data:text/html;charset=utf-8,
+                    <div style='
+                        position:absolute;
+                        left: 0;
+                        top: 0;
+                        width: 40000px;
+                        height: 8000px'>
+                    </div>`;
+
+const PREFIX = "measuring-tool-";
+const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
+
+const X = 32;
+const Y = 20;
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  const { finalize } = helper;
+
+  helper.prefix = PREFIX;
+
+  await isHiddenByDefault(helper);
+  await areLabelsHiddenByDefaultWhenShows(helper);
+  await areLabelsProperlyDisplayedWhenMouseMoved(helper);
+
+  await finalize();
+});
+
+async function isHiddenByDefault({ isElementHidden }) {
+  info("Checking the highlighter is hidden by default");
+
+  let hidden = await isElementHidden("root");
+  ok(hidden, "highlighter's root is hidden by default");
+
+  hidden = await isElementHidden("label-size");
+  ok(hidden, "highlighter's label size is hidden by default");
+
+  hidden = await isElementHidden("label-position");
+  ok(hidden, "highlighter's label position is hidden by default");
+}
+
+async function areLabelsHiddenByDefaultWhenShows({ isElementHidden, show }) {
+  info("Checking the highlighter is displayed when asked");
+
+  await show();
+
+  let hidden = await isElementHidden("elements");
+  is(hidden, false, "highlighter is visible after show");
+
+  hidden = await isElementHidden("label-size");
+  ok(hidden, "label's size still hidden");
+
+  hidden = await isElementHidden("label-position");
+  ok(hidden, "label's position still hidden");
+}
+
+async function areLabelsProperlyDisplayedWhenMouseMoved({
+  isElementHidden,
+  synthesizeMouse,
+  getElementTextContent,
+}) {
+  info("Checking labels are properly displayed when mouse moved");
+
+  await synthesizeMouse({
+    selector: ":root",
+    options: { type: "mousemove" },
+    x: X,
+    y: Y,
+  });
+
+  let hidden = await isElementHidden("label-position");
+  is(hidden, false, "label's position is displayed after the mouse is moved");
+
+  hidden = await isElementHidden("label-size");
+  ok(hidden, "label's size still hidden");
+
+  const text = await getElementTextContent("label-position");
+
+  const [x, y] = text.replace(/ /g, "").split(/\n/);
+
+  is(+x, X, "label's position shows the proper X coord");
+  is(+y, Y, "label's position shows the proper Y coord");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_02.js
new file mode 100644
index 0000000000..b8df488afa
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_02.js
@@ -0,0 +1,138 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URL = `data:text/html;charset=utf-8,
+                    <div style='
+                        position:absolute;
+                        left: 0;
+                        top: 0;
+                        width: 40000px;
+                        height: 8000px'>
+                    </div>`;
+
+const PREFIX = "measuring-tool-";
+const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
+
+const SIDES = ["top", "right", "bottom", "left"];
+
+const X = 32;
+const Y = 20;
+const WIDTH = 160;
+const HEIGHT = 100;
+const HYPOTENUSE = Math.hypot(WIDTH, HEIGHT).toFixed(2);
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  const { show, finalize } = helper;
+
+  helper.prefix = PREFIX;
+
+  await show();
+
+  await hasNoLabelsWhenStarts(helper);
+  await hasSizeLabelWhenMoved(helper);
+  await hasCorrectSizeLabelValue(helper);
+  await hasSizeLabelAndGuidesWhenStops(helper);
+  await hasCorrectSizeLabelValue(helper);
+
+  await finalize();
+});
+
+async function hasNoLabelsWhenStarts({ isElementHidden, synthesizeMouse }) {
+  info("Checking highlighter has no labels when we start to select");
+
+  await synthesizeMouse({
+    selector: ":root",
+    options: { type: "mousedown" },
+    x: X,
+    y: Y,
+  });
+
+  let hidden = await isElementHidden("label-size");
+  ok(hidden, "label's size still hidden");
+
+  hidden = await isElementHidden("label-position");
+  ok(hidden, "label's position still hidden");
+
+  info("Checking highlighter has no guides when we start to select");
+
+  let guidesHidden = true;
+  for (const side of SIDES) {
+    guidesHidden = guidesHidden && (await isElementHidden("guide-" + side));
+  }
+
+  ok(guidesHidden, "guides are hidden during dragging");
+}
+
+async function hasSizeLabelWhenMoved({ isElementHidden, synthesizeMouse }) {
+  info("Checking highlighter has size label when we select the area");
+
+  await synthesizeMouse({
+    selector: ":root",
+    options: { type: "mousemove" },
+    x: X + WIDTH,
+    y: Y + HEIGHT,
+  });
+
+  let hidden = await isElementHidden("label-size");
+  is(hidden, false, "label's size is visible during selection");
+
+  hidden = await isElementHidden("label-position");
+  ok(hidden, "label's position still hidden");
+
+  info("Checking highlighter has no guides when we select the area");
+
+  let guidesHidden = true;
+  for (const side of SIDES) {
+    guidesHidden = guidesHidden && (await isElementHidden("guide-" + side));
+  }
+
+  ok(guidesHidden, "guides are hidden during selection");
+}
+
+async function hasSizeLabelAndGuidesWhenStops({
+  isElementHidden,
+  synthesizeMouse,
+}) {
+  info("Checking highlighter has size label and guides when we stop");
+
+  await synthesizeMouse({
+    selector: ":root",
+    options: { type: "mouseup" },
+    x: X + WIDTH,
+    y: Y + HEIGHT,
+  });
+
+  let hidden = await isElementHidden("label-size");
+  is(hidden, false, "label's size is visible when the selection is done");
+
+  hidden = await isElementHidden("label-position");
+  ok(hidden, "label's position still hidden");
+
+  let guidesVisible = true;
+  for (const side of SIDES) {
+    guidesVisible = guidesVisible && !(await isElementHidden("guide-" + side));
+  }
+
+  ok(guidesVisible, "guides are visible when the selection is done");
+}
+
+async function hasCorrectSizeLabelValue({ getElementTextContent }) {
+  const text = await getElementTextContent("label-size");
+
+  const [width, height, hypot] = text.match(/\d.*px/g);
+
+  is(parseFloat(width), WIDTH, "width on label's size is correct");
+  is(parseFloat(height), HEIGHT, "height on label's size is correct");
+  is(
+    parseFloat(hypot),
+    parseFloat(HYPOTENUSE),
+    "hypotenuse on label's size is correct"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
new file mode 100644
index 0000000000..906284ba86
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
@@ -0,0 +1,114 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URL = "data:text/html;charset=utf-8,measuring tool test";
+
+const PREFIX = "measuring-tool-";
+const HANDLER_PREFIX = "handler-";
+const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
+
+const X = 32;
+const Y = 20;
+const WIDTH = 160;
+const HEIGHT = 100;
+
+const HANDLER_MAP = {
+  top(areaWidth, areaHeight) {
+    return { x: Math.round(areaWidth / 2), y: 0 };
+  },
+  topright(areaWidth, areaHeight) {
+    return { x: areaWidth, y: 0 };
+  },
+  right(areaWidth, areaHeight) {
+    return { x: areaWidth, y: Math.round(areaHeight / 2) };
+  },
+  bottomright(areaWidth, areaHeight) {
+    return { x: areaWidth, y: areaHeight };
+  },
+  bottom(areaWidth, areaHeight) {
+    return { x: Math.round(areaWidth / 2), y: areaHeight };
+  },
+  bottomleft(areaWidth, areaHeight) {
+    return { x: 0, y: areaHeight };
+  },
+  left(areaWidth, areaHeight) {
+    return { x: 0, y: Math.round(areaHeight / 2) };
+  },
+  topleft(areaWidth, areaHeight) {
+    return { x: 0, y: 0 };
+  },
+};
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  const { show, finalize } = helper;
+
+  helper.prefix = PREFIX;
+
+  info("Showing the highlighter");
+  await show();
+
+  await areHandlersHiddenByDefault(helper);
+  await areHandlersHiddenOnAreaCreation(helper);
+  await areHandlersCorrectlyShownAfterAreaCreation(helper);
+
+  info("Hiding the highlighter");
+  await finalize();
+});
+
+async function areHandlersHiddenByDefault({ isElementHidden, mouse }) {
+  info("Checking that highlighter's handlers are hidden by default");
+
+  await mouse.down(X, Y);
+
+  for (const handler of Object.keys(HANDLER_MAP)) {
+    const hidden = await isElementHidden(`${HANDLER_PREFIX}${handler}`);
+    ok(hidden, `${handler} handler is hidden by default`);
+  }
+}
+
+async function areHandlersHiddenOnAreaCreation({ isElementHidden, mouse }) {
+  info("Checking that highlighter's handlers are hidden while area creation");
+
+  await mouse.move(X + WIDTH, Y + HEIGHT);
+
+  for (const handler of Object.keys(HANDLER_MAP)) {
+    const hidden = await isElementHidden(`${HANDLER_PREFIX}${handler}`);
+    ok(hidden, `${handler} handler is still hidden on area creation`);
+  }
+}
+
+async function areHandlersCorrectlyShownAfterAreaCreation(helper) {
+  info("Checking that highlighter's handlers are shown after area creation");
+
+  const { isElementHidden, mouse } = helper;
+
+  await mouse.up();
+
+  for (const handler of Object.keys(HANDLER_MAP)) {
+    const hidden = await isElementHidden(`${HANDLER_PREFIX}${handler}`);
+    ok(!hidden, `${handler} handler is shown after area creation`);
+
+    const { x: handlerX, y: handlerY } = await getHandlerCoords(
+      helper,
+      handler
+    );
+    const { x: expectedX, y: expectedY } = HANDLER_MAP[handler](WIDTH, HEIGHT);
+    is(handlerX, expectedX, `x coordinate of ${handler} handler is correct`);
+    is(handlerY, expectedY, `y coordinate of ${handler} handler is correct`);
+  }
+}
+
+async function getHandlerCoords({ getElementAttribute }, handler) {
+  const handlerId = `${HANDLER_PREFIX}${handler}`;
+  return {
+    x: Math.round(await getElementAttribute(handlerId, "cx")),
+    y: Math.round(await getElementAttribute(handlerId, "cy")),
+  };
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
new file mode 100644
index 0000000000..d9dcd5d89f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
@@ -0,0 +1,163 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URL = "data:text/html;charset=utf-8,measuring tool test";
+
+const PREFIX = "measuring-tool-";
+const HANDLER_PREFIX = "handler-";
+const HIGHLIGHTER_TYPE = "MeasuringToolHighlighter";
+
+const X = 32;
+const Y = 20;
+const WIDTH = 160;
+const HEIGHT = 100;
+const X_OFFSET = 15;
+const Y_OFFSET = 10;
+
+const HANDLER_MAP = {
+  top(areaWidth, areaHeight) {
+    return { x: Math.round(areaWidth / 2), y: 0 };
+  },
+  topright(areaWidth, areaHeight) {
+    return { x: areaWidth, y: 0 };
+  },
+  right(areaWidth, areaHeight) {
+    return { x: areaWidth, y: Math.round(areaHeight / 2) };
+  },
+  bottomright(areaWidth, areaHeight) {
+    return { x: areaWidth, y: areaHeight };
+  },
+  bottom(areaWidth, areaHeight) {
+    return { x: Math.round(areaWidth / 2), y: areaHeight };
+  },
+  bottomleft(areaWidth, areaHeight) {
+    return { x: 0, y: areaHeight };
+  },
+  left(areaWidth, areaHeight) {
+    return { x: 0, y: Math.round(areaHeight / 2) };
+  },
+  topleft(areaWidth, areaHeight) {
+    return { x: 0, y: 0 };
+  },
+};
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  const { show, finalize } = helper;
+
+  helper.prefix = PREFIX;
+
+  info("Showing the highlighter");
+  await show();
+
+  info("Creating the area");
+  const { mouse } = helper;
+  await mouse.down(X, Y);
+  await mouse.move(X + WIDTH, Y + HEIGHT);
+  await mouse.up();
+
+  await canResizeAreaViaHandlers(helper);
+
+  info("Hiding the highlighter");
+  await finalize();
+});
+
+async function canResizeAreaViaHandlers(helper) {
+  const { mouse } = helper;
+
+  for (const handler of Object.keys(HANDLER_MAP)) {
+    const { x: origHandlerX, y: origHandlerY } = await getHandlerCoords(
+      helper,
+      handler
+    );
+    const {
+      x: origAreaX,
+      y: origAreaY,
+      width: origAreaWidth,
+      height: origAreaHeight,
+    } = await getAreaRect(helper);
+    const absOrigHandlerX = origHandlerX + origAreaX;
+    const absOrigHandlerY = origHandlerY + origAreaY;
+
+    const delta = {
+      x: handler.includes("left") ? X_OFFSET : 0,
+      y: handler.includes("top") ? Y_OFFSET : 0,
+      width:
+        handler.includes("right") || handler.includes("left") ? X_OFFSET : 0,
+      height:
+        handler.includes("bottom") || handler.includes("top") ? Y_OFFSET : 0,
+    };
+
+    if (handler.includes("left")) {
+      delta.width *= -1;
+    }
+    if (handler.includes("top")) {
+      delta.height *= -1;
+    }
+
+    // Simulate drag & drop of handler
+    await mouse.down(absOrigHandlerX, absOrigHandlerY);
+    await mouse.move(absOrigHandlerX + X_OFFSET, absOrigHandlerY + Y_OFFSET);
+    await mouse.up();
+
+    const {
+      x: areaX,
+      y: areaY,
+      width: areaWidth,
+      height: areaHeight,
+    } = await getAreaRect(helper);
+    is(
+      areaX,
+      origAreaX + delta.x,
+      `X coordinate of area correct after resizing using ${handler} handler`
+    );
+    is(
+      areaY,
+      origAreaY + delta.y,
+      `Y coordinate of area correct after resizing using ${handler} handler`
+    );
+    is(
+      areaWidth,
+      origAreaWidth + delta.width,
+      `Width of area correct after resizing using ${handler} handler`
+    );
+    is(
+      areaHeight,
+      origAreaHeight + delta.height,
+      `Height of area correct after resizing using ${handler} handler`
+    );
+
+    const { x: handlerX, y: handlerY } = await getHandlerCoords(
+      helper,
+      handler
+    );
+    const { x: expectedX, y: expectedY } = HANDLER_MAP[handler](
+      areaWidth,
+      areaHeight
+    );
+    is(
+      handlerX,
+      expectedX,
+      `X coordinate of ${handler} handler correct after resizing`
+    );
+    is(
+      handlerY,
+      expectedY,
+      `Y coordinate of ${handler} handler correct after resizing`
+    );
+  }
+}
+
+async function getHandlerCoords({ getElementAttribute }, handler) {
+  const handlerId = `${HANDLER_PREFIX}${handler}`;
+  return {
+    x: Math.round(await getElementAttribute(handlerId, "cx")),
+    y: Math.round(await getElementAttribute(handlerId, "cy")),
+  };
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-options.js b/devtools/client/inspector/test/browser_inspector_highlighter-options.js
new file mode 100644
index 0000000000..558b67059a
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-options.js
@@ -0,0 +1,267 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that the box-model highlighter supports configuration options
+
+const TEST_URL = `
+  <body style="padding:2em;">
+    <div style="width:100px;height:100px;padding:2em;
+                border:.5em solid black;margin:1em;">test</div>
+  </body>
+`;
+
+// Test data format:
+// - desc: a string that will be output to the console.
+// - options: json object to be passed as options to the highlighter.
+// - checkHighlighter: a generator (async) function that should check the
+//   highlighter is correct.
+const TEST_DATA = [
+  {
+    desc: "Guides and infobar should be shown by default",
+    options: {},
+    async checkHighlighter(highlighterTestFront) {
+      let hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-infobar-container",
+        "hidden"
+      );
+      ok(!hidden, "Node infobar is visible");
+
+      hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-elements",
+        "hidden"
+      );
+      ok(!hidden, "SVG container is visible");
+
+      for (const side of ["top", "right", "bottom", "left"]) {
+        hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+          "box-model-guide-" + side,
+          "hidden"
+        );
+        ok(!hidden, side + " guide is visible");
+      }
+    },
+  },
+  {
+    desc: "All regions should be shown by default",
+    options: {},
+    async checkHighlighter(highlighterTestFront) {
+      for (const region of ["margin", "border", "padding", "content"]) {
+        const { d } = await highlighterTestFront.getHighlighterRegionPath(
+          region
+        );
+        ok(d, "Region " + region + " has set coordinates");
+      }
+    },
+  },
+  {
+    desc: "Guides can be hidden",
+    options: { hideGuides: true },
+    async checkHighlighter(highlighterTestFront) {
+      for (const side of ["top", "right", "bottom", "left"]) {
+        const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+          "box-model-guide-" + side,
+          "hidden"
+        );
+        is(hidden, "true", side + " guide has been hidden");
+      }
+    },
+  },
+  {
+    desc: "Infobar can be hidden",
+    options: { hideInfoBar: true },
+    async checkHighlighter(highlighterTestFront) {
+      const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-infobar-container",
+        "hidden"
+      );
+      is(hidden, "true", "infobar has been hidden");
+    },
+  },
+  {
+    desc: "One region only can be shown (1)",
+    options: { showOnly: "content" },
+    async checkHighlighter(highlighterTestFront) {
+      let { d } = await highlighterTestFront.getHighlighterRegionPath("margin");
+      ok(!d, "margin region is hidden");
+
+      ({ d } = await highlighterTestFront.getHighlighterRegionPath("border"));
+      ok(!d, "border region is hidden");
+
+      ({ d } = await highlighterTestFront.getHighlighterRegionPath("padding"));
+      ok(!d, "padding region is hidden");
+
+      ({ d } = await highlighterTestFront.getHighlighterRegionPath("content"));
+      ok(d, "content region is shown");
+    },
+  },
+  {
+    desc: "One region only can be shown (2)",
+    options: { showOnly: "margin" },
+    async checkHighlighter(highlighterTestFront) {
+      let { d } = await highlighterTestFront.getHighlighterRegionPath("margin");
+      ok(d, "margin region is shown");
+
+      ({ d } = await highlighterTestFront.getHighlighterRegionPath("border"));
+      ok(!d, "border region is hidden");
+
+      ({ d } = await highlighterTestFront.getHighlighterRegionPath("padding"));
+      ok(!d, "padding region is hidden");
+
+      ({ d } = await highlighterTestFront.getHighlighterRegionPath("content"));
+      ok(!d, "content region is hidden");
+    },
+  },
+  {
+    desc: "Guides can be drawn around a given region (1)",
+    options: { region: "padding" },
+    async checkHighlighter(highlighterTestFront) {
+      const topY1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-top",
+        "y1"
+      );
+      const rightX1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-right",
+        "x1"
+      );
+      const bottomY1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-bottom",
+        "y1"
+      );
+      const leftX1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-left",
+        "x1"
+      );
+
+      let { points } = await highlighterTestFront.getHighlighterRegionPath(
+        "padding"
+      );
+      points = points[0];
+
+      is(topY1, points[0][1], "Top guide's y1 is correct");
+      is(
+        parseInt(rightX1, 10),
+        points[1][0] - 1,
+        "Right guide's x1 is correct"
+      );
+      is(
+        parseInt(bottomY1, 10),
+        points[2][1] - 1,
+        "Bottom guide's y1 is correct"
+      );
+      is(leftX1, points[3][0], "Left guide's x1 is correct");
+    },
+  },
+  {
+    desc: "Guides can be drawn around a given region (2)",
+    options: { region: "margin" },
+    async checkHighlighter(highlighterTestFront) {
+      const topY1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-top",
+        "y1"
+      );
+      const rightX1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-right",
+        "x1"
+      );
+      const bottomY1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-bottom",
+        "y1"
+      );
+      const leftX1 = await highlighterTestFront.getHighlighterNodeAttribute(
+        "box-model-guide-left",
+        "x1"
+      );
+
+      let { points } = await highlighterTestFront.getHighlighterRegionPath(
+        "margin"
+      );
+      points = points[0];
+
+      is(topY1, points[0][1], "Top guide's y1 is correct");
+      is(
+        parseInt(rightX1, 10),
+        points[1][0] - 1,
+        "Right guide's x1 is correct"
+      );
+      is(
+        parseInt(bottomY1, 10),
+        points[2][1] - 1,
+        "Bottom guide's y1 is correct"
+      );
+      is(leftX1, points[3][0], "Left guide's x1 is correct");
+    },
+  },
+  {
+    desc: "When showOnly is used, other regions can be faded",
+    options: { showOnly: "margin", onlyRegionArea: true },
+    async checkHighlighter(highlighterTestFront) {
+      for (const region of ["margin", "border", "padding", "content"]) {
+        const { d } = await highlighterTestFront.getHighlighterRegionPath(
+          region
+        );
+        ok(d, "Region " + region + " is shown (it has a d attribute)");
+
+        const faded = await highlighterTestFront.getHighlighterNodeAttribute(
+          "box-model-" + region,
+          "faded"
+        );
+        if (region === "margin") {
+          ok(!faded, "The margin region is not faded");
+        } else {
+          is(faded, "true", "Region " + region + " is faded");
+        }
+      }
+    },
+  },
+  {
+    desc: "When showOnly is used, other regions can be faded (2)",
+    options: { showOnly: "padding", onlyRegionArea: true },
+    async checkHighlighter(highlighterTestFront) {
+      for (const region of ["margin", "border", "padding", "content"]) {
+        const { d } = await highlighterTestFront.getHighlighterRegionPath(
+          region
+        );
+        ok(d, "Region " + region + " is shown (it has a d attribute)");
+
+        const faded = await highlighterTestFront.getHighlighterNodeAttribute(
+          "box-model-" + region,
+          "faded"
+        );
+        if (region === "padding") {
+          ok(!faded, "The padding region is not faded");
+        } else {
+          is(faded, "true", "Region " + region + " is faded");
+        }
+      }
+    },
+  },
+];
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL)
+  );
+
+  const divFront = await getNodeFront("div", inspector);
+
+  for (const { desc, options, checkHighlighter } of TEST_DATA) {
+    info("Running test: " + desc);
+
+    info("Show the box-model highlighter with options " + options);
+    await inspector.highlighters.showHighlighterTypeForNode(
+      inspector.highlighters.TYPES.BOXMODEL,
+      divFront,
+      options
+    );
+
+    await checkHighlighter(highlighterTestFront);
+
+    info("Hide the box-model highlighter");
+    await inspector.highlighters.hideHighlighterType(
+      inspector.highlighters.TYPES.BOXMODEL
+    );
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-preview.js b/devtools/client/inspector/test/browser_inspector_highlighter-preview.js
new file mode 100644
index 0000000000..256f57c521
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-preview.js
@@ -0,0 +1,72 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the highlighter is correctly displayed and picker mode is not stopped after
+// a Ctrl-click (Cmd-click on OSX).
+
+const TEST_URI = `data:text/html;charset=utf-8,
+                  <p id="one">one</p><p id="two">two</p><p id="three">three</p>`;
+const IS_OSX = Services.appinfo.OS === "Darwin";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
+
+  const body = await getNodeFront("body", inspector);
+  is(
+    inspector.selection.nodeFront,
+    body,
+    "By default the body node is selected"
+  );
+
+  info("Start the element picker");
+  await startPicker(toolbox);
+
+  info("Shift-clicking element #one should select it but keep the picker ON");
+  await clickElement("#one", inspector, true);
+  await checkElementSelected("#one", inspector);
+  checkPickerMode(toolbox, true);
+
+  info("Shift-clicking element #two should select it but keep the picker ON");
+  await clickElement("#two", inspector, true);
+  await checkElementSelected("#two", inspector);
+  checkPickerMode(toolbox, true);
+
+  info("Clicking element #three should select it and turn the picker OFF");
+  await clickElement("#three", inspector, false);
+  await checkElementSelected("#three", inspector);
+  checkPickerMode(toolbox, false);
+});
+
+async function clickElement(selector, inspector, preview) {
+  const onSelectionChanged = inspector.once("inspector-updated");
+  await safeSynthesizeMouseEventAtCenterInContentPage(selector, {
+    [IS_OSX ? "metaKey" : "ctrlKey"]: preview,
+  });
+  await onSelectionChanged;
+}
+
+async function checkElementSelected(selector, inspector) {
+  const el = await getNodeFront(selector, inspector);
+  is(
+    inspector.selection.nodeFront,
+    el,
+    `The element ${selector} is now selected`
+  );
+}
+
+function checkPickerMode(toolbox, isOn) {
+  const pickerButton = toolbox.doc.querySelector("#command-button-pick");
+  is(
+    pickerButton.classList.contains("checked"),
+    isOn,
+    "The picker mode is correct"
+  );
+  is(
+    pickerButton.getAttribute("aria-pressed"),
+    isOn ? "true" : "false",
+    "The picker mode is correct"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion-message.js b/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion-message.js
new file mode 100644
index 0000000000..2d134392d3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion-message.js
@@ -0,0 +1,104 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const REDUCED_MOTION_PREF = "ui.prefersReducedMotion";
+const DISMISS_MESSAGE_PREF =
+  "devtools.inspector.simple-highlighters.message-dismissed";
+
+add_task(async function testMessageHiddenWhenPrefersReducedMotionDisabled() {
+  info("Disable ui.prefersReducedMotion");
+  await pushPref(REDUCED_MOTION_PREF, 0);
+
+  await pushPref(DISMISS_MESSAGE_PREF, false);
+
+  const tab = await addTab("data:text/html,test");
+  const toolbox = await gDevTools.showToolboxForTab(tab);
+
+  await wait(1000);
+  ok(
+    !getSimpleHighlightersMessage(toolbox),
+    "The simple highlighters notification is not displayed"
+  );
+});
+
+add_task(async function testMessageHiddenWhenAlreadyDismissed() {
+  info("Enable ui.prefersReducedMotion");
+  await pushPref(REDUCED_MOTION_PREF, 1);
+
+  info("Simulate already dismissed message");
+  await pushPref(DISMISS_MESSAGE_PREF, true);
+
+  const tab = await addTab("data:text/html,test");
+  const toolbox = await gDevTools.showToolboxForTab(tab);
+
+  await wait(1000);
+  ok(
+    !getSimpleHighlightersMessage(toolbox),
+    "The simple highlighters notification is not displayed"
+  );
+});
+
+// Check that the message is displayed under the expected conditions, that the
+// settings button successfully opens the corresponding panel and that after
+// dismissing the message once, it is no longer displayed.
+add_task(async function () {
+  info("Enable ui.prefersReducedMotion");
+  await pushPref(REDUCED_MOTION_PREF, 1);
+
+  info("Simulate already dismissed message");
+  await pushPref(DISMISS_MESSAGE_PREF, false);
+
+  const tab = await addTab("data:text/html,test");
+  let toolbox = await gDevTools.showToolboxForTab(tab);
+
+  info("Check the simple-highlighters message is displayed");
+  let notification = await waitFor(() => getSimpleHighlightersMessage(toolbox));
+  ok(notification, "A notification was displayed");
+
+  info("Click on the settings button from the notification");
+  const onSettingsCallbackDone = toolbox.once(
+    "test-highlighters-settings-opened"
+  );
+  const settingsButton = notification.querySelector(".notificationButton");
+  settingsButton.click();
+
+  info("Wait until the open settings button callback is done");
+  await onSettingsCallbackDone;
+  is(toolbox.currentToolId, "options", "The options panel was selected");
+
+  info("Close and reopen the toolbox");
+  await toolbox.destroy();
+  toolbox = await gDevTools.showToolboxForTab(tab);
+
+  info("Check the notification is displayed again");
+  notification = await waitFor(() => getSimpleHighlightersMessage(toolbox));
+  ok(notification, "A notification was displayed after reopening the toolbox");
+
+  info("Close the notification");
+  const closeButton = notification.querySelector(".messageCloseButton");
+  closeButton.click();
+
+  info("Wait for the notification to be removed");
+  await waitFor(() => !getSimpleHighlightersMessage(toolbox));
+
+  info("Close and reopen the toolbox");
+  await toolbox.destroy();
+  toolbox = await gDevTools.showToolboxForTab(tab);
+
+  await wait(1000);
+  ok(!getSimpleHighlightersMessage(toolbox));
+  is(
+    Services.prefs.getBoolPref(DISMISS_MESSAGE_PREF),
+    true,
+    "The dismiss simple-highlighters-message preference was set to true"
+  );
+});
+
+function getSimpleHighlightersMessage(toolbox) {
+  return toolbox.doc.querySelector(
+    '.notification[data-key="simple-highlighters-message"]'
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion.js b/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion.js
new file mode 100644
index 0000000000..8b6f576182
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion.js
@@ -0,0 +1,89 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that the boxmodel highlighter is styled differently when
+// ui.prefersReducedMotion is enabled.
+
+const TEST_URL =
+  "data:text/html;charset=utf-8,<h1>test1</h1><h2>test2</h2><h3>test3</h3>";
+
+add_task(async function () {
+  info("Disable ui.prefersReducedMotion");
+  await pushPref("ui.prefersReducedMotion", 0);
+
+  info("Enable simple highlighters");
+  await pushPref("devtools.inspector.simple-highlighters-reduced-motion", true);
+
+  const { highlighterTestFront, inspector } = await openInspectorForURL(
+    TEST_URL
+  );
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.BOXMODEL;
+
+  const front = inspector.inspectorFront;
+  const highlighterFront = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
+
+  // Small helper to retrieve the computed style of a specific highlighter
+  // element.
+  const getElementComputedStyle = async (id, property) => {
+    info(`Retrieve computed style for property ${property} on element ${id}`);
+    return highlighterTestFront.getHighlighterComputedStyle(
+      id,
+      property,
+      highlighterFront
+    );
+  };
+
+  info("Highlight a node and check the highlighter is filled");
+  await selectAndHighlightNode("h1", inspector);
+  let stroke = await getElementComputedStyle("box-model-content", "stroke");
+  let fill = await getElementComputedStyle("box-model-content", "fill");
+  is(
+    stroke,
+    "none",
+    "If prefersReducedMotion is disabled, stroke style is none"
+  );
+  ok(
+    InspectorUtils.isValidCSSColor(fill),
+    "If prefersReducedMotion is disabled, fill style is a valid color"
+  );
+  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);
+
+  info("Enable ui.prefersReducedMotion");
+  await pushPref("ui.prefersReducedMotion", 1);
+
+  info("Highlight a node and check the highlighter uses stroke and not fill");
+  await selectAndHighlightNode("h2", inspector);
+  stroke = await getElementComputedStyle("box-model-content", "stroke");
+  fill = await getElementComputedStyle("box-model-content", "fill");
+  ok(
+    InspectorUtils.isValidCSSColor(stroke),
+    "If prefersReducedMotion is enabled, stroke style is a valid color"
+  );
+  is(fill, "none", "If prefersReducedMotion is enabled, fill style is none");
+
+  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);
+
+  info("Disable simple highlighters");
+  await pushPref(
+    "devtools.inspector.simple-highlighters-reduced-motion",
+    false
+  );
+
+  info("Highlight a node and check the highlighter is filled again");
+  await selectAndHighlightNode("h3", inspector);
+  stroke = await getElementComputedStyle("box-model-content", "stroke");
+  fill = await getElementComputedStyle("box-model-content", "fill");
+  is(
+    stroke,
+    "none",
+    "If simple highlighters are disabled, stroke style is none"
+  );
+  ok(
+    InspectorUtils.isValidCSSColor(fill),
+    "If simple highlighters are disabled, fill style is a valid color"
+  );
+  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-reload.js b/devtools/client/inspector/test/browser_inspector_highlighter-reload.js
new file mode 100644
index 0000000000..ac3dac4e2c
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-reload.js
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the node picker continues to work after page reload
+
+const TEST_URL = URL_ROOT_SSL + "doc_inspector_highlighter_dom.html";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  await startPicker(toolbox);
+
+  info("Selecting the simple-div1 DIV");
+  await hoverElement(inspector, "#simple-div1");
+
+  // Reload the current page (navigate to the same URL)
+  await navigateTo(TEST_URL);
+
+  // hoverElement() resolves after both the "picker-node-hovered" event
+  // and the "highlighter-shown" event are triggered. If this test doesn't timeout,
+  // it means node picking and node highlighting continue to work as expected.
+  info("Selecting the simple-div2 DIV after reload");
+  await hoverElement(inspector, "#simple-div2");
+
+  info("Picking the simple-div2 DIV after reload");
+  await pickElement(inspector, "#simple-div2", 0, 0);
+
+  is(
+    inspector.selection.nodeFront.id,
+    "simple-div2",
+    "The simple-div2 DIV has been picked after reload"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js
new file mode 100644
index 0000000000..a0ee23a324
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js
@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the geometry highlighter elements.
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  "<div style='position:absolute;left: 0; top: 0; " +
+  "width: 40000px; height: 8000px'></div>";
+
+const ID = "rulers-highlighter-";
+
+// Maximum size, in pixel, for the horizontal ruler and vertical ruler
+// used by RulersHighlighter
+const RULERS_MAX_X_AXIS = 10000;
+const RULERS_MAX_Y_AXIS = 15000;
+// Number of steps after we add a text in RulersHighliter;
+// currently the unit is in pixel.
+const RULERS_TEXT_STEP = 100;
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+
+  const highlighter = await front.getHighlighterByType("RulersHighlighter");
+
+  await isHiddenByDefault(highlighter, inspector, highlighterTestFront);
+  await isVisibleAfterShow(highlighter, inspector, highlighterTestFront);
+  await hasRightLabelsContent(highlighter, inspector, highlighterTestFront);
+  await isHiddenAfterHide(highlighter, inspector, highlighterTestFront);
+
+  await highlighter.finalize();
+});
+
+async function isHiddenByDefault(
+  highlighterFront,
+  inspector,
+  highlighterTestFront
+) {
+  info("Checking the highlighter is hidden by default");
+
+  const hidden = await isRulerHidden(highlighterFront, highlighterTestFront);
+  ok(hidden, "highlighter is hidden by default");
+}
+
+async function isVisibleAfterShow(
+  highlighterFront,
+  inspector,
+  highlighterTestFront
+) {
+  info("Checking the highlighter is displayed when asked");
+  // the rulers doesn't need any node, but as highligher it seems mandatory
+  // ones, so the body is given
+  const body = await getNodeFront("body", inspector);
+  await highlighterFront.show(body);
+
+  const hidden = await isRulerHidden(highlighterFront, highlighterTestFront);
+  ok(!hidden, "highlighter is visible after show");
+}
+
+async function isHiddenAfterHide(
+  highlighterFront,
+  inspector,
+  highlighterTestFront
+) {
+  info("Checking that the highlighter is hidden after disabling it");
+  await highlighterFront.hide();
+
+  const hidden = await isRulerHidden(highlighterFront, highlighterTestFront);
+  ok(hidden, "highlighter is hidden");
+}
+
+async function hasRightLabelsContent(
+  highlighterFront,
+  inspector,
+  highlighterTestFront
+) {
+  info("Checking the rulers have the proper text, based on rulers' size");
+
+  const contentX = await highlighterTestFront.getHighlighterNodeTextContent(
+    `${ID}x-axis-text`,
+    highlighterFront
+  );
+  const contentY = await highlighterTestFront.getHighlighterNodeTextContent(
+    `${ID}y-axis-text`,
+    highlighterFront
+  );
+
+  let expectedX = "";
+  for (let i = RULERS_TEXT_STEP; i < RULERS_MAX_X_AXIS; i += RULERS_TEXT_STEP) {
+    expectedX += i;
+  }
+
+  is(contentX, expectedX, "x axis text content is correct");
+
+  let expectedY = "";
+  for (let i = RULERS_TEXT_STEP; i < RULERS_MAX_Y_AXIS; i += RULERS_TEXT_STEP) {
+    expectedY += i;
+  }
+
+  is(contentY, expectedY, "y axis text content is correct");
+}
+
+async function isRulerHidden(highlighterFront, highlighterTestFront) {
+  const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    ID + "elements",
+    "hidden",
+    highlighterFront
+  );
+  return hidden === "true";
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js
new file mode 100644
index 0000000000..44bd1514b3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js
@@ -0,0 +1,201 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the geometry highlighter elements.
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  "<div style='position:absolute;left: 0; top: 0; " +
+  "width: 40000px; height: 8000px'></div>";
+
+const ID = "rulers-highlighter-";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+
+  const highlighter = await front.getHighlighterByType("RulersHighlighter");
+
+  // the rulers doesn't need any node, but as highligher it seems mandatory
+  // ones, so the body is given
+  const body = await getNodeFront("body", inspector);
+  await highlighter.show(body);
+
+  await isUpdatedAfterScroll(highlighter, inspector, highlighterTestFront);
+
+  await highlighter.finalize();
+});
+
+async function isUpdatedAfterScroll(
+  highlighterFront,
+  inspector,
+  highlighterTestFront
+) {
+  info("Check the rulers' position by default");
+
+  let xAxisRulerTransform =
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      `${ID}x-axis-ruler`,
+      "transform",
+      highlighterFront
+    );
+  let xAxisTextTransform =
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      `${ID}x-axis-text`,
+      "transform",
+      highlighterFront
+    );
+  let yAxisRulerTransform =
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      `${ID}y-axis-ruler`,
+      "transform",
+      highlighterFront
+    );
+  let yAxisTextTransform =
+    await highlighterTestFront.getHighlighterNodeAttribute(
+      `${ID}y-axis-text`,
+      "transform",
+      highlighterFront
+    );
+
+  is(xAxisRulerTransform, null, "x axis ruler is positioned properly");
+  is(xAxisTextTransform, null, "x axis text are positioned properly");
+  is(yAxisRulerTransform, null, "y axis ruler is positioned properly");
+  is(yAxisTextTransform, null, "y axis text are positioned properly");
+
+  info("Ask the content window to scroll to specific coords");
+
+  const x = 200,
+    y = 300;
+
+  let data = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [x, y],
+    (_x, _y) => {
+      return new Promise(resolve => {
+        content.addEventListener(
+          "scroll",
+          () => resolve({ x: content.scrollX, y: content.scrollY }),
+          { once: true }
+        );
+        content.scrollTo(_x, _y);
+      });
+    }
+  );
+
+  is(data.x, x, "window scrolled properly horizontally");
+  is(data.y, y, "window scrolled properly vertically");
+
+  info("Check the rulers are properly positioned after the scrolling");
+
+  xAxisRulerTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}x-axis-ruler`,
+    "transform",
+    highlighterFront
+  );
+  xAxisTextTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}x-axis-text`,
+    "transform",
+    highlighterFront
+  );
+  yAxisRulerTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}y-axis-ruler`,
+    "transform",
+    highlighterFront
+  );
+  yAxisTextTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}y-axis-text`,
+    "transform",
+    highlighterFront
+  );
+
+  is(
+    xAxisRulerTransform,
+    `translate(-${x})`,
+    "x axis ruler is positioned properly"
+  );
+  is(
+    xAxisTextTransform,
+    `translate(-${x})`,
+    "x axis text are positioned properly"
+  );
+  is(
+    yAxisRulerTransform,
+    `translate(0, -${y})`,
+    "y axis ruler is positioned properly"
+  );
+  is(
+    yAxisTextTransform,
+    `translate(0, -${y})`,
+    "y axis text are positioned properly"
+  );
+
+  info("Ask the content window to scroll relative to the current position");
+
+  data = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [-50, -60],
+    (_deltaX, _deltaY) => {
+      return new Promise(resolve => {
+        content.addEventListener(
+          "scroll",
+          () => resolve({ x: content.scrollX, y: content.scrollY }),
+          { once: true }
+        );
+        content.scrollBy(_deltaX, _deltaY);
+      });
+    }
+  );
+
+  is(data.x, x - 50, "window scrolled properly horizontally");
+  is(data.y, y - 60, "window scrolled properly vertically");
+
+  info("Check the rulers are properly positioned after the relative scrolling");
+
+  xAxisRulerTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}x-axis-ruler`,
+    "transform",
+    highlighterFront
+  );
+  xAxisTextTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}x-axis-text`,
+    "transform",
+    highlighterFront
+  );
+  yAxisRulerTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}y-axis-ruler`,
+    "transform",
+    highlighterFront
+  );
+  yAxisTextTransform = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}y-axis-text`,
+    "transform",
+    highlighterFront
+  );
+
+  is(
+    xAxisRulerTransform,
+    `translate(-${x - 50})`,
+    "x axis ruler is positioned properly"
+  );
+  is(
+    xAxisTextTransform,
+    `translate(-${x - 50})`,
+    "x axis text are positioned properly"
+  );
+  is(
+    yAxisRulerTransform,
+    `translate(0, -${y - 60})`,
+    "y axis ruler is positioned properly"
+  );
+  is(
+    yAxisTextTransform,
+    `translate(0, -${y - 60})`,
+    "y axis text are positioned properly"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-rulers_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_03.js
new file mode 100644
index 0000000000..9644758341
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_03.js
@@ -0,0 +1,117 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the viewport infobar and makes sure if resizes correctly
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  "<div style='position:absolute;left: 0; top: 0; " +
+  "width: 20px; height: 50px'></div>";
+
+const ID = "viewport-size-highlighter-";
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+
+  const highlighter = await front.getHighlighterByType(
+    "ViewportSizeHighlighter"
+  );
+
+  await isVisibleAfterShow(highlighter, inspector, highlighterTestFront);
+  await hasRightLabelsContent(highlighter, highlighterTestFront);
+  await resizeInspector(inspector);
+  await hasRightLabelsContent(highlighter, highlighterTestFront);
+  await isHiddenAfterHide(highlighter, inspector, highlighterTestFront);
+
+  await highlighter.finalize();
+});
+
+async function isVisibleAfterShow(
+  highlighterFront,
+  inspector,
+  highlighterTestFront
+) {
+  info("Checking that the viewport infobar is displayed");
+  // the rulers doesn't need any node, but as highligher it seems mandatory
+  // ones, so the body is given
+  const body = await getNodeFront("body", inspector);
+  await highlighterFront.show(body);
+
+  const hidden = await isViewportInfobarHidden(
+    highlighterFront,
+    highlighterTestFront
+  );
+  ok(!hidden, "viewport infobar is visible after show");
+}
+
+async function isHiddenAfterHide(
+  highlighterFront,
+  inspector,
+  highlighterTestFront
+) {
+  info("Checking that the viewport infobar is hidden after disabling");
+  await highlighterFront.hide();
+
+  const hidden = await isViewportInfobarHidden(
+    highlighterFront,
+    highlighterTestFront
+  );
+  ok(hidden, "viewport infobar is hidden after hide");
+}
+
+async function hasRightLabelsContent(highlighterFront, highlighterTestFront) {
+  const windowDimensions = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const { require } = ChromeUtils.importESModule(
+        "resource://devtools/shared/loader/Loader.sys.mjs"
+      );
+      const {
+        getWindowDimensions,
+      } = require("resource://devtools/shared/layout/utils.js");
+      return getWindowDimensions(content);
+    }
+  );
+  const windowHeight = Math.round(windowDimensions.height);
+  const windowWidth = Math.round(windowDimensions.width);
+  const windowText = windowWidth + "px \u00D7 " + windowHeight + "px";
+
+  info("Wait until the rulers dimension tooltip have the proper text");
+  await asyncWaitUntil(async () => {
+    const dimensionText =
+      await highlighterTestFront.getHighlighterNodeTextContent(
+        `${ID}viewport-infobar-container`,
+        highlighterFront
+      );
+    return dimensionText == windowText;
+  }, 100);
+}
+
+async function resizeInspector(inspector) {
+  info(
+    "Docking the toolbox to the side of the browser to change the window size"
+  );
+  const toolbox = inspector.toolbox;
+  await toolbox.switchHost(Toolbox.HostType.RIGHT);
+
+  // Wait for some time to avoid measuring outdated window dimensions.
+  await wait(100);
+}
+
+async function isViewportInfobarHidden(highlighterFront, highlighterTestFront) {
+  const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
+    `${ID}viewport-infobar-container`,
+    "hidden",
+    highlighterFront
+  );
+  return hidden === "true";
+}
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-selector_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-selector_01.js
new file mode 100644
index 0000000000..6dcbae3383
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-selector_01.js
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the custom selector highlighter creates as many box-model
+// highlighters as there are nodes that match the given selector
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  "<div id='test-node'>test node</div>" +
+  "<ul>" +
+  "  <li class='item'>item</li>" +
+  "  <li class='item'>item</li>" +
+  "  <li class='item'>item</li>" +
+  "  <li class='item'>item</li>" +
+  "  <li class='item'>item</li>" +
+  "</ul>";
+
+const TEST_DATA = [
+  {
+    selector: "#test-node",
+    containerCount: 1,
+  },
+  {
+    selector: null,
+    containerCount: 0,
+  },
+  {
+    selector: undefined,
+    containerCount: 0,
+  },
+  {
+    selector: ".invalid-class",
+    containerCount: 0,
+  },
+  {
+    selector: ".item",
+    containerCount: 5,
+  },
+  {
+    selector: "#test-node, ul, .item",
+    containerCount: 7,
+  },
+];
+
+requestLongerTimeout(5);
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+  const front = inspector.inspectorFront;
+  const highlighter = await front.getHighlighterByType("SelectorHighlighter");
+
+  const contextNode = await getNodeFront("body", inspector);
+
+  for (const { selector, containerCount } of TEST_DATA) {
+    info(
+      "Showing the highlighter on " +
+        selector +
+        ". Expecting " +
+        containerCount +
+        " highlighter containers"
+    );
+
+    await highlighter.show(contextNode, { selector });
+
+    const nb = await highlighterTestFront.getSelectorHighlighterBoxNb(
+      highlighter.actorID
+    );
+    Assert.notStrictEqual(nb, null, "The number of highlighters was retrieved");
+
+    is(nb, containerCount, "The correct number of highlighers were created");
+    await highlighter.hide();
+  }
+
+  await highlighter.finalize();
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-selector_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-selector_02.js
new file mode 100644
index 0000000000..94ccd624e0
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-selector_02.js
@@ -0,0 +1,84 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the custom selector highlighter creates highlighters for nodes in
+// the right frame.
+
+const FRAME_SRC =
+  "data:text/html;charset=utf-8," + "<div class=sub-level-node></div>";
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  "<div class=root-level-node></div>" +
+  '<iframe src="' +
+  FRAME_SRC +
+  '" />';
+
+const TEST_DATA = [
+  {
+    selector: ".root-level-node",
+    containerCount: 1,
+  },
+  {
+    selector: ".sub-level-node",
+    containerCount: 0,
+  },
+  {
+    inIframe: true,
+    selector: ".root-level-node",
+    containerCount: 0,
+  },
+  {
+    inIframe: true,
+    selector: ".sub-level-node",
+    containerCount: 1,
+  },
+];
+
+requestLongerTimeout(5);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const { inIframe, selector, containerCount } of TEST_DATA) {
+    info(
+      "Showing the highlighter on " +
+        selector +
+        ". Expecting " +
+        containerCount +
+        " highlighter containers"
+    );
+
+    let contextNode;
+    if (inIframe) {
+      contextNode = await getNodeFrontInFrames(["iframe", "body"], inspector);
+    } else {
+      contextNode = await getNodeFront("body", inspector);
+    }
+
+    const inspectorFront = await contextNode.targetFront.getFront("inspector");
+    const highlighter = await inspectorFront.getHighlighterByType(
+      "SelectorHighlighter"
+    );
+    const highlighterTestFront = await getHighlighterTestFront(
+      inspector.toolbox,
+      {
+        target: contextNode.targetFront,
+      }
+    );
+
+    await highlighter.show(contextNode, { selector });
+
+    const nb = await highlighterTestFront.getSelectorHighlighterBoxNb(
+      highlighter.actorID
+    );
+    Assert.notStrictEqual(nb, null, "The number of highlighters was retrieved");
+
+    is(nb, containerCount, "The correct number of highlighers were created");
+    await highlighter.hide();
+    await highlighter.finalize();
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js b/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js
new file mode 100644
index 0000000000..ba81fde1b8
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js
@@ -0,0 +1,83 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the highlighter stays correctly positioned and has the right aspect
+// ratio even when the page is zoomed in or out.
+
+const TEST_URL = "data:text/html;charset=utf-8,<div>zoom me</div>";
+
+// TEST_LEVELS entries should contain the zoom level to test.
+const TEST_LEVELS = [2, 1, 0.5];
+
+// Returns the expected style attribute value to check for on the highlighter's elements
+// node, for the values given.
+const expectedStyle = (w, h, z) =>
+  (z !== 1
+    ? `transform-origin: left top 0px; transform: scale(${1 / z}); `
+    : "") +
+  `position: absolute; width: ${w * z}px; height: ${h * z}px; ` +
+  "overflow: hidden;";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URL
+  );
+
+  const div = await getNodeFront("div", inspector);
+
+  for (const level of TEST_LEVELS) {
+    info(`Zoom to level ${level}`);
+    setContentPageZoomLevel(level);
+
+    info("Highlight the test node");
+    await inspector.highlighters.showHighlighterTypeForNode(
+      inspector.highlighters.TYPES.BOXMODEL,
+      div
+    );
+
+    const isVisible = await highlighterTestFront.isHighlighting();
+    ok(isVisible, `The highlighter is visible at zoom level ${level}`);
+
+    await isNodeCorrectlyHighlighted(highlighterTestFront, "div");
+
+    info("Check that the highlighter root wrapper node was scaled down");
+
+    const style = await getElementsNodeStyle(highlighterTestFront);
+
+    const { width, height } = await SpecialPowers.spawn(
+      gBrowser.selectedBrowser,
+      [],
+      () => {
+        const { require } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/Loader.sys.mjs"
+        );
+        const {
+          getWindowDimensions,
+        } = require("resource://devtools/shared/layout/utils.js");
+        return getWindowDimensions(content);
+      }
+    );
+
+    is(
+      style,
+      expectedStyle(width, height, level),
+      "The style attribute of the root element is correct"
+    );
+
+    info("Unhighlight the node");
+    await inspector.highlighters.hideHighlighterType(
+      inspector.highlighters.TYPES.BOXMODEL
+    );
+  }
+});
+
+async function getElementsNodeStyle(highlighterTestFront) {
+  const value = await highlighterTestFront.getHighlighterNodeAttribute(
+    "box-model-elements",
+    "style"
+  );
+  return value;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_iframe-navigation.js b/devtools/client/inspector/test/browser_inspector_iframe-navigation.js
new file mode 100644
index 0000000000..de97b1e020
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_iframe-navigation.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the highlighter element picker still works through iframe
+// navigations.
+
+const TEST_URI =
+  "data:text/html;charset=utf-8," +
+  "<p>bug 699308 - test iframe navigation</p>" +
+  "<iframe src='data:text/html;charset=utf-8,hello world'></iframe>";
+
+add_task(async function () {
+  const { inspector, toolbox, highlighterTestFront } =
+    await openInspectorForURL(TEST_URI);
+
+  info("Starting element picker.");
+  await startPicker(toolbox);
+
+  info("Mouse over for body element.");
+  await hoverElement(inspector, "body");
+
+  let isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "Inspector is highlighting.");
+
+  await reloadIframe(inspector);
+  info("Frame reloaded. Reloading again.");
+
+  await reloadIframe(inspector);
+  info("Frame reloaded twice.");
+
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "Inspector is highlighting after iframe nav.");
+
+  info("Stopping element picker.");
+  await toolbox.nodePicker.stop({ canceled: true });
+});
+
+async function reloadIframe(inspector) {
+  const { resourceCommand } = inspector.commands;
+
+  const { onResource: onNewRoot } = await resourceCommand.waitForNextResource(
+    resourceCommand.TYPES.ROOT_NODE,
+    {
+      ignoreExistingResources: true,
+    }
+  );
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
+    const iframeEl = content.document.querySelector("iframe");
+    await new Promise(resolve => {
+      iframeEl.addEventListener("load", () => resolve(), { once: true });
+      iframeEl.contentWindow.location.reload();
+    });
+  });
+
+  await onNewRoot;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_iframe-picker-bfcache-navigation.js b/devtools/client/inspector/test/browser_inspector_iframe-picker-bfcache-navigation.js
new file mode 100644
index 0000000000..37ca935c2e
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_iframe-picker-bfcache-navigation.js
@@ -0,0 +1,121 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that using the iframe picker usage + bfcache navigations don't break the toolbox
+
+const IFRAME_URL = `https://example.com/document-builder.sjs?html=<meta charset=utf8><div id=in-iframe>frame</div>`;
+
+const URL =
+  "https://example.com/document-builder.sjs?html=" +
+  `<meta charset=utf8><iframe src='${IFRAME_URL}'></iframe><div id=top>top</div>`;
+
+add_task(async function () {
+  await pushPref("devtools.command-button-frames.enabled", true);
+
+  // Don't show the third panel to limit the logs and activity.
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.inspector.activeSidebar", "ruleview");
+
+  const { inspector, toolbox } = await openInspectorForURL(URL);
+
+  info("Verify we are on the top level document");
+  await assertMarkupViewAsTree(
+    `
+    body
+      iframe!ignore-children
+      div id="top"`,
+    "body",
+    inspector
+  );
+
+  info("Navigate to a different page to put the current page in the bfcache");
+  let onMarkupLoaded = getOnInspectorReadyAfterNavigation(inspector);
+  await navigateTo(
+    "https://example.org/document-builder.sjs?html=<meta charset=utf8>example.org page"
+  );
+  await onMarkupLoaded;
+
+  info("Navigate back to the example.com page");
+  onMarkupLoaded = getOnInspectorReadyAfterNavigation(inspector);
+  gBrowser.goBack();
+  await onMarkupLoaded;
+
+  // Verify that the frame map button is empty at the moment.
+  const btn = toolbox.doc.getElementById("command-button-frames");
+  ok(!btn.firstChild, "The frame list button doesn't have any children");
+
+  // Open frame menu and wait till it's available on the screen.
+  const frameMenu = toolbox.doc.getElementById("toolbox-frame-menu");
+  info("Wait for the frame to be populated before opening the tooltip");
+  await waitUntil(() => frameMenu.childNodes.length == 2);
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  btn.click();
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  // Verify that the menu is populated.
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const frames = Array.from(menuList.querySelectorAll(".command")).sort(
+    (a, b) => a.textContent < b.textContent
+  );
+  is(frames.length, 2, "We have both frames in the menu");
+  const [topLevelFrameItem, iframeItem] = frames;
+
+  is(
+    topLevelFrameItem.querySelector(".label").textContent,
+    URL,
+    "Got top-level document in the list"
+  );
+  is(
+    iframeItem.querySelector(".label").textContent,
+    IFRAME_URL,
+    "Got iframe document in the list"
+  );
+
+  info("Select the iframe in the iframe picker");
+  const newRoot = inspector.once("new-root");
+  iframeItem.click();
+  await newRoot;
+
+  info("Check that the markup view was updated");
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="in-iframe"`,
+    "body",
+    inspector
+  );
+
+  info("Go forward (to example.org page)");
+  onMarkupLoaded = getOnInspectorReadyAfterNavigation(inspector);
+  gBrowser.goForward();
+  await onMarkupLoaded;
+
+  info("And go back again to example.com page");
+  onMarkupLoaded = getOnInspectorReadyAfterNavigation(inspector);
+  gBrowser.goBack();
+  await onMarkupLoaded;
+
+  info("Check that the document markup is displayed as expected");
+  await assertMarkupViewAsTree(
+    `
+    body
+      iframe!ignore-children
+      div id="top"`,
+    "body",
+    inspector
+  );
+});
+
+function getOnInspectorReadyAfterNavigation(inspector) {
+  return Promise.all([
+    inspector.once("reloaded"),
+    // the inspector is initializing the accessibility front in onTargetAvailable, so we
+    // need to wait for the target to be processed, otherwise we may end up with pending
+    // promises failures.
+    inspector.toolbox.commands.targetCommand.once("processed-available-target"),
+  ]);
+}
diff --git a/devtools/client/inspector/test/browser_inspector_iframe-picker.js b/devtools/client/inspector/test/browser_inspector_iframe-picker.js
new file mode 100644
index 0000000000..fab3e4577b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_iframe-picker.js
@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test frame selection switching at toolbox level when using the inspector
+
+const FrameURL =
+  "data:text/html;charset=UTF-8," +
+  encodeURI('<div id="in-iframe">frame</div>');
+const URL =
+  "data:text/html;charset=UTF-8," +
+  encodeURI('<iframe src="' + FrameURL + '"></iframe><div id="top">top</div>');
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(URL);
+
+  // Verify we are on the top level document
+  await assertMarkupViewAsTree(
+    `
+    body
+      iframe!ignore-children
+      div id="top"`,
+    "body",
+    inspector
+  );
+
+  assertMarkupViewIsLoaded(inspector);
+
+  // Verify that the frame map button is empty at the moment.
+  const btn = toolbox.doc.getElementById("command-button-frames");
+  ok(!btn.firstChild, "The frame list button doesn't have any children");
+
+  // Open frame menu and wait till it's available on the screen.
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  btn.click();
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  // Verify that the menu is populated.
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const frames = Array.from(menuList.querySelectorAll(".command"));
+  is(frames.length, 2, "We have both frames in the menu");
+
+  frames.sort(function (a, b) {
+    return a.children[0].innerHTML.localeCompare(b.children[0].innerHTML);
+  });
+
+  is(
+    frames[0].querySelector(".label").textContent,
+    FrameURL,
+    "Got top level document in the list"
+  );
+  is(
+    frames[1].querySelector(".label").textContent,
+    URL,
+    "Got iframe document in the list"
+  );
+
+  // Listen to will-navigate to check if the view is empty
+  const { resourceCommand } = toolbox.commands;
+  const { onResource: willNavigate } =
+    await resourceCommand.waitForNextResource(
+      resourceCommand.TYPES.DOCUMENT_EVENT,
+      {
+        ignoreExistingResources: true,
+        predicate(resource) {
+          return resource.name == "will-navigate";
+        },
+      }
+    );
+  willNavigate.then(() => {
+    info("Navigation to the iframe has started, the inspector should be empty");
+    assertMarkupViewIsEmpty(inspector);
+  });
+
+  // Only select the iframe after we are able to select an element from the top
+  // level document.
+  let newRoot = inspector.once("new-root");
+  await selectNode("#top", inspector);
+  info("Select the iframe");
+  frames[0].click();
+
+  if (!isEveryFrameTargetEnabled()) {
+    await willNavigate;
+  }
+  await newRoot;
+
+  info("The iframe is selected, check that the markup view was updated");
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="in-iframe"`,
+    "body",
+    inspector
+  );
+  assertMarkupViewIsLoaded(inspector);
+
+  info(
+    "Remove the iframe and check that the inspector gets updated to show the top level frame markup"
+  );
+  newRoot = inspector.once("new-root");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    content.document.querySelector("iframe").remove();
+  });
+  await newRoot;
+
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="top"`,
+    "body",
+    inspector
+  );
+  assertMarkupViewIsLoaded(inspector);
+});
+
+function assertMarkupViewIsLoaded(inspector) {
+  const markupViewBox = inspector.panelDoc.getElementById("markup-box");
+  is(markupViewBox.childNodes.length, 1, "The markup-view is loaded");
+}
+
+function assertMarkupViewIsEmpty(inspector) {
+  const markupFrame = inspector._markupFrame;
+  is(
+    markupFrame.contentDocument.getElementById("root").childNodes.length,
+    0,
+    "The markup-view is unloaded"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_infobar_01.js b/devtools/client/inspector/test/browser_inspector_infobar_01.js
new file mode 100644
index 0000000000..cc10addb66
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_01.js
@@ -0,0 +1,113 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check the position and text content of the highlighter nodeinfo bar.
+
+const TEST_URI = URL_ROOT + "doc_inspector_infobar_01.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  const testData = [
+    {
+      selector: "#top",
+      position: "bottom",
+      tag: "div",
+      id: "top",
+      classes: ".class1.class2",
+      dims: "500" + " \u00D7 " + "100",
+      arrowed: true,
+    },
+    {
+      selector: "#vertical",
+      position: "top",
+      tag: "div",
+      id: "vertical",
+      classes: "",
+      arrowed: false,
+      // No dims as they will vary between computers
+    },
+    {
+      selector: "#bottom",
+      position: "top",
+      tag: "div",
+      id: "bottom",
+      classes: "",
+      dims: "500" + " \u00D7 " + "100",
+      arrowed: true,
+    },
+    {
+      selector: "body",
+      position: "bottom",
+      tag: "body",
+      classes: "",
+      arrowed: true,
+      // No dims as they will vary between computers
+    },
+    {
+      selector: "clipPath",
+      position: "bottom",
+      tag: "clipPath",
+      id: "clip",
+      classes: "",
+      arrowed: false,
+      // No dims as element is not displayed and we just want to test tag name
+    },
+  ];
+
+  for (const currTest of testData) {
+    await testPosition(currTest, inspector, highlighterTestFront);
+  }
+});
+
+async function testPosition(test, inspector, highlighterTestFront) {
+  info("Testing " + test.selector);
+
+  await selectAndHighlightNode(test.selector, inspector);
+
+  const position = await highlighterTestFront.getHighlighterNodeAttribute(
+    "box-model-infobar-container",
+    "position"
+  );
+  is(position, test.position, "Node " + test.selector + ": position matches");
+
+  const tag = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-tagname"
+  );
+  is(tag, test.tag, "node " + test.selector + ": tagName matches.");
+
+  if (test.id) {
+    const id = await highlighterTestFront.getHighlighterNodeTextContent(
+      "box-model-infobar-id"
+    );
+    is(id, "#" + test.id, "node " + test.selector + ": id matches.");
+  }
+
+  const classes = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-classes"
+  );
+  is(classes, test.classes, "node " + test.selector + ": classes match.");
+
+  const arrowed = !(await highlighterTestFront.getHighlighterNodeAttribute(
+    "box-model-infobar-container",
+    "hide-arrow"
+  ));
+
+  is(
+    arrowed,
+    test.arrowed,
+    "node " + test.selector + ": arrow visibility match."
+  );
+
+  if (test.dims) {
+    const dims = await highlighterTestFront.getHighlighterNodeTextContent(
+      "box-model-infobar-dimensions"
+    );
+    is(dims, test.dims, "node " + test.selector + ": dims match.");
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_infobar_02.js b/devtools/client/inspector/test/browser_inspector_infobar_02.js
new file mode 100644
index 0000000000..594629a40a
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_02.js
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check the text content of the highlighter info bar for namespaced elements.
+
+const XHTML = `
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg">
+    <body>
+      <svg:svg width="100" height="100">
+        <svg:circle cx="0" cy="0" r="5"></svg:circle>
+      </svg:svg>
+    </body>
+  </html>
+`;
+
+const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  const testData = [
+    {
+      selector: "svg",
+      tag: "svg:svg",
+    },
+    {
+      selector: "circle",
+      tag: "svg:circle",
+    },
+  ];
+
+  for (const currTest of testData) {
+    await testNode(currTest, inspector, highlighterTestFront);
+  }
+});
+
+async function testNode(test, inspector, highlighterTestFront) {
+  info("Testing " + test.selector);
+
+  await selectAndHighlightNode(test.selector, inspector);
+
+  const tag = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-tagname"
+  );
+  is(tag, test.tag, "node " + test.selector + ": tagName matches.");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_infobar_03.js b/devtools/client/inspector/test/browser_inspector_infobar_03.js
new file mode 100644
index 0000000000..afbc06dcec
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_03.js
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Bug 1102269 - Make sure info-bar never gets outside of visible area after scrolling
+
+const TEST_URI = URL_ROOT + "doc_inspector_infobar_03.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  const testData = {
+    selector: "body",
+    position: "overlap",
+    style: "position:fixed",
+  };
+
+  await testPositionAndStyle(testData, inspector, highlighterTestFront);
+});
+
+async function testPositionAndStyle(test, inspector, highlighterTestFront) {
+  info("Testing " + test.selector);
+
+  await selectAndHighlightNode(test.selector, inspector);
+
+  let style = await highlighterTestFront.getHighlighterNodeAttribute(
+    "box-model-infobar-container",
+    "style"
+  );
+
+  is(
+    style.split(";")[0].trim(),
+    test.style,
+    "Infobar shows on top of the page when page isn't scrolled"
+  );
+
+  info("Scroll down");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    return new Promise(resolve => {
+      content.addEventListener("scroll", () => resolve(), { once: true });
+      content.scrollTo({ top: 500 });
+    });
+  });
+
+  style = await highlighterTestFront.getHighlighterNodeAttribute(
+    "box-model-infobar-container",
+    "style"
+  );
+
+  is(
+    style.split(";")[0].trim(),
+    test.style,
+    "Infobar shows on top of the page even if the page is scrolled"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_infobar_04.js b/devtools/client/inspector/test/browser_inspector_infobar_04.js
new file mode 100644
index 0000000000..5569dc6176
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_04.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check the position and text content of the highlighter nodeinfo bar under page zoom.
+
+const TEST_URI = URL_ROOT + "doc_inspector_infobar_01.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+  const testData = {
+    selector: "#top",
+    dims: "500" + " \u00D7 " + "100",
+  };
+
+  await testInfobar(testData, inspector, highlighterTestFront);
+  info("Change zoom page to level 2.");
+  setContentPageZoomLevel(2);
+  info("Testing again the infobar after zoom.");
+  await testInfobar(testData, inspector, highlighterTestFront);
+});
+
+async function testInfobar(test, inspector, highlighterTestFront) {
+  info(`Testing ${test.selector}`);
+  // First, hide any existing box model highlighter. Duplicate calls to show are ignored.
+  await inspector.highlighters.hideHighlighterType(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  await selectAndHighlightNode(test.selector, inspector);
+
+  // Ensure the node is the correct one.
+  const id = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-id"
+  );
+  is(id, test.selector, `Node ${test.selector} selected.`);
+
+  const dims = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-dimensions"
+  );
+  is(dims, test.dims, "Node's infobar displays the right dimensions.");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_infobar_05.js b/devtools/client/inspector/test/browser_inspector_infobar_05.js
new file mode 100644
index 0000000000..3a1b9a978c
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_05.js
@@ -0,0 +1,119 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Bug 1521188 - Indicate grid/flex container/item in infobar
+// Check the text content of the highlighter nodeinfo bar.
+const HighlightersBundle = new Localization(
+  ["devtools/shared/highlighters.ftl"],
+  true
+);
+
+const TEST_URI = URL_ROOT + "doc_inspector_infobar_04.html";
+
+const CLASS_GRID_TYPE = "box-model-infobar-grid-type";
+const CLASS_FLEX_TYPE = "box-model-infobar-flex-type";
+
+const FLEX_CONTAINER_TEXT =
+  HighlightersBundle.formatValueSync("flextype-container");
+const FLEX_ITEM_TEXT = HighlightersBundle.formatValueSync("flextype-item");
+const FLEX_DUAL_TEXT = HighlightersBundle.formatValueSync("flextype-dual");
+const GRID_CONTAINER_TEXT =
+  HighlightersBundle.formatValueSync("gridtype-container");
+const GRID_ITEM_TEXT = HighlightersBundle.formatValueSync("gridtype-item");
+const GRID_DUAL_TEXT = HighlightersBundle.formatValueSync("gridtype-dual");
+
+const TEST_DATA = [
+  {
+    selector: "#flex-container",
+    flexText: FLEX_CONTAINER_TEXT,
+    gridText: "",
+  },
+  {
+    selector: "#flex-item",
+    flexText: FLEX_ITEM_TEXT,
+    gridText: "",
+  },
+  {
+    selector: "#flex-container-item",
+    flexText: FLEX_DUAL_TEXT,
+    gridText: "",
+  },
+  {
+    selector: "#grid-container",
+    flexText: "",
+    gridText: GRID_CONTAINER_TEXT,
+  },
+  {
+    selector: "#grid-item",
+    flexText: "",
+    gridText: GRID_ITEM_TEXT,
+  },
+  {
+    selector: "#grid-container-item",
+    flexText: "",
+    gridText: GRID_DUAL_TEXT,
+  },
+  {
+    selector: "#flex-item-grid-container",
+    flexText: FLEX_ITEM_TEXT,
+    gridText: GRID_CONTAINER_TEXT,
+  },
+];
+
+const TEST_TEXT_DATA = [
+  {
+    selector: "#flex-text-container",
+    flexText: FLEX_ITEM_TEXT,
+    gridText: "",
+  },
+  {
+    selector: "#grid-text-container",
+    flexText: "",
+    gridText: GRID_ITEM_TEXT,
+  },
+];
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  for (const currentTest of TEST_DATA) {
+    info("Testing " + currentTest.selector);
+    await testTextContent(currentTest, inspector, highlighterTestFront);
+  }
+
+  for (const currentTest of TEST_TEXT_DATA) {
+    info("Testing " + currentTest.selector);
+    await testTextNodeTextContent(currentTest, inspector, highlighterTestFront);
+  }
+});
+
+async function testTextContent(
+  { selector, gridText, flexText },
+  inspector,
+  highlighterTestFront
+) {
+  await selectAndHighlightNode(selector, inspector);
+
+  const gridType = await highlighterTestFront.getHighlighterNodeTextContent(
+    CLASS_GRID_TYPE
+  );
+  const flexType = await highlighterTestFront.getHighlighterNodeTextContent(
+    CLASS_FLEX_TYPE
+  );
+
+  is(gridType, gridText, "node " + selector + ": grid type matches.");
+  is(flexType, flexText, "node " + selector + ": flex type matches.");
+}
+
+async function testTextNodeTextContent(test, inspector, highlighterTestFront) {
+  const { walker } = inspector;
+  const div = await walker.querySelector(walker.rootNode, test.selector);
+  const { nodes } = await walker.children(div);
+  test.selector = nodes[0];
+  await testTextContent(test, inspector, highlighterTestFront);
+}
diff --git a/devtools/client/inspector/test/browser_inspector_infobar_textnode.js b/devtools/client/inspector/test/browser_inspector_infobar_textnode.js
new file mode 100644
index 0000000000..b02cee6819
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_textnode.js
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Bug 1309212 - Make sure info-bar is displayed with dimensions for text nodes.
+
+const TEST_URI = URL_ROOT + "doc_inspector_infobar_textnode.html";
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+  const { walker } = inspector;
+
+  info("Retrieve the children of #textnode-container");
+  const div = await walker.querySelector(
+    walker.rootNode,
+    "#textnode-container"
+  );
+  const { nodes } = await inspector.walker.children(div);
+
+  // Children 0, 2 and 4 are text nodes, for which we expect to see an infobar containing
+  // dimensions.
+
+  // Regular text node.
+  info("Select the first text node");
+  await selectNode(nodes[0], inspector, "test-highlight");
+  await checkTextNodeInfoBar(highlighterTestFront);
+
+  // Whitespace-only text node.
+  info("Select the second text node");
+  await selectNode(nodes[2], inspector, "test-highlight");
+  await checkTextNodeInfoBar(highlighterTestFront);
+
+  // Regular text node.
+  info("Select the third text node");
+  await selectNode(nodes[4], inspector, "test-highlight");
+  await checkTextNodeInfoBar(highlighterTestFront);
+});
+
+async function checkTextNodeInfoBar(highlighterTestFront) {
+  const tag = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-tagname"
+  );
+  is(tag, "#text", "node display name is #text");
+  const dims = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-dimensions"
+  );
+  // Do not assert dimensions as they might be platform specific.
+  ok(!!dims, "node has dims");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_initialization.js b/devtools/client/inspector/test/browser_inspector_initialization.js
new file mode 100644
index 0000000000..a01cf5bbe3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_initialization.js
@@ -0,0 +1,114 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Tests for different ways to initialize the inspector.
+
+const HTML = `
+  <div id="first" style="margin: 10em; font-size: 14pt;
+                         font-family: helvetica, sans-serif; color: gray">
+    <h1>Some header text</h1>
+    <p id="salutation" style="font-size: 12pt">hi.</p>
+    <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+    solely to provide some things to test the inspector initialization.</p>
+    <p>If you are reading this, you should go do something else instead. Maybe
+    read a book. Or better yet, write some test-cases for another bit of code.
+      <span style="font-style: italic">Inspector's!</span>
+    </p>
+    <p id="closing">end transmission</p>
+  </div>
+`;
+
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+  await testToolboxInitialization(tab);
+  await testContextMenuInitialization();
+  await testContextMenuInspectorAlreadyOpen();
+});
+
+async function testToolboxInitialization(tab) {
+  info("Opening inspector with gDevTools.");
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "inspector",
+  });
+  const inspector = toolbox.getCurrentPanel();
+
+  ok(true, "Inspector started, and notification received.");
+  ok(inspector, "Inspector instance is accessible.");
+
+  await selectNode("p", inspector);
+  await testMarkupView("p", inspector);
+  await testBreadcrumbs("p", inspector);
+
+  await scrollContentPageNodeIntoView(gBrowser.selectedBrowser, "span");
+
+  await selectNode("span", inspector);
+  await testMarkupView("span", inspector);
+  await testBreadcrumbs("span", inspector);
+
+  info("Destroying toolbox");
+  await toolbox.destroy();
+
+  ok(true, "'destroyed' notification received.");
+  const toolboxForTab = gDevTools.getToolboxForTab(tab);
+  ok(!toolboxForTab, "Toolbox destroyed.");
+}
+
+async function testContextMenuInitialization() {
+  info("Opening inspector by clicking on 'Inspect Element' context menu item");
+  await clickOnInspectMenuItem("#salutation");
+
+  info("Checking inspector state.");
+  await testMarkupView("#salutation");
+  await testBreadcrumbs("#salutation");
+}
+
+async function testContextMenuInspectorAlreadyOpen() {
+  info("Changing node by clicking on 'Inspect Element' context menu item");
+
+  const inspector = getActiveInspector();
+  ok(inspector, "Inspector is active");
+
+  await clickOnInspectMenuItem("#closing");
+
+  ok(true, "Inspector was updated when 'Inspect Element' was clicked.");
+  await testMarkupView("#closing", inspector);
+  await testBreadcrumbs("#closing", inspector);
+}
+
+async function testMarkupView(selector, inspector) {
+  if (!inspector) {
+    inspector = getActiveInspector();
+  }
+  const nodeFront = await getNodeFront(selector, inspector);
+  try {
+    is(
+      inspector.selection.nodeFront,
+      nodeFront,
+      "Right node is selected in the markup view"
+    );
+  } catch (ex) {
+    ok(false, "Got exception while resolving selected node of markup view.");
+    console.error(ex);
+  }
+}
+
+async function testBreadcrumbs(selector, inspector) {
+  if (!inspector) {
+    inspector = getActiveInspector();
+  }
+  const nodeFront = await getNodeFront(selector, inspector);
+
+  const b = inspector.breadcrumbs;
+  const expectedText = b.prettyPrintNodeAsText(nodeFront);
+  const button = b.container.querySelector("button[checked=true]");
+  ok(button, "A crumbs is checked=true");
+  is(
+    button.getAttribute("title"),
+    expectedText,
+    "Crumb refers to the right node"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_inspect-object-element.js b/devtools/client/inspector/test/browser_inspector_inspect-object-element.js
new file mode 100644
index 0000000000..9ae870185d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect-object-element.js
@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// A regression test for bug 665880 to make sure elements inside <object> can
+// be inspected without exceptions.
+
+const TEST_URI =
+  "data:text/html;charset=utf-8," +
+  "<object><p>browser_inspector_inspect-object-element.js</p></object>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  await selectNode("object", inspector);
+
+  ok(true, "Selected <object> without throwing");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js b/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js
new file mode 100644
index 0000000000..6798c85394
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js
@@ -0,0 +1,168 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Fix blank inspector bug when opening DevTools on a webpage with a document
+// where document.write is called without ever calling document.close.
+// Such a document remains forever in the "loading" readyState. See Bug 1765760.
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <!DOCTYPE html>
+  <html lang="en">
+    <body>
+      <div id=outsideframe></div>
+      <script type="text/javascript">
+        const iframe = document.createElement("iframe");
+        iframe.src = "about:blank";
+        iframe.addEventListener('load', () => {
+          iframe.contentDocument.write('<div id=inframe>inframe</div>');
+        }, true);
+        document.body.appendChild(iframe);
+      </script>
+    </body>
+  </html>
+`);
+
+add_task(async function testSlowLoadingFrame() {
+  const loadingTab = BrowserTestUtils.addTab(gBrowser, TEST_URL);
+  gBrowser.selectedTab = loadingTab;
+
+  // Note: we cannot use `await addTab` here because the iframe never finishes
+  // loading. But we still want to wait for the frame to reach the loading state
+  // and to display a test element so that we can reproduce the initial issue
+  // fixed by Bug 1765760.
+  info("Wait for the loading iframe to be ready to test");
+  await TestUtils.waitForCondition(async () => {
+    try {
+      return await ContentTask.spawn(gBrowser.selectedBrowser, {}, () => {
+        const iframe = content.document.querySelector("iframe");
+        return (
+          iframe?.contentDocument.readyState === "loading" &&
+          iframe.contentDocument.getElementById("inframe")
+        );
+      });
+    } catch (e) {
+      return false;
+    }
+  });
+
+  const { inspector } = await openInspector();
+
+  info("Check the markup view displays the loading iframe successfully");
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="outsideframe"
+      script!ignore-children
+      iframe
+        #document
+          html
+            head
+            body
+              div id="inframe"`,
+    "body",
+    inspector
+  );
+});
+
+add_task(async function testSlowLoadingDocument() {
+  info("Create a test server serving a slow document");
+  const httpServer = createTestHTTPServer();
+  httpServer.registerContentType("html", "text/html");
+
+  // This promise allows to block serving the complete document from the test.
+  let unblockRequest;
+  const onRequestUnblocked = new Promise(r => (unblockRequest = r));
+
+  httpServer.registerPathHandler(`/`, async function (request, response) {
+    response.processAsync();
+    response.setStatusLine(request.httpVersion, 200, "OK");
+
+    // Split the page content in 2 parts:
+    // - opening body tag and the "#start" div will be returned immediately
+    // - "#end" div and closing body tag are blocked on a promise.
+    const page_start = "<body><div id='start'>start</div>";
+    const page_end = "<div id='end'>end</div></body>";
+    const page = page_start + page_end;
+
+    response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+    response.setHeader("Content-Length", page.length + "", false);
+    response.write(page_start);
+
+    await onRequestUnblocked;
+
+    response.write(page_end);
+    response.finish();
+  });
+
+  const port = httpServer.identity.primaryPort;
+  const TEST_URL_2 = `http://localhost:${port}/`;
+
+  // Same as in the other task, we cannot wait for the full load.
+  info("Open a new tab on TEST_URL_2 and select it");
+  const loadingTab = BrowserTestUtils.addTab(gBrowser, TEST_URL_2);
+  gBrowser.selectedTab = loadingTab;
+
+  info("Wait for the #start div to be available in the document");
+  await TestUtils.waitForCondition(async () => {
+    try {
+      return await ContentTask.spawn(gBrowser.selectedBrowser, {}, () =>
+        content.document.getElementById("start")
+      );
+    } catch (e) {
+      return false;
+    }
+  });
+
+  const { inspector } = await openInspector();
+
+  info("Check that the inspector is not blank and only shows the #start div");
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="start"`,
+    "body",
+    inspector
+  );
+
+  // Navigate to about:blank to clean the state.
+  await navigateTo("about:blank");
+
+  await navigateTo(TEST_URL_2, { waitForLoad: false });
+  info("Wait for the #start div to be available as a markupview container");
+  await TestUtils.waitForCondition(async () => {
+    const nodeFront = await getNodeFront("#start", inspector);
+    return nodeFront && getContainerForNodeFront(nodeFront, inspector);
+  });
+
+  info("Check that the inspector is not blank and only shows the #start div");
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="start"`,
+    "body",
+    inspector
+  );
+
+  info("Unblock the document request");
+  unblockRequest();
+
+  info("Wait for the #end div to be available as a markupview container");
+  await TestUtils.waitForCondition(async () => {
+    const nodeFront = await getNodeFront("#end", inspector);
+    return nodeFront && getContainerForNodeFront(nodeFront, inspector);
+  });
+
+  info("Check that the inspector will ultimately show the #end div");
+  await assertMarkupViewAsTree(
+    `
+    body
+      div id="start"
+      div id="end"`,
+    "body",
+    inspector
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_mutated_node.js b/devtools/client/inspector/test/browser_inspector_inspect_mutated_node.js
new file mode 100644
index 0000000000..f43fc0bf6f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_mutated_node.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that Inspect Element works even if the selector of the inspected
+// element changes after opening the context menu.
+// For this test, we explicitly move the element when opening the context menu.
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+
+  <div id="parent-1">
+    <span>Inspect me</span>
+  </div>
+  <div id="parent-2"></div>
+  <div id="changing-id">My ID will change</div>
+
+  <script type="text/javascript">
+    document.querySelector("span").addEventListener("contextmenu", () => {
+      // Right after opening the context menu, move the target element in the
+      // tree to change its selector.
+      window.setTimeout(() => {
+        const span = document.querySelector("span");
+        document.getElementById("parent-2").appendChild(span);
+      }, 0)
+    });
+
+    document.querySelector("#changing-id").addEventListener("contextmenu", () => {
+      // Right after opening the context menu, update the id of #changing-id
+      // to make sure we are not relying on outdated selectors to find the node
+      window.setTimeout(() => {
+        document.querySelector("#changing-id").id= "new-id";
+      }, 0)
+    });
+  </script>
+`);
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  await testNodeWithChangingPath();
+  await testNodeWithChangingId();
+});
+
+async function testNodeWithChangingPath() {
+  info("Test that inspect element works if the CSS path changes");
+  const inspector = await clickOnInspectMenuItem("span");
+
+  const selectedNode = inspector.selection.nodeFront;
+  ok(selectedNode, "A node is selected in the inspector");
+  is(
+    selectedNode.tagName.toLowerCase(),
+    "span",
+    "The selected node is correct"
+  );
+  const parentNode = await selectedNode.parentNode();
+  is(
+    parentNode.id,
+    "parent-2",
+    "The selected node is under the expected parent node"
+  );
+}
+
+async function testNodeWithChangingId() {
+  info("Test that inspect element works if the id changes");
+  const inspector = await clickOnInspectMenuItem("#changing-id");
+
+  const selectedNode = inspector.selection.nodeFront;
+  ok(selectedNode, "A node is selected in the inspector");
+  is(selectedNode.id.toLowerCase(), "new-id", "The selected node is correct");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js
new file mode 100644
index 0000000000..b21141b10a
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js
@@ -0,0 +1,140 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Tests for inspecting iframes and frames in browser context menu
+const IFRAME_URI = `data:text/html;charset=utf-8,${encodeURI(
+  `<div id="in-iframe">div in the iframe</div>`
+)}`;
+const TEST_IFRAME_DOC_URI = `data:text/html;charset=utf-8,${encodeURI(`
+  <div id="salutation">Salution in top document</div>
+  <iframe src="${IFRAME_URI}"></iframe>`)}`;
+
+// <frameset> acts as the body element, so we can't use them in a document with other elements
+// and have to set a dedicated document so we can test them.
+const SAME_ORIGIN_FRAME_URI = `https://example.com/document-builder.sjs?html=<h2 id=in-same-origin-frame>h2 in the same origin frame</h2>`;
+const REMOTE_ORIGIN_FRAME_URI = `https://example.org/document-builder.sjs?html=<h3 id=in-remote-frame>h3 in the remote frame</h3>`;
+const TEST_FRAME_DOC_URI = `https://example.com/document-builder.sjs?html=${encodeURI(`
+  <frameset cols="50%,50%">
+    <frame class=same-origin src="${SAME_ORIGIN_FRAME_URI}"></frame>
+    <frame class=remote src="${REMOTE_ORIGIN_FRAME_URI}"></frame>
+  </frameset>`)}`;
+
+add_task(async function () {
+  await pushPref("devtools.command-button-frames.enabled", true);
+  await addTab(TEST_IFRAME_DOC_URI);
+  info(
+    "Test inspecting element in <iframe> with top document selected in the frame picker"
+  );
+  await testContextMenuWithinFrame({
+    selector: ["iframe", "#in-iframe"],
+    nodeFrontGetter: inspector =>
+      getNodeFrontInFrames(["iframe", "#in-iframe"], inspector),
+  });
+
+  info(
+    "Test inspecting element in <iframe> with iframe document selected in the frame picker"
+  );
+  await changeToolboxToFrame(IFRAME_URI, 2);
+  await testContextMenuWithinFrame({
+    selector: ["iframe", "#in-iframe"],
+    nodeFrontGetter: inspector => getNodeFront("#in-iframe", inspector),
+  });
+  await changeToolboxToFrame(TEST_IFRAME_DOC_URI, 2);
+
+  await navigateTo(TEST_FRAME_DOC_URI);
+
+  info(
+    "Test inspecting element in same origin <frame> with top document selected in the frame picker"
+  );
+  await testContextMenuWithinFrame({
+    selector: ["frame.same-origin", "#in-same-origin-frame"],
+    nodeFrontGetter: inspector =>
+      getNodeFrontInFrames(
+        ["frame.same-origin", "#in-same-origin-frame"],
+        inspector
+      ),
+  });
+
+  info(
+    "Test inspecting element in remote <frame> with top document selected in the frame picker"
+  );
+  await testContextMenuWithinFrame({
+    selector: ["frame.remote", "#in-remote-frame"],
+    nodeFrontGetter: inspector =>
+      getNodeFrontInFrames(["frame.remote", "#in-remote-frame"], inspector),
+  });
+
+  info(
+    "Test inspecting element in <frame> with frame document selected in the frame picker"
+  );
+  await changeToolboxToFrame(SAME_ORIGIN_FRAME_URI, 3);
+  await testContextMenuWithinFrame({
+    selector: ["frame.same-origin", "#in-same-origin-frame"],
+    nodeFrontGetter: inspector =>
+      getNodeFront("#in-same-origin-frame", inspector),
+  });
+});
+
+/**
+ * Pick a given element on the page with the 'Inspect Element' context menu entry and check
+ * that the expected node is selected in the markup view.
+ *
+ * @param {Object} options
+ * @param {Array<String>} options.selector: The selector of the element in the frame we
+ *                        want to select
+ * @param {Function} options.nodeFrontGetter: A function that will be executed to retrieve
+ *                   the nodeFront that should be selected as a result of the 'Inspect Element' action.
+ */
+async function testContextMenuWithinFrame({ selector, nodeFrontGetter }) {
+  info(
+    `Opening inspector via 'Inspect Element' context menu on ${JSON.stringify(
+      selector
+    )}`
+  );
+  await clickOnInspectMenuItem(selector);
+
+  info("Checking inspector state.");
+  const inspector = getActiveInspector();
+  const nodeFront = await nodeFrontGetter(inspector);
+
+  is(
+    inspector.selection.nodeFront,
+    nodeFront,
+    "Right node is selected in the markup view"
+  );
+}
+
+/**
+ * Select a specific document in the toolbox frame picker
+ *
+ * @param {String} frameUrl: The frame URL to select
+ * @param {Number} expectedFramesCount: The number of frames that should be displayed in
+ *                 the frame picker
+ */
+async function changeToolboxToFrame(frameUrl, expectedFramesCount) {
+  const { toolbox } = getActiveInspector();
+
+  const btn = toolbox.doc.getElementById("command-button-frames");
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  btn.click();
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  info("Select the iframe in the frame list.");
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const frames = Array.from(menuList.querySelectorAll(".command"));
+  is(frames.length, expectedFramesCount, "Two frames shown in the switcher");
+
+  const innerFrameButton = frames.find(
+    frame => frame.querySelector(".label").textContent === frameUrl
+  );
+  ok(innerFrameButton, `Found frame button for inner frame "${frameUrl}"`);
+
+  const newRoot = toolbox.getPanel("inspector").once("new-root");
+  info(`Switch toolbox to inner frame "${frameUrl}"`);
+  innerFrameButton.click();
+  await newRoot;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu_nested.js b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu_nested.js
new file mode 100644
index 0000000000..d172d03e10
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu_nested.js
@@ -0,0 +1,152 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test Inspect Element feature with nested iframes of different origins.
+// root (example.net)
+//   remote_frame1 (example.com)
+//     nested_same_process_frame (example.com, same as parent)
+//   same_process_frame (example.net, same as root)
+//   remote_frame2 (example.org)
+//     nested_remote_frame (example.com)
+
+// Build the remote_frame1 hierarchy
+const NESTED_SAME_PROCESS_FRAME_URI =
+  "https://example.com/document-builder.sjs?html=" +
+  encodeURI(
+    `<div id="in-nested_same_process_frame">in-nested_same_process_frame`
+  );
+const REMOTE_FRAME1_HTML = `<iframe id="nested_same_process_frame" src="${NESTED_SAME_PROCESS_FRAME_URI}"></iframe>`;
+const REMOTE_FRAME1_URI =
+  "https://example.com/document-builder.sjs?html=" +
+  encodeURI(REMOTE_FRAME1_HTML);
+
+// Build the same_process_frame hierarchy
+const SAME_PROCESS_FRAME_URI =
+  "https://example.net/document-builder.sjs?html=" +
+  encodeURI(`<div id="in-same_process_frame">in-same_process_frame`);
+
+// Build the remote_frame2 hierarchy
+const NESTED_REMOTE_FRAME_URI =
+  "https://example.com/document-builder.sjs?html=" +
+  encodeURI(`<div id="in-nested_remote_frame">in-nested_remote_frame`);
+const REMOTE_FRAME2_HTML = `<iframe id="nested_remote_frame" src="${NESTED_REMOTE_FRAME_URI}"></iframe>`;
+const REMOTE_FRAME2_URI =
+  "https://example.org/document-builder.sjs?html=" +
+  encodeURI(REMOTE_FRAME2_HTML);
+
+// Assemble all frames in a single test page.
+const HTML = `
+  <iframe id="remote_frame1" src="${REMOTE_FRAME1_URI}"></iframe>
+  <iframe id="same_process_frame" src="${SAME_PROCESS_FRAME_URI}"></iframe>
+  <iframe id="remote_frame2" src="${REMOTE_FRAME2_URI}"></iframe>
+`;
+const TEST_URI =
+  "https://example.net/document-builder.sjs?html=" + encodeURI(HTML);
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+
+  info("Retrieve the browsing context for nested_same_process_frame");
+  const nestedSameProcessFrameBC = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    function () {
+      const remote_frame1 = content.document.getElementById("remote_frame1");
+      return SpecialPowers.spawn(remote_frame1, [], function () {
+        return content.document.getElementById(
+          "nested_same_process_frame"
+        ).browsingContext;
+      });
+    }
+  );
+  await inspectElementInBrowsingContext(
+    nestedSameProcessFrameBC,
+    "#in-nested_same_process_frame"
+  );
+  checkSelectedNode("in-nested_same_process_frame");
+
+  info("Retrieve the browsing context for same_process_frame");
+  const sameProcessFrameBC = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    function () {
+      return content.document.getElementById("same_process_frame")
+        .browsingContext;
+    }
+  );
+  await inspectElementInBrowsingContext(
+    sameProcessFrameBC,
+    "#in-same_process_frame"
+  );
+  checkSelectedNode("in-same_process_frame");
+
+  info("Retrieve the browsing context for nested_remote_frame");
+  const nestedRemoteFrameBC = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    function () {
+      const remote_frame2 = content.document.getElementById("remote_frame2");
+      return SpecialPowers.spawn(remote_frame2, [], function () {
+        return content.document.getElementById(
+          "nested_remote_frame"
+        ).browsingContext;
+      });
+    }
+  );
+  await inspectElementInBrowsingContext(
+    nestedRemoteFrameBC,
+    "#in-nested_remote_frame"
+  );
+  checkSelectedNode("in-nested_remote_frame");
+});
+
+/**
+ * Check the id of currently selected node front in the inspector.
+ */
+function checkSelectedNode(id) {
+  const inspector = getActiveInspector();
+  is(
+    inspector.selection.nodeFront.id,
+    id,
+    "The correct node is selected in the markup view"
+  );
+}
+
+/**
+ * Use inspect element on the element matching the provided selector in a given
+ * browsing context.
+ *
+ * Note: adapted from head.js `clickOnInspectMenuItem` in order to work with a
+ * browsingContext instead of a test actor.
+ */
+async function inspectElementInBrowsingContext(browsingContext, selector) {
+  info(
+    `Show the context menu for selector "${selector}" in browsing context ${browsingContext.id}`
+  );
+  const contentAreaContextMenu = document.querySelector(
+    "#contentAreaContextMenu"
+  );
+  const contextOpened = once(contentAreaContextMenu, "popupshown");
+
+  const options = { type: "contextmenu", button: 2 };
+  await BrowserTestUtils.synthesizeMouse(
+    selector,
+    0,
+    0,
+    options,
+    browsingContext
+  );
+
+  await contextOpened;
+
+  info("Triggering the inspect action");
+  await gContextMenu.inspectNode();
+
+  info("Hiding the menu");
+  const contextClosed = once(contentAreaContextMenu, "popuphidden");
+  contentAreaContextMenu.hidePopup();
+  await contextClosed;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_parent_process_page.js b/devtools/client/inspector/test/browser_inspector_inspect_parent_process_page.js
new file mode 100644
index 0000000000..79e1907152
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_parent_process_page.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the "inspect element" context menu item works for parent process
+// chrome pages.
+add_task(async function () {
+  const tab = await addTab("about:debugging");
+
+  const browser = tab.linkedBrowser;
+  const document = browser.contentDocument;
+
+  info("Wait until Connect page is displayed");
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
+  const inspector = await clickOnInspectMenuItem(".qa-network-form-input");
+
+  const selectedNode = inspector.selection.nodeFront;
+  ok(selectedNode, "A node is selected in the inspector");
+  is(
+    selectedNode.tagName.toLowerCase(),
+    "input",
+    "The selected node has the correct tagName"
+  );
+  ok(
+    selectedNode.className.includes("qa-network-form-input"),
+    "The selected node has the expected className"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_invalidate.js b/devtools/client/inspector/test/browser_inspector_invalidate.js
new file mode 100644
index 0000000000..8d48d2bfc1
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_invalidate.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that highlighter handles geometry changes correctly.
+
+const TEST_URI =
+  "data:text/html;charset=utf-8," +
+  "browser_inspector_invalidate.js\n" +
+  '<div style="width: 100px; height: 100px; background:yellow;"></div>';
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+  const divFront = await getNodeFront("div", inspector);
+
+  info("Waiting for highlighter to activate");
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    divFront
+  );
+
+  let rect = await highlighterTestFront.getSimpleBorderRect();
+  is(rect.width, 100, "The highlighter has the right width.");
+
+  info(
+    "Changing the test element's size and waiting for the highlighter " +
+      "to update"
+  );
+  await highlighterTestFront.changeHighlightedNodeWaitForUpdate(
+    "style",
+    "width: 200px; height: 100px; background:yellow;"
+  );
+
+  rect = await highlighterTestFront.getSimpleBorderRect();
+  is(rect.width, 200, "The highlighter has the right width after update");
+
+  info("Waiting for highlighter to hide");
+  await inspector.highlighters.hideHighlighterType(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts-copy-outerhtml.js b/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts-copy-outerhtml.js
new file mode 100644
index 0000000000..6e64579269
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts-copy-outerhtml.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test copy outer HTML from the keyboard/copy event
+
+const TEST_URL = URL_ROOT + "doc_inspector_outerhtml.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const root = inspector.markup._elt;
+
+  info("Test copy outerHTML for COMMENT node");
+  const comment = getElementByType(inspector, Node.COMMENT_NODE);
+  await setSelectionNodeFront(comment, inspector);
+  await checkClipboard("<!-- Comment -->", root);
+
+  info("Test copy outerHTML for DOCTYPE node");
+  const doctype = getElementByType(inspector, Node.DOCUMENT_TYPE_NODE);
+  await setSelectionNodeFront(doctype, inspector);
+  await checkClipboard("<!DOCTYPE html>", root);
+
+  info("Test copy outerHTML for ELEMENT node");
+  await selectAndHighlightNode("div", inspector);
+  await checkClipboard("<div><p>Test copy OuterHTML</p></div>", root);
+});
+
+async function setSelectionNodeFront(node, inspector) {
+  const updated = inspector.once("inspector-updated");
+  inspector.selection.setNodeFront(node);
+  await updated;
+}
+
+async function checkClipboard(expectedText, node) {
+  try {
+    await waitForClipboardPromise(() => fireCopyEvent(node), expectedText);
+    ok(true, "Clipboard successfully filled with : " + expectedText);
+  } catch (e) {
+    ok(
+      false,
+      "Clipboard could not be filled with the expected text : " + expectedText
+    );
+  }
+}
+
+function getElementByType(inspector, type) {
+  for (const [node] of inspector.markup._containers) {
+    if (node.nodeType === type) {
+      return node;
+    }
+  }
+  return null;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts.js b/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts.js
new file mode 100644
index 0000000000..d4e1ee5631
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Tests that the keybindings for highlighting different elements work as
+// intended.
+
+const TEST_URI =
+  "data:text/html;charset=utf-8," +
+  "<html><head><title>Test for the highlighter keybindings</title></head>" +
+  "<body><p><strong>Greetings, earthlings!</strong>" +
+  " I come in peace.</p></body></html>";
+
+const TEST_DATA = [
+  { key: "KEY_ArrowLeft", selectedNode: "p" },
+  { key: "KEY_ArrowLeft", selectedNode: "body" },
+  { key: "KEY_ArrowLeft", selectedNode: "html" },
+  { key: "KEY_ArrowRight", selectedNode: "body" },
+  { key: "KEY_ArrowRight", selectedNode: "p" },
+  { key: "KEY_ArrowRight", selectedNode: "strong" },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  info("Selecting the deepest element to start with");
+  await selectNode("strong", inspector);
+
+  const nodeFront = await getNodeFront("strong", inspector);
+  is(
+    inspector.selection.nodeFront,
+    nodeFront,
+    "<strong> should be selected initially"
+  );
+
+  info("Focusing the currently active breadcrumb button");
+  const bc = inspector.breadcrumbs;
+  bc.nodeHierarchy[bc.currentIndex].button.focus();
+
+  for (const { key, selectedNode } of TEST_DATA) {
+    info("Pressing " + key + " to select " + selectedNode);
+
+    const updated = inspector.once("inspector-updated");
+    EventUtils.synthesizeKey(key);
+    await updated;
+
+    const selectedNodeFront = await getNodeFront(selectedNode, inspector);
+    is(
+      inspector.selection.nodeFront,
+      selectedNodeFront,
+      selectedNode + " is selected."
+    );
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js b/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js
new file mode 100644
index 0000000000..9ac925db6e
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js
@@ -0,0 +1,388 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that context menu items are enabled / disabled correctly.
+
+const TEST_URL = URL_ROOT + "doc_inspector_menu.html";
+
+const PASTE_MENU_ITEMS = [
+  "node-menu-pasteinnerhtml",
+  "node-menu-pasteouterhtml",
+  "node-menu-pastebefore",
+  "node-menu-pasteafter",
+  "node-menu-pastefirstchild",
+  "node-menu-pastelastchild",
+];
+
+const ACTIVE_ON_DOCTYPE_ITEMS = [
+  "node-menu-showdomproperties",
+  "node-menu-useinconsole",
+];
+
+const ACTIVE_ON_SHADOW_ROOT_ITEMS = [
+  "node-menu-pasteinnerhtml",
+  "node-menu-copyinner",
+  "node-menu-edithtml",
+].concat(ACTIVE_ON_DOCTYPE_ITEMS);
+
+const ALL_MENU_ITEMS = [
+  "node-menu-edithtml",
+  "node-menu-copyinner",
+  "node-menu-copyouter",
+  "node-menu-copyuniqueselector",
+  "node-menu-copycsspath",
+  "node-menu-copyxpath",
+  "node-menu-copyimagedatauri",
+  "node-menu-delete",
+  "node-menu-pseudo-hover",
+  "node-menu-pseudo-active",
+  "node-menu-pseudo-focus",
+  "node-menu-pseudo-focus-within",
+  "node-menu-scrollnodeintoview",
+  "node-menu-screenshotnode",
+  "node-menu-add-attribute",
+  "node-menu-copy-attribute",
+  "node-menu-edit-attribute",
+  "node-menu-remove-attribute",
+].concat(PASTE_MENU_ITEMS, ACTIVE_ON_DOCTYPE_ITEMS);
+
+const INACTIVE_ON_DOCTYPE_ITEMS = ALL_MENU_ITEMS.filter(
+  item => !ACTIVE_ON_DOCTYPE_ITEMS.includes(item)
+);
+
+const INACTIVE_ON_DOCUMENT_ITEMS = INACTIVE_ON_DOCTYPE_ITEMS;
+
+const INACTIVE_ON_SHADOW_ROOT_ITEMS = ALL_MENU_ITEMS.filter(
+  item => !ACTIVE_ON_SHADOW_ROOT_ITEMS.includes(item)
+);
+
+/**
+ * Test cases, each item of this array may define the following properties:
+ *   desc: string that will be logged
+ *   selector: selector of the node to be selected
+ *   disabled: items that should have disabled state
+ *   clipboardData: clipboard content
+ *   clipboardDataType: clipboard content type
+ *   attributeTrigger: attribute that will be used as context menu trigger
+ *   shadowRoot: if true, selects the shadow root from the node, rather than
+ *   the node itself.
+ */
+const TEST_CASES = [
+  {
+    desc: "doctype node with empty clipboard",
+    selector: null,
+    disabled: INACTIVE_ON_DOCTYPE_ITEMS,
+  },
+  {
+    desc: "doctype node with html on clipboard",
+    clipboardData: "<p>some text</p>",
+    clipboardDataType: "text",
+    selector: null,
+    disabled: INACTIVE_ON_DOCTYPE_ITEMS,
+  },
+  {
+    desc: "element node HTML on the clipboard",
+    clipboardData: "<p>some text</p>",
+    clipboardDataType: "text",
+    disabled: [
+      "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ],
+    selector: "#sensitivity",
+  },
+  {
+    desc: "<html> element",
+    clipboardData: "<p>some text</p>",
+    clipboardDataType: "text",
+    selector: "html",
+    disabled: [
+      "node-menu-copyimagedatauri",
+      "node-menu-pastebefore",
+      "node-menu-pasteafter",
+      "node-menu-pastefirstchild",
+      "node-menu-pastelastchild",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+      "node-menu-delete",
+    ],
+  },
+  {
+    desc: "<body> with HTML on clipboard",
+    clipboardData: "<p>some text</p>",
+    clipboardDataType: "text",
+    selector: "body",
+    disabled: [
+      "node-menu-copyimagedatauri",
+      "node-menu-pastebefore",
+      "node-menu-pasteafter",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ],
+  },
+  {
+    desc: "<img> with HTML on clipboard",
+    clipboardData: "<p>some text</p>",
+    clipboardDataType: "text",
+    selector: "img",
+    disabled: [
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ],
+  },
+  {
+    desc: "<head> with HTML on clipboard",
+    clipboardData: "<p>some text</p>",
+    clipboardDataType: "text",
+    selector: "head",
+    disabled: [
+      "node-menu-copyimagedatauri",
+      "node-menu-pastebefore",
+      "node-menu-pasteafter",
+      "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ],
+  },
+  {
+    desc: "<head> with no html on clipboard",
+    selector: "head",
+    disabled: PASTE_MENU_ITEMS.concat([
+      "node-menu-copyimagedatauri",
+      "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ]),
+  },
+  {
+    desc: "<element> with text on clipboard",
+    clipboardData: "some text",
+    clipboardDataType: "text",
+    selector: "#paste-area",
+    disabled: [
+      "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ],
+  },
+  {
+    desc: "<element> with base64 encoded image data uri on clipboard",
+    clipboardData:
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABC" +
+      "AAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==",
+    clipboardDataType: "image",
+    selector: "#paste-area",
+    disabled: PASTE_MENU_ITEMS.concat([
+      "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ]),
+  },
+  {
+    desc: "<element> with empty string on clipboard",
+    clipboardData: "",
+    clipboardDataType: "text",
+    selector: "#paste-area",
+    disabled: PASTE_MENU_ITEMS.concat([
+      "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ]),
+  },
+  {
+    desc: "<element> with whitespace only on clipboard",
+    clipboardData: " \n\n\t\n\n  \n",
+    clipboardDataType: "text",
+    selector: "#paste-area",
+    disabled: PASTE_MENU_ITEMS.concat([
+      "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ]),
+  },
+  {
+    desc: "<element> that isn't visible on the page, empty clipboard",
+    selector: "#hiddenElement",
+    disabled: PASTE_MENU_ITEMS.concat([
+      "node-menu-copyimagedatauri",
+      "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ]),
+  },
+  {
+    desc: "<element> nested in another hidden element, empty clipboard",
+    selector: "#nestedHiddenElement",
+    disabled: PASTE_MENU_ITEMS.concat([
+      "node-menu-copyimagedatauri",
+      "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
+      "node-menu-edit-attribute",
+      "node-menu-remove-attribute",
+    ]),
+  },
+  {
+    desc: "<element> with context menu triggered on attribute, empty clipboard",
+    selector: "#attributes",
+    disabled: PASTE_MENU_ITEMS.concat(["node-menu-copyimagedatauri"]),
+    attributeTrigger: "data-edit",
+  },
+  {
+    desc: "Shadow Root",
+    clipboardData: "<p>some text</p>",
+    clipboardDataType: "text",
+    disabled: INACTIVE_ON_SHADOW_ROOT_ITEMS,
+    selector: "#host",
+    shadowRoot: true,
+  },
+  {
+    desc: "Document node in iFrame",
+    disabled: INACTIVE_ON_DOCUMENT_ITEMS,
+    selector: "iframe",
+    documentNode: true,
+  },
+];
+
+var clipboard = require("resource://devtools/shared/platform/clipboard.js");
+registerCleanupFunction(() => {
+  clipboard.copyString("");
+  clipboard = null;
+});
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  for (const test of TEST_CASES) {
+    const {
+      desc,
+      disabled,
+      selector,
+      attributeTrigger,
+      documentNode = false,
+      shadowRoot = false,
+    } = test;
+
+    info(`Test ${desc}`);
+    setupClipboard(test.clipboardData, test.clipboardDataType);
+
+    const front = await getNodeFrontForSelector(
+      selector,
+      inspector,
+      documentNode,
+      shadowRoot
+    );
+
+    info("Selecting the specified node.");
+    await selectNode(front, inspector);
+
+    info("Simulating context menu click on the selected node container.");
+    const nodeFrontContainer = getContainerForNodeFront(front, inspector);
+    const contextMenuTrigger = attributeTrigger
+      ? nodeFrontContainer.tagLine.querySelector(
+          `[data-attr="${attributeTrigger}"]`
+        )
+      : nodeFrontContainer.tagLine;
+
+    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+      target: contextMenuTrigger,
+    });
+
+    for (const id of ALL_MENU_ITEMS) {
+      const menuItem = allMenuItems.find(item => item.id === id);
+      const shouldBeDisabled = disabled.includes(id);
+      const shouldBeDisabledText = shouldBeDisabled ? "disabled" : "enabled";
+      is(
+        menuItem.disabled,
+        shouldBeDisabled,
+        `#${id} should be ${shouldBeDisabledText} for test case ${desc}`
+      );
+    }
+  }
+});
+
+/**
+ * A helper that fetches a front for a node that matches the given selector or
+ * doctype node if the selector is falsy.
+ */
+async function getNodeFrontForSelector(
+  selector,
+  inspector,
+  documentNode,
+  shadowRoot
+) {
+  if (selector) {
+    info("Retrieving front for selector " + selector);
+    const node = await getNodeFront(selector, inspector);
+    if (shadowRoot) {
+      return getShadowRoot(node, inspector);
+    }
+    if (documentNode) {
+      return getFrameDocument(node, inspector);
+    }
+    return node;
+  }
+
+  info("Retrieving front for doctype node");
+  const { nodes } = await inspector.walker.children(inspector.walker.rootNode);
+  return nodes[0];
+}
+
+/**
+ * A helper that populates the clipboard with data of given type. Clears the
+ * clipboard if data is falsy.
+ */
+function setupClipboard(data, type) {
+  if (!data) {
+    info("Clearing the clipboard.");
+    clipboard.copyString("");
+  } else if (type === "text") {
+    info("Populating clipboard with text.");
+    clipboard.copyString(data);
+  } else if (type === "image") {
+    info("Populating clipboard with image content");
+    copyImageToClipboard(data);
+  }
+}
+
+/**
+ * The code below is a simplified version of the sdk/clipboard helper set() method.
+ */
+function copyImageToClipboard(data) {
+  const imageTools = Cc["@mozilla.org/image/tools;1"].getService(Ci.imgITools);
+
+  // Image data is stored as base64 in the test.
+  const image = atob(data);
+
+  const imgPtr = Cc["@mozilla.org/supports-interface-pointer;1"].createInstance(
+    Ci.nsISupportsInterfacePointer
+  );
+  imgPtr.data = imageTools.decodeImageFromBuffer(
+    image,
+    image.length,
+    "image/png"
+  );
+
+  const xferable = Cc["@mozilla.org/widget/transferable;1"].createInstance(
+    Ci.nsITransferable
+  );
+  xferable.init(null);
+  xferable.addDataFlavor("image/png");
+  xferable.setTransferData("image/png", imgPtr);
+
+  Services.clipboard.setData(
+    xferable,
+    null,
+    Services.clipboard.kGlobalClipboard
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_menu-03-paste-items-svg.js b/devtools/client/inspector/test/browser_inspector_menu-03-paste-items-svg.js
new file mode 100644
index 0000000000..7a69230aef
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_menu-03-paste-items-svg.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that HTML can be pasted in SVG elements.
+
+const TEST_URL = URL_ROOT + "doc_inspector_svg.svg";
+const PASTE_AS_FIRST_CHILD =
+  '<circle xmlns="http://www.w3.org/2000/svg" cx="42" cy="42" r="5"/>';
+const PASTE_AS_LAST_CHILD =
+  '<circle xmlns="http://www.w3.org/2000/svg" cx="42" cy="42" r="15"/>';
+
+add_task(async function () {
+  const clipboard = require("resource://devtools/shared/platform/clipboard.js");
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  const refSelector = "svg";
+  const oldHTML = await getContentPageElementProperty(refSelector, "innerHTML");
+  await selectNode(refSelector, inspector);
+  const markupTagLine = getContainerForSelector(refSelector, inspector).tagLine;
+
+  await pasteContent("node-menu-pastefirstchild", PASTE_AS_FIRST_CHILD);
+  await pasteContent("node-menu-pastelastchild", PASTE_AS_LAST_CHILD);
+
+  const html = await getContentPageElementProperty(refSelector, "innerHTML");
+  const expectedHtml = PASTE_AS_FIRST_CHILD + oldHTML + PASTE_AS_LAST_CHILD;
+  is(html, expectedHtml, "The innerHTML of the SVG node is correct");
+
+  // Helpers
+  async function pasteContent(menuId, clipboardData) {
+    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+      target: markupTagLine,
+    });
+    info(`Testing ${menuId} for ${clipboardData}`);
+
+    await SimpleTest.promiseClipboardChange(clipboardData, () => {
+      clipboard.copyString(clipboardData);
+    });
+
+    const onMutation = inspector.once("markupmutation");
+    allMenuItems.find(item => item.id === menuId).click();
+    info("Waiting for mutation to occur");
+    await onMutation;
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_menu-03-paste-items.js b/devtools/client/inspector/test/browser_inspector_menu-03-paste-items.js
new file mode 100644
index 0000000000..ae59a1c532
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_menu-03-paste-items.js
@@ -0,0 +1,170 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that different paste items work in the context menu
+
+const TEST_URL = URL_ROOT + "doc_inspector_menu.html";
+const PASTE_ADJACENT_HTML_DATA = [
+  {
+    desc: "As First Child",
+    clipboardData: "2",
+    menuId: "node-menu-pastefirstchild",
+  },
+  {
+    desc: "As Last Child",
+    clipboardData: "4",
+    menuId: "node-menu-pastelastchild",
+  },
+  {
+    desc: "Before",
+    clipboardData: "1",
+    menuId: "node-menu-pastebefore",
+  },
+  {
+    desc: "After",
+    clipboardData: "<span>5</span>",
+    menuId: "node-menu-pasteafter",
+  },
+];
+
+var clipboard = require("resource://devtools/shared/platform/clipboard.js");
+registerCleanupFunction(() => {
+  clipboard = null;
+});
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await testPasteOuterHTMLMenu();
+  await testPasteInnerHTMLMenu();
+  await testPasteAdjacentHTMLMenu();
+
+  async function testPasteOuterHTMLMenu() {
+    info("Testing that 'Paste Outer HTML' menu item works.");
+
+    await SimpleTest.promiseClipboardChange(
+      "this was pasted (outerHTML)",
+      () => {
+        clipboard.copyString("this was pasted (outerHTML)");
+      }
+    );
+
+    const outerHTMLSelector = "#paste-area h1";
+
+    const nodeFront = await getNodeFront(outerHTMLSelector, inspector);
+    await selectNode(nodeFront, inspector);
+
+    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+      target: getContainerForNodeFront(nodeFront, inspector).tagLine,
+    });
+
+    const onNodeReselected = inspector.markup.once("reselectedonremoved");
+    allMenuItems.find(item => item.id === "node-menu-pasteouterhtml").click();
+
+    info("Waiting for inspector selection to update");
+    await onNodeReselected;
+
+    const outerHTML = await getContentPageElementProperty("body", "outerHTML");
+    ok(
+      outerHTML.includes(clipboard.getText()),
+      "Clipboard content was pasted into the node's outer HTML."
+    );
+    ok(
+      !(await hasMatchingElementInContentPage(outerHTMLSelector)),
+      "The original node was removed."
+    );
+  }
+
+  async function testPasteInnerHTMLMenu() {
+    info("Testing that 'Paste Inner HTML' menu item works.");
+
+    await SimpleTest.promiseClipboardChange(
+      "this was pasted (innerHTML)",
+      () => {
+        clipboard.copyString("this was pasted (innerHTML)");
+      }
+    );
+    const innerHTMLSelector = "#paste-area .inner";
+    const getInnerHTML = () =>
+      getContentPageElementProperty(innerHTMLSelector, "innerHTML");
+    const origInnerHTML = await getInnerHTML();
+
+    const nodeFront = await getNodeFront(innerHTMLSelector, inspector);
+    await selectNode(nodeFront, inspector);
+
+    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+      target: getContainerForNodeFront(nodeFront, inspector).tagLine,
+    });
+
+    const onMutation = inspector.once("markupmutation");
+    allMenuItems.find(item => item.id === "node-menu-pasteinnerhtml").click();
+    info("Waiting for mutation to occur");
+    await onMutation;
+
+    Assert.strictEqual(
+      await getInnerHTML(),
+      clipboard.getText(),
+      "Clipboard content was pasted into the node's inner HTML."
+    );
+    ok(
+      await hasMatchingElementInContentPage(innerHTMLSelector),
+      "The original node has been preserved."
+    );
+    await undoChange(inspector);
+    Assert.strictEqual(
+      await getInnerHTML(),
+      origInnerHTML,
+      "Previous innerHTML has been restored after undo"
+    );
+  }
+
+  async function testPasteAdjacentHTMLMenu() {
+    const refSelector = "#paste-area .adjacent .ref";
+    const adjacentNodeSelector = "#paste-area .adjacent";
+    const nodeFront = await getNodeFront(refSelector, inspector);
+    await selectNode(nodeFront, inspector);
+    const markupTagLine = getContainerForNodeFront(
+      nodeFront,
+      inspector
+    ).tagLine;
+
+    for (const { clipboardData, menuId } of PASTE_ADJACENT_HTML_DATA) {
+      const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+        target: markupTagLine,
+      });
+      info(`Testing ${menuId} for ${clipboardData}`);
+
+      await SimpleTest.promiseClipboardChange(clipboardData, () => {
+        clipboard.copyString(clipboardData);
+      });
+
+      const onMutation = inspector.once("markupmutation");
+      allMenuItems.find(item => item.id === menuId).click();
+      info("Waiting for mutation to occur");
+      await onMutation;
+    }
+
+    let html = await getContentPageElementProperty(
+      adjacentNodeSelector,
+      "innerHTML"
+    );
+    Assert.strictEqual(
+      html.trim(),
+      '1<span class="ref">234</span><span>5</span>',
+      "The Paste as Last Child / as First Child / Before / After worked as " +
+        "expected"
+    );
+    await undoChange(inspector);
+
+    html = await getContentPageElementProperty(
+      adjacentNodeSelector,
+      "innerHTML"
+    );
+    Assert.strictEqual(
+      html.trim(),
+      '1<span class="ref">234</span>',
+      "Undo works for paste adjacent HTML"
+    );
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js b/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
new file mode 100644
index 0000000000..ac6ae35ad1
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Tests "Use in Console" menu item
+
+const TEST_URL = URL_ROOT + "doc_inspector_menu.html";
+
+add_task(async function () {
+  // Disable eager evaluation to avoid intermittent failures due to pending
+  // requests to evaluateJSAsync.
+  await pushPref("devtools.webconsole.input.eagerEvaluation", false);
+
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Testing 'Use in Console' menu item.");
+
+  await selectNode("#console-var", inspector);
+  const container = await getContainerForSelector("#console-var", inspector);
+  const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+    target: container.tagLine,
+  });
+  const menuItem = allMenuItems.find(i => i.id === "node-menu-useinconsole");
+  menuItem.click();
+
+  await inspector.once("console-var-ready");
+
+  const hud = toolbox.getPanel("webconsole").hud;
+
+  const getConsoleResults = () => hud.ui.outputNode.querySelectorAll(".result");
+
+  is(hud.getInputValue(), "temp0", "first console variable is named temp0");
+  hud.ui.wrapper.dispatchEvaluateExpression();
+
+  await waitUntil(() => getConsoleResults().length === 1);
+  let result = getConsoleResults()[0];
+  ok(
+    result.textContent.includes('<p id="console-var">'),
+    "variable temp0 references correct node"
+  );
+
+  await selectNode("#console-var-multi", inspector);
+  menuItem.click();
+  await inspector.once("console-var-ready");
+
+  is(hud.getInputValue(), "temp1", "second console variable is named temp1");
+  hud.ui.wrapper.dispatchEvaluateExpression();
+
+  await waitUntil(() => getConsoleResults().length === 2);
+  result = getConsoleResults()[1];
+  ok(
+    result.textContent.includes('<p id="console-var-multi">'),
+    "variable temp1 references correct node"
+  );
+
+  hud.ui.wrapper.dispatchClearHistory();
+});
diff --git a/devtools/client/inspector/test/browser_inspector_menu-05-attribute-items.js b/devtools/client/inspector/test/browser_inspector_menu-05-attribute-items.js
new file mode 100644
index 0000000000..4e2122a24a
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_menu-05-attribute-items.js
@@ -0,0 +1,124 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that attribute items work in the context menu
+
+const TEST_URL = URL_ROOT + "doc_inspector_menu.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await selectNode("#attributes", inspector);
+
+  await testAddAttribute();
+  await testCopyAttributeValue();
+  await testCopyLongAttributeValue();
+  await testEditAttribute();
+  await testRemoveAttribute();
+
+  async function testAddAttribute() {
+    info("Triggering 'Add Attribute' and waiting for mutation to occur");
+    const addAttribute = getMenuItem("node-menu-add-attribute");
+    addAttribute.click();
+
+    EventUtils.sendString('class="u-hidden"');
+    const onMutation = inspector.once("markupmutation");
+    EventUtils.synthesizeKey("KEY_Enter");
+    await onMutation;
+
+    const hasAttribute = await hasMatchingElementInContentPage(
+      "#attributes.u-hidden"
+    );
+    ok(hasAttribute, "attribute was successfully added");
+  }
+
+  async function testCopyAttributeValue() {
+    info(
+      "Testing 'Copy Attribute Value' and waiting for clipboard promise to resolve"
+    );
+    const copyAttributeValue = getMenuItem("node-menu-copy-attribute");
+
+    info(
+      "Triggering 'Copy Attribute Value' and waiting for clipboard to copy the value"
+    );
+    inspector.markup.contextMenu.nodeMenuTriggerInfo = {
+      type: "attribute",
+      name: "data-edit",
+      value: "the",
+    };
+
+    await waitForClipboardPromise(() => copyAttributeValue.click(), "the");
+  }
+
+  async function testCopyLongAttributeValue() {
+    info("Testing 'Copy Attribute Value' copies very long attribute values");
+    const copyAttributeValue = getMenuItem("node-menu-copy-attribute");
+    const longAttribute =
+      "#01234567890123456789012345678901234567890123456789" +
+      "12345678901234567890123456789012345678901234567890123456789012345678901" +
+      "23456789012345678901234567890123456789012345678901234567890123456789012" +
+      "34567890123456789012345678901234567890123456789012345678901234567890123";
+
+    inspector.markup.contextMenu.nodeMenuTriggerInfo = {
+      type: "attribute",
+      name: "data-edit",
+      value: longAttribute,
+    };
+
+    await waitForClipboardPromise(
+      () => copyAttributeValue.click(),
+      longAttribute
+    );
+  }
+
+  async function testEditAttribute() {
+    info("Testing 'Edit Attribute' menu item");
+    const editAttribute = getMenuItem("node-menu-edit-attribute");
+
+    info("Triggering 'Edit Attribute' and waiting for mutation to occur");
+    inspector.markup.contextMenu.nodeMenuTriggerInfo = {
+      type: "attribute",
+      name: "data-edit",
+    };
+    editAttribute.click();
+    EventUtils.sendString("data-edit='edited'");
+    const onMutation = inspector.once("markupmutation");
+    EventUtils.synthesizeKey("KEY_Enter");
+    await onMutation;
+
+    const isAttributeChanged = await hasMatchingElementInContentPage(
+      "#attributes[data-edit='edited']"
+    );
+    ok(isAttributeChanged, "attribute was successfully edited");
+  }
+
+  async function testRemoveAttribute() {
+    info("Testing 'Remove Attribute' menu item");
+    const removeAttribute = getMenuItem("node-menu-remove-attribute");
+
+    info("Triggering 'Remove Attribute' and waiting for mutation to occur");
+    inspector.markup.contextMenu.nodeMenuTriggerInfo = {
+      type: "attribute",
+      name: "data-remove",
+    };
+    const onMutation = inspector.once("markupmutation");
+    removeAttribute.click();
+    await onMutation;
+
+    const hasAttribute = await hasMatchingElementInContentPage(
+      "#attributes[data-remove]"
+    );
+    ok(!hasAttribute, "attribute was successfully removed");
+  }
+
+  function getMenuItem(id) {
+    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+      target: getContainerForSelector("#attributes", inspector).tagLine,
+    });
+    const menuItem = allMenuItems.find(i => i.id === id);
+    ok(menuItem, "Menu item '" + id + "' found");
+    // Close the menu so synthesizing future keys won't select menu items.
+    EventUtils.synthesizeKey("KEY_Escape");
+    return menuItem;
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_menu-06-other.js b/devtools/client/inspector/test/browser_inspector_menu-06-other.js
new file mode 100644
index 0000000000..34572cb934
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_menu-06-other.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Tests for menuitem functionality that doesn't fit into any specific category
+const TEST_URL = URL_ROOT + "doc_inspector_menu.html";
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+  await testShowDOMProperties();
+  await testDuplicateNode();
+  await testDeleteNode();
+  await testDeleteTextNode();
+  await testDeleteRootNode();
+  await testScrollIntoView();
+
+  async function testDuplicateNode() {
+    info("Testing 'Duplicate Node' menu item for normal elements.");
+
+    await selectNode(".duplicate", inspector);
+    is(
+      await getNumberOfMatchingElementsInContentPage(".duplicate"),
+      1,
+      "There should initially be 1 .duplicate node"
+    );
+
+    const allMenuItems = openContextMenuAndGetAllItems(inspector);
+    const menuItem = allMenuItems.find(
+      item => item.id === "node-menu-duplicatenode"
+    );
+    ok(menuItem, "'Duplicate node' menu item should exist");
+
+    info("Triggering 'Duplicate Node' and waiting for inspector to update");
+    const updated = inspector.once("markupmutation");
+    menuItem.click();
+    await updated;
+
+    is(
+      await getNumberOfMatchingElementsInContentPage(".duplicate"),
+      2,
+      "The duplicated node should be in the markup."
+    );
+
+    const container = await getContainerForSelector(
+      ".duplicate + .duplicate",
+      inspector
+    );
+    ok(container, "A MarkupContainer should be created for the new node");
+  }
+
+  async function testDeleteNode() {
+    info("Testing 'Delete Node' menu item for normal elements.");
+    await selectNode("#delete", inspector);
+    const allMenuItems = openContextMenuAndGetAllItems(inspector);
+    const deleteNode = allMenuItems.find(
+      item => item.id === "node-menu-delete"
+    );
+    ok(deleteNode, "the popup menu has a delete menu item");
+    const updated = inspector.once("inspector-updated");
+
+    info("Triggering 'Delete Node' and waiting for inspector to update");
+    deleteNode.click();
+    await updated;
+
+    ok(!(await hasMatchingElementInContentPage("#delete")), "Node deleted");
+  }
+
+  async function testDeleteTextNode() {
+    info("Testing 'Delete Node' menu item for text elements.");
+    const { walker } = inspector;
+    const divBefore = await walker.querySelector(
+      walker.rootNode,
+      "#nestedHiddenElement"
+    );
+    const { nodes } = await walker.children(divBefore);
+    await selectNode(nodes[0], inspector, "test-highlight");
+
+    const allMenuItems = openContextMenuAndGetAllItems(inspector);
+    const deleteNode = allMenuItems.find(
+      item => item.id === "node-menu-delete"
+    );
+    ok(deleteNode, "the popup menu has a delete menu item");
+    ok(!deleteNode.disabled, "the delete menu item is not disabled");
+    const updated = inspector.once("inspector-updated");
+
+    info("Triggering 'Delete Node' and waiting for inspector to update");
+    deleteNode.click();
+    await updated;
+
+    const divAfter = await walker.querySelector(
+      walker.rootNode,
+      "#nestedHiddenElement"
+    );
+    const nodesAfter = (await walker.children(divAfter)).nodes;
+    ok(!nodesAfter.length, "the node still had children");
+  }
+
+  async function testDeleteRootNode() {
+    info("Testing 'Delete Node' menu item does not delete root node.");
+    await selectNode("html", inspector);
+
+    const allMenuItems = openContextMenuAndGetAllItems(inspector);
+    const deleteNode = allMenuItems.find(
+      item => item.id === "node-menu-delete"
+    );
+    deleteNode.click();
+
+    await new Promise(resolve => {
+      executeSoon(resolve);
+    });
+
+    const hasDocumentElement = await SpecialPowers.spawn(
+      gBrowser.selectedBrowser,
+      [],
+      () => !!content.document.documentElement
+    );
+    ok(hasDocumentElement, "Document element still alive.");
+  }
+
+  async function testShowDOMProperties() {
+    info("Testing 'Show DOM Properties' menu item.");
+    const allMenuItems = openContextMenuAndGetAllItems(inspector);
+    const showDOMPropertiesNode = allMenuItems.find(
+      item => item.id === "node-menu-showdomproperties"
+    );
+    ok(showDOMPropertiesNode, "the popup menu has a show dom properties item");
+
+    const consoleOpened = toolbox.once("webconsole-ready");
+
+    info("Triggering 'Show DOM Properties' and waiting for inspector open");
+    showDOMPropertiesNode.click();
+    await consoleOpened;
+
+    const webconsoleUI = toolbox.getPanel("webconsole").hud.ui;
+
+    await poll(
+      () => {
+        const messages = [
+          ...webconsoleUI.outputNode.querySelectorAll(".message"),
+        ];
+        const nodeMessage = messages.find(m => m.textContent.includes("body"));
+        // wait for the object to be expanded
+        return (
+          nodeMessage &&
+          nodeMessage.querySelectorAll(".object-inspector .node").length > 10
+        );
+      },
+      "Waiting for the element node to be expanded",
+      10,
+      1000
+    );
+
+    info("Close split console");
+    await toolbox.toggleSplitConsole();
+  }
+
+  function testScrollIntoView() {
+    // Follow up bug to add this test - https://bugzilla.mozilla.org/show_bug.cgi?id=1154107
+    todo(false, "Verify that node is scrolled into the viewport.");
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_navigate_to_errors.js b/devtools/client/inspector/test/browser_inspector_navigate_to_errors.js
new file mode 100644
index 0000000000..7e43c68e17
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_navigate_to_errors.js
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that inspector works when navigating to error pages.
+
+const TEST_URL_1 =
+  'data:text/html,<html><body id="test-doc-1">page</body></html>';
+const TEST_URL_2 = "http://127.0.0.1:36325/";
+const TEST_URL_3 = "https://www.wronguri.wronguri/";
+const TEST_URL_4 = "data:text/html,<html><body>test-doc-4</body></html>";
+
+add_task(async function () {
+  // Open the inspector on a valid URL
+  const { inspector } = await openInspectorForURL(TEST_URL_1);
+
+  info("Navigate to closed port");
+  await navigateTo(TEST_URL_2, { isErrorPage: true });
+
+  const documentURI = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      return content.document.documentURI;
+    }
+  );
+  ok(documentURI.startsWith("about:neterror"), "content is correct.");
+
+  const hasPage = await getNodeFront("#test-doc-1", inspector);
+  ok(
+    !hasPage,
+    "Inspector actor is no longer able to reach previous page DOM node"
+  );
+
+  const hasNetErrorNode = await getNodeFront("#errorShortDesc", inspector);
+  ok(hasNetErrorNode, "Inspector actor is able to reach error page DOM node");
+
+  const bundle = Services.strings.createBundle(
+    "chrome://global/locale/appstrings.properties"
+  );
+  let domain = TEST_URL_2.match(/^http:\/\/(.*)\/$/)[1];
+  let errorMsg = bundle.formatStringFromName("connectionFailure", [domain]);
+  is(
+    await getDisplayedNodeTextContent("#errorShortDesc", inspector),
+    errorMsg,
+    "Inpector really inspects the error page"
+  );
+
+  info("Navigate to unknown domain");
+  await navigateTo(TEST_URL_3, { isErrorPage: true });
+
+  domain = TEST_URL_3.match(/^https:\/\/(.*)\/$/)[1];
+  errorMsg = bundle.formatStringFromName("dnsNotFound2", [domain]);
+  is(
+    await getDisplayedNodeTextContent("#errorShortDesc", inspector),
+    errorMsg,
+    "Inspector really inspects the new error page"
+  );
+
+  info("Navigate to a valid url");
+  await navigateTo(TEST_URL_4);
+
+  is(
+    await getDisplayedNodeTextContent("body", inspector),
+    "test-doc-4",
+    "Inspector really inspects the valid url"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_navigation.js b/devtools/client/inspector/test/browser_inspector_navigation.js
new file mode 100644
index 0000000000..68f1edc4ca
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_navigation.js
@@ -0,0 +1,88 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that inspector updates when page is navigated.
+
+const TEST_URL_FILE =
+  "browser/devtools/client/inspector/test/doc_inspector_breadcrumbs.html";
+
+const TEST_URL_1 = "https://test1.example.org/" + TEST_URL_FILE;
+const TEST_URL_2 = "https://test2.example.org/" + TEST_URL_FILE;
+
+// Bug 1340592: "srcset" attribute causes bfcache events (pageshow/pagehide)
+// with buggy "persisted" values.
+const TEST_URL_3 =
+  "data:text/html;charset=utf-8," +
+  encodeURIComponent('<img src="foo.png" srcset="foo.png 1.5x" />');
+const TEST_URL_4 =
+  "data:text/html;charset=utf-8," + encodeURIComponent("<h1>bar</h1>");
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL_1);
+
+  await selectNode("#i1", inspector);
+
+  info("Navigating to a different page.");
+  await navigateTo(TEST_URL_2);
+
+  ok(true, "New page loaded");
+  await selectNode("#i1", inspector);
+
+  const markuploaded = inspector.once("markuploaded");
+  const onUpdated = inspector.once("inspector-updated");
+
+  info("Going back in history");
+  gBrowser.goBack();
+
+  info("Waiting for markup view to load after going back in history.");
+  await markuploaded;
+
+  info("Check that the inspector updates");
+  await onUpdated;
+
+  ok(true, "Old page loaded");
+  const url = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.location.href
+  );
+  is(url, TEST_URL_1, "URL is correct.");
+
+  await selectNode("#i1", inspector);
+});
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL_3);
+
+  await selectNode("img", inspector);
+
+  info("Navigating to a different page.");
+  await navigateTo(TEST_URL_4);
+
+  ok(true, "New page loaded");
+  await selectNode("#h1", inspector);
+
+  const markuploaded = inspector.once("markuploaded");
+  const onUpdated = inspector.once("inspector-updated");
+
+  info("Going back in history");
+  gBrowser.goBack();
+
+  info("Waiting for markup view to load after going back in history.");
+  await markuploaded;
+
+  info("Check that the inspector updates");
+  await onUpdated;
+
+  ok(true, "Old page loaded");
+  const url = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.location.href
+  );
+  is(url, TEST_URL_3, "URL is correct.");
+
+  await selectNode("img", inspector);
+});
diff --git a/devtools/client/inspector/test/browser_inspector_open_on_neterror.js b/devtools/client/inspector/test/browser_inspector_open_on_neterror.js
new file mode 100644
index 0000000000..96354d3fab
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_open_on_neterror.js
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that inspector works correctly when opened against a net error page
+
+const TEST_URL_1 = "http://127.0.0.1:36325/";
+const TEST_URL_2 = "data:text/html,<html><body>test-doc-2</body></html>";
+
+add_task(async function () {
+  // We cannot directly use addTab here as waiting for error pages requires
+  // a specific code path.
+  gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser, TEST_URL_1);
+  await BrowserTestUtils.waitForErrorPage(gBrowser.selectedBrowser);
+
+  const { inspector } = await openInspector();
+  ok(true, "Inspector loaded on the already opened net error");
+
+  const documentURI = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.document.documentURI
+  );
+  ok(
+    documentURI.startsWith("about:neterror"),
+    "content is really a net error page."
+  );
+
+  const netErrorNode = await getNodeFront(".container", inspector);
+  ok(netErrorNode, "The inspector can get a node front from the neterror page");
+
+  info("Navigate to a valid url");
+  await navigateTo(TEST_URL_2);
+
+  is(
+    await getDisplayedNodeTextContent("body", inspector),
+    "test-doc-2",
+    "Inspector really inspects the valid url"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
new file mode 100644
index 0000000000..e5335c3e93
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the inspector panel has a 3 pane toggle button, and that
+// this button is visible both in BOTTOM and SIDE hosts.
+
+add_task(async function () {
+  info("Switch to 2 pane inspector to test the 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  info("Open the inspector in a bottom toolbox host");
+  const { inspector, toolbox } = await openInspectorForURL(
+    "about:blank",
+    "bottom"
+  );
+
+  const button = inspector.panelDoc.querySelector(".sidebar-toggle");
+  ok(button, "The toggle button exists in the DOM");
+  ok(button.getAttribute("title"), "The title tooltip has initial state");
+  ok(
+    button.classList.contains("pane-collapsed"),
+    "The button is in collapsed state"
+  );
+  ok(!!button.getClientRects().length, "The button is visible");
+
+  info("Switch the host to the right");
+  await toolbox.switchHost("right");
+
+  ok(!!button.getClientRects().length, "The button is still visible");
+  ok(
+    button.classList.contains("pane-collapsed"),
+    "The button is still in collapsed state"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
new file mode 100644
index 0000000000..132f0feb7f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the 3 pane toggle button can toggle on and off the inspector's 3 pane mode,
+// and the 3 panes rendered are all of equal widths in the BOTTOM host.
+
+add_task(async function () {
+  info("Switch to 2 pane inspector to test the 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const { inspector } = await openInspectorForURL("about:blank");
+  const { panelDoc: doc } = inspector;
+  const button = doc.querySelector(".sidebar-toggle");
+  const ruleViewSidebar =
+    inspector.sidebarSplitBoxRef.current.startPanelContainer;
+  const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth;
+
+  ok(
+    button.classList.contains("pane-collapsed"),
+    "The button is in collapsed state"
+  );
+
+  info("Click on the toggle button to toggle ON 3 pane inspector");
+  let onRuleViewAdded = inspector.once("ruleview-added");
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    {},
+    inspector.panelDoc.defaultView
+  );
+  await onRuleViewAdded;
+
+  info("Checking the state of the 3 pane inspector");
+  let sidebarWidth = inspector.splitBox.state.width;
+  const sidebarSplitBoxWidth = inspector.sidebarSplitBoxRef.current.state.width;
+  ok(
+    !button.classList.contains("pane-collapsed"),
+    "The button is in expanded state"
+  );
+  ok(doc.getElementById("ruleview-panel"), "The rule view panel exist");
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "layoutview",
+    "Layout view is shown in the sidebar"
+  );
+  is(
+    ruleViewSidebar.style.display,
+    "block",
+    "The split rule view sidebar is displayed"
+  );
+  is(sidebarWidth, (toolboxWidth * 2) / 3, "Got correct main split box width");
+  is(
+    sidebarSplitBoxWidth,
+    toolboxWidth / 3,
+    "Got correct sidebar split box width"
+  );
+
+  info("Click on the toggle button to toggle OFF the 3 pane inspector");
+  onRuleViewAdded = inspector.once("ruleview-added");
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    {},
+    inspector.panelDoc.defaultView
+  );
+  await onRuleViewAdded;
+
+  info("Checking the state of the 2 pane inspector");
+  sidebarWidth = inspector.splitBox.state.width;
+  ok(
+    button.classList.contains("pane-collapsed"),
+    "The button is in collapsed state"
+  );
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "ruleview",
+    "Rule view is shown in the sidebar"
+  );
+  is(
+    ruleViewSidebar.style.display,
+    "none",
+    "The split rule view sidebar is hidden"
+  );
+  is(sidebarWidth, sidebarSplitBoxWidth, "Got correct sidebar width");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
new file mode 100644
index 0000000000..1522781832
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the 3 pane inspector toggle can render the middle and right panels of equal
+// sizes when the original sidebar can be doubled in width and be smaller than half the
+// toolbox's width in the BOTTOM host.
+
+const SIDEBAR_WIDTH = 200;
+
+add_task(async function () {
+  info("Switch to 2 pane inspector to test the 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const { inspector } = await openInspectorForURL("about:blank");
+  const { panelDoc: doc } = inspector;
+  const button = doc.querySelector(".sidebar-toggle");
+  const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth;
+
+  if (toolboxWidth < 600) {
+    ok(true, "Can't run the full test because the toolbox width is too small.");
+  } else {
+    info("Set the sidebar width to 200px");
+    inspector.splitBox.setState({ width: SIDEBAR_WIDTH });
+
+    info("Click on the toggle button to toggle ON 3 pane inspector");
+    let onRuleViewAdded = inspector.once("ruleview-added");
+    EventUtils.synthesizeMouseAtCenter(
+      button,
+      {},
+      inspector.panelDoc.defaultView
+    );
+    await onRuleViewAdded;
+
+    info("Checking the sizes of the 3 pane inspector");
+    let sidebarWidth = inspector.splitBox.state.width;
+    const sidebarSplitBoxWidth =
+      inspector.sidebarSplitBoxRef.current.state.width;
+    is(sidebarWidth, SIDEBAR_WIDTH * 2, "Got correct main split box width");
+    is(
+      sidebarSplitBoxWidth,
+      SIDEBAR_WIDTH,
+      "Got correct sidebar split box width"
+    );
+
+    info("Click on the toggle button to toggle OFF the 3 pane inspector");
+    onRuleViewAdded = inspector.once("ruleview-added");
+    EventUtils.synthesizeMouseAtCenter(
+      button,
+      {},
+      inspector.panelDoc.defaultView
+    );
+    await onRuleViewAdded;
+
+    info("Checking the sidebar size of the 2 pane inspector");
+    sidebarWidth = inspector.splitBox.state.width;
+    is(sidebarWidth, SIDEBAR_WIDTH, "Got correct sidebar width");
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
new file mode 100644
index 0000000000..024fca816b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the 3 pane inspector toggle button can render the bottom-left and
+// bottom-right panels of equal sizes in the SIDE host.
+
+add_task(async function () {
+  info("Switch to 2 pane inspector to test the 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const { inspector, toolbox } = await openInspectorForURL("about:blank");
+  const { panelDoc: doc } = inspector;
+
+  info("Switch the host to the right");
+  await toolbox.switchHost("right");
+
+  // Switching hosts is not correctly waiting when DevTools run in content frame
+  // See Bug 1571421.
+  await wait(1000);
+
+  const button = doc.querySelector(".sidebar-toggle");
+  const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth;
+
+  info("Click on the toggle button to toggle ON 3 pane inspector");
+  let onRuleViewAdded = inspector.once("ruleview-added");
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    {},
+    inspector.panelDoc.defaultView
+  );
+  await onRuleViewAdded;
+
+  info("Checking the sizes of the 3 pane inspector");
+  const sidebarSplitBoxWidth = inspector.sidebarSplitBoxRef.current.state.width;
+  is(
+    sidebarSplitBoxWidth,
+    toolboxWidth / 2,
+    "Got correct sidebar split box width"
+  );
+
+  info("Click on the toggle button to toggle OFF the 3 pane inspector");
+  onRuleViewAdded = inspector.once("ruleview-added");
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    {},
+    inspector.panelDoc.defaultView
+  );
+  await onRuleViewAdded;
+
+  info("Checking the sidebar size of the 2 pane inspector");
+  const sidebarWidth = inspector.splitBox.state.width;
+  is(sidebarWidth, toolboxWidth, "Got correct sidebar width");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-05.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-05.js
new file mode 100644
index 0000000000..d2653639a0
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-05.js
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Tests whether the initial selected tab is displayed when switched from 3 pane to 2 pane
+// and back to 3 pane when no other tab is selected explicitly. Rule view is displayed
+// immediately on toggling to 2 pane.
+add_task(async function () {
+  info(
+    "Switch to 2 pane inspector and back to 3 pane to test whether the selected tab is used"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", true);
+
+  const { inspector } = await openInspectorForURL("about:blank");
+
+  inspector.sidebar.select("changesview");
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "changesview",
+    "Changes view should be the active sidebar"
+  );
+
+  info("Click on the toggle button to toggle OFF 3 pane inspector");
+  await toggleSidebar(inspector);
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "ruleview",
+    "Rules view should be the active sidebar on toggle to 2 pane"
+  );
+
+  info("Click on the toggle button to toggle ON 3 pane inspector");
+  await toggleSidebar(inspector);
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "changesview",
+    "Changes view should be the active sidebar again"
+  );
+});
+
+// Tests whether the selected pane in 2 pane view is also used after toggling to 3 pane view.
+add_task(async function () {
+  info("Switch to 3 pane to test whether the selected pane is preserved");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const { inspector } = await openInspectorForURL("about:blank");
+
+  inspector.sidebar.select("changesview");
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "changesview",
+    "Changes view should be the active sidebar"
+  );
+
+  info("Click on the toggle button to toggle ON 3 pane inspector");
+  await toggleSidebar(inspector);
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "changesview",
+    "Changes view should still be the active sidebar"
+  );
+});
+
+// Tests whether the selected pane is layout view, if rule view is selected before toggling to 3 pane.
+add_task(async function () {
+  info("Switch to 3 pane to test whether the selected pane is layout view");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const { inspector } = await openInspectorForURL("about:blank");
+
+  inspector.sidebar.select("ruleview");
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "ruleview",
+    "Rules view should be the active sidebar in 2 pane"
+  );
+
+  info("Click on the toggle button to toggle ON 3 pane inspector");
+  await toggleSidebar(inspector);
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "layoutview",
+    "Layout view should be the active sidebar in 3 pane"
+  );
+});
+
+const toggleSidebar = async inspector => {
+  const { panelDoc: doc } = inspector;
+  const button = doc.querySelector(".sidebar-toggle");
+
+  const onRuleViewAdded = inspector.once("ruleview-added");
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    {},
+    inspector.panelDoc.defaultView
+  );
+  await onRuleViewAdded;
+};
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-layout-invariant.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-layout-invariant.js
new file mode 100644
index 0000000000..1abc7db975
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-layout-invariant.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that documents with suppressed whitespace nodes are unaffected by the
+// activation of the inspector panel.
+
+const TEST_URL = URL_ROOT + "doc_inspector_pane-toggle-layout-invariant.html";
+
+async function getInvariantRect() {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    const invariant = content.document.getElementById("invariant");
+    return invariant.getBoundingClientRect();
+  });
+}
+
+add_task(async function () {
+  await addTab(TEST_URL);
+
+  // Get the initial position of the "invariant" element. We'll later check it
+  // again and we'll expect to get the same value.
+  const beforeRect = await getInvariantRect();
+
+  // Open the inspector.
+  await openInspector();
+
+  const afterRect = await getInvariantRect();
+
+  is(afterRect.x, beforeRect.x, "invariant x should be same as initial value.");
+  is(afterRect.y, beforeRect.y, "invariant y should be same as initial value.");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_pane_state_restore.js b/devtools/client/inspector/test/browser_inspector_pane_state_restore.js
new file mode 100644
index 0000000000..8eb345e3de
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane_state_restore.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the previous inspector split box sizes are restored when reopening the
+// inspector.
+
+const EXPECTED_INITIAL_WIDTH = 101;
+const EXPECTED_INITIAL_HEIGHT = 102;
+const EXPECTED_INITIAL_SIDEBAR_WIDTH = 103;
+
+const EXPECTED_NEW_WIDTH = 150;
+const EXPECTED_NEW_HEIGHT = 100;
+const EXPECTED_NEW_SIDEBAR_WIDTH = 250;
+
+add_task(async function () {
+  // Simulate that the user has already stored their preferred split boxes widths.
+  await pushPref(
+    "devtools.toolsidebar-width.inspector",
+    EXPECTED_INITIAL_WIDTH
+  );
+  await pushPref(
+    "devtools.toolsidebar-height.inspector",
+    EXPECTED_INITIAL_HEIGHT
+  );
+  await pushPref(
+    "devtools.toolsidebar-width.inspector.splitsidebar",
+    EXPECTED_INITIAL_SIDEBAR_WIDTH
+  );
+
+  const { inspector } = await openInspectorForURL("about:blank");
+
+  info("Check the initial size of the inspector.");
+  const { width, height, splitSidebarWidth } = inspector.getSidebarSize();
+  is(width, EXPECTED_INITIAL_WIDTH, "Got correct initial width.");
+  is(height, EXPECTED_INITIAL_HEIGHT, "Got correct initial height.");
+  is(
+    splitSidebarWidth,
+    EXPECTED_INITIAL_SIDEBAR_WIDTH,
+    "Got correct initial split sidebar width."
+  );
+
+  info("Simulate updates to the dimensions of the various splitboxes.");
+  inspector.splitBox.setState({
+    width: EXPECTED_NEW_WIDTH,
+    height: EXPECTED_NEW_HEIGHT,
+  });
+  inspector.sidebarSplitBoxRef.current.setState({
+    width: EXPECTED_NEW_SIDEBAR_WIDTH,
+  });
+
+  await closeToolbox();
+
+  info(
+    "Check the stored sizes of the inspector in the preferences when the inspector " +
+      "is closed"
+  );
+  const storedWidth = Services.prefs.getIntPref(
+    "devtools.toolsidebar-width.inspector"
+  );
+  const storedHeight = Services.prefs.getIntPref(
+    "devtools.toolsidebar-height.inspector"
+  );
+  const storedSplitSidebarWidth = Services.prefs.getIntPref(
+    "devtools.toolsidebar-width.inspector.splitsidebar"
+  );
+  is(storedWidth, EXPECTED_NEW_WIDTH, "Got correct stored width.");
+  is(storedHeight, EXPECTED_NEW_HEIGHT, "Got correct stored height");
+  is(
+    storedSplitSidebarWidth,
+    EXPECTED_NEW_SIDEBAR_WIDTH,
+    "Got correct stored split sidebar width."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_picker-reset-reference.js b/devtools/client/inspector/test/browser_inspector_picker-reset-reference.js
new file mode 100644
index 0000000000..2a9bc39ca6
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_picker-reset-reference.js
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the node picker reset its reference for the last hovered node when the user
+// stops picking (See Bug 1736183).
+
+const TEST_URL =
+  "data:text/html;charset=utf8,<h1 id=target>Pick target</h1><h2>ignore me</h2>";
+
+add_task(async () => {
+  const { inspector, toolbox, highlighterTestFront } =
+    await openInspectorForURL(TEST_URL);
+
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+
+  info(
+    "Start the picker and hover an element to populate the picker hovered node reference"
+  );
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#target");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#target"),
+    "The highlighter is shown on the expected node"
+  );
+
+  info("Hit Escape to cancel picking");
+  let onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  await stopPickerWithEscapeKey(toolbox);
+  await onHighlighterHidden;
+
+  info("And start it again, and hover the same node again");
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#target");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#target"),
+    "The highlighter is shown on the expected node again"
+  );
+
+  info("Pick the element to stop the picker");
+  onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  // nodePicker isPicking property is set to false _after_ picker-node-picked event, so
+  // we need to wait for picker-stopped here.
+  const onPickerStopped = toolbox.nodePicker.once("picker-stopped");
+  await pickElement(inspector, "#target", 5, 5);
+  await onHighlighterHidden;
+  await onPickerStopped;
+
+  info("And start it and hover the same node, again");
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#target");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#target"),
+    "The highlighter is shown on the expected node again"
+  );
+
+  info("Stop the picker to avoid pending Promise");
+  onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  await stopPickerWithEscapeKey(toolbox);
+  await onHighlighterHidden;
+});
diff --git a/devtools/client/inspector/test/browser_inspector_picker-shift-key.js b/devtools/client/inspector/test/browser_inspector_picker-shift-key.js
new file mode 100644
index 0000000000..2eb1c04709
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_picker-shift-key.js
@@ -0,0 +1,94 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the node picker can pick elements with pointer-events: none when holding Shift.
+
+const TEST_URI = `data:text/html;charset=utf-8,
+  <!DOCTYPE html>
+  <main style="display:flex">
+    <div id="pointer">Regular element</div>
+    <div id="nopointer" style="pointer-events: none">Element with pointer-events: none</div>
+    <div id="transluscent" style="pointer-events: none;opacity: 0.1">Element with opacity of 0.1</div>
+    <div id="invisible" style="pointer-events: none;opacity: 0">Element with opacity of 0</div>
+  </main>`;
+const IS_OSX = Services.appinfo.OS === "Darwin";
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
+
+  const body = await getNodeFront("body", inspector);
+  is(
+    inspector.selection.nodeFront,
+    body,
+    "By default the body node is selected"
+  );
+
+  info("Start the element picker");
+  await startPicker(toolbox);
+
+  info(
+    "Shift-clicking element with pointer-events: none does select the element"
+  );
+  await clickElement({
+    inspector,
+    selector: "#nopointer",
+    shiftKey: true,
+  });
+  await checkElementSelected("#nopointer", inspector);
+
+  info("Shift-clicking element with default pointer-events value also works");
+  await clickElement({
+    inspector,
+    selector: "#pointer",
+    shiftKey: true,
+  });
+  await checkElementSelected("#pointer", inspector);
+
+  info(
+    "Clicking element with pointer-events: none without holding Shift won't select the element but its parent"
+  );
+  await clickElement({
+    inspector,
+    selector: "#nopointer",
+    shiftKey: false,
+  });
+  await checkElementSelected("main", inspector);
+
+  info("Shift-clicking transluscent visible element works");
+  await clickElement({
+    inspector,
+    selector: "#transluscent",
+    shiftKey: true,
+  });
+  await checkElementSelected("#transluscent", inspector);
+
+  info("Shift-clicking invisible element select its parent");
+  await clickElement({
+    inspector,
+    selector: "#invisible",
+    shiftKey: true,
+  });
+  await checkElementSelected("main", inspector);
+});
+
+async function clickElement({ selector, inspector, shiftKey }) {
+  const onSelectionChanged = inspector.once("inspector-updated");
+  await safeSynthesizeMouseEventAtCenterInContentPage(selector, {
+    shiftKey,
+    // Hold meta/ctrl so we don't have to start the picker again
+    [IS_OSX ? "metaKey" : "ctrlKey"]: true,
+  });
+  await onSelectionChanged;
+}
+
+async function checkElementSelected(selector, inspector) {
+  const el = await getNodeFront(selector, inspector);
+  is(
+    inspector.selection.nodeFront,
+    el,
+    `The element ${selector} is now selected`
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_picker-stop-on-eyedropper.js b/devtools/client/inspector/test/browser_inspector_picker-stop-on-eyedropper.js
new file mode 100644
index 0000000000..bed9e2e82c
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_picker-stop-on-eyedropper.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that the highlighter's picker is stopped when the eyedropper tool is
+// selected
+
+const TEST_URI =
+  "data:text/html;charset=UTF-8," +
+  "testing the highlighter goes away on eyedropper selection";
+
+add_task(async function () {
+  const { toolbox } = await openInspectorForURL(TEST_URI);
+  const pickerStopped = toolbox.nodePicker.once("picker-stopped");
+  const eyeDropperButtonClasses =
+    toolbox.getPanel("inspector").eyeDropperButton.classList;
+
+  const eyeDropperStopped = waitFor(
+    () => !eyeDropperButtonClasses.contains("checked")
+  );
+
+  info("Starting the inspector picker");
+  await startPicker(toolbox);
+
+  info("Starting the eyedropper tool");
+  await startEyeDropper(toolbox);
+
+  ok(eyeDropperButtonClasses.contains("checked"), "eyedropper is started");
+
+  info("Waiting for the picker-stopped event to be fired");
+  await pickerStopped;
+
+  ok(
+    true,
+    "picker-stopped event fired after eyedropper is selected; picker is closed"
+  );
+
+  info("Starting the inspector picker again");
+  await startPicker(toolbox);
+
+  info("Checking if eyedropper is stopped");
+  await eyeDropperStopped;
+
+  ok(true, "eyedropper stopped after node picker; eyedropper is closed");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_picker-stop-on-tool-change.js b/devtools/client/inspector/test/browser_inspector_picker-stop-on-tool-change.js
new file mode 100644
index 0000000000..e8a5796f49
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_picker-stop-on-tool-change.js
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Test that the highlighter's picker is stopped when a different tool is
+// selected
+
+const TEST_URI =
+  "data:text/html;charset=UTF-8," +
+  "testing the highlighter goes away on tool selection";
+
+add_task(async function () {
+  const { toolbox } = await openInspectorForURL(TEST_URI);
+  const pickerStopped = toolbox.nodePicker.once("picker-stopped");
+
+  info("Starting the inspector picker");
+  await startPicker(toolbox);
+
+  info("Selecting another tool than the inspector in the toolbox");
+  await toolbox.selectNextTool();
+
+  info("Waiting for the picker-stopped event to be fired");
+  await pickerStopped;
+
+  ok(true, "picker-stopped event fired after switch tools; picker is closed");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_picker-useragent-widget.js b/devtools/client/inspector/test/browser_inspector_picker-useragent-widget.js
new file mode 100644
index 0000000000..11b45e8dca
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_picker-useragent-widget.js
@@ -0,0 +1,74 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URI = `data:text/html;charset=utf-8,
+  <!DOCTYPE html>
+  <video controls></video>`;
+
+// Test that using the node picker on user agent widgets only selects shadow dom
+// elements if `devtools.inspector.showAllAnonymousContent` is true.
+// If not, we should only surface the host, in this case, the <video>.
+//
+// For this test we use a <video controls> tag, which is using shadow dom.
+add_task(async function () {
+  // Run the test for both values for devtools.inspector.showAllAnonymousContent
+  await runUserAgentWidgetPickerTest({ enableAnonymousContent: false });
+  await runUserAgentWidgetPickerTest({ enableAnonymousContent: true });
+});
+
+async function runUserAgentWidgetPickerTest({ enableAnonymousContent }) {
+  await pushPref(
+    "devtools.inspector.showAllAnonymousContent",
+    enableAnonymousContent
+  );
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
+
+  info("Use the node picker inside the <video> element");
+  await startPicker(toolbox);
+  const onPickerStopped = toolbox.nodePicker.once("picker-stopped");
+  await pickElement(inspector, "video", 5, 5);
+  await onPickerStopped;
+
+  const selectedNode = inspector.selection.nodeFront;
+  if (enableAnonymousContent) {
+    // We do not assert specifically which node was selected, we just want to
+    // check the node was under the shadow DOM for the <video type=date>
+    const shadowHost = getShadowHost(selectedNode);
+    Assert.notStrictEqual(
+      selectedNode.tagName.toLowerCase(),
+      "video",
+      "The selected node is not the <video>"
+    );
+    ok(shadowHost, "The selected node is in a shadow root");
+    is(shadowHost.tagName.toLowerCase(), "video", "The shadowHost is <video>");
+  } else {
+    is(
+      selectedNode.tagName.toLowerCase(),
+      "video",
+      "The selected node is the <video>"
+    );
+  }
+}
+
+/**
+ * Retrieve the nodeFront for the shadow host containing the provided nodeFront.
+ * Returns null if the nodeFront is not in a shadow DOM.
+ *
+ * @param {NodeFront} nodeFront
+ *        The nodeFront for which we want to retrieve the shadow host.
+ * @return {NodeFront} The nodeFront corresponding to the shadow host, or null
+ *         if the nodeFront is not in shadow DOM.
+ */
+function getShadowHost(nodeFront) {
+  let parent = nodeFront;
+  while (parent) {
+    if (parent.isShadowHost) {
+      return parent;
+    }
+    parent = parent.parentOrHost();
+  }
+  return null;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_portrait_mode.js b/devtools/client/inspector/test/browser_inspector_portrait_mode.js
new file mode 100644
index 0000000000..c4734645c3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_portrait_mode.js
@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test that the inspector splitter is properly initialized in horizontal mode if the
+// inspector starts in portrait mode.
+
+add_task(async function () {
+  let { inspector, toolbox } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>",
+    "window"
+  );
+
+  const hostWindow = toolbox.win.parent;
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+
+  let splitter = inspector.panelDoc.querySelector(
+    ".inspector-sidebar-splitter"
+  );
+
+  // If the inspector is not already in landscape mode.
+  if (!splitter.classList.contains("vert")) {
+    info("Resize toolbox window to force inspector to landscape mode");
+    const onClassnameMutation = waitForClassMutation(splitter);
+    hostWindow.resizeTo(800, 500);
+    await onClassnameMutation;
+
+    ok(splitter.classList.contains("vert"), "Splitter is in vertical mode");
+  }
+
+  info("Resize toolbox window to force inspector to portrait mode");
+  const onClassnameMutation = waitForClassMutation(splitter);
+  hostWindow.resizeTo(500, 500);
+  await onClassnameMutation;
+
+  ok(splitter.classList.contains("horz"), "Splitter is in horizontal mode");
+
+  info("Close the inspector");
+  await toolbox.destroy();
+
+  info("Reopen inspector");
+  ({ inspector, toolbox } = await openInspector("window"));
+
+  // Devtools window should still be 500px * 500px, inspector should still be in portrait.
+  splitter = inspector.panelDoc.querySelector(".inspector-sidebar-splitter");
+  ok(splitter.classList.contains("horz"), "Splitter is in horizontal mode");
+
+  info("Restore original window size");
+  toolbox.win.parent.resizeTo(originalWidth, originalHeight);
+});
+
+/**
+ * Helper waiting for a class attribute mutation on the provided target. Returns a
+ * promise.
+ *
+ * @param {Node} target
+ *         Node to observe
+ * @return {Promise} promise that will resolve upon receiving a mutation for the class
+ *         attribute on the target.
+ */
+function waitForClassMutation(target) {
+  return new Promise(resolve => {
+    const observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === "class") {
+          observer.disconnect();
+          resolve();
+          return;
+        }
+      }
+    });
+    observer.observe(target, { attributes: true });
+  });
+}
+
+registerCleanupFunction(function () {
+  // Restore the host type for other tests.
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js b/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
new file mode 100644
index 0000000000..df924aab8c
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
@@ -0,0 +1,235 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* globals getHighlighterTestFrontWithoutToolbox */
+"use strict";
+
+// Test that locking the pseudoclass displays correctly in the ruleview
+
+const PSEUDO = ":hover";
+const TEST_URL =
+  "data:text/html;charset=UTF-8," +
+  "<head>" +
+  "  <style>div {color:red;} div:hover {color:blue;}</style>" +
+  "</head>" +
+  "<body>" +
+  '  <div id="parent-div">' +
+  '    <div id="div-1">test div</div>' +
+  '    <div id="div-2">test div2</div>' +
+  "  </div>" +
+  "</body>";
+
+add_task(async function () {
+  info("Creating the test tab and opening the rule-view");
+  let { tab, toolbox, inspector, highlighterTestFront } =
+    await openInspectorForURL(TEST_URL);
+
+  info("Selecting the ruleview sidebar");
+  inspector.sidebar.select("ruleview");
+
+  const view = inspector.getPanel("ruleview").view;
+
+  info("Selecting the test node");
+  await selectNode("#div-1", inspector);
+
+  await togglePseudoClass(inspector);
+  await assertPseudoAddedToNode(
+    inspector,
+    highlighterTestFront,
+    view,
+    "#div-1"
+  );
+
+  await togglePseudoClass(inspector);
+  await assertPseudoRemovedFromNode(highlighterTestFront, "#div-1");
+  await assertPseudoRemovedFromView(
+    inspector,
+    highlighterTestFront,
+    view,
+    "#div-1"
+  );
+
+  await togglePseudoClass(inspector);
+  await testNavigate(inspector);
+
+  info("Toggle pseudo on the parent and ensure everything is toggled off");
+  await selectNode("#parent-div", inspector);
+  await togglePseudoClass(inspector);
+  await assertPseudoRemovedFromNode(highlighterTestFront, "#div-1");
+  await assertPseudoRemovedFromView(
+    inspector,
+    highlighterTestFront,
+    view,
+    "#div-1"
+  );
+
+  await togglePseudoClass(inspector);
+  info("Assert pseudo is dismissed when toggling it on a sibling node");
+  await selectNode("#div-2", inspector);
+  await togglePseudoClass(inspector);
+  await assertPseudoAddedToNode(
+    inspector,
+    highlighterTestFront,
+    view,
+    "#div-2"
+  );
+  const hasLock = await hasPseudoClassLock("#div-1", PSEUDO);
+  ok(
+    !hasLock,
+    "pseudo-class lock has been removed for the previous locked node"
+  );
+
+  info("Destroying the toolbox");
+  await toolbox.destroy();
+
+  // As the toolbox get destroyed, we need to fetch a new test-actor
+  highlighterTestFront = await getHighlighterTestFrontWithoutToolbox(tab);
+
+  await assertPseudoRemovedFromNode(highlighterTestFront, "#div-1");
+  await assertPseudoRemovedFromNode(highlighterTestFront, "#div-2");
+});
+
+async function togglePseudoClass(inspector) {
+  info("Toggle the pseudoclass, wait for it to be applied");
+
+  // Give the inspector panels a chance to update when the pseudoclass changes
+  const onPseudo = inspector.selection.once("pseudoclass");
+  const onRefresh = inspector.once("rule-view-refreshed");
+
+  // Walker uses SDK-events so calling walker.once does not return a promise.
+  const onMutations = once(inspector.walker, "mutations");
+
+  await inspector.togglePseudoClass(PSEUDO);
+
+  await onPseudo;
+  await onRefresh;
+  await onMutations;
+}
+
+async function testNavigate(inspector) {
+  await selectNode("#parent-div", inspector);
+
+  info("Make sure the pseudoclass is still on after navigating to a parent");
+
+  ok(
+    await hasPseudoClassLock("#div-1", PSEUDO),
+    "pseudo-class lock is still applied after inspecting ancestor"
+  );
+
+  await selectNode("#div-2", inspector);
+
+  info(
+    "Make sure the pseudoclass is still set after navigating to a " +
+      "non-hierarchy node"
+  );
+  ok(
+    await hasPseudoClassLock("#div-1", PSEUDO),
+    "pseudo-class lock is still on after inspecting sibling node"
+  );
+
+  await selectNode("#div-1", inspector);
+}
+
+async function assertPseudoAddedToNode(
+  inspector,
+  highlighterTestFront,
+  ruleview,
+  selector
+) {
+  info(
+    "Make sure the pseudoclass lock is applied to " +
+      selector +
+      " and its ancestors"
+  );
+
+  let hasLock = await hasPseudoClassLock(selector, PSEUDO);
+  ok(hasLock, "pseudo-class lock has been applied");
+  hasLock = await hasPseudoClassLock("#parent-div", PSEUDO);
+  ok(hasLock, "pseudo-class lock has been applied");
+  hasLock = await hasPseudoClassLock("body", PSEUDO);
+  ok(hasLock, "pseudo-class lock has been applied");
+
+  info("Check that the ruleview contains the pseudo-class rule");
+  const rules = ruleview.element.querySelectorAll(".ruleview-rule");
+  is(
+    rules.length,
+    3,
+    "rule view is showing 3 rules for pseudo-class locked div"
+  );
+  is(
+    rules[1]._ruleEditor.rule.selectorText,
+    "div:hover",
+    "rule view is showing " + PSEUDO + " rule"
+  );
+
+  info("Show the highlighter on " + selector);
+  const nodeFront = await getNodeFront(selector, inspector);
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    nodeFront
+  );
+
+  info("Check that the infobar selector contains the pseudo-class");
+  const value = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-pseudo-classes"
+  );
+  is(value, PSEUDO, "pseudo-class in infobar selector");
+  await inspector.highlighters.hideHighlighterType(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+}
+
+async function assertPseudoRemovedFromNode(highlighterTestFront, selector) {
+  info(
+    "Make sure the pseudoclass lock is removed from #div-1 and its " +
+      "ancestors"
+  );
+
+  let hasLock = await hasPseudoClassLock(selector, PSEUDO);
+  ok(!hasLock, "pseudo-class lock has been removed");
+  hasLock = await hasPseudoClassLock("#parent-div", PSEUDO);
+  ok(!hasLock, "pseudo-class lock has been removed");
+  hasLock = await hasPseudoClassLock("body", PSEUDO);
+  ok(!hasLock, "pseudo-class lock has been removed");
+}
+
+async function assertPseudoRemovedFromView(
+  inspector,
+  highlighterTestFront,
+  ruleview,
+  selector
+) {
+  info("Check that the ruleview no longer contains the pseudo-class rule");
+  const rules = ruleview.element.querySelectorAll(".ruleview-rule");
+  is(rules.length, 2, "rule view is showing 2 rules after removing lock");
+
+  const nodeFront = await getNodeFront(selector, inspector);
+  await inspector.highlighters.showHighlighterTypeForNode(
+    inspector.highlighters.TYPES.BOXMODEL,
+    nodeFront
+  );
+
+  const value = await highlighterTestFront.getHighlighterNodeTextContent(
+    "box-model-infobar-pseudo-classes"
+  );
+  is(value, "", "pseudo-class removed from infobar selector");
+  await inspector.highlighters.hideHighlighterType(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+}
+
+/**
+ * Check that an element currently has a pseudo-class lock.
+ * @param {String} selector The node selector to get the pseudo-class from
+ * @param {String} pseudo The pseudoclass to check for
+ * @return {Promise<Boolean>}
+ */
+function hasPseudoClassLock(selector, pseudoClass) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, pseudoClass],
+    (_selector, _pseudoClass) => {
+      const element = content.document.querySelector(_selector);
+      return InspectorUtils.hasPseudoClassLock(element, _pseudoClass);
+    }
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_pseudoclass-menu.js b/devtools/client/inspector/test/browser_inspector_pseudoclass-menu.js
new file mode 100644
index 0000000000..36ecec1638
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pseudoclass-menu.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the inspector has the correct pseudo-class locking menu items and
+// that these items actually work
+
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const TEST_URI =
+  "data:text/html;charset=UTF-8," +
+  "pseudo-class lock node menu tests" +
+  "<div>test div</div>";
+// Strip the colon prefix from pseudo-classes (:before => before)
+const PSEUDOS = PSEUDO_CLASSES.map(pseudo => pseudo.substr(1));
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+  await selectNode("div", inspector);
+
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+
+  await testMenuItems(highlighterTestFront, allMenuItems, inspector);
+});
+
+async function testMenuItems(highlighterTestFront, allMenuItems, inspector) {
+  for (const pseudo of PSEUDOS) {
+    const menuItem = allMenuItems.find(
+      item => item.id === "node-menu-pseudo-" + pseudo
+    );
+    ok(menuItem, ":" + pseudo + " menuitem exists");
+    is(menuItem.disabled, false, ":" + pseudo + " menuitem is enabled");
+
+    // Give the inspector panels a chance to update when the pseudoclass changes
+    const onPseudo = inspector.selection.once("pseudoclass");
+    const onRefresh = inspector.once("rule-view-refreshed");
+
+    // Walker uses SDK-events so calling walker.once does not return a promise.
+    const onMutations = once(inspector.walker, "mutations");
+
+    menuItem.click();
+
+    await onPseudo;
+    await onRefresh;
+    await onMutations;
+
+    const hasLock = await SpecialPowers.spawn(
+      gBrowser.selectedBrowser,
+      [`:${pseudo}`],
+      pseudoClass => {
+        const element = content.document.querySelector("div");
+        return InspectorUtils.hasPseudoClassLock(element, pseudoClass);
+      }
+    );
+    ok(hasLock, "pseudo-class lock has been applied");
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_reload-01.js b/devtools/client/inspector/test/browser_inspector_reload-01.js
new file mode 100644
index 0000000000..7adf53ceb3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload-01.js
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// A test to ensure reloading a page doesn't break the inspector.
+
+// Reload should reselect the currently selected markup view element.
+// This should work even when an element whose selector needs escaping
+// is selected (bug 1002280).
+const TEST_URI = "data:text/html,<p id='1'>p</p>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+  await selectNode("p", inspector);
+
+  const markupLoaded = inspector.once("markuploaded");
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  info("Waiting for markupview to load after reload.");
+  await markupLoaded;
+
+  const nodeFront = await getNodeFront("p", inspector);
+  is(inspector.selection.nodeFront, nodeFront, "<p> selected after reload.");
+
+  info("Selecting a node to see that inspector still works.");
+  await selectNode("body", inspector);
+});
diff --git a/devtools/client/inspector/test/browser_inspector_reload-02.js b/devtools/client/inspector/test/browser_inspector_reload-02.js
new file mode 100644
index 0000000000..da27805f21
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload-02.js
@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// A test to ensure reloading a page doesn't break the inspector.
+
+// Reload should reselect the currently selected markup view element.
+// This should work even when an element whose selector is inaccessible
+// is selected (bug 1038651).
+const TEST_URI =
+  'data:text/xml,<?xml version="1.0" standalone="no"?>' +
+  '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"' +
+  '  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
+  '<svg width="4cm" height="4cm" viewBox="0 0 400 400"' +
+  '     xmlns="http://www.w3.org/2000/svg" version="1.1">' +
+  "  <title>Example triangle01- simple example of a path</title>" +
+  "  <desc>A path that draws a triangle</desc>" +
+  '  <rect x="1" y="1" width="398" height="398"' +
+  '        fill="none" stroke="blue" />' +
+  '  <path d="M 100 100 L 300 100 L 200 300 z"' +
+  '        fill="red" stroke="blue" stroke-width="3" />' +
+  "</svg>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  const markupLoaded = inspector.once("markuploaded");
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  info("Waiting for markupview to load after reload.");
+  await markupLoaded;
+
+  const svgFront = await getNodeFront("svg", inspector);
+  is(inspector.selection.nodeFront, svgFront, "<svg> selected after reload.");
+
+  info("Selecting a node to see that inspector still works.");
+  await selectNode("rect", inspector);
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  const rectFront = await getNodeFront("rect", inspector);
+  is(inspector.selection.nodeFront, rectFront, "<rect> selected after reload.");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_reload_iframe.js b/devtools/client/inspector/test/browser_inspector_reload_iframe.js
new file mode 100644
index 0000000000..8c7a6a5407
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload_iframe.js
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Check that the markup view selection is preserved even if the selection is
+// in an iframe.
+
+// We're loading an image that would take a few second to load so the iframe won't have
+// its readyState to "complete" (it should be "interactive").
+// That was causing some issue, see Bug 1733539.
+const IMG_URL = URL_ROOT_COM_SSL + "sjs_slow-loading-image.sjs";
+const FRAME_URI =
+  "data:text/html;charset=utf-8," +
+  encodeURI(`
+    <div id="in-frame">div in the iframe</div>
+    <img src="${IMG_URL}"></img>
+  `);
+const HTML = `
+  <iframe src="${FRAME_URI}"></iframe>
+`;
+
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  await selectNodeInFrames(["iframe", "#in-frame"], inspector);
+
+  const markupLoaded = inspector.once("markuploaded");
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  info("Waiting for markupview to load after reload.");
+  await markupLoaded;
+
+  const reloadedNodeFront = await getNodeFrontInFrames(
+    ["iframe", "#in-frame"],
+    inspector
+  );
+
+  is(
+    inspector.selection.nodeFront,
+    reloadedNodeFront,
+    "#in-frame selected after reload."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_reload_invalid_iframe.js b/devtools/client/inspector/test/browser_inspector_reload_invalid_iframe.js
new file mode 100644
index 0000000000..2a6bd69e48
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload_invalid_iframe.js
@@ -0,0 +1,63 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// When reselecting the selected node, if an element expected to be an iframe is
+// NOT actually an iframe, we should still fallback on the root body element.
+
+const TEST_URI = "data:text/html;charset=utf-8,<div id='fake-iframe'>";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  info("Replace fake-iframe div with a real iframe");
+  await ContentTask.spawn(gBrowser.selectedBrowser, null, async function () {
+    await new Promise(resolve => {
+      // Remove the fake-iframe div
+      content.document.querySelector("#fake-iframe").remove();
+
+      // Create an iframe element with the same id "fake-iframe".
+      const iframe = content.document.createElement("iframe");
+      content.document.body.appendChild(iframe);
+      iframe.setAttribute("id", "fake-iframe");
+
+      iframe.contentWindow.addEventListener("load", () => {
+        // Create a div element and append it to the iframe
+        const div = content.document.createElement("div");
+        div.id = "in-frame";
+        div.textContent = "div in frame";
+
+        const frameContent =
+          iframe.contentWindow.document.querySelector("body");
+        frameContent.appendChild(div);
+        resolve();
+      });
+    });
+  });
+
+  ok(
+    await hasMatchingElementInContentPage("iframe"),
+    "The iframe has been added to the page"
+  );
+
+  info("Select node inside iframe.");
+  await selectNodeInFrames(["iframe", "#in-frame"], inspector);
+
+  const markupLoaded = inspector.once("markuploaded");
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  info("Waiting for markupview to load after reload.");
+  await markupLoaded;
+
+  const rootNodeFront = await getNodeFront("body", inspector);
+
+  is(
+    inspector.selection.nodeFront,
+    rootNodeFront,
+    "body node selected after reload."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_reload_missing-iframe-node.js b/devtools/client/inspector/test/browser_inspector_reload_missing-iframe-node.js
new file mode 100644
index 0000000000..82e154d5ef
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload_missing-iframe-node.js
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that the markup view selection falls back to the document body if an iframe node
+// becomes missing after a reload. This can happen if the iframe and its contents are
+// added dynamically to the page before reloading.
+
+const TEST_URI = "data:text/html;charset=utf-8,";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  info("Create new iframe and add it to the page.");
+  await ContentTask.spawn(gBrowser.selectedBrowser, null, async function () {
+    await new Promise(resolve => {
+      const iframe = content.document.createElement("iframe");
+      content.document.body.appendChild(iframe);
+
+      iframe.contentWindow.addEventListener("load", () => {
+        // Create a div element and append it to the iframe
+        const div = content.document.createElement("div");
+        div.id = "in-frame";
+        div.textContent = "div in frame";
+
+        const frameContent =
+          iframe.contentWindow.document.querySelector("body");
+        frameContent.appendChild(div);
+        resolve();
+      });
+    });
+  });
+  ok(
+    await hasMatchingElementInContentPage("iframe"),
+    "The iframe has been added to the page"
+  );
+
+  info("Select node inside iframe.");
+  await selectNodeInFrames(["iframe", "#in-frame"], inspector);
+
+  const markupLoaded = inspector.once("markuploaded");
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  info("Waiting for markupview to load after reload.");
+  await markupLoaded;
+
+  const rootNodeFront = await getNodeFront("body", inspector);
+
+  is(
+    inspector.selection.nodeFront,
+    rootNodeFront,
+    "body node selected after reload."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_reload_nested_iframe.js b/devtools/client/inspector/test/browser_inspector_reload_nested_iframe.js
new file mode 100644
index 0000000000..46486996e3
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload_nested_iframe.js
@@ -0,0 +1,50 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Check that the markup view selection is preserved even if the selection is
+// in a nested iframe.
+
+const NESTED_IFRAME_URL = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
+  "<h3>second level iframe</h3>"
+)}&delay=500`;
+
+const TEST_URI = `data:text/html;charset=utf-8,
+  <h1>Top-level</h1>
+  <iframe id=first-level
+    src='data:text/html;charset=utf-8,${encodeURIComponent(
+      `<h2>first level iframe</h2><iframe id=second-level src="${NESTED_IFRAME_URL}"></iframe>`
+    )}'
+  ></iframe>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  await selectNodeInFrames(
+    ["iframe#first-level", "iframe#second-level", "h3"],
+    inspector
+  );
+
+  const markupLoaded = inspector.once("markuploaded");
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  info("Waiting for markupview to load after reload.");
+  await markupLoaded;
+
+  // This was broken at some point, see Bug 1733539.
+  ok(true, "The markup did reload fine");
+
+  const reloadedNodeFront = await getNodeFrontInFrames(
+    ["iframe#first-level", "iframe#second-level", "h3"],
+    inspector
+  );
+
+  is(
+    inspector.selection.nodeFront,
+    reloadedNodeFront,
+    `h3 selected after reload`
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_reload_shadow_dom.js b/devtools/client/inspector/test/browser_inspector_reload_shadow_dom.js
new file mode 100644
index 0000000000..1bcdeb9ff6
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload_shadow_dom.js
@@ -0,0 +1,61 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Check that the markup view selection is preserved even if the selection is in shadow-dom.
+
+const HTML = `
+    <html>
+      <head>
+        <meta charset="utf8">
+        <title>Test</title>
+      </head>
+      <body>
+        <h1>Shadow DOM test</h1>
+        <test-component>
+          <div slot="slot1" id="el1">content</div>
+        </test-component>
+        <script>
+          'use strict';
+
+          customElements.define('test-component', class extends HTMLElement {
+            constructor() {
+              super();
+              const shadowRoot = this.attachShadow({mode: 'open'});
+              shadowRoot.innerHTML = '<slot class="slot-class" name="slot1"></slot>';
+            }
+          });
+        </script>
+      </body>
+    </html>
+`;
+
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  info("Select node in shadow DOM");
+  const nodeFront = await getNodeFrontInShadowDom(
+    "slot",
+    "test-component",
+    inspector
+  );
+  await selectNode(nodeFront, inspector);
+
+  info("Reloading page.");
+  await navigateTo(TEST_URI);
+
+  const reloadedNodeFront = await getNodeFrontInShadowDom(
+    "slot",
+    "test-component",
+    inspector
+  );
+
+  is(
+    inspector.selection.nodeFront,
+    reloadedNodeFront,
+    "<slot> is selected after reload."
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_reload_xul.js b/devtools/client/inspector/test/browser_inspector_reload_xul.js
new file mode 100644
index 0000000000..dbbe906a09
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_reload_xul.js
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+// Tests for inspecting a node on a XUL document, spanning a tab reload.
+
+const TEST_URI = URL_ROOT_SSL + "doc_inspector_reload_xul.xhtml";
+
+add_task(async function () {
+  const { tab, inspector, toolbox } = await openInspectorForURL(TEST_URI);
+  await testToolboxInitialization(tab, inspector, toolbox);
+});
+
+async function testToolboxInitialization(tab, inspector, toolbox) {
+  ok(true, "Inspector started, and notification received.");
+  ok(inspector, "Inspector instance is accessible.");
+
+  await selectNode("#p", inspector);
+  await testMarkupView("#p", inspector);
+
+  info("Reloading the page.");
+  await navigateTo(TEST_URI);
+
+  await selectNode("#q", inspector);
+  await testMarkupView("#q", inspector);
+
+  info("Destroying toolbox.");
+  await toolbox.destroy();
+
+  ok(true, "'destroyed' notification received.");
+  const toolboxForTab = gDevTools.getToolboxForTab(tab);
+  ok(!toolboxForTab, "Toolbox destroyed.");
+}
+
+async function testMarkupView(selector, inspector) {
+  const nodeFront = await getNodeFront(selector, inspector);
+  try {
+    is(
+      inspector.selection.nodeFront,
+      nodeFront,
+      "Right node is selected in the markup view"
+    );
+  } catch (ex) {
+    ok(false, "Got exception while resolving selected node of markup view.");
+    console.error(ex);
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_remove-iframe-during-load.js b/devtools/client/inspector/test/browser_inspector_remove-iframe-during-load.js
new file mode 100644
index 0000000000..c11957424d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_remove-iframe-during-load.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing that the inspector doesn't go blank when navigating to a page that
+// deletes an iframe while loading.
+
+const TEST_URL = URL_ROOT + "doc_inspector_remove-iframe-during-load.html";
+
+add_task(async function () {
+  const { inspector, tab } = await openInspectorForURL("about:blank");
+  await selectNode("body", inspector);
+
+  // Before we start navigating, attach a listener on the reloaded event.
+  const onInspectorReloaded = inspector.once("reloaded");
+
+  // Note: here we don't want to use the `navigateTo` helper from shared-head.js
+  // because we want to modify the page as early as possible after the
+  // navigation, ideally before the inspector has fully initialized.
+  // See next comments.
+  const browser = tab.linkedBrowser;
+  const onBrowserLoaded = BrowserTestUtils.browserLoaded(browser);
+  BrowserTestUtils.startLoadingURIString(browser, TEST_URL);
+  await onBrowserLoaded;
+
+  // We do not want to wait for the inspector to be fully ready before testing
+  // so we load TEST_URL and just wait for the content window to be done loading
+  await SpecialPowers.spawn(browser, [], async function () {
+    await content.wrappedJSObject.readyPromise;
+  });
+
+  // The content doc contains a script that creates iframes and deletes them
+  // immediately after. It does this before the load event, after
+  // DOMContentLoaded and after load. This is what used to make the inspector go
+  // blank when navigating to that page.
+  // At this stage, there should be no iframes in the page anymore.
+  ok(
+    !(await contentPageHasNode(browser, "iframe")),
+    "Iframes added by the content page should have been removed"
+  );
+
+  // Create/remove an extra one now, after the load event.
+  info("Creating and removing an iframe.");
+  await SpecialPowers.spawn(browser, [], async function () {
+    const iframe = content.document.createElement("iframe");
+    content.document.body.appendChild(iframe);
+    iframe.remove();
+  });
+
+  ok(
+    !(await contentPageHasNode(browser, "iframe")),
+    "The after-load iframe should have been removed."
+  );
+
+  // Assert that the markup-view is displayed and works
+  ok(!(await contentPageHasNode(browser, "iframe")), "Iframe has been removed");
+
+  const expectedText = await SpecialPowers.spawn(
+    browser,
+    [],
+    async function () {
+      return content.document.querySelector("#yay").textContent;
+    }
+  );
+  is(expectedText, "load", "Load event fired.");
+
+  info("Wait for the inspector to be properly reloaded");
+  await onInspectorReloaded;
+
+  // Smoke test to check that the inspector can still select nodes and hasn't
+  // gone blank.
+  await selectNode("#yay", inspector);
+});
+
+function contentPageHasNode(browser, selector) {
+  return SpecialPowers.spawn(
+    browser,
+    [selector],
+    async function (selectorChild) {
+      return !!content.document.querySelector(selectorChild);
+    }
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-01.js b/devtools/client/inspector/test/browser_inspector_search-01.js
new file mode 100644
index 0000000000..3d56252f25
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-01.js
@@ -0,0 +1,110 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that searching for nodes in the search field actually selects those
+// nodes.
+
+const TEST_URL = URL_ROOT + "doc_inspector_search.html";
+
+// The various states of the inspector: [key, id, isValid]
+// [
+//  what key to press,
+//  what id should be selected after the keypress,
+//  is the searched text valid selector
+// ]
+const KEY_STATES = [
+  ["#", "b1", true], // #
+  ["d", "b1", true], // #d
+  ["1", "b1", true], // #d1
+  ["VK_RETURN", "d1", true], // #d1
+  ["VK_BACK_SPACE", "d1", true], // #d
+  ["2", "d1", true], // #d2
+  ["VK_RETURN", "d2", true], // #d2
+  ["2", "d2", true], // #d22
+  ["VK_RETURN", "d2", false], // #d22
+  ["VK_BACK_SPACE", "d2", false], // #d2
+  ["VK_RETURN", "d2", true], // #d2
+  ["VK_BACK_SPACE", "d2", true], // #d
+  ["1", "d2", true], // #d1
+  ["VK_RETURN", "d1", true], // #d1
+  ["VK_BACK_SPACE", "d1", true], // #d
+  ["VK_BACK_SPACE", "d1", true], // #
+  ["VK_BACK_SPACE", "d1", true], //
+  ["d", "d1", true], // d
+  ["i", "d1", true], // di
+  ["v", "d1", true], // div
+  [".", "d1", true], // div.
+  ["c", "d1", true], // div.c
+  ["VK_UP", "d1", true], // div.c1
+  ["VK_TAB", "d1", true], // div.c1
+  ["VK_RETURN", "d2", true], // div.c1
+  ["VK_BACK_SPACE", "d2", true], // div.c
+  ["VK_BACK_SPACE", "d2", true], // div.
+  ["VK_BACK_SPACE", "d2", true], // div
+  ["VK_BACK_SPACE", "d2", true], // di
+  ["VK_BACK_SPACE", "d2", true], // d
+  ["VK_BACK_SPACE", "d2", true], //
+  [".", "d2", true], // .
+  ["c", "d2", true], // .c
+  ["1", "d2", true], // .c1
+  ["VK_RETURN", "d2", true], // .c1
+  ["VK_RETURN", "s2", true], // .c1
+  ["VK_RETURN", "p1", true], // .c1
+  ["P", "p1", true], // .c1P
+  ["VK_RETURN", "p1", false], // .c1P
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { searchBox } = inspector;
+
+  await selectNode("#b1", inspector);
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  let index = 0;
+  for (const [key, id, isValid] of KEY_STATES) {
+    const promises = [];
+    info(index + ": Pressing key " + key + " to get id " + id + ".");
+
+    info("Waiting for current key press processing to complete");
+    promises.push(inspector.searchSuggestions.once("processing-done"));
+
+    if (key === "VK_RETURN") {
+      info("Waiting for " + (isValid ? "NO " : "") + "results");
+      promises.push(inspector.search.once("search-result"));
+    }
+
+    info("Waiting for search query to complete");
+    promises.push(inspector.searchSuggestions.once("processing-done"));
+
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+
+    await Promise.all(promises);
+    info(
+      "The keypress press process, any possible search results and the search query are complete."
+    );
+
+    info(
+      inspector.selection.nodeFront.id +
+        " is selected with text " +
+        searchBox.value
+    );
+    const nodeFront = await getNodeFront("#" + id, inspector);
+    is(
+      inspector.selection.nodeFront,
+      nodeFront,
+      "Correct node is selected for state " + index
+    );
+
+    is(
+      !searchBox.parentNode.classList.contains("devtools-searchbox-no-match"),
+      isValid,
+      "Correct searchbox result state for state " + index
+    );
+
+    index++;
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-02.js b/devtools/client/inspector/test/browser_inspector_search-02.js
new file mode 100644
index 0000000000..767c0428a5
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-02.js
@@ -0,0 +1,155 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing that searching for combining selectors using the inspector search
+// field produces correct suggestions.
+
+const TEST_URL = URL_ROOT + "doc_inspector_search-suggestions.html";
+
+// An array of (key, suggestions) pairs where key is a key to press and
+// suggestions is an array of suggestions that should be shown in the popup.
+// Suggestion is an object with label of the entry and optional count
+// (defaults to 1)
+const TEST_DATA = [
+  {
+    key: "d",
+    suggestions: [{ label: "div" }, { label: "#d1" }, { label: "#d2" }],
+  },
+  {
+    key: "i",
+    suggestions: [{ label: "div" }],
+  },
+  {
+    key: "v",
+    suggestions: [],
+  },
+  {
+    key: " ",
+    suggestions: [{ label: "div div" }, { label: "div span" }],
+  },
+  {
+    key: ">",
+    suggestions: [{ label: "div >div" }, { label: "div >span" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div div" }, { label: "div span" }],
+  },
+  {
+    key: "+",
+    suggestions: [{ label: "div +span" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div div" }, { label: "div span" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div" }, { label: "#d1" }, { label: "#d2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "p",
+    suggestions: [
+      { label: "p" },
+      { label: "#p1" },
+      { label: "#p2" },
+      { label: "#p3" },
+    ],
+  },
+  {
+    key: " ",
+    suggestions: [{ label: "p strong" }],
+  },
+  {
+    key: "+",
+    suggestions: [{ label: "p +button" }, { label: "p +p" }],
+  },
+  {
+    key: "b",
+    suggestions: [{ label: "p +button" }],
+  },
+  {
+    key: "u",
+    suggestions: [{ label: "p +button" }],
+  },
+  {
+    key: "t",
+    suggestions: [{ label: "p +button" }],
+  },
+  {
+    key: "t",
+    suggestions: [{ label: "p +button" }],
+  },
+  {
+    key: "o",
+    suggestions: [{ label: "p +button" }],
+  },
+  {
+    key: "n",
+    suggestions: [],
+  },
+  {
+    key: "+",
+    suggestions: [{ label: "p +button+p" }],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const searchBox = inspector.searchBox;
+  const popup = inspector.searchSuggestions.searchPopup;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const { key, suggestions } of TEST_DATA) {
+    info("Pressing " + key + " to get " + formatSuggestions(suggestions));
+
+    const command = once(searchBox, "input");
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await command;
+
+    info("Waiting for search query to complete");
+    await onSearchProcessingDone;
+
+    info(
+      "Query completed. Performing checks for input '" +
+        searchBox.value +
+        "' - key pressed: " +
+        key
+    );
+    const actualSuggestions = popup.getItems();
+
+    is(
+      popup.isOpen ? actualSuggestions.length : 0,
+      suggestions.length,
+      "There are expected number of suggestions."
+    );
+
+    for (let i = 0; i < suggestions.length; i++) {
+      is(
+        actualSuggestions[i].label,
+        suggestions[i].label,
+        "The suggestion at " + i + "th index is correct."
+      );
+    }
+  }
+});
+
+function formatSuggestions(suggestions) {
+  return "[" + suggestions.map(s => "'" + s.label + "'").join(", ") + "]";
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-03.js b/devtools/client/inspector/test/browser_inspector_search-03.js
new file mode 100644
index 0000000000..7ecb390b47
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-03.js
@@ -0,0 +1,228 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing that searching for elements using the inspector search field
+// produces correct suggestions.
+
+const TEST_URL = URL_ROOT + "doc_inspector_search.html";
+
+// An array of (key, suggestions) pairs where key is a key to press and
+// suggestions is an array of suggestions that should be shown in the popup.
+// Suggestion is an object with label of the entry and optional count
+// (defaults to 1)
+var TEST_DATA = [
+  {
+    key: "d",
+    suggestions: [{ label: "div" }, { label: "#d1" }, { label: "#d2" }],
+  },
+  {
+    key: "i",
+    suggestions: [{ label: "div" }],
+  },
+  {
+    key: "v",
+    suggestions: [],
+  },
+  {
+    key: ".",
+    suggestions: [{ label: "div.c1" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "#",
+    suggestions: [{ label: "div#d1" }, { label: "div#d2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div" }, { label: "#d1" }, { label: "#d2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: ".",
+    suggestions: [{ label: ".c1" }, { label: ".c2" }],
+  },
+  {
+    key: "c",
+    suggestions: [{ label: ".c1" }, { label: ".c2" }],
+  },
+  {
+    key: "2",
+    suggestions: [],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: ".c1" }, { label: ".c2" }],
+  },
+  {
+    key: "1",
+    suggestions: [],
+  },
+  {
+    key: "#",
+    suggestions: [{ label: "#d2" }, { label: "#p1" }, { label: "#s2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: ".c1" }, { label: ".c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: ".c1" }, { label: ".c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "#",
+    suggestions: [
+      { label: "#b1" },
+      { label: "#d1" },
+      { label: "#d2" },
+      { label: "#p1" },
+      { label: "#p2" },
+      { label: "#p3" },
+      { label: "#root" },
+      { label: "#s1" },
+      { label: "#s2" },
+    ],
+  },
+  {
+    key: "p",
+    suggestions: [{ label: "#p1" }, { label: "#p2" }, { label: "#p3" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [
+      { label: "#b1" },
+      { label: "#d1" },
+      { label: "#d2" },
+      { label: "#p1" },
+      { label: "#p2" },
+      { label: "#p3" },
+      { label: "#root" },
+      { label: "#s1" },
+      { label: "#s2" },
+    ],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "p",
+    suggestions: [
+      { label: "p" },
+      { label: "#p1" },
+      { label: "#p2" },
+      { label: "#p3" },
+    ],
+  },
+  {
+    key: "[",
+    suggestions: [],
+  },
+  {
+    key: "i",
+    suggestions: [],
+  },
+  {
+    key: "d",
+    suggestions: [],
+  },
+  {
+    key: "*",
+    suggestions: [],
+  },
+  {
+    key: "=",
+    suggestions: [],
+  },
+  {
+    key: "p",
+    suggestions: [],
+  },
+  {
+    key: "]",
+    suggestions: [],
+  },
+  {
+    key: ".",
+    suggestions: [{ label: "p[id*=p].c1" }, { label: "p[id*=p].c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "#",
+    suggestions: [
+      { label: "p[id*=p]#p1" },
+      { label: "p[id*=p]#p2" },
+      { label: "p[id*=p]#p3" },
+    ],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const searchBox = inspector.searchBox;
+  const popup = inspector.searchSuggestions.searchPopup;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const { key, suggestions } of TEST_DATA) {
+    info("Pressing " + key + " to get " + formatSuggestions(suggestions));
+
+    const command = once(searchBox, "input");
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await command;
+
+    info("Waiting for search query to complete");
+    await onSearchProcessingDone;
+
+    info(
+      "Query completed. Performing checks for input '" + searchBox.value + "'"
+    );
+    const actualSuggestions = popup.getItems();
+
+    is(
+      popup.isOpen ? actualSuggestions.length : 0,
+      suggestions.length,
+      "There are expected number of suggestions."
+    );
+
+    for (let i = 0; i < suggestions.length; i++) {
+      is(
+        actualSuggestions[i].label,
+        suggestions[i].label,
+        "The suggestion at " + i + "th index is correct."
+      );
+    }
+  }
+});
+
+function formatSuggestions(suggestions) {
+  return "[" + suggestions.map(s => "'" + s.label + "'").join(", ") + "]";
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-04.js b/devtools/client/inspector/test/browser_inspector_search-04.js
new file mode 100644
index 0000000000..ff4c789b24
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-04.js
@@ -0,0 +1,115 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing that searching for elements inside iframes does work.
+
+const IFRAME_SRC = "doc_inspector_search.html";
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  '<div class="c1 c2">' +
+  '<iframe src="' +
+  URL_ROOT +
+  IFRAME_SRC +
+  '"></iframe>' +
+  '<iframe src="' +
+  URL_ROOT +
+  IFRAME_SRC +
+  '"></iframe>';
+
+// An array of (key, suggestions) pairs where key is a key to press and
+// suggestions is an array of suggestions that should be shown in the popup.
+// Suggestion is an object with label of the entry and optional count
+// (defaults to 1)
+var TEST_DATA = [
+  {
+    key: "d",
+    suggestions: [{ label: "div" }, { label: "#d1" }, { label: "#d2" }],
+  },
+  {
+    key: "i",
+    suggestions: [{ label: "div" }],
+  },
+  {
+    key: "v",
+    suggestions: [],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "div" }, { label: "#d1" }, { label: "#d2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: ".",
+    suggestions: [{ label: ".c1" }, { label: ".c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "#",
+    suggestions: [
+      { label: "#b1" },
+      { label: "#d1" },
+      { label: "#d2" },
+      { label: "#p1" },
+      { label: "#p2" },
+      { label: "#p3" },
+      { label: "#root" },
+      { label: "#s1" },
+      { label: "#s2" },
+    ],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const searchBox = inspector.searchBox;
+  const popup = inspector.searchSuggestions.searchPopup;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const { key, suggestions } of TEST_DATA) {
+    info("Pressing " + key + " to get " + formatSuggestions(suggestions));
+
+    const command = once(searchBox, "input");
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await command;
+
+    info("Waiting for search query to complete");
+    await onSearchProcessingDone;
+
+    info(
+      "Query completed. Performing checks for input '" + searchBox.value + "'"
+    );
+    const actualSuggestions = popup.getItems();
+
+    is(
+      popup.isOpen ? actualSuggestions.length : 0,
+      suggestions.length,
+      "There are expected number of suggestions."
+    );
+
+    for (let i = 0; i < suggestions.length; i++) {
+      is(
+        actualSuggestions[i].label,
+        suggestions[i].label,
+        "The suggestion at " + i + "th index is correct."
+      );
+    }
+  }
+});
+
+function formatSuggestions(suggestions) {
+  return "[" + suggestions.map(s => "'" + s.label + "'").join(", ") + "]";
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-05.js b/devtools/client/inspector/test/browser_inspector_search-05.js
new file mode 100644
index 0000000000..7be5c66d56
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-05.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing that when search results contain suggestions for nodes in other
+// frames, selecting these suggestions actually selects the right nodes.
+
+requestLongerTimeout(2);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    `${URL_ROOT_ORG_SSL}doc_inspector_search-iframes.html`
+  );
+
+  info("Focus the search box");
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  info("Enter # to search for all ids");
+  let processingDone = once(inspector.searchSuggestions, "processing-done");
+  EventUtils.synthesizeKey("#", {}, inspector.panelWin);
+
+  info("Wait for search query to complete");
+  await processingDone;
+
+  info("Press tab to fill the search input with the first suggestion");
+  processingDone = once(inspector.searchSuggestions, "processing-done");
+  EventUtils.synthesizeKey("VK_TAB", {}, inspector.panelWin);
+  await processingDone;
+
+  info("Press enter and expect a new selection");
+  let onSelect = inspector.once("inspector-updated");
+  EventUtils.synthesizeKey("VK_RETURN", {}, inspector.panelWin);
+  await onSelect;
+
+  await checkCorrectButton(inspector, ["#iframe-1"]);
+
+  info("Press enter to cycle through multiple nodes matching this suggestion");
+  onSelect = inspector.once("inspector-updated");
+  EventUtils.synthesizeKey("VK_RETURN", {}, inspector.panelWin);
+  await onSelect;
+
+  await checkCorrectButton(inspector, ["#iframe-2"]);
+
+  info("Press enter to cycle through multiple nodes matching this suggestion");
+  onSelect = inspector.once("inspector-updated");
+  EventUtils.synthesizeKey("VK_RETURN", {}, inspector.panelWin);
+  await onSelect;
+
+  await checkCorrectButton(inspector, ["#iframe-3"]);
+
+  info("Press enter to cycle through multiple nodes matching this suggestion");
+  onSelect = inspector.once("inspector-updated");
+  EventUtils.synthesizeKey("VK_RETURN", {}, inspector.panelWin);
+  await onSelect;
+
+  await checkCorrectButton(inspector, ["#iframe-3", "#iframe-4"]);
+
+  info("Press enter to cycle through multiple nodes matching this suggestion");
+  onSelect = inspector.once("inspector-updated");
+  EventUtils.synthesizeKey("VK_RETURN", {}, inspector.panelWin);
+  await onSelect;
+
+  await checkCorrectButton(inspector, ["#iframe-1"]);
+});
+
+const checkCorrectButton = async function (inspector, frameSelector) {
+  const nodeFrontInfo = await getSelectedNodeFrontInfo(inspector);
+  is(nodeFrontInfo.nodeFront.id, "b1", "The selected node is #b1");
+  is(
+    nodeFrontInfo.nodeFront.tagName.toLowerCase(),
+    "button",
+    "The selected node is <button>"
+  );
+
+  const iframe = await getNodeFrontInFrames(frameSelector, inspector);
+  const expectedDocument = (await iframe.walkerFront.children(iframe)).nodes[0];
+
+  is(
+    nodeFrontInfo.document,
+    expectedDocument,
+    "The selected node is in " + frameSelector
+  );
+};
+/**
+ * Gets the currently selected nodefront. It also finds the
+ * document node which contains the node.
+ * @param   {Object} inspector
+ * @returns {Object}
+ *          nodeFront - The currently selected nodeFront
+ *          document - The document which contains the node.
+ *
+ */
+async function getSelectedNodeFrontInfo(inspector) {
+  const { selection, commands } = inspector;
+
+  const nodeFront = selection.nodeFront;
+  const inspectors = await commands.inspectorCommand.getAllInspectorFronts();
+
+  for (let i = 0; i < inspectors.length; i++) {
+    const inspectorFront = inspectors[i];
+    if (inspectorFront.walker == nodeFront.walkerFront) {
+      const document = await inspectorFront.walker.document(nodeFront);
+      return { nodeFront, document };
+    }
+  }
+  return null;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-06.js b/devtools/client/inspector/test/browser_inspector_search-06.js
new file mode 100644
index 0000000000..96dab6dd2b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-06.js
@@ -0,0 +1,103 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that searching again for nodes after they are removed or added from the
+// DOM works correctly.
+
+const TEST_URL = URL_ROOT + "doc_inspector_search.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Searching for test node #d1");
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+  await synthesizeKeys(["#", "d", "1", "VK_RETURN"], inspector);
+
+  await inspector.search.once("search-result");
+  assertHasResult(inspector, true);
+
+  info("Removing node #d1");
+  // Expect an inspector-updated event here, because removing #d1 causes the
+  // breadcrumbs to update (since #d1 is displayed in it).
+  const onUpdated = inspector.once("inspector-updated");
+  await mutatePage(inspector, () =>
+    content.document.getElementById("d1").remove()
+  );
+  await onUpdated;
+
+  info("Pressing return button to search again for node #d1.");
+  await synthesizeKeys("VK_RETURN", inspector);
+
+  await inspector.search.once("search-result");
+  assertHasResult(inspector, false);
+
+  info("Emptying the field and searching for a node that doesn't exist: #d3");
+  const keys = [
+    "VK_BACK_SPACE",
+    "VK_BACK_SPACE",
+    "VK_BACK_SPACE",
+    "#",
+    "d",
+    "3",
+    "VK_RETURN",
+  ];
+  await synthesizeKeys(keys, inspector);
+
+  await inspector.search.once("search-result");
+  assertHasResult(inspector, false);
+
+  info("Create the #d3 node in the page");
+  // No need to expect an inspector-updated event here, Creating #d3 isn't going
+  // to update the breadcrumbs in any ways.
+  await mutatePage(inspector, () =>
+    content.document
+      .getElementById("d2")
+      .insertAdjacentHTML("afterend", "<div id=d3></div>")
+  );
+
+  info("Pressing return button to search again for node #d3.");
+  await synthesizeKeys("VK_RETURN", inspector);
+
+  await inspector.search.once("search-result");
+  assertHasResult(inspector, true);
+
+  // Catch-all event for remaining server requests when searching for the new
+  // node.
+  await inspector.once("inspector-updated");
+});
+
+async function synthesizeKeys(keys, inspector) {
+  if (typeof keys === "string") {
+    keys = [keys];
+  }
+
+  for (const key of keys) {
+    info("Synthesizing key " + key + " in the search box");
+    const eventHandled = once(inspector.searchBox, "keypress", true);
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await eventHandled;
+    info("Waiting for the search query to complete");
+    await onSearchProcessingDone;
+  }
+}
+
+function assertHasResult(inspector, expectResult) {
+  is(
+    inspector.searchBox.parentNode.classList.contains(
+      "devtools-searchbox-no-match"
+    ),
+    !expectResult,
+    "There are" + (expectResult ? "" : " no") + " search results"
+  );
+}
+
+async function mutatePage(inspector, mutationFn) {
+  const onMutation = inspector.once("markupmutation");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], mutationFn);
+  await onMutation;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-07.js b/devtools/client/inspector/test/browser_inspector_search-07.js
new file mode 100644
index 0000000000..e112fca944
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-07.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that searching for classes on SVG elements does work (see bug 1219920).
+
+const TEST_URL = URL_ROOT + "doc_inspector_search-svg.html";
+
+// An array of (key, suggestions) pairs where key is a key to press and
+// suggestions is an array of suggestions that should be shown in the popup.
+const TEST_DATA = [
+  {
+    key: "c",
+    suggestions: ["circle", "clipPath", ".class1", ".class2"],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: ".",
+    suggestions: [".class1", ".class2"],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { searchBox } = inspector;
+  const popup = inspector.searchSuggestions.searchPopup;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const { key, suggestions } of TEST_DATA) {
+    info("Pressing " + key + " to get " + suggestions);
+
+    const command = once(searchBox, "input");
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await command;
+
+    info("Waiting for search query to complete and getting the suggestions");
+    await onSearchProcessingDone;
+    const actualSuggestions = popup.getItems();
+
+    is(
+      popup.isOpen ? actualSuggestions.length : 0,
+      suggestions.length,
+      "There are expected number of suggestions."
+    );
+
+    for (let i = 0; i < suggestions.length; i++) {
+      is(
+        actualSuggestions[i].label,
+        suggestions[i],
+        "The suggestion at " + i + "th index is correct."
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-08.js b/devtools/client/inspector/test/browser_inspector_search-08.js
new file mode 100644
index 0000000000..64c62d8b1a
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-08.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that searching for namespaced elements does work.
+
+const XHTML = `
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg">
+    <body>
+      <svg:svg width="100" height="100">
+        <svg:clipPath>
+          <svg:rect x="0" y="0" width="10" height="5"></svg:rect>
+        </svg:clipPath>
+        <svg:circle cx="0" cy="0" r="5"></svg:circle>
+      </svg:svg>
+    </body>
+  </html>
+`;
+
+const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
+
+// An array of (key, suggestions) pairs where key is a key to press and
+// suggestions is an array of suggestions that should be shown in the popup.
+const TEST_DATA = [
+  {
+    key: "c",
+    suggestions: ["circle", "clipPath"],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "s",
+    suggestions: ["svg"],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+  const { searchBox } = inspector;
+  const popup = inspector.searchSuggestions.searchPopup;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const { key, suggestions } of TEST_DATA) {
+    info("Pressing " + key + " to get " + suggestions.join(", "));
+
+    const command = once(searchBox, "input");
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await command;
+
+    info("Waiting for search query to complete and getting the suggestions");
+    await onSearchProcessingDone;
+    const actualSuggestions = popup.getItems();
+
+    is(
+      popup.isOpen ? actualSuggestions.length : 0,
+      suggestions.length,
+      "There are expected number of suggestions."
+    );
+
+    for (let i = 0; i < suggestions.length; i++) {
+      is(
+        actualSuggestions[i].label,
+        suggestions[i],
+        "The suggestion at " + i + "th index is correct."
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-09.js b/devtools/client/inspector/test/browser_inspector_search-09.js
new file mode 100644
index 0000000000..f61d1c9213
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-09.js
@@ -0,0 +1,112 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that searching for XPaths via the search field actually selects the
+// matching nodes.
+
+const TEST_URL = URL_ROOT + "doc_inspector_search.html";
+
+// The various states of the inspector: [key, id, isTextNode, isValid]
+// [
+//  what key to press,
+//  what id should be selected after the keypress,
+//  is the selected node a text node,
+//  is the searched text valid selector
+// ]
+const KEY_STATES = [
+  ["/", "b1", false, true], // /
+  ["*", "b1", false, true], // /*
+  ["VK_RETURN", "root", false, true], // /*
+  ["VK_BACK_SPACE", "root", false, true], // /
+  ["/", "root", false, true], // //
+  ["d", "root", false, true], // //d
+  ["i", "root", false, true], // //di
+  ["v", "root", false, true], // //div
+  ["VK_RETURN", "d1", false, true], // //div
+  ["VK_RETURN", "d2", false, true], // //div
+  ["VK_RETURN", "d1", false, true], // //div
+  ["VK_BACK_SPACE", "d1", false, true], // //di
+  ["VK_BACK_SPACE", "d1", false, true], // //d
+  ["VK_BACK_SPACE", "d1", false, true], // //
+  ["s", "d1", false, true], // //s
+  ["p", "d1", false, true], // //sp
+  ["a", "d1", false, true], // //spa
+  ["n", "d1", false, true], // //span
+  ["/", "d1", false, true], // //span/
+  ["t", "d1", false, true], // //span/t
+  ["e", "d1", false, true], // //span/te
+  ["x", "d1", false, true], // //span/tex
+  ["t", "d1", false, true], // //span/text
+  ["(", "d1", false, true], // //span/text(
+  [")", "d1", false, true], // //span/text()
+  ["VK_RETURN", "s1", false, true], // //span/text()
+  ["VK_RETURN", "s2", true, true], // //span/text()
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { searchBox } = inspector;
+
+  await selectNode("#b1", inspector);
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  let index = 0;
+  for (const [key, id, isTextNode, isValid] of KEY_STATES) {
+    info(index + ": Pressing key " + key + " to get id " + id + ".");
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    const onSearchResult = inspector.search.once("search-result");
+    EventUtils.synthesizeKey(
+      key,
+      { shiftKey: key === "*" },
+      inspector.panelWin
+    );
+
+    if (key === "VK_RETURN") {
+      info("Waiting for " + (isValid ? "NO " : "") + "results");
+      await onSearchResult;
+    }
+
+    info("Waiting for search query to complete");
+    await onSearchProcessingDone;
+
+    if (isTextNode) {
+      info(
+        "Text node of " +
+          inspector.selection.nodeFront.parentNode.id +
+          " is selected with text " +
+          searchBox.value
+      );
+
+      is(
+        inspector.selection.nodeFront.nodeType,
+        Node.TEXT_NODE,
+        "Correct node is selected for state " + index
+      );
+    } else {
+      info(
+        inspector.selection.nodeFront.id +
+          " is selected with text " +
+          searchBox.value
+      );
+
+      const nodeFront = await getNodeFront("#" + id, inspector);
+      is(
+        inspector.selection.nodeFront,
+        nodeFront,
+        "Correct node is selected for state " + index
+      );
+    }
+
+    is(
+      !searchBox.parentNode.classList.contains("devtools-searchbox-no-match"),
+      isValid,
+      "Correct searchbox result state for state " + index
+    );
+
+    index++;
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-10.js b/devtools/client/inspector/test/browser_inspector_search-10.js
new file mode 100644
index 0000000000..2912c9588b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-10.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Bug 1830111 - Test that searching elements while having hidden <iframe> works
+
+const HTML = `
+  <!DOCTYPE html>
+  <html>
+    <body>
+      <!-- The nested iframe, will be a children node of the top iframe
+           but won't be displayed, not considered as valid children by the inspector -->
+      <iframe><iframe></iframe></iframe>
+      <div>after iframe</<div>
+      <script>
+        document.querySelector("iframe").appendChild(document.createElement("iframe"));
+      </script>
+    </body>
+  </html>
+`;
+
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  const onSearchProcessingDone =
+    inspector.searchSuggestions.once("processing-done");
+  synthesizeKeys("div", inspector.panelWin);
+  info("Waiting for search query to complete");
+  await onSearchProcessingDone;
+
+  const popup = inspector.searchSuggestions.searchPopup;
+  const actualSuggestions = popup.getItems().map(item => item.label);
+  Assert.deepEqual(
+    actualSuggestions,
+    ["div"],
+    "autocomplete popup displays the right suggestions"
+  );
+
+  const onSearchResult = inspector.search.once("search-result");
+  EventUtils.synthesizeKey("VK_RETURN", {}, inspector.panelWin);
+
+  info("Waiting for results");
+  await onSearchResult;
+
+  const nodeFront = await getNodeFront("div", inspector);
+  is(inspector.selection.nodeFront, nodeFront, "The <div> element is selected");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-clear.js b/devtools/client/inspector/test/browser_inspector_search-clear.js
new file mode 100644
index 0000000000..8056296907
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-clear.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Bug 1295081 Test searchbox clear button's display behavior is correct
+
+const XHTML = `
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg">
+    <body>
+      <svg:svg width="100" height="100">
+        <svg:clipPath>
+          <svg:rect x="0" y="0" width="10" height="5"></svg:rect>
+        </svg:clipPath>
+        <svg:circle cx="0" cy="0" r="5"></svg:circle>
+      </svg:svg>
+    </body>
+  </html>
+`;
+
+const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
+
+// Type "d" in inspector-searchbox, Enter [Back space] key and check if the
+// clear button is shown correctly
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URI);
+  const { searchBox, searchClearButton } = inspector;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  info("Type d and the clear button will be shown");
+
+  const command = once(searchBox, "input");
+  let onSearchProcessingDone =
+    inspector.searchSuggestions.once("processing-done");
+  EventUtils.synthesizeKey("c", {}, inspector.panelWin);
+  await command;
+
+  info("Waiting for search query to complete and getting the suggestions");
+  await onSearchProcessingDone;
+
+  ok(
+    !searchClearButton.hidden,
+    "The clear button is shown when some word is in searchBox"
+  );
+
+  onSearchProcessingDone = inspector.searchSuggestions.once("processing-done");
+  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, inspector.panelWin);
+  await command;
+
+  info("Waiting for search query to complete and getting the suggestions");
+  await onSearchProcessingDone;
+
+  ok(
+    searchClearButton.hidden,
+    "The clear button is hidden when no word is in searchBox"
+  );
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js b/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js
new file mode 100644
index 0000000000..dad2ffa0b8
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js
@@ -0,0 +1,109 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test inspector's markup view search filter context menu works properly.
+
+const TEST_INPUT = "h1";
+const TEST_URI = "<h1>test filter context menu</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector } = await openInspector();
+  const { searchBox } = inspector;
+  await selectNode("h1", inspector);
+
+  emptyClipboard();
+
+  info("Opening context menu");
+  const onFocus = once(searchBox, "focus");
+  searchBox.focus();
+  await onFocus;
+
+  let onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchBox);
+  await onContextMenuOpen;
+
+  let searchContextMenu = toolbox.getTextBoxContextMenu();
+  ok(
+    searchContextMenu,
+    "The search filter context menu is loaded in the computed view"
+  );
+
+  let cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  let cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  let cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  let cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  let cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  let cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
+  is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
+  is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
+
+  if (isWindows()) {
+    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
+    is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
+  }
+
+  info("Closing context menu");
+  let onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+
+  info("Copy text in search field using the context menu");
+  const onSearchProcessingDone =
+    inspector.searchSuggestions.once("processing-done");
+  searchBox.setUserInput(TEST_INPUT);
+  searchBox.select();
+  searchBox.focus();
+
+  // We have to wait for search query to avoid test failure.
+  info("Waiting for search query to complete and getting the suggestions");
+  await onSearchProcessingDone;
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchBox);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+
+  // Simulating a click on cmdCopy will also close the context menu.
+  onContextMenuClose = toolbox.once("menu-close");
+
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  await waitForClipboardPromise(
+    () => searchContextMenu.activateItem(cmdCopy),
+    TEST_INPUT
+  );
+
+  info("Wait for context menu to close");
+  await onContextMenuClose;
+
+  info("Reopen context menu and check command properties");
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchBox);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+
+  const onContextMenuHidden = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuHidden;
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-label.js b/devtools/client/inspector/test/browser_inspector_search-label.js
new file mode 100644
index 0000000000..4a432c0c01
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-label.js
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that search label updated correctcly based on the search result.
+
+const TEST_URL = URL_ROOT + "doc_inspector_search.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { panelWin, searchResultsLabel } = inspector;
+
+  info("Searching for test node #d1");
+  // Expect the label shows 1 result
+  await focusSearchBoxUsingShortcut(panelWin);
+  synthesizeKeys("#d1", panelWin);
+  EventUtils.synthesizeKey("VK_RETURN", {}, panelWin);
+
+  await inspector.search.once("search-result");
+  is(searchResultsLabel.textContent, "1 of 1");
+
+  info("Click the clear button");
+  // Expect the label is cleared after clicking the clear button.
+
+  inspector.searchClearButton.click();
+  is(searchResultsLabel.textContent, "");
+
+  // Catch-all event for remaining server requests when searching for the new
+  // node.
+  await inspector.once("inspector-updated");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-navigation.js b/devtools/client/inspector/test/browser_inspector_search-navigation.js
new file mode 100644
index 0000000000..b53ac320a6
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-navigation.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Check that searchbox value is correct when suggestions popup is navigated
+// with keyboard.
+
+// Test data as pairs of [key to press, expected content of searchbox].
+const KEY_STATES = [
+  ["d", "d"],
+  ["i", "di"],
+  ["v", "div"],
+  [".", "div."],
+  ["VK_UP", "div.c1"],
+  ["VK_DOWN", "div.l1"],
+  ["VK_BACK_SPACE", "div.l"],
+  ["VK_TAB", "div.l1"],
+  [" ", "div.l1 "],
+  ["VK_UP", "div.l1 div"],
+  ["VK_UP", "div.l1 span"],
+  ["VK_UP", "div.l1 div"],
+  [".", "div.l1 div."],
+  ["VK_TAB", "div.l1 div.c1"],
+  ["VK_BACK_SPACE", "div.l1 div.c"],
+  ["VK_BACK_SPACE", "div.l1 div."],
+  ["VK_BACK_SPACE", "div.l1 div"],
+  ["VK_BACK_SPACE", "div.l1 di"],
+  ["VK_BACK_SPACE", "div.l1 d"],
+  ["VK_BACK_SPACE", "div.l1 "],
+  ["VK_UP", "div.l1 div"],
+  ["VK_BACK_SPACE", "div.l1 di"],
+  ["VK_BACK_SPACE", "div.l1 d"],
+  ["VK_BACK_SPACE", "div.l1 "],
+  ["VK_UP", "div.l1 div"],
+  ["VK_UP", "div.l1 span"],
+  ["VK_UP", "div.l1 div"],
+  ["VK_TAB", "div.l1 div"],
+  ["VK_BACK_SPACE", "div.l1 di"],
+  ["VK_BACK_SPACE", "div.l1 d"],
+  ["VK_BACK_SPACE", "div.l1 "],
+  ["VK_DOWN", "div.l1 div"],
+  ["VK_DOWN", "div.l1 span"],
+  ["VK_BACK_SPACE", "div.l1 spa"],
+  ["VK_BACK_SPACE", "div.l1 sp"],
+  ["VK_BACK_SPACE", "div.l1 s"],
+  ["VK_BACK_SPACE", "div.l1 "],
+  ["VK_BACK_SPACE", "div.l1"],
+  ["VK_BACK_SPACE", "div.l"],
+  ["VK_BACK_SPACE", "div."],
+  ["VK_BACK_SPACE", "div"],
+  ["VK_BACK_SPACE", "di"],
+  ["VK_BACK_SPACE", "d"],
+  ["VK_BACK_SPACE", ""],
+];
+
+const TEST_URL = URL_ROOT + "doc_inspector_search-suggestions.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const [key, query] of KEY_STATES) {
+    info("Pressing key " + key + " to get searchbox value as " + query);
+
+    const done = inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+
+    info("Waiting for search query to complete");
+    await done;
+
+    is(inspector.searchBox.value, query, "The searchbox value is correct");
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search-reserved.js b/devtools/client/inspector/test/browser_inspector_search-reserved.js
new file mode 100644
index 0000000000..a4acc469bc
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-reserved.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing searching for ids and classes that contain reserved characters.
+const TEST_URL = URL_ROOT + "doc_inspector_search-reserved.html";
+
+// An array of (key, suggestions) pairs where key is a key to press and
+// suggestions is an array of suggestions that should be shown in the popup.
+// Suggestion is an object with label of the entry and optional count
+// (defaults to 1)
+const TEST_DATA = [
+  {
+    key: "#",
+    suggestions: [{ label: "#d1\\.d2" }],
+  },
+  {
+    key: "d",
+    suggestions: [{ label: "#d1\\.d2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "#d1\\.d2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: ".",
+    suggestions: [{ label: ".c1\\.c2" }],
+  },
+  {
+    key: "c",
+    suggestions: [{ label: ".c1\\.c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: ".c1\\.c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "d",
+    suggestions: [{ label: "div" }, { label: "#d1\\.d2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "c",
+    suggestions: [{ label: ".c1\\.c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [],
+  },
+  {
+    key: "b",
+    suggestions: [{ label: "body" }],
+  },
+  {
+    key: "o",
+    suggestions: [{ label: "body" }],
+  },
+  {
+    key: "d",
+    suggestions: [{ label: "body" }],
+  },
+  {
+    key: "y",
+    suggestions: [],
+  },
+  {
+    key: " ",
+    suggestions: [{ label: "body div" }],
+  },
+  {
+    key: ".",
+    suggestions: [{ label: "body .c1\\.c2" }],
+  },
+  {
+    key: "VK_BACK_SPACE",
+    suggestions: [{ label: "body div" }],
+  },
+  {
+    key: "#",
+    suggestions: [{ label: "body #d1\\.d2" }],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const searchBox = inspector.searchBox;
+  const popup = inspector.searchSuggestions.searchPopup;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const { key, suggestions } of TEST_DATA) {
+    info("Pressing " + key + " to get " + formatSuggestions(suggestions));
+
+    const command = once(searchBox, "input");
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await command;
+
+    info("Waiting for search query to complete");
+    await onSearchProcessingDone;
+
+    info(
+      "Query completed. Performing checks for input '" + searchBox.value + "'"
+    );
+    const actualSuggestions = popup.getItems();
+
+    is(
+      popup.isOpen ? actualSuggestions.length : 0,
+      suggestions.length,
+      "There are expected number of suggestions."
+    );
+
+    for (let i = 0; i < suggestions.length; i++) {
+      is(
+        suggestions[i].label,
+        actualSuggestions[i].label,
+        "The suggestion at " + i + "th index is correct."
+      );
+    }
+  }
+});
+
+function formatSuggestions(suggestions) {
+  return "[" + suggestions.map(s => "'" + s.label + "'").join(", ") + "]";
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-selection.js b/devtools/client/inspector/test/browser_inspector_search-selection.js
new file mode 100644
index 0000000000..bdc65945af
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-selection.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing navigation between nodes in search results
+
+const TEST_URL = URL_ROOT + "doc_inspector_search.html";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Focus the search box");
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  info("Enter body > p to search");
+  const searchText = "body > p";
+  // EventUtils.sendString will trigger multiple updates, so wait until the final one.
+  const processingDone = new Promise(resolve => {
+    const off = inspector.searchSuggestions.on("processing-done", data => {
+      if (data.query == searchText) {
+        resolve();
+        off();
+      }
+    });
+  });
+  EventUtils.sendString(searchText, inspector.panelWin);
+
+  info("Wait for search query to complete");
+  await processingDone;
+
+  let msg = "Press enter and expect a new selection";
+  await sendKeyAndCheck(inspector, msg, "VK_RETURN", {}, "#p1");
+
+  msg = "Press enter to cycle through multiple nodes";
+  await sendKeyAndCheck(inspector, msg, "VK_RETURN", {}, "#p2");
+
+  msg = "Press shift-enter to select the previous node";
+  await sendKeyAndCheck(inspector, msg, "VK_RETURN", { shiftKey: true }, "#p1");
+
+  if (AppConstants.platform === "macosx") {
+    msg = "Press meta-g to cycle through multiple nodes";
+    await sendKeyAndCheck(inspector, msg, "VK_G", { metaKey: true }, "#p2");
+
+    msg = "Press shift+meta-g to select the previous node";
+    await sendKeyAndCheck(
+      inspector,
+      msg,
+      "VK_G",
+      { metaKey: true, shiftKey: true },
+      "#p1"
+    );
+  } else {
+    msg = "Press ctrl-g to cycle through multiple nodes";
+    await sendKeyAndCheck(inspector, msg, "VK_G", { ctrlKey: true }, "#p2");
+
+    msg = "Press shift+ctrl-g to select the previous node";
+    await sendKeyAndCheck(
+      inspector,
+      msg,
+      "VK_G",
+      { ctrlKey: true, shiftKey: true },
+      "#p1"
+    );
+  }
+});
+
+const sendKeyAndCheck = async function (
+  inspector,
+  description,
+  key,
+  modifiers,
+  expectedId
+) {
+  info(description);
+  const onSelect = inspector.once("inspector-updated");
+  EventUtils.synthesizeKey(key, modifiers, inspector.panelWin);
+  await onSelect;
+
+  const selectedNode = inspector.selection.nodeFront;
+  info(selectedNode.id + " is selected with text " + inspector.searchBox.value);
+  const targetNode = await getNodeFront(expectedId, inspector);
+  is(selectedNode, targetNode, "Correct node " + expectedId + " is selected");
+};
diff --git a/devtools/client/inspector/test/browser_inspector_search-sidebar.js b/devtools/client/inspector/test/browser_inspector_search-sidebar.js
new file mode 100644
index 0000000000..06370a6788
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-sidebar.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that depending where the user last clicked in the inspector, the right search
+// field is focused when ctrl+F is pressed.
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,Search!"
+  );
+
+  info("Check that by default, the inspector search field gets focused");
+  pressCtrlF();
+  isInInspectorSearchBox(inspector);
+
+  info("Click somewhere in the rule-view");
+  moveFocusInRuleView(inspector);
+
+  info("Check that the rule-view search field gets focused");
+  pressCtrlF();
+  isInRuleViewSearchBox(inspector);
+
+  info("Click in the inspector again");
+  await clickContainer("head", inspector);
+
+  info(
+    "Check that now we're back in the inspector, its search field gets focused"
+  );
+  pressCtrlF();
+  isInInspectorSearchBox(inspector);
+
+  info("Switch to the computed view, and click somewhere inside it");
+  selectComputedView(inspector);
+  clickInComputedView(inspector);
+
+  info("Check that the computed-view search field gets focused");
+  pressCtrlF();
+  isInComputedViewSearchBox(inspector);
+
+  info("Click in the inspector yet again");
+  await clickContainer("body", inspector);
+
+  info(
+    "We're back in the inspector again, check the inspector search field focuses"
+  );
+  pressCtrlF();
+  isInInspectorSearchBox(inspector);
+});
+
+function pressCtrlF() {
+  EventUtils.synthesizeKey("f", { accelKey: true });
+}
+
+function moveFocusInRuleView(inspector) {
+  // Only focus an element in the view so this has no unintended effects.
+  // Put the focus on the `element` closing bracket, which should always be visible
+  // and is focusable as it's a button.
+  inspector.panelDoc
+    .querySelector("#sidebar-panel-ruleview .ruleview-ruleclose")
+    .focus();
+}
+
+function clickInComputedView(inspector) {
+  const el = inspector.panelDoc.querySelector("#sidebar-panel-computedview");
+  EventUtils.synthesizeMouseAtCenter(el, {}, inspector.panelDoc.defaultView);
+}
+
+function isInInspectorSearchBox(inspector) {
+  // Focus ends up in an anonymous child of the XUL textbox.
+  ok(
+    inspector.panelDoc.activeElement.closest("#inspector-searchbox"),
+    "The inspector search field is focused when ctrl+F is pressed"
+  );
+}
+
+function isInRuleViewSearchBox(inspector) {
+  is(
+    inspector.panelDoc.activeElement,
+    inspector.getPanel("ruleview").view.searchField,
+    "The rule-view search field is focused when ctrl+F is pressed"
+  );
+}
+
+function isInComputedViewSearchBox(inspector) {
+  is(
+    inspector.panelDoc.activeElement,
+    inspector.getPanel("computedview").computedView.searchField,
+    "The computed-view search field is focused when ctrl+F is pressed"
+  );
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-suggests-ids-and-classes.js b/devtools/client/inspector/test/browser_inspector_search-suggests-ids-and-classes.js
new file mode 100644
index 0000000000..5360d63298
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search-suggests-ids-and-classes.js
@@ -0,0 +1,154 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the selector-search input proposes ids and classes even when . and
+// # is missing, but that this only occurs when the query is one word (no
+// selector combination)
+
+// The various states of the inspector: [key, suggestions array]
+// [
+//  what key to press,
+//  suggestions array with count [
+//    [suggestion1, count1], [suggestion2] ...
+//  ] count can be left to represent 1
+// ]
+const KEY_STATES = [
+  [
+    "s",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  [
+    "p",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  [
+    "a",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  [
+    "n",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  [" ", [["span div", 1]]],
+  // mixed tag/class/id suggestions only work for the first word
+  ["d", [["span div", 1]]],
+  ["VK_BACK_SPACE", [["span div", 1]]],
+  [
+    "VK_BACK_SPACE",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  [
+    "VK_BACK_SPACE",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  [
+    "VK_BACK_SPACE",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  [
+    "VK_BACK_SPACE",
+    [
+      ["span", 1],
+      [".span", 1],
+      ["#span", 1],
+    ],
+  ],
+  ["VK_BACK_SPACE", []],
+  // Test that mixed tags, classes and ids are grouped by types, sorted by
+  // count and alphabetical order
+  [
+    "b",
+    [
+      ["button", 3],
+      ["body", 1],
+      [".bc", 3],
+      [".ba", 1],
+      [".bb", 1],
+      ["#ba", 1],
+      ["#bb", 1],
+      ["#bc", 1],
+    ],
+  ],
+];
+
+const TEST_URL = `<span class="span" id="span">
+                    <div class="div" id="div"></div>
+                  </span>
+                  <button class="ba bc" id="bc"></button>
+                  <button class="bb bc" id="bb"></button>
+                  <button class="bc" id="ba"></button>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL)
+  );
+
+  const searchBox = inspector.panelWin.document.getElementById(
+    "inspector-searchbox"
+  );
+  const popup = inspector.searchSuggestions.searchPopup;
+
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  for (const [key, expectedSuggestions] of KEY_STATES) {
+    info(
+      "pressing key " +
+        key +
+        " to get suggestions " +
+        JSON.stringify(expectedSuggestions)
+    );
+
+    const onCommand = once(searchBox, "input", true);
+    const onSearchProcessingDone =
+      inspector.searchSuggestions.once("processing-done");
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    await onCommand;
+
+    info("Waiting for the suggestions to be retrieved");
+    await onSearchProcessingDone;
+
+    const actualSuggestions = popup.getItems();
+    is(
+      popup.isOpen ? actualSuggestions.length : 0,
+      expectedSuggestions.length,
+      "There are expected number of suggestions"
+    );
+
+    for (let i = 0; i < expectedSuggestions.length; i++) {
+      is(
+        expectedSuggestions[i][0],
+        actualSuggestions[i].label,
+        "The suggestion at " + i + "th index is correct."
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search_keyboard_shortcut_conflict.js b/devtools/client/inspector/test/browser_inspector_search_keyboard_shortcut_conflict.js
new file mode 100644
index 0000000000..696010fea4
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search_keyboard_shortcut_conflict.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the inspector search shortcut works from the inner iframes of the
+// inspector panel (eg markup-view iframe) and that shortcuts triggered by other
+// panels are not consumed by the inspector.
+// See Bug 1589617.
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<span>Test search shortcut conflicts</span>"
+  );
+  const { searchBox } = inspector;
+  const doc = inspector.panelDoc;
+
+  info("Check that the shortcut works when opening the inspector");
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+  ok(containsFocus(doc, searchBox), "Focus is in a searchbox");
+
+  info("Focus the markup view");
+  inspector.markup._frame.focus();
+  ok(!containsFocus(doc, searchBox), "Focus is no longer in the searchbox");
+
+  info("Check that the shortcut works from the markup view");
+  const focused = once(searchBox, "focus");
+  synthesizeKeyShortcut(INSPECTOR_L10N.getStr("inspector.searchHTML.key"));
+  await focused;
+  ok(containsFocus(doc, searchBox), "Focus is in the searchbox again");
+
+  // We focus the markup view again to check if using the shortcut from the
+  // webconsole will focus the inspector searchbox unintentionally.
+  inspector.markup._frame.focus();
+  ok(!containsFocus(doc, searchBox), "Focus is no longer in the searchbox");
+
+  info("Switch to webconsole");
+  await toolbox.selectTool("webconsole");
+  const hud = toolbox.getCurrentPanel().hud;
+  const consoleSearchBox = hud.ui.outputNode.querySelector(
+    ".devtools-searchbox input"
+  );
+
+  info("Check that the console search shortcut works");
+  const consoleSearchFocused = once(consoleSearchBox, "focus");
+
+  // Note: we expect the console and inspector to share the same shortcut.
+  // If they diverge, the test will need to be updated.
+  synthesizeKeyShortcut(INSPECTOR_L10N.getStr("inspector.searchHTML.key"));
+  await consoleSearchFocused;
+  const consoleDoc = hud.ui.outputNode.ownerDocument;
+  ok(
+    containsFocus(consoleDoc, consoleSearchBox),
+    "Focus is in the console searchbox"
+  );
+
+  info("Switch back to the inspector");
+  await toolbox.selectTool("inspector");
+  ok(!containsFocus(doc, searchBox), "Focus is not in the inspector searchbox");
+});
diff --git a/devtools/client/inspector/test/browser_inspector_search_keyboard_trap.js b/devtools/client/inspector/test/browser_inspector_search_keyboard_trap.js
new file mode 100644
index 0000000000..b3f4fcdb3d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_search_keyboard_trap.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test ability to tab to and away from inspector search using keyboard.
+
+const TEST_URL = URL_ROOT + "doc_inspector_search.html";
+
+/**
+ * Test data has the format of:
+ * {
+ *   desc         {String}    description for better logging
+ *   focused      {Boolean}   flag, indicating if search box contains focus
+ *   keys:        {Array}     list of keys that include key code and optional
+ *                            event data (shiftKey, etc)
+ * }
+ *
+ */
+const TEST_DATA = [
+  {
+    desc: "Move focus to a next focusable element",
+    focused: false,
+    keys: [
+      {
+        key: "VK_TAB",
+        options: {},
+      },
+    ],
+  },
+  {
+    desc: "Move focus back to searchbox",
+    focused: true,
+    keys: [
+      {
+        key: "VK_TAB",
+        options: { shiftKey: true },
+      },
+    ],
+  },
+  {
+    desc:
+      "Open popup and then tab away (2 times) to the a next focusable " +
+      "element",
+    focused: false,
+    keys: [
+      {
+        key: "d",
+        options: {},
+      },
+      {
+        key: "VK_TAB",
+        options: {},
+      },
+      {
+        key: "VK_TAB",
+        options: {},
+      },
+    ],
+  },
+  {
+    desc: "Move focus back to searchbox",
+    focused: true,
+    keys: [
+      {
+        key: "VK_TAB",
+        options: { shiftKey: true },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { searchBox } = inspector;
+  const doc = inspector.panelDoc;
+
+  await selectNode("#b1", inspector);
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
+
+  // Ensure a searchbox is focused.
+  ok(containsFocus(doc, searchBox), "Focus is in a searchbox");
+
+  for (const { desc, focused, keys } of TEST_DATA) {
+    info(desc);
+    for (const { key, options } of keys) {
+      const done = !focused
+        ? inspector.searchSuggestions.once("processing-done")
+        : Promise.resolve();
+      EventUtils.synthesizeKey(key, options);
+      await done;
+    }
+    is(containsFocus(doc, searchBox), focused, "Focus is set correctly");
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_select-last-selected.js b/devtools/client/inspector/test/browser_inspector_select-last-selected.js
new file mode 100644
index 0000000000..fe56ff5ae7
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_select-last-selected.js
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Checks that the expected default node is selected after a page navigation or
+// a reload.
+var PAGE_1 = URL_ROOT_SSL + "doc_inspector_select-last-selected-01.html";
+var PAGE_2 = URL_ROOT_SSL + "doc_inspector_select-last-selected-02.html";
+
+// An array of test cases with following properties:
+// - url: URL to navigate to. If URL == content.location, reload instead.
+// - nodeToSelect: a selector for a node to select before navigation. If null,
+//                 whatever is selected stays selected.
+// - selectedNode: a selector for a node that is selected after navigation.
+var TEST_DATA = [
+  {
+    url: PAGE_1,
+    nodeToSelect: "#id1",
+    selectedNode: "#id1",
+  },
+  {
+    url: PAGE_1,
+    nodeToSelect: "#id2",
+    selectedNode: "#id2",
+  },
+  {
+    url: PAGE_1,
+    nodeToSelect: "#id3",
+    selectedNode: "#id3",
+  },
+  {
+    url: PAGE_1,
+    nodeToSelect: "#id4",
+    selectedNode: "#id4",
+  },
+  {
+    url: PAGE_2,
+    nodeToSelect: null,
+    selectedNode: "body",
+  },
+  {
+    url: PAGE_1,
+    nodeToSelect: "#id5",
+    selectedNode: "body",
+  },
+  {
+    url: PAGE_2,
+    nodeToSelect: null,
+    selectedNode: "body",
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(PAGE_1);
+
+  for (const { url, nodeToSelect, selectedNode } of TEST_DATA) {
+    if (nodeToSelect) {
+      info("Selecting node " + nodeToSelect + " before navigation.");
+      await selectNode(nodeToSelect, inspector);
+    }
+
+    await navigateTo(url);
+
+    const nodeFront = await getNodeFront(selectedNode, inspector);
+    ok(nodeFront, "Got expected node front");
+    is(
+      inspector.selection.nodeFront,
+      nodeFront,
+      selectedNode + " is selected after navigation."
+    );
+  }
+});
diff --git a/devtools/client/inspector/test/browser_inspector_sidebarstate.js b/devtools/client/inspector/test/browser_inspector_sidebarstate.js
new file mode 100644
index 0000000000..396e78c91f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_sidebarstate.js
@@ -0,0 +1,132 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI =
+  "data:text/html;charset=UTF-8," +
+  "<h1>browser_inspector_sidebarstate.js</h1>";
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+
+const TELEMETRY_DATA = [
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "tool_timer",
+    object: "layoutview",
+    value: null,
+    extra: {
+      time_open: "",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "tool_timer",
+    object: "fontinspector",
+    value: null,
+    extra: {
+      time_open: "",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "tool_timer",
+    object: "compatibilityview",
+    value: null,
+    extra: {
+      time_open: "",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "tool_timer",
+    object: "computedview",
+    value: null,
+    extra: {
+      time_open: "",
+    },
+  },
+];
+
+add_task(async function () {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
+  let { inspector, toolbox } = await openInspectorForURL(TEST_URI);
+
+  info("Selecting font inspector.");
+  inspector.sidebar.select("fontinspector");
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "fontinspector",
+    "Font Inspector is selected"
+  );
+
+  info("Selecting compatibility view.");
+  const onCompatibilityViewInitialized = inspector.once(
+    "compatibilityview-initialized"
+  );
+  inspector.sidebar.select("compatibilityview");
+  await onCompatibilityViewInitialized;
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "compatibilityview",
+    "Compatibility View is selected"
+  );
+
+  info("Selecting computed view.");
+  inspector.sidebar.select("computedview");
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "computedview",
+    "Computed View is selected"
+  );
+
+  info("Closing inspector.");
+  await toolbox.destroy();
+
+  info("Re-opening inspector.");
+  inspector = (await openInspector()).inspector;
+
+  if (!inspector.sidebar.getCurrentTabID()) {
+    info("Default sidebar still to be selected, adding select listener.");
+    await inspector.sidebar.once("select");
+  }
+
+  is(
+    inspector.sidebar.getCurrentTabID(),
+    "computedview",
+    "Computed view is selected by default."
+  );
+
+  checkTelemetryResults();
+});
+
+function checkTelemetryResults() {
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const events = snapshot.parent.filter(
+    event => event[1] === "devtools.main" && event[2] === "tool_timer"
+  );
+
+  for (const i in TELEMETRY_DATA) {
+    const [timestamp, category, method, object, value, extra] = events[i];
+    const expected = TELEMETRY_DATA[i];
+
+    // ignore timestamp
+    ok(timestamp > 0, "timestamp is greater than 0");
+    ok(extra.time_open > 0, "time_open is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+    is(value, expected.value, "value is correct");
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_startup.js b/devtools/client/inspector/test/browser_inspector_startup.js
new file mode 100644
index 0000000000..7953b5c473
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_startup.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the inspector loads early without waiting for load events.
+
+const server = createTestHTTPServer();
+
+// Register a slow image handler so we can simulate a long time between
+// a reload and the load event firing.
+server.registerContentType("gif", "image/gif");
+function onPageResourceRequest() {
+  return new Promise(done => {
+    server.registerPathHandler("/slow.gif", function (metadata, response) {
+      info("Image has been requested");
+      response.processAsync();
+      done(response);
+    });
+  });
+}
+
+// Test page load events.
+const TEST_URL =
+  "data:text/html," +
+  "<!DOCTYPE html>" +
+  "<head><meta charset='utf-8' /></head>" +
+  "<body>" +
+  "<p>Page loading slowly</p>" +
+  "<img src='http://localhost:" +
+  server.identity.primaryPort +
+  "/slow.gif' />" +
+  "</body>" +
+  "</html>";
+
+add_task(async function () {
+  const { inspector, tab } = await openInspectorForURL("about:blank");
+
+  const domContentLoaded = waitForLinkedBrowserEvent(tab, "DOMContentLoaded");
+  const pageLoaded = waitForLinkedBrowserEvent(tab, "load");
+
+  const markupLoaded = inspector.once("markuploaded");
+  const onRequest = onPageResourceRequest();
+
+  info("Navigate to the slow loading page");
+  const target = inspector.toolbox.target;
+  await target.navigateTo({ url: TEST_URL });
+
+  info("Wait for request made to the image");
+  const response = await onRequest;
+
+  // The request made to the image shouldn't block the DOMContentLoaded event
+  info("Wait for DOMContentLoaded");
+  await domContentLoaded;
+
+  // Nor does it prevent the inspector from loading
+  info("Wait for markup-loaded");
+  await markupLoaded;
+
+  ok(inspector.markup, "There is a markup view");
+  is(inspector.markup._elt.children.length, 1, "The markup view is rendering");
+  is(
+    await contentReadyState(tab),
+    "interactive",
+    "Page is still loading but the inspector is ready"
+  );
+
+  // Ends page load by unblocking the image request
+  response.finish();
+
+  // We should then receive the page load event
+  info("Wait for load");
+  await pageLoaded;
+});
+
+function waitForLinkedBrowserEvent(tab, event) {
+  return BrowserTestUtils.waitForContentEvent(tab.linkedBrowser, event, true);
+}
+
+function contentReadyState(tab) {
+  return SpecialPowers.spawn(tab.linkedBrowser, [], function () {
+    return content.document.readyState;
+  });
+}
diff --git a/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js b/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
new file mode 100644
index 0000000000..171f4f8e7f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
@@ -0,0 +1,123 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Testing that clicking the pick button switches the toolbox to the inspector
+// panel.
+
+const TEST_URI =
+  "data:text/html;charset=UTF-8,<!DOCTYPE html><script>console.log(`hello`)</script><p>Switch to inspector on pick</p>";
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+
+const DATA = [
+  {
+    timestamp: 3562,
+    category: "devtools.main",
+    method: "enter",
+    object: "webconsole",
+    extra: {
+      host: "bottom",
+      start_state: "initial_panel",
+      panel_name: "webconsole",
+      cold: "true",
+      message_count: "1",
+      width: "1300",
+    },
+  },
+  {
+    timestamp: 3671,
+    category: "devtools.main",
+    method: "exit",
+    object: "webconsole",
+    extra: {
+      host: "bottom",
+      width: "1300",
+      panel_name: "webconsole",
+      next_panel: "inspector",
+      reason: "inspect_dom",
+    },
+  },
+  {
+    timestamp: 3671,
+    category: "devtools.main",
+    method: "enter",
+    object: "inspector",
+    extra: {
+      host: "bottom",
+      start_state: "inspect_dom",
+      panel_name: "inspector",
+      cold: "true",
+      width: "1300",
+    },
+  },
+];
+
+add_task(async function () {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
+  const tab = await addTab(TEST_URI);
+  const toolbox = await openToolbox(tab);
+
+  await startPickerAndAssertSwitchToInspector(toolbox);
+
+  info("Stopping element picker.");
+  await toolbox.nodePicker.stop({ canceled: true });
+
+  checkResults();
+});
+
+async function openToolbox(tab) {
+  info("Opening webconsole.");
+  return gDevTools.showToolboxForTab(tab, { toolId: "webconsole" });
+}
+
+async function startPickerAndAssertSwitchToInspector(toolbox) {
+  info("Clicking element picker button.");
+  const pickButton = toolbox.doc.querySelector("#command-button-pick");
+  pickButton.click();
+
+  info("Waiting for inspector to be selected.");
+  await toolbox.once("inspector-selected");
+  is(toolbox.currentToolId, "inspector", "Switched to the inspector");
+}
+
+function checkResults() {
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const events = snapshot.parent.filter(
+    event =>
+      (event[1] === "devtools.main" && event[2] === "enter") ||
+      event[2] === "exit"
+  );
+
+  for (const i in DATA) {
+    const [timestamp, category, method, object, value, extra] = events[i];
+    const expected = DATA[i];
+
+    // ignore timestamp
+    Assert.greater(timestamp, 0, "timestamp is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+    is(value, null, "value is correct");
+    ok(extra.width > 0, "width is greater than 0");
+
+    checkExtra("host", extra, expected);
+    checkExtra("start_state", extra, expected);
+    checkExtra("reason", extra, expected);
+    checkExtra("panel_name", extra, expected);
+    checkExtra("next_panel", extra, expected);
+    checkExtra("message_count", extra, expected);
+    checkExtra("cold", extra, expected);
+  }
+}
+
+function checkExtra(propName, extra, expected) {
+  if (extra[propName]) {
+    is(extra[propName], expected.extra[propName], `${propName} is correct`);
+  }
+}
diff --git a/devtools/client/inspector/test/browser_inspector_textbox-menu.js b/devtools/client/inspector/test/browser_inspector_textbox-menu.js
new file mode 100644
index 0000000000..a95fcc02b8
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_textbox-menu.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that when right-clicking on various text boxes throughout the inspector does use
+// the toolbox's context menu (copy/cut/paste/selectAll/Undo).
+
+add_task(async function () {
+  await addTab(`data:text/html;charset=utf-8,
+                <style>h1 { color: red; }</style>
+                <h1 id="title">textbox context menu test</h1>`);
+  const { toolbox, inspector } = await openInspector();
+  await selectNode("h1", inspector);
+
+  info("Testing the markup-view tagname");
+  const container = await focusNode("h1", inspector);
+  const tag = container.editor.tag;
+  tag.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  await checkTextBox(inspector.markup.doc.activeElement, toolbox);
+
+  info("Testing the markup-view attribute");
+  EventUtils.sendKey("tab", inspector.panelWin);
+  await checkTextBox(inspector.markup.doc.activeElement, toolbox);
+
+  info("Testing the markup-view new attribute");
+  // It takes 2 tabs to focus the newAttr field, the first one just moves the cursor to
+  // the end of the field.
+  EventUtils.sendKey("tab", inspector.panelWin);
+  EventUtils.sendKey("tab", inspector.panelWin);
+  await checkTextBox(inspector.markup.doc.activeElement, toolbox);
+
+  info("Testing the markup-view textcontent");
+  EventUtils.sendKey("tab", inspector.panelWin);
+  await checkTextBox(inspector.markup.doc.activeElement, toolbox);
+  // Blur this last markup-view field, since we're moving on to the rule-view next.
+  EventUtils.sendKey("escape", inspector.panelWin);
+
+  info("Testing the rule-view selector");
+  const ruleView = inspector.getPanel("ruleview").view;
+  const cssRuleEditor = getRuleViewRuleEditor(ruleView, 1);
+  EventUtils.synthesizeMouseAtCenter(
+    cssRuleEditor.selectorText,
+    {},
+    inspector.panelWin
+  );
+  await checkTextBox(inspector.panelDoc.activeElement, toolbox);
+
+  info("Testing the rule-view property name");
+  EventUtils.sendKey("tab", inspector.panelWin);
+  await checkTextBox(inspector.panelDoc.activeElement, toolbox);
+
+  info("Testing the rule-view property value");
+  EventUtils.sendKey("tab", inspector.panelWin);
+  await checkTextBox(inspector.panelDoc.activeElement, toolbox);
+
+  info("Testing the rule-view new property");
+  // Tabbing out of the value field triggers a ruleview-changed event that we need to wait
+  // for.
+  const onRuleViewChanged = once(ruleView, "ruleview-changed");
+  EventUtils.sendKey("tab", inspector.panelWin);
+  await onRuleViewChanged;
+  await checkTextBox(inspector.panelDoc.activeElement, toolbox);
+
+  info("Switching to the layout-view");
+  const onBoxModelUpdated = inspector.once("boxmodel-view-updated");
+  selectLayoutView(inspector);
+  await onBoxModelUpdated;
+
+  info("Testing the box-model region");
+  const margin = inspector.panelDoc.querySelector(
+    ".boxmodel-margin.boxmodel-top > span"
+  );
+  EventUtils.synthesizeMouseAtCenter(margin, {}, inspector.panelWin);
+  await checkTextBox(inspector.panelDoc.activeElement, toolbox);
+
+  // Move the mouse out of the box-model region to avoid triggering the box model
+  // highlighter.
+  EventUtils.synthesizeMouseAtCenter(tag, {}, inspector.panelWin);
+});
+
+async function checkTextBox(textBox, toolbox) {
+  let textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(!textboxContextMenu, "The menu is closed");
+
+  info(
+    "Simulating context click on the textbox and expecting the menu to open"
+  );
+  const onContextMenu = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(textBox);
+  await onContextMenu;
+
+  textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(textboxContextMenu, "The menu is now visible");
+
+  info("Closing the menu");
+  const onContextMenuHidden = toolbox.once("menu-close");
+  textboxContextMenu.hidePopup();
+  await onContextMenuHidden;
+
+  textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(!textboxContextMenu, "The menu is closed again");
+}
diff --git a/devtools/client/inspector/test/browser_inspector_textbox-menu_reopen_toolbox.js b/devtools/client/inspector/test/browser_inspector_textbox-menu_reopen_toolbox.js
new file mode 100644
index 0000000000..ea9025a5aa
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_textbox-menu_reopen_toolbox.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that textbox context menu elements are still displayed correctly after reopening
+// the toolbox. Fixes https://bugzilla.mozilla.org/show_bug.cgi?id=1510182.
+
+add_task(async function () {
+  await addTab(`data:text/html;charset=utf-8,<div>test</div>`);
+
+  info("Testing the textbox context menu a first time");
+  const { toolbox, inspector } = await openInspector();
+  await checkContextMenuOnSearchbox(inspector, toolbox);
+
+  // Destroy the toolbox and try the context menu again with a new toolbox.
+  await toolbox.destroy();
+
+  info("Testing the textbox context menu after reopening the toolbox");
+  const { toolbox: newToolbox, inspector: newInspector } =
+    await openInspector();
+  await checkContextMenuOnSearchbox(newInspector, newToolbox);
+});
+
+async function checkContextMenuOnSearchbox(inspector, toolbox) {
+  // The same context menu is used for any text input.
+  // Here we use the inspector searchbox for this test because it is always available.
+  const searchbox = inspector.panelDoc.getElementById("inspector-searchbox");
+
+  info(
+    "Simulating context click on the textbox and expecting the menu to open"
+  );
+  const onContextMenu = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchbox);
+  await onContextMenu;
+
+  const textboxContextMenu = toolbox.getTextBoxContextMenu();
+  info("Wait until menu items are rendered");
+  const pasteElement = textboxContextMenu.querySelector("#editmenu-paste");
+  await waitUntil(() => !!pasteElement.getAttribute("label"));
+
+  is(
+    pasteElement.getAttribute("label"),
+    "Paste",
+    "Paste is visible and localized"
+  );
+
+  info("Closing the menu");
+  const onContextMenuHidden = toolbox.once("menu-close");
+  textboxContextMenu.hidePopup();
+  await onContextMenuHidden;
+}
diff --git a/devtools/client/inspector/test/browser_inspector_use-in-console-conflict.js b/devtools/client/inspector/test/browser_inspector_use-in-console-conflict.js
new file mode 100644
index 0000000000..8c19a56494
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_use-in-console-conflict.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Tests "Use in Console" menu item with conflicting binding in the web content.
+
+const TEST_URL = `data:text/html;charset=utf-8,<!DOCTYPE html>
+<p id="console-var">Paragraph for testing console variables</p>
+<script>
+  /* Verify that the conflicting binding on user code doesn't break the
+   * functionality. */
+  var $0 = "user-defined variable";
+</script>`;
+
+add_task(async function () {
+  // Disable eager evaluation to avoid intermittent failures due to pending
+  // requests to evaluateJSAsync.
+  await pushPref("devtools.webconsole.input.eagerEvaluation", false);
+
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Testing 'Use in Console' menu item.");
+
+  await selectNode("#console-var", inspector);
+  const container = await getContainerForSelector("#console-var", inspector);
+  const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+    target: container.tagLine,
+  });
+  const menuItem = allMenuItems.find(i => i.id === "node-menu-useinconsole");
+  const onConsoleVarReady = inspector.once("console-var-ready");
+
+  menuItem.click();
+
+  await onConsoleVarReady;
+
+  const hud = toolbox.getPanel("webconsole").hud;
+
+  const getConsoleResults = () => hud.ui.outputNode.querySelectorAll(".result");
+
+  is(hud.getInputValue(), "temp0", "first console variable is named temp0");
+  hud.ui.wrapper.dispatchEvaluateExpression();
+
+  await waitUntil(() => getConsoleResults().length === 1);
+  const result = getConsoleResults()[0];
+  ok(
+    result.textContent.includes('<p id="console-var">'),
+    "variable temp0 references correct node"
+  );
+
+  hud.ui.wrapper.dispatchClearHistory();
+});
diff --git a/devtools/client/inspector/test/doc_inspector_add_node.html b/devtools/client/inspector/test/doc_inspector_add_node.html
new file mode 100644
index 0000000000..e1205a79ba
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_add_node.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>

+<html lang="en">

+<head>

+  <meta charset="utf-8">

+  <title>Add elements tests</title>

+  <style>

+    body::before {

+      content: "pseudo-element";

+    }

+  </style>

+</head>

+<body>

+  <div id="foo"></div>

+  <svg>

+    <rect x="0" y="0" width="100" height="50"></rect>

+  </svg>

+  <div id="bar">

+    <div id="baz"></div>

+  </div>

+  <iframe src="data:text/html;charset=utf-8,Test iframe content"></iframe>

+</body>

+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_breadcrumbs.html b/devtools/client/inspector/test/doc_inspector_breadcrumbs.html
new file mode 100644
index 0000000000..fee0636112
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_breadcrumbs.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div {
+        min-height: 10px; min-width: 10px;
+        border: 1px solid red;
+        margin: 10px;
+      }
+      #pseudo-container::before {
+        content: 'before';
+      }
+      #pseudo-container::after {
+        content: 'after';
+      }
+    </style>
+  </head>
+  <body>
+    <article id="i1">
+      <div id="i11">
+        <div id="i111">
+          <div id="i1111">
+          </div>
+        </div>
+      </div>
+    </article>
+    <article id="i2">
+      <div id="i21">
+        <div id="i211">
+          <div id="i2111">
+          </div>
+        </div>
+      </div>
+      <div id="i22">
+        <div id="i221">
+        </div>
+        <div id="i222">
+          <div id="i2221">
+            <div id="i22211">
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <article id="i3">
+      <link id="i31" />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+      <link />
+    </article>
+    <div id='pseudo-container'></div>
+    <!-- This is a comment node -->
+    <svg id="vector" viewBox="0 0 10 10">
+      <clipPath id="clip">
+        <rect id="rectangle" x="0" y="0" width="10" height="5"></rect>
+      </clipPath>
+      <circle cx="5" cy="5" r="5" fill="blue" clip-path="url(#clip)"></circle>
+    </svg>
+  </body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_breadcrumbs_visibility.html b/devtools/client/inspector/test/doc_inspector_breadcrumbs_visibility.html
new file mode 100644
index 0000000000..862f324079
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_breadcrumbs_visibility.html
@@ -0,0 +1,22 @@
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=windows-1252">
+    </head>
+    <body>
+        <div id="aVeryLongIdToExceedTheBreadcrumbTruncationLimit">
+            <div id="anotherVeryLongIdToExceedTheBreadcrumbTruncationLimit">
+                <div id="aThirdVeryLongIdToExceedTheTruncationLimit">
+                    <div id="aFourthOneToExceedTheTruncationLimit">
+                        <div id="aFifthOneToExceedTheTruncationLimit">
+                            <div id="aSixthOneToExceedTheTruncationLimit">
+                                <div id="aSeventhOneToExceedTheTruncationLimit">
+                                    A text node at the end
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_csp.html b/devtools/client/inspector/test/doc_inspector_csp.html
new file mode 100644
index 0000000000..fcd320dae1
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_csp.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>

+<html>

+  <head>

+    <title>Inspector CSP Test</title>

+    <link rel="stylesheet" href="style_inspector_csp.css" type="text/css"/>

+    <meta charset="utf-8">

+  </head>

+  <body></body>

+</html>

diff --git a/devtools/client/inspector/test/doc_inspector_csp.html^headers^ b/devtools/client/inspector/test/doc_inspector_csp.html^headers^
new file mode 100644
index 0000000000..3345a82b84
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_csp.html^headers^
@@ -0,0 +1,2 @@
+Content-Type: text/html; charset=UTF-8

+content-security-policy: default-src 'self'; connect-src 'self'; script-src 'self'; style-src 'self';

diff --git a/devtools/client/inspector/test/doc_inspector_delete-selected-node-01.html b/devtools/client/inspector/test/doc_inspector_delete-selected-node-01.html
new file mode 100644
index 0000000000..70edbd9366
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_delete-selected-node-01.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+
+<h1>mop</h1>
+<iframe src="data:text/html;charset=utf-8,<!DOCTYPE HTML>%0D%0A<h1>kill me<span>.</span><%2Fh1>"></iframe>
diff --git a/devtools/client/inspector/test/doc_inspector_delete-selected-node-02.html b/devtools/client/inspector/test/doc_inspector_delete-selected-node-02.html
new file mode 100644
index 0000000000..0749b064a4
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_delete-selected-node-02.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>node delete - reset selection - test</title>
+</head>
+<body>
+  <ul id="deleteChildren">
+    <li id="deleteManually">Delete me via the inspector</li>
+    <li id="selectedAfterDelete">This node is selected after manual delete</li>
+    <li id="deleteAutomatically">Delete me via javascript</li>
+  </ul>
+  <iframe id="deleteIframe" src="data:text/html,%3C!DOCTYPE%20html%3E%3Chtml%20lang%3D%22en%22%3E%3Cbody%3E%3Cp%20id%3D%22deleteInIframe%22%3EDelete my container iframe%3C%2Fp%3E%3C%2Fbody%3E%3C%2Fhtml%3E"></iframe>
+  <div id="deleteToMakeSingleTextNode">
+    1
+    <b id="deleteWithNonElement">Delete me and select the non-element node</b>
+    2
+  </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_embed.html b/devtools/client/inspector/test/doc_inspector_embed.html
new file mode 100644
index 0000000000..8262fc2934
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_embed.html
@@ -0,0 +1,6 @@
+<!doctype html><html><head><meta charset="UTF-8"></head><body>

+<object>

+  <embed src="doc_inspector_menu.html" type="text/html"

+         width="422" height="258"></embed>

+</object>

+</body></html>
diff --git a/devtools/client/inspector/test/doc_inspector_eyedropper_disabled.xhtml b/devtools/client/inspector/test/doc_inspector_eyedropper_disabled.xhtml
new file mode 100644
index 0000000000..9954b1bac8
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_eyedropper_disabled.xhtml
@@ -0,0 +1,3 @@
+  <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+    <box id="box" style="background-color: red;">Hello</box>
+  </window>
diff --git a/devtools/client/inspector/test/doc_inspector_fission_frame_navigation.html b/devtools/client/inspector/test/doc_inspector_fission_frame_navigation.html
new file mode 100644
index 0000000000..e454fb0c83
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_fission_frame_navigation.html
@@ -0,0 +1,15 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test remote frame navigation</title>
+</head>
+<body>
+  <p>Test remote frame navigation</p>
+  <div id="root">
+    <iframe src='https://example.org/document-builder.sjs?html=<div id=org>org'></iframe>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/devtools/client/inspector/test/doc_inspector_highlight_after_transition.html b/devtools/client/inspector/test/doc_inspector_highlight_after_transition.html
new file mode 100644
index 0000000000..b2ba0b066f
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlight_after_transition.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    div {
+      opacity: 0;
+      height: 0;
+      background: red;
+      border-top: 1px solid #888;
+      transition-property: height, opacity;
+      transition-duration: 3000ms;
+      transition-timing-function: ease-in-out, ease-in-out, linear;
+    }
+
+    div[visible] {
+      opacity: 1;
+      height: 200px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter-comments.html b/devtools/client/inspector/test/doc_inspector_highlighter-comments.html
new file mode 100644
index 0000000000..3dedc9f369
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter-comments.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Inspector Highlighter Test</title>
+</head>
+<body>
+  <p></p>
+  <div id="id1">Visible div 1</div>
+  <!-- Invisible comment node -->
+  <div id="id2">Visible div 2</div>
+  <script type="text/javascript">
+    /* Invisible script node */
+  </script>
+  <div id="id3">Visible div 3</div>
+  <div id="id4" style="display:none;">Invisible div node</div>
+  Visible text node
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter-geometry_01.html b/devtools/client/inspector/test/doc_inspector_highlighter-geometry_01.html
new file mode 100644
index 0000000000..f05f15deb2
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter-geometry_01.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>geometry highlighter test page</title>
+  <style type="text/css">
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .relative-sized-parent {
+      position: relative;
+      border: 2px solid black;
+      border-radius: 25px;
+    }
+    .size {
+      width: 300px;
+      height: 300px;
+    }
+
+    .positioned-child {
+      position: absolute;
+      background: #f06;
+    }
+    .pos-top-left {
+      top: 30px;
+      left: 25%;
+    }
+    .pos-bottom-right {
+      bottom: 10em;
+      right: -10px;
+    }
+
+    .inline-positioned {
+      background: yellow;
+    }
+
+    #absolute-container {
+      position: absolute;
+      top: 50px;
+      left: 400px;
+      width: 500px;
+      height: 400px;
+      border: 1px solid black;
+    }
+
+    .absolute-all-4 {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      bottom: 200px;
+      right: 300px;
+      border: 1px solid red;
+    }
+
+    .relative {
+      position: relative;
+      top: 10%;
+      left: 50%;
+      height: 10px;
+      border: 1px solid blue;
+    }
+
+    .fixed {
+      position: fixed;
+      top: 400px;
+      left: 0;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div id="node1" class="relative-sized-parent size">
+    <div id="node2" class="positioned-child pos-top-left pos-bottom-right">
+      <div id="node3" class="inline-positioned positioned-child pos-top-left" style="width:50px;height:50px;"></div>
+    </div>
+  </div>
+
+  <div id="absolute-container">
+    <div class="absolute-all-4"></div>
+    <div class="relative"></div>
+  </div>
+
+  <div class="fixed"></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter-geometry_02.html b/devtools/client/inspector/test/doc_inspector_highlighter-geometry_02.html
new file mode 100644
index 0000000000..59c3b88571
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter-geometry_02.html
@@ -0,0 +1,120 @@
+<!doctype html><html><head><meta charset="UTF-8"></head><body class="header">
+
+<style>
+.fixed { position: fixed; top: 40px; right: 20px; margin-top: 20px; background: #ccf; }
+.fixed-bottom-right { position: fixed; bottom: 4em; right: 25%; margin: 20px; background: #ccf; }
+
+#absolute-container { position: relative; height: 150px; margin: 20px; }
+.absolute { position: absolute; top: 20px; left: 400px; background: #fcc; }
+.absolute-bottom-right { position: absolute; bottom: 20px; right: 50px; background: #fcc; }
+.absolute-all-4 { position: absolute; top: 100px; bottom: 10px; left: 20px; right: 700px; background: #fcc; }
+.absolute-negative { position: absolute; bottom: -25px; background: #fcc; }
+.absolute-width-margin { position: absolute; top: 20px; right: 20px; width: 450px; margin: .3em; padding: 10px; border: 2px solid red; box-sizing: border-box; background: #fcc; }
+
+.relative { position: relative; top: 10px; left: 10px; background: #cfc;}
+.relative-inline { position: relative; top: 10px; left: 10px; display: inline; background: #cfc;}
+
+.static { position: static; top: 10px; left: 10px; background: #fcf; }
+.static-size { position: static; top: 10px; left: 10px; width: 300px; height: 100px; background: #fcf; }
+
+#sticky-container {
+  margin: 50px;
+  height: 400px;
+  width: 400px;
+  padding: 40px;
+  overflow: scroll;
+}
+#sticky-container dl {
+    margin: 0;
+    padding: 24px 0 0 0;
+}
+
+#sticky-container dt {
+    background: #ffc;
+    border-bottom: 1px solid #989EA4;
+    border-top: 1px solid #717D85;
+    color: #FFF;
+    font: bold 18px/21px Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 2px 0 0 12px;
+    position: sticky;
+    width: 99%;
+    top: 0px;
+}
+
+#sticky-container dd {
+    font: bold 20px/45px Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 0 0 0 12px;
+    white-space: nowrap;
+}
+
+#sticky-container dd + dd {
+    border-top: 1px solid #CCC
+}
+</style>
+
+<h1>Positioning playground</h1>
+<p>A demo of various positioning schemes: <a href="http://dev.w3.org/csswg/css-position/#pos-sch">http://dev.w3.org/csswg/css-position/#pos-sch</a>.</p>
+<p>absolute, static, fixed, relative, sticky</p>
+
+<h2>Absolute positioning</h2>
+<div class="absolute">
+  Absolute child with no relative parent
+</div>
+<div id="absolute-container">
+  <div class="absolute">
+    Absolute child with a relative parent
+  </div>
+  <div class="absolute-bottom-right">
+    Absolute child with a relative parent, positioned from the bottom right
+  </div>
+  <div class="absolute-all-4">
+    Absolute child with a relative parent, with all 4 positions
+  </div>
+  <div class="absolute-negative">
+    Absolute child with a relative parent, with negative positions
+  </div>
+  <div class="absolute-width-margin">
+    Absolute child with a relative parent, size, margin
+  </div>
+</div>
+
+<h2>Relative positioning</h2>
+<div id="relative-container">
+  <div class="relative">
+    Relative child
+  </div>
+  <div style="width: 100px;">
+  <div class="relative-inline">
+    Relative inline child, across multiple lines
+  </div>
+  </div>
+  <div style="position:relative;">
+    <div class="relative">
+      Relative child, in a positioned parent
+    </div>
+  </div>
+</div>
+
+<h2>Fixed positioning</h2>
+<div id="fixed-container">
+  <div class="fixed">
+    Fixed child
+  </div>
+  <div class="fixed-bottom-right">
+    Fixed child, bottom right
+  </div>
+</div>
+
+<h2>Static positioning</h2>
+<div id="static-container">
+  <div class="static">
+    Static child with no width/height
+  </div>
+  <div class="static-size">
+    Static child with width/height
+  </div>
+</div>
+
+</body></html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter.html b/devtools/client/inspector/test/doc_inspector_highlighter.html
new file mode 100644
index 0000000000..376a9c714d
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+    div {
+      position:absolute;
+    }
+
+    #simple-div {
+      padding: 5px;
+      border: 7px solid red;
+      margin: 9px;
+      top: 30px;
+      left: 150px;
+    }
+
+    #rotated-div {
+      padding: 5px;
+      border: 7px solid red;
+      margin: 9px;
+      transform: rotate(45deg);
+      top: 30px;
+      left: 80px;
+    }
+
+    #widthHeightZero-div {
+      top: 30px;
+      left: 10px;
+      width: 0;
+      height: 0;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="simple-div">Gort! Klaatu barada nikto!</div>
+    <div id="rotated-div"></div>
+    <div id="widthHeightZero-div">Width &amp; height = 0</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes-percent.html b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes-percent.html
new file mode 100644
index 0000000000..66050e9612
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes-percent.html
@@ -0,0 +1,18 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  html, body {
+    height: 100%;
+    margin: 0;
+  }
+
+  #inset {
+    /* clip-path gets added with JavaScript */
+    width: 100%;
+    height: 100%;
+    background: #f06;
+  }
+</style>
+<div id="inset"></div>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html
new file mode 100644
index 0000000000..0c38b8e636
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html
@@ -0,0 +1,93 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  html, body {
+    height: 100%;
+    margin: 0;
+  }
+  .wrapper {
+    width: 800px;
+    height: 800px;
+    background: #f06;
+  }
+  #polygon {
+    clip-path: polygon(0 0%,
+                       100px 50%,
+                       200px 0,
+                       300px 50%,
+                       400px 0,
+                       500px 50%,
+                       600px 0,
+                       700px 50%,
+                       800px 0,
+                       90% 100%,
+                       50% 60%,
+                       10% 100%);
+  }
+  #circle {
+    clip-path: circle(25% at 30% 40%);
+  }
+  #circle-without-position {
+    clip-path: circle(25%);
+  }
+  #ellipse {
+    clip-path: ellipse(40% 30% at 25% 30%) content-box;
+    padding: 20px;
+  }
+  #ellipse-padding-box {
+    clip-path: ellipse(40% 30% at 25% 30%) padding-box;
+    padding: 20px;
+  }
+  #inset {
+    clip-path: inset(200px 100px 30% 15%);
+  }
+  .svg {
+    width: 800px;
+    height: 800px;
+  }
+  #rect {
+    clip-path: polygon(0 0,
+                       100px 50%,
+                       200px 0,
+                       300px 50%,
+                       400px 0,
+                       500px 50%,
+                       600px 0,
+                       700px 50%,
+                       800px 0,
+                       90% 100%,
+                       50% 60%,
+                       10% 100%);
+    stroke: red;
+    stroke-width: 20px;
+    fill: blue;
+  }
+  #polygon-transform {
+    width: 600px;
+    height: 600px;
+    clip-path: polygon(0 0,
+                       100px 50%,
+                       200px 0,
+                       300px 50%,
+                       400px 0,
+                       500px 50%,
+                       600px 0,
+                       700px 50%,
+                       800px 0,
+                       90% 100%,
+                       50% 60%,
+                       10% 100%);
+  }
+</style>
+<div class="wrapper" id="polygon"></div>
+<div class="wrapper" id="circle"></div>
+<div class="wrapper" id="circle-without-position"></div>
+<div class="wrapper" id="ellipse"></div>
+<div class="wrapper" id="ellipse-padding-box"></div>
+<div class="wrapper" id="inset"></div>
+<div class="wrapper" id="polygon-transform"></div>
+<svg class="svg">
+  <rect id="rect" x="10" y="10" width="700" height="700"></rect>
+</svg>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes_iframe.html b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes_iframe.html
new file mode 100644
index 0000000000..ad32ef09b5
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes_iframe.html
@@ -0,0 +1,11 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  html, body {
+    height: 100%;
+    margin: 10px;
+  }
+</style>
+<iframe id="frame" src="doc_inspector_highlighter_cssshapes.html"></iframe>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_csstransform.html b/devtools/client/inspector/test/doc_inspector_highlighter_csstransform.html
new file mode 100644
index 0000000000..cfa2761d73
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_csstransform.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>css transform highlighter test</title>
+  <style type="text/css">
+    #test-node {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 300px;
+      height: 300px;
+
+      transform: rotate(90deg) skew(13deg) scale(.8) translateX(50px);
+      transform-origin: 50%;
+
+      background: linear-gradient(green, yellow);
+    }
+  </style>
+</head>
+<body>
+  <div id="test-node"></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_custom_element.xhtml b/devtools/client/inspector/test/doc_inspector_highlighter_custom_element.xhtml
new file mode 100644
index 0000000000..83d6bc1735
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_custom_element.xhtml
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test that the picker works correctly with custom element anonymous nodes</title>
+</head>
+<body>
+<template id="template"><div class="custom-element-anon">Anonymous</div></template>
+<custom-element id="custom-element" style="background:red; display: block;"/>
+<script>
+  "use strict";
+  customElements.define("custom-element", class extends HTMLElement {
+    constructor() {
+      super();
+      const template = document.getElementById("template");
+      this.attachShadow({mode: "open"})
+        .appendChild(template.content.cloneNode(true));
+    }
+  });
+</script>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_dom.html b/devtools/client/inspector/test/doc_inspector_highlighter_dom.html
new file mode 100644
index 0000000000..dc04828e41
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_dom.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>

+<html>

+<body>

+

+<p>Hello World!</p>

+

+<div id="complex-div">

+  <div id="simple-div1">

+    <p id="useless-para">The DOM is very useful! <em>#useless-para</em></p>

+    <p id="useful-para">This example is <b id="bold">really</b> useful. <em>#useful-para</em></p>

+  </div>

+

+  <div id="simple-div2">

+    <p id="another">This is another node. You won't reach this in my test.</p>

+    <p id="ahoy">Ahoy! How you doin' Capn'? <em>#ahoy</em></p>

+  </div>

+</div>

+

+</body>

+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_inline.html b/devtools/client/inspector/test/doc_inspector_highlighter_inline.html
new file mode 100644
index 0000000000..e1aa5bb1f7
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_inline.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      html {
+        height: 100%;
+        background: #eee;
+      }
+      body {
+        margin: 0 auto;
+        padding: 1em;
+        box-sizing: border-box;
+        width: 500px;
+        height: 100%;
+        background: white;
+        font-family: Arial;
+        font-size: 15px;
+        line-height: 40px;
+      }
+      p span {
+        padding: 5px 0;
+        margin: 0 5px;
+        border: 5px solid #eee;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Lorem Ipsum</h1>
+    <h2>Lorem ipsum <em>dolor sit amet</em></h2>
+    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, nisl eget semper maximus, dui tellus tempor leo, at pharetra eros tortor sed odio. Nullam sagittis ex nec mi sagittis pulvinar. Pellentesque dapibus feugiat fermentum. Curabitur lacinia quis enim et tristique. Aliquam in semper massa. In ac vulputate nunc, at rutrum neque. Fusce condimentum, tellus quis placerat imperdiet, dolor tortor mattis erat, nec luctus magna diam pharetra mauris.</span></p>
+    <div dir="rtl">
+      <span><span></span>some ltr text in an rtl container</span>
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_rect.html b/devtools/client/inspector/test/doc_inspector_highlighter_rect.html
new file mode 100644
index 0000000000..4d23d52fd2
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_rect.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>rect highlighter parent test page</title>
+  <style type="text/css">
+    body {
+      margin: 50px;
+      border: 10px solid red;
+    }
+
+    iframe {
+      border: 10px solid yellow;
+      padding: 0;
+      margin: 50px;
+    }
+  </style>
+</head>
+<body>
+  <iframe src="doc_inspector_highlighter_rect_iframe.html"></iframe>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_rect_iframe.html b/devtools/client/inspector/test/doc_inspector_highlighter_rect_iframe.html
new file mode 100644
index 0000000000..d59050f69b
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_rect_iframe.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>rect highlighter child test page</title>
+  <style type="text/css">
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_scroll.html b/devtools/client/inspector/test/doc_inspector_highlighter_scroll.html
new file mode 100644
index 0000000000..60252f1b7a
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_scroll.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      p {
+        height: 200vh;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Bug 1382341 - test page reload and scroll position</p>
+    <a>An element anchor, used to scroll the page</a>
+  </body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_infobar.html b/devtools/client/inspector/test/doc_inspector_infobar.html
new file mode 100644
index 0000000000..137b3487f7
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_infobar.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    div {
+      position: absolute;
+      height: 100px;
+      width: 500px;
+    }
+
+    #bottom {
+      bottom: 0px;
+    }
+
+    #vertical {
+      height: 100%;
+    }
+
+    #farbottom {
+      top: 2000px;
+      background: red;
+    }
+
+    #abovetop {
+      top: -123px;
+    }";
+  </style>
+</head>
+<body>
+  <div id="abovetop"></div>
+  <div id="vertical"></div>
+  <div id="top" class="class1 class2"></div>
+  <div id="bottom"></div>
+  <div id="farbottom"></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_infobar_01.html b/devtools/client/inspector/test/doc_inspector_infobar_01.html
new file mode 100644
index 0000000000..a0c42ee38d
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_infobar_01.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    body {
+      width: 100%;
+      height: 100%;
+    }
+    div {
+      position: absolute;
+      height: 100px;
+      width: 500px;
+    }
+
+    #bottom {
+      bottom: 0px;
+      background: blue;
+    }
+
+    #vertical {
+      height: 100%;
+      background: green;
+    }
+
+    svg {
+      width: 10px;
+      height: 10px;
+    }
+   </style>
+ </head>
+ <body>
+  <div id="vertical">Vertical</div>
+  <div id="top" class="class1 class2">Top</div>
+  <div id="bottom">Bottom</div>
+  <svg viewBox="0 0 10 10">
+    <clipPath id="clip">
+      <rect x="0" y="0" width="10" height="5"></rect>
+    </clipPath>
+    <circle cx="5" cy="5" r="5" fill="blue" clip-path="url(#clip)"></circle>
+  </svg>
+ </body>
+ </html>
diff --git a/devtools/client/inspector/test/doc_inspector_infobar_02.html b/devtools/client/inspector/test/doc_inspector_infobar_02.html
new file mode 100644
index 0000000000..ed1843f8db
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_infobar_02.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    div {
+      position: absolute;
+      height: 100px;
+      width: 500px;
+    }
+
+    #below-bottom {
+      bottom: -200px;
+      background: red;
+    }
+
+    #above-top {
+      top: -200px;
+      background: black;
+      color: white;
+    }";
+  </style>
+</head>
+<body>
+  <div id="above-top">Above top</div>
+  <div id="below-bottom">Far bottom</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_infobar_03.html b/devtools/client/inspector/test/doc_inspector_infobar_03.html
new file mode 100644
index 0000000000..a9aa05fa03
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_infobar_03.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    body {
+      height: 300vh;
+    }
+   </style>
+ </head>
+ <body>
+ </body>
+ </html>
diff --git a/devtools/client/inspector/test/doc_inspector_infobar_04.html b/devtools/client/inspector/test/doc_inspector_infobar_04.html
new file mode 100644
index 0000000000..e6d3325965
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_infobar_04.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <style>
+      .flex {
+        display: flex;
+      }
+
+      .grid {
+        display: grid;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="flex-container" class="flex">
+      <div id="flex-item"></div>
+      <div id="flex-container-item" class="flex"></div>
+    </div>
+
+    <div id="grid-container" class="grid">
+      <div id="grid-item"></div>
+      <div id="grid-container-item" class="grid"></div>
+    </div>
+
+    <div id="flex-container-with-grid" class="flex">
+      <div id="flex-item-grid-container" class="grid"></div>
+    </div>
+
+    <div id="flex-text-container" class="flex">
+      flex item (node text)
+    </div>
+
+    <div id="grid-text-container" class="grid">
+      grid item (node text). The text content for this text node needs to be long enough
+      so that the inspector does not inline it. Indeed we want to be able to select and
+      highlight it independently in the inspector so we can test the grid item infobar.
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_infobar_textnode.html b/devtools/client/inspector/test/doc_inspector_infobar_textnode.html
new file mode 100644
index 0000000000..2370708f43
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_infobar_textnode.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <div id="textnode-container">
+    text
+    <span>content</span>
+    <span>content</span>
+    text
+  </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_long-divs.html b/devtools/client/inspector/test/doc_inspector_long-divs.html
new file mode 100644
index 0000000000..52d6343aaa
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_long-divs.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Inspector Long Div Listing</title>
+  <style>
+    div {
+      background-color: #0002;
+      padding-left: 1em;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div id="focus-here">focus here</div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div>
+    <div>
+      <div>
+        <div>
+          <div id="zoom-here">zoom-here</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_menu.html b/devtools/client/inspector/test/doc_inspector_menu.html
new file mode 100644
index 0000000000..03310600c0
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_menu.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Inspector Tree Menu Test</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div>
+      <div id="paste-area">
+        <h1>Inspector Tree Menu Test</h1>
+        <p class="inner">Unset</p>
+        <p class="adjacent">
+          <span class="ref">3</span>
+        </p>
+      </div>
+      <p data-id="copy">Paragraph for testing copy</p>
+      <p id="sensitivity">Paragraph for sensitivity</p>
+      <p class="duplicate">This will be duplicated</p>
+      <p id="delete">This has to be deleted</p>
+      <img id="copyimage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==" />
+      <div id="hiddenElement" style="display: none;">
+        <p id="nestedHiddenElement">Visible element nested inside a non-visible element</p>
+      </div>
+      <p id="console-var">Paragraph for testing console variables</p>
+      <p id="console-var-multi">Paragraph for testing multiple console variables</p>
+
+
+      <p id="attributes" data-copy="the" data-long-copy="#01234567890123456789012345678901234567890123456789123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123" data-edit="original" data-remove="thing">Attributes are going to be changed here</p>
+
+      <div id="host"></div>
+      <script>
+        'use strict';
+        document.getElementById("host").attachShadow({ mode: "open" });
+			</script>
+			<iframe srcdoc="<p>Paragraph in iFrame</p>"></iframe>
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_outerhtml.html b/devtools/client/inspector/test/doc_inspector_outerhtml.html
new file mode 100644
index 0000000000..cc400674d2
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_outerhtml.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Inspector Copy OuterHTML Test</title>
+</head>
+<body>
+  <!-- Comment -->
+  <div><p>Test copy OuterHTML</p></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_pane-toggle-layout-invariant.html b/devtools/client/inspector/test/doc_inspector_pane-toggle-layout-invariant.html
new file mode 100644
index 0000000000..3e256b4a60
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_pane-toggle-layout-invariant.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+.header {
+  height: 81px;
+  border-bottom: 1px solid #ddd;
+}
+
+.container-fluid {
+  display: table;
+  height: 100%;
+}
+
+.inner-nav, .extra-nav {
+  display: table-cell;
+  height: 100%;
+}
+</style>
+<header class="header">
+  <div class="container-fluid">
+    <div class="inner-nav">
+      <a id="invariant" href="#">Office Lunch</a>
+    </div>
+    <div class="extra-nav">
+    </div>
+  </div>
+</header>
diff --git a/devtools/client/inspector/test/doc_inspector_reload_xul.xhtml b/devtools/client/inspector/test/doc_inspector_reload_xul.xhtml
new file mode 100644
index 0000000000..d7a17c5a9c
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_reload_xul.xhtml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/content/xul.css" type="text/css"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <body xmlns="http://www.w3.org/1999/xhtml">
+  <div id="p">a node inspected before reload</div>
+  <div id="q">a node inspected after reload</div>
+  </body>
+</window>
diff --git a/devtools/client/inspector/test/doc_inspector_remove-iframe-during-load.html b/devtools/client/inspector/test/doc_inspector_remove-iframe-during-load.html
new file mode 100644
index 0000000000..233ebe1183
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_remove-iframe-during-load.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>iframe creation/deletion test</title>
+</head>
+<body>
+  <div id="yay"></div>
+  <script type="text/javascript">
+    "use strict";
+
+    var yay = document.querySelector("#yay");
+    yay.textContent = "nothing";
+
+    // Create a promise that the test can wait for.
+    let resolveReadyPromise;
+    window.readyPromise = new Promise(r => (resolveReadyPromise = r));
+
+    // Create/remove an iframe before load.
+    var iframe = document.createElement("iframe");
+    document.body.appendChild(iframe);
+    iframe.remove();
+    yay.textContent = "before events";
+
+    // Create/remove an iframe on DOMContentLoaded.
+    document.addEventListener("DOMContentLoaded", function() {
+      const newIframe = document.createElement("iframe");
+      document.body.appendChild(newIframe);
+      newIframe.remove();
+      yay.textContent = "DOMContentLoaded";
+    });
+
+    // Create/remove an iframe on window load.
+    window.addEventListener("load", function() {
+      const newIframe = document.createElement("iframe");
+      document.body.appendChild(newIframe);
+      newIframe.remove();
+      yay.textContent = "load";
+
+      resolveReadyPromise();
+    });
+  </script>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_search-iframes.html b/devtools/client/inspector/test/doc_inspector_search-iframes.html
new file mode 100644
index 0000000000..fa122d5a55
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_search-iframes.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" id="root">
+<head>
+  <meta charset="utf-8">
+  <title>Inspector Search Box Test in Iframes</title>
+</head>
+<body>
+  <iframe id="iframe-1" src="/browser/devtools/client/inspector/test/doc_inspector_search.html"></iframe>
+  <iframe id="iframe-2" src="/browser/devtools/client/inspector/test/doc_inspector_search.html"></iframe>
+  <iframe id="iframe-3" src="data:text/html;charset=utf-8,%0A%20%20%3Cbutton%20id=%22b1%22%3ENested%20button%3C/button%3E%0A%20%20%3Ciframe%20id=%22iframe-4%22%20src=%22https://example.com/browser/devtools/client/inspector/test/doc_inspector_search.html%22%3E%3C/iframe%3E%0A">
+  </iframe>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_search-reserved.html b/devtools/client/inspector/test/doc_inspector_search-reserved.html
new file mode 100644
index 0000000000..15cf8c3af6
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_search-reserved.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Inspector Search Box Reserved Character Test</title>
+</head>
+<body>
+  <div id="d1.d2">Hi, I'm an id that contains a CSS reserved character</div>
+  <div class="c1.c2">Hi, a class that contains a CSS reserved character</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_search-suggestions.html b/devtools/client/inspector/test/doc_inspector_search-suggestions.html
new file mode 100644
index 0000000000..a84a2e3d40
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_search-suggestions.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Inspector Search Box Test</title>
+</head>
+<body>
+  <div id="d1">
+    <div class="l1">
+      <div id="d2" class="c1">Hello, I'm nested div</div>
+    </div>
+  </div>
+  <span id="s1">Hello, I'm a span
+    <div class="l1">
+      <span>Hi I am a nested span</span>
+      <span class="s4">Hi I am a nested classed span</span>
+    </div>
+  </span>
+  <span class="c1" id="s2">And me</span>
+
+  <p class="c1" id="p1">.someclass</p>
+  <p id="p2">#someid</p>
+  <button id="b1" disabled>button[disabled]</button>
+  <p id="p3" class="c2"><strong>p&gt;strong</strong></p>
+
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_search-svg.html b/devtools/client/inspector/test/doc_inspector_search-svg.html
new file mode 100644
index 0000000000..a78a20ff7a
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_search-svg.html
@@ -0,0 +1,16 @@
+<!doctype html>

+<html lang="en">

+<head>

+  <meta charset="utf-8">

+  <title>Inspector SVG Search Box Test</title>

+</head>

+<body>

+  <div class="class1"></div>

+  <svg>

+    <clipPath>

+      <rect x="0" y="0" width="10" height="5"></rect>

+    </clipPath>

+    <circle cx="0" cy="0" r="50" class="class2" />

+  </svg>

+</body>

+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_search.html b/devtools/client/inspector/test/doc_inspector_search.html
new file mode 100644
index 0000000000..54719bec44
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_search.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en" id="root">
+<head>
+  <meta charset="utf-8">
+  <title>Inspector Search Box Test</title>
+</head>
+<body>
+
+  <!-- This is a list of 0 h1 elements -->
+
+  <!-- This is a list of 2 div elements -->
+  <div id="d1">Hello, I'm a div</div>
+  <div id="d2" class="c1">Hello, I'm another div</div>
+
+  <!-- This is a list of 2 span elements -->
+  <span id="s1">Hello, I'm a span</span>
+  <span class="c1" id="s2">And I am also a span but I contain more text than the other one.</span>
+
+  <!-- This is a collection of various things that match only once -->
+  <p class="c1" id="p1">.someclass</p>
+  <p id="p2">#someid</p>
+  <button id="b1" disabled>button[disabled]</button>
+  <p id="p3" class="c2"><strong>p&gt;strong</strong></p>
+
+</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_select-last-selected-01.html b/devtools/client/inspector/test/doc_inspector_select-last-selected-01.html
new file mode 100644
index 0000000000..a78e281ca3
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_select-last-selected-01.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>select last selected test</title>
+	</head>
+	<body>
+		<div id="id1"></div>
+		<div id="id2"></div>
+		<div id="id3">
+			<ul class="aList">
+				<li class="item"></li>
+				<li class="item"></li>
+				<li class="item"></li>
+				<li class="item">
+					<span id="id4"></span>
+				</li>
+			</ul>
+		</div>
+	</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_select-last-selected-02.html b/devtools/client/inspector/test/doc_inspector_select-last-selected-02.html
new file mode 100644
index 0000000000..4c7c4e7d1e
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_select-last-selected-02.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>select last selected test</title>
+	</head>
+	<body>
+		<div id="id5"></div>
+	</body>
+</html>
diff --git a/devtools/client/inspector/test/doc_inspector_svg.svg b/devtools/client/inspector/test/doc_inspector_svg.svg
new file mode 100644
index 0000000000..75154dcf3d
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_svg.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <circle r="5"/>
+</svg>
diff --git a/devtools/client/inspector/test/head.js b/devtools/client/inspector/test/head.js
new file mode 100644
index 0000000000..cb1b00030c
--- /dev/null
+++ b/devtools/client/inspector/test/head.js
@@ -0,0 +1,1499 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Load the shared-head file first.
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js",
+  this
+);
+
+// Services.prefs.setBoolPref("devtools.debugger.log", true);
+// SimpleTest.registerCleanupFunction(() => {
+//   Services.prefs.clearUserPref("devtools.debugger.log");
+// });
+
+// Import helpers for the inspector that are also shared with others
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js",
+  this
+);
+
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
+  Services.prefs.clearUserPref("devtools.inspector.selectedSidebar");
+});
+
+registerCleanupFunction(function () {
+  // Move the mouse outside inspector. If the test happened fake a mouse event
+  // somewhere over inspector the pointer is considered to be there when the
+  // next test begins. This might cause unexpected events to be emitted when
+  // another test moves the mouse.
+  // Move the mouse at the top-right corner of the browser, to prevent
+  // the mouse from triggering the tab tooltip to be shown while the tab is
+  // being closed because the test is exiting (See Bug 1378524 for rationale).
+  EventUtils.synthesizeMouseAtPoint(
+    window.innerWidth,
+    1,
+    { type: "mousemove" },
+    window
+  );
+});
+
+/**
+ * Start the element picker and focus the content window.
+ * @param {Toolbox} toolbox
+ * @param {Boolean} skipFocus - Allow tests to bypass the focus event.
+ */
+var startPicker = async function (toolbox, skipFocus) {
+  info("Start the element picker");
+  toolbox.win.focus();
+  await toolbox.nodePicker.start();
+  if (!skipFocus) {
+    // By default make sure the content window is focused since the picker may not focus
+    // the content window by default.
+    await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+      content.focus();
+    });
+  }
+};
+
+/**
+ * Stop the element picker using the Escape keyboard shortcut
+ * @param {Toolbox} toolbox
+ */
+var stopPickerWithEscapeKey = async function (toolbox) {
+  const onPickerStopped = toolbox.nodePicker.once("picker-node-canceled");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, toolbox.win);
+  await onPickerStopped;
+};
+
+/**
+ * Start the eye dropper tool.
+ * @param {Toolbox} toolbox
+ */
+var startEyeDropper = async function (toolbox) {
+  info("Start the eye dropper tool");
+  toolbox.win.focus();
+  await toolbox.getPanel("inspector").showEyeDropper();
+};
+
+/**
+ * Pick an element from the content page using the element picker.
+ *
+ * @param {Inspector} inspector
+ *        Inspector instance
+ * @param {String} selector
+ *        CSS selector to identify the click target
+ * @param {Number} x
+ *        X-offset from the top-left corner of the element matching the provided selector
+ * @param {Number} y
+ *        Y-offset from the top-left corner of the element matching the provided selector
+ * @return {Promise} promise that resolves when the selection is updated with the picked
+ *         node.
+ */
+function pickElement(inspector, selector, x, y) {
+  info("Waiting for element " + selector + " to be picked");
+  // Use an empty options argument in order trigger the default synthesizeMouse behavior
+  // which will trigger mousedown, then mouseup.
+  const onNewNodeFront = inspector.selection.once("new-node-front");
+  BrowserTestUtils.synthesizeMouse(
+    selector,
+    x,
+    y,
+    {},
+    gBrowser.selectedTab.linkedBrowser
+  );
+  return onNewNodeFront;
+}
+
+/**
+ * Hover an element from the content page using the element picker.
+ *
+ * @param {Inspector} inspector
+ *        Inspector instance
+ * @param {String|Array} selector
+ *        CSS selector to identify the hover target.
+ *        Example: ".target"
+ *        If the element is at the bottom of a nested iframe stack, the selector should
+ *        be an array with each item identifying the iframe within its host document.
+ *        The last item of the array should be the element selector within the deepest
+ *        nested iframe.
+          Example: ["iframe#top", "iframe#nested", ".target"]
+ * @param {Number} x
+ *        X-offset from the top-left corner of the element matching the provided selector
+ * @param {Number} y
+ *        Y-offset from the top-left corner of the element matching the provided selector
+ * @return {Promise} promise that resolves when both the "picker-node-hovered" and
+ *                   "highlighter-shown" events are emitted.
+ */
+async function hoverElement(inspector, selector, x, y) {
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  info(`Waiting for element "${selector}" to be hovered`);
+  const onHovered = inspector.toolbox.nodePicker.once("picker-node-hovered");
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  // Default to the top-level target browsing context
+  let browsingContext = gBrowser.selectedTab.linkedBrowser;
+
+  if (Array.isArray(selector)) {
+    // Get the browsing context for the deepest nested frame; exclude the last array item.
+    // Cloning the array so it can be safely mutated.
+    browsingContext = await getBrowsingContextForNestedFrame(
+      selector.slice(0, selector.length - 1)
+    );
+    // Assume the last item in the selector array is the actual element selector.
+    // DO NOT mutate the selector array with .pop(), it might still be used by a test.
+    selector = selector[selector.length - 1];
+  }
+
+  if (isNaN(x) || isNaN(y)) {
+    BrowserTestUtils.synthesizeMouseAtCenter(
+      selector,
+      { type: "mousemove" },
+      browsingContext
+    );
+  } else {
+    BrowserTestUtils.synthesizeMouse(
+      selector,
+      x,
+      y,
+      { type: "mousemove" },
+      browsingContext
+    );
+  }
+
+  info("Wait for picker-node-hovered");
+  await onHovered;
+
+  info("Wait for highlighter shown");
+  await onHighlighterShown;
+
+  return Promise.all([onHighlighterShown, onHovered]);
+}
+
+/**
+ * Get the browsing context for the deepest nested iframe
+ * as identified by an array of selectors.
+ *
+ * @param  {Array} selectorArray
+ *         Each item in the array is a selector that identifies the iframe
+ *         within its host document.
+ *         Example: ["iframe#top", "iframe#nested"]
+ * @return {BrowsingContext}
+ *         BrowsingContext for the deepest nested iframe.
+ */
+async function getBrowsingContextForNestedFrame(selectorArray = []) {
+  // Default to the top-level target browsing context
+  let browsingContext = gBrowser.selectedTab.linkedBrowser;
+
+  // Return the top-level target browsing context if the selector is not an array.
+  if (!Array.isArray(selectorArray)) {
+    return browsingContext;
+  }
+
+  // Recursively get the browsing context for each nested iframe.
+  while (selectorArray.length) {
+    browsingContext = await SpecialPowers.spawn(
+      browsingContext,
+      [selectorArray.shift()],
+      function (selector) {
+        const iframe = content.document.querySelector(selector);
+        return iframe.browsingContext;
+      }
+    );
+  }
+
+  return browsingContext;
+}
+
+/**
+ * Highlight a node and set the inspector's current selection to the node or
+ * the first match of the given css selector.
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return a promise that resolves when the inspector is updated with the new
+ * node
+ */
+async function selectAndHighlightNode(selector, inspector) {
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  info("Highlighting and selecting the node " + selector);
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  await selectNode(selector, inspector, "test-highlight");
+  await onHighlighterShown;
+}
+
+/**
+ * Select node for a given selector, make it focusable and set focus in its
+ * container element.
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The current inspector-panel instance.
+ * @return {MarkupContainer}
+ */
+async function focusNode(selector, inspector) {
+  getContainerForNodeFront(inspector.walker.rootNode, inspector).elt.focus();
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+  await selectNode(nodeFront, inspector);
+  EventUtils.sendKey("return", inspector.panelWin);
+  return container;
+}
+
+/**
+ * Set the inspector's current selection to null so that no node is selected
+ *
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return a promise that resolves when the inspector is updated
+ */
+function clearCurrentNodeSelection(inspector) {
+  info("Clearing the current selection");
+  const updated = inspector.once("inspector-updated");
+  inspector.selection.setNodeFront(null);
+  return updated;
+}
+
+/**
+ * Right click on a node in the test page and click on the inspect menu item.
+ * @param {String} selector The selector for the node to click on in the page.
+ * @return {Promise} Resolves to the inspector when it has opened and is updated
+ */
+var clickOnInspectMenuItem = async function (selector) {
+  info("Showing the contextual menu on node " + selector);
+  const contentAreaContextMenu = document.querySelector(
+    "#contentAreaContextMenu"
+  );
+  const contextOpened = once(contentAreaContextMenu, "popupshown");
+
+  await safeSynthesizeMouseEventAtCenterInContentPage(selector, {
+    type: "contextmenu",
+    button: 2,
+  });
+
+  await contextOpened;
+
+  info("Triggering the inspect action");
+  await gContextMenu.inspectNode();
+
+  info("Hiding the menu");
+  const contextClosed = once(contentAreaContextMenu, "popuphidden");
+  contentAreaContextMenu.hidePopup();
+  await contextClosed;
+
+  return getActiveInspector();
+};
+
+/**
+ * Get the NodeFront for the document node inside a given iframe.
+ *
+ * @param {String|NodeFront} frameSelector
+ *        A selector that matches the iframe the document node is in
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return {Promise} Resolves the node front when the inspector is updated with the new
+ *         node.
+ */
+var getFrameDocument = async function (frameSelector, inspector) {
+  const iframe = await getNodeFront(frameSelector, inspector);
+  const { nodes } = await inspector.walker.children(iframe);
+
+  // Find the document node in the children of the iframe element.
+  return nodes.filter(node => node.displayName === "#document")[0];
+};
+
+/**
+ * Get the NodeFront for the shadowRoot of a shadow host.
+ *
+ * @param {String|NodeFront} hostSelector
+ *        Selector or front of the element to which the shadow root is attached.
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return {Promise} Resolves the node front when the inspector is updated with the new
+ *         node.
+ */
+var getShadowRoot = async function (hostSelector, inspector) {
+  const hostFront = await getNodeFront(hostSelector, inspector);
+  const { nodes } = await inspector.walker.children(hostFront);
+
+  // Find the shadow root in the children of the host element.
+  return nodes.filter(node => node.isShadowRoot)[0];
+};
+
+/**
+ * Get the NodeFront for a node that matches a given css selector inside a shadow root.
+ *
+ * @param {String} selector
+ *        CSS selector of the node inside the shadow root.
+ * @param {String|NodeFront} hostSelector
+ *        Selector or front of the element to which the shadow root is attached.
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return {Promise} Resolves the node front when the inspector is updated with the new
+ *         node.
+ */
+var getNodeFrontInShadowDom = async function (
+  selector,
+  hostSelector,
+  inspector
+) {
+  const shadowRoot = await getShadowRoot(hostSelector, inspector);
+  if (!shadowRoot) {
+    throw new Error(
+      "Could not find a shadow root under selector: " + hostSelector
+    );
+  }
+
+  return inspector.walker.querySelector(shadowRoot, selector);
+};
+
+var focusSearchBoxUsingShortcut = async function (panelWin, callback) {
+  info("Focusing search box");
+  const searchBox = panelWin.document.getElementById("inspector-searchbox");
+  const focused = once(searchBox, "focus");
+
+  panelWin.focus();
+
+  synthesizeKeyShortcut(INSPECTOR_L10N.getStr("inspector.searchHTML.key"));
+
+  await focused;
+
+  if (callback) {
+    callback();
+  }
+};
+
+/**
+ * Get the MarkupContainer object instance that corresponds to the given
+ * NodeFront
+ * @param {NodeFront} nodeFront
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return {MarkupContainer}
+ */
+function getContainerForNodeFront(nodeFront, { markup }) {
+  return markup.getContainer(nodeFront);
+}
+
+/**
+ * Get the MarkupContainer object instance that corresponds to the given
+ * selector
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @param {Boolean} Set to true in the event that the node shouldn't be found.
+ * @return {MarkupContainer}
+ */
+var getContainerForSelector = async function (
+  selector,
+  inspector,
+  expectFailure = false
+) {
+  info("Getting the markup-container for node " + selector);
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  if (expectFailure) {
+    ok(!container, "Shouldn't find markup-container for selector: " + selector);
+  } else {
+    ok(container, "Found markup-container for selector: " + selector);
+  }
+
+  return container;
+};
+
+/**
+ * Simulate a mouse-over on the markup-container (a line in the markup-view)
+ * that corresponds to the selector passed.
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return {Promise} Resolves when the container is hovered and the higlighter
+ * is shown on the corresponding node
+ */
+var hoverContainer = async function (selector, inspector) {
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+  info("Hovering over the markup-container for node " + selector);
+
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  const onHighlighterShown = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mousemove" },
+    inspector.markup.doc.defaultView
+  );
+  await onHighlighterShown;
+};
+
+/**
+ * Simulate a click on the markup-container (a line in the markup-view)
+ * that corresponds to the selector passed.
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return {Promise} Resolves when the node has been selected.
+ */
+var clickContainer = async function (selector, inspector) {
+  info("Clicking on the markup-container for node " + selector);
+
+  const nodeFront = await getNodeFront(selector, inspector);
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  const updated = inspector.once("inspector-updated");
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mousedown" },
+    inspector.markup.doc.defaultView
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    container.tagLine,
+    { type: "mouseup" },
+    inspector.markup.doc.defaultView
+  );
+  return updated;
+};
+
+/**
+ * Simulate the mouse leaving the markup-view area
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise when done
+ */
+function mouseLeaveMarkupView(inspector) {
+  info("Leaving the markup-view area");
+
+  // Find another element to mouseover over in order to leave the markup-view
+  const btn = inspector.toolbox.doc.querySelector("#toolbox-controls");
+
+  EventUtils.synthesizeMouseAtCenter(
+    btn,
+    { type: "mousemove" },
+    inspector.toolbox.win
+  );
+
+  return new Promise(resolve => {
+    executeSoon(resolve);
+  });
+}
+
+/**
+ * Dispatch the copy event on the given element
+ */
+function fireCopyEvent(element) {
+  const evt = element.ownerDocument.createEvent("Event");
+  evt.initEvent("copy", true, true);
+  element.dispatchEvent(evt);
+}
+
+/**
+ * Undo the last markup-view action and wait for the corresponding mutation to
+ * occur
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when the markup-mutation has been treated or
+ * rejects if no undo action is possible
+ */
+function undoChange(inspector) {
+  const canUndo = inspector.markup.undo.canUndo();
+  ok(canUndo, "The last change in the markup-view can be undone");
+  if (!canUndo) {
+    return Promise.reject();
+  }
+
+  const mutated = inspector.once("markupmutation");
+  inspector.markup.undo.undo();
+  return mutated;
+}
+
+/**
+ * Redo the last markup-view action and wait for the corresponding mutation to
+ * occur
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when the markup-mutation has been treated or
+ * rejects if no redo action is possible
+ */
+function redoChange(inspector) {
+  const canRedo = inspector.markup.undo.canRedo();
+  ok(canRedo, "The last change in the markup-view can be redone");
+  if (!canRedo) {
+    return Promise.reject();
+  }
+
+  const mutated = inspector.once("markupmutation");
+  inspector.markup.undo.redo();
+  return mutated;
+}
+
+/**
+ * A helper that fetches a front for a node that matches the given selector or
+ * doctype node if the selector is falsy.
+ */
+async function getNodeFrontForSelector(selector, inspector) {
+  if (selector) {
+    info("Retrieving front for selector " + selector);
+    return getNodeFront(selector, inspector);
+  }
+
+  info("Retrieving front for doctype node");
+  const { nodes } = await inspector.walker.children(inspector.walker.rootNode);
+  return nodes[0];
+}
+
+/**
+ * A simple polling helper that executes a given function until it returns true.
+ * @param {Function} check A generator function that is expected to return true at some
+ * stage.
+ * @param {String} desc A text description to be displayed when the polling starts.
+ * @param {Number} attemptes Optional number of times we poll. Defaults to 10.
+ * @param {Number} timeBetweenAttempts Optional time to wait between each attempt.
+ * Defaults to 200ms.
+ */
+async function poll(check, desc, attempts = 10, timeBetweenAttempts = 200) {
+  info(desc);
+
+  for (let i = 0; i < attempts; i++) {
+    if (await check()) {
+      return;
+    }
+    await new Promise(resolve => setTimeout(resolve, timeBetweenAttempts));
+  }
+
+  throw new Error(`Timeout while: ${desc}`);
+}
+
+/**
+ * Encapsulate some common operations for highlighter's tests, to have
+ * the tests cleaner, without exposing directly `inspector`, `highlighter`, and
+ * `highlighterTestFront` if not needed.
+ *
+ * @param  {String}
+ *    The highlighter's type
+ * @return
+ *    A generator function that takes an object with `inspector` and `highlighterTestFront`
+ *    properties. (see `openInspector`)
+ */
+const getHighlighterHelperFor = type =>
+  async function ({ inspector, highlighterTestFront }) {
+    const front = inspector.inspectorFront;
+    const highlighter = await front.getHighlighterByType(type);
+
+    let prefix = "";
+
+    // Internals for mouse events
+    let prevX, prevY;
+
+    // Highlighted node
+    let highlightedNode = null;
+
+    return {
+      set prefix(value) {
+        prefix = value;
+      },
+
+      get highlightedNode() {
+        if (!highlightedNode) {
+          return null;
+        }
+
+        return {
+          async getComputedStyle(options = {}) {
+            const pageStyle = highlightedNode.inspectorFront.pageStyle;
+            return pageStyle.getComputed(highlightedNode, options);
+          },
+        };
+      },
+
+      get actorID() {
+        if (!highlighter) {
+          return null;
+        }
+
+        return highlighter.actorID;
+      },
+
+      async show(selector = ":root", options, frameSelector = null) {
+        if (frameSelector) {
+          highlightedNode = await getNodeFrontInFrames(
+            [frameSelector, selector],
+            inspector
+          );
+        } else {
+          highlightedNode = await getNodeFront(selector, inspector);
+        }
+        return highlighter.show(highlightedNode, options);
+      },
+
+      async hide() {
+        await highlighter.hide();
+      },
+
+      async isElementHidden(id) {
+        return (
+          (await highlighterTestFront.getHighlighterNodeAttribute(
+            prefix + id,
+            "hidden",
+            highlighter
+          )) === "true"
+        );
+      },
+
+      async getElementTextContent(id) {
+        return highlighterTestFront.getHighlighterNodeTextContent(
+          prefix + id,
+          highlighter
+        );
+      },
+
+      async getElementAttribute(id, name) {
+        return highlighterTestFront.getHighlighterNodeAttribute(
+          prefix + id,
+          name,
+          highlighter
+        );
+      },
+
+      async waitForElementAttributeSet(id, name) {
+        await poll(async function () {
+          const value = await highlighterTestFront.getHighlighterNodeAttribute(
+            prefix + id,
+            name,
+            highlighter
+          );
+          return !!value;
+        }, `Waiting for element ${id} to have attribute ${name} set`);
+      },
+
+      async waitForElementAttributeRemoved(id, name) {
+        await poll(async function () {
+          const value = await highlighterTestFront.getHighlighterNodeAttribute(
+            prefix + id,
+            name,
+            highlighter
+          );
+          return !value;
+        }, `Waiting for element ${id} to have attribute ${name} removed`);
+      },
+
+      async synthesizeMouse({
+        selector = ":root",
+        center,
+        x,
+        y,
+        options,
+      } = {}) {
+        if (center === true) {
+          await safeSynthesizeMouseEventAtCenterInContentPage(
+            selector,
+            options
+          );
+        } else {
+          await safeSynthesizeMouseEventInContentPage(selector, x, y, options);
+        }
+      },
+
+      // This object will synthesize any "mouse" prefixed event to the
+      // `highlighterTestFront`, using the name of method called as suffix for the
+      // event's name.
+      // If no x, y coords are given, the previous ones are used.
+      //
+      // For example:
+      //   mouse.down(10, 20); // synthesize "mousedown" at 10,20
+      //   mouse.move(20, 30); // synthesize "mousemove" at 20,30
+      //   mouse.up();         // synthesize "mouseup" at 20,30
+      mouse: new Proxy(
+        {},
+        {
+          get: (target, name) =>
+            async function (x = prevX, y = prevY, selector = ":root") {
+              prevX = x;
+              prevY = y;
+              await safeSynthesizeMouseEventInContentPage(selector, x, y, {
+                type: "mouse" + name,
+              });
+            },
+        }
+      ),
+
+      async finalize() {
+        highlightedNode = null;
+        await highlighter.finalize();
+      },
+    };
+  };
+
+/**
+ * Inspector-scoped wrapper for highlighter helpers to be used in tests.
+ *
+ * @param  {Inspector} inspector
+ *         Inspector client object instance.
+ * @return {Object} Object with helper methods
+ */
+function getHighlighterTestHelpers(inspector) {
+  /**
+   * Return a promise which resolves when a highlighter triggers the given event.
+   *
+   * @param  {String} type
+   *         Highlighter type.
+   * @param  {String} eventName
+   *         Name of the event to listen to.
+   * @return {Promise}
+   *         Promise which resolves when the highlighter event occurs.
+   *         Resolves with the data payload attached to the event.
+   */
+  function _waitForHighlighterTypeEvent(type, eventName) {
+    return new Promise(resolve => {
+      function _handler(data) {
+        if (type === data.type) {
+          inspector.highlighters.off(eventName, _handler);
+          resolve(data);
+        }
+      }
+
+      inspector.highlighters.on(eventName, _handler);
+    });
+  }
+
+  return {
+    getActiveHighlighter(type) {
+      return inspector.highlighters.getActiveHighlighter(type);
+    },
+    getNodeForActiveHighlighter(type) {
+      return inspector.highlighters.getNodeForActiveHighlighter(type);
+    },
+    waitForHighlighterTypeShown(type) {
+      return _waitForHighlighterTypeEvent(type, "highlighter-shown");
+    },
+    waitForHighlighterTypeHidden(type) {
+      return _waitForHighlighterTypeEvent(type, "highlighter-hidden");
+    },
+    waitForHighlighterTypeRestored(type) {
+      return _waitForHighlighterTypeEvent(type, "highlighter-restored");
+    },
+    waitForHighlighterTypeDiscarded(type) {
+      return _waitForHighlighterTypeEvent(type, "highlighter-discarded");
+    },
+  };
+}
+
+/**
+ * Wait for the toolbox to emit the styleeditor-selected event and when done
+ * wait for the stylesheet identified by href to be loaded in the stylesheet
+ * editor
+ *
+ * @param {Toolbox} toolbox
+ * @param {String} href
+ *        Optional, if not provided, wait for the first editor to be ready
+ * @return a promise that resolves to the editor when the stylesheet editor is
+ * ready
+ */
+function waitForStyleEditor(toolbox, href) {
+  info("Waiting for the toolbox to switch to the styleeditor");
+
+  return new Promise(resolve => {
+    toolbox.once("styleeditor-selected").then(() => {
+      const panel = toolbox.getCurrentPanel();
+      ok(panel && panel.UI, "Styleeditor panel switched to front");
+
+      // A helper that resolves the promise once it receives an editor that
+      // matches the expected href. Returns false if the editor was not correct.
+      const gotEditor = editor => {
+        if (!editor) {
+          info("Editor went away after selected?");
+          return false;
+        }
+
+        const currentHref = editor.styleSheet.href;
+        if (!href || (href && currentHref.endsWith(href))) {
+          info("Stylesheet editor selected");
+          panel.UI.off("editor-selected", gotEditor);
+
+          editor.getSourceEditor().then(sourceEditor => {
+            info("Stylesheet editor fully loaded");
+            resolve(sourceEditor);
+          });
+
+          return true;
+        }
+
+        info("The editor was incorrect. Waiting for editor-selected event.");
+        return false;
+      };
+
+      // The expected editor may already be selected. Check the if the currently
+      // selected editor is the expected one and if not wait for an
+      // editor-selected event.
+      if (!gotEditor(panel.UI.selectedEditor)) {
+        // The expected editor is not selected (yet). Wait for it.
+        panel.UI.on("editor-selected", gotEditor);
+      }
+    });
+  });
+}
+
+/**
+ * Checks if document's active element is within the given element.
+ * @param  {HTMLDocument}  doc document with active element in question
+ * @param  {DOMNode}       container element tested on focus containment
+ * @return {Boolean}
+ */
+function containsFocus(doc, container) {
+  let elm = doc.activeElement;
+  while (elm) {
+    if (elm === container) {
+      return true;
+    }
+    elm = elm.parentNode;
+  }
+  return false;
+}
+
+/**
+ * Listen for a new tab to open and return a promise that resolves when one
+ * does and completes the load event.
+ *
+ * @return a promise that resolves to the tab object
+ */
+var waitForTab = async function () {
+  info("Waiting for a tab to open");
+  await once(gBrowser.tabContainer, "TabOpen");
+  const tab = gBrowser.selectedTab;
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+  info("The tab load completed");
+  return tab;
+};
+
+/**
+ * Simulate the key input for the given input in the window.
+ *
+ * @param {String} input
+ *        The string value to input
+ * @param {Window} win
+ *        The window containing the panel
+ */
+function synthesizeKeys(input, win) {
+  for (const key of input.split("")) {
+    EventUtils.synthesizeKey(key, {}, win);
+  }
+}
+
+/**
+ * Make sure window is properly focused before sending a key event.
+ *
+ * @param {Window} win
+ *        The window containing the panel
+ * @param {String} key
+ *        The string value to input
+ */
+function focusAndSendKey(win, key) {
+  win.document.documentElement.focus();
+  EventUtils.sendKey(key, win);
+}
+
+/**
+ * Given a Tooltip instance, fake a mouse event on the `target` DOM Element
+ * and assert that the `tooltip` is correctly displayed.
+ *
+ * @param {Tooltip} tooltip
+ *        The tooltip instance
+ * @param {DOMElement} target
+ *        The DOM Element on which a tooltip should appear
+ *
+ * @return a promise that resolves with the tooltip object
+ */
+async function assertTooltipShownOnHover(tooltip, target) {
+  const mouseEvent = new target.ownerDocument.defaultView.MouseEvent(
+    "mousemove",
+    {
+      bubbles: true,
+    }
+  );
+  target.dispatchEvent(mouseEvent);
+
+  if (!tooltip.isVisible()) {
+    info("Waiting for tooltip to be shown");
+    await tooltip.once("shown");
+  }
+
+  ok(tooltip.isVisible(), `The tooltip is visible`);
+
+  return tooltip;
+}
+
+/**
+ * Given an inspector `view` object, fake a mouse event on the `target` DOM
+ * Element and assert that the preview tooltip  is correctly displayed.
+ *
+ * @param {CssRuleView|ComputedView|...} view
+ *        The instance of an inspector panel
+ * @param {DOMElement} target
+ *        The DOM Element on which a tooltip should appear
+ *
+ * @return a promise that resolves with the tooltip object
+ */
+async function assertShowPreviewTooltip(view, target) {
+  const name = "previewTooltip";
+
+  // Get the tooltip. If it does not exist one will be created.
+  const tooltip = view.tooltips.getTooltip(name);
+  ok(tooltip, `Tooltip '${name}' has been instantiated`);
+
+  const shown = tooltip.once("shown");
+  const mouseEvent = new target.ownerDocument.defaultView.MouseEvent(
+    "mousemove",
+    {
+      bubbles: true,
+    }
+  );
+  target.dispatchEvent(mouseEvent);
+
+  info("Waiting for tooltip to be shown");
+  await shown;
+
+  ok(tooltip.isVisible(), `The tooltip '${name}' is visible`);
+
+  return tooltip;
+}
+
+/**
+ * Given a `tooltip` instance, fake a mouse event on `target` DOM element
+ * and check that the tooltip correctly disappear.
+ *
+ * @param {Tooltip} tooltip
+ *        The tooltip instance
+ * @param {DOMElement} target
+ *        The DOM Element on which a tooltip should appear
+ */
+async function assertTooltipHiddenOnMouseOut(tooltip, target) {
+  // The tooltip actually relies on mousemove events to check if it sould be hidden.
+  const mouseEvent = new target.ownerDocument.defaultView.MouseEvent(
+    "mousemove",
+    {
+      bubbles: true,
+      relatedTarget: target,
+    }
+  );
+  target.parentNode.dispatchEvent(mouseEvent);
+
+  await tooltip.once("hidden");
+
+  ok(!tooltip.isVisible(), "The tooltip is hidden on mouseout");
+}
+
+/**
+ * Get the text displayed for a given DOM Element's textContent within the
+ * markup view.
+ *
+ * @param {String} selector
+ * @param {InspectorPanel} inspector
+ * @return {String} The text displayed in the markup view
+ */
+async function getDisplayedNodeTextContent(selector, inspector) {
+  // We have to ensure that the textContent is displayed, for that the DOM
+  // Element has to be selected in the markup view and to be expanded.
+  await selectNode(selector, inspector);
+
+  const container = await getContainerForSelector(selector, inspector);
+  await inspector.markup.expandNode(container.node);
+  await waitForMultipleChildrenUpdates(inspector);
+  if (container) {
+    const textContainer = container.elt.querySelector("pre");
+    return textContainer.textContent;
+  }
+  return null;
+}
+
+/**
+ * Toggle the shapes highlighter by simulating a click on the toggle
+ * in the rules view with the given selector and property
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} selector
+ *        The selector in the rule-view to look for the property in
+ * @param {String} property
+ *        The name of the property
+ * @param {Boolean} show
+ *        If true, the shapes highlighter is being shown. If false, it is being hidden
+ * @param {Options} options
+ *        Config option for the shapes highlighter. Contains:
+ *        - {Boolean} transformMode: whether to show the highlighter in transforms mode
+ */
+async function toggleShapesHighlighter(
+  view,
+  selector,
+  property,
+  show,
+  options = {}
+) {
+  info(
+    `Toggle shapes highlighter ${
+      show ? "on" : "off"
+    } for ${property} on ${selector}`
+  );
+  const highlighters = view.highlighters;
+  const container = getRuleViewProperty(view, selector, property).valueSpan;
+  const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+  const metaKey = options.transformMode;
+  const ctrlKey = options.transformMode;
+
+  if (show) {
+    const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+    EventUtils.sendMouseEvent(
+      { type: "click", metaKey, ctrlKey },
+      shapesToggle,
+      view.styleWindow
+    );
+    await onHighlighterShown;
+  } else {
+    const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+    EventUtils.sendMouseEvent(
+      { type: "click", metaKey, ctrlKey },
+      shapesToggle,
+      view.styleWindow
+    );
+    await onHighlighterHidden;
+  }
+}
+
+/**
+ * Toggle the provided markup container by clicking on the expand arrow and waiting for
+ * children to update. Similar to expandContainer helper, but this method
+ * uses a click rather than programatically calling expandNode().
+ *
+ * @param {InspectorPanel} inspector
+ *        The current inspector instance.
+ * @param {MarkupContainer} container
+ *        The markup container to click on.
+ * @param {Object} modifiers
+ *        options.altKey {Boolean} Use the altKey modifier, to recursively apply
+ *        the action to all the children of the container.
+ */
+async function toggleContainerByClick(
+  inspector,
+  container,
+  { altKey = false } = {}
+) {
+  EventUtils.synthesizeMouseAtCenter(
+    container.expander,
+    {
+      altKey,
+    },
+    inspector.markup.doc.defaultView
+  );
+
+  // Wait for any pending children updates
+  await waitForMultipleChildrenUpdates(inspector);
+}
+
+/**
+ * Simulate a color change in a given color picker tooltip.
+ *
+ * @param  {Spectrum} colorPicker
+ *         The color picker widget.
+ * @param  {Array} newRgba
+ *         Array of the new rgba values to be set in the color widget.
+ */
+async function simulateColorPickerChange(colorPicker, newRgba) {
+  info("Getting the spectrum colorpicker object");
+  const spectrum = await colorPicker.spectrum;
+  info("Setting the new color");
+  spectrum.rgb = newRgba;
+  info("Applying the change");
+  spectrum.updateUI();
+  spectrum.onChange();
+}
+
+/**
+ * Assert method to compare the current content of the markupview to a text based tree.
+ *
+ * @param {String} tree
+ *        Multiline string representing the markup view tree, for instance:
+ *        `root
+ *           child1
+ *             subchild1
+ *             subchild2
+ *           child2
+ *             subchild3!slotted`
+ *           child3!ignore-children
+ *        Each sub level should be indented by 2 spaces.
+ *        Each line contains text expected to match with the text of the corresponding
+ *        node in the markup view. Some suffixes are supported:
+ *        - !slotted -> indicates that the line corresponds to the slotted version
+ *        - !ignore-children -> the node might have children but do not assert them
+ * @param {String} selector
+ *        A CSS selector that will uniquely match the "root" element from the tree
+ * @param {Inspector} inspector
+ *        The inspector instance.
+ */
+async function assertMarkupViewAsTree(tree, selector, inspector) {
+  const { markup } = inspector;
+
+  info(`Find and expand the shadow DOM host matching selector ${selector}.`);
+  const rootFront = await getNodeFront(selector, inspector);
+  const rootContainer = markup.getContainer(rootFront);
+
+  const parsedTree = _parseMarkupViewTree(tree);
+  const treeRoot = parsedTree.children[0];
+  await _checkMarkupViewNode(treeRoot, rootContainer, inspector);
+}
+
+async function _checkMarkupViewNode(treeNode, container, inspector) {
+  const { node, children, path } = treeNode;
+  info("Checking [" + path + "]");
+  info("Checking node: " + node);
+
+  const ignoreChildren = node.includes("!ignore-children");
+  const slotted = node.includes("!slotted");
+
+  // Remove optional suffixes.
+  const nodeText = node.replace("!slotted", "").replace("!ignore-children", "");
+
+  assertContainerHasText(container, nodeText);
+
+  if (slotted) {
+    assertContainerSlotted(container);
+  }
+
+  if (ignoreChildren) {
+    return;
+  }
+
+  if (!children.length) {
+    ok(!container.canExpand, "Container for [" + path + "] has no children");
+    return;
+  }
+
+  // Expand the container if not already done.
+  if (!container.expanded) {
+    await expandContainer(inspector, container);
+  }
+
+  const containers = container.getChildContainers();
+  is(
+    containers.length,
+    children.length,
+    "Node [" + path + "] has the expected number of children"
+  );
+  for (let i = 0; i < children.length; i++) {
+    await _checkMarkupViewNode(children[i], containers[i], inspector);
+  }
+}
+
+/**
+ * Helper designed to parse a tree represented as:
+ * root
+ *   child1
+ *     subchild1
+ *     subchild2
+ *   child2
+ *     subchild3!slotted
+ *
+ * Lines represent a simplified view of the markup, where the trimmed line is supposed to
+ * be included in the text content of the actual markupview container.
+ * This method returns an object that can be passed to _checkMarkupViewNode() to verify
+ * the current markup view displays the expected structure.
+ */
+function _parseMarkupViewTree(inputString) {
+  const tree = {
+    level: 0,
+    children: [],
+  };
+  let lines = inputString.split("\n");
+  lines = lines.filter(l => l.trim());
+
+  let currentNode = tree;
+  for (const line of lines) {
+    const nodeString = line.trim();
+    const level = line.split("  ").length;
+
+    let parent;
+    if (level > currentNode.level) {
+      parent = currentNode;
+    } else {
+      parent = currentNode.parent;
+      for (let i = 0; i < currentNode.level - level; i++) {
+        parent = parent.parent;
+      }
+    }
+
+    const node = {
+      node: nodeString,
+      children: [],
+      parent,
+      level,
+      path: parent.path + " " + nodeString,
+    };
+
+    parent.children.push(node);
+    currentNode = node;
+  }
+
+  return tree;
+}
+
+/**
+ * Assert whether the provided container is slotted.
+ */
+function assertContainerSlotted(container) {
+  ok(container.isSlotted(), "Container is a slotted container");
+  ok(
+    container.elt.querySelector(".reveal-link"),
+    "Slotted container has a reveal link element"
+  );
+}
+
+/**
+ * Check if the provided text can be matched anywhere in the text content for the provided
+ * container.
+ */
+function assertContainerHasText(container, expectedText) {
+  const textContent = container.elt.textContent;
+  ok(
+    textContent.includes(expectedText),
+    "Container has expected text: " + expectedText
+  );
+}
+
+function waitForMutation(inspector, type) {
+  return waitForNMutations(inspector, type, 1);
+}
+
+function waitForNMutations(inspector, type, count) {
+  info(`Expecting ${count} markupmutation of type ${type}`);
+  let receivedMutations = 0;
+  return new Promise(resolve => {
+    inspector.on("markupmutation", function onMutation(mutations) {
+      const validMutations = mutations.filter(m => m.type === type).length;
+      receivedMutations = receivedMutations + validMutations;
+      if (receivedMutations == count) {
+        inspector.off("markupmutation", onMutation);
+        resolve();
+      }
+    });
+  });
+}
+
+/**
+ * Move the mouse on the content page at the x,y position and check the color displayed
+ * in the eyedropper label.
+ *
+ * @param {HighlighterTestFront} highlighterTestFront
+ * @param {Number} x
+ * @param {Number} y
+ * @param {String} expectedColor: Hexa string of the expected color
+ * @param {String} assertionDescription
+ */
+async function checkEyeDropperColorAt(
+  highlighterTestFront,
+  x,
+  y,
+  expectedColor,
+  assertionDescription
+) {
+  info(`Move mouse to ${x},${y}`);
+  await safeSynthesizeMouseEventInContentPage(":root", x, y, {
+    type: "mousemove",
+  });
+
+  const colorValue = await highlighterTestFront.getEyeDropperColorValue();
+  is(colorValue, expectedColor, assertionDescription);
+}
+
+/**
+ * Delete the provided node front using the context menu in the markup view.
+ * Will resolve after the inspector UI was fully updated.
+ *
+ * @param {NodeFront} node
+ *        The node front to delete.
+ * @param {Inspector} inspector
+ *        The current inspector panel instance.
+ */
+async function deleteNodeWithContextMenu(node, inspector) {
+  const container = inspector.markup.getContainer(node);
+
+  const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+    target: container.tagLine,
+  });
+  const menuItem = allMenuItems.find(item => item.id === "node-menu-delete");
+  const onInspectorUpdated = inspector.once("inspector-updated");
+
+  info("Clicking 'Delete Node' in the context menu.");
+  is(menuItem.disabled, false, "delete menu item is enabled");
+  menuItem.click();
+
+  // close the open context menu
+  EventUtils.synthesizeKey("KEY_Escape");
+
+  info("Waiting for inspector to update.");
+  await onInspectorUpdated;
+
+  // Since the mutations are sent asynchronously from the server, the
+  // inspector-updated event triggered by the deletion might happen before
+  // the mutation is received and the element is removed from the
+  // breadcrumbs. See bug 1284125.
+  if (inspector.breadcrumbs.indexOf(node) > -1) {
+    info("Crumbs haven't seen deletion. Waiting for breadcrumbs-updated.");
+    await inspector.once("breadcrumbs-updated");
+  }
+}
+
+/**
+ * Forces the content page to reflow and waits for the next repaint.
+ */
+function reflowContentPage() {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    return new Promise(resolve => {
+      content.document.documentElement.offsetWidth;
+      content.requestAnimationFrame(resolve);
+    });
+  });
+}
+
+/**
+ * Get all box-model regions' adjusted boxquads for the given element
+ * @param {String|Array} selector The node selector to target a given element
+ * @return {Promise<Object>} A promise that resolves with an object with each property of
+ *         a box-model region, each of them being an object with the p1/p2/p3/p4 properties.
+ */
+async function getAllAdjustedQuadsForContentPageElement(
+  selector,
+  useTopWindowAsBoundary = true
+) {
+  const selectors = Array.isArray(selector) ? selector : [selector];
+
+  const browsingContext =
+    selectors.length == 1
+      ? gBrowser.selectedBrowser.browsingContext
+      : await getBrowsingContextInFrames(
+          gBrowser.selectedBrowser.browsingContext,
+          selectors.slice(0, -1)
+        );
+
+  const inBrowsingContextSelector = selectors.at(-1);
+  return SpecialPowers.spawn(
+    browsingContext,
+    [inBrowsingContextSelector, useTopWindowAsBoundary],
+    (_selector, _useTopWindowAsBoundary) => {
+      const { require } = ChromeUtils.importESModule(
+        "resource://devtools/shared/loader/Loader.sys.mjs"
+      );
+      const {
+        getAdjustedQuads,
+      } = require("resource://devtools/shared/layout/utils.js");
+
+      const node = content.document.querySelector(_selector);
+
+      const boundaryWindow = _useTopWindowAsBoundary ? content.top : content;
+      const regions = {};
+      for (const boxType of ["content", "padding", "border", "margin"]) {
+        regions[boxType] = getAdjustedQuads(boundaryWindow, node, boxType);
+      }
+
+      return regions;
+    }
+  );
+}
+
+/**
+ * Assert that the box-model highlighter's current position corresponds to the
+ * given node boxquads.
+ *
+ * @param {HighlighterTestFront} highlighterTestFront
+ * @param {String} selector The node selector to get the boxQuads from
+ */
+async function isNodeCorrectlyHighlighted(highlighterTestFront, selector) {
+  const boxModel = await highlighterTestFront.getBoxModelStatus();
+
+  const useTopWindowAsBoundary = !!highlighterTestFront.parentFront.isTopLevel;
+  const regions = await getAllAdjustedQuadsForContentPageElement(
+    selector,
+    useTopWindowAsBoundary
+  );
+
+  for (const boxType of ["content", "padding", "border", "margin"]) {
+    const [quad] = regions[boxType];
+    for (const point in boxModel[boxType].points) {
+      is(
+        boxModel[boxType].points[point].x,
+        quad[point].x,
+        `${selector} ${boxType} point ${point} x coordinate is correct`
+      );
+      is(
+        boxModel[boxType].points[point].y,
+        quad[point].y,
+        `${selector} ${boxType} point ${point} y coordinate is correct`
+      );
+    }
+  }
+}
+
+/**
+ * Get the position and size of the measuring tool.
+ *
+ * @param {Object} Object returned by getHighlighterHelperFor()
+ * @return {Promise<Object>} A promise that resolves with an object containing
+ *    the x, y, width, and height properties of the measuring tool which has
+ *    been drawn on-screen
+ */
+async function getAreaRect({ getElementAttribute }) {
+  // The 'box-path' element holds the width and height of the
+  // measuring area as well as the position relative to its
+  // parent <g> element.
+  const d = await getElementAttribute("box-path", "d");
+  // The tool element itself is a <g> element grouping all paths.
+  // Though <g> elements do not have coordinates by themselves,
+  // therefore it is positioned using the 'transform' CSS property.
+  // So, in order to get the position of the measuring area, the
+  // coordinates need to be read from the translate() function.
+  const transform = await getElementAttribute("tool", "transform");
+  const reDir = /(\d+) (\d+)/g;
+  const reTransform = /(\d+),(\d+)/;
+  const coords = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  };
+  let match;
+  while ((match = reDir.exec(d))) {
+    let [, x, y] = match;
+    x = Number(x);
+    y = Number(y);
+    if (x < coords.x) {
+      coords.x = x;
+    }
+    if (y < coords.y) {
+      coords.y = y;
+    }
+    if (x > coords.width) {
+      coords.width = x;
+    }
+    if (y > coords.height) {
+      coords.height = y;
+    }
+  }
+
+  match = reTransform.exec(transform);
+  coords.x += Number(match[1]);
+  coords.y += Number(match[2]);
+
+  return coords;
+}
diff --git a/devtools/client/inspector/test/img_browser_inspector_highlighter-eyedropper-image.png b/devtools/client/inspector/test/img_browser_inspector_highlighter-eyedropper-image.png
new file mode 100644
index 0000000000..a0aef4f93b
--- /dev/null
+++ b/devtools/client/inspector/test/img_browser_inspector_highlighter-eyedropper-image.png
diff --git a/devtools/client/inspector/test/shared-head.js b/devtools/client/inspector/test/shared-head.js
new file mode 100644
index 0000000000..9e82d7e087
--- /dev/null
+++ b/devtools/client/inspector/test/shared-head.js
@@ -0,0 +1,1158 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* globals getHighlighterTestFront, openToolboxForTab, gBrowser */
+/* import-globals-from ../../shared/test/shared-head.js */
+
+var {
+  getInplaceEditorForSpan: inplaceEditor,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+
+// This file contains functions related to the inspector that are also of interest to
+// other test directores as well.
+
+/**
+ * Open the toolbox, with the inspector tool visible.
+ * @param {String} hostType Optional hostType, as defined in Toolbox.HostType
+ * @return {Promise} A promise that resolves when the inspector is ready.The promise
+ *         resolves with an object containing the following properties:
+ *           - toolbox
+ *           - inspector
+ *           - highlighterTestFront
+ */
+var openInspector = async function (hostType) {
+  info("Opening the inspector");
+
+  const toolbox = await openToolboxForTab(
+    gBrowser.selectedTab,
+    "inspector",
+    hostType
+  );
+  const inspector = toolbox.getPanel("inspector");
+
+  const highlighterTestFront = await getHighlighterTestFront(toolbox);
+
+  return { toolbox, inspector, highlighterTestFront };
+};
+
+/**
+ * Open the toolbox, with the inspector tool visible, and the one of the sidebar
+ * tabs selected.
+ *
+ * @param {String} id
+ *        The ID of the sidebar tab to be opened
+ * @return {Promise<Object>} A promise that resolves when the inspector is ready and the tab is
+ *         visible and ready. The promise resolves with an object containing the
+ *         following properties:
+ *           - toolbox
+ *           - inspector
+ *           - highlighterTestFront
+ */
+var openInspectorSidebarTab = async function (id) {
+  const { toolbox, inspector, highlighterTestFront } = await openInspector();
+
+  info("Selecting the " + id + " sidebar");
+
+  const onSidebarSelect = inspector.sidebar.once("select");
+  if (id === "layoutview") {
+    // The layout view should wait until the box-model and grid-panel are ready.
+    const onBoxModelViewReady = inspector.once("boxmodel-view-updated");
+    const onGridPanelReady = inspector.once("grid-panel-updated");
+    inspector.sidebar.select(id);
+    await onBoxModelViewReady;
+    await onGridPanelReady;
+  } else {
+    inspector.sidebar.select(id);
+  }
+  await onSidebarSelect;
+
+  return {
+    toolbox,
+    inspector,
+    highlighterTestFront,
+  };
+};
+
+/**
+ * Open the toolbox, with the inspector tool visible, and the rule-view
+ * sidebar tab selected.
+ *
+ * @return a promise that resolves when the inspector is ready and the rule view
+ * is visible and ready
+ */
+async function openRuleView() {
+  const { inspector, toolbox, highlighterTestFront } = await openInspector();
+
+  const ruleViewPanel = inspector.getPanel("ruleview");
+  await ruleViewPanel.readyPromise;
+  const view = ruleViewPanel.view;
+
+  // Replace the view to use a custom debounce function that can be triggered manually
+  // through an additional ".flush()" property.
+  view.debounce = manualDebounce();
+
+  return {
+    toolbox,
+    inspector,
+    highlighterTestFront,
+    view,
+  };
+}
+
+/**
+ * Open the toolbox, with the inspector tool visible, and the computed-view
+ * sidebar tab selected.
+ *
+ * @return a promise that resolves when the inspector is ready and the computed
+ * view is visible and ready
+ */
+function openComputedView() {
+  return openInspectorSidebarTab("computedview").then(data => {
+    const view = data.inspector.getPanel("computedview").computedView;
+
+    return {
+      toolbox: data.toolbox,
+      inspector: data.inspector,
+      highlighterTestFront: data.highlighterTestFront,
+      view,
+    };
+  });
+}
+
+/**
+ * Open the toolbox, with the inspector tool visible, and the changes view
+ * sidebar tab selected.
+ *
+ * @return a promise that resolves when the inspector is ready and the changes
+ * view is visible and ready
+ */
+function openChangesView() {
+  return openInspectorSidebarTab("changesview").then(data => {
+    return {
+      toolbox: data.toolbox,
+      inspector: data.inspector,
+      highlighterTestFront: data.highlighterTestFront,
+      view: data.inspector.getPanel("changesview"),
+    };
+  });
+}
+
+/**
+ * Open the toolbox, with the inspector tool visible, and the layout view
+ * sidebar tab selected to display the box model view with properties.
+ *
+ * @return {Promise} a promise that resolves when the inspector is ready and the layout
+ *         view is visible and ready.
+ */
+function openLayoutView() {
+  return openInspectorSidebarTab("layoutview").then(data => {
+    return {
+      toolbox: data.toolbox,
+      inspector: data.inspector,
+      boxmodel: data.inspector.getPanel("boxmodel"),
+      gridInspector: data.inspector.getPanel("layoutview").gridInspector,
+      flexboxInspector: data.inspector.getPanel("layoutview").flexboxInspector,
+      layoutView: data.inspector.getPanel("layoutview"),
+      highlighterTestFront: data.highlighterTestFront,
+    };
+  });
+}
+
+/**
+ * Select the rule view sidebar tab on an already opened inspector panel.
+ *
+ * @param {InspectorPanel} inspector
+ *        The opened inspector panel
+ * @return {CssRuleView} the rule view
+ */
+function selectRuleView(inspector) {
+  return inspector.getPanel("ruleview").view;
+}
+
+/**
+ * Select the computed view sidebar tab on an already opened inspector panel.
+ *
+ * @param {InspectorPanel} inspector
+ *        The opened inspector panel
+ * @return {CssComputedView} the computed view
+ */
+function selectComputedView(inspector) {
+  inspector.sidebar.select("computedview");
+  return inspector.getPanel("computedview").computedView;
+}
+
+/**
+ * Select the changes view sidebar tab on an already opened inspector panel.
+ *
+ * @param {InspectorPanel} inspector
+ *        The opened inspector panel
+ * @return {ChangesView} the changes view
+ */
+function selectChangesView(inspector) {
+  inspector.sidebar.select("changesview");
+  return inspector.getPanel("changesview");
+}
+
+/**
+ * Select the layout view sidebar tab on an already opened inspector panel.
+ *
+ * @param  {InspectorPanel} inspector
+ * @return {BoxModel} the box model
+ */
+function selectLayoutView(inspector) {
+  inspector.sidebar.select("layoutview");
+  return inspector.getPanel("boxmodel");
+}
+
+/**
+ * Get the NodeFront for a node that matches a given css selector, via the
+ * protocol.
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return {Promise} Resolves to the NodeFront instance
+ */
+function getNodeFront(selector, { walker }) {
+  if (selector._form) {
+    return selector;
+  }
+  return walker.querySelector(walker.rootNode, selector);
+}
+
+/**
+ * Set the inspector's current selection to the first match of the given css
+ * selector
+ *
+ * @param {String|NodeFront} selector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox.
+ * @param {String} reason
+ *        Defaults to "test" which instructs the inspector not to highlight the
+ *        node upon selection.
+ * @param {Boolean} isSlotted
+ *        Is the selection representing the slotted version the node.
+ * @return {Promise} Resolves when the inspector is updated with the new node
+ */
+var selectNode = async function (
+  selector,
+  inspector,
+  reason = "test",
+  isSlotted
+) {
+  info("Selecting the node for '" + selector + "'");
+  const nodeFront = await getNodeFront(selector, inspector);
+  const updated = inspector.once("inspector-updated");
+
+  const {
+    ELEMENT_NODE,
+  } = require("resource://devtools/shared/dom-node-constants.js");
+  const onSelectionCssSelectorsUpdated =
+    nodeFront?.nodeType == ELEMENT_NODE
+      ? inspector.once("selection-css-selectors-updated")
+      : null;
+
+  inspector.selection.setNodeFront(nodeFront, { reason, isSlotted });
+  await updated;
+  await onSelectionCssSelectorsUpdated;
+};
+
+/**
+ * Using the markupview's _waitForChildren function, wait for all queued
+ * children updates to be handled.
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when all queued children updates have been
+ * handled
+ */
+function waitForChildrenUpdated({ markup }) {
+  info("Waiting for queued children updates to be handled");
+  return new Promise(resolve => {
+    markup._waitForChildren().then(() => {
+      executeSoon(resolve);
+    });
+  });
+}
+
+// The expand all operation of the markup-view calls itself recursively and
+// there's not one event we can wait for to know when it's done, so use this
+// helper function to wait until all recursive children updates are done.
+async function waitForMultipleChildrenUpdates(inspector) {
+  // As long as child updates are queued up while we wait for an update already
+  // wait again
+  if (
+    inspector.markup._queuedChildUpdates &&
+    inspector.markup._queuedChildUpdates.size
+  ) {
+    await waitForChildrenUpdated(inspector);
+    return waitForMultipleChildrenUpdates(inspector);
+  }
+  return null;
+}
+
+/**
+ * Expand the provided markup container programmatically and  wait for all
+ * children to update.
+ */
+async function expandContainer(inspector, container) {
+  await inspector.markup.expandNode(container.node);
+  await waitForMultipleChildrenUpdates(inspector);
+}
+
+/**
+ * Get the NodeFront for a node that matches a given css selector inside a
+ * given iframe.
+ *
+ * @param {Array} selectors
+ *        Arrays of CSS selectors from the root document to the node.
+ *        The last CSS selector of the array is for the node in its frame doc.
+ *        The before-last CSS selector is for the frame in its parent frame, etc...
+ *        Ex: ["frame.first-frame", ..., "frame.last-frame", ".target-node"]
+ * @param {InspectorPanel} inspector
+ *        See `selectNode`
+ * @return {NodeFront} Resolves the corresponding node front.
+ */
+async function getNodeFrontInFrames(selectors, inspector) {
+  let walker = inspector.walker;
+  let rootNode = walker.rootNode;
+
+  // clone the array since `selectors` could be used from callsite after.
+  selectors = [...selectors];
+  // Extract the last selector from the provided array of selectors.
+  const nodeSelector = selectors.pop();
+
+  // Remaining selectors should all be frame selectors. Renaming for clarity.
+  const frameSelectors = selectors;
+
+  info("Loop through all frame selectors");
+  for (const frameSelector of frameSelectors) {
+    const url = walker.targetFront.url;
+    info(`Find the frame element for selector ${frameSelector} in ${url}`);
+
+    const frameNodeFront = await walker.querySelector(rootNode, frameSelector);
+
+    // If needed, connect to the corresponding frame target.
+    // Otherwise, reuse the current targetFront.
+    let frameTarget = frameNodeFront.targetFront;
+    if (frameNodeFront.useChildTargetToFetchChildren) {
+      info("Connect to frame and retrieve the targetFront");
+      frameTarget = await frameNodeFront.connectToFrame();
+    }
+
+    walker = (await frameTarget.getFront("inspector")).walker;
+
+    if (frameNodeFront.useChildTargetToFetchChildren) {
+      // For frames or browser elements, use the walker's rootNode.
+      rootNode = walker.rootNode;
+    } else {
+      // For same-process frames, select the document front as the root node.
+      // It is a different node from the walker's rootNode.
+      info("Retrieve the children of the frame to find the document node");
+      const { nodes } = await walker.children(frameNodeFront);
+      rootNode = nodes.find(n => n.nodeType === Node.DOCUMENT_NODE);
+    }
+  }
+
+  return walker.querySelector(rootNode, nodeSelector);
+}
+
+/**
+ * Helper to select a node in the markup-view, in a nested tree of
+ * frames/browser elements. The iframes can either be remote or same-process.
+ *
+ * Note: "frame" will refer to either "frame" or "browser" in the documentation
+ * and method.
+ *
+ * @param {Array} selectors
+ *        Arrays of CSS selectors from the root document to the node.
+ *        The last CSS selector of the array is for the node in its frame doc.
+ *        The before-last CSS selector is for the frame in its parent frame, etc...
+ *        Ex: ["frame.first-frame", ..., "frame.last-frame", ".target-node"]
+ * @param {InspectorPanel} inspector
+ *        See `selectNode`
+ * @param {String} reason
+ *        See `selectNode`
+ * @param {Boolean} isSlotted
+ *        See `selectNode`
+ * @return {NodeFront} The selected node front.
+ */
+async function selectNodeInFrames(
+  selectors,
+  inspector,
+  reason = "test",
+  isSlotted
+) {
+  const nodeFront = await getNodeFrontInFrames(selectors, inspector);
+  await selectNode(nodeFront, inspector, reason, isSlotted);
+  return nodeFront;
+}
+
+/**
+ * Create a throttling function that can be manually "flushed". This is to replace the
+ * use of the `debounce` function from `devtools/client/inspector/shared/utils.js`, which
+ * has a setTimeout that can cause intermittents.
+ * @return {Function} This function has the same function signature as debounce, but
+ *                    the property `.flush()` has been added for flushing out any
+ *                    debounced calls.
+ */
+function manualDebounce() {
+  let calls = [];
+
+  function debounce(func, wait, scope) {
+    return function () {
+      const existingCall = calls.find(call => call.func === func);
+      if (existingCall) {
+        existingCall.args = arguments;
+      } else {
+        calls.push({ func, wait, scope, args: arguments });
+      }
+    };
+  }
+
+  debounce.flush = function () {
+    calls.forEach(({ func, scope, args }) => func.apply(scope, args));
+    calls = [];
+  };
+
+  return debounce;
+}
+
+/**
+ * Get the requested rule style property from the current browser.
+ *
+ * @param {Number} styleSheetIndex
+ * @param {Number} ruleIndex
+ * @param {String} name
+ * @return {String} The value, if found, null otherwise
+ */
+
+async function getRulePropertyValue(styleSheetIndex, ruleIndex, name) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [styleSheetIndex, ruleIndex, name],
+    (styleSheetIndexChild, ruleIndexChild, nameChild) => {
+      let value = null;
+
+      info(
+        "Getting the value for property name " +
+          nameChild +
+          " in sheet " +
+          styleSheetIndexChild +
+          " and rule " +
+          ruleIndexChild
+      );
+
+      const sheet = content.document.styleSheets[styleSheetIndexChild];
+      if (sheet) {
+        const rule = sheet.cssRules[ruleIndexChild];
+        if (rule) {
+          value = rule.style.getPropertyValue(nameChild);
+        }
+      }
+
+      return value;
+    }
+  );
+}
+
+/**
+ * Get the requested computed style property from the current browser.
+ *
+ * @param {String} selector
+ *        The selector used to obtain the element.
+ * @param {String} pseudo
+ *        pseudo id to query, or null.
+ * @param {String} propName
+ *        name of the property.
+ */
+async function getComputedStyleProperty(selector, pseudo, propName) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, pseudo, propName],
+    (selectorChild, pseudoChild, propNameChild) => {
+      const element = content.document.querySelector(selectorChild);
+      return content.document.defaultView
+        .getComputedStyle(element, pseudoChild)
+        .getPropertyValue(propNameChild);
+    }
+  );
+}
+
+/**
+ * Wait until the requested computed style property has the
+ * expected value in the the current browser.
+ *
+ * @param {String} selector
+ *        The selector used to obtain the element.
+ * @param {String} pseudo
+ *        pseudo id to query, or null.
+ * @param {String} propName
+ *        name of the property.
+ * @param {String} expected
+ *        expected value of property
+ */
+async function waitForComputedStyleProperty(
+  selector,
+  pseudo,
+  propName,
+  expected
+) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, pseudo, propName, expected],
+    (selectorChild, pseudoChild, propNameChild, expectedChild) => {
+      const element = content.document.querySelector(selectorChild);
+      return ContentTaskUtils.waitForCondition(() => {
+        const value = content.document.defaultView
+          .getComputedStyle(element, pseudoChild)
+          .getPropertyValue(propNameChild);
+        return value === expectedChild;
+      });
+    }
+  );
+}
+
+/**
+ * Given an inplace editable element, click to switch it to edit mode, wait for
+ * focus
+ *
+ * @return a promise that resolves to the inplace-editor element when ready
+ */
+var focusEditableField = async function (
+  ruleView,
+  editable,
+  xOffset = 1,
+  yOffset = 1,
+  options = {}
+) {
+  editable.scrollIntoView();
+  const onFocus = once(editable.parentNode, "focus", true);
+  info("Clicking on editable field to turn to edit mode");
+  if (options.type === undefined) {
+    // "mousedown" and "mouseup" flushes any pending layout.  Therefore,
+    // if the caller wants to click an element, e.g., closebrace to add new
+    // property, we need to guarantee that the element is clicked here even
+    // if it's moved by flushing the layout because whether the UI is useful
+    // or not when there is pending reflow is not scope of the tests.
+    options.type = "mousedown";
+    EventUtils.synthesizeMouse(
+      editable,
+      xOffset,
+      yOffset,
+      options,
+      editable.ownerGlobal
+    );
+    options.type = "mouseup";
+    EventUtils.synthesizeMouse(
+      editable,
+      xOffset,
+      yOffset,
+      options,
+      editable.ownerGlobal
+    );
+  } else {
+    EventUtils.synthesizeMouse(
+      editable,
+      xOffset,
+      yOffset,
+      options,
+      editable.ownerGlobal
+    );
+  }
+  await onFocus;
+
+  info("Editable field gained focus, returning the input field now");
+  const onEdit = inplaceEditor(editable.ownerDocument.activeElement);
+
+  return onEdit;
+};
+
+/**
+ * Get the DOMNode for a css rule in the rule-view that corresponds to the given
+ * selector.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} selectorText
+ *        The selector in the rule-view for which the rule
+ *        object is wanted
+ * @param {Number} index
+ *        If there are more than 1 rule with the same selector, you may pass a
+ *        index to determine which of the rules you want.
+ * @return {DOMNode}
+ */
+function getRuleViewRule(view, selectorText, index = 0) {
+  let rule;
+  let pos = 0;
+  for (const r of view.styleDocument.querySelectorAll(".ruleview-rule")) {
+    const selector = r.querySelector(
+      ".ruleview-selectors-container, .ruleview-selector.matched"
+    );
+    if (selector && selector.textContent === selectorText) {
+      if (index == pos) {
+        rule = r;
+        break;
+      }
+      pos++;
+    }
+  }
+
+  return rule;
+}
+
+/**
+ * Get references to the name and value span nodes corresponding to a given
+ * selector and property name in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} selectorText
+ *        The selector in the rule-view to look for the property in
+ * @param {String} propertyName
+ *        The name of the property
+ * @param {Object=} options
+ * @param {Boolean=} options.wait
+ *        When true, returns a promise which waits until a valid rule view
+ *        property can be retrieved for the provided selectorText & propertyName.
+ *        Defaults to false.
+ * @return {Object} An object like {nameSpan: DOMNode, valueSpan: DOMNode}
+ */
+function getRuleViewProperty(view, selectorText, propertyName, options = {}) {
+  if (options.wait) {
+    return waitFor(() =>
+      _syncGetRuleViewProperty(view, selectorText, propertyName)
+    );
+  }
+  return _syncGetRuleViewProperty(view, selectorText, propertyName);
+}
+
+function _syncGetRuleViewProperty(view, selectorText, propertyName) {
+  const rule = getRuleViewRule(view, selectorText);
+  if (!rule) {
+    return null;
+  }
+
+  // Look for the propertyName in that rule element
+  for (const p of rule.querySelectorAll(".ruleview-property")) {
+    const nameSpan = p.querySelector(".ruleview-propertyname");
+    const valueSpan = p.querySelector(".ruleview-propertyvalue");
+
+    if (nameSpan.textContent === propertyName) {
+      return { nameSpan, valueSpan };
+    }
+  }
+  return null;
+}
+
+/**
+ * Get the text value of the property corresponding to a given selector and name
+ * in the rule-view
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} selectorText
+ *        The selector in the rule-view to look for the property in
+ * @param {String} propertyName
+ *        The name of the property
+ * @return {String} The property value
+ */
+function getRuleViewPropertyValue(view, selectorText, propertyName) {
+  return getRuleViewProperty(view, selectorText, propertyName).valueSpan
+    .textContent;
+}
+
+/**
+ * Get a reference to the selector DOM element corresponding to a given selector
+ * in the rule-view
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} selectorText
+ *        The selector in the rule-view to look for
+ * @return {DOMNode} The selector DOM element
+ */
+function getRuleViewSelector(view, selectorText) {
+  const rule = getRuleViewRule(view, selectorText);
+  return rule.querySelector(
+    ".ruleview-selectors-container, .ruleview-selector.matched"
+  );
+}
+
+/**
+ * Get a rule-link from the rule-view given its index
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {Number} index
+ *        The index of the link to get
+ * @return {DOMNode} The link if any at this index
+ */
+function getRuleViewLinkByIndex(view, index) {
+  const links = view.styleDocument.querySelectorAll(".ruleview-rule-source");
+  return links[index];
+}
+
+/**
+ * Get rule-link text from the rule-view given its index
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {Number} index
+ *        The index of the link to get
+ * @return {String} The string at this index
+ */
+function getRuleViewLinkTextByIndex(view, index) {
+  const link = getRuleViewLinkByIndex(view, index);
+  return link.querySelector(".ruleview-rule-source-label").textContent;
+}
+
+/**
+ * Click on a rule-view's close brace to focus a new property name editor
+ *
+ * @param {RuleEditor} ruleEditor
+ *        An instance of RuleEditor that will receive the new property
+ * @return a promise that resolves to the newly created editor when ready and
+ * focused
+ */
+var focusNewRuleViewProperty = async function (ruleEditor) {
+  info("Clicking on a close ruleEditor brace to start editing a new property");
+
+  // Use bottom alignment to avoid scrolling out of the parent element area.
+  ruleEditor.closeBrace.scrollIntoView(false);
+  const editor = await focusEditableField(
+    ruleEditor.ruleView,
+    ruleEditor.closeBrace
+  );
+
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    editor,
+    "Focused editor is the new property editor."
+  );
+
+  return editor;
+};
+
+/**
+ * Create a new property name in the rule-view, focusing a new property editor
+ * by clicking on the close brace, and then entering the given text.
+ * Keep in mind that the rule-view knows how to handle strings with multiple
+ * properties, so the input text may be like: "p1:v1;p2:v2;p3:v3".
+ *
+ * @param {RuleEditor} ruleEditor
+ *        The instance of RuleEditor that will receive the new property(ies)
+ * @param {String} inputValue
+ *        The text to be entered in the new property name field
+ * @return a promise that resolves when the new property name has been entered
+ * and once the value field is focused
+ */
+var createNewRuleViewProperty = async function (ruleEditor, inputValue) {
+  info("Creating a new property editor");
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Entering the value " + inputValue);
+  editor.input.value = inputValue;
+
+  info("Submitting the new value and waiting for value field focus");
+  const onFocus = once(ruleEditor.element, "focus", true);
+  EventUtils.synthesizeKey(
+    "VK_RETURN",
+    {},
+    ruleEditor.element.ownerDocument.defaultView
+  );
+  await onFocus;
+};
+
+/**
+ * Set the search value for the rule-view filter styles search box.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} searchValue
+ *        The filter search value
+ * @return a promise that resolves when the rule-view is filtered for the
+ * search term
+ */
+var setSearchFilter = async function (view, searchValue) {
+  info('Setting filter text to "' + searchValue + '"');
+
+  const searchField = view.searchField;
+  searchField.focus();
+
+  for (const key of searchValue.split("")) {
+    EventUtils.synthesizeKey(key, {}, view.styleWindow);
+  }
+
+  await view.inspector.once("ruleview-filtered");
+};
+
+/**
+ * Flatten all context menu items into a single array to make searching through
+ * it easier.
+ */
+function buildContextMenuItems(menu) {
+  const allItems = [].concat.apply(
+    [],
+    menu.items.map(function addItem(item) {
+      if (item.submenu) {
+        return addItem(item.submenu.items);
+      }
+      return item;
+    })
+  );
+
+  return allItems;
+}
+
+/**
+ * Open the style editor context menu and return all of it's items in a flat array
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @return An array of MenuItems
+ */
+function openStyleContextMenuAndGetAllItems(view, target) {
+  const menu = view.contextMenu._openMenu({ target });
+  return buildContextMenuItems(menu);
+}
+
+/**
+ * Open the inspector menu and return all of it's items in a flat array
+ * @param {InspectorPanel} inspector
+ * @param {Object} options to pass into openMenu
+ * @return An array of MenuItems
+ */
+function openContextMenuAndGetAllItems(inspector, options) {
+  const menu = inspector.markup.contextMenu._openMenu(options);
+  return buildContextMenuItems(menu);
+}
+
+/**
+ * Wait until the elements the given selectors indicate come to have the visited state.
+ *
+ * @param {Tab} tab
+ *        The tab where the elements on.
+ * @param {Array} selectors
+ *        The selectors for the elements.
+ */
+async function waitUntilVisitedState(tab, selectors) {
+  await asyncWaitUntil(async () => {
+    const hasVisitedState = await ContentTask.spawn(
+      tab.linkedBrowser,
+      selectors,
+      args => {
+        // ElementState::VISITED
+        const ELEMENT_STATE_VISITED = 1 << 18;
+
+        for (const selector of args) {
+          const target =
+            content.wrappedJSObject.document.querySelector(selector);
+          if (
+            !(
+              target &&
+              InspectorUtils.getContentState(target) & ELEMENT_STATE_VISITED
+            )
+          ) {
+            return false;
+          }
+        }
+        return true;
+      }
+    );
+    return hasVisitedState;
+  });
+}
+
+/**
+ * Return wether or not the passed selector matches an element in the content page.
+ *
+ * @param {string} selector
+ * @returns Promise<Boolean>
+ */
+function hasMatchingElementInContentPage(selector) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector],
+    function (innerSelector) {
+      return content.document.querySelector(innerSelector) !== null;
+    }
+  );
+}
+
+/**
+ * Return the number of elements matching the passed selector.
+ *
+ * @param {string} selector
+ * @returns Promise<Number> the number of matching elements
+ */
+function getNumberOfMatchingElementsInContentPage(selector) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector],
+    function (innerSelector) {
+      return content.document.querySelectorAll(innerSelector).length;
+    }
+  );
+}
+
+/**
+ * Get the property of an element in the content page
+ *
+ * @param {string} selector: The selector to get the element we want the property of
+ * @param {string} propertyName: The name of the property we want the value of
+ * @returns {Promise} A promise that returns with the value of the property for the element
+ */
+function getContentPageElementProperty(selector, propertyName) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, propertyName],
+    function (innerSelector, innerPropertyName) {
+      return content.document.querySelector(innerSelector)[innerPropertyName];
+    }
+  );
+}
+
+/**
+ * Set the property of an element in the content page
+ *
+ * @param {string} selector: The selector to get the element we want to set the property on
+ * @param {string} propertyName: The name of the property we want to set
+ * @param {string} propertyValue: The value that is going to be assigned to the property
+ * @returns {Promise}
+ */
+function setContentPageElementProperty(selector, propertyName, propertyValue) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, propertyName, propertyValue],
+    function (innerSelector, innerPropertyName, innerPropertyValue) {
+      content.document.querySelector(innerSelector)[innerPropertyName] =
+        innerPropertyValue;
+    }
+  );
+}
+
+/**
+ * Get all the attributes for a DOM Node living in the content page.
+ *
+ * @param {String} selector The node selector
+ * @returns {Array<Object>} An array of {name, value} objects.
+ */
+async function getContentPageElementAttributes(selector) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector],
+    _selector => {
+      const node = content.document.querySelector(_selector);
+      return Array.from(node.attributes).map(({ name, value }) => ({
+        name,
+        value,
+      }));
+    }
+  );
+}
+
+/**
+ * Get an attribute on a DOM Node living in the content page.
+ *
+ * @param {String} selector The node selector
+ * @param {String} attribute The attribute name
+ * @return {String} value The attribute value
+ */
+async function getContentPageElementAttribute(selector, attribute) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, attribute],
+    (_selector, _attribute) => {
+      return content.document.querySelector(_selector).getAttribute(_attribute);
+    }
+  );
+}
+
+/**
+ * Set an attribute on a DOM Node living in the content page.
+ *
+ * @param {String} selector The node selector
+ * @param {String} attribute The attribute name
+ * @param {String} value The attribute value
+ */
+async function setContentPageElementAttribute(selector, attribute, value) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, attribute, value],
+    (_selector, _attribute, _value) => {
+      content.document
+        .querySelector(_selector)
+        .setAttribute(_attribute, _value);
+    }
+  );
+}
+
+/**
+ * Remove an attribute from a DOM Node living in the content page.
+ *
+ * @param {String} selector The node selector
+ * @param {String} attribute The attribute name
+ */
+async function removeContentPageElementAttribute(selector, attribute) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, attribute],
+    (_selector, _attribute) => {
+      content.document.querySelector(_selector).removeAttribute(_attribute);
+    }
+  );
+}
+
+/**
+ * Get the rule editor from the rule-view given its index
+ *
+ * @param {CssRuleView} ruleView
+ *        The instance of the rule-view panel
+ * @param {Number} childrenIndex
+ *        The children index of the element to get
+ * @param {Number} nodeIndex
+ *        The child node index of the element to get
+ * @return {DOMNode} The rule editor if any at this index
+ */
+function getRuleViewRuleEditor(ruleView, childrenIndex, nodeIndex) {
+  const child = ruleView.element.children[childrenIndex];
+  if (!child) {
+    return null;
+  }
+
+  return nodeIndex !== undefined
+    ? child.childNodes[nodeIndex]?._ruleEditor
+    : child._ruleEditor;
+}
+
+/**
+ * Get the TextProperty instance corresponding to a CSS declaration
+ * from a CSS rule in the Rules view.
+ *
+ * @param  {RuleView} ruleView
+ *         Instance of RuleView.
+ * @param  {Number} ruleIndex
+ *         The index of the CSS rule where to find the declaration.
+ * @param  {Object} declaration
+ *         An object representing the target declaration e.g. { color: red }.
+ *         The first TextProperty instance which matches will be returned.
+ * @return {TextProperty}
+ */
+function getTextProperty(ruleView, ruleIndex, declaration) {
+  const ruleEditor = getRuleViewRuleEditor(ruleView, ruleIndex);
+  const [[name, value]] = Object.entries(declaration);
+  const textProp = ruleEditor.rule.textProps.find(prop => {
+    return prop.name === name && prop.value === value;
+  });
+
+  if (!textProp) {
+    throw Error(
+      `Declaration ${name}:${value} not found on rule at index ${ruleIndex}`
+    );
+  }
+
+  return textProp;
+}
+
+/**
+ * Simulate changing the value of a property in a rule in the rule-view.
+ *
+ * @param {CssRuleView} ruleView
+ *        The instance of the rule-view panel
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be changed
+ * @param {String} value
+ *        The new value to be used. If null is passed, then the value will be
+ *        deleted
+ * @param {Object} options
+ * @param {Boolean} options.blurNewProperty
+ *        After the value has been changed, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
+ * @param {number} options.flushCount
+ *        The ruleview uses a manual flush for tests only, and some properties are
+ *        only updated after several flush. Allow tests to trigger several flushes
+ *        if necessary. Defaults to 1.
+ */
+async function setProperty(
+  ruleView,
+  textProp,
+  value,
+  { blurNewProperty = true, flushCount = 1 } = {}
+) {
+  info("Set property to: " + value);
+  await focusEditableField(ruleView, textProp.editor.valueSpan);
+
+  // Because of the manual flush approach used for tests, we might have an
+  // unknown number of debounced "preview" requests . Each preview should
+  // synchronously emit "start-preview-property-value".
+  // Listen to both this event and "ruleview-changed" which is emitted at the
+  // end of a preview and make sure each preview completes successfully.
+  let previewStartedCounter = 0;
+  const onStartPreview = () => previewStartedCounter++;
+  ruleView.on("start-preview-property-value", onStartPreview);
+
+  let previewCounter = 0;
+  const onPreviewApplied = () => previewCounter++;
+  ruleView.on("ruleview-changed", onPreviewApplied);
+
+  if (value === null) {
+    const onPopupOpened = once(ruleView.popup, "popup-opened");
+    EventUtils.synthesizeKey("VK_DELETE", {}, ruleView.styleWindow);
+    await onPopupOpened;
+  } else {
+    await wait(500);
+    EventUtils.sendString(value, ruleView.styleWindow);
+  }
+
+  info(`Flush debounced ruleview methods (remaining: ${flushCount})`);
+  ruleView.debounce.flush();
+  await waitFor(() => previewCounter >= previewStartedCounter);
+
+  flushCount--;
+
+  while (flushCount > 0) {
+    // Wait for some time before triggering a new flush to let new debounced
+    // functions queue in-between.
+    await wait(100);
+
+    info(`Flush debounced ruleview methods (remaining: ${flushCount})`);
+    ruleView.debounce.flush();
+    await waitFor(() => previewCounter >= previewStartedCounter);
+
+    flushCount--;
+  }
+
+  ruleView.off("start-preview-property-value", onStartPreview);
+  ruleView.off("ruleview-changed", onPreviewApplied);
+
+  const onValueDone = ruleView.once("ruleview-changed");
+  // In case the popup was opened, wait until it closes
+  let onPopupClosed;
+  if (ruleView.popup?.isOpen) {
+    // it might happen that the popup is still in the process of being opened,
+    // so wait until it's properly opened
+    await ruleView.popup._pendingShowPromise;
+    onPopupClosed = once(ruleView.popup, "popup-closed");
+  }
+
+  EventUtils.synthesizeKey(
+    blurNewProperty ? "VK_RETURN" : "VK_TAB",
+    {},
+    ruleView.styleWindow
+  );
+
+  info("Waiting for another ruleview-changed after setting property");
+  await onValueDone;
+
+  const focusNextOnEnter = Services.prefs.getBoolPref(
+    "devtools.inspector.rule-view.focusNextOnEnter"
+  );
+  if (blurNewProperty && !focusNextOnEnter) {
+    info("Force blur on the active element");
+    ruleView.styleDocument.activeElement.blur();
+  }
+  await onPopupClosed;
+}
diff --git a/devtools/client/inspector/test/sjs_slow-loading-image.sjs b/devtools/client/inspector/test/sjs_slow-loading-image.sjs
new file mode 100644
index 0000000000..c4b12d7c60
--- /dev/null
+++ b/devtools/client/inspector/test/sjs_slow-loading-image.sjs
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+function handleRequest(request, response) {
+  response.processAsync();
+
+  const params = new Map(
+    request.queryString
+      .replace("?", "")
+      .split("&")
+      .map(s => s.split("="))
+  );
+  const delay = params.has("delay") ? params.get("delay") : 2000;
+
+  let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+  timer.initWithCallback(
+    () => {
+      // to avoid garbage collection
+      timer = null;
+      response.setStatusLine(request.httpVersion, 200, "OK");
+      response.setHeader("Content-Type", "image/svg+xml", false);
+      // This is the mozilla logo
+      response.write(`<svg viewBox="0 0 280 80" width="280" height="80" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 0h279.77v80H0z"/>
+        <path d="M267.208 57.423c-.545.154-1.007.238-1.468.238-1.637 0-2.406-.7-2.406-2.714V39.74c0-7.987-6.365-11.876-13.891-11.876-5.75 0-8.84.7-14.982 3.175l-1.37 8.058 7.987.853 1.133-3.945c1.637-.853 3.26-1.007 5.357-1.007 5.666 0 5.75 4.267 5.75 7.834v1.16c-1.79-.237-3.805-.307-5.75-.307-7.987 0-16.296 2.014-16.296 10.631 0 7.288 5.735 10.016 10.785 10.016 5.665 0 9.232-3.413 11.247-6.98.461 4.266 3.021 6.98 7.68 6.98 2.168 0 4.42-.615 6.28-1.637l-.056-5.273zm-21.486-.224c-3.022 0-4.113-1.79-4.113-4.043 0-3.805 3.106-4.812 6.673-4.812 1.623 0 3.413.238 5.05.462-.238 5.833-4.043 8.393-7.61 8.393zm-13.443-47.03l-15.136 53.395h-9.861l15.135-53.394h9.862zm-20.325 0l-15.136 53.395h-9.848l15.136-53.394h9.848zm-42.022 18.396h10.478v12.561h-10.478V28.565zm0 22.423h10.478v12.576h-10.478V50.988zm-15.247-.462l7.917.77-2.168 12.268h-30.579l-1.007-5.274 19.248-22.116h-10.939l-1.552 5.428-7.219-.784 1.245-12.267h30.733l.784 5.273-19.417 22.13h11.331l1.623-5.428zm-50.149-22.66c-12.576 0-18.786 8.462-18.786 18.702 0 11.177 7.455 17.765 18.24 17.765 11.177 0 19.249-7.064 19.249-18.24 0-9.779-6.141-18.228-18.703-18.228zm-.238 28.787c-5.427 0-8.225-4.658-8.225-10.715 0-6.602 3.175-10.393 8.31-10.393 4.727 0 8.532 3.175 8.532 10.24 0 6.672-3.413 10.868-8.617 10.868zm-27.557-.699h4.658v7.61H66.725v-19.71c0-6.057-2.014-8.38-5.973-8.38-4.812 0-6.756 3.414-6.756 8.31v12.17h4.658v7.61h-14.66v-19.71c0-6.057-2.015-8.38-5.973-8.38-4.812 0-6.757 3.414-6.757 8.31v12.17h6.673v7.61H16.604v-7.61h4.659V36.16h-4.659v-7.61h14.66v5.274c2.099-3.72 5.75-5.973 10.632-5.973 5.05 0 9.694 2.406 11.414 7.526 1.945-4.658 5.903-7.526 11.415-7.526 6.28 0 12.03 3.805 12.03 12.1v16.003z" fill="#fff"/>
+      </svg>`);
+      response.finish();
+    },
+    delay,
+    Ci.nsITimer.TYPE_ONE_SHOT
+  );
+}
diff --git a/devtools/client/inspector/test/style_inspector_csp.css b/devtools/client/inspector/test/style_inspector_csp.css
new file mode 100644
index 0000000000..74031be4d2
--- /dev/null
+++ b/devtools/client/inspector/test/style_inspector_csp.css
@@ -0,0 +1,3 @@
+html {
+  background: red;
+}
diff --git a/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css b/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css
new file mode 100644
index 0000000000..b719c60846
--- /dev/null
+++ b/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css
@@ -0,0 +1,3 @@
+body {
+  color: red;
+}
\ No newline at end of file
diff --git a/devtools/client/inspector/toolsidebar.js b/devtools/client/inspector/toolsidebar.js
new file mode 100644
index 0000000000..cff5eb96fa
--- /dev/null
+++ b/devtools/client/inspector/toolsidebar.js
@@ -0,0 +1,326 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+function ToolSidebar(tabbox, panel, uid, options = {}) {
+  EventEmitter.decorate(this);
+
+  this._tabbox = tabbox;
+  this._uid = uid;
+  this._panelDoc = this._tabbox.ownerDocument;
+  this._toolPanel = panel;
+  this._options = options;
+
+  if (!options.disableTelemetry) {
+    this._telemetry = this._toolPanel.telemetry;
+  }
+
+  this._tabs = [];
+
+  if (this._options.hideTabstripe) {
+    this._tabbox.setAttribute("hidetabs", "true");
+  }
+
+  this.render();
+
+  this._toolPanel.emit("sidebar-created", this);
+}
+
+exports.ToolSidebar = ToolSidebar;
+
+ToolSidebar.prototype = {
+  TABPANEL_ID_PREFIX: "sidebar-panel-",
+
+  // React
+
+  get React() {
+    return this._toolPanel.React;
+  },
+
+  get ReactDOM() {
+    return this._toolPanel.ReactDOM;
+  },
+
+  get browserRequire() {
+    return this._toolPanel.browserRequire;
+  },
+
+  get InspectorTabPanel() {
+    return this._toolPanel.InspectorTabPanel;
+  },
+
+  get TabBar() {
+    return this._toolPanel.TabBar;
+  },
+
+  // Rendering
+
+  render() {
+    const sidebar = this.TabBar({
+      menuDocument: this._toolPanel._toolbox.doc,
+      showAllTabsMenu: true,
+      allTabsMenuButtonTooltip: this._options.allTabsMenuButtonTooltip,
+      sidebarToggleButton: this._options.sidebarToggleButton,
+      onSelect: this.handleSelectionChange.bind(this),
+    });
+
+    this._tabbar = this.ReactDOM.render(sidebar, this._tabbox);
+  },
+
+  /**
+   * Adds all the queued tabs.
+   */
+  addAllQueuedTabs() {
+    this._tabbar.addAllQueuedTabs();
+  },
+
+  /**
+   * Register a side-panel tab.
+   *
+   * @param {String} tab uniq id
+   * @param {String} title tab title
+   * @param {React.Component} panel component. See `InspectorPanelTab` as an example.
+   * @param {Boolean} selected true if the panel should be selected
+   * @param {Number} index the position where the tab should be inserted
+   */
+  addTab(id, title, panel, selected, index) {
+    this._tabbar.addTab(id, title, selected, panel, null, index);
+    this.emit("new-tab-registered", id);
+  },
+
+  /**
+   * Helper API for adding side-panels that use existing DOM nodes
+   * (defined within inspector.xhtml) as the content.
+   *
+   * @param {String} tab uniq id
+   * @param {String} title tab title
+   * @param {Boolean} selected true if the panel should be selected
+   * @param {Number} index the position where the tab should be inserted
+   */
+  addExistingTab(id, title, selected, index) {
+    const panel = this.InspectorTabPanel({
+      id,
+      idPrefix: this.TABPANEL_ID_PREFIX,
+      key: id,
+      title,
+    });
+
+    this.addTab(id, title, panel, selected, index);
+  },
+
+  /**
+   * Queues a side-panel tab to be added..
+   *
+   * @param {String} tab uniq id
+   * @param {String} title tab title
+   * @param {React.Component} panel component. See `InspectorPanelTab` as an example.
+   * @param {Boolean} selected true if the panel should be selected
+   * @param {Number} index the position where the tab should be inserted
+   */
+  queueTab(id, title, panel, selected, index) {
+    this._tabbar.queueTab(id, title, selected, panel, null, index);
+    this.emit("new-tab-registered", id);
+  },
+
+  /**
+   * Helper API for queuing side-panels that use existing DOM nodes
+   * (defined within inspector.xhtml) as the content.
+   *
+   * @param {String} tab uniq id
+   * @param {String} title tab title
+   * @param {Boolean} selected true if the panel should be selected
+   * @param {Number} index the position where the tab should be inserted
+   */
+  queueExistingTab(id, title, selected, index) {
+    const panel = this.InspectorTabPanel({
+      id,
+      idPrefix: this.TABPANEL_ID_PREFIX,
+      key: id,
+      title,
+    });
+
+    this.queueTab(id, title, panel, selected, index);
+  },
+
+  /**
+   * Remove an existing tab.
+   * @param {String} tabId The ID of the tab that was used to register it, or
+   * the tab id attribute value if the tab existed before the sidebar
+   * got created.
+   * @param {String} tabPanelId Optional. If provided, this ID will be used
+   * instead of the tabId to retrieve and remove the corresponding <tabpanel>
+   */
+  removeTab(tabId, tabPanelId) {
+    this._tabbar.removeTab(tabId);
+
+    this.emit("tab-unregistered", tabId);
+  },
+
+  /**
+   * Show or hide a specific tab.
+   * @param {Boolean} isVisible True to show the tab/tabpanel, False to hide it.
+   * @param {String} id The ID of the tab to be hidden.
+   */
+  toggleTab(isVisible, id) {
+    this._tabbar.toggleTab(id, isVisible);
+  },
+
+  /**
+   * Select a specific tab.
+   */
+  select(id) {
+    this._tabbar.select(id);
+  },
+
+  /**
+   * Return the id of the selected tab.
+   */
+  getCurrentTabID() {
+    return this._currentTool;
+  },
+
+  /**
+   * Returns the requested tab panel based on the id.
+   * @param {String} id
+   * @return {DOMNode}
+   */
+  getTabPanel(id) {
+    // Search with and without the ID prefix as there might have been existing
+    // tabpanels by the time the sidebar got created
+    return this._panelDoc.querySelector(
+      "#" + this.TABPANEL_ID_PREFIX + id + ", #" + id
+    );
+  },
+
+  /**
+   * Event handler.
+   */
+  handleSelectionChange(id) {
+    if (this._destroyed) {
+      return;
+    }
+
+    const previousTool = this._currentTool;
+    if (previousTool) {
+      this.emit(previousTool + "-unselected");
+    }
+
+    this._currentTool = id;
+
+    this.updateTelemetryOnChange(id, previousTool);
+    this.emit(this._currentTool + "-selected");
+    this.emit("select", this._currentTool);
+  },
+
+  /**
+   * Log toolClosed and toolOpened events on telemetry.
+   *
+   * @param  {String} currentToolId
+   *         id of the tool being selected.
+   * @param  {String} previousToolId
+   *         id of the previously selected tool.
+   */
+  updateTelemetryOnChange(currentToolId, previousToolId) {
+    if (currentToolId === previousToolId || !this._telemetry) {
+      // Skip telemetry if the tool id did not change or telemetry is unavailable.
+      return;
+    }
+
+    currentToolId = this.getTelemetryPanelNameOrOther(currentToolId);
+
+    if (previousToolId) {
+      previousToolId = this.getTelemetryPanelNameOrOther(previousToolId);
+      this._telemetry.toolClosed(previousToolId, this);
+
+      this._telemetry.recordEvent("sidepanel_changed", "inspector", null, {
+        oldpanel: previousToolId,
+        newpanel: currentToolId,
+        os: this._telemetry.osNameAndVersion,
+      });
+    }
+    this._telemetry.toolOpened(currentToolId, this);
+  },
+
+  /**
+   * Returns a panel id in the case of built in panels or "other" in the case of
+   * third party panels. This is necessary due to limitations in addon id strings,
+   * the permitted length of event telemetry property values and what we actually
+   * want to see in our telemetry.
+   *
+   * @param {String} id
+   *        The panel id we would like to process.
+   */
+  getTelemetryPanelNameOrOther(id) {
+    if (!this._toolNames) {
+      // Get all built in tool ids. We identify third party tool ids by checking
+      // for a "-", which shows it originates from an addon.
+      const ids = this._tabbar.state.tabs.map(({ id: toolId }) => {
+        return toolId.includes("-") ? "other" : toolId;
+      });
+
+      this._toolNames = new Set(ids);
+    }
+
+    if (!this._toolNames.has(id)) {
+      return "other";
+    }
+
+    return id;
+  },
+
+  /**
+   * Show the sidebar.
+   *
+   * @param  {String} id
+   *         The sidebar tab id to select.
+   */
+  show(id) {
+    this._tabbox.hidden = false;
+
+    // If an id is given, select the corresponding sidebar tab.
+    if (id) {
+      this.select(id);
+    }
+
+    this.emit("show");
+  },
+
+  /**
+   * Show the sidebar.
+   */
+  hide() {
+    this._tabbox.hidden = true;
+
+    this.emit("hide");
+  },
+
+  /**
+   * Clean-up.
+   */
+  destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+
+    this.emit("destroy");
+
+    if (this._currentTool && this._telemetry) {
+      this._telemetry.toolClosed(this._currentTool, this);
+    }
+
+    this._toolPanel.emit("sidebar-destroyed", this);
+
+    this.ReactDOM.unmountComponentAtNode(this._tabbox);
+
+    this._tabs = null;
+    this._tabbox = null;
+    this._telemetry = null;
+    this._panelDoc = null;
+    this._toolPanel = null;
+  },
+};